/*------------------------------------------------------------------------------
  Amnix design system
  ----------------------------------------------------------------------------
  Structure and interaction logic follow the RTC site: a token ramp exposed as
  CSS custom properties, a light theme that INVERTS the neutral ramp (so one set
  of component rules serves both themes), and a `.force-dark` escape hatch for
  subtrees that sit over dark imagery.

  The geometry and interaction language stay Amnix's; the palette is RTC's. The
  accent ramp below is the same orange the RTC site ships as `--cyra-*`, so this
  reads as RTC rather than as a second brand:

    RTC site                     This site
    ---------------------------  ---------------------------------------------
    rounded-3xl (24px)           near-square, 3px, with a notched corner
    blurred "glass" surfaces     solid panels + hairline border + accent rule
    orange accent                the same orange, amber as the secondary
    plain-text eyebrows          bracketed, indexed, monospaced eyebrows
    image-crossfade hero slider  single asymmetric hero over the particle field

  The neutral "ink" ramp is still the template's navy, which is what keeps the
  panels and blueprint grid reading as they were designed to.

  Bootstrap supplies the grid and reset only; everything below is ours.
------------------------------------------------------------------------------*/

/*==============================================================================
  1. Tokens
==============================================================================*/

:root {
  color-scheme: dark;

  /* -- Accent: RTC orange. Shared by both themes, and identical to the ramp the
     RTC site ships as `--cyra-*`, so the two read as the same brand. -- */
  --ax-50: 255 247 237;
  --ax-100: 255 237 213;
  --ax-200: 254 215 170;
  --ax-300: 253 186 116;
  --ax-400: 251 146 60;
  --ax-500: 249 115 22;   /* #f97316 — the RTC primary */
  --ax-600: 234 88 12;
  --ax-700: 194 65 12;
  --ax-800: 154 52 18;
  --ax-900: 124 45 18;
  --ax-950: 67 20 7;

  /*
    Accent-as-text. The ramp above is shared across themes, so a pale step that
    reads well on a dark panel disappears on a light one. These carry the text
    role instead: identical to the ramp on dark surfaces, and the dark end of
    the ramp under the light theme. `.force-dark` puts them back, so a subtree
    over dark imagery keeps the pale accent whatever the site theme is.
  */
  --ax-ink-200: 254 215 170;
  --ax-ink-300: 253 186 116;
  --ax-ink-400: 251 146 60;
  --ax-ink-amber: 245 158 11;

  /* Secondary accent. Used sparingly: meters, step rails, the "02" style index
     numerals. Amber rather than the template's original teal — a cool secondary
     against a warm primary reads as a second brand, not a highlight. */
  --ax-amber: 245 158 11;

  /* -- Neutrals (DARK theme mapping). Navy-tinted, not RTC's slate. -- */
  --ink-50: 245 248 252;
  --ink-100: 230 237 247;
  --ink-200: 203 216 232;
  --ink-300: 159 178 202;
  --ink-400: 111 133 163;
  --ink-500: 77 97 128;
  --ink-600: 54 71 97;
  --ink-700: 36 51 74;
  --ink-800: 22 34 52;
  --ink-900: 12 22 38;
  --ink-950: 6 13 24;

  /* -- Geometry. The whole system is squarer than RTC's. -- */
  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 4px;
  --notch: 18px;          /* size of the cut corner on feature panels */

  /* -- Rhythm -- */
  --section-y: 5.5rem;
  --shell: 1200px;
  --gutter: 1.25rem;

  --font-sans: 'Poppins', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, monospace;
  --font-ar: 'IBM Plex Sans Arabic', 'Poppins', ui-sans-serif, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  scroll-behavior: smooth;
}

/* The light theme inverts the neutral ramp. Component rules never branch on
   theme — `bg-ink-950` is the page in both, it just resolves differently. */
:root[data-theme='light'] {
  color-scheme: light;

  --ax-ink-200: 194 65 12;
  --ax-ink-300: 194 65 12;
  --ax-ink-400: 194 65 12;
  --ax-ink-amber: 146 64 14;

  --ink-50: 6 13 24;
  --ink-100: 12 22 38;
  --ink-200: 30 44 66;
  --ink-300: 54 71 97;
  --ink-400: 90 110 138;
  --ink-500: 122 141 168;
  --ink-600: 168 184 205;
  --ink-700: 205 216 230;
  --ink-800: 228 235 244;
  --ink-900: 240 244 250;
  --ink-950: 250 251 253;
}

/* Force the dark mapping regardless of site theme. For the hero, the footer and
   the transparent header, where a light palette would kill contrast. */
.force-dark {
  color-scheme: dark;

  --ax-ink-200: 254 215 170;
  --ax-ink-300: 253 186 116;
  --ax-ink-400: 251 146 60;
  --ax-ink-amber: 245 158 11;

  --ink-50: 245 248 252;
  --ink-100: 230 237 247;
  --ink-200: 203 216 232;
  --ink-300: 159 178 202;
  --ink-400: 111 133 163;
  --ink-500: 77 97 128;
  --ink-600: 54 71 97;
  --ink-700: 36 51 74;
  --ink-800: 22 34 52;
  --ink-900: 12 22 38;
  --ink-950: 6 13 24;
}

@media (min-width: 768px) {
  :root {
    --section-y: 7rem;
    --gutter: 2rem;
  }
}

/*==============================================================================
  2. Base
==============================================================================*/

/* Horizontal containment has to hold on every engine: `hidden` is the reliable
   base, `clip` is the upgrade that doesn't break `position: sticky` children. */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}
@supports (overflow-x: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

/* The header is fixed, so an in-page jump (#services, #team, and the contact
   handler's redirect to #message1) would land with the target tucked underneath
   it. Anchor targets reserve the bar's height plus a little air. */
section[id],
main[id],
div[id],
:target {
  scroll-margin-top: 6rem;
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.65;
  color: rgb(var(--ink-100));
  background: rgb(var(--ink-950));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: rgb(var(--ink-50));
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
}

/*
  Leading scales with size. 1.12 suits the hero, where the type is large enough
  that tight leading reads as deliberate; at h2 and below the same figure closes
  up the lines of a wrapped heading and the block looks squashed. Bigger type,
  tighter leading.
*/
h1 { font-size: clamp(2.5rem, 6vw, 4.25rem); font-weight: 800; }
h2 { font-size: clamp(1.875rem, 3.6vw, 2.75rem); line-height: 1.2; }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.3; }
h4 { font-size: 1.125rem; line-height: 1.35; }

p {
  margin: 0;
  color: rgb(var(--ink-200));
}

a {
  color: rgb(var(--ax-ink-400));
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
a:hover {
  color: rgb(var(--ax-ink-300));
}

img {
  max-width: 100%;
  height: auto;
}

hr {
  border: 0;
  border-top: 1px solid rgb(var(--ink-50) / 0.1);
  margin: 1.25rem 0;
  opacity: 1;
}

::selection {
  background: rgb(var(--ax-600) / 0.4);
  color: rgb(var(--ink-50));
}

:focus-visible {
  outline: 2px solid rgb(var(--ax-400) / 0.8);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* Poppins has no Arabic coverage, so Arabic gets a matching companion. */
html[lang='ar'] body,
body.rtl {
  font-family: var(--font-ar);
}

/* Latin letter-spacing tightening reads as broken joins in Arabic script. */
body.rtl h1,
body.rtl h2,
body.rtl h3,
body.rtl .ax-eyebrow,
body.rtl .ax-kicker {
  letter-spacing: normal;
}

body.rtl {
  direction: rtl;
  text-align: right;
}

/*==============================================================================
  3. Layout primitives
==============================================================================*/

/* The RTC `Container`, as a class. */
.ax-shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

#who-we-are,
#contact {
  scroll-margin-top: 4.75rem;
}

.ax-riyadh-feature {
  position: relative;
  min-height: clamp(18rem, 36vw, 31rem);
  margin-bottom: 0;
  overflow: hidden;
  border: 1px solid rgb(var(--ax-400) / 0.24);
  clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
  background: rgb(var(--ink-900));
}

.ax-riyadh-feature::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgb(var(--ink-950) / 0.58), transparent 48%),
    linear-gradient(110deg, rgb(var(--ax-900) / 0.2), transparent 42%);
}

.ax-riyadh-feature img {
  display: block;
  width: 100%;
  height: clamp(18rem, 36vw, 31rem);
  object-fit: cover;
  object-position: 50% 68%;
}

.ax-riyadh-feature figcaption {
  position: absolute;
  z-index: 1;
  inset-inline-start: 1.25rem;
  bottom: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.65rem 0.85rem;
  border: 1px solid rgb(var(--ax-300) / 0.36);
  background: rgb(var(--ink-950) / 0.84);
  color: rgb(var(--ink-50));
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.ax-riyadh-feature figcaption i {
  color: rgb(var(--ax-ink-amber));
}

.ax-riyadh-feature__statement {
  position: absolute;
  z-index: 1;
  top: 50%;
  inset-inline-end: clamp(1.25rem, 4vw, 3.5rem);
  width: min(24rem, 40%);
  margin: 0;
  padding-inline-end: 1.15rem;
  border-inline-end: 3px solid rgb(var(--ax-amber));
  color: #fff;
  font-size: clamp(1.35rem, 2.8vw, 2.5rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.035em;
  text-align: end;
  text-shadow: 0 3px 18px rgb(var(--ink-950) / 0.72);
  transform: translateY(-50%);
}
.ax-riyadh-feature__statement > span {
  display: block;
}

@media (max-width: 575.98px) {
  .ax-riyadh-feature,
  .ax-riyadh-feature img {
    min-height: 23rem;
    height: 23rem;
  }
  .ax-riyadh-feature img {
    object-position: 50% 72%;
  }
  .ax-riyadh-feature__statement {
    top: 1.25rem;
    inset-inline: 1.25rem;
    width: auto;
    padding-inline-end: 0.8rem;
    font-size: 1.35rem;
    transform: none;
  }
}

.ax-about-card__image,
.ax-commitment-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-bottom: 1px solid rgb(var(--ink-50) / 0.1);
}

.ax-about-card__body,
.ax-commitment-card__body {
  position: relative;
  padding: 0 2.25rem 2.25rem;
}

.ax-about-card__body .ax-icon,
.ax-commitment-card__body .ax-icon {
  margin-top: -1.5rem;
  margin-bottom: 1.5rem;
  background: rgb(var(--ink-900));
  box-shadow: 0 0 0 0.35rem rgb(var(--ink-900));
}

.ax-about-card__body .ax-value__title,
.ax-commitment-card__body .ax-value__title {
  margin: 0;
  padding-inline-end: 0;
}

.ax-about-card__body .ax-value__text,
.ax-commitment-card__body .ax-value__text {
  margin-top: 0.9rem;
  max-width: 36rem;
  line-height: 1.75;
}

@media (max-width: 575.98px) {
  .ax-about-card__body {
    padding-inline: 1.5rem;
    padding-bottom: 1.75rem;
  }
  .ax-commitment-card__body {
    padding-inline: 1.5rem;
    padding-bottom: 1.75rem;
  }
}

:root[data-theme='light'] .ax-about-card__image,
:root[data-theme='light'] .ax-commitment-card__image {
  border-bottom-color: rgb(var(--ink-600) / 0.45);
}

:root[data-theme='light'] .ax-about-card__body .ax-icon,
:root[data-theme='light'] .ax-commitment-card__body .ax-icon {
  background: #fff;
  box-shadow: 0 0 0 0.35rem #fff;
}

/* Alternating surface, so consecutive sections separate without a hard border. */
.ax-section--alt {
  background: rgb(var(--ink-900) / 0.55);
  border-block: 1px solid rgb(var(--ink-50) / 0.06);
}

/* Ambient accent wash. RTC uses a soft radial bloom; ours is a tighter
   directional gradient so it reads as a lit edge rather than a glow. */
.ax-wash::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    120deg,
    rgb(var(--ax-600) / 0.14) 0%,
    transparent 42%
  );
}

.ax-wash--end::before {
  background: linear-gradient(
    240deg,
    rgb(var(--ax-amber) / 0.12) 0%,
    transparent 42%
  );
}

/* Blueprint grid — the Amnix counterpart to RTC's dotted field. Lines, not
   dots, to match the squarer geometry. */
.ax-blueprint::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(to right, rgb(var(--ink-50) / 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(var(--ink-50) / 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 40%, transparent 100%);
}

/*==============================================================================
  4. Section headings
==============================================================================*/

/* Bracketed, indexed, monospaced. RTC's eyebrow is plain uppercase text; the
   brackets and the counter are what make this read as Amnix. */
.ax-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgb(var(--ax-ink-400));
}

/* The accent ramp is shared across themes, so the shade has to flip with the
   surface underneath it — exactly the problem RTC solves for `.text-eyebrow`. */
:root[data-theme='light'] .ax-eyebrow {
  color: rgb(var(--ax-700));
}

/* The active nav entry sits on a tinted pill, which lifts the background enough
   that the standard accent-ink step only just clears AA. One step darker keeps
   it comfortably readable without changing the hue. */
:root[data-theme='light'] .ax-header.is-stuck .ax-nav__link.is-active,
:root[data-theme='light'] .ax-drawer__list a.is-active {
  color: rgb(var(--ax-800));
}
:root[data-theme='light'] .force-dark .ax-eyebrow {
  color: rgb(var(--ax-ink-400));
}

.ax-eyebrow::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

.ax-section-head {
  max-width: 44rem;
}

.ax-section-head h2 {
  margin-top: 0.875rem;
  text-wrap: balance;
}

/*
  The same rhythm for panels that open with an eyebrow, a heading and a
  paragraph. `.ax-section-head` sets its own spacing; a bare panel inherits the
  global `margin: 0` on headings, so without this the eyebrow sits flush against
  the heading and the paragraph crowds straight up under it.
*/
.ax-panel > .ax-eyebrow + * {
  margin-top: 0.875rem;
}
.ax-panel > h2 + p,
.ax-panel > h3 + p {
  margin-top: 1.125rem;
}
.ax-panel > h2 {
  text-wrap: balance;
}

.ax-section-head > p {
  margin-top: 0.875rem;
  font-size: 1.0625rem;
  color: rgb(var(--ink-300));
  text-wrap: pretty;
}

/* Centred variant, for the CTA and stat bands. */
.ax-section-head--center {
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
}
.ax-section-head--center .ax-eyebrow::before {
  display: none;
}

/*==============================================================================
  5. Panels — the Amnix answer to RTC's `.glass`
==============================================================================*/

/*
  Solid surface, hairline border, and an accent rule along the top edge that
  runs the full width on hover. No backdrop blur: the notch and the rule carry
  the identity instead.
*/
.ax-panel {
  position: relative;
  height: 100%;
  padding: 1.75rem;
  background: rgb(var(--ink-900) / 0.9);
  border: 1px solid rgb(var(--ink-50) / 0.1);
  border-radius: var(--r-md);
  transition: border-color 0.35s var(--ease), background-color 0.35s var(--ease),
    transform 0.35s var(--ease);
}

/* Top accent rule: a short stub that extends across the panel on hover. */
.ax-panel::before {
  content: '';
  position: absolute;
  top: -1px;
  inset-inline-start: -1px;
  height: 2px;
  width: 2.75rem;
  background: linear-gradient(
    to right,
    rgb(var(--ax-600)),
    rgb(var(--ax-amber))
  );
  transition: width 0.45s var(--ease);
}
body.rtl .ax-panel::before {
  background: linear-gradient(to left, rgb(var(--ax-600)), rgb(var(--ax-amber)));
}

.ax-panel:hover,
.ax-panel:focus-within {
  border-color: rgb(var(--ax-500) / 0.45);
  background: rgb(var(--ink-900));
}
.ax-panel:hover::before,
.ax-panel:focus-within::before {
  width: calc(100% + 2px);
}

/* The signature: a cut top-inline-end corner. Applied to the feature panels
   only, so it stays a highlight rather than a tic. */
.ax-panel--notch {
  clip-path: polygon(
    0 0,
    calc(100% - var(--notch)) 0,
    100% var(--notch),
    100% 100%,
    0 100%
  );
}
body.rtl .ax-panel--notch {
  clip-path: polygon(
    var(--notch) 0,
    100% 0,
    100% 100%,
    0 100%,
    0 var(--notch)
  );
}

/* A hairline drawn across the notch, so the cut looks intentional. */
.ax-panel--notch::after {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  width: calc(var(--notch) * 1.5);
  height: 1px;
  background: rgb(var(--ink-50) / 0.18);
  transform-origin: top right;
  transform: rotate(45deg);
}
body.rtl .ax-panel--notch::after {
  transform-origin: top left;
  transform: rotate(-45deg);
}

/* Flush variant for panels whose child artwork bleeds to the edge. */
.ax-panel--flush {
  padding: 0;
  overflow: hidden;
}

/*
  Light-theme surface correction.

  Inverting the ink ramp gets the type right for free, but it leaves surfaces
  nearly indistinguishable: `ink-900` is a near-white and `ink-50 / 0.1` is a
  hairline you can't see, so on a light page the panels dissolved. Light needs
  the separation to come from a real border and a soft shadow instead of a
  darker fill — the one place the two themes genuinely need different rules.
*/
:root[data-theme='light'] .ax-panel {
  background: #fff;
  border-color: rgb(var(--ink-600) / 0.5);
  box-shadow: 0 1px 2px rgb(6 13 24 / 0.04), 0 8px 24px rgb(6 13 24 / 0.05);
}
:root[data-theme='light'] .ax-panel:hover,
:root[data-theme='light'] .ax-panel:focus-within {
  background: #fff;
  border-color: rgb(var(--ax-500) / 0.55);
  box-shadow: 0 1px 2px rgb(6 13 24 / 0.05), 0 14px 34px rgb(var(--ax-700) / 0.12);
}

:root[data-theme='light'] .ax-section--alt {
  background: rgb(var(--ink-900));
  border-block-color: rgb(var(--ink-600) / 0.4);
}

:root[data-theme='light'] .ax-input,
:root[data-theme='light'] .ax-textarea {
  background: #fff;
  border-color: rgb(var(--ink-600) / 0.65);
}
:root[data-theme='light'] .ax-input:focus,
:root[data-theme='light'] .ax-textarea:focus {
  border-color: rgb(var(--ax-600));
}

:root[data-theme='light'] .ax-pagehead {
  background: rgb(var(--ink-900));
  border-bottom-color: rgb(var(--ink-600) / 0.4);
}

/* The hatched CTA band keeps a dark, saturated field in both themes: it is the
   page's one loud moment and inverting it would flatten it completely. */
/* .ax-cta carries `force-dark` in the markup: it is a dark slab in both themes,
   so its ink tokens resolve dark and the text rules below need no light-theme
   special case. */

/* Divider hairlines and marked-list bullets need real weight on white. */
:root[data-theme='light'] hr,
:root[data-theme='light'] .ax-contact__list li,
:root[data-theme='light'] .ax-profile__meta li {
  border-color: rgb(var(--ink-600) / 0.5);
}

/*==============================================================================
  6. Icon frames, index numerals, watermarks
==============================================================================*/

.ax-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgb(var(--ax-500) / 0.35);
  border-radius: var(--r-sm);
  background: rgb(var(--ax-600) / 0.14);
  color: rgb(var(--ax-ink-300));
  font-size: 1.25rem;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.ax-panel:hover .ax-icon {
  background: rgb(var(--ax-600) / 0.24);
  border-color: rgb(var(--ax-400) / 0.6);
}

/*
  Kept for the SVG icon artwork in assets/images/icons, which is authored in
  mid-blue (#025add / #2B649A) and sinks into the dark panel behind it. No page
  references those files any more — every icon is a Bootstrap Icons glyph, which
  takes its colour from the accent token — so this rule is currently inert.
*/
.ax-icon img {
  width: 1.5rem;
  height: 1.5rem;
}
:root[data-theme='dark'] .ax-icon img,
.force-dark .ax-icon img {
  filter: brightness(1.85) saturate(1.15);
}

.ax-icon--lg {
  width: 3.5rem;
  height: 3.5rem;
  font-size: 1.5rem;
}

/* Monospaced index numeral ("01", "02"…). Used instead of RTC's ghosted
   oversized digit — smaller, technical, sat on the rule line. */
.ax-index {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: rgb(var(--ax-ink-amber));
}

/* Oversized watermark behind panel copy, for depth. */
/* Sits in the notch corner and stays out of the text column, so it reads as a
   register mark rather than something the copy is overlapping. */
.ax-watermark {
  position: absolute;
  top: 0.5rem;
  inset-inline-end: 1rem;
  font-size: 3.25rem;
  font-weight: 800;
  line-height: 1;
  color: rgb(var(--ax-400) / 0.1);
  pointer-events: none;
  user-select: none;
  font-family: var(--font-mono);
  transition: color 0.35s var(--ease);
}
:root[data-theme='light'] .ax-watermark {
  color: rgb(var(--ax-700) / 0.12);
}
.ax-panel:hover .ax-watermark {
  color: rgb(var(--ax-400) / 0.2);
}

/*==============================================================================
  7. Buttons
==============================================================================*/

.ax-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8125rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease),
    color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.ax-btn i,
.ax-btn svg {
  transition: transform 0.25s var(--ease);
}
.ax-btn:hover i,
.ax-btn:hover svg {
  transform: translateX(3px);
}
body.rtl .ax-btn:hover i,
body.rtl .ax-btn:hover svg {
  transform: translateX(-3px);
}
/* Applies to every right-arrow glyph, not just the ones inside a button — the
   `ax-more` card affordance and the breadcrumbs use the same mark and must point
   with the reading direction too. */
body.rtl .bi-arrow-right::before {
  transform: rotate(180deg);
  display: inline-block;
}

.ax-btn--primary {
  background: rgb(var(--ax-600));
  color: #fff;
  box-shadow: 0 1px 0 rgb(var(--ax-300) / 0.35) inset,
    0 8px 24px rgb(var(--ax-600) / 0.28);
}
.ax-btn--primary:hover {
  background: rgb(var(--ax-500));
  color: #fff;
  box-shadow: 0 1px 0 rgb(var(--ax-200) / 0.4) inset,
    0 10px 30px rgb(var(--ax-500) / 0.4);
}
.ax-btn--primary:active {
  background: rgb(var(--ax-700));
}

.ax-btn--outline {
  background: transparent;
  border-color: rgb(var(--ink-50) / 0.22);
  color: rgb(var(--ink-50));
}
.ax-btn--outline:hover {
  border-color: rgb(var(--ax-400) / 0.7);
  background: rgb(var(--ax-600) / 0.12);
  color: rgb(var(--ink-50));
}

.ax-btn--ghost {
  background: transparent;
  color: rgb(var(--ink-100));
  padding-inline: 0.75rem;
}
.ax-btn--ghost:hover {
  background: rgb(var(--ink-50) / 0.08);
  color: rgb(var(--ink-50));
}

.ax-btn--block {
  width: 100%;
}

/* Inline "read more" affordance on cards. */
.ax-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(var(--ax-ink-400));
}
:root[data-theme='light'] .ax-more {
  color: rgb(var(--ax-700));
}
.ax-more i {
  transition: transform 0.3s var(--ease);
}
.ax-panel:hover .ax-more i,
a:hover .ax-more i {
  transform: translateX(4px);
}
body.rtl .ax-panel:hover .ax-more i {
  transform: translateX(-4px);
}

/*==============================================================================
  8. Header
==============================================================================*/

.ax-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid transparent;
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease),
    backdrop-filter 0.35s var(--ease);
}

/* Transparent over the hero: the bar sits on dark imagery, so it takes the dark
   palette regardless of the site theme (RTC's `force-dark` trick). */
.ax-header:not(.is-stuck) {
  background: transparent;
}

.ax-header.is-stuck {
  background: rgb(var(--ink-950) / 0.94);
  border-bottom-color: rgb(var(--ax-500) / 0.18);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  box-shadow: 0 1rem 3rem rgb(0 0 0 / 0.14);
}

.ax-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 5.75rem;
}

.ax-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding-inline-end: 1.15rem;
}
.ax-logo::after {
  content: '';
  position: absolute;
  inset-inline-end: 0;
  width: 1px;
  height: 2rem;
  background: linear-gradient(
    to bottom,
    transparent,
    rgb(var(--ax-amber) / 0.72),
    transparent
  );
}
.ax-logo img {
  height: 4rem;
  width: auto;
}
.ax-logo__alt {
  display: none;
}
:root[data-theme='light'] .ax-header.is-stuck .ax-logo__default {
  display: none;
}
:root[data-theme='light'] .ax-header.is-stuck .ax-logo__alt {
  display: block;
}

/* -- Primary nav -- */

.ax-nav {
  display: none;
  align-items: center;
  gap: 0.25rem;
}
@media (min-width: 992px) {
  .ax-nav { display: flex; }
}

.ax-nav__list {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.1rem;
  margin: 0;
  padding: 0.3rem 0.4rem;
  list-style: none;
  border: 1px solid rgb(var(--ink-50) / 0.12);
  background:
    linear-gradient(100deg, rgb(var(--ax-600) / 0.1), transparent 30%),
    rgb(var(--ink-950) / 0.48);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ax-nav__list::before,
.ax-nav__list::after {
  content: '';
  position: absolute;
  z-index: 2;
  width: 0.42rem;
  height: 0.42rem;
  pointer-events: none;
}
.ax-nav__list::before {
  top: 0;
  inset-inline-start: 0;
  border-top: 1px solid rgb(var(--ax-amber));
  border-inline-start: 1px solid rgb(var(--ax-amber));
}
.ax-nav__list::after {
  bottom: 0;
  inset-inline-end: 0;
  border-bottom: 1px solid rgb(var(--ax-400));
  border-inline-end: 1px solid rgb(var(--ax-400));
}

.ax-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  min-height: 2.5rem;
  padding: 0.45rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  color: rgb(var(--ink-100));
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.ax-header:not(.is-stuck) .ax-nav__link {
  color: rgb(245 248 252 / 0.92);
  text-shadow: 0 1px 10px rgb(6 13 24 / 0.5);
}
.ax-nav__link:hover {
  background: rgb(var(--ax-500) / 0.1);
  color: rgb(var(--ink-50));
}
.ax-header:not(.is-stuck) .ax-nav__link:hover {
  color: #fff;
}

.ax-nav__link::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.55rem;
  bottom: 0.55rem;
  width: 2px;
  background: linear-gradient(to bottom, rgb(var(--ax-amber)), rgb(var(--ax-500)));
  transform: scaleY(0);
  transition: transform 0.25s var(--ease);
}
.ax-nav__link:hover::after,
.ax-nav__link.is-active::after {
  transform: scaleY(1);
}
.ax-nav__link.is-active {
  color: rgb(var(--ax-ink-300));
  background: rgb(var(--ax-600) / 0.14);
}

/* -- Services dropdown -- */

.ax-nav__item--has-menu {
  position: relative;
}

.ax-nav__menu {
  position: absolute;
  top: 100%;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: min(36rem, 75vw);
  padding-top: 0.65rem;
  margin: 0;
  list-style: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s var(--ease), visibility 0.25s var(--ease);
}
body.rtl .ax-nav__menu {
  transform: translateX(50%);
}
.ax-nav__item--has-menu:hover .ax-nav__menu,
.ax-nav__item--has-menu:focus-within .ax-nav__menu {
  visibility: visible;
  opacity: 1;
}

.ax-nav__menu-inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  padding: 0.55rem;
  overflow: hidden;
  background:
    linear-gradient(rgb(var(--ink-50) / 0.08), rgb(var(--ink-50) / 0.08)) 50% 0 / 1px 100% no-repeat,
    rgb(var(--ink-950) / 0.98);
  border: 1px solid rgb(var(--ax-400) / 0.24);
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 1rem, 100% 100%, 1rem 100%, 0 calc(100% - 1rem));
  box-shadow: 0 24px 60px rgb(6 13 24 / 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.ax-nav__menu a {
  position: relative;
  display: block;
  min-height: 5rem;
  padding: 0.9rem 1rem;
  border-radius: 0;
  color: rgb(var(--ink-50));
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  transition: background-color 0.2s var(--ease);
}
.ax-nav__menu a:hover {
  background:
    linear-gradient(90deg, rgb(var(--ax-600) / 0.24), rgb(var(--ax-600) / 0.08));
  color: rgb(var(--ink-50));
}
.ax-nav__menu a::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 1rem;
  width: 2px;
  height: 1rem;
  background: rgb(var(--ax-amber));
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}
.ax-nav__menu a:hover::before {
  opacity: 1;
}
.ax-nav__menu a small {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  font-weight: 400;
  color: rgb(var(--ink-300));
}

/* -- Header controls: theme, language, menu -- */

.ax-header__actions {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 0 0 auto;
  padding: 0.25rem;
  border: 1px solid rgb(var(--ink-50) / 0.12);
  background: rgb(var(--ink-950) / 0.42);
  clip-path: polygon(0.45rem 0, 100% 0, 100% calc(100% - 0.45rem), calc(100% - 0.45rem) 100%, 0 100%, 0 0.45rem);
}

.ax-ctl {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-inline-end: 1px solid rgb(var(--ink-50) / 0.1);
  border-radius: 0;
  background: transparent;
  color: rgb(var(--ink-50));
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease),
    color 0.25s var(--ease);
}
.ax-header:not(.is-stuck) .ax-ctl {
  color: #fff;
}
.ax-ctl:last-child {
  border-inline-end: 0;
}
.ax-ctl:hover {
  border-color: rgb(var(--ax-400) / 0.65);
  background: rgb(var(--ax-600) / 0.18);
  color: rgb(var(--ax-ink-300));
}

.ax-header__actions .ax-btn {
  display: none;
}
@media (min-width: 992px) {
  .ax-header__actions .ax-btn { display: inline-flex; }
}

.ax-burger {
  display: grid;
}
@media (min-width: 992px) {
  .ax-burger { display: none; }
}

/* Skip link — hidden until focused. */
.ax-skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0.75rem;
  z-index: 1100;
}
.ax-skip:focus {
  inset-inline-start: 1.25rem;
  padding: 0.625rem 1rem;
  background: rgb(var(--ink-950));
  color: rgb(var(--ink-50));
  border: 1px solid rgb(var(--ax-400));
  border-radius: var(--r-sm);
}

/* -- Mobile drawer -- */

.ax-drawer {
  display: none;
  border-top: 1px solid rgb(var(--ax-500) / 0.2);
  background:
    linear-gradient(135deg, rgb(var(--ax-800) / 0.2), transparent 45%),
    rgb(var(--ink-950) / 0.985);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  max-height: calc(100dvh - 4.75rem);
  overflow-y: auto;
}
body.ax-nav-open .ax-drawer {
  display: block;
}
@media (min-width: 992px) {
  body.ax-nav-open .ax-drawer { display: none; }
}

.ax-drawer__list {
  margin: 0;
  padding: 1rem 0 1.75rem;
  list-style: none;
}
.ax-drawer__list > li {
  position: relative;
  border-bottom: 1px solid rgb(var(--ink-50) / 0.08);
}
/* `:not(.ax-btn)` matters: this rule is more specific than `.ax-btn`, so without
   it the drawer's CTA was forced to `display: block` and lost its centring and
   picked up a divider line. */
.ax-drawer__list > li > a:not(.ax-btn) {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 3.5rem;
  padding: 0.75rem 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: rgb(var(--ink-50));
}
.ax-drawer__list > li > a:not(.ax-btn)::before {
  content: '';
  flex: 0 0 auto;
  width: 0.65rem;
  height: 1px;
  background: rgb(var(--ax-amber));
}
.ax-drawer__list > li > a:not(.ax-btn)::after {
  content: '';
  position: absolute;
  inset-inline-end: 0.75rem;
  width: 0.45rem;
  height: 0.45rem;
  border-top: 1px solid rgb(var(--ax-400));
  border-inline-end: 1px solid rgb(var(--ax-400));
  transform: rotate(45deg);
  opacity: 0.5;
}
.ax-drawer__list a.is-active {
  color: rgb(var(--ax-ink-300));
}
/* Service pages nest directly beneath their parent entry. */
.ax-drawer__sub {
  margin: 0 0 0.75rem;
  padding: 0 0 0 2.25rem;
  list-style: none;
  border-inline-start: 1px solid rgb(var(--ax-500) / 0.3);
}
.ax-drawer__sub a {
  display: block;
  padding: 0.55rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(var(--ink-200));
}
.ax-drawer__sub a:hover {
  color: rgb(var(--ax-ink-300));
  background: linear-gradient(90deg, rgb(var(--ax-600) / 0.16), transparent);
}
body.rtl .ax-drawer__sub {
  padding: 0 2.25rem 0 0;
}
body.rtl .ax-drawer__sub a:hover {
  background: linear-gradient(270deg, rgb(var(--ax-600) / 0.16), transparent);
}
.ax-drawer__cta {
  padding-top: 1.25rem;
}

/* Pages other than the home page start with a solid header, so their content
   needs to clear it. */
.ax-page {
  padding-top: 4.75rem;
}

/*==============================================================================
  9. Hero
==============================================================================*/

.ax-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(100svh, 54rem);
  padding-block: 9rem 5rem;
  overflow: hidden;
  color: rgb(var(--ink-50));
  background: rgb(6 13 24);
}

.ax-hero__backgrounds,
.ax-hero__backgrounds span {
  position: absolute;
  inset: 0;
}
.ax-hero__backgrounds {
  z-index: 0;
}
.ax-hero__backgrounds span {
  opacity: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1.025);
  transition: opacity 1.15s var(--ease), transform 7s linear;
}
.ax-hero__backgrounds span.is-active {
  opacity: 1;
  transform: scale(1);
}
.ax-hero__backgrounds .ax-hero__riyadh {
  background-position: 52% 54%;
}

/* particles.js canvas host */
.ax-hero__particles {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.ax-hero__particles canvas {
  display: block;
}

/* Scrims. Angled rather than RTC's straight vertical/horizontal pair, matching
   the diagonal geometry used elsewhere. */
.ax-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgb(6 13 24 / 0.94) 0%, rgb(6 13 24 / 0.55) 48%, rgb(6 13 24 / 0.2) 100%),
    linear-gradient(to bottom, transparent 55%, rgb(6 13 24 / 0.9) 100%);
}
body.rtl .ax-hero__scrim {
  background:
    linear-gradient(245deg, rgb(6 13 24 / 0.94) 0%, rgb(6 13 24 / 0.55) 48%, rgb(6 13 24 / 0.2) 100%),
    linear-gradient(to bottom, transparent 55%, rgb(6 13 24 / 0.9) 100%);
}

/* Accent bloom in the trailing corner. */
.ax-hero__bloom {
  position: absolute;
  z-index: 2;
  inset-inline-end: -6rem;
  top: 12%;
  width: 30rem;
  height: 30rem;
  pointer-events: none;
  opacity: 0.5;
  filter: blur(60px);
  background: radial-gradient(
    circle at 35% 35%,
    rgb(var(--ax-600) / 0.6),
    rgb(var(--ax-amber) / 0.18) 55%,
    transparent 70%
  );
}

.ax-hero .ax-shell {
  position: relative;
  z-index: 3;
}

.ax-hero__slides {
  display: grid;
}

/* Leading rule down the side of the hero copy — a structural marker rather than
   RTC's slide-dot row. */
.ax-hero__copy {
  grid-area: 1 / 1;
  position: relative;
  padding-inline-start: 1.75rem;
  max-width: 48rem;
}
.ax-hero__copy::before {
  content: '';
  position: absolute;
  inset-block: 0.4rem;
  inset-inline-start: 0;
  width: 2px;
  background: linear-gradient(
    to bottom,
    rgb(var(--ax-500)),
    rgb(var(--ax-amber) / 0.5),
    transparent
  );
}

.ax-hero__slide {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.9s var(--ease),
    visibility 0s linear 0.9s;
  pointer-events: none;
}
.ax-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
  pointer-events: auto;
}

/* Stagger the content within every incoming slide. Outgoing elements drop their
   delay immediately, so they clear cleanly while the next sequence arrives. */
.ax-hero__slide > .ax-eyebrow,
.ax-hero__slide > :is(h1, h2),
.ax-hero__slide > .ax-hero__lede,
.ax-hero__slide > .ax-hero__actions {
  opacity: 0;
  transform: translateY(1.4rem);
  transition: opacity 0.55s var(--ease), transform 0.65s var(--ease);
}
.ax-hero__slide.is-active > .ax-eyebrow,
.ax-hero__slide.is-active > :is(h1, h2),
.ax-hero__slide.is-active > .ax-hero__lede,
.ax-hero__slide.is-active > .ax-hero__actions {
  opacity: 1;
  transform: translateY(0);
}
.ax-hero__slide.is-active > .ax-eyebrow { transition-delay: 0.12s; }
.ax-hero__slide.is-active > :is(h1, h2) { transition-delay: 0.2s; }
.ax-hero__slide.is-active > .ax-hero__lede { transition-delay: 0.3s; }
.ax-hero__slide.is-active > .ax-hero__actions { transition-delay: 0.4s; }

/* The first frame is already active as a no-JS fallback. Once the slider
   initialises, replay the same stagger as an intentional page entrance. */
.ax-hero__slider.is-entering .ax-hero__slide.is-active > .ax-eyebrow,
.ax-hero__slider.is-entering .ax-hero__slide.is-active > :is(h1, h2),
.ax-hero__slider.is-entering .ax-hero__slide.is-active > .ax-hero__lede,
.ax-hero__slider.is-entering .ax-hero__slide.is-active > .ax-hero__actions {
  animation: ax-hero-content-in 0.75s var(--ease) both;
}
.ax-hero__slider.is-entering .ax-hero__slide.is-active > .ax-eyebrow { animation-delay: 0.12s; }
.ax-hero__slider.is-entering .ax-hero__slide.is-active > :is(h1, h2) { animation-delay: 0.22s; }
.ax-hero__slider.is-entering .ax-hero__slide.is-active > .ax-hero__lede { animation-delay: 0.34s; }
.ax-hero__slider.is-entering .ax-hero__slide.is-active > .ax-hero__actions { animation-delay: 0.46s; }

.ax-hero__backgrounds.is-entering span.is-active {
  animation: ax-hero-background-in 1.35s var(--ease) both;
}
@keyframes ax-hero-content-in {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes ax-hero-background-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ax-hero :is(h1, h2) {
  margin-top: 1.25rem;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgb(0 0 0 / 0.5);
}

/* The second half of the headline carries the accent. */
.ax-hero :is(h1, h2) span {
  color: rgb(var(--ax-ink-400));
}

.ax-hero__lede {
  margin-top: 1.75rem;
  max-width: 34rem;
  font-size: 1.0625rem;
  color: rgb(var(--ink-100));
  text-wrap: pretty;
}

.ax-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

.ax-hero__controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
}
.ax-hero__arrow {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 50%;
  color: rgb(var(--ink-100));
  background: transparent;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), background 0.25s var(--ease);
}
.ax-hero__arrow:hover,
.ax-hero__arrow:focus-visible {
  border-color: rgb(var(--ax-400) / 0.75);
  color: rgb(var(--ax-ink-300));
  background: rgb(var(--ax-600) / 0.18);
}
.ax-hero__dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ax-hero__dots button {
  width: 1.75rem;
  height: 0.2rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.25);
  cursor: pointer;
  transition: width 0.25s var(--ease), background 0.25s var(--ease);
}
.ax-hero__dots button.is-active {
  width: 3rem;
  background: rgb(var(--ax-400));
}

@media (prefers-reduced-motion: reduce) {
  .ax-hero__backgrounds span {
    transform: none;
    transition: none;
  }
  .ax-hero__slide > .ax-eyebrow,
  .ax-hero__slide > :is(h1, h2),
  .ax-hero__slide > .ax-hero__lede,
  .ax-hero__slide > .ax-hero__actions {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .ax-hero__slider.is-entering .ax-hero__slide.is-active > .ax-eyebrow,
  .ax-hero__slider.is-entering .ax-hero__slide.is-active > :is(h1, h2),
  .ax-hero__slider.is-entering .ax-hero__slide.is-active > .ax-hero__lede,
  .ax-hero__slider.is-entering .ax-hero__slide.is-active > .ax-hero__actions,
  .ax-hero__backgrounds.is-entering span.is-active {
    animation: none;
  }
  .ax-hero__slide {
    transform: none;
    transition: none;
  }
}

/*==============================================================================
  10. Page header (inner pages)
==============================================================================*/

.ax-pagehead {
  position: relative;
  padding-block: 4.5rem 3.5rem;
  overflow: hidden;
  background: rgb(var(--ink-900) / 0.6);
  border-bottom: 1px solid rgb(var(--ink-50) / 0.08);
}

.ax-pagehead__content {
  animation: ax-pagehead-enter 0.8s var(--ease) both;
}

@keyframes ax-pagehead-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 2.5rem, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.ax-pagehead h1 {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  margin-top: 1rem;
  text-wrap: balance;
}
.ax-pagehead p {
  margin-top: 1rem;
  max-width: 42rem;
  font-size: 1.0625rem;
  color: rgb(var(--ink-300));
}

/* Breadcrumb, monospaced to match the eyebrows. */
.ax-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: rgb(var(--ink-400));
}
.ax-crumbs a {
  color: rgb(var(--ink-300));
}
.ax-crumbs a:hover {
  color: rgb(var(--ax-ink-400));
}
.ax-crumbs li + li::before {
  content: '/';
  margin-inline-end: 0.5rem;
  color: rgb(var(--ink-500));
}

/*==============================================================================
  11. Service cards
==============================================================================*/

.ax-service {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
}
.ax-service:hover {
  color: inherit;
}

.ax-service__media {
  position: relative;
  height: 11rem;
  overflow: hidden;
  background: rgb(var(--ink-800));
}
.ax-service__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.ax-panel:hover .ax-service__media img {
  transform: scale(1.06);
}
/* Duotone wash over the imagery, tying photos of varying origin together, and
   melting the foot of the photo into the panel behind it. */
.ax-service__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(var(--ink-900)) 0%,
    rgb(var(--ax-900) / 0.35) 55%,
    transparent 100%
  );
}

/*
  The wash melts the photo into a dark panel. Under the light theme the ink ramp
  is inverted, so that same stop is near-white and reads as a haze bleached
  across the bottom of every photograph rather than as a blend. Drop it: the
  panel is white here, and the photo can simply end.
*/
:root[data-theme='light'] .ax-service__media::after {
  background: none;
}

/*
  Opt out of the wash entirely. The blend works on photography, where the foot
  of the image is soft anyway; over a UI screenshot it cuts across charts and
  table rows and reads as a smudge rather than a gradient. The portfolio cards
  use it for that reason.
*/
.ax-service__media--plain::after {
  display: none;
}

.ax-service__body {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0 1.75rem 1.75rem;
}

/* Icon frame overlaps the media edge, as on RTC — but square, and flush to the
   leading edge rather than inset. */
.ax-service__media + .ax-service__body .ax-icon {
  margin-top: -2rem;
  margin-bottom: 1.25rem;
  background: rgb(var(--ink-950) / 0.92);
  border-color: rgb(var(--ink-50) / 0.14);
  box-shadow: 0 0 0 0.35rem rgb(var(--ink-900));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.ax-service__title {
  margin-top: 0;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.25;
  color: rgb(var(--ink-50));
}
.ax-service__text {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  color: rgb(var(--ink-300));
}

:root[data-theme='light'] .ax-service__media + .ax-service__body .ax-icon {
  background: #fff;
  box-shadow: 0 0 0 0.35rem #fff;
}

/* Compact variant: the long capability lists on the service detail pages. */
.ax-capability {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.ax-capability__title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: rgb(var(--ink-50));
}
.ax-capability__title a {
  color: inherit;
}
.ax-capability .ax-index {
  padding-top: 0.25rem;
}
.ax-capability__list {
  display: grid;
  gap: 0.55rem;
  margin: 1.25rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid rgb(var(--ink-50) / 0.12);
  list-style: none;
}
.ax-capability__list li {
  position: relative;
  padding-inline-start: 1rem;
  color: rgb(var(--ink-300));
  font-size: 0.875rem;
  line-height: 1.5;
}
.ax-capability__list li::before {
  position: absolute;
  inset-inline-start: 0;
  top: 0.62em;
  width: 0.35rem;
  height: 0.35rem;
  content: "";
  background: rgb(var(--ax-amber));
  transform: rotate(45deg);
}

/*==============================================================================
  12. Value grid (Why choose us / About)
==============================================================================*/

.ax-value {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}
.ax-value__title {
  /* Keeps the heading clear of the watermark numeral in the corner. */
  padding-inline-end: 2.75rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: rgb(var(--ink-50));
}
.ax-value__text {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: rgb(var(--ink-300));
}

/*==============================================================================
  13. Steps rail
==============================================================================*/

.ax-steps {
  position: relative;
  display: grid;
  gap: 1rem;
  margin-top: 3rem;
}
@media (min-width: 640px) {
  .ax-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .ax-steps { grid-template-columns: repeat(4, 1fr); }
}

/* Rail linking the stages on wide screens. */
.ax-steps::before {
  content: '';
  display: none;
  position: absolute;
  inset-inline: 0;
  top: 3.25rem;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgb(var(--ax-400) / 0.4),
    rgb(var(--ax-amber) / 0.4),
    transparent
  );
}
@media (min-width: 992px) {
  .ax-steps::before { display: block; }
}

.ax-step__num {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgb(var(--ax-400) / 0.45);
  border-radius: var(--r-sm);
  background: rgb(var(--ink-950));
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: rgb(var(--ax-ink-300));
}
.ax-step h3 {
  margin-top: 1.25rem;
  font-size: 1.0625rem;
  font-weight: 700;
}
.ax-step p {
  margin-top: 0.625rem;
  font-size: 0.9375rem;
  color: rgb(var(--ink-300));
}

/*==============================================================================
  15. Team
==============================================================================*/

.ax-member {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: start;
}
.ax-member__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: rgb(var(--ink-800));
}
.ax-member__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.7s var(--ease);
}
.ax-panel:hover .ax-member__photo img {
  transform: scale(1.03);
}

.ax-member__body {
  padding: 1.25rem;
}
.ax-member__name {
  font-size: 1.0625rem;
  font-weight: 700;
  color: rgb(var(--ink-50));
}
.ax-member__name a { color: inherit; }
.ax-member__name a:hover { color: rgb(var(--ax-ink-400)); }
.ax-member__role {
  margin-top: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: rgb(var(--ink-300));
}

.ax-socials {
  display: flex;
  gap: 0.375rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.ax-socials a {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgb(var(--ink-50) / 0.14);
  border-radius: var(--r-sm);
  color: rgb(var(--ink-300));
  font-size: 0.8125rem;
  transition: all 0.25s var(--ease);
}
.ax-socials a:hover {
  border-color: rgb(var(--ax-400) / 0.6);
  background: rgb(var(--ax-600) / 0.16);
  color: rgb(var(--ax-ink-300));
}

/*==============================================================================
  16. Profile page
==============================================================================*/

.ax-profile {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 992px) {
  .ax-profile { grid-template-columns: 5fr 7fr; gap: 3.5rem; }
}

.ax-profile__meta {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
}
.ax-profile__meta li {
  display: flex;
  gap: 0.75rem;
  padding: 0.6875rem 0;
  border-bottom: 1px solid rgb(var(--ink-50) / 0.08);
  color: rgb(var(--ink-200));
}
.ax-profile__meta i {
  color: rgb(var(--ax-ink-400));
  padding-top: 0.2rem;
}
.ax-profile__meta strong {
  color: rgb(var(--ink-100));
  font-weight: 600;
}

/* Marked list: a square accent bullet rather than a disc. */
.ax-marked {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ax-marked li {
  position: relative;
  padding: 0.5rem 0 0.5rem 1.5rem;
  font-size: 0.9375rem;
  color: rgb(var(--ink-200));
}
body.rtl .ax-marked li {
  padding: 0.5rem 1.5rem 0.5rem 0;
}
.ax-marked li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 1.05rem;
  width: 6px;
  height: 6px;
  background: rgb(var(--ax-500));
  transform: rotate(45deg);
}
.ax-marked li:empty {
  display: none;
}

/*==============================================================================
  17. Contact
==============================================================================*/

.ax-contact {
  display: grid;
  gap: 2rem;
}
@media (min-width: 992px) {
  .ax-contact { grid-template-columns: 4fr 8fr; gap: 2.5rem; }
}

.ax-contact__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ax-contact__list li {
  padding: 1.25rem 0;
  border-bottom: 1px solid rgb(var(--ink-50) / 0.08);
}
.ax-contact__list li:last-child { border-bottom: 0; }
.ax-contact__list h6 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.375rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(var(--ink-400));
}
.ax-contact__list h6 i {
  color: rgb(var(--ax-ink-400));
  font-size: 0.875rem;
}
.ax-contact__list p {
  margin: 0;
  color: rgb(var(--ink-100));
}

.ax-contact__map {
  margin-top: 1.5rem;
  overflow: hidden;
  border: 1px solid rgb(var(--ink-50) / 0.12);
  border-radius: var(--r-sm);
  background: rgb(var(--ink-950) / 0.6);
}

.ax-contact__city {
  position: relative;
  margin: 1.5rem 0 0;
  overflow: hidden;
  border: 1px solid rgb(var(--ink-50) / 0.12);
  background: rgb(var(--ink-950) / 0.6);
}

.ax-contact__city img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}

.ax-contact__city::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgb(var(--ink-950) / 0.54), transparent 48%);
}

.ax-contact__city figcaption {
  position: absolute;
  z-index: 1;
  inset-inline-start: 0.8rem;
  bottom: 0.75rem;
  margin: 0;
  padding: 0.4rem 0.55rem;
  border-inline-start: 2px solid rgb(var(--ax-amber));
  background: rgb(var(--ink-950) / 0.72);
  color: rgb(var(--ink-50));
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.ax-contact__map-frame {
  position: relative;
  min-height: 17rem;
  overflow: hidden;
}

.ax-contact__map-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(var(--ink-950) / 0.14), transparent 35%),
    linear-gradient(0deg, rgb(var(--ink-950) / 0.36), transparent 42%);
  box-shadow: inset 0 0 2.5rem rgb(var(--ink-950) / 0.34);
}

.ax-contact__map iframe {
  display: block;
  width: 100%;
  height: 17rem;
  border: 0;
  filter: saturate(0.65) contrast(1.08) brightness(0.78);
}

.ax-contact__map-badge {
  position: absolute;
  z-index: 2;
  inset-inline-start: 1rem;
  bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgb(var(--ax-400) / 0.38);
  border-radius: var(--r-sm);
  background: rgb(var(--ink-950) / 0.9);
  color: rgb(var(--ink-50));
  font-size: 0.8125rem;
  font-weight: 600;
  box-shadow: 0 0.75rem 2rem rgb(var(--ink-950) / 0.3);
  backdrop-filter: blur(8px);
}

.ax-contact__map-badge i {
  color: rgb(var(--ax-ink-amber));
}

.ax-contact__map-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  color: rgb(var(--ink-200));
  font-size: 0.8125rem;
  font-weight: 600;
}

.ax-contact__map-link:hover {
  color: rgb(var(--ax-ink-300));
}

.ax-contact__map-link i {
  transition: transform 0.25s var(--ease);
}

.ax-contact__map-link:hover i {
  transform: translate(2px, -2px);
}

:root[data-theme='light'] .ax-contact__map {
  /* ink-900, not ink-50 — the ramp is inverted here, so ink-50 is the darkest
     step and this panel was rendering as a black slab. */
  background: rgb(var(--ink-900));
  border-color: rgb(var(--ink-600) / 0.28);
}

:root[data-theme='light'] .ax-contact__city {
  border-color: rgb(var(--ink-600) / 0.28);
}

:root[data-theme='light'] .ax-contact__map iframe {
  filter: saturate(0.75) contrast(1.02) brightness(0.98);
}

:root[data-theme='light'] .ax-contact__map-frame::after {
  background: linear-gradient(0deg, rgb(var(--ink-950) / 0.16), transparent 38%);
  box-shadow: inset 0 0 2rem rgb(var(--ink-950) / 0.12);
}

:root[data-theme='light'] .ax-contact__map-link {
  color: rgb(var(--ink-300));
}

/* -- Form -- */

.ax-contact-form {
  position: relative;
  overflow: hidden;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background:
    linear-gradient(145deg, rgb(var(--ax-900) / 0.22), transparent 48%),
    rgb(var(--ink-900) / 0.72);
}

.ax-contact-form::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: linear-gradient(
    to bottom,
    rgb(var(--ax-amber)),
    rgb(var(--ax-500)) 45%,
    transparent 88%
  );
}

.ax-contact-form::after {
  content: '';
  position: absolute;
  top: -7rem;
  inset-inline-end: -7rem;
  width: 15rem;
  height: 15rem;
  pointer-events: none;
  border: 1px solid rgb(var(--ax-400) / 0.12);
  border-radius: 50%;
  box-shadow:
    0 0 0 2rem rgb(var(--ax-500) / 0.035),
    0 0 0 4rem rgb(var(--ax-500) / 0.025);
}

.ax-contact-form__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin: -0.25rem 0 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgb(var(--ink-50) / 0.1);
}

.ax-contact-form__head .ax-eyebrow {
  margin-bottom: 0.65rem;
}

.ax-contact-form__head h3 {
  margin: 0;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: rgb(var(--ink-50));
}

.ax-contact-form__head > div > p:last-child {
  max-width: 34rem;
  margin: 0.75rem 0 0;
  color: rgb(var(--ink-200));
}

.ax-contact-form__mark {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid rgb(var(--ax-400) / 0.42);
  background: rgb(var(--ax-900) / 0.55);
  color: rgb(var(--ax-ink-amber));
  clip-path: polygon(0 0, calc(100% - 0.65rem) 0, 100% 0.65rem, 100% 100%, 0 100%);
}

.ax-contact-form__mark i {
  font-size: 1.15rem;
}

.ax-contact-form form {
  position: relative;
  z-index: 1;
}

.ax-field {
  margin-bottom: 1.35rem;
}

.ax-label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(var(--ink-200));
}

.ax-label > span[aria-hidden='true'] {
  margin-inline-start: auto;
  color: rgb(var(--ax-ink-amber));
}

.ax-input,
.ax-textarea {
  display: block;
  width: 100%;
  padding: 0.9rem 0.15rem 0.8rem;
  font-family: inherit;
  font-size: 1rem;
  color: rgb(var(--ink-50));
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgb(var(--ink-50) / 0.22);
  border-radius: 0;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}
.ax-textarea {
  min-height: 8.5rem;
  padding: 1rem;
  border: 1px solid rgb(var(--ink-50) / 0.18);
  background: rgb(var(--ink-950) / 0.25);
  resize: vertical;
}
.ax-input::placeholder,
.ax-textarea::placeholder {
  color: rgb(var(--ink-400));
}
.ax-input:focus,
.ax-textarea:focus {
  outline: none;
  border-color: rgb(var(--ax-500));
  background: rgb(var(--ax-900) / 0.15);
  box-shadow: 0 2px 0 rgb(var(--ax-500) / 0.22);
}

.ax-textarea:focus {
  box-shadow: inset 3px 0 0 rgb(var(--ax-500)), 0 0 0 3px rgb(var(--ax-600) / 0.1);
}

.ax-human-check {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.9rem;
  align-items: center;
  margin: 0 0 1.4rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgb(var(--ink-50) / 0.18);
  background:
    linear-gradient(105deg, rgb(var(--ax-900) / 0.28), transparent 62%),
    rgb(var(--ink-950) / 0.24);
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.ax-human-check:hover {
  border-color: rgb(var(--ax-400) / 0.52);
}
.ax-human-check input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.ax-human-check__box {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid rgb(var(--ink-200) / 0.55);
  color: transparent;
  background: rgb(var(--ink-950) / 0.5);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease),
    color 0.2s var(--ease);
}
.ax-human-check input:checked + .ax-human-check__box {
  border-color: rgb(var(--ax-amber));
  color: rgb(var(--ink-950));
  background: rgb(var(--ax-amber));
}
.ax-human-check input:focus-visible + .ax-human-check__box {
  outline: 2px solid rgb(var(--ax-400));
  outline-offset: 3px;
}
.ax-human-check__copy strong,
.ax-human-check__copy small {
  display: block;
}
.ax-human-check__copy strong {
  color: rgb(var(--ink-100));
  font-size: 0.9rem;
  font-weight: 700;
}
.ax-human-check__copy small {
  margin-top: 0.15rem;
  color: rgb(var(--ink-400));
  font-size: 0.72rem;
}
.ax-human-check__shield {
  color: rgb(var(--ax-ink-amber));
  font-size: 1.2rem;
}

.ax-contact-form__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: 0.25rem;
}

.ax-contact-form__actions p {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  max-width: 25rem;
  margin: 0;
  color: rgb(var(--ink-300));
  font-size: 0.75rem;
  line-height: 1.55;
}

.ax-contact-form__actions p i {
  flex: 0 0 auto;
  color: rgb(var(--ax-ink-amber));
  font-size: 1rem;
}

.ax-contact-form__actions .ax-btn {
  min-width: 11rem;
}

:root[data-theme='light'] .ax-contact-form {
  background:
    linear-gradient(145deg, rgb(var(--ax-100) / 0.48), transparent 48%),
    rgb(255 255 255 / 0.86);
}

:root[data-theme='light'] .ax-contact-form__head {
  border-color: rgb(var(--ink-700) / 0.14);
}

:root[data-theme='light'] .ax-contact-form__head h3,
:root[data-theme='light'] .ax-input,
:root[data-theme='light'] .ax-textarea {
  /* ink-50, not ink-900: the ramp is inverted here, so ink-900 is the near-white
     end and typed text was invisible against the field. */
  color: rgb(var(--ink-50));
}

:root[data-theme='light'] .ax-contact-form__head > div > p:last-child,
:root[data-theme='light'] .ax-label {
  color: rgb(var(--ink-300));
}

:root[data-theme='light'] .ax-input,
:root[data-theme='light'] .ax-textarea {
  border-color: rgb(var(--ink-700) / 0.28);
}

:root[data-theme='light'] .ax-human-check {
  border-color: rgb(var(--ink-600) / 0.5);
  background: rgb(var(--ink-900));
}
:root[data-theme='light'] .ax-human-check__copy strong {
  color: rgb(var(--ink-50));
}
:root[data-theme='light'] .ax-human-check__copy small {
  color: rgb(var(--ink-400));
}

:root[data-theme='light'] .ax-textarea {
  /* Matches .ax-input, which the light theme already paints white. */
  background: #fff;
}

@media (max-width: 575px) {
  .ax-contact-form__head {
    gap: 0.75rem;
  }
  .ax-contact-form__mark {
    width: 2.75rem;
    height: 2.75rem;
  }
  .ax-contact-form__actions {
    align-items: stretch;
    flex-direction: column;
  }
  .ax-contact-form__actions .ax-btn {
    width: 100%;
  }
}

.ax-notice {
  margin-bottom: 1.5rem;
  padding: 0.875rem 1.125rem;
  border: 1px solid rgb(var(--ax-amber) / 0.5);
  border-inline-start-width: 3px;
  border-radius: var(--r-sm);
  background: rgb(var(--ax-amber) / 0.1);
  color: rgb(var(--ink-100));
  font-size: 0.9375rem;
}
.ax-notice--error {
  border-color: rgb(220 85 85 / 0.65);
  background: rgb(220 85 85 / 0.1);
}
.ax-honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/*==============================================================================
  18. CTA band
==============================================================================*/

.ax-cta {
  position: relative;
  padding: 3rem 2rem;
  overflow: hidden;
  text-align: center;
  background:
    linear-gradient(135deg, rgb(var(--ax-900) / 0.7), rgb(var(--ink-900) / 0.9)),
    rgb(var(--ink-900));
  border: 1px solid rgb(var(--ax-500) / 0.3);
  border-radius: var(--r-md);
  /* Stated rather than inherited: the panel carries `force-dark`, and children
     inherit the computed colour from the body, not the redefined token. */
  color: rgb(var(--ink-100));
}
@media (min-width: 768px) {
  .ax-cta { padding: 4rem 3rem; }
}

/* Diagonal hatch, so the band reads as a distinct surface without imagery. */
.ax-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image: repeating-linear-gradient(
    -45deg,
    rgb(var(--ink-50) / 0.05) 0 1px,
    transparent 1px 14px
  );
}

.ax-cta > * { position: relative; }

.ax-cta h2 {
  text-wrap: balance;
}
.ax-cta p {
  margin: 1.125rem auto 0;
  max-width: 40rem;
  color: rgb(var(--ink-200));
  text-wrap: pretty;
}
.ax-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

/*==============================================================================
  19. Footer
==============================================================================*/

.ax-footer {
  padding-block: 4rem 2rem;
  border-top: 1px solid rgb(255 255 255 / 0.1);
  background: rgb(6 13 24);
  color: rgb(var(--ink-50));
}

.ax-footer__grid {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 768px) {
  .ax-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 3rem; }
}

.ax-footer h3 {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgb(var(--ink-400));
}

.ax-footer__brand img {
  height: 4rem;
  width: auto;
}
.ax-footer__brand p {
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  color: rgb(var(--ink-200));
  max-width: 26rem;
}

.ax-footer__links {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
.ax-footer__links li + li { margin-top: 0.625rem; }
.ax-footer__links a {
  font-size: 0.9375rem;
  color: rgb(var(--ink-200));
}
.ax-footer__links a:hover { color: rgb(var(--ink-50)); }

.ax-footer__contact {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  color: rgb(var(--ink-200));
}
.ax-footer__contact li {
  display: flex;
  gap: 0.625rem;
  margin-top: 0.625rem;
}
.ax-footer__contact i { color: rgb(var(--ax-ink-400)); padding-top: 0.25rem; }

.ax-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgb(255 255 255 / 0.1);
  font-size: 0.8125rem;
  color: rgb(var(--ink-300));
}

/*==============================================================================
  20. Scroll-to-top
==============================================================================*/

.ax-totop {
  position: fixed;
  inset-inline-end: 1.25rem;
  bottom: 1.25rem;
  z-index: 900;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgb(var(--ax-500) / 0.4);
  border-radius: var(--r-sm);
  background: rgb(var(--ink-900) / 0.9);
  color: rgb(var(--ax-ink-300));
  font-size: 1.375rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
    visibility 0.3s var(--ease), background-color 0.25s var(--ease);
}
.ax-totop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ax-totop:hover {
  background: rgb(var(--ax-600));
  color: #fff;
  border-color: rgb(var(--ax-600));
}

/*==============================================================================
  21. Motion — the vanilla counterparts of RTC's ScrollReveal / ParallaxCard
==============================================================================*/

/*
  Reveal. `amnix-ui.js` sets `--reveal` (0→1) from scroll position, so the
  element tracks the scroll and reverses when scrolling back up, matching RTC's
  scroll-linked behaviour rather than a one-shot AOS trigger.

  The pre-JS state is the hidden one only when JS has confirmed it can run
  (`js-reveal` on <html>), so the content is never stranded invisible.
*/
[data-reveal] {
  --reveal: 1;
}

.js-reveal [data-reveal] {
  opacity: var(--reveal);
  will-change: transform, opacity;
}

/* Desktop: directional slide + a whisper of scale, per `from`. */
@media (min-width: 1024px) {
  .js-reveal [data-reveal='up'] {
    transform: translate3d(0, calc((1 - var(--reveal)) * 3.5rem), 0)
      scale(calc(0.985 + var(--reveal) * 0.015));
  }
  .js-reveal [data-reveal='left'] {
    transform: translate3d(calc((1 - var(--reveal)) * -3.5rem), 0, 0)
      scale(calc(0.985 + var(--reveal) * 0.015));
  }
  .js-reveal [data-reveal='right'] {
    transform: translate3d(calc((1 - var(--reveal)) * 3.5rem), 0, 0)
      scale(calc(0.985 + var(--reveal) * 0.015));
  }
  body.rtl .js-reveal [data-reveal='left'] {
    transform: translate3d(calc((1 - var(--reveal)) * 3.5rem), 0, 0)
      scale(calc(0.985 + var(--reveal) * 0.015));
  }
  body.rtl .js-reveal [data-reveal='right'] {
    transform: translate3d(calc((1 - var(--reveal)) * -3.5rem), 0, 0)
      scale(calc(0.985 + var(--reveal) * 0.015));
  }
}

/* Mobile: a consistent vertical pass. Blocks rise into place at the bottom of
   the viewport, then continue upward as they fade away at the top. */
@media (max-width: 1023.98px) {
  .js-reveal [data-reveal] {
    transform: translate3d(0, var(--reveal-y, 0), 0);
  }
}

/* Tilt host. Perspective lives on the wrapper so the card itself can rotate. */
.ax-tilt-host {
  perspective: 1000px;
}
.ax-tilt {
  transform-style: preserve-3d;
  will-change: transform;
}

/* Glare hotspot follows the pointer via --gx/--gy. Kept cheap: one gradient
   layer, no filters. */
.ax-tilt__glare {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  background: radial-gradient(
    380px circle at var(--gx, 50%) var(--gy, 50%),
    rgb(var(--ax-300) / 0.14),
    transparent 58%
  );
}
.ax-tilt:hover .ax-tilt__glare {
  opacity: 1;
}

/* Everything above degrades to a static layout when the OS asks for less
   motion — the composition is identical, just without the transforms. */
@media (prefers-reduced-motion: reduce) {
  :root {
    scroll-behavior: auto;
  }
  html {
    scroll-behavior: auto;
  }
  .js-reveal [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
  .ax-pagehead__content {
    animation: none;
  }
  .ax-tilt {
    transform: none !important;
  }
  .ax-tilt__glare {
    display: none;
  }
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/*==============================================================================
  22. Utilities
==============================================================================*/

/* Breakpoints ascend, so the widest matching rule is the one that wins. Written
   the other way round, the 640px two-column rule outranked the 768px
   three-column rule at every size above 768 and the grids never went wide. */
.ax-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .ax-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px) { .ax-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .ax-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px) { .ax-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .ax-grid--4 { grid-template-columns: repeat(4, 1fr); } }

.ax-mt-lg { margin-top: 3rem; }
.ax-center { text-align: center; }
.ax-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Body scroll lock while the mobile drawer is open. */
body.ax-nav-open {
  overflow: hidden;
}

/*==============================================================================
  23. Chips
  Compact, wrapping labels for RTC's capability maps, research themes and
  outcome lists. Non-interactive by design — they summarise, they don't filter.
==============================================================================*/

.ax-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ax-chips li {
  padding: 0.4rem 0.85rem;
  border: 1px solid rgb(var(--ax-400) / 0.32);
  border-radius: 999px;
  background: rgb(var(--ax-400) / 0.06);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
  color: rgb(var(--ink-200));
}

/* Grouped standards list on the training page: a group heading, then the
   programmes that map to it. */
.ax-standards {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}
@media (min-width: 992px) {
  .ax-standards { grid-template-columns: repeat(2, 1fr); }
}
.ax-standards__group {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(var(--ax-ink-300));
}
.ax-standards__list {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ax-standards__list li {
  padding-inline-start: 1rem;
  border-inline-start: 1px solid rgb(var(--ax-400) / 0.35);
}
.ax-standards__list strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
}
.ax-standards__list small {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8125rem;
  color: rgb(var(--ink-300));
}

/*==============================================================================
  24. Site assistant
  A launcher stacked above the scroll-to-top control, and the panel it opens.
  Both use logical properties, so the Arabic (RTL) session mirrors for free.
==============================================================================*/

.ax-chat__launcher {
  position: fixed;
  inset-inline-end: 1.25rem;
  bottom: 4.75rem;
  z-index: 900;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid rgb(var(--ax-500) / 0.45);
  border-radius: 999px;
  background: rgb(var(--ax-600));
  color: #fff;
  font-size: 1.375rem;
  cursor: pointer;
  box-shadow: 0 10px 30px rgb(var(--ax-600) / 0.35);
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease);
}
.ax-chat__launcher:hover {
  transform: translateY(-2px);
  background: rgb(var(--ax-500));
}

.ax-chat {
  position: fixed;
  inset-inline-end: 1.25rem;
  bottom: 8.75rem;
  /* Above the fixed header (1000). The panel is a dialog the visitor is
     actively using; on a short viewport it must never slide underneath the
     nav bar the way a lower stacking order would let it. */
  z-index: 1010;
  display: flex;
  flex-direction: column;
  width: min(24rem, calc(100vw - 2.5rem));
  /*
    Tall enough to hold a conversation, short enough to always clear the header.
    The reserve is the sum of what sits above and below it: this panel's own
    bottom offset (8.75rem), the 5.75rem header, and a 1rem gap. Without the
    header in that sum the panel tucks under the nav on any viewport shorter
    than ~744px. The vh line is a fallback for engines without dvh — if the dvh
    declaration is dropped the cap has to still exist, or the panel sizes to its
    content and overlaps regardless.
  */
  max-height: min(32rem, calc(100vh - 15.5rem));
  max-height: min(32rem, calc(100dvh - 15.5rem));
  border: 1px solid rgb(var(--ax-500) / 0.35);
  border-radius: var(--r-md, 0.75rem);
  background: rgb(var(--ink-950) / 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.45);
  opacity: 0;
  transform: translateY(0.75rem) scale(0.98);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.ax-chat.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.ax-chat__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.125rem;
  border-bottom: 1px solid rgb(var(--ax-400) / 0.2);
}
.ax-chat__head h2 {
  font-size: 1rem;
  font-weight: 700;
  color: rgb(var(--ink-100));
}
.ax-chat__head p {
  margin-top: 0.2rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: rgb(var(--ink-300));
}
.ax-chat__head-actions {
  display: flex;
  flex-shrink: 0;
  gap: 0.375rem;
}
.ax-chat__head-actions .ax-ctl {
  width: 2rem;
  height: 2rem;
  font-size: 0.875rem;
}

.ax-chat__log {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1.125rem;
  scroll-behavior: smooth;
}

.ax-chat__msg {
  max-width: 85%;
  padding: 0.625rem 0.875rem;
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  line-height: 1.55;
}
.ax-chat__msg p + p {
  margin-top: 0.625rem;
}
.ax-chat__msg a {
  font-weight: 600;
  color: rgb(var(--ax-ink-300));
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ax-chat__msg--bot {
  align-self: flex-start;
  border: 1px solid rgb(var(--ax-400) / 0.22);
  background: rgb(var(--ax-400) / 0.07);
  color: rgb(var(--ink-200));
}
.ax-chat__msg--user {
  align-self: flex-end;
  background: rgb(var(--ax-600));
  color: #fff;
}
.ax-chat__msg--user a {
  color: #fff;
}

/* Three dots while the first token is still on its way. */
.ax-chat__msg.is-typing {
  display: flex;
  gap: 0.3rem;
  padding: 0.875rem;
}
.ax-chat__msg.is-typing span {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: rgb(var(--ax-300));
  animation: ax-chat-dot 1.2s infinite ease-in-out;
}
.ax-chat__msg.is-typing span:nth-child(2) { animation-delay: 0.15s; }
.ax-chat__msg.is-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes ax-chat-dot {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-0.2rem); }
}
@media (prefers-reduced-motion: reduce) {
  .ax-chat__msg.is-typing span { animation: none; opacity: 0.6; }
  .ax-chat { transition: none; }
}

.ax-chat__suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
}
.ax-chat__suggestions button {
  padding: 0.4rem 0.75rem;
  border: 1px solid rgb(var(--ax-400) / 0.32);
  border-radius: 999px;
  background: transparent;
  color: rgb(var(--ink-200));
  font-size: 0.8125rem;
  line-height: 1.35;
  text-align: start;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.ax-chat__suggestions button:hover {
  border-color: rgb(var(--ax-500));
  background: rgb(var(--ax-400) / 0.12);
}

.ax-chat__error {
  margin: 0 1.125rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgb(220 38 38 / 0.4);
  border-radius: var(--r-sm);
  background: rgb(220 38 38 / 0.12);
  font-size: 0.8125rem;
  color: rgb(252 165 165);
}

.ax-chat__form {
  display: flex;
  gap: 0.5rem;
  padding: 0.875rem 1.125rem 1rem;
  border-top: 1px solid rgb(var(--ax-400) / 0.2);
}
/* The label is for screen readers; the placeholder carries it visually. */
.ax-chat__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ax-chat__form .ax-input {
  flex: 1;
  min-width: 0;
}
.ax-chat__form .ax-btn {
  flex-shrink: 0;
  padding-inline: 0.9rem;
}
.ax-chat.is-pending .ax-chat__form .ax-btn {
  opacity: 0.6;
  cursor: progress;
}

.ax-chat__note {
  padding: 0 1.125rem 0.875rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: rgb(var(--ink-400, var(--ink-300)));
}

/* On a phone the panel is the screen; anchoring it to the launcher would push
   most of it off the top. The reserve follows the same rule as above: this
   panel's bottom offset (0.75rem) + the 5.75rem header + a 1rem gap. */
@media (max-width: 480px) {
  .ax-chat {
    inset-inline: 0.75rem;
    bottom: 0.75rem;
    width: auto;
    max-height: calc(100vh - 7.5rem);
    max-height: calc(100dvh - 7.5rem);
  }
}

/*==============================================================================
  25. Capability map
  Theme filter, service tabs and the capability panel they drive. Squarer and
  flatter than RTC's glass version, to sit in the Amnix panel language.
==============================================================================*/

.ax-capmap {
  margin-top: 3rem;
}

/* Theme filter. Chips that toggle, so they have to read as pressable — hence
   the pointer, the hover lift and the filled active state. */
.ax-capmap__themes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ax-capmap__themes button {
  padding: 0.5rem 1rem;
  border: 1px solid rgb(var(--ax-400) / 0.32);
  border-radius: 999px;
  background: rgb(var(--ax-400) / 0.06);
  color: rgb(var(--ink-200));
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
    color 0.2s var(--ease);
}
.ax-capmap__themes button:hover {
  border-color: rgb(var(--ax-500));
  color: rgb(var(--ink-50));
}
.ax-capmap__themes button[aria-pressed='true'] {
  border-color: rgb(var(--ax-500));
  background: rgb(var(--ax-600) / 0.9);
  color: #fff;
}

/* Service tabs. A single enclosed track, so it reads as one control rather
   than three more chips. */
.ax-capmap__tabs {
  display: flex;
  gap: 0.25rem;
  width: 100%;
  margin-top: 1.5rem;
  padding: 0.35rem;
  overflow-x: auto;
  border: 1px solid rgb(var(--ax-400) / 0.2);
  border-radius: var(--r-md);
  background: rgb(var(--ink-900) / 0.5);
  scrollbar-width: none;
}
.ax-capmap__tabs::-webkit-scrollbar {
  display: none;
}
@media (min-width: 768px) {
  .ax-capmap__tabs { width: fit-content; }
}
.ax-capmap__tabs button {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: rgb(var(--ink-200));
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease),
    color 0.25s var(--ease);
}
.ax-capmap__tabs button:hover {
  color: rgb(var(--ink-50));
}
.ax-capmap__tabs button.is-active {
  border-color: rgb(var(--ax-500) / 0.55);
  background: rgb(var(--ax-600) / 0.18);
  color: rgb(var(--ax-ink-200));
}

/* Match count per service. Only meaningful while a theme is filtering, so it
   stays hidden until one is chosen. */
.ax-capmap__count {
  display: grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding-inline: 0.35rem;
  border-radius: 999px;
  background: rgb(var(--ax-600) / 0.3);
  color: rgb(var(--ax-ink-200));
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
}
/* Zero matches is information too — it just should not look like a hit. */
.ax-capmap__count.is-empty {
  background: rgb(var(--ink-50) / 0.06);
  color: rgb(var(--ink-400));
}

.ax-capmap__panel {
  margin-top: 1.5rem;
}
.ax-capmap__list {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .ax-capmap__list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .ax-capmap__list { grid-template-columns: repeat(3, 1fr); }
}
.ax-capmap__list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgb(var(--ax-400) / 0.2);
  border-radius: var(--r-sm);
  background: rgb(var(--ink-900) / 0.45);
  font-size: 0.875rem;
  line-height: 1.45;
  color: rgb(var(--ink-100));
  transition: opacity 0.25s var(--ease), border-color 0.25s var(--ease),
    color 0.25s var(--ease);
}
.ax-capmap__dot {
  flex-shrink: 0;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: rgb(var(--ax-400));
  transition: background-color 0.25s var(--ease);
}
/* Dimmed, not hidden: the point of the map is seeing what a theme touches
   against everything it does not. */
.ax-capmap__list li.is-dimmed {
  border-color: rgb(var(--ax-400) / 0.08);
  color: rgb(var(--ink-400));
  opacity: 0.5;
}
.ax-capmap__list li.is-dimmed .ax-capmap__dot {
  background: rgb(var(--ink-50) / 0.2);
}

:root[data-theme='light'] .ax-capmap__tabs {
  background: rgb(var(--ink-800) / 0.6);
}
:root[data-theme='light'] .ax-capmap__list li {
  background: rgb(var(--ink-950));
}
:root[data-theme='light'] .ax-capmap__tabs button.is-active {
  /* On its tinted pill, ax-700 lands just under AA — same as the nav's active
     entry, and fixed the same way. */
  color: rgb(var(--ax-800));
}
:root[data-theme='light'] .ax-capmap__count {
  color: rgb(var(--ax-700));
}