@font-face {
  font-family: "ARIBA DIN Next";
  src: url("../assets/fonts/DIN Next LT Arabic Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "ARIBA DIN Next";
  src: url("../assets/fonts/DIN Next LT Arabic Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "ARIBA DIN Next";
  src: url("../assets/fonts/DIN Next LT Arabic Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "ARIBA DIN Next";
  src: url("../assets/fonts/DIN Next LT Arabic Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/* ============================================================================
   ARIBA — Corporate Website Prototype
   Phase 1: foundation, navigation, hero, about, impact.

   Visual system is derived from the ARIBA identity: a folded two-tone green
   ribbon chevron above a warm near-black wordmark. Colours below are sampled
   directly from assets/logos/Ariba_logo.png.

   Green is treated as an accent and as a single bold surface (Impact), never
   as a wash. Most of the page is warm paper and near-black ink.
   ========================================================================= */

/* ---------------------------------------------------------------- TOKENS  */
:root {
  /* Brand — sampled from the logo */
  --green-900: #003527;
  --green-800: #004D3D;   /* logo dark green */
  --green-700: #0A6249;
  --green-500: #2DB25F;   /* logo bright green */
  --green-400: #4CC47A;

  /* Ink & paper */
  --ink-900: #241D1F;     /* logo wordmark — warm near-black */
  --ink-700: #4A4447;
  --ink-500: #6E6669;
  --ink-300: #A9A2A4;

  --paper:      #FBFAF8;
  --paper-alt:  #F4F1EC;
  --paper-line: #E4DFD7;

  /* ---------------------------------------------------------- THEME TOKENS
     One semantic layer, two value sets (light here, dark in the
     [data-theme="dark"] block below) — components consume ONLY these,
     never the raw palette above, so a theme switch is a variable swap,
     not a second stylesheet. Light values preserve the current design
     as closely as possible; they are the same raw palette colours the
     site already used, just given a semantic name. */
  --bg-primary:        var(--paper);
  --bg-secondary:      var(--paper-alt);
  --surface:            #FFFFFF;
  --surface-elevated:   #FFFFFF;
  --text-primary:      var(--ink-900);
  --text-secondary:    var(--ink-700);
  --text-muted:        var(--ink-500);
  --text-faint:        var(--ink-300);
  --border:            var(--paper-line);
  --brand-primary:     var(--green-800);
  --brand-primary-hover:var(--green-900);
  --brand-bright:      var(--green-500);
  --shadow-rgb:         36, 29, 31;   /* consumed inside rgba() so alpha stays per-use */

  /* Back-compat aliases: a handful of existing rules already reference the
     old shorter names — point them at the same tokens instead of keeping
     two independent copies of the same value. */
  --bg:        var(--bg-primary);
  --text:      var(--text-primary);
  --accent:    var(--brand-bright);
  --hairline:  var(--border);

  /* Component-scoped tokens that need more than a single swap between
     themes (surface + border + shadow moving together). */
  --nav-surface:            #FFFFFF;
  --nav-border:             var(--paper-line);
  --nav-link:               var(--ink-700);
  --nav-link-active:        var(--ink-900);
  --nav-toggle-bar:         var(--ink-900);
  --nav-control-surface:     rgba(36, 29, 31, 0.06);
  --nav-control-border:      rgba(36, 29, 31, 0.14);
  --nav-control-hover:       rgba(36, 29, 31, 0.10);
  --nav-control-border-hover:rgba(36, 29, 31, 0.28);
  --nav-focus:               var(--green-500);
  --nav-cta-bg:              var(--green-800);
  --nav-cta-bg-hover:        var(--green-900);
  --nav-cta-text:            #FFFFFF;
  --nav-scrim:              rgba(36, 29, 31, 0.4);

  --journey-track:          rgba(0, 77, 61, 0.10);
  --journey-stages-track:   rgba(0, 77, 61, 0.12);

  --stat-divider:           var(--paper-line);

  /* Footer: a deep dark-green/near-black closing surface that stays dark
     in BOTH site themes — it is not "the page background", it's the
     page's own conclusion, styled independently of --bg-primary. Only
     these two tokens move between Light/Dark site mode (see the
     [data-theme="dark"] block below); the text/link tokens under it stay
     fixed because the footer surface itself never becomes light. */
  --footer-bg:              #0B1613;
  --footer-border:          rgba(255, 255, 255, 0.08);
  --footer-shape:           rgba(45, 178, 95, 0.05);
  --footer-text:            #F3EFE9;
  --footer-text-secondary:  #C9C2BA;
  --footer-text-muted:      rgba(255, 255, 255, 0.55);
  --footer-link:            rgba(255, 255, 255, 0.72);
  --footer-logo-backing:    rgba(255, 255, 255, 0.94);

  /* Colour-only theme switch — never layout/dimensions/images/SVG geometry. */
  --theme-t: 240ms var(--ease);

  /* Typography */
  --font-head: "ARIBA DIN Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "ARIBA DIN Next", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Five-size content system. Navigation adds two scoped utility sizes so the
     header can scale independently without changing section typography. */
  --fs-caption: 0.8125rem;
  --fs-body:    0.9375rem;
  --fs-lede:    1.125rem;
  --fs-heading: clamp(1.5rem, 1rem + 1.8vw, 2.25rem);
  --fs-display: clamp(2rem, 1rem + 2.5vw, 3rem);
  --fs-nav: clamp(1.0625rem, 0.8rem + 0.3vw, 1.25rem);
  --fs-nav-control: clamp(0.9375rem, 0.75rem + 0.2vw, 1.125rem);

  --lh-tight: 1.04;
  --lh-snug:  1.18;
  --lh-body:  1.7;

  --tracking-display: -0.032em;
  --tracking-label:    0.16em;

  /* Spacing */
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --section-y: clamp(4rem, 2.5rem + 6vw, 7.5rem);

  /* Layout */
  --page-edge: clamp(1rem, 2vw, 3rem);
  --gutter: var(--page-edge);

  /* Full-width sticky navbar: one stable height per viewport tier. */
  --nav-h: 74px;

  /* Radii — kept small; the identity is angular, not rounded. --radius-lg
     is the one deliberate exception, used only where a soft, floating or
     editorial surface (the nav pill's logo chip, the About note panel)
     needs it. */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 10px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.72, 0.26, 1);
  --t-fast: 180ms var(--ease);
  --t-base: 320ms var(--ease);
  --reveal-dur: 700ms;
  --reveal-step: 90ms;
}

/* DIN Next covers both scripts. Arabic retains its script-specific leading,
   tracking, and label treatment without switching to a separate family. */
:root:lang(ar) {
  --lh-tight: 1.24;
  --lh-snug:  1.35;
  --lh-body:  1.95;
  --tracking-display: 0;
  --tracking-label: 0;
}

/* ---------------------------------------------------------------- DARK THEME
   Same tokens, different values — nothing below this block is aware a
   theme switch even happened. Backgrounds are a warm, near-black charcoal
   (never pure #000) with a faint green undertone; two tiers (--bg-primary /
   --bg-secondary) give neighbouring sections gentle separation the same
   way --paper / --paper-alt do in light mode. ARIBA green stays the one
   controlled accent — most surfaces are charcoal/off-white, not green. */
:root[data-theme="dark"] {
  --bg-primary:        #171A19;
  --bg-secondary:      #1D2120;
  --surface:            #1F2422;
  --surface-elevated:   #262B29;
  --text-primary:      #F3EFE9;
  --text-secondary:    #C9C2BA;
  --text-muted:        #948C86;
  --text-faint:        #6B6560;
  --border:            rgba(255, 255, 255, 0.10);
  --brand-primary:     var(--green-500);
  --brand-primary-hover:var(--green-400);
  --brand-bright:      var(--green-400);
  --shadow-rgb:         0, 0, 0;

  /* Dark mode alone owns the green navbar treatment. */
  --nav-surface:            var(--green-800);
  --nav-border:             rgba(255, 255, 255, 0.16);
  --nav-link:               #FFFFFF;
  --nav-link-active:        #FFFFFF;
  --nav-toggle-bar:         #FFFFFF;
  --nav-control-surface:     rgba(255, 255, 255, 0.08);
  --nav-control-border:      rgba(255, 255, 255, 0.22);
  --nav-control-hover:       rgba(255, 255, 255, 0.16);
  --nav-control-border-hover:rgba(255, 255, 255, 0.42);
  --nav-focus:               #FFFFFF;
  --nav-cta-bg:              var(--green-500);
  --nav-cta-bg-hover:        var(--green-400);
  --nav-cta-text:            #04140F;
  --nav-scrim:              rgba(0, 0, 0, 0.6);

  --journey-track:          rgba(255, 255, 255, 0.10);
  --journey-stages-track:   rgba(255, 255, 255, 0.12);

  --stat-divider:           rgba(255, 255, 255, 0.12);

  /* Dark Mode's own page background (--bg-primary) is already a dark
     charcoal, so the Footer has to go a step further to still read as a
     distinct closing surface rather than fading into it: a touch deeper,
     a more visible border, and a slightly stronger green undertone in its
     background shape. */
  --footer-bg:              #080D0C;
  --footer-border:          rgba(255, 255, 255, 0.12);
  --footer-shape:           rgba(45, 178, 95, 0.08);
}

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

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--nav-h) + var(--space-4));
}

body {
  margin: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color var(--theme-t), color var(--theme-t);
}

main:focus { outline: none; }

::selection { background: rgba(45, 178, 95, 0.28); color: var(--text-primary); }

html { scrollbar-color: var(--border) var(--bg-primary); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 8px;
  border: 3px solid var(--bg-primary);
}
::-webkit-scrollbar-thumb:hover { background: rgba(45, 178, 95, 0.35); }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

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

.skip-link {
  position: absolute;
  inset-inline-start: var(--gutter);
  top: -100px;
  z-index: 200;
  padding: var(--space-3) var(--space-6);
  background: var(--green-800);
  color: #fff;
  border-radius: var(--radius-md);
  transition: top var(--t-fast);
}
.skip-link:focus-visible { top: var(--space-4); }

/* ---------------------------------------------------------------- LAYOUT  */
.container {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--page-edge);
}

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

/* ------------------------------------------------------- SHARED ELEMENTS  */

/* Gradient tick derived from the logo's dark→bright ribbon fold. */
.rule {
  display: inline-block;
  inline-size: 34px;
  block-size: 2px;
  flex: none;
  background: linear-gradient(90deg, var(--green-800), var(--green-500));
}
[dir="rtl"] .rule { background: linear-gradient(270deg, var(--green-800), var(--green-500)); }
.rule--onDark { background: linear-gradient(90deg, var(--green-400), rgba(255,255,255,0.35)); }
[dir="rtl"] .rule--onDark { background: linear-gradient(270deg, var(--green-400), rgba(255,255,255,0.35)); }

.eyebrow,
.section-label {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
:lang(ar) .eyebrow,
:lang(ar) .section-label { text-transform: none; }

.section-label--onDark { color: rgba(255,255,255,0.62); }

/* Reusable label treatment: text sits above a short gradient rule instead
   of beside it. Reuses .rule as-is (including its RTL gradient flip), just
   restacks the flex container — align-items: start keeps it pinned to the
   reading-start edge in both directions with no extra dir-specific rules.
   Used by the Hero eyebrow and the About section label today; intended for
   any future section label that wants the same treatment. */
.label--underline {
  flex-direction: column;
  align-items: start;
  gap: var(--space-3);
}

.lede {
  font-size: var(--fs-lede);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  max-inline-size: 54ch;
}

/* --------------------------------------------------------------- BUTTONS  */
.btn {
  --btn-py: 0.95rem;
  --btn-px: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--btn-py) var(--btn-px);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--t-base), color var(--t-base),
              border-color var(--t-base), transform var(--t-fast);
}
:lang(ar) .btn { letter-spacing: 0; }

.btn--sm { --btn-py: 0.6rem; --btn-px: 1.15rem; font-size: var(--fs-body); }

.btn--primary { background: var(--green-800); color: #fff; }
.btn--primary:hover { background: var(--green-900); }

.btn--ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn--ghost:hover { border-color: var(--text-primary); background: rgba(var(--shadow-rgb), 0.03); }

/* Footer-only: the Footer surface is always dark in both site themes (see
   --footer-* tokens), so the usual dark-green .btn--primary would sit
   dark-on-dark with too little contrast. Bright green fill + near-black
   text is the same "strong, controlled accent on a dark surface" idea the
   Nav CTA and Why ARIBA already use, just inverted for this surface. */
.btn--footer { background: var(--green-500); color: #04140F; }
.btn--footer:hover { background: var(--green-400); }

.btn:active { transform: translateY(1px); }

/* ============================================================ NAVIGATION  */
/* The outer header is the full-width surface; the inner row only supplies a
   responsive safety gutter. It stays one stable height and colour while the
   page scrolls: white in Light Mode and ARIBA green in Dark Mode. */
.nav {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  inline-size: 100%;
  background: var(--nav-surface);
  border-block-end: 1px solid var(--nav-border);
  transition: background-color var(--theme-t), border-color var(--theme-t);
}
.nav__inner {
  inline-size: 100%;
  block-size: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding-inline: var(--page-edge);
}

/* The mark no longer needs its own contrast-boosting chip: on flat dark
   green the near-black wordmark and dark ribbon fold were unreadable, but
   directly on light glass they already have plenty of contrast. Structure
   (padding, tap target) stays — only the visible chip surface is gone. */
.nav__brand {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  transition: padding var(--t-base);
}

.nav__logo {
  block-size: 44px;
  inline-size: auto;
  filter: none;
  transition: filter var(--theme-t);
}
:root[data-theme="dark"] .nav__logo { filter: brightness(0) invert(1); }

.nav__menu {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 2.4vw, 3rem);
}
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 1.9vw, 2.25rem);
}
.nav__link {
  position: relative;
  font-size: var(--fs-nav);
  font-weight: 500;
  color: var(--nav-link);
  padding-block: 0.35rem;
  transition: color var(--t-base);
}
.nav__link::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 0;
  block-size: 1.5px;
  background: var(--brand-bright);
  transition: inline-size var(--t-base);
}
.nav__link:hover { color: var(--nav-link-active); }
.nav__link:hover::after { inline-size: 100%; }
.nav__link.is-active { color: var(--nav-link-active); }
.nav__link.is-active::after { inline-size: 100%; }

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

.lang-switch {
  padding: 0.55rem 0.85rem;
  min-inline-size: 52px;
  font-size: var(--fs-nav-control);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--nav-link);
  background: var(--nav-control-surface);
  border: 1px solid var(--nav-control-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: color var(--t-base), border-color var(--t-base), background-color var(--t-base);
}
.lang-switch:hover { color: var(--nav-link-active); border-color: var(--nav-control-border-hover); background: var(--nav-control-hover); }

/* Theme toggle: visually belongs with the language switch — same compact
   pill footprint as .lang-switch's tap target, but round and icon-only.
   Sun/moon are both always in the markup; CSS alone decides which shows
   via [data-theme], so JS only ever flips the attribute + persists it. */
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 42px;
  block-size: 42px;
  padding: 0;
  color: var(--nav-link);
  background: var(--nav-control-surface);
  border: 1px solid var(--nav-control-border);
  border-radius: 50%;
  cursor: pointer;
  transition: color var(--t-base), border-color var(--t-base), background-color var(--t-base);
}
.theme-toggle:hover { color: var(--nav-link-active); border-color: var(--nav-control-border-hover); background: var(--nav-control-hover); }

.theme-toggle__icon {
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: 20px;
  block-size: 20px;
  transition: opacity var(--t-base), transform var(--t-base);
}
/* Light mode: sun visible (the switch is offered to go *to* dark).
   Dark mode: moon visible. Icons cross-fade with a tiny rotate, never a
   layout shift — both are always painted, only opacity/transform move. */
.theme-toggle__icon--moon { opacity: 0; transform: rotate(-40deg) scale(0.7); }
:root[data-theme="dark"] .theme-toggle__icon--sun { opacity: 0; transform: rotate(40deg) scale(0.7); }
:root[data-theme="dark"] .theme-toggle__icon--moon { opacity: 1; transform: none; }

/* The CTA is deep green on light glass and reverses to bright green with
   dark text on the dark-mode brand surface. */

.nav__cta {
  --btn-py: 0.7rem;
  --btn-px: 1.3rem;
  background: var(--nav-cta-bg);
  color: var(--nav-cta-text);
  font-size: var(--fs-nav);
}
.nav__cta:hover { background: var(--nav-cta-bg-hover); }

.nav__inner :focus-visible { outline-color: var(--nav-focus); }

/* Mobile toggle */
.nav__toggle {
  display: none;
  padding: var(--space-3);
  margin-inline-end: -0.5rem;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.nav__toggle-bars { display: block; inline-size: 24px; }
.nav__toggle-bars i {
  display: block;
  inline-size: 24px;
  block-size: 1.5px;
  background: var(--nav-toggle-bar);
  transition: transform var(--t-base), opacity var(--t-fast), background-color var(--theme-t);
}
.nav__toggle-bars i + i { margin-block-start: 5px; }
.nav__toggle[aria-expanded="true"] i:first-child { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] i:last-child  { transform: translateY(-6.5px) rotate(-45deg); }

.nav__scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--nav-scrim);
  opacity: 0;
  transition: opacity var(--t-base);
}
.nav__scrim.is-visible { opacity: 1; }

/* ================================================================== HERO  */
/* The sticky header occupies normal flow, so this is only the hero's own
   breathing room. No duplicate header clearance is required. */
.hero {
  position: relative;
  padding-block-start: clamp(5rem, 10vh, 8rem);
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  padding-block-end: clamp(2rem, 4vh, 3rem);
  text-align: center;
}

.hero__content { max-inline-size: 44rem; }

.hero__headline {
  font-size: var(--fs-display);
  font-weight: 600;
  margin-block: var(--space-6);
  /* Explicit <br> controls the break; balancing would fight it. */
  text-wrap: normal;
}

/* The split headline remains typographically identical to the original on
   desktop and mobile. The presentation tier below turns these spans into the
   large-screen editorial composition. */
.hero__headline-line,
.hero__headline-line-inner { display: inline; }
.hero__headline-line + .hero__headline-line::before { content: " "; }

.hero__copy { margin-block-end: var(--space-12); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* Full-bleed Riyadh hero. The image remains a real responsive asset while
   the centred content and restrained green scrim preserve bilingual contrast. */
.hero--bg-experiment {
  display: grid;
  align-items: center;
  min-block-size: min(92svh, 860px);
  overflow: hidden;
  /* More top clearance than bottom biases the content slightly below true
     centre — an editorial placement, not a mechanical middle. */
  padding-block-start: clamp(2.5rem, 7vh, 4.5rem);
  padding-block-end: clamp(3rem, 6vh, 4.5rem);
}

/* A real responsive image rather than a CSS background keeps loading and
   intrinsic-image behavior explicit. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero__bg-picture {
  position: absolute;
  inset: 0;
  display: block;
}
.hero__bg-img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* A centred brand-green scrim supports the bilingual focal group without
   tying the composition to either physical edge. */
.hero__bg-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 68% 78% at 50% 48%,
      rgba(0, 25, 19, 0.68) 0%,
      rgba(0, 25, 19, 0.5) 40%,
      rgba(0, 25, 19, 0.18) 72%,
      rgba(0, 25, 19, 0) 100%),
    linear-gradient(180deg, rgba(0, 25, 19, 0.08), rgba(0, 25, 19, 0.28));
}
[dir="rtl"] .hero__bg-scrim {
  background:
    radial-gradient(ellipse 68% 78% at 50% 48%,
      rgba(0, 25, 19, 0.68) 0%,
      rgba(0, 25, 19, 0.5) 40%,
      rgba(0, 25, 19, 0.18) 72%,
      rgba(0, 25, 19, 0) 100%),
    linear-gradient(180deg, rgba(0, 25, 19, 0.08), rgba(0, 25, 19, 0.28));
}

.hero--bg-experiment .hero__content {
  inline-size: min(100%, 72rem);
  max-inline-size: 72rem;
  margin-inline: auto;
}
.hero--bg-experiment .eyebrow {
  justify-content: center;
  align-items: center;
}
.hero--bg-experiment .hero__copy {
  max-inline-size: 56ch;
  margin-inline: auto;
  margin-block-end: var(--space-12);
}
.hero--bg-experiment .hero__actions { justify-content: center; }

/* Text colours, scoped to the experiment only — nothing global changed. */
.hero--bg-experiment .eyebrow { color: rgba(255, 255, 255, 0.8); }
.hero--bg-experiment .hero__headline { color: #fff; }
.hero--bg-experiment .hero__copy { color: rgba(255, 255, 255, 0.86); }
.hero--bg-experiment .rule { background: linear-gradient(90deg, var(--green-400), rgba(255, 255, 255, 0.4)); }
[dir="rtl"] .hero--bg-experiment .rule { background: linear-gradient(270deg, var(--green-400), rgba(255, 255, 255, 0.4)); }

/* .btn--primary (solid dark-green fill) already has enough contrast over
   the photo unchanged. .btn--ghost's default ink text/paper-line border
   would nearly disappear over a dark image, so only that variant is
   adjusted here. */
.hero--bg-experiment .btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
.hero--bg-experiment .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
}

@media (max-width: 900px) {
  /* Same full-height background; a fuller-width scrim since the content
     column now spans nearly the full viewport instead of ~44rem beside an
     untouched photo half. */
  .hero__bg-scrim,
  [dir="rtl"] .hero__bg-scrim {
    background: linear-gradient(180deg,
      rgba(0, 25, 19, 0.42) 0%,
      rgba(0, 25, 19, 0.56) 55%,
      rgba(0, 25, 19, 0.66) 100%);
  }
}

/* ================================================================= ABOUT  */
.about {
  position: relative;
  background: var(--bg-primary);
  overflow: hidden;
  /* Tighter than the shared .section top padding — the Hero no longer ends
     in a closing rule/microcopy line, so this is now the only thing setting
     the Hero → About distance. Bottom padding is zeroed (overriding the
     shared .section rule's --section-y) rather than inheriting it: with
     Capabilities now directly after Journey, that generic full-size
     section-boundary padding just stacked with Journey's own trailing
     space and Capabilities' own leading space, producing a huge triple
     gap. Capabilities' padding-block-start is the section boundary now;
     About ends the moment Journey's own content does. */
  padding-block-start: clamp(3rem, 6vw, 5rem);
  padding-block-end: 0;
}

/* The image is always the visual-outer column — right in Arabic, left in
   English — with the heading beside it, closer to page centre. This is a
   flat swap (not a [dir="rtl"] override): combined with how CSS Grid
   itself already flips track1's physical side with `direction` (track1 =
   left in LTR, right in RTL), putting media in track1 unconditionally
   lands it on the right for Arabic and the left for English — exactly
   the mirrored composition both languages ask for.

   Desktop only (see the >=901px editorial-frame block below): the image
   side cancels the shared outer rail so the photograph reaches the viewport
   edge, while the heading side remains aligned with the rest of the page.
   Below 901px the row stays inside .container and stacks to a single column. */
.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  margin-block-start: clamp(1.75rem, 3.5vw, 2.75rem);
}

/* grid-row: 1 on both is load-bearing, not decorative: auto-placement's
   sparse packing only searches *forward* from the previous item's
   column, so media (column 1, placed after lead which already claimed
   column 2) would otherwise get pushed to row 2 instead of back-filling
   row 1 — silently splitting the "row" into two stacked rows and
   producing exactly the floating-heading / cramped-image misalignment
   this markup used to have. */
.about__lead  { grid-column: 1; grid-row: 1; }
.about__media { grid-column: 1; grid-row: 1; }

@media (min-width: 901px) {
  .about__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    column-gap: clamp(2rem, 4vw, 4.5rem);
    width: auto;
    position: static;
    margin-inline: 0;
  }

  .about__lead  { grid-column: 2; }
  .about__media { grid-column: 1; }

  /* The text column keeps growing with the editorial frame instead of being
     capped by a second inner container, preserving its intended line breaks. */
  .about__lead {
    padding-inline-start: clamp(1rem, 2vw, 2rem);
  }

  /* Arabic: centre the heading *block* within the full 50% column
     instead of padding it away from the image edge — a fixed padding
     was still visually anchoring it to the image side rather than
     balancing it in the available space, so it's replaced here rather
     than layered under the centering. .about__headline has no explicit
     width and its two lines are a hard <br> (not natural wrapping), so
     as a flex item it sizes to its own longest line — that fit-content
     box is what justify-content:center centres, while the shorter line
     stays right-aligned *within that box* by the normal RTL default,
     preserving the current two-line relationship instead of forcing
     each line to its own centre (which is what plain text-align:center
     on the full column would have done). English is untouched: .about
     __lead there stays a plain block, not a flex container. */
  :root[dir="rtl"] .about__lead { padding-inline-start: clamp(1rem, 2vw, 2rem); }
}

.about__headline {
  font-size: var(--fs-heading);
  font-weight: 600;
}

:lang(en) .about__headline {
  max-inline-size: 25ch;
}
/* Arabic-only bump: was reading visually lighter than the image's 50vw
   presence warranted. Keeps the same 2.125rem floor for mobile widths
   (where this clamp still applies) and stays comfortably inside the
   ~2-line budget the extra inner gap above just tightened slightly —
   Arabic's short two phrases ("نقود التحول." / "ونصنع الأثر.") have far
   more room to grow than English's longer lines did. */
:lang(ar) .about__headline { max-inline-size: 25ch; }

/* --------------------------------------------------- ABOUT / MEDIA  */
.about__media {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
}

/* The source asset already contains the final design — its own angled
   chevron cut and green edge are baked into the pixels, matching the
   Hero visual's treatment. Aspect-ratio matches the asset exactly (no
   crop at most desktop widths, since the column is now a true 50vw and
   its natural aspect-ratio height is already substantial); min-block-size
   is only a floor for narrower desktop/tablet widths where 50vw alone
   would leave too little room for the overlaid paragraphs — object-fit
   then crops top/bottom only, the asset itself is never edited. */
.about__media-frame {
  --flip: -1; /* default = LTR/English: mirrored so the cut faces the
                 heading on the right, per the Hero-style bleed-left
                 composition. */
  inline-size: 100%;
  overflow: hidden;
  aspect-ratio: 1536 / 1024;
  min-block-size: clamp(460px, 31vw, 580px);
}
:root[dir="rtl"] .about__media-frame { --flip: 1; } /* Arabic: unmirrored, cut faces the heading on the left. */

/* brightness(), not a black ::after overlay: the asset's chevron cut is
   real transparency (the frame is wider than the visible photo shape),
   so a rectangular overlay box painted a flat gray slab across the cut-
   away area instead of just darkening the photo. Filtering the <img>
   itself only ever touches its own pixels — transparent stays
   transparent — and darkens for the white paragraph text's contrast
   without needing a separate layer. Order matters: scaleX flips first,
   then brightness applies to the (already-flipped) pixels either way,
   so English mirroring is unaffected. */
.about__media-img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
  transform: scaleX(var(--flip));
  filter: brightness(0.8);
  transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Hover: a very subtle zoom on the photo only — the overlaid text stays
   fixed. Restates the same brightness() alongside the added scale()
   since this replaces the base transform/filter declaration rather than
   layering on top of it. Guarded to devices with a real hover-capable
   pointer. */
@media (hover: hover) and (pointer: fine) {
  .about__media:hover .about__media-img { transform: scaleX(var(--flip)) scale(1.02); filter: brightness(0.8); }
}

/* The two About paragraphs, laid directly over the photo, inside the
   clear/dark patch beside the chevron. Anchored with a physical offset
   from the *outer* edge (right in English, left in Arabic) because that
   patch mirrors along with the image itself — see --flip above — so the
   text has to mirror with it to stay over the same part of the photo. */
.about__media-text {
  position: absolute;
  left: clamp(1.25rem, 3vw, 2rem);
  right: 28%;
  /* Nudged up from a tighter bottom-corner offset now that the eyebrow
     label is gone — with only the two paragraphs left, sitting this
     much closer to centre reads as balanced instead of bottom-heavy. */
  bottom: clamp(2rem, 5vw, 3.5rem);
  max-inline-size: 680px;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  z-index: 2;
}
:root[dir="rtl"] .about__media-text { left: 28%; right: clamp(1.25rem, 3vw, 2rem); }

/* A soft, blurred glow behind the text rather than a hard-edged panel —
   it reads as light falling on the photo, not a card. Sized and blurred
   well past the text's own box so no rectangle edge is ever visible;
   "don't darken the whole image" is enforced by keeping the glow local
   to the text and letting it fall fully to transparent inside its own
   bounds. Colour is --green-800 (0,77,61) rather than the darker
   --green-900 used elsewhere, so it reads as a warm wash, not a shadow. */
.about__media-text::before {
  content: '';
  position: absolute;
  inset: -3rem -3.5rem -3.5rem -3.5rem;
  background: radial-gradient(closest-side at 72% 72%,
              rgba(0, 77, 61, 0.65) 0%,
              rgba(0, 77, 61, 0.3) 50%,
              rgba(0, 77, 61, 0) 80%);
  filter: blur(24px);
  z-index: -1;
  pointer-events: none;
}
/* Arabic reads fine over its own patch of the photo already — a lighter
   touch than the English side, just enough to guard against the
   brighter marble reflections at the very bottom. */
:root[dir="rtl"] .about__media-text::before {
  background: radial-gradient(closest-side at 28% 72%,
              rgba(0, 77, 61, 0.5) 0%,
              rgba(0, 77, 61, 0.22) 50%,
              rgba(0, 77, 61, 0) 80%);
}

.about__media-body {
  display: grid;
  gap: var(--space-4);
  font-size: var(--fs-lede);
  line-height: var(--lh-body);
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

/* Keep the approved profile paragraphs in the same dedicated reading panel
   in both languages. Direction changes the copy flow, not the composition. */
.about__media {
  display: grid;
  grid-template-rows: clamp(260px, 20vw, 340px) auto;
  align-items: stretch;
  background: var(--green-900);
}

.about__media-frame {
  min-block-size: 0;
  block-size: 100%;
  aspect-ratio: auto;
}

.about__media-text,
:root[dir="rtl"] .about__media-text {
  position: relative;
  inset: auto;
  align-self: stretch;
  max-inline-size: none;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--green-900);
}

.about__media-text::before { display: none; }

.about__media-body {
  gap: var(--space-3);
  font-size: var(--fs-body);
  line-height: 1.62;
  text-shadow: none;
}

/* The narrowest desktop tier: a true 50vw column is only ~450–620px
   here, so the overlaid paragraphs need a smaller, tighter-set size to
   stay inside the frame's min-block-size floor instead of spilling
   above it (English needs it more; Arabic already clears at this
   width, but the tighter set doesn't hurt it either). Placed after the
   unconditional rules above so the cascade actually picks it up at
   this width — same specificity, later wins. */
@media (min-width: 901px) and (max-width: 1199px) {
  .about__media-body { font-size: var(--fs-body); gap: var(--space-3); }
  .about__media-text { padding: 1.25rem; }
}

/* Reveal: the image slides in from the right (translateX) while the text
   uses the shared vertical fade — see data-reveal-delay in the markup for
   the image-then-text stagger. */
.js .about__media-frame[data-reveal] { transform: translateX(30px); }

.about .container { position: relative; z-index: 1; }

/* --------------------------------------------- ABOUT / JOURNEY  */
/* Scroll arms one coordinated reveal. English draws toward the mark from
   left to right; the existing RTL mirror makes Arabic draw from right to
   left toward its mark. The brand mark appears only after the route ends. */
.journey {
  position: relative;
  margin-block-start: clamp(1.75rem, 3.5vw, 3rem);
  /* No padding-block-end: this used to add its own trailing space before
     Impact came right after About, on top of About's own bottom padding.
     Now that Capabilities sits here instead, its padding-block-start is
     the single source of that gap — see .about and .capabilities. */
}

.journey__viz { position: relative; }

/* preserveAspectRatio="none" lets the drawing stretch to any width while
   non-scaling-stroke keeps the line weight constant. */
.journey__svg {
  display: block;
  inline-size: 100%;
  block-size: clamp(320px, 32vw, 460px);
}

.journey__track,
.journey__path {
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: stroke var(--theme-t);
}

/* The undrawn route stays faintly present, so the section never reads empty.
   Dark mode swaps the tint from a faint brand-green to a faint light-gray-
   green so it stays visible against the dark charcoal page — see
   --journey-track in the theme token blocks. */
.journey__track { stroke: var(--journey-track); }
.journey__path {
  stroke: url(#journeyStroke);
  stroke-dasharray: none;
  stroke-dashoffset: 0;
}

/* The route stays undashed. A rectangular SVG curtain is moved by changing
   its numeric x attribute, avoiding cross-browser path-length calculations. */
.js .journey__path {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
}

.journey__curtain { display: none; }
.js .journey__curtain {
  display: block;
  fill: var(--bg-primary);
  transition: fill var(--theme-t);
}

.journey__track--foreground { pointer-events: none; }

.journey__stages {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --x / --y are the node's position on the path, set in markup. Centring is
   done with left/inline-size rather than a transform, so transform stays
   free for the reveal (and can be safely cancelled for reduced motion). */
.journey__stage {
  position: absolute;
  top: var(--y);
  left: calc(var(--x) - min(120px, 11%));
  inline-size: min(240px, 22%);
  padding-block-start: 1.75rem;
  text-align: start;
}

.js .journey__stage {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 560ms var(--ease), transform 560ms var(--ease);
}
.js .journey__stage.is-reached {
  opacity: 1;
  transform: none;
}

/* Sits on the line: paper fill so the stroke reads through the ring. */
.journey__dot {
  position: absolute;
  top: 0;
  left: 50%;
  inline-size: 14px;
  block-size: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--bg-primary);
  box-shadow: inset 0 0 0 3px var(--dot, var(--green-800));
  transition: background-color var(--theme-t);
}

/* One-shot pulse when the line arrives. Never loops. */
.journey__dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--dot, var(--green-500));
  opacity: 0;
}
.journey__stage.is-reached .journey__dot::after {
  animation: journey-pulse 900ms var(--ease) 1 both;
}
@keyframes journey-pulse {
  from { transform: scale(1);   opacity: 0.5; }
  to   { transform: scale(2.8); opacity: 0; }
}

.journey__num {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, calc(-100% - 1.25rem));
  font-family: var(--font-head);
  font-size: var(--fs-heading);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-faint);
}

.journey__title {
  font-size: var(--fs-lede);
  font-weight: 600;
  line-height: var(--lh-snug);
  margin-block-end: var(--space-3);
}

.journey__text {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text-muted);
}

/* Destination of the line, sitting on the final plateau. It is part of the
   permanently complete route and is never mirrored in either direction. */
.journey__mark {
  position: absolute;
  right: 0;
  top: 19.565%;
  inline-size: clamp(64px, 11%, 132px);
  transform: translateY(-50%);
}

/* The English profile journey carries five verified approach stages. Its
   taller drawing and narrower copy columns preserve the same stepped-route
   signature without forcing five stages into the old three-stage geometry. */
.journey--profile .journey__svg {
  block-size: clamp(430px, 39vw, 560px);
}

.journey--profile .journey__path {
  stroke: url(#journeyStrokeProfile);
}

.journey--profile .journey__stage {
  left: calc(var(--x) - 6.5%);
  inline-size: 13%;
  padding-block-start: 1.5rem;
}

@media (min-width: 901px) {
  .journey--profile .journey__dot,
  .journey--profile .journey__num {
    left: 50%;
  }

  .journey--profile .journey__num {
    transform: translate(-50%, calc(-100% - 1.25rem));
  }

  .journey--profile .journey__stage:last-child {
    left: calc(var(--x) - 7.5%);
    inline-size: 15%;
  }
}

.journey--profile .journey__title {
  font-size: var(--fs-body);
}

.journey--profile .journey__text {
  font-size: var(--fs-caption);
  line-height: 1.58;
}

.journey--profile .journey__mark { top: 12.5%; }

.js .journey__mark {
  opacity: 0;
  transition: opacity 420ms var(--ease);
}

.js .journey.is-complete .journey__mark { opacity: 1; }

/* ============================================================ CAPABILITIES */
.capabilities {
  position: relative;
  background: var(--bg-primary);
  /* The sole source of the About -> Capabilities gap: About's own bottom
     padding and Journey's own trailing padding are both zeroed (see
     .about and .journey) specifically so this is the only spacing rule
     governing that transition, instead of three separate section-boundary
     paddings stacking into one huge gap. Ceiling raised slightly past the
     shared clamp(3rem,6vw,5rem) pattern (48-80px) to 6.5rem (104px) so it
     reads as a full, deliberate gap on wide screens now that it's carrying
     the whole distance alone. Bottom padding stays the standard
     --section-y (set by the shared .section class) since the next
     section isn't built yet. */
  padding-block-start: clamp(3rem, 6vw, 6.5rem);
}

.cap__head {
  display: grid;
  gap: var(--space-6);
  max-inline-size: 46rem;
}

.cap__headline {
  font-size: var(--fs-heading);
  font-weight: 600;
  max-inline-size: 26ch;
}

.cap__copy {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-block-start: clamp(2rem, 4vw, 3rem);
}

/* Card state is expressed as custom properties set on .cap-card (the <li>)
   and consumed by its descendants — one source of truth per interaction
   state (hover / keyboard focus-within / the JS-driven .is-expanded tap
   state on touch) instead of repeating the same declarations three times.
   Mirrors the --flip pattern already used for the About image. */
.cap-card {
  --cap-tint: linear-gradient(180deg,
              rgba(20, 16, 17, 0.16) 0%,
              rgba(20, 16, 17, 0.32) 55%,
              rgba(10, 8, 9, 0.78) 100%);
  --cap-img-scale: 1;
  --cap-desc-row: 0fr;
  --cap-desc-op: 0;
  --cap-desc-y: 8px;
  --cap-arrow: none;
  --cap-lift: 0px;
  --cap-shadow: 0 1px 2px rgba(var(--shadow-rgb), 0.05);
}

/* Richer ARIBA-green tint + description reveal, shared by keyboard focus
   and the touch/tap toggle. Hover (desktop-only) sets the same variables
   further down, gated to real pointer devices. */
.cap-card:focus-within,
.cap-card.is-expanded {
  --cap-tint: linear-gradient(180deg,
              rgba(0, 77, 61, 0.4) 0%,
              rgba(0, 77, 61, 0.52) 55%,
              rgba(0, 42, 33, 0.86) 100%);
  --cap-desc-row: 1fr;
  --cap-desc-op: 1;
  --cap-desc-y: 0px;
  --cap-lift: -5px;
  --cap-shadow: 0 18px 34px -18px rgba(0, 53, 39, 0.32);
}
/* Rotate (not translate) marks the tap-expanded state specifically — it
   reads as "tap again to collapse" rather than the hover-only nudge. */
.cap-card.is-expanded { --cap-arrow: rotate(180deg); }
.cap-card:focus-within { --cap-arrow: translateY(-5px); }

@media (hover: hover) and (pointer: fine) {
  .cap-card:hover {
    --cap-tint: linear-gradient(180deg,
                rgba(0, 77, 61, 0.4) 0%,
                rgba(0, 77, 61, 0.52) 55%,
                rgba(0, 42, 33, 0.86) 100%);
    --cap-img-scale: 1.02;
    --cap-desc-row: 1fr;
    --cap-desc-op: 1;
    --cap-desc-y: 0px;
    --cap-arrow: translateY(-5px);
    --cap-lift: -5px;
    --cap-shadow: 0 18px 34px -18px rgba(0, 53, 39, 0.32);
  }
}

.cap-card__inner {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--cap-shadow);
  transform: translateY(var(--cap-lift));
  transition: transform 380ms var(--ease), box-shadow 380ms var(--ease);
}

.cap-card__media { position: absolute; inset: 0; }

.cap-card__img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
  transform: scale(var(--cap-img-scale));
  transition: transform 380ms var(--ease);
}

/* Doubles as the default readability gradient (darker toward the bottom,
   where the title/CTA sit) and the hover-state green tint — same layer,
   just a different --cap-tint value, so there's only ever one darkening
   pass over the photo rather than a base overlay plus a separate tint. */
.cap-card__media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--cap-tint);
  transition: background 380ms var(--ease);
}

.cap-card__content {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: start;
  text-align: start;
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  color: #fff;
}

.cap-card__number {
  font-family: var(--font-head);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.6);
  margin-block-end: var(--space-2);
}
:lang(ar) .cap-card__number { letter-spacing: 0; }

.cap-card__title {
  font-size: var(--fs-lede);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: #fff;
}

/* The 0fr -> 1fr grid-rows trick: a single-track grid with no explicit
   height animates smoothly to its content's natural height without JS
   measuring anything, and min-block-size: 0 on the child lets the track
   actually collapse to zero instead of being floored by the paragraph's
   own intrinsic minimum. */
.cap-card__desc-wrap {
  display: grid;
  grid-template-rows: var(--cap-desc-row);
  transition: grid-template-rows 380ms var(--ease);
}
.cap-card__desc-content {
  overflow: hidden;
  min-block-size: 0;
  opacity: var(--cap-desc-op);
  transform: translateY(var(--cap-desc-y));
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}

.cap-card__desc {
  margin: 0;
  padding-block-start: var(--space-3);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
}

.cap-card__services {
  display: grid;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
  padding: 0;
  list-style: none;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--fs-caption);
  line-height: 1.45;
}

.cap-card__services li::before {
  content: '•';
  margin-inline-end: var(--space-2);
  color: var(--green-400);
}

.cap-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #fff;
  cursor: pointer;
}
:lang(ar) .cap-card__more { letter-spacing: 0; }

.cap-card__arrow {
  inline-size: 16px;
  block-size: 16px;
  transform: var(--cap-arrow);
  transition: transform 320ms var(--ease);
}

/* ======================================================== WHY ARIBA  */
/* Explicit top/bottom padding instead of the generic .section class —
   see the About/Journey/Capabilities fix above: letting two neighbours
   each own a large, uncoordinated padding is exactly how that whitespace
   bug happened. Here Why owns both edges of its own gap outright. */
.why {
  position: relative;
  padding-block-start: clamp(3rem, 6vw, 6.5rem);
  padding-block-end: clamp(2.5rem, 5vw, 4rem);
  background: var(--bg-primary);
}

/* The green surface. A plain block (not the .section/.container pair),
   so it's edge-to-edge by default with no width override needed; the
   editorial content inside it is still wrapped in .container. */
.why__band {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(6.5rem, 11vw, 9.5rem);
  color: #fff;
  background:
    radial-gradient(130% 90% at 88% 0%, rgba(10, 98, 73, 0.55) 0%, transparent 55%),
    linear-gradient(160deg, var(--green-900) 0%, var(--green-800) 62%, var(--green-700) 100%);
  /* One straight architectural cut: full height on the reading-start
     edge, tapering to a shorter panel on the reading-end edge. No
     curves — a single diagonal line only. */
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}
[dir="rtl"] .why__band {
  clip-path: polygon(100% 0, 0 0, 0 80%, 100% 100%);
}

.why__head {
  display: grid;
  gap: var(--space-6);
  max-inline-size: 32rem;
}

.why__headline {
  font-size: var(--fs-heading);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: #fff;
  max-inline-size: 18ch;
}

.why__copy {
  margin: 0;
  font-size: var(--fs-lede);
  line-height: var(--lh-body);
  color: rgba(255, 255, 255, 0.88);
  max-inline-size: 42ch;
}

.why__supporting {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: rgba(255, 255, 255, 0.64);
  max-inline-size: 42ch;
}

/* The floating panel. Pulled up over .why__band's cut with a negative
   margin — a deliberate overlap, the one place this section intentionally
   crosses its own boundary, not a leftover spacing bug. */
.why__stats {
  position: relative;
  z-index: 1;
  margin: clamp(-6.5rem, -9vw, -5rem) 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--surface-elevated);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -28px rgba(0, 53, 39, 0.32), 0 4px 16px rgba(var(--shadow-rgb), 0.06);
  padding-block: clamp(1.75rem, 3.2vw, 2.5rem);
  padding-inline: clamp(1.5rem, 3vw, 2.75rem);
  transition: background-color var(--theme-t), border-color var(--theme-t);
}
/* Dark mode: the panel is a lifted surface, not the paper-white card it is
   in light mode, so it needs its own thin border to read as "elevated"
   against the green band's edge instead of relying on a light/paper
   contrast that no longer exists. */
:root[data-theme="dark"] .why__stats { border-color: var(--border); }

.why__stat {
  position: relative;
  padding-inline: clamp(1rem, 2.2vw, 2rem);
  text-align: center;
}
.why__stat:first-child { padding-inline-start: 0; }
.why__stat:last-child  { padding-inline-end: 0; }
.why__stat + .why__stat { border-inline-start: 1px solid var(--stat-divider); }

.why__stat-number {
  display: block;
  font-family: var(--font-head);
  font-size: var(--fs-heading);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.why__stat-number--vision {
  font-size: var(--fs-lede);
  letter-spacing: 0.035em;
}
:lang(ar) .why__stat-number { letter-spacing: 0; }

.why__stat-label {
  display: block;
  margin-block-start: var(--space-3);
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--text-muted);
}

/* ================================================= CLIENT MARQUEE  */
/* A single proof line adapted from the approved ARIBA_Website - 1
   treatment. The logo field stays white in both themes so every approved
   mark keeps its original colour and contrast. */
.clients {
  padding-block: clamp(3rem, 6vw, 5.5rem);
  background: var(--bg-primary);
  border-block: 1px solid var(--border);
  overflow: hidden;
}

.client-marquee__heading {
  display: block;
  max-inline-size: none;
  margin-inline: 0;
  margin-block-end: clamp(2rem, 4vw, 3rem);
}

.client-marquee__heading h2 {
  margin-block-start: var(--space-5, 1.25rem);
  font-size: var(--fs-heading);
  font-weight: 600;
  line-height: var(--lh-snug);
}

.client-marquee__copy {
  max-inline-size: 60ch;
  margin-block-start: var(--space-4);
  color: var(--text-muted);
  line-height: var(--lh-body);
}

.client-marquee {
  --marquee-width: 100%;
  direction: ltr;
  inline-size: var(--marquee-width);
  min-inline-size: 0;
  max-inline-size: none;
  margin-inline: 0;
  contain: inline-size;
  overflow-x: auto;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  padding-inline: var(--space-4);
  background: #fff;
  border-block: 1px solid rgba(0, 77, 61, 0.18);
  scrollbar-color: var(--green-500) transparent;
  scrollbar-width: thin;
}

.client-marquee.is-enhanced {
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.client-marquee.is-dragging { cursor: grabbing; }

.client-marquee__track {
  direction: ltr;
  display: flex;
  inline-size: max-content;
}

.client-marquee.is-enhanced .client-marquee__track { will-change: transform; }

.client-marquee__group {
  --client-gap: clamp(2.5rem, 5vw, 5rem);
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--client-gap);
  margin: 0;
  padding: 0 var(--client-gap) 0 0;
}

.client-marquee__group li {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: clamp(8rem, 15vw, 12rem);
  block-size: clamp(4.5rem, 8vw, 6.25rem);
}

.client-marquee__group img {
  inline-size: auto;
  block-size: auto;
  max-inline-size: 100%;
  max-block-size: clamp(3.5rem, 5.5vw, 4.75rem);
  opacity: 1;
  filter: none;
  pointer-events: none;
}

.client-marquee:focus-visible {
  outline: 2px solid var(--green-500);
  outline-offset: 4px;
}

@media (min-width: 901px) {
  .client-marquee__heading h2 { max-inline-size: 28ch; }
}

@media (max-width: 599.98px) {
  .client-marquee {
    margin-inline: calc(-1 * var(--gutter));
    inline-size: calc(100% + (2 * var(--gutter)));
    max-inline-size: none;
    padding-inline: var(--gutter);
  }
  .client-marquee__group { --client-gap: 2rem; }
  .client-marquee__group li { inline-size: 7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .client-marquee.is-enhanced .client-marquee__track { will-change: auto; }
}


/* ====================================================== CONTACT  */
.contact {
  padding-block-start: clamp(2.5rem, 4vw, 4rem);
  padding-block-end: clamp(4rem, 5vw, 6rem);
}

/* Direct-contact cards imported from ARIBA_Website - 1 and expressed through
   this site's paper, ink, spacing, and five-size type system. */
.contact__intro {
  display: grid;
  gap: var(--space-6);
  align-items: end;
  margin-block-end: clamp(2.5rem, 5vw, 4rem);
}

.contact__headline {
  max-inline-size: 13ch;
  margin-block-start: var(--space-6);
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--text-primary);
}

.contact__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.contact__card {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  min-block-size: 15rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-block-start: 3px solid var(--green-500);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 40px -28px rgba(var(--shadow-rgb), 0.28);
  transition: transform var(--t-fast), border-color var(--t-fast), background-color var(--theme-t);
}

.contact__icon {
  display: grid;
  place-items: center;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  margin-block-end: var(--space-6);
  color: var(--green-900);
  background: rgba(45, 178, 95, 0.14);
  border: 1px solid rgba(0, 77, 61, 0.12);
  border-radius: var(--radius-lg);
  box-shadow: 5px 5px 0 rgba(0, 77, 61, 0.08);
}

.contact__card:nth-child(2) .contact__icon { background: rgba(218, 196, 89, 0.28); }
.contact__card:nth-child(3) .contact__icon { background: rgba(76, 196, 122, 0.42); }

.contact__icon svg {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.contact__card-label {
  margin: 0 0 var(--space-4);
  color: var(--green-700);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

:lang(ar) .contact__card-label { text-transform: none; }

.contact__card h3 {
  margin: 0 0 var(--space-3);
  color: var(--text-primary);
  font-size: var(--fs-lede);
  font-weight: 600;
  line-height: var(--lh-snug);
}

.contact__card a {
  inline-size: fit-content;
  max-inline-size: 100%;
  margin-block-start: auto;
  color: var(--green-800);
  font-family: var(--font-head);
  font-size: var(--fs-lede);
  font-weight: 600;
  line-height: var(--lh-snug);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  overflow-wrap: anywhere;
}

.contact__card a:hover,
.contact__card a:focus-visible { color: var(--green-500); }

:root[data-theme="dark"] .contact__card a { color: var(--green-400); }

@media (hover: hover) and (pointer: fine) {
  .contact__card:hover {
    transform: translateY(-3px);
    border-block-start-color: var(--green-400);
  }
}

@media (min-width: 640px) {
  .contact__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact__card:last-child { grid-column: 1 / -1; }
}

@media (min-width: 901px) {
  .contact__intro {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(3rem, 6vw, 6rem);
  }

  .contact__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact__card:last-child { grid-column: auto; }
}

/* ====================================================== FOOTER  */
/* Always a deep dark-green/near-black closing surface — in both Light and
   Dark site mode (see --footer-* tokens at the top of the file). Three
   stacked levels: a closing CTA, a brand/nav/contact grid, and a compact
   legal bar, each separated by a hairline rather than a background
   change, since the surface itself never changes tone internally. */
.footer {
  position: relative;
  overflow: hidden;
  background: var(--footer-bg);
  color: var(--footer-text);
  transition: background-color var(--theme-t);
}

/* Oversized, barely-there ribbon-fold geometry reinforces the brand without
   competing with the footer content. */
.footer__shape {
  position: absolute;
  top: 10%;
  inset-inline-end: -12%;
  inline-size: min(640px, 60vw);
  block-size: min(640px, 60vw);
  background: var(--footer-shape);
  filter: blur(90px);
  transform: rotate(45deg);
  pointer-events: none;
  z-index: 0;
}

/* --------------------------------------------------------- LEVEL 1 — CTA */
.footer__cta {
  position: relative;
  z-index: 1;
  padding-block: clamp(3.5rem, 6vw, 5.5rem) clamp(2.5rem, 4.5vw, 3.5rem);
}
.footer__cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.75rem, 4vw, 3rem);
}
.footer__cta-text { max-inline-size: 42rem; }
.footer__cta-headline {
  margin-block: var(--space-4);
  font-size: var(--fs-heading);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: #fff;
  max-inline-size: 18ch;
}
.footer__cta-copy {
  margin: 0;
  font-size: var(--fs-lede);
  line-height: var(--lh-body);
  color: var(--footer-text-secondary);
  max-inline-size: 46ch;
}
.footer__cta-btn { flex: none; }

.footer__divider {
  position: relative;
  z-index: 1;
  border-block-start: 1px solid var(--footer-border);
  transition: border-color var(--theme-t);
}

/* -------------------------------------------------------- LEVEL 2 — MAIN */
.footer__main {
  position: relative;
  z-index: 1;
  padding-block: clamp(2.75rem, 5vw, 4rem);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.25rem, 6vw, 3rem);
}
@media (min-width: 901px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
  }
}

.footer__brand { display: grid; gap: var(--space-3); align-content: start; }

/* The ARIBA lockup itself is never recoloured or filtered. Its dark wordmark
   uses a small light backing surface to preserve contrast on the footer. */
.footer__logo-wrap {
  display: inline-flex;
  align-items: center;
  inline-size: fit-content;
  padding: 0.625rem 0.9375rem;
  background: var(--footer-logo-backing);
  border-radius: var(--radius-md);
}
.footer__logo { display: block; block-size: 40px; inline-size: auto; }

.footer__brand-name {
  margin: var(--space-2) 0 0;
  font-family: var(--font-head);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--footer-text);
}
.footer__brand-desc {
  margin: 0;
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  color: var(--footer-text-secondary);
  max-inline-size: 32ch;
}

.footer__col-label {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--footer-text-muted);
}
:lang(ar) .footer__col-label { text-transform: none; }

.footer__nav-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer__nav-list a {
  font-size: var(--fs-body);
  color: var(--footer-link);
  transition: color var(--t-base);
}
.footer__nav-list a:hover,
.footer__nav-list a:focus-visible { color: var(--green-400); }

.footer__contact-list { display: grid; gap: var(--space-3); margin: 0; }
.footer__contact-row { display: grid; gap: 0.25rem; }
.footer__contact-row dt { font-size: var(--fs-caption); color: var(--footer-text-muted); }
.footer__contact-row dd {
  margin: 0;
  font-family: var(--font-head);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--footer-text);
}

/* ------------------------------------------------------- LEVEL 3 — LEGAL */
.footer__legal {
  position: relative;
  z-index: 1;
  border-block-start: 1px solid var(--footer-border);
  transition: border-color var(--theme-t);
}
.footer__legal-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: clamp(1.25rem, 2.5vw, 1.75rem);
}
.footer__copyright { margin: 0; font-size: var(--fs-caption); color: var(--footer-text-muted); }
.footer__legal-links { display: flex; gap: var(--space-6); }
.footer__legal-links a {
  font-size: var(--fs-caption);
  color: var(--footer-link);
  transition: color var(--t-base);
}
.footer__legal-links a:hover,
.footer__legal-links a:focus-visible { color: var(--green-400); }

/* ======================================================= LEGAL PAGE  */
/* Both trusted source documents are server-rendered for resilience. The
   root language chooses which one is visible, using the same persisted
   language state as the homepage without a second content system. */
html[lang="en"] [data-legal-lang="ar"],
html[lang="ar"] [data-legal-lang="en"] { display: none; }

.legal-page { min-block-size: calc(100vh - var(--nav-h)); }

.legal-nav__actions { margin-inline-start: auto; }
.legal-nav__home svg {
  inline-size: 18px;
  block-size: 18px;
  flex: none;
}
[dir="rtl"] .legal-nav__home svg { transform: scaleX(-1); }

.legal-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 8vw, 8rem);
  color: #FFFFFF;
  background: linear-gradient(118deg, var(--green-900), var(--green-800));
}
.legal-hero::after {
  content: "";
  position: absolute;
  inset-block: -35%;
  inset-inline-end: -8%;
  inline-size: min(42vw, 42rem);
  background: rgba(45, 178, 95, 0.14);
  clip-path: polygon(36% 0, 100% 0, 68% 100%, 0 100%);
  transform: rotate(8deg);
  pointer-events: none;
}
[dir="rtl"] .legal-hero::after { transform: rotate(-8deg) scaleX(-1); }

.legal-hero__inner {
  position: relative;
  z-index: 1;
  inline-size: 100%;
  max-inline-size: 88rem;
  margin-inline: auto;
}
.legal-hero h1 {
  max-inline-size: 22ch;
  margin-block-start: var(--space-8);
  color: #FFFFFF;
  font-size: var(--fs-display);
}
.legal-hero__date {
  margin-block-start: var(--space-6);
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-body);
}

.legal-content {
  padding-block: clamp(3.5rem, 7vw, 7rem);
  background: var(--bg-primary);
}
.legal-content__outer {
  max-inline-size: 88rem;
  margin-inline: auto;
}
.legal-document {
  max-inline-size: 78ch;
  margin-inline: auto;
  color: var(--text-secondary);
}
.legal-document h2 {
  margin-block: clamp(3rem, 5vw, 5rem) var(--space-6);
  padding-block-start: var(--space-8);
  border-block-start: 1px solid var(--border);
  color: var(--text-primary);
  font-size: var(--fs-heading);
  text-wrap: pretty;
}
.legal-document h2:first-child { margin-block-start: 0; }
.legal-document p,
.legal-document li {
  font-size: var(--fs-lede);
  line-height: var(--lh-body);
  overflow-wrap: anywhere;
}
.legal-document p + p { margin-block-start: var(--space-6); }
.legal-document a {
  color: var(--brand-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.legal-document a:hover,
.legal-document a:focus-visible { color: var(--brand-primary-hover); }
.legal-document ul {
  display: grid;
  gap: var(--space-3);
  margin-block: var(--space-6);
}
.legal-document li {
  position: relative;
  padding-inline-start: var(--space-6);
}
.legal-document li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.78em;
  inset-inline-start: 0;
  inline-size: 7px;
  block-size: 7px;
  background: var(--brand-bright);
  transform: rotate(45deg);
}
.legal-error {
  max-inline-size: 60ch;
  margin-inline: auto;
  padding: var(--space-8);
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--brand-bright);
  font-size: var(--fs-lede);
}
.legal-footer { margin-block-start: 0; }
.legal-footer .footer__legal { border-block-start: 0; }
.legal-footer [aria-current="page"] { color: var(--green-400); }

@media (max-width: 480px) {
  .legal-nav .nav__brand { padding-inline: 0; }
  .legal-nav__actions { gap: var(--space-2); }
  .legal-nav__home {
    --btn-px: 0;
    inline-size: 42px;
    block-size: 42px;
  }
  .legal-nav__home-label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .legal-hero { padding-block: 3.5rem; }
  .legal-hero::after { inline-size: 70vw; inset-inline-end: -20%; }
  .legal-document p,
  .legal-document li { font-size: var(--fs-body); }
  .legal-document h2 { margin-block-start: var(--space-12); }
}

/* ============================================================== REVEALS  */
/* One system. Opacity + a short vertical translate, staggered by index. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--reveal-dur) var(--ease),
              transform var(--reveal-dur) var(--ease);
  transition-delay: calc(var(--reveal-delay, 0) * var(--reveal-step));
}
.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ========================================================== RESPONSIVE  */

/* Tablet / small laptop — collapse to the mobile menu before links crowd. */
@media (max-width: 1024px) {
  :root {
    --nav-h: 70px;
  }

  .nav__inner {
    position: relative;
    gap: var(--space-3);
  }
  .nav__brand { flex: 0 1 auto; }
  .nav__toggle {
    position: relative;
    z-index: 110;
    display: inline-flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    margin-inline-end: 0;
    touch-action: manipulation;
  }

  .nav__menu {
    position: fixed;
    inset-block-start: calc(var(--nav-h) + var(--space-3));
    inset-inline: 0;
    z-index: 95;
    block-size: calc(100svh - var(--nav-h) - var(--space-3));
    inline-size: min(420px, 88vw);
    margin-inline: auto;
    padding: var(--space-8) var(--gutter) var(--space-12);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    background: var(--bg-primary);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    opacity: 0;
    transform: translateY(-12px);
    visibility: hidden;
    transition: opacity 280ms var(--ease), transform 380ms var(--ease),
                visibility 380ms, background-color var(--theme-t);
    overflow-y: auto;
  }
  .nav__menu.is-open { opacity: 1; transform: none; visibility: visible; }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav__list li + li { border-block-start: 1px solid var(--hairline); }
  .nav__link {
    display: block;
    padding-block: var(--space-4);
    font-family: var(--font-head);
    font-size: var(--fs-lede);
    font-weight: 500;
    text-align: center;
    letter-spacing: -0.01em;
    color: var(--text-primary);
  }
  :lang(ar) .nav__link { letter-spacing: 0; }
  .nav__link::after { display: none; }

  .nav__actions {
    margin-block-start: var(--space-8);
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }
  .nav__actions .theme-toggle { align-self: center; }
  .lang-switch { padding-block: 0.75rem; }
  .nav__cta { --btn-py: 0.95rem; inline-size: 100%; }

  /* Journey keeps the horizontal sequence; only the copy tightens. */
  .journey__num   { font-size: var(--fs-lede); }
  .journey__title { font-size: var(--fs-body); }
  .journey__text  { font-size: var(--fs-caption); }
  .journey__track,
  .journey__path  { stroke-width: 10; }
}

/* Hero stacks — media becomes a wide band under the copy. */
@media (max-width: 900px) {
  .hero__inner {
    grid-template-columns: 1fr;
    row-gap: clamp(2.5rem, 6vw, 4rem);
    align-items: start;
    padding-block-end: clamp(2.5rem, 6vh, 3.5rem);
  }
  .hero__content { max-inline-size: 34rem; }

  .about__grid { grid-template-columns: 1fr; row-gap: clamp(2rem, 5vw, 2.75rem); align-items: stretch; }
  /* Undo the desktop grid-row:1 pairing — at one column, both items
     forced onto row 1 would stack in the same cell (image painting over
     the heading) instead of flowing heading-then-image down the page. */
  .about__lead, .about__media { grid-column: 1 / -1; grid-row: auto; }

  /* Preserve the same image-above-copy composition on narrow screens. */
  .about__media {
    grid-template-rows: auto auto;
    margin-inline: 0;
  }
  .about__media-frame { aspect-ratio: auto; block-size: clamp(260px, 70vw, 360px); }
  .about__media-text,
  :root[dir="rtl"] .about__media-text {
    position: relative;
    inset: auto;
    max-inline-size: none;
  }

  .about__media-body { font-size: var(--fs-body); }

  /* Capabilities: single column, full width. Cards keep the same
     aspect-ratio and hover-state custom properties as desktop — only
     .is-expanded (set by main.js on tap, since there's no hover here)
     ever actually flips them at this width, the :hover block above is
     already gated out by (hover: hover) and (pointer: fine). */
  .cap-grid { grid-template-columns: 1fr; gap: clamp(1.25rem, 5vw, 1.75rem); }

  /* Journey becomes a vertical stepped path. The complete rule is rendered
     directly while the three pieces of copy retain their staged reveal. */
  .journey { margin-block-start: clamp(1.5rem, 5vw, 2.25rem); }
  .journey__svg { display: none; }
  .journey__viz { position: static; }

  .journey__stages {
    position: relative;
    inset: auto;
    padding-inline-start: 2.75rem;
    display: grid;
    gap: clamp(2.25rem, 7vw, 3rem);
  }
  .journey__stages::before,
  .journey__stages::after {
    content: '';
    position: absolute;
    inset-block: 0.45rem 1.25rem;
    inset-inline-start: 5px;
    inline-size: 3px;
    border-radius: 2px;
  }
  .journey__stages::before { background: var(--journey-stages-track); }
  .journey__stages::after {
    background: linear-gradient(180deg, var(--green-800), var(--green-500));
    transform-origin: top;
  }
  .js .journey__stages::after {
    transform: scaleY(0);
    transition: transform 3000ms linear 140ms;
  }
  .js .journey.is-playing .journey__stages::after,
  .js .journey.is-complete .journey__stages::after { transform: scaleY(1); }
  .journey__stage {
    position: relative;
    top: auto;
    left: auto;
    inline-size: auto;
    max-inline-size: 46ch;
    padding-block-start: 0;
  }

  .journey--profile .journey__stage {
    left: auto;
    inline-size: auto;
    padding-block-start: 0;
  }

  .journey__dot {
    top: 0.45rem;
    left: auto;
    margin: 0;
    inset-inline-start: -2.75rem;
  }

  .journey__num {
    position: static;
    transform: none;
    display: block;
    font-size: var(--fs-lede);
    margin-block-end: var(--space-2);
  }

  .journey__mark {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    display: block;
    inline-size: 64px;
    margin-block-start: var(--space-12);
  }

  .journey--profile .journey__mark { top: auto; }

  /* Why ARIBA: the cut simplifies to a shallower single diagonal (less
     vertical travel looks calmer at narrower widths) and the floating
     panel becomes 2x2, still overlapping the band below it. */
  .why__band { clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); }
  [dir="rtl"] .why__band { clip-path: polygon(100% 0, 0 0, 0 88%, 100% 100%); }

  .why__stats { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-8); }
  .why__stat { padding-inline: clamp(1rem, 3vw, 2rem); }
  .why__stat:nth-child(odd)  { padding-inline-start: 0; }
  .why__stat:nth-child(even) { padding-inline-end: 0; }
  .why__stat:nth-child(even) { border-inline-start: 1px solid var(--stat-divider); }
  .why__stat:nth-child(odd)  { border-inline-start: 0; }
  .why__stat:nth-child(n+3)  { padding-block-start: var(--space-6); }

}

/* Phones */
@media (max-width: 599.98px) {
  :root { --nav-h: 64px; }
  .nav__inner { padding-inline: 1rem; }
  .nav__brand { padding: 0.4rem 0.6rem; }
  .nav__logo  { block-size: 36px; }

  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { inline-size: 100%; }

  .why__stats { row-gap: var(--space-6); margin-block-start: clamp(-4.5rem, -12vw, -3rem); }
  .why__stat-label { margin-block-start: var(--space-2); }

  /* Footer: CTA button goes full-width under the closing copy (same
     pattern as .hero__actions .btn at this width) and the legal row
     stacks copyright above the links instead of trying to fit both on
     one line. */
  .footer__cta-btn { inline-size: 100%; }
  .footer__legal-inner { flex-direction: column; align-items: flex-start; }
}

/* =============================================== CONTENT EXPANSION  */
.about-purpose {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-block-start: clamp(2.5rem, 5vw, 4.5rem);
  background: var(--border);
  border-block: 1px solid var(--border);
}

.purpose-card {
  padding: clamp(1.5rem, 3.5vw, 3rem);
  background: var(--bg-primary);
}

.purpose-card__kicker {
  margin: 0 0 var(--space-3);
  font-family: var(--font-head);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-700);
}

:lang(ar) .purpose-card__kicker {
  letter-spacing: 0;
  text-transform: none;
}

.purpose-card__values {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-lede);
  font-weight: 600;
  line-height: var(--lh-snug);
}

.purpose-card__values li + li::before {
  content: '•';
  margin-inline-end: var(--space-4);
  color: var(--green-500);
}

.purpose-card__copy {
  max-inline-size: 58ch;
  margin-block-start: var(--space-4);
  color: var(--text-muted);
  line-height: var(--lh-body);
}

.journey__intro {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  margin-block-end: var(--space-4);
}

.journey__intro h2 {
  font-size: var(--fs-heading);
  line-height: var(--lh-snug);
  font-weight: 600;
}

.journey__intro > p:last-child {
  color: var(--text-muted);
  line-height: var(--lh-body);
}

@media (min-width: 901px) {
  [dir="rtl"] .journey__svg {
    transform: scaleX(-1);
    transform-origin: center;
  }

  [dir="rtl"] .journey__stage {
    left: calc(var(--x-rtl) - min(120px, 11%));
  }

  /* The five-stage profile anchors and copy columns share the midpoint of
     each plateau. This mirrors the English half-column shift so Arabic copy
     moves inward by the same amount in the opposite direction. */
  [dir="rtl"] .journey--profile .journey__stage {
    left: calc(var(--x-rtl) - 6.5%);
  }

  [dir="rtl"] .journey--profile .journey__stage:last-child {
    left: calc(var(--x-rtl) - 7.5%);
  }

  [dir="rtl"] .journey--profile .journey__dot,
  [dir="rtl"] .journey--profile .journey__num {
    right: auto;
    left: 50%;
  }

  [dir="rtl"] .journey__mark {
    right: auto;
    left: 0;
  }
}

.why__values {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin: clamp(2rem, 4vw, 3.5rem) 0 0;
  padding: 1px;
  list-style: none;
  background: rgba(255, 255, 255, 0.14);
}

.why__head { max-inline-size: none; }

.why__values li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-block-size: 7rem;
  padding: 1.25rem 1rem;
  background: rgba(0, 42, 33, 0.72);
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--fs-caption);
  line-height: 1.55;
  text-align: center;
}

[dir="rtl"] .why__values li { padding: 1.25rem 1rem; }

.why__values li::before {
  content: '';
  position: static;
  flex: 0 0 0.45rem;
  inline-size: 0.45rem;
  block-size: 0.45rem;
  border-radius: 50%;
  background: var(--green-400);
}

.impact {
  position: relative;
  background: var(--bg-secondary);
}

.impact__head {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}

.impact__headline {
  font-size: var(--fs-heading);
  font-weight: 600;
  line-height: var(--lh-snug);
}

/* Profile-backed program register. Sector labels act as the organizing
   structure; the program names remain unembellished evidence beneath them. */
.program-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-block-start: clamp(2.5rem, 5vw, 4rem);
  padding: 1px;
  background: var(--border);
}

.program-card {
  min-block-size: 12rem;
  padding: clamp(1.35rem, 2.5vw, 2rem);
  background: var(--bg-primary);
  border-block-start: 3px solid var(--green-700);
  transition: background-color var(--theme-t), border-color var(--t-base);
}

.program-card--wide {
  grid-column: 1 / -1;
  min-block-size: auto;
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(1.5rem, 4vw, 4rem);
}

.program-card__sector {
  font-family: var(--font-head);
  font-size: var(--fs-lede);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--text-primary);
}

.program-card__list {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
}

.program-card--wide .program-card__list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block-start: 0;
}

/* In Arabic, GEOSA belongs in its dedicated geospatial section. Hide only
   the repeated entry under Government Transformation; English is unchanged. */
html[lang='ar'] [data-arabic-duplicate] {
  display: none;
}

.program-card__list li {
  position: relative;
  padding-inline-start: 1.15rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.program-card__list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.65em;
  inline-size: 0.42rem;
  block-size: 0.42rem;
  background: var(--green-500);
  transform: rotate(45deg);
}

@media (hover: hover) and (pointer: fine) {
  .program-card:hover { border-block-start-color: var(--green-500); }
}


.footer__contact-row a {
  color: inherit;
  text-decoration: none;
}

.footer__contact-row a:hover,
.footer__contact-row a:focus-visible { color: var(--green-500); }

@media (max-width: 1024px) {
  .program-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .program-card--wide { grid-column: 1 / -1; }
  .why__values { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .about-purpose { grid-template-columns: 1fr; }
  .journey__intro,
  .impact__head { grid-template-columns: 1fr; gap: var(--space-4); }
  .journey__intro > p:last-child,
  .impact__copy { max-inline-size: 58ch; }
}

@media (max-width: 599.98px) {
  .about-purpose { grid-template-columns: 1fr; }
  .why__values { grid-template-columns: 1fr; }
  .why__values li { min-block-size: auto; }
  .program-grid { grid-template-columns: 1fr; }
  .program-card,
  .program-card--wide { grid-column: auto; min-block-size: auto; }
  .program-card--wide { grid-template-columns: 1fr; gap: var(--space-4); }
  .program-card--wide .program-card__list { grid-template-columns: 1fr; margin-block-start: var(--space-4); }
}

/* =========================================== VERSION 2: NARROW VIEWPORTS
   The desktop composition is the approved Version 1 baseline. Everything in
   this block stops below 1024px so laptop and desktop rendering remains
   governed by the original rules above. */
@media (max-width: 1023.98px) {
  /* A flex/grid child may otherwise keep its max-content width even when the
     parent is fluid. Explicitly allowing these structural children to shrink
     prevents long English and Arabic copy from being clipped by the page's
     decorative overflow guards. */
  .nav__inner,
  .nav__brand,
  .hero__content,
  .about__lead,
  .about__media,
  .about__media-text,
  .journey__intro > *,
  .journey__stage,
  .cap-card,
  .cap-card__content,
  .program-card,
  .impact__head > *,
  .contact__card,
  .footer__grid > * {
    min-inline-size: 0;
  }

  /* The underlined eyebrow is a column flexbox. Its text child needs an
     explicit cross-axis ceiling or it can retain a one-line intrinsic width
     on a phone and disappear beyond the reading edge. */
  .label--underline,
  .label--underline > :first-child {
    max-inline-size: 100%;
  }
  .label--underline > :first-child {
    white-space: normal;
    overflow-wrap: break-word;
  }

  /* Respect notched-device safe areas without changing the visual gutter on
     ordinary screens. The drawer follows the dynamic viewport while open so
     browser chrome cannot strand its final actions below the visible area. */
  .nav {
    inset-block-start: 0;
  }
  .nav__inner {
    max-inline-size: 100%;
    padding-inline-start: max(clamp(1rem, 2vw, 3rem), env(safe-area-inset-left));
    padding-inline-end: max(clamp(1rem, 2vw, 3rem), env(safe-area-inset-right));
  }
  .nav__menu {
    inset-block-start: calc(
      env(safe-area-inset-top) + var(--nav-h) + var(--space-3)
    );
    block-size: calc(
      100dvh - env(safe-area-inset-top) - var(--nav-h) - var(--space-3)
    );
    padding-block-end: max(var(--space-12), calc(var(--space-8) + env(safe-area-inset-bottom)));
    overscroll-behavior-y: contain;
  }
  .hero--bg-experiment {
    padding-block-start: clamp(2.5rem, 7vh, 4.5rem);
  }

  /* Pointer-sized controls are comfortable on desktop but too short for
     touch. These minimums enlarge the hit area without increasing icon size
     or changing the established ARIBA styling. */
  .nav__toggle,
  .theme-toggle,
  .cap-card__more {
    min-block-size: 44px;
  }
  .theme-toggle { inline-size: 44px; block-size: 44px; }
  .cap-card__more {
    align-items: center;
    margin-block-start: var(--space-2);
    padding-block: 0.5rem;
  }
  .contact__card a,
  .footer__nav-list a,
  .footer__contact-row a,
  .footer__legal-links a {
    display: inline-flex;
    align-items: center;
    min-inline-size: 44px;
    min-block-size: 44px;
  }
}

/* The original one-column tablet capability layout made each portrait card
   almost a full viewport tall. Two equal columns keep the source artwork's
   portrait character while making all three services scannable; the final
   card is centred instead of being promoted to a false "featured" item. */
@media (min-width: 600px) and (max-width: 900px) {
  .cap-grid {
    --cap-grid-gap: clamp(1.25rem, 4vw, 1.75rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--cap-grid-gap);
  }
  .cap-card:last-child {
    grid-column: 1 / -1;
    inline-size: calc((100% - var(--cap-grid-gap)) / 2);
    justify-self: center;
  }
}

/* Small tablets have room for a pair of concise value tiles, but not the
   three-column strip used by the larger tablet tier. The fifth item closes
   the sequence at full width. */
@media (min-width: 600px) and (max-width: 767.98px) {
  .why__values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why__values li:last-child { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  /* Single-column Contact already has a responsive row gap; removing the
     desktop row-separation margin prevents two gaps from stacking. */
  .contact__intro { margin-block-end: 0; }
}

/* ============================================== CENTRED CONTENT SYSTEM
   Large screens gain scale without scattering related text across the full
   viewport. Introductions form one centred focal group; evidence grids and
   media still use the broad page frame, while card and list copy keeps its
   natural reading-direction alignment. */
@media (min-width: 1280px) and (max-width: 1919.98px) {
  :root {
    --fs-caption: clamp(14px, calc(12px + 0.15625vw), 15px);
    --fs-body: clamp(16px, calc(12px + 0.3125vw), 18px);
    --fs-lede: clamp(20px, calc(16px + 0.3125vw), 22px);
    --fs-heading: clamp(40px, calc(32px + 0.625vw), 44px);
    --fs-display: clamp(56px, calc(40px + 1.25vw), 64px);
  }
}

/* The About photograph remains the one asymmetric split composition. */
@media (min-width: 901px) {
  .about__grid {
    margin-inline-start: calc(-1 * var(--page-edge));
  }
}

.cap__head,
.journey__intro,
.impact__head,
.client-marquee__heading > div,
.contact__intro > div {
  inline-size: 100%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: start;
  gap: var(--space-6);
  text-align: center;
}

.cap__head { max-inline-size: 64rem; }
.journey__intro,
.impact__head { max-inline-size: 72rem; }
.client-marquee__heading > div { max-inline-size: 68rem; }
.contact__intro > div { max-inline-size: 60rem; }

.cap__head .section-label,
.journey__intro .section-label,
.impact__head .section-label,
.client-marquee__heading .section-label,
.contact__intro .section-label {
  justify-content: center;
  align-items: center;
}

.cap__headline,
.journey__intro h2,
.impact__headline,
.client-marquee__heading h2,
.contact__headline {
  margin-inline: auto;
  text-align: center;
}

.cap__copy,
.journey__intro > p:last-child,
.impact__copy,
.client-marquee__copy {
  max-inline-size: 58ch;
  margin-inline: auto;
  text-align: center;
}

.client-marquee__heading h2,
.client-marquee__copy,
.contact__headline {
  margin-block-start: 0;
}

.contact__intro { display: block; }

.why__head {
  inline-size: 100%;
  max-inline-size: none;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}
.why__head > .section-label {
  justify-content: center;
  align-items: center;
}
.why__headline,
.why__copy,
.why__supporting {
  margin-inline: auto;
  text-align: center;
}
.why__copy { max-inline-size: 58ch; }
.why__supporting { max-inline-size: 55ch; }
.why__values {
  inline-size: 100%;
  justify-self: stretch;
}

.footer__cta-inner {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.footer__cta-text {
  max-inline-size: 50rem;
  margin-inline: auto;
}
.footer__cta-headline,
.footer__cta-copy { margin-inline: auto; }

@media (max-width: 900px) {
  .about > .container > .section-label {
    justify-content: center;
    align-items: center;
  }
  .about__headline {
    margin-inline: auto;
    text-align: center;
  }
}

/* A centred group with equal tracks replaces the three cards pinned to the
   outer rails. The rem ceiling grows with the 4K root scale without letting
   the low-resolution artwork become an edge-to-edge billboard. */
@media (min-width: 901px) {
  .cap-grid {
    inline-size: min(100%, 92rem);
    margin-inline: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(2rem, 3vw, 4rem);
  }
}

/* Sparse cards need breadth, not unlimited width. These distributed tracks
   keep the section connected to both viewport edges on wide displays. */
@media (min-width: 1856px) {
  .contact__cards {
    grid-template-columns: repeat(3, minmax(0, 36rem));
    justify-content: space-between;
  }
}

/* ============================================== VERSION 3: LARGE DISPLAYS
   From Full HD upward, one fluid scale raises the entire rem-based design system
   toward a 4K presentation size. It stops at 3840px so 4K screens larger
   than 75 inches keep the same stable composition instead of growing without
   bound. Width-based layout values use the same two endpoints: the current
   desktop values at 1920px and the presentation values at 3840px. */
@media (min-width: 1920px) {
  :root {
    --fs-root: clamp(16px, calc(8px + 0.416667vw), 24px);
    --fs-caption: clamp(15px, calc(8px + 0.364583vw), 22px);
    --fs-body: clamp(18px, calc(9px + 0.46875vw), 27px);
    --fs-lede: clamp(22px, calc(10px + 0.625vw), 34px);
    --fs-heading: clamp(44px, calc(10px + 1.770833vw), 78px);
    --fs-display: clamp(64px, calc(-16px + 4.166667vw), 144px);
    --reveal-dur: 850ms;
    --reveal-step: 120ms;

    --page-edge: clamp(1.75rem, calc(4px + 1.25vw), 3.25rem);
    --nav-h: clamp(74px, calc(40px + 1.770833vw), 108px);
  }

  html { font-size: var(--fs-root); }

  .nav__logo {
    block-size: clamp(44px, calc(16px + 1.458333vw), 72px);
  }
  .theme-toggle {
    inline-size: clamp(42px, calc(20px + 1.145833vw), 64px);
    block-size: clamp(42px, calc(20px + 1.145833vw), 64px);
  }
  .theme-toggle__icon {
    inline-size: clamp(20px, calc(10px + 0.520833vw), 30px);
    block-size: clamp(20px, calc(10px + 0.520833vw), 30px);
  }
  .lang-switch {
    min-inline-size: clamp(52px, calc(26px + 1.354167vw), 78px);
  }

  .rule {
    inline-size: clamp(34px, calc(16px + 0.9375vw), 52px);
    block-size: clamp(2px, calc(1px + 0.052083vw), 3px);
  }

  /* Width and height grow together, avoiding the shallow 860px banner that
     the capped desktop hero produced on a 2160px-tall screen. The viewport
     ceiling also prevents an excessively tall hero on unusual aspect ratios. */
  .hero--bg-experiment {
    min-block-size: min(
      92svh,
      clamp(860px, calc(-180px + 54.166667vw), 1900px)
    );
  }
  .hero--bg-experiment .hero__content {
    max-inline-size: 72rem;
  }
  .hero__headline {
    margin-block: clamp(1.5rem, 2vw, 3rem);
    line-height: 0.98;
    letter-spacing: -0.045em;
  }
  :lang(ar) .hero__headline {
    line-height: 1.2;
    letter-spacing: 0;
  }
  .hero__headline-line,
  .hero__headline-line-inner {
    display: block;
  }
  .hero__headline-line {
    inline-size: fit-content;
    margin-inline: auto;
    overflow: hidden;
  }
  :lang(ar) .hero__headline-line {
    padding-block: 0.1em 0.18em;
    margin-block: -0.1em -0.18em;
  }
  .js [data-reveal="hero-headline"].is-revealed .hero__headline-line {
    overflow: visible;
  }
  .hero__headline-line + .hero__headline-line::before { content: none; }
  .hero__headline-line--fold {
    position: static;
    margin-inline: auto;
    padding-inline-start: 0;
  }
  .hero__headline-line--fold::before {
    content: none;
  }

  /* At presentation size, reveal text by role: the hero folds upward line by
     line, headings uncover once, and compact intro groups arrive in sequence. */
  .js [data-reveal="hero-headline"],
  .js [data-reveal="sequence"] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .js [data-reveal="hero-headline"] .hero__headline-line-inner {
    opacity: 0;
    transform: translateY(112%);
    transition: opacity 650ms var(--ease), transform 900ms var(--ease);
  }
  .js [data-reveal="hero-headline"] .hero__headline-line:nth-child(1) .hero__headline-line-inner {
    transition-delay: calc(var(--reveal-delay, 0) * var(--reveal-step));
  }
  .js [data-reveal="hero-headline"] .hero__headline-line:nth-child(2) .hero__headline-line-inner {
    transition-delay: calc((var(--reveal-delay, 0) + 1) * var(--reveal-step));
  }
  .js [data-reveal="hero-headline"].is-revealed .hero__headline-line-inner {
    opacity: 1;
    transform: none;
  }
  .js [data-reveal="heading"] {
    opacity: 1;
    clip-path: inset(0 0 100% 0);
    transform: translateY(0.55em);
    transition: clip-path var(--reveal-dur) var(--ease),
                transform var(--reveal-dur) var(--ease);
    transition-delay: calc(var(--reveal-delay, 0) * var(--reveal-step));
  }
  .js [data-reveal="heading"].is-revealed {
    clip-path: inset(0);
    transform: none;
  }
  .js [data-reveal="sequence"] > * {
    opacity: 0;
    transform: translateY(1.25rem);
    transition: opacity var(--reveal-dur) var(--ease),
                transform var(--reveal-dur) var(--ease);
  }
  .js [data-reveal="sequence"] > :nth-child(2) { transition-delay: var(--reveal-step); }
  .js [data-reveal="sequence"] > :nth-child(3) { transition-delay: calc(2 * var(--reveal-step)); }
  .js [data-reveal="sequence"].is-revealed > * {
    opacity: 1;
    transform: none;
  }
  .js [data-reveal="label"] .rule,
  .js [data-reveal="sequence"] .label--underline .rule {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 650ms var(--ease);
    transition-delay: calc((var(--reveal-delay, 0) + 1) * var(--reveal-step));
  }
  [dir="rtl"] .js [data-reveal="label"] .rule,
  [dir="rtl"] .js [data-reveal="sequence"] .label--underline .rule {
    transform-origin: right center;
  }
  .js [data-reveal="label"].is-revealed .rule,
  .js [data-reveal="sequence"].is-revealed .label--underline .rule {
    transform: scaleX(1);
  }

  .hero__bg-img {
    animation: hero-image-settle-wide 1800ms var(--ease) both;
  }

  /* Keep the hero as the only display-sized statement on wide screens. */
  .contact__headline { font-size: var(--fs-heading); }

  /* These two visual signatures have pixel ceilings in the desktop design;
     give them matching 1920 -> 3840 ramps so their geometry scales with the
     enlarged typography and spacing rather than becoming miniature islands. */
  .about__media {
    grid-template-rows:
      clamp(340px, calc(30px + 16.145833vw), 650px)
      auto;
  }
  .journey--profile .journey__svg {
    block-size: clamp(560px, calc(160px + 20.833333vw), 960px);
  }
  .journey__dot {
    inline-size: clamp(14px, calc(7px + 0.364583vw), 21px);
    block-size: clamp(14px, calc(7px + 0.364583vw), 21px);
    margin: clamp(-10.5px, calc(-3.5px - 0.182292vw), -7px) 0 0
            clamp(-10.5px, calc(-3.5px - 0.182292vw), -7px);
  }

  .cap-card__arrow {
    inline-size: clamp(16px, calc(8px + 0.416667vw), 24px);
    block-size: clamp(16px, calc(8px + 0.416667vw), 24px);
  }

  .footer__logo {
    block-size: clamp(40px, calc(16px + 1.25vw), 64px);
  }
}

@keyframes hero-image-settle-wide {
  from { transform: scale(1.025); }
  to { transform: scale(1); }
}

/* ==================================================== REDUCED MOTION  */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }

  .js [data-reveal] { opacity: 1; transform: none; }
  .hero__bg-img { animation: none; transform: none; }
  .js [data-reveal="heading"] { clip-path: none; }
  .js [data-reveal="hero-headline"] .hero__headline-line-inner,
  .js [data-reveal="sequence"] > * {
    opacity: 1;
    transform: none;
  }
  .js [data-reveal="label"] .rule,
  .js [data-reveal="sequence"] .label--underline .rule {
    transform: none;
  }

  /* The journey shows all stage copy with no scroll dependency. Its route
     and destination mark are already complete in the base styles. */
  .js .journey__stage { opacity: 1; transform: none; }
  .journey__dot::after { animation: none; }

  /* The card's only motion is the shared [data-reveal] fade/translate
     (handled by the rule above) and its hover lift, which is already a
     one-off, non-repeating transition — nothing else to neutralize here. */
}