/* Hallmark · Technology Experts Group — shared styles
 * Pre-emit critique: P5 H5 E4 S5 R4 V4 */

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

/* ---- Print / PDF export ---- */
@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero, .field-hero { padding-block: var(--space-lg) !important; min-height: 0 !important; }
  .hero-grid, .field-hero-grid { align-items: start !important; }
  .fab, .skip-link { display: none !important; }
  .logo-track { animation: none !important; }
  .orbit-rings, .orbit-core, .orbit, .droplet, .field-orbit { animation: none !important; }
  .site-header { position: static !important; }
  .hero-photo img, .case-media img, img { opacity: 1 !important; }
  section, .card, .svc-row, .case-card, .grp-pillar, .office-card { break-inside: avoid; }
  a { text-decoration: none; color: inherit; }
}
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 100px; }
@media (max-width: 600px) { html { scroll-padding-top: 86px; } body .mobile-menu { inset: 76px 0 0; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-paper);
  color: var(--color-ink);
  font-size: var(--text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--dur-mid) var(--ease-out), color var(--dur-mid) var(--ease-out);
}
:root { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

/* smooth cross-page crossfade (View Transitions API, progressive) */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
[dir="rtl"] body { font-family: var(--font-ar); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: normal;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}
[dir="rtl"] h1, [dir="rtl"] h2 {
  font-family: var(--font-ar-display); letter-spacing: 0; line-height: 1.15;
}
[dir="rtl"] h3, [dir="rtl"] h4 {
  font-family: var(--font-ar); letter-spacing: 0;
}
/* component sub-headings keep the body Arabic face whatever their outline level */
[dir="rtl"] :is(.card, .svc-row, .sector-label, .cred-row, .tl-item,
  .case-body, .step, .daughter, .cs, .norm-step, .fb-body, .value-card, .office-card)
  :is(h2, h3, h4) {
  font-family: var(--font-ar); letter-spacing: 0; line-height: 1.25;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }

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

/* skip to content */
.skip-link { position: fixed; top: 10px; inset-inline-start: 10px; z-index: 200; background: var(--brand-blue); color: #fff; padding: 0.7em 1.1em; border-radius: var(--radius-sm); font-weight: 600; font-size: var(--text-sm); transform: translateY(-150%); transition: transform var(--dur-fast) var(--ease-out); }
.skip-link:focus { transform: none; }

/* floating action buttons */
.fab-stack { position: fixed; inset-inline-end: clamp(0.9rem, 2.5vw, 1.6rem); bottom: clamp(0.9rem, 2.5vw, 1.6rem); z-index: 90; display: flex; flex-direction: column; gap: var(--space-sm); }
.fab { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; border: 0; box-shadow: var(--shadow-md); cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.fab svg { width: 26px; height: 26px; }
.fab:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.fab-top { background: var(--color-paper); color: var(--color-accent); border: var(--rule) solid var(--color-line-strong); }
.fab-top[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .fab, .skip-link { transition: none; } }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 3rem); }
.section { padding-block: clamp(4rem, 8.5vw, 10rem); }
.section-sm { padding-block: clamp(2.75rem, 5.5vw, var(--space-3xl)); }
.center { text-align: center; }

/* eyebrow / kicker (mono, technical) */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
  display: inline-flex; align-items: center; gap: 0.6em;
  margin: 0 0 var(--space-md);
}
/* Arabic needs more size than Latin at the same optical weight, and it is a
   joined script: tracking pulls the letters apart at the joins instead of
   opening them up the way it does in Latin. 12px + 0.06em was doing both
   wrong at once. */
[dir="rtl"] .eyebrow { font-family: var(--font-ar); font-size: 0.875rem; letter-spacing: 0; }
.eyebrow::before { content: ""; width: 1.8em; height: 2px; background: var(--color-accent, var(--brand-blue)); }

.section-title { font-size: var(--text-3xl); max-width: 26ch; }  /* a wider measure: fewer heading lines (Readex, 2026-10-19) */
/* headings break into balanced lines, so none ends on a single stranded word */
h1, h2, h3, .section-title { text-wrap: balance; }
p { text-wrap: pretty; }
.section-lede { font-size: var(--text-lg); line-height: 1.7; color: var(--color-ink-soft); max-width: 56ch; margin-top: var(--space-md); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  padding: 0.85em 1.5em; border-radius: var(--radius-md);
  font-weight: 600; font-size: var(--text-sm); letter-spacing: 0.01em;
  border: var(--rule) solid transparent; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.btn svg { width: 1.05em; height: 1.05em; }
.btn-primary { background: var(--brand-blue); color: var(--color-on-night); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--brand-blue-700); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-primary:active { transform: translateY(0); }
.btn-gold { background: var(--brand-gold); color: var(--color-on-gold, oklch(22% 0.03 268)); }
.btn-gold:hover { background: var(--brand-gold-deep); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--color-ink); border-color: var(--color-line-strong); }
.btn-ghost:hover { border-color: var(--color-accent); color: var(--color-accent); transform: translateY(-2px); }
.btn-onnight { background: transparent; color: var(--color-on-night); border-color: oklch(100% 0 0 / 0.28); }
.btn-onnight:hover { background: oklch(100% 0 0 / 0.1); transform: translateY(-2px); }

.arrow-link { display: inline-flex; align-items: center; min-height: 24px; gap: 0.5em; font-weight: 600; color: var(--color-accent); font-size: var(--text-sm); }
.arrow-link svg { width: 1.1em; height: 1.1em; transition: transform var(--dur-fast) var(--ease-out); }
.arrow-link:hover svg { transform: translateX(4px); }
[dir="rtl"] .arrow-link svg { transform: scaleX(-1); }
[dir="rtl"] .arrow-link:hover svg { transform: scaleX(-1) translateX(4px); }

/* ---------- Header / Nav (N1b canonical, scroll-morph) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--header-bg);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: var(--rule) solid transparent;
  transition: border-color var(--dur-mid) var(--ease-out), background var(--dur-mid) var(--ease-out);
}
.site-header.is-scrolled { border-bottom-color: var(--color-line); box-shadow: var(--shadow-sm); }
.nav { display: flex; align-items: center; gap: var(--space-lg); height: 88px; }
.nav-logo { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.nav-logo img { height: 58px; width: auto; }
.nav-logo .logo-dark { display: none; }
[data-theme="dark"] .nav-logo .logo-light { display: none; }
[data-theme="dark"] .nav-logo .logo-dark { display: block; }
@media (max-width: 600px) { .nav { height: 76px; } .nav-logo img { height: 48px; } }
.nav-links { display: flex; align-items: center; align-self: stretch; gap: clamp(0.5rem, 1.6vw, 1.4rem); margin-inline-start: clamp(1rem, 3vw, 2.5rem); }
.nav-link {
  font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-soft);
  padding: 0.5em 0.2em; position: relative; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-link::after {
  content: ""; position: absolute; inset-inline: 0.2em; bottom: 0.1em; height: 2px;
  background: var(--color-accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-out);
}
[dir="rtl"] .nav-link::after { transform-origin: right; }

/* ---------- primary-nav dropdown ----------
 * Full-bleed panel pinned under the header, in the manner of se.com.sa: the
 * sheet spans the viewport, its contents stay in the content column. Opens on
 * hover with no caret; focus-within and .is-open reach the same state so the
 * panel is not mouse-only. */
/* The item stretches to the full height of the bar so its bottom edge meets the
 * panel's top edge. Sized to the text alone it ended 26px short, and the
 * pointer crossed dead header chrome on its way down — which dropped :hover
 * and closed the panel mid-travel. */
.nav-item { position: static; display: flex; align-items: center; align-self: stretch; }
.nav-panel {
  position: absolute; inset-inline: 0; top: 100%; z-index: 90;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px);
  background: var(--color-paper); border-top: var(--rule) solid var(--color-line);
  box-shadow: var(--shadow-lg); padding: var(--space-lg) 0 var(--space-xl);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
              visibility var(--dur-fast);
}
/* hover bridge: without this strip the pointer crosses dead space between the
   word and the sheet, and the sheet closes under it */
.nav-panel::before { content: ""; position: absolute; inset-inline: 0; top: -10px; height: 10px; }
.nav-item:hover .nav-panel,
.nav-item:focus-within .nav-panel,
.nav-item.is-open .nav-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
/* Escape closes the panel while focus stays on its trigger; it reopens once focus leaves the item */
.nav-item.is-dismissed .nav-panel { opacity: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .nav-panel { transition-duration: 1ms; } }

.np-inner { max-width: 1240px; margin-inline: auto; padding-inline: clamp(1rem, 3vw, 2.5rem);
  display: grid; grid-template-columns: 1fr 300px; gap: var(--space-xl); align-items: start; }
.np-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-md); }
.nav-panel.is-wide .np-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.np-link { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.6rem 0.7rem;
  border-radius: var(--radius-md); text-decoration: none; color: inherit;
  transition: background var(--dur-fast) var(--ease-out); }
.np-link:hover { background: var(--color-paper-3); }
.np-link:focus-visible { outline: 2px solid var(--fi, var(--brand-blue)); outline-offset: -2px; }
.np-ico { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  background: color-mix(in oklab, var(--fc) 16%, var(--color-paper)); color: var(--fi); }
.np-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
.np-txt { display: block; min-width: 0; }
.np-t { display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; line-height: 1.35; }
[dir="rtl"] .np-t { font-family: var(--font-ar-display); }
.np-d { display: block; font-weight: 400; font-size: 0.78rem; color: var(--color-ink-faint);
  margin-top: 0.15em; line-height: 1.5; }
[dir="rtl"] .np-d { font-family: var(--font-ar); }

/* promo card: a fixed 280x180 plate, so nothing reflows as the image arrives */
.np-feat { display: block; text-decoration: none; color: inherit; }
.np-shot { display: block; width: 280px; max-width: 100%; aspect-ratio: 280 / 180;
  border-radius: var(--radius-md); overflow: clip; background: var(--color-paper-3); }
.np-shot img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--dur-mid) var(--ease-out); }
.np-feat:hover .np-shot img { transform: scale(1.04); }
.np-feat .k { display: block; margin-top: 0.8rem; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--fi, var(--brand-blue)); }
[dir="rtl"] .np-feat .k { font-family: var(--font-ar); letter-spacing: 0; text-transform: none; }
.np-feat .h { display: block; margin-top: 0.25em; font-family: var(--font-display); font-weight: 700;
  font-size: 1.02rem; line-height: 1.35; }
[dir="rtl"] .np-feat .h { font-family: var(--font-ar-display); }
.np-feat .m { display: block; margin-top: 0.3em; font-size: 0.8rem; color: var(--color-ink-faint); }
.np-feat:hover .h { color: var(--fi); }

@media (max-width: 1180px) {
  .np-inner { grid-template-columns: 1fr 260px; }
  .nav-panel.is-wide .np-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) { .np-inner { grid-template-columns: 1fr; } .np-feat { display: none; } }

/* ---------- mobile menu accordion ----------
 * A phone has no hover and no room for a floating panel, so the children
 * unfold in place instead. The field link still navigates; the button only opens. */
.mm-group { display: block; }
.mm-row { display: flex; align-items: center; gap: 0.5rem; }
.mm-row > a { flex: 1; }
.mm-toggle { flex: none; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
  background: none; border: var(--rule) solid var(--color-line); border-radius: 50%; color: inherit;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.mm-toggle svg { width: 16px; height: 16px; }
.mm-toggle:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.mm-group.is-open .mm-toggle { transform: rotate(180deg); border-color: var(--fc, var(--color-line-strong)); }
/* one child only: grid-template-rows 0fr->1fr sizes the first row, so the
   links live inside a single wrapper rather than being nine direct children */
.mm-sublist { display: grid; grid-template-rows: 0fr; overflow: hidden;
  transition: grid-template-rows var(--dur-mid) var(--ease-out); }
.mm-group.is-open .mm-sublist { grid-template-rows: 1fr; }
.mm-subinner { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear var(--dur-mid); }
/* collapsed links leave the tab order as well as the screen */
.mm-group.is-open .mm-subinner { visibility: visible; transition-delay: 0s; }
.mobile-menu .mm-sub { display: flex; align-items: center; gap: 0.6rem;
  padding: 0.45em 0; padding-inline-start: 1.1rem; border-bottom: 0;
  font-family: var(--font-body); font-size: var(--text-base, 1rem); font-weight: 500;
  color: var(--color-ink-soft); }
[dir="rtl"] .mobile-menu .mm-sub { font-family: var(--font-ar); }
.mobile-menu .mm-sub svg { width: 17px; height: 17px; flex: none; fill: none;
  stroke: var(--fi, currentColor); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mobile-menu .mm-sub:hover { color: var(--fi, var(--brand-blue)); }
.mobile-menu .mm-row > a { border-bottom: 0; }
.mm-group { border-bottom: var(--rule) solid var(--color-line); }
@media (prefers-reduced-motion: reduce) { .mm-sublist { transition-duration: 1ms; } }
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--color-ink); }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-actions { display: flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; margin-inline-start: auto; }

.lang-toggle {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.05em;
  background: transparent; border: var(--rule) solid var(--color-line-strong);
  border-radius: var(--radius-sm); padding: 0.5em 0.7em; color: var(--color-ink-soft);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.lang-toggle:hover { border-color: var(--color-accent); color: var(--color-accent); }
[dir="rtl"] .lang-toggle { font-family: var(--font-ar); }

.theme-toggle {
  width: 38px; height: 34px; display: grid; place-items: center;
  background: transparent; border: var(--rule) solid var(--color-line-strong);
  border-radius: var(--radius-sm); color: var(--color-ink-soft);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.theme-toggle:hover { border-color: var(--color-accent); color: var(--color-accent); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .moon { display: none; }
[data-theme="dark"] .theme-toggle .sun { display: none; }
[data-theme="dark"] .theme-toggle .moon { display: block; }

/* ---------- contour topographic motif (themeable via mask) ---------- */
.has-contour, .hero, .field-hero, .site-footer, .stats-band, .cta-band { isolation: isolate; }
.hero, .field-hero, .site-footer, .stats-band, .cta-band { position: relative; }
.stats-band, .cta-band { overflow: hidden; }
.has-contour::before, .hero::before, .field-hero::before, .site-footer::before, .stats-band::before, .cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--contour-color);
  -webkit-mask: url("../img/contour.svg") center/cover no-repeat;
          mask: url("../img/contour.svg") center/cover no-repeat;
}
/* always-dark surfaces → light contour regardless of theme */
.site-footer::before, .stats-band::before, .cta-band::before { background: oklch(72% 0.12 268 / 0.09); }

/* ---------- photo cohesion (consistent brand treatment) ---------- */
.hero-photo img, .case-media img, .photo-band img, .leader-photo img { filter: var(--img-filter); }
.hero-photo::before, .case-media::before, .photo-band::before, .leader-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--img-tint); mix-blend-mode: multiply;
}
.case-media, .photo-band, .leader-photo { position: relative; }

.nav-burger { display: none; background: transparent; border: 0; padding: 0.4rem; color: var(--color-ink); }
.nav-burger svg { width: 26px; height: 26px; }

/* mobile drawer */
.mobile-menu {
  position: fixed; inset: 88px 0 0; z-index: 55; background: var(--color-paper);
  padding: var(--space-xl) clamp(1.1rem,4vw,3rem); display: none; flex-direction: column; gap: var(--space-md);
  border-top: var(--rule) solid var(--color-line); overflow-y: auto;
}
.mobile-menu.is-open { display: flex; }
body:has(.mobile-menu.is-open) .site-header { background: var(--color-paper); }
/* scroll locks live on <html> (see main.js): body clips overflow-x, so locking body made it its own scroller */
html.menu-open, html.scroll-lock { overflow: hidden; }
.mobile-menu { overscroll-behavior: contain; }
html.menu-open :is(.v2-mbar, .fab-stack) { display: none; }
.nav-burger .i-close { display: none; }
.nav-burger[aria-expanded="true"] .i-open { display: none; }
.nav-burger[aria-expanded="true"] .i-close { display: inline; }
.mobile-menu a { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-ink); padding-block: 0.3em; border-bottom: var(--rule) solid var(--color-line); }
[dir="rtl"] .mobile-menu a { font-family: var(--font-ar); }

/* ---------- Footer (Ft5 statement) ---------- */
.site-footer { background: var(--color-night); color: var(--color-on-night); padding-block: var(--space-3xl) var(--space-xl); margin-top: var(--space-2xl); }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: var(--space-xl); align-items: start; }
.footer-logo img { height: 63px; margin-bottom: var(--space-md); }
.footer-tag { color: var(--color-on-night-soft); max-width: 36ch; font-size: var(--text-sm); }
.footer-col h4 { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-on-night); margin-bottom: var(--space-md); }
[dir="rtl"] .footer-col h4 { font-family: var(--font-ar); letter-spacing: 0.04em; }
.footer-col a, .footer-col li, .footer-col > span { display: block; color: var(--color-on-night-soft); font-size: var(--text-sm); padding-block: 0.34em; transition: color var(--dur-fast) var(--ease-out); }
.footer-col a:hover { color: var(--color-on-night); }
[dir="rtl"] .footer-col a[href^="tel"] { text-align: right; }
.footer-badges { margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: var(--rule) solid oklch(100% 0 0 / 0.12); }
.footer-badges .bl { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-on-night-soft); text-align: center; margin-bottom: var(--space-lg); }
[dir="rtl"] .footer-badges .bl { font-family: var(--font-ar); letter-spacing: 0.04em; }
.footer-badge-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-md); }
/* one identical chip for every mark — the badges keep their official colours,
   the box makes them read at the same size regardless of their proportions */
.footer-badge { width: 104px; height: 72px; background: #f6f7fa; border-radius: var(--radius-md);
  padding: 10px; display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.footer-badge img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.footer-badge:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }


.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: space-between; align-items: center; margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule) solid oklch(100% 0 0 / 0.12); color: var(--color-on-night-soft); font-size: var(--text-xs); }
.footer-social { display: flex; gap: var(--space-sm); }
.footer-social a { width: 38px; height: 38px; display: grid; place-items: center; border: var(--rule) solid oklch(100% 0 0 / 0.18); border-radius: 50%; color: var(--color-on-night-soft); transition: all var(--dur-fast) var(--ease-out); }
.footer-social a:hover { border-color: var(--brand-gold); color: var(--brand-gold); transform: translateY(-2px); }
.footer-social svg { width: 17px; height: 17px; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .arrow-link svg, .field-card { transition: none !important; }
}

/* ---------- Generic cards / grids ---------- */
.grid { display: grid; gap: var(--space-lg); }
.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
/* a single card stranded on the last row reads as a mistake — let it span instead.
   The column count changes per breakpoint, so the orphan rule is re-stated per breakpoint. */
@media (min-width: 901px) {
  .cols-3 > :last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
  .cols-4 > :last-child:nth-child(4n + 1) { grid-column: 1 / -1; }
}

.card {
  background: var(--color-paper); border: var(--rule) solid var(--color-line);
  border-radius: var(--radius-lg); padding: var(--space-lg);
  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out), border-color var(--dur-mid) var(--ease-out);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-line-strong); }
.card-icon { width: 46px; height: 46px; border-radius: var(--radius-md); display: grid; place-items: center; margin-bottom: var(--space-md); background: var(--color-accent-soft); color: var(--color-accent); }
.card-icon svg { width: 24px; height: 24px; }
.card :is(h2,h3,h4) { font-size: var(--text-xl); margin-bottom: var(--space-xs); }
.card p { color: var(--color-ink-soft); font-size: var(--text-sm); }

/* ---------- field quick-nav (about page) ----------
 * Name-only cards. With the descriptions gone, the field's own colour is what
 * tells one card from the next — a leading spine at rest that floods the card
 * on hover. min-height keeps all eight equal so a two-line name
 * (الجيولوجيا وعلوم الأرض) doesn't inflate its whole row against the other. */
.fnav a {
  position: relative; display: flex; align-items: center; gap: var(--space-md);
  min-height: 104px; padding: var(--space-md) var(--space-lg);
  background: var(--color-paper); border: var(--rule) solid var(--color-line);
  border-radius: var(--radius-lg);
  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid) var(--ease-out);
}
.fnav-ico { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: color-mix(in oklab, var(--fc) 16%, var(--color-paper)); color: var(--fi); }
.fnav-ico svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
.fnav :is(h2,h3,h4) { font-size: var(--text-lg); line-height: 1.35; margin: 0;
  transition: color var(--dur-mid) var(--ease-out); }
.fnav a:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--fc); }
.fnav a:hover :is(h2,h3,h4) { color: var(--fi); }
.fnav a:focus-visible { outline: 2px solid var(--fi); outline-offset: 3px; }
.fnav a:active { transform: translateY(-1px); }
[data-theme="dark"] .fnav a:hover :is(h2,h3,h4) { color: var(--fc); }
@media (prefers-reduced-motion: reduce) { .fnav a:hover { transform: none; } }

.fnav a[data-f="radiation"]   { --fc: var(--f-radiation);   --fi: var(--f-radiation-ink); }
.fnav a[data-f="labs"]        { --fc: var(--f-labs);        --fi: var(--f-labs-ink); }
.fnav a[data-f="environment"] { --fc: var(--f-environment); --fi: var(--f-environment-ink); }
.fnav a[data-f="water"]       { --fc: var(--f-water);       --fi: var(--f-water-ink); }
.fnav a[data-f="geology"]     { --fc: var(--f-geology);     --fi: var(--f-geology-ink); }
.fnav a[data-f="mining"]      { --fc: var(--f-mining);      --fi: var(--f-mining-ink); }
.fnav a[data-f="electronics"] { --fc: var(--f-electronics); --fi: var(--f-electronics-ink); }
.fnav a[data-f="training"]    { --fc: var(--f-training);    --fi: var(--f-training-ink); }
.fnav a[data-f="safety"]      { --fc: var(--f-safety);      --fi: var(--f-safety-ink); }

/* service list rows */
.svc-row { display: flex; gap: var(--space-md); padding: var(--space-md) 0; border-top: var(--rule) solid var(--color-line); align-items: flex-start; }
.svc-row .num { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--field, var(--brand-blue)); flex-shrink: 0; padding-top: 0.2em; }
[dir="rtl"] .svc-row .num { font-family: var(--font-ar); }
/* A service title sat at --text-lg, the same 18px as .lede and .section-lede,
   so a heading and a paragraph shared a size and only weight told them apart.
   1.25rem clears both, and lifts the title over its own 14px description
   from a 1.29 ratio to 1.43. */
.svc-row :is(h2,h3,h4) { font-size: 1.25rem; line-height: 1.3; margin-bottom: 0.25em; }
.svc-row p { color: var(--color-ink-soft); font-size: var(--text-sm); }

/* stats */
.stat-num { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 600; color: var(--color-accent); line-height: 1; letter-spacing: -0.03em;
  /* a measurement and its unit are one token — "~977 km²" must not split */
  white-space: nowrap; }
[dir="rtl"] .stat-num { font-family: var(--font-ar); }
.stat-label { color: var(--color-ink-soft); font-size: var(--text-sm); margin-top: var(--space-xs); }

/* stats band (dark) — shared by hub + field pages */
.stats-band { background: var(--color-night); color: var(--color-on-night); border-radius: var(--radius-xl); padding: clamp(2rem,4vw,3.5rem); }
.stats-band .stat-num { color: var(--brand-gold); }
.stats-band .stat-label { color: var(--color-on-night-soft); }
.stats-band .grid { gap: var(--space-xl); }
/* nowrap keeps a value on one line, but the grid tracks are minmax(0,1fr) and
 * will happily be narrower than the text — which overflowed into the next
 * stat. Cap the size against the cell instead. 23cqw is the measured worst
 * case ("600k km²" needs 23.05); cells are equal width, so every stat in a
 * band steps down together and they stay the same size as each other. */
.stats-band .grid > div { container-type: inline-size; }
.stats-band .stat-num { font-size: min(var(--text-4xl), 23cqw); }

/* pill / tags */
.pill { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.4em 0.9em; border-radius: 999px; font-size: var(--text-xs); font-weight: 600; border: var(--rule) solid var(--color-line-strong); color: var(--color-ink-soft); background: var(--color-paper); }
.pill svg { width: 1em; height: 1em; }

/* client logo wall */
.logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-md); }
.logo-cell { aspect-ratio: 16/10; display: grid; place-items: center; padding: var(--space-md); background: var(--color-paper); border: var(--rule) solid var(--color-line); border-radius: var(--radius-md); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.logo-cell img { max-width: 100%; max-height: 60px; object-fit: contain; transition: transform var(--dur-mid) var(--ease-out); }
.logo-cell:hover { border-color: var(--color-line-strong); box-shadow: var(--shadow-sm); }
.logo-cell:hover img { transform: scale(1.04); }
/* Dark mode: client marks are dark-ink logos, so keep each cell on a light chip to stay legible */
[data-theme="dark"] .logo-cell { background: #eef0f4; border-color: transparent; }
[data-theme="dark"] .logo-cell:hover { box-shadow: 0 0 0 1px var(--color-line-strong); }
.sector-label { display: flex; align-items: center; gap: var(--space-md); margin: var(--space-xl) 0 var(--space-md); }
.sector-label :is(h2,h3,h4) { font-size: var(--text-lg); white-space: nowrap; }
.sector-label .ct { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-faint); }
[dir="rtl"] .sector-label .ct { font-family: var(--font-ar); }
.sector-label::after { content: ""; flex: 1; height: 1px; background: var(--color-line); }

/* hub logo marquee */
/* figures with a plus read "150+" in both languages; dir="ltr" sits on the figure itself */
[dir="rtl"] :is(.n, .stat-num)[dir="ltr"] { text-align: right; }
.logo-marquee { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.logo-track { display: flex; gap: 14px; width: max-content; align-items: center; animation: marquee 48s linear infinite; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
/* every logo sits in an identical card, so equal size is structural, not calculated */
.logo-tile { flex: none; width: 176px; aspect-ratio: 16 / 9; display: flex; align-items: center;
  justify-content: center; padding: 16px; background: #fff; border: var(--rule) solid var(--color-line);
  border-radius: var(--radius-md); }
.logo-track img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  transition: transform var(--dur-mid) var(--ease-out); }
.logo-tile:hover img { transform: scale(1.04); }
/* Dark mode: each tile becomes a light chip so the dark-ink marks stay legible */
[data-theme="dark"] .logo-tile { background: #eef0f4; border-color: transparent; }
/* heavy all-caps wordmarks fill the full cap-height, so optically shrink them to match */
@keyframes marquee { to { transform: translateX(-50%); } }
[dir="rtl"] .logo-marquee { direction: ltr; }
[dir="rtl"] .logo-track { animation-direction: reverse; }
@media (prefers-reduced-motion: reduce) { .logo-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; } }

/* ===== Group structure — roof & pillars (about page) ===== */
.grp-plate { display: flex; align-items: center; justify-content: center; background: #fff; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--color-line); }
.grp-plate img { object-fit: contain; }
.grp-roofwrap { border: 1px solid var(--color-line); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); margin-top: var(--space-xl); }
.grp-roof { display: flex; align-items: center; gap: var(--space-xl); flex-wrap: wrap; padding: var(--space-xl) var(--space-2xl);
  background: linear-gradient(120deg, var(--brand-blue-900), var(--brand-blue)); color: var(--color-on-night); position: relative; overflow: hidden; }
.grp-roof .grp-plate { height: 72px; width: 200px; padding: 12px 18px; background: rgba(255,255,255,0.96); flex-shrink: 0; }
.grp-roof .grp-plate img { max-height: 46px; max-width: 100%; }
.grp-roof-txt { min-width: 0; }
.grp-roof-badge { display: block; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-gold); margin-bottom: 0.3em; }
[dir="rtl"] .grp-roof-badge { font-family: var(--font-ar); letter-spacing: 0; }
.grp-roof-txt h3 { font-family: var(--font-display); font-size: var(--text-2xl); margin: 0 0 0.2em; color: #fff; }
[dir="rtl"] .grp-roof-txt h3 { font-family: var(--font-ar-display); }
.grp-roof-txt p { margin: 0; color: var(--color-on-night-soft); font-size: var(--text-sm); max-width: 52ch; line-height: 1.6; }
.grp-pillars { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) and (min-width: 761px) { .grp-pillars { grid-template-columns: repeat(2, 1fr); } .grp-pillar:nth-child(2) { border-inline-start: 0; } .grp-pillar:nth-child(3), .grp-pillar:nth-child(4) { border-block-start: 1px solid var(--color-line); } }
.grp-pillar { position: relative; padding: var(--space-xl) var(--space-lg); border-top: 4px solid var(--accent); border-inline-start: 1px solid var(--color-line);
  text-decoration: none; color: var(--color-ink); display: flex; flex-direction: column; align-items: flex-start; gap: 0.55em;
  background: var(--color-paper); transition: background var(--dur-mid) var(--ease-out); }
.grp-pillar:first-child { border-inline-start: 0; }
.grp-pillar:hover { background: var(--color-paper-2); }
/* whole-card link to the field page (stretched), with the website link sitting above it */
.grp-cardlink { position: absolute; inset: 0; z-index: 0; }
.grp-cardlink:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; }
.grp-site { position: relative; z-index: 1; margin-top: auto; display: inline-flex; align-items: center; min-height: 24px; gap: 0.4em;
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.03em; font-weight: 700; color: var(--accent); text-decoration: none; }
.grp-site svg { width: 1em; height: 1em; }
.grp-site:hover { text-decoration: underline; }
[dir="rtl"] .grp-site { font-family: var(--font-ar); letter-spacing: 0; }
[dir="rtl"] .grp-site svg { transform: scaleX(-1); }
.grp-pillar .grp-plate { height: 58px; width: 152px; padding: 9px 14px; }
.grp-pillar .grp-plate img { max-height: 40px; max-width: 100%; }
.grp-pillar .grp-role { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
[dir="rtl"] .grp-pillar .grp-role { font-family: var(--font-ar); letter-spacing: 0; }
/* --accent is set inline to the light-theme ink variant; on a dark card that is
   only ~2.5:1, so lift it toward white for the label and the site link. */
[data-theme="dark"] .grp-pillar .grp-role,
[data-theme="dark"] .grp-pillar .grp-site { color: color-mix(in oklch, var(--accent) 45%, white); }
.grp-pillar :is(h2,h3,h4) { font-family: var(--font-display); font-size: var(--text-lg); margin: 0; }
[dir="rtl"] .grp-pillar :is(h2,h3,h4) { font-family: var(--font-ar-display); }
.grp-pillar p { margin: 0; font-size: var(--text-sm); color: var(--color-ink-soft); line-height: 1.55; }
@media (max-width: 760px) {
  .grp-roof { flex-direction: column; align-items: flex-start; gap: var(--space-md); padding: var(--space-xl) var(--space-lg); }
  .grp-pillars { grid-template-columns: 1fr; }
  .grp-pillar { border-inline-start: 0; border-top: 4px solid var(--accent); }
  .grp-pillar:not(:first-child) { border-block-start: 1px solid var(--color-line); }
}

/* credentials */
.cred-list { display: grid; gap: 0; }
.cred-row { display: grid; grid-template-columns: auto 1fr; gap: var(--space-md); padding: var(--space-md) 0; border-top: var(--rule) solid var(--color-line); align-items: start; }
.cred-row:first-child { border-top: 0; }
.cred-row .ck { width: 40px; height: 40px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--color-accent-soft); color: var(--color-accent); flex-shrink: 0; }
.cred-row .ck svg { width: 22px; height: 22px; }
.cred-row :is(h2,h3,h4) { font-size: var(--text-base); margin-bottom: 0.15em; }
.cred-row p { font-size: var(--text-sm); color: var(--color-ink-soft); }

/* map embed */
.map-embed { border-radius: var(--radius-lg); overflow: hidden; border: var(--rule) solid var(--color-line); box-shadow: var(--shadow-sm); aspect-ratio: 16/10; }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(0.9); }

/* leadership */
.leader-photo { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 3 / 2; }
.leader-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.leader-name { font-size: var(--text-2xl); margin-bottom: 0.1em; }
.leader-title { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-md); }
[dir="rtl"] .leader-title { font-family: var(--font-ar); letter-spacing: 0; }

/* pull quote */
.quote { border-inline-start: 3px solid var(--color-accent); padding: var(--space-xs) 0 var(--space-xs) var(--space-lg); }
[dir="rtl"] .quote { padding: var(--space-xs) var(--space-lg) var(--space-xs) 0; }
.quote p { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.25; letter-spacing: -0.01em; color: var(--color-ink); }
[dir="rtl"] .quote p { font-family: var(--font-ar); letter-spacing: 0; }
.quote cite { display: block; margin-top: var(--space-md); font-style: normal; font-size: var(--text-sm); color: var(--color-ink-faint); font-family: var(--font-mono); letter-spacing: 0.04em; }
[dir="rtl"] .quote cite { font-family: var(--font-ar); letter-spacing: 0; }

/* timeline */
.timeline { display: grid; gap: 0; }
.tl-item { display: grid; grid-template-columns: 7rem 1fr; gap: var(--space-lg); padding: var(--space-lg) 0; border-top: var(--rule) solid var(--color-line); position: relative; }
.tl-year { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; color: var(--color-accent); letter-spacing: -0.02em; }
[dir="rtl"] .tl-year { font-family: var(--font-ar); }
.tl-item :is(h2,h3,h4) { font-size: var(--text-lg); margin-bottom: 0.2em; }
.tl-item p { color: var(--color-ink-soft); font-size: var(--text-sm); }
@media (max-width: 560px) { .tl-item { grid-template-columns: 1fr; gap: var(--space-2xs); } }

/* case studies */
.case-card { display: flex; flex-direction: column; overflow: hidden; border: var(--rule) solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-paper); transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out); }
.case-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.case-media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--color-paper-3); }
.case-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.case-card:hover .case-media img { transform: scale(1.05); }
.case-tag { position: absolute; top: var(--space-sm); inset-inline-start: var(--space-sm); z-index: 2; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; padding: 0.35em 0.7em; border-radius: 999px; background: oklch(17% 0.035 268 / 0.82); color: var(--color-on-night); backdrop-filter: blur(4px); }
[dir="rtl"] .case-tag { font-family: var(--font-ar); }
.case-body { padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-xs); flex: 1; }
.case-body :is(h2,h3,h4) { font-size: var(--text-lg); }
.case-body p { color: var(--color-ink-soft); font-size: var(--text-sm); }
.case-loc { margin-top: auto; padding-top: var(--space-sm); font-size: var(--text-xs); color: var(--color-ink-faint); font-family: var(--font-mono); display: flex; align-items: center; gap: 0.5em; }
[dir="rtl"] .case-loc { font-family: var(--font-ar); }
.case-loc svg { width: 1.1em; height: 1.1em; }

/* auto-rotating case carousel (home): 6 cards, 4-up from 1200px, 3-up below, swipe + auto-advance */
.case-track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--space-lg)) / 3);
  gap: var(--space-lg);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-bottom: 4px; /* room for hover-lift shadow */
}
.case-track::-webkit-scrollbar { display: none; }
.case-track > .case-card { scroll-snap-align: start; }
@media (min-width: 1200px) { .case-track { grid-auto-columns: calc((100% - 3 * var(--space-lg)) / 4); } }
@media (max-width: 900px) { .case-track { grid-auto-columns: calc((100% - var(--space-lg)) / 2); } }
@media (max-width: 560px) { .case-track { grid-auto-columns: 86%; } }

/* accreditation marquee */
.creds { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.creds .pill { background: var(--color-paper-2); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
  .footer-logo { grid-column: 1 / -1; }
  .cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cols-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cols-3 > :last-child:nth-child(2n + 1),
  .cols-4 > :last-child:nth-child(2n + 1) { grid-column: 1 / -1; }
}
/* 8 fields + About is a long nav — switch to the drawer earlier */
@media (max-width: 1200px) {
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
  .nav-cta-desktop { display: none; }
}
@media (max-width: 760px) {
  .section-title { font-size: var(--text-2xl); }
}
@media (max-width: 560px) {
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .cols-2 > *, .cols-3 > *, .cols-4 > * { grid-column: auto; }
  .footer-top { grid-template-columns: 1fr; }
}

/* ---------- Lightbox (click-to-enlarge for posters, certificates, any [data-zoom]) ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: oklch(14% 0.03 268 / 0.88);
  backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-mid) var(--ease-out), visibility var(--dur-mid);
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: min(100%, 900px); max-height: 100%;
  width: auto; height: auto; object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 30px 80px oklch(10% 0.04 268 / .6);
  transform: scale(.96); transition: transform var(--dur-mid) var(--ease-out);
}
.lightbox.open img { transform: scale(1); }
.lightbox button {
  position: absolute; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: oklch(100% 0 0 / .12); color: #fff;
  border: 1px solid oklch(100% 0 0 / .22); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.lightbox button:hover { background: oklch(100% 0 0 / .24); }
.lightbox button svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }
.lightbox .lb-close { top: clamp(.75rem, 2vw, 1.5rem); inset-inline-end: clamp(.75rem, 2vw, 1.5rem); }
.lightbox .lb-prev { inset-inline-start: clamp(.5rem, 2vw, 1.5rem); }
.lightbox .lb-next { inset-inline-end: clamp(.5rem, 2vw, 1.5rem); }
.lightbox .lb-count {
  position: absolute; bottom: clamp(.75rem, 2vw, 1.5rem); left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .1em;
  color: oklch(100% 0 0 / .7);
  direction: ltr; /* a numeric ratio must not flip in RTL */
}
@media (max-width: 560px) { .lightbox .lb-prev, .lightbox .lb-next { display: none; } }
@media (prefers-reduced-motion: reduce) { .lightbox, .lightbox img { transition: none; } }

/* ---------- Reading progress (hairline, top of page) ---------- */
.read-progress {
  position: fixed; inset-inline: 0; top: 0; height: 2px; z-index: 100;
  background: linear-gradient(90deg, oklch(64% 0.02 250), oklch(78% 0.015 250));
  transform: scaleX(0); transform-origin: left center;
  transition: transform .1s linear; pointer-events: none;
}
[dir="rtl"] .read-progress { transform-origin: right center; }
@media (prefers-reduced-motion: reduce) { .read-progress { transition: none; } }

/* ---------- Copy-to-clipboard button + toast ---------- */
/* link + copy button share one inline row whatever the parent layout is.
   Specific enough to beat .footer-col a / .footer-col > span, which are block. */
.copy-pair,
.footer-col > .copy-pair,
.rows > .copy-pair { display: inline-flex; align-items: center; gap: 0.15em; }
.copy-pair > a,
.footer-col .copy-pair > a,
.rows .copy-pair > a { display: inline; }
.copy-btn {
  display: inline-grid; place-items: center; vertical-align: middle;
  width: 1.9em; height: 1.9em; margin-inline-start: 0.45em;
  border: var(--rule) solid var(--color-line); border-radius: var(--radius-sm);
  background: transparent; color: var(--color-ink-faint);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.copy-btn svg { width: 1em; height: 1em; }
.copy-btn:hover { color: var(--color-accent); border-color: var(--color-accent); background: var(--color-accent-soft); }
.site-footer .copy-btn { border-color: oklch(100% 0 0 / 0.22); color: oklch(100% 0 0 / 0.55); }
.site-footer .copy-btn:hover { color: var(--brand-gold); border-color: var(--brand-gold); background: oklch(100% 0 0 / 0.08); }

.copy-toast {
  position: fixed; bottom: clamp(1rem, 4vw, 2rem); left: 50%; transform: translate(-50%, 12px);
  z-index: 210; padding: 0.7em 1.2em; border-radius: 999px;
  background: oklch(17% 0.035 268 / 0.95); color: var(--color-on-night);
  font-size: var(--text-sm); font-weight: 600; box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out), visibility var(--dur-mid);
}
.copy-toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .copy-toast { transition: opacity var(--dur-fast) linear; } }

/* ---- touch targets ------------------------------------------------------
   WCAG 2.5.5: 44x44 minimum on touch. The header controls sat at 34-39px and
   the inline arrow links at 24px tall. Padding would move them in the layout,
   so the hit area is grown with a pseudo-element that stays out of flow. */
@media (pointer: coarse) {
  .theme-toggle, .lang-toggle, .nav-burger { position: relative; }
  .theme-toggle::after, .lang-toggle::after, .nav-burger::after,
  .arrow-link::after, .site-footer a::after {
    content: ""; position: absolute; inset: 50% auto auto 50%;
    translate: -50% -50%; min-width: 44px; min-height: 44px; width: 100%; height: 100%;
  }
  .arrow-link, .site-footer a { position: relative; }
}

/* ---- client sectors -----------------------------------------------------
   A logo wall answers "who trusts them". These two lines answer the question
   the visitor actually arrived with: what do you do for a company like mine. */
.sector-note { font-size: var(--text-sm); color: var(--color-ink-soft); margin: .35em 0 .5em; max-width: 62ch; }
.sector-links { display: flex; flex-wrap: wrap; gap: .4em .5em; margin: 0 0 var(--space-md); }
.sector-link { font-size: var(--text-xs); font-family: var(--font-mono); letter-spacing: .02em;
  color: var(--color-ink-soft); border: 1px solid var(--color-line); border-radius: 999px;
  padding: .3em .8em; transition: border-color .2s, color .2s; }
.sector-link:hover, .sector-link:focus-visible { color: var(--color-accent); border-color: var(--color-accent); }

/* ---- hero title levels ---------------------------------------------------
   The step is set on <body> so it reaches the title through inheritance, which
   keeps the cap out of the selector-specificity fight the old rules were in. */
body[data-page="home"] { --h1-step: 1; }
body[data-service] { --h1-step: .65; }
body[data-page="group"],
body[data-page="contact"],
body[data-page="clients"],
body[data-page="projects"],
body[data-page="404"] { --h1-step: .77; }
/* a short screen has less room for a title above the fold, whatever its level */
@media (max-height: 820px) and (min-width: 861px) { body { --h1-short: .88; } }

/* ---- Arabic micro-text ---------------------------------------------------
   See the note in the build script: the 12px label scale, the mono faces and
   the tracking are all Latin assumptions. */
[dir="rtl"] {
  --text-xs: 0.8125rem;            /* 12px -> 13px for every label built on it */
  /* Arabic first: a stack resolves per character, and U+0020 exists in Space
     Mono, so with the mono face first every space in an Arabic label kept a
     monospace advance and the words drifted apart. */
  --font-mono: "Readex Pro", "IBM Plex Mono", ui-monospace, monospace;
}
/* the two labels whose content is always Latin keep the monospaced face */
[dir="rtl"] :is(.svc-row .num, .product .code) {
  font-family: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
}
/* No Arabic on this site wants tracking, so reset the whole tree rather than
   naming components: positive tracking breaks the joins in labels, negative
   tracking crowds them in display headings. Latin fragments inside an Arabic
   page lose nothing by sitting at normal. */
/* !important is the right tool here rather than a smell: this is a script-level
   normalisation that a dozen component rules would otherwise each re-break, and
   there is no case where Arabic on this site should carry tracking. */
[dir="rtl"] body * { letter-spacing: normal !important; }
/* sizes written as raw pixels, so the token above cannot reach them */
[dir="rtl"] :is(.mini-h, .np-feat .k) { font-size: 0.8125rem; }
[dir="rtl"] .feature-band .fb-tag { font-size: 0.8125rem; }
[dir="rtl"] :is(.np-d, .np-feat .m) { font-size: 0.85rem; }

/* ---- Arabic hero titles need leading -------------------------------------
   The display sizes use line-height 1 (or .98), which is right for a Latin
   display face whose ascenders and descenders sit inside the em box. Tajawal's
   do not: at two lines the نزول of one row meets the صعود of the next. The
   value is set only for RTL so the English typography is untouched. */
/* Readex is set at size-adjust 82%, so the glyphs are smaller than the em: these
   line-heights are tightened by the same proportion to keep the old visual spacing */
[dir="rtl"] :is(.hero h1, .field-hero h1) { line-height: 1.12; }
[dir="rtl"] .section-title { line-height: 1.15; max-width: 34ch; }

/* ---- embedded third-party form ------------------------------------------
   The frame is a separate document, so its styling cannot reach the page and
   the page cannot reach it. The height is generous by default because a form
   cut to a sliver is worse than one that is slightly too tall; the page script
   trims it to the real height once the provider reports it. */
.form-embed { border: var(--rule) solid var(--color-line); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--color-paper); }
.form-embed iframe { display: block; width: 100%; height: 1500px; border: 0; }
@media (max-width: 720px) { .form-embed iframe { height: 1750px; } }

/* Present for assistive technology and for search results, absent on screen -
   used where a heading is required by the document but unwanted in the design. */
.a11y-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---- course rounds table -------------------------------------------------
   Six columns, and three of them say the same thing on every row: the hours,
   the duration and the format never vary. They are carried anyway so a reader
   can answer any question from one line without hunting under the table, but
   set faint so the eye tracks the two that change - the date and the city -
   and lands on the action at the end. The year rows are headings, not data, so
   they are quieter than the rows they introduce. */
.rounds tr.yr th { font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: .12em; color: var(--color-ink-faint); background: var(--color-paper-2);
  font-weight: 500; padding-block: .55em; }
[dir="rtl"] .rounds tr.yr th { font-family: var(--font-ar); letter-spacing: 0; }

.scope-table.rounds { min-width: 900px; }
/* the generic scope-table column rules assume three columns and are declared in
   a later sheet, so these carry the extra class to win on specificity */
.scope-table.rounds td:nth-child(2),
.scope-table.rounds td:nth-child(3),
.scope-table.rounds td:nth-child(5) {
  color: var(--color-ink-faint); font-weight: 400; min-width: 0; white-space: nowrap; }
.scope-table.rounds td:nth-child(4) { color: var(--field-ink, var(--brand-blue));
  font-weight: 600; min-width: 0; white-space: nowrap; }
.rounds td:last-child { white-space: nowrap; }
/* the field amber is the page's decorative colour; the accent is what the rest
   of the site uses for anything you can click, so the action reads as a link */
.rounds .reg { font-weight: 600; color: var(--color-accent);
  text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .18s var(--ease-out); }
.rounds .reg::after { content: " ↗"; font-size: .85em; }
[dir="rtl"] .rounds .reg::after { content: " ↖"; }
.rounds .reg:hover, .rounds .reg:focus-visible { border-bottom-color: currentColor; }

@media (max-width: 720px) {
  .rounds td, .rounds th { padding-inline: .75em; }
}
/* Phones: a 900px table in a 350px window hid the city and the register link
   off-screen. Each round becomes a card — the date, then city and format, the
   constant hours and duration small, and the action full width. */
@media (max-width: 640px) {
  .scope-wrap:has(.rounds) { border: 0; background: none; border-radius: 0; overflow: visible; }
  .scope-table.rounds { min-width: 0; display: block; }
  .scope-table.rounds thead { display: none; }
  .scope-table.rounds tbody { display: grid; gap: var(--space-sm); }
  .scope-table.rounds tr.yr { display: block; }
  .scope-table.rounds tr.yr th { display: block; background: none; padding: var(--space-sm) 0 0; border: 0; }
  .scope-table.rounds tr:not(.yr) { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem var(--space-sm);
    padding: var(--space-md); border: var(--rule) solid var(--color-line); border-radius: var(--radius-md); background: var(--color-paper); }
  .scope-table.rounds tr:not(.yr) td { display: block; padding: 0; border: 0; white-space: normal; background: none !important; }
  .scope-table.rounds td:nth-child(1) { grid-column: 1 / -1; font-size: var(--text-base); }
  .scope-table.rounds td:nth-child(4) { grid-column: 1; }
  .scope-table.rounds td:nth-child(5) { grid-column: 2; text-align: end; }
  .scope-table.rounds td:nth-child(2), .scope-table.rounds td:nth-child(3) { display: inline; font-size: var(--text-xs); }
  .scope-table.rounds td:nth-child(2) { grid-column: 1; }
  .scope-table.rounds td:nth-child(3) { grid-column: 2; text-align: end; }
  .scope-table.rounds td:last-child { grid-column: 1 / -1; margin-top: var(--space-xs); }
  .rounds .reg { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: var(--radius-md);
    background: var(--brand-blue); color: #fff; border: 0; }
  .rounds .reg:hover, .rounds .reg:focus-visible { border: 0; background: var(--brand-blue-700); }
  [data-theme="dark"] .rounds .reg { background: var(--brand-gold); color: oklch(22% 0.03 268); }
  /* the day-by-day agenda wraps instead of running off the edge */
  .scope-table.agenda { min-width: 0; }
  .scope-table.agenda td, .scope-table.agenda th { white-space: normal; }
}



/* ============ Phase 3: shorter pages on phones ============
   Nothing is removed here: the footer folds, sections sit closer, and short
   cards pair up or scroll sideways. Desktop is untouched. */
.fold-phone > summary { list-style: none; cursor: default; }
.fold-phone > summary::-webkit-details-marker { display: none; }
.fc-fold > summary > h2 { display: inline; }
@media (max-width: 560px) {
  .section { padding-block: 2.75rem; }
  .section-sm { padding-block: 2rem; }
  .site-footer { padding-block: var(--space-2xl) var(--space-lg); margin-top: var(--space-xl); }
  .footer-top { gap: var(--space-md); }
  .footer-logo img { height: 48px; }
  .fc-fold { border-top: var(--rule) solid oklch(100% 0 0 / 0.12); }
  .fold-phone > summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
  .fold-phone > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .7; transition: transform var(--dur-fast) var(--ease-out); }
  .fold-phone[open] > summary::after { transform: rotate(-135deg); }
  .fc-fold .fc-links { padding-bottom: var(--space-sm); }
  .footer-badges { margin-top: var(--space-lg); padding-top: var(--space-md); }
  .footer-badge-row { gap: var(--space-xs); }
  .footer-badge { width: 64px; height: 46px; padding: 6px; }
  .footer-bottom { margin-top: var(--space-lg); }
  .cs-more { border-top: var(--rule) solid var(--color-line); }
  .cs-more > summary.mini-h { margin: 0; }
  /* client logos: three to a row */
  .logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); }
  .logo-cell { padding: var(--space-xs); }
  .logo-cell img { max-height: 40px; }
  /* the timeline sits tighter */
  .tl-item { padding-block: var(--space-sm); }
  .tl-item p { font-size: var(--text-sm); }
  /* short cards pair up instead of stacking one per row */
  .grid.m2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
  .grid.m2 > * { grid-column: auto; }
  .grid.m2 > .card { padding: var(--space-md); }
  .grid.m2 > .card h3 { font-size: var(--text-base); }
  .grid.m2 > .card p { font-size: var(--text-sm); }
  /* a long run of similar cards scrolls sideways */
  .grid.m-swipe { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-sm); scrollbar-width: thin; }
  .grid.m-swipe > * { scroll-snap-align: start; grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) { .fold-phone > summary::after { transition: none; } }

/* home: photo cards for the eight fields (img/fields, 640x480) */
.fcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); margin-top: var(--space-xl); }
.fcard { display: flex; flex-direction: column; background: var(--color-paper); border: var(--rule) solid var(--color-line);
         border-radius: var(--radius-lg); overflow: hidden; color: inherit; text-decoration: none;
         transition: border-color var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out); }
.fcard-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-paper-3); }
.fcard-img img { width: 100%; height: 100%; object-fit: cover; filter: var(--img-filter); transition: transform var(--dur-slow) var(--ease-out); }
.fcard-body { display: block; padding: var(--space-md) var(--space-lg) var(--space-lg); border-top: 3px solid var(--fc); }
.fcard h3 { font-size: var(--text-lg); line-height: 1.35; margin: 0; }
.fcard p { font-size: var(--text-sm); line-height: 1.55; color: var(--color-ink-soft); margin: var(--space-2xs) 0 0; }
.fcard:hover { border-color: var(--fc); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.fcard:hover h3 { color: var(--fi); }
.fcard:hover .fcard-img img { transform: scale(1.04); }
.fcard:focus-visible { outline: 2px solid var(--fi); outline-offset: 3px; }
[data-theme="dark"] .fcard:hover h3 { color: var(--fc); }
@media (max-width: 1080px) { .fcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .fcards { gap: var(--space-sm); }
  .fcard-body { padding: var(--space-sm) var(--space-sm) var(--space-md); }
  .fcard h3 { font-size: var(--text-base); }
  .fcard p { font-size: var(--text-xs); }
}
@media (prefers-reduced-motion: reduce) { .fcard, .fcard-img img { transition: none; } .fcard:hover { transform: none; } .fcard:hover .fcard-img img { transform: none; } }

@media (max-width: 560px) {
  /* case studies: the three figures share one row */
  .cs .fact-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); }
  .cs .fact .n { font-size: var(--text-lg); }
  .cs .fact .l { font-size: var(--text-xs); }
  /* timeline: year beside the entry, not above it */
  .tl-item { grid-template-columns: 3.4rem minmax(0, 1fr); gap: var(--space-sm); }
  /* compact cards in paired grids */
  .grid.m2 > .card .card-icon { width: 36px; height: 36px; margin-bottom: var(--space-sm); }
}

/* ---- enquiry form: one form on the home and contact pages (labels bound to their fields) ---- */
.eq-form { background: var(--color-paper-2); }
.eq-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-md); }
.eq-f { display: block; }
.eq-f > span { display: block; margin-bottom: 0.35rem; font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.eq-f select.field-input { appearance: none; -webkit-appearance: none; cursor: pointer; padding-inline-end: 2.4em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23697089' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 1.1em; background-position: right 0.9em center; }
[dir="rtl"] .eq-f select.field-input { background-position: left 0.9em center; }
.eq-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.eq-form-msg { margin: 0 0 var(--space-md); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); font-size: var(--text-sm);
  background: color-mix(in oklab, oklch(60% 0.19 27) 12%, var(--color-paper)); color: oklch(45% 0.17 27); }
[data-theme="dark"] .eq-form-msg { color: oklch(80% 0.12 27); }
.eq-form-msg a { color: inherit; font-weight: 600; }
.eq-form button[disabled] { opacity: 0.65; cursor: progress; }
@media (max-width: 620px) { .eq-row { grid-template-columns: minmax(0, 1fr); } }

/* Training specialisms on phones: two columns left the tile titles about 60px,
   and overflow-wrap:anywhere split words letter by letter. One column instead,
   and Arabic headings never break inside a word (it breaks the letter joins). */
@media (max-width: 560px) {
  .grid.m2.fnav { grid-template-columns: minmax(0, 1fr); }
  .grid.m2.fnav a { min-height: 64px; padding: var(--space-sm) var(--space-md); }
  .fnav :is(h2, h3, h4) { font-size: var(--text-base); }
}
[dir="rtl"] :is(h1, h2, h3, h4) { overflow-wrap: normal; }

/* One line spacing for Arabic headings on every page (2026-10-19). Readex is set at
   size-adjust 82%, so the old per-component values (1.2-1.35) read as gaps. Display
   titles carry their own value above (1.12); every other h2 1.15; card and sub-headings 1.25. */
[dir="rtl"] main h2 { line-height: 1.15; }
[dir="rtl"] main :is(h3, h4) { line-height: 1.25; }