/* ==========================================================================
   STK Portfolio — stylesheet
   ========================================================================== */

:root {
  --bg:        #FBFAF8;
  --surface:   #FFFFFF;
  --ink:       #17161A;
  --body:      #4A4753;
  --muted:     #6E6B75;
  --faint:     #9A96A2;
  --line:      #E5E2DC;
  --line-2:    #E8E4DE;
  --line-in:   #DFDBD3;
  --line-btn:  #D8D4CC;
  --brand:     #6E3EF2;
  --brand-dk:  #4A21C9;
  --brand-tint:#F1EDFE;
  --dark-mute: #A8A4B0;
  --dark-line: #3A3842;
  --shell:     1320px;
  --hdr-h:     74px;
  --gutter:    40px;
  --ease:      cubic-bezier(.2,.7,.2,1);
  --sans:      'IBM Plex Sans', 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:      'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html[dir="rtl"] {
  --sans: 'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dk); }
img { max-width: 100%; }
::selection { background: #DDD3FB; color: var(--ink); }

/* Nothing highlights on click. A stray selection left behind by a click or a
   slight drag reads as the click not landing — this site is an interface to
   move through, not a document to mark up. The form fields are the one
   exception: they have to stay editable and selectable to be usable. */
html, body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

input, textarea, select, [contenteditable="true"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Stops a press-and-move on a logo or screenshot turning into an image drag. */
img, svg { -webkit-user-drag: none; user-drag: none; }

input, textarea, select, button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--brand); outline-offset: -2px; }

/* Arabic numerals and Latin brand names inside Arabic text stay LTR */
html[dir="rtl"] .ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* A bilingual product name ("Maham | مهام"): the local-language half leads at
   full size and its twin follows as a smaller accent-coloured mark. The size
   and colour step is the separator, so the pipe never renders. */
.bn { display: inline-flex; align-items: baseline; gap: .45em; max-width: 100%; min-width: 0; }
.bn-alt {
  font-size: .55em; font-weight: 500; letter-spacing: 0;
  color: var(--accent, var(--brand));
  unicode-bidi: isolate;
  white-space: nowrap;
}
/* Inside the tab rail the twin would land below legibility at .55em, and six
   accent-coloured twins would shout — it stays near full size and simply dims.
   The rail's tabs clip long names, and a flex lockup never overflows its own
   box, so the ellipsis moves onto the primary half: it elides while the twin
   keeps its full width or drops cleanly. */
.fx-tab-name .bn { width: 100%; }
.fx-tab-name .bn-x { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fx-tab-name .bn-alt { font-size: .85em; color: inherit; opacity: .55; flex: none; }

.shell { max-width: var(--shell); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

.skip {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--bg); padding: 12px 20px; font-size: 14px;
}
.skip:focus { inset-inline-start: 0; color: var(--bg); }

/* ------------------------------------------------------------------ header */

.hdr {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251,250,248,.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.hdr-in {
  max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter);
  height: var(--hdr-h); display: flex; align-items: center; gap: 36px;
}
.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); flex: none; }
.brand:hover { color: var(--ink); }
.brand-mark {
  height: 25px; width: auto; display: block;
  animation: stk-bar .8s var(--ease) both;
  transition: transform .4s var(--ease);
}
.brand:hover .brand-mark { transform: translateX(3px) scale(1.04); }
html[dir="rtl"] .brand:hover .brand-mark { transform: translateX(-3px) scale(1.04); }
.brand-word { height: 15px; width: auto; display: block; animation: stk-rise .8s var(--ease) .12s both; }

.nav { display: flex; align-items: center; gap: 28px; font-size: 14.5px; font-weight: 500; }
.nav a { color: var(--muted); }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--brand); }

.spacer { flex: 1; }

.lang { display: flex; align-items: center; gap: 3px; border: 1px solid #E0DCD4; padding: 3px; background: var(--surface); flex: none; }
.lang a { border: 0; cursor: pointer; background: transparent; color: var(--muted); text-decoration: none; transition: background .2s ease, color .2s ease; }
.lang a:hover { color: var(--ink); }
.lang .l-en { padding: 5px 11px; font-size: 11.5px; font-weight: 500; letter-spacing: .06em; font-family: var(--mono); }
.lang .l-ar { padding: 5px 12px; font-size: 13px; font-weight: 600; font-family: 'IBM Plex Sans Arabic', sans-serif; }
.lang a[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

.btn-dark {
  background: var(--ink); color: var(--bg); padding: 12px 20px;
  font-size: 14px; font-weight: 500; flex: none; border: 0; cursor: pointer;
  transition: background .3s ease;
}
.btn-dark:hover { background: var(--brand); color: var(--bg); }

.burger {
  display: none; flex: none; width: 42px; height: 42px; border: 1px solid #E0DCD4;
  background: var(--surface); cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
}
.burger span { display: block; width: 17px; height: 1.5px; background: var(--ink); position: relative; transition: background .2s ease; }
.burger span::before, .burger span::after {
  content: ''; position: absolute; left: 0; width: 17px; height: 1.5px; background: var(--ink);
  transition: transform .3s var(--ease);
}
.burger span::before { top: -5.5px; }
.burger span::after  { top:  5.5px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-5.5px) rotate(-45deg); }

.drawer {
  display: none; border-top: 1px solid var(--line); background: var(--bg);
  padding: 8px var(--gutter) 24px;
}
.drawer.open { display: block; }
.drawer a {
  display: block; padding: 15px 0; font-size: 17px; font-weight: 500;
  color: var(--ink); border-bottom: 1px solid var(--line);
}
.drawer a[aria-current="page"] { color: var(--brand); }
.drawer .btn-dark { display: block; text-align: center; margin-top: 22px; }

/* ---------------------------------------------------------------- sections */

.sec { border-top: 1px solid var(--line); }
.sec-white { background: var(--surface); }
.sec-dark { background: var(--ink); color: var(--bg); }

.eyebrow {
  display: flex; align-items: center; gap: 12px; font-family: var(--mono);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 32px;
}
html[dir="rtl"] .eyebrow { font-family: var(--sans); font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 600; }
.eyebrow .rule { display: block; width: 26px; height: 1px; background: var(--brand); flex: none; }

.kicker {
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brand); margin-bottom: 26px;
}
html[dir="rtl"] .kicker { font-family: var(--sans); letter-spacing: 0; text-transform: none; font-weight: 600; font-size: 13px; }

.num { font-family: var(--mono); font-size: 12px; color: var(--brand); letter-spacing: .1em; flex: none; }
html[dir="rtl"] .num { font-family: var(--sans); letter-spacing: 0; }

.sec-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 18px; }
.sec-head h2 { margin: 0; font-size: clamp(28px, 3vw, 42px); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
html[dir="rtl"] .sec-head h2 { letter-spacing: 0; line-height: 1.25; }
.sec-lead { margin: 0; font-size: 17px; line-height: 1.7; color: var(--body); max-width: 70ch; }
html[dir="rtl"] .sec-lead { line-height: 1.85; }

h1 { text-wrap: pretty; }
h2, h3 { text-wrap: pretty; }

/* -------------------------------------------------------------------- hero */

.hero { max-width: var(--shell); margin: 0 auto; padding: 100px var(--gutter) 84px; }
.hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 64px; align-items: center; }

.hero h1 {
  margin: 0; font-size: clamp(38px, 5.4vw, 78px); line-height: 1.03;
  letter-spacing: -.035em; font-weight: 600; max-width: 21ch;
  animation: stk-rise .9s var(--ease) .1s both;
}
html[dir="rtl"] .hero h1 { font-size: clamp(34px, 4.8vw, 70px); line-height: 1.18; letter-spacing: 0; max-width: 24ch; }

.hero .lead {
  margin: 32px 0 0; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.62;
  color: var(--body); max-width: 64ch;
  animation: stk-rise .9s var(--ease) .22s both;
}
html[dir="rtl"] .hero .lead { line-height: 1.85; max-width: 62ch; }
.hero .eyebrow { animation: stk-rise .8s var(--ease) both; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 42px; animation: stk-rise .9s var(--ease) .34s both; }

.btn-primary {
  background: var(--brand); color: #FFF; padding: 15px 26px; font-size: 15px; font-weight: 500;
  transition: background .3s ease, transform .3s var(--ease);
}
.btn-primary:hover { background: var(--brand-dk); color: #FFF; transform: translateY(-2px); }
.btn-ghost {
  border: 1px solid var(--line-btn); color: var(--ink); padding: 15px 26px;
  font-size: 15px; font-weight: 500; background: var(--surface);
  transition: border-color .3s ease, transform .3s var(--ease);
}
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-2px); }

/* The mark at hero scale — three bars, S, T and K.
   The lean and the 22:72 gap-to-height ratio are the logo's own: the SVG
   offsets each bar by about 15 units over its 72-unit height, which is a 12°
   skew, not the 22° the smaller motifs elsewhere use. */
.bars {
  display: flex; flex-direction: column;
  gap: clamp(16px, 2.3vw, 29px);
  padding-inline-start: 0;
}
.bar { transform: skewX(-12deg); height: clamp(54px, 7.4vw, 94px); }
html[dir="rtl"] .bar { transform: skewX(12deg); }

/* The bar itself is the child, so the skew above survives the drift applied
   here — two transforms on one element would simply overwrite each other. */
.bar > i { display: block; height: 100%; position: relative; overflow: hidden; }

/* The light that climbs the stack. It crosses, then waits out the rest of the
   cycle, so it reads as a periodic pulse rather than a constant shimmer. */
.bar > i > b {
  content: ''; position: absolute; top: 0; bottom: 0; width: 26%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.40), rgba(255,255,255,0));
  transform: translateX(-180%);
  animation-name: stk-sweep;
  animation-timing-function: cubic-bezier(.5, 0, .3, 1);
  animation-iteration-count: infinite;
}
html[dir="rtl"] .bar > i > b { animation-name: stk-sweep-rtl; }

/* ------------------------------------------------------------------- stats */

.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 76px;
}
.stats > div { background: var(--bg); padding: 26px 24px; }
.stats .v { font-size: 30px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stats .l { margin-top: 10px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }

/* ----------------------------------------------------------------- clients */

.clients-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 40px; }
.clients-head h2 { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: .02em; color: var(--ink); }
.clients-head p { margin: 0; font-size: 14px; color: var(--muted); max-width: 58ch; line-height: 1.6; }

.marquees {
  /* The 12px of the gap now lives inside each row as padding-block, so the
     chips' hover lift has somewhere to go. Visual spacing is unchanged. */
  display: flex; flex-direction: column; gap: 2px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
/* overflow:hidden is what makes the marquee scroll, but it also clips the
   chips' translateY hover. padding-block gives that lift room to happen
   inside the clipping box. */
.mq { overflow: hidden; padding-block: 6px; }
.mq-track { display: flex; gap: 12px; width: max-content; }
.mq-a .mq-track { animation: stk-marquee 58s linear infinite; }
.mq-b .mq-track { animation: stk-marquee-rev 64s linear infinite; }
.marquees:hover .mq-track { animation-play-state: paused; }

.chip {
  display: flex; align-items: center; gap: 11px; border: 1px solid var(--line-2);
  padding: 13px 20px; font-size: 14px; font-weight: 500; color: var(--ink);
  background: var(--bg); letter-spacing: .01em; white-space: nowrap;
  transition: border-color .35s ease, background .35s ease, transform .35s var(--ease);
}
.chip:hover { border-color: var(--brand); background: var(--surface); transform: translateY(-2px); }
.chip i { display: block; width: 7px; height: 7px; flex: none; transform: skewX(-22deg); }
.chip-a i { background: linear-gradient(135deg, #B054BC, #46329D); }
.chip-b i { background: linear-gradient(135deg, #5131B6, #C062C4); }

/* --------------------------------------------------------------- flagships */

.flag-head { max-width: var(--shell); margin: 0 auto; padding: 88px var(--gutter) 40px; }
.flag-meta {
  display: flex; align-items: center; gap: 14px; font-family: var(--mono);
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
html[dir="rtl"] .flag-meta { font-family: var(--sans); letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.flag-meta .n { color: var(--brand); }
.contrib { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 18px; }
.contrib .k { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
html[dir="rtl"] .contrib .k { font-family: var(--sans); letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.contrib .v { margin-top: 8px; font-size: 14.5px; line-height: 1.65; color: var(--ink); }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tag { background: var(--brand-tint); color: var(--brand-dk); padding: 6px 11px; font-size: 12.5px; font-weight: 500; }
.tag-line { border: 1px solid var(--line-2); color: var(--muted); padding: 5px 9px; font-size: 11.5px; }

/* image slots: real screenshot if present, hatched placeholder if not */
.shot {
  position: relative; overflow: hidden;
  background: repeating-linear-gradient(135deg, #F4F2EE 0 11px, #EDEAE4 11px 22px);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px;
}
.shot-lg { aspect-ratio: 16 / 11; }
.shot-sm { aspect-ratio: 4 / 3; padding: 14px; }
.shot span {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); line-height: 1.7;
}
html[dir="rtl"] .shot span { font-family: var(--sans); letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.shot-sm span { font-size: 10.5px; letter-spacing: .09em; }
html[dir="rtl"] .shot-sm span { font-size: 12px; letter-spacing: 0; }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ------------------------------------------------------------- engagements */

.grid-cells {
  display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.cells-2 { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
.cells-3 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.cells-4 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.cells-5 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }

/* --------------------------------------------------------------------- CTA */

.cta {
  max-width: var(--shell); margin: 0 auto; padding: 92px var(--gutter) 96px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 48px; align-items: end;
}
.cta h2 { margin: 0; font-size: clamp(30px, 3.4vw, 48px); font-weight: 600; letter-spacing: -.03em; line-height: 1.12; max-width: 24ch; }
html[dir="rtl"] .cta h2 { letter-spacing: 0; line-height: 1.3; }
.cta p { margin: 22px 0 0; font-size: 17px; line-height: 1.7; color: var(--dark-mute); max-width: 54ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-on-dark { background: var(--brand); color: #FFF; padding: 16px 28px; font-size: 15px; font-weight: 500; transition: background .3s ease, color .3s ease; }
.btn-on-dark:hover { background: var(--bg); color: var(--ink); }
.btn-on-dark-ghost { border: 1px solid var(--dark-line); color: var(--bg); padding: 16px 28px; font-size: 15px; font-weight: 500; transition: border-color .3s ease; }
.btn-on-dark-ghost:hover { border-color: var(--bg); color: var(--bg); }

/* -------------------------------------------------------------- page heads */

.page-head { max-width: var(--shell); margin: 0 auto; padding: 88px var(--gutter) 56px; }
.page-head h1 { margin: 0; font-size: clamp(34px, 4.4vw, 62px); font-weight: 600; letter-spacing: -.035em; line-height: 1.07; max-width: 22ch; }
html[dir="rtl"] .page-head h1 { letter-spacing: 0; line-height: 1.25; max-width: 24ch; }
.page-head p { margin: 26px 0 0; font-size: 17.5px; line-height: 1.7; color: var(--body); max-width: 72ch; }
html[dir="rtl"] .page-head p { line-height: 1.9; }

/* -------------------------------------------------------------- work groups */

.group-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 40px; align-items: baseline; margin-bottom: 40px; }
.group-title { display: flex; align-items: baseline; gap: 16px; }
.group-title h2 { margin: 0; font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; letter-spacing: -.03em; line-height: 1.18; }
html[dir="rtl"] .group-title h2 { letter-spacing: 0; line-height: 1.3; }
.group-head p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--body); }
html[dir="rtl"] .group-head p { line-height: 1.85; }

.card { background: var(--surface); padding: 30px 28px 32px; display: flex; flex-direction: column; transition: background .3s ease; }
.card:hover { background: #FCFBFE; }
.card .cat { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
html[dir="rtl"] .card .cat { font-family: var(--sans); letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.card h3 { margin: 14px 0 0; font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1.22; }
html[dir="rtl"] .card h3 { letter-spacing: 0; line-height: 1.35; }
.card .tagline { margin: 10px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--ink); font-weight: 500; }
.card .body { margin: 14px 0 0; font-size: 14.5px; line-height: 1.72; color: var(--body); }
html[dir="rtl"] .card .body { line-height: 1.9; }
.card .grow { flex: 1; min-height: 20px; }
.card .tags { gap: 7px; margin-top: 20px; }

/* --------------------------------------------------------------- services */

.svc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 40px; padding: 40px 0; border-bottom: 1px solid var(--line); }
.svc-title { display: flex; gap: 18px; align-items: baseline; }
.svc-title h2 { margin: 0; font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }
html[dir="rtl"] .svc-title h2 { letter-spacing: 0; line-height: 1.35; }
.svc p { margin: 0; font-size: 16px; line-height: 1.75; color: var(--body); grid-column: span 2; }
html[dir="rtl"] .svc p { line-height: 1.9; }

.phase { background: var(--surface); padding: 30px 26px 34px; }
.phase .n { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--brand); }
html[dir="rtl"] .phase .n { font-family: var(--sans); letter-spacing: 0; font-size: 12.5px; }
.phase h3 { margin: 14px 0 0; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.phase p { margin: 12px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--body); }
html[dir="rtl"] .phase p { line-height: 1.9; }

.block-title { margin: 0 0 36px; font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; letter-spacing: -.03em; }
html[dir="rtl"] .block-title { letter-spacing: 0; line-height: 1.35; }

/* ------------------------------------------------------------------- about */

.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 56px; align-items: start; }
.about h1 { margin: 0; font-size: clamp(32px, 3.8vw, 54px); font-weight: 600; letter-spacing: -.035em; line-height: 1.08; }
html[dir="rtl"] .about h1 { letter-spacing: 0; line-height: 1.28; }
.about p { margin: 28px 0 0; font-size: 17px; line-height: 1.75; color: var(--body); }
html[dir="rtl"] .about p { line-height: 1.95; }
.about p + p { margin-top: 18px; }

.pill { border: 1px solid var(--line); background: var(--surface); padding: 11px 17px; font-size: 14.5px; color: var(--ink); }
.pills { display: flex; flex-wrap: wrap; gap: 10px; }

/* ----------------------------------------------------------------- contact */

.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 64px; align-items: start; }
.contact h1 { margin: 0; font-size: clamp(32px, 3.8vw, 54px); font-weight: 600; letter-spacing: -.035em; line-height: 1.08; }
html[dir="rtl"] .contact h1 { letter-spacing: 0; line-height: 1.28; }
.contact .intro { margin: 26px 0 0; font-size: 17px; line-height: 1.75; color: var(--body); max-width: 52ch; }
html[dir="rtl"] .contact .intro { line-height: 1.95; }
.rows { margin-top: 40px; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.rows > div { background: var(--bg); padding: 20px 24px; }
.rows .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
html[dir="rtl"] .rows .k { font-family: var(--sans); letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.rows .v { margin-top: 6px; font-size: 16px; color: var(--ink); }

.form-card { border: 1px solid var(--line); background: var(--surface); padding: 36px 34px 40px; }
.form-card h2 { margin: 0 0 26px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }

/* Contact — common questions. Each answer is written as a complete standalone
   statement: it is the copy an answer engine quotes when asked about the
   studio, so it must survive being lifted out of the page. */
.faq { padding-bottom: 104px; }
.faq .block-title { margin-bottom: 32px; }
.faq-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.faq-item { background: var(--surface); padding: 26px 28px 30px; }
.faq-q { margin: 0; font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
html[dir="rtl"] .faq-q { letter-spacing: 0; }
.faq-a { margin: 10px 0 0; font-size: 15px; line-height: 1.7; color: var(--body); }
html[dir="rtl"] .faq-a { line-height: 1.9; }
.fields { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; }
.field > span { font-size: 13px; font-weight: 500; color: var(--body); }
.field input, .field select, .field textarea {
  border: 1px solid var(--line-in); background: var(--bg); padding: 12px 14px; font-size: 15px; width: 100%;
}
.field textarea { resize: vertical; min-height: 120px; }
.field .err { font-size: 12.5px; color: #C0392B; min-height: 0; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #C0392B; }
.form-note { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--faint); }
.btn-submit {
  background: var(--ink); color: var(--bg); border: 0; padding: 15px 22px;
  font-size: 15px; font-weight: 500; cursor: pointer; justify-self: start;
  transition: background .3s ease;
}
.btn-submit:hover { background: var(--brand); }
.sent { padding: 40px 0; text-align: center; }
.sent .badge { width: 40px; height: 40px; background: var(--brand); margin: 0 auto; transform: skewX(-22deg); }
.sent h2 { margin: 24px 0 0; font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.sent p { margin: 12px 0 0; font-size: 15.5px; line-height: 1.7; color: var(--body); }
.sent button { margin-top: 24px; }

/* ------------------------------------------------------------------ footer */

.ftr { border-top: 1px solid var(--line); background: var(--bg); }
.ftr-in {
  max-width: var(--shell); margin: 0 auto; padding: 56px var(--gutter) 64px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 40px; align-items: start;
}
.ftr-brand { display: flex; align-items: center; gap: 15px; }
.ftr-brand img.m { height: 36px; width: auto; display: block; }
.ftr-brand img.w { height: 22px; width: auto; display: block; }
.ftr p { margin: 20px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--muted); max-width: 34ch; }
.ftr-col { display: flex; flex-direction: column; gap: 12px; font-size: 14.5px; color: var(--body); }
.ftr-col a { color: var(--body); }
.ftr-col a:hover { color: var(--brand); }
.ftr .copy { color: var(--faint); font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; }
html[dir="rtl"] .ftr .copy { font-family: var(--sans); letter-spacing: 0; font-size: 13px; }

/* -------------------------------------------------------------- animations */

@keyframes stk-marquee     { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes stk-marquee-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes stk-rise        { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes stk-bar         { 0% { opacity: 0; transform: translateX(-14px); } 100% { opacity: 1; transform: none; } }
@keyframes stk-in          { 0% { opacity: 0; transform: translateX(-64px); } 100% { opacity: 1; transform: none; } }
/* Amplitude is per bar, so the three never travel together. */
@keyframes stk-drift       { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(var(--amp, 26px)); } }

/* Crosses in the first two-fifths, then holds off screen until the cycle
   comes round again. */
@keyframes stk-sweep       { 0% { transform: translateX(-180%); } 42%, 100% { transform: translateX(460%); } }
@keyframes wk-preview-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes wk-preview-sweep {
  0%, 8% { opacity: 0; transform: skewX(-14deg) translateX(-220%); }
  18% { opacity: .45; }
  62% { opacity: .22; }
  76%, 100% { opacity: 0; transform: skewX(-14deg) translateX(720%); }
}
@keyframes stk-sweep-rtl   { 0% { transform: translateX(180%); }  42%, 100% { transform: translateX(-460%); } }

/* mirrored so the hero bars fly in from the correct edge in Arabic */
@keyframes stk-in-rtl      { 0% { opacity: 0; transform: translateX(64px); } 100% { opacity: 1; transform: none; } }
@keyframes stk-drift-rtl   { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(calc(var(--amp, 26px) * -1)); } }
html[dir="rtl"] .bar > i   { animation-name: stk-in-rtl, stk-drift-rtl !important; }
html[dir="rtl"] .brand-mark { animation-name: stk-bar-rtl; }
@keyframes stk-bar-rtl     { 0% { opacity: 0; transform: translateX(14px); } 100% { opacity: 1; transform: none; } }

[data-reveal] { will-change: opacity, transform; }
.reveal-hidden { opacity: 0; transform: translateY(18px); }
.reveal-shown  { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }

/* ------------------------------------------------------------- responsive */

@media (max-width: 1080px) {
  .bars { gap: clamp(14px, 2.2vw, 24px); }
  .bar { height: clamp(48px, 7vw, 78px); }
}

@media (max-width: 900px) {
  :root { --gutter: 24px; }
  .nav, .hdr .btn-dark { display: none; }
  .burger { display: flex; }
  :root { --hdr-h: 66px; }
  .hdr-in { gap: 16px; }
  .hero { padding: 64px var(--gutter) 56px; }
  .hero-grid { gap: 44px; }
  .stats { margin-top: 48px; }
  .flag-head { padding: 60px var(--gutter) 32px; }
  .cta { padding: 64px var(--gutter) 68px; gap: 32px; }
  .page-head { padding: 60px var(--gutter) 40px; }
  .contact-grid, .about-grid { gap: 44px; }
  .form-card { padding: 28px 24px 32px; }
  .ftr-in { padding: 44px var(--gutter) 52px; gap: 32px; }
}

@media (max-width: 620px) {
  .hero h1 { max-width: none; }
  /* The mark earns its place on a phone now that it is three bars rather than
     nine hairlines — at this size it reads as the brand, not as texture. */
  .bars { gap: 11px; }
  .bar { height: clamp(34px, 11vw, 52px); }
  .clients-head { gap: 12px; }
  .svc { gap: 16px; padding: 32px 0; }
  .svc p { grid-column: auto; }
  .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-actions a { text-align: center; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions a { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal-hidden { opacity: 1; transform: none; }
}

@media print {
  .hdr, .drawer, .marquees, .hero-actions, .cta-actions { display: none !important; }
  body { background: #fff; }
  .reveal-hidden { opacity: 1; transform: none; }
}

/* ==========================================================================
   Real imagery + live enquiry form
   Additions to the original prototype stylesheet. Everything above stays as
   designed; these rules cover the pieces the static prototype only mocked.
   ========================================================================== */

/* ------------------------------------------------------- client logo chips */

/* Logo-only chips: the mark is the whole content, so the chip is a tile of
   fixed height whose width follows the lockup's own proportions. */
.chip { min-height: 74px; padding: 14px 22px; justify-content: center; }

.chip-logo {
  display: block; height: 38px; width: auto; max-width: 172px;
  flex: none; object-fit: contain;
  /* Government marks arrive in a dozen different colours. A touch of
     desaturation at rest lets the strip read as one row, and full colour on
     hover rewards the look. */
  filter: saturate(.85);
  transition: filter .35s ease;
}
.chip:hover .chip-logo { filter: saturate(1); }

/* Only reached if a client has no generated mark at all. */
.chip-text { font-size: 15px; font-weight: 600; letter-spacing: .02em; }

/* --------------------------------------------------------- work-card shots */

.card-shot {
  position: relative; margin: -30px -28px 26px; overflow: hidden;
  aspect-ratio: 16 / 10; background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.card-shot img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
  transform: scale(1.01);
  transition: transform .6s var(--ease);
}
.card:hover .card-shot img { transform: scale(1.045); }

/* A real five-second preview sits over the poster, but its URL remains only a
   data attribute until hover/focus. The page therefore keeps the same initial
   transfer cost as the still gallery, and one decoder is active at most. */
.card-motion {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
}
.card-motion.is-ready { opacity: 1; }

/* A restrained optical sweep ties every unique scene back to the same STK
   motion language. It runs once, in step with the five-second clip. */
.card-shot::after {
  content: ''; position: absolute; z-index: 2; inset: -30% auto -30% -38%;
  width: 24%; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.68), transparent);
  transform: skewX(-14deg) translateX(-220%);
  mix-blend-mode: screen;
}
.wk-card.is-previewing .card-shot::after {
  animation: wk-preview-sweep 5s cubic-bezier(.25,.55,.2,1) both;
}

.card-motion-progress {
  position: absolute; z-index: 3; inset-inline: 0; bottom: 0;
  height: 2px; background: var(--accent, var(--brand));
  transform: scaleX(0); transform-origin: left center;
  opacity: .82; pointer-events: none;
}
html[dir="rtl"] .card-motion-progress { transform-origin: right center; }
.wk-card.is-previewing .card-motion-progress { animation: wk-preview-progress 5s linear both; }
.wk-card.is-preview-complete .card-motion-progress { transform: scaleX(1); }

/* ------------------------------------------------------------- enquiry form */

/* Honeypot: hidden rather than display:none, which some bots skip. Clipped
   in place, not offset — `left: -9999px` extends the scrollable canvas by
   10,000px on RTL pages, where the document grows leftward. */
.hp {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.btn-submit[disabled] { opacity: .55; cursor: progress; }
.btn-submit[disabled]:hover { background: var(--ink); }

.form-error {
  margin: 0; padding: 12px 14px; font-size: 13.5px; line-height: 1.6;
  color: #8A1C2B; background: #FDF2F3; border: 1px solid #F0D2D6;
}

/* Real screenshots replace the hatched placeholder entirely, so drop the
   hatch behind them — a half-visible pattern showing through an image edge
   reads as an artefact. */
.shot:has(img) { background: var(--surface); }

@media (prefers-reduced-motion: reduce) {
  .chip-logo, .card-shot img { transition: none; }
  .card:hover .card-shot img { transform: none; }
  .card-motion, .card-motion-progress { display: none; }
}

/* ==========================================================================
   Flagship showcase — the five owned products on a 3D stage
   One product is forward and readable; its neighbours recede and dim. Where a
   slab sits is decided here, keyed off the signed distance the script writes
   into data-p — so the geometry stays right at every width and mirrors itself
   in Arabic without the script knowing a single pixel value.
   ========================================================================== */

.fx {
  /* Everything on the stage is a multiple of the slab width, so a breakpoint
     only has to restate --fx-w for the whole arrangement to follow. */
  /* Slab width follows the stage height as well as the viewport: the stage
     shrinks on a short window, and a slab that ignored that would hang out
     the bottom of it. */
  --fx-w: min(700px, calc(var(--fx-h) * 1.06));
  --fx-h: min(660px, 60vh);  /* stage height — room for the lifted screens */
  --fx-o: 62%;            /* where the stage sits; the copy panel takes the rest */
  --fx-lw: 250px;         /* lifted secondary screen */
  --fx-lz: 130px;         /* how far it floats towards the viewer */
  --fx-dir: 1;            /* flipped in Arabic; applied to X and rotation */
  --fx-x1: calc(var(--fx-w) * .90);
  --fx-x2: calc(var(--fx-w) * 1.55);
  --fx-x3: calc(var(--fx-w) * 1.92);
  --fx-z1: calc(var(--fx-w) * -.66);
  --fx-z2: calc(var(--fx-w) * -1.26);
  --fx-z3: calc(var(--fx-w) * -1.60);
  position: relative;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter) 64px;
}
html[dir="rtl"] .fx { --fx-dir: -1; }

/* ------------------------------------------------------- scroll behaviour */

/* The track is scroll room and nothing else. Until the script decides the
   showcase fits the viewport it has no height of its own and the section
   behaves like any other. */
.fx-track { position: relative; }

/* Pinned: the showcase holds still while the page scrolls past it, and the
   distance covered picks the product. --fx-band is the scroll each product
   gets; five of them plus one screen is the height of the track. */
.fx-track.is-pinned {
  --fx-band: 62vh;
  height: calc(100vh + var(--fx-n, 5) * var(--fx-band));
}
.fx-track.is-pinned > .fx {
  position: sticky; top: 0;
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  /* Centred in the band below the sticky header rather than in the whole
     viewport — the header covers the top of it otherwise, and the showcase
     reads as sitting too low on the screen. */
  padding-top: var(--hdr-h);
  padding-bottom: 0;
}

/* Stage and copy panel share one grid cell, so the panel overlays the stage
   without being positioned against it. That matters on a short window: the
   case study can be taller than the stage, and the cell simply grows to the
   taller of the two instead of the copy spilling over the controls. */
.fx-scene { position: relative; display: grid; }
.fx-scene > .fx-stage { grid-area: 1 / 1; align-self: center; }

/* ------------------------------------------------------------------ stage */

.fx-stage {
  position: relative;
  height: var(--fx-h);
  /* Bleeds to the shell edge so the receding slabs run off the sides
     instead of stopping inside a column. */
  margin-inline: calc(var(--gutter) * -1);
  overflow: hidden;
  perspective: 2200px;
  /* Off-centre: the copy panel sits in the space this leaves. */
  perspective-origin: 62% 46%;
  cursor: grab;
  /* Horizontal drag belongs to the stage, vertical scrolling to the page. */
  touch-action: pan-y;
}
html[dir="rtl"] .fx { --fx-o: 38%; }
html[dir="rtl"] .fx-stage { perspective-origin: 38% 46%; }
.fx.is-dragging .fx-stage { cursor: grabbing; }

/* Receding floor. Sits under everything and takes no clicks. */
.fx-floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  overflow: hidden; pointer-events: none;
}
.fx-floor::before {
  content: ''; position: absolute; left: -50%; right: -50%; bottom: -58%; height: 150%;
  transform: perspective(560px) rotateX(74deg);
  background-image:
    linear-gradient(rgba(58, 33, 133, .11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(58, 33, 133, .11) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(56% 60% at 50% 100%, #000 0%, transparent 76%);
  mask-image: radial-gradient(56% 60% at 50% 100%, #000 0%, transparent 76%);
}

.fx-cam {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform .7s var(--ease);
  will-change: transform;
}
/* While a finger or cursor is down the camera tracks it 1:1 — a transition
   here would turn a drag into elastic lag. */
.fx.is-dragging .fx-cam { transition: none; }

/* Sits where the vanishing point is, so the products occupy the side of the
   stage the copy panel does not. */
.fx-orbit {
  position: absolute; left: var(--fx-o); top: 50%; width: 0; height: 0;
  transform-style: preserve-3d;
}

/* ------------------------------------------------------------------ slabs */

.fx-slab {
  --x: 0px; --y: 0px; --z: 0px; --ry: 0deg; --s: 1;
  position: absolute; left: 0; top: 0; width: var(--fx-w);
  transform-style: preserve-3d;
  /* The trailing translate centres the slab on the orbit origin before the
     rest of the chain moves it into place. */
  transform:
    translate3d(calc(var(--x) * var(--fx-dir)), var(--y), var(--z))
    rotateY(calc(var(--ry) * var(--fx-dir)))
    scale(var(--s))
    translate(-50%, -50%);
  transition: transform .95s var(--ease), opacity .5s ease;
  cursor: pointer;
}
.fx-slab[data-p="0"] { opacity: 1; cursor: default; }
.fx-slab[data-p="1"], .fx-slab[data-p="-1"] { --y: 20px; --s: .95; opacity: .55; }
.fx-slab[data-p="2"], .fx-slab[data-p="-2"] { --y: 36px; --s: .90; opacity: .26; }
.fx-slab[data-p="3"], .fx-slab[data-p="-3"] { --y: 48px; --s: .86; opacity: .13; }
.fx-slab[data-p="4"], .fx-slab[data-p="-4"] { --y: 54px; --s: .84; opacity: .09; }
.fx-slab[data-p="5"], .fx-slab[data-p="-5"] { --y: 58px; --s: .82; opacity: .06; }

.fx-slab[data-p="1"]  { --x: var(--fx-x1); --z: var(--fx-z1); --ry: 30deg; }
.fx-slab[data-p="-1"] { --x: calc(var(--fx-x1) * -1); --z: var(--fx-z1); --ry: -30deg; }
.fx-slab[data-p="2"]  { --x: var(--fx-x2); --z: var(--fx-z2); --ry: 38deg; }
.fx-slab[data-p="-2"] { --x: calc(var(--fx-x2) * -1); --z: var(--fx-z2); --ry: -38deg; }
.fx-slab[data-p="3"]  { --x: var(--fx-x3); --z: var(--fx-z3); --ry: 40deg; }
.fx-slab[data-p="-3"] { --x: calc(var(--fx-x3) * -1); --z: var(--fx-z3); --ry: -40deg; }
.fx-slab[data-p="4"]  { --x: calc(var(--fx-x3) * 1.13); --z: calc(var(--fx-z3) * 1.10); --ry: 41deg; }
.fx-slab[data-p="-4"] { --x: calc(var(--fx-x3) * -1.13); --z: calc(var(--fx-z3) * 1.10); --ry: -41deg; }
.fx-slab[data-p="5"]  { --x: calc(var(--fx-x3) * 1.24); --z: calc(var(--fx-z3) * 1.19); --ry: 42deg; }
.fx-slab[data-p="-5"] { --x: calc(var(--fx-x3) * -1.24); --z: calc(var(--fx-z3) * 1.19); --ry: -42deg; }

/* Squared corners and a hairline border, like every other image slot on the
   site. The depth comes from the shadow and the stage, not from rounding. */
.fx-screen {
  position: relative;
  box-shadow: 0 54px 100px -38px rgba(38, 22, 86, .34), 0 10px 28px -14px rgba(38, 22, 86, .16);
}
/* The hairline is drawn inside the image, not around it.
   A border sits outside the padding box, so its colour composites over the
   page rather than over the screenshot — and a translucent black line over a
   pale page is a pale line, which reads as a white edge around the dark
   screens (KAM AI most of all). Inset, it darkens the screenshot's own edge:
   definition on the light captures, invisible on the dark ones, which already
   separate from the page by their shadow. */
.fx-screen .shot {
  border-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(23, 22, 26, .10);
}

/* Ground shadow, tinted by the product's accent. The accent layer is a
   progressive extra: browsers without color-mix simply keep the neutral one. */
.fx-cast {
  position: absolute; left: 4%; right: 4%; bottom: -44px; height: 78px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(38, 22, 86, .30), rgba(38, 22, 86, 0) 72%);
  filter: blur(18px);
  opacity: 0;
  transition: opacity .8s ease;
}
.fx-slab.is-on .fx-cast { opacity: 1; }
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .fx-cast {
    background: radial-gradient(50% 50% at 50% 50%,
      color-mix(in srgb, var(--accent) 42%, transparent),
      color-mix(in srgb, var(--accent) 0%, transparent) 72%);
  }
}

/* The two secondary screens, lifted off the main one once their product is
   the one in front. */
.fx-lift {
  position: absolute; width: var(--fx-lw);
  transform: translateZ(0);
  transition: transform .95s var(--ease) .08s;
}
.fx-lift .shot {
  border-color: transparent;
  box-shadow: 0 30px 58px -22px rgba(38, 22, 86, .40), inset 0 0 0 1px rgba(23, 22, 26, .10);
}
.fx-lift-a { inset-inline-end: -58px; bottom: -34px; }
.fx-lift-b { inset-inline-start: -50px; top: -38px; width: calc(var(--fx-lw) * .84); }
.fx-slab.is-on .fx-lift-a { transform: translateZ(var(--fx-lz)); }
.fx-slab.is-on .fx-lift-b { transform: translateZ(calc(var(--fx-lz) * .72)); }
.fx-slab.is-on .fx-lift-a .shot { animation: stk-hover-a 11s ease-in-out infinite; }
.fx-slab.is-on .fx-lift-b .shot { animation: stk-hover-b 13s ease-in-out infinite; }

@keyframes stk-hover-a { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -11px, 0); } }
@keyframes stk-hover-b { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, 9px, 0); } }

/* ------------------------------------------------------------- copy panel */

.fx-panel {
  grid-area: 1 / 1; align-self: center; justify-self: start;
  margin-inline-start: var(--gutter);
  width: min(430px, 42%);
  display: grid; align-content: center;
  pointer-events: none;
}
/* Every panel shares one grid cell, so the block is as tall as the longest
   case study and the switch is a cross-fade rather than a reflow. */
.fx-detail {
  grid-area: 1 / 1;
  padding: 30px 30px 32px;
  /* Opaque enough that the case study stays readable over a screenshot even
     where backdrop-filter is unsupported or turned off. */
  background: rgba(251, 250, 248, .94);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 40px 80px -44px rgba(38, 22, 86, .28);
  opacity: 0; transform: translateY(18px);
  transition: opacity .5s ease, transform .8s var(--ease);
  pointer-events: none;
}
.fx-detail.is-on { opacity: 1; transform: none; pointer-events: auto; }
.fx-detail h3 { margin: 16px 0 0; font-size: clamp(28px, 2.6vw, 40px); font-weight: 600; letter-spacing: -.03em; line-height: 1.12; }
html[dir="rtl"] .fx-detail h3 { letter-spacing: 0; line-height: 1.3; }
.fx-detail .tagline { margin: 12px 0 0; font-size: 17px; line-height: 1.45; color: var(--accent); font-weight: 500; }
.fx-detail .body { margin: 16px 0 0; font-size: 14px; line-height: 1.7; color: var(--body); }
html[dir="rtl"] .fx-detail .body { line-height: 1.9; }
.fx-detail .contrib { margin-top: 20px; padding-top: 16px; }
.fx-detail .contrib .v { font-size: 13px; line-height: 1.6; }
.fx-detail .tags { margin-top: 18px; }
.fx-detail .tag { background: transparent; border: 1px solid var(--line-2); color: var(--muted); font-size: 11.5px; padding: 5px 10px; }

/* On a laptop the stage is short and the case study is not: tighten the copy
   so it still sits inside the stage rather than hanging past it. Width-scoped,
   because a phone is short too and its copy is the whole point of the page. */
@media (min-width: 981px) and (max-height: 840px) {
  .fx-detail { padding: 22px 24px 24px; }
  .fx-detail h3 { font-size: clamp(26px, 2.2vw, 32px); }
  .fx-detail .tagline { margin-top: 10px; font-size: 15px; }
  .fx-detail .body { margin-top: 12px; font-size: 13px; line-height: 1.6; }
  .fx-detail .contrib { margin-top: 14px; padding-top: 12px; }
  .fx-detail .contrib .v { margin-top: 6px; font-size: 12px; }
  .fx-detail .tags { margin-top: 12px; gap: 6px; }
  .fx-detail .tag { font-size: 11px; padding: 4px 8px; }
}

/* --------------------------------------------------------------- controls */

.fx-hint {
  margin: 14px 0 0; font-family: var(--mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
}
html[dir="rtl"] .fx-hint { font-family: var(--sans); letter-spacing: 0; text-transform: none; font-size: 12.5px; }

.fx-controls { display: flex; align-items: stretch; gap: 12px; margin-top: 28px; }
.fx-tabs { display: flex; gap: 8px; flex: 1; min-width: 0; }

.fx-tab {
  position: relative; flex: 1; min-width: 0;
  border: 1px solid var(--line); background: var(--surface);
  padding: 12px 14px 13px; text-align: start; cursor: pointer;
  font: inherit; color: inherit;
  transition: border-color .35s ease, background .35s ease;
}
.fx-tab:hover { border-color: var(--line-btn); background: var(--bg); }
.fx-tab[aria-selected="true"] { border-color: var(--line-btn); }
/* The accent only appears on the product actually on stage. */
.fx-rail {
  position: absolute; inset-inline: 0; top: 0; height: 3px;
  background: var(--accent); opacity: 0;
  transition: opacity .45s ease;
}
.fx-tab[aria-selected="true"] .fx-rail { opacity: 1; }
.fx-tab-head { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
/* With no position code on the tab, the accent is what says which product is
   on stage — the rail above it and the name itself. */
.fx-tab[aria-selected="true"] .fx-tab-name { color: var(--accent); }
/* Bilingual names ("IMDAD | إمداد") are long enough to wrap and make one tab
   taller than its neighbours. One line each, clipped if it has to be. */
.fx-tab-name {
  font-size: 13.5px; font-weight: 600; letter-spacing: -.015em;
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fx-tab-cat {
  display: block; margin-top: 5px; font-size: 10.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.fx-arrows { display: flex; gap: 7px; flex: none; }
.fx-arrow {
  width: 44px; border: 1px solid var(--line); background: var(--surface);
  cursor: pointer; font-size: 15px; color: var(--body); line-height: 1;
  transition: border-color .3s ease, background .3s ease, color .3s ease;
}
.fx-arrow:hover { border-color: var(--brand); color: var(--brand); background: var(--bg); }
.fx-arrow span { display: inline-block; }
html[dir="rtl"] .fx-arrow span { transform: scaleX(-1); }

.fx-progress { height: 2px; background: var(--line); margin-top: 20px; }
.fx-progress i {
  display: block; height: 100%; width: 20%;
  background: linear-gradient(90deg, var(--brand-dk), var(--brand));
  transition: width .8s var(--ease);
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 1200px) {
  .fx { --fx-w: min(560px, calc(var(--fx-h) * 1.06)); --fx-h: min(540px, 56vh); --fx-lw: 200px; --fx-lz: 110px; }
  .fx-panel { width: min(380px, 44%); }
  .fx-detail { padding: 24px 24px 26px; }
  .fx-detail .body { font-size: 13.5px; }
}

/* The copy stops competing with the stage for width and moves below it. */
@media (max-width: 980px) {
  /* With the copy below the stage there is nothing to make room for, so the
     products move back to the middle. */
  .fx, html[dir="rtl"] .fx {
    --fx-w: min(72vw, 520px, calc(var(--fx-h) * 1.10)); --fx-h: min(470px, 44vh); --fx-o: 50%;
    --fx-lw: 168px; --fx-lz: 90px; padding-bottom: 52px;
  }
  .fx-stage, html[dir="rtl"] .fx-stage { perspective: 1700px; perspective-origin: 50% 46%; }
  /* Below the stage rather than over it, so it leaves the shared cell. */
  .fx-scene { display: block; }
  .fx-panel {
    grid-area: auto; width: auto; justify-self: stretch;
    margin: 28px 0 0; pointer-events: auto;
  }
  /* No card here. All five panels share one grid cell, so the block is as tall
     as the longest case study — a border would draw a box with dead space
     under the shorter ones. */
  .fx-detail {
    padding: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: none; border: 0; box-shadow: none;
  }
  .fx-detail h3 { font-size: 30px; }
  .fx-detail .body { font-size: 15px; }
}

@media (max-width: 620px) {
  .fx { --fx-w: min(82vw, 400px, calc(var(--fx-h) * 1.10)); --fx-h: min(340px, 38vh); --fx-lw: 132px; --fx-lz: 70px; }
  .fx-stage { perspective: 1200px; }
  /* One lifted screen still reads as depth at this size; two collide. */
  .fx-lift-b { display: none; }
  /* A short phone viewport leaves little slack above and below the slab, so
     the lifted screen tucks closer in than it does on a desktop stage. */
  .fx-lift-a { inset-inline-end: -24px; bottom: -16px; }
  .fx-detail h3 { font-size: 26px; }
  .fx-controls { flex-direction: column; gap: 14px; }
  /* Five tabs will not fit a phone, so the rail scrolls and snaps and the
     script keeps the chosen one centred. */
  .fx-tabs {
    overflow-x: auto;
    /* Proximity, not mandatory: the script also centres the chosen tab, and a
       mandatory container re-snaps under the finger between touchstart and
       touchend — which swallows the tap on any tab that is not already
       centred. Proximity keeps the swipe feel without fighting. */
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--gutter);
    -ms-overflow-style: none; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  }
  .fx-tabs::-webkit-scrollbar { display: none; }
  .fx-tab { flex: 0 0 64%; scroll-snap-align: center; }
  .fx-arrows { align-self: flex-end; }
  .fx-arrow { width: 48px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  /* No drifting screens and no camera parallax — the stage still works, it
     just stops moving on its own. */
  .fx-slab.is-on .fx-lift-a .shot,
  .fx-slab.is-on .fx-lift-b .shot { animation: none; }
  .fx-cam { transition: none; }
}

@media print {
  .fx-stage, .fx-controls, .fx-progress, .fx-hint { display: none !important; }
  .fx-panel { position: static; width: auto; height: auto; }
  .fx-detail { opacity: 1; transform: none; grid-area: auto; page-break-inside: avoid; }
}

/* ==========================================================================
   Portfolio — the work as a depth field
   Each group is one perspective space with its own accent. Cards rise out of
   it as the group arrives, and the card under the cursor tilts towards it with
   its screenshot lifted off the face — the same depth language as the flagship
   stage, arranged as a grid because the full catalogue is there to be
   scanned, not paged through.
   ========================================================================== */

/* ------------------------------------------------- selected engagements */

/* ---------------------------------------------------------------------- */

.wk { position: relative; overflow: hidden; }
.wk-in { position: relative; padding-top: 72px; padding-bottom: 84px; }

/* The group number, blown up and set behind everything as the back wall of
   the space. Deliberately near-invisible: it is depth, not decoration. */
.wk-ghost {
  position: absolute; inset-inline-end: var(--gutter); top: 18px;
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(150px, 24vw, 340px); line-height: .78;
  color: var(--accent); opacity: .045;
  pointer-events: none; user-select: none;
}
html[dir="rtl"] .wk-ghost { font-family: var(--sans); }

.wk .group-head { position: relative; }
.wk .group-title .num { color: var(--accent); }

/* One shared vanishing point per group, so the cards read as sitting in the
   same room rather than each tilting in a private box. */
.wk-grid {
  position: relative;
  perspective: 1600px;
  perspective-origin: 50% 42%;
  /* Real gaps and per-card borders preserve the grid rhythm without painting
     the unused tracks of an incomplete final row as large grey cells. */
  background: none;
  border: 0;
  gap: 14px;
}

/* ------------------------------------------------------------------ cards */

.wk-card {
  --rx: 0deg; --ry: 0deg;
  position: relative;
  transform-style: preserve-3d;
  /* Visible is the resilient default. The runtime opts into the hidden
     entrance state only after it is ready to reveal every grid. */
  transform: none;
  opacity: 1;
  border: 1px solid var(--line);
  transition:
    transform .9s var(--ease),
    opacity .7s ease,
    box-shadow .45s ease,
    background .3s ease;
  transition-delay: calc(var(--i) * 55ms);
  box-shadow: 0 0 0 rgba(38, 22, 86, 0);
}

/* Where an enhanced card starts: back in the space and tipped away. */
html.wk-enhanced .wk-card {
  transform: translate3d(0, 26px, -240px) rotateX(7deg);
  opacity: 0;
}

/* …and where it lands, once the group has arrived. */
.wk-grid.is-in .wk-card {
  transform: none;
  opacity: 1;
}

/* The one under the cursor: forward, tilted towards it, and lit. The delay is
   dropped here so it answers the pointer immediately rather than waiting out
   its entrance stagger. */
.wk-grid.is-in .wk-card.is-hot {
  transform: translate3d(0, -4px, 34px) rotateX(var(--rx)) rotateY(var(--ry));
  transition-delay: 0s;
  transition-duration: .35s, .35s, .45s, .3s;
  box-shadow: 0 38px 70px -34px rgba(38, 22, 86, .34), 0 8px 20px -12px rgba(38, 22, 86, .16);
  background: var(--surface);
  z-index: 2;
}
/* Accent light behind the raised card. */
.wk-glow {
  position: absolute; inset: -1px;
  border: 1px solid transparent;
  opacity: 0; transition: opacity .45s ease;
  pointer-events: none;
}
.wk-card.is-hot .wk-glow {
  opacity: 1;
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
}

/* The screenshot lifts off the card face — the flagship stage's motif at card
   scale. It sits inside the card's padding rather than bleeding to the edges:
   a full-bleed shot grows past the card's own silhouette as it comes forward
   and covers the cards either side, which reads as a mistake rather than as
   depth. Framed, the lift happens within the card and looks deliberate. */
.wk-card .card-shot {
  margin: 0 0 22px;
  border: 1px solid var(--line);
  transition: transform .45s var(--ease), border-color .45s ease;
}
.wk-card.is-hot .card-shot {
  transform: translateZ(26px);
  border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
}
.wk-card.is-hot .card-shot img { transform: scale(1.05); }

.wk-card .cat { color: var(--accent); }

/* Labs cells carry no screenshot, so they get the same rise and tilt at a
   quieter weight. */
.wk-lab { background: var(--bg); border: 1px solid var(--line); padding: 26px 24px 28px; }
.wk-lab h3 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.wk-lab .body { margin: 12px 0 0; font-size: 14px; line-height: 1.7; color: var(--body); }
.sec-white .wk-lab { background: var(--surface); }

/* -------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .wk-in { padding-top: 56px; padding-bottom: 64px; }
  .wk-ghost { font-size: clamp(110px, 30vw, 200px); top: 10px; }
  .wk-grid { perspective: 1100px; }
  html.wk-enhanced .wk-card { transform: translate3d(0, 20px, -150px) rotateX(5deg); }
}

@media (max-width: 620px) {
  .wk-ghost { opacity: .035; }
  /* One column: a per-card stagger would leave the page visibly assembling
     itself as the visitor scrolls, so they arrive together. */
  .wk-card { transition-delay: 0s; }
  html.wk-enhanced .wk-card { transform: translate3d(0, 16px, -90px) rotateX(4deg); }
}

@media (prefers-reduced-motion: reduce) {
  /* No rise, no tilt, no lift — the grid, flat and immediate. */
  .wk-card,
  .wk-grid.is-in .wk-card,
  .wk-grid.is-in .wk-card.is-hot {
    transform: none; opacity: 1; transition: none;
  }
  .wk-card .card-shot,
  .wk-card.is-hot .card-shot,
  .wk-card.is-hot .card-shot img { transform: none; transition: none; }
}

@media print {
  .wk-ghost { display: none; }
  .wk-card { transform: none !important; opacity: 1 !important; page-break-inside: avoid; }
}

/* ==========================================================================
   About — the studio's own page
   Same depth language as the work: one perspective space per section, cards
   that rise out of it, and a standing card for the person who owns the
   experience where a portrait used to sit.
   ========================================================================== */

.ab-head { padding-top: 88px; padding-bottom: 76px; }
.about-grid { align-items: center; }

/* ------------------------------------------------------- leadership card */

.ab-lead {
  position: relative;
  align-self: center;
  padding: 34px 32px 36px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 40px 80px -46px rgba(38, 22, 86, .30);
  --accent: #6E3EF2;
}

/* A band of the brand ramp along the leading edge — the mark's own gradient,
   turned on its side. */
.ab-lead::before {
  content: '';
  position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px;
  background: linear-gradient(180deg, #3A2185, #6B3AE8, #B79AF8);
}

/* Accent light behind the card, the same one the portfolio cards use. */
.ab-lead-glow {
  position: absolute; inset: -1px; pointer-events: none;
  opacity: 0; transition: opacity .5s ease;
}
.ab-lead:hover .ab-lead-glow { opacity: 1; }
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .ab-lead-glow { border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent); }
}

.ab-lead-k {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
}
html[dir="rtl"] .ab-lead-k { font-family: var(--sans); letter-spacing: 0; text-transform: none; font-size: 12.5px; font-weight: 600; }

.ab-lead-name {
  margin-top: 18px;
  font-size: clamp(26px, 2.4vw, 34px); font-weight: 600;
  letter-spacing: -.03em; line-height: 1.12; color: var(--ink);
}
html[dir="rtl"] .ab-lead-name { letter-spacing: 0; line-height: 1.3; }

.ab-lead-role {
  margin-top: 8px; font-size: 16px; font-weight: 500; color: var(--accent);
}

.ab-lead-line {
  margin: 20px 0 0; padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 14px; line-height: 1.7; color: var(--body);
}
html[dir="rtl"] .ab-lead-line { line-height: 1.9; }

/* -------------------------------------------------------------- sections */

/* The About sections carry no group number, so the depth field runs without
   the ghost numeral the portfolio uses. */
.ab-in { padding-top: 72px; padding-bottom: 84px; }
.about .block-title { margin-bottom: 40px; }

/* Numbered principle, sharing the portfolio's rise and tilt. */
.ab-principle { padding: 28px 26px 30px; }
.ab-n {
  display: block; margin-bottom: 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  color: var(--accent);
}
html[dir="rtl"] .ab-n { font-family: var(--sans); letter-spacing: 0; }
.ab-principle h3 { font-size: 17.5px; line-height: 1.3; }
.ab-principle .body { margin-top: 10px; font-size: 13.5px; }

/* Sector pills pick up the section accent as they are passed over. */
.about .pill {
  transition: border-color .3s ease, color .3s ease, transform .3s var(--ease);
}
.about .pill:hover {
  color: var(--ink);
  transform: translateY(-2px);
}
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .about .pill:hover { border-color: color-mix(in srgb, var(--accent) 46%, var(--line)); }
}

@media (max-width: 900px) {
  .ab-head { padding-top: 60px; padding-bottom: 56px; }
  .ab-in { padding-top: 56px; padding-bottom: 64px; }
  .ab-lead { padding: 28px 24px 30px; }
  .about .block-title { margin-bottom: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .about .pill, .about .pill:hover { transition: none; transform: none; }
  .ab-lead-glow { transition: none; }
}

/* Team members share the depth field; the card is quiet — a role kicker in
   the section accent over the name, nothing else competing with it. */
.ab-member { padding: 24px 24px 26px; }
.ab-member-role {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--accent);
}
html[dir="rtl"] .ab-member-role { font-family: var(--sans); letter-spacing: 0; text-transform: none; font-size: 12.5px; font-weight: 600; }
.ab-member-name { margin: 12px 0 0; font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
html[dir="rtl"] .ab-member-name { letter-spacing: 0; }

/* Seven members rarely fill the last row, and .grid-cells paints the line
   colour behind its 1px gaps — which surfaces as a grey slab wherever a cell
   is empty. The team grid drops that device and uses real gaps instead. */
.wk-grid:has(.ab-member) { background: none; border: 0; gap: 14px; }
.wk-grid:has(.ab-member) .ab-member { border: 1px solid var(--line); }

/* ------------------------------------------------------------ team photos */

/* Square-edged like every other image on the site. The photo lifts with the
   card: it sits on its own Z layer, the same motif as the flagship screens. */
.ab-photo { display: block; overflow: hidden; background: var(--bg); border: 1px solid var(--line); }
.ab-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.ab-lead-photo { width: 132px; margin-bottom: 20px; }

.ab-member { transform-style: preserve-3d; }
.ab-member-photo {
  width: 88px; margin-bottom: 16px;
  transition: transform .45s var(--ease), border-color .45s ease;
}
.wk-card.is-hot .ab-member-photo {
  transform: translateZ(24px);
}
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .wk-card.is-hot .ab-member-photo { border-color: color-mix(in srgb, var(--accent) 32%, var(--line)); }
}

@media (max-width: 620px) {
  .ab-lead-photo { width: 108px; }
  .ab-member-photo { width: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-member-photo, .wk-card.is-hot .ab-member-photo { transform: none; transition: none; }
}

/* Two leadership cards — experience and technical — stacked beside the intro.
   The photo sits beside the text on each so the pair stays compact enough to
   share the column. */
.ab-leads { display: grid; gap: 16px; align-self: center; }
.ab-leads .ab-lead { align-self: auto; }
.ab-leads .ab-lead-photo { float: inline-start; width: 96px; margin: 0; margin-inline-end: 18px; }
.ab-leads .ab-lead-k { padding-top: 4px; }
.ab-leads .ab-lead-name { margin-top: 10px; font-size: clamp(22px, 1.8vw, 27px); }
.ab-leads .ab-lead-line { clear: both; }

@media (max-width: 620px) {
  .ab-leads .ab-lead-photo { width: 80px; margin-inline-end: 14px; }
}