/* =====================================================
   Sterling Solutions — Arabic / RTL layer
   Load AFTER style.css. Every rule is scoped to [dir="rtl"],
   so this file is inert on the English site.

   Fixes, in order:
   1. Arabic typeface (the Latin brand faces carry no Arabic glyphs)
   2. Letter-spacing and uppercase, which break Arabic letter joining
   3. Type scale and line-height, tuned for Cairo
   4. Directional bugs the logical properties did not catch
   5. Bidi isolation for Latin fragments inside Arabic lines
   ===================================================== */

:root {
  /* Cairo across all three roles. The English site draws hierarchy from
     three faces (Cinzel display / Montserrat labels / Lato body); the Arabic
     site has one face, so hierarchy has to come from weight and size instead.
     Cairo ships 200-1000, which is enough range to carry it:
       display 700 · labels 600 · body 400 · long-form body 300 */
  --font-ar: 'Cairo', 'Segoe UI', system-ui, sans-serif;

  /* Round-3 hero. The two-word headline is the one place the Arabic scale
     moved: -12px against EN at 1440, not the -4px used elsewhere. The -4px
     was derived across a three-line sentence, where Cairo's larger x-height
     and 700 weight are diluted over many lines; on a two-word line that mass
     lands in one measure, so نقدم الحلول at 84px reads a size larger than
     Delivering Solutions at 84px. Down the scale: AR 34 / 48 / 56 / 72. */
  --hero-display-ar: 34px;
}

/* -----------------------------------------------------
   1. Typeface and weight roles
   ----------------------------------------------------- */
[dir="rtl"] .cinzel { font-family: var(--font-ar); font-weight: 700; }
[dir="rtl"] .mont   { font-family: var(--font-ar); font-weight: 600; }
[dir="rtl"] .lato   { font-family: var(--font-ar); font-weight: 400; }

/* Long-form body copy drops to 300, matching Lato 300 on the English site. */
[dir="rtl"] :is(.hero-copy, .section-copy, .page-intro, .cta-copy,
                .service-copy, .story-copy p) {
  font-weight: 300;
}

/* Components that hard-code a family in style.css */
[dir="rtl"] :is(.form-group label,
                .form-group input,
                .form-group textarea,
                .office-details h3,
                .map-placeholder) {
  font-family: var(--font-ar);
}

/* -----------------------------------------------------
   2. Kill letter-spacing and uppercase
   Tracking separates Arabic letters that must stay joined;
   text-transform is a no-op on Arabic and only affects any
   Latin fragment sitting in the same string.
   ----------------------------------------------------- */
[dir="rtl"] :is(.btn, .eyebrow, .brand-name, .nav-link, .lang-toggle,
                .pillar-title, .service-title, .service-link, .approach-title,
                .footer-heading, .footer-legal, .breadcrumb, .team-role,
                .team-name, .offering-title, .offering-link, .page-title,
                .section-title, .cta-title, .hero-title,
                .form-group label, .office-details h3, .office-item-label,
                .map-placeholder) {
  letter-spacing: 0;
  text-transform: none;
}

/* -----------------------------------------------------
   3. Type scale and leading
   Cairo has a large x-height and sets close to Latin at the same
   pixel value, so these bumps are modest — roughly +5-10% on body
   text, more on the 9-11px labels, which are unreadable in Arabic
   at their Latin size. Leading rises throughout: Arabic needs the
   room, and 1.16 on the hero clipped descenders.
   ----------------------------------------------------- */
[dir="rtl"] .eyebrow        { font-size: 11.5px; }
[dir="rtl"] .btn            { font-size: 12.5px; white-space: normal; }
[dir="rtl"] .nav-link       { font-size: 14.5px; }
[dir="rtl"] .brand-name     { font-size: 17px; }
[dir="rtl"] .pillar-title   { font-size: 13.5px; }
[dir="rtl"] .service-title  { font-size: 14px; }
[dir="rtl"] .service-link,
[dir="rtl"] .offering-link  { font-size: 12px; }
[dir="rtl"] .approach-title { font-size: 14.5px; }
[dir="rtl"] .footer-heading { font-size: 12.5px; }
[dir="rtl"] .footer-links   { font-size: 13px; }
[dir="rtl"] .footer-blurb   { font-size: 13px; line-height: 1.85; }
[dir="rtl"] .footer-copyright { font-size: 11.5px; }
[dir="rtl"] .footer-legal   { font-size: 11px; }
[dir="rtl"] .breadcrumb     { font-size: 11.5px; }
[dir="rtl"] .team-role      { font-size: 12px; }
[dir="rtl"] .team-name      { font-size: 14.5px; }
[dir="rtl"] .team-bio,
[dir="rtl"] .pillar-copy,
[dir="rtl"] .offering-copy  { font-size: 13.5px; line-height: 1.85; }
[dir="rtl"] .service-copy   { font-size: 13px; line-height: 1.85; }
[dir="rtl"] .approach-copy,
[dir="rtl"] .story-copy p   { font-size: 14px; line-height: 1.95; }
[dir="rtl"] .section-copy   { font-size: 14px; line-height: 1.95; }
[dir="rtl"] .hero-copy      { font-size: 14.5px; line-height: 1.95; }
[dir="rtl"] .page-intro     { font-size: 14px; line-height: 1.95; }
[dir="rtl"] .cta-copy       { font-size: 14px; line-height: 1.85; }
[dir="rtl"] .form-group label,
[dir="rtl"] .office-item-label { font-size: 12px; }
[dir="rtl"] .form-group input,
[dir="rtl"] .form-group textarea,
[dir="rtl"] .office-item-value { font-size: 14.5px; }
[dir="rtl"] .map-placeholder   { font-size: 12px; }

/* Display sizes. Cairo 700 carries more weight on the page than Cinzel 500
   at the same value, so these sit slightly below the English sizes rather
   than above. The leading is the change that matters most. */
[dir="rtl"] .hero-title    { font-size: var(--hero-display-ar); line-height: 1.4; }
[dir="rtl"] .section-title { font-size: 24px; line-height: 1.5; }
[dir="rtl"] .page-title    { font-size: 26px; line-height: 1.5; }
[dir="rtl"] .cta-title     { font-size: 22px; line-height: 1.5; }

@media (min-width: 768px) {
  [dir="rtl"] { --hero-display-ar: 48px; }
}

@media (min-width: 1024px) {
  [dir="rtl"] { --hero-display-ar: 56px; }
  [dir="rtl"] .hero-copy               { font-size: 16.5px; }
  [dir="rtl"] .section-title           { font-size: 36px; }
  [dir="rtl"] .services .section-title { font-size: 32px; }
  [dir="rtl"] .page-title              { font-size: 44px; }
  [dir="rtl"] .cta-title               { font-size: 30px; }
  [dir="rtl"] .section-copy            { font-size: 16px; }
  [dir="rtl"] .page-intro              { font-size: 16px; }
  [dir="rtl"] .cta-copy                { font-size: 15px; }
  [dir="rtl"] .nav-link                { font-size: 13px; }
  [dir="rtl"] .nav-cta                 { font-size: 12px; }
  [dir="rtl"] .btn                     { font-size: 13px; }
  [dir="rtl"] .pillar-title            { font-size: 13.5px; }
  [dir="rtl"] .service-title           { font-size: 14px; }
  [dir="rtl"] .approach-title          { font-size: 15px; }
  [dir="rtl"] .offering-title          { font-size: 15px; }
  [dir="rtl"] .footer-heading          { font-size: 12.5px; }
  [dir="rtl"] .breadcrumb              { font-size: 12px; }
}

@media (min-width: 1440px) {
  [dir="rtl"] { --hero-display-ar: 72px; }
  [dir="rtl"] .hero-title { line-height: 1.32; }
  /* Arabic holds نقدم الحلول on one line at every width, so it does not
     need the 600px measure the English stack depends on. */
  [dir="rtl"] .hero-inner { max-width: 760px; }
}

/* -----------------------------------------------------
   4. Directional bugs
   ----------------------------------------------------- */

/* The hero is one box painting navy + photo + two fades. Background
   geometry has no logical equivalent - background-position: right does not
   flip with dir - so RTL restates the horizontal fade at 270deg and moves
   the photo to left center. Same element, same layer count; nothing is
   mirrored with transform. */
[dir="rtl"] .hero {
  background-image:
    linear-gradient(180deg,
      var(--navy) 0%,
      rgba(var(--navy-rgb), 0.45) 6%,
      rgba(var(--navy-rgb), 0) 20%,
      rgba(var(--navy-rgb), 0) 80%,
      rgba(var(--navy-rgb), 0.5) 94%,
      var(--navy) 100%),
    linear-gradient(270deg,
      var(--navy) 0%,
      var(--navy) 62%,
      rgba(var(--navy-rgb), 0.55) 82%,
      rgba(var(--navy-rgb), 0.18) 100%),
    var(--hero-photo);
  background-position: center, center, left center;
}

@media (min-width: 768px) {
  [dir="rtl"] .hero {
    background-image:
      linear-gradient(180deg,
        var(--navy) 0%,
        rgba(var(--navy-rgb), 0.45) 6%,
        rgba(var(--navy-rgb), 0) 20%,
        rgba(var(--navy-rgb), 0) 80%,
        rgba(var(--navy-rgb), 0.5) 94%,
        var(--navy) 100%),
      linear-gradient(270deg,
        var(--navy) 0%,
        var(--navy) 58%,
        rgba(var(--navy-rgb), 0.55) 76%,
        rgba(var(--navy-rgb), 0.15) 100%),
      var(--hero-photo);
    background-position: center, center, left center;
  }
}

@media (min-width: 1024px) {
  [dir="rtl"] .hero {
    background-image:
      linear-gradient(180deg,
        var(--navy) 0%,
        rgba(var(--navy-rgb), 0.45) 6%,
        rgba(var(--navy-rgb), 0) 20%,
        rgba(var(--navy-rgb), 0) 80%,
        rgba(var(--navy-rgb), 0.5) 94%,
        var(--navy) 100%),
      linear-gradient(270deg,
        var(--navy) 0%,
        var(--navy) 54%,
        rgba(var(--navy-rgb), 0.55) 71%,
        rgba(var(--navy-rgb), 0.15) 100%),
      var(--hero-photo);
    background-position: center, center, left center;
  }
}

/* Mobile nav toggle: the short third bar should taper toward the inline
   edge the icon sits on. In RTL that edge is the right. */
[dir="rtl"] .nav-toggle { align-items: flex-end; }

/* Inputs: type LTR for email and phone, but keep the field right-aligned
   so the caret starts where the reader expects it. */
/* The user types a Latin address here, so the field stays LTR. */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"] { direction: ltr; }

/* Form status and error text follow the paragraph direction. */

/* -----------------------------------------------------
   5. Bidi isolation for Latin inside Arabic
   Without isolation, a trailing full stop or bracket after an
   email address, phone number or Latin address jumps to the
   wrong end of the line.
   ----------------------------------------------------- */
.ltr {
  direction: ltr;
  unicode-bidi: isolate;
}


[dir="rtl"] :is(.brand-tagline, .footer-lang, .lang-toggle) {
  unicode-bidi: isolate;
}

/* The wordmark tagline stays Latin and keeps its original face and tracking. */
[dir="rtl"] .brand-tagline {
  direction: ltr;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
}

/* Approach step numbers are Latin digits and must not be re-ordered. */

/* Email and telephone links anywhere on the page. */
[dir="rtl"] a[href^="mailto:"],
[dir="rtl"] a[href^="tel:"] {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* -----------------------------------------------------
   6. Reduced motion — quality floor, applies to both locales
   ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* -----------------------------------------------------
   7. "Learn More" arrow
   The arrow was baked into the translation string, which meant the
   Arabic copy carried a hard-coded direction. It now lives in CSS and
   flips with the locale.
   ----------------------------------------------------- */
.service-link::after,
.offering-link::after {
  content: '\00A0\2192';
}
[dir="rtl"] .service-link::after,
[dir="rtl"] .offering-link::after {
  content: '\00A0\2190';
}

/* -----------------------------------------------------
   8. Arabic-Indic numerals
   Cinzel carries no Arabic-Indic glyphs, but rule 1 above already
   remaps .cinzel and .mont to Cairo under [dir="rtl"], so every
   numeral resolves to Cairo without a class swap.

   Cairo's digits set smaller than Cinzel's lining figures, so each
   numeral takes 600 and one step up. Colour, tracking and position
   are unchanged. No numeral carries a direction lock: Arabic-Indic
   digits lay out correctly in RTL, and locking them forces the wrong
   order inside a mixed string.
   ----------------------------------------------------- */
[dir="rtl"] :is(.problem-num, .card-num, .bench-num, .approach-number, .cred-year) {
  font-weight: 600;
}
[dir="rtl"] .problem-num     { font-size: 18px; }  /* 15 -> 18 */
[dir="rtl"] .card-num        { font-size: 17px; }  /* 14 -> 17 */
[dir="rtl"] .bench-num       { font-size: 17px; }  /* 14 -> 17 */
[dir="rtl"] .approach-number { font-size: 38px; }  /* 36 -> 38 */
[dir="rtl"] .cred-year       { font-size: 12px; }  /* 10 -> 12, not in the
                                                      table; matched to the
                                                      +2 step used at 44 -> 46 */

/* The year column carried dir=ltr to keep Latin years upright. The years
   are Arabic-Indic now, so the lock is removed rather than inherited. */
[dir="rtl"] .cred-year { direction: inherit; unicode-bidi: normal; }

@media (min-width: 1024px) {
  [dir="rtl"] .approach-number { font-size: 46px; }  /* 44 -> 46 */
}


/* -----------------------------------------------------
   ROUND 3 — Arabic eyebrow ramp and home heading tiers
   The Latin side ramps 9 / 9.5 / 10 / 11 with tracking;
   Cairo ramps 11.5 / 12 / 12.5 / 13 and stays untracked,
   per the round-3 frames and the 1024 / 768 / 375 proofs.
   Weight is already 600 via `[dir="rtl"] .mont`.

   Headings mirror the Latin two-tier split at the Arabic
   sizes the frames set. This replaces
   `[dir="rtl"] .services .section-title`, a round-2 hook
   the round-3 markup no longer carries. The rest of the
   Cairo scale is untouched.
   ----------------------------------------------------- */
[dir="rtl"] .page-home :is(.section-problems, .section-rules)
  .section-title { font-size: 22px; }
[dir="rtl"] .page-home :is(.section-programs, .section-services,
                .section-approach) .section-title { font-size: 20px; }

@media (min-width: 768px) {
  [dir="rtl"] .eyebrow { font-size: 12px; }

  [dir="rtl"] .page-home :is(.section-problems, .section-rules)
    .section-title { font-size: 26px; }
  [dir="rtl"] .page-home :is(.section-programs, .section-services,
                  .section-approach) .section-title { font-size: 24px; }
}

@media (min-width: 1024px) {
  [dir="rtl"] .eyebrow { font-size: 12.5px; }

  [dir="rtl"] .page-home :is(.section-problems, .section-rules)
    .section-title { font-size: 30px; }
  [dir="rtl"] .page-home .section-programs .section-title { font-size: 27px; }
  [dir="rtl"] .page-home :is(.section-services, .section-approach)
    .section-title { font-size: 26px; }
}

@media (min-width: 1440px) {
  [dir="rtl"] .eyebrow { font-size: 13px; }

  [dir="rtl"] .page-home :is(.section-problems, .section-rules)
    .section-title { font-size: 34px; }
  [dir="rtl"] .page-home :is(.section-programs, .section-services,
                  .section-approach) .section-title { font-size: 30px; }
}


/* -----------------------------------------------------
   ROUND 3 — inner-page heading tiers, Arabic
   The Cairo counterparts of the block at the foot of
   css/style.css, from the same frames. `.page-title` at
   44px was already correct and is not repeated here.
   Home stays on its own `[dir="rtl"] .page-home` rules,
   which outrank these.
   ----------------------------------------------------- */
@media (min-width: 1024px) {
  [dir="rtl"] .cta-title { font-size: 26px; }
  [dir="rtl"] .page-home .cta-title { font-size: 28px; }

  [dir="rtl"] .story .section-title { font-size: 34px; }

  [dir="rtl"] :is(.section-programs, .section-services,
                  .section-consultants, .section-bench)
    .section-title { font-size: 30px; }

  [dir="rtl"] .section-domains .section-title { font-size: 32px; }

  [dir="rtl"] :is(.offerings, .section-approach)
    .section-title { font-size: 26px; }

  [dir="rtl"] .section-sectors .section-title { font-size: 24px; }

  /* The detail-page template sets the related band at 26; the
     Health Check frame sets its own at 24. */
  [dir="rtl"] .section-related .section-title { font-size: 26px; }
  [dir="rtl"] .page-health-check .section-related
    .section-title { font-size: 24px; }
}

/* -----------------------------------------------------
   The rule above lets buttons wrap, which is right for the
   long Arabic labels in page content and wrong in the
   header bar: once the nav gained a sixth item and the
   gutters closed up, `تواصل معنا` broke over two lines
   and took the header from 97px to 117px.
   ----------------------------------------------------- */
[dir="rtl"] .nav-cta { white-space: nowrap; }

/* -----------------------------------------------------
   Arabic half-size home hero, mirroring the Latin block
   at the foot of css/style.css. Cairo keeps the -12px
   relationship it had, halved with everything else.
   ----------------------------------------------------- */
[dir="rtl"] .page-home { --hero-display-ar: 17px; }

@media (min-width: 768px) {
  [dir="rtl"] .page-home { --hero-display-ar: 24px; }
}
@media (min-width: 1024px) {
  [dir="rtl"] .page-home { --hero-display-ar: 28px; }
}
@media (min-width: 1440px) {
  [dir="rtl"] .page-home { --hero-display-ar: 36px; }
}

/* -----------------------------------------------------
   `[dir="rtl"] .brand-name` above is a flat 17px and loads
   after the header sizes, so without these the Arabic
   wordmark would ignore the 2x lockup. The word itself is
   the same Latin STERLING in both locales, so it takes the
   same sizes rather than a Cairo-adjusted one.
   ----------------------------------------------------- */
[dir="rtl"] .site-header .brand-name { font-size: 32px; }

@media (min-width: 1024px) and (max-width: 1439px) {
  [dir="rtl"] .site-header .brand-name { font-size: 38px; }
}
@media (min-width: 1440px) {
  [dir="rtl"] .site-header .brand-name { font-size: 48px; }
}