@charset "UTF-8";
/* ==========================================================================
   SALT CORPORATE SERVICES — DESIGN SYSTEM
   Controlling metaphor: the operational record.
   Brand colours are mandated by the Salt brand system and are not negotiable.
   Typefaces are substitutes for PP Hatton / Akkurat pending licence
   confirmation — see docs/03-design-system.md.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Gradients cannot take logical directions, so the page direction is
     carried here and flipped for RTL below. */
  --to-end: right;
  /* Brand — primary */
  --deep-blue: #1c4481;
  --white: #ffffff;
  --sky-blue: #2393d0;

  /* Brand — supporting */
  --navy: #042247;
  --azure: #7aa8d4;
  --worldly-grey: #cdc6c0;
  --warm-grey: #e4e4e4;
  --unicorn-silver: #e5eef8;
  --blue-grey: #cfdee5;

  /* Derived neutrals (tints of brand values only) */
  --paper: #fbfaf9;          /* warm sheet, from Worldly Grey */
  --paper-edge: #efece8;
  --ink: #0d1b2f;            /* text on light — 15.9:1 on white */
  --ink-soft: #4a5a70;       /* secondary text — 7.1:1 on white */
  --ink-faint: #5a697e;      /* tertiary — 5.7:1 on white, 4.7:1 on the tinted fields */
  --rule: #d8dee7;
  --rule-warm: #e2ddd7;

  /* Semantic */
  --bg: var(--white);
  --bg-field: var(--unicorn-silver);
  --bg-sheet: var(--paper);
  --bg-dark: var(--navy);
  --fg: var(--ink);
  --fg-muted: var(--ink-soft);
  --accent: var(--sky-blue);
  --accent-ink: #12688f;     /* Sky Blue darkened for text use — 4.6:1 on white */
  --link: var(--deep-blue);
  --focus: #0a6ea3;

  /* Type */
  --font-display: "Fraunces", "Hatton", "Times New Roman", serif;
  --font-text: "Inter", "Akkurat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Traditional Arabic first, as Salt specified. It is a Microsoft font and
     cannot be served over the web, so it renders only for readers who have
     it installed. Noto Naskh Arabic is the loaded fallback — the same naskh
     style, so the page keeps its character either way. */
  --font-ar: "Traditional Arabic", "Arabic Typesetting", "Simplified Arabic",
             "Noto Naskh Arabic", "Al Bayan", "Damascus", "Geeza Pro", serif;

  /* Type scale — Elements of Typographic Style, 1.25 at small sizes widening at display */
  --t-micro: 0.75rem;    /* 12px  register labels */
  --t-small: 0.8125rem;  /* 13px  captions, meta */
  --t-base: 1rem;        /* 16px  body */
  --t-lede: 1.1875rem;   /* 19px  intro paragraphs */
  --t-h4: 1.125rem;
  --t-h3: 1.4375rem;
  --t-h2: 2rem;
  --t-h1: 2.25rem;
  --t-display: 2.75rem;

  /* Space — density 4/10, standard */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* Structure */
  --measure: 68ch;
  --page-max: 1320px;
  --gutter: 24px;
  --rail: 208px;          /* index rail width on long pages */
  --header-h: 92px;
  --radius: 2px;          /* restrained, per brand direction */
  --radius-sheet: 3px;

  /* Motion */
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 420ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 480px) {
  :root { --t-display: 3.25rem; }
}
@media (min-width: 768px) {
  :root {
    --gutter: 40px;
    --t-h2: 2.375rem;
    --t-h1: 3.25rem;
    --t-display: 5rem;
  }
}
@media (min-width: 1200px) {
  :root {
    --gutter: 56px;
    --t-h2: 2.625rem;
    --t-h1: 3.625rem;
    --t-display: 6.25rem;
  }
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-text);
  font-size: var(--t-base);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html[lang="ar"] body {
  font-family: var(--font-ar);
  line-height: 1.85;
  letter-spacing: 0;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
img { background: var(--warm-grey); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 36;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4 {
  font-family: var(--font-ar);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.01em; }
h4 { font-size: var(--t-h4); font-family: var(--font-text); font-weight: 600; letter-spacing: -0.005em; }

p { margin: 0 0 var(--s-4); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

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

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

button { font: inherit; color: inherit; }

ul, ol { margin: 0 0 var(--s-4); padding-inline-start: 1.15em; max-width: var(--measure); }
li { margin-bottom: var(--s-2); }
li:last-child { margin-bottom: 0; }

hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s-7) 0; }

::selection { background: var(--unicorn-silver); color: var(--navy); }

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

.skip-link {
  position: absolute; inset-inline-start: var(--s-4); top: -100px; z-index: 200;
  background: var(--navy); color: var(--white); padding: var(--s-3) var(--s-5);
  border-radius: var(--radius); text-decoration: none; font-weight: 600;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--s-3); color: var(--white); }

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.wrap {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--s-8); }
.section--tight { padding-block: var(--s-7); }
.section--loose { padding-block: var(--s-9); }
.section--field { background: var(--bg-field); }
.section--sheet { background: var(--bg-sheet); }
.section--dark { background: var(--bg-dark); color: var(--blue-grey); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--white); }
.section--dark a { color: var(--azure); }
.section--dark a:hover { color: var(--white); }
.section + .section--field,
.section + .section--sheet { border-top: 1px solid var(--rule); }

@media (min-width: 900px) {
  .section { padding-block: var(--s-9); }
  .section--tight { padding-block: var(--s-8); }
  .section--loose { padding-block: var(--s-10); }
}

/* Section head: the reference sits in the margin, the title on the measure. */
.sec-head {
  display: grid;
  gap: var(--s-2);
  padding-bottom: var(--s-5);
  margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--rule);
}
.sec-head > div:last-child { display: grid; gap: var(--s-3); }
.sec-head__ref {
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  font-weight: 500;
}
.section--dark .sec-head { border-bottom-color: rgba(122, 168, 212, 0.32); }
.section--dark .sec-head__ref { color: var(--azure); }
.sec-head__intro { color: var(--fg-muted); font-size: var(--t-lede); max-width: 60ch; }
.section--dark .sec-head__intro { color: var(--blue-grey); }

/* The reference reads as a marginal note; at wide widths it moves into the
   margin without shifting the heading off the section's left edge. */
@media (min-width: 1500px) {
  .sec-head { position: relative; }
  .sec-head__ref {
    position: absolute; inset-inline-start: -104px; top: 4px; width: 88px; text-align: end;
  }
}

.stack > * + * { margin-top: var(--s-4); }
.stack-lg { min-width: 0; }
.stack-lg > * + * { margin-top: var(--s-6); }

.lede {
  font-size: var(--t-lede);
  line-height: 1.55;
  color: var(--fg-muted);
  max-width: 58ch;
}
html[lang="ar"] .lede { line-height: 1.85; }

/* --------------------------------------------------------------------------
   4. HEADER / NAVIGATION
   -------------------------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: saturate(1.6) blur(8px);
}
.header__bar {
  position: relative;
  height: var(--header-h);
  display: flex; align-items: center; gap: var(--s-5);
  max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter);
}
.brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; flex: none; }
.brand img { height: 54px; width: auto; background: none; }
@media (max-width: 599px) { .brand img { height: 42px; } }
@media (min-width: 600px) { .brand img { height: 58px; } }

.nav { display: none; margin-inline-start: auto; }
@media (min-width: 1060px) { .nav { display: flex; align-items: center; gap: var(--s-1); } }

.nav__item { position: static; }
.nav__link {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--s-3) var(--s-3);
  font-size: 0.9375rem; font-weight: 500; color: var(--ink);
  text-decoration: none; background: none; border: 0; cursor: pointer;
  border-radius: var(--radius);
}
.nav__link:hover { color: var(--deep-blue); background: var(--unicorn-silver); }
.nav__link[aria-expanded="true"] { color: var(--deep-blue); background: var(--unicorn-silver); }
.nav__link[aria-current="page"] { color: var(--deep-blue); }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; inset-inline: var(--s-3); bottom: 2px;
  height: 2px; background: var(--sky-blue);
}
.nav__chev { width: 10px; height: 10px; transition: transform var(--dur) var(--ease); }
.nav__link[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }

/* Mega-menu */
.mega {
  position: absolute; inset-inline: var(--gutter); top: calc(100% + 1px);
  display: none;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sheet);
  box-shadow: 0 18px 44px -28px rgba(4, 34, 71, 0.5);
  padding: var(--s-6);
  max-height: calc(100vh - var(--header-h) - var(--s-6));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mega[data-open="true"] { display: block; }
.mega__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5) var(--s-6); }
/* Seven service groups in three columns need three rows, which overflows the
   panel and makes the last group scroll-only. Four columns fit them in two. */
@media (min-width: 1180px) {
  .mega__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5) var(--s-5); }
}
.mega__grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mega__group { min-width: 0; }
/* Flat top-level entries sit beside the menu buttons without a chevron. */
.nav__link--flat { display: inline-flex; align-items: center; }
/* Seven entries and a persistent action have to sit on one line. */
.nav__link, .header .btn { white-space: nowrap; }
@media (min-width: 1060px) and (max-width: 1319px) {
  .nav { gap: var(--s-3); }
  .nav__link { font-size: 0.9375rem; }
}
/* Category heading in the mega-menu: the icon reads before the words. */
.mega__title svg { width: 20px; height: 20px; flex: none; color: var(--accent-ink); }
.mega__blurb {
  font-size: var(--t-small); color: var(--ink-faint); margin: 0 0 var(--s-3);
  max-width: 30ch;
}
.mega__title {
  display: flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-text); font-size: var(--t-small); font-weight: 700;
  letter-spacing: 0.01em; color: var(--deep-blue);
  margin: 0 0 var(--s-2); padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--rule);
}
html[lang="ar"] /* Flat top-level entries sit beside the menu buttons without a chevron. */
.nav__link--flat { display: inline-flex; align-items: center; }
/* Seven entries and a persistent action have to sit on one line. */
.nav__link, .header .btn { white-space: nowrap; }
@media (min-width: 1060px) and (max-width: 1319px) {
  .nav { gap: var(--s-3); }
  .nav__link { font-size: 0.9375rem; }
}
/* Category heading in the mega-menu: the icon reads before the words. */
.mega__title svg { width: 20px; height: 20px; flex: none; color: var(--accent-ink); }
.mega__blurb {
  font-size: var(--t-small); color: var(--ink-faint); margin: 0 0 var(--s-3);
  max-width: 30ch;
}
.mega__title {
  display: flex; align-items: center; gap: var(--s-2); font-family: var(--font-ar); }
.mega__list { list-style: none; margin: 0; padding: 0; }
.mega__list li { margin: 0; }
.mega__list a {
  display: block; padding: 5px 0; font-size: 0.875rem; line-height: 1.45;
  color: var(--ink-soft); text-decoration: none;
}
.mega__list a:hover { color: var(--deep-blue); text-decoration: underline; }
.mega__foot {
  margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: center; justify-content: space-between;
}

/* Header utilities */
.header__utils { display: flex; align-items: center; gap: var(--s-2); margin-inline-start: auto; }
@media (min-width: 1060px) { .header__utils { margin-inline-start: var(--s-4); } }

.lang-switch {
  display: inline-flex; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden;
}
.lang-switch a {
  padding: 6px 12px; font-size: var(--t-small); font-weight: 600; text-decoration: none;
  color: var(--ink-soft); background: var(--white); min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
}
.lang-switch a[aria-current="true"] { background: var(--deep-blue); color: var(--white); }
.lang-switch a:not([aria-current="true"]):hover { background: var(--unicorn-silver); color: var(--deep-blue); }

.icon-btn {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--rule); border-radius: var(--radius); cursor: pointer;
  color: var(--ink);
}
.icon-btn:hover { background: var(--unicorn-silver); color: var(--deep-blue); }
.icon-btn svg { width: 18px; height: 18px; }
.nav-toggle { display: inline-flex; }

/* Small phones. The bar carries a three-line lockup plus four controls, so
   below 420px everything tightens rather than overflowing. */
@media (max-width: 419px) {
  :root { --gutter: 20px; --header-h: 78px; }
  .header__bar { gap: var(--s-3); }
  .header__utils { gap: 6px; }
  .brand img { height: 38px; }
  .icon-btn { width: 38px; height: 38px; }
  .lang-switch a { padding: 6px 9px; min-height: 38px; }
}

/* Very narrow devices — folded phones and the original SE. */
@media (max-width: 339px) {
  :root { --gutter: 16px; }
  .header__bar { gap: var(--s-2); }
  .header__utils { gap: 4px; }
  .brand img { height: 34px; }
  .icon-btn { width: 34px; height: 34px; }
  .lang-switch a { padding: 6px 7px; min-height: 34px; font-size: 0.75rem; }
}
@media (min-width: 1060px) { .nav-toggle { display: none; } }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 46px; padding: var(--s-3) var(--s-5);
  font-family: var(--font-text); font-size: 0.9375rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; text-align: center; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--radius);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
html[lang="ar"] .btn { font-family: var(--font-ar); }
.btn--primary { background: var(--deep-blue); color: var(--white); }
.btn--primary:hover { background: var(--navy); color: var(--white); }
.btn--secondary { background: var(--white); color: var(--deep-blue); border-color: var(--deep-blue); }
.btn--secondary:hover { background: var(--unicorn-silver); color: var(--navy); }
.btn--ghost { background: none; color: var(--deep-blue); border-color: var(--rule); }
.btn--ghost:hover { background: var(--unicorn-silver); border-color: var(--azure); }
.btn--onDark { background: var(--white); color: var(--navy); }
.btn--onDark:hover { background: var(--unicorn-silver); color: var(--navy); }
.btn--onDarkGhost { background: none; color: var(--white); border-color: rgba(255,255,255,0.45); }
.btn--onDarkGhost:hover { background: rgba(255,255,255,0.1); color: var(--white); border-color: var(--white); }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Header CTA: hidden until the full navigation is available. */
.btn.hide-sm { display: none; }
@media (min-width: 1060px) { .btn.hide-sm { display: inline-flex; } }

/* Text link with rule reveal — no arrow glyphs */
.tlink {
  display: inline-block; font-weight: 600; color: var(--deep-blue); text-decoration: none;
  border-bottom: 1px solid var(--azure); padding-bottom: 1px;
  min-height: 24px;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.tlink:hover { color: var(--navy); border-bottom-color: var(--navy); }
.section--dark .tlink { color: var(--white); border-bottom-color: rgba(255,255,255,0.4); }
.section--dark .tlink:hover { border-bottom-color: var(--white); }

/* --------------------------------------------------------------------------
   6. THE RECORD — core content device
   Ruled rows, not cards. A reference in the margin, content on the measure.
   -------------------------------------------------------------------------- */
.record { border-top: 1px solid var(--rule); }
.record__row {
  display: grid; gap: var(--s-2);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 720px) {
  .record__row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-5); align-items: start; }
  /* Rows that still carry a reference keep the old three-column measure. */
  .record__row:has(.record__ref) { grid-template-columns: 76px minmax(0, 1fr) auto; }
}
@media (min-width: 1200px) {
  .record__row { gap: var(--s-6); }
  .record__row:has(.record__ref) { grid-template-columns: 112px minmax(0, 1fr) auto; }
}
.record__ref {
  font-size: var(--t-micro); font-variant-numeric: tabular-nums; letter-spacing: 0.05em;
  color: var(--ink-faint); font-weight: 500; padding-top: 4px;
}
.record__row { position: relative; padding-inline-start: 0; transition: padding-inline-start var(--dur) var(--ease); }
.record__row::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: -1px;
  width: 2px; background: var(--sky-blue);
  transform: scaleY(0); transform-origin: top;
  transition: transform var(--dur) var(--ease);
}
a.record__link:hover::before { transform: scaleY(1); }
a.record__link:hover { padding-inline-start: var(--s-4); }
.record__body h3 { margin-bottom: var(--s-2); font-size: var(--t-h3); font-family: var(--font-display); font-weight: 500; letter-spacing: -0.012em; }
html[lang="ar"] .record__body h3 { font-family: var(--font-ar); font-weight: 600; letter-spacing: 0; }
.record__body p { font-size: 0.9375rem; color: var(--fg-muted); margin: 0; }
.record__act { align-self: center; }
.record a.record__link { text-decoration: none; color: var(--ink); }
.record a.record__link:hover h3 { color: var(--deep-blue); text-decoration: underline; }

/* Sheet — bordered surface used for products and scenarios. No shadow. */
.sheet {
  position: relative; display: block; background: var(--white);
  border: 1px solid var(--rule); border-top: 0;
  border-radius: 0 0 var(--radius-sheet) var(--radius-sheet);
  padding: var(--s-6) var(--s-5) var(--s-5);
  transition: border-color var(--dur) var(--ease);
}
/* The file tab. Warm grey against the cool page is the palette's own tension,
   and it is the one piece of the card that reacts to a pointer. */
.sheet::before {
  content: ""; position: absolute; inset-inline: -1px; top: 0; height: 3px;
  background: var(--worldly-grey);
  transition: background var(--dur) var(--ease), height var(--dur) var(--ease);
}
.sheet--field { background: var(--bg-sheet); border-color: var(--rule-warm); }
.sheet__code {
  font-size: var(--t-micro); letter-spacing: 0.06em;
  color: var(--ink-faint); font-weight: 500; display: block; margin-bottom: var(--s-3);
}
.sheet__title {
  font-size: var(--t-h3); margin-bottom: var(--s-3);
  padding-bottom: var(--s-3); border-bottom: 1px solid var(--rule);
  transition: border-color var(--dur) var(--ease);
}
.sheet p { font-size: 0.9375rem; color: var(--fg-muted); margin-bottom: 0; }
/* The whole file is the link, so nothing inside it is underlined. */
a.sheet { text-decoration: none; color: var(--ink); }
a.sheet .sheet__title { color: var(--ink); transition: color var(--dur) var(--ease); }
a.sheet:hover { border-color: var(--azure); }
a.sheet:hover::before { background: var(--sky-blue); height: 5px; }
a.sheet:hover .sheet__title { color: var(--deep-blue); border-bottom-color: var(--azure); }
.sheet__meta {
  margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--rule);
  font-size: var(--t-small); color: var(--ink-faint);
}

.grid { display: grid; gap: var(--s-4); }
.grid > * { min-width: 0; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--s-5); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: var(--s-5); }

/* Checklist — used for "what is included" and "what you receive" */
.checks { list-style: none; padding: 0; margin: 0; max-width: none; }
.checks li {
  position: relative; padding-inline-start: 26px; margin-bottom: var(--s-3);
  font-size: 0.9375rem; line-height: 1.5;
}
.checks li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 7px;
  width: 8px; height: 8px; border: 1.5px solid var(--sky-blue); border-radius: 1px;
}
.checks--done li::after {
  content: ""; position: absolute; inset-inline-start: 2px; top: 10px;
  width: 7px; height: 4px; border-inline-start: 1.5px solid var(--deep-blue);
  border-bottom: 1.5px solid var(--deep-blue); transform: rotate(-45deg);
}
.checks--cols { columns: 2; column-gap: var(--s-6); }
@media (max-width: 720px) { .checks--cols { columns: 1; } }

/* Definition rows — "the business problem / what you receive" */
.dl { display: grid; gap: 0; border-top: 1px solid var(--rule); margin: 0; }
.dl > div {
  display: grid; gap: var(--s-1); padding-block: var(--s-4); border-bottom: 1px solid var(--rule);
}
@media (min-width: 760px) { .dl > div { grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-5); } }
.dl dt { font-size: var(--t-small); font-weight: 600; color: var(--ink-faint); }
.dl dd { margin: 0; font-size: 0.9375rem; }

/* --------------------------------------------------------------------------
   7. HERO — the single orchestrated moment
   -------------------------------------------------------------------------- */
.hero { background: var(--navy); color: var(--blue-grey); overflow: hidden; position: relative; }
.hero__inner {
  max-width: var(--page-max); margin-inline: auto; padding: var(--s-8) var(--gutter) var(--s-9);
  display: grid; gap: var(--s-7); align-items: center;
}
@media (min-width: 1000px) {
  .hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s-8); padding-block: var(--s-9); }
}
/* The eyebrow is gone from the homepage hero; the headline opens the page.
   Page heads elsewhere keep theirs, because "Legal" or "Sector" is information
   rather than a repeat of the masthead. */
.hero__eyebrow { display: none; }
.hero h1 {
  font-size: var(--t-display); color: var(--white); margin-bottom: var(--s-6);
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144;
  font-weight: 300; letter-spacing: -0.03em; line-height: 0.98;
  max-width: 15ch;
}
html[lang="ar"] .hero h1 { font-weight: 600; line-height: 1.3; letter-spacing: 0; max-width: 20ch; }
.hero__text { font-size: var(--t-lede); color: var(--blue-grey); max-width: 46ch; margin-bottom: var(--s-6); }
.hero__note {
  margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid rgba(122,168,212,0.3);
  font-size: var(--t-small); color: var(--azure); max-width: 52ch;
}

/* The record sheets — Office, People, Procurement, Operations.
   They used to be four decorative layers that faded out behind a summary
   panel. Salt asked for the box to be interactive, so each sheet is now a
   link to the area it names, and JavaScript upgrades the set into a
   disclosure: choosing one answers in the panel below instead of navigating.
   Without JavaScript they stay links and nothing is lost. */
.hero__stage { display: grid; gap: var(--s-4); align-content: start; }
.hero__sheets { display: grid; gap: var(--s-2); }
.hero__layer {
  display: block; text-decoration: none; cursor: pointer;
  border-radius: var(--radius-sheet);
  border: 1px solid rgba(207, 222, 229, 0.30);
  border-inline-start: 2px solid var(--sky-blue);
  background: linear-gradient(
    to var(--to-end),
    rgba(229, 238, 248, 0.16),
    rgba(229, 238, 248, 0.07)
  );
  backdrop-filter: blur(3px);
  padding: var(--s-4) var(--s-5);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              padding-inline-start var(--dur) var(--ease);
}
.hero__layer:hover,
.hero__layer:focus-visible {
  background: linear-gradient(to var(--to-end), rgba(229,238,248,0.28), rgba(229,238,248,0.14));
  border-color: rgba(207, 222, 229, 0.55);
  padding-inline-start: calc(var(--s-5) + 6px);
}
/* The chosen sheet keeps the accent and stays obviously the one in hand. */
.hero__layer[aria-expanded="true"] {
  background: linear-gradient(to var(--to-end), rgba(229,238,248,0.34), rgba(229,238,248,0.18));
  border-color: var(--sky-blue);
  border-inline-start-width: 4px;
}
.hero__layer-label {
  display: block; font-size: var(--t-base); font-weight: 600; color: var(--white);
  letter-spacing: -0.005em;
}
.hero__layer-meta { display: block; font-size: var(--t-small); color: var(--blue-grey); margin-top: 2px; }

.hero__panel {
  border: 1px solid rgba(122, 168, 212, 0.34);
  border-radius: var(--radius-sheet);
  background: rgba(4, 34, 71, 0.55);
  padding: var(--s-5);
}
.hero__resolve { display: grid; gap: var(--s-2); }
.hero__resolve strong {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 2.6vw, 1.875rem);
  color: var(--white); line-height: 1.15; letter-spacing: -0.02em;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 72;
}
html[lang="ar"] .hero__resolve strong { font-family: var(--font-ar); font-weight: 600; }
.hero__resolve span { font-size: var(--t-small); color: var(--azure); }

.hero__area { display: grid; gap: var(--s-3); }
.hero__area[hidden], .hero__resolve[hidden] { display: none; }
.hero__area strong {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  color: var(--white); line-height: 1.18; letter-spacing: -0.018em;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 48;
}
html[lang="ar"] .hero__area strong { font-family: var(--font-ar); font-weight: 600; }
.hero__area p { font-size: var(--t-small); color: var(--blue-grey); margin: 0; max-width: 46ch; }
.hero__area-link {
  justify-self: start; font-size: var(--t-small); font-weight: 600; color: var(--white);
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--sky-blue); text-decoration-thickness: 2px;
}
.hero__area-link:hover { color: var(--azure); }

/* The opening sequence: the four sheets arrive in turn, then the panel below
   them. It ends in the interactive state rather than covering it. */
.js-motion .hero__layer { opacity: 0; animation: sheetIn 620ms var(--ease) forwards; }
.js-motion .hero__layer[data-i="0"] { animation-delay: 140ms; }
.js-motion .hero__layer[data-i="1"] { animation-delay: 320ms; }
.js-motion .hero__layer[data-i="2"] { animation-delay: 500ms; }
.js-motion .hero__layer[data-i="3"] { animation-delay: 680ms; }
.js-motion .hero__panel { opacity: 0; animation: sheetIn 620ms var(--ease) 900ms forwards; }

@keyframes sheetIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* No-motion and no-JS: everything is simply present, and the sheets are links. */
.hero__layer, .hero__panel { opacity: 1; }


/* Hero photo panel */
.hero__photo { position: relative; border-radius: var(--radius-sheet); overflow: hidden; border: 1px solid rgba(122,168,212,0.35); }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; background: var(--deep-blue); }
.hero__caption {
  position: absolute; inset-inline: 0; bottom: 0; padding: var(--s-3) var(--s-4);
  background: linear-gradient(to top, rgba(4,34,71,0.92), rgba(4,34,71,0));
  font-size: var(--t-micro); color: var(--blue-grey);
}

/* --------------------------------------------------------------------------
   8. NEEDS SELECTOR
   -------------------------------------------------------------------------- */
.needs__grid { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr)); }
.need {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 56px; padding: var(--s-3) var(--s-4);
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius);
  font-size: 0.9375rem; font-weight: 500; color: var(--ink); text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.need:hover { border-color: var(--sky-blue); background: var(--unicorn-silver); color: var(--deep-blue); }
.need__mark { flex: none; width: 7px; height: 7px; background: var(--azure); border-radius: 1px; transition: background var(--dur-fast) var(--ease); }
.need:hover .need__mark { background: var(--sky-blue); }

/* --------------------------------------------------------------------------
   9. OPERATING MODEL FLOW
   -------------------------------------------------------------------------- */
.flow { display: grid; gap: var(--s-6); position: relative; }
.flow > * { min-width: 0; }
.flow__node {
  position: relative; padding-top: var(--s-5);
  border-top: 1px solid rgba(122,168,212,0.34);
}
/* The node itself — a filled square sitting on the rule, the first one lit. */
.flow__node::before {
  content: ""; position: absolute; top: -4px; inset-inline-start: 0;
  width: 7px; height: 7px; background: var(--azure);
}
.flow__node:first-child::before { background: var(--sky-blue); width: 9px; height: 9px; top: -5px; }
.flow__node h3 {
  font-size: var(--t-h4); color: var(--white); margin-bottom: var(--s-2);
  font-family: var(--font-text); font-weight: 600;
}
html[lang="ar"] .flow__node h3 { font-family: var(--font-ar); }
.flow__node p { font-size: var(--t-small); color: var(--blue-grey); margin: 0; max-width: 34ch; }
@media (min-width: 900px) {
  .flow { grid-template-columns: repeat(4, 1fr); gap: var(--s-6); }
  /* One continuous rule across all four, rather than four separate ones. */
  .flow__node { border-top-color: transparent; }
  .flow::before {
    content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px;
    background: rgba(122,168,212,0.34);
  }
}
.flow__lane {
  margin-top: var(--s-5); padding: var(--s-4) var(--s-5);
  border: 1px dashed rgba(205,198,192,0.55); border-radius: var(--radius-sheet);
  display: grid; gap: var(--s-2);
}
.flow__lane p { font-size: var(--t-small); color: var(--worldly-grey); margin: 0; max-width: 70ch; }

/* --------------------------------------------------------------------------
   10. PROCUREMENT TIMELINE (scroll-driven — the one scroll effect on the site)
   -------------------------------------------------------------------------- */
.timeline { position: relative; border-top: 1px solid var(--rule); }
.timeline__track {
  position: absolute; inset-inline-start: 0; top: 0; height: 2px; width: 0%;
  background: var(--sky-blue); transition: width 600ms var(--ease);
}
.timeline__steps { display: grid; gap: 0; }
@media (min-width: 860px) { .timeline__steps { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .timeline__steps { grid-template-columns: repeat(5, 1fr); } }
.timeline__step {
  position: relative; padding: var(--s-5) var(--s-5) var(--s-5) 0;
  border-bottom: 1px solid var(--rule);
  opacity: 0.45; transition: opacity var(--dur-slow) var(--ease);
}
html[lang="ar"] .timeline__step { padding: var(--s-5) 0 var(--s-5) var(--s-5); }
/* The node on the track. It fills as the step lights, so the sequence reads
   as it runs rather than being counted off. */
.timeline__step::before {
  content: ""; position: absolute; top: -4px; inset-inline-start: 0;
  width: 7px; height: 7px; background: var(--rule);
  transition: background var(--dur-slow) var(--ease);
}
.timeline__step[data-lit="true"]::before, .no-js .timeline__step::before { background: var(--sky-blue); }
.timeline__step[data-lit="true"], .no-js .timeline__step { opacity: 1; }
.timeline__step h3 { font-size: 1rem; font-family: var(--font-text); font-weight: 600; margin-bottom: var(--s-1); }
html[lang="ar"] .timeline__step h3 { font-family: var(--font-ar); }
.timeline__step p { font-size: var(--t-small); color: var(--fg-muted); margin: 0; }
.timeline__end {
  margin-top: var(--s-6); font-family: var(--font-display); font-size: var(--t-h2);
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 48; font-weight: 400; color: var(--deep-blue);
}
html[lang="ar"] .timeline__end { font-family: var(--font-ar); font-weight: 600; }

.scen__case {
  padding-top: var(--s-2);
  padding-inline-start: var(--s-6);
  border-inline-start: 1px solid var(--rule);
  position: relative;
}
.scen__case::before {
  content: ""; position: absolute; inset-inline-start: -1px; top: 0;
  width: 3px; height: 56px; background: var(--deep-blue);
}
.scen__case > h2 { font-size: var(--t-h2); margin-bottom: var(--s-4); max-width: 22ch; }
@media (max-width: 720px) { .scen__case { padding-inline-start: var(--s-5); } }

/* --------------------------------------------------------------------------
   11. SCENARIO SELECTOR
   -------------------------------------------------------------------------- */
.scen { display: grid; gap: var(--s-5); }
.scen > * { min-width: 0; }
@media (min-width: 980px) { .scen { grid-template-columns: 320px minmax(0, 1fr); gap: var(--s-7); } }
.scen__list { display: grid; gap: var(--s-1); align-content: start; }
.scen__tab {
  text-align: start; padding: var(--s-3) var(--s-4); min-height: 52px;
  background: none; border: 1px solid transparent; border-inline-start: 2px solid var(--rule);
  border-radius: 0; cursor: pointer; font-size: 0.9375rem; color: var(--ink-soft); font-weight: 500;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.scen__tab:hover { background: var(--unicorn-silver); color: var(--deep-blue); }
.scen__tab[aria-selected="true"] { border-inline-start-color: var(--sky-blue); color: var(--navy); font-weight: 600; background: var(--unicorn-silver); }
.scen__panel { border: 1px solid var(--rule); border-radius: var(--radius-sheet); padding: var(--s-6); background: var(--white); }
.scen__panel[hidden] { display: none; }
.scen__grid { display: grid; gap: var(--s-5); margin-top: var(--s-5); }
@media (min-width: 720px) { .scen__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); } }
.scen__h { font-size: var(--t-small); font-weight: 700; color: var(--deep-blue); margin-bottom: var(--s-3); }
.js-motion .scen__panel:not([hidden]) { animation: panelIn var(--dur) var(--ease); }
@keyframes panelIn { from { opacity: 0; } to { opacity: 1; } }

/* --------------------------------------------------------------------------
   12. INDEX RAIL (long service pages)
   -------------------------------------------------------------------------- */
.page-grid { display: grid; gap: var(--s-6); }
.page-grid > * { min-width: 0; }
@media (min-width: 1000px) {
  .page-grid { grid-template-columns: var(--rail) minmax(0, 1fr); gap: var(--s-8); align-items: start; }
}
.rail { display: none; }
@media (min-width: 1000px) {
  .rail { display: block; position: sticky; top: calc(var(--header-h) + var(--s-5)); align-self: start; }
}
.rail__title {
  font-size: var(--t-micro); font-weight: 700; color: var(--ink-faint);
  margin: 0 0 var(--s-3); padding-bottom: var(--s-2); border-bottom: 1px solid var(--rule);
}
.rail__list { list-style: none; margin: 0; padding: 0; }
.rail__list a {
  display: block; padding: 5px 0 5px var(--s-3); font-size: var(--t-small); line-height: 1.4;
  color: var(--ink-soft); text-decoration: none; border-inline-start: 2px solid transparent;
}
html[lang="ar"] .rail__list a { padding: 5px var(--s-3) 5px 0; }
.rail__list a:hover { color: var(--deep-blue); border-inline-start-color: var(--rule); }
.rail__list a[data-active="true"] { color: var(--navy); font-weight: 600; border-inline-start-color: var(--sky-blue); }

/* --------------------------------------------------------------------------
   13. BREADCRUMBS, PAGE HEAD
   -------------------------------------------------------------------------- */
.crumbs { padding-block: var(--s-4); border-bottom: 1px solid var(--rule); background: var(--white); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; max-width: none; font-size: var(--t-small); }
.crumbs li { margin: 0; display: flex; align-items: center; gap: var(--s-2); color: var(--ink-faint); }
.crumbs li + li::before { content: "/"; color: var(--worldly-grey); }
.crumbs a { color: var(--ink-soft); text-decoration: none; display: inline-block; padding-block: 2px; min-height: 24px; }
.crumbs a:hover { color: var(--deep-blue); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--ink); }

.phead { padding-block: var(--s-7) var(--s-6); border-bottom: 1px solid var(--rule); }
.phead--field { background: var(--bg-field); }
.phead__grid { display: grid; gap: var(--s-5); }
@media (min-width: 1000px) { .phead__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s-8); align-items: end; } }
.phead__ref {
  font-size: var(--t-micro); font-variant-numeric: tabular-nums; color: var(--ink-faint);
  font-weight: 600; margin: 0 0 var(--s-4); padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule); display: inline-block;
}
.phead h1 { margin-bottom: var(--s-4); }
.phead__aside {
  margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--rule);
}

/* Banner photograph beside the title — what stops a long service page
   opening as a wall of text. */
.phead--photo .phead__grid { align-items: center; }
@media (min-width: 1000px) {
  .phead--photo .phead__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); }
}
.phead__photo .photo { border-color: var(--rule); }
.phead__photo img { width: 100%; height: 100%; object-fit: cover; }
.phead__photo figcaption { display: none; }

/* Collapsible long lists */
.reveal__rest[hidden] { display: none; }
.reveal__btn {
  margin-top: var(--s-3);
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 40px; padding: var(--s-2) var(--s-4);
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius);
  font-size: 0.875rem; font-weight: 600; color: var(--deep-blue); cursor: pointer;
}
.reveal__btn:hover { background: var(--unicorn-silver); border-color: var(--azure); }
.reveal__btn::after {
  content: ""; width: 8px; height: 8px;
  border-inline-end: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform var(--dur) var(--ease);
}
.reveal__btn[aria-expanded="true"]::after { transform: translateY(1px) rotate(225deg); }

/* Interactive needs selector: the answer opens in place. */
.need[aria-expanded="true"] { border-color: var(--deep-blue); background: var(--unicorn-silver);
  color: var(--deep-blue); font-weight: 600; box-shadow: inset 3px 0 0 0 var(--sky-blue); }
html[dir="rtl"] .need[aria-expanded="true"] { box-shadow: inset -3px 0 0 0 var(--sky-blue); }
.need[aria-expanded="true"] .need__mark { background: var(--deep-blue); }
.needs__answer {
  margin-top: var(--s-5);
  border: 1px solid var(--sky-blue); border-radius: var(--radius-sheet);
  background: var(--white); padding: var(--s-6);
}
.needs__answer[hidden] { display: none; }
.js-motion .needs__answer:not([hidden]) { animation: panelIn var(--dur) var(--ease); }
.needs__answer h3 { font-size: var(--t-h3); margin-bottom: var(--s-3); }
.needs__answer-grid { display: grid; gap: var(--s-5); margin-top: var(--s-5); }
@media (min-width: 760px) { .needs__answer-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); } }

/* Delivery key chips */

/* --------------------------------------------------------------------------
   14. FORMS
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--s-5); max-width: 760px; }
.field { display: grid; gap: var(--s-2); }
.field > label { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.field__hint { font-size: var(--t-small); color: var(--ink-faint); margin: 0; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field input[type="date"], .field select, .field textarea {
  width: 100%; min-height: 46px; padding: var(--s-3) var(--s-4);
  font: inherit; font-size: 0.9375rem; color: var(--ink);
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field textarea { min-height: 128px; resize: vertical; line-height: 1.55; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%234a5a70' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; padding-inline-end: 38px; }
html[lang="ar"] .field select { background-position: left 14px center; padding-inline-end: var(--s-4); padding-inline-start: 38px; }
.field :is(input, select, textarea):focus { border-color: var(--sky-blue); box-shadow: 0 0 0 3px rgba(35,147,208,0.18); outline: none; }
.field :is(input, select, textarea)[aria-invalid="true"] { border-color: #b3261e; }
.field__error { font-size: var(--t-small); color: #b3261e; font-weight: 500; display: none; }
.field__error[data-show="true"] { display: block; }
.form__cols { display: grid; gap: var(--s-5); }
@media (min-width: 680px) { .form__cols { grid-template-columns: repeat(2, 1fr); } }
.consent { display: flex; gap: var(--s-3); align-items: flex-start; }
.consent input { width: 24px; height: 24px; margin-top: 1px; flex: none; accent-color: var(--deep-blue); }
.consent label { font-size: 0.875rem; color: var(--fg-muted); font-weight: 400; }
.form__summary {
  border: 1px solid #b3261e; border-inline-start-width: 3px; border-radius: var(--radius);
  padding: var(--s-4); background: #fdf3f2; display: none;
}
.form__summary[data-show="true"] { display: block; }
.form__summary h2 { font-size: 1rem; font-family: var(--font-text); margin-bottom: var(--s-2); color: #8c1d18; }
.form__summary ul { margin: 0; font-size: 0.875rem; }
.form__summary a { color: #8c1d18; }
.form__modules { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.chk {
  display: flex; gap: var(--s-3); align-items: flex-start; min-height: 46px;
  padding: var(--s-3) var(--s-4); border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--white); cursor: pointer; font-size: 0.875rem;
}
.chk:hover { border-color: var(--azure); background: var(--unicorn-silver); }
.chk input { width: 24px; height: 24px; margin-top: 0; flex: none; accent-color: var(--deep-blue); }
.chk:has(input:checked) { border-color: var(--sky-blue); background: var(--unicorn-silver); }

/* Progressive disclosure block */
.disclose[hidden] { display: none; }
.disclose {
  border-inline-start: 2px solid var(--sky-blue); padding-inline-start: var(--s-5);
  display: grid; gap: var(--s-5);
}
.js-motion .disclose:not([hidden]) { animation: panelIn var(--dur) var(--ease); }

.thanks {
  border: 1px solid var(--sky-blue); border-radius: var(--radius-sheet);
  padding: var(--s-6); background: var(--unicorn-silver);
}
.thanks[hidden] { display: none; }

/* --------------------------------------------------------------------------
   15. SITE SEARCH
   -------------------------------------------------------------------------- */
.search { position: fixed; inset: 0; z-index: 200; display: none; }
.search[data-open="true"] { display: block; }
.search__scrim { position: absolute; inset: 0; background: rgba(4,34,71,0.5); }
.search__panel {
  position: relative; max-width: 700px; margin: 8vh auto 0; background: var(--white);
  border: 1px solid var(--rule); border-radius: var(--radius-sheet); overflow: hidden;
  box-shadow: 0 30px 70px -40px rgba(4,34,71,0.7);
}
@media (max-width: 739px) {
  .search__panel { margin: var(--s-4) var(--s-4) 0; }
  .search__input { padding: var(--s-4) var(--s-5); font-size: 1rem; }
  .search__results a { padding: var(--s-3) var(--s-5); min-height: 52px; }
  .search__results { max-height: 64vh; }
}
.search__input {
  width: 100%; border: 0; border-bottom: 1px solid var(--rule); padding: var(--s-5) var(--s-6);
  font: inherit; font-size: 1.0625rem; color: var(--ink);
}
.search__input:focus { outline: none; border-bottom-color: var(--sky-blue); }
.search__results { max-height: 58vh; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.search__results li { margin: 0; border-bottom: 1px solid var(--rule); }
.search__results a { display: block; padding: var(--s-3) var(--s-6); text-decoration: none; color: var(--ink); }
.search__results a:hover, .search__results a:focus { background: var(--unicorn-silver); }
.search__results strong { display: block; font-size: 0.9375rem; font-weight: 600; }
.search__results span { font-size: var(--t-small); color: var(--ink-faint); }
.search__empty { padding: var(--s-6); color: var(--fg-muted); font-size: 0.9375rem; }
.search__foot { padding: var(--s-3) var(--s-6); border-top: 1px solid var(--rule); font-size: var(--t-micro); color: var(--ink-faint); background: var(--paper); }

/* Filterable service index */
.filterbar { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-5); }
.filterbar button {
  min-height: 40px; padding: var(--s-2) var(--s-4); background: var(--white);
  border: 1px solid var(--rule); border-radius: var(--radius); cursor: pointer;
  font-size: 0.875rem; font-weight: 500; color: var(--ink-soft);
}
.filterbar button:hover { border-color: var(--azure); color: var(--deep-blue); }
.filterbar button[aria-pressed="true"] { background: var(--deep-blue); border-color: var(--deep-blue); color: var(--white); }
[data-filtered="out"] { display: none; }

/* --------------------------------------------------------------------------
   16. FOOTER
   -------------------------------------------------------------------------- */
.footer { background: var(--navy); color: var(--blue-grey); padding-block: var(--s-8) var(--s-6); }
.footer a { color: var(--blue-grey); text-decoration: none; }
.footer a:hover { color: var(--white); text-decoration: underline; }
.footer__grid { display: grid; gap: var(--s-6); }
@media (min-width: 760px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .footer__grid { grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--s-7); } }
.footer h2 { font-size: var(--t-small); font-family: var(--font-text); font-weight: 700; color: var(--white); margin-bottom: var(--s-4); }
html[lang="ar"] .footer h2 { font-family: var(--font-ar); }
.footer ul { list-style: none; margin: 0; padding: 0; font-size: 0.875rem; }
.footer li { margin-bottom: var(--s-2); }
/* The reversed lockup sits straight on the navy field. The white plaque this
   rule used to carry existed only because the supplied logo had no
   transparency; site/tools/logo.py removed the need for it. */
.footer__brand img {
  height: 64px; width: auto; margin-bottom: var(--s-4);
  background: none;
}
.footer__assoc {
  display: block; margin-top: var(--s-5); padding-top: var(--s-4);
  border-top: 1px solid rgba(122,168,212,0.28);
  font-size: var(--t-small); color: var(--azure); text-decoration: none;
}
.footer__assoc-line { display: block; }
.footer__assoc img {
  display: block; height: 52px; width: auto; margin-block: var(--s-3) var(--s-2);
  background: none;
}
.footer__assoc-go {
  display: inline-block; color: var(--white); text-decoration: underline;
  text-underline-offset: 3px;
}
.footer__assoc:hover .footer__assoc-go { color: var(--azure); }

/* Salt & Associates named in body copy always links to the firm's own site. */
.assoc-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.assoc-link:hover { color: var(--accent-ink); }
.hero .assoc-link, .band--navy .assoc-link, .footer .assoc-link,
[class*="--dark"] .assoc-link { color: inherit; }
.footer__legal {
  margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid rgba(122,168,212,0.28);
  font-size: var(--t-small); color: var(--azure); display: grid; gap: var(--s-4);
}
.footer__legal p { max-width: 90ch; }
.footer__meta { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* Disclaimer band — the sitewide legal boundary, shown on every page */
.disclaimer {
  background: var(--paper); border-top: 1px solid var(--rule-warm); border-bottom: 1px solid var(--rule-warm);
  padding-block: var(--s-4);
}
.disclaimer p { font-size: var(--t-small); color: var(--ink-soft); max-width: 92ch; margin: 0; }

/* --------------------------------------------------------------------------
   17. MOBILE NAV
   -------------------------------------------------------------------------- */
.mnav { position: fixed; inset: 0; z-index: 150; display: none; }
.mnav[data-open="true"] { display: block; }
.mnav__scrim { position: absolute; inset: 0; background: rgba(4,34,71,0.5); }
.mnav__panel {
  position: absolute; inset-block: 0; inset-inline-end: 0; width: min(92vw, 460px);
  background: var(--white); overflow-y: auto; padding-bottom: var(--s-8);
  border-inline-start: 1px solid var(--rule);
}
.js-motion .mnav[data-open="true"] .mnav__panel { animation: slideIn var(--dur) var(--ease); }
@keyframes slideIn { from { transform: translateX(8%); opacity: 0.6; } to { transform: none; opacity: 1; } }
html[lang="ar"] .js-motion .mnav[data-open="true"] .mnav__panel { animation: slideInRtl var(--dur) var(--ease); }
@keyframes slideInRtl { from { transform: translateX(-8%); opacity: 0.6; } to { transform: none; opacity: 1; } }
.mnav__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: var(--white); }
.mnav__body { padding: var(--s-4) var(--s-5); }
.mnav__search {
  width: 100%; min-height: 48px; margin-bottom: var(--s-4);
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--unicorn-silver); border: 1px solid var(--rule);
  border-radius: var(--radius); cursor: pointer;
  font-size: 0.9375rem; font-weight: 500; color: var(--ink-soft); text-align: start;
}
.mnav__search:hover { border-color: var(--azure); color: var(--deep-blue); }
.mnav__search svg { width: 18px; height: 18px; flex: none; }
.mnav details { border-bottom: 1px solid var(--rule); }
.mnav summary {
  list-style: none; cursor: pointer; padding: var(--s-4) 0; min-height: 52px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  font-weight: 600; font-size: 1rem;
}
.mnav summary::-webkit-details-marker { display: none; }
.mnav summary svg { width: 12px; height: 12px; transition: transform var(--dur) var(--ease); flex: none; }
.mnav details[open] summary svg { transform: rotate(180deg); }
.mnav details > div { padding-bottom: var(--s-4); }
.mnav__sub { list-style: none; margin: 0 0 var(--s-4); padding: 0; }
.mnav__sub li { margin: 0; }
.mnav__sub a { display: block; padding: 9px 0; font-size: 0.9375rem; color: var(--ink-soft); text-decoration: none; min-height: 40px; }
.mnav__sub a:hover { color: var(--deep-blue); }
.mnav__subtitle { font-size: var(--t-small); font-weight: 700; color: var(--deep-blue); margin: var(--s-4) 0 var(--s-1); }
.mnav__flat { display: block; padding: var(--s-4) 0; min-height: 52px; font-weight: 600; font-size: 1rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }

/* Persistent mobile enquiry button */
.mobile-cta {
  position: fixed; inset-inline: var(--s-4); bottom: var(--s-4); z-index: 90;
  display: flex; gap: var(--s-2);
}
@media (min-width: 1060px) { .mobile-cta { display: none; } }
/* Keep the last of the page clear of the fixed enquiry bar. */
@media (max-width: 1059px) { body { padding-bottom: 88px; } }
.mobile-cta .btn { flex: 1; box-shadow: 0 10px 30px -14px rgba(4,34,71,0.65); }

.to-top {
  position: fixed; inset-inline-end: var(--s-5); bottom: var(--s-5); z-index: 80;
  width: 44px; height: 44px; display: none; align-items: center; justify-content: center;
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius);
  cursor: pointer; color: var(--deep-blue);
}
@media (min-width: 1060px) { .to-top[data-show="true"] { display: inline-flex; } }
.to-top svg { width: 18px; height: 18px; flex: none; }
.to-top:hover { background: var(--unicorn-silver); border-color: var(--azure); }

/* Floating WhatsApp button. Stacks above the back-to-top control on desktop
   and above the fixed enquiry bar on smaller screens, so the three fixed
   elements never overlap. */
.wa-fab {
  position: fixed; inset-inline-end: var(--s-5);
  bottom: calc(var(--s-5) + 44px + var(--s-3));
  z-index: 85; display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-4);
  background: var(--deep-blue); color: var(--white);
  border: 1px solid var(--deep-blue); border-radius: 24px;
  text-decoration: none; font-size: var(--t-small); font-weight: 600;
  box-shadow: 0 12px 30px -14px rgba(4,34,71,0.8);
}
.wa-fab svg { width: 24px; height: 24px; flex: none; }
.wa-fab:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }
.wa-fab__text { white-space: nowrap; }
@media (max-width: 1059px) {
  .wa-fab {
    inset-inline-end: var(--s-4); bottom: calc(var(--s-4) + 58px);
    padding: 0; width: 52px; min-height: 52px; border-radius: 26px;
    justify-content: center;
  }
  .wa-fab__text { position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   18. ARTICLE / INSIGHTS
   -------------------------------------------------------------------------- */
.article { max-width: var(--measure); }
.article h2 { font-size: var(--t-h3); margin-top: var(--s-7); }
.article h3 { font-size: var(--t-h4); margin-top: var(--s-6); font-family: var(--font-text); }
html[lang="ar"] .article h3 { font-family: var(--font-ar); }
.article__meta {
  display: flex; flex-wrap: wrap; gap: var(--s-4); font-size: var(--t-small);
  color: var(--ink-faint); padding-bottom: var(--s-5); border-bottom: 1px solid var(--rule); margin-bottom: var(--s-6);
}
.article__meta > span { display: inline-flex; gap: 6px; }
.article__meta b { font-weight: 600; color: var(--ink-soft); }

/* Notes beside the prose. These used to be filled blue panels; Salt found the
   blue boxes heavy against the text, so the fill and the bar are gone and the
   note is set quietly under a thin rule. The wording is unchanged — several of
   these carry the availability and quotation disclaimers the brief requires. */
.callout {
  padding-block-start: var(--s-3); border-block-start: 1px solid var(--rule);
  margin-block: var(--s-5); max-width: var(--measure);
}
.callout p { font-size: 0.9375rem; margin: 0; color: var(--ink-soft); }
/* The legal-boundary note stays a distinct object: it is the one the brief
   requires on every page that touches regulated ground. */
.callout--warn {
  border-inline-start: 2px solid var(--worldly-grey); border-block-start: 0;
  background: var(--paper); padding: var(--s-4) var(--s-5);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* Pending-approval marker — must be visible, never hidden in small print */
.pending {
  display: inline-block; padding: 2px 8px; border: 1px dashed var(--worldly-grey);
  border-radius: var(--radius); background: var(--paper); color: #7a6a58;
  font-size: var(--t-small); font-weight: 600;
}

/* FAQ */
.faq { border-top: 1px solid var(--rule); max-width: var(--measure); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer; padding: var(--s-4) 40px var(--s-4) 0; min-height: 56px;
  display: flex; align-items: center; font-weight: 600; font-size: 1rem; position: relative;
}
html[lang="ar"] .faq summary { padding: var(--s-4) 0 var(--s-4) 40px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; inset-inline-end: 8px; top: 50%; width: 11px; height: 11px;
  border-inline-end: 1.5px solid var(--deep-blue); border-bottom: 1.5px solid var(--deep-blue);
  transform: translateY(-70%) rotate(45deg); transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq details > div { padding-bottom: var(--s-5); }
.faq details > div p { font-size: 0.9375rem; color: var(--fg-muted); }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius-sheet); }
table { border-collapse: collapse; width: 100%; font-size: 0.875rem; }
caption { text-align: start; font-size: var(--t-small); color: var(--ink-faint); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--rule); }
th, td { text-align: start; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-weight: 600; color: var(--ink); background: var(--paper); font-size: var(--t-small); }
tbody tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------------------
   19. OPERATIONAL GRAPHIC SYSTEM
   Stands in for photography Salt has not yet supplied. Every instance is
   generated from the page's own data — it is a diagram, not decoration.
   -------------------------------------------------------------------------- */
.opgraphic {
  border: 1px solid var(--rule); border-radius: var(--radius-sheet);
  background: var(--paper); padding: var(--s-5); position: relative;
  max-width: 100%;
}
.opgraphic svg { width: 100%; height: auto; display: block; }
@media (max-width: 719px) {
  /* Scaled to a phone the labels fall to about 5px, so the diagram keeps its
     own size and pans instead. */
  .opgraphic { overflow-x: auto; overscroll-behavior-x: contain; }
  .opgraphic svg { min-width: 560px; }
  .opgraphic::after {
    content: attr(data-hint); display: block; margin-top: var(--s-2);
    font-size: var(--t-micro); color: var(--ink-faint);
  }
}
.opgraphic__cap {
  margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--rule-warm);
  font-size: var(--t-micro); color: var(--ink-faint);
}
.imgslot {
  border: 1px dashed var(--worldly-grey); border-radius: var(--radius-sheet);
  background: var(--paper); padding: var(--s-5); font-size: var(--t-small); color: #7a6a58;
}

/* Photo figure */
figure { margin: 0; }
.photo { border-radius: var(--radius-sheet); overflow: hidden; border: 1px solid var(--rule); }
.photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
figcaption { font-size: var(--t-micro); color: var(--ink-faint); padding-top: var(--s-2); }

/* --------------------------------------------------------------------------
   20. MOTION PREFERENCES
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js-motion .hero__layer,
  .js-motion .hero__panel { opacity: 1; }
  .timeline__step { opacity: 1; }
  a.sheet:hover { transform: none; }
}

@media print {
  .header, .footer, .mobile-cta, .to-top, .mnav, .search, .rail { display: none !important; }
  body { color: #000; }
  a { text-decoration: underline; }
}

/* ---------------------------------------------------------------------------
   Capability band — "One desk. The whole operational layer."
   --------------------------------------------------------------------------- */
.whole { }
.whole__head { max-width: 62ch; margin-bottom: var(--s-6); }
.whole__h {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  color: var(--ink);
}
.whole__p { margin: 0; color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.65; }
.whole__grid {
  display: grid;
  gap: var(--s-5) var(--s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 540px) { .whole__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .whole__grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-6) var(--s-5); } }
.whole__grid > * { min-width: 0; }
.oparea {
  border-top: 2px solid var(--rule);
  padding-top: 14px;
}
.oparea.is-here { border-top-color: var(--sky-blue); }
.oparea__h {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--deep-blue);
  margin: 0 0 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.oparea__mark {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--unicorn-silver);
  border: 1px solid var(--blue-grey);
  border-radius: 2px;
  padding: 2px 6px;
  white-space: nowrap;
}
.oparea__list { list-style: none; margin: 0; padding: 0; }
.oparea__list li { margin-bottom: 7px; }
.oparea__list a {
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--ink-soft);
  text-decoration: none;
  display: inline-block;
  min-height: 24px;
  border-bottom: 1px solid transparent;
}
.oparea__list a:hover,
.oparea__list a:focus-visible { color: var(--deep-blue); border-bottom-color: var(--sky-blue); }
.oparea.is-here .oparea__list a { color: var(--ink); }

/* ---------------------------------------------------------------------------
   Cut-out photography on a khatam field
   --------------------------------------------------------------------------- */
.cut {
  display: grid;
  gap: var(--s-6);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .cut { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-7); }
  .cut--flip .cut__stage { order: 2; }
}
.cut__stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 300px;
  padding: var(--s-4) var(--s-4) 0;
  background: linear-gradient(160deg, var(--unicorn-silver) 0%, #cfdeea 100%);
  border-radius: 3px;
  overflow: hidden;
}
/* The dark variant is a whole panel, so the copy sits on the dark field too
   rather than inheriting light type onto the white page. */
.cut--dark {
  background: linear-gradient(150deg, #06305f 0%, var(--navy) 100%);
  border-radius: 3px;
  padding: var(--s-6);
  align-items: stretch;
}
@media (min-width: 860px) { .cut--dark { padding: var(--s-6) var(--s-7); } }
.cut--dark .cut__stage {
  background: none;
  padding: 0;
  min-height: 240px;
  align-items: center;
}
.cut--dark .cut__copy { display: flex; flex-direction: column; justify-content: center; }
.cut__pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cut__pattern svg { width: 100%; height: 100%; display: block; }
.cut__img {
  position: relative;
  background: none;
  max-width: 100%;
  height: auto;
  max-height: 420px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 34px rgba(4, 34, 71, 0.26));
}
.cut__eyebrow {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 12px;
}
.cut--dark .cut__eyebrow { color: var(--azure); }
.cut__h {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
}
.cut__copy { min-width: 0; }
.cut__copy p { color: var(--ink-soft); line-height: 1.68; margin-bottom: 14px; }
.cut--dark .cut__h { color: #fff; }
.cut--dark .cut__copy p { color: var(--blue-grey); }
.cut__links { margin-top: 22px; }

/* Tall subjects — the Baghdad Tower — are given a taller stage. */
.cut--tall .cut__stage { min-height: 380px; }
.cut--tall .cut__img { max-height: 520px; }

/* The lattice as a divider between two fields. */
.khatam-div { line-height: 0; overflow: hidden; background: var(--bg-field); }
.khatam-div--dark { background: var(--navy); }
.khatam-div svg { width: 100%; height: 28px; display: block; }

/* The lattice behind the hero. */
.hero__khatam {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(52%, 520px);
  pointer-events: none;
  opacity: .9;
  z-index: 0;
}
/* The lattice fades out towards the headline rather than across it. */
.hero__khatam svg { width: 100%; height: 100%; display: block; transform: scaleY(-1); }
.hero__tower {
  position: absolute;
  background: none;
  inset-block-end: 0;
  inset-inline-end: 0;
  height: 92%;
  width: auto;
  max-width: 26%;
  object-fit: contain;
  object-position: bottom;
  opacity: .30;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 100%);
}
@media (max-width: 999px) {
  .hero__tower { display: none; }
  /* On a phone the lattice sits under the record sheets, not under the text. */
  .hero__khatam { width: 100%; opacity: .34; inset-block-start: 34%; }
}
/* A cut-out feature dropped into an editorial page breaks the measure. */
.cut-wrap { margin-block: var(--s-7); }
.article .cut-wrap { margin-inline: 0; }
.cut-wrap--tall .cut__stage { min-height: 380px; }
.cut-wrap--tall .cut__img { max-height: 520px; }
/* The lattice behind the conversion band, on every page. */
.section--khatam { position: relative; overflow: hidden; }
.section--khatam > .wrap { position: relative; z-index: 1; }
.cta__pattern {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(46%, 460px);
  pointer-events: none;
  z-index: 0;
}
.cta__pattern svg { width: 100%; height: 100%; display: block; transform: scaleY(-1); }
@media (max-width: 767px) { .cta__pattern { width: 100%; opacity: .5; } }

/* Footer contact block — real details, one per line. */
.footer__contact {
  font-style: normal;
  font-size: .8125rem;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-block: 14px;
}
.footer__contact a {
  color: var(--blue-grey);
  text-decoration: none;
  border-bottom: 1px solid rgba(122, 168, 212, 0.45);
  align-self: flex-start;
  min-height: 24px;
}
.footer__contact a:hover,
.footer__contact a:focus-visible { color: #fff; border-bottom-color: #fff; }
.footer__fullname {
  font-size: .9375rem;
  font-weight: 600;
  color: #fff;
  margin: 12px 0 4px;
  max-width: 32ch;
  line-height: 1.4;
}

/* Enquiry fallback — shown when there is no intake endpoint. */
.thanks--offline { border-inline-start: 3px solid var(--sky-blue); padding-inline-start: var(--s-5); }
.thanks--offline textarea {
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 12px;
  background: var(--bg-field);
  color: var(--ink);
  font-family: inherit;
  line-height: 1.6;
  resize: vertical;
}

/* ---------------------------------------------------------------------------
   Lease / buy selector — office search page
   --------------------------------------------------------------------------- */
.dealsel { margin-block: var(--s-5); }
.dealsel__bar {
  display: inline-flex;
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: var(--s-5);
}
.dealsel__bar button {
  font: inherit;
  font-weight: 600;
  font-size: .9375rem;
  padding: 12px 28px;
  min-height: 46px;
  border: 0;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
}
.dealsel__bar button + button { border-inline-start: 1px solid var(--rule); }
.dealsel__bar button[aria-pressed="true"] { background: var(--deep-blue); color: #fff; }
.dealsel__bar button:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
.dealsel__panel { border-top: 2px solid var(--sky-blue); padding-top: var(--s-5); }
.dealsel__panel h3 { font-size: 1.25rem; margin-bottom: 10px; }
.dealsel__panel > p { color: var(--ink-soft); line-height: 1.68; max-width: 64ch; }
.dealsel__list { margin: 16px 0 0; padding: 0 0 0 0; list-style: none; }
.dealsel__list li {
  position: relative;
  padding-inline-start: 22px;
  margin-bottom: 9px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.dealsel__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .55em;
  width: 8px; height: 8px;
  border: 1px solid var(--sky-blue);
}
.dealsel__note {
  margin-top: 18px;
  font-size: .875rem;
  color: var(--ink-faint);
  border-inline-start: 2px solid var(--worldly-grey);
  padding-inline-start: 14px;
}

/* ---------------------------------------------------------------------------
   Arabic typography — Traditional Arabic and naskh fallbacks
   --------------------------------------------------------------------------- */
/* Traditional Arabic has a small x-height and fine strokes, so Arabic pages
   need a size and leading lift to stay as readable as the Latin tree. */
html[lang="ar"] body { font-size: 1.0625rem; }
html[lang="ar"] p,
html[lang="ar"] li,
html[lang="ar"] dd { line-height: 1.95; }
html[lang="ar"] .lede { line-height: 1.95; }
html[lang="ar"] h1 { line-height: 1.35; }
html[lang="ar"] h2,
html[lang="ar"] h3 { line-height: 1.45; }
/* Latin runs inside Arabic — emails, URLs, phone numbers, acronyms — keep the
   Latin face so they do not fall back to a naskh rendering of the alphabet. */
html[lang="ar"] [dir="ltr"],
html[lang="ar"] code,
html[lang="ar"] .tabular {
  font-family: var(--font-body);
  font-size: .95em;
}

/* ---------------------------------------------------------------------------
   Latin runs inside Arabic — bidi isolation
   --------------------------------------------------------------------------- */
/* A phone number like +964 773 733 9916 is a left-to-right run. Dropped into
   an Arabic paragraph without isolation, the bidi algorithm moves the leading
   "+" to the other end and the number reads wrong. `isolate` fences the run
   off from the surrounding direction; `dir="ltr"` in the markup does the same
   job, and this is the safety net for anywhere that is missed. */
/* The floating WhatsApp button is exempt: its label is Arabic, and forcing
   `direction: ltr` on it also flips `inset-inline-end`, which threw the
   button to the wrong corner in the Arabic tree. */
html[lang="ar"] a[href^="tel:"]:not(.wa-fab),
html[lang="ar"] a[href^="mailto:"]:not(.wa-fab),
html[lang="ar"] a[href*="wa.me"]:not(.wa-fab),
html[lang="ar"] [dir="ltr"]:not(.wa-fab) {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
}
/* Inline Latin inside a sentence should not force its own line. */
html[lang="ar"] span[dir="ltr"],
html[lang="ar"] a[dir="ltr"] { display: inline-block; }

/* ---------------------------------------------------------------------------
   Scroll reveals
   --------------------------------------------------------------------------- */
/* The attribute is only ever added by script, so a visitor without JavaScript
   never meets a hidden element — the page renders exactly as it did before. */
.js-motion [data-anim=""] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  will-change: opacity, transform;
}
.js-motion [data-anim="in"] {
  opacity: 1;
  transform: none;
  will-change: auto;
}
/* A cut-out carries a little more travel, because it reads as an object. */
.js-motion .cut[data-anim=""] .cut__img { transform: translateY(20px) scale(.99); transition: transform 700ms var(--ease); }
.js-motion .cut[data-anim="in"] .cut__img { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-motion [data-anim=""],
  .js-motion [data-anim="in"] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   22. HOMEPAGE — the redesign (revision 30)

   The page is a sequence, and each block below is one step in it. Everything
   selectable is a link first and is upgraded by script, so the whole page is
   usable and crawlable with JavaScript off.
   -------------------------------------------------------------------------- */

/* --- the opening ---------------------------------------------------------- */
.chero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--navy); color: var(--white);
  min-height: clamp(560px, 82svh, 840px);
  display: grid; align-items: end;
}
.chero__media { position: absolute; inset: 0; z-index: 0; }
.chero__media .photo,
.chero__media figure { height: 100%; margin: 0; border: 0; }
.chero__media img {
  width: 100%; height: 100%; object-fit: cover; background: var(--navy);
}
.chero__media { transform: scale(1.16); }
/* A slow drift, not a zoom. It reads as depth rather than as an effect, and
   prefers-reduced-motion removes it entirely. */
.js-motion .chero__media img { animation: heroDrift 22s ease-out forwards; }
@keyframes heroDrift { from { transform: scale(1.12); } to { transform: scale(1.0); } }

/* Two stacked scrims: a vertical one so the words always have ground, and a
   horizontal one so the image still reads on the side it is strongest. */
.chero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* A night city is the brightest possible ground for white type, so the
     scrim does real work: a heavy wash on the side the words sit, and a
     vertical one so the actions and the note keep their footing too.
     Measured on the brightest pixel under the headline, not the average. */
  background:
    linear-gradient(to var(--to-end),
      rgba(4,34,71,0.94) 0%, rgba(4,34,71,0.88) 34%,
      rgba(4,34,71,0.60) 62%, rgba(4,34,71,0.34) 100%),
    linear-gradient(to top,
      rgba(4,34,71,0.92) 0%, rgba(4,34,71,0.66) 30%,
      rgba(4,34,71,0.38) 66%, rgba(4,34,71,0.52) 100%);
}
.chero__inner { position: relative; z-index: 2; padding-block: var(--s-8) var(--s-9); }
.chero__h {
  font-size: var(--t-display); color: var(--white); margin: 0 0 var(--s-4);
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144;
  font-weight: 300; letter-spacing: -0.03em; line-height: 0.98; max-width: 18ch;
  /* Balanced, so the last line is never a single orphaned word. */
  text-wrap: balance;
}
html[lang="ar"] .chero__h { font-weight: 600; line-height: 1.24; letter-spacing: 0; max-width: 20ch; }
.chero__sub {
  font-size: var(--t-lede); color: var(--blue-grey); max-width: 46ch; margin-bottom: var(--s-6);
}
.chero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.btn--lg { min-height: 56px; padding-inline: var(--s-6); font-size: 1rem; }
.chero__note {
  margin-top: var(--s-6); padding-top: var(--s-4);
  border-top: 1px solid rgba(122,168,212,0.34);
  font-size: var(--t-small); color: var(--azure); max-width: 62ch;
}
/* --- service explorer ----------------------------------------------------- */
.exp { display: grid; gap: var(--s-6); }
@media (min-width: 1000px) { .exp { grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr); align-items: start; } }
.exp__grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.exp__tile {
  display: grid; gap: var(--s-2); text-decoration: none; position: relative;
  padding: var(--s-4) var(--s-5) var(--s-5);
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-sheet);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.exp__tile::before {
  content: ""; position: absolute; inset-inline: -1px; top: -1px; height: 3px;
  background: transparent; transition: background var(--dur) var(--ease);
}
.exp__icon { color: var(--accent-ink); }
.exp__icon svg { width: 26px; height: 26px; }
.exp__name { font-weight: 600; color: var(--ink); font-size: 1.0625rem; letter-spacing: -0.01em; }
.exp__blurb { font-size: var(--t-small); color: var(--ink-soft); }
.exp__count {
  position: absolute; inset-inline-end: var(--s-4); top: var(--s-4);
  font-size: var(--t-micro); color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.exp__tile:hover { border-color: var(--azure); background: var(--bg-field); }
.exp__tile:hover::before { background: var(--worldly-grey); }
.exp__tile[aria-expanded="true"] { border-color: var(--deep-blue); background: var(--bg-field); }
.exp__tile[aria-expanded="true"]::before { background: var(--sky-blue); }

.exp__out { position: relative; }
@media (min-width: 1000px) { .exp__out { position: sticky; top: calc(var(--header-h) + 24px); } }
.exp__panel {
  border: 1px solid var(--rule); border-top: 3px solid var(--sky-blue);
  border-radius: 0 0 var(--radius-sheet) var(--radius-sheet);
  background: var(--bg-sheet); padding: var(--s-5) var(--s-6) var(--s-6);
}
.exp__panel[hidden] { display: none; }
.exp__out { display: grid; gap: var(--s-4); }
.exp__panel h3 { font-size: var(--t-h3); margin-bottom: var(--s-2); }
.exp__panel-blurb { font-size: var(--t-small); color: var(--ink-soft); margin-bottom: var(--s-4); }
.exp__services { list-style: none; margin: 0; padding: 0; display: grid; }
.exp__services li { border-top: 1px solid var(--rule-warm); }
.exp__services a {
  display: block; padding-block: var(--s-3); text-decoration: none;
  color: var(--ink); font-weight: 500; font-size: 0.9375rem;
  transition: padding-inline-start var(--dur) var(--ease), color var(--dur) var(--ease);
}
.exp__services a:hover { color: var(--deep-blue); padding-inline-start: var(--s-3); }

/* --- the journey ---------------------------------------------------------- */
.jr { display: grid; gap: var(--s-7); }
@media (min-width: 1000px) {
  .jr { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: var(--s-8); align-items: center; }
}

/* --- the wheel ------------------------------------------------------------
   A square stage. Everything inside is placed from the centre, so the whole
   thing scales with one number and nothing needs a second breakpoint. */
.jr__wheel {
  position: relative; width: min(100%, 560px); aspect-ratio: 1; justify-self: center;
}
.jr__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.jr__track2 { fill: none; stroke: rgba(122,168,212,0.26); stroke-width: 10; }
.jr__ticks line { stroke: rgba(122,168,212,0.34); stroke-width: 1.5; }
.jr__arc {
  fill: none; stroke-width: 10; stroke-linecap: butt;
  transition: stroke-dashoffset 620ms cubic-bezier(0.22,0.61,0.36,1);
}
.jr__ring { position: absolute; inset: 0; }

/* Each stage sits at a percentage of the wheel, worked out in the template,
   and is then pulled back by half its own size to centre on that point. */
.jr__step {
  /* `left`, not `inset-inline-start`. THIS IS NOT AN OVERSIGHT.
     A logical inset flips in a right-to-left document. `translate(-50%)`
     does not — CSS transforms are physical, always. Pairing the two means
     that in Arabic the element is positioned from the right edge and then
     pulled further left by half its own width, so every stage and the hub
     landed off-centre and pushed 43px of horizontal scroll onto the page.
     The mirroring is done to the coordinate instead, below, where it is
     explicit and where the transform cannot undo it. */
  position: absolute; left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  width: 116px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-decoration: none; text-align: center; color: var(--blue-grey);
  transition: color var(--dur-fast) var(--ease);
}
/* Arabic mirrors the wheel by mirroring the coordinate: stage two moves to
   the left of twelve o'clock instead of the right, and the ring turns the way
   the language reads. */
html[dir="rtl"] .jr__step { left: calc(100% - var(--x)); }
.jr__node {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--navy); box-shadow: inset 0 0 0 2px rgba(122,168,212,0.5);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.jr__num {
  font-size: 0.8125rem; font-weight: 700; color: var(--azure);
  font-variant-numeric: tabular-nums; unicode-bidi: isolate; direction: ltr;
  transition: color var(--dur) var(--ease);
}
.jr__label { font-size: 0.875rem; font-weight: 600; line-height: 1.25; }
.jr__step:hover { color: var(--white); }
.jr__step:hover .jr__node { transform: scale(1.1); box-shadow: inset 0 0 0 2px var(--azure); }
.jr__step[aria-expanded="true"] { color: var(--white); }
.jr__step[aria-expanded="true"] .jr__node {
  background: var(--sky-blue); box-shadow: inset 0 0 0 2px var(--sky-blue), 0 0 0 8px rgba(35,147,208,0.16);
}
.jr__step[aria-expanded="true"] .jr__num { color: var(--navy); }

/* The hub reads the wheel back to you, so the choice is legible without
   hunting for which label went white. */
.jr__hub {
  /* Physical `left` for the same reason as .jr__step above. At 50% the
     mirrored value is also 50%, so this one needs no RTL override — it just
     must not be a logical inset fighting a physical transform. */
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 46%; display: grid; gap: 4px; text-align: center; pointer-events: none;
}
.jr__hub-k {
  font-size: var(--t-small); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--azure);
}
.jr__hub-v {
  font-family: var(--font-display); font-weight: 300; line-height: 1.1;
  font-size: clamp(1.5rem, 4.6vw, 2.25rem); color: var(--white);
}
@media (max-width: 720px) {
  .jr__step { width: 88px; }
  .jr__label { font-size: 0.75rem; }
}
/* Very narrow: the ring keeps its numbers and the hub carries the words, so
   six labels are never crushed into a 320px circle. */
@media (max-width: 460px) {
  .jr__label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  }
  .jr__step { width: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .jr__arc { transition: none; }
  .jr__step:hover .jr__node { transform: none; }
}

.jr__stage {
  display: inline-block; font-size: var(--t-small); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--azure);
  unicode-bidi: isolate;
}

.jr__panel {
  display: grid; gap: var(--s-4); justify-items: start;
  border: 1px solid rgba(122,168,212,0.28); border-radius: var(--radius-sheet);
  background: rgba(229,238,248,0.06); padding: var(--s-6);
}
.jr__panel[hidden] { display: none; }
.jr__out { display: grid; gap: var(--s-4); }
.jr__panel h3 { color: var(--white); font-size: var(--t-h3); margin: 0; }
.jr__panel > p { color: var(--blue-grey); margin: 0; max-width: 62ch; }
.jr__services {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2);
}
.jr__services a {
  display: inline-block; padding: 6px var(--s-3); font-size: var(--t-small);
  border: 1px solid rgba(122,168,212,0.5); border-radius: 20px;
  color: var(--blue-grey); text-decoration: none;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.jr__services a:hover { color: var(--white); border-color: var(--sky-blue); }

/* --- coverage ------------------------------------------------------------- */
.cov { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.cov__card {
  padding: var(--s-5) var(--s-5) var(--s-6);
  border: 1px solid var(--rule); border-radius: var(--radius-sheet);
  border-top: 3px solid var(--worldly-grey); background: var(--white);
}
/* The one real office is the only one marked in the accent. Nothing else is
   allowed to look like an office. */
.cov__card--office { border-top-color: var(--sky-blue); background: var(--bg-field); }
.cov__card--regular { border-top-color: var(--azure); }
.cov__kind {
  font-size: var(--t-micro); color: var(--ink-faint); font-weight: 600;
  letter-spacing: 0.04em; margin-bottom: var(--s-2);
}
.cov__card h3 { font-size: var(--t-h3); margin-bottom: var(--s-3); }
.cov__card p:last-child { margin: 0; font-size: 0.9375rem; color: var(--ink-soft); }
.cov__note {
  margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid var(--rule);
  font-size: var(--t-small); color: var(--ink-soft); max-width: 78ch;
}

/* --- scenarios ------------------------------------------------------------ */
.scase__grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.scase {
  display: grid; text-decoration: none; overflow: hidden;
  border: 1px solid var(--rule); border-radius: var(--radius-sheet);
  background: var(--white); transition: border-color var(--dur) var(--ease);
}
.scase__media { display: block; overflow: hidden; }
.scase__media .photo, .scase__media figure { margin: 0; border: 0; border-radius: 0; }
.scase__media img { transition: transform 900ms var(--ease); width: 100%; }
.scase:hover { border-color: var(--azure); }
.scase:hover .scase__media img { transform: scale(1.04); }
.scase__body { display: grid; gap: var(--s-2); padding: var(--s-5); }
.scase__tag {
  font-size: var(--t-micro); color: var(--ink-faint); font-weight: 600;
  letter-spacing: 0.04em;
}
.scase__h { font-family: var(--font-display); font-size: var(--t-h3); color: var(--ink); letter-spacing: -0.012em; }
html[lang="ar"] .scase__h { font-family: var(--font-ar); font-weight: 600; letter-spacing: 0; }
.scase__p { font-size: 0.9375rem; color: var(--ink-soft); }
.scase__link {
  margin-top: var(--s-2); font-size: var(--t-small); font-weight: 600; color: var(--deep-blue);
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--sky-blue); text-decoration-thickness: 2px;
}

/* --- close ---------------------------------------------------------------- */
.close { display: grid; gap: var(--s-4); justify-items: start; }
.close__h { color: var(--white); font-size: var(--t-h1); margin: 0; max-width: 20ch; }
.close__p { color: var(--blue-grey); font-size: var(--t-lede); max-width: 58ch; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .js-motion .chero__media img { animation: none; transform: none; }
  .scase:hover .scase__media img { transform: none; }
}

/* Mirror every gradient direction in the Arabic tree. */
html[dir="rtl"] { --to-end: left; }

/* --------------------------------------------------------------------------
   23. PAGE OPENING — services, products, sectors (revision 30)

   The page head used to be a photograph in a box beside a title. It is now
   the page sitting on the photograph, which is the same device as the
   homepage at a smaller scale, so a visitor arriving from a search result
   lands on something that belongs to the same site.
   -------------------------------------------------------------------------- */
.phero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--navy); color: var(--white);
  display: grid; align-items: end;
  min-height: clamp(340px, 46svh, 460px);
}
.phero--plain { background: var(--navy); min-height: 0; }
.phero__media { position: absolute; inset: 0; z-index: 0; }
.phero__media .photo, .phero__media figure { height: 100%; margin: 0; border: 0; border-radius: 0; }
.phero__media img { width: 100%; height: 100%; object-fit: cover; background: var(--navy); }
.phero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to var(--to-end),
      rgba(4,34,71,0.93) 0%, rgba(4,34,71,0.84) 40%,
      rgba(4,34,71,0.52) 72%, rgba(4,34,71,0.30) 100%),
    linear-gradient(to top, rgba(4,34,71,0.88) 0%, rgba(4,34,71,0.42) 55%, rgba(4,34,71,0.50) 100%);
}
.phero__inner { position: relative; z-index: 2; padding-block: var(--s-7) var(--s-7); }
.phero__kicker {
  font-size: var(--t-small); font-weight: 600; color: var(--azure);
  margin: 0 0 var(--s-3);
}
.phero h1 { color: var(--white); margin-bottom: var(--s-4); max-width: 20ch; }
.phero__lede {
  font-size: var(--t-lede); color: var(--blue-grey); max-width: 58ch; margin: 0;
}
.phero__actions { margin-top: var(--s-5); }
.phero--plain .phero__inner { padding-block: var(--s-7); }

/* --- the deliverables band ------------------------------------------------ */
/* What the client actually gets, immediately under the opening rather than
   seventh on the page. Ruled columns, not another card grid. */
.deliv { background: var(--bg-field); border-bottom: 1px solid var(--rule); padding-block: var(--s-6); }
.deliv__h { font-size: var(--t-h4); font-family: var(--font-text); font-weight: 600;
  color: var(--ink-soft); margin-bottom: var(--s-4); letter-spacing: 0.01em; }
html[lang="ar"] .deliv__h { font-family: var(--font-ar); }
.deliv__list {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.deliv__list li {
  position: relative; padding-top: var(--s-3); padding-inline-start: var(--s-5);
  border-top: 2px solid var(--sky-blue);
  font-size: 0.9375rem; color: var(--ink);
}
.deliv__list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: calc(var(--s-3) + 0.35em);
  width: 9px; height: 5px; border-inline-start: 2px solid var(--accent-ink);
  border-block-end: 2px solid var(--accent-ink); transform: rotate(-45deg);
}
@media (max-width: 720px) { .deliv__list { gap: var(--s-3); } }

/* --------------------------------------------------------------------------
   24. MOTION-ASSISTED BLOCKS (revision 33)

   Everything below is styled to be complete and visible with no JavaScript.
   The script adds movement; it never supplies layout, visibility or content.
   -------------------------------------------------------------------------- */

/* --- the opening: parallax layer ------------------------------------------ */
/* The media is taller than the section so there is room to move. With no
   script it simply sits still, cropped as before. */
.chero__media { will-change: transform; }
.js-motion .chero { --hero-parallax: 0px; }

/* Headline reveal. The words are in the markup and visible; the script splits
   them into lines and animates those. If it never runs, nothing changes. */
.chero__line { display: block; overflow: hidden; }
.chero__line > span { display: block; }

/* --- service explorer: category photograph -------------------------------- */
.exp__photo { display: block; margin-bottom: var(--s-4); overflow: hidden; border-radius: var(--radius-sheet); }
.exp__photo .photo, .exp__photo figure { margin: 0; border: 0; border-radius: var(--radius-sheet); }
.exp__tile { will-change: transform; }

/* --- the carousel --------------------------------------------------------- */
/* Scroll-snap does the work. Touch, trackpad and keyboard all function before
   any script loads; the script adds arrows, dots and pointer dragging. */
.carou { position: relative; }
.carou__track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: min(86%, 460px);
  gap: var(--s-5);
  overflow-x: auto; overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block-end: var(--s-2);
}
.carou__track::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .carou__track { grid-auto-columns: 46%; } }
.carou__track > * { scroll-snap-align: start; }
.carou.is-dragging .carou__track { scroll-snap-type: none; cursor: grabbing; }
.carou.is-dragging .scase { pointer-events: none; }

.carou__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); margin-top: var(--s-5);
}
.carou__dots { display: flex; gap: var(--s-2); }
.carou__dot {
  width: 30px; height: 4px; padding: 0; border: 0; cursor: pointer;
  background: var(--rule-warm); border-radius: 2px;
  transition: background var(--dur) var(--ease);
}
.carou__dot[aria-pressed="true"] { background: var(--deep-blue); }
.carou__dot:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.carou__arrows { display: flex; gap: var(--s-2); }
.carou__arrow {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius);
  color: var(--deep-blue); cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.carou__arrow:hover { border-color: var(--azure); background: var(--bg-field); }
.carou__arrow[disabled] { opacity: 0.4; cursor: default; }
.carou__arrow svg { width: 20px; height: 20px; }
/* The arrows point the way the reader reads. */
html[dir="rtl"] .carou__arrow svg { transform: scaleX(-1); }

/* --- the coverage map ----------------------------------------------------- */
.imap { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 1000px) {
  .imap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); }
}
.imap__stage { justify-self: center; width: min(100%, 560px); }
.imap__svg { width: 100%; height: auto; display: block; overflow: visible; }
.imap__src { margin: var(--s-3) 0 0; font-size: 0.75rem; color: rgba(122,168,212,0.7); }
.imap__side { display: grid; gap: var(--s-5); }

/* Every governorate is a shape first and a state second. The fills say what
   we do there; nothing here says where a building is. */
.gov {
  stroke: rgba(4,34,71,0.55); stroke-width: 1.2; stroke-linejoin: round;
  transition: fill var(--dur) var(--ease), fill-opacity var(--dur) var(--ease);
  cursor: pointer;
}
.gov[data-band="office"]      { fill: var(--sky-blue);  fill-opacity: 1; stroke: var(--white); stroke-width: 2; }
.gov[data-band="regular"]     { fill: var(--sky-blue);  fill-opacity: 0.42; }
.gov[data-band="coordinated"] { fill: var(--azure);     fill-opacity: 0.20; }
.gov[data-band="outside"]     { fill: var(--worldly-grey); fill-opacity: 0.12; }
.gov:hover { fill-opacity: 0.66; }

/* Dimming is only ever applied by the script, so with no script every
   governorate reads at its own weight and nothing is hidden. */
.js-motion .imap[data-focus] .gov { fill-opacity: 0.10; }
.js-motion .imap[data-focus] .gov[data-lit="true"] { fill-opacity: 0.78; }
.js-motion .imap[data-focus] .gov[data-band="outside"][data-lit="true"] { fill-opacity: 0.30; }

/* The oil-and-gas layer is off until asked for, and it is a separate layer so
   it can never be mistaken for a coverage fill. */
.imap__oil { opacity: 0; pointer-events: none; transition: opacity var(--dur-slow) var(--ease); }
.imap[data-oil="on"] .imap__oil { opacity: 1; }

.imap__pin { fill: var(--sky-blue); stroke: var(--white); stroke-width: 2; }
.imap__dot { fill: none; stroke: var(--white); stroke-width: 2.4; }
.imap__halo { fill: var(--sky-blue); opacity: 0.18; }
.imap__lbl {
  fill: var(--white); font-size: 21px; font-weight: 600;
  paint-order: stroke; stroke: rgba(4,34,71,0.7); stroke-width: 4px;
}
html[dir="rtl"] .imap__lbl { text-anchor: end; }

.imap__cards { display: grid; gap: var(--s-3); }
.cov__card {
  display: grid; gap: 4px; text-align: start; cursor: pointer;
  padding: var(--s-4); border: 1px solid rgba(122,168,212,0.28);
  border-inline-start-width: 3px; border-radius: var(--radius);
  background: rgba(229,238,248,0.05);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.cov__card--office      { border-inline-start-color: var(--sky-blue); }
.cov__card--regular     { border-inline-start-color: var(--sky-blue); }
.cov__card--coordinated { border-inline-start-color: var(--worldly-grey); }
.cov__card--outside     { border-inline-start-color: rgba(205,198,192,0.5); }
.cov__card:hover { background: rgba(229,238,248,0.12); border-color: rgba(122,168,212,0.5); }
.cov__card[aria-pressed="true"] { background: rgba(229,238,248,0.16); }
.cov__kind { font-size: var(--t-small); color: var(--azure); }
.cov__place { font-family: var(--font-display); font-weight: 300; font-size: var(--t-h3); color: var(--white); line-height: 1.15; }
.cov__p { font-size: 0.9375rem; color: var(--blue-grey); }
.cov__note { margin: var(--s-6) 0 0; padding-top: var(--s-4); border-top: 1px solid rgba(122,168,212,0.3); font-size: var(--t-small); color: var(--azure); max-width: 74ch; }

/* --- the governorate list -------------------------------------------------- */
.gov__h { margin: 0 0 var(--s-3); font-size: var(--t-small); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--azure); }
.gov__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gov-chip {
  min-height: 34px; padding: 0 var(--s-3); cursor: pointer;
  background: transparent; color: var(--blue-grey);
  border: 1px solid rgba(122,168,212,0.3); border-radius: 17px;
  font-size: 0.8125rem; font-weight: 500;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.gov-chip:hover { color: var(--white); border-color: var(--azure); }
.gov-chip[aria-pressed="true"] { background: var(--sky-blue); border-color: var(--sky-blue); color: var(--navy); font-weight: 700; }
.gov-chip[data-band="outside"] { opacity: 0.55; }
/* The oil layer marks its governorates in the list too, so the map and the
   list never disagree about which ones they are. */
.imap[data-oil="on"] .gov-chip[data-oil="true"] { box-shadow: inset 0 -3px 0 0 rgba(35,147,208,0.85); }

.gov__read { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3); margin: var(--s-4) 0 0; }
.gov__read-n { font-family: var(--font-display); font-weight: 300; font-size: var(--t-h3); color: var(--white); }
.gov__read-k { font-size: var(--t-small); color: var(--azure); }

/* --- the oil-and-gas switch ------------------------------------------------ */
.oil-sw { display: inline-flex; align-items: center; gap: var(--s-3); cursor: pointer; margin-top: var(--s-4); font-size: 0.9375rem; color: var(--blue-grey); }
.oil-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.oil-sw__ui {
  flex: none; width: 44px; height: 24px; border-radius: 12px; position: relative;
  background: rgba(122,168,212,0.24); box-shadow: inset 0 0 0 1px rgba(122,168,212,0.4);
  transition: background var(--dur) var(--ease);
}
.oil-sw__ui::after {
  content: ""; position: absolute; top: 3px; inset-inline-start: 3px;
  width: 18px; height: 18px; border-radius: 50%; background: var(--white);
  transition: transform var(--dur) var(--ease);
}
.oil-sw input:checked + .oil-sw__ui { background: var(--sky-blue); }
.oil-sw input:checked + .oil-sw__ui::after { transform: translateX(20px); }
html[dir="rtl"] .oil-sw input:checked + .oil-sw__ui::after { transform: translateX(-20px); }
.oil-sw input:focus-visible + .oil-sw__ui { outline: 3px solid var(--sky-blue); outline-offset: 3px; }
.oil-sw__note { margin: var(--s-2) 0 0; font-size: 0.8125rem; color: rgba(122,168,212,0.85); max-width: 52ch; }
@media (prefers-reduced-motion: reduce) {
  .gov, .imap__oil, .oil-sw__ui, .oil-sw__ui::after { transition: none; }
}

/* --- the mega-menu and drawer, animated ----------------------------------- */
.mega, .mnav__sheet { will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  .carou__track { scroll-behavior: auto; }
  .js-motion .imap[data-active] .imap__band,
  .js-motion .imap[data-active] .imap__field > g { opacity: 1; }
}

/* Native view transitions between pages, opted into by enhance.js only when
   the browser supports them and motion is allowed. A cross-fade of the whole
   document; nothing is scripted, so a slow navigation cannot leave a blank. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }
html:not(.has-vt) { view-transition-name: none; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ==========================================================================
   25. THE INTERACTIVE PASS — revision 34
   The USP line, the figures band, the needs selector's answer panel, and the
   light that follows the pointer across a grid.
   ========================================================================== */

/* --- the USP line above the headline -------------------------------------- */
/* A rule, then the words. The rule is a pseudo-element on the span rather
   than a border on the paragraph, so it sits against the type at any length
   and flips with the writing direction for free. */
.chero__kicker {
  margin: 0 0 var(--s-4); font-size: var(--t-small); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--azure);
  display: flex; align-items: center; gap: var(--s-3);
}
.chero__kicker > span { display: inline-flex; align-items: center; gap: var(--s-3); }
.chero__kicker > span::before {
  content: ""; width: 34px; height: 2px; flex: none;
  background: var(--sky-blue);
}
@media (max-width: 640px) {
  .chero__kicker { font-size: 0.75rem; letter-spacing: 0.06em; }
  .chero__kicker > span::before { width: 22px; }
}

/* --- the figures band ------------------------------------------------------ */
.section--figs {
  padding-block: var(--s-7); background: var(--unicorn-silver);
  border-bottom: 1px solid var(--rule);
}
.figs__lead {
  margin: 0 0 var(--s-5); font-size: var(--t-small); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--deep-blue);
}
.figs {
  /* The global `ul` rule caps lists at the reading measure, which is right
     for prose and wrong for a row of four figures — it squeezed them into the
     left half of the page and wrapped the fourth onto its own line. */
  list-style: none; margin: 0; padding: 0; max-width: none;
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}
.fig {
  display: flex; flex-direction: column; gap: 6px;
  padding-inline-start: var(--s-4);
  border-inline-start: 2px solid var(--azure);
}
.fig:last-child { border-inline-start-color: var(--sky-blue); }
.fig__n {
  font-family: var(--font-display); font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: 1; font-weight: 300; color: var(--deep-blue);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  /* Latin digits inside an Arabic paragraph need their own direction or the
     surrounding RTL run reorders them. */
  unicode-bidi: isolate; direction: ltr;
}
.fig__l { font-size: var(--t-small); color: var(--ink-soft); }
html[dir="rtl"] .fig__n { text-align: start; }

/* --- the needs selector, with answers -------------------------------------- */
.needs { display: grid; gap: var(--s-5); }
@media (min-width: 1000px) {
  .needs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .needs__grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
  .needs__out { position: sticky; top: 104px; }
}
.need__label { flex: 1; }
/* display:grid on the panel would otherwise beat [hidden] and stack all
   eight answers on top of each other — the same trap as the explorer. */
.need__panel[hidden] { display: none; }
.need__panel {
  display: grid; gap: var(--s-4);
  padding: var(--s-5); background: var(--white);
  border: 1px solid var(--rule); border-radius: var(--radius);
  border-top: 3px solid var(--sky-blue);
}
.need__answer {
  margin: 0; font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.125rem, 2.2vw, 1.5rem); line-height: 1.32; color: var(--navy);
}
.need__services { list-style: none; margin: 0; padding: 0; display: grid; }
.need__services li + li { border-top: 1px solid var(--rule); }
.need__services a {
  display: block; padding: var(--s-3) 0; min-height: 44px;
  font-size: 0.9375rem; font-weight: 500; color: var(--ink); text-decoration: none;
}
.need__services a:hover { color: var(--deep-blue); }
.need__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }

/* Without JavaScript every answer is on the page, so it must read as a list
   rather than as eight overlapping cards. */
.needs__out { display: grid; gap: var(--s-4); }

/* --- the light that follows the pointer ------------------------------------ */
/* One radial gradient on the grid itself, under the tiles. The tiles keep
   their own opaque backgrounds, so the light reads in the gaps and around the
   edges — enough to make the grid feel lit without washing out any text.
   Two custom properties are all the script writes. */
.exp__grid, .needs__grid { position: relative; isolation: isolate; }
.exp__grid::before, .needs__grid::before {
  content: ""; position: absolute; inset: calc(var(--s-4) * -1); z-index: -1;
  pointer-events: none; opacity: 0;
  transition: opacity 260ms var(--ease);
  background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%),
              rgba(35,147,208,0.20), rgba(35,147,208,0) 70%);
}
.exp__grid[data-glow]::before, .needs__grid[data-glow]::before { opacity: 1; }

/* A tile that is hovered lifts a little. Transform only — nothing reflows. */
@media (hover: hover) and (pointer: fine) {
  .exp__tile, .need {
    transition: border-color var(--dur-fast) var(--ease),
                background var(--dur-fast) var(--ease),
                transform 220ms var(--ease),
                box-shadow 220ms var(--ease);
  }
  .exp__tile:hover, .need:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -20px rgba(4,34,71,0.55);
  }
}
@media (prefers-reduced-motion: reduce) {
  .exp__tile:hover, .need:hover { transform: none; box-shadow: none; }
  .exp__grid::before, .needs__grid::before { display: none; }
}

/* ==========================================================================
   26. ON THIS PAGE — the contents list, zone 2 of every long page
   ========================================================================== */
.otp {
  background: var(--bg-field);
  border-bottom: 1px solid var(--rule);
  padding-block: var(--s-5);
}
.otp__h {
  margin: 0 0 var(--s-3); font-family: var(--font-sans);
  font-size: var(--t-small); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--deep-blue);
}
.otp__list {
  list-style: none; margin: 0; padding: 0; max-width: none;
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3);
  /* Numbered for the reader, not with a marker: a counter on the link keeps
     the number inside the hit area and out of the accessible name. */
  counter-reset: otp;
}
.otp__list li { counter-increment: otp; }
.otp__list a {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 0 var(--s-3);
  background: var(--white); border: 1px solid var(--rule); border-radius: 18px;
  font-size: 0.875rem; font-weight: 500; color: var(--ink); text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.otp__list a::before {
  content: counter(otp);
  font-size: 0.75rem; font-weight: 700; color: var(--azure);
  font-variant-numeric: tabular-nums; unicode-bidi: isolate; direction: ltr;
}
.otp__list a:hover { border-color: var(--sky-blue); color: var(--deep-blue); }
.otp__list a:hover::before { color: var(--sky-blue); }
/* On a page that also carries the sticky side rail, this band is the phone's
   version of it and stands down at the width the rail appears. Which of the
   two a page gets is decided in Python, where it is knowable, rather than by
   a selector trying to guess at the shape of the document. */
@media (min-width: 1000px) { .otp--narrow { display: none; } }
@media print { .otp { display: none; } }

/* --------------------------------------------------------------------------
   27. WHAT YOU RECEIVE — the deliverable under an offering
   Salt writes each research offering as a description and then, separately,
   the thing you get. Rendering the second as another bullet lost that
   distinction, so it is pulled out and given the weight it was written with.
   -------------------------------------------------------------------------- */
.gives {
  display: grid; gap: 4px; margin: var(--s-4) 0 0;
  padding: var(--s-4) var(--s-5);
  background: var(--bg-field);
  border-inline-start: 3px solid var(--sky-blue);
  border-radius: 0 var(--radius) var(--radius) 0;
  max-width: 72ch;
}
html[dir="rtl"] .gives { border-radius: var(--radius) 0 0 var(--radius); }
.gives__k {
  font-size: var(--t-small); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--deep-blue);
}
.gives__v { color: var(--ink); line-height: 1.6; }