/* ==========================================================================
   DIWAN — AlUla Strategic Gateway · style.css
   Generated by build_site.py — edit src/css/*.css, then rebuild.
   ========================================================================== */

/* ==========================================================================
   DIWAN — AlUla Strategic Gateway
   01 · Design tokens
   Brand system: Desert Sand · Warm AlUla Gold · Terracotta · Deep Desert Night
   Contrast targets: body text >= 4.5:1, large display >= 3:1 (WCAG AA)
   ========================================================================== */

:root {
  /* ---- Gold ramp ------------------------------------------------------ */
  --gold-900: #5E4218;
  --gold-800: #7A5822;
  --gold-700: #96702E;
  --gold-600: #B08A3C;
  --gold-500: #C5A059;   /* brand gold — muted */
  --gold-400: #D4AF37;   /* brand gold — signature */
  --gold-300: #E2C572;
  --gold-200: #EEDCA6;
  --gold-100: #F7ECD2;

  /* ---- Terracotta / ochre --------------------------------------------- */
  --terra-700: #7E3F2B;
  --terra-600: #9E5039;
  --terra-500: #C86D51;  /* brand terracotta */
  --terra-400: #D98A6E;
  --terra-200: #EFC4B3;

  /* ---- Desert sand neutrals ------------------------------------------- */
  --sand-050: #FBF8F4;
  --sand-100: #F5F0EB;   /* brand sand — light */
  --sand-200: #E8DFD5;   /* brand sand — mid */
  --sand-300: #D8CCBD;
  --sand-400: #BCAB99;
  --sand-500: #93826F;
  --sand-600: #6E5F4E;

  /* ---- Deep desert night ---------------------------------------------- */
  --night-900: #0B0F14;
  --night-800: #12181F;  /* brand night — deep */
  --night-700: #1A222B;  /* brand night — raised */
  --night-600: #232D38;
  --night-500: #31404E;

  /* ---- Typography ------------------------------------------------------ */
  --font-ar:      'Tajawal', 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body:    'Manrope', 'Segoe UI', system-ui, sans-serif;

  /* Numerals only. Cormorant Garamond is a display serif: at counter size its
     3 and 5 collapse into each other and a phone number reads as a smear. It
     stays on headings, where it belongs, and every digit on the page is set in
     Inter instead — lining, tabular, unambiguous. See the .num rule in
     02-base.css for what actually carries this. */
  --font-num:     'Inter', 'Roboto', 'Helvetica Neue', system-ui, -apple-system,
                  'Segoe UI', Arial, sans-serif;

  --fs-hero:    clamp(2.35rem, 1.45rem + 3.55vw, 4.7rem);
  --fs-h2:      clamp(1.95rem, 1.25rem + 2.6vw, 3.4rem);
  --fs-h3:      clamp(1.28rem, 1.06rem + 0.8vw, 1.75rem);
  --fs-lead:    clamp(1.06rem, 0.98rem + 0.4vw, 1.28rem);
  --fs-body:    clamp(0.99rem, 0.95rem + 0.2vw, 1.08rem);
  --fs-small:   0.875rem;
  --fs-kicker:  0.735rem;

  --lh-tight: 1.14;
  --lh-head:  1.28;
  --lh-body:  1.85;

  --tracking-kicker: 0.24em;
  --tracking-wide:   0.08em;

  /* ---- Rhythm ---------------------------------------------------------- */
  --space-section: clamp(4.5rem, 3rem + 7vw, 9rem);
  --gutter:        clamp(1.15rem, 0.7rem + 2vw, 2.75rem);
  --max-width:     1280px;
  --max-prose:     68ch;

  /* ---- Shape ----------------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 180ms;
  --dur-mid:  420ms;
  --dur-slow: 900ms;

  --header-h: 82px;
}


.partnersSwiper .swiper-button-next,
.partnersSwiper .swiper-button-prev {
  color: #d4af37 !important; 
}


.partnersSwiper .swiper-button-next::after,
.partnersSwiper .swiper-button-prev::after {
  font-size: 30px !important;
  font-weight: bold;
}

/* تغيير لون نقاط التنقل (Dots) النشطة */
.partnersSwiper .swiper-pagination-bullet-active {
  background: #d4af37 !important;
}

/* ==========================================================================
   Theme — LIGHT (default)
   Sand surfaces, deep-night ink. Gold is darkened for text use so that
   headings on sand clear 4.5:1; --gold-bright stays reserved for dark surfaces.
   ========================================================================== */
:root,
[data-theme='light'] {
  color-scheme: light;

  --bg:            var(--sand-100);
  --bg-alt:        var(--sand-050);
  --bg-deep:       var(--sand-200);
  --surface:       #FFFFFF;
  --surface-2:     var(--sand-050);
  --surface-sunk:  var(--sand-200);

  --ink:        #14191F;   /* 14.6:1 on sand      */
  --ink-soft:   #3D4650;   /* 8.3:1  on sand      */
  --ink-muted:  #5C6672;   /* 5.4:1  on sand      */
  --ink-invert: #FFFFFF;

  --line:        rgba(20, 25, 31, 0.12);
  --line-strong: rgba(20, 25, 31, 0.22);
  --line-gold:   rgba(122, 88, 34, 0.34);

  --accent:        var(--gold-800);   /* gold for TEXT on light — 5.1:1 */
  --accent-strong: var(--gold-900);
  --accent-bright: var(--gold-400);   /* gold for FILLS / on dark only  */
  --accent-soft:   rgba(197, 160, 89, 0.16);
  --accent-grad:   linear-gradient(100deg, var(--gold-900) 0%, var(--gold-700) 42%, var(--gold-600) 100%);

  --terra:      var(--terra-700);     /* terracotta for text on light   */
  --terra-fill: var(--terra-500);

  --glass-bg:     rgba(255, 255, 255, 0.68);
  --glass-brd:    rgba(255, 255, 255, 0.9);
  --glass-shadow: 0 26px 60px -32px rgba(30, 22, 10, 0.4);

  --shadow-sm: 0 2px 10px -4px rgba(30, 22, 10, 0.2);
  --shadow-md: 0 18px 40px -28px rgba(30, 22, 10, 0.42);
  --shadow-lg: 0 40px 90px -50px rgba(30, 22, 10, 0.55);

  --scrim: linear-gradient(180deg, rgba(11, 15, 20, 0.62) 0%, rgba(11, 15, 20, 0.5) 45%, rgba(11, 15, 20, 0.82) 100%);
}

/* ==========================================================================
   Theme — DARK
   ========================================================================== */
[data-theme='dark'] {
  color-scheme: dark;

  --bg:            var(--night-800);
  --bg-alt:        var(--night-900);
  --bg-deep:       #080C10;
  --surface:       var(--night-700);
  --surface-2:     var(--night-600);
  --surface-sunk:  var(--night-900);

  --ink:        #F3EDE4;   /* 13.9:1 on night-800 */
  --ink-soft:   #D3CABC;   /* 9.6:1               */
  --ink-muted:  #A9A092;   /* 5.7:1               */
  --ink-invert: #0B0F14;

  --line:        rgba(243, 237, 228, 0.14);
  --line-strong: rgba(243, 237, 228, 0.26);
  --line-gold:   rgba(212, 175, 55, 0.36);

  --accent:        var(--gold-300);   /* 9.1:1 on night-800 */
  --accent-strong: var(--gold-200);
  --accent-bright: var(--gold-400);
  --accent-soft:   rgba(212, 175, 55, 0.14);
  --accent-grad:   linear-gradient(100deg, var(--gold-200) 0%, var(--gold-400) 45%, var(--gold-500) 100%);

  --terra:      var(--terra-400);
  --terra-fill: var(--terra-500);

  --glass-bg:     rgba(18, 24, 31, 0.6);
  --glass-brd:    rgba(243, 237, 228, 0.16);
  --glass-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.8);

  --shadow-sm: 0 2px 12px -4px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 20px 46px -28px rgba(0, 0, 0, 0.75);
  --shadow-lg: 0 44px 100px -52px rgba(0, 0, 0, 0.9);

  --scrim: linear-gradient(180deg, rgba(6, 9, 13, 0.68) 0%, rgba(6, 9, 13, 0.56) 45%, rgba(6, 9, 13, 0.88) 100%);
}

/* ==========================================================================
   02 · Reset, base, typography, utilities
   Written with CSS logical properties throughout so a single stylesheet
   serves the Arabic (RTL) and the English / French (LTR) pages.
   ========================================================================== */

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

* { margin: 0; padding: 0; }

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

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  overflow-x: clip;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color var(--dur-mid) var(--ease-soft),
              color var(--dur-mid) var(--ease-soft);
}

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

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

img {
  height: auto;
  /* Guards against the dark placeholder flash some engines paint under
     decoding images inside transformed / filtered ancestors. */
  background-color: transparent;
}

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

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

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-soft);
}

ul, ol { list-style: none; }

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

::selection {
  background: var(--accent-bright);
  color: var(--night-900);
}

/* Scrollbar ---------------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--gold-600) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--gold-700), var(--gold-500));
  border-radius: var(--r-pill);
  border: 2px solid var(--bg-deep);
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4 {
  line-height: var(--lh-head);
  font-weight: 700;
  color: var(--ink);
  text-wrap: balance;
}

html[lang='en'] h1, html[lang='fr'] h1,
html[lang='en'] h2, html[lang='fr'] h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.005em;
}

html[lang='ar'] h1,
html[lang='ar'] h2 { font-weight: 800; letter-spacing: 0; }

h1 { font-size: var(--fs-hero); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-family: inherit; font-weight: 700; }

p { color: var(--ink-soft); }
p + p { margin-block-start: 1em; }

strong, b { color: var(--ink); font-weight: 700; }

.lead {
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  max-inline-size: var(--max-prose);
}

/* Latin kicker used above localised headings ------------------------------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-size: var(--fs-kicker);
  font-weight: 700;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--accent);
  direction: ltr;
  unicode-bidi: isolate;
  margin-block-end: 0.9rem;
}

.kicker::before {
  content: '';
  inline-size: 30px;
  block-size: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
  flex: none;
}

.card-kicker {
  display: block;
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  direction: ltr;
  unicode-bidi: isolate;
  margin-block-end: 0.42rem;
}

/* Gold gradient display text. Light theme uses the deep ramp so headings
   keep their contrast against sand; dark theme uses the bright ramp.        */
.gold-text {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  padding-block-end: 0.06em;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .gold-text { color: var(--accent); -webkit-text-fill-color: currentColor; }
}

/* ==========================================================================
   Layout utilities
   ========================================================================== */

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

.section {
  position: relative;
  padding-block: var(--space-section);
  overflow: clip;
}

.section--tight { padding-block: calc(var(--space-section) * 0.66); }
.section--alt   { background: var(--bg-alt); }
.section--sunk  { background: var(--surface-sunk); }

.section-head {
  max-inline-size: 74ch;
  margin-block-end: clamp(2.5rem, 1.6rem + 2.6vw, 4rem);
}

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

.section-head--center .kicker { justify-content: center; }
.section-head--center .kicker::after {
  content: '';
  inline-size: 30px;
  block-size: 1px;
  background: linear-gradient(270deg, transparent, var(--accent));
}

.section-head h2 { margin-block-end: 1rem; }
.section-head .lead { margin-inline: 0; }
.section-head--center .lead { margin-inline: auto; }

.rule {
  inline-size: 72px;
  block-size: 2px;
  border: 0;
  margin-block: 1.35rem;
  background: linear-gradient(90deg, var(--accent-bright), transparent);
  border-radius: var(--r-pill);
}

.section-head--center .rule { margin-inline: auto; }

.grid { display: grid; gap: clamp(1.15rem, 0.7rem + 1.6vw, 2rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }

/* ==========================================================================
   Surfaces
   ========================================================================== */

.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

/* Media frame — fixed ratio box, image always fully painted, never lazy-
   flashing a dark rectangle. No overlays or badges are placed on top.       */
.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--surface-sunk);
  isolation: isolate;
}

.frame > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  transform: scale(1.001);
  transition: transform 900ms var(--ease-out);
}

.frame--4x3  { aspect-ratio: 4 / 3; }
.frame--3x2  { aspect-ratio: 3 / 2; }
.frame--1x1  { aspect-ratio: 1 / 1; }
.frame--4x5  { aspect-ratio: 4 / 5; }
.frame--3x4  { aspect-ratio: 3 / 4; }
.frame--16x9 { aspect-ratio: 16 / 9; }

/* A hairline gold edge instead of any floating icon or badge overlay */
.frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--line-gold);
  pointer-events: none;
  z-index: 2;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  --btn-pad-i: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding-block: 1.02rem;
  padding-inline: var(--btn-pad-i);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  line-height: 1;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out),
              background-color var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft),
              border-color var(--dur-fast) var(--ease-soft);
}

html[lang='ar'] .btn { font-family: var(--font-ar); letter-spacing: 0; font-weight: 700; }

.btn svg { flex: none; }

.btn--gold {
  background: linear-gradient(105deg, var(--gold-500), var(--gold-400) 48%, var(--gold-300));
  color: #221A08;
  border: 1px solid var(--gold-300);
  box-shadow: 0 16px 34px -18px rgba(184, 140, 40, 0.75);
}

.btn--gold:hover,
.btn--gold:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 22px 46px -18px rgba(184, 140, 40, 0.92);
  color: #221A08;
}

.btn--glass {
  background: var(--glass-bg);
  border: 1px solid var(--line-gold);
  color: var(--ink);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}

.btn--glass:hover,
.btn--glass:focus-visible {
  transform: translateY(-2px);
  border-color: var(--accent-bright);
  color: var(--ink);
}

.btn--ghost {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink);
}

.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

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

/* Hero buttons sit on a dark scrim in both themes */
.on-dark .btn--glass {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.42);
  color: #FFFFFF;
}
.on-dark .btn--glass:hover { border-color: var(--gold-300); color: #FFFFFF; }

/* ==========================================================================
   Reveal-on-scroll — opt-in, and inert when JS or motion is unavailable
   ========================================================================== */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
  will-change: opacity, transform;
}

.js [data-reveal='left']  { transform: translate3d(-32px, 0, 0); }
.js [data-reveal='right'] { transform: translate3d(32px, 0, 0); }
.js [data-reveal='zoom']  { transform: scale(0.965); }

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Accessibility helpers ---------------------------------------------------- */
.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  z-index: 400;
  padding: 0.8rem 1.4rem;
  border-radius: var(--r-pill);
  background: var(--gold-400);
  color: #221A08;
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform var(--dur-fast) var(--ease-out);
}

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

/* ==========================================================================
   Numerals
   --------------------------------------------------------------------------
   Client note, Aug 30 2026: "the current decorative font renders numbers like
   '3' and phone digits indistinctly." It does. Cormorant Garamond is a display
   serif drawn for headlines, and at counter size — with a gold gradient clipped
   through it, no less — 3 / 5 / 6 / 8 lose their distinguishing strokes. The
   WhatsApp number had the same problem for the same reason.

   So digits get their own face: Inter, a UI sans with unambiguous figures and
   real tabular numerals, backed by Roboto and the system sans so the page stays
   legible before the webfont lands, or offline.

   `lining-nums` forces figures that sit on the baseline at cap height instead
   of old-style figures that hang below it. `tabular-nums` gives every digit the
   same advance width, so a column of counters and a phone number keep a
   consistent rhythm rather than shifting per glyph. `font-feature-settings` is
   the fallback for engines that ignore the high-level property.

   This is the shared definition. The three components that actually hold digits
   (.metric__k, .hero-card__k, .reach__value) each point their own font-family
   at --font-num as well, because their rules live in later files and would
   otherwise win the cascade. Prose is deliberately untouched: Arabic and Latin
   body copy keep Tajawal / Manrope.
   ========================================================================== */
.num,
.card-index {
  font-family: var(--font-num);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

/* Any element carrying digits inherits the figure settings even where the
   family is set locally — cheap, and it means a new numeric element only has
   to add .num to be correct. */
.metric__k,
.hero-card__k,
.reach__value {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

/* ==========================================================================
   03 · Site chrome — preloader, progress rail, header, nav, footer
   The header carries the DIWAN mark alone. No secondary institutional logo.
   ========================================================================== */

/* Preloader ---------------------------------------------------------------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  background: var(--bg);
  transition: opacity 620ms var(--ease-soft), visibility 620ms;
}

.preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
html:not(.js) .preloader { display: none; }

.preloader__mark {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  font-weight: 600;
  letter-spacing: 0.42em;
  padding-inline-start: 0.42em;
  direction: ltr;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.preloader__bar {
  margin-block-start: 1.4rem;
  inline-size: 132px;
  block-size: 2px;
  border-radius: var(--r-pill);
  background: var(--line);
  overflow: hidden;
}

.preloader__bar span {
  display: block;
  block-size: 100%;
  inline-size: 40%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--gold-400), transparent);
  animation: preload-sweep 1.15s var(--ease-soft) infinite;
}

@keyframes preload-sweep {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(340%); }
}

/* Scroll progress ---------------------------------------------------------- */
.progress-rail {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  z-index: 260;
  background: transparent;
  pointer-events: none;
}

.progress-rail span {
  display: block;
  block-size: 100%;
  inline-size: 0;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-400), var(--terra-500));
  transition: inline-size 90ms linear;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 250;
  min-block-size: var(--header-h);
  display: flex;
  align-items: center;
  border-block-end: 1px solid transparent;
  transition: background-color var(--dur-mid) var(--ease-soft),
              border-color var(--dur-mid) var(--ease-soft),
              box-shadow var(--dur-mid) var(--ease-soft),
              backdrop-filter var(--dur-mid) var(--ease-soft);
}

.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 11, 15, 0.66), rgba(8, 11, 15, 0));
  opacity: 1;
  transition: opacity var(--dur-mid) var(--ease-soft);
  pointer-events: none;
}

.site-header.is-stuck {
  background: var(--glass-bg);
  border-block-end-color: var(--line);
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
}

.site-header.is-stuck::before { opacity: 0; }

.nav {
  inline-size: min(100% - (var(--gutter) * 2), 1440px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 0.3rem + 1.6vw, 2rem);
  position: relative;
  z-index: 1;
}

/* Brand — DIWAN mark only -------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  margin-inline-end: auto;
}

.brand__logo {
  block-size: clamp(38px, 3.2vw, 50px);
  inline-size: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}

.brand__fallback {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  padding-inline-start: 0.34em;
  direction: ltr;
  color: var(--gold-300);
}

.site-header:not(.is-stuck) .brand__fallback { color: #F7ECD2; }

/* Links -------------------------------------------------------------------- */
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(0.35rem, 0.05rem + 1vw, 1.3rem);
}

.nav__links a {
  position: relative;
  padding: 0.5rem 0.15rem;
  font-size: 0.87rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-soft);
}

.site-header.is-stuck .nav__links a { color: var(--ink-soft); }

.nav__links a::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 0;
  block-size: 2px;
  border-radius: var(--r-pill);
  background: var(--gold-400);
  transition: inline-size var(--dur-mid) var(--ease-out);
}

.nav__links a:hover,
.nav__links a:focus-visible { color: var(--gold-300); }
.site-header.is-stuck .nav__links a:hover,
.site-header.is-stuck .nav__links a:focus-visible { color: var(--accent); }
.nav__links a:hover::after,
.nav__links a:focus-visible::after,
.nav__links a.is-active::after { inline-size: 100%; }

.nav__cta {
  padding: 0.7rem 1.35rem !important;
  border-radius: var(--r-pill);
  border: 1px solid var(--gold-400);
  color: var(--gold-300) !important;
  background: rgba(212, 175, 55, 0.12);
}

.nav__cta::after { display: none; }
.nav__cta:hover { background: var(--gold-400); color: #221A08 !important; }
.site-header.is-stuck .nav__cta { color: var(--accent) !important; border-color: var(--line-gold); }
.site-header.is-stuck .nav__cta:hover { background: var(--gold-400); color: #221A08 !important; }

/* Controls ----------------------------------------------------------------- */
.nav__controls {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: none;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(10, 14, 19, 0.4);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.site-header.is-stuck .lang-switch {
  border-color: var(--line);
  background: var(--surface-2);
}

.lang-switch a {
  display: grid;
  place-items: center;
  inline-size: 34px;
  block-size: 26px;
  border-radius: var(--r-pill);
  opacity: 0.62;
  transition: opacity var(--dur-fast), background-color var(--dur-fast);
}

.lang-switch a img {
  inline-size: 22px;
  block-size: 15px;
  object-fit: cover;
  border-radius: 3px;
}

.lang-switch a:hover { opacity: 1; }
.lang-switch a.is-active {
  opacity: 1;
  background: rgba(212, 175, 55, 0.28);
  box-shadow: inset 0 0 0 1px var(--gold-400);
}

.icon-btn {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(10, 14, 19, 0.4);
  color: #F7ECD2;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}

.site-header.is-stuck .icon-btn {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--ink);
}

.icon-btn:hover { color: var(--gold-300); border-color: var(--gold-400); transform: translateY(-1px); }

[data-theme='light'] .icon-theme .i-moon,
[data-theme='dark']  .icon-theme .i-sun { display: none; }

/* Burger ------------------------------------------------------------------- */
.burger {
  display: none;
  place-items: center;
  gap: 5px;
  inline-size: 42px;
  block-size: 42px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(10, 14, 19, 0.4);
}

.site-header.is-stuck .burger { border-color: var(--line); background: var(--surface-2); }

.burger i {
  display: block;
  inline-size: 19px;
  block-size: 2px;
  border-radius: 2px;
  background: #F7ECD2;
  transition: transform var(--dur-mid) var(--ease-out), opacity var(--dur-fast);
}

.site-header.is-stuck .burger i { background: var(--ink); }

.burger[aria-expanded='true'] i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded='true'] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer ------------------------------------------------------------ */
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 240;
  background: rgba(6, 9, 13, 0.62);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-mid) var(--ease-soft), visibility var(--dur-mid);
}

body.nav-open .nav-scrim { opacity: 1; visibility: visible; }
body.nav-open { overflow: hidden; }

@media (max-width: 1100px) {
  .burger { display: grid; }

  .nav__links {
    position: fixed;
    inset-block-start: 0;
    inset-inline-end: 0;
    inline-size: min(88vw, 360px);
    block-size: 100dvh;
    z-index: 245;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.25rem;
    padding: calc(var(--header-h) + 1.4rem) 1.6rem 2.4rem;
    background: var(--surface);
    border-inline-start: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Hidden in place — never translated outside the viewport, which would
       create real horizontal overflow on small screens. */
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-mid) var(--ease-soft), visibility var(--dur-mid);
  }

  body.nav-open .nav__links { opacity: 1; visibility: visible; }

  .nav__links a,
  .site-header.is-stuck .nav__links a {
    color: var(--ink);
    font-size: 1.02rem;
    padding: 0.95rem 0.25rem;
    border-block-end: 1px solid var(--line);
  }

  .nav__links a::after { display: none; }

  .nav__cta,
  .site-header.is-stuck .nav__cta {
    margin-block-start: 1.1rem;
    text-align: center;
    border-block-end: 0;
    background: var(--gold-400);
    color: #221A08 !important;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  position: relative;
  padding-block: clamp(3rem, 2rem + 3vw, 4.6rem) 2.2rem;
  background: var(--night-900);
  color: var(--sand-200);
  overflow: hidden;
  text-align: center;
}

.site-footer::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
}

.site-footer::after {
  content: '';
  position: absolute;
  inset-block-end: -45%;
  inset-inline-start: 50%;
  inline-size: 780px;
  block-size: 780px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(212, 175, 55, 0.11), transparent 62%);
  pointer-events: none;
}

.site-footer > * { position: relative; z-index: 1; }

.footer__mark {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.4rem);
  font-weight: 600;
  letter-spacing: 0.4em;
  padding-inline-start: 0.4em;
  direction: ltr;
  background: linear-gradient(100deg, var(--gold-200), var(--gold-400) 50%, var(--gold-600));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  line-height: 1.2;
}

.footer__tagline {
  color: var(--sand-300);
  font-size: 0.94rem;
  letter-spacing: 0.06em;
  margin-block-start: 0.2rem;
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.6rem;
  margin-block: 2rem 1.8rem;
}

.footer__nav a {
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--sand-200);
}

.footer__nav a:hover { color: var(--gold-300); }

.footer__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem 1.4rem;
  padding-block-start: 1.7rem;
  border-block-start: 1px solid rgba(243, 237, 228, 0.12);
  color: #B4A992;
  font-size: 0.82rem;
}

.footer__meta a { color: #B4A992; }
.footer__meta a:hover { color: var(--gold-300); }

/* Back to top -------------------------------------------------------------- */
.to-top {
  position: fixed;
  inset-block-end: 22px;
  inset-inline-end: 22px;
  z-index: 200;
  inline-size: 46px;
  block-size: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #221A08;
  background: linear-gradient(140deg, var(--gold-300), var(--gold-500));
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity var(--dur-mid) var(--ease-out),
              visibility var(--dur-mid),
              transform var(--dur-mid) var(--ease-out);
}

.to-top.is-shown { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { transform: translateY(-3px); }

/* ==========================================================================
   04 · Hero — cinematic, image-based, zero video
   Layer order (bottom → top):
     1. .hero__media   high-resolution landscape plate, slow drift
     2. .hero__scrim   graded scrim so type clears WCAG AA over any pixel
     3. .hero__sweep   ambient gold / sand light passes
     4. .hero__grain   fine film grain
     5. .hero__vignette corner falloff
     6. content + glassmorphism credential cards
   ========================================================================== */

.hero {
  position: relative;
  min-block-size: 100svh;
  display: flex;
  align-items: flex-end;
  padding-block: calc(var(--header-h) + clamp(3rem, 2rem + 6vw, 7rem)) clamp(2.6rem, 1.6rem + 4vw, 5rem);
  overflow: hidden;
  isolation: isolate;
  background: var(--night-900);
}

/* 1 — plate ---------------------------------------------------------------- */
.hero__media {
  position: absolute;
  inset: -3%;
  z-index: 0;
}

.hero__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 58%;
  animation: hero-drift 34s var(--ease-soft) infinite alternate;
}

@keyframes hero-drift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.4%, -1.6%, 0); }
}

/* 2 — scrim ---------------------------------------------------------------- */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(6, 9, 13, 0.78) 0%, rgba(6, 9, 13, 0.34) 34%, rgba(6, 9, 13, 0.6) 68%, rgba(6, 9, 13, 0.95) 100%),
    linear-gradient(var(--hero-side, 100deg), rgba(6, 9, 13, 0.82) 0%, rgba(6, 9, 13, 0.42) 46%, rgba(6, 9, 13, 0.06) 78%);
  pointer-events: none;
}

html[dir='rtl'] .hero__scrim { --hero-side: 260deg; }

/* 3 — ambient light sweeps ------------------------------------------------- */
.hero__sweep {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
}

.hero__sweep span {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
}

/* warm gold pass */
.hero__sweep span:nth-child(1) {
  inline-size: 62vmax;
  block-size: 38vmax;
  inset-block-start: -14%;
  inset-inline-start: -12%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.42), transparent 66%);
  animation: sweep-a 19s var(--ease-soft) infinite alternate;
}

/* sand haze pass */
.hero__sweep span:nth-child(2) {
  inline-size: 54vmax;
  block-size: 30vmax;
  inset-block-end: -10%;
  inset-inline-end: -14%;
  background: radial-gradient(circle, rgba(232, 223, 213, 0.3), transparent 68%);
  animation: sweep-b 24s var(--ease-soft) infinite alternate;
}

/* terracotta ember */
.hero__sweep span:nth-child(3) {
  inline-size: 34vmax;
  block-size: 22vmax;
  inset-block-end: 22%;
  inset-inline-start: 32%;
  background: radial-gradient(circle, rgba(200, 109, 81, 0.3), transparent 70%);
  animation: sweep-c 29s var(--ease-soft) infinite alternate;
}

@keyframes sweep-a {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: 0.34; }
  to   { transform: translate3d(16vw, 8vh, 0) scale(1.22); opacity: 0.62; }
}
@keyframes sweep-b {
  from { transform: translate3d(0, 0, 0) scale(1.1); opacity: 0.2; }
  to   { transform: translate3d(-13vw, -8vh, 0) scale(1); opacity: 0.42; }
}
@keyframes sweep-c {
  from { transform: translate3d(0, 0, 0); opacity: 0.16; }
  to   { transform: translate3d(-9vw, -12vh, 0); opacity: 0.4; }
}

/* A slim gold beam that traverses the plate once every cycle */
.hero__beam {
  position: absolute;
  inset-block: -40%;
  inline-size: 34vw;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(247, 236, 210, 0.16) 44%, rgba(212, 175, 55, 0.2) 52%, transparent);
  filter: blur(24px);
  transform: rotate(9deg) translateX(-60vw);
  animation: beam-pass 16s var(--ease-soft) infinite;
}

@keyframes beam-pass {
  0%, 62%  { transform: rotate(9deg) translateX(-70vw); opacity: 0; }
  70%      { opacity: 1; }
  100%     { transform: rotate(9deg) translateX(120vw); opacity: 0; }
}

/* 4 — grain ---------------------------------------------------------------- */
.hero__grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

/* 5 — vignette ------------------------------------------------------------- */
.hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(120% 88% at 50% 42%, transparent 44%, rgba(4, 7, 10, 0.72) 100%);
}

/* 6 — content -------------------------------------------------------------- */
.hero__inner {
  position: relative;
  z-index: 6;
  inline-size: min(100% - (var(--gutter) * 2), var(--max-width));
  margin-inline: auto;
}

.hero__copy { max-inline-size: 74ch; }
.hero h1 { max-inline-size: 20ch; }
html[lang='ar'] .hero h1 { max-inline-size: 24ch; }

.hero .kicker {
  color: var(--gold-300);
  margin-block-end: 1.1rem;
}

.hero .kicker::before { background: linear-gradient(90deg, transparent, var(--gold-300)); }

.hero h1 {
  color: #FFFFFF;
  text-shadow: 0 6px 40px rgba(0, 0, 0, 0.55);
  margin-block-end: 0.2em;
}

.hero h1 .gold-text {
  background: linear-gradient(100deg, var(--gold-100), var(--gold-300) 42%, var(--gold-500));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* The company name and its dash stay together — a line break between them
   would strand a neutral character at the start of a line, which reads wrong
   in RTL. Both are short in all three languages, so nowrap is safe. */
.h1-lead { white-space: nowrap; }

.h1-dash {
  color: var(--gold-400);
  font-weight: 300;
  padding-inline: 0.28em 0;
}

.hero__divider {
  inline-size: 128px;
  block-size: 2px;
  margin-block: 1.5rem;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--gold-300), rgba(212, 175, 55, 0));
}

.hero__sub {
  font-size: clamp(1.08rem, 0.94rem + 0.7vw, 1.42rem);
  font-weight: 600;
  color: var(--gold-200);
  letter-spacing: 0.012em;
  margin-block-end: 1.2rem;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.6);
}

.hero__body {
  color: rgba(255, 255, 255, 0.93);
  font-size: var(--fs-lead);
  line-height: 1.82;
  max-inline-size: 62ch;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.62);
}

.hero__body + .hero__body { margin-block-start: 0.85em; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-block-start: clamp(1.9rem, 1.2rem + 1.8vw, 2.8rem);
}

/* Glass credential cards --------------------------------------------------- */
.hero__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 0.9rem;
  margin-block-start: clamp(2.6rem, 1.6rem + 3.4vw, 4.4rem);
}

.hero-card {
  padding: 1.35rem 1.45rem;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 24px 54px -34px rgba(0, 0, 0, 0.9);
  transition: transform var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid) var(--ease-soft),
              background-color var(--dur-mid) var(--ease-soft);
}

.hero-card:hover {
  transform: translateY(-4px);
  border-color: rgba(212, 175, 55, 0.5);
  background: rgba(255, 255, 255, 0.11);
}

.hero-card__k {
  display: block;
  /* was: font-family: var(--font-display);
     Two of the three hero cards are wordmarks ("AlUla", "FR · SA") but the
     third is "360°", and a gradient-clipped Cormorant 3 and 6 read as the same
     shape. All three move together so the row stays one typographic voice. */
  font-family: var(--font-num);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.1;
  direction: ltr;
  unicode-bidi: isolate;
  background: linear-gradient(100deg, var(--gold-100), var(--gold-400));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

html[dir='rtl'] .hero-card__k { text-align: start; }

.hero-card__t {
  display: block;
  margin-block-start: 0.4rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
}

/* Scroll cue --------------------------------------------------------------- */
.hero__cue {
  position: absolute;
  inset-block-end: 1.1rem;
  inset-inline-end: var(--gutter);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.hero__cue i {
  display: block;
  inline-size: 1px;
  block-size: 46px;
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.9), transparent);
  animation: cue-pulse 2.4s var(--ease-soft) infinite;
}

@keyframes cue-pulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.6); transform-origin: top; }
  50%      { opacity: 1;   transform: scaleY(1);   transform-origin: top; }
}

@media (max-width: 900px) {
  .hero__cue { display: none; }
  .hero { align-items: center; min-block-size: auto; padding-block-end: clamp(3rem, 2rem + 5vw, 5rem); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__media img,
  .hero__sweep span,
  .hero__beam,
  .hero__cue i { animation: none !important; }
  .hero__media img { transform: scale(1.06); }
  .hero__beam { opacity: 0; }
}

/* ==========================================================================
   05 · Sections
   Every media slot is a .frame — fixed ratio, object-fit cover, no overlay
   icons, no badges stacked on top of imagery.
   ========================================================================== */

/* --------------------------------------------------------------------------
   About — editorial collage + executive credential strip
   -------------------------------------------------------------------------- */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 1.2rem + 3vw, 4.5rem);
  align-items: center;
}

.about__media {
  position: relative;
  padding-block-end: clamp(2.6rem, 1.5rem + 4vw, 5rem);
  padding-inline-end: clamp(2rem, 1rem + 3.4vw, 4.2rem);
}

.about__media .frame--lead {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}

.about__media .frame--inset {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  inline-size: clamp(140px, 42%, 250px);
  border-radius: var(--r-md);
  border: 6px solid var(--bg);
  box-shadow: var(--shadow-lg);
}

.about__stamp {
  position: absolute;
  inset-block-start: clamp(-14px, -1vw, -8px);
  inset-inline-start: clamp(-10px, -1vw, -6px);
  z-index: 3;
  padding: 0.7rem 1.15rem;
  border-radius: var(--r-pill);
  background: var(--accent-grad);
  color: #FFF6E2;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: var(--shadow-md);
  /* No `direction` here: inset-inline-* on an absolutely positioned element
     resolves against the element's OWN direction, so forcing ltr would pin the
     stamp to the wrong corner on the Arabic page. */
}

html[lang='ar'] .about__stamp { letter-spacing: 0; text-transform: none; font-size: 0.78rem; }

.about__body p { font-size: var(--fs-lead); }

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: 1.9rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.52rem 1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-gold);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.79rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.pill svg { flex: none; color: var(--accent); }

/* Executive credential strip ------------------------------------------------ */
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 1px;
  margin-block-start: clamp(3rem, 2rem + 3vw, 5rem);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.metric {
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem) clamp(1.2rem, 0.9rem + 1vw, 1.8rem);
  background: var(--surface);
  text-align: center;
}

.metric__k {
  display: block;
  /* was: font-family: var(--font-display);
     Cormorant's 3 / 5 / 6 are near-indistinguishable at counter size once the
     gold gradient is clipped through them. Kept here rather than dropped so the
     previous setting stays on the record. */
  font-family: var(--font-num);
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.9rem);
  /* Inter reads lighter than Cormorant at equal weight — 700 holds the counter
     at the visual weight the design was signed off at. */
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.05;
  direction: ltr;
  unicode-bidi: isolate;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.metric__t {
  display: block;
  margin-block-start: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   Parallax band
   -------------------------------------------------------------------------- */
.band {
  position: relative;
  min-block-size: clamp(340px, 46vh, 520px);
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--night-900);
}

.band__media { position: absolute; inset: 0; z-index: 0; }

.band__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center 55%;
  transform: scale(1.12);
  will-change: transform;
}

.band::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(6, 9, 13, 0.82), rgba(6, 9, 13, 0.52) 42%, rgba(6, 9, 13, 0.88));
}

.band__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: var(--gutter);
  inline-size: min(100% - (var(--gutter) * 2), 72ch);
}

.band__quote {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.05rem + 1.9vw, 2.5rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.42;
  color: #FFFFFF;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
}

html[lang='ar'] .band__quote { font-family: var(--font-ar); font-style: normal; font-weight: 700; }

.band__cite {
  display: block;
  margin-block-start: 1.2rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-300);
  direction: ltr;
  unicode-bidi: isolate;
}

html[lang='ar'] .band__cite { letter-spacing: 0.05em; text-transform: none; font-size: 0.9rem; }

/* --------------------------------------------------------------------------
   Story — two chapters
   -------------------------------------------------------------------------- */
.story__chapter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 1rem + 3vw, 4rem);
  align-items: center;
}

.story__chapter + .story__chapter { margin-block-start: clamp(3rem, 2rem + 3vw, 5.2rem); }
.story__chapter:nth-child(even) .story__media { order: 2; }

.story__media .frame {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}

/* .story__no removed — chapter numerals are no longer printed on the cards. */

.story__body h3 { margin-block-end: 0.85rem; }

/* --------------------------------------------------------------------------
   Services — 4 pillars
   -------------------------------------------------------------------------- */
.services {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.3rem, 0.8rem + 1.8vw, 2.2rem);
}

/* Four pillars read best as a 2 x 2 block — a 3 + 1 wrap leaves an orphan. */
@media (min-width: 860px) {
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.service {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: transform var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid) var(--ease-soft);
}

.service:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--line-gold);
}

.service > .frame { border-radius: 0; }
.service > .frame::after { border-radius: 0; border-inline: 0; border-block-start: 0; }
.service:hover > .frame > img { transform: scale(1.055); }

.service__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem);
}

/* .service__no removed — the numbered gold disc no longer sits on the cards. */

.service h3 { margin-block-end: 0.75rem; }
.service__desc { margin-block-end: 1.35rem; }

.service__list {
  display: grid;
  gap: 0.6rem;
  margin-block-start: auto;
  padding-block-start: 1.35rem;
  border-block-start: 1px solid var(--line);
}

.service__list li {
  position: relative;
  padding-inline-start: 1.7rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.service__list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.55em;
  inline-size: 8px;
  block-size: 8px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: var(--accent-bright);
}

/* --------------------------------------------------------------------------
   Sectors — 4 interactive tiles
   (6 authored; "Workshops & Institutional Programs" and "Investment &
   International Collaboration" are commented out of the markup — Aug 30 2026)
   -------------------------------------------------------------------------- */
.sectors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.1rem, 0.7rem + 1.4vw, 1.8rem);
}

.sector {
  position: relative;
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  background: var(--night-800);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
}

.sector:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.sector__media { aspect-ratio: 4 / 3; }

.sector__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}

.sector:hover .sector__media img { transform: scale(1.07); }

.sector__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(6, 9, 13, 0.12) 0%, rgba(6, 9, 13, 0.52) 46%, rgba(6, 9, 13, 0.93) 100%);
  transition: background var(--dur-mid) var(--ease-soft);
  pointer-events: none;
}

.sector:hover .sector__veil {
  background: linear-gradient(180deg, rgba(6, 9, 13, 0.24) 0%, rgba(6, 9, 13, 0.62) 42%, rgba(6, 9, 13, 0.96) 100%);
}

.sector__body {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 2;
  padding: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
}

.sector__body h3 { color: #FFFFFF; font-size: 1.16rem; }
.sector__body .card-kicker { color: var(--gold-300); }

.sector__body p {
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.88rem;
  line-height: 1.65;
  margin-block-start: 0.55rem;
  max-block-size: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-block-size 520ms var(--ease-out), opacity 380ms var(--ease-soft), margin var(--dur-mid);
}

.sector:hover .sector__body p,
.sector:focus-within .sector__body p { max-block-size: 12rem; opacity: 1; }

.sector__line {
  inline-size: 40px;
  block-size: 2px;
  margin-block-start: 0.9rem;
  border-radius: var(--r-pill);
  background: var(--gold-400);
  transition: inline-size var(--dur-mid) var(--ease-out);
}

.sector:hover .sector__line { inline-size: 84px; }

@media (hover: none) {
  .sector__body p { max-block-size: 12rem; opacity: 1; }
}

/* --------------------------------------------------------------------------
   Why DIWAN — 4 strengths
   (6 authored; "International Background" and "Institutional Precision" are
   commented out of the markup — Aug 30 2026)
   -------------------------------------------------------------------------- */
.strengths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(1.1rem, 0.7rem + 1.4vw, 1.9rem);
}

/* --------------------------------------------------------------------------
   Four-card grids after the Aug 30 2026 edit
   --------------------------------------------------------------------------
   Both grids above were authored for six cards, where auto-fit lands on three
   columns at desktop width and fills two clean rows. With four cards that same
   auto-fit still resolves to three columns — 3 + 1 — and the fourth card is
   left alone on a half-empty row with a column-wide hole beside it. That hole
   is the "broken grid gap" in the brief.

   Pinning two columns from the point where a second column can hold its card
   at a sensible measure gives 2 x 2: both rows full, no orphan, and the tiles
   keep roughly the width they had at three-up so the photo crops are unchanged.

   Left as auto-fit below this width, where it correctly collapses to one
   column. If a hidden card is ever restored, delete this block and six cards
   flow back into three columns on their own.
   -------------------------------------------------------------------------- */
@media (min-width: 860px) {
  .sectors,
  .strengths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.strength {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid) var(--ease-soft),
              box-shadow var(--dur-mid) var(--ease-out);
}

.strength:hover {
  transform: translateY(-5px);
  border-color: var(--line-gold);
  box-shadow: var(--shadow-lg);
}

.strength > .frame { border-radius: 0; }
.strength > .frame::after { border-radius: 0; border-inline: 0; border-block-start: 0; }
.strength:hover > .frame > img { transform: scale(1.06); }

.strength__body { padding: clamp(1.35rem, 1rem + 1vw, 1.9rem); }

.strength__icon {
  display: inline-grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  margin-block-end: 1rem;
  border-radius: var(--r-sm);
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--line-gold);
}

.strength h3 { font-size: 1.1rem; margin-block-end: 0.55rem; }
.strength p { font-size: 0.92rem; }

/* --------------------------------------------------------------------------
   How We Work — 4-step roadmap
   (5 authored; "Stakeholder Coordination" is commented out of the markup —
   Aug 30 2026)
   -------------------------------------------------------------------------- */
.roadmap { position: relative; }

/* The dashed connector is a single absolutely-positioned rule behind the row,
   so its ends have to be parked on the centres of the first and last step
   discs by hand — the line knows nothing about the grid.

   With N equal columns, the first centre sits at 100%/(2N) and the last at
   100% - 100%/(2N), so the inset that reaches exactly from one to the other is
   100%/(2N):  5 steps -> 10%,  4 steps -> 12.5%.

   Leaving it at the old 10% with four steps is what produced the trailing
   artefact in the brief: the line over-ran both outer discs by ~2.5% of the
   row and died in open space. calc(100% / 8) is written out rather than
   flattened to 12.5% so the arithmetic stays visible if the step count moves
   again. */
.roadmap__track {
  display: none;
  position: absolute;
  z-index: 0;
  inset-inline: calc(100% / 8);   /* was 10% — correct for 5 steps, not 4 */
  inset-block-start: 69px;
  block-size: 2px;
  background: repeating-linear-gradient(90deg, var(--line-gold) 0 10px, transparent 10px 20px);
}

.roadmap__steps {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(1.1rem, 0.7rem + 1.4vw, 1.8rem);
}

/* Four steps must never sit 3 + 1. Measured in Chromium, auto-fit reaches three
   columns at 768px and only gets to four at ~1023px, so that whole tablet band
   would strand the last step alone beside a column-wide hole — the same defect
   as the six-card grids above, one breakpoint lower. Pinning two columns turns
   it into a 2 x 2 block, which also matches how Sectors and Why now read at the
   same width. Below 768px auto-fit already gives two columns, then one. */
@media (min-width: 768px) and (max-width: 1022px) {
  .roadmap__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The connector only makes sense when every step sits on one row, so it and the
   fixed column count are switched on together — a mismatch between them is
   exactly how a line ends up pointing at nothing. Held at 1180px rather than
   dropped to ~1023px where four columns first fit: at 1023 the four 220px
   minimums plus their gaps clear the container by about 5px, and a forced
   four-column track has no slack to absorb a scrollbar or a zoom step. Between
   1023 and 1180 auto-fit puts the four steps on one row anyway, just without
   the dashed rule behind them. */
@media (min-width: 1180px) {
  .roadmap__track { display: block; }
  .roadmap__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 0.4rem;
  cursor: default;
}

.step__disc {
  position: relative;
  inline-size: 132px;
  block-size: 132px;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  border: 3px solid var(--bg);
  outline: 1px solid var(--line-gold);
  box-shadow: var(--shadow-md);
  background: var(--surface-sunk);
  transition: transform var(--dur-mid) var(--ease-out), outline-color var(--dur-mid);
}

.step:hover .step__disc,
.step:focus-within .step__disc { transform: translateY(-5px) scale(1.04); outline-color: var(--gold-400); }

.step__disc img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}

.step:hover .step__disc img { transform: scale(1.09); }

/* .step__no removed — nothing is layered over the roadmap image discs; the
   photograph now fills the circle edge to edge. */

.step__body { margin-block-start: 1.15rem; }
.step h3 { font-size: 1.03rem; margin-block-end: 0.5rem; }
.step p { font-size: 0.88rem; line-height: 1.65; }

@media (max-width: 900px) {
  .roadmap__track { display: none; }
}

/* --------------------------------------------------------------------------
   Selected Experience
   -------------------------------------------------------------------------- */
.experience__lead {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 1rem + 3vw, 3.6rem);
  align-items: center;
  margin-block-end: clamp(2.4rem, 1.6rem + 2.6vw, 3.8rem);
}

.experience__lead .frame {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}

.note {
  margin-block-start: 1.6rem;
  padding: 1.1rem 1.35rem;
  border-radius: var(--r-md);
  border-inline-start: 3px solid var(--accent-bright);
  background: var(--accent-soft);
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

.cases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(1.1rem, 0.7rem + 1.4vw, 1.8rem);
}

.case {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
}

.case:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.case > .frame { border-radius: 0; }
.case > .frame::after { border-radius: 0; border-inline: 0; border-block-start: 0; }
.case:hover > .frame > img { transform: scale(1.06); }
.case__body { padding: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); }
.case h3 { font-size: 1.02rem; margin-block-end: 0.5rem; }
.case p { font-size: 0.88rem; }

/* --------------------------------------------------------------------------
   Collaborations · الشركاء والجهات

   Client direction, Aug 17 2026: LOGO AND NAME ONLY. The place tag, the
   official French long form and the scope line are gone. With five paragraphs
   of supporting copy removed, the institutional marks have to carry the
   section on their own — so the logo plate roughly doubles in height and
   becomes the subject of the card rather than a badge above the text.

   Motion is split across two elements on purpose, because one element cannot
   run a keyframe transform and a hover transform at the same time without one
   clobbering the other:
       .partner__logo      -> the hover lift and scale (transition)
       .partner__logo img  -> the idle float          (animation)
   Nested, they compose instead of fighting. Both are disabled under
   prefers-reduced-motion.

   Five items never divide cleanly into an auto-fit grid — three columns leaves
   a two-card orphan row. A six-track grid fixes it: cards 1-3 span two tracks
   (a full row of three), cards 4-5 span three (a full row of two). Both rows
   are complete at every desktop width.
   -------------------------------------------------------------------------- */
.partners {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 0.7rem + 1.2vw, 1.6rem);
  margin-block-start: clamp(1.6rem, 1rem + 2vw, 2.8rem);
}

.partner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 0.85rem + 0.6vw, 1.5rem);
  padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem) clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid);
}

.partner:hover,
.partner:focus-within {
  transform: translateY(-4px);
  border-color: var(--line-gold);
  box-shadow: var(--shadow-lg);
}

/* Gold hairline along the leading edge — grows on hover. Logical inset so it
   flips to the right-hand edge on the Arabic page without a second rule. */
.partner__rule {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 3px;
  block-size: 34%;
  background: var(--accent-grad);
  transition: block-size var(--dur-mid) var(--ease-out);
}

.partner:hover .partner__rule,
.partner:focus-within .partner__rule { block-size: 100%; }

/* A wash of gold that only exists on hover. Behind the content, so the mark
   never sits on a tinted rectangle — the glow reads as light in the card, not
   as a second surface. */
.partner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(120% 90% at 50% 0%,
              rgba(176, 141, 87, 0.13), transparent 62%);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out);
  pointer-events: none;
}

.partner:hover::before,
.partner:focus-within::before { opacity: 1; }

/* Logo plate.

   The plate stays light in BOTH themes on purpose. Institutional logos are
   almost always supplied as dark-on-transparent, so a plate that followed the
   dark theme would swallow them. A fixed light panel means any official asset
   the client drops in stays legible without per-logo overrides.

   The box is a fixed height with `object-fit: contain`, so a wide wordmark and
   a square crest both sit on the same optical baseline across the row — no
   logo can shove its card taller than its neighbours. The five marks in use
   run from 232x182 to 1200x675, which is exactly why this is not negotiable. */
.partner__logo {
  position: relative;
  z-index: 1;
  inline-size: 100%;
  block-size: clamp(355px, 82px + 7.5vw, 189px);
  padding: 0.45rem 0.6rem;
  border-radius: var(--r-sm, 10px);
  /* Flat #FFF, not a tint or a gradient. The supplied marks are flattened onto
     white by normalize_logos.py, so any colour in the plate would show as a
     hard seam around the letterboxed edge of every logo. The breathing room
     that used to come from plate padding is baked into the shared logo canvas
     instead, where it can be equalised across all five. */
  background: #FFFFFF;
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
              0 1px 2px rgba(18, 24, 31, 0.04);
  overflow: hidden;   /* last-resort guard: no logo may escape its plate */
  transition: transform 480ms var(--ease-out),
              box-shadow 480ms var(--ease-out),
              border-color var(--dur-mid);
}

.partner:hover .partner__logo,
.partner:focus-within .partner__logo {
  transform: scale(1.055) translateY(-2px);
  border-color: var(--line-gold);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95),
              0 14px 30px -12px rgba(176, 141, 87, 0.45);
}

/* The box fills the plate and `contain` letterboxes the artwork inside it.

   The obvious version of this — `max-block-size: 100%` with `block-size: auto` —
   does NOT hold a replaced element back reliably: the intrinsic width wins, the
   image renders at full height and spills over the card text below. Giving the
   box a definite 100% x 100% and letting object-fit do the fitting is the only
   form that behaves for every aspect ratio, so a tall crest and a wide wordmark
   both sit correctly without per-logo overrides. */
.partner__logo img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;      /* a mark is never cropped or stretched */
  object-position: center;
  animation: partner-float 7s ease-in-out infinite;
  will-change: transform;
}

/* Deliberately tiny — 5px over 7s. Enough that the wall of marks is alive
   rather than pinned to a grid; not so much that it reads as a bug. The
   per-card delays keep the five from bobbing in unison. */
@keyframes partner-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -5px, 0); }
}

.partner:nth-child(1) .partner__logo img { animation-delay: 0s; }
.partner:nth-child(2) .partner__logo img { animation-delay: 0.9s; }
.partner:nth-child(3) .partner__logo img { animation-delay: 1.8s; }
.partner:nth-child(4) .partner__logo img { animation-delay: 2.6s; }
.partner:nth-child(5) .partner__logo img { animation-delay: 3.4s; }

.partner__name {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 0.85vw, 1.85rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0;
  transition: color var(--dur-mid) var(--ease-out);
}

.partner:hover .partner__name,
.partner:focus-within .partner__name { color: var(--accent); }

/* Motion off: the marks hold still and the plate stops scaling. The gold glow,
   the hairline and the colour shift stay, so hover still gives feedback. */
@media (prefers-reduced-motion: reduce) {
  .partner__logo img { animation: none; }
  .partner:hover .partner__logo,
  .partner:focus-within .partner__logo { transform: none; }
  .partner:hover,
  .partner:focus-within { transform: none; }
}

@media (min-width: 640px) {
  .partners { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Odd one out spans the pair so no half-width card is left stranded. */
  .partner:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .partners { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .partner:nth-child(1),
  .partner:nth-child(2),
  .partner:nth-child(3) { grid-column: span 2; }
  .partner:nth-child(4),
  .partner:nth-child(5) { grid-column: span 3; }
  /* Reset the 640px stranding rule — the six-track grid already balances. */
  .partner:last-child:nth-child(odd) { grid-column: span 3; }
}

/* --------------------------------------------------------------------------
   Mission · Vision · Values
   -------------------------------------------------------------------------- */
.mv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(1.3rem, 0.8rem + 1.8vw, 2.2rem);
}

.mv__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-block-size: 400px;
  padding: clamp(1.6rem, 1.2rem + 1.4vw, 2.6rem);
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  background: var(--night-800);
  box-shadow: var(--shadow-lg);
}

.mv__media { position: absolute; inset: 0; z-index: 0; }

.mv__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 1100ms var(--ease-out);
}

.mv__card:hover .mv__media img { transform: scale(1.06); }

.mv__card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(6, 9, 13, 0.14) 0%, rgba(6, 9, 13, 0.5) 42%, rgba(6, 9, 13, 0.93) 100%);
}

.mv__body { position: relative; z-index: 2; }
.mv__body h3 { color: #FFFFFF; font-size: 1.45rem; margin-block-end: 0.8rem; }
.mv__body p { color: rgba(255, 255, 255, 0.9); }
.mv__body .card-kicker { color: var(--gold-300); }

.values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(1rem, 0.7rem + 1.2vw, 1.6rem);
  margin-block-start: clamp(1.8rem, 1.2rem + 2vw, 2.8rem);
}

.value {
  padding: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-mid) var(--ease-out), border-color var(--dur-mid);
}

.value:hover { transform: translateY(-4px); border-color: var(--line-gold); }

.value__icon {
  display: inline-grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  margin-block-end: 0.9rem;
  border-radius: var(--r-sm);
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--line-gold);
}

.value h3 { font-size: 1.02rem; margin-block-end: 0.45rem; }
.value p { font-size: 0.88rem; }

/* --------------------------------------------------------------------------
   Contact portal
   -------------------------------------------------------------------------- */
.contact { position: relative; isolation: isolate; background: var(--night-900); }

.contact__media { position: absolute; inset: 0; z-index: 0; }

.contact__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center 60%;
}

.contact::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(6, 9, 13, 0.86) 0%, rgba(6, 9, 13, 0.62) 42%, rgba(6, 9, 13, 0.92) 100%);
}

.contact > .container { position: relative; z-index: 2; }

/* Centred, form-free contact. One column, max-width capped so the block stays
   a compact card of information rather than a full-bleed banner. */
.contact__direct {
  max-inline-size: 62rem;
  margin-inline: auto;
  text-align: center;
}

.contact__direct .kicker { color: var(--gold-300); }
.contact__direct h2 { color: #FFFFFF; }
.contact__direct .rule { margin-inline: auto; }

.contact__sub {
  margin-block-start: 0.9rem;
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.74);
}

/* ---- WhatsApp / email --------------------------------------------------- */
.reach-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
  gap: clamp(0.85rem, 0.6rem + 1vw, 1.3rem);
  margin-block-start: clamp(1.9rem, 1.4rem + 1.6vw, 2.9rem);
}

.reach {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: clamp(1rem, 0.85rem + 0.5vw, 1.25rem) clamp(1.1rem, 0.9rem + 0.7vw, 1.5rem);
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  text-align: start;
  text-decoration: none;
  transition: transform var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid), background var(--dur-mid);
}

.reach:hover,
.reach:focus-visible {
  transform: translateY(-3px);
  border-color: var(--gold-400);
  background: rgba(255, 255, 255, 0.11);
}

.reach__icon {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  border-radius: 50%;
  color: var(--night-900);
  background: var(--accent-grad);
}

.reach__text { display: grid; gap: 0.2rem; min-inline-size: 0; }

.reach__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-300);
}

.reach__value {
  /* was: font-family: var(--font-display);
     This span holds the WhatsApp number. A phone number is read digit by digit
     off a screen and then typed — it is the one string on the page that cannot
     afford a decorative serif. Extra tracking for the same reason. */
  font-family: var(--font-num);
  font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.24rem);
  font-weight: 600;
  letter-spacing: 0.012em;
  color: #FFFFFF;
  overflow-wrap: anywhere;
}

/* ---- Social bar --------------------------------------------------------- */
.socials { margin-block-start: clamp(1.7rem, 1.3rem + 1.2vw, 2.4rem); }

.socials ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  transition: transform var(--dur-fast, 180ms) var(--ease-out),
              color var(--dur-mid), border-color var(--dur-mid),
              background var(--dur-mid);
}

.social:hover,
.social:focus-visible {
  transform: translateY(-3px);
  color: var(--night-900);
  border-color: transparent;
  background: var(--accent-grad);
}

/* ---- Quiet meta row ----------------------------------------------------- */
.contact__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.85rem;
  margin-block-start: clamp(2rem, 1.5rem + 1.6vw, 3rem);
  padding-block-start: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem);
  border-block-start: 1px solid rgba(255, 255, 255, 0.14);
  text-align: start;
}

.fact {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1rem 1.2rem;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.fact svg { flex: none; color: var(--gold-300); margin-block-start: 2px; }
.fact b { display: block; color: #FFFFFF; font-size: 0.92rem; }
.fact span { display: block; color: rgba(255, 255, 255, 0.76); font-size: 0.84rem; line-height: 1.55; }

/* ==========================================================================
   06 · Responsive + directional refinements
   ========================================================================== */

@media (max-width: 1100px) {
  :root { --header-h: 74px; }

  .about__grid,
  .story__chapter,
  .experience__lead { grid-template-columns: minmax(0, 1fr); }

  .story__chapter:nth-child(even) .story__media { order: 0; }

  .about__media {
    padding-block-end: clamp(2.2rem, 1.4rem + 3vw, 3.4rem);
    padding-inline-end: clamp(1.6rem, 1rem + 2.6vw, 3rem);
  }

  .mv__card { min-block-size: 340px; }
}

@media (max-width: 900px) {
  .step { padding-block-end: 0.4rem; }
  .step__disc { inline-size: 112px; block-size: 112px; }
  .roadmap__steps { gap: 2rem 1.2rem; }
}

@media (max-width: 640px) {
  :root { --lh-body: 1.78; }

  .hero { padding-block-start: calc(var(--header-h) + 2.6rem); }
  .hero__cards { grid-template-columns: 1fr; gap: 0.7rem; }
  .hero-card { padding: 1.1rem 1.25rem; }
  .hero__actions .btn { inline-size: 100%; }

  .about__media .frame--inset { inline-size: 46%; border-width: 4px; }
  .about__stamp { position: static; display: inline-block; margin-block-end: 1rem; }

  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .service__body,
  .strength__body,
  .case__body { padding: 1.35rem; }

  .reach { padding: 1rem 1.1rem; }

  .to-top { inset-block-end: 14px; inset-inline-end: 14px; inline-size: 42px; block-size: 42px; }
}

@media (max-width: 420px) {
  .metrics { grid-template-columns: minmax(0, 1fr); }
  .footer__nav { gap: 0.35rem 1rem; }
}

/* Wide screens -------------------------------------------------------------- */
@media (min-width: 1600px) {
  :root { --max-width: 1380px; }
  .hero__copy { max-inline-size: 62ch; }
}

/* --------------------------------------------------------------------------
   Direction-specific corrections
   The stylesheet is authored with logical properties, so these are limited to
   the few places where a physical value or a gradient angle must flip.
   -------------------------------------------------------------------------- */

html[dir='rtl'] .rule { background: linear-gradient(270deg, var(--accent-bright), transparent); }
html[dir='rtl'] .kicker::before { background: linear-gradient(270deg, transparent, var(--accent)); }
html[dir='rtl'] .hero .kicker::before { background: linear-gradient(270deg, transparent, var(--gold-300)); }
html[dir='rtl'] .section-head--center .kicker::after { background: linear-gradient(90deg, transparent, var(--accent)); }
html[dir='rtl'] .hero__divider { background: linear-gradient(270deg, var(--gold-300), rgba(212, 175, 55, 0)); }
html[dir='rtl'] .nav__links a::after,
html[dir='rtl'] .sector__line { /* logical inline-size already flips */ }
html[dir='rtl'] .site-footer::before { background: linear-gradient(270deg, transparent, var(--gold-500), transparent); }
html[dir='rtl'] .hero__beam { transform: rotate(-9deg) translateX(60vw); animation-name: beam-pass-rtl; }

@keyframes beam-pass-rtl {
  0%, 62%  { transform: rotate(-9deg) translateX(70vw); opacity: 0; }
  70%      { opacity: 1; }
  100%     { transform: rotate(-9deg) translateX(-120vw); opacity: 0; }
}

html[dir='rtl'] .note { border-inline-start: 3px solid var(--accent-bright); }

/* Latin numerals and codes inside Arabic copy stay LTR ---------------------- */
html[lang='ar'] .ltr,
.ltr { direction: ltr; unicode-bidi: isolate; }

/* French sets long compound words — allow hyphenation in narrow columns ----- */
html[lang='fr'] p,
html[lang='fr'] li { hyphens: auto; }

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header,
  .nav-scrim,
  .to-top,
  .progress-rail,
  .preloader,
  .hero__sweep,
  .hero__beam,
  .hero__grain,
  .hero__cue { display: none !important; }

  body { background: #FFFFFF; color: #000000; }
  .section { padding-block: 1.4rem; break-inside: avoid; }
  .frame > img { break-inside: avoid; }

  /* Nothing may print invisible because its reveal never fired. */
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   Forced-colors / high-contrast
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .btn,
  .panel,
  .glass,
  .service,
  .strength,
  .case,
  .value { border: 1px solid CanvasText; }

  .gold-text,
  .metric__k,
  .hero-card__k,
  .footer__mark,
  .preloader__mark {
    -webkit-text-fill-color: CanvasText;
    color: CanvasText;
    background: none;
  }
}