/* ─── 01-reset.css ─── */
/* ==========================================================================
   Reset
   Opinionated, small, and written for a bilingual document. Anything that
   assumes a left-to-right reading order is expressed with logical properties.
   ========================================================================== */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The sticky header must not cover a heading when an anchor is followed. */
  scroll-padding-block-start: calc(var(--header-h) + 1.5rem);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  min-height: 100svh;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  color: var(--fg);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Locking scroll while the mobile drawer is open. */
html.is-nav-open,
html.is-nav-open body {
  overflow: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

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

p,
li {
  text-wrap: pretty;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

address {
  font-style: normal;
}

table {
  border-collapse: collapse;
  width: 100%;
}

summary {
  cursor: pointer;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

hr {
  border: 0;
  border-block-start: 1px solid var(--line);
}

/* --------------------------------------------------------------- focus ring
   One visible, high-contrast ring everywhere. Never remove it — the site is
   used by procurement staff on locked-down corporate machines who tab. */

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

:focus:not(:focus-visible) {
  outline: none;
}

::selection {
  background: var(--maroon);
  color: var(--on-maroon);
}

/* ------------------------------------------------------------- skip link */

.skip-link {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 999;
  transform: translateY(-120%);
  padding: 0.75rem 1.25rem;
  background: var(--maroon);
  color: var(--on-maroon);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--dur-2) var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

/* --------------------------------------------------------- screen-reader */

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

[hidden] {
  display: none !important;
}


/* ─── 02-tokens.css ─── */
/* ==========================================================================
   Design tokens
   ==========================================================================

   Palette
   -------
   Two fixed brand colours, sampled from the client's own Illustrator artwork:

     espresso   #331813   the SQS wordmark
     stone      #5A5352   the Q's blade

   To those we add Qatar's national maroon #8A1538, which carries the national
   identity the brief asked for, and a brass tone drawn from the printed
   business-card artwork. Espresso does the structural work — headings, dark
   bands, the logo — while maroon is reserved for action and emphasis, so it
   never becomes wallpaper. Brass appears only as a hairline or a small mark.

   Measured contrast on the cream ground (#FAF8F5, relative luminance 0.940):

     espresso  #331813  on cream ....... 15.5:1   AAA  body and headings
     ink       #2A1512  on cream ....... 15.0:1   AAA  body copy
     stone     #5A5352  on cream ........ 7.1:1   AAA  secondary copy
     maroon    #8A1538  on cream ........ 8.8:1   AAA  links and buttons
     maroon    #8A1538  on white ........ 9.4:1   AAA
     cream     #FAF8F5  on espresso .... 15.5:1   AAA  reversed sections
     brass     #D4A853  on espresso ..... 7.4:1   AAA  reversed accents
     stone-lt  #A8A09E  on espresso ..... 6.4:1   AAA  reversed secondary

   The site commits to one light identity rather than a light/dark pair. Depth
   comes from alternating cream, sand and espresso bands — a deliberate choice:
   it keeps twelve pages visually consistent, and it is what Gulf corporate
   buyers expect. `color-scheme: light` is declared so form controls and
   scrollbars do not invert under a dark OS theme.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ------------------------------------------------------------ brand ink */
  --espresso: #331813;
  --espresso-700: #4a251d;
  --espresso-500: #6b3a2e;
  --stone: #5a5352;
  --stone-400: #8b8280;
  --stone-300: #a8a09e;

  /* --------------------------------------------------------- Qatar maroon */
  --maroon: #8a1538;
  --maroon-600: #a01a41;
  --maroon-800: #6d1029;
  --maroon-900: #4d0b1d;

  /* ---------------------------------------------------------------- brass */
  --brass: #b8873b;
  --brass-light: #d4a853;
  --brass-pale: #e8d5ae;

  /* ------------------------------------------------------------- neutrals */
  --cream: #faf8f5;
  --sand: #f2ede7;
  --sand-deep: #e8e0d6;
  --white: #ffffff;
  --ink: #2a1512;

  /* ------------------------------------------------------- semantic roles */
  --bg: var(--cream);
  --bg-alt: var(--sand);
  --bg-deep: var(--espresso);
  --surface: var(--white);
  --surface-sunken: var(--sand);

  --fg: var(--ink);
  --fg-strong: var(--espresso);
  --fg-muted: var(--stone);
  --fg-faint: var(--stone-400);

  --on-dark: var(--cream);
  --on-dark-muted: var(--stone-300);
  --on-maroon: #fffaf7;

  --accent: var(--maroon);
  --accent-hover: var(--maroon-600);
  --accent-quiet: color-mix(in oklab, var(--maroon) 8%, transparent);

  --line: color-mix(in oklab, var(--espresso) 12%, transparent);
  --line-strong: color-mix(in oklab, var(--espresso) 22%, transparent);
  --line-dark: color-mix(in oklab, var(--cream) 16%, transparent);

  --focus: var(--maroon);

  /* ----------------------------------------------------------- typography */
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', monospace;

  /* Fluid scale, 320px → 1440px. Ratios: 1.2 small end, 1.28 large end. */
  --step--2: clamp(0.7813rem, 0.7626rem + 0.0932vw, 0.84rem);
  --step--1: clamp(0.875rem, 0.8382rem + 0.1839vw, 0.99rem);
  --step-0: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
  --step-1: clamp(1.125rem, 1.0435rem + 0.4076vw, 1.375rem);
  --step-2: clamp(1.2656rem, 1.1291rem + 0.6826vw, 1.6875rem);
  --step-3: clamp(1.4238rem, 1.2091rem + 1.0734vw, 2.0863rem);
  --step-4: clamp(1.6019rem, 1.2765rem + 1.6272vw, 2.6069rem);
  --step-5: clamp(1.8019rem, 1.3213rem + 2.4033vw, 3.2578rem);
  --step-6: clamp(2.0273rem, 1.3277rem + 3.498vw, 4.0723rem);
  /* The display size. Only the homepage headline uses it, and it is meant to
     be uncomfortable on a wide screen — a hero that is merely large reads as a
     template, and this is the one moment on the site allowed to be loud. */
  --step-7: clamp(2.4rem, 1.35rem + 5.2vw, 5.6rem);

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-body: 1.65;
  --leading-loose: 1.8;

  --tracking-tight: -0.022em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.12em;

  /* ---------------------------------------------------------------- space
     A 4px-rooted scale. Section padding is fluid so the rhythm holds from a
     360px phone to a 2560px monitor without a stack of breakpoints. */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;

  --section-y: clamp(3.5rem, 2.4rem + 5.5vw, 7rem);
  --section-y-lg: clamp(4.5rem, 2.8rem + 8.5vw, 9.5rem);
  --gutter: clamp(1.25rem, 0.9rem + 1.75vw, 2.5rem);

  /* ------------------------------------------------------------- geometry */
  --container: 78rem;
  --container-wide: 88rem;
  --container-text: 44rem;

  /* The SQS wordmark is cut from thick square strokes with right-angle
     notches. A site built on 14px radii and pill buttons contradicts it and,
     worse, lands on the default look of every template on the internet.
     Everything structural is square; the only curve on the page is the blade
     of the Q in the logo. */
  --radius-xs: 0px;
  --radius-s: 0px;
  --radius-m: 0px;
  --radius-l: 0px;
  --radius-xl: 0px;
  --radius-pill: 0px;

  /* The one hairline that does all the ruling work. */
  --rule: 1px solid var(--line);
  --rule-strong: 1px solid var(--line-strong);
  --rule-dark: 1px solid var(--line-dark);

  /* The module. Taken from the square counter of the Q in the wordmark, whose
     stroke is one fifth of its width. Section rules, index numbers and the
     grid gutters are all multiples of it, so the page has a measure rather
     than a set of arbitrary paddings. */
  --module: clamp(2.5rem, 1.8rem + 3.4vw, 4.5rem);
  --stroke: calc(var(--module) / 5);

  --header-h: 4.5rem;

  /* -------------------------------------------------------------- shadows
     Tinted with the brand brown rather than neutral black, so cards sit on
     the cream ground instead of floating above a grey one. */
  --shadow-xs: 0 1px 2px rgb(51 24 19 / 0.05);
  --shadow-s: 0 2px 6px rgb(51 24 19 / 0.06), 0 1px 2px rgb(51 24 19 / 0.04);
  --shadow-m: 0 8px 24px -8px rgb(51 24 19 / 0.14), 0 2px 6px rgb(51 24 19 / 0.05);
  --shadow-l: 0 24px 56px -16px rgb(51 24 19 / 0.2), 0 6px 16px rgb(51 24 19 / 0.07);
  --shadow-maroon: 0 12px 32px -10px rgb(138 21 56 / 0.42);

  /* --------------------------------------------------------------- motion
     Durations are short enough to feel responsive and long enough to read.
     `--ease-out-expo` is the workhorse for entrances; `--ease-spring` gives
     buttons and cards a little life on hover. */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 520ms;
  --dur-5: 780ms;
  --dur-6: 1100ms;

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ------------------------------------------------------ direction factor
     `transform` axes are physical: translateX(4px) moves right in Arabic just
     as it does in English, which is backwards. Multiplying every inline
     translation by --dir makes motion follow the reading direction without a
     mirrored copy of each rule in the RTL stylesheet.

         transform: translateX(calc(var(--dir) * 0.3rem));
  */
  --dir: 1;

  /* --------------------------------------------------------------- layers */
  --z-base: 1;
  --z-raised: 10;
  --z-header: 100;
  --z-drawer: 200;
  --z-offer: 300;
}

/* Slightly tighter vertical rhythm on very small screens. */
@media (max-width: 24em) {
  :root {
    --section-y: 3rem;
    --gutter: 1.1rem;
  }
}

/* ---------------------------------------------------------------- Arabic
   Arabic at the same nominal size reads smaller than Latin, because its
   x-height equivalent sits lower and its ascenders and descenders are longer.
   Bumping the base and loosening the leading brings the two into optical
   balance; without this the Arabic build looks cramped next to the English. */

:root:lang(ar),
[lang='ar'] {
  --font-body: 'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, 'Segoe UI', sans-serif;
  --font-display: 'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, 'Segoe UI', sans-serif;

  --step-0: clamp(1.0625rem, 1.0136rem + 0.2446vw, 1.2rem);
  --step-1: clamp(1.1875rem, 1.0951rem + 0.4619vw, 1.4475rem);
  --step-2: clamp(1.3125rem, 1.1636rem + 0.7446vw, 1.7313rem);

  --leading-tight: 1.3;
  --leading-snug: 1.45;
  --leading-body: 1.9;
  --leading-loose: 2.05;

  /* Arabic is unicase and letter-spacing breaks its joins outright. */
  --tracking-tight: 0;
  --tracking-normal: 0;
  --tracking-wide: 0;
  --tracking-caps: 0;
}


/* ─── 03-typography.css ─── */
/* ==========================================================================
   Typography
   ==========================================================================
   IBM Plex Sans and IBM Plex Sans Arabic are a designed pair from one type
   family, drawn to the same optical logic. That matters here: the English and
   Arabic builds sit side by side in a language switcher, and a mismatched pair
   makes one of them look like an afterthought. Plex also carries an engineered,
   institutional tone that suits a company whose buyers are procurement and
   operations staff — and Plex Mono gives real tabular figures for the CR and
   licence numbers that do a lot of the persuading on this site.
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-strong);
}

h1 {
  font-size: var(--step-5);
}
h2 {
  font-size: var(--step-4);
}
h3 {
  font-size: var(--step-2);
  line-height: var(--leading-snug);
}
h4 {
  font-size: var(--step-1);
  line-height: var(--leading-snug);
}

strong,
b {
  font-weight: 600;
  color: var(--fg-strong);
}

small {
  font-size: var(--step--1);
}

/* --------------------------------------------------------------- eyebrow
   A small caps label above a heading. In Arabic it loses the letter-spacing
   and the uppercasing, both of which are meaningless in an unicase script,
   and gains a maroon rule instead so the visual weight is preserved. */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-block-end: var(--space-s);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--maroon);
}

.eyebrow::before {
  content: '';
  inline-size: 1.75rem;
  block-size: 2px;
  flex: none;
  background: currentColor;
}

[lang='ar'] .eyebrow {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
}

.eyebrow--onDark {
  color: var(--brass-light);
}

/* ----------------------------------------------------------------- prose */

.prose {
  max-inline-size: var(--container-text);
}

.prose > * + * {
  margin-block-start: 1.1em;
}

.prose p {
  color: var(--fg-muted);
}

.prose strong {
  color: var(--fg-strong);
}

.prose a {
  color: var(--maroon);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--maroon) 35%, transparent);
  transition: text-decoration-color var(--dur-2) var(--ease-out);
}

.prose a:hover {
  text-decoration-color: currentColor;
}

.prose--lede p {
  font-size: var(--step-1);
  line-height: var(--leading-loose);
  color: var(--fg-muted);
}

.prose--center {
  margin-inline: auto;
  text-align: center;
}

/* ------------------------------------------------------------- tick list */

.tick-list {
  display: grid;
  gap: var(--space-xs);
  margin-block-start: var(--space-m);
}

.tick-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  color: var(--fg-muted);
}

.tick-list__icon {
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin-block-start: 0.28em;
  padding: 0.2rem;
  border-radius: var(--radius-pill);
  background: var(--accent-quiet);
  color: var(--maroon);
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ----------------------------------------------------------------- icons */

.icon,
.card__icon svg,
.feature-list__icon svg,
.contact-block__icon svg,
.profile__icon svg {
  inline-size: 100%;
  block-size: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------------------------------- tabular numerals
   Registration numbers, phone numbers and statistics are data. They get the
   mono face and tabular figures so columns line up and digits do not jitter
   while the counters animate. */

.stats__value,
.credentials__val,
.data-table td,
.steps__num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Latin digits inside Arabic text: Gulf corporate sites overwhelmingly use
   Western digits for registration numbers, phone numbers and dates, so the
   Arabic build keeps them rather than switching to Arabic-Indic forms. */
[lang='ar'] {
  font-variant-numeric: lining-nums;
}

bdi {
  unicode-bidi: isolate;
}

/* ------------------------------------------------------- two-column prose
   For the long opening statement on a page. Columns are balanced so the two
   ends finish level, and `orphans`/`widows` stop a paragraph breaking with a
   single line stranded at the foot of a column. */

@media (min-width: 62em) {
  .prose--columns {
    max-inline-size: none;
    columns: 2;
    column-gap: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
    column-fill: balance;
    orphans: 3;
    widows: 3;
  }

  .prose--columns > * + * {
    margin-block-start: 0;
  }

  /* Paragraphs flow across the column break, as they do in any set text.
     Forcing `break-inside: avoid-column` keeps each paragraph whole and, with
     three paragraphs of unequal length, drops one into the first column and two
     into the second — which looks like a mistake rather than a measure.
     `orphans` and `widows` stop the break landing on a single line. */
  .prose--columns p {
    margin-block-end: 1.1em;
  }

  .prose--columns p:last-child {
    margin-block-end: 0;
  }
}

/* A rule down the gutter, so the two columns read as a set rather than as two
   unrelated blocks that happen to be adjacent. */
@media (min-width: 62em) {
  .prose--columns {
    column-rule: 1px solid var(--line);
  }

  .section--dark .prose--columns {
    column-rule-color: var(--line-dark);
  }
}


/* ─── 04-layout.css ─── */
/* ==========================================================================
   Layout — containers, sections, bands
   ========================================================================== */

.site-main {
  display: block;
}

/* --------------------------------------------------------------- section */

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section__inner {
  inline-size: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
}

.section--wide .section__inner {
  inline-size: min(100% - var(--gutter) * 2, var(--container-wide));
}

.section--narrow .section__inner {
  inline-size: min(100% - var(--gutter) * 2, 56rem);
}

/* The section head sets the heading against its standfirst rather than
   stacking them down the left edge. Stacked, every section on the site left
   an empty right half — which reads as an unfinished column, not as space. */
.section__head {
  margin-block-end: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  display: grid;
  gap: var(--space-m) clamp(2rem, 1rem + 3vw, 4rem);
}

@media (min-width: 62em) {
  .section__head {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: end;
    padding-block-end: var(--space-m);
    border-block-end: var(--rule);
  }

  .section__head .eyebrow,
  .section__head .section__title {
    grid-column: 1;
  }

  .section__head .section__lede {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    margin-block-start: 0;
  }

  /* A head with no standfirst keeps a readable measure rather than stretching
     a two-line heading across the full container. */
  .section__head:not(:has(.section__lede)) {
    grid-template-columns: minmax(0, 1fr);
  }

  .section__head:not(:has(.section__lede)) .section__title {
    max-inline-size: 34ch;
  }
}

.section--dark .section__head {
  border-block-end-color: var(--line-dark);
}

.section__head--center {
  margin-inline: auto;
  max-inline-size: 46rem;
  text-align: center;
  grid-template-columns: minmax(0, 1fr);
  border-block-end: 0;
}

.section__head--center .eyebrow {
  justify-content: center;
}

.section__title {
  font-size: var(--step-4);
}

.section__lede {
  margin-block-start: var(--space-m);
  font-size: var(--step-0);
  line-height: var(--leading-loose);
  color: var(--fg-muted);
  max-inline-size: 38rem;
}

.section__intro {
  margin-block-end: clamp(2rem, 1.5rem + 2vw, 3rem);
}

/* ------------------------------------------------------------------ tones
   Alternating grounds carry the page rhythm. The espresso band is the site's
   one moment of real contrast — used for the group section, CTAs and the
   footer, never twice in a row. */

.section--alt {
  background: var(--bg-alt);
}

.section--sand {
  background: linear-gradient(180deg, var(--sand) 0%, var(--sand-deep) 100%);
}

.section--dark {
  background: var(--espresso);
  color: var(--on-dark);
  --fg: var(--on-dark);
  --fg-strong: var(--white);
  --fg-muted: var(--on-dark-muted);
  --line: var(--line-dark);
  --surface: color-mix(in oklab, var(--cream) 6%, transparent);
}

.section--dark .section__title,
.section--dark h3 {
  color: var(--white);
}

.section--dark .eyebrow {
  color: var(--brass-light);
}

/* A hairline of Qatar maroon between bands, so the seams read as deliberate. */
.section--alt + .section:not(.section--alt),
.section:not(.section--alt) + .section--alt {
  border-block-start: 1px solid var(--line);
}

/* --------------------------------------------------------------- the grid */

.card-grid {
  display: grid;
  gap: clamp(1rem, 0.7rem + 1.4vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.card-grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}

/* 20rem is the width that resolves to exactly three tracks inside the 78rem
   container and drops to two, then one, as the viewport narrows. */
.card-grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.card-grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.card-grid__cell {
  display: flex;
}

.card-grid__cell > * {
  inline-size: 100%;
}

.feature-list {
  display: grid;
  gap: clamp(1.25rem, 1rem + 1.2vw, 2rem) clamp(1.5rem, 1rem + 2vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.feature-list--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

/* -------------------------------------------------------------- utilities */

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-block-start: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
}

.section__head + .cta-row {
  margin-block-start: 0;
}

.table-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface);
}

.table-scroll:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}


/* ─── 05-header.css ─── */
/* ==========================================================================
   Header, navigation, language switcher
   ========================================================================== */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  background: color-mix(in oklab, var(--cream) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-block-end: 1px solid transparent;
  transition:
    border-color var(--dur-3) var(--ease-out),
    box-shadow var(--dur-3) var(--ease-out),
    background-color var(--dur-3) var(--ease-out);
}

.site-header.is-scrolled {
  border-block-end-color: var(--line);
  box-shadow: var(--shadow-s);
  background: color-mix(in oklab, var(--cream) 94%, transparent);
}

.site-header__inner {
  inline-size: min(100% - var(--gutter) * 2, var(--container-wide));
  margin-inline: auto;
  min-block-size: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--space-m);
}

/* ----------------------------------------------------------------- brand */

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  flex: none;
  padding-block: 0.5rem;
}

.sqs-mark {
  inline-size: auto;
  block-size: 1.9rem;
  flex: none;
  transition: transform var(--dur-4) var(--ease-spring);
}

.sqs-mark__s {
  fill: var(--espresso);
  transition: fill var(--dur-3) var(--ease-out);
}

.sqs-mark__q {
  fill: var(--stone);
  transition: fill var(--dur-3) var(--ease-out);
}

.brand:hover .sqs-mark {
  transform: scale(1.04);
}

.brand:hover .sqs-mark__q {
  fill: var(--maroon);
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand__name {
  font-weight: 700;
  font-size: var(--step-0);
  letter-spacing: var(--tracking-wide);
  color: var(--espresso);
}

.brand__tag {
  font-size: var(--step--2);
  color: var(--fg-muted);
  letter-spacing: 0.01em;
}

@media (max-width: 26em) {
  .brand__tag {
    display: none;
  }
}

/* ------------------------------------------------------------------- nav */

.nav {
  display: none;
  margin-inline-start: auto;
}

@media (min-width: 60em) {
  .nav {
    display: block;
  }
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav__item {
  position: relative;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-m);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--fg-strong);
  text-decoration: none;
  white-space: nowrap;
  transition:
    color var(--dur-2) var(--ease-out),
    background-color var(--dur-2) var(--ease-out);
}

/* An underline that grows from the centre — the one flourish the nav gets. */
.nav__link::after {
  content: '';
  position: absolute;
  inset-block-end: 0.28rem;
  inset-inline: 0.85rem;
  block-size: 2px;
  background: var(--maroon);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-3) var(--ease-out-expo);
}

.nav__link:hover,
.nav__link.is-active {
  color: var(--maroon);
}

.nav__link:hover::after,
.nav__link.is-active::after {
  transform: scaleX(1);
}

.nav__chevron {
  inline-size: 0.85rem;
  block-size: 0.85rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur-2) var(--ease-out);
}

.nav__toggle[aria-expanded='true'] .nav__chevron {
  transform: rotate(180deg);
}

/* --------------------------------------------------------------- dropdown */

.nav__menu {
  position: absolute;
  inset-block-start: calc(100% + 0.5rem);
  inset-inline-start: 50%;
  inline-size: min(34rem, 82vw);
  padding: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-l);
  transform: translateX(-50%) translateY(-0.5rem);
  opacity: 0;
  transition:
    opacity var(--dur-3) var(--ease-out),
    transform var(--dur-3) var(--ease-out-expo);
}

/* Mirror the centring offset when the document is right-to-left. */
[dir='rtl'] .nav__menu {
  transform: translateX(50%) translateY(-0.5rem);
}

.nav__menu.is-open {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

[dir='rtl'] .nav__menu.is-open {
  transform: translateX(50%) translateY(0);
}

.nav__sublist {
  display: grid;
  gap: 0.125rem;
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 68em) {
  .nav__sublist {
    grid-template-columns: 1fr;
  }
}

.nav__sublink {
  display: block;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-m);
  text-decoration: none;
  transition: background-color var(--dur-2) var(--ease-out);
}

.nav__sublink:hover,
.nav__sublink.is-active {
  background: var(--accent-quiet);
}

.nav__sublink-title {
  display: block;
  font-weight: 600;
  font-size: var(--step--1);
  color: var(--fg-strong);
}

.nav__sublink:hover .nav__sublink-title,
.nav__sublink.is-active .nav__sublink-title {
  color: var(--maroon);
}

.nav__sublink-blurb {
  display: block;
  margin-block-start: 0.2rem;
  font-size: var(--step--2);
  line-height: 1.45;
  color: var(--fg-muted);
}

/* --------------------------------------------------------------- actions */

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-inline-start: auto;
}

@media (min-width: 60em) {
  .site-header__actions {
    margin-inline-start: var(--space-s);
  }
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-size: var(--step--2);
  font-weight: 600;
  text-decoration: none;
  color: var(--fg-strong);
  white-space: nowrap;
  transition:
    border-color var(--dur-2) var(--ease-out),
    background-color var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out);
}

.lang-switch:hover {
  border-color: var(--maroon);
  background: var(--accent-quiet);
  color: var(--maroon);
}

.lang-switch__icon {
  inline-size: 1rem;
  block-size: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

/* Scoped to .site-header so it outranks `.btn { display: inline-flex }`, which
   is declared later in the bundle at equal specificity. Without the extra
   class the button renders on mobile and overflows the header. */
.site-header .site-header__cta {
  display: none;
}

@media (min-width: 48em) {
  .site-header .site-header__cta {
    display: inline-flex;
  }
}

/* --------------------------------------------------------- burger button */

.nav-toggle {
  display: grid;
  place-content: center;
  gap: 5px;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
  transition: border-color var(--dur-2) var(--ease-out);
}

@media (min-width: 60em) {
  .nav-toggle {
    display: none;
  }
}

.nav-toggle:hover {
  border-color: var(--maroon);
}

.nav-toggle__bar {
  inline-size: 1.15rem;
  block-size: 2px;
  border-radius: 2px;
  background: var(--espresso);
  transition:
    transform var(--dur-3) var(--ease-out-expo),
    opacity var(--dur-2) var(--ease-out);
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.2);
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --------------------------------------------------------- mobile drawer */

.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: var(--z-drawer);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--cream);
  opacity: 0;
  transform: translateY(-1rem);
  transition:
    opacity var(--dur-3) var(--ease-out),
    transform var(--dur-4) var(--ease-out-expo);
}

.mobile-nav.is-open {
  opacity: 1;
  transform: translateY(0);
}

.mobile-nav__inner {
  padding: var(--space-m) var(--gutter) var(--space-2xl);
}

.mobile-nav .nav__list {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.mobile-nav .nav__item {
  border-block-end: 1px solid var(--line);
}

.mobile-nav .nav__link {
  inline-size: 100%;
  justify-content: space-between;
  padding: 1.05rem 0.25rem;
  font-size: var(--step-1);
  font-weight: 600;
  border-radius: 0;
}

.mobile-nav .nav__link::after {
  display: none;
}

.mobile-nav .nav__menu {
  position: static;
  inline-size: 100%;
  transform: none;
  opacity: 1;
  padding: 0 0 var(--space-s);
  border: 0;
  box-shadow: none;
  background: transparent;
}

.mobile-nav .nav__sublist {
  grid-template-columns: 1fr;
  gap: 0;
  padding-inline-start: var(--space-s);
  border-inline-start: 2px solid var(--line);
}

.mobile-nav__footer {
  margin-block-start: var(--space-xl);
  display: grid;
  gap: var(--space-s);
}

.mobile-nav__lang {
  justify-self: start;
  padding: 0.6rem 0;
  font-weight: 600;
  color: var(--maroon);
}

/* ------------------------------------------------- language offer toast */

.lang-offer {
  position: fixed;
  inset-block-end: var(--space-m);
  inset-inline: var(--gutter);
  margin-inline: auto;
  z-index: var(--z-offer);
  inline-size: min(32rem, calc(100% - var(--gutter) * 2));
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: 0.85rem 1rem;
  background: var(--espresso);
  color: var(--on-dark);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-l);
  opacity: 0;
  transform: translateY(1rem);
  transition:
    opacity var(--dur-4) var(--ease-out),
    transform var(--dur-5) var(--ease-out-expo);
}

.lang-offer.is-in {
  opacity: 1;
  transform: translateY(0);
}

.lang-offer__text {
  flex: 1;
  font-size: var(--step--1);
}

.lang-offer__accept {
  flex: none;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--brass-light);
  color: var(--espresso);
  font-weight: 600;
  font-size: var(--step--1);
  text-decoration: none;
  transition: background-color var(--dur-2) var(--ease-out);
}

.lang-offer__accept:hover {
  background: var(--brass-pale);
}

.lang-offer__dismiss {
  flex: none;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: var(--radius-pill);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--on-dark-muted);
  transition: color var(--dur-2) var(--ease-out);
}

.lang-offer__dismiss:hover {
  color: var(--white);
}


/* ─── 06-hero.css ─── */
/* ==========================================================================
   Hero
   ==========================================================================
   The one place on the site that is allowed to be theatrical. Three layers
   move independently behind the type — a slow maroon aurora, a drifting
   technical grid derived from the notched geometry of the SQS wordmark, and a
   fine grain that keeps the flat espresso from banding on wide monitors.

   Every one of them is decorative and every one of them stops dead under
   prefers-reduced-motion (see 10-motion.css). The headline still lands.
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--espresso);
  color: var(--on-dark);
  padding-block: clamp(4rem, 2.5rem + 7vw, 8.5rem) 0;
}

/* ------------------------------------------------------ layer 1: aurora
   Two maroon light sources drifting on long, out-of-phase cycles. Because the
   periods (34s and 46s) share no small common multiple, the composite never
   visibly repeats. */

.hero::before {
  content: '';
  position: absolute;
  inset: -25%;
  z-index: -3;
  background:
    radial-gradient(46% 42% at 22% 28%, color-mix(in oklab, var(--maroon) 62%, transparent) 0%, transparent 62%),
    radial-gradient(38% 40% at 78% 68%, color-mix(in oklab, var(--brass) 26%, transparent) 0%, transparent 60%),
    radial-gradient(70% 60% at 50% 0%, color-mix(in oklab, var(--maroon-800) 42%, transparent) 0%, transparent 70%);
  filter: blur(24px);
  animation: hero-aurora 46s var(--ease-in-out) infinite alternate;
  will-change: transform;
}

@keyframes hero-aurora {
  0% {
    transform: translate3d(-3%, -2%, 0) scale(1);
  }
  50% {
    transform: translate3d(4%, 3%, 0) scale(1.09);
  }
  100% {
    transform: translate3d(-2%, 4%, 0) scale(1.03);
  }
}

/* ------------------------------------------------- layer 2: technical grid
   The SQS letterforms are cut from thick strokes with square notches. This is
   that same logic at architectural scale: a fine engineering grid, brighter
   where the aurora sits behind it, drifting one cell over a long cycle. */

.hero__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--cream) 7%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--cream) 7%, transparent) 1px, transparent 1px),
    linear-gradient(to right, color-mix(in oklab, var(--brass) 12%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--brass) 12%, transparent) 1px, transparent 1px);
  background-size:
    2.5rem 2.5rem,
    2.5rem 2.5rem,
    10rem 10rem,
    10rem 10rem;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
  opacity: 0.55;
  animation: hero-grid 34s linear infinite;
  will-change: transform;
}

@keyframes hero-grid {
  to {
    transform: translate3d(2.5rem, 2.5rem, 0);
  }
}

/* --------------------------------------------------------- layer 3: grain */

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Layout — the title block
   ==========================================================================
   The first draft was text-left / rounded-photo-right, which is the default
   hero of every template on the internet. This is the alternative the design
   panel actually chose: a title block.

   The photograph is not a floating plate. It bleeds off the trailing edge of
   the viewport and runs the full height of the block, so the type is set
   against it rather than beside it. The headline is set at a size that is
   deliberately uncomfortable on a wide screen. Under it, a ruled ribbon of the
   registration data — the numbers a procurement officer checks first, given
   the weight they deserve instead of being buried three screens down.
   ========================================================================== */

.hero {
  /* Distance from the container edge to the viewport edge, so the media can
     bleed out of a centred container without a wrapper element. */
  --bleed: calc((100vw - min(100vw - var(--gutter) * 2, var(--container))) / 2);
}

.hero__inner {
  position: relative;
  inline-size: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
  padding-block-end: clamp(3rem, 2rem + 4vw, 5.5rem);
}

@media (min-width: 62em) {
  .hero__inner {
    min-block-size: min(72svh, 40rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* ------------------------------------------------------------ the measure
   NOT percentage padding. A percentage padding resolves against the
   containing block — here the full-width section, not the centred container —
   so `padding-inline-end: 42%` grew with the viewport and squeezed the
   headline into a narrower column the wider the screen got. At 1920px it left
   442px for a 90px display face: five lines, stacked like a column of bricks.

   The measure is set on the type itself instead, in `ch`, which is the unit
   that actually describes how many characters fit on a line. 19ch breaks this
   headline to three lines and holds that break from 1280px to 2560px. */

.hero__title {
  max-inline-size: 19ch;
}

[lang='ar'] .hero__title {
  max-inline-size: 17ch;
}

.hero__body {
  position: relative;
  z-index: 1;
  max-inline-size: min(100%, 60rem);
}

/* ------------------------------------------------------------------ type */

.hero__title {
  font-size: var(--step-7);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 600;
  color: var(--white);
  text-wrap: balance;
}

[lang='ar'] .hero__title {
  line-height: 1.22;
  letter-spacing: 0;
  font-weight: 700;
}

.hero__title em {
  font-style: normal;
  color: var(--brass-light);
}

.hero__lede {
  margin-block-start: var(--space-l);
  padding-block-start: var(--space-m);
  border-block-start: var(--rule-dark);
  font-size: var(--step-1);
  line-height: var(--leading-loose);
  color: var(--on-dark-muted);
  max-inline-size: 44rem;
}

/* The hero's body copy runs to a comfortable measure rather than the full
   width of the title — a 90px headline and a 16px paragraph do not want the
   same line length. */
.hero__text {
  max-inline-size: 44rem;
}

.hero__text {
  margin-block-start: var(--space-s);
  color: var(--on-dark-muted);
}

.hero .cta-row {
  margin-block-start: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
}

/* ----------------------------------------------------------------- media
   Full-bleed behind the whole block, not a column beside the type.
 *
 * Every photograph in this set is a 3:2 landscape with its subject on the
 * horizon. Cropping one into a tall column beside the headline magnifies it
 * roughly 1.7x and leaves a reader looking at a leg of a platform rather than
 * a platform. Run edge to edge it crops only vertically, which a horizon frame
 * survives, and the picture finally reads at the size it was made for.
 *
 * The type keeps its contrast from a directional scrim, not from a box. */

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  margin: 0;
  pointer-events: none;
}

.hero__media img,
.hero__media picture {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* The subject sits on or just below the horizon in every frame in this set. */
  object-position: 50% 55%;
}

/* The scrim. Solid under the type, clearing by the time it reaches the
   subject, so the headline is legible without the photograph being hidden. */
.hero__media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      to var(--fade-to, right),
      var(--espresso) 0%,
      color-mix(in oklab, var(--espresso) 88%, transparent) 26%,
      color-mix(in oklab, var(--espresso) 45%, transparent) 52%,
      color-mix(in oklab, var(--espresso) 18%, transparent) 100%
    ),
    linear-gradient(to bottom, color-mix(in oklab, var(--espresso) 55%, transparent) 0%, transparent 30%, color-mix(in oklab, var(--espresso) 70%, transparent) 100%);
}

[dir='rtl'] .hero__media::before {
  --fade-to: left;
}

/* The brand duotone, light enough to leave the photograph its own light. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(160deg, color-mix(in oklab, var(--maroon) 20%, transparent), color-mix(in oklab, var(--espresso) 28%, transparent));
  mix-blend-mode: multiply;
}

/* On a phone the scrim runs bottom-up instead: the type sits over the lower
   half of the frame, where these photographs are darkest anyway. */
@media (max-width: 62em) {
  .hero__media::before {
    background: linear-gradient(
      to bottom,
      color-mix(in oklab, var(--espresso) 72%, transparent) 0%,
      color-mix(in oklab, var(--espresso) 82%, transparent) 45%,
      var(--espresso) 100%
    );
  }
}

/* ------------------------------------------------------- credentials ribbon
   The registration data, given the weight it earns. Ruled, mono, tabular. */

.hero__strip {
  position: relative;
  z-index: 2;
  inline-size: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(50%, 11rem), 1fr));
  border-block-start: 1px solid color-mix(in oklab, var(--brass) 45%, transparent);
}

.hero__strip-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: clamp(1.1rem, 0.85rem + 1vw, 1.65rem) clamp(0.75rem, 0.4rem + 1.2vw, 1.5rem);
  border-inline-end: var(--rule-dark);
  border-block-end: var(--rule-dark);
  transition: background-color var(--dur-3) var(--ease-out);
}

.hero__strip-item:first-child {
  padding-inline-start: 0;
}

.hero__strip-item:hover {
  background: color-mix(in oklab, var(--cream) 4%, transparent);
}

.hero__strip-value {
  font-family: var(--font-mono);
  font-size: var(--step-3);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--brass-light);
  font-variant-numeric: tabular-nums;
}

[lang='ar'] .hero__strip-value {
  font-family: var(--font-mono);
}

.hero__strip-label {
  font-size: var(--step--2);
  line-height: 1.35;
  color: color-mix(in oklab, var(--cream) 62%, transparent);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

[lang='ar'] .hero__strip-label {
  text-transform: none;
  letter-spacing: 0;
}

/* ------------------------------------------------------- inner-page hero
   Shorter, and the media takes a narrower column so the type keeps the page. */

.hero--compact {
  padding-block: clamp(3rem, 2rem + 4.5vw, 5.5rem) 0;
}

@media (min-width: 62em) {
  .hero--compact .hero__inner {
    min-block-size: min(44svh, 25rem);
  }
}

.hero--compact .hero__title {
  font-size: var(--step-5);
  line-height: 1.02;
  /* Wider than the homepage measure because the display size is a step
     smaller: at 24ch the longer service headings broke to four lines. */
  max-inline-size: 29ch;
}

[lang='ar'] .hero--compact .hero__title {
  max-inline-size: 26ch;
}

[lang='ar'] .hero--compact .hero__title {
  line-height: 1.28;
}

.hero--compact .hero__body {
  max-inline-size: 44rem;
}

/* A hero with no photograph keeps the full width for type. */
@media (min-width: 62em) {
  .hero:not(.hero--media) .hero__inner {
    padding-inline-end: 0;
  }
}


/* ─── 07-components.css ─── */
/* ==========================================================================
   Components
   ========================================================================== */

/* --------------------------------------------------------------- buttons */

.btn {
  --btn-bg: var(--maroon);
  --btn-fg: var(--on-maroon);
  --btn-border: var(--maroon);

  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  min-block-size: 3rem;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  transition:
    transform var(--dur-2) var(--ease-spring),
    box-shadow var(--dur-3) var(--ease-out),
    border-color var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out);
}

/* A sheen that sweeps across on hover — reads as polish rather than gimmick
   because it is fast, low-contrast and only fires on pointer devices. */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, transparent 30%, rgb(255 255 255 / 0.22) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform var(--dur-5) var(--ease-out);
}

@media (hover: hover) {
  .btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-maroon);
  }

  .btn:hover::before {
    transform: translateX(100%);
  }
}

.btn:active {
  transform: translateY(0);
}

.btn__icon {
  inline-size: 1.05rem;
  block-size: 1.05rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur-3) var(--ease-out-expo);
}

/* The arrow points along the reading direction and travels that way on hover.
   scaleX flips the glyph; --dir flips the movement. */
.btn__icon {
  transform: scaleX(var(--dir));
}

.btn:hover .btn__icon {
  transform: scaleX(var(--dir)) translateX(0.2rem);
}

.btn--primary {
  --btn-bg: var(--maroon);
  --btn-fg: var(--on-maroon);
  --btn-border: var(--maroon);
}

.btn--primary:hover {
  --btn-bg: var(--maroon-600);
  --btn-border: var(--maroon-600);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--fg-strong);
  --btn-border: var(--line-strong);
}

.btn--ghost:hover {
  --btn-fg: var(--maroon);
  --btn-border: var(--maroon);
  box-shadow: none;
}

.section--dark .btn--ghost,
.hero .btn--ghost,
.cta-band .btn--ghost {
  --btn-fg: var(--cream);
  --btn-border: color-mix(in oklab, var(--cream) 40%, transparent);
}

.section--dark .btn--ghost:hover,
.hero .btn--ghost:hover {
  --btn-fg: var(--espresso);
  --btn-bg: var(--cream);
  --btn-border: var(--cream);
}

.cta-band .btn--ghost:hover {
  --btn-fg: var(--maroon);
  --btn-bg: #fff;
  --btn-border: #fff;
}

/* On the maroon band a maroon-shadowed button is invisible. */
.cta-band .btn--onDark:hover {
  box-shadow: 0 12px 32px -10px rgb(0 0 0 / 0.35);
}

.btn--onDark {
  --btn-bg: var(--brass-light);
  --btn-fg: var(--espresso);
  --btn-border: var(--brass-light);
}

.btn--onDark:hover {
  --btn-bg: var(--brass-pale);
  --btn-border: var(--brass-pale);
  box-shadow: 0 12px 32px -10px rgb(212 168 83 / 0.45);
}

.btn--sm {
  padding: 0.6rem 1.15rem;
  min-block-size: 2.5rem;
  font-size: var(--step--2);
}

.btn--block {
  inline-size: 100%;
}

/* ------------------------------------------------------------------ card */

.card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  block-size: 100%;
  padding: clamp(1.25rem, 1rem + 1.1vw, 1.9rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  text-decoration: none;
  overflow: hidden;
  transition:
    transform var(--dur-3) var(--ease-out-expo),
    border-color var(--dur-3) var(--ease-out),
    box-shadow var(--dur-3) var(--ease-out);
}

/* A maroon wash that rises from the bottom edge on hover. */
.card::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  z-index: -1;
  block-size: 100%;
  background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--maroon) 6%, transparent));
  opacity: 0;
  transform: translateY(35%);
  transition:
    opacity var(--dur-4) var(--ease-out),
    transform var(--dur-4) var(--ease-out-expo);
}

/* A brass rule that draws across the top edge. */
.card::after {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  background: linear-gradient(90deg, var(--maroon), var(--brass));
  transform: scaleX(0);
  transform-origin: var(--rule-origin, left);
  transition: transform var(--dur-4) var(--ease-out-expo);
}

[dir='rtl'] .card {
  --rule-origin: right;
}

@media (hover: hover) {
  .card--link:hover {
    transform: translateY(-4px);
    border-color: color-mix(in oklab, var(--maroon) 28%, transparent);
    box-shadow: var(--shadow-m);
  }

  .card--link:hover::before {
    opacity: 1;
    transform: translateY(0);
  }

  .card--link:hover::after {
    transform: scaleX(1);
  }
}

.card--link:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-m);
}

.card__icon {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  padding: 0.6rem;
  margin-block-end: var(--space-2xs);
  border-radius: var(--radius-m);
  background: var(--accent-quiet);
  color: var(--maroon);
  transition:
    background-color var(--dur-3) var(--ease-out),
    color var(--dur-3) var(--ease-out),
    transform var(--dur-4) var(--ease-spring);
}

.card--link:hover .card__icon {
  background: var(--maroon);
  color: var(--on-maroon);
  transform: scale(1.06) rotate(-3deg);
}

.card__title {
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--fg-strong);
}

.card__text {
  font-size: var(--step--1);
  line-height: var(--leading-body);
  color: var(--fg-muted);
}

.card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-block-start: auto;
  padding-block-start: var(--space-s);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--maroon);
}

.card__more-icon {
  inline-size: 1rem;
  block-size: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur-3) var(--ease-out-expo);
}

.card__more-icon {
  transform: scaleX(var(--dir));
}

.card--link:hover .card__more-icon {
  transform: scaleX(var(--dir)) translateX(0.3rem);
}

.section--dark .card {
  background: var(--surface);
  border-color: var(--line-dark);
}

.section--dark .card__icon {
  background: color-mix(in oklab, var(--brass) 18%, transparent);
  color: var(--brass-light);
}

/* ---------------------------------------------------------- feature list */

.feature-list__item {
  display: flex;
  gap: var(--space-s);
  align-items: flex-start;
}

.feature-list__icon {
  flex: none;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  padding: 0.5rem;
  border-radius: var(--radius-m);
  background: var(--accent-quiet);
  color: var(--maroon);
  transition:
    background-color var(--dur-3) var(--ease-out),
    transform var(--dur-4) var(--ease-spring);
}

.feature-list__item:hover .feature-list__icon {
  transform: scale(1.08);
  background: color-mix(in oklab, var(--maroon) 14%, transparent);
}

.feature-list__title {
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--fg-strong);
}

.feature-list__text {
  margin-block-start: 0.35rem;
  font-size: var(--step--1);
  line-height: var(--leading-body);
  color: var(--fg-muted);
}

.section--dark .feature-list__icon {
  background: color-mix(in oklab, var(--brass) 16%, transparent);
  color: var(--brass-light);
}

/* ----------------------------------------------------------------- steps
   A numbered process with a connecting rule. The rule is drawn with a
   pseudo-element on each item rather than a border on the list, so the last
   item can drop it cleanly and RTL mirrors without a second rule-set. */

.steps {
  display: grid;
  gap: 0;
  counter-reset: step;
}

.steps__item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-m);
  padding-block: clamp(1.1rem, 0.9rem + 0.9vw, 1.75rem);
}

.steps__item + .steps__item {
  border-block-start: 1px solid var(--line);
}

.steps__num {
  grid-row: 1 / -1;
  font-family: var(--font-mono);
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1;
  color: var(--maroon);
  opacity: 0.55;
  transition:
    opacity var(--dur-3) var(--ease-out),
    transform var(--dur-4) var(--ease-out-expo);
}

.steps__item:hover .steps__num {
  opacity: 1;
  transform: translateY(-2px);
}

.steps__title {
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--fg-strong);
}

.steps__text {
  margin-block-start: 0.4rem;
  color: var(--fg-muted);
}

.steps__meta {
  margin-block-start: 0.5rem;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brass);
}

[lang='ar'] .steps__meta {
  text-transform: none;
  letter-spacing: 0;
}

@media (min-width: 52em) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  }

  .steps__item + .steps__item {
    border-block-start: 0;
  }

  .steps__item {
    border-block-start: 1px solid var(--line);
  }
}

/* ----------------------------------------------------------------- stats */

/* The rules between cells are drawn per item rather than by a 1px grid gap
   over a coloured container. With a gap, a row that does not fill every track
   leaves the container colour showing as an empty block — visible whenever the
   item count is not a multiple of the column count. */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  background: var(--surface);
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line);
}

.stats__item {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: clamp(1.4rem, 1.1rem + 1.4vw, 2.25rem) clamp(1rem, 0.8rem + 1vw, 1.75rem);
  background: var(--surface);
  box-shadow: 0 0 0 0.5px var(--line);
  transition: background-color var(--dur-3) var(--ease-out);
}

.stats__item:hover {
  background: color-mix(in oklab, var(--maroon) 4%, var(--surface));
}

.stats__value {
  font-size: var(--step-4);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--maroon);
}

.stats__label {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--fg-strong);
}

.stats__note {
  font-size: var(--step--2);
  line-height: 1.45;
  color: var(--fg-muted);
}

.section--dark .stats {
  background: transparent;
  box-shadow: 0 0 0 1px var(--line-dark);
}

.section--dark .stats__item {
  box-shadow: 0 0 0 0.5px var(--line-dark);
}

.section--dark .stats__item {
  background: var(--espresso);
}

.section--dark .stats__item:hover {
  background: var(--espresso-700);
}

.section--dark .stats__value {
  color: var(--brass-light);
}

/* ----------------------------------------------------------- credentials
   The registration data. Presented as a definition list so it is machine
   readable, and styled as a document rather than as marketing. */

.credentials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  background: var(--surface);
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line);
}

.credentials__row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: var(--space-m);
  background: var(--surface);
  box-shadow: 0 0 0 0.5px var(--line);
}

.credentials__key {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-faint);
}

[lang='ar'] .credentials__key {
  text-transform: none;
  letter-spacing: 0;
}

.credentials__val {
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--fg-strong);
}

/* ------------------------------------------------------------ data table */

.data-table {
  min-inline-size: 40rem;
  font-size: var(--step--1);
}

.data-table th,
.data-table td {
  padding: var(--space-s) var(--space-m);
  text-align: start;
  vertical-align: top;
  border-block-end: 1px solid var(--line);
}

.data-table thead th {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-faint);
  background: var(--surface-sunken);
  white-space: nowrap;
}

[lang='ar'] .data-table thead th {
  text-transform: none;
  letter-spacing: 0;
}

.data-table tbody th {
  font-weight: 600;
  color: var(--fg-strong);
}

.data-table td {
  color: var(--fg-muted);
}

.data-table tbody tr {
  transition: background-color var(--dur-2) var(--ease-out);
}

.data-table tbody tr:hover {
  background: color-mix(in oklab, var(--maroon) 3.5%, transparent);
}

.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td {
  border-block-end: 0;
}

/* ------------------------------------------------------------------- FAQ */

.faq {
  max-inline-size: var(--container-text);
  border-block-start: 1px solid var(--line);
}

.faq__item {
  border-block-end: 1px solid var(--line);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding-block: var(--space-m);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--fg-strong);
  transition: color var(--dur-2) var(--ease-out);
}

.faq__q:hover {
  color: var(--maroon);
}

.faq__marker {
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  fill: none;
  stroke: var(--maroon);
  stroke-width: 2;
  stroke-linecap: round;
  transition: transform var(--dur-3) var(--ease-out-expo);
}

.faq__item[open] .faq__marker {
  transform: rotate(135deg);
}

.faq__a {
  padding-block-end: var(--space-m);
  color: var(--fg-muted);
  max-inline-size: 40rem;
}

.faq__a > * + * {
  margin-block-start: 0.9em;
}

/* Modern browsers animate the disclosure; older ones simply open it. */
@supports (interpolate-size: allow-keywords) {
  .faq__item::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition:
      block-size var(--dur-3) var(--ease-out),
      content-visibility var(--dur-3) allow-discrete,
      opacity var(--dur-3) var(--ease-out);
  }

  .faq__item[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}

/* -------------------------------------------------------------- profiles */

.profiles {
  display: grid;
  gap: clamp(1.25rem, 1rem + 1.4vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.profile {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: clamp(1.4rem, 1.1rem + 1.3vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  border-inline-start: 3px solid var(--maroon);
  transition:
    transform var(--dur-3) var(--ease-out-expo),
    box-shadow var(--dur-3) var(--ease-out);
}

@media (hover: hover) {
  .profile:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-m);
  }
}

.profile__head {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

.profile__icon {
  flex: none;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  padding: 0.6rem;
  border-radius: var(--radius-m);
  background: var(--accent-quiet);
  color: var(--maroon);
}

.profile__name {
  font-size: var(--step-2);
  font-weight: 600;
  color: var(--fg-strong);
}

.profile__role {
  margin-block-start: 0.2rem;
  font-size: var(--step--1);
  color: var(--fg-muted);
}

.profile__body {
  color: var(--fg-muted);
}

.profile__body > * + * {
  margin-block-start: 0.9em;
}

.profile__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-block-start: auto;
  padding-block-start: var(--space-xs);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--maroon);
  text-decoration: none;
}

.profile__link:hover .card__more-icon {
  transform: scaleX(var(--dir)) translateX(0.3rem);
}

.section--dark .profile {
  background: var(--surface);
  border-color: var(--line-dark);
  border-inline-start-color: var(--brass);
}

.section--dark .profile__icon {
  background: color-mix(in oklab, var(--brass) 18%, transparent);
  color: var(--brass-light);
}

/* -------------------------------------------------------------- CTA band */

/* --------------------------------------------------------------- CTA band
   The one full-bleed band of Qatari maroon on every page. Holding the national
   colour back to a single, always-the-same moment is what makes it read as an
   assertion of identity rather than as decoration — and it gives the page a
   fixed landmark: wherever you are on the site, the maroon band is where you
   ask for something. White on #8A1538 measures 9.35:1. */

.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--section-y);
  background: var(--maroon);
  color: var(--on-maroon);
  --fg-muted: color-mix(in oklab, #fff 82%, var(--maroon));
}

.cta-band::before {
  content: '';
  position: absolute;
  inset: -30%;
  z-index: -1;
  background:
    radial-gradient(44% 60% at 78% 30%, color-mix(in oklab, var(--maroon-900) 55%, transparent), transparent 64%),
    radial-gradient(36% 50% at 12% 78%, color-mix(in oklab, var(--brass) 20%, transparent), transparent 62%);
  filter: blur(16px);
  animation: hero-aurora 38s var(--ease-in-out) infinite alternate;
}

/* A brass hairline grid, the same motif as the hero, at a lower contrast. */
.cta-band::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgb(255 255 255 / 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / 0.07) 1px, transparent 1px);
  background-size: 2.5rem 2.5rem;
  mask-image: radial-gradient(120% 100% at 50% 50%, #000 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 50%, #000 10%, transparent 75%);
}

.cta-band__inner {
  position: relative;
  inline-size: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-l);
}

.cta-band__body {
  max-inline-size: 40rem;
}

.cta-band__title {
  font-size: var(--step-4);
  color: #fff;
}

.cta-band__text {
  margin-block-start: var(--space-s);
  font-size: var(--step-1);
  line-height: var(--leading-loose);
  /* #FFF at 82% over maroon — 6.9:1, comfortably AA for body copy. */
  color: color-mix(in oklab, #fff 82%, var(--maroon));
}

.cta-band .eyebrow--onDark {
  color: var(--brass-pale);
}

.cta-band .cta-row {
  margin-block-start: 0;
}

/* -------------------------------------------------------- contact blocks */

.contact-blocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1rem, 0.8rem + 1vw, 1.5rem);
}

.contact-block {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  transition:
    border-color var(--dur-3) var(--ease-out),
    transform var(--dur-3) var(--ease-out-expo);
}

@media (hover: hover) {
  .contact-block:hover {
    transform: translateY(-3px);
    border-color: color-mix(in oklab, var(--maroon) 28%, transparent);
  }
}

.contact-block__icon {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  padding: 0.55rem;
  margin-block-end: 0.25rem;
  border-radius: var(--radius-m);
  background: var(--accent-quiet);
  color: var(--maroon);
}

.contact-block__title {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-faint);
}

[lang='ar'] .contact-block__title {
  text-transform: none;
  letter-spacing: 0;
}

.contact-block__body {
  font-size: var(--step-0);
  line-height: var(--leading-body);
  color: var(--fg-strong);
}

.contact-block__body a {
  color: var(--maroon);
  text-decoration: none;
  font-weight: 600;
}

.contact-block__body a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------- entity tag
   The group company that holds the licence for the capability on the card.
   Small, factual, and always present where the delivering entity is not the
   one whose commercial registration heads the page. */

.card__entity {
  margin-block-start: var(--space-2xs);
  padding-block-start: var(--space-2xs);
  border-block-start: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.01em;
  color: var(--fg-faint);
}

[lang='ar'] .card__entity {
  font-family: var(--font-body);
}

.section--dark .card__entity {
  border-block-start-color: var(--line-dark);
  color: var(--on-dark-muted);
}

/* ------------------------------------------------------------------- map
   A click-to-load Google Maps facade. The panel on one side carries the real
   address and hours as text — that is the part that has to work, and it works
   with no JavaScript and no third-party request. The canvas beside it is a
   button until someone presses it. */

.map {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  overflow: hidden;
}

@media (min-width: 52em) {
  .map {
    grid-template-columns: minmax(18rem, 0.8fr) minmax(0, 1.2fr);
  }
}

.map__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  background: var(--surface);
}

.map__title {
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--fg-strong);
}

.map__address {
  font-size: var(--step--1);
  line-height: var(--leading-body);
  color: var(--fg-muted);
  max-inline-size: 24rem;
}

.map__hours {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-block-start: var(--space-s);
  border-block-start: 1px solid var(--line);
}

.map__hours-label {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-faint);
}

[lang='ar'] .map__hours-label {
  text-transform: none;
  letter-spacing: 0;
}

.map__hours-value {
  font-size: var(--step--1);
  line-height: var(--leading-body);
  color: var(--fg-strong);
}

.map__actions {
  margin-block-start: auto;
  padding-block-start: var(--space-s);
}

/* --- the canvas -------------------------------------------------------- */

.map__canvas {
  position: relative;
  min-block-size: 18rem;
  aspect-ratio: 16 / 10;
  background:
    /* A muted street-grid suggestion, so the placeholder reads as a map
       rather than as a broken image. */
    linear-gradient(115deg, color-mix(in oklab, var(--maroon) 8%, var(--sand)), var(--sand-deep)),
    var(--sand);
  background-blend-mode: multiply;
}

.map__canvas::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--espresso) 8%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--espresso) 8%, transparent) 1px, transparent 1px),
    linear-gradient(to right, color-mix(in oklab, var(--espresso) 12%, transparent) 2px, transparent 2px);
  background-size:
    1.75rem 1.75rem,
    1.75rem 1.75rem,
    8.75rem 8.75rem;
  transition: opacity var(--dur-4) var(--ease-out);
}

.map__canvas.is-loaded::before {
  opacity: 0;
}

.map__canvas iframe {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  animation: map-in var(--dur-5) var(--ease-out) both;
}

@keyframes map-in {
  from {
    opacity: 0;
  }
}

.map__load {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: var(--space-l);
  text-align: center;
  transition: background-color var(--dur-3) var(--ease-out);
}

.map__load:hover {
  background: color-mix(in oklab, var(--maroon) 5%, transparent);
}

.map__load-icon {
  inline-size: 3rem;
  block-size: 3rem;
  padding: 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--maroon);
  color: var(--on-maroon);
  box-shadow: var(--shadow-m);
  transition: transform var(--dur-4) var(--ease-spring);
}

.map__load:hover .map__load-icon {
  transform: translateY(-3px) scale(1.05);
}

.map__load-label {
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--fg-strong);
}

.map__load-hint {
  max-inline-size: 22rem;
  font-size: var(--step--2);
  line-height: var(--leading-body);
  color: var(--fg-muted);
}

/* With JavaScript off the button cannot do anything, so it is replaced by the
   hint alone — the "Open in Google Maps" link in the panel still works. */
.no-js .map__load {
  cursor: default;
  pointer-events: none;
}

.no-js .map__load-label {
  display: none;
}

.map__directions {
  align-self: center;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--maroon);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--maroon) 35%, transparent);
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--dur-2) var(--ease-out);
}

.map__directions:hover {
  text-decoration-color: currentColor;
}

.map__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s) var(--space-m);
}

/* A two-column definition table needs less room than a three-column one, and
   looks wrong stretched to the full container width. */
.data-table--tight {
  min-inline-size: 28rem;
}

.data-table--tight tbody th {
  inline-size: 60%;
}

/* Codes and reference numbers read as data, not prose — but only in the
   two-column variant, where the single value column IS a code. A three-column
   table's last cell holds an explanation, and setting that `nowrap` pushes a
   paragraph off the edge of the scroll container. */
.data-table--tight td {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  white-space: nowrap;
  color: var(--fg-strong);
}

/* In a three-column table the middle cell is the code and the last is prose. */
.data-table:not(.data-table--tight) td:nth-child(2) {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  white-space: nowrap;
  color: var(--fg-strong);
  vertical-align: top;
}

.data-table:not(.data-table--tight) td:last-child:not(:nth-child(2)) {
  min-inline-size: 22rem;
  color: var(--fg-muted);
}

[lang='ar'] .data-table td {
  font-family: var(--font-body);
  white-space: normal;
}

[lang='ar'] .data-table:not(.data-table--tight) td:nth-child(2) {
  white-space: nowrap;
}

/* -------------------------------------------------- the building itself
   A real photograph of the office, under the map. Deliberately NOT given the
   duotone wash the hero images carry: the point of this one is that it is the
   actual building, and tinting it toward the brand would work against that. */

.map__photo {
  margin-block-start: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}

.map__photo img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  /* The supplied photograph is a bright midday exposure and the rest of the
     set is warm and low-contrast. A light knock-back brings it into the same
     room without pretending it is a different picture. */
  filter: saturate(0.88) contrast(0.96);
}

.map__photo figcaption {
  padding: var(--space-s) var(--space-m);
  border-block-start: 1px solid var(--line);
  font-size: var(--step--2);
  line-height: var(--leading-body);
  color: var(--fg-muted);
}


/* ─── 08-forms.css ─── */
/* ==========================================================================
   Forms
   ==========================================================================
   Sized for thumbs first: every control clears the 44px minimum target, and
   the label sits above the field so the layout never has to reflow when it
   mirrors into Arabic.
   ========================================================================== */

.form {
  max-inline-size: 46rem;
}

.form__grid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.field--wide {
  grid-column: 1 / -1;
}

.field__label {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--fg-strong);
}

.field__req {
  color: var(--maroon);
}

.field__control {
  inline-size: 100%;
  min-block-size: 3rem;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
  color: var(--fg);
  font-size: var(--step-0);
  transition:
    border-color var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out),
    background-color var(--dur-2) var(--ease-out);
}

textarea.field__control {
  min-block-size: 8rem;
  resize: vertical;
  line-height: var(--leading-body);
}

select.field__control {
  /* The native arrow is drawn on the wrong side in RTL, so we supply our own
     and place it with a logical property. */
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a5352' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 1.15rem;
  background-position: right 1rem center;
  padding-inline-end: 2.75rem;
}

[dir='rtl'] select.field__control {
  background-position: left 1rem center;
  padding-inline-end: 1rem;
  padding-inline-start: 2.75rem;
}

.field__control::placeholder {
  color: var(--fg-faint);
}

.field__control:hover {
  border-color: color-mix(in oklab, var(--maroon) 35%, var(--line-strong));
}

.field__control:focus {
  outline: none;
  border-color: var(--maroon);
  box-shadow: 0 0 0 3px var(--accent-quiet);
}

.field__control:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

/* Only flag an invalid field once the visitor has actually engaged with it. */
.field__control:user-invalid {
  border-color: #b3261e;
}

.field__control:user-invalid:focus {
  box-shadow: 0 0 0 3px rgb(179 38 30 / 0.14);
}

.field__hint {
  font-size: var(--step--2);
  color: var(--fg-muted);
}

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-m);
  margin-block-start: var(--space-l);
}

.form__note {
  flex: 1 1 16rem;
  font-size: var(--step--2);
  line-height: var(--leading-body);
  color: var(--fg-muted);
}

/* The honeypot must be reachable by bots parsing the DOM but invisible and
   unfocusable for people — `display:none` is skipped by some crawlers. */
.form__honeypot {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form__status {
  margin-block-start: var(--space-m);
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-m);
  border-inline-start: 3px solid currentColor;
  font-size: var(--step--1);
  line-height: var(--leading-body);
}

.form__status.is-pending {
  background: var(--surface-sunken);
  color: var(--fg-muted);
}

.form__status.is-success {
  background: color-mix(in oklab, #1b7f4b 10%, transparent);
  color: #1b6b41;
}

.form__status.is-error {
  background: color-mix(in oklab, #b3261e 10%, transparent);
  color: #96201a;
}

button[disabled] {
  opacity: 0.6;
  cursor: progress;
}


/* ─── 09-footer.css ─── */
/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--espresso);
  color: var(--on-dark);
  padding-block-start: clamp(3rem, 2.2rem + 3.5vw, 5rem);
}

.site-footer__main {
  inline-size: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  display: grid;
  gap: clamp(2rem, 1.5rem + 2.4vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  padding-block-end: clamp(2.5rem, 2rem + 2.4vw, 4rem);
}

@media (min-width: 62em) {
  .site-footer__main {
    grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  }
}

/* ----------------------------------------------------------- brand block */

.footer__brand .sqs-mark {
  block-size: 2.25rem;
  margin-block-end: var(--space-m);
}

/* Reversed out of the dark ground — the espresso mark would vanish. */
.footer__brand .sqs-mark__s {
  fill: var(--cream);
}

.footer__brand .sqs-mark__q {
  fill: var(--brass-light);
}

.footer__blurb {
  max-inline-size: 30rem;
  font-size: var(--step--1);
  line-height: var(--leading-body);
  color: var(--on-dark-muted);
}

.footer__credentials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  margin-block-start: var(--space-l);
  padding-block-start: var(--space-m);
  border-block-start: 1px solid var(--line-dark);
}

.footer__credentials dt {
  font-size: var(--step--2);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: color-mix(in oklab, var(--cream) 52%, transparent);
}

[lang='ar'] .footer__credentials dt {
  text-transform: none;
  letter-spacing: 0;
}

.footer__credentials dd {
  margin-block-start: 0.2rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--brass-light);
}

/* --------------------------------------------------------------- columns */

.footer__heading {
  margin-block-end: var(--space-s);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--white);
}

[lang='ar'] .footer__heading {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--step-0);
}

.footer__list {
  display: grid;
  gap: 0.6rem;
}

.footer__list a {
  display: inline-block;
  font-size: var(--step--1);
  line-height: var(--leading-snug);
  color: var(--on-dark-muted);
  text-decoration: none;
  transition:
    color var(--dur-2) var(--ease-out),
    transform var(--dur-3) var(--ease-out-expo);
}

.footer__list a:hover {
  color: var(--brass-light);
  /* Nudge along the reading direction — --dir mirrors it for Arabic. */
  transform: translateX(calc(var(--dir) * 0.2rem));
}

/* --------------------------------------------------------------- address */

.footer__address {
  display: grid;
  gap: 0.6rem;
  font-size: var(--step--1);
  line-height: var(--leading-body);
  color: var(--on-dark-muted);
}

.footer__contact-link {
  color: var(--brass-light);
  text-decoration: none;
  font-weight: 500;
  justify-self: start;
  transition: color var(--dur-2) var(--ease-out);
}

.footer__contact-link:hover {
  color: var(--white);
  text-decoration: underline;
}

/* ------------------------------------------------------------- bottom bar */

.site-footer__bar {
  border-block-start: 1px solid var(--line-dark);
}

.site-footer__bar > * {
  max-inline-size: var(--container);
}

.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  inline-size: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  padding-block: var(--space-m);
}

.site-footer__copy,
.site-footer__legal a {
  font-size: var(--step--2);
  color: color-mix(in oklab, var(--cream) 58%, transparent);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
}

.site-footer__legal a {
  text-decoration: none;
  transition: color var(--dur-2) var(--ease-out);
}

.site-footer__legal a:hover {
  color: var(--brass-light);
}


/* ─── 13-index.css ─── */
/* ==========================================================================
   The index
   ==========================================================================
   The capability schedule that replaced the card grid.

   A row is: ordinal · capability · what it covers · the entity and activity
   code that authorises it. Ruled, not boxed. The whole thing reads as a page
   from a specification rather than as a set of tiles, which is both more
   distinctive and closer to what this site is actually arguing — that every
   line is checkable against a public register.
   ========================================================================== */

.index {
  border-block-start: var(--rule-strong);
  counter-reset: index;
}

.index__row {
  border-block-end: var(--rule);
}

.index__cell {
  position: relative;
  display: grid;
  align-items: start;
  gap: var(--space-s) clamp(1rem, 0.5rem + 2vw, 2.5rem);
  padding-block: clamp(1.35rem, 1rem + 1.4vw, 2.1rem);
  padding-inline: 0 0;
  text-decoration: none;
  color: inherit;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  grid-template-areas:
    'num  body'
    '.    meta';
  transition:
    padding-inline var(--dur-4) var(--ease-out-expo),
    background-color var(--dur-3) var(--ease-out);
}

@media (min-width: 52em) {
  .index__cell {
    grid-template-columns: 3.5rem minmax(0, 1.15fr) minmax(0, 0.85fr) 2.5rem;
    grid-template-areas: 'num body meta go';
    align-items: center;
  }
}

/* --------------------------------------------------------------- the rule
   A maroon bar that grows out of the leading edge on hover. It replaces the
   card's lift-and-shadow: the row does not move, the mark arrives. */

.index__cell::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 3px;
  background: var(--maroon);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--dur-3) var(--ease-out-expo);
}

@media (hover: hover) {
  .index--linked .index__cell:hover {
    background: color-mix(in oklab, var(--maroon) 3.5%, transparent);
    padding-inline-start: var(--space-m);
  }

  .index--linked .index__cell:hover::before {
    transform: scaleY(1);
  }
}

.index--linked .index__cell:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
}

/* --------------------------------------------------------------- ordinal */

.index__num {
  grid-area: num;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1.4;
  color: var(--maroon);
  opacity: 0.5;
  font-variant-numeric: tabular-nums;
  transition: opacity var(--dur-3) var(--ease-out);
}

.index--linked .index__cell:hover .index__num {
  opacity: 1;
}

/* ------------------------------------------------------------------ body */

.index__body {
  grid-area: body;
  display: block;
}

.index__title {
  display: block;
  font-size: var(--step-2);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-strong);
  transition: color var(--dur-2) var(--ease-out);
}

.index--linked .index__cell:hover .index__title {
  color: var(--maroon);
}

.index__text {
  display: block;
  margin-block-start: 0.45rem;
  max-inline-size: 42rem;
  font-size: var(--step--1);
  line-height: var(--leading-body);
  color: var(--fg-muted);
}

/* ------------------------------------------------------------------ meta
   The delivering entity and its activity code. Mono, because it is a
   reference, and it is the reason this layout exists — a card had nowhere
   honest to put it. */

.index__meta {
  grid-area: meta;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  line-height: 1.6;
  color: var(--fg-faint);
  text-wrap: balance;
}

[lang='ar'] .index__meta {
  font-family: var(--font-body);
}

@media (min-width: 52em) {
  .index__meta {
    padding-inline-start: var(--space-m);
    border-inline-start: var(--rule);
  }
}

/* -------------------------------------------------------------- the arrow */

.index__go {
  grid-area: go;
  display: none;
  justify-self: end;
  color: var(--maroon);
}

@media (min-width: 52em) {
  .index__go {
    display: block;
  }
}

.index__go-icon,
.index__mark {
  inline-size: 1.35rem;
  block-size: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: scaleX(var(--dir));
  transition: transform var(--dur-3) var(--ease-out-expo);
}

.index--linked .index__cell:hover .index__go-icon {
  transform: scaleX(var(--dir)) translateX(0.35rem);
}

.index__mark {
  color: var(--brass);
  opacity: 0.7;
}

/* ------------------------------------------------------------ dark bands */

.section--dark .index {
  border-block-start-color: var(--line-dark);
}

.section--dark .index__row {
  border-block-end-color: var(--line-dark);
}

.section--dark .index__num {
  color: var(--brass-light);
}

.section--dark .index__title {
  color: var(--white);
}

.section--dark .index--linked .index__cell:hover {
  background: color-mix(in oklab, var(--cream) 5%, transparent);
}

.section--dark .index--linked .index__cell:hover .index__title {
  color: var(--brass-light);
}

.section--dark .index__cell::before {
  background: var(--brass);
}

.section--dark .index__meta {
  color: var(--on-dark-muted);
  border-inline-start-color: var(--line-dark);
}

.section--dark .index__go {
  color: var(--brass-light);
}

/* ==========================================================================
   Squared-off consequences
   ==========================================================================
   With every radius at zero, several components that relied on a rounded
   silhouette need their edges restated as rules instead. */

.btn {
  border-width: 1px;
}

/* The primary action is a solid block; the ghost is an outline. Both square. */
.btn--primary::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 2px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: var(--rule-origin, left);
  transition: transform var(--dur-4) var(--ease-out-expo);
}

[dir='rtl'] .btn--primary {
  --rule-origin: right;
}

@media (hover: hover) {
  .btn--primary:hover::after {
    transform: scaleX(1);
  }
}

/* Cards that remain — the 404 links — lose their float and become ruled
   panels, so no page carries two visual languages at once. */
.card {
  border: 0;
  border-block-start: 2px solid var(--espresso);
  background: transparent;
  padding-inline: 0;
}

.card::before,
.card::after {
  display: none;
}

@media (hover: hover) {
  .card--link:hover {
    transform: none;
    box-shadow: none;
    border-block-start-color: var(--maroon);
  }
}

.card__icon {
  inline-size: 2.25rem;
  block-size: 2.25rem;
  padding: 0.45rem;
  background: transparent;
  border: var(--rule-strong);
}

.card--link:hover .card__icon {
  background: transparent;
  color: var(--maroon);
  border-color: var(--maroon);
  transform: none;
}

/* Credentials and stats become ruled schedules rather than boxed grids. */
.credentials,
.stats {
  box-shadow: none;
  border-block: var(--rule-strong);
  background: transparent;
}

.credentials__row,
.stats__item {
  box-shadow: none;
  background: transparent;
  border-inline-end: var(--rule);
  border-block-end: var(--rule);
}

.section--dark .credentials,
.section--dark .stats {
  border-block-color: var(--line-dark);
}

.section--dark .credentials__row,
.section--dark .stats__item {
  border-color: var(--line-dark);
}

.contact-block,
.profile,
.map,
.map__photo,
.table-scroll,
.field__control,
.lang-switch,
.nav-toggle,
.form__status {
  border-radius: 0;
}

.profile {
  border: 0;
  border-block-start: 2px solid var(--maroon);
  background: transparent;
  padding-inline: 0;
}

@media (hover: hover) {
  .profile:hover {
    transform: none;
    box-shadow: none;
  }
}

.contact-block {
  border: 0;
  border-block-start: 2px solid var(--espresso);
  background: transparent;
  padding-inline: 0;
}

@media (hover: hover) {
  .contact-block:hover {
    transform: none;
    border-block-start-color: var(--maroon);
  }
}

.contact-block__icon,
.profile__icon,
.feature-list__icon {
  background: transparent;
  border: var(--rule-strong);
}

.hero__media {
  border-radius: 0;
  box-shadow: none;
}

/* The authorising reference reads as a stacked label, not as a wrapped
   sentence: who holds it, then what they hold. */
.index__meta-line {
  display: block;
}

.index__meta-line--entity {
  color: var(--fg-muted);
  font-weight: 500;
  margin-block-end: 0.15rem;
}

.section--dark .index__meta-line--entity {
  color: var(--on-dark);
}

/* ------------------------------------------------------- the plain variant
   A schedule whose rows carry no authorising reference — the service pages'
   content groupings. Two columns, no arrow, no meta rule: the ordinal and the
   entry, and nothing pretending to occupy the rest of the row. */

@media (min-width: 52em) {
  .index--plain .index__cell {
    grid-template-columns: 3.5rem minmax(0, 1fr);
    grid-template-areas: 'num body';
    align-items: start;
  }

  .index--plain .index__text {
    max-inline-size: 54rem;
  }
}

/* Two columns of entries on a wide screen, because a plain schedule with no
   reference column leaves half the page empty otherwise. */
@media (min-width: 72em) {
  .index--plain {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2rem, 1rem + 3vw, 4rem);
    border-block-start: 0;
  }

  .index--plain .index__row:nth-child(-n + 2) {
    border-block-start: var(--rule-strong);
  }

  .index--plain .index__text {
    max-inline-size: none;
  }
}

.section--dark .index--plain .index__row:nth-child(-n + 2) {
  border-block-start-color: var(--line-dark);
}


/* ─── 10-motion.css ─── */
/* ==========================================================================
   Motion
   ==========================================================================
   Two rules govern everything here:

   1. Motion is never load-bearing. If JavaScript fails, if IntersectionObserver
      is missing, or if the visitor asks for reduced motion, every element is
      visible and readable in its final state. The `reveal` class only ever
      *hides* something after JavaScript has confirmed it can also show it.

   2. Only compositor-friendly properties animate — transform, opacity, filter.
      Nothing here triggers layout.
   ========================================================================== */

/* ---------------------------------------------------------- scroll reveal
   `.reveal` is applied by JavaScript, so a no-JS visitor never sees the
   hidden state. `.reveal-off` is the escape hatch the script sets when the
   visitor prefers reduced motion. */

.reveal {
  opacity: 0;
  transform: translateY(0.85rem);
  clip-path: inset(0 0 12% 0);
  transition:
    opacity var(--dur-4) var(--ease-out),
    transform var(--dur-5) var(--ease-out-expo),
    clip-path var(--dur-5) var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: transform, opacity;
}

.reveal.is-revealed {
  opacity: 1;
  transform: none;
  clip-path: inset(-0.5em);
  will-change: auto;
}

/* Index rows draw their own rule as they arrive, so a long schedule reads as
   being written out rather than as a list that faded in. */
.index__row.reveal {
  clip-path: none;
  border-block-end-color: transparent;
  transition:
    opacity var(--dur-3) var(--ease-out),
    transform var(--dur-4) var(--ease-out-expo),
    border-color var(--dur-5) var(--ease-out) 120ms;
}

.index__row.reveal.is-revealed {
  border-block-end-color: var(--line);
}

.section--dark .index__row.reveal.is-revealed {
  border-block-end-color: var(--line-dark);
}

.reveal-off .reveal {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------- hero entrance
   Not a fade-up. Everything on the internet fades up, and it is the single
   clearest tell of a template.

   Instead the headline is *uncovered*: each line wipes in from the reading
   edge behind a clip mask while rising a few pixels, the way a title block is
   drawn rather than the way a card appears. The photograph is uncovered on the
   opposite axis so the two moves meet in the middle. The rules draw. The
   credentials ribbon counts in from the reading edge, cell by cell.

   Total choreography is under 1.4s and every step is transform/opacity/clip
   only, so none of it touches layout. */

.hero__title {
  animation: title-wipe var(--dur-6) var(--ease-out-expo) 120ms backwards;
}

@keyframes title-wipe {
  from {
    opacity: 0;
    transform: translateY(0.5em);
    clip-path: inset(0 0 110% 0);
  }
  to {
    opacity: 1;
    transform: none;
    clip-path: inset(-0.3em -0.3em -0.3em -0.3em);
  }
}

.hero__body > .eyebrow {
  animation: rule-in var(--dur-5) var(--ease-out-expo) backwards;
}

@keyframes rule-in {
  from {
    opacity: 0;
    transform: translateX(calc(var(--dir) * -1rem));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* The lede's top rule draws before the text arrives. */
.hero__lede {
  animation: lede-in var(--dur-5) var(--ease-out-expo) 420ms backwards;
}

@keyframes lede-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
    border-block-start-color: transparent;
  }
}

.hero__body > .hero__text {
  animation: lede-in var(--dur-5) var(--ease-out-expo) 500ms backwards;
}

.hero__body > .cta-row {
  animation: lede-in var(--dur-5) var(--ease-out-expo) 580ms backwards;
}

/* The photograph is uncovered from the outer edge inward, against the
   headline's downward wipe. */
.hero__media {
  animation: media-settle 1400ms var(--ease-out-expo) backwards;
}

@keyframes media-settle {
  from {
    opacity: 0;
    transform: scale(1.06);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes media-wipe {
  from {
    clip-path: inset(0 0 0 100%);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

[dir='rtl'] .hero__media {
  animation-name: media-wipe-rtl;
}

@keyframes media-wipe-rtl {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* A slow drift behind the mask, so the picture is never quite static. */
.hero__media img {
  animation: hero-drift 32s var(--ease-in-out) infinite alternate;
}

@keyframes hero-drift {
  from {
    transform: scale(1.02);
  }
  to {
    transform: scale(1.09) translate3d(-1.2%, -0.8%, 0);
  }
}

/* The ribbon counts in from the reading edge. */
.hero__strip-item {
  animation: cell-in var(--dur-4) var(--ease-out-expo) backwards;
}

@keyframes cell-in {
  from {
    opacity: 0;
    transform: translateY(0.6rem);
  }
}

.hero__strip-item:nth-child(1) {
  animation-delay: 700ms;
}
.hero__strip-item:nth-child(2) {
  animation-delay: 780ms;
}
.hero__strip-item:nth-child(3) {
  animation-delay: 860ms;
}
.hero__strip-item:nth-child(4) {
  animation-delay: 940ms;
}
.hero__strip-item:nth-child(5) {
  animation-delay: 1020ms;
}

/* ------------------------------------------------------- section rule wipe
   A hairline that draws itself across the top of each dark band as it enters
   the viewport. Small, but it makes the section transitions feel authored. */

.cta-band__body::after {
  content: '';
  display: block;
  block-size: 2px;
  inline-size: 4rem;
  margin-block-start: var(--space-m);
  background: linear-gradient(90deg, var(--maroon), var(--brass));
  transform: scaleX(0);
  transform-origin: var(--rule-origin, left);
  transition: transform var(--dur-6) var(--ease-out-expo) 200ms;
}

[dir='rtl'] .cta-band__body::after {
  --rule-origin: right;
}

.reveal-off .cta-band__body::after {
  transform: scaleX(1);
}

/* ------------------------------------------------------- page transitions
   Chromium cross-fades between pages where this is supported; every other
   browser simply navigates as usual. Nothing depends on it. */

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: vt-out 180ms var(--ease-out) both;
}

::view-transition-new(root) {
  animation: vt-in 320ms var(--ease-out-expo) both;
}

@keyframes vt-out {
  to {
    opacity: 0;
  }
}

@keyframes vt-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
}

/* ==========================================================================
   Reduced motion
   ==========================================================================
   Not a token adjustment — a hard stop. Everything decorative is frozen and
   every element is placed in its final state. The two exceptions kept alive
   are opacity-only fades under 200ms, which do not trigger vestibular
   symptoms and preserve a sense of state change on the disclosure widgets.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero::before,
  .hero__inner::before,
  .hero__media img,
  .cta-band::before {
    animation: none !important;
  }

  .cta-band__body::after {
    transform: scaleX(1) !important;
  }

  @view-transition {
    navigation: none;
  }
}

/* Visitors who have not asked for reduced motion but are on a device that
   cannot hover get the same treatment for the expensive background layers —
   they cost battery and are barely visible on a phone. */
@media (hover: none) and (max-width: 48em) {
  .hero__inner::before {
    animation: none;
  }

  .hero::before {
    animation-duration: 80s;
  }
}


/* ─── 11-rtl.css ─── */
/* ==========================================================================
   Right-to-left
   ==========================================================================
   Almost nothing belongs in this file, and that is the point. The rest of the
   stylesheet is written with logical properties — margin-inline-start,
   inset-inline, border-inline-start, text-align: start — so the Arabic build
   mirrors itself. What remains here are the cases CSS logical properties do
   not cover:

     · transforms, whose axes are physical and never mirror on their own
     · background-position, which takes physical keywords
     · things that must NOT mirror, chiefly the logo and Latin data

   The last category is the one that is usually got wrong. A mirrored logo is
   a broken logo, and a mirrored phone number is unreadable.
   ========================================================================== */

/* ------------------------------------------------- things that must NOT flip
   The SQS wordmark is a piece of artwork, not an arrow. Latin brand names,
   phone numbers, email addresses, registration numbers and activity codes are
   read left-to-right in both languages. */

/* The direction factor. Everything that translates along the inline axis
   multiplies by this instead of being restated in a mirrored rule. */
[dir='rtl'] {
  --dir: -1;
}

[dir='rtl'] .sqs-mark,
[dir='rtl'] .lang-switch__icon,
[dir='rtl'] .footer__brand .sqs-mark {
  transform: none;
}

[dir='rtl'] bdi,
[dir='rtl'] .credentials__val,
[dir='rtl'] .footer__credentials dd,
[dir='rtl'] .footer__contact-link,
[dir='rtl'] .stats__value {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}

/* A right-to-left definition list still wants its Latin value on the right,
   aligned with the Arabic key above it. `text-align: end` inside an isolated
   LTR run puts it there. */
[dir='rtl'] .credentials__val,
[dir='rtl'] .footer__credentials dd {
  text-align: end;
}

/* ---------------------------------------------- directional glyphs that DO
   Chevrons and arrows point along the reading direction, so they mirror.
   They are handled at their own component in 07-components.css; this is the
   catch-all for any icon marked as directional. */

[dir='rtl'] .icon--directional {
  transform: scaleX(-1);
}

/* ------------------------------------------------------ physical properties
   `background-position` has no logical form, so the select arrow and any
   masked layer with a directional gradient are repositioned here. */

[dir='rtl'] .hero::before,
[dir='rtl'] .cta-band::before {
  /* Mirror the aurora so the maroon light source falls on the same side of
     the composition relative to the type, not the same side of the screen. */
  transform: scaleX(-1);
}

/* The aurora animation overwrites `transform`, so RTL gets its own keyframes
   rather than fighting the cascade. */
@keyframes hero-aurora-rtl {
  0% {
    transform: scaleX(-1) translate3d(-3%, -2%, 0) scale(1);
  }
  50% {
    transform: scaleX(-1) translate3d(4%, 3%, 0) scale(1.09);
  }
  100% {
    transform: scaleX(-1) translate3d(-2%, 4%, 0) scale(1.03);
  }
}

[dir='rtl'] .hero::before,
[dir='rtl'] .cta-band::before {
  animation-name: hero-aurora-rtl;
}

/* The technical grid drifts along the reading direction. */
@keyframes hero-grid-rtl {
  to {
    transform: translate3d(-2.5rem, 2.5rem, 0);
  }
}

[dir='rtl'] .hero__grid {
  animation-name: hero-grid-rtl;
}

/* -------------------------------------------------------------- typography
   Arabic has no italic tradition; a synthesised oblique is a defect, not an
   emphasis. Weight and colour carry emphasis instead. */

[lang='ar'] em,
[lang='ar'] i,
[lang='ar'] cite {
  font-style: normal;
  font-weight: 600;
}

[lang='ar'] .hero__title em {
  font-weight: 700;
}

/* Uppercasing and letter-spacing are meaningless in a unicase, cursive script
   and letter-spacing actively breaks the joins between glyphs. Every place
   the Latin build uses them is neutralised at its own component; this is the
   safety net for anything added later. */

[lang='ar'] * {
  text-transform: none;
}

[lang='ar'] :is(.eyebrow, .footer__heading, .credentials__key, .contact-block__title, .steps__meta, .hero__strip-label, .data-table thead th) {
  letter-spacing: 0;
}

/* Arabic numerals in the Latin (Western) forms, which is what Gulf corporate
   sites and Qatari government documents use for registration and phone data. */
[lang='ar'] {
  font-variant-numeric: lining-nums tabular-nums;
}

/* --------------------------------------------------------------- polish
   Arabic ascenders and descenders are longer than Latin ones, so tight
   headings clip in a way the English build never does. A touch more room. */

[lang='ar'] :is(h1, h2, h3, .hero__title, .section__title, .card__title) {
  padding-block-end: 0.08em;
}

/* The Arabic comma and full stop sit on the baseline differently; nudging the
   list marker keeps bullets optically centred. */
[lang='ar'] .tick-list__icon {
  margin-block-start: 0.38em;
}


/* ─── 12-mobile.css ─── */
/* ==========================================================================
   Mobile hardening — notch, home indicator, iOS Safari quirks
   ==========================================================================
   The pages declare `viewport-fit=cover`, which lets the layout run under the
   rounded corners and the notch / Dynamic Island. That is only safe if every
   edge-anchored element then pays the inset back with env(safe-area-inset-*).

   Notes on the specific devices this is written against:

     · iPhone with a notch or Dynamic Island, held in landscape, puts the
       cutout on the leading or trailing edge — so the horizontal insets matter
       far more than the top one, and they are asymmetric.
     · The home indicator sits over the bottom ~34px. Anything fixed to the
       bottom edge (the language offer bar) has to clear it.
     · iOS Safari's URL bar collapses on scroll, which makes `100vh` taller
       than the visible viewport. `100svh` and `100dvh` are used instead.
     · iOS zooms the page when a focused input is under 16px. Every control
       here inherits `--step-0`, whose floor is exactly 1rem, so it does not.

   `env()` resolves to 0 everywhere it does not apply, so none of this needs a
   feature query or a device test.
   ========================================================================== */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* ------------------------------------------------------------------ page
   Rather than pad every component, the gutter itself absorbs the horizontal
   inset. Because containers are sized with `min(100% - gutter*2, …)`, content
   clears the notch in landscape automatically and nothing else has to know. */

body {
  padding-inline: 0;
}

@supports (padding: max(0px)) {
  :root {
    --gutter: max(clamp(1.25rem, 0.9rem + 1.75vw, 2.5rem), var(--safe-left), var(--safe-right));
  }
}

/* --------------------------------------------------------------- header
   The sticky header extends up under the status bar so the blur reaches the
   screen edge, and pads its own content back down out of the notch. */

.site-header {
  padding-block-start: var(--safe-top);
}

/* ---------------------------------------------------------- mobile drawer
   The drawer opens below the header, so its top inset is already paid. It
   still needs bottom room for the home indicator, and it must not rubber-band
   the page behind it. */

.mobile-nav {
  inset-block-start: calc(var(--header-h) + var(--safe-top));
  /* Fall back to the small viewport height so the drawer does not extend
     under a collapsing iOS URL bar. */
  block-size: calc(100svh - var(--header-h) - var(--safe-top));
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.mobile-nav__inner {
  padding-block-end: calc(var(--space-2xl) + var(--safe-bottom));
}

/* ----------------------------------------------------- language offer bar
   Fixed to the bottom edge, so it clears the home indicator explicitly. */

.lang-offer {
  inset-block-end: max(var(--space-m), calc(var(--safe-bottom) + 0.5rem));
}

/* --------------------------------------------------------------- footer */

.site-footer__bar {
  padding-block-end: max(var(--space-m), calc(var(--safe-bottom) + 0.5rem));
}

/* ------------------------------------------------------------ iOS Safari */

/* Grey flash on tap looks like a rendering fault on a branded site. The focus
   ring and the :active transform already signal the press. */
a,
button,
summary,
.card,
.field__control {
  -webkit-tap-highlight-color: transparent;
}

/* Safari needs the prefix for a clipped background on gradient text and for
   the backdrop filter on the header. */
.site-header {
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}

/* iOS renders `appearance: none` selects and date inputs with a stubborn
   inner shadow and rounded corners of its own. */
input,
textarea,
select {
  -webkit-appearance: none;
  appearance: none;
  border-radius: var(--radius-m);
}

/* Restore the affordances `appearance: none` strips from checkable inputs. */
input[type='checkbox'],
input[type='radio'] {
  -webkit-appearance: auto;
  appearance: auto;
}

/* Safari on iOS ignores `resize: vertical` unless the element can scroll. */
textarea.field__control {
  -webkit-overflow-scrolling: touch;
}

/* ------------------------------------------------------- touch ergonomics
   Every interactive target clears 44×44 CSS px, the figure Apple's HIG and
   WCAG 2.2 both settle on. Most already do; these are the ones that did not. */

@media (pointer: coarse) {
  .nav__sublink,
  .footer__list a,
  .site-footer__legal a,
  .faq__q {
    min-block-size: 44px;
    display: flex;
    align-items: center;
  }

  .footer__list a,
  .site-footer__legal a {
    /* A flex item cannot also shrink-wrap to its text for the hover nudge,
       so the nudge is dropped on touch devices where there is no hover. */
    transform: none !important;
  }

  .lang-offer__dismiss {
    inline-size: 2.75rem;
    block-size: 2.75rem;
  }
}

/* ------------------------------------------------------- landscape phones
   A phone in landscape has very little vertical room. The hero's generous
   block padding turns into a full screen of empty espresso, so it collapses. */

@media (max-height: 26rem) and (orientation: landscape) {
  .hero {
    padding-block-start: var(--space-xl);
  }

  .hero__inner {
    padding-block-end: var(--space-xl);
  }

  .hero__title {
    font-size: var(--step-4);
  }

  .mobile-nav {
    block-size: calc(100dvh - var(--header-h) - var(--safe-top));
  }
}

/* --------------------------------------------------------- narrow phones
   360px and below — still a large share of Android traffic in the Gulf. */

@media (max-width: 22.5rem) {
  .hero__strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .btn {
    inline-size: 100%;
  }

  .cta-row {
    flex-direction: column;
    align-items: stretch;
  }

  .footer__credentials {
    gap: var(--space-s);
  }
}

/* ---------------------------------------------------------------- print
   Procurement teams print pages to attach to a pre-qualification file. */

@media print {
  .site-header,
  .mobile-nav,
  .lang-offer,
  .skip-link,
  .cta-row,
  .nav-toggle {
    display: none !important;
  }

  .hero,
  .section--dark,
  .cta-band,
  .site-footer {
    background: #fff !important;
    color: #000 !important;
  }

  .hero::before,
  .hero::after,
  .hero__inner::before,
  .cta-band::before {
    display: none !important;
  }

  .hero__title,
  .section__title,
  h1,
  h2,
  h3 {
    color: #000 !important;
  }

  .faq__item {
    /* Print every answer, not just the open one. */
    display: block;
  }

  .faq__item > .faq__a {
    display: block !important;
  }

  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 0.85em;
    word-break: break-all;
  }

  .section {
    break-inside: avoid;
    padding-block: 1.5rem;
  }
}