/* ==========================================================================
   Zain Consulting — Core stylesheet
   Design system, layout primitives, header, footer and shared components.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@400;500;600&family=Cairo:wght@400;600;700&display=swap');

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --navy-900: #071A31;
  --navy-800: #0C2340;
  --navy-700: #123156;
  --navy-600: #1B4271;
  --navy-500: #2A5A92;

  --gold-700: #9A7524;
  --gold-600: #B4882B;
  --gold-500: #C99B3F;
  --gold-400: #D9B366;
  --gold-200: #EFDCB0;
  --gold-100: #F8F1DF;

  /* Neutrals */
  --ink: #0C2340;
  --body: #56657D;
  --muted: #8496AC;
  --line: #E3E9F1;
  --line-soft: #EFF3F8;
  --white: #FFFFFF;
  --bg: #FFFFFF;
  --bg-alt: #F5F8FB;
  --bg-soft: #FAFCFD;
  --cream: #F8F4EA;        /* ivory panels from the brand guide */
  --cream-soft: #FBF8F1;

  /* Type */
  --font-head: 'Poppins', 'Segoe UI', Tahoma, sans-serif;
  --font-body: 'Inter', 'Segoe UI', Tahoma, sans-serif;
  --font-ar: 'Cairo', 'Tajawal', 'Segoe UI', Tahoma, sans-serif;

  /* Radii */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* Elevation */
  --sh-xs: 0 1px 2px rgba(12, 35, 64, .06);
  --sh-sm: 0 4px 14px rgba(12, 35, 64, .07);
  --sh-md: 0 10px 30px rgba(12, 35, 64, .09);
  --sh-lg: 0 22px 55px rgba(12, 35, 64, .14);
  --sh-gold: 0 10px 26px rgba(201, 155, 63, .32);

  /* Metrics */
  --container: 1220px;
  --gutter: 24px;
  --header-h: 84px;
  --section-y: 104px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-fast: .18s var(--ease);
  --t: .32s var(--ease);
  --t-slow: .6s var(--ease);
}

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* The closed nav drawer sits off-screen; clip it without creating a scroll container. */
  overflow-x: hidden;
  overflow-x: clip;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--ink);
  margin: 0 0 .6em;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.015em;
}

h1 { font-size: clamp(2.15rem, 4.4vw, 3.5rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3.1vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); }
h4 { font-size: 1.08rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--navy-600); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--gold-600); }

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

ul, ol { margin: 0 0 1.1em; padding-inline-start: 1.15em; }
li { margin-bottom: .45em; }

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

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

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

::selection { background: var(--gold-200); color: var(--navy-800); }

:focus-visible {
  outline: 3px solid var(--gold-400);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.skip-link {
  position: absolute;
  inset-inline-start: 16px;
  top: -70px;
  z-index: 2000;
  background: var(--navy-800);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--r-sm);
  transition: top var(--t);
}
.skip-link:focus { top: 16px; color: #fff; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-narrow { max-width: 880px; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: calc(var(--section-y) * .66); }
.section--alt { background: var(--bg-alt); }
.section--navy { background: var(--navy-800); color: rgba(255,255,255,.78); }
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }

.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-24 { margin-top: 24px; }
.mt-40 { margin-top: 40px; }
.mt-56 { margin-top: 56px; }

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

/* --------------------------------------------------------------------------
   4. Icons
   -------------------------------------------------------------------------- */
.icon {
  width: 1em; height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.icon--fill { fill: currentColor; stroke: none; }

/* --------------------------------------------------------------------------
   5. Section headings
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: 14px;
}
.section--navy .eyebrow,
.cta-band .eyebrow { color: var(--gold-400); }

.section-head { max-width: 720px; margin-inline: auto; margin-bottom: 56px; text-align: center; }
.section-head h2 { margin-bottom: .45em; }
.section-head p { color: var(--body); font-size: 1.02rem; margin: 0; }
.section-head--start { text-align: start; margin-inline: 0; }

.rule {
  width: 62px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-200));
  margin: 22px 0;
}
.rule--center { margin-inline: auto; }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: .93rem;
  font-weight: 500;
  line-height: 1;
  padding: 16px 26px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast),
              transform var(--t-fast), box-shadow var(--t-fast);
}
.btn .icon { width: 1.05em; height: 1.05em; transition: transform var(--t-fast); }
.btn:hover .icon { transform: translateX(4px); }
[dir="rtl"] .btn .icon { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .icon { transform: scaleX(-1) translateX(4px); }

.btn-primary { background: var(--navy-800); color: #fff; box-shadow: var(--sh-sm); }
.btn-primary:hover { background: var(--navy-700); color: #fff; transform: translateY(-2px); box-shadow: var(--sh-md); }

.btn-gold { background: var(--gold-500); color: var(--navy-900); box-shadow: var(--sh-gold); }
.btn-gold:hover { background: var(--gold-400); color: var(--navy-900); transform: translateY(-2px); }

.btn-outline { background: transparent; color: var(--navy-800); border-color: var(--line); }
.btn-outline:hover { background: var(--navy-800); color: #fff; border-color: var(--navy-800); transform: translateY(-2px); }

.btn-ghost-light { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.34); }
.btn-ghost-light:hover { background: #fff; color: var(--navy-800); border-color: #fff; transform: translateY(-2px); }

.btn-caps { text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
[dir="rtl"] .btn-caps { letter-spacing: 0; }

.btn-sm { padding: 12px 20px; font-size: .86rem; }
.btn-lg { padding: 18px 34px; font-size: 1rem; }
.btn-block { width: 100%; }

.btn-group { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-group--center { justify-content: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 500; font-size: .92rem;
  color: var(--gold-600);
}
.link-arrow .icon { transition: transform var(--t-fast); }
.link-arrow:hover { color: var(--gold-700); }
.link-arrow:hover .icon { transform: translateX(4px); }
[dir="rtl"] .link-arrow .icon { transform: scaleX(-1); }
[dir="rtl"] .link-arrow:hover .icon { transform: scaleX(-1) translateX(4px); }

/* --------------------------------------------------------------------------
   7. Brand mark
   -------------------------------------------------------------------------- */
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__mark { width: auto; height: 48px; flex: none; }
.brand--lockup { display: block; }
.brand--lockup img { width: 186px; height: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: var(--font-head); font-weight: 700; font-size: 1.06rem;
  letter-spacing: .045em; color: var(--navy-800); text-transform: uppercase;
}
.brand__tag {
  font-family: var(--font-head); font-weight: 500; font-size: .5rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-600);
  margin-top: 3px;
}
.brand--light .brand__name { color: #fff; }
.brand--light .brand__tag { color: var(--gold-400); }
.brand:hover .brand__name { color: var(--navy-700); }

/* --------------------------------------------------------------------------
   8. Site header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: #fff;
  /* No backdrop-filter here: it would make the header the containing block for the
     position: fixed mobile drawer inside it, and the drawer would open off-screen. */
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow var(--t), background var(--t);
}
.site-header.is-stuck { box-shadow: var(--sh-sm); }

.header-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: var(--header-h);
}

.nav { margin-inline-start: auto; }
.nav > .btn { display: none; }   /* drawer-only CTA, revealed in the mobile query */
.nav__list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; margin: 0; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-head);
  font-size: .93rem;
  font-weight: 500;
  color: var(--navy-800);
  padding: 12px 14px;
  border-radius: var(--r-sm);
  position: relative;
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}
.nav__link .icon { width: .8em; height: .8em; transition: transform var(--t-fast); opacity: .65; }
.nav__link::after {
  content: '';
  position: absolute;
  inset-inline: 14px;
  bottom: 4px;
  height: 2px;
  background: var(--gold-500);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t);
}
.nav__link:hover { color: var(--navy-600); }
.nav__link:hover::after,
.nav__item.is-current > .nav__link::after { transform: scaleX(1); }
.nav__item.is-current > .nav__link { color: var(--navy-800); font-weight: 600; }
.nav__item.is-open > .nav__link .icon { transform: rotate(180deg); }

/* Dropdown + mega menu */
/* Centred with a negative logical margin rather than translateX(-50%):
   percentage translations are resolved along the inline axis, so they flip
   direction under RTL and throw the panel off-screen. */
.mega {
  position: absolute;
  top: calc(100% + 14px);
  inset-inline-start: 50%;
  transform: translateY(10px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  padding: 26px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t), transform var(--t), visibility var(--t);
  z-index: 20;
}
.nav__item.is-open > .mega,
.nav__item:hover > .mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0);
}
.mega::before {
  content: '';
  position: absolute;
  top: -14px; inset-inline: 0;
  height: 14px;
}

.mega--sm { width: 300px; margin-inline-start: -150px; }
/* Centred on the viewport rather than on its nav item. Centring on the item put
   the 980px panel off the left edge once the Arabic labels moved Services close
   to the end of the bar. Fixed + auto margins centres it without a transform,
   which would not mirror under RTL. */
.mega--wide {
  position: fixed;
  top: calc(var(--header-h) + 12px);
  inset-inline: 0;
  width: min(980px, calc(100vw - 60px));
  margin-inline: auto;
}

.mega__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 22px; }

.mega__col { min-width: 0; }
.mega__head {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-weight: 600; font-size: .92rem;
  color: var(--navy-800); padding: 8px 10px; border-radius: var(--r-sm);
  margin-bottom: 4px; line-height: 1.3;
}
.mega__head .mega__icon {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  background: var(--gold-100); color: var(--gold-600);
  border-radius: var(--r-sm);
  transition: background var(--t-fast), color var(--t-fast);
}
.mega__head .mega__icon .icon { width: 17px; height: 17px; }
.mega__head:hover { background: var(--bg-alt); color: var(--navy-600); }
.mega__head:hover .mega__icon { background: var(--gold-500); color: #fff; }

.mega__links { list-style: none; margin: 0; padding: 0; }
.mega__links li { margin: 0; }
.mega__links a {
  display: block;
  font-size: .87rem;
  color: var(--body);
  padding: 7px 10px;
  border-radius: var(--r-xs);
  transition: background var(--t-fast), color var(--t-fast), padding var(--t-fast);
}
.mega__links a:hover { background: var(--bg-alt); color: var(--navy-700); padding-inline-start: 16px; }

.mega__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft);
  font-size: .86rem;
}
.mega__foot span { color: var(--muted); }

/* Header actions */
.header-actions { display: flex; align-items: center; gap: 14px; }

.lang-switch {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  overflow: hidden; background: #fff;
}
.lang-switch button {
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-head); font-size: .78rem; font-weight: 600;
  letter-spacing: .06em; color: var(--muted);
  padding: 9px 12px; transition: background var(--t-fast), color var(--t-fast);
}
.lang-switch button:hover { color: var(--navy-800); background: var(--bg-alt); }
.lang-switch button.is-active { background: var(--navy-800); color: #fff; }

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: var(--r-sm); cursor: pointer; color: var(--navy-800);
}
.nav-toggle .icon { width: 22px; height: 22px; }
.nav-toggle .icon--close { display: none; }
.nav-toggle.is-active .icon--menu { display: none; }
.nav-toggle.is-active .icon--close { display: block; }

.nav-backdrop {
  position: fixed; inset: 0;
  background: rgba(7, 26, 49, .5);
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t), visibility var(--t);
  z-index: 880;
}
.nav-backdrop.is-visible { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------------------
   9. Cards (shared)
   -------------------------------------------------------------------------- */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); border-color: transparent; }

.card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-alt); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.card:hover .card__media img { transform: scale(1.06); }

.card__body { padding: 26px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.card__title { font-size: 1.1rem; margin-bottom: .5em; }
.card__title a { color: inherit; }
.card__title a:hover { color: var(--gold-600); }
.card__text { font-size: .91rem; color: var(--body); margin-bottom: 18px; }
.card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.card-badge {
  position: absolute;
  inset-inline-start: 22px;
  bottom: -26px;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  background: #fff;
  color: var(--gold-600);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  z-index: 2;
  transition: background var(--t), color var(--t);
}
.card-badge .icon { width: 24px; height: 24px; }
.card:hover .card-badge { background: var(--gold-500); color: #fff; }

.tag {
  display: inline-flex; align-items: center;
  font-family: var(--font-head); font-size: .68rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-700); background: var(--gold-100);
  padding: 6px 12px; border-radius: var(--r-pill);
}
.tag--navy { color: var(--navy-700); background: #EAF0F7; }

/* --------------------------------------------------------------------------
   10. Page hero (inner pages)
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  background: var(--navy-800);
  color: rgba(255,255,255,.82);
  padding-block: 92px 84px;
  overflow: hidden;
  isolation: isolate;

  /* Every page banner carries the same photograph as the home page hero.
     A page can use its own by setting the variable on the section, e.g.
     <section class="page-hero" style="--page-hero-img:url('assets/img/x.jpg')"> */
  --page-hero-img: url('../img/page-banner.jpg');
  --page-hero-pos: 60% 42%;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(900px 420px at 88% 6%, rgba(201,155,63,.26), transparent 62%),
    linear-gradient(120deg, rgba(7,26,49,.95) 0%, rgba(12,35,64,.88) 52%, rgba(18,49,86,.80) 100%),
    var(--page-hero-img) var(--page-hero-pos) / cover no-repeat,
    var(--navy-800);
}
.page-hero::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 10%, transparent 78%);
  mask-image: radial-gradient(circle at 50% 40%, #000 10%, transparent 78%);
}
.page-hero h1 { color: #fff; margin-bottom: .35em; }
.page-hero__lead { font-size: 1.05rem; max-width: 680px; color: rgba(255,255,255,.78); }
.page-hero__inner { max-width: 780px; }

.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  list-style: none; margin: 0 0 20px; padding: 0;
  font-size: .82rem; color: rgba(255,255,255,.58);
}
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: 8px; }
.breadcrumb a { color: rgba(255,255,255,.78); }
.breadcrumb a:hover { color: var(--gold-400); }
.breadcrumb .sep { opacity: .45; }
[dir="rtl"] .breadcrumb .sep { transform: scaleX(-1); }

/* --------------------------------------------------------------------------
   11. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  background: var(--navy-800);
  color: rgba(255,255,255,.78);
  padding-block: 62px;
  overflow: hidden;
  isolation: isolate;
}
.cta-band::before {
  content: '';
  position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(115deg, var(--navy-900), var(--navy-700) 70%, var(--navy-600));
}
.cta-band__art {
  position: absolute;
  inset-block: 0;
  inset-inline-start: -40px;
  width: 420px;
  z-index: -1;
  opacity: .28;
  color: var(--gold-500);
  pointer-events: none;
}
[dir="rtl"] .cta-band__art { transform: scaleX(-1); }
.cta-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px;
}
.cta-band h2 { font-size: clamp(1.4rem, 2.3vw, 1.85rem); color: #fff; margin: 0; }
.cta-band p { font-size: .93rem; margin: 0; color: rgba(255,255,255,.74); }
.cta-band .btn-group { justify-content: flex-end; }

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--navy-800);
  color: rgba(255,255,255,.68);
  font-size: .9rem;
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(700px 340px at 8% 0%, rgba(201,155,63,.14), transparent 60%);
  pointer-events: none;
}
.footer-main {
  position: relative;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.15fr 1.4fr;
  gap: 40px;
  padding-block: 72px 52px;
}
.footer-about p { color: rgba(255,255,255,.62); font-size: .88rem; margin: 20px 0 22px; max-width: 300px; }

.footer-title {
  font-family: var(--font-head); font-size: .78rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: #fff;
  margin-bottom: 22px; position: relative; padding-bottom: 12px;
}
.footer-title::after {
  content: ''; position: absolute; bottom: 0; inset-inline-start: 0;
  width: 32px; height: 2px; background: var(--gold-500); border-radius: 2px;
}

.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 11px; }
.footer-links a {
  color: rgba(255,255,255,.66);
  display: inline-flex; align-items: center; gap: 8px;
  transition: color var(--t-fast);
}
.footer-links a::before {
  content: ''; width: 0; height: 1px; background: var(--gold-500);
  transition: width var(--t-fast);
}
.footer-links a:hover { color: #fff; }
.footer-links a:hover::before { width: 12px; }

.footer-contact { list-style: none; margin: 0; padding: 0; }
.footer-contact li { display: flex; gap: 12px; margin-bottom: 16px; align-items: flex-start; }
.footer-contact .icon { width: 18px; height: 18px; color: var(--gold-500); margin-top: 4px; }
.footer-contact a { color: rgba(255,255,255,.72); }
.footer-contact a:hover { color: #fff; }
.footer-contact strong {
  display: block; color: #fff; font-family: var(--font-head);
  font-size: .74rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; margin-bottom: 3px;
}
[dir="rtl"] .footer-contact strong { letter-spacing: .04em; }

/* The bridge motif lives in the bottom bar */
.footer-bridge {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  width: 100%;
  height: 150px;
  color: var(--gold-500);
  opacity: .13;
  pointer-events: none;
}

.socials { display: flex; gap: 10px; }
.socials a {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.8);
  border: 1px solid rgba(255,255,255,.12);
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.socials a:hover { background: var(--gold-500); color: var(--navy-900); transform: translateY(-3px); border-color: transparent; }
.socials .icon { width: 17px; height: 17px; }

.footer-bottom {
  position: relative;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-block: 22px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
  font-size: .83rem; color: rgba(255,255,255,.5);
}
.footer-legal { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-legal a { color: rgba(255,255,255,.6); }
.footer-legal a:hover { color: var(--gold-400); }

/* --------------------------------------------------------------------------
   13. Back to top
   -------------------------------------------------------------------------- */
.to-top {
  position: fixed;
  inset-inline-end: 26px;
  bottom: 26px;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--navy-800); color: #fff;
  border: 0; border-radius: 50%;
  box-shadow: var(--sh-md);
  cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity var(--t), transform var(--t), visibility var(--t), background var(--t-fast);
  z-index: 700;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--gold-500); color: var(--navy-900); }
.to-top .icon { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   14. Reveal animation
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   15. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  :root { --section-y: 86px; }
  .footer-main { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-contact-col { grid-column: 1 / -1; }
}

/* Seven nav items plus the CTA need tighter spacing before the drawer kicks in. */
@media (max-width: 1400px) {
  .header-inner { gap: 14px; }
  .brand__mark { height: 42px; }
  .brand__name { font-size: 1rem; }
  .nav__link { padding-inline: 9px; font-size: .875rem; }
  .nav__link::after { inset-inline: 9px; }
  .header-actions { gap: 10px; }
  .header-actions .btn { padding: 11px 15px; font-size: .78rem; }
  .lang-switch button { padding: 8px 10px; font-size: .74rem; }

  /* Arabic labels run longer than the English ones and were pushing the header
     a few pixels past the viewport between 1200 and 1400. */
  [dir="rtl"] .nav__link { padding-inline: 6px; font-size: .84rem; }
  [dir="rtl"] .nav__link::after { inset-inline: 6px; }
  [dir="rtl"] .header-actions .btn { padding: 11px 12px; }
}

@media (max-width: 1200px) {
  .nav-toggle { display: inline-flex; }
  /* Slid in and out on a logical inset rather than translateX(105%): a
     percentage translate is resolved along the inline axis, so its direction
     is not dependable once the document flips to RTL. */
  .nav {
    position: fixed;
    top: 0;
    inset-inline-end: calc((min(400px, 88vw) + 40px) * -1);
    width: min(400px, 88vw);
    height: 100dvh;
    background: #fff;
    box-shadow: -18px 0 46px rgba(12,35,64,.16);
    padding: 26px 22px 60px;
    overflow-y: auto;
    transition: inset-inline-end var(--t);
    z-index: 890;
    margin-inline-start: 0;
  }
  [dir="rtl"] .nav { box-shadow: 18px 0 46px rgba(12,35,64,.16); }
  .nav.is-open { inset-inline-end: 0; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 2px; margin-top: 46px; }
  .nav__link { justify-content: space-between; width: 100%; padding: 14px 12px; font-size: 1rem; border-bottom: 1px solid var(--line-soft); border-radius: 0; }
  .nav__link::after { display: none; }
  .nav__item.is-current > .nav__link { color: var(--gold-600); }

  .mega,
  .mega--wide {
    position: static;
    transform: none !important;
    width: auto !important;
    margin-inline: 0 !important;
    inset-inline: auto !important;
    top: auto;
    opacity: 1; visibility: visible; pointer-events: auto;
    box-shadow: none; border: 0; border-radius: 0;
    padding: 4px 0 10px;
    display: none;
    background: var(--bg-alt);
  }
  .nav__item.is-open > .mega { display: block; }
  .nav__item:hover > .mega { display: none; }
  .nav__item.is-open:hover > .mega { display: block; }
  .mega__grid { grid-template-columns: 1fr; gap: 4px; }
  .mega__head { background: transparent; padding: 12px 14px 6px; }
  .mega__links a { padding-inline-start: 56px; }
  .mega__foot { display: none; }

  .header-actions .btn { display: none; }
  .nav > .btn { display: inline-flex; width: 100%; margin-top: 22px; }
}

@media (max-width: 900px) {
  :root { --section-y: 72px; --header-h: 74px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .cta-band__inner { grid-template-columns: 1fr; text-align: center; gap: 22px; }
  .cta-band .btn-group { justify-content: center; }
  .cta-band__art { display: none; }
  .footer-main { grid-template-columns: repeat(2, 1fr); gap: 34px; }
}

@media (max-width: 620px) {
  :root { --gutter: 18px; --section-y: 60px; }
  body { font-size: 15.5px; }
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .section-head { margin-bottom: 40px; }
  .footer-main { grid-template-columns: 1fr; padding-block: 52px 40px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .btn { width: 100%; }
  .btn-group { flex-direction: column; }
  .to-top { inset-inline-end: 16px; bottom: 16px; }
}

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

@media print {
  .site-header, .site-footer, .to-top, .cta-band, .nav-backdrop { display: none !important; }
  body { color: #000; }
}

/* --------------------------------------------------------------------------
   16. Long-form bilingual blocks
   Articles and legal pages carry both languages inline instead of using the
   key/value dictionary — the prose is too long to keep in a JS file.
   -------------------------------------------------------------------------- */
html[lang="en"] .lang-ar,
html[lang="ar"] .lang-en { display: none; }