/* =========================================================
   Black / White portfolio — trial build
   Black is the world, white is the event.
   ========================================================= */
:root {
  --bg: #0a0a0a;
  --fg: #f2f2f0;
  --muted: #7d7d7a;
  --line: rgba(242, 242, 240, 0.12);
  --g: clamp(16px, 3vw, 40px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1); /* ≈ power3.out */
  /* Latin glyphs come from Geist, Arabic glyphs fall through to Noto Kufi (per character) */
  --sans: "Geist", "Noto Kufi Arabic", "Helvetica Neue", Arial, sans-serif;
  --dir: 1; /* flips horizontal motion in RTL */
  color-scheme: dark; /* single deliberate dark look: native scrollbars/controls follow it */
  --serif: "Instrument Serif", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* the router hides whole views; display:flex rules must not win */
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--sans); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; padding: 0; }
ul { list-style: none; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; }
::selection { background: var(--fg); color: var(--bg); }

.label { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* ---------- fixed chrome (difference blend → auto-inverts on white) ---------- */
.brand, .nav, .section-label, .progress { mix-blend-mode: difference; color: #fff; }
.brand {
  position: fixed; left: var(--g); top: 0; z-index: 60;
  transform-origin: 0 0; will-change: transform; line-height: 0;
  visibility: hidden; /* shown by JS once positioned */
}
.brand__text {
  display: block; font-weight: 800; letter-spacing: -0.055em; line-height: 0.8;
  font-size: 18vw; white-space: nowrap; padding-top: 0.04em;
}
.nav {
  position: fixed; top: 20px; right: var(--g); z-index: 60;
  display: flex; gap: 26px; font-size: 14px;
}
.nav a { position: relative; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform 0.45s var(--ease);
}
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.section-label {
  position: fixed; left: var(--g); bottom: 18px; z-index: 60;
  font-size: 12px; letter-spacing: 0.08em; display: flex;
}
.section-label__mask { display: inline-block; overflow: hidden; vertical-align: top; height: 1.5em; }
.section-label__mask span { display: inline-block; }
.progress {
  position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 61;
  background: #fff; transform: scaleX(0); transform-origin: 0 50%;
}

/* ---------- grain ---------- */
.grain {
  /* -10% (not -50%): the shifting layer was 4× the screen; 1.4× is enough to hide the edges */
  position: fixed; inset: -10%; z-index: 90; pointer-events: none; opacity: 0.07; will-change: transform;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -5%); }
  60% { transform: translate(-6%, -2%); } 80% { transform: translate(5%, 4%); } 100% { transform: translate(0, 0); }
}

/* ---------- page transition curtain (white = event) ---------- */
.curtain {
  position: fixed; inset: 0; z-index: 95; background: var(--fg); color: var(--bg);
  display: flex; align-items: flex-end; padding: var(--g);
  transform: translateY(100%); pointer-events: none;
}
.arriving .curtain { transform: none; animation: failsafe 0s 4s forwards; } /* never a stuck white screen if a script fails */
/* hosted pages can take a few seconds to load: show that something is happening */
.curtain.is-loading::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--bg);
  transform-origin: 0 50%; animation: curtain-load 7s cubic-bezier(0.1, 0.6, 0.2, 1) forwards;
}
[dir="rtl"] .curtain.is-loading::after { transform-origin: 100% 50%; }
@keyframes curtain-load { from { transform: scaleX(0); } to { transform: scaleX(0.94); } }
.skip-pl .preloader { display: none; }
.curtain__label { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- preloader (white columns collapse into the black page) ---------- */
.preloader { position: fixed; inset: 0; z-index: 96; animation: failsafe 0s 6s forwards; }
@keyframes failsafe { to { visibility: hidden; } }
.preloader__cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.preloader__col { background: var(--fg); }
.preloader__center {
  position: absolute; left: var(--g); right: var(--g); top: 50%; transform: translateY(-50%);
  color: var(--bg); font-size: clamp(22px, 2.6vw, 34px); font-weight: 500; letter-spacing: -0.02em;
  display: flex; gap: 0.35em; flex-wrap: wrap;
}
.preloader__count { position: absolute; right: var(--g); bottom: var(--g); color: var(--bg); font-size: 13px; letter-spacing: 0.1em; }
.mask { display: inline-block; overflow: hidden; vertical-align: top; }
.mask > * { display: inline-block; }

/* ---------- hero ---------- */
.hero { position: relative; height: 100vh; min-height: 560px; }
.hero__lines { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); pointer-events: none; }
.hero__lines i { border-right: 1px solid var(--line); }
.hero__lines i:last-child { border-right: 0; }
.hero__top {
  position: absolute; top: 96px; left: var(--g); right: var(--g);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--g);
}
.hero__role { grid-column: 1; font-size: 15px; line-height: 1.35; }
.hero__role em { font-size: 1.25em; color: var(--muted); }
.hero__meta { grid-column: 4; font-size: 13px; color: var(--muted); line-height: 1.5; }
.hero__meta strong { color: var(--fg); font-weight: 500; }
.hero__badge { position: absolute; right: var(--g); top: 38%; width: 120px; height: 120px; }
.hero__badge svg { width: 100%; height: 100%; animation: spin 18s linear infinite; }
.hero__badge text { font-size: 9.5px; fill: var(--fg); text-transform: uppercase; }
.hero__badge::after { content: "✦"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 18px; }
@keyframes spin { to { transform: rotate(360deg); } }
.hero__scroll { position: absolute; right: var(--g); bottom: 18px; font-size: 12px; letter-spacing: 0.08em; color: var(--muted); }

/* ---------- statement (scroll-read) ---------- */
.statement { padding: 48vh var(--g) 18vh; } /* text arrives only after the name has docked */
.statement__text {
  font-size: clamp(26px, 3.5vw, 56px); line-height: 1.1; letter-spacing: -0.03em; font-weight: 500;
  max-width: 21em;
}
.statement__text em { font-size: 1.08em; letter-spacing: -0.01em; }

/* ---------- selected work (sticky stack) ---------- */
.work__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 0 var(--g) 28px; border-bottom: 1px solid var(--line);
}
.work__head h2 { font-size: clamp(40px, 7vw, 112px); font-weight: 600; letter-spacing: -0.05em; line-height: 0.9; }
.work__count { font-size: 14px; color: var(--muted); }
.work-card { position: sticky; top: 0; height: 100vh; }
.work-card__inner {
  position: relative; height: 100%; background: var(--bg); border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr 1.65fr; gap: var(--g); padding: 90px var(--g) var(--g);
  transform-origin: 50% 0; will-change: transform;
}
.work-card__dim { position: absolute; inset: 0; z-index: 2; background: #000; opacity: 0; border-radius: inherit; pointer-events: none; }
.work-card__meta { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 8px; }
.work-card__index { font-size: 13px; color: var(--muted); letter-spacing: 0.06em; }
.work-card__title { font-size: clamp(36px, 5vw, 84px); font-weight: 600; letter-spacing: -0.05em; line-height: 0.92; margin: auto 0 18px; }
.work-card__cat { font-size: 15px; color: var(--muted); margin-bottom: 28px; }
.work-card__cat em { color: var(--fg); font-size: 1.2em; }
.work-card__media { position: relative; display: block; overflow: hidden; border-radius: 6px; background: #151515; }
.link-arrow { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; align-self: flex-start; position: relative; padding-bottom: 3px; }
.link-arrow::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: left; transition: transform 0.5s var(--ease); }
.link-arrow:hover::after { transform: scaleX(0); transform-origin: right; }
.link-arrow span { transition: transform 0.4s var(--ease); }
.link-arrow:hover span { transform: translate(3px, -3px); }

/* ---------- index list (hover inverts to white) ---------- */
.index { padding: 22vh 0 16vh; position: relative; z-index: 2; background: var(--bg); }
.index__head { display: flex; justify-content: space-between; padding: 0 var(--g) 20px; }
.index__list { border-top: 1px solid var(--line); }
.index-row {
  position: relative; display: grid; grid-template-columns: 60px 1.6fr 1fr 80px 30px; gap: 20px; align-items: center;
  padding: 26px var(--g); border-bottom: 1px solid var(--line); overflow: hidden; isolation: isolate;
  transition: color 0.35s var(--ease);
}
.index-row::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fg);
  transform: scaleY(0); transform-origin: 50% 100%; transition: transform 0.45s var(--ease);
}
.index-row:hover { color: var(--bg); }
.index-row:hover::before { transform: scaleY(1); }
.index-row__n, .index-row__year { font-size: 13px; letter-spacing: 0.06em; }
.index-row__title { font-size: clamp(24px, 3vw, 44px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; transition: transform 0.5s var(--ease); }
.index-row:hover .index-row__title { transform: translateX(calc(14px * var(--dir))); }
.index-row__cat { font-size: 15px; color: var(--muted); transition: color 0.35s; }
.index-row:hover .index-row__cat { color: var(--bg); }
.index-row__arrow { font-size: 18px; transform: translate(-8px, 8px); opacity: 0; transition: transform 0.45s var(--ease), opacity 0.3s; }
.index-row:hover .index-row__arrow { transform: none; opacity: 1; }

/* ---------- about ---------- */
.about { padding: 8vh 0 18vh; position: relative; z-index: 2; background: var(--bg); }
.about__grid { display: grid; grid-template-columns: 1fr 2fr; gap: var(--g); padding: 0 var(--g); align-items: start; }
.about__bio { font-size: clamp(26px, 3.2vw, 50px); line-height: 1.12; letter-spacing: -0.03em; font-weight: 500; }
.about__bio .pill { display: inline-block; padding: 0 0.3em; border-radius: 0.25em; background: var(--fg); color: var(--bg); }
.services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--g); margin-top: 60px; border-top: 1px solid var(--line); }
.services li { display: flex; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 17px; }
.services li span { color: var(--muted); font-size: 13px; padding-top: 3px; }
.marquee { margin-top: 16vh; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 28px 0; }
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__track span { font-size: clamp(40px, 6vw, 96px); font-weight: 600; letter-spacing: -0.045em; padding-right: 0.6em; white-space: nowrap; line-height: 1; }
.marquee__track span:nth-child(even) { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--muted); }

/* ---------- contact (the white climax) ---------- */
.contact { position: relative; z-index: 2; background: var(--bg); }
.contact__panel {
  min-height: 100vh; background: var(--fg); color: var(--bg);
  display: flex; flex-direction: column; justify-content: center; padding: 120px var(--g) 56px; /* clear the fixed section label */
  clip-path: inset(12% 8% 0% 8% round 28px); will-change: clip-path;
}
.contact__kicker { font-size: 15px; margin-bottom: 18px; }
.contact__title {
  font-size: clamp(72px, 15vw, 260px); font-weight: 300; letter-spacing: -0.06em; line-height: 0.85;
  margin-left: -0.04em; cursor: default;
}
.contact__title .char { display: inline-block; }
.contact__mail {
  margin-top: 44px; align-self: flex-start; font-size: clamp(20px, 2.4vw, 34px); letter-spacing: -0.02em;
  border-bottom: 2px solid currentColor; padding-bottom: 6px;
  max-width: 100%; white-space: nowrap; overflow: hidden; /* never widen the page */
}
.roll { display: inline-grid; overflow: hidden; height: 1.25em; line-height: 1.25em; }
.roll > span { grid-area: 1 / 1; transition: transform 0.5s var(--ease); }
.roll > span + span { transform: translateY(100%); }
.contact__mail.is-copied .roll > span:first-child { transform: translateY(-100%); }
.contact__mail.is-copied .roll > span + span { transform: none; }
.contact__foot {
  margin-top: auto; padding-top: 80px; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--g);
  font-size: 14px; border-top: 1px solid rgba(10, 10, 10, 0.15); padding-top: 22px;
}
.contact__foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.contact__foot .label { color: #6a6a66; }

/* =========================================================
   PROJECT PAGE
   ========================================================= */
.p-hero { padding: 26vh var(--g) 6vh; }
.p-hero__index { display: block; margin-bottom: 24px; }
.p-hero__title { font-size: clamp(52px, 10vw, 180px); font-weight: 700; letter-spacing: -0.06em; line-height: 0.86; margin-left: -0.04em; }
.p-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--g); margin-top: 8vh; border-top: 1px solid var(--line); padding-top: 18px; }
.p-meta dt { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.p-meta dd { font-size: 16px; }
.p-cover { margin: 0 var(--g); height: 86vh; border-radius: 6px; overflow: hidden; position: relative; clip-path: inset(100% 0 0 0); }
.p-cover__inner { position: absolute; inset: -8% 0; }
.p-brief { display: grid; grid-template-columns: 1fr 2fr; gap: var(--g); padding: 18vh var(--g); }
.p-brief__text { font-size: clamp(24px, 2.8vw, 44px); line-height: 1.15; letter-spacing: -0.03em; font-weight: 500; }
.p-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g); padding: 0 var(--g); }
.p-shot { position: relative; border-radius: 6px; overflow: hidden; background: #151515; }
.p-shot--full { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.p-shot--half { aspect-ratio: 4 / 5; }
.p-shot figcaption { position: absolute; left: 14px; bottom: 12px; z-index: 3; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; mix-blend-mode: difference; color: #fff; }
.p-next { display: block; margin-top: 20vh; padding: 10vh var(--g) 14vh; border-top: 1px solid var(--line); position: relative; overflow: hidden; isolation: isolate; transition: color 0.4s var(--ease); }
.p-next::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fg); transform: scaleY(0); transform-origin: 50% 100%; transition: transform 0.6s var(--ease); }
.p-next:hover { color: var(--bg); }
.p-next:hover::before { transform: scaleY(1); }
.p-next__title { display: block; margin-top: 18px; font-size: clamp(48px, 10vw, 170px); font-weight: 700; letter-spacing: -0.06em; line-height: 0.88; }
.p-next__title em { font-weight: 400; }

/* =========================================================
   PLACEHOLDER ART (container-relative so it scales anywhere)
   ========================================================= */
.art { position: absolute; inset: 0; container-type: size; overflow: hidden; }
.art--img img { width: 100%; height: 100%; object-fit: cover; }
.art i, .art span, .art b { position: absolute; display: block; }
.art--zoom > * { transform: scale(1.7) translate(8%, -6%); transform-origin: 30% 60%; }
.art--invert { filter: invert(1); }

/* 1 — Nour: eclipse + lowercase wordmark */
.art--1 { background: #0e0e0e; color: #f2f2f0; }
.a1-sun { width: 52cqmin; aspect-ratio: 1; border-radius: 50%; background: #f2f2f0; left: 50%; top: 42%; translate: -50% -50%; }
.a1-moon { width: 52cqmin; aspect-ratio: 1; border-radius: 50%; background: #0e0e0e; left: 50%; top: 42%; translate: -28% -58%; }
.a1-word { left: 5cqw; bottom: 2cqh; font-size: 24cqw; font-weight: 800; letter-spacing: -0.07em; line-height: 0.8; }
.a1-meta { right: 5cqw; top: 5cqh; font-size: max(9px, 1.7cqw); letter-spacing: 0.15em; text-align: right; line-height: 1.5; }

/* 2 — Film Week: giant numeral on white */
.art--2 { background: #f2f2f0; color: #0e0e0e; }
.a2-title { left: 5cqw; top: 5cqh; font-size: max(10px, 4.4cqw); font-weight: 800; letter-spacing: -0.03em; line-height: 0.95; }
.a2-date { right: 14cqw; top: 5cqh; font-size: max(9px, 1.8cqw); letter-spacing: 0.15em; }
.a2-strip { right: 4cqw; top: 0; bottom: 0; width: 6cqw; background: repeating-linear-gradient(#0e0e0e 0 6cqw, transparent 6cqw 8cqw); border-inline: 1.2cqw solid #0e0e0e; }
.a2-num { left: -2cqw; bottom: -8cqh; font-size: 78cqh; font-weight: 900; letter-spacing: -0.09em; line-height: 0.8; }

/* 3 — Dijla Serif: specimen */
.art--3 { background: #0e0e0e; color: #f2f2f0; }
.a3-lines { inset: 0; background: repeating-linear-gradient(transparent 0 calc(25cqh - 1px), rgba(242,242,240,.18) calc(25cqh - 1px) 25cqh); }
.a3-aa { left: 5cqw; top: 50%; translate: 0 -54%; font-family: var(--serif); font-style: italic; font-size: 70cqh; line-height: 1; letter-spacing: -0.03em; }
.a3-label { left: 5cqw; top: 5cqh; font-size: max(9px, 1.7cqw); letter-spacing: 0.15em; }
.a3-glyphs { right: 5cqw; bottom: 6cqh; width: 30cqw; font-family: var(--serif); font-size: max(10px, 3cqw); line-height: 1.3; word-spacing: 0.4em; text-align: right; }

/* 4 — Atlas: vinyl grooves */
.art--4 { background: #171717; color: #0e0e0e; }
.a4-disc {
  width: 84cqmin; aspect-ratio: 1; border-radius: 50%; left: 50%; top: 50%; translate: -50% -50%;
  background: repeating-radial-gradient(circle, #0b0b0b 0 0.7cqmin, #222 0.7cqmin 1.1cqmin);
  box-shadow: 0 2cqmin 6cqmin rgba(0,0,0,.5);
  animation: spin 9s linear infinite;
}
.a4-disc b { left: 50%; top: 50%; translate: -50% -50%; width: 30cqmin; aspect-ratio: 1; border-radius: 50%; background: #f2f2f0; display: grid; place-content: center; text-align: center; font-size: 4.4cqmin; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.a4-disc small { display: block; font-size: 2cqmin; letter-spacing: 0.2em; font-weight: 500; margin-top: 1cqmin; }
.a4-meta { left: 5cqw; bottom: 5cqh; font-size: max(9px, 1.6cqw); letter-spacing: 0.15em; color: #f2f2f0; }

/* 5 — Book Fair: spines */
.art--5 { background: #f2f2f0; color: #0e0e0e; }
.a5-title { left: 5cqw; top: 5cqh; font-size: max(11px, 6cqw); font-weight: 800; letter-spacing: -0.04em; line-height: 0.9; }
.a5-year { right: 5cqw; top: 5cqh; font-size: max(9px, 1.8cqw); letter-spacing: 0.15em; }
.a5-books { left: 5cqw; right: 5cqw; bottom: 0; height: 58cqh; display: flex !important; align-items: flex-end; gap: 1.4cqw; }
.a5-books i { position: relative; flex: 1; height: var(--h); background: #0e0e0e; }
.a5-books i:nth-child(3n) { background: #6d6d6a; }
.a5-books b { left: 50%; top: 4cqh; translate: -50% 0; writing-mode: vertical-rl; color: #f2f2f0; font-size: max(8px, 1.8cqw); letter-spacing: 0.2em; font-weight: 600; }

/* =========================================================
   REAL WORK: poster fan (home), cover flow + viewer (project)
   ========================================================= */
.art--fan { background: var(--tone); }
.art--fan .fan__card {
  position: absolute; left: 50%; top: 50%; height: 78cqh; width: auto; aspect-ratio: var(--card-ratio, 4 / 5);
  translate: -50% -50%; border-radius: 1.2cqh; object-fit: cover;
  box-shadow: 0 2.5cqh 7cqh -1cqh rgba(45, 30, 15, 0.45);
  transform: translateX(calc(var(--i) * 30cqh * var(--dir))) rotate(calc(var(--i) * 6deg * var(--dir))) scale(var(--s));
  transition: transform 0.9s var(--ease);
}
a:hover .art--fan .fan__card { transform: translateX(calc(var(--i) * 38cqh * var(--dir))) rotate(calc(var(--i) * 10deg * var(--dir))) scale(var(--s)); }

.p-hero { position: relative; }
/* previous / next project, always within reach */
.pager { position: fixed; bottom: 14px; inset-inline-end: var(--g); z-index: 60; display: flex; gap: 8px; mix-blend-mode: difference; color: #fff; }
.pager__btn {
  display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px; border-radius: 40px;
  border: 1px solid rgba(255, 255, 255, 0.4); font-size: 13px; letter-spacing: 0.02em; transition: background 0.3s, color 0.3s;
}
.pager__btn:hover { background: #fff; color: #000; }
.pager__arrow { font-size: 15px; transition: transform 0.4s var(--ease); }
.pager__btn:first-child:hover .pager__arrow { transform: translateX(calc(-4px * var(--dir))); }
.pager__btn:last-child:hover .pager__arrow { transform: translateX(calc(4px * var(--dir))); }
.p-hero__seal { position: absolute; top: 24vh; inset-inline-end: var(--g); width: clamp(84px, 9vw, 130px); opacity: 0.9; }

.p-flow { padding: 2vh 0 12vh; overflow: hidden; }
.flow { position: relative; height: min(76vh, 760px); perspective: 1600px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.flow__card {
  position: absolute; left: 50%; top: 50%; height: 100%; aspect-ratio: var(--card-ratio, 4 / 5); margin: 0; padding: 0;
  border-radius: 8px; overflow: hidden; background: #1a1a1a; /* centred by GSAP xPercent/yPercent */
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9); will-change: transform;
}
.flow__card img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.flow__shade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.flow__ui { display: flex; justify-content: center; align-items: center; gap: 22px; margin-top: 30px; }
.flow__btn {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center;
  font-size: 18px; transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.flow__btn:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.flow__count { font-size: 14px; color: var(--muted); min-width: 64px; text-align: center; }
.flow__caption { text-align: center; margin: 22px auto 0; padding: 0 var(--g); max-width: 34em; font-size: clamp(18px, 2vw, 28px); letter-spacing: -0.02em; min-height: 1.4em; }
.flow__hint { text-align: center; margin-top: 10px; }

.p-shot--poster { aspect-ratio: var(--card-ratio, 4 / 5); cursor: zoom-in; }
.p-shot--poster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--ease); }
.p-shot--poster:hover img { transform: scale(1.03); }
/* size container: a % max-height can't resolve inside an aspect-ratio box, so tall logos (Baab Rizq) need cqh */
.p-shot--logo { grid-column: 1 / -1; aspect-ratio: 16 / 7; background: #17130f; display: grid; place-items: center; container-type: size; }
.p-shot--logo img { width: auto; height: auto; max-width: min(42%, 520px); max-height: 82cqh; object-fit: contain; }
.p-shot--mockwrap { grid-column: 1 / -1; width: min(100%, var(--w, 880px)); margin-inline: auto !important; }
.p-shot--mock { aspect-ratio: var(--ratio, 3 / 4); cursor: zoom-in; }
.p-shot--mock img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--ease); }
.p-shot--mock:hover img { transform: scale(1.02); }
.p-shot--mockwrap.p-shot--mockhalf { grid-column: auto; width: 100%; }
/* phone screens (cardRatio 9:16): three per row, wide tiles span the row, "half" tiles (tablets) four per row */
.p-gallery--screens { grid-template-columns: repeat(12, 1fr); }
.p-gallery--screens > * { grid-column: span 4; }
.p-gallery--screens > .p-shot--logo, .p-gallery--screens > .p-shot--mockwrap { grid-column: 1 / -1; }
.p-gallery--screens > .p-shot--mockhalf { grid-column: span 3; }
/* wide key visuals (cardRatio 16:9): sized by width; the first one leads the gallery full width */
.art--fan.art--wide .fan__card { height: auto; width: 64cqw; }
.flow--wide { height: min(62vh, 40vw, 640px); }
.flow--wide .flow__card { height: auto; width: min(64vw, 1080px); }
.p-gallery--wide > .p-shot--lead { grid-column: 1 / -1; }
/* cards with their own shape (mixed sizes): tall ones by height, wide ones capped by width */
.art--fan .fan__card--own { aspect-ratio: var(--r); height: min(78cqh, calc(56cqw / var(--rn))); }
.flow__card--own { aspect-ratio: var(--r); height: min(100%, calc(62vw / var(--rn))); }
.p-gallery > .p-shot--row { grid-column: 1 / -1; }
.p-gallery--mixed { grid-auto-flow: row dense; align-items: start; } /* tall pieces pair up; a wide one takes its own row */
.p-shot__cap { display: block; margin-top: 12px; font-size: 15px; color: var(--muted); }
.p-gallery figure { margin: 0; }

.viewer {
  position: fixed; inset: 0; z-index: 97; display: none; align-items: center; justify-content: center;
  background: rgba(10, 10, 10, 0.96);
}
.viewer.is-open { display: flex; }
.viewer__img { max-height: 84vh; max-width: 88vw; border-radius: 6px; box-shadow: 0 40px 120px -40px #000; will-change: transform; user-select: none; }
.viewer__ui { position: absolute; inset: 0; pointer-events: none; }
.viewer__ui > * { pointer-events: auto; }
.viewer__close { position: absolute; top: 18px; inset-inline-end: var(--g); width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); font-size: 16px; }
.viewer__nav { position: absolute; top: 50%; translate: 0 -50%; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--line); font-size: 20px; transition: background 0.3s, color 0.3s; }
.viewer__nav:hover, .viewer__close:hover { background: var(--fg); color: var(--bg); }
.viewer__nav--prev { inset-inline-start: var(--g); }
.viewer__nav--next { inset-inline-end: var(--g); }
.viewer__bar { position: absolute; bottom: 18px; left: var(--g); right: var(--g); display: flex; justify-content: space-between; gap: 20px; font-size: 14px; color: var(--muted); }
.viewer__bar #viewerCaption { color: var(--fg); text-align: end; }

/* ---------- language switch ---------- */
.lang-switch {
  font-size: 13px; line-height: 1; padding: 5px 10px 6px; border: 1px solid currentColor; border-radius: 99px;
  transition: background 0.3s, color 0.3s;
}
.lang-switch:hover { background: #fff; color: #000; }

/* =========================================================
   ARABIC / RTL
   Grid + flex mirror on their own; fixed/absolute pieces and
   horizontal motion are flipped here. Arabic is never letter-spaced
   (tracking breaks the joins) and never split into letters (see JS).
   ========================================================= */
[dir="rtl"] { --dir: -1; }
[dir="rtl"] body * { letter-spacing: normal !important; }
[dir="rtl"] em { font-family: var(--sans); font-style: normal; font-weight: 300; }
[dir="rtl"] .brand { left: auto; right: var(--g); transform-origin: 100% 0; }
[dir="rtl"] .brand__text { line-height: 1.12; padding-top: 0; font-weight: 900; }
[dir="rtl"] .nav { right: auto; left: var(--g); }
[dir="rtl"] .section-label { left: auto; right: var(--g); }
[dir="rtl"] .progress { transform-origin: 100% 50%; }
[dir="rtl"] .hero__badge, [dir="rtl"] .hero__scroll, [dir="rtl"] .preloader__count { right: auto; left: var(--g); }
[dir="rtl"] .hero__meta { text-align: left; }
[dir="rtl"] .nav a::after, [dir="rtl"] .link-arrow:hover::after { transform-origin: left; }
[dir="rtl"] .nav a:hover::after, [dir="rtl"] .link-arrow::after { transform-origin: right; }
[dir="rtl"] .link-arrow:hover span { transform: translate(-3px, -3px); }
[dir="rtl"] .index-row__arrow { transform: translate(8px, 8px); }
[dir="rtl"] .index-row:hover .index-row__arrow { transform: none; }
[dir="rtl"] .contact__title, [dir="rtl"] .p-hero__title { margin-left: 0; margin-right: -0.02em; }
[dir="rtl"] .marquee__track { direction: ltr; } /* keep the loop maths simple; names are Latin */
[dir="rtl"] .art { direction: ltr; }             /* placeholder compositions are drawn LTR */
[dir="rtl"] .p-shot figcaption { left: auto; right: 14px; }
/* Kufi is taller than Geist: give display lines room so masks don't clip */
[dir="rtl"] .statement__text { line-height: 1.45; font-weight: 600; }
[dir="rtl"] .work__head h2, [dir="rtl"] .work-card__title, [dir="rtl"] .index-row__title,
[dir="rtl"] .p-hero__title, [dir="rtl"] .p-next__title, [dir="rtl"] .contact__title { line-height: 1.25; font-weight: 800; }
[dir="rtl"] .contact__title { font-weight: 300; }
[dir="rtl"] .about__bio, [dir="rtl"] .p-brief__text { line-height: 1.6; }
[dir="rtl"] .hero__role { line-height: 1.7; }
[dir="rtl"] .services li { font-size: 16px; }
[dir="rtl"] .services b, .services b { font-weight: inherit; }

/* =========================================================
   RESPONSIVE + REDUCED MOTION
   ========================================================= */
@media (max-width: 860px) {
  .nav { gap: 16px; font-size: 13px; }
  .nav a:not(.nav__cta) { display: none; }
  .hero__top { grid-template-columns: 1fr 1fr; top: 84px; }
  .hero__meta { grid-column: 2; text-align: right; }
  .hero__badge { width: 92px; height: 92px; top: 34%; }
  .work-card__inner { grid-template-columns: 1fr; grid-template-rows: 1.4fr auto; padding-top: 76px; padding-bottom: 52px; }
  .work-card__media { order: -1; }
  .work-card__title { margin: 0 0 10px; }
  .work-card__cat { margin-bottom: 14px; }
  .index-row { grid-template-columns: 34px 1fr 54px; }
  .index-row__cat, .index-row__arrow { display: none; }
  .about__grid, .p-brief { grid-template-columns: 1fr; }
  .services { grid-template-columns: 1fr; }
  .contact__foot, .p-meta { grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .contact__mail { font-size: 4.3vw; } /* long address: scale with the screen */
  .p-gallery { grid-template-columns: 1fr; }
  .p-gallery--screens { grid-template-columns: 1fr 1fr; }
  .p-gallery--screens > *, .p-gallery--screens > .p-shot--mockhalf { grid-column: auto; }
  .p-gallery--screens > .p-shot--logo, .p-gallery--screens > .p-shot--mockwrap:not(.p-shot--mockhalf) { grid-column: 1 / -1; }
  .p-cover { height: 60vh; }
  .flow { height: min(52vh, 92vw); } /* card narrower than the screen so the side cards peek out */
  .flow--wide { height: min(40vh, 56vw); }
  .flow--wide .flow__card { width: 80vw; }
  .flow__card--own { height: min(100%, calc(84vw / var(--rn))); }
  .p-gallery--wide { grid-template-columns: 1fr; }
  .p-hero__seal { top: auto; bottom: 4vh; width: 72px; }
  .pager__btn { height: 36px; padding: 0 13px; font-size: 12px; }
  .viewer__nav { display: none; } /* swipe on phones */
  .viewer__img { max-width: 94vw; max-height: 78vh; }
  .p-shot--logo { aspect-ratio: 4 / 3; }
  .p-shot--logo img { width: 70%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .contact__panel, .p-cover { clip-path: none !important; }
}