* { margin: 0; padding: 0; box-sizing: border-box; }

/* ============================================================
   TAJ WAQAR — BRAND & DESIGN SYSTEM
   Tourism Investment
   ------------------------------------------------------------
   Visual register: editorial, established, unhurried — the
   register of a prospectus, not a pitch deck. Deep teal (the
   land, the sea) + warm gold (the return) on sun-warmed paper.
   ------------------------------------------------------------
   Temperature rule: exactly ONE luminous note — gold — and only
   as punctuation (CTAs, key figures, rules, states). Every
   field, veil and border stays in the cool teal family or the
   warm-neutral paper family; gold never becomes a fill. That
   restraint is what makes it read as value rather than as
   decoration — a second bright hue would flatten both.
   ------------------------------------------------------------
   Type register: Playfair Display carries headlines the way a
   prospectus cover would, in true italic for the accented word —
   real italics, not a synthetic slant, because the serif's own
   italic is part of the brand voice. Arabic has no italic, so
   the [dir="rtl"] layer swaps that emphasis for weight and gold
   instead of slant, never fighting the script.
   ============================================================ */
:root {
  /* Height of the scrolling strip. Declared once: the navbar pins
     itself below it, at rest and when scrolled, so the strip stays
     readable at all times. */
  --h-ticker: 36px;

  /* — Teal core — */
  --ink:        #0E2A2E;  /* darkest: dark fields, headings          */
  --navy:       #123A3F;  /* deep teal: gradients, flats             */
  --teal:       #1C5A61;  /* signature teal: icons, active links     */
  --seafoam:    #5C9C93;  /* light teal: accents on dark             */
  --mist:       #CFE3DE;  /* cool-light surfaces & borders           */

  /* — Warm neutrals (sun-bleached paper, near-zero cool cast) —
     Deliberately warm: they should read as linen and sand,
     never as "white". */
  --ivory:      #FBF6ED;  /* page background                        */
  --cream:      #F3EBD8;  /* alternating sections                   */
  --dune:       #E4D6B2;  /* rules, separators                      */
  --taupe:      #C9B583;  /* pronounced borders                     */

  /* — Gold accents (the single luminous note) — */
  --gold:       #C9A227;  /* primary accent: CTAs, key figures       */
  --gold-lt:    #E4C766;  /* light accent: hovers, highlights        */
  --gold-deep:  #7A5C10;  /* deep gold: small caps on light fields
                             (5.1:1) + mid stop of gold → teal
                             gradients                               */
  --gold-soft:  #E4C766;  /* accent on dark fields                   */

  /* — Text — */
  --text-deep:  #1B1410;
  --text-mid:   #3D3527;  /* 10.1:1 on --ivory                      */
  --text-soft:  #6B6252;  /* 4.9:1 on --ivory — AA compliant        */
  --text-faint: #A79C86;  /* decorative only                        */

  /* — Semantic (portfolio performance) — */
  --up:         #0E9F6E;  /* yield up / positive                    */
  --down:       #B3453A;  /* yield down / negative                  */

  /* — Aliases (kept so ported markup keeps working) — */
  --white:      #FFFFFF;
  --off-white:  var(--ivory);
  --gray-100:   var(--cream);
  --gray-300:   var(--dune);
  --text-dark:  var(--text-deep);
  --text-muted: var(--text-soft);

  /* — Typography —
     --font-ar is swapped into --font / --font-display by the
     [dir="rtl"] rule further down: Latin faces have no Arabic
     coverage, and falling back per-glyph mixes two skeletons in
     the same word. */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font:         'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
  --font-ar:      'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;

  /* — Radii: architectural, unhurried — */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  /* — Warm shadows (teal-tinted) — */
  --shadow-sm:  0 4px 20px rgba(14,42,46,0.07);
  --shadow-md:  0 12px 44px rgba(14,42,46,0.12);
  --shadow-lg:  0 28px 72px rgba(14,42,46,0.18);
  --shadow-navy:0 10px 36px rgba(28,90,97,0.30);
  --shadow-gold:0 8px 24px rgba(122,92,16,0.26);
}

html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: var(--font);
  color: var(--text-mid);
  background: var(--ivory);
  overflow-x: hidden;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader {
  position: fixed; inset: 0;
  background: var(--ivory);
  z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 28px;
  transition: opacity .7s, visibility .7s;
}
.preloader.hidden { opacity: 0; visibility: hidden; }
.preloader-icon {
  width: 64px; height: 64px;
  background: linear-gradient(145deg, var(--teal), var(--ink));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: white;
  animation: gentlePulse 1.8s infinite;
  box-shadow: var(--shadow-navy);
}
.preloader-brand {
  font-family: var(--font-display);
  font-size: 40px; font-weight: 800; letter-spacing: -0.5px;
  color: var(--ink);
}
.preloader-brand span { color: var(--gold-deep); font-style: italic; font-weight: 700; }
.preloader-bar {
  width: 200px; height: 3px;
  background: var(--dune);
  border-radius: 12px; overflow: hidden;
}
.preloader-bar::after {
  content: ''; display: block; height: 100%; width: 40%;
  background: linear-gradient(90deg, var(--teal), var(--gold));
  animation: loading 1.4s ease infinite;
}
@keyframes gentlePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .88; transform: scale(.95); }
}
@keyframes loading {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}

/* ============================================================
   TICKER STRIP
   ============================================================ */
.ticker-strip {
  position: fixed; top: 0; left: 0; right: 0; z-index: 999;
  background: linear-gradient(90deg, var(--ink) 0%, var(--navy) 65%, #1C5A48 100%);
  height: var(--h-ticker); overflow: hidden;
  display: flex; align-items: center;
  border-bottom: 1px solid rgba(92,156,147,.35);
}
.ticker-inner {
  display: flex;
  animation: ticker 36s linear infinite;
  white-space: nowrap;
}
.ticker-item {
  padding: 0 40px;
  font-size: 11.5px; font-weight: 700;
  color: rgba(255,255,255,.88);
  letter-spacing: 1.8px; text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
}
.ticker-item i { color: var(--gold-soft); font-size: 10px; }
@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  position: fixed; top: var(--h-ticker); left: 0; right: 0; z-index: 1000;
  padding: 20px 64px;
  display: flex; align-items: center; justify-content: space-between;
  transition: all .45s cubic-bezier(.22,1,.36,1);
  background: rgba(7,21,23,.35);
  backdrop-filter: blur(12px);
}
@media(max-width:1024px) { .navbar { padding: 14px 24px; } }

.navbar.scrolled {
  background: rgba(251,246,237,.97);
  backdrop-filter: blur(24px);
  padding: 12px 64px;
  box-shadow: var(--shadow-sm);
  /* Le bandeau reste lisible : la barre se cale dessous au lieu de
     remonter a 0 et de le recouvrir. */
  top: var(--h-ticker);
  border-bottom: 1px solid var(--dune);
}

.nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav-logo-icon {
  width: 40px; height: 40px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: white; flex-shrink: 0; transition: .4s;
}
.navbar.scrolled .nav-logo-icon {
  background: linear-gradient(145deg, var(--teal), var(--ink));
  border-color: transparent;
  box-shadow: var(--shadow-navy);
}
.nav-logo-text {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 800;
  color: white; letter-spacing: .5px; line-height: 1; transition: .4s;
}
.nav-logo-text em { color: var(--gold-soft); font-style: italic; font-weight: 700; }
.navbar.scrolled .nav-logo-text { color: var(--ink); }
.navbar.scrolled .nav-logo-text em { color: var(--gold-deep); }
.nav-logo-sub {
  font-size: 8.5px; color: rgba(255,255,255,.55);
  letter-spacing: 2px; text-transform: uppercase;
  font-weight: 600; margin-top: 3px; display: block; transition: .4s;
}
.navbar.scrolled .nav-logo-sub { color: var(--text-soft); }

.nav-links {
  display: flex; align-items: center; gap: 32px; list-style: none;
}
.menu-close-li { display: none; }

/* Mesuré : les 6 entrées + le CTA tiennent sur une ligne jusqu'à
   1260 px de zone de contenu, soit ~1290 px de fenêtre (la media
   query compte la barre de défilement, pas clientWidth). En dessous
   on bascule sur le menu plein écran. Ce seuil doit rester
   identique à celui du hamburger (voir plus bas). */
@media(max-width:1290px) {
  .nav-links { display: none; }
  .nav-links.open {
    display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; height: 100vh;
    background: linear-gradient(160deg, #07120F 0%, #1E4A45 60%, #020806 100%);
    justify-content: flex-start; align-items: stretch; gap: 10px;
    padding: 80px 24px 40px; overflow-y: auto; z-index: 1100; list-style: none;
  }
  .nav-links.open::before { display: none; }
  .nav-links.open li { width: 100%; border-bottom: none; }
  .nav-links.open li.menu-close-li {
    display: flex; justify-content: flex-end;
    padding: 16px 16px 0; border-bottom: none;
    position: absolute; top: 0; right: 0; z-index: 10;
  }
  .menu-close-btn {
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,.15);
    border: 1.5px solid rgba(255,255,255,.35);
    color: white; font-size: 16px; cursor: pointer;
    display: grid; place-items: center;
    transition: background .2s, transform .25s;
    box-shadow: 0 2px 12px rgba(0,0,0,.25);
  }
  .menu-close-btn:hover { background: rgba(255,255,255,.28); transform: rotate(90deg); }
  .nav-links.open a {
    font-family: var(--font-display);
    font-size: 17px; font-weight: 700;
    letter-spacing: .3px; color: white; width: 100%;
    text-align: center; padding: 24px 20px;
    display: flex; align-items: center; gap: 16px;
    padding: 16px 20px; border-radius: 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.09);
    transition: background .2s, transform .15s;
  }
  .nav-links.open a:active,
  .nav-links.open a:hover { background: rgba(255,255,255,.13); transform: translateX(4px); opacity: 1; }
  .nav-links.open a.nav-cta-link {
    background: var(--gold-soft); color: var(--ink) !important;
    justify-content: center; gap: 10px; font-weight: 800;
    border: none; margin-top: 8px; font-size: 16px;
    border-radius: 50px; padding: 18px 20px;
  }
  .nav-links.open a.nav-cta-link:hover { background: var(--gold-lt); transform: none; }
  .nav-links.open a::after { display: none; }
  .navbar.scrolled .nav-links.open a { color: white; }
  body.menu-open { overflow: hidden; height: 100vh; }

  /* Mobile nav icon + label + arrow */
  .mnav-icon {
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    background: rgba(255,255,255,.12);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
  }
  .mnav-label { flex: 1; }
  .mnav-arrow { display: inline-block; font-size: 11px; opacity: .4; }
  .mnav-cta-li { margin-top: 6px; }

  /* Stagger entrance animation */
  .nav-links.open li { opacity: 0; transform: translateX(-18px); animation: mnav-in .35s forwards; }
  .nav-links.open li:nth-child(1) { animation-delay: .05s; }
  .nav-links.open li:nth-child(2) { animation-delay: .10s; }
  .nav-links.open li:nth-child(3) { animation-delay: .15s; }
  .nav-links.open li:nth-child(4) { animation-delay: .20s; }
  .nav-links.open li:nth-child(5) { animation-delay: .25s; }
  .nav-links.open li:nth-child(6) { animation-delay: .30s; }
  @keyframes mnav-in {
    to { opacity: 1; transform: translateX(0); }
  }
}

.nav-links a {
  color: rgba(255,255,255,.85); text-decoration: none;
  font-size: 13.5px; font-weight: 600; letter-spacing: .3px;
  transition: .3s; position: relative; padding-bottom: 4px;
}
.navbar.scrolled .nav-links a { color: var(--text-mid); }
.nav-links a::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--teal), var(--gold));
  transition: width .35s; border-radius: 2px;
}
.nav-links a:hover::after { width: 100%; }

@media(min-width:1025px) { .mnav-icon, .mnav-arrow { display: none; } }

.nav-cta-link {
  padding: 10px 26px !important;
  background: var(--gold-soft) !important;
  color: var(--ink) !important;
  border-radius: 40px; font-weight: 800 !important;
  letter-spacing: .2px;
}
.nav-cta-link:hover {
  background: var(--gold) !important;
  color: var(--ink) !important;
}
.nav-cta-link::after { display: none !important; }

.hamburger {
  display: none; flex-direction: column; gap: 5px;
  cursor: pointer; background: none; border: none;
  padding: 8px; z-index: 1002;
}
.hamburger span {
  width: 24px; height: 2px;
  background: white; border-radius: 2px; transition: .3s;
}
.navbar.scrolled .hamburger span { background: var(--ink); }
@media(max-width:1290px) { .hamburger { display: flex; } }

/* ============================================================
   HERO SLIDER
   ============================================================ */
.hero {
  position: relative; height: 100vh; min-height: 660px;
  overflow: hidden; padding-top: 36px;

  /* Le contenu est centré dans la boîte du hero, mais deux éléments la
     recouvrent de façon inégale : bandeau + navbar en haut (~104px),
     pagination du carrousel en bas (~64px). Sans correction, il reste 40px
     de plus sous le contenu qu'au-dessus. Ce décalage recentre le bloc dans
     la bande réellement visible ; il vaut la différence entre les deux. */
  --hero-recentrage: 40px;
}
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s; }
.slide.active { opacity: 1; }
.slide-bg {
  position: absolute; inset: 0;
  background-image: var(--bg);
  background-size: cover; background-position: center;
  transform: scale(1); transition: transform 8s;
}
.slide.active .slide-bg { transform: scale(1.06); }

/* Gradient ivoire-végétal — plus chaleureux que noir — over the photo:
   opaque enough on the left for the copy to sit on, fading out on the
   right so the picture still reads as a picture. */
.slide-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    110deg,
    rgba(7,21,23,.88) 0%,
    rgba(14,42,46,.60) 45%,
    rgba(18,58,63,.18) 75%,
    rgba(18,58,63,.05) 100%
  );
  z-index: 1;
}
.slide-overlay::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 50%; height: 4px;
  background: linear-gradient(90deg, var(--gold), var(--gold-deep), var(--teal));
}

.slide-content {
  position: relative; z-index: 10; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--hero-recentrage, 0) 100px 0; max-width: 1300px; margin: 0 auto;
}
@media(max-width:768px) { .slide-content { padding: var(--hero-recentrage, 0) 28px 0; } }

.slide-tag {
  display: inline-flex; align-items: center; gap: 14px;
  margin-bottom: 24px; opacity: 0; transform: translateY(30px);
}
.slide.active .slide-tag { animation: fadeUp .7s .3s forwards; }
.slide-tag-line { width: 36px; height: 2px; background: var(--gold); }
.slide-tag-text {
  font-size: 11px; font-weight: 700;
  letter-spacing: 3.5px; text-transform: uppercase;
  color: rgba(255,255,255,.75);
}

.slide-title {
  font-family: var(--font-display);
  /* La taille continue de suivre la largeur jusqu'à 60px. Un plafond atteint
     trop tôt (68px dès ~970px de viewport) fige la longueur de ligne et fait
     casser la phrase au même endroit sur tous les écrans ≥ 1025px. */
  font-size: clamp(32px,4.6vw,60px);
  font-weight: 800; color: white; line-height: 1.08;
  margin-bottom: 22px; opacity: 0; transform: translateY(44px);
  /* La mesure suit la colonne au lieu d'un cap fixe : à 860px, 250px de
     colonne restaient inutilisés pendant que le titre se coupait en trois. */
  max-width: min(100%, 1100px);
  letter-spacing: -.5px;
  /* Filet de sécurité, quel que soit le titre saisi au back-office : les
     lignes sont réparties au lieu d'isoler un mot seul en fin de titre.
     Ignoré par les navigateurs anciens — la correction ci-dessus suffit. */
  text-wrap: balance;
}
.slide.active .slide-title { animation: fadeUp .85s .5s forwards; }
.slide-title .accent {
  color: var(--gold-soft);
  font-style: italic;
  font-weight: 700;
}

.slide-desc {
  font-size: 16px; color: rgba(255,255,255,.78);
  max-width: 520px; line-height: 1.75;
  margin-bottom: 32px; opacity: 0; transform: translateY(38px);
}
.slide.active .slide-desc { animation: fadeUp .8s .7s forwards; }
.slide-actions {
  display: flex; gap: 14px; flex-wrap: wrap;
  opacity: 0; transform: translateY(28px);
}
.slide.active .slide-actions { animation: fadeUp .7s .9s forwards; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

.slider-controls {
  position: absolute; bottom: 32px; left: 64px; right: 64px;
  z-index: 20; display: flex; align-items: center; justify-content: space-between;
}
.slider-progress-bar {
  width: 40px; height: 2px; border-radius: 3px;
  background: rgba(255,255,255,.25); cursor: pointer; overflow: hidden;
}
.slider-arrow-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.1); color: white;
  cursor: pointer; transition: .35s;
}
.slider-arrow-btn:hover {
  background: var(--gold); border-color: var(--gold);
}
.slider-count { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.55); }
.slider-count .now { color: white; font-size: 24px; font-weight: 900; }

/* ============================================================
   FEATURE BAND — engineering pillars
   ============================================================ */
.band {
  background: var(--ink);
  color: #D8ECE6;
  position: relative;
  overflow: hidden;
  /* Reserve sous la derniere tuile : la carte des chiffres cles remonte
     de 52px pour chevaucher la bande, et rognait sinon la derniere
     phrase — 15px sur telephone, 4px encore sur ordinateur. */
  padding: 0 0 56px;
}
.band-orb {
  position: absolute; top: 50%; left: 80%;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(92,156,147,.22), transparent 65%);
  opacity: .5; filter: blur(60px);
  pointer-events: none; z-index: 0;
}
.band-inner {
  position: relative; z-index: 1;
}
.band-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.feature {
  padding: 48px 36px;
  border-right: 1px solid rgba(255,255,255,.1);
  transition: background .4s;
  position: relative;
}
.feature:last-child { border-right: 0; }
.feature::before {
  content: ""; position: absolute;
  left: 36px; bottom: 0;
  width: 0; height: 2px;
  background: var(--gold-soft);
  transition: width .4s;
}
.feature:hover { background: rgba(255,255,255,.04); }
.feature:hover::before { width: 46px; }
.feature .ic {
  width: 48px; height: 48px; border-radius: 13px;
  display: grid; place-items: center;
  background: rgba(92,156,147,.14);
  color: var(--seafoam);
  margin-bottom: 22px; transition: .45s;
}
/* Les pictogrammes viennent désormais de Font Awesome (choisis depuis
   le back-office) ; la règle svg reste pour d'anciens contenus. */
.feature .ic svg { width: 24px; height: 24px; }
.feature .ic i   { font-size: 21px; }
.feature:hover .ic {
  transform: translateY(-4px) rotate(-5deg);
  background: var(--gold-soft); color: var(--ink);
}
.feature h4 {
  font-family: var(--font);
  font-size: .88rem; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 700;
  color: #fff; margin-bottom: 12px;
}
.feature p {
  font-size: .875rem;
  color: rgba(236,229,208,.65);
  line-height: 1.72;
}
@media(max-width:900px) {
  .band-grid { grid-template-columns: repeat(2,1fr); }
  .feature { border-bottom: 1px solid rgba(255,255,255,.1); }
  .feature:nth-child(odd)  { border-right: 1px solid rgba(255,255,255,.1); }
  .feature:nth-child(even) { border-right: 0; }
}
@media(max-width:560px) {
  .band-grid { grid-template-columns: 1fr; }
  .feature { border-right: 0 !important; }
  .feature { padding: 36px 24px; }
}

/* ============================================================
   SECTIONS — General layout
   ============================================================ */
section { padding: 80px 64px; }
@media(max-width:1024px) { section { padding: 60px 40px; } }
@media(max-width:640px)  { section { padding: 48px 24px; } }
section#contact { padding-top: 40px; }

.section-header { text-align: center; margin-bottom: 52px; }
.section-tag {
  display: inline-flex; align-items: center; gap: 14px; margin-bottom: 18px;
}
.section-tag-dot {
  width: 28px; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-deep));
  border-radius: 2px;
}
.section-tag-text {
  font-size: 11px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold-deep);
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(30px,5.5vw,56px);
  font-weight: 800; color: var(--ink);
  line-height: 1.12; margin-bottom: 18px;
}
.section-title .accent-italic { font-style: italic; font-weight: 700; color: var(--gold-deep); }
.section-subtitle {
  font-size: 16px; color: var(--text-soft);
  max-width: 620px; margin: 0 auto; line-height: 1.75;
}
.section-title span { font-style: italic; font-weight: 700; color: var(--gold-deep); }

/* ============================================================
   SERVICES GRID
   ============================================================ */
.services-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 28px; margin-top: 20px;
}
@media(max-width:1024px) { .services-grid { grid-template-columns: repeat(2,1fr); } }
@media(max-width:640px)  { .services-grid { grid-template-columns: 1fr; } }

.service-card {
  background: white;
  border-radius: var(--radius-lg); padding: 36px 28px;
  text-align: center; transition: all .4s cubic-bezier(.22,1,.36,1);
  border: 1px solid var(--dune);
  box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
}
.service-card::before {
  content: ''; position: absolute;
  bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--gold));
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s;
}
.service-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-md);
  border-color: var(--mist);
}
.service-card:hover::before { transform: scaleX(1); }

.service-icon {
  width: 72px; height: 72px;
  background: linear-gradient(135deg, rgba(28,90,97,.12), rgba(14,42,46,.08));
  border: 1.5px solid rgba(28,90,97,.2);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 22px; color: var(--teal); font-size: 28px;
  transition: .4s;
}
.service-card:hover .service-icon {
  background: linear-gradient(135deg, var(--teal), var(--ink));
  color: white; border-color: transparent;
  box-shadow: var(--shadow-navy);
}
.service-title {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 700;
  color: var(--ink); margin-bottom: 12px;
}
.service-desc { color: var(--text-soft); font-size: 14px; line-height: 1.7; }

/* ============================================================
   ABOUT SPLIT — Signature Section
   ============================================================ */
.split-section {
  display: grid; grid-template-columns: 1fr 1fr; min-height: 90vh;
}
@media(max-width:900px) { .split-section { grid-template-columns: 1fr; } }

.split-left {
  background: linear-gradient(150deg, var(--ink) 0%, var(--navy) 100%);
  padding: 64px 56px;
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
}
.split-left::before {
  content: ''; position: absolute;
  top: -80px; right: -80px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: rgba(92,156,147,.08);
  pointer-events: none;
}
.split-left::after {
  content: ''; position: absolute;
  bottom: -60px; left: -60px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: rgba(201,162,39,.08);
  pointer-events: none;
}

.split-right {
  background: var(--ivory); padding: 64px 56px;
  display: flex; flex-direction: column; justify-content: center;
}

.split-left-title {
  font-family: var(--font-display);
  font-size: clamp(30px,3.2vw,50px);
  font-weight: 800; color: white;
  line-height: 1.12; margin-bottom: 22px;
}
.split-left-title span { color: var(--gold-soft); font-style: italic; font-weight: 700; }
.split-left-text {
  color: rgba(255,255,255,.72); font-size: 15.5px; line-height: 1.78; margin-bottom: 28px;
}

.split-right-title {
  font-family: var(--font-display);
  font-size: clamp(30px,3.2vw,50px);
  font-weight: 800; color: var(--ink);
  line-height: 1.12; margin-bottom: 22px;
}
.split-right-title span { color: var(--gold-deep); font-style: italic; font-weight: 700; }

.advantage-list { display: flex; flex-direction: column; gap: 18px; margin-top: 20px; }
.advantage-item {
  display: flex; align-items: flex-start; gap: 18px;
  padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.1);
}
.adv-icon {
  width: 48px; height: 48px; flex-shrink: 0;
  background: rgba(92,156,147,.15);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--seafoam); font-size: 20px;
}
.adv-name { font-size: 16px; font-weight: 700; color: white; margin-bottom: 4px; }
.adv-desc { font-size: 13px; color: rgba(255,255,255,.58); line-height: 1.5; }

/* ============================================================
   HOW WE WORK — Engineering approach
   ============================================================ */
.approche-section { background: var(--ivory); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; color: var(--gold-deep); margin-bottom: 6px;
}
.eyebrow::before {
  content: ''; display: block; width: 28px; height: 2px;
  background: var(--gold-soft); border-radius: 2px;
}

/* Les deux colonnes sont étirées à la même hauteur, et le dernier
   bloc de chacune est poussé en bas (margin-top:auto) : leurs pieds
   tombent ainsi exactement sur la même ligne, quel que soit le
   volume de texte à gauche. */
.approche-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: stretch;
  max-width: 1200px; margin: 0 auto;
}
.approche-text {
  display: flex; flex-direction: column;
}
.approche-text .intro-tagline { margin-top: auto; }

.about-right {
  display: flex; flex-direction: column;
  align-items: center; gap: 32px;
  padding-top: 52px;
}
.about-right .about-quote { margin-top: auto; margin-bottom: 0; }

.approche-h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 800; color: var(--ink);
  line-height: 1.12; margin: 16px 0 20px;
}
.approche-h2 em { color: var(--gold-deep); font-style: italic; font-weight: 700; }

.about-lead {
  font-size: 1.05rem; font-weight: 500;
  color: var(--ink); line-height: 1.8;
  margin-bottom: 18px;
}

.about-quote {
  margin: 22px 0;
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(14,42,46,.05), rgba(28,90,97,.07));
  border-left: 3px solid var(--teal);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--font);
  font-size: 1rem; font-style: italic;
  color: var(--ink); font-weight: 600;
  line-height: 1.65;
}

/* Repères du cabinet. Ils occupent le vide que laissait la colonne gauche
   entre la citation et la signature : deux colonnes pour rester compacts. */
.cabinet-points {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px; margin: 4px 0 18px;
}
.cabinet-points li {
  display: flex; align-items: flex-start; gap: 10px;
}
.cabinet-points li > i {
  flex: none; margin-top: 2px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .72rem; color: var(--teal);
  background: rgba(28,90,97,.09);
}
.cabinet-points strong {
  display: block; color: var(--ink);
  font-weight: 700; font-size: .88rem; line-height: 1.35;
}
.cabinet-points small {
  display: block; color: var(--text-mid);
  font-size: .78rem; line-height: 1.5; margin-top: 2px;
}
@media(max-width:520px) {
  .cabinet-points { grid-template-columns: 1fr; gap: 12px; }
}

.about-mission {
  font-size: .93rem; color: var(--text-mid);
  line-height: 1.78; margin-top: 18px;
  padding: 16px 20px;
  background: var(--cream);
  border-radius: var(--radius-md);
  border: 1px solid var(--dune);
}

/* — Circular media component — */
.circle-media {
  position: relative;
  width: min(385px, 86%); aspect-ratio: 1;
  flex-shrink: 0;
}

/* Main circle */
.circle-media .ring {
  position: absolute; inset: 0;
  border-radius: 50%; overflow: hidden; z-index: 2;
  box-shadow:
    0 24px 64px rgba(14,42,46,.22),
    0 4px 20px rgba(14,42,46,.12),
    inset 0 2px 12px rgba(255,255,255,.6);
}
.circle-media .ring img {
  width: 100%; height: 100%; object-fit: contain;
  padding: 32px; transition: transform .6s ease;
}
.circle-media:hover .ring img { transform: scale(1.05); }

/* Inner decorative ring */
.circle-media .frame {
  position: absolute; inset: -16px;
  border-radius: 50%; z-index: 1;
  border: 1.5px solid var(--teal);
  opacity: .35;
}

/* Outer dashed ring */
.circle-media .frame-outer {
  position: absolute; inset: -36px;
  border-radius: 50%; z-index: 1;
  border: 1px dashed rgba(28,90,97,.22);
}

/* Spinning text ring */
.ring-text {
  position: absolute;
  top: -66px; left: -66px; right: -66px; bottom: -66px;
  z-index: 3;
  transform-origin: center center;
  animation: spin 22s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* Hide spinning ring on iOS Safari — causes misalignment */
@supports (-webkit-touch-callout: none) {
  .ring-text { display: none; }
}

/* Glow pulse on hover */
.circle-media:hover .ring {
  box-shadow:
    0 32px 80px rgba(14,42,46,.28),
    0 8px 28px rgba(14,42,46,.18),
    inset 0 2px 12px rgba(255,255,255,.6);
}

/* — Floating stat chips — */
.stat-chip {
  position: absolute; z-index: 4;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 18px; padding: 14px 20px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(14,42,46,.14), 0 2px 8px rgba(14,42,46,.08);
  min-width: 100px;
}
.stat-chip.c1 { bottom: 6%; left: -8%; }
.stat-chip.c2 { top: 8%;  right: -6%; }

.chip-icon {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  margin: 0 auto 8px; font-size: 11px; color: white;
}
.stat-chip.c1 .chip-icon { background: linear-gradient(135deg, var(--ink), var(--teal)); }
.stat-chip.c2 .chip-icon { background: linear-gradient(135deg, var(--gold), var(--gold-soft)); }

.stat-chip strong {
  display: block; font-weight: 800;
  font-size: 1.5rem; color: var(--ink); line-height: 1;
  margin-bottom: 3px;
}
.stat-chip small {
  font-size: .7rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-soft);
}

/* — Float animation — */
.float { animation: bob 4s ease-in-out infinite; }
.float.alt { animation-delay: -2s; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

@media(max-width:960px) {
  .approche-grid { grid-template-columns: 1fr; gap: 52px; }
  .circle-media  { width: min(380px, 85%); margin: 0 auto; }
  .stat-chip.c1  { bottom: 2%; left: 2%; }
  .stat-chip.c2  { top: 4%;  right: 2%; }
}
@media(max-width:640px) {
  .circle-media { width: min(310px, 90%); }
}

/* ============================================================
   OTLA APP — screenshot rail
   ------------------------------------------------------------
   Drifts on its own, the same infinite-marquee technique as the
   ticker strip in header.php: the track is the full list rendered
   twice, animated from translateX(0) to translateX(-50%), so the
   second copy lands exactly where the first started and the loop
   never visibly resets. Pauses on hover so a visitor can actually
   look at one screen instead of chasing a moving target.
   ============================================================ */
.otla-section {
  background: var(--cream);
  position: relative;
  overflow: hidden;
  /* No section on the site compensates for the fixed ticker+navbar on
     scroll-to-anchor (nothing sets scroll-margin-top anywhere), which
     other sections get away with because they fit inside a normal
     viewport with room to spare. This one is taller — the zigzag and
     its hover lift need vertical room — so without this, jumping to
     #otla (nav click, or a tall/short viewport centering natively on
     it) can leave the title sitting half behind the navbar. */
  scroll-margin-top: calc(var(--h-ticker) + 80px);
}
/* Same soft blurred blob as .band-orb, echoed here in the two brand
   tints rather than repeated verbatim — the pair reads as a matched
   set either side of the rail, not a copy-paste. */
.otla-section::before,
.otla-section::after {
  content: ''; position: absolute;
  width: 460px; height: 460px; border-radius: 50%;
  filter: blur(70px); opacity: .5; pointer-events: none; z-index: 0;
}
.otla-section::before {
  top: -140px; left: -120px;
  background: radial-gradient(circle, rgba(28,90,97,.22), transparent 65%);
}
.otla-section::after {
  bottom: -160px; right: -120px;
  background: radial-gradient(circle, rgba(201,162,39,.16), transparent 65%);
}
.otla-section .section-header,
.otla-section .otla-rail { position: relative; z-index: 1; }

.otla-rail {
  overflow: hidden;
  /* Cards fade into the background at both edges instead of the row
     hard-clipping mid-card — the same intent as the modal's bottom
     fade before it was removed, just on the X axis here. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  /* Generous top clearance: the tallest lift (stagger + hover, below)
     plus the hover shadow's blur both need room above the cards that
     isn't there to clip into. */
  padding: 50px 0 44px;
}

.otla-track {
  display: flex; align-items: center; gap: 28px;
  width: max-content;
  animation: otla-scroll 42s linear infinite;
  /* Screenshots carry no reading direction, so the track's own layout
     stays LTR under [dir="rtl"] too — otherwise a flex row's automatic
     RTL reversal right-aligns it, and translateX(-50%) (below) slides
     the whole strip off the LEFT edge instead of revealing the loop. */
  direction: ltr;
}
.otla-rail:hover .otla-track { animation-play-state: paused; }

@keyframes otla-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.otla-shot {
  flex: 0 0 auto;
  height: clamp(360px, 46vw, 560px);
  /* Real phone-screen proportions (the source screenshots), not a
     rounder ratio: at any other shape the crop starts eating status
     bar or nav bar and the screen stops reading as a screen. */
  aspect-ratio: 922 / 2048;
  position: relative;
  border-radius: 30px;
  /* The frame is a chassis, not a border: padding + a dark gradient
     fill reads as the phone's bezel around the actual screenshot,
     which already carries its own status bar — no fake notch needed. */
  padding: 9px;
  background: linear-gradient(165deg, #2b2f31, #0c0d0e);
  box-shadow:
    0 34px 60px -22px rgba(14,42,46,.48),
    0 10px 26px -10px rgba(14,42,46,.28),
    inset 0 1px 1px rgba(255,255,255,.14);
  /* A gentle zigzag rather than a flat row, and a bit more lift on
     hover — both are one offset stacked on the resting stagger, in a
     custom property so nothing has to duplicate the resting value to
     add to it. --otla-hover is zeroed out below wherever hovering
     shouldn't apply (touch, and the resting state itself). */
  --otla-stagger: 0px;
  --otla-hover: 0px;
  transform: translateY(calc(var(--otla-stagger) + var(--otla-hover)));
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s;
}
.otla-shot:nth-child(even) { --otla-stagger: -18px; }
.otla-shot:hover {
  --otla-hover: -12px;
  box-shadow:
    0 44px 76px -20px rgba(14,42,46,.54),
    0 14px 32px -10px rgba(14,42,46,.32),
    inset 0 1px 1px rgba(255,255,255,.14);
}

.otla-shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 22px;
  background: var(--dune);   /* teinte d'attente pendant le chargement */
}

@media(max-width:900px) {
  /* The zigzag needs headroom the rail doesn't have once cards drop
     below their desktop height; flatten it rather than crop the lift. */
  .otla-shot:nth-child(even) { --otla-stagger: 0px; }
}
@media(max-width:640px) {
  .otla-shot { height: clamp(300px, 78vw, 420px); }
}

/* ============================================================
   CONTACT
   ------------------------------------------------------------
   One joined card: a dark side panel (every direct route, the
   WhatsApp shortcut, the map) beside the white form. The dark
   field is the same as the stack section's, so the two dark
   moments on the page read as one material.
   ============================================================ */
.contact { padding: 0 clamp(20px, 6vw, 80px) clamp(70px, 9vw, 120px); }
.contact .section-header { margin-bottom: 44px; }

.contact-card {
  display: grid; grid-template-columns: 5fr 7fr;
  max-width: 1200px; margin: 0 auto;
  background: white;
  border-radius: 28px; overflow: hidden;
  border: 1px solid var(--dune);
  box-shadow: 0 24px 64px rgba(14,42,46,.10), 0 2px 12px rgba(14,42,46,.05);
}

/* ── Side panel ─────────────────────────────────────────────── */
.contact-side {
  position: relative; overflow: hidden;
  padding: 48px 44px 44px;
  background: linear-gradient(160deg, #163F3B 0%, var(--ink) 55%, #020806 100%);
  color: white;
  display: flex; flex-direction: column;
}
.contact-side::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 45% at 20% 0%,   rgba(28,90,97,.55), transparent 70%),
    radial-gradient(ellipse 60% 40% at 90% 100%, rgba(201,162,39,.14), transparent 70%);
}
/* The engineering grid from the stack section, fading out downwards. */
.contact-side::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(92,156,147,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92,156,147,.08) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
}
.contact-side > * { position: relative; z-index: 1; }

.contact-side-title {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700; line-height: 1.25;
  margin: 0 0 10px;
}
.contact-side-text {
  font-size: 14.5px; line-height: 1.7;
  color: rgba(255,255,255,.66);
  margin: 0 0 30px;
}

.contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.contact-list li { display: flex; align-items: flex-start; gap: 14px; }
.contact-list-icon {
  flex: 0 0 auto;
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(201,162,39,.10);
  border: 1px solid rgba(201,162,39,.30);
  color: var(--gold-soft); font-size: 15px;
}
.contact-list-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.contact-list-body small {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.contact-list-body strong { font-size: 15px; font-weight: 600; color: white; line-height: 1.45; }
.contact-list-body a { color: inherit; text-decoration: none; }
.contact-list-body a:hover { color: var(--gold-soft); }

/* WhatsApp shortcut: an outline pill in the palette. The brand green
   already lives on the floating pill; a second green block here would
   compete with the send button across the divide. */
.contact-wa {
  display: flex; align-items: center; gap: 12px;
  margin-top: 30px; padding: 14px 18px;
  border: 1.5px solid rgba(201,162,39,.45);
  border-radius: 50px;
  color: white; text-decoration: none;
  font-size: 14px; font-weight: 700;
  background: rgba(201,162,39,.06);
  transition: background .3s, border-color .3s, transform .3s;
}
.contact-wa > .fa-whatsapp { font-size: 20px; color: var(--gold-soft); }
.contact-wa span { flex: 1; }
.contact-wa-arrow { font-size: 12px; opacity: .6; transition: transform .3s, opacity .3s; }
.contact-wa:hover { background: rgba(201,162,39,.14); border-color: var(--gold); transform: translateY(-2px); }
.contact-wa:hover .contact-wa-arrow { transform: translateX(4px); opacity: 1; }

.contact-map {
  margin-top: auto; padding-top: 30px;
}
.contact-map iframe {
  display: block; width: 100%; height: 210px; border: 0;
  border-radius: 14px;
  border: 1px solid rgba(92,156,147,.35);
  /* Desaturated so a bright map does not shout inside the dark panel. */
  filter: saturate(.55) contrast(1.05);
}

/* ── Form ───────────────────────────────────────────────────── */
.contact-form-card {
  padding: 44px 48px 40px;
  background: white;
  border: 0; border-radius: 0; box-shadow: none;
}
.form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }

.field { margin-bottom: 18px; position: relative; }
.field label {
  display: block; margin-bottom: 8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .2px;
  color: var(--text-mid);
}
.field input,
.field select,
.field textarea {
  width: 100%; padding: 14px 16px;
  border: 1.5px solid var(--dune);
  border-radius: 12px;
  font-size: 14.5px; font-family: var(--font);
  background: var(--ivory); color: var(--text-deep);
  transition: border-color .25s, background .25s, box-shadow .25s;
  outline: none;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--text-faint); }
.field textarea { resize: vertical; min-height: 118px; line-height: 1.6; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--taupe); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--gold-deep);
  background: white;
  box-shadow: 0 0 0 4px rgba(201,162,39,.16);
}

/* Leading icon inside a text input. */
.input-wrap { position: relative; }
.input-wrap > i {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  font-size: 13px; color: var(--text-faint);
  pointer-events: none; transition: color .25s;
}
.input-wrap input { padding-left: 42px; }
.input-wrap:focus-within > i { color: var(--gold-deep); }

/* Native select, with our own chevron. */
.select-wrap { position: relative; }
.select-wrap select {
  appearance: none; -webkit-appearance: none;
  padding-right: 44px; cursor: pointer;
}
.select-wrap > i {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  font-size: 11px; color: var(--text-soft); pointer-events: none;
}

.form-msg {
  padding: 12px 16px; margin-bottom: 14px;
  border-radius: 10px;
  font-size: .88rem; font-weight: 600; line-height: 1.5;
}

.btn-send {
  width: 100%; justify-content: center;
  padding: 17px 32px;
  box-shadow: var(--shadow-gold);
}
.btn-send i { transition: transform .3s; }
.btn-send:hover i { transform: translateX(4px); }
.btn-send:disabled { opacity: .7; cursor: default; box-shadow: none; }

.form-note {
  margin: 14px 0 0; text-align: center;
  font-size: 12.5px; color: var(--text-soft);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.form-note i { color: var(--gold-deep); font-size: 12px; }

/* ── What happens next ──────────────────────────────────────── */
.contact-next {
  margin-top: 30px; padding-top: 24px;
  border-top: 1px solid var(--dune);
}
.contact-next-title {
  display: block; margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 600;
}
.contact-next ol {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.contact-next li { display: flex; align-items: flex-start; gap: 10px; }
.contact-next li b {
  flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  color: var(--gold-deep);
  background: rgba(201,162,39,.12);
  border: 1px solid rgba(201,162,39,.35);
}
.contact-next li span { font-size: 13px; color: var(--text-mid); line-height: 1.5; padding-top: 5px; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .contact-side { padding: 40px 32px 36px; }
  .contact-form-card { padding: 36px 32px 32px; }
}
@media (max-width: 900px) {
  .contact-card { grid-template-columns: 1fr; border-radius: 22px; }
  /* Form first on a phone: it is what the visitor came down here for. */
  .contact-side { order: 2; }
  .contact-map { padding-top: 26px; }
  .contact-map iframe { height: 180px; }
  .contact-next ol { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 520px) {
  .form-2col { grid-template-columns: 1fr; }
  .contact-card { border-radius: 18px; }
  .contact-side { padding: 32px 22px 28px; }
  .contact-form-card { padding: 28px 20px 26px; }
}

/* ============================================================
   BUTTONS   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 32px; border-radius: 50px;
  font-size: 13.5px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  cursor: pointer; transition: all .4s; text-decoration: none; border: none;
  font-family: var(--font);
}
.btn-primary {
  background: var(--teal);
  color: white;
}
.btn-primary:hover {
  background: var(--ink);
}
.btn-outline {
  background: transparent; color: white;
  border: 2px solid rgba(255,255,255,.55);
}
.btn-outline:hover {
  background: rgba(255,255,255,.12);
  border-color: white;
}
.btn-accent {
  background: var(--gold-soft);
  color: var(--ink);
  font-weight: 800;
}
.btn-accent:hover {
  background: var(--gold);
}
.intro-tagline {
  margin-top: 24px;
  font-family: var(--font);
  font-size: 1rem; font-style: italic;
  color: var(--ink); font-weight: 600;
  border-left: 3px solid var(--gold-soft);
  padding-left: 14px; line-height: 1.5;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: linear-gradient(160deg, var(--ink) 0%, #163F3B 100%);
  padding: 56px 64px 28px;
  color: rgba(255,255,255,.5);
  border-top: 3px solid;
  border-image: linear-gradient(90deg, var(--teal), var(--gold), var(--gold-deep)) 1;
}
.footer-top {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr;
  gap: 48px; margin-bottom: 36px;
}
@media(max-width:1024px) { .footer-top { grid-template-columns: 1fr 1fr; } }

.footer-logo {
  display: flex; align-items: center; gap: 14px;
  text-decoration: none; margin-bottom: 18px;
}
.footer-logo-icon {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, var(--teal), var(--ink));
  border-radius: 50%; display: flex; align-items: center;
  justify-content: center; color: white; font-size: 20px;
  box-shadow: var(--shadow-navy);
}
.footer-logo-text {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 800;
  color: white;
}
.footer-logo-text span { color: var(--gold-soft); font-style: italic; font-weight: 700; }

.footer-col h4 {
  font-size: 11px; font-weight: 700; color: rgba(255,255,255,.85);
  margin-bottom: 20px; text-transform: uppercase; letter-spacing: 2.5px;
}
.footer-col p { font-size: 13.5px; line-height: 1.7; color: rgba(255,255,255,.45); }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-col ul a {
  color: rgba(255,255,255,.45); text-decoration: none;
  font-size: 13.5px; transition: .3s;
  display: flex; align-items: center; gap: 8px;
}
.footer-col ul a::before {
  content: ''; width: 0; height: 1px;
  background: var(--gold); transition: width .3s;
}
.footer-col ul a:hover { color: var(--gold-soft); padding-left: 4px; }
.footer-col ul a:hover::before { width: 12px; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 24px; text-align: center;
  font-size: 12.5px;
}
.footer-divider-ornament {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin-bottom: 12px;
  color: rgba(255,255,255,.2); font-size: 11px; letter-spacing: 4px;
}

/* ============================================================
   SECTION SEPARATORS
   ============================================================ */

/* — Ornamental separator — */
.sep {
  display: flex; align-items: center; gap: 18px;
  padding: 0; background: var(--ivory);
  height: 56px;
}
.band + .sep { height: 130px; }
.sep::before,
.sep::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--mist) 20%,
    var(--teal) 45%,
    var(--ink) 50%,
    var(--teal) 55%,
    var(--mist) 80%,
    transparent 100%
  );
}
.sep-center {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.sep-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--teal); opacity: .45;
}
.sep-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ink) 0%, var(--teal) 100%);
  display: grid; place-items: center;
  color: white; font-size: 13px;
  box-shadow: 0 4px 16px rgba(14,42,46,.28);
}
@media(max-width:640px) { .sep { padding: 0 32px; } }

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal {
  opacity: 0; transform: translateY(44px);
  /* Deux propriétés nommées, et non « all » : « all » fait aussi transiter
     les propriétés de mise en page (hauteurs, marges) dès qu'elles changent,
     ce qui produit des décalages fugaces pendant le défilement sur mobile.
     Se limiter à l'opacité et à la transformation supprime ce risque et
     laisse l'animation au compositeur. */
  transition: opacity .95s cubic-bezier(.22,1,.36,1),
              transform .95s cubic-bezier(.22,1,.36,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   FLOATING CONTACT BUTTONS   ============================================================ */
.whatsapp-btn {
  position: fixed; bottom: 28px; right: 28px;
  width: 58px; height: 58px;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: white; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; box-shadow: 0 8px 28px rgba(37,211,102,.42);
  transition: all .3s; z-index: 1000; text-decoration: none;
  border: 3px solid rgba(255,255,255,.25);
}
.whatsapp-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 14px 36px rgba(37,211,102,.58);
}
.whatsapp-btn:active { transform: scale(.95); }

/* ============================================================
   SOCIAL SIDEBAR
   ============================================================ */
.social-sidebar {
  position: fixed;
  right: 22px;
  bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 500;
}

.social-pill {
  position: relative;
  width: 50px; height: 50px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  color: #fff;
  text-decoration: none;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
  animation: socialFadeIn .5s ease both;
}
.social-pill:nth-child(1) { animation-delay: .1s; }
.social-pill:nth-child(2) { animation-delay: .2s; }
.social-pill:nth-child(3) { animation-delay: .3s; }

@keyframes socialFadeIn {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Tooltip label */
.social-pill::before {
  content: attr(aria-label);
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: rgba(6,18,20,.88);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  padding: 5px 12px;
  border-radius: 7px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .22s ease, transform .22s ease;
}
.social-pill:hover::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Ring glow on hover */
.social-pill::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.3);
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.social-pill:hover::after { opacity: 1; }

.social-pill:hover { transform: scale(1.14) translateY(-2px); }

/* LinkedIn — réseau de référence du conseil */
.social-pill.linkedin {
  background: linear-gradient(135deg, #0a66c2 0%, #084d92 100%);
  box-shadow: 0 6px 20px rgba(10,102,194,.38);
}
.social-pill.linkedin:hover { box-shadow: 0 10px 30px rgba(10,102,194,.58); }

/* E-mail direct */
.social-pill.mail {
  background: linear-gradient(135deg, var(--teal) 0%, var(--ink) 100%);
  box-shadow: 0 6px 20px rgba(28,90,97,.38);
}
.social-pill.mail:hover { box-shadow: 0 10px 30px rgba(28,90,97,.58); }

/* WhatsApp */
.social-pill.whatsapp {
  background: linear-gradient(135deg, #25d366 0%, #128c50 100%);
  box-shadow: 0 6px 20px rgba(37,211,102,.38);
}
.social-pill.whatsapp:hover { box-shadow: 0 10px 30px rgba(37,211,102,.58); }

@media(max-width:768px) {
  /* Raccourcis flottants : ils recouvrent le texte des cartes sur un
     écran de téléphone. On réduit leur emprise sans les supprimer. */
  .social-sidebar { right: 10px; bottom: 14px; gap: 9px; }
  .social-pill    { width: 42px; height: 42px; font-size: 17px; }
  .social-pill { width: 56px; height: 56px; font-size: 24px; }
  .social-pill::before, .social-pill::after { display: none; }
}

/* ============================================================
   RESPONSIVE — Comprehensive
   ============================================================ */
@media(max-width:1200px) {
  .hero .slide-content  { padding: var(--hero-recentrage, 0) 80px 0; }
  .stats-strip          { padding: 0 40px; }
  section               { padding: 60px 40px; }
  .footer               { padding: 48px 40px 24px; }
  .navbar.scrolled      { padding: 12px 40px; }
}

@media(max-width:1024px) {
  .navbar               { padding: 14px 24px; }
  .navbar.scrolled      { padding: 10px 24px; }
  .hamburger            { display: flex; }
  .hero .slide-content  { padding: var(--hero-recentrage, 0) 40px 0; }
  /* Plafond aligné sur la valeur qu'atteint la règle fluide à 1024px, pour que
     la taille reste continue de part et d'autre du palier. */
  .slide-title          { font-size: clamp(26px,6vw,47px); }
  .stats-strip          { grid-template-columns: repeat(2,1fr); }
  .stat                 { border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); }
  .stat:nth-child(odd)  { border-right: 1px solid rgba(255,255,255,.1); }
  .services-grid        { grid-template-columns: repeat(2,1fr); }
  .equipment-grid       { grid-template-columns: repeat(2,1fr); }
  .split-section        { grid-template-columns: 1fr; }
  .split-left, .split-right { padding: 48px 32px; }
  .footer-top           { grid-template-columns: 1fr 1fr; }
  .footer               { padding: 40px 28px 24px; }
}

@media(max-width:768px) {
  .ticker-item          { padding: 0 24px; font-size: 10.5px; }
  .hero                 { min-height: 600px; }
  .hero .slide-content  { padding: var(--hero-recentrage, 0) 24px 0; }
  .slide-title          { font-size: clamp(24px,8vw,46px); margin-bottom: 16px; }
  .slide-desc           { font-size: 15px; margin-bottom: 24px; }
  .slide-actions        { flex-direction: column; gap: 10px; }
  .slider-controls      { bottom: 20px; left: 24px; right: 24px; }
  .stats-strip          { grid-template-columns: repeat(2,1fr); }
  .stat-val             { font-size: 34px; }
  .services-grid        { grid-template-columns: 1fr; gap: 20px; }
  .equipment-grid       { grid-template-columns: 1fr; }
  .equip-card           { max-width: 400px; margin: 0 auto; }
  .footer-top           { grid-template-columns: 1fr; gap: 28px; }
  .footer               { padding: 36px 20px 20px; }
  section               { padding: 48px 24px; }
  .section-header       { margin-bottom: 36px; }
}

@media(max-width:480px) {
  .preloader-brand      { font-size: 30px; }
  :root                 { --h-ticker: 32px; }
  .ticker-item          { font-size: 9.5px; padding: 0 14px; }
  .navbar               { padding: 10px 16px; }
  .navbar.scrolled      { padding: 8px 16px; }
  .hero                 { min-height: 520px; padding-top: 32px; }
  .slide-title          { font-size: clamp(22px,9.5vw,40px); }
  .slide-desc           { font-size: 14px; }
  .stat-val             { font-size: 30px; }
  section               { padding: 40px 16px; }
  .split-left, .split-right { padding: 36px 20px; }
  .btn                  { padding: 12px 24px; font-size: 12.5px; }
  .footer               { padding: 28px 16px 18px; }
  .whatsapp-btn         { bottom: 20px; right: 20px; width: 52px; height: 52px; font-size: 22px; }
}

/* ============================================================
   MOBILE — Additional fixes
   ============================================================ */

/* Slider progress bar active state */
.slider-progress-bar.active { background: var(--gold); }

/* Hero CTA buttons — full width on small phones */
@media(max-width:480px) {
  .slide-actions .btn { width: 100%; justify-content: center; }
}

/* Contact card — reduce horizontal padding on mobile */
@media(max-width:900px) {
}
@media(max-width:640px) {
}
@media(max-width:480px) {
}

/* About stat chips — stay within bounds on tiny screens */
@media(max-width:480px) {
  .stat-chip          { padding: 10px 14px; min-width: 80px; }
  .stat-chip strong   { font-size: 1.1rem; }
  .stat-chip.c1       { bottom: 0; left: 0; }
  .stat-chip.c2       { top: 0;   right: 0; }
}


/* ============================================================
   ══════════════════════════════════════════════════════════
   TAJ WAQAR — DOMAIN MODULES   Components specific to the tourism investment platform
   ══════════════════════════════════════════════════════════
   ============================================================ */

/* ------------------------------------------------------------
   TICKER — technology strip
   Variation colorée (hausse / baisse) façon terminal financier
   ------------------------------------------------------------ */
.ticker-item .tk-label { color: rgba(255,255,255,.72); font-weight: 600; }
.ticker-item .tk-val   { font-family: var(--font-mono); font-weight: 700; letter-spacing: .6px; }
.ticker-item .tk-var {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  padding: 2px 7px; border-radius: 3px; letter-spacing: .4px;
}
.ticker-item .tk-var.up   { color: #5BE0BC; background: rgba(14,159,110,.28); }
.ticker-item .tk-var.down { color: #F2AFAF; background: rgba(179,69,58,.30); }
.ticker-item .tk-var i    { font-size: 8px; color: inherit; }

/* ------------------------------------------------------------
   KEY FIGURES BAND   S'appuie sur le compteur animé de main.js (.stat-val[data-count])
   ------------------------------------------------------------ */
.kpi-section {
  padding: 0 clamp(20px, 6vw, 80px);
  max-width: 1280px; margin: 0 auto;
}
.kpi-band {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--white);
  border: 1px solid var(--dune);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.kpi {
  padding: 40px 28px;
  border-right: 1px solid var(--dune);
  position: relative;
  transition: background .35s;
}
.kpi:last-child { border-right: 0; }
.kpi::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 0; height: 3px; background: var(--gold);
  transition: width .45s cubic-bezier(.22,1,.36,1);
}
.kpi:hover { background: var(--ivory); }
.kpi:hover::before { width: 100%; }
.kpi-figure {
  display: flex; align-items: baseline; gap: 2px;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.4vw, 2.9rem);
  font-weight: 800; color: var(--ink); line-height: 1;
}
.kpi-figure .kpi-suffix { font-size: .5em; color: var(--gold-deep); font-weight: 700; }
.kpi-label {
  margin-top: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: 2.2px;
  text-transform: uppercase; color: var(--text-soft);
}
.kpi-desc { margin-top: 8px; font-size: .88rem; color: var(--text-soft); line-height: 1.6; }
@media(max-width:900px) {
  .kpi-band { grid-template-columns: repeat(2, 1fr); }
  .kpi:nth-child(2n) { border-right: 0; }
  .kpi:nth-child(-n+2) { border-bottom: 1px solid var(--dune); }
}
@media(max-width:520px) {
  .kpi-band { grid-template-columns: 1fr; }
  .kpi { border-right: 0; border-bottom: 1px solid var(--dune); padding: 28px 24px; }
  .kpi:last-child { border-bottom: 0; }
}

/* ------------------------------------------------------------
   BRAND — the GB monogram in the "Studio" block
   ------------------------------------------------------------ */
.brand-mark {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  background: var(--white);
  border-radius: 50%;
}
.brand-mark-inner { text-align: center; line-height: 1; }
.brand-mark-glyph {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 8vw, 5rem); font-weight: 800;
  color: var(--ink); letter-spacing: -2px;
}
.brand-mark-glyph em { color: var(--gold-deep); font-style: normal; }
.brand-mark-rule {
  width: 54px; height: 2px; background: var(--gold);
  margin: 14px auto 12px; border-radius: 2px;
}
.brand-mark-word {
  font-size: 10px; font-weight: 700; letter-spacing: 4.5px;
  text-transform: uppercase; color: var(--text-soft);
}

.nav-links a.nav-on { color: var(--gold-soft); }

/* ============================================================
   TOUCH — target sizes and legibility on phone and tablet
   ============================================================
   Relevé sur écrans de 360 à 1024px : la mise en page ne déborde
   nulle part, mais plusieurs liens n'offraient qu'une vingtaine de
   pixels de hauteur au doigt, et le sous-titre du logo descendait à
   8,5px. On élargit la zone tactile sans toucher au rythme visuel.
   ============================================================ */
@media (max-width: 1024px) {

  /* Liens du pied de page : 22px de haut → 44px de zone tactile.
     La gouttière de la liste passe à 0, le rembourrage la remplace,
     l'espacement perçu reste donc le même. */
  .footer-col ul { gap: 0; }
  .footer-col ul a { padding: 11px 0; }

  /* Sous-titre du logo : 8,5px est sous le seuil de lisibilité */
  .nav-logo-sub { font-size: 10px; letter-spacing: 1.6px; }
}

/* ============================================================
   HOVER RESERVED FOR POINTING DEVICES   ============================================================
   Sur un écran tactile, le doigt qui effleure une carte pendant
   le défilement déclenche « :hover » — et l'état RESTE jusqu'au
   prochain appui ailleurs. La carte se soulevait alors de 10px
   et sa photo grossissait de 5 % : d'où l'impression qu'un bloc
   « remonte tout seul » au défilement.

   On neutralise ces effets décoratifs là où il n'y a pas de
   vrai pointeur. Les couleurs et ombres de survol, elles, sont
   conservées : elles ne déplacent rien.
   ============================================================ */
/* « pointer: coarse » en plus de « hover: none » : certains navigateurs
   Android annoncent à tort savoir survoler, mais jamais un pointeur fin. */
@media (hover: none), (pointer: coarse) {
  .circle-media:hover .ring img           { transform: none; }
  .social-pill:hover                      { transform: none; }
  .add:hover                              { transform: none; }
  /* Resting stagger and shadow stay — only the movement is a
     pointer-only affordance (see the note above this block). */
  .otla-shot:hover { --otla-hover: 0px; }
  /* Without this, a finger brushing the rail while scrolling the page
     pauses the marquee via :hover same as above — except here there is
     no mouse to later move off and release it, so it stays paused
     until something else happens to clear :hover (if anything ever
     does). What looked like "the carousel stops for good" was this. */
  .otla-rail:hover .otla-track { animation-play-state: running; }
}

/* ------------------------------------------------------------
   Hero sur téléphone : bloc de texte remonté.
   Le contenu était centré dans la bande visible (137px au-dessus,
   127px en dessous sur un 390x844). Un rembourrage bas décale le
   centrage vers le haut ; exprimé en vh, le décalage suit la
   hauteur de l'écran au lieu d'être figé.
   ------------------------------------------------------------ */
@media (max-width: 700px) {
  /* Ancrage haut plutot que centrage : l ecart sous la barre de navigation
     devient identique sur tous les telephones, au lieu de varier de 44 a
     107px selon la hauteur d ecran. Les barres fixes occupent ~94px. */
  .hero .slide-content { justify-content: flex-start; padding: 132px 24px 0; }
}

/* ------------------------------------------------------------
   Hauteur du hero sur téléphone.
   À 100vh, le bloc de texte étant ancré en haut, tout le bas de
   l'écran restait vide. On ramène le hero à une fraction de la
   hauteur d'écran, bornée pour rester lisible sur les petits
   appareils comme sur les grands.
   ------------------------------------------------------------ */
@media (max-width: 700px) {
  /* Plancher a 660px : a 600 la pagination du hero venait toucher les
     boutons sur un ecran de 800px de haut (espace mesure : 0). */
  .hero { height: clamp(660px, 76vh, 740px); }
}

/* Chevauchement de la carte des chiffres sur la bande sombre.
   Etait ecrit en dur dans le balisage : place ici pour rester ajustable
   par palier. */
.kpi-section {
  /* Chevauchement franc : la carte mord largement dans le bleu, comme
     avant l ajout de la marge basse a la bande. Cette marge dégage le
     texte, la remontee accrue reprend l effet visuel. */
  margin-top: -68px; position: relative; z-index: 5;
  /* Marge basse alignee sur le retrait haut de la section suivante :
     sans elle le premier separateur collait a la carte (28px au-dessus
     du trait contre 80 en dessous). */
  padding-bottom: clamp(36px, 3.6vw, 52px);
}

/* ════════════════════════════════════════════════════════════
   ════════════════════════════════════════════════════════════
   TAJ WAQAR — STUDIO MODULES
   Components that exist here and not in the reference build.
   ════════════════════════════════════════════════════════════
   ════════════════════════════════════════════════════════════ */

/* ============================================================
   LANGUAGE SWITCHER
   ------------------------------------------------------------
   Three locales, so a dropdown would cost a tap for no gain:
   the three codes sit side by side and the active one is a
   filled pill. The control lives inside the navbar on desktop
   and is repeated at the foot of the mobile drawer, because the
   drawer covers the navbar entirely once open.
   ============================================================ */
.lang-switch {
  display: inline-flex; align-items: center;
  gap: 2px; padding: 3px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50px;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
  transition: border-color .4s, background .4s;
}
.navbar.scrolled .lang-switch {
  border-color: var(--dune);
  background: var(--cream);
}
.lang-switch a {
  display: block; padding: 5px 11px;
  border-radius: 50px;
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .4px; text-transform: uppercase;
  color: rgba(255,255,255,.72); text-decoration: none;
  line-height: 1; transition: .28s;
}
.navbar.scrolled .lang-switch a { color: var(--text-soft); }
.lang-switch a:hover { color: white; background: rgba(255,255,255,.12); }
.navbar.scrolled .lang-switch a:hover { color: var(--ink); background: white; }
.lang-switch a.on { background: var(--gold); color: var(--ink); font-weight: 700; }
.navbar.scrolled .lang-switch a.on { background: var(--gold); color: var(--ink); }

/* Repeated inside the mobile drawer, on a light field. */
.mnav-lang-li { display: none; }
.mnav-lang-li .lang-switch {
  width: 100%; justify-content: center;
  border-color: var(--dune); background: var(--cream);
}
.mnav-lang-li .lang-switch a { color: var(--text-mid); font-size: 12px; padding: 9px 18px; }
.mnav-lang-li .lang-switch a.on { color: var(--ink); }

/* ============================================================
   RIGHT-TO-LEFT (Arabic)
   ------------------------------------------------------------
   Everything above is written left-to-right with physical
   properties, because that is what the reference build uses and
   converting 3,000 lines to logical properties would be a
   rewrite, not a port. This layer therefore mirrors only what
   actually breaks under RTL: text alignment, the handful of
   directional paddings and borders, the arrow glyphs, and the
   two animations that translate on the X axis.
   ------------------------------------------------------------
   Rules applied here:
   - flex and grid mirror themselves under dir=rtl: nothing to do;
   - a border-left accent has to become border-right;
   - an icon that POINTS at something is flipped, an icon that
     is a SYMBOL (check, star, dot) is not;
   - anything that is a number, a code, a ref or a Latin brand
     name stays LTR inside the Arabic run, via .ltr or bdi.
   ============================================================ */
[dir="rtl"] {
  --font:         var(--font-ar);
  --font-display: var(--font-ar);
}
[dir="rtl"] body { line-height: 1.85; }

/* Arabic has no italic; a synthetic slant only smears the
   letterforms, so quotes go upright and lean on weight. */
[dir="rtl"] .about-quote,
[dir="rtl"] .intro-tagline { font-style: normal; font-weight: 600; }

/* Latin-script runs kept upright and left-to-right inside an
   Arabic sentence: brand names, versions, refs, counters. */
[dir="rtl"] .ltr,
[dir="rtl"] .slider-count,
[dir="rtl"] .nav-logo-text,
[dir="rtl"] .footer-logo-text,
[dir="rtl"] .preloader-brand,
[dir="rtl"] .brand-mark-glyph,
[dir="rtl"] .kpi-figure,
[dir="rtl"] .lang-switch { direction: ltr; unicode-bidi: isolate; }

/* Left-hand accents become right-hand accents. */
[dir="rtl"] .intro-tagline,
[dir="rtl"] .about-quote {
  border-left: 0;
  border-right: 3px solid var(--gold-soft);
  padding-left: 0; padding-right: 14px;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
[dir="rtl"] .footer-col ul a:hover { padding-left: 0; padding-right: 4px; }

/* Blocks whose copy is set flush to the reading edge. */
[dir="rtl"] .cabinet-points li,
[dir="rtl"] .contact-list li,
[dir="rtl"] .slide-content,
[dir="rtl"] .approche-text,
[dir="rtl"] .feature,
[dir="rtl"] .kpi { text-align: right; }

/* Blocks that stay centred in both directions. */
[dir="rtl"] .section-header { text-align: center; }

/* Arrow glyphs point the other way; checks and symbols do not. */
[dir="rtl"] .btn i.fa-arrow-right,
[dir="rtl"] .mnav-arrow { transform: scaleX(-1); }

/* The ticker's X-axis animation. .otla-track pins its own `direction`
   instead (see assets/css/style.css, OTLA APP), so it needs no override
   here. */
[dir="rtl"] .ticker-inner { animation-name: ticker-rtl; }
@keyframes ticker-rtl {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}
[dir="rtl"] .kpi::before { left: auto; right: 0; }

/* The drawer slides in from the reading edge. */
[dir="rtl"] .nav-links { left: 0; right: auto; }
[dir="rtl"] .social-sidebar { right: auto; left: 18px; }


/* ============================================================
   NAVBAR RIGHT-HAND CLUSTER
   ------------------------------------------------------------
   The navbar was a two-child flex (logo | links) in the
   reference build. It now carries a third element, so the
   switcher and the hamburger are wrapped together and that
   wrapper becomes the right-hand child — otherwise
   space-between pushes the three apart and the logo drifts.
   ============================================================ */
.nav-right { display: flex; align-items: center; gap: 14px; }

@media (max-width: 1290px) {
  /* Below the drawer breakpoint the switcher moves inside the
     drawer, because the navbar no longer has room for it next
     to the hamburger on a 360px screen. */
  .nav-lang { display: none; }

  .nav-links.open .mnav-lang-li {
    display: block; width: 100%;
    margin-top: 14px; padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.12);
  }
  /* The drawer styles every <a> as a full-width card; the three
     locale codes have to opt out of that. */
  .nav-links.open .mnav-lang-li .lang-switch {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.14);
  }
  .nav-links.open .mnav-lang-li .lang-switch a {
    width: auto; flex: 1;
    background: transparent; border: none;
    padding: 12px 10px; margin: 0;
    font-family: var(--font-mono);
    font-size: 13px; font-weight: 600;
    color: rgba(255,255,255,.7);
    justify-content: center; border-radius: 50px;
  }
  .nav-links.open .mnav-lang-li .lang-switch a:hover {
    transform: none; background: rgba(255,255,255,.12); color: white;
  }
  .nav-links.open .mnav-lang-li .lang-switch a.on {
    background: var(--gold); color: var(--ink);
  }

  /* The stagger ran to six items; the drawer now holds ten. */
  .nav-links.open li:nth-child(7)  { animation-delay: .35s; }
  .nav-links.open li:nth-child(8)  { animation-delay: .40s; }
  .nav-links.open li:nth-child(9)  { animation-delay: .45s; }
  .nav-links.open li:nth-child(10) { animation-delay: .50s; }
}

/* ------------------------------------------------------------
   RTL — typography
   ------------------------------------------------------------
   Two Latin-script habits actively damage Arabic and have to be
   switched off, not merely adjusted:

   1. letter-spacing. Arabic is cursive; tracking inserts gaps
      between letters that are supposed to join, so a spaced
      Arabic word reads as a string of disconnected shapes. The
      design uses tracking heavily — eyebrows, tags, buttons,
      labels — so this is a blanket reset, re-enabled only on the
      Latin islands below.

   2. The monospace face. It is the brand's accent register, but
      it carries no Arabic glyphs at all, so any Arabic set in it
      falls through to whatever monospace font the system happens
      to have — a different skeleton, mid-sentence. Arabic accents
      therefore use the Arabic family and lean on colour alone,
      which was already the distinguishing signal.

   The !important is deliberate: these override dozens of specific
   rules spread across the sheet above, and enumerating each one
   would leave a trap for the next person who adds a tracked label.
   ------------------------------------------------------------ */
[dir="rtl"] *,
[dir="rtl"] *::before,
[dir="rtl"] *::after { letter-spacing: 0 !important; }

/* Latin islands: still Latin, so they keep their tracking. Brand
   text is NOT here — تاج الوقار is set as real Arabic in ar.php, not
   as a forced-LTR Latin mark, so nav-logo-text, footer-logo-text
   and preloader-brand render as ordinary (untracked) Arabic. Only
   the monogram glyph stays a fixed Latin mark, the way a brand
   initial normally does regardless of the surrounding language. */
[dir="rtl"] .ltr,
[dir="rtl"] .slider-count,
[dir="rtl"] .kpi-figure,
[dir="rtl"] .brand-mark-glyph,
[dir="rtl"] .brand-mark-word,
[dir="rtl"] .lang-switch a { letter-spacing: .04em !important; }

/* Accents that lean on a true italic on Latin pages. Arabic has no
   italic — a synthetic slant only smears the letterforms — so the
   emphasis here is colour and weight alone, already set by the base
   rule; RTL only has to cancel the slant. */
[dir="rtl"] .section-title span,
[dir="rtl"] .section-title .accent-italic,
[dir="rtl"] .slide-title .accent,
[dir="rtl"] .approche-h2 em,
[dir="rtl"] .split-left-title span,
[dir="rtl"] .split-right-title span,
[dir="rtl"] .nav-logo-text em,
[dir="rtl"] .footer-logo-text span,
[dir="rtl"] .preloader-brand span {
  font-style: normal;
}

/* brand_start + brand_end are set with no space between them — a
   deliberate tight wordmark in Latin ("TAJWAQAR" reads as one mark),
   but "تاج" + "الوقار" run together the same way and the result reads
   as a single garbled word, not two: تاجالوقار instead of تاج الوقار.
   A margin fixes the gap without touching the two-span markup or the
   English lockup. */
[dir="rtl"] .nav-logo-text em,
[dir="rtl"] .footer-logo-text span,
[dir="rtl"] .preloader-brand span {
  margin-right: .28em;
}

/* ============================================================
   PHONE FIELD — country picker (intl-tel-input)
   ------------------------------------------------------------
   The library ships its own neutral styling; these rules pull
   the widget into the form's visual language — same border,
   radius, focus ring and type — so the phone field does not
   read as a foreign component dropped into the card.

   Layout is left to the library: it measures the flag button
   and sets the input's padding itself, and it already carries
   the [dir=rtl] mirroring, so nothing here touches geometry.
   ============================================================ */
.field .iti { width: 100%; display: block; }

/* The flag button lives inside the input's border. */
.field .iti__selected-country {
  border-radius: 12px 0 0 12px;
  transition: background .25s;
}
.field .iti__selected-country:hover,
.field .iti__selected-country[aria-expanded="true"] { background: var(--cream); }
[dir="rtl"] .field .iti__selected-country { border-radius: 0 12px 12px 0; }

.field .iti__selected-dial-code {
  font-family: var(--font-mono); font-size: 13.5px;
  color: var(--text-mid); font-weight: 500;
}
.field .iti__arrow { border-top-color: var(--text-soft); }
.field .iti__arrow--up { border-bottom-color: var(--text-soft); }

/* Dropdown — a card, like every other floating surface on the site. */
.iti--container { z-index: 1200; }
.iti__dropdown-content {
  border: 1px solid var(--dune);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  background: white;
  font-family: var(--font);
  overflow: hidden;
}
.iti__search-input {
  padding: 12px 14px;
  border: 0; border-bottom: 1px solid var(--dune);
  font-family: var(--font); font-size: 14px;
  color: var(--text-mid); background: var(--ivory);
  outline: none;
}
.iti__search-input:focus { background: white; }
.iti__country-list { padding: 6px 0; }
.iti__country {
  padding: 9px 14px; font-size: 14px; color: var(--text-mid);
}
.iti__country-name { color: var(--text-mid); }
.iti__dial-code {
  font-family: var(--font-mono); font-size: 12.5px; color: var(--text-soft);
}
.iti__country.iti__highlight { background: var(--cream); }
.iti__country[aria-selected="true"] { background: rgba(201,162,39,.10); }
.iti__country[aria-selected="true"] .iti__country-name { color: var(--ink); font-weight: 600; }
.iti__divider { border-bottom-color: var(--dune); margin: 6px 0; }

/* Focus ring reaches the whole field, flag button included. */
.field .iti:focus-within .iti__selected-country { background: var(--cream); }

@media (max-width: 520px) {
  .iti__dropdown-content { border-radius: var(--radius-sm); }
  .iti__country { padding: 11px 14px; }   /* touch-sized rows */
}

/* RTL: the dial code is a Latin token ("+218") and must not be
   reordered to "216+"; the typed number sits against it rather than
   at the far edge of the field, so the eye reads flag, code, number
   as one unit. Digits are direction-neutral, so forcing ltr on the
   input changes nothing about how they are entered. */
[dir="rtl"] .iti__selected-dial-code { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .field .iti input { direction: ltr; text-align: right; }

/* RTL: the contact card. Icons inside inputs swap sides, the select's
   chevron too, and the WhatsApp arrow points the reading way. */
[dir="rtl"] .contact-side,
[dir="rtl"] .contact-form-card { text-align: right; }
[dir="rtl"] .input-wrap > i { left: auto; right: 16px; }
[dir="rtl"] .input-wrap input { padding-left: 16px; padding-right: 42px; }
[dir="rtl"] .select-wrap > i { right: auto; left: 16px; }
[dir="rtl"] .select-wrap select { padding-right: 16px; padding-left: 44px; }
[dir="rtl"] .contact-wa-arrow { transform: scaleX(-1); }
[dir="rtl"] .contact-wa:hover .contact-wa-arrow { transform: scaleX(-1) translateX(4px); }
[dir="rtl"] .btn-send:hover i { transform: scaleX(-1) translateX(4px); }
/* The small mono labels in the contact card: Arabic face, but still small. */
[dir="rtl"] .contact-list-body small,
[dir="rtl"] .contact-next-title { font-family: var(--font-ar); font-size: 12px; }
[dir="rtl"] .contact-next li b { font-family: var(--font-mono); }