/* ═══════════════════════════════════════════════════════════════════════
 * ASEM PORTFOLIO — DESIGN SYSTEM
 *
 * One stylesheet carries the whole component layer, including the plugin's
 * server-rendered blocks, so the visual system has a single source of truth.
 * Colour and type values are never written here: they resolve from the
 * palette declared in theme.json.
 *
 * The page is built from two materials:
 *   chassis  — dark bands: header, hero, section rails, footer
 *   document — light panels: cards, case pages, the record, product pages
 *
 * The signal colour is functional only. It appears on action buttons, the
 * active state, and a figure that carries meaning. It is never used for
 * headings, borders, or decoration.
 * ═══════════════════════════════════════════════════════════════════════ */

/* ─── 1. Semantic tokens ──────────────────────────────────────────────── */

:root {
	--a-ink:        var(--wp--preset--color--ink);
	--a-ink-2:      var(--wp--preset--color--ink-2);
	--a-ink-3:      var(--wp--preset--color--ink-3);
	--a-ink-line:   var(--wp--preset--color--ink-line);
	--a-invert:     var(--wp--preset--color--invert);
	--a-invert-2:   var(--wp--preset--color--invert-2);

	--a-paper:      var(--wp--preset--color--paper);
	--a-paper-2:    var(--wp--preset--color--paper-2);
	--a-line:       var(--wp--preset--color--line);
	--a-text:       var(--wp--preset--color--text);
	--a-text-2:     var(--wp--preset--color--text-2);

	--a-signal:     var(--wp--preset--color--accent);
	--a-on-signal:  var(--wp--preset--color--accent-ink);
	--a-signal-doc: var(--wp--preset--color--accent-deep);
	--a-ok:         var(--wp--preset--color--ok);

	--a-mono:  var(--wp--preset--font-family--mono);
	--a-sans:  var(--wp--preset--font-family--plex);

	--a-gutter: clamp(1rem, 5vw, 2.5rem);
	--a-max:    1180px;
	--a-radius: 4px;
	--a-rail:   3px;

	/* Surface the band a component sits on, so cards adapt automatically. */
	--a-surface:      var(--a-paper);
	--a-surface-2:    var(--a-paper-2);
	--a-on-surface:   var(--a-text);
	--a-on-surface-2: var(--a-text-2);
	--a-rule:         var(--a-line);
	--a-link:         var(--a-signal-doc);

	color-scheme: light;
}

/* ─── 2. Base ─────────────────────────────────────────────────────────── */

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	background: var(--a-paper);
	color: var(--a-text);
	font-family: var(--a-sans);
	overflow-x: clip;
}

/* Arabic sets one step larger, a shade heavier, and with more leading:
   the script needs the extra room to stay legible on a dark ground. */
html[lang="ar"] body { font-size: 1.0625rem; font-weight: 500; line-height: 1.9; }
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3 { letter-spacing: 0; }

*, *::before, *::after { box-sizing: border-box; }
img, svg, video { max-width: 100%; height: auto; }

h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }

a { color: var(--a-link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--a-on-surface); }

:focus-visible {
	outline: 2px solid var(--a-signal);
	outline-offset: 3px;
	border-radius: 2px;
}

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute; inset-inline-start: -9999px; top: 0; z-index: 999;
	background: var(--a-signal); color: var(--a-on-signal);
	padding: .75rem 1.25rem; font-weight: 700;
}
.skip-link:focus { inset-inline-start: 0; }

/* ─── 3. Bands and the shell ──────────────────────────────────────────── */

.a-wrap {
	max-width: var(--a-max);
	margin-inline: auto;
	padding-inline: var(--a-gutter);
}

.a-band { padding-block: clamp(3rem, 7vw, 5.5rem); }
.a-band--rule { border-top: 1px solid var(--a-rule); }

.a-band--dark {
	background: var(--a-ink);
	color: var(--a-invert);
	--a-surface:      var(--a-ink-2);
	--a-surface-2:    var(--a-ink-3);
	--a-on-surface:   var(--a-invert);
	--a-on-surface-2: var(--a-invert-2);
	--a-rule:         var(--a-ink-line);
	--a-link:         var(--a-invert);
}

.a-band--light {
	background: var(--a-paper);
	color: var(--a-text);
	--a-surface:      var(--a-paper);
	--a-surface-2:    var(--a-paper-2);
	--a-on-surface:   var(--a-text);
	--a-on-surface-2: var(--a-text-2);
	--a-rule:         var(--a-line);
	--a-link:         var(--a-signal-doc);
}

.a-band--dark h1,
.a-band--dark h2,
.a-band--dark h3 { color: var(--a-invert); }

/* ─── 4. Type utilities ───────────────────────────────────────────────── */

.a-eyebrow {
	margin: 0 0 .75rem;
	font-family: var(--a-mono);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--a-on-surface-2);
}
html[lang="ar"] .a-eyebrow { font-family: var(--a-sans); letter-spacing: 0; text-transform: none; font-size: .8125rem; }
.a-eyebrow--accent { color: var(--a-on-surface); }
.a-eyebrow a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--a-rule); }
.a-eyebrow a:hover { border-bottom-color: var(--a-signal); }

.a-head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.a-head__title { margin: 0; font-size: var(--wp--preset--font-size--2xl); font-weight: 700; line-height: 1.22; }
.a-head__lead { margin: .75rem 0 0; color: var(--a-on-surface-2); font-size: var(--wp--preset--font-size--md); }
/* The intro sentence changes line count through the font swap on narrow
   screens: two lines up to 410px in Arabic, three up to 350px in English. */
@media (max-width: 419px) { html[lang="ar"] .a-head__lead { min-height: 2lh; } }
html[lang="en"] .a-head__lead { min-height: 2lh; }
@media (max-width: 359px) { html[lang="en"] .a-head__lead { min-height: 3lh; } }

.a-icon { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -.15em; flex: none; }

/* ─── 5. Buttons — the signal colour lives here ───────────────────────── */

.a-btn {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .8rem 1.35rem;
	border: 1px solid transparent;
	border-radius: var(--a-radius);
	font-family: inherit; font-size: .9375rem; font-weight: 700; line-height: 1.2;
	text-decoration: none; cursor: pointer;
	transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.a-btn--sm { padding: .5rem .9rem; font-size: .875rem; }

.a-btn--primary { background: var(--a-signal); color: var(--a-on-signal); }
.a-btn--primary:hover { background: #FFC960; color: var(--a-on-signal); }

.a-btn--ghost { border-color: var(--a-rule); color: var(--a-on-surface); background: transparent; }
.a-btn--ghost:hover { border-color: var(--a-signal); color: var(--a-on-surface); }

.a-btn--quiet { padding-inline: 0; color: var(--a-on-surface); background: none; border: 0; border-bottom: 1px solid var(--a-rule); border-radius: 0; }
.a-btn--quiet:hover { border-bottom-color: var(--a-signal); color: var(--a-on-surface); }

.a-btn__arrow { display: inline-flex; transition: transform .16s ease; }
.a-btn:hover .a-btn__arrow { transform: translateX(2px); }
html[dir="rtl"] .a-btn:hover .a-btn__arrow { transform: translateX(-2px); }
@media (prefers-reduced-motion: reduce) { .a-btn, .a-btn__arrow { transition: none; } .a-btn:hover .a-btn__arrow { transform: none; } }

/* ─── 6. Header ───────────────────────────────────────────────────────── */

.a-header {
	position: sticky; top: 0; z-index: 100;
	background: var(--a-ink);
	color: var(--a-invert);
	border-bottom: 1px solid var(--a-ink-line);
	--a-on-surface: var(--a-invert);
	--a-on-surface-2: var(--a-invert-2);
	--a-rule: var(--a-ink-line);
}
/* The header is a flow group, so WordPress gives every child after the first
   a 24px block gap. With the language strip hidden — the usual case — that
   gap escaped through the page top as a strip of body colour above the dark
   header, and moved the whole page when the header streamed in after it. */
.a-header > * { margin-block: 0; }
.a-header__inner {
	display: flex; align-items: center; gap: 1rem;
	min-height: 64px;
	max-width: var(--a-max); margin-inline: auto; padding-inline: var(--a-gutter);
}

.a-brand {
	font-weight: 700; font-size: 1.0625rem; letter-spacing: -.01em;
	color: var(--a-invert); text-decoration: none;
	margin-inline-end: auto;
}
.a-brand:hover { color: var(--a-invert); }
/* The lock-up is sized by height so the mark matches the type beside it, and
   never below the 130px width the mark stops reading at. */
.a-brand__lockup { display: block; height: 26px; width: auto; min-width: 130px; }
.a-brand__name { display: block; }
@media (max-width: 600px) { .a-brand__lockup { height: 22px; } }
.a-brand span { display: block; font-family: var(--a-mono); font-size: .6875rem; font-weight: 400; letter-spacing: .08em; color: var(--a-invert-2); text-transform: uppercase; }
html[lang="ar"] .a-brand span { font-family: var(--a-sans); letter-spacing: 0; text-transform: none; }
/* The role line under the lock-up is 297px in the fallback face and 266px in
   the web font (Arabic), 284px and 307px (English), for "IT Manager — ERP &
   Digital Transformation". Left to its text, the narrower width lets the
   language button back onto the first row and the wider one pushes it off.
   Reserving the wider width keeps the header rows the same through the swap;
   the header takes two rows up to 500px in both languages. Measure again
   before changing the line. */
html[lang="ar"] .a-brand > span:not(.a-brand__name) { min-inline-size: 27.5em; }
html[lang="en"] .a-brand > span:not(.a-brand__name) { min-inline-size: 28em; }

.a-nav__list {
	display: flex; align-items: center; gap: 1.5rem;
	margin: 0; padding: 0; list-style: none;
}
.a-nav__list a {
	display: block; padding-block: .35rem;
	color: var(--a-invert); text-decoration: none;
	font-size: .9375rem;
	border-bottom: 2px solid transparent;
}
.a-nav__list a:hover { border-bottom-color: var(--a-ink-line); }
/* Each item keeps a width that does not depend on the face, so an earlier
   item narrowing in the web font cannot slide the later ones along. The
   floor is the widest label in the fallback face, rounded up. */
@media (min-width: 861px) {
	.a-nav__list a { min-inline-size: 3.5em; text-align: center; }
	html[lang="en"] .a-nav__list a { min-inline-size: 4.25em; }
}
/* Active state is one of the three places the signal colour is allowed. */
.a-nav__list a[aria-current="page"] { border-bottom-color: var(--a-signal); }

.a-lang {
	font-family: var(--a-mono); font-size: .8125rem; font-weight: 500;
	color: var(--a-invert-2); text-decoration: none;
	padding: .35rem .6rem; border: 1px solid var(--a-ink-line); border-radius: var(--a-radius);
	min-inline-size: 6.5em; text-align: center; box-sizing: border-box;
}
.a-lang:hover { color: var(--a-invert); border-color: var(--a-signal); }

.a-menu { display: none; }
.a-menu__toggle {
	display: none; background: none; border: 1px solid var(--a-ink-line); border-radius: var(--a-radius);
	color: var(--a-invert); padding: .45rem .6rem; cursor: pointer;
}

@media (max-width: 860px) {
	.a-header__inner { flex-wrap: wrap; padding-block: .75rem; }
	.a-menu__toggle { display: inline-flex; }
	.a-nav { flex-basis: 100%; display: none; }
	.a-nav.is-open { display: block; }
	.a-nav__list { flex-direction: column; align-items: stretch; gap: 0; padding-block: .5rem; }
	.a-nav__list a { padding-block: .7rem; border-bottom: 1px solid var(--a-ink-line); }
	.a-nav__list a[aria-current="page"] { color: var(--a-signal); }
}

/* Language suggestion strip — dismissible, never a redirect. */
.a-suggest {
	background: var(--a-ink-3); color: var(--a-invert);
	font-size: .875rem;
	border-bottom: 1px solid var(--a-ink-line);
}
.a-suggest__inner {
	display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
	max-width: var(--a-max); margin-inline: auto; padding: .6rem var(--a-gutter);
}
.a-suggest a { color: var(--a-invert); }
.a-suggest button { margin-inline-start: auto; background: none; border: 0; color: var(--a-invert-2); cursor: pointer; font: inherit; }
/* Sized in em rather than by their text, so the web font arriving cannot move
   the sentence, the link or the close button: em follows the font size, never
   the face. The sentence takes what is left and wraps inside its own box. */
.a-suggest__inner { flex-wrap: nowrap; }
.a-suggest__inner > span { flex: 1 1 0; min-width: 0; }
.a-suggest a { flex: none; inline-size: 6em; }
.a-suggest button { flex: none; inline-size: 2em; margin-inline-start: 0; padding: 0; }
@media (max-width: 36em) { .a-suggest__inner > span { min-height: 2lh; } }

/* ─── 7. Hero ─────────────────────────────────────────────────────────── */

.a-hero { padding-block: 0 clamp(3rem, 7vw, 5rem); }

.a-hero__status {
	display: flex; flex-wrap: wrap; gap: .35rem 1.75rem;
	max-width: var(--a-max); margin-inline: auto;
	padding: .7rem var(--a-gutter);
	border-bottom: 1px solid var(--a-ink-line);
	font-family: var(--a-mono); font-size: .75rem; letter-spacing: .04em;
	color: var(--a-invert-2);
}
html[lang="ar"] .a-hero__status { font-family: var(--a-sans); font-size: .8125rem; letter-spacing: 0; }
.a-hero__status-item { display: inline-flex; align-items: center; gap: .45rem; }
.a-dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--a-signal);
	box-shadow: 0 0 0 3px rgba(242, 180, 65, .18);
}

.a-hero__inner {
	display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
	padding-top: clamp(2.5rem, 6vw, 4.5rem);
}
@media (max-width: 900px) { .a-hero__inner { grid-template-columns: 1fr; } }

.a-hero__title {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--hero);
	font-weight: 700; line-height: 1.08; letter-spacing: -.02em;
	color: var(--a-invert);
}
html[lang="ar"] .a-hero__title { line-height: 1.25; letter-spacing: 0; }

.a-hero__sub { margin: 0 0 1.75rem; max-width: 52ch; color: var(--a-invert-2); font-size: var(--wp--preset--font-size--md); }
.a-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.a-hero__index {
	border: 1px solid var(--a-ink-line);
	border-radius: var(--a-radius);
	background: var(--a-ink-2);
}
.a-hero__index-head {
	display: flex; justify-content: space-between; align-items: baseline;
	margin: 0; padding: .75rem 1rem;
	border-bottom: 1px solid var(--a-ink-line);
	font-family: var(--a-mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase;
	color: var(--a-invert-2);
}
html[lang="ar"] .a-hero__index-head { font-family: var(--a-sans); font-size: .8125rem; letter-spacing: 0; text-transform: none; }
/* A figure that carries meaning — the second allowed use of the signal. */
.a-hero__index-count { font-family: var(--a-mono); color: var(--a-signal); font-size: .875rem; }

.a-hero__index-list { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.a-hero__index-list li + li { border-top: 1px solid var(--a-ink-line); }
.a-hero__index-list a {
	display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .1rem .75rem;
	padding: .7rem 1rem; text-decoration: none; color: var(--a-invert);
}
.a-hero__index-list a:hover { background: var(--a-ink-3); }
.a-hero__index-n { grid-row: span 2; font-family: var(--a-mono); font-size: .75rem; color: var(--a-invert-2); padding-top: .15rem; }
.a-hero__index-name { font-family: var(--a-mono); font-size: .875rem; }
.a-hero__index-meta { font-size: .8125rem; color: var(--a-invert-2); }

/* ─── 8. Client strip ─────────────────────────────────────────────────── */

.a-clients { padding-block: 2rem; }
.a-clients__inner { display: flex; align-items: center; gap: 1.5rem 2.5rem; flex-wrap: wrap; }
.a-clients__label {
	margin: 0; font-family: var(--a-mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase;
	color: var(--a-invert-2);
}
html[lang="ar"] .a-clients__label { font-family: var(--a-sans); font-size: .8125rem; letter-spacing: 0; text-transform: none; }
.a-clients__list { display: flex; flex-wrap: wrap; gap: 1rem 2.25rem; margin: 0; padding: 0; list-style: none; }
.a-clients__item a { display: inline-flex; align-items: baseline; gap: .5rem; text-decoration: none; color: var(--a-invert); }
.a-clients__item a:hover .a-clients__name { border-bottom-color: var(--a-signal); }
.a-clients__name { font-weight: 700; border-bottom: 1px solid transparent; }
.a-clients__domain { font-family: var(--a-mono); font-size: .75rem; color: var(--a-invert-2); }
/* Client logos arrive in every colour, including near-black wordmarks that
   would vanish on this ground. Forcing each to a white silhouette keeps the
   row consistent and legible; hovering returns the real colours. */
.a-clients__logo {
	height: 30px; width: auto; max-width: 190px;
	object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: .78;
	transition: opacity .16s ease, filter .16s ease;
}
.a-clients__item a:hover .a-clients__logo { filter: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .a-clients__logo { transition: none; } }

/* ─── 9. Grids and cards ──────────────────────────────────────────────── */

.a-grid { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.a-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); }
/* The works list keeps its empty columns. With auto-fit, a row that had only
   received two cards when the page first painted spread them across the full
   width, and the third card arriving re-flowed the row from two columns to
   three — measured at 0.04 to 0.11 on desktop. auto-fill holds the final
   column widths from the first card. It also means a section of two cards,
   such as own products, sits at the same card width as client work instead
   of stretching to halves. */
.a-works .a-grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); }
/* Own products stay two to a row, as they were before the change above: the
   narrower third-width card pushed Arab Down's summary to five lines where
   three are reserved on desktop, which the launch gate caught. The column
   floor is half the row, so the count still never depends on how many cards
   have arrived. */
.a-works .a-grid--product { grid-template-columns: repeat(auto-fill, minmax(max(min(100%, 17.5rem), calc((100% - 1.25rem) / 2 - 1px)), 1fr)); }
.a-grid--slim { gap: 1rem; }

.a-card {
	position: relative;
	display: flex; flex-direction: column; gap: .6rem;
	padding: 1.5rem;
	background: var(--a-surface);
	border: 1px solid var(--a-rule);
	border-radius: var(--a-radius);
	transition: border-color .16s ease;
}
.a-card:hover { border-color: var(--a-on-surface-2); }
.a-card--slim { padding: 1.15rem; }

.a-card__hit { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.a-card__hit:focus-visible { outline-offset: -3px; }
.a-card > *:not(.a-card__hit) { position: relative; z-index: 2; pointer-events: none; }
.a-card a:not(.a-card__hit),
.a-card__links a { pointer-events: auto; }

.a-card__icon { color: var(--a-on-surface-2); font-size: 1.35rem; line-height: 1; }
.a-card__title { margin: 0; font-size: var(--wp--preset--font-size--lg); font-weight: 700; color: var(--a-on-surface); }
.a-card__title a { color: inherit; text-decoration: none; }
.a-card__title a:hover { color: var(--a-signal-doc); }
.a-card__text { margin: 0; color: var(--a-on-surface-2); font-size: .9375rem; }

/* Reserved line boxes on work cards.
   The web font arrives after the first paint, and IBM Plex Sans Arabic sets
   narrower than the system fallback, so the same card line wraps differently
   in the two faces — at 103 of 129 widths tested between 320 and 1600px.
   A row that loses a line pulls everything below it up. Reserving the height
   of the longest rendering, in either face, keeps every box the same size
   through the swap. The counts are measured from the current card copy: a
   longer card line needs a larger reserve, or the shift comes back.
   lh is the element's own line height, so the reserve follows the language. */
/* The meta row is laid out in fixed lines rather than as a wrapping flex row:
   the sector on the first line, country and year on the second. As a flex
   row, the year jumped between lines when the font changed width, and a box
   that jumps lines is a layout shift however much height is reserved. */
.a-card--work .a-card__meta { display: block; min-height: 3.8em; min-height: 2lh; }
.a-card--work .a-card__meta > span { display: inline; }
.a-card--work .a-card__meta > span:first-child { display: block; }
.a-card--work .a-card__meta > span:first-child + span::before { content: none; }
.a-card--work .a-card__meta > span:nth-child(n+3) { margin-inline-start: .75rem; }
.a-card--work .a-card__text { min-height: 9.5em; min-height: 5lh; }
@media (min-width: 1020px) { .a-card--work .a-card__text { min-height: 5.7em; min-height: 3lh; } }
html[lang="en"] .a-card--work .a-card__meta { min-height: 5.1em; min-height: 3lh; }
html[lang="en"] .a-card--work .a-card__title { min-height: 3.4em; min-height: 2lh; }
html[lang="en"] .a-card--work .a-card__text { min-height: 11.9em; min-height: 7lh; }
@media (min-width: 1000px) { html[lang="en"] .a-card--work .a-card__text { min-height: 6.8em; min-height: 4lh; } }
/* Tag chips wrap by their text too. A row is one chip — .75rem type at the
   inherited line height, .18rem padding each side, a 1px border each side —
   and rows are .35rem apart. */
.a-card--work .a-tags { min-height: calc(2 * (1.785rem + 2px) + .35rem); }
html[lang="en"] .a-card--work .a-tags { min-height: calc(3 * (1.635rem + 2px) + .7rem); }

.a-card__meta {
	display: flex; flex-wrap: wrap; gap: .35rem .75rem; align-items: center;
	font-family: var(--a-mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase;
	color: var(--a-on-surface-2);
}
html[lang="ar"] .a-card__meta { font-family: var(--a-sans); font-size: .8125rem; letter-spacing: 0; text-transform: none; }
.a-card__meta > span + span::before { content: "·"; margin-inline-end: .75rem; opacity: .55; }

.a-card__more {
	margin-top: auto; padding-top: .4rem;
	display: inline-flex; align-items: center; gap: .4rem;
	font-size: .875rem; font-weight: 700; color: var(--a-on-surface);
}
.a-card:hover .a-card__more { color: var(--a-signal-doc); }
.a-band--dark .a-card:hover .a-card__more { color: var(--a-signal); }

.a-card__foot { margin-top: auto; padding-top: .6rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.a-card__links { display: flex; flex-wrap: wrap; gap: .25rem 1rem; padding-top: .3rem; font-size: .875rem; }
.a-card__links a { display: inline-flex; align-items: center; gap: .3rem; }

.a-badge {
	font-family: var(--a-mono); font-size: .625rem; letter-spacing: .08em; text-transform: uppercase;
	border: 1px solid var(--a-rule); border-radius: 999px; padding: .1rem .5rem; color: var(--a-on-surface-2);
}
.a-price { font-family: var(--a-mono); font-weight: 500; color: var(--a-on-surface); }

/* Card image slot. Without a photograph the slot is a typographic plate,
   never a generated placeholder picture. */
.a-thumb {
	display: block; overflow: hidden; border-radius: var(--a-radius);
	background: var(--a-surface-2); border: 1px solid var(--a-rule);
	aspect-ratio: 16 / 10;
}
.a-thumb__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.a-thumb__plate {
	display: grid; place-items: center; width: 100%; height: 100%;
	background-image: repeating-linear-gradient(135deg, transparent 0 9px, var(--a-rule) 9px 10px);
}
.a-thumb__plate span {
	font-family: var(--a-mono); font-size: .8125rem; letter-spacing: .04em;
	color: var(--a-on-surface-2); background: var(--a-surface); padding: .3rem .6rem; border-radius: 2px;
}

/* ─── 10. Lists, facts, tags ──────────────────────────────────────────── */

.a-list { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.a-list--two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: .55rem 1.5rem; }
.a-list li { display: grid; grid-template-columns: 1.1em minmax(0, 1fr); gap: .6rem; align-items: start; }
.a-list__mark { color: var(--a-signal-doc); margin-top: .35em; }
.a-band--dark .a-list__mark { color: var(--a-signal); }

.a-facts { margin: 0; display: grid; gap: 0; border: 1px solid var(--a-rule); border-radius: var(--a-radius); }
.a-facts__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1rem; padding: .65rem .9rem; }
.a-facts__row + .a-facts__row { border-top: 1px solid var(--a-rule); }
.a-facts dt { font-family: var(--a-mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--a-on-surface-2); align-self: center; }
html[lang="ar"] .a-facts dt { font-family: var(--a-sans); font-size: .8125rem; letter-spacing: 0; text-transform: none; }
.a-facts dd { margin: 0; font-size: .9375rem; color: var(--a-on-surface); }

.a-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.a-tags li {
	/* The monospace face has no Arabic, so an Arabic tag used to fall through
	   the whole stack to whatever the device had — Times New Roman in Chromium
	   on Windows, something else on a phone. The site's own Arabic face now
	   comes second: Latin stays monospace, Arabic is drawn in Plex, and a
	   tag's width no longer depends on the visitor's device. */
	font-family: 'JetBrains Mono', 'IBM Plex Sans Arabic', ui-monospace, 'SFMono-Regular', Consolas, monospace;
	font-size: .75rem;
	padding: .18rem .5rem; border: 1px solid var(--a-rule); border-radius: 2px;
	color: var(--a-on-surface-2);
}

/* ─── 11. Works and services sections ─────────────────────────────────── */

.a-works__group {
	margin: 2.5rem 0 1.25rem;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--a-rule);
}
.a-works__group:first-of-type { margin-top: 0; }
.a-works__all { margin: 2rem 0 0; }

/* ─── 12. Proof band ──────────────────────────────────────────────────── */

.a-proof__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 860px) { .a-proof__inner { grid-template-columns: 1fr; } }
.a-proof__title { margin: 0 0 .75rem; font-size: var(--wp--preset--font-size--2xl); font-weight: 700; }
.a-proof__role { margin: 0 0 1.5rem; color: var(--a-invert-2); }
.a-proof__cta { margin: 0; }
.a-proof__facts { display: grid; gap: 1.25rem; }
.a-proof__certs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.a-proof__certs li {
	font-family: var(--a-mono); font-size: .75rem;
	border: 1px solid var(--a-ink-line); border-radius: 2px; padding: .2rem .5rem;
	color: var(--a-invert-2);
}

.a-stat { display: grid; gap: .15rem; }
/* A figure that carries meaning — the third allowed use of the signal. */
.a-stat__value {
	font-family: var(--a-mono); font-size: 2.5rem; font-weight: 500; line-height: 1;
	color: var(--a-signal); font-variant-numeric: tabular-nums;
}
.a-band--light .a-stat__value { color: var(--a-signal-doc); }
.a-stat__unit { font-size: 1.25rem; }
.a-stat__label { color: var(--a-on-surface-2); font-size: .9375rem; }

.a-stats__grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
	gap: 1.5rem; margin: 0; padding: 0; list-style: none;
}

/* ─── 13. Case and service pages ──────────────────────────────────────── */

.a-case__head, .a-service__head { padding-block: clamp(2.5rem, 6vw, 4rem); }
.a-case__title, .a-service__title { margin: 0; font-size: var(--wp--preset--font-size--3xl); font-weight: 700; line-height: 1.1; }
.a-service__title { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.a-service__icon { color: var(--a-signal); font-size: 1.75rem; line-height: 1; }
.a-case__domain { margin: .75rem 0 0; font-family: var(--a-mono); font-size: .9375rem; color: var(--a-invert-2); }
.a-service__lead { margin: 1rem 0 1.75rem; max-width: 58ch; color: var(--a-invert-2); font-size: var(--wp--preset--font-size--md); }

.a-case__body { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (max-width: 900px) { .a-case__body { grid-template-columns: 1fr; } }
.a-case__aside { display: grid; gap: 1.5rem; position: sticky; top: 88px; }
@media (max-width: 900px) { .a-case__aside { position: static; } }

.a-case__shot { position: relative; margin: 0 0 2.5rem; }
.a-case__shot-frame {
	display: block; border: 1px solid var(--a-line); border-radius: var(--a-radius);
	overflow: hidden; max-height: 34rem;
}
.a-case__shot-img { display: block; width: 100%; height: auto; }
/* The phone sits on the desktop capture, the way the two are actually seen. */
.a-case__shot-phone {
	position: absolute; inset-inline-end: 1.25rem; bottom: 2.5rem; width: 26%; max-width: 11rem;
	border: 1px solid var(--a-line); border-radius: 10px; overflow: hidden;
	box-shadow: 0 12px 30px -12px rgba(13, 19, 33, .45);
	background: var(--a-paper);
}
@media (max-width: 640px) { .a-case__shot-phone { display: none; } }
.a-case__shot-caption {
	margin-top: .6rem; font-size: .8125rem; color: var(--a-text-2);
	font-family: var(--a-mono);
}
html[lang="ar"] .a-case__shot-caption { font-family: var(--a-sans); }

.a-case__section, .a-service__section { margin-bottom: 2.5rem; max-width: 68ch; }

/* Measured figures on a case page. They sit above the prose because a number
   is read before a sentence, and they reuse the stat scale rather than
   inventing a second one. */
.a-case__figures { margin: 0 0 1.25rem; gap: 1.25rem 2rem; }
.a-case__figures .a-stat__value { font-size: 2rem; }
.a-case__section h2, .a-service__section h2 {
	margin: 0 0 .9rem;
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	padding-inline-start: .85rem;
	border-inline-start: var(--a-rail) solid var(--a-line);
}
.a-case__section p, .a-service__section p { margin: 0; color: var(--a-text); }
.a-service__section { max-width: none; }

.a-case__tech .a-eyebrow { margin-bottom: .5rem; }
.a-case__visit { margin: 0; }
.a-case__service { display: grid; gap: .35rem; margin: 0; padding-top: 1rem; border-top: 1px solid var(--a-line); }
.a-case__service a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; }

.a-stages { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; counter-reset: stage; }
.a-stages__item { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem; }
.a-stages__n { font-family: var(--a-mono); font-size: 1.125rem; color: var(--a-text-2); }
.a-stages__item h3 { margin: 0 0 .2rem; font-size: var(--wp--preset--font-size--md); font-weight: 700; }
.a-stages__item p { margin: 0; color: var(--a-text-2); font-size: .9375rem; }

.a-faq__item { border-top: 1px solid var(--a-line); }
.a-faq__item:last-child { border-bottom: 1px solid var(--a-line); }
.a-faq__item summary {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 1rem 0; cursor: pointer; font-weight: 700; list-style: none;
}
.a-faq__item summary::-webkit-details-marker { display: none; }
.a-faq__item summary::after { content: "+"; color: var(--a-signal-doc); font-size: 1.35rem; line-height: 1; }
.a-faq__item[open] summary::after { content: "\2212"; }
.a-faq__item p { margin: 0 0 1rem; color: var(--a-text-2); max-width: 68ch; }

/* ─── 14. Contact ─────────────────────────────────────────────────────── */

.a-contact__inner { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 860px) { .a-contact__inner { grid-template-columns: 1fr; } }
.a-contact__title { margin: 0 0 .75rem; font-size: var(--wp--preset--font-size--2xl); font-weight: 700; }
.a-contact__sub { margin: 0 0 1.5rem; color: var(--a-invert-2); }
.a-contact__channels { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.a-contact__channels a { display: inline-flex; align-items: center; gap: .5rem; color: var(--a-invert); text-decoration: none; }
.a-contact__channels a:hover { color: var(--a-signal); }

.a-form { display: grid; gap: 1rem; }
.a-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 1rem; }
.a-form__field { display: grid; gap: .35rem; }
.a-form__field > span { font-size: .8125rem; color: var(--a-invert-2); }
.a-form input,
.a-form select,
.a-form textarea {
	width: 100%;
	background: var(--a-ink-2);
	border: 1px solid var(--a-ink-line);
	border-radius: var(--a-radius);
	color: var(--a-invert);
	font: inherit; font-size: .9375rem;
	padding: .7rem .8rem;
}
.a-form textarea { resize: vertical; min-height: 7rem; }
.a-form input:focus, .a-form select:focus, .a-form textarea:focus { border-color: var(--a-signal); outline: none; }
.a-form input::placeholder, .a-form textarea::placeholder { color: var(--a-invert-2); opacity: .75; }
.a-form__submit { justify-self: start; border: 0; }
.a-form__fine { margin: 0; font-size: .8125rem; color: var(--a-invert-2); }
.a-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.a-form__note { margin: 0; padding: .75rem 1rem; border-radius: var(--a-radius); font-size: .9375rem; }
.a-form__note--ok { background: rgba(31, 122, 80, .18); border: 1px solid var(--a-ok); color: var(--a-invert); }
.a-form__note--error { background: rgba(242, 180, 65, .12); border: 1px solid var(--a-signal); color: var(--a-invert); }

/* ─── 15. Store ───────────────────────────────────────────────────────── */

.a-empty { border: 1px dashed var(--a-line); border-radius: var(--a-radius); padding: clamp(2rem, 5vw, 3rem); max-width: 60ch; }
.a-empty__title { margin: 0 0 .5rem; font-size: var(--wp--preset--font-size--lg); font-weight: 700; }
.a-empty__text { margin: 0 0 1.5rem; color: var(--a-text-2); }
.a-empty__actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin: 0; }

/* ─── 16. Journal ─────────────────────────────────────────────────────── */

.a-journal__list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--a-line); }
.a-journal__item { border-bottom: 1px solid var(--a-line); }
.a-journal__link {
	display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: .3rem 1.5rem;
	padding: 1.25rem 0; text-decoration: none; color: var(--a-text);
}
@media (max-width: 700px) { .a-journal__link { grid-template-columns: 1fr; } }
.a-journal__date { font-family: var(--a-mono); font-size: .8125rem; color: var(--a-text-2); }
.a-journal__title { font-size: var(--wp--preset--font-size--md); font-weight: 700; }
.a-journal__link:hover .a-journal__title { color: var(--a-signal-doc); }
.a-journal__excerpt { grid-column: 2; color: var(--a-text-2); font-size: .9375rem; }
@media (max-width: 700px) { .a-journal__excerpt { grid-column: 1; } }

/* ─── 17. Closing band ────────────────────────────────────────────────── */

.a-closing__inner { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; justify-content: space-between; }
.a-closing__title { margin: 0 0 .5rem; font-size: var(--wp--preset--font-size--2xl); font-weight: 700; max-width: 22ch; }
.a-closing__sub { margin: 0; color: var(--a-invert-2); max-width: 46ch; }
.a-closing__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ─── 18. The record (CV page) ────────────────────────────────────────── */

.a-doc { display: grid; gap: clamp(2.5rem, 6vw, 4rem); }
.a-doc__heading {
	margin: 0 0 1.5rem;
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--a-line);
}

.a-timeline__list { display: grid; gap: 2rem; margin: 0; padding: 0; list-style: none; }
.a-timeline__item { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.5rem; }
@media (max-width: 700px) { .a-timeline__item { grid-template-columns: 1fr; gap: .5rem; } }
.a-timeline__dates { margin: 0; font-family: var(--a-mono); font-size: .8125rem; color: var(--a-text-2); display: flex; gap: .4rem; flex-wrap: wrap; }
.a-timeline__body { padding-inline-start: 1.25rem; border-inline-start: var(--a-rail) solid var(--a-line); }
.a-timeline__item.is-current .a-timeline__body { border-inline-start-color: var(--a-signal); }
.a-timeline__role { margin: 0; font-size: var(--wp--preset--font-size--md); font-weight: 700; }
.a-timeline__org { margin: .1rem 0 .75rem; color: var(--a-text-2); }
.a-timeline__place::before { content: "·"; margin-inline: .4rem; }
/* The line under the role: context, not an achievement, so it sits quieter
   than the bullets it introduces and never competes with the role itself. */
.a-timeline__note { margin: -.45rem 0 .75rem; color: var(--a-text-2); font-style: italic; }
.a-timeline__bullets { margin: 0 0 .9rem; padding-inline-start: 1.1rem; display: grid; gap: .35rem; }
.a-timeline__bullets li { color: var(--a-text); }
.a-timeline__bullets li::marker { color: var(--a-text-2); }
.a-timeline__metrics { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.a-timeline__metrics li { border: 1px solid var(--a-line); border-radius: 2px; padding: .3rem .6rem; display: grid; gap: .1rem; }
.a-timeline__metric-value { font-family: var(--a-mono); font-weight: 500; color: var(--a-signal-deep, var(--a-signal-doc)); }
.a-timeline__metric-label { font-size: .75rem; color: var(--a-text-2); }

.a-skills__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 2rem; }
.a-skills__group-title { margin: 0 0 .75rem; font-size: var(--wp--preset--font-size--md); font-weight: 700; }
.a-skills__list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.a-skills__item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.a-skills__name { font-size: .9375rem; }
.a-meter { display: inline-flex; gap: 3px; flex: none; }
.a-meter__step { width: 14px; height: 4px; background: var(--a-line); border-radius: 1px; }
.a-meter__step.is-on { background: var(--a-signal-doc); }

/* ─── 19. Blog article furniture ──────────────────────────────────────── */

.a-prose { max-width: 68ch; }
.a-prose > * + * { margin-top: 1.1rem; }
.a-prose h2 { margin-top: 2.25rem; font-size: var(--wp--preset--font-size--xl); }
.a-prose h3 { margin-top: 1.75rem; }
.a-prose img { border-radius: var(--a-radius); }
.a-prose blockquote {
	margin: 1.75rem 0; padding-inline-start: 1.25rem;
	border-inline-start: var(--a-rail) solid var(--a-signal-doc);
	color: var(--a-text);
}

.a-postmeta { display: flex; gap: 1.25rem; margin: 0 0 1.5rem; font-family: var(--a-mono); font-size: .8125rem; color: var(--a-text-2); }
html[lang="ar"] .a-postmeta { font-family: var(--a-sans); }

.a-toc { margin: 0 0 2rem; border: 1px solid var(--a-line); border-radius: var(--a-radius); padding: 1rem 1.25rem; background: var(--a-paper-2); }
.a-toc summary { font-weight: 700; cursor: pointer; }
.a-toc__list { margin: .75rem 0 0; padding-inline-start: 1.2rem; display: grid; gap: .3rem; }
.a-toc__item--h3 { padding-inline-start: 1rem; font-size: .9375rem; }

.a-author {
	display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem;
	margin-top: 3rem; padding: 1.5rem;
	border: 1px solid var(--a-line); border-radius: var(--a-radius); background: var(--a-paper-2);
}
/* No portrait, no column held open for one. */
.a-author--noportrait { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 600px) { .a-author { grid-template-columns: 1fr; } }
.a-author__portrait { border-radius: 50%; width: 88px; height: 88px; object-fit: cover; }
.a-author__name { margin: 0; font-size: var(--wp--preset--font-size--lg); font-weight: 700; }
.a-author__role { margin: .1rem 0 .6rem; color: var(--a-text-2); }
.a-author__text { margin: 0 0 .9rem; color: var(--a-text); }
.a-author__links { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0 0 .6rem; }
.a-author__links a { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; }
.a-author__social { display: inline-flex; gap: .6rem; }
.a-author__social a { color: var(--a-text-2); }
.a-author__social a:hover { color: var(--a-signal-doc); }

.a-related { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--a-line); }
.a-related__title { margin: 0 0 .75rem; font-size: var(--wp--preset--font-size--lg); font-weight: 700; }
.a-related__list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.a-related__list a { display: flex; gap: 1rem; align-items: baseline; text-decoration: none; color: var(--a-text); }
.a-related__date { font-family: var(--a-mono); font-size: .8125rem; color: var(--a-text-2); flex: none; }
.a-related__list a:hover .a-related__name { color: var(--a-signal-doc); }

/* ─── 20. Footer ──────────────────────────────────────────────────────── */

.a-footer {
	background: var(--a-ink); color: var(--a-invert);
	border-top: 1px solid var(--a-ink-line);
	padding-block: clamp(2.5rem, 5vw, 4rem) 1.5rem;
	--a-on-surface: var(--a-invert);
	--a-on-surface-2: var(--a-invert-2);
	--a-rule: var(--a-ink-line);
}
.a-footer__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 2rem; }
.a-footer__mark { display: block; width: 44px; height: auto; margin: 0 0 .9rem; opacity: .9; }
.a-footer__brand { margin: 0 0 .5rem; font-size: var(--wp--preset--font-size--lg); font-weight: 700; }
.a-footer__tag { margin: 0; color: var(--a-invert-2); max-width: 40ch; font-size: .9375rem; }
.a-footer__title { margin: 0 0 .6rem; font-family: var(--a-mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--a-invert-2); font-weight: 500; }
html[lang="ar"] .a-footer__title { font-family: var(--a-sans); font-size: .8125rem; letter-spacing: 0; text-transform: none; }
.a-footer__links { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.a-footer__links a { color: var(--a-invert); text-decoration: none; font-size: .9375rem; }
.a-footer__links a:hover { color: var(--a-signal); }
.a-footer__social { display: flex; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.a-footer__social a { color: var(--a-invert-2); }
.a-footer__social a:hover { color: var(--a-signal); }
.a-footer__credit {
	max-width: var(--a-max); margin: 2.5rem auto 0; padding: 1.25rem var(--a-gutter) 0;
	border-top: 1px solid var(--a-ink-line);
	color: var(--a-invert-2); font-size: .875rem;
}

/* ─── 21. Search, 404, pagination ─────────────────────────────────────── */

.a-plain { padding-block: clamp(3rem, 7vw, 5rem); }
.a-plain__title { margin: 0 0 1rem; font-size: var(--wp--preset--font-size--3xl); font-weight: 700; }
.a-plain__lead { margin: 0 0 2rem; color: var(--a-text-2); max-width: 56ch; font-size: var(--wp--preset--font-size--md); }
.a-plain__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.wp-block-query-pagination { margin-top: 2.5rem; gap: .75rem; font-family: var(--a-mono); font-size: .875rem; }
.wp-block-query-pagination a { text-decoration: none; }
.wp-block-query-pagination .page-numbers.current { color: var(--a-signal-doc); font-weight: 700; }

.wp-block-search__input {
	border: 1px solid var(--a-line); border-radius: var(--a-radius); padding: .7rem .8rem; font: inherit;
}
.wp-block-search__button { background: var(--a-signal); color: var(--a-on-signal); border: 0; border-radius: var(--a-radius); font-weight: 700; }

/* ─── 22. Motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}

/* Technology names on a service page: the same tag shape used on work cards,
   set apart from the Arabic lead above it so neither reads as part of the
   other. Latin names inside an Arabic page, which is the point of them. */
.a-service__tech { margin-block: .9rem 1.4rem; }
.a-band--dark .a-tags li { border-color: color-mix(in srgb, currentColor 28%, transparent); }