/* Design tokens: docs/05-ux-spec.md §2 */
:root {
  --navy-900: #11233e; --navy-800: #1b3452; --navy-700: #35465b;
  --amber-500: #feb531; --amber-600: #f3a51d; --amber-text: #795000;
  --charcoal: #2c2e35;
  --n-50: #f7f9fb; --n-100: #eef2f6; --n-200: #dce3eb; --n-300: #c3cdd9;
  --n-400: #98a6b8; --n-500: #748295; --n-600: #526174;

  --surface-canvas: var(--n-50);
  --surface: #ffffff;
  --surface-muted: var(--n-100);
  --text: var(--navy-900);
  --text-muted: var(--n-600);
  --border: var(--n-200);
  --border-strong: var(--n-500);
  --link: var(--amber-text);
  --focus: var(--amber-text);
  --action-bg: var(--amber-500); --action-text: var(--navy-900); --action-hover: var(--amber-600);
  --action2-border: var(--navy-900); --action2-text: var(--navy-900);
  --rule-accent: var(--amber-500);
  --hairline: var(--n-200);
  --surface-tint: #eef2f6;
  --error: #b42318; --error-surface: #fef3f2;
  --success: #166534; --success-surface: #f0fdf4;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;
  --section-y: 54px; --rhythm-1: 16px; --rhythm-2: 24px; --rhythm-3: 36px; --rhythm-4: 54px; --rhythm-5: 81px;
  --container: 1170px; --gutter: 24px;
  --radius-s: 2px; --radius-m: 4px; --radius-l: 8px;
  --shadow-1: 0 1px 2px rgba(17,35,62,.06);
  --shadow-2: 0 8px 24px -8px rgba(17,35,62,.18);
  --header-h: 72px;
  --ease: cubic-bezier(.2,.8,.2,1);
  --dur-1: 160ms; --dur-2: 280ms; --dur-3: 600ms;
  --z-header: 50; --z-drawer: 60; --z-toast: 70;

  /* Type scale (§2.2) */
  --fs-display: clamp(2.75rem, 1.6rem + 4.2vw, 5.25rem);
  --fs-h2: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
  --fs-h3: clamp(1.25rem, 1.12rem + .6vw, 1.625rem);
  --fs-lead: clamp(1.125rem, 1.05rem + .4vw, 1.375rem);
  --fs-body: clamp(1rem, .97rem + .15vw, 1.125rem);
  --fs-small: .9375rem;
  --fs-label: .8125rem;
  --font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-ar: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, 'Noto Sans Arabic', sans-serif;

  --lh-display: 1.05; --lh-h2: 1.15; --lh-h3: 1.3; --lh-lead: 1.6; --lh-body: 1.65; --lh-small: 1.5; --lh-label: 1.4;
  --ls-display: -.025em; --ls-head: -.015em;
  --measure: 62ch;
}
@media (min-width: 768px) { :root { --section-y: 81px; } }
@media (min-width: 1024px) { :root { --header-h: 96px; } }

:lang(ar) {
  --lh-display: 1.3; --lh-h2: 1.4; --lh-h3: 1.5; --lh-lead: 1.8; --lh-body: 1.85; --lh-small: 1.7; --lh-label: 1.5;
  --ls-display: 0; --ls-head: 0;
  --measure: 56ch;
}

.theme-inverse {
  --surface-canvas: var(--navy-900); --surface: var(--navy-900); --surface-muted: var(--navy-800);
  --text: #ffffff; --text-muted: #cdd6e0; --border: var(--navy-700); --border-strong: #8a99ab;
  --link: var(--amber-500); --focus: var(--amber-500);
  --action2-border: #ffffff; --action2-text: #ffffff;
  --hairline: rgba(255,255,255,.14);
  background: var(--surface); color: var(--text);
}

/* Reset, typography, layout primitives */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-block-start: calc(var(--header-h) + 24px); }
@media (max-width: 767px) { html { scroll-padding-block-end: 96px; } }
body {
  margin: 0; background: var(--surface-canvas); color: var(--text);
  font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body);
  font-variant-numeric: tabular-nums; text-rendering: optimizeLegibility; overflow-x: clip;
}
:lang(ar) body, html:lang(ar) { font-family: var(--font-ar); }
[lang="en"] { font-family: var(--font); }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
picture { display: contents; }
img, svg { display: block; max-inline-size: 100%; }
a { color: var(--link); text-underline-offset: .2em; }
button, input, select, textarea { font: inherit; color: inherit; }
main { display: block; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.skip-link { position: absolute; inset-block-start: -100px; inset-inline-start: var(--sp-4); z-index: 100; background: var(--amber-500); color: var(--navy-900); padding: var(--sp-3) var(--sp-5); font-weight: 600; border-radius: var(--radius-s); }
.skip-link:focus { inset-block-start: var(--sp-4); }
.visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.container { inline-size: 100%; max-inline-size: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* Headings */
.h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 600; letter-spacing: var(--ls-head); max-inline-size: 26ch; text-wrap: balance; }
.h2-sm { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); }
.h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; letter-spacing: var(--ls-head); }
.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--text-muted); max-inline-size: 52ch; }
.prose { max-inline-size: var(--measure); }
.prose + .prose { margin-block-start: var(--sp-4); }
.prose-long { max-inline-size: var(--measure); font-size: var(--fs-lead); line-height: var(--lh-lead); }
.muted { color: var(--text-muted); }
.hl { color: var(--amber-500); }
.label { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 600; color: var(--text-muted); margin-block: var(--sp-5) var(--sp-3); }
html[lang="en"] .label { text-transform: uppercase; letter-spacing: .08em; }
.note { margin-block-start: var(--sp-6); font-size: var(--fs-small); color: var(--text-muted); }

/* Sections: flat surfaces only (white, tint, navy) */
.section { padding-block: var(--section-y); position: relative; background: #fff; }
.section-tight { padding-block: var(--rhythm-4); }
.section-tint { background: var(--surface-tint); }
.section.theme-inverse { background: var(--navy-900); }
.section-header { margin-block-end: var(--rhythm-3); }
.section-header .h2 { margin-block-start: var(--rhythm-2); }
.section-header .lead { margin-block-start: var(--rhythm-1); }
.section-header.is-center { text-align: center; }
.section-header.is-center .h2, .section-header.is-center .lead { margin-inline: auto; }
.section-header.is-center .slabel { justify-content: center; }

/* Numbered section label: "01 / 07 — LABEL" (reference) */
.slabel { display: flex; align-items: center; gap: 10px; font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 600; color: var(--text-muted); }
.slabel-n { display: inline-flex; gap: 6px; font-variant-numeric: tabular-nums; letter-spacing: .04em; unicode-bidi: isolate; }
.slabel-n b { font-weight: 700; color: var(--amber-text); }
.theme-inverse .slabel-n b { color: var(--amber-500); }
.slabel-n i { font-style: normal; }
.slabel-n span { color: var(--text-muted); }
.slabel-rule { inline-size: 24px; block-size: 2px; background: var(--amber-500); flex: none; }
.slabel-t { color: var(--text); font-weight: 600; }
html[lang="en"] .slabel-t { text-transform: uppercase; letter-spacing: .08em; }
.eyebrow-rule { inline-size: 24px; block-size: 2px; background: var(--amber-500); flex: none; display: inline-block; }

/* Split feature */
.split { display: grid; gap: var(--rhythm-3); align-items: center; }
.split-text > * + * { margin-block-start: var(--rhythm-1); }
.split-text .slabel + .h2, .split-text .h2 { margin-block-start: var(--rhythm-2); }
.split-text .link-arrow, .split-text .tags, .split-text .btn { margin-block-start: var(--rhythm-2); }
@media (min-width: 1024px) {
  .split { grid-template-columns: 1fr 1fr; column-gap: 72px; }
  .split-flip .split-media, .flip .split-media { order: -1; }
}

/* Reveal (content visible without JS) */
.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* Components: docs/05b-ux-revision-r1.md (design language of the engineering reference, recoloured navy/amber) */
.icon { flex: none; }
[dir="rtl"] .icon-dir { transform: scaleX(-1); }

/* Buttons: 12px 30px, 2px radius, active scale .97 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-block-size: 44px; padding: 12px 30px; font-size: var(--fs-small); font-weight: 600; line-height: 1.2; text-decoration: none; border-radius: 2px; border: 1.5px solid transparent; cursor: pointer; transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1), transform var(--dur-1); text-align: center; }
.btn:active { transform: scale(.97); }
.btn-lg { padding: 16px 36px; min-block-size: 52px; }
.btn-primary { background: var(--action-bg); color: var(--action-text); }
.btn-primary:hover { background: var(--action-hover); }
.btn-secondary, .btn-outline { background: transparent; color: var(--action2-text); border-color: var(--action2-border); }
.btn-secondary:hover, .btn-outline:hover { background: color-mix(in srgb, var(--action2-border) 8%, transparent); }
.btn-outline { border-color: var(--n-300); }
.btn-outline:hover { border-color: var(--navy-900); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.link-arrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: var(--fs-small); color: var(--link); text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1.5px; min-block-size: 44px; }
.link-arrow:hover { text-decoration-thickness: 3px; }

/* Header (white) */
.site-header { position: sticky; inset-block-start: 0; z-index: var(--z-header); block-size: var(--header-h); background: #fff; color: var(--navy-900); border-block-end: 1px solid var(--n-200); }
.site-header.is-scrolled { box-shadow: 0 6px 20px -12px rgba(17,35,62,.25); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); block-size: 100%; }
.brand { display: inline-flex; align-items: center; gap: var(--sp-3); color: var(--navy-900); text-decoration: none; min-block-size: 44px; }
.brand img { inline-size: auto; block-size: 40px; }
.brand-rule { inline-size: 2px; block-size: 28px; background: var(--amber-500); flex: none; }
.brand-name { font-size: var(--fs-small); font-weight: 600; white-space: nowrap; }
@media (min-width: 1024px) { .brand img { block-size: 52px; } .brand-rule { block-size: 32px; } }
.nav-desktop { display: none; }
.nav-desktop ul { display: flex; gap: 2px; }
.nav-desktop a { display: inline-flex; align-items: center; padding: 10px 14px; border-radius: 4px; color: var(--n-600); font-size: var(--fs-small); font-weight: 500; text-decoration: none; white-space: nowrap; transition: color var(--dur-1), background var(--dur-1); }
.nav-desktop a:hover { color: var(--navy-900); }
.nav-desktop a[aria-current="page"] { background: #fff4dc; color: var(--amber-text); font-weight: 600; }
.header-end { display: flex; align-items: center; gap: var(--sp-4); }
.end-rule { display: none; inline-size: 2px; block-size: 24px; background: var(--amber-500); }
.lang-toggle { display: none; align-items: center; gap: 8px; font-size: var(--fs-small); letter-spacing: .04em; }
.lang-toggle .lt-cur { color: var(--navy-900); font-weight: 700; }
.lang-toggle a { color: var(--n-500); font-weight: 500; text-decoration: none; min-block-size: 44px; display: inline-flex; align-items: center; }
.lang-toggle a:hover { color: var(--navy-900); }
.lang-toggle .lt-sep { color: var(--n-300); }
.header-cta { display: none; }
.lang-switch { color: inherit; font-size: var(--fs-small); font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: var(--sp-2); }
.lang-switch:hover { text-decoration: underline; }
.menu-btn { display: inline-flex; align-items: center; gap: var(--sp-2); min-block-size: 44px; min-inline-size: 44px; justify-content: center; padding-inline: var(--sp-3); background: transparent; color: var(--navy-900); border: 1.5px solid var(--n-300); border-radius: 2px; cursor: pointer; font-size: var(--fs-small); font-weight: 600; }
@media (min-width: 480px) { .lang-toggle { display: inline-flex; } }
@media (min-width: 1024px) {
  .nav-desktop { display: block; }
  .header-cta { display: block; }
  .end-rule { display: block; }
  .menu-btn[data-menu-open] { display: none; }
}
@media (min-width: 1024px) and (max-width: 1240px) { .brand-name { display: none; } .nav-desktop a { padding-inline: 10px; } }
.scroll-progress { position: absolute; inset-inline: 0; inset-block-end: -1px; block-size: 3px; background: var(--amber-500); transform: scaleX(0); transform-origin: left; pointer-events: none; }
[dir="rtl"] .scroll-progress { transform-origin: right; }

/* Drawer (white) */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(17,35,62,.55); z-index: calc(var(--z-drawer) - 1); opacity: 0; visibility: hidden; transition: opacity var(--dur-2), visibility var(--dur-2); }
.drawer { position: fixed; inset-block: 0; inset-inline-end: 0; inline-size: min(360px, 88vw); z-index: var(--z-drawer); display: flex; flex-direction: column; gap: var(--sp-6); padding: var(--sp-5); overflow-y: auto; background: #fff; color: var(--navy-900); transform: translateX(100%); visibility: hidden; transition: transform var(--dur-2) var(--ease), visibility var(--dur-2); }
[dir="rtl"] .drawer { transform: translateX(-100%); }
.drawer.is-open { transform: none; visibility: visible; }
.drawer-backdrop.is-open { opacity: 1; visibility: visible; }
.drawer-top { display: flex; align-items: center; justify-content: space-between; }
.drawer-nav a { display: flex; align-items: center; min-block-size: 52px; color: var(--navy-900); text-decoration: none; font-size: var(--fs-lead); font-weight: 500; border-block-end: 1px solid var(--n-200); }
.drawer-nav a[aria-current="page"] { color: var(--amber-text); font-weight: 600; }
.drawer-actions { display: grid; gap: var(--sp-5); margin-block-start: auto; }
.drawer-phones { display: grid; gap: var(--sp-3); }
.drawer-phones li { display: flex; align-items: center; gap: var(--sp-3); }
.drawer-phones .icon { color: var(--amber-text); }
.drawer-phones a { color: var(--navy-900); font-weight: 600; min-block-size: 44px; display: inline-flex; align-items: center; }
body.no-scroll { overflow: hidden; }

/* Stat plate: 1px perimeter cells, 3px amber top rule, tabular numerals */
.plate { display: grid; grid-template-columns: repeat(2, 1fr); background: #fff; color: var(--navy-900); border: 1px solid var(--n-200); border-block-start: 3px solid var(--amber-500); }
.plate-cell { padding: var(--rhythm-2); border-inline-start: 1px solid var(--n-200); border-block-start: 1px solid var(--n-200); }
.plate-cell:nth-child(-n+2) { border-block-start: 0; }
.plate-cell:nth-child(odd) { border-inline-start: 0; }
.plate-v { font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1; font-weight: 700; color: var(--amber-text); font-variant-numeric: tabular-nums; }
.plate-l { margin-block-start: var(--sp-2); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--n-600); }
.plate-inline { grid-template-columns: repeat(3, 1fr); margin-block-end: var(--rhythm-4); }
.plate-inline .plate-cell, .plate-inline .plate-cell:nth-child(-n+2) { border-block-start: 0; border-inline-start: 1px solid var(--n-200); }
.plate-inline .plate-cell:first-child { border-inline-start: 0; }
@media (max-width: 767px) { .plate-inline .plate-cell { padding: var(--sp-4) var(--sp-3); } .plate-inline .plate-l { font-size: .8125rem; } }
.plate-dark { background: transparent; color: #fff; border-color: var(--hairline); border-block-start-color: var(--amber-500); }
.plate-dark .plate-cell { border-color: var(--hairline); }
.plate-dark .plate-v { color: var(--amber-500); }
.plate-dark .plate-l { color: #cdd6e0; }

/* Treated photo (reference .u-photo): saturate/contrast + navy colour layer */
.u-photo { position: relative; overflow: hidden; background: var(--navy-900); isolation: isolate; }
.u-photo img { position: relative; z-index: 0; inline-size: 100%; block-size: 100%; max-inline-size: none; object-fit: cover; filter: saturate(.82) contrast(1.04); transition: transform 600ms ease; }

/* Code chip */
.code-chip { display: inline-block; padding: 2px 10px; background: var(--navy-900); color: #fff; font-size: var(--fs-label); font-weight: 600; letter-spacing: .04em; border-radius: 2px; text-decoration: none; font-variant-numeric: tabular-nums; }
a.code-chip { min-block-size: 44px; line-height: 40px; padding-inline: 14px; }
a.code-chip:hover { background: var(--navy-800); }
.pcard-site { font-size: var(--fs-label); line-height: var(--lh-label); color: var(--text-muted); font-weight: 600; }
.stretch { color: inherit; text-decoration: none; }
.stretch::after { content: ""; position: absolute; inset: 0; }
.stretch:hover { text-decoration: underline; }
.meta { display: grid; gap: var(--sp-2); font-size: var(--fs-small); line-height: var(--lh-small); }
.meta dt { color: var(--n-600); font-size: var(--fs-label); font-weight: 600; }
.meta dd { font-weight: 600; color: var(--navy-900); }
@media (min-width: 480px) { .prow .meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } .prow .meta > div:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.code-tile { display: grid; place-items: center; background: var(--navy-900); }
.code-tile span { font-size: 4rem; font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 2px var(--amber-500); letter-spacing: .02em; font-family: var(--font); }
.code-tile-sm { min-block-size: 140px; max-inline-size: 240px; }

/* Flat photo print (evidence, <= ~1.3x native) */
.prints { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-block-start: auto; }
.print { flex: 0 1 auto; inline-size: 100%; min-inline-size: 0; }
.prints .print { inline-size: calc(50% - var(--sp-2)); }
.print-frame { inline-size: 100%; }
.print-box { aspect-ratio: 3 / 4; overflow: hidden; background: var(--n-100); }
.print-box img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.print figcaption { margin-block-start: var(--sp-2); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-muted); }
.print-frame[style*="435"] .print-box, .print-frame[style*="436"] .print-box { aspect-ratio: 335 / 251; }

/* Clients logo wall (reference .clients-wall): equal 9rem x 4.5rem cells; logos grey, full colour on hover */
.clients-wall { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-inline-size: calc(7 * 9rem + 6 * 8px + 2px); margin-inline: auto; }
.wall-cell { inline-size: 9rem; block-size: 4.5rem; display: flex; align-items: center; justify-content: center; padding: 8px 10px; text-align: center; background: #fff; border: 1px solid var(--n-200); }
.wall-logo { max-inline-size: 78%; block-size: var(--logo-h, 44px); inline-size: auto; object-fit: contain; filter: grayscale(1); opacity: .72; transition: filter var(--dur-2), opacity var(--dur-2); }
/* eni's yellow turns near-white in grayscale; darken it to match the others' weight */
.wall-logo[src*="/eni."] { filter: grayscale(1) brightness(.5); }
.wall-cell:hover .wall-logo, .wall-cell:focus-within .wall-logo { filter: none; opacity: 1; }
.wall-name { font-family: var(--font); font-size: .9375rem; line-height: 1.2; font-weight: 700; letter-spacing: .02em; color: var(--navy-700); overflow-wrap: anywhere; }


/* CTA band: centered */
.cta-band { padding-block: var(--rhythm-5); background: var(--navy-900); border-block-start: 1px solid var(--hairline); text-align: center; }
.cta-inner { display: grid; justify-items: center; gap: var(--rhythm-2); }
.cta-h { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 700; letter-spacing: var(--ls-head); text-wrap: balance; max-inline-size: 22ch; }
.cta-lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--text-muted); max-inline-size: 52ch; }
.cta-actions { display: grid; justify-items: center; gap: var(--rhythm-1); margin-block-start: var(--sp-2); }
.cta-phone { display: inline-flex; align-items: center; gap: 10px; min-block-size: 44px; color: #fff; font-weight: 600; text-decoration: none; }
.cta-phone .icon { color: var(--amber-500); }
.cta-phone:hover { color: var(--amber-500); }

/* Commitments */
.commit-list { display: grid; gap: 0; }
.commit { padding-block: var(--rhythm-2); border-block-start: 1px solid var(--hairline); display: grid; gap: var(--sp-3); align-content: start; }
.commit-idx { font-size: 2rem; line-height: 1; font-weight: 700; color: var(--amber-text); font-variant-numeric: tabular-nums; }
.commit p { color: var(--text-muted); font-size: var(--fs-small); line-height: var(--lh-small); max-inline-size: 42ch; }
@media (min-width: 1024px) {
  .commit-list { grid-template-columns: repeat(3, 1fr); column-gap: var(--rhythm-3); }
  .commit { padding-block: var(--rhythm-2) 0; }
}
.band-link { margin-block-start: var(--rhythm-2); }
.band-hse .commit-list + .band-link { margin-block-end: -12px; }

/* Tags: plain, non-interactive */
.tags, .chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { padding: 4px 12px; background: var(--surface-tint); border-radius: 4px; font-size: .875rem; font-weight: 500; color: var(--n-600); }
.section-tint .tags li { background: #fff; }

/* Lists */
.bullets li { position: relative; padding-inline-start: var(--sp-5); margin-block: var(--sp-2); }
.bullets li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .8em; inline-size: 8px; block-size: 2px; background: var(--amber-500); }
.bullets a { color: var(--navy-900); font-weight: 500; display: inline-flex; align-items: center; min-block-size: 44px; }
.checks { display: grid; gap: var(--sp-3); }
.checks li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-small); line-height: var(--lh-small); }
.checks .icon { color: var(--amber-text); margin-block-start: 2px; }

/* Vision quote */
.vision-quote { border-inline-start: 3px solid var(--amber-500); padding-inline-start: var(--sp-5); font-size: var(--fs-lead); line-height: var(--lh-lead); margin-block: var(--rhythm-2) !important; max-inline-size: 52ch; }

/* Footer (navy, darker than the CTA band above) */
.site-footer { background: #0c1a2e; color: #fff; padding-block-start: var(--rhythm-5); position: relative; border-block-start: 1px solid var(--hairline); }
.site-footer.theme-inverse { --surface: #0c1a2e; background: #0c1a2e; }
.footer-grid { display: grid; gap: var(--rhythm-3); grid-template-columns: 1fr; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1.2fr 1.4fr; } }
.footer-brand img { inline-size: 130px; block-size: auto; }
.footer-brand p { margin-block-start: var(--sp-4); color: var(--text-muted); font-size: var(--fs-small); max-inline-size: 32ch; }
.footer-h { font-size: var(--fs-label); font-weight: 600; color: #fff; margin-block-end: var(--sp-4); display: flex; align-items: center; gap: 10px; }
.footer-h::before { content: ""; inline-size: 16px; block-size: 2px; background: var(--amber-500); }
html[lang="en"] .footer-h { text-transform: uppercase; letter-spacing: .08em; }
.site-footer li { margin-block: 2px; }
.site-footer a { color: #e3e9f0; text-decoration: none; font-size: var(--fs-small); display: inline-flex; align-items: center; min-block-size: 44px; }
.site-footer a:hover { text-decoration: underline; color: var(--amber-500); }
.footer-contact li { display: flex; gap: var(--sp-3); align-items: center; font-size: var(--fs-small); padding-block: 4px; }
.footer-contact .icon { color: var(--amber-500); flex: none; }
.footer-bottom::before { content: ""; position: absolute; inset-inline: var(--gutter); inset-block-start: 0; block-size: 1px; background: var(--hairline); }
.footer-bottom { position: relative; display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; align-items: center; margin-block-start: var(--rhythm-4); padding-block: var(--sp-5); font-size: var(--fs-small); color: var(--text-muted); }
.footer-legal { display: block; font-size: var(--fs-label); }

/* Mobile call bar (back-to-top is desktop only) */
.callbar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 45; display: none; gap: var(--sp-3); padding: var(--sp-3) var(--gutter); padding-block-end: max(var(--sp-3), env(safe-area-inset-bottom)); background: var(--navy-900); border-block-start: 1px solid var(--hairline); transition: transform var(--dur-2) var(--ease); }
.callbar .btn { flex: 1; min-block-size: 48px; padding-inline: var(--sp-3); }
.callbar .btn-secondary { flex: 0 0 34%; color: #fff; border-color: #fff; }
.callbar.is-hidden { transform: translateY(110%); }
@media (max-width: 767px) { .callbar { display: flex; } .site-footer { padding-block-end: 72px; } .to-top { display: none !important; } }
.to-top { position: fixed; inset-inline-end: var(--sp-5); inset-block-end: var(--sp-5); z-index: 44; inline-size: 44px; block-size: 44px; display: grid; place-items: center; background: var(--navy-900); color: #fff; border: 1px solid var(--hairline); border-radius: 2px; cursor: pointer; box-shadow: var(--shadow-2); }

/* Breadcrumb */
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-small); color: var(--text-muted); }
.breadcrumb li + li::before { content: "/"; margin-inline-end: var(--sp-2); opacity: .6; }
.breadcrumb a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; min-block-size: 44px; margin-block: -10px; }
.breadcrumb a:hover { text-decoration: underline; }

/* Timeline rail (reference .htimeline) */
.rail-head { display: grid; gap: var(--rhythm-2); align-items: end; margin-block-end: var(--rhythm-3); }
.rail-head .section-header { margin-block-end: 0; }
.rail-controls { display: flex; align-items: center; gap: 10px; }
.rail-count { font-size: var(--fs-small); color: var(--text-muted); font-weight: 600; margin-inline-end: 6px; font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.rail-count b { color: var(--amber-text); font-weight: 700; }
.rail-btn { inline-size: 44px; block-size: 44px; display: grid; place-items: center; background: var(--navy-900); color: #fff; border: 0; border-radius: 50%; cursor: pointer; transition: background var(--dur-1), transform var(--dur-1), opacity var(--dur-1); }
.rail-btn:hover { background: var(--navy-800); }
.rail-btn:active { transform: scale(.94); }
.rail-btn[aria-disabled="true"] { opacity: .35; cursor: default; }
.rail-prev .icon { transform: scaleX(-1); }
[dir="rtl"] .rail-prev .icon { transform: none; }
[dir="rtl"] .rail-next .icon { transform: scaleX(-1); }
@media (min-width: 1024px) { .rail-head { grid-template-columns: 1fr auto; } }
.rail-wrap { position: relative; margin-inline: calc(var(--gutter) * -1); }
.rail { display: flex; gap: var(--rhythm-2); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-behavior: smooth; padding: 0 var(--gutter) var(--rhythm-2); scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
.rail::-webkit-scrollbar { display: none; }
.rail:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.rail.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none; }
.rcard { position: relative; flex: 0 0 clamp(15.5rem, 78vw, 17.5rem); scroll-snap-align: start; display: flex; flex-direction: column; }
.rcard::before { content: ""; position: absolute; inset-block-start: 6px; inset-inline: calc(var(--rhythm-2) / -2); block-size: 1px; background: var(--n-300); }
.rcard:first-child::before { inset-inline-start: 0; }
.rcard:last-child::before { inset-inline-end: 0; }
.rcard-node { align-self: center; inline-size: 13px; block-size: 13px; border-radius: 50%; background: #fff; border: 3px solid var(--amber-500); position: relative; z-index: 1; margin-block-end: var(--rhythm-1); box-shadow: 0 0 0 5px #fff; transition: transform var(--dur-2); }
.rcard:hover .rcard-node { transform: scale(1.22); }
.rcard-body { position: relative; flex: 1; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--n-200); border-block-start: 3px solid var(--amber-500); border-radius: 4px; overflow: hidden; transition: transform var(--dur-2), box-shadow var(--dur-2); }
.rcard:hover .rcard-body { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.rcard-media { aspect-ratio: 3 / 4; inline-size: 100%; }
.rcard-media.code-tile span { font-size: 4.5rem; }
.rcard-media img { user-select: none; -webkit-user-drag: none; }
.rcard:hover .rcard-media img { transform: scale(1.04); }
.rcard-text { padding: var(--rhythm-1); background: var(--n-50); flex: 1; display: grid; gap: 10px; align-content: start; }
.rcard-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px var(--rhythm-1); background: var(--navy-900); }
.rcard-head .code-chip, .prow-id .code-chip { background: var(--amber-500); color: var(--navy-900); }
.rcard-head .pcard-site, .prow-id .pcard-site { color: #fff; font-size: var(--fs-small); }
.rcard-title { font-size: 1.0625rem; line-height: 1.45; font-weight: 600; }
.rcard .meta { gap: 6px; }

/* Forms */
.form { display: grid; gap: var(--sp-5); margin-block-start: var(--sp-5); }
@media (min-width: 768px) { .form { grid-template-columns: repeat(2, 1fr); } .field-wide { grid-column: 1 / -1; } }
.field label { display: block; font-size: var(--fs-small); font-weight: 600; margin-block-end: var(--sp-2); }
.req { color: var(--error); margin-inline-start: 2px; }
.opt { font-weight: 400; color: var(--text-muted); }
.field input, .field select, .field textarea { inline-size: 100%; min-block-size: 48px; padding: 10px 14px; background: #fff; border: 1px solid var(--border-strong); border-radius: var(--radius-m); font-size: 1rem; }
.field textarea { min-block-size: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--focus); outline-offset: 2px; border: 2px solid var(--navy-900); padding: 9px 13px; }
.field [aria-invalid="true"] { border-color: var(--error); background: var(--error-surface); }
.field-error { display: flex; gap: var(--sp-2); align-items: center; margin-block-start: var(--sp-2); font-size: var(--fs-small); color: var(--error); }
.form-status { padding: var(--sp-5); background: var(--success-surface); border: 1px solid var(--success); border-radius: var(--radius-m); color: var(--success); }
.form-status.is-error { background: var(--error-surface); border-color: var(--error); color: var(--error); }
.form-status-t { font-weight: 600; }
.form-status-d { color: var(--navy-900); margin-block-start: var(--sp-2); font-size: var(--fs-small); }
.form-status-d a { color: var(--amber-text); font-weight: 600; }

@media (max-width: 767px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--rhythm-2) var(--rhythm-1); }
  .footer-brand, .footer-grid > div:last-child { grid-column: 1 / -1; }
  .site-footer { padding-block-start: var(--rhythm-4); }
  .footer-bottom { margin-block-start: var(--rhythm-2); }
  .cta-band { padding-block: var(--rhythm-4); }
}

/* The contact form is the CTA there; the fixed bar would cover the submit button */
body:has([data-form]) .callbar { display: none !important; }
body:has([data-form]) .site-footer { padding-block-end: 0; }

/* Field hint: reserved space (no layout shift when it appears), revealed on focus; always in the a11y tree via aria-describedby */
.field-hint { margin-block-start: var(--sp-2); min-block-size: 4.6em; font-size: var(--fs-small); line-height: 1.5; color: var(--n-600); opacity: 0; transform: translateY(-4px); transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.field:focus-within .field-hint { opacity: 1; transform: none; }
@media (min-width: 640px) { .field-hint { min-block-size: 3.1em; } }

/* Structural page layouts. Poster and editorial treatments live in inner.css. */

/* ---- About ---- */
.about-grid { display: grid; gap: var(--rhythm-3); }
.about-content { display: grid; gap: var(--rhythm-3); }
.num-section { padding-block-start: var(--rhythm-2); border-block-start: 1px solid var(--n-200); }
.num-section > * + * { margin-block-start: var(--sp-3); }
.about-content > div:first-child { padding: 0; }
.plaque { padding: var(--rhythm-3); border-radius: 4px; display: grid; gap: var(--sp-3); align-content: start; border-block-start: 3px solid var(--amber-500); background: var(--navy-900); }
.plaque img { inline-size: 96px; block-size: auto; margin-block-end: var(--sp-3); }
.plaque-h { font-size: var(--fs-label); font-weight: 600; color: var(--text-muted); }
.plaque-name { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; }
.plaque-other { color: var(--text-muted); font-weight: 400; }
.plaque-meta { font-size: var(--fs-small); color: var(--amber-500); font-weight: 500; }
@media (min-width: 1024px) {
  .about-grid { grid-template-columns: 1fr 340px; column-gap: 72px; align-items: start; }
  .plaque { position: sticky; inset-block-start: calc(var(--header-h) + 24px); }
}
.vm-grid { display: grid; gap: var(--rhythm-2); }
@media (min-width: 768px) { .vm-grid { grid-template-columns: repeat(2, 1fr); } }
.vm-card { background: #fff; border: 1px solid var(--n-200); border-block-start: 3px solid var(--amber-500); border-radius: 4px; padding: var(--rhythm-3); display: grid; gap: var(--sp-3); align-content: start; }
.goals { display: grid; gap: 0 var(--rhythm-3); }
@media (min-width: 768px) { .goals { grid-template-columns: repeat(2, 1fr); } }
.goals li { display: flex; gap: var(--sp-3); align-items: flex-start; padding-block: var(--sp-4); border-block-end: 1px solid var(--n-200); }
.goals .icon { color: var(--amber-text); margin-block-start: 5px; }

/* ---- Services page ---- */
.subnav { background: #fff; border-block-end: 1px solid var(--n-200); }
.subnav ul { display: flex; gap: 4px; overflow-x: auto; padding-block: var(--sp-2); scrollbar-width: thin; }
.subnav a { display: inline-flex; align-items: center; min-block-size: 44px; padding: 10px 16px; border-radius: 4px; color: var(--n-600); text-decoration: none; font-size: var(--fs-small); font-weight: 500; white-space: nowrap; }
.subnav a:hover { color: var(--navy-900); background: var(--surface-tint); }
@media (min-width: 1024px) { .subnav { position: sticky; inset-block-start: var(--header-h); z-index: 40; } }
.service-block { padding-block: var(--section-y); scroll-margin-block-start: calc(var(--header-h) + 60px); background: var(--surface-tint); }
.service-block:nth-of-type(even) { background: #fff; }
.service-block .split-text .slabel { margin-block-end: var(--rhythm-1); }
.collage-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; max-inline-size: 584px; margin-inline: auto; }
.ctile { position: relative; margin: 0; }
.ctile .u-photo { aspect-ratio: 3 / 4; }
.ctile figcaption { position: absolute; z-index: 2; inset-inline: 0; inset-block-end: 0; padding: var(--sp-3); font-size: .8125rem; font-weight: 600; color: #fff; }
.service-media > .print { max-inline-size: 436px; margin-inline: auto; }
.icon-panel { display: grid; place-items: center; aspect-ratio: 4 / 3; max-inline-size: 436px; margin-inline: auto; inline-size: 100%; background: var(--navy-900); color: var(--amber-500); border-block-start: 3px solid var(--amber-500); }
.icon-panel-quote { aspect-ratio: auto; max-inline-size: none; padding: var(--rhythm-4) var(--rhythm-3); justify-items: start; gap: var(--rhythm-2); }
.icon-panel-quote blockquote { color: #fff; font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 500; max-inline-size: 24ch; }

/* ---- Projects ---- */
.list-label { margin-block-end: var(--rhythm-2); }
.prow { display: grid; background: #fff; border: 1px solid var(--n-300); border-radius: 4px; overflow: hidden; margin-block-end: var(--rhythm-2); scroll-margin-block-start: calc(var(--header-h) + 24px); align-items: start; }
.prow-id { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: 12px var(--rhythm-2); background: var(--navy-900); border-block-end: 3px solid var(--amber-500); }
.prow-main { display: grid; gap: var(--sp-4); align-content: start; padding: var(--rhythm-2); }
.prow-prints { align-self: start; padding: 0 var(--rhythm-2) var(--rhythm-2); }
.prow .prints { margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.prow .prints .print { flex: 0 1 calc(50% - var(--sp-3) / 2); inline-size: auto; min-inline-size: 0; max-inline-size: 222px; }
.prow .prints .print-frame { max-inline-size: none !important; }
.prow .code-tile-sm { min-block-size: 72px; max-inline-size: 96px; aspect-ratio: 4 / 3; }
.prow .code-tile-sm span { font-size: 1.75rem; -webkit-text-stroke-width: 1.5px; }
@media (min-width: 1024px) {
  .prow { grid-template-columns: minmax(0, 1fr) auto; }
  .prow-id { grid-column: 1 / -1; }
  .prow-prints { padding: var(--rhythm-2) var(--rhythm-2) var(--rhythm-2) 0; }
  [dir="rtl"] .prow-prints { padding: var(--rhythm-2) 0 var(--rhythm-2) var(--rhythm-2); }
  .prow .prints { flex-wrap: nowrap; }
  .prow .prints .print { flex: 0 0 222px; }
}

/* ---- Contact ---- */
.contact-grid { display: grid; gap: var(--rhythm-3); }
.contact-cards { display: grid; gap: var(--rhythm-1); align-content: start; }
.ccard { position: relative; display: grid; gap: var(--sp-3); padding: var(--rhythm-2); background: #fff; border: 1px solid var(--n-200); border-block-start: 3px solid var(--amber-500); border-radius: 4px; justify-items: start; }
.ccard-icon { display: grid; place-items: center; inline-size: 44px; block-size: 44px; background: var(--navy-900); color: var(--amber-500); border-radius: 4px; }
.ccard li { margin-block: 2px; }
.contact-link { display: inline-flex; align-items: center; min-block-size: 48px; font-size: var(--fs-lead); font-weight: 600; color: var(--navy-900); text-decoration: none; }
.contact-link:hover { text-decoration: underline; color: var(--amber-text); }
.form-card { background: #fff; border: 1px solid var(--n-200); border-block-start: 3px solid var(--amber-500); border-radius: 4px; padding: clamp(20px, 4vw, 40px); scroll-margin-block-start: calc(var(--header-h) + 24px); }
@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: 1.4fr 1fr; column-gap: var(--rhythm-3); align-items: start; }
  .form-card { grid-row: 1; }
  .contact-cards { grid-row: 1; grid-column: 2; }
}

/* ---- 404 ---- */
.page-404 { min-block-size: 100svh; display: grid; }
.nf { display: grid; align-content: center; justify-items: center; gap: var(--sp-7); padding: var(--sp-8) var(--gutter); text-align: center; }
.nf img { inline-size: 120px; block-size: auto; }
.nf-cols { display: grid; gap: var(--sp-8); }
.nf section { display: grid; gap: var(--sp-4); justify-items: center; }
@media (min-width: 768px) { .nf-cols { grid-template-columns: 1fr 1fr; } }

/* ---- Compact mobile rhythm (keeps the home page short at 390px) ---- */
@media (max-width: 767px) {
  .rcard-media { aspect-ratio: 1 / 1; }
  .rcard-media.code-tile span { font-size: 3.5rem; }
  .commit { padding-block: var(--rhythm-1); gap: var(--sp-2); }
  .commit-idx { font-size: 1.5rem; }
  .wall-cell { inline-size: calc((100% - 16px) / 3); block-size: 4.25rem; padding-inline: 6px; }
  .wall-name { font-size: .8125rem; }
  .clients-wall { max-inline-size: none; }
  .section-header { margin-block-end: var(--rhythm-2); }
}


/* Kashida hero (home). Layers, back to front:
   paper > disc > horizon > birds > ornament islands > wordmark (back) > crane > stroke band (front copy)
   > grain > ground line > UI. The stage clips everything; the hero ends on its ground line. Composition is physical (left/right), identical in AR and EN: it is a poster.
   hero.js plays the wordmark once on load (tatweel count in ع–م), writing --p, --ks, plus the measured geometry
   (--k-*, --c*, --hook-*, --intro-*); captions fade in when it finishes (.kh-done). */

/* HT Moshreq Pro (HadiType), self-hosted subset. Blocking display: the word is the composition. */
@font-face { font-family: "HT Moshreq"; src: url("/assets/fonts/moshreq-ar.woff2") format("woff2"); font-weight: 50 900; font-display: block; }

.kh {
  --kh-paper: #ebe5d9; --kh-paper-deep: #e2dacb; --kh-disc: #f6f2ea;
  --kh-ink: #121a27; --kh-ochre: #d3842a; --kh-ochre-pale: #e8c9a2; --kh-mute: #6f6a60;
  --kh-font: 'HT Moshreq', 'IBM Plex Sans Arabic', sans-serif;
  --kh-fs: min(39svh, 27vw);
  --cell: min(6vw, 10.6svh);
  --p: 0;
  /* static fallbacks; hero.js replaces them with measured values */
  --cw: min(60vw, 108svh); --cx: 14vw; --cy: 7svh;
  position: relative; color: var(--kh-ink);
  background: radial-gradient(120% 90% at 70% 10%, #f1ece2 0%, transparent 60%), var(--kh-paper);
}
.kh-stage { position: relative; block-size: 100svh; min-block-size: 560px; overflow: hidden; isolation: isolate; }
.kh-stage > * { position: absolute; }


/* the disc: a printed shape with mottled, moon-like paper; subtle */
.kh-disc {
  inline-size: 96svh; aspect-ratio: 1; left: calc(55vw - 48svh); top: 4svh; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #faf7f1 0%, var(--kh-disc) 38%, #efe8dc 78%, #e8e0d1 100%);
}
.kh-disc::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: .8; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.007' numOctaves='5' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .52  0 0 0 0 .48  0 0 0 0 .41  0 0 0 .5 -.12'/%3E%3C/filter%3E%3Crect width='500' height='500' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 100% 100%; }

/* Basra horizon: refinery + palms in haze, standing on the hero's ground line and fading upward */
.kh-horizon { inset-inline: 0; bottom: 0; inline-size: 100%; block-size: 34svh;
  -webkit-mask-image: linear-gradient(to top, #000 15%, rgba(0,0,0,.55) 55%, transparent 100%); mask-image: linear-gradient(to top, #000 15%, rgba(0,0,0,.55) 55%, transparent 100%); }
.kh-horizon .far { fill: #d3cab9; opacity: .75; }
.kh-horizon .near { fill: #c7bba7; opacity: .6; }

/* birds: two small flocks drifting across the disc */
.kh-birds { left: 29vw; top: 42svh; inline-size: 31vw; overflow: visible; fill: none; stroke: #c98a3c; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.kh-birds g { animation: kh-drift 70s linear infinite alternate; }
.kh-birds .flock-b { animation-duration: 95s; animation-delay: -30s; }
@keyframes kh-drift { from { transform: translate(0, 0); } to { transform: translate(-60px, -14px); } }

/* ornament islands on one grid, anchored past the right edge, starting under the header */
.kh-pattern { right: calc(var(--cell) * -.45); top: calc(var(--header-h) - var(--cell) * .1); inline-size: calc(11 * var(--cell)); block-size: auto; overflow: visible; fill: var(--kh-ochre); }
.kh-pattern .pale { fill: var(--kh-ochre-pale); }
/* PixelMotif cells: off / pale in-between / on */
.kh-pattern .px rect { opacity: 0; transition: opacity .1s cubic-bezier(.4,0,.3,1), fill .1s linear; }
.kh-pattern .px rect.on { opacity: 1; }
.kh-pattern .px rect.mid { fill: var(--kh-ochre-pale); opacity: .85; }
.kh-pattern .pale .px rect.mid { fill: #f1e0c8; }

/* the wordmark (see hero.mjs): one shaped run per word; anchored at its left («ر») end on landscape screens */
.kh-wordm {
  direction: rtl; display: flex; align-items: flex-start; gap: .3em; white-space: nowrap;
  font-family: var(--kh-font); font-weight: 760; font-size: calc(var(--kh-fs) * var(--ks, 1)); line-height: 1;
  left: -1.6vw; bottom: 8svh; font-kerning: normal; user-select: none; pointer-events: none;
}
.kwm { display: block; inline-size: max-content; }
/* front copy: the same text in the same place, clipped to the band of horizontal strokes */
.kh-wordm-front { z-index: 3; }
.kh-wordm-front .kwm { clip-path: inset(calc((var(--k-top, .6225) - .02) * 1em) 0 calc((1 - var(--k-top, .6225) - var(--k-h, .14) - .02) * 1em) 0); }

/* photographic crane: head image, tiled mast below it, separate hook on a swaying cable */
.kh-crane { inset: 0; z-index: 2; pointer-events: none; }
.kh-crane-img { position: absolute; left: var(--cx); top: var(--cy); inline-size: var(--cw); block-size: auto; max-inline-size: none; }
/* the mast: one straightened strip cut from the same pixels as the head image, placed in the same coordinate
   system (--cx/--cy/--cw + crane.json fractions) and overlapping the head's bottom rows, which are identical */
.kh-mast { position: absolute; left: calc(var(--cx) + var(--cw) * var(--mast-l, .73601)); inline-size: calc(var(--cw) * var(--mast-w, .05043));
  top: calc(var(--cy) + var(--cw) / 1.57575 * var(--mast-t, .99876)); bottom: var(--mast-bottom, 0);
  background: url("/assets/img/hero/mast.webp") 0 0 / 100% auto no-repeat; }
.kh-hook { position: absolute; left: var(--hook-x, 30vw); top: var(--hook-y, 16svh); display: block; transform-origin: 0 0; animation: kh-sway 11s ease-in-out infinite alternate; }
.kh-cable { position: absolute; left: calc(var(--hook-w, 30px) * -.14); inline-size: calc(var(--hook-w, 30px) * .28); block-size: var(--hook-len, 30svh); border-inline: 1px solid rgba(35,33,30,.75); }
.kh-hook img { position: absolute; top: var(--hook-len, 30svh); left: calc(var(--hook-w, 30px) * -.4811); inline-size: var(--hook-w, 30px); max-inline-size: none; }
@keyframes kh-sway { from { transform: rotate(-.3deg); } to { transform: rotate(.3deg); } }
@media (prefers-reduced-motion: reduce) { .kh-hook, .kh-birds g { animation: none; } }

/* the hero ends on a literal ground line: a thin ink rule with ticks on the ornament grid, like the
   ground plane of a section drawing */
.kh-ground { inset-inline: 0; bottom: 0; block-size: 9px; z-index: 5; pointer-events: none;
  border-block-end: 1px solid rgba(18,26,39,.55);
  background: repeating-linear-gradient(to left, rgba(18,26,39,.45) 0 1px, transparent 1px var(--cell)) right calc(var(--cell) * .45) bottom / 100% 6px no-repeat; }
.kh-grain { inset: 0; z-index: 4; pointer-events: none; opacity: .38; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3  0 0 0 0 .27  0 0 0 0 .22  0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E"); }

/* UI: small, quiet, set like poster captions */
.kh-ui { inset: 0; z-index: 5; pointer-events: none; }
.kh-ui a { pointer-events: auto; }
.kh-intro { position: absolute; left: 6vw; top: 33svh; inline-size: 16.5rem; }
/* with JS, captions wait for the wordmark to finish, then settle in */
.js .kh-intro { opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .3s cubic-bezier(.2,.7,.2,1); }
.js .kh-done .kh-intro { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .kh-intro { transition: none; } }
.kh-kicker { font-size: .78rem; letter-spacing: .02em; color: var(--kh-mute); margin: 0 0 1rem; }
.kh-title { font-size: 1.02rem; line-height: 1.55; font-weight: 500; margin: 0 0 1.1rem; max-inline-size: 15rem; letter-spacing: 0; }
.kh-link { display: inline-flex; gap: .5rem; align-items: center; font-size: .86rem; font-weight: 600; color: var(--kh-ink); text-decoration: none; padding-block: .35rem; border-block-end: 1.5px solid var(--kh-ochre); }
.kh-link:hover { color: #000; border-color: var(--kh-ink); }
/* Once hero.js has measured the glyphs, captions stand on the word: bottom a fixed gap above the word's
   line box, flush edge where the long kashida begins. Without JS they keep the static position above. */
.kh-aligned .kh-intro { top: auto; bottom: var(--intro-bottom); }
.kh-aligned .kh-intro { left: auto; right: calc(100% - var(--intro-axis)); }
.kh-aligned:lang(ar) .kh-intro { text-align: right; }
/* English, landscape: the caption block is anchored by its right edge to the kashida, which on short/narrow desktop
   windows pushes its left edge under the fixed progress rail (>=1280px). Anchor by the left edge there instead,
   clear of the rail. Arabic keeps its own anchoring. */
@media (min-aspect-ratio: 5/6) {
  .kh-aligned:lang(en) .kh-intro { right: auto; left: max(calc(var(--intro-axis) - 16.5rem), 6vw); }
}
@media (min-aspect-ratio: 5/6) and (min-width: 1280px) {
  .kh-aligned:lang(en) .kh-intro { left: max(calc(var(--intro-axis) - 16.5rem), 7.5rem); }
}


/* home header sits on the poster: fixed, transparent and quiet; it turns solid once the hero is passed */
.is-home .site-header { position: fixed; inset-inline: 0; background: transparent; border-color: transparent; box-shadow: none; transition: background-color .3s, border-color .3s; }
.is-home.kh-past .site-header { background: #fff; border-color: var(--n-200); pointer-events: auto; }
.is-home.kh-past .nav-desktop a[aria-current="page"] { box-shadow: none; }
.is-home .nav-desktop a { color: #4a4a48; background: transparent; }
.is-home .nav-desktop a[aria-current="page"] { color: var(--kh-ink, #121a27); background: transparent; box-shadow: inset 0 -1.5px 0 #d3842a; border-radius: 0; }
.is-home .header-cta .btn { background: transparent; border: 1px solid rgba(18,26,39,.35); color: #121a27; box-shadow: none; white-space: nowrap; }

/* Two genuine header layouts on the home page. Hero: no quote button; its slot has zero width, so the
   language toggle, navigation and logo redistribute (space-between) and the nav breathes wider. Past the
   hero: the slot opens, everything settles, and the button fades into the room made for it. One
   coordinated transition, reversed on the way back. */
@media (min-width: 1024px) {
  .is-home .header-cta { display: block; overflow: hidden; max-inline-size: 13rem; margin-inline-start: 0; opacity: 1; visibility: visible;
    transition: max-inline-size .55s cubic-bezier(.3,.6,.2,1), margin-inline-start .55s cubic-bezier(.3,.6,.2,1), opacity .3s ease .22s, visibility 0s; }
  .is-home:not(.kh-past) .header-cta { max-inline-size: 0; margin-inline-start: calc(-1 * var(--sp-4)); opacity: 0; visibility: hidden;
    transition: max-inline-size .55s cubic-bezier(.3,.6,.2,1) .1s, margin-inline-start .55s cubic-bezier(.3,.6,.2,1) .1s, opacity .18s ease, visibility 0s linear .65s; }
  .is-home .nav-desktop ul { gap: 2px; transition: gap .55s cubic-bezier(.3,.6,.2,1); }
  .is-home:not(.kh-past) .nav-desktop ul { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { .is-home .header-cta, .is-home .nav-desktop ul, .is-home .site-header { transition: none !important; } }
.is-home .scroll-progress { display: none; }
/* the transparent header must not swallow hovers meant for the ornament beneath it */
.is-home .site-header { pointer-events: none; }
.is-home .site-header a, .is-home .site-header button { pointer-events: auto; }

/* Arabic captions share the display face (lighter cut); English keeps Plex */
.kh:lang(ar) .kh-title { font-family: var(--kh-font); font-weight: 600; font-size: 1.28rem; line-height: 1.5; }
.kh:lang(ar) .kh-kicker, .kh:lang(ar) .kh-link { font-family: var(--kh-font); }

/* ---- portrait screens: recomposed, not shrunk --------------------------------------------------------
   Sky with a larger crane on top; the two-line, kashida-justified wordmark standing on the horizon's
   ground line (at --ground from the bottom); captions below it on clean paper, above the mobile call bar. */
@media (max-aspect-ratio: 5/6) {
  .kh { --kh-fs: min(29vw, 17svh); --ground: 35svh; --mast-bottom: var(--ground); --cell: min(11vw, 7svh); }
  .kh:lang(ar) .kh-title { font-size: 1.1rem; }
  .kh-kicker { margin-block-end: .6rem; }
  .kh-wordm { flex-direction: column; gap: 0; left: auto; right: 5vw; bottom: calc(var(--ground) - .1 * var(--kh-fs)); font-size: var(--kh-fs); }
  .kwm-1 { margin-block-end: -.04em; }
  .kh-horizon { bottom: var(--ground); block-size: 22svh; }
  .kh-disc { inline-size: 70vw; left: 8vw; top: 16svh; }
  .kh-birds { left: 8vw; top: 38svh; inline-size: 44vw; }
  .kh-intro, .kh-aligned .kh-intro { left: auto; right: 6vw; top: auto; bottom: calc(var(--ground) - 26svh + 72px); inline-size: min(88vw, 26rem); text-align: right; }
  /* captions hang just below the wordmark (clear of the hamza under «إ»), inside the haze */
  .kh-intro, .kh-aligned .kh-intro { bottom: auto; top: calc(100% - var(--ground) + .34 * var(--kh-fs) + 1.2svh); } /* clears the hamza of «إ» */
  .kh:lang(en) .kh-intro { right: auto; left: 6vw; text-align: left; }
  .kh-title { max-inline-size: none; }
}
/* portrait atmosphere: soft ivory haze (tools/clouds.mjs) rising from behind the captions into the foot of the
   wordmark; the mast runs down into it and dissolves. Three pre-rendered layers drift by transform only, on
   long mirrored cycles (no loop reset); static under reduced motion. Hidden on landscape screens. */
.kh-clouds { display: none; }
@media (max-aspect-ratio: 5/6) {
  .kh-clouds { display: block; inset-inline: 0; bottom: 0; block-size: calc(var(--ground) + 7svh); z-index: 4; pointer-events: none; }
  .kc { position: absolute; bottom: 0; left: -25%; inline-size: 150%; background: center bottom / 100% 100% no-repeat; will-change: transform;
    animation: kc-drift var(--kc-t, 40s) ease-in-out infinite alternate; }
  .kc-b { block-size: 100%; background-image: url("/assets/img/hero/cloud-b.webp"); opacity: .75; --kc-dx: -7%; --kc-t: 47s; }
  .kc-a { block-size: 82%; background-image: url("/assets/img/hero/cloud-a.webp"); --kc-dx: 6%; --kc-t: 36s; animation-delay: -12s; }
  .kc-c { block-size: 58%; background-image: url("/assets/img/hero/cloud-c.webp"); --kc-dx: -2.5%; --kc-t: 55s; animation-delay: -30s; }
  /* the mast continues below the horizon and fades out inside the haze */
  .kh { --mast-bottom: calc(var(--ground) - 11svh); }
  /* the skyline's foot dissolves into the haze too, instead of ending on a ruled line */
  .kh-horizon { -webkit-mask-image: linear-gradient(to top, transparent 0, #000 38%, rgba(0,0,0,.55) 68%, transparent 100%); mask-image: linear-gradient(to top, transparent 0, #000 38%, rgba(0,0,0,.55) 68%, transparent 100%); }
  .kh-mast { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 16svh), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 16svh), transparent); }
}
@keyframes kc-drift { from { transform: translateX(0); } to { transform: translateX(var(--kc-dx, 5%)); } }
@media (prefers-reduced-motion: reduce) { .kc { animation: none; } }
/* short phones: the wordmark stands higher so the captions fit above the call bar */
@media (max-aspect-ratio: 5/6) and (max-height: 700px) { .kh { --ground: 41svh; } .kh:lang(ar) .kh-title { font-size: 1rem; } .kh-kicker { margin-block-end: .4rem; } .kh-title { margin-block-end: .6rem; } }
@media (max-aspect-ratio: 5/6) and (min-width: 768px) { .kh { --kh-fs: min(26vw, 19svh); --ground: 26svh; } }

/* Editorial sections that continue the hero (home «من نحن»). Same paper/ink/ochre as .kh; the photo
   board is drawn on a 720x520 design grid scaled by --u, positioned physically (left/top) like the hero. */
.ab {
  --paper: #ebe5d9; --ink: #121a27; --ochre: #d3842a; --ochre-pale: #e8c9a2; --mute: #6f6a60;
  --u: calc(min(46vw, 720px) / 720);
  position: relative; overflow: hidden; background: var(--paper); color: var(--ink);
  padding-block: clamp(64px, 7vw, 104px) clamp(80px, 10vw, 140px);
}
.ab-in { position: relative; z-index: 2; max-inline-size: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter);
  display: grid; grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); column-gap: clamp(48px, 6vw, 110px); align-items: start; }
/* the collage leads; the headline sits a little lower */
.ab-text { padding-block-start: clamp(28px, 4vw, 64px); }

/* the hero's Basra horizon, reduced to a watermark along the bottom edge */
.ab-horizon { position: absolute; inset-inline: 0; bottom: 0; inline-size: 100%; block-size: 26svh; pointer-events: none; opacity: .32;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 90%); mask-image: linear-gradient(to top, #000 10%, transparent 90%); }
.ab-horizon .far { fill: #d3cab9; } .ab-horizon .near { fill: #cdc2b0; }
@media (max-width: 1023px) { .ab-horizon { display: none; } }

/* ---- text: the typography carries the hierarchy --------------------------------------------------- */
.ab-text { position: relative; z-index: 1; }
.ab .slabel-t { color: var(--ink); }
.ab .slabel-rule { background: var(--ochre); inline-size: 40px; block-size: 1.5px; }
.ab-h { margin: 1.6rem 0 0; font-size: clamp(2.3rem, 1.3rem + 2.6vw, 3.7rem); line-height: 1.22; font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
.ab:lang(ar) .ab-h { font-family: 'HT Moshreq', var(--font-ar); letter-spacing: 0; line-height: 1.35; }
.ab-body { margin-block-start: 1.9rem; }
.ab-body p { margin: 0; max-inline-size: 36em; font-size: 1.04rem; line-height: 1.95; color: #2c3341; }
.ab-body p + p { margin-block-start: 1.1rem; }
.ab-quote { margin: 0; padding-inline-start: .9rem; position: relative; }
.ab-quote::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: .35em; inline-size: 2px; background: var(--ochre); }
.ab-quote p { margin: 0; font-size: clamp(.9rem, .78rem + .3vw, 1.02rem); line-height: 1.75; font-weight: 500; color: var(--ink); }
.ab:lang(ar) .ab-quote p { font-family: 'HT Moshreq', var(--font-ar); font-weight: 500; }
.ab-cta { margin-block-start: 1rem; display: inline-flex; align-items: center; gap: .7rem; padding: .55rem 1rem; min-block-size: 44px;
  border: 1px solid rgba(18,26,39,.5); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .84rem; transition: border-color .25s, color .25s; }
.ab-cta-arrow { color: var(--ochre); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.ab-cta:hover, .ab-cta:focus-visible { border-color: var(--ochre); }
.ab-cta:hover .ab-cta-arrow { transform: translateX(-4px); }
.ab-cta:lang(en):hover .ab-cta-arrow { transform: translateX(4px); }

/* ---- the drawing board ------------------------------------------------------------------------------- */
/* aligned to the header's container: the text's outer edge meets the logo line, and the board is scaled to
   its column (container units) with its outermost print (x 30) on the container's other edge (CTA line) */
.ab-visual { container-type: inline-size; min-inline-size: 0; }
.ab-board { --u: calc(100cqi / 720); position: relative; inline-size: calc(720 * var(--u)); block-size: calc(520 * var(--u)); left: calc(-30 * var(--u)); direction: ltr; }
.ab-board > * { position: absolute; }
/* x, y, w, h on the 720x520 design grid */
.ab-board .g { left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); inline-size: calc(var(--w) * var(--u)); block-size: calc(var(--h) * var(--u)); }
.ab-ph, .ab-orn, .ab-disc { left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); inline-size: calc(var(--w) * var(--u)); block-size: calc(var(--h) * var(--u)); }

.ab-disc { --x: 90; --y: -70; --w: 620; --h: 620; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f3eee5 0%, #eee8dd 60%, transparent 71%); opacity: .8; }

/* photographs: sharp prints, one baseline (y 460), stepped tops */
.ab-ph { margin: 0; z-index: 2; overflow: hidden; background: #d8d0c2; box-shadow: 0 0 0 1px rgba(18,26,39,.06); }
.ab-ph img { display: block; inline-size: 100%; block-size: 100%; max-inline-size: none; object-fit: cover; filter: saturate(.84) contrast(1.03) sepia(.07); }
.ab-ph picture { display: contents; }
.ab-ph-a { --x: 170; --y: 60; --w: 300; --h: 400; }
.ab-ph-b { --x: 490; --y: 0; --w: 190; --h: 250; }
.ab-ph-c { --x: 490; --y: 270; --w: 230; --h: 190; }
.ab-ph-d { --x: 30; --y: 232; --w: 124; --h: 62; }

/* ornament as annotation: an arch half behind the dominant print, a corner triangle, one pixel module */
.ab-orn { fill: var(--ochre); overflow: visible; z-index: 1; }
.ab-orn-arch { --x: 112; --y: 18; --w: 76; --h: 76; }
.ab-orn-tri { --x: 724; --y: 424; --w: 36; --h: 36; z-index: 3; fill: var(--ochre); }
.ab-orn-px { --x: 56; --y: 128; --w: 72; --h: 72; }
.ab-orn-px .px rect { opacity: 0; transition: opacity .1s cubic-bezier(.4,0,.3,1), fill .1s linear; }
.ab-orn-px .px rect.on { opacity: 1; }
.ab-orn-px .px rect.mid { fill: var(--ochre-pale); opacity: .85; }
.ab-dust { inset: 0; pointer-events: none; }
.ab-dust i { position: absolute; inline-size: calc(8 * var(--u)); block-size: calc(8 * var(--u)); background: var(--ochre-pale); }
.ab-dust i:nth-child(1) { left: calc(134 * var(--u)); top: calc(104 * var(--u)); }
.ab-dust i:nth-child(2) { left: calc(140 * var(--u)); top: calc(210 * var(--u)); background: var(--ochre); }
.ab-dust i:nth-child(3) { left: calc(700 * var(--u)); top: calc(474 * var(--u)); }
.ab-dust i:nth-child(4) { left: calc(476 * var(--u)); top: calc(492 * var(--u)); }

/* caption plate: the mission + link pinned over the dominant print's lower corner */
.ab-plate { z-index: 4; left: calc(30 * var(--u)); top: calc(300 * var(--u)); inline-size: calc(300 * var(--u)); box-sizing: border-box;
  padding: calc(22 * var(--u)) calc(24 * var(--u)) calc(20 * var(--u)); background: #efe9de; box-shadow: 0 0 0 1px rgba(18,26,39,.14), 0 10px 24px -18px rgba(18,26,39,.35); text-align: start; }
.js .ab-plate { opacity: 0; transform: translateY(8px); transition: opacity .6s ease .45s, transform .7s cubic-bezier(.2,.7,.2,1) .45s; }
.js .ab-board.is-in .ab-plate { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .ab-plate { opacity: 1; transform: none; transition: none; } }

/* registration lines: one baseline, one gutter, one crop mark, one note */
.ab-line { z-index: 3; pointer-events: none; }
.ab-line-base { left: calc(-18 * var(--u)); top: calc(466 * var(--u)); inline-size: calc(760 * var(--u)); block-size: 1px; background: rgba(18,26,39,.28); transform-origin: left; }
.ab-line-base::before, .ab-line-base::after { content: ""; position: absolute; top: -4px; inline-size: 1px; block-size: 9px; background: inherit; }
.ab-line-base::before { left: calc(18 * var(--u)); } .ab-line-base::after { right: calc(22 * var(--u)); }
.ab-line-gut { left: calc(480 * var(--u)); top: calc(-34 * var(--u)); inline-size: 1px; block-size: calc(534 * var(--u)); background: rgba(211,132,42,.55); transform-origin: top; }
.ab-crop { z-index: 3; left: calc(686 * var(--u)); top: calc(-12 * var(--u)); inline-size: 14px; block-size: 14px; border-block-start: 1px solid rgba(18,26,39,.35); border-inline-end: 1px solid rgba(18,26,39,.35); }
.ab-note { z-index: 3; left: calc(490 * var(--u)); top: calc(480 * var(--u)); font: 500 .66rem/1 var(--font); letter-spacing: .12em; color: var(--mute); white-space: nowrap; }

/* ---- motion: calm. Prints reveal through a rising mask, lines draw once ------------------------------ */
.js .ab-ph { clip-path: inset(100% 0 0 0); transition: clip-path 1s cubic-bezier(.2,.7,.2,1) calc(var(--i) * 90ms); }
.js .ab-line-base { transform: scaleX(0); transition: transform 1.1s cubic-bezier(.2,.7,.2,1) .25s; }
.js .ab-line-gut { transform: scaleY(0); transition: transform 1.1s cubic-bezier(.2,.7,.2,1) .35s; }
.js .ab-board.is-in .ab-ph { clip-path: inset(0); }
.js .ab-board.is-in .ab-line { transform: none; }
@media (prefers-reduced-motion: reduce) { .js .ab-ph { clip-path: none; transition: none; } .js .ab-line { transform: none; transition: none; } }

/* ---- smaller screens: headline first, 1 dominant + 2 supporting, almost no ornament -------------------- */
@media (max-width: 1023px) {
  .ab { --u: calc(min(92vw, 640px) / 720); }
  .ab-text { padding-block-start: 0; }
  .ab-in { grid-template-columns: 1fr; row-gap: 3rem; }
  .ab-board { block-size: calc(470 * var(--u)); left: 0; }
  .ab-ph-a { --x: 0; --y: 60; --w: 400; --h: 400; }
  .ab-ph-b { --x: 420; --y: 0; --w: 300; --h: 220; }
  .ab-ph-c { --x: 420; --y: 240; --w: 300; --h: 220; }
  .ab-ph-d, .ab-orn-arch, .ab-orn-px, .ab-dust, .ab-line-gut, .ab-crop, .ab-note, .ab-disc { display: none; }
  .ab-orn-tri { --x: 0; --y: 14; --w: 34; --h: 34; }
  .ab-line-base { top: calc(470 * var(--u)); }
  .ab-board { block-size: auto; padding-block-start: calc(490 * var(--u)); }
  .ab-plate { position: relative; left: 0; top: 0; inline-size: 100%; padding: 1.2rem 1.3rem; }
}

/* ---- page rail (home, wide screens): where you are in the page, not the section's own label ------------ */
.page-rail { position: fixed; z-index: 40; left: 2.2vw; top: 15svh; block-size: 36svh; display: none; flex-direction: column; align-items: center; gap: .55rem;
  font: 500 .72rem/1 var(--font); letter-spacing: .08em; color: #6f6a60; pointer-events: none; transition: opacity .3s; }
@media (min-width: 1280px) { .page-rail { display: flex; } }
.page-rail b { color: #121a27; font-weight: 600; }
.page-rail-tick { inline-size: 1px; block-size: 1.6rem; background: #d3842a; }
.page-rail-track { position: relative; flex: 1; inline-size: 1px; margin-block: 1.2rem .4rem; background: rgba(18,26,39,.16); }
.page-rail-fill { position: absolute; inset: 0; background: #121a27; transform-origin: top; transform: scaleY(var(--sp, 0)); }
.page-rail-l { font-size: .74rem; letter-spacing: .02em; white-space: nowrap; }
html[lang="ar"] .page-rail-l { font-family: 'HT Moshreq', var(--font-ar); }
.page-rail-arrow { font-size: .9rem; }
.page-rail.is-hidden { opacity: 0; }


/* same printed-paper grain as the hero */
.ab::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .38; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3  0 0 0 0 .27  0 0 0 0 .22  0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E"); }

/* Client revision: a quiet, uniform ivory ground below the poster. */
.ab { background: #f4f0e7; }
.ab::before { opacity: .07; }
.ab-disc { background: none; }
.ab-horizon { opacity: .1; }
.ab-horizon .far { fill: #e3ddd0; }
.ab-horizon .near { fill: #dcd5c6; }
.ab-plate { background: #f8f5ee; }

/* Home editorial sequence: paper, cool tint and ink. Shared CTA/footer are at the end. */
.ed-section { --ed-ink:#121a27; --ed-paper:#f4f0e7; --ed-ochre:#d3842a; --ed-pale:#e8c9a2; position:relative; overflow:hidden; color:var(--ed-ink); padding-block:clamp(64px,7vw,104px) clamp(80px,10vw,140px); }
.ed-section > .container { position:relative; z-index:1; }
.ed-page { background:var(--ed-paper); }
.ed-tint { background:#eef2f6; }
.ed-page::before, .cta-band::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.18; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3  0 0 0 0 .27  0 0 0 0 .22  0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E"); }
.ed-section .slabel { color:#6f6a60; }
.ed-section .slabel-n b { color:#895116; }
.ed-section .slabel-t { color:var(--ed-ink); }
.ed-section .slabel-rule { inline-size:40px; block-size:1.5px; background:var(--ed-ochre); }
.ed-h { max-inline-size:24ch; margin-block-start:1.6rem; font-size:clamp(2.3rem,1.3rem + 2.6vw,3.7rem); line-height:1.22; font-weight:700; letter-spacing:-.01em; text-wrap:balance; }
html[lang="ar"] .ed-h, html[lang="ar"] .ed-svc-title, html[lang="ar"] .ed-commit h3, html[lang="ar"] .ed-projects .rcard-title { font-family:'HT Moshreq',var(--font-ar); letter-spacing:0; }
html[lang="ar"] .ed-h { line-height:1.35; }
.ed-lead, .ed-body { max-inline-size:36em; margin-block-start:1.5rem; color:#2c3341; font-size:1.04rem; line-height:1.95; }
.ed-heading-center { text-align:center; }
.ed-heading-center .slabel { justify-content:center; }
.ed-heading-center .ed-h, .ed-heading-center .ed-lead { margin-inline:auto; }
.ed-cta { margin-block-start:0; }
.ed-arrow { color:var(--ed-ochre,#d3842a); display:inline-block; font-size:1.3rem; line-height:1; transition:transform .3s ease; }
.ed-cta:hover .ed-arrow, .ed-cta:focus-visible .ed-arrow { transform:translateX(-4px); }
[dir="ltr"] .ed-cta:hover .ed-arrow, [dir="ltr"] .ed-cta:focus-visible .ed-arrow { transform:translateX(4px); }

/* 02: compact documentary mosaic. Photos never contribute intrinsic height to the grid. */
.ed-services-layout { display:grid; gap:28px; }
.ed-services .ed-h { max-inline-size:15ch; font-size:clamp(2.3rem,1.4rem + 2.1vw,3.2rem); }
.ed-services .ed-lead { max-inline-size:34em; font-size:1rem; line-height:1.9; }
.ed-mosaic { display:grid; gap:16px; min-inline-size:0; }
.ed-svc-tile { position:relative; display:flex; flex-direction:column; min-inline-size:0; min-block-size:0; overflow:hidden; background:#121a27; color:#f4f0e7; text-decoration:none; }
.ed-svc-photo { display:block; position:relative; flex:none; block-size:140px; min-block-size:0; overflow:hidden; background:#121a27; }
.ed-svc-photo::after { content:""; position:absolute; inset:0; background:rgba(18,26,39,.12); pointer-events:none; }
.ed-svc-photo img { position:absolute; inset:0; inline-size:100%; block-size:100%; max-inline-size:none; object-fit:cover; filter:saturate(.84) contrast(1.03) sepia(.07); transition:transform 600ms ease; }
.ed-svc-tile:hover img, .ed-svc-tile:focus-visible img { transform:scale(1.03); }
.ed-svc-panel { display:grid; grid-template-columns:28px minmax(0,1fr); gap:12px; align-content:start; align-items:start; padding:20px; }
.ed-svc-icon { inline-size:28px; block-size:28px; margin-block-start:3px; fill:#d3842a; }
.ed-svc-title { font-size:1.34rem; line-height:1.4; font-weight:600; text-decoration:underline; text-decoration-color:transparent; text-underline-offset:.22em; text-decoration-thickness:1px; }
.ed-svc-desc { grid-column:1/-1; color:#cfc9bc; font-size:.9rem; line-height:1.8; }
.ed-svc-tile:hover .ed-svc-title, .ed-svc-tile:focus-visible .ed-svc-title { text-decoration-color:#d3842a; }
.ed-svc-all { position:relative; display:flex; align-items:center; justify-content:space-between; gap:20px; min-block-size:88px; padding:22px; overflow:hidden; background:#121a27; color:#f4f0e7; text-decoration:none; font-size:1.2rem; font-weight:600; }
.ed-svc-all > svg { position:absolute; inline-size:116px; block-size:116px; inset-inline-end:25%; inset-block-start:-18px; fill:#e8c9a2; opacity:.1; }
.ed-svc-all > span { position:relative; }
.ed-svc-all:focus-visible { outline:3px solid #121a27; outline-offset:4px; }
@media(min-width:1024px) {
  .ed-services-layout { grid-template-columns:minmax(0,.88fr) minmax(0,2.12fr); grid-template-rows:auto 1fr; grid-template-areas:"head cards" "all cards"; gap:28px 36px; align-items:start; }
  .ed-services .ed-heading { grid-area:head; }
  .ed-services .ed-h { max-inline-size:12ch; }
  .ed-services .ed-lead { max-inline-size:30ch; }
  .ed-mosaic { grid-area:cards; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:auto auto; grid-template-areas:"bldg bldg road" "fire water road"; align-self:stretch; }
  .ed-svc-all { grid-area:all; align-self:end; }
  .svc-bldg { grid-area:bldg; } .svc-road { grid-area:road; } .svc-fire { grid-area:fire; } .svc-water { grid-area:water; }
  .svc-road .ed-svc-photo { flex:1; block-size:auto; min-block-size:180px; }
  .svc-road .ed-svc-panel { grid-template-columns:1fr; }
  .svc-road .ed-svc-icon { inline-size:32px; block-size:32px; }
  .svc-fire .ed-svc-photo, .svc-water .ed-svc-photo { block-size:106px; }
  .svc-fire .ed-svc-panel, .svc-water .ed-svc-panel { padding:18px; }
  .svc-fire .ed-svc-title, .svc-water .ed-svc-title { font-size:1.2rem; }
}
@media(min-width:640px) and (max-width:1023px) {
  .ed-services .ed-h { max-inline-size:22ch; }
  .ed-svc-tile { display:grid; grid-template-columns:minmax(160px,.7fr) minmax(0,1.3fr); }
  .ed-svc-photo { block-size:auto; min-block-size:180px; }
  .ed-svc-panel { padding:26px; }
}
@media(max-width:639px) {
  .ed-services .ed-h { max-inline-size:16ch; }
  .ed-svc-photo { block-size:126px; }
  .ed-svc-all { min-block-size:72px; }
}

/* 03: photo prints and a shared drawing-board baseline. Rail mechanics stay in main.js. */
.ed-projects-head { display:flex; justify-content:space-between; align-items:end; gap:2rem; margin-block-end:2.2rem; }
.ed-projects .ed-lead { max-inline-size:42em; }
.ed-projects .rail-controls { flex:none; }
.ed-projects .rail-count { font-family:var(--font); font-variant-numeric:tabular-nums; color:#6f6a60; }
.ed-projects .rail-count b { color:#121a27; }
.ed-projects .rail-btn { border:1px solid rgba(18,26,39,.5); border-radius:0; background:transparent; color:#d3842a; }
.ed-projects .rail-btn:hover, .ed-projects .rail-btn:focus-visible { border-color:#d3842a; background:transparent; }
.ed-projects .rail { gap:20px; padding-block-end:2rem; }
.ed-projects .rcard { flex-basis:clamp(15.5rem,76vw,17.5rem); }
.ed-projects .rcard::before { inset-block-start:auto; inset-block-end:10px; block-size:1px; background:rgba(18,26,39,.25); }
.ed-projects .rcard-node { order:2; align-self:center; inline-size:1px; block-size:10px; margin:0; border:0; border-radius:0; background:#d3842a; box-shadow:none; }
.ed-projects .rcard-body { border:0; border-radius:0; background:transparent; overflow:visible; transition:none; }
.ed-projects .rcard:hover .rcard-body { transform:none; box-shadow:none; }
.ed-projects .rcard-head { order:0; padding:0 0 .8rem; gap:.5rem; background:transparent; border-block-start:2px solid #d3842a; }
.ed-projects .rcard-head .code-chip { padding:.45rem 0 0; background:transparent; color:#121a27; font-family:var(--font); font-size:.75rem; }
.ed-projects .rcard-head .pcard-site { padding-block-start:.45rem; color:#6f6a60; }
.ed-projects .rcard-media { order:1; aspect-ratio:4/3; max-block-size:208px; background:#dcd5c9; }
.ed-projects .rcard-media.u-photo::after { display:none; }
.ed-projects .rcard-media img { filter:saturate(.84) contrast(1.03) sepia(.07); }
.ed-projects .rcard-media.code-tile { background:#121a27; }
.ed-projects .rcard-text { order:2; padding:1rem 0 1.5rem; background:transparent; gap:.6rem; }
.ed-projects .rcard-title { font-size:1.35rem; line-height:1.4; font-weight:600; color:#121a27; }
.ed-projects .rcard .meta dt, .ed-projects .rcard .meta dd { color:#6f6a60; font-weight:500; }
.ed-projects .rcard .meta dd { color:#2c3341; }
.ed-projects-foot { margin-block-start:1.5rem; }

/* 04: one open logo wall, divided only by hairlines. */
.ed-partners .ed-heading { margin-block-end:3rem; }
.ed-partners .clients-wall { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:0; max-inline-size:none; border-block-start:1px solid rgba(18,26,39,.1); border-inline-start:1px solid rgba(18,26,39,.1); }
.ed-partners .wall-cell { inline-size:auto; block-size:clamp(90px,9vw,125px); padding:1rem; background:transparent; border:0; border-inline-end:1px solid rgba(18,26,39,.1); border-block-end:1px solid rgba(18,26,39,.1); }
.ed-partners .wall-logo { filter:grayscale(1); opacity:.7; }
.ed-partners .wall-logo[src*="/eni."] { filter:grayscale(1) brightness(.5); }
.ed-partners .wall-cell:hover .wall-logo { filter:none; opacity:1; }
.ed-partners .wall-name { color:#2c3341; }

/* 05: a shallow machinery film strip with native profile photographs. */
.ed-fleet { padding-block:36px 32px; background:#f4f0e7; }
.fleet-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-block-end:22px; }
.fleet-label { display:flex; align-items:center; gap:24px; }
.fleet-label .slabel-t { display:none; }
.fleet-label h2 { font:600 1.35rem/1.4 var(--font); margin:0; }
.fleet-label h2:lang(ar) { font-family:'HT Moshreq',var(--font-ar); font-size:1.65rem; }
.fleet-controls { display:flex; align-items:center; gap:4px; }
.fleet-controls button { display:grid; place-items:center; inline-size:36px; block-size:36px; padding:0; border:0; background:transparent; color:#121a27; cursor:pointer; font:500 1.1rem/1 var(--font); }
.fleet-controls button:hover { background:#e8c9a2; }
.fleet-controls button:focus-visible, .fleet-window:focus-visible { outline:2px solid #121a27; outline-offset:3px; }
.fleet-window { overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; padding-block:8px; }
.fleet-track { display:flex; inline-size:max-content; }
.fleet-group { display:flex; flex:none; align-items:end; gap:18px; padding-inline-end:18px; }
.fleet-group:lang(ar) { flex-direction:row-reverse; }
.fleet-frame { flex:none; inline-size:var(--frame-width); margin:0; }
.fleet-image { block-size:214px; background:#ebe5d9; overflow:hidden; }
.fleet-frame:nth-child(3n + 2) .fleet-image { block-size:192px; }
.fleet-image img { inline-size:100%; block-size:100%; object-fit:cover; filter:saturate(.84) contrast(1.03) sepia(.07); pointer-events:none; }
.fleet-frame figcaption { display:flex; align-items:baseline; gap:12px; padding-block-start:10px; font:400 .8rem/1.7 var(--font); color:#2c3341; white-space:nowrap; }
.fleet-frame figcaption:lang(ar) { font-family:var(--font-ar); }
.fleet-frame figcaption > span { font:500 .62rem/1 var(--font); color:#6f6a60; }
.fleet-baseline { position:relative; block-size:1px; background:rgba(18,26,39,.25); margin-block-start:20px; }
.fleet-baseline::before, .fleet-baseline::after { content:""; position:absolute; inset-block-start:-3px; inline-size:1px; block-size:7px; background:#d3842a; }
.fleet-baseline::before { inset-inline-start:0; } .fleet-baseline::after { inset-inline-end:0; }
.fleet-ready .fleet-window { overflow:hidden; touch-action:pan-y pinch-zoom; cursor:grab; }
.fleet-ready .fleet-track { will-change:transform; }
.fleet-dragging .fleet-window { cursor:grabbing; user-select:none; }
@media(max-width:767px) {
  .ed-section.ed-fleet { padding-block:28px; }
  .fleet-label { gap:12px; } .fleet-label .slabel-rule { display:none; }
  .fleet-label h2 { font-size:1.1rem; } .fleet-label h2:lang(ar) { font-size:1.4rem; }
  .fleet-controls { gap:0; } .fleet-controls button { inline-size:32px; }
  .fleet-group { gap:12px; padding-inline-end:12px; }
  .fleet-frame { inline-size:calc(var(--frame-width) * .85); }
  .fleet-image { block-size:184px; } .fleet-frame:nth-child(3n + 2) .fleet-image { block-size:166px; }
}
@media(prefers-reduced-motion:reduce) { .fleet-toggle { display:none !important; } .fleet-ready .fleet-track { will-change:auto; } }

/* 06: three commitments read as one list across the spread. */
.ed-hse .ed-heading { margin-block-end:2.5rem; }
.ed-commit-list { display:grid; }
.ed-commit { padding:1.5rem 1.5rem 2rem; border-block-start:1px solid rgba(18,26,39,.2); }
.ed-commit:first-child { padding-inline-start:0; }
.ed-commit-n { display:block; text-align:match-parent; color:#b06d24; font-size:clamp(3.7rem,2rem + 5vw,6rem); line-height:1; font-weight:700; font-variant-numeric:tabular-nums; }
html[lang="ar"] .ed-commit-n { font-family:'HT Moshreq',var(--font-ar); }
.ed-commit h3 { margin-block-start:1.4rem; font-size:clamp(1.3rem,1.1rem + .7vw,1.65rem); line-height:1.45; font-weight:600; }
.ed-commit p { margin-block-start:.8rem; max-inline-size:38ch; color:#2c3341; font-size:.98rem; line-height:1.9; }
.ed-hse-link { margin-block-start:2.2rem; }
@media (min-width:1024px) { .ed-commit-list { grid-template-columns:repeat(3,minmax(0,1fr)); } .ed-commit { border-block-start:0; border-inline-start:1px solid rgba(18,26,39,.2); } .ed-commit:first-child { border-inline-start:0; } }

/* The shared invitation uses page paper on every page. */
.cta-band.theme-inverse { --ed-ochre:#d3842a; position:relative; overflow:hidden; padding-block:clamp(72px,9vw,120px); border:0; background:#f4f0e7; color:#121a27; }
.cta-band .cta-inner { position:relative; z-index:1; gap:1rem; padding-block-end:2.3rem; border-block-end:1px solid rgba(18,26,39,.28); }
.cta-band .cta-inner::after { content:""; position:absolute; inset-inline-start:var(--gutter); inset-block-end:-4px; inline-size:1px; block-size:9px; background:#d3842a; }
.cta-band .cta-orn { inline-size:36px; block-size:36px; margin-block-end:.8rem; fill:#d3842a; }
.cta-band .cta-h { max-inline-size:20ch; font-size:clamp(2.3rem,1.3rem + 2.6vw,3.7rem); line-height:1.3; letter-spacing:-.01em; }
html[lang="ar"] .cta-band .cta-h { font-family:'HT Moshreq',var(--font-ar); letter-spacing:0; line-height:1.35; }
.cta-band .cta-lead { max-inline-size:40em; color:#2c3341; font-size:1.04rem; line-height:1.95; }
.cta-band .cta-actions { margin-block-start:1rem; }
.cta-band .cta-actions .btn-primary { background:#feb531; color:#121a27; }
.cta-band .cta-actions .btn-primary:hover { background:#f3a51d; }
.cta-band .cta-phone { color:#121a27; }
.cta-band .cta-phone .icon { color:#d3842a; }
.cta-band .cta-phone:hover { color:#895116; }

/* Footer: ink ground, open columns and quieter rules. */
.site-footer.theme-inverse { --surface:#121a27; --text-muted:#cfc9bc; --hairline:rgba(235,229,217,.25); background:#121a27; color:#f3eee5; border-block-start:0; padding-block-start:clamp(64px,7vw,100px); }
.site-footer .footer-grid { gap:clamp(2rem,4vw,4rem); }
.site-footer .footer-brand p { color:#cfc9bc; }
html[lang="ar"] .site-footer .footer-brand p { font-family:'HT Moshreq',var(--font-ar); font-size:1.05rem; line-height:1.65; }
.site-footer .footer-h { color:#f3eee5; border-block-start:1px solid rgba(235,229,217,.25); padding-block-start:1rem; margin-block-end:1rem; }
.site-footer .footer-h::before { inline-size:22px; block-size:1.5px; background:#d3842a; }
.site-footer a { color:#e4dfd4; }
.site-footer a:hover, .site-footer a:focus-visible { color:#e8c9a2; text-decoration-color:#d3842a; }
.site-footer .footer-contact .icon { color:#d3842a; }
.site-footer .footer-bottom::before { background:rgba(235,229,217,.25); }
.site-footer .footer-bottom { color:#cfc9bc; }

@media (max-width:1023px) {
  .ed-projects-head { display:block; }
  .ed-projects .rail-controls { margin-block-start:1.5rem; }
  .ed-partners .clients-wall { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:767px) {
  .ed-section { padding-block:64px 80px; }
  .ed-h { font-size:clamp(2.3rem,8vw,3rem); }
  .ed-projects .rail { gap:16px; }
  .ed-partners .clients-wall { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ed-partners .wall-cell { block-size:92px; }
  .ed-commit { padding-inline:0; }
}
@media (prefers-reduced-motion:reduce) {
  .ed-svc-photo img, .ed-svc-title, .ed-arrow { transition:none; }
}

/* Client background revision: one ivory page with thin architectural motif strips. */
.is-home .ed-section { background:#f4f0e7; }
.is-home .ed-page::before { opacity:.07; }
.ed-divider { display:flex; align-items:center; justify-content:center; block-size:30px; overflow:hidden; background:#ebe5d9; border-block:1px solid rgba(18,26,39,.08); pointer-events:none; }
.ed-divider-track { display:flex; flex:none; align-items:center; justify-content:space-around; gap:30px; min-inline-size:100%; padding-inline:15px; }
.ed-divider svg { flex:none; inline-size:14px; block-size:14px; fill:#d3842a; opacity:.55; }
.ed-divider svg:nth-child(3n) { fill:#121a27; opacity:.25; }
@media(max-width:767px) {
  .ed-divider { block-size:26px; }
  .ed-divider-track { gap:24px; }
  .ed-divider svg { inline-size:12px; block-size:12px; }
}

/* Inner pages: editorial spreads on the Bawader poster, paper, tint and ink grounds. */
.page-hero {
  --ink:#121a27; --page:#f4f0e7; position:relative; isolation:isolate; overflow:hidden;
  min-block-size:clamp(520px, 66svh, 760px); display:grid; align-items:center; padding-block:clamp(42px,6vw,82px) clamp(54px,7vw,88px);
  color:var(--ink); background:#ebe5d9;
}
.page-hero::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.16; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .27 0 0 0 0 .22 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
}
.page-hero-in { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(250px,.72fr); align-items:center; gap:clamp(2rem,6vw,6rem); position:relative; z-index:2; }
.page-hero-copy { max-inline-size:650px; }
.page-hero .breadcrumb ol { color:#2c3341; gap:.55rem; }
.page-hero .breadcrumb li + li::before { color:#d3842a; }
.page-hero .breadcrumb a { color:#4f4c46; }
.page-hero .breadcrumb a:hover { color:#121a27; }
.page-title { margin-block:1.4rem 1rem; max-inline-size:13ch; font-size:clamp(2.8rem,1.6rem + 4vw,5.2rem); line-height:1.18; font-weight:700; letter-spacing:-.01em; text-wrap:balance; }
html[lang="ar"] .page-title { font-family:'HT Moshreq',var(--font-ar); line-height:1.28; letter-spacing:0; }
.page-lead { max-inline-size:36em; color:#2c3341; font-size:clamp(1rem,.94rem + .35vw,1.16rem); line-height:1.9; }
.page-hero-print { position:relative; justify-self:center; inline-size:min(100%,310px); margin:0; padding:10px 10px 38px; background:#f8f5ee; z-index:1; }
.page-hero-print img { display:block; inline-size:100%; max-block-size:330px; object-fit:cover; filter:saturate(.84) contrast(1.03) sepia(.07); }
.page-hero-print picture { display:contents; }
.page-hero-print figcaption { position:absolute; inset-inline-start:12px; inset-block-end:12px; color:#6f6a60; font:500 .64rem/1 var(--font); letter-spacing:.08em; }
.page-hero-mark { position:absolute; z-index:2; pointer-events:none; inline-size:clamp(74px,9vw,120px); aspect-ratio:1; inset-inline-start:-42px; inset-block-start:-30px; fill:#d3842a; }
.page-hero-mark svg { inline-size:100%; block-size:100%; }
.page-hero-dust { position:absolute; inset-inline-end:-20px; inset-block-end:36px; inline-size:54px; block-size:40px; }
.page-hero-dust i { position:absolute; inline-size:8px; block-size:8px; background:#e8c9a2; }
.page-hero-dust i:nth-child(1){inset-inline-start:0;inset-block-start:0}.page-hero-dust i:nth-child(2){inset-inline-start:14px;inset-block-start:14px;background:#d3842a}.page-hero-dust i:nth-child(3){inset-inline-start:28px;inset-block-start:0}.page-hero-dust i:nth-child(4){inset-inline-start:42px;inset-block-start:14px}
.page-hero-island { position:absolute; inset-inline-end:-22px; inset-block-start:8px; inline-size:clamp(160px,22vw,300px); fill:#d3842a; opacity:.56; z-index:2; pointer-events:none; }
.page-hero-ground { position:absolute; inset-inline:0; inset-block-end:0; block-size:1px; background:rgba(18,26,39,.45); }
.page-hero-ground::before,.page-hero-ground::after { content:""; position:absolute; inset-block-start:-4px; inline-size:1px; block-size:9px; background:#d3842a; }
.page-hero-ground::before { inset-inline-start:var(--gutter); }.page-hero-ground::after { inset-inline-end:var(--gutter); }
.page-hero-compact { min-block-size:46svh; }
.page-hero-compact .page-hero-print img { max-block-size:250px; }

/* CTA frieze: fixed 220px row pitch, two equal 880px repeats, both moving upward. */
.cta-band.theme-inverse { isolation:isolate; --focus:#121a27; }
.cta-frieze { position:absolute; z-index:0; inset:0; overflow:hidden; pointer-events:none; color:#d3842a; opacity:.055; }
.cta-frieze-track { position:absolute; inset-block-start:-110px; inset-inline:0; block-size:1760px; animation:cta-frieze-rise 84s linear infinite; }
.cta-frieze-repeat { block-size:880px; }
.cta-frieze-row { display:grid; grid-auto-flow:column; grid-auto-columns:220px; align-items:center; justify-content:center; block-size:220px; }
.cta-frieze-row:nth-child(even) { transform:translateX(100px); }
.cta-frieze-row svg { inline-size:180px; block-size:180px; fill:currentColor; }
.cta-frieze-b { opacity:.025; transform:translateX(90px); }
.cta-frieze-b .cta-frieze-track { inset-block-start:-210px; animation-duration:67s; }
@keyframes cta-frieze-rise { to { transform:translateY(-50%); } }
@media (prefers-reduced-motion:reduce) { .cta-frieze-track { animation:none; } }
.cta-band .cta-inner { z-index:2; }

/* Inner editorial page rhythms and print treatments. */
.about-grid { align-items:start; }
.section { background:#f4f0e7; }
.section.section-tint { background:#eef2f6; }
.about-content { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.6rem,3vw,3.5rem); }
.about-content > [data-reveal]:first-child { grid-column:1/-1; }
.about-content .num-section { border-block-start:1px solid rgba(18,26,39,.2); padding-block-start:1.2rem; }

.plaque { border:1px solid rgba(235,229,217,.3); background:#121a27; box-shadow:none; }
.plaque-h,.plaque-name,.plaque-meta { border-color:rgba(235,229,217,.25); }
.vm-grid { gap:0; }
.vm-card { position:relative; overflow:hidden; border:0; border-block-start:1px solid rgba(18,26,39,.18); border-radius:0; background:transparent; padding:clamp(1.5rem,3vw,3rem); }
.vm-card + .vm-card { border-inline-start:1px solid rgba(18,26,39,.18); }
.vm-card .commit-idx { position:absolute; inset-inline-end:1.3rem; inset-block-start:.6rem; font-family:'HT Moshreq',var(--font-ar); font-size:clamp(5rem,10vw,9rem); color:#e8c9a2; opacity:.75; }
.vm-card h3,.vm-card p { position:relative; }
.goals { counter-reset:goal; list-style:none; grid-template-columns:1fr; }
.goals li { counter-increment:goal; position:relative; padding-inline-start:3.4rem; min-block-size:72px; align-items:center; border-color:rgba(18,26,39,.18); }
.goals li::before { content:"0" counter(goal); position:absolute; inset-inline-start:0; color:#d3842a; font:700 1.7rem/1 'HT Moshreq',var(--font-ar); }
.goals .icon { display:none; }

.subnav { background:#f4f0e7; border-color:rgba(18,26,39,.2); }
.subnav a { position:relative; border-radius:0; background:none; }
.subnav a::after { content:""; position:absolute; inset-inline:14px; inset-block-end:5px; block-size:2px; background:#d3842a; transform:scaleX(0); transition:transform .2s ease; }
.subnav a:hover,.subnav a:focus-visible { background:transparent; color:#121a27; }.subnav a:hover::after,.subnav a:focus-visible::after { transform:scaleX(1); }
.service-block { background:#f4f0e7; border-block-start:1px solid rgba(18,26,39,.12); }
.service-block:nth-of-type(even) { background:#eef2f6; }
.service-title { display:flex; align-items:center; gap:1rem; }
.service-title svg { flex:none; inline-size:38px; block-size:38px; fill:#d3842a; }
.checks li { border-block-end:1px solid rgba(18,26,39,.14); padding-block:.7rem; gap:.8rem; }
.checks .icon { display:none; }
.list-square { flex:none; inline-size:7px; block-size:7px; margin-block-start:.65em; background:#d3842a; }
.service-media .u-photo::after { display:none; }
.service-media .u-photo img,.prow-prints img { filter:saturate(.84) contrast(1.03) sepia(.07); }
.service-media .icon-panel { border-radius:0; background:#121a27; color:#e8c9a2; }
.trading-pattern { position:relative; overflow:hidden; }
.trading-pattern svg { inline-size:clamp(110px,14vw,190px); block-size:auto; fill:#e8c9a2; opacity:.8; }
.nf .btn-secondary { min-inline-size:180px; justify-content:center; color:#121a27; border:1px solid rgba(18,26,39,.55); background:transparent; }
.nf .btn-secondary:hover,.nf .btn-secondary:focus-visible { color:#121a27; border-color:#d3842a; background:rgba(211,132,42,.08); }
.prow-list { border-block-start:1px solid rgba(18,26,39,.2); }
.prow { background:transparent; border:0; border-block-end:1px solid rgba(18,26,39,.2); border-radius:0; margin:0; }
.prow-id { background:transparent; border:0; border-block-end:1px solid rgba(18,26,39,.15); padding-inline:0; }
.prow-id .code-chip { background:transparent; color:#121a27; border-inline-start:2px solid #d3842a; }
.prow-id .pcard-site { color:#6f6a60; }
.prow-main { padding-inline:0; }.prow-prints { padding-inline:0; }
.plate-inline { border-radius:0; background:transparent; border:0; border-block:1px solid rgba(18,26,39,.2); }
.plate-inline .plate-cell { border-color:rgba(18,26,39,.18); }
.plate-inline .plate-v:lang(ar) { font-family:'HT Moshreq',var(--font-ar); }
.clients-wall { border:0; gap:0; }
.wall-cell { border:0; border-inline-end:1px solid rgba(18,26,39,.1); border-block-end:1px solid rgba(18,26,39,.1); border-radius:0; background:transparent; }
.wall-logo { filter:grayscale(1); opacity:.7; transition:filter .3s,opacity .3s; }
.wall-cell:hover .wall-logo { filter:none; opacity:1; }
.ed-tint .clients-wall { --n-200:rgba(18,26,39,.1); }
.ed-fleet-board { border-radius:0; box-shadow:none; background:transparent; }
.ed-fleet-print { background:#f8f5ee; }
.ed-fleet-tags li { border-radius:0; background:transparent; border:1px solid rgba(18,26,39,.3); }
.commit-list-light .commit { border-color:rgba(18,26,39,.18); }
.commit-list-light .commit-idx { font-family:'HT Moshreq',var(--font-ar); color:#b06d24; font-size:clamp(3.8rem,7vw,6rem); }

.commit-list-light .checks { border-block-start:1px solid rgba(18,26,39,.15); padding-block-start:.6rem; }
.prose-long { max-inline-size:60ch; border-inline-start:2px solid #d3842a; padding-inline-start:1.2rem; }
.icon-panel-quote { position:relative; overflow:hidden; border-radius:0; background:#121a27; }
.hse-quote-mark { position:absolute; inline-size:clamp(90px,13vw,170px); inset-inline-end:1rem; inset-block-start:1rem; fill:#e8c9a2; opacity:.14; }
.icon-panel-quote blockquote { position:relative; z-index:1; color:#f3eee5; }
.contact-grid { align-items:start; }
.contact-cards { display:grid; gap:0; }
.ccard { border:0; border-block-end:1px solid rgba(18,26,39,.2); border-radius:0; padding:1.25rem 0; background:transparent; }
.ccard:first-child { border-block-start:1px solid rgba(18,26,39,.2); }
.ccard-icon { display:inline-grid; place-items:center; inline-size:28px; block-size:28px; border:0; border-radius:0; color:#d3842a; background:transparent; }
.ccard-icon svg { inline-size:24px; block-size:24px; fill:currentColor; }
.form-card { border:1px solid rgba(18,26,39,.18); border-radius:0; background:#f4f0e7; box-shadow:none; }
.field input,.field select,.field textarea { border-radius:0; border-color:rgba(18,26,39,.3); background:transparent; }
.field input:focus,.field select:focus,.field textarea:focus { outline:2px solid #d3842a; border-color:#d3842a; padding:10px 14px; }

/* Independent bilingual 404 poster. */
.page-404 { min-block-size:100svh; display:grid; place-items:center; position:relative; overflow:hidden; padding:clamp(2rem,7vw,6rem); color:#121a27; background:#ebe5d9; }
.page-404::before { content:""; position:absolute; inset-inline:0; inset-block-end:0; block-size:1px; background:rgba(18,26,39,.4); }
.nf { inline-size:min(100%,1100px); position:relative; z-index:1; }
.nf > img { inline-size:96px; block-size:auto; margin-block-end:2rem; }
.nf-cols { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2rem,7vw,7rem); }
.nf-cols section { border-block-start:1px solid rgba(18,26,39,.25); padding-block-start:1.3rem; }
.nf .h2 { font-family:'HT Moshreq',var(--font-ar); font-size:clamp(2.8rem,1.6rem + 4vw,5.2rem); line-height:1.25; }
.nf .h2::after { content:""; display:block; inline-size:clamp(70px,10vw,150px); block-size:2px; margin-block:1rem; background:#d3842a; }
.nf p { max-inline-size:36em; line-height:1.9; margin-block-end:1.5rem; }
.nf .btn { border-radius:0; }
.nf-cols section[lang="en"] .h2 { font-family:var(--font); }
.nf-island { position:absolute; inset-inline-end:0; inset-block-start:2rem; inline-size:clamp(130px,20vw,250px); fill:#d3842a; opacity:.55; }

@media (max-width:1023px) {
 .page-hero { min-block-size:auto; padding-block:3rem 4rem; }
 .page-hero-in { grid-template-columns:minmax(0,1fr) minmax(210px,.66fr); gap:2rem; }
 .page-hero-print { inline-size:min(100%,280px); }
 .page-hero-print img { max-block-size:280px; }
 .page-hero-island { inline-size:155px; opacity:.4; }
 .about-content { grid-template-columns:1fr; }
 .about-content > [data-reveal]:first-child { grid-column:auto; }
}
@media (max-width:767px) {
 .page-hero { padding-block:2rem 3.6rem; }
 .page-hero-in { grid-template-columns:1fr; gap:1.5rem; }
 .page-hero-copy { order:0; }
 .page-hero-print { order:1; justify-self:start; inline-size:min(68vw,255px); margin-inline-start:1rem; }
 .page-hero-print img { max-block-size:245px; }
 .page-hero-island { inline-size:120px; opacity:.3; }
 .page-hero-mark { inset-inline-start:-18px; }
 .page-hero-compact { min-block-size:auto; }
 .vm-card + .vm-card { border-inline-start:0; }
 .nf-cols { grid-template-columns:1fr; gap:2rem; }
 .nf-island { inline-size:115px; opacity:.3; }
}

/* Final shared editorial type, print and accessibility treatments. */
.meta .project-org { display:flex; align-items:center; min-block-size:42px; margin-block-start:4px; }
.project-org-logo { display:block; inline-size:auto; block-size:auto; max-inline-size:116px; max-block-size:36px; object-fit:contain; object-position:center; filter:grayscale(1); }
.project-org-logo[src$="eni.svg"] { filter:grayscale(1) brightness(.45); }
.project-org-name { font-size:.85rem; }
.rcard .meta { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:12px; }
.rcard .meta > div:last-child { grid-column:1/-1; }
.rcard .project-org-logo { max-inline-size:100%; max-block-size:30px; }
.rcard .project-org { min-block-size:36px; }
.section, .service-block { color:#121a27; padding-block:clamp(64px,7vw,104px) clamp(80px,9vw,128px); }
.section .h2, .service-block .h2 { font-size:clamp(2.3rem,1.3rem + 2.6vw,3.7rem); font-weight:700; line-height:1.22; }
.section .h2-sm { font-size:clamp(1.75rem,1.4rem + 1vw,2.3rem); }
body:not(.is-home) main :is(h1,h2,h3):lang(ar) { font-family:'HT Moshreq',var(--font-ar); letter-spacing:0; line-height:1.35; }
body:not(.is-home) main :is(h1,h2,h3):lang(en) { font-family:var(--font); }
.section .prose, .service-block .prose { max-inline-size:36em; color:#2c3341; font-size:1.04rem; line-height:1.95; }
.section .slabel-rule, .service-block .slabel-rule { inline-size:40px; block-size:1.5px; background:#d3842a; }
.section .slabel-t, .service-block .slabel-t { color:#121a27; }
.section .prose-long { max-inline-size:60ch; }
.ph-horizon { position:absolute; inset-inline:0; inset-block-end:0; inline-size:100%; block-size:150px; fill:#121a27; opacity:.065; pointer-events:none; }
.plaque { border-radius:0; }
.plaque-name + .plaque-name, .plaque-meta { border-block-start:1px solid rgba(235,229,217,.25); padding-block-start:.8rem; }
.vm-card .prose { border-inline-start:2px solid #d3842a; padding-inline-start:1rem; }
.vm-card .commit-idx { position:static; font-size:5rem; line-height:1; }
.vm-card .commit-idx:lang(en), .commit-list-light .commit-idx:lang(en) { font-family:var(--font); }
.goals li::before { color:#6f6a60; }
.subnav a[aria-current="location"] { color:#121a27; }
.subnav a[aria-current="location"]::after { transform:scaleX(1); }
.service-block:nth-of-type(even) { background:#f4f0e7; }
.service-block.flip { background:#eef2f6; }
.service-media .collage-row { gap:18px; align-items:end; padding-block-end:12px; border-block-end:1px solid rgba(18,26,39,.3); }
.service-media .ctile:nth-child(even) .u-photo { aspect-ratio:4/5; }
.service-media .ctile figcaption { position:static; color:#6f6a60; padding:.6rem 0 0; min-block-size:2.2rem; font-weight:500; }
.service-block .code-chip { color:#121a27; background:transparent; border:1px solid rgba(18,26,39,.45); border-radius:0; font-family:var(--font); }
.service-block .code-chip:hover { border-color:#d3842a; }
.section .clients-wall { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); max-inline-size:none; border-block-start:1px solid rgba(18,26,39,.1); border-inline-start:1px solid rgba(18,26,39,.1); }
.section .wall-cell { inline-size:auto; block-size:clamp(90px,9vw,125px); padding:1rem; }
.section .plate-v { color:#121a27; }
.section .plate-l { color:#6f6a60; }
.page-404.theme-inverse { --focus:#121a27; }
.field input, .field select, .field textarea { border-color:rgba(18,26,39,.5); }
.field input:focus, .field select:focus, .field textarea:focus { outline-color:#121a27; }
.field-hint { opacity:1; transform:none; min-block-size:0; }
@media(min-width:1024px) { .commit-list-light { column-gap:0; } .commit-list-light .commit { padding-inline:1.5rem; } .commit-list-light .commit + .commit { border-inline-start:1px solid rgba(18,26,39,.18); } }
@media(max-width:1023px) { .section .clients-wall { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:1023px) { .section .clients-wall > li:last-child:nth-child(3n+1) { grid-column:1/-1; } }
@media(max-width:767px) { .ph-horizon { display:none; } .section .clients-wall { grid-template-columns:repeat(3,minmax(0,1fr)); } .service-title { align-items:baseline; } }