/* Layout concept: a 12-column editorial grid on warm white. Type does the work; one burnt-orange line is the only accent.
   Logical properties throughout, so the Arabic (RTL) and English (LTR) versions share one stylesheet. */
:root {
  --paper: #FFFFFF;
  --ink: #151515;
  --ink-2: #565A60;
  --ink-3: #858A91;
  --line: #E2E5E9;
  --wash: #F3F5F7;
  --accent: #B4421A;

  --f-sans: "Schibsted Grotesk", "Readex Pro", "Noto Naskh Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-serif: "Newsreader", "Noto Naskh Arabic", Georgia, "Times New Roman", serif;

  --pad: clamp(16px, 3.2vw, 48px);
  --gap: clamp(12px, 1.6vw, 24px);
  --track-name: -0.045em;
  --track-h: -0.02em;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --hdr-h: 64px;
  color-scheme: light;
}
html:is([lang="ar"],[lang="ckb"]) { --track-name: 0; --track-h: 0; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--f-sans); font-size: 17px; line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
html:is([lang="ar"],[lang="ckb"]) body { font-size: 18px; line-height: 1.9; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); background: var(--paper); z-index: 60; }
body.lock { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--paper); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: var(--pad); top: -80px; background: var(--ink); color: var(--paper); padding: 10px 16px; z-index: 100; }
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 8px); }

.wrap {
  width: 100%; max-width: 1680px; margin-inline: auto;
  padding-left: max(var(--pad), env(safe-area-inset-left, 0px));
  padding-right: max(var(--pad), env(safe-area-inset-right, 0px));
}
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.arr { width: 1em; height: 1em; flex: none; transition: transform .35s var(--ease); }
[dir="rtl"] .arr { transform: scaleX(-1); }

/* ---------- links with a drawn underline ---------- */
.lnk { display: inline-flex; align-items: center; gap: .5em; padding-block: 4px; background: linear-gradient(var(--ink), var(--ink)) no-repeat 0 100% / 100% 1px; transition: background-size .4s var(--ease); }
[dir="rtl"] .lnk { background-position: 100% 100%; }
.lnk:hover { background-image: linear-gradient(var(--accent), var(--accent)); }
.lnk:hover .arr { transform: translateX(4px); }
[dir="rtl"] .lnk:hover .arr { transform: scaleX(-1) translateX(4px); }

/* ---------- header ---------- */
.hdr { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); transition: transform .35s var(--ease); }
.hdr.hide { transform: translateY(-101%); }
.hdr:focus-within { transform: none; }
.hdr-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--hdr-h); }
.hdr-name { font-weight: 600; font-size: 13px; letter-spacing: .02em; }
html:is([lang="ar"],[lang="ckb"]) .hdr-name { font-size: 13px; letter-spacing: .02em; }
.site-logo { display: block; width: auto; max-width: 100%; }
.hdr-name .site-logo { height: 36px; }
@media (max-width: 640px) { .hdr-name .site-logo { height: 30px; } }
.ftr-name .site-logo { height: clamp(56px, 8vw, 112px); }
.hdr-nav { display: none; gap: clamp(20px, 3vw, 48px); font-size: 13px; letter-spacing: .08em; font-weight: 500; }
html:is([lang="ar"],[lang="ckb"]) .hdr-nav { font-size: 17px; letter-spacing: 0; }
.hdr-nav a, .hdr-lang a { position: relative; padding-block: 6px; }
.hdr-nav a::after, .hdr-lang a::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
[dir="rtl"] .hdr-nav a::after, [dir="rtl"] .hdr-lang a::after { transform-origin: right; }
.hdr-nav a:hover::after, .hdr-lang a:hover::after, .hdr-nav a[aria-current]::after, .hdr-lang a[aria-current]::after { transform: scaleX(1); }
.hdr-lang { display: flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: .08em; font-weight: 500; }
.hdr-lang span { color: var(--ink-3); }
.hdr-lang a[aria-current] { color: var(--ink); }
.hdr-lang a:not([aria-current]) { color: var(--ink-2); }
.hdr-right { display: flex; align-items: center; gap: 24px; }
.hdr-menu { background: none; border: 1px solid var(--ink); border-radius: 0; padding: 8px 16px; font-size: 14px; cursor: pointer; }
html:is([lang="ar"],[lang="ckb"]) .hdr-menu { font-size: 16px; }
@media (min-width: 900px) { .hdr-nav { display: flex; } .hdr-menu { display: none; } }

.menu { position: fixed; inset: 0; z-index: 70; background: var(--paper); display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); overflow: auto; }
.menu[hidden] { display: none; }
.menu-top { display: flex; justify-content: space-between; align-items: center; min-height: var(--hdr-h); border-bottom: 1px solid var(--line); }
.menu-links { display: flex; flex-direction: column; padding-block: 24px; }
.menu-links a { font-size: clamp(40px, 12vw, 72px); font-weight: 700; line-height: 1.15; letter-spacing: var(--track-h); padding-block: 8px; border-bottom: 1px solid var(--line); }
.menu-links a[aria-current] { color: var(--accent); }
.menu-foot { margin-top: auto; padding-block: 24px; display: flex; gap: 24px; align-items: center; justify-content: space-between; }

/* ---------- page transition ---------- */
#main { outline: none; min-height: 70vh; }
#main.out { opacity: 0; transition: opacity .14s linear; }
#main.in { animation: pagein .5s var(--ease) both; }
@keyframes pagein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- home hero ---------- */
.hero { padding-top: clamp(20px, 4vw, 56px); padding-bottom: clamp(24px, 3.5vw, 56px); }
.hero-meta { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--ink-2); }
html:is([lang="ar"],[lang="ckb"]) .hero-meta { font-size: 16px; }
.name { font-weight: 800; font-size: clamp(34px, 8.2vw, 150px); line-height: .86; letter-spacing: var(--track-name); margin-block: clamp(20px, 4vw, 56px) clamp(12px, 2vw, 28px); text-transform: uppercase; }
html:is([lang="ar"],[lang="ckb"]) .name { font-weight: 800; line-height: .9; }
.name .ln { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.name .ln > span { display: block; animation: rise 1s var(--ease) both; }
.name .l2 { padding-inline-start: 16.66%; }
.name .l2 > span { animation-delay: .12s; }
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
.rule { display: none; height: 3px; background: var(--accent); transform-origin: left; animation: draw 1.1s .5s var(--ease) both; }
[dir="rtl"] .rule { transform-origin: right; }
@keyframes draw { from { transform: scaleX(0); } to { transform: none; } }
.hero-grid { margin-top: clamp(16px, 2.5vw, 36px); row-gap: 32px; align-items: start; }
.hero-links { grid-column: 1 / 5; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-size: 18px; font-weight: 500; }
.hero-intro { grid-column: 7 / 13; font-family: var(--f-serif); font-size: clamp(22px, 2.3vw, 36px); line-height: 1.3; letter-spacing: -.005em; text-wrap: balance; }
html:is([lang="ar"],[lang="ckb"]) .hero-intro { line-height: 1.8; font-size: clamp(22px, 2.2vw, 32px); }
@media (max-width: 899px) { .hero-links, .hero-intro { grid-column: 1 / -1; } .hero-intro { order: -1; } .name .l2 { padding-inline-start: 10%; } }

/* ---------- section heads ---------- */
.shead { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block: 16px; border-top: 1px solid var(--ink); margin-bottom: clamp(24px, 3vw, 48px); }
.shead h2 { font-size: clamp(15px, 1.2vw, 18px); font-weight: 500; }
.shead .lnk { font-size: 15px; }
section.blk { padding-block: clamp(32px, 4.5vw, 72px) 0; }

/* ---------- tiles ---------- */
.tiles { row-gap: clamp(40px, 6vw, 96px); align-items: start; }
.tile { display: block; grid-column: 1 / -1; }
.tile-media { position: relative; overflow: hidden; background: var(--wash); }
.r-wide .tile-media { aspect-ratio: 16 / 10; } .r-tall .tile-media { aspect-ratio: 4 / 5; } .r-sq .tile-media { aspect-ratio: 1 / 1; }
.tile-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.tile-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 14px; }
.tile-cap h3 { font-size: clamp(20px, 1.9vw, 28px); font-weight: 600; line-height: 1.2; letter-spacing: var(--track-h); background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: background-size .45s var(--ease); }
[dir="rtl"] .tile-cap h3 { background-position: 100% 100%; }
.tile-cap .yr { font-size: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tile-cat { font-size: 14px; color: var(--ink-2); margin-top: 2px; }
html:is([lang="ar"],[lang="ckb"]) .tile-cat { font-size: 15px; }
.tile-open { position: absolute; inset-inline-end: 12px; bottom: 12px; background: var(--paper); padding: 8px 14px; font-size: 14px; display: inline-flex; gap: 8px; align-items: center; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .4s var(--ease); }
.tile:active .tile-media img { transform: scale(1.02); }
@media (hover: hover) {
  .tile:hover .tile-media img { transform: scale(1.04); }
  .tile:hover .tile-cap h3 { background-size: 100% 1px; }
  .tile:hover .tile-open, .tile:focus-visible .tile-open { opacity: 1; transform: none; }
}
@media (hover: none) { .tile-open { opacity: 1; transform: none; } }
@media (min-width: 760px) {
}
.ph { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 14px; font-size: 14px; color: var(--ink-2);
  background: repeating-linear-gradient(135deg, transparent 0 11px, var(--line) 11px 12px), var(--wash); }
.ph span { background: var(--paper); padding: 4px 10px; }
html:is([lang="ar"],[lang="ckb"]) .ph { font-size: 15px; }

/* ---------- home: services + cta ---------- */
.what-list { grid-column: 1 / -1; columns: 1; }
.what-list li { border-bottom: 1px solid var(--line); padding-block: 14px; font-size: clamp(22px, 2.6vw, 40px); font-weight: 600; letter-spacing: var(--track-h); line-height: 1.2; break-inside: avoid; }
@media (min-width: 900px) { .what-list { columns: 2; column-gap: var(--gap); } }
.cta { padding-block: clamp(40px, 6vw, 96px); }
.cta a { display: block; font-size: clamp(40px, 9vw, 150px); font-weight: 800; line-height: .98; letter-spacing: var(--track-name); }
html:is([lang="ar"],[lang="ckb"]) .cta a { font-weight: 700; line-height: 1.25; }
.cta small { display: flex; align-items: center; gap: 12px; margin-top: 20px; font-size: 18px; letter-spacing: 0; line-height: 1.4; font-weight: 500; }
.cta a:hover small { color: var(--accent); }
.cta a:hover .arr { transform: translateX(6px); }
[dir="rtl"] .cta a:hover .arr { transform: scaleX(-1) translateX(6px); }

/* ---------- inner page head ---------- */
.phead { padding-block: clamp(32px, 6vw, 96px) clamp(24px, 3vw, 48px); }
.phead h1 { font-size: clamp(52px, 11vw, 190px); font-weight: 800; line-height: .92; letter-spacing: var(--track-name); }
html:is([lang="ar"],[lang="ckb"]) .phead h1 { font-weight: 700; line-height: 1.2; }
.phead p { margin-top: 20px; max-width: 34em; color: var(--ink-2); font-size: clamp(18px, 1.5vw, 22px); }

/* ---------- work filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 4px 28px; border-top: 1px solid var(--ink); padding-top: 14px; margin-bottom: clamp(28px, 4vw, 56px); }
.filters button { background: none; border: 0; padding: 6px 0; cursor: pointer; font-size: 15px; color: var(--ink-2); position: relative; }
html:is([lang="ar"],[lang="ckb"]) .filters button { font-size: 17px; }
.filters button sup { font-size: .7em; color: var(--ink-3); margin-inline-start: 3px; font-variant-numeric: tabular-nums; }
.filters button::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
[dir="rtl"] .filters button::after { transform-origin: right; }
.filters button:hover { color: var(--ink); }
.filters button[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.filters button[aria-pressed="true"]::after { transform: scaleX(1); }
.count { font-size: 14px; color: var(--ink-2); margin-bottom: 20px; }
.empty { padding-block: 64px; color: var(--ink-2); }
.tiles.swap { animation: pagein .45s var(--ease) both; }

/* ---------- project page ---------- */
.pj-top { padding-top: clamp(20px, 3vw, 40px); }
.pj-back { font-size: 15px; }
.pj-title { margin-top: clamp(20px, 4vw, 56px); font-size: clamp(44px, 9.5vw, 170px); font-weight: 800; line-height: .94; letter-spacing: var(--track-name); text-wrap: balance; }
html:is([lang="ar"],[lang="ckb"]) .pj-title { font-weight: 700; line-height: 1.2; }
.pj-sub { margin-top: 20px; font-family: var(--f-serif); font-size: clamp(22px, 2.4vw, 36px); line-height: 1.3; color: var(--ink-2); }
html:is([lang="ar"],[lang="ckb"]) .pj-sub { line-height: 1.7; }
.meta { margin-top: clamp(28px, 4vw, 56px); border-top: 1px solid var(--ink); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
.meta div { padding-block: 14px; border-bottom: 1px solid var(--line); min-width: 0; }
.meta dt { font-size: 13px; color: var(--ink-3); }
html:is([lang="ar"],[lang="ckb"]) .meta dt { font-size: 14px; }
.meta dd { margin-top: 2px; font-size: 16px; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .meta { grid-template-columns: 1.4fr 1.2fr .5fr 2fr; } }
.pj-hero { margin-top: clamp(24px, 3vw, 40px); }
.fig { margin: 0; min-width: 0; }
.fig img { width: 100%; background: var(--wash); }
.fig figcaption { margin-top: 10px; font-size: 14px; color: var(--ink-2); max-width: 46em; line-height: 1.55; }
html:is([lang="ar"],[lang="ckb"]) .fig figcaption { font-size: 15px; line-height: 1.8; }
.zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.zoom:focus-visible { outline-offset: 4px; }

.cs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px var(--gap); padding-block: clamp(40px, 6vw, 96px) 0; border-top: 1px solid var(--line); margin-top: clamp(40px, 6vw, 96px); }
.cs-h { font-size: 15px; font-weight: 600; align-self: start; }
.cs-h b { display: block; font-weight: 400; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.cs-b { display: grid; gap: clamp(24px, 3vw, 48px); min-width: 0; }
@media (min-width: 900px) { .cs { grid-template-columns: repeat(12, minmax(0, 1fr)); } .cs-h { grid-column: 1 / 4; position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--hdr-h) + 24px); } .cs-b { grid-column: 4 / 13; } }
.prose { display: grid; gap: 1.1em; max-width: 40em; }
.prose p { font-size: 18px; line-height: 1.65; }
html:is([lang="ar"],[lang="ckb"]) .prose p { font-size: 19px; line-height: 2; }
.cs-overview .prose p:first-child { font-family: var(--f-serif); font-size: clamp(24px, 2.6vw, 38px); line-height: 1.3; }
html:is([lang="ar"],[lang="ckb"]) .cs-overview .prose p:first-child { line-height: 1.8; }
.els { display: grid; gap: 28px var(--gap); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.els > div { border-top: 3px solid var(--ink); padding-top: 12px; }
.els small { display: block; font-size: 13px; color: var(--ink-3); }
.els h4 { font-size: clamp(22px, 2vw, 30px); font-weight: 600; line-height: 1.2; margin: 4px 0 10px; letter-spacing: var(--track-h); }
.els p { font-size: 16px; color: var(--ink-2); line-height: 1.6; }
html:is([lang="ar"],[lang="ckb"]) .els p { font-size: 17px; line-height: 1.9; }
.specs { border-top: 1px solid var(--ink); max-width: 46em; }
.specs div { display: flex; justify-content: space-between; gap: 24px; padding-block: 12px; border-bottom: 1px solid var(--line); }
.specs dt { color: var(--ink-2); font-size: 15px; } .specs dd { font-weight: 500; font-variant-numeric: tabular-nums; text-align: end; font-size: 16px; }
.imgs { display: grid; gap: var(--gap); min-width: 0; }
.imgs.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.imgs.stack { gap: clamp(28px, 4vw, 56px); }
@media (max-width: 640px) { .imgs.two { grid-template-columns: minmax(0, 1fr); } }
.pal { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.sw { aspect-ratio: 4 / 5; padding: 12px; display: flex; flex-direction: column; justify-content: flex-end; font-size: 13px; line-height: 1.5; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px rgba(21, 21, 21, .12); }
.sw b { font-size: 16px; font-weight: 600; }
.next { margin-top: clamp(64px, 9vw, 144px); border-top: 1px solid var(--ink); padding-block: 24px clamp(64px, 9vw, 128px); }
.next small { font-size: 14px; color: var(--ink-2); }
.next a.big { display: block; margin-top: 12px; font-size: clamp(36px, 8vw, 128px); font-weight: 800; line-height: .98; letter-spacing: var(--track-name); text-wrap: balance; }
html:is([lang="ar"],[lang="ckb"]) .next a.big { font-weight: 700; line-height: 1.25; }
.next a.big:hover { color: var(--accent); }
.next .lnk { margin-top: 24px; font-size: 16px; }
.pending { margin-top: clamp(32px, 4vw, 56px); display: grid; gap: 24px; }
.pending .tile-media { aspect-ratio: 16 / 7; }
.pending h2 { font-size: clamp(22px, 2.2vw, 32px); font-weight: 600; }
.pending p { color: var(--ink-2); max-width: 36em; }

/* ---------- lightbox ---------- */
.lb { position: fixed; inset: 0; z-index: 90; background: rgba(21, 21, 21, .94); display: grid; place-items: center; padding: calc(env(safe-area-inset-top, 0px) + 56px) 16px calc(env(safe-area-inset-bottom, 0px) + 16px); }
.lb[hidden] { display: none; }
.lb img { max-width: 100%; max-height: 100%; object-fit: contain; background: var(--paper); }
.lb button { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); inset-inline-end: 16px; background: var(--paper); border: 0; padding: 8px 16px; cursor: pointer; font-size: 14px; }

/* ---------- about ---------- */
.about { row-gap: 40px; padding-bottom: 0; }
.about-fig { grid-column: 1 / -1; }
.about-fig img { width: min(100%, 360px); mix-blend-mode: multiply; filter: grayscale(1) contrast(1.02); }
.about-body { grid-column: 1 / -1; display: grid; gap: clamp(32px, 4vw, 56px); min-width: 0; }
.about-lead { font-family: var(--f-serif); font-size: clamp(28px, 3.6vw, 56px); line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
html:is([lang="ar"],[lang="ckb"]) .about-lead { line-height: 1.55; }
.about-body .prose { max-width: 38em; }
.rows { border-top: 1px solid var(--ink); }
.rows > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 24px; padding-block: 18px; border-bottom: 1px solid var(--line); }
.rows h3 { font-size: 15px; font-weight: 600; }
.rows p, .rows li { font-size: 17px; color: var(--ink-2); max-width: 38em; }
.rows li { color: var(--ink); padding-block: 2px; }
@media (min-width: 900px) {
  .about-fig { grid-column: 1 / 5; position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--hdr-h) + 24px); align-self: start; }
  .about-body { grid-column: 6 / 13; }
  .rows > div { grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); }
}

/* ---------- services ---------- */
.svc > li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px var(--gap); padding-block: 22px; border-bottom: 1px solid var(--line); }
.svc-list { border-top: 1px solid var(--ink); }
.svc h2 { font-size: clamp(24px, 2.8vw, 42px); font-weight: 600; line-height: 1.15; letter-spacing: var(--track-h); }
.svc p { color: var(--ink-2); max-width: 32em; }
@media (min-width: 900px) { .svc > li { grid-template-columns: repeat(12, minmax(0, 1fr)); padding-block: 28px; } .svc h2 { grid-column: 1 / 7; } .svc p { grid-column: 7 / 13; align-self: center; } }
.tail { padding-block: clamp(40px, 5vw, 72px) 0; }

/* ---------- contact ---------- */
.contact { row-gap: 48px; }
.contact-info { grid-column: 1 / -1; }
.contact-form { grid-column: 1 / -1; }
@media (min-width: 900px) { .contact-info { grid-column: 1 / 5; } .contact-form { grid-column: 6 / 13; } }
.direct { border-top: 1px solid var(--ink); }
.direct > div { padding-block: 14px; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; }
.direct dt { font-size: 14px; color: var(--ink-3); }
.direct dd { display: flex; gap: 14px; align-items: baseline; font-weight: 500; }
.copy { background: none; border: 0; padding: 0; font-size: 14px; color: var(--ink-2); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.copy:hover { color: var(--accent); }
form { display: grid; gap: 28px; }
.fld { display: grid; gap: 6px; min-width: 0; }
.fld label { font-size: 14px; font-weight: 500; }
.fld input, .fld select, .fld textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 10px 0; font-size: 18px; outline: none; }
.fld textarea { min-height: 150px; resize: vertical; border: 1px solid var(--ink); padding: 12px; line-height: 1.5; }
.fld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 14px) 55%, calc(100% - 8px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-inline-end: 28px; }
[dir="rtl"] .fld select { background-position: 14px 55%, 8px 55%; }
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
.fld.bad input, .fld.bad select, .fld.bad textarea { border-color: var(--accent); }
.err { color: var(--accent); font-size: 14px; min-height: 0; }
.row2 { display: grid; gap: 28px var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .row2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn { justify-self: start; background: var(--ink); color: var(--paper); border: 0; padding: 16px 28px; font-size: 17px; font-weight: 500; cursor: pointer; display: inline-flex; gap: 12px; align-items: center; transition: background .3s; }
.btn:hover { background: var(--accent); }
.btn[disabled] { opacity: .6; cursor: progress; }
.status { padding: 14px 16px; border-left: 3px solid var(--ink); background: var(--wash); font-size: 16px; }
[dir="rtl"] .status { border-left: 0; border-right: 3px solid var(--ink); }
.status.bad { border-color: var(--accent); }
.status[hidden] { display: none; }

/* ---------- footer ---------- */
.ftr { margin-top: clamp(40px, 6vw, 96px); border-top: 1px solid var(--ink); padding-block: 28px 40px; font-size: 15px; }
.ftr-grid { row-gap: 28px; }
.ftr-name { grid-column: 1 / -1; font-size: clamp(32px, 6vw, 88px); font-weight: 800; line-height: 1; letter-spacing: var(--track-name); text-transform: uppercase; }
html:is([lang="ar"],[lang="ckb"]) .ftr-name { font-weight: 700; line-height: 1.3; text-transform: none; }
.ftr-col { grid-column: span 6; }
.ftr-col h3 { font-size: 13px; font-weight: 400; color: var(--ink-3); margin-bottom: 6px; }
.ftr-col li { padding-block: 2px; }
.ftr-col a:hover { color: var(--accent); }
.ftr-end { grid-column: 1 / -1; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--ink-2); padding-top: 20px; border-top: 1px solid var(--line); }
@media (min-width: 760px) { .ftr-col { grid-column: span 3; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
}

/* uniform portrait grid: 2 / 3 / 4 per row */
.tiles { row-gap: clamp(28px, 4vw, 56px); column-gap: clamp(12px, 1.6vw, 24px); }
.tiles .tile { grid-column: span 6; min-width: 0; }
.tiles .tile .tile-media { aspect-ratio: 3 / 4; }
.tiles .tile-cap { flex-direction: column; gap: 2px; align-items: flex-start; margin-top: 12px; }
.tiles .tile-cap h3 { font-size: clamp(16px, 1.5vw, 21px); }
.tiles .tile-cap .yr { font-size: 14px; }
.tiles .tile-open { display: none; }
@media (min-width: 760px) { .tiles .tile { grid-column: span 4; } }
@media (min-width: 1000px) { .tiles .tile { grid-column: span 3 !important; } }
@media (hover: hover) { .tiles .tile-open { display: inline-flex; } }
/* about: statistics */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.stat { padding-block: 22px 26px; border-bottom: 1px solid var(--line); min-width: 0; }
.stat:nth-child(odd) { padding-inline-end: 16px; }
.stat b { display: block; font-size: clamp(56px, 8vw, 120px); font-weight: 700; line-height: .95; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
html:is([lang="ar"],[lang="ckb"]) .stat b { letter-spacing: 0; line-height: 1.1; }
.stat span { display: block; margin-top: 10px; font-size: 15px; color: var(--ink-2); }
html:is([lang="ar"],[lang="ckb"]) .stat span { font-size: 16px; }
.stat-note { font-size: 17px; color: var(--ink-2); }

/* ---- unified logo display + hover stage ---- */
.tile-media .card-base { position: absolute; inset: 0; display: grid; place-items: center; }
.logo-box { width: calc(66% * var(--s, 1)); height: calc(32% * var(--s, 1)); display: flex; align-items: center; justify-content: center; }
.tile-media .logo-box img { width: 100%; height: 100%; object-fit: contain; transition: none; }
.tile.has-card:hover .tile-media img { transform: none; }
.stage { position: absolute; inset: 0; opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; }
.tile.on .stage { opacity: 1; }
.fr { position: absolute; inset: 0; display: grid; place-items: center; background: var(--wash); opacity: 0; z-index: 0;
  animation-duration: calc(var(--n) * var(--d)); animation-delay: calc(var(--i) * var(--d)); animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(.7, 0, .2, 1); animation-play-state: paused; }
.tile.on .fr { animation-play-state: running; }
.tile-media .fr img { max-width: none; transition: none; object-fit: contain; }
.tile-media .fr img.f-band { width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) { .stage { display: none; } }
.stage[data-n="3"][data-wipe="diag"] .fr { animation-name: w3-diag; }
@keyframes w3-diag {
  0% { clip-path: polygon(-20% 0,-20% 0,-37% 100%,-37% 100%); opacity: 1; z-index: 3; }
  7% { clip-path: polygon(-20% 0,137% 0,120% 100%,-37% 100%); }
  33.333% { clip-path: polygon(-20% 0,137% 0,120% 100%,-37% 100%); opacity: 1; z-index: 3; }
  33.343% { z-index: 2; }
  40.333% { opacity: 1; clip-path: polygon(-20% 0,137% 0,120% 100%,-37% 100%); }
  40.343% { opacity: 0; clip-path: polygon(-20% 0,-20% 0,-37% 100%,-37% 100%); z-index: 0; }
  100% { opacity: 0; clip-path: polygon(-20% 0,-20% 0,-37% 100%,-37% 100%); z-index: 0; }
}
.stage[data-n="3"][data-wipe="up"] .fr { animation-name: w3-up; }
@keyframes w3-up {
  0% { clip-path: polygon(0 100%,100% 100%,100% 100%,0 100%); opacity: 1; z-index: 3; }
  7% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); }
  33.333% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); opacity: 1; z-index: 3; }
  33.343% { z-index: 2; }
  40.333% { opacity: 1; clip-path: polygon(0 0,100% 0,100% 100%,0 100%); }
  40.343% { opacity: 0; clip-path: polygon(0 100%,100% 100%,100% 100%,0 100%); z-index: 0; }
  100% { opacity: 0; clip-path: polygon(0 100%,100% 100%,100% 100%,0 100%); z-index: 0; }
}
.stage[data-n="3"][data-wipe="book"] .fr { animation-name: w3-book; }
@keyframes w3-book {
  0% { clip-path: polygon(50% 0,50% 0,50% 100%,50% 100%); opacity: 1; z-index: 3; }
  7% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); }
  33.333% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); opacity: 1; z-index: 3; }
  33.343% { z-index: 2; }
  40.333% { opacity: 1; clip-path: polygon(0 0,100% 0,100% 100%,0 100%); }
  40.343% { opacity: 0; clip-path: polygon(50% 0,50% 0,50% 100%,50% 100%); z-index: 0; }
  100% { opacity: 0; clip-path: polygon(50% 0,50% 0,50% 100%,50% 100%); z-index: 0; }
}
.stage[data-n="3"][data-wipe="iris"] .fr { animation-name: w3-iris; }
@keyframes w3-iris {
  0% { clip-path: circle(0% at 50% 50%); opacity: 1; z-index: 3; }
  7% { clip-path: circle(75% at 50% 50%); }
  33.333% { clip-path: circle(75% at 50% 50%); opacity: 1; z-index: 3; }
  33.343% { z-index: 2; }
  40.333% { opacity: 1; clip-path: circle(75% at 50% 50%); }
  40.343% { opacity: 0; clip-path: circle(0% at 50% 50%); z-index: 0; }
  100% { opacity: 0; clip-path: circle(0% at 50% 50%); z-index: 0; }
}
.stage[data-n="4"][data-wipe="diag"] .fr { animation-name: w4-diag; }
@keyframes w4-diag {
  0% { clip-path: polygon(-20% 0,-20% 0,-37% 100%,-37% 100%); opacity: 1; z-index: 3; }
  7% { clip-path: polygon(-20% 0,137% 0,120% 100%,-37% 100%); }
  25.000% { clip-path: polygon(-20% 0,137% 0,120% 100%,-37% 100%); opacity: 1; z-index: 3; }
  25.010% { z-index: 2; }
  32.000% { opacity: 1; clip-path: polygon(-20% 0,137% 0,120% 100%,-37% 100%); }
  32.010% { opacity: 0; clip-path: polygon(-20% 0,-20% 0,-37% 100%,-37% 100%); z-index: 0; }
  100% { opacity: 0; clip-path: polygon(-20% 0,-20% 0,-37% 100%,-37% 100%); z-index: 0; }
}
.stage[data-n="4"][data-wipe="up"] .fr { animation-name: w4-up; }
@keyframes w4-up {
  0% { clip-path: polygon(0 100%,100% 100%,100% 100%,0 100%); opacity: 1; z-index: 3; }
  7% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); }
  25.000% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); opacity: 1; z-index: 3; }
  25.010% { z-index: 2; }
  32.000% { opacity: 1; clip-path: polygon(0 0,100% 0,100% 100%,0 100%); }
  32.010% { opacity: 0; clip-path: polygon(0 100%,100% 100%,100% 100%,0 100%); z-index: 0; }
  100% { opacity: 0; clip-path: polygon(0 100%,100% 100%,100% 100%,0 100%); z-index: 0; }
}
.stage[data-n="4"][data-wipe="book"] .fr { animation-name: w4-book; }
@keyframes w4-book {
  0% { clip-path: polygon(50% 0,50% 0,50% 100%,50% 100%); opacity: 1; z-index: 3; }
  7% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); }
  25.000% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); opacity: 1; z-index: 3; }
  25.010% { z-index: 2; }
  32.000% { opacity: 1; clip-path: polygon(0 0,100% 0,100% 100%,0 100%); }
  32.010% { opacity: 0; clip-path: polygon(50% 0,50% 0,50% 100%,50% 100%); z-index: 0; }
  100% { opacity: 0; clip-path: polygon(50% 0,50% 0,50% 100%,50% 100%); z-index: 0; }
}
.stage[data-n="4"][data-wipe="iris"] .fr { animation-name: w4-iris; }
@keyframes w4-iris {
  0% { clip-path: circle(0% at 50% 50%); opacity: 1; z-index: 3; }
  7% { clip-path: circle(75% at 50% 50%); }
  25.000% { clip-path: circle(75% at 50% 50%); opacity: 1; z-index: 3; }
  25.010% { z-index: 2; }
  32.000% { opacity: 1; clip-path: circle(75% at 50% 50%); }
  32.010% { opacity: 0; clip-path: circle(0% at 50% 50%); z-index: 0; }
  100% { opacity: 0; clip-path: circle(0% at 50% 50%); z-index: 0; }
}

/* vector logo showcase inside case studies */
.lgs { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.lg { margin: 0; display: grid; gap: 10px; min-width: 0; }
.lg-bg { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 12%; background: var(--wash); }
.lg-bg img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lg figcaption { font-size: 14px; color: var(--ink-2); }
html:is([lang="ar"],[lang="ckb"]) .lg figcaption { font-size: 15px; }

/* Client logo marquee: 8 equal slots per row on desktop, fewer on smaller screens */
.mq .shead { margin-bottom: clamp(8px, 1.5vw, 16px); }
.mq-view { container-type: inline-size; overflow: hidden; padding-block: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.mq-track { --slots: 8; display: flex; align-items: center; width: max-content; margin: 0; padding: 0; list-style: none; animation: mq-run var(--dur, 40s) linear infinite; will-change: transform; }
@media (max-width: 1100px) { .mq-track { --slots: 6; } }
@media (max-width: 760px) { .mq-track { --slots: 4; } }
@media (max-width: 480px) { .mq-track { --slots: 3; } }
.mq-view:hover .mq-track, .mq-view:focus-within .mq-track { animation-play-state: paused; }
.mq-i { flex: none; width: calc(100cqw / var(--slots)); height: clamp(40px, 5vw, 56px); display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.mq-i a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.mq-i img { height: calc(clamp(18px, 2.1vw, 28px) * var(--k, 1)); width: auto; max-width: 70%; max-height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-drag: none; }
@keyframes mq-run { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .mq-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; row-gap: 12px; }
  .mq-i[aria-hidden="true"] { display: none; }
  .mq-view { -webkit-mask-image: none; mask-image: none; }
}

/* airport: stepped (ziggurat) reveal. Logo frame, scale and centre are identical in all three readings. */
.stage[data-n="3"][data-wipe="steps"] .fr { animation-name: w3-steps; animation-timing-function: linear; }
@keyframes w3-steps {
  0% { clip-path: polygon(50.0% 50.0%,50.0% 50.0%,50.0% 50.0%,50.0% 50.0%,50.0% 50.0%,50.0% 50.0%,50.0% 50.0%,50.0% 50.0%,50.0% 50.0%,50.0% 50.0%,50.0% 50.0%,50.0% 50.0%); opacity: 1; z-index: 3; }
  1.75% { clip-path: polygon(49.1% 50.9%,49.1% 50.3%,49.3% 50.3%,49.3% 49.7%,49.6% 49.7%,49.6% 49.1%,50.4% 49.1%,50.4% 49.7%,50.7% 49.7%,50.7% 50.3%,50.9% 50.3%,50.9% 50.9%); }
  3.50% { clip-path: polygon(42.5% 57.5%,42.5% 52.5%,44.6% 52.5%,44.6% 47.5%,46.7% 47.5%,46.7% 42.5%,53.3% 42.5%,53.3% 47.5%,55.4% 47.5%,55.4% 52.5%,57.5% 52.5%,57.5% 57.5%); }
  5.25% { clip-path: polygon(24.7% 75.3%,24.7% 58.6%,31.8% 58.6%,31.8% 41.6%,38.9% 41.6%,38.9% 24.7%,61.1% 24.7%,61.1% 41.6%,68.2% 41.6%,68.2% 58.6%,75.3% 58.6%,75.3% 75.3%); }
  7.00% { clip-path: polygon(-10.0% 110.0%,-10.0% 70.4%,6.8% 70.4%,6.8% 30.2%,23.6% 30.2%,23.6% -10.0%,76.4% -10.0%,76.4% 30.2%,93.2% 30.2%,93.2% 70.4%,110.0% 70.4%,110.0% 110.0%); }
  8.75% { clip-path: polygon(-44.7% 144.7%,-44.7% 82.2%,-18.2% 82.2%,-18.2% 18.8%,8.3% 18.8%,8.3% -44.7%,91.7% -44.7%,91.7% 18.8%,118.2% 18.8%,118.2% 82.2%,144.7% 82.2%,144.7% 144.7%); }
  10.50% { clip-path: polygon(-62.5% 162.5%,-62.5% 88.2%,-31.0% 88.2%,-31.0% 12.9%,0.5% 12.9%,0.5% -62.5%,99.5% -62.5%,99.5% 12.9%,131.0% 12.9%,131.0% 88.2%,162.5% 88.2%,162.5% 162.5%); }
  12.25% { clip-path: polygon(-69.1% 169.1%,-69.1% 90.5%,-35.7% 90.5%,-35.7% 10.7%,-2.4% 10.7%,-2.4% -69.1%,102.4% -69.1%,102.4% 10.7%,135.7% 10.7%,135.7% 90.5%,169.1% 90.5%,169.1% 169.1%); }
  14.00% { clip-path: polygon(-70.0% 170.0%,-70.0% 90.8%,-36.4% 90.8%,-36.4% 10.4%,-2.8% 10.4%,-2.8% -70.0%,102.8% -70.0%,102.8% 10.4%,136.4% 10.4%,136.4% 90.8%,170.0% 90.8%,170.0% 170.0%); }
  33.333% { clip-path: polygon(-70.0% 170.0%,-70.0% 90.8%,-36.4% 90.8%,-36.4% 10.4%,-2.8% 10.4%,-2.8% -70.0%,102.8% -70.0%,102.8% 10.4%,136.4% 10.4%,136.4% 90.8%,170.0% 90.8%,170.0% 170.0%); opacity: 1; z-index: 3; }
  33.343% { z-index: 2; }
  47.333% { opacity: 1; clip-path: polygon(-70.0% 170.0%,-70.0% 90.8%,-36.4% 90.8%,-36.4% 10.4%,-2.8% 10.4%,-2.8% -70.0%,102.8% -70.0%,102.8% 10.4%,136.4% 10.4%,136.4% 90.8%,170.0% 90.8%,170.0% 170.0%); }
  47.343% { opacity: 0; clip-path: polygon(50.0% 50.0%,50.0% 50.0%,50.0% 50.0%,50.0% 50.0%,50.0% 50.0%,50.0% 50.0%,50.0% 50.0%,50.0% 50.0%,50.0% 50.0%,50.0% 50.0%,50.0% 50.0%,50.0% 50.0%); z-index: 0; }
  100% { opacity: 0; clip-path: polygon(50.0% 50.0%,50.0% 50.0%,50.0% 50.0%,50.0% 50.0%,50.0% 50.0%,50.0% 50.0%,50.0% 50.0%,50.0% 50.0%,50.0% 50.0%,50.0% 50.0%,50.0% 50.0%,50.0% 50.0%); z-index: 0; }
}
.tile-media .fr.rd { display: block; background: #2a2a2a; }
.tile-media .fr.rd img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.name { direction: ltr; }
.name .l2, html:is([lang="ar"],[lang="ckb"]) .name .l2 { padding-inline-start: 0; padding-left: 0; }
@media (max-width: 899px) { .name .l2 { padding-inline-start: 0; } }

/* ---- project cards: logo as the main element, lead projects larger, info below ---- */
.tiles .tile .tile-media { aspect-ratio: 3 / 4; }
.tiles .tile.t-a, .tiles .tile.t-b { grid-column: 1 / -1; }
.tiles .tile.t-a .tile-media, .tiles .tile.t-b .tile-media { aspect-ratio: 16 / 10; }
@media (min-width: 760px) { .tiles .tile.t-h { grid-column: span 6; } .tiles .tile.t-h .tile-media { aspect-ratio: 16 / 10; } }
@media (min-width: 1000px) {
  .tiles .tile.t-a { grid-column: span 7 !important; }
  .tiles .tile.t-b { grid-column: span 5 !important; }
  .tiles .tile.t-a .tile-media, .tiles .tile.t-b .tile-media { aspect-ratio: auto; height: clamp(320px, 34vw, 520px); }
  .tiles .tile.t-h { grid-column: span 6 !important; }
}
.tiles .tile-cap { display: block; margin-top: 14px; }
.tiles .tile-cap h3 { font-size: clamp(17px, 1.6vw, 22px); }
.tiles .tile.t-a .tile-cap h3, .tiles .tile.t-b .tile-cap h3 { font-size: clamp(20px, 2vw, 28px); }
.tiles .tile-cap .tile-cat { margin-top: 4px; }
.tiles .tile-cap .yr { display: block; margin-top: 2px; font-size: 13px; }
.logo-box { width: calc(70% * var(--s, 1)); height: calc(38% * var(--s, 1)); }
.tile.t-a .logo-box { width: 62%; height: 42%; }
.tile.t-b .logo-box { width: calc(46% * var(--s, 1)); height: calc(50% * var(--s, 1)); }
.tile.t-h .logo-box { width: calc(46% * var(--s, 1)); height: calc(52% * var(--s, 1)); }

/* ---- design request wizard ---- */
.wiz { min-width: 0; }
.prog { margin-bottom: 28px; }
.prog-t { font-size: 14px; color: var(--ink-2); margin-bottom: 10px; }
.prog-t b { color: var(--ink); font-weight: 600; }
.prog ol { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; list-style: none; margin: 0; padding: 0; }
.prog li { height: 3px; background: var(--line); }
.prog li.done, .prog li.now { background: var(--ink); }
.wiz-h { font-size: clamp(22px, 2.4vw, 32px); font-weight: 600; letter-spacing: var(--track-h); line-height: 1.2; margin-bottom: 8px; outline: none; }
.wiz .hint { font-size: 14px; color: var(--ink-2); margin-bottom: 14px; }
.wiz-body { display: grid; gap: 26px; margin-bottom: 32px; }
.wiz .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.svc-pick { display: grid; gap: 10px; }
.svc-opt { display: grid; gap: 2px; padding: 16px 18px; border: 1px solid var(--line); cursor: pointer; position: relative; }
.svc-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.svc-opt .t { font-size: 18px; font-weight: 600; }
.svc-opt .d { font-size: 14px; color: var(--ink-2); }
.svc-opt.on, .svc-opt:hover { border-color: var(--ink); }
.svc-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.svc-pick.bad { outline: 1px solid var(--accent); outline-offset: 4px; }
.opts { display: grid; gap: 8px; }
.opts-row { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.opt { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.4; cursor: pointer; padding-block: 3px; }
.opt input { margin-top: 4px; accent-color: var(--ink); flex: none; width: 16px; height: 16px; }
.grp { border: 0; border-top: 1px solid var(--line); padding: 14px 0 6px; margin: 0; min-width: 0; }
.grp legend { font-size: 14px; font-weight: 600; padding-inline-end: 12px; }
.grp-t { font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.grp.item { padding: 16px 0; display: grid; gap: 14px; }
.sub { display: grid; gap: 6px; }
.sub-l, .mini span, .lbl { font-size: 14px; font-weight: 500; }
.mini { display: grid; gap: 6px; min-width: 0; }
.mini.wide { grid-column: 1 / -1; }
.mini input, .mini select, .dims select { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 10px 0; font: inherit; color: inherit; }
.dims { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 14px; margin-bottom: 8px; }
.dims.off { opacity: .4; pointer-events: none; }
.req { color: var(--ink-2); }
.btn-ghost { display: inline-flex; align-items: center; gap: 8px; justify-self: start; background: transparent; color: var(--ink); border: 1px solid var(--ink); padding: 12px 20px; font: inherit; font-size: 16px; cursor: pointer; }
.btn-ghost:hover { background: var(--wash); }
.btn-ghost input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.btn-ghost:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.flist { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.flist li { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); padding-block: 8px; font-size: 15px; min-width: 0; }
.flist li span { overflow-wrap: anywhere; } .flist small { color: var(--ink-2); }
.flist button, .lnk-b { background: none; border: 0; font: inherit; font-size: 14px; color: var(--ink); text-decoration: underline; cursor: pointer; padding: 4px; }
.wiz-nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.sum { border-top: 1px solid var(--ink); padding-block: 14px 8px; }
.sum-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sum-h h3 { font-size: 16px; font-weight: 600; }
.sum dl { margin: 8px 0 0; display: grid; gap: 8px; }
.sum dl > div { display: grid; gap: 2px; padding-block: 6px; border-bottom: 1px solid var(--line); }
.sum dt { font-size: 13px; color: var(--ink-2); } .sum dd { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.wiz-done { display: grid; gap: 18px; }
@media (min-width: 640px) { .svc-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sum dl > div { grid-template-columns: minmax(140px, 1fr) 2fr; gap: 16px; } .sum dl > div.one { grid-template-columns: 1fr; } }

.opt.off { opacity: .45; cursor: not-allowed; }
.mini.wide input, .mini.wide select { font-size: 16px; }
.wiz select { width: 100%; background-color: transparent; border: 0; border-bottom: 1px solid var(--ink); padding: 10px 0; font: inherit; color: inherit; }
.send { border-top: 1px solid var(--ink); padding-top: 18px; margin-block: 18px; display: grid; gap: 14px; }
.send-note { font-size: 16px; line-height: 1.6; }
.send-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.send-btns .btn, .send-btns .btn-ghost { flex: 1 1 240px; justify-content: center; text-align: center; }
#send-out:empty { display: none; }
#send-out p { margin: 0 0 8px; }
.copy-area { width: 100%; font: inherit; font-size: 14px; padding: 10px; border: 1px solid var(--ink); background: var(--paper); color: inherit; }

/* compact clients strip */
section.blk.mq { padding-block: clamp(14px, 2vw, 28px) 0; }
.mq .shead { padding-block: 10px; margin-bottom: 0; }
.mq .shead h2 { font-size: clamp(13px, 1vw, 15px); }
.mq-i { height: clamp(30px, 3.6vw, 40px); }
.mq-i img { height: calc(clamp(14px, 1.6vw, 20px) * var(--k, 1)); }

/* gallery cards: square, rounded, title and category appear inside the image on hover */
.tiles { row-gap: clamp(14px, 1.8vw, 24px); column-gap: clamp(14px, 1.8vw, 24px); }
.tiles .tile { grid-column: span 6; transition: transform .4s var(--ease); }
.tiles .tile .tile-media { aspect-ratio: 4 / 5; border-radius: 14px; transition: box-shadow .4s var(--ease); }
.tiles .tile .logo-box { width: calc(58% * var(--s, 1)); height: calc(44% * var(--s, 1)); }
@media (min-width: 1000px) { .tiles .tile { grid-column: span 3 !important; } }
.tile-tag, .tile-ttl { position: absolute; z-index: 3; left: 12px; margin: 0; background: var(--paper); color: var(--ink); border-radius: 999px; opacity: 0; transition: opacity .3s var(--ease), transform .3s var(--ease); pointer-events: none; }
.tile-tag { top: 12px; padding: 6px 12px; font-size: 13px; line-height: 1.3; transform: translateY(-6px); max-width: calc(100% - 24px); }
.tile-ttl { bottom: 12px; max-width: calc(100% - 24px); padding: 8px 14px; font-size: clamp(14px, 1.2vw, 17px); font-weight: 600; line-height: 1.3; letter-spacing: 0; transform: translateY(6px); }
html:is([lang="ar"],[lang="ckb"]) .tile-tag { font-size: 14px; }
.tiles .tile-open, .tiles .tile-cap { display: none !important; }
@media (hover: hover) {
  .tiles .tile:hover, .tiles .tile:focus-visible { transform: translateY(-6px); }
  .tiles .tile:hover .tile-media, .tiles .tile:focus-visible .tile-media { box-shadow: 0 16px 32px rgba(0, 0, 0, .12); }
  .tile:hover .tile-tag, .tile:hover .tile-ttl, .tile:focus-visible .tile-tag, .tile:focus-visible .tile-ttl { opacity: 1; transform: none; }
}
@media (hover: none) { .tile-tag, .tile-ttl { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tiles .tile { transition: none; } .tiles .tile:hover { transform: none; } }

.lg-mask { display: block; width: 100%; height: 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }

/* work filters: turquoise pills with count badge */
.filters { --tq: #0E9AA7; border-top: 0; padding-top: 0; gap: 10px; }
.filters button { display: inline-flex; align-items: center; gap: 10px; padding: 9px 10px 9px 18px; border: 1px solid var(--line, #d9d7d0); border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 15px; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); }
[dir="rtl"] .filters button { padding: 9px 18px 9px 10px; }
.filters button::after { display: none; }
.filters button sup { position: static; display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: rgba(14,154,167,.12); color: var(--tq); font-size: 13px; font-weight: 600; line-height: 1; margin: 0; }
.filters button:hover { border-color: var(--tq); color: var(--tq); transform: translateY(-2px); }
.filters button[aria-pressed="true"] { background: var(--tq); border-color: var(--tq); color: #fff; font-weight: 600; }
.filters button[aria-pressed="true"] sup { background: rgba(255,255,255,.24); color: #fff; }
.filters button:focus-visible { outline: 2px solid var(--tq); outline-offset: 3px; }

/* clients strip: larger logos, all in an identical bounding box */
.mq-track { --slots: 6; }
@media (max-width: 1100px) { .mq-track { --slots: 5; } }
@media (max-width: 760px) { .mq-track { --slots: 3; } }
@media (max-width: 480px) { .mq-track { --slots: 2; } }
.mq-i { height: clamp(84px, 9vw, 120px); }
.mq-i img { width: 66%; height: 72%; max-width: none; max-height: none; object-fit: contain; }

/* ==========================================================================
   Work page — layout after the eje.studio reference
   title row + two square buttons · featured projects as large cards ·
   scrollable filter chips · masonry archive · "Load more"
   ========================================================================== */
.wk-head { padding-block: clamp(28px, 5vw, 80px) clamp(24px, 3vw, 44px); }
.wk-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wk-top h1 { font-size: clamp(34px, 8vw, 140px); font-weight: 800; line-height: .95; letter-spacing: var(--track-name); text-transform: uppercase; }
html:is([lang="ar"],[lang="ckb"]) .wk-top h1 { font-weight: 700; line-height: 1.25; }
.wk-btns { display: flex; gap: 8px; flex: none; }
.wk-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--wash); color: var(--ink); transition: transform .25s var(--ease), background .25s var(--ease); }
.wk-btn svg { width: 20px; height: 20px; fill: currentColor; }
.wk-btn.dark { background: var(--ink); color: var(--paper); }
.wk-btn.dark svg { fill: none; }
@media (hover: hover) { .wk-btn:hover { transform: translateY(-2px); } }
.wk-head p { margin-top: clamp(16px, 2vw, 28px); padding-top: clamp(16px, 2vw, 24px); border-top: 1px solid var(--line); max-width: none; color: var(--ink-2); font-size: clamp(15px, 1.25vw, 19px); line-height: 1.6; }
.wk-head p { max-width: 100%; }
@media (min-width: 900px) { .wk-head p { padding-inline-end: 40%; } }

/* featured: one large card per row on phones, two on wide screens */
.feat { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 56px) var(--gap); }
.feat .tile { grid-column: auto; min-width: 0; }
@media (min-width: 900px) { .feat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fc .tile-media { aspect-ratio: 4 / 5; border-radius: 16px; }
@media (min-width: 900px) { .fc .tile-media { aspect-ratio: 1 / 1; } }
.fc .logo-box { width: calc(56% * var(--s, 1)); height: calc(40% * var(--s, 1)); }
.fc-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 12px; }
.fc-cap h3 { font-size: clamp(15px, 1.3vw, 19px); font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.fc-cap span { flex: none; color: var(--ink-2); font-size: 14px; }
html:is([lang="ar"],[lang="ckb"]) .fc-cap span { font-size: 15px; }
@media (hover: hover) { .fc .tile-media { transition: box-shadow .4s var(--ease); } .fc:hover .tile-media { box-shadow: 0 16px 32px rgba(0, 0, 0, .10); } }

/* archive */
.arc { padding-block: clamp(48px, 7vw, 112px) clamp(24px, 4vw, 64px); }
.arc .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 8px; margin-inline: calc(-1 * var(--pad)); padding: 4px var(--pad); margin-bottom: clamp(16px, 2.4vw, 32px); }
.arc .filters::-webkit-scrollbar { display: none; }
.arc .filters button { flex: none; white-space: nowrap; font-size: 14px; gap: 8px; padding: 7px 8px 7px 14px; }
[dir="rtl"] .arc .filters button { padding: 7px 14px 7px 8px; }
html:is([lang="ar"],[lang="ckb"]) .arc .filters button { font-size: 15px; }
.arc .filters button sup { min-width: 22px; height: 22px; padding: 0 6px; font-size: 12px; background: var(--wash); color: var(--ink-2); }
.arc .filters button:hover { border-color: var(--ink); color: var(--ink); }
.arc .filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.arc .filters button[aria-pressed="true"] sup { background: rgba(255, 255, 255, .18); color: var(--paper); }
.arc .filters button:focus-visible { outline-color: var(--ink); }

.mason { display: flex; align-items: flex-start; gap: clamp(10px, 1.4vw, 20px); }
.mason-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: clamp(10px, 1.4vw, 20px); }
.mason.swap { animation: pagein .45s var(--ease) both; }
.ac { transition: transform .4s var(--ease); }
.ac .tile-media { aspect-ratio: var(--ar, 4 / 5); border-radius: 14px; }
.ac .logo-box { width: calc(60% * var(--s, 1)); height: calc(40% * var(--s, 1)); }
.ac-pill { position: absolute; z-index: 4; top: 10px; inset-inline-start: 10px; display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px 4px 4px; border-radius: 999px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--ink); font-size: 12.5px; font-weight: 500; line-height: 1.2; white-space: nowrap; opacity: 0; transform: translateY(-4px); transition: opacity .3s var(--ease), transform .3s var(--ease); pointer-events: none; }
[dir="rtl"] .ac-pill { padding: 4px 4px 4px 12px; }
html:is([lang="ar"],[lang="ckb"]) .ac-pill { font-size: 13px; }
.ac-pill i { width: 22px; height: 22px; border-radius: 999px; background: var(--ink); color: var(--paper); display: grid; place-items: center; }
.ac-pill svg { width: 11px; height: 11px; fill: currentColor; }
.ac .tile-ttl { left: auto; inset-inline-start: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 6px 12px; font-size: 13px; }
.ac:focus-visible .ac-pill, .ac:focus-visible .tile-ttl { opacity: 1; transform: none; }
@media (hover: hover) {
  .ac:hover { transform: translateY(-4px); }
  .ac:hover .ac-pill { opacity: 1; transform: none; }
}
@media (hover: none) {
  .ac .tile-ttl { opacity: 0; transform: translateY(6px); }
  .ac.on .ac-pill, .ac.on .tile-ttl { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .ac, .ac:hover { transition: none; transform: none; } .ac .ac-pill, .ac .tile-ttl { opacity: 1; transform: none; } }

.more { display: flex; justify-content: center; margin-top: clamp(24px, 3vw, 40px); }
.more-btn { border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 999px; padding: 10px 24px; font-size: 14px; cursor: pointer; transition: border-color .25s var(--ease), transform .25s var(--ease); }
html:is([lang="ar"],[lang="ckb"]) .more-btn { font-size: 15px; }
.more-btn:hover { border-color: var(--ink); transform: translateY(-2px); }

/* ==========================================================================
   Reference pass 2: one divider line only (under the work header),
   type sizes and project titles as in the eje.studio reference
   ========================================================================== */
.hdr, .menu-top, .menu-links a, .shead, .what-list li, .meta, .meta div, .cs, .els > div,
.specs, .specs div, .next, .rows, .rows > div, .svc > li, .svc-list, .direct, .direct > div,
.ftr, .ftr-end, .stats, .stat, .grp, .flist li, .sum, .sum dl > div, .send { border-top: 0; border-bottom: 0; }
.els > div { padding-top: 0; }
.shead { padding-block: 0; }

/* header of the work block: the only line on the page */
.wk-top h1, .wk-top h2 { font-size: clamp(32px, 4.4vw, 72px); font-weight: 800; line-height: 1; letter-spacing: var(--track-name); text-transform: uppercase; }
html:is([lang="ar"],[lang="ckb"]) .wk-top h1, html:is([lang="ar"],[lang="ckb"]) .wk-top h2 { font-weight: 700; line-height: 1.3; }
.wk-head p { font-size: clamp(14px, 1.1vw, 17px); line-height: 1.65; color: var(--ink-2); }
html:is([lang="ar"],[lang="ckb"]) .wk-head p { font-size: clamp(15px, 1.15vw, 18px); line-height: 1.85; }
.wk-home { padding-top: clamp(40px, 6vw, 96px); }
.wk-home .wk-head { padding-top: 0; }
.wk-btn .arr { width: 18px; height: 18px; }

/* project titles under the featured cards: plain, regular weight, both ends in ink */
.fc-cap { margin-top: 10px; align-items: baseline; }
.fc-cap h3 { font-size: 15px; font-weight: 400; line-height: 1.35; }
.fc-cap span { font-size: 15px; color: var(--ink); }
html:is([lang="ar"],[lang="ckb"]) .fc-cap h3, html:is([lang="ar"],[lang="ckb"]) .fc-cap span { font-size: 16px; }
@media (min-width: 900px) { .fc-cap h3, .fc-cap span { font-size: 16px; } }

/* "All work" follows straight after the featured cards */
.arc { padding-top: clamp(40px, 5vw, 80px); }
.arc-h { font-size: 15px; font-weight: 500; margin-bottom: 12px; }
html:is([lang="ar"],[lang="ckb"]) .arc-h { font-size: 16px; }
.arc .filters button { font-size: 13px; }
html:is([lang="ar"],[lang="ckb"]) .arc .filters button { font-size: 14px; }
.ac .tile-ttl { font-weight: 400; }

/* home hero: intro and links removed; role / place line smaller */
.hero-meta { font-size: 11px; letter-spacing: .02em; color: var(--ink-3); }
html:is([lang="ar"],[lang="ckb"]) .hero-meta { font-size: 12px; letter-spacing: 0; }
.hero .name { margin-bottom: 0; }

/* project names: plain text under the selected-work cards only; archive cards carry no labels */
.fc-cap { display: block; margin-top: 10px; font-size: 15px; font-weight: 400; line-height: 1.35; letter-spacing: 0; color: var(--ink); }
html:is([lang="ar"],[lang="ckb"]) .fc-cap { font-size: 16px; }
@media (min-width: 900px) { .fc-cap { font-size: 16px; } }

/* airport reading plates (photo + logo aligned in card-width units) */
.tile-media { container-type: inline-size; }
.tile-media .rp { position: absolute; inset: 0; display: block; overflow: hidden; background: #2a2a2a; }
.tile-media .rp img { position: absolute; max-width: none; object-fit: fill; transition: none; transform: none; }
.tile-media .rp .rp-lg { height: auto; }
.tile.has-card:hover .tile-media .rp img { transform: none; }

.tile-media svg.mk { display: block; max-width: none; }

/* video cards and video blocks */
.tile-media video.vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #0b0b0b; }
.fig video.vid { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; background: #0b0b0b; }

/* "All work": project name on mouse hover, small plain text, fades in; no card movement; hidden on touch screens */
.ac-name { position: absolute; z-index: 6; bottom: 12px; inset-inline: 14px; font-size: 13px; font-weight: 500; line-height: 1.35; letter-spacing: 0; color: var(--ink); opacity: 0; transition: opacity .5s ease; pointer-events: none; }
html:is([lang="ar"],[lang="ckb"]) .ac-name { font-size: 14px; }
.ac.on-dark .ac-name { color: #FFFFFF; text-shadow: 0 1px 10px rgba(0, 0, 0, .35); }
@media (hover: hover) {
  .ac:hover, .ac:focus-visible { transform: translateY(-4px); }   /* slight lift, as before */
  .ac:hover .ac-name, .ac:focus-visible .ac-name { opacity: 1; }
}
@media (hover: none) { .ac-name { display: none; } }
@media (prefers-reduced-motion: reduce) { .ac-name { transition: none; } }

/* smaller "Have a project in mind?" */
.cta { padding-block: clamp(32px, 4vw, 64px); }
.cta a { font-size: clamp(24px, 3vw, 40px); font-weight: 700; line-height: 1.15; letter-spacing: var(--track-h); }
html:is([lang="ar"],[lang="ckb"]) .cta a { line-height: 1.4; }
.cta small { margin-top: 10px; font-size: 14px; font-weight: 500; }
html:is([lang="ar"],[lang="ckb"]) .cta small { font-size: 15px; }

/* equal-size marks: the box is sized inline in cqw; contents fit inside it */
.tile-media .logo-box { flex: none; }
.tile-media .fr img.f-svg, .tile-media .fr svg.mk { object-fit: contain; }

/* home hero without the large name: role / place line sits right above the client strip */
.hero { padding-bottom: 0; }
.hero + .mq { padding-top: clamp(16px, 2.4vw, 32px); }

/* client strip: 8 logos per row on large screens; each slot is a size container for equal-weight logos */
.mq-track { --slots: 8; }
@media (max-width: 1100px) { .mq-track { --slots: 6; } }
@media (max-width: 760px) { .mq-track { --slots: 4; } }
@media (max-width: 480px) { .mq-track { --slots: 3; } }
.mq-i { container-type: size; }
.mq-i a { display: contents; }

/* light films (Al-Fa'il, Loving): white ground instead of the dark placeholder, and a hair of overscan so no edge shows */
.tile-media:has(> video.vid-light) { background: #FFFFFF; }
.tile-media video.vid.vid-light { background: #FFFFFF; transform: scale(1.01); }

/* project pages: fixed back / next pills */
.pjnav{position:fixed;z-index:60;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;justify-content:space-between;gap:12px;pointer-events:none}
.pjnav a{pointer-events:auto;background:#0D0D0D;color:#fff;font:500 14px "Readex Pro",system-ui,sans-serif;line-height:1;padding:12px 18px;border-radius:999px;text-decoration:none;box-shadow:0 6px 20px rgba(0,0,0,.18);white-space:nowrap}
.pjnav a:focus-visible{outline:2px solid #0D0D0D;outline-offset:3px}