/* ============================================================
   EVOTEQ — Arabic / RTL layer
   Loaded only on Arabic (RTL) pages, AFTER base/home/whoweare/subpage.
   1) swap the Latin brand fonts for the Arabic pair
   2) flip the directional bits the browser doesn't auto-mirror
   ============================================================ */

/* ---- fonts: Tajawal (headings) + IBM Plex Sans Arabic (body) ---- */
html[dir="rtl"]{
  --fh:'Tajawal','Nekst',system-ui,sans-serif;
  --fb:'IBM Plex Sans Arabic','Swissra',system-ui,sans-serif;
}
html[dir="rtl"] body.evoteq{font-family:var(--fb);}
/* subpages (traq verticals / our-projects) hard-code Nekst/Swissra with !important,
   and set their own --tq/--tg/--tl/--tf/--ta/--op font vars — remap them all */
html[dir="rtl"] body.evoteq{
  --tq-font-head:'Tajawal',sans-serif; --tq-font-body:'IBM Plex Sans Arabic',sans-serif;
  --tg-font-head:'Tajawal',sans-serif; --tg-font-body:'IBM Plex Sans Arabic',sans-serif;
  --tl-font-head:'Tajawal',sans-serif; --tl-font-body:'IBM Plex Sans Arabic',sans-serif;
  --tf-font-head:'Tajawal',sans-serif; --tf-font-body:'IBM Plex Sans Arabic',sans-serif;
  --ta-font-head:'Tajawal',sans-serif; --ta-font-body:'IBM Plex Sans Arabic',sans-serif;
  --op-font-head:'Tajawal',sans-serif; --op-font-body:'IBM Plex Sans Arabic',sans-serif;
}
/* catch the literal `font-family:"Nekst"…!important` declarations on subpage text */
html[dir="rtl"] body.evoteq [class*="__title"],
html[dir="rtl"] body.evoteq [class*="__headline"],
html[dir="rtl"] body.evoteq [class*="__mark"],
html[dir="rtl"] body.evoteq [class*="__logo"],
html[dir="rtl"] body.evoteq [class*="__name"],
html[dir="rtl"] body.evoteq [class*="__pill"],
html[dir="rtl"] body.evoteq [class*="__eyebrow"],
html[dir="rtl"] body.evoteq [class*="__cta"],
html[dir="rtl"] body.evoteq [class*="__btn"]{font-family:'Tajawal',sans-serif !important;}
html[dir="rtl"] body.evoteq [class*="__sub"],
html[dir="rtl"] body.evoteq [class*="__lead"],
html[dir="rtl"] body.evoteq [class*="__intro"],
html[dir="rtl"] body.evoteq [class*="__body"],
html[dir="rtl"] body.evoteq [class*="__desc"],
html[dir="rtl"] body.evoteq [class*="__text"],
html[dir="rtl"] body.evoteq p{font-family:'IBM Plex Sans Arabic',sans-serif !important;}

/* Arabic reads a touch smaller/looser than Latin at the same px — nudge line-height */
html[dir="rtl"] body.evoteq{line-height:1.8;}
html[dir="rtl"] .ev-hero__title{line-height:1.5;}

/* ---- generic alignment: start-align text that was left-aligned ---- */
html[dir="rtl"] .ev-connect__items,
html[dir="rtl"] .ev-traq__head,
html[dir="rtl"] .ev-part__title,
html[dir="rtl"] .ev-hero__inner{text-align:right;}
html[dir="rtl"] .ev-connect,
html[dir="rtl"] .ev-connect__title{text-align:center;} /* the Let's-Connect hero stays centered */

/* clients section: eyebrow pill + title align to the right in RTL */
html[dir="rtl"] .ev-clients__head{text-align:right;}
html[dir="rtl"] .ev-clients__title{margin-left:auto;margin-right:0;}

/* you-know card: text right-aligned, the Q badge stays on the RIGHT, eyebrow to the left so it clears the Q */
html[dir="rtl"] .ev-know__card{text-align:right;}
html[dir="rtl"] .ev-know__card .ev-eyebrow{display:block;width:max-content;margin-right:auto;margin-left:0;}

/* ---- arrow glyphs point the other way in RTL ---- */
html[dir="rtl"] .ev-btn__icon svg,
html[dir="rtl"] .ev-megaitem__go .ic svg,
html[dir="rtl"] .ev-traqpanel__cta .ic svg,
html[dir="rtl"] .ev-office__dir .ic svg,
html[dir="rtl"] .ev-proj__cta svg,
html[dir="rtl"] .ev-newscard__nav .go svg,
html[dir="rtl"] .ev-newsletter__form button svg,
html[dir="rtl"] .ev-arrowlink .dot svg,
html[dir="rtl"] [class*="__cta"] [class*="__ctaicon"] svg,
html[dir="rtl"] [class*="__go"] svg{transform:scaleX(-1);}
/* keep the hover nudge going the correct (leftward) way */
html[dir="rtl"] .ev-btn:hover .ev-btn__icon svg{transform:scaleX(-1) translate(2px,-2px);}

/* ---- hero scrim: gradient came from the left; mirror it (keep the burgundy wash) ---- */
html[dir="rtl"] .ev-hero__scrim{background:linear-gradient(rgba(95,15,38,.28),rgba(95,15,38,.28)),linear-gradient(-90deg,rgba(54,7,26,.82) 0%,rgba(54,7,26,.55) 45%,rgba(54,7,26,.22) 80%,rgba(54,7,26,.05) 100%);}

/* ---- §2 pillar: mirror the asymmetric corner ---- */
html[dir="rtl"] .ev-pillar{border-radius:18px 18px 36px 18px;}

/* ---- horizontal pin: §3 slides over from the LEFT now; mirror its shadow ---- */
html[dir="rtl"] .ev-hpanel--over{box-shadow:40px 0 80px -30px rgba(20,3,10,.6);}

/* ---- nav dropdown chevron (traq ⌄): move to the correct side so it doesn't overlap ---- */
html[dir="rtl"] .ev-nav .ev-has-mega>a::after,
html[dir="rtl"] .ev-nav .menu-item-has-children>a::after{margin-left:0;margin-right:8px;}

/* ---- projects carousel: mirror the negative track offset ---- */
html[dir="rtl"] .ev-projects__track{margin-left:0;margin-right:calc(-1 * clamp(24px,2.4vw,40px));}

/* ---- get-in-touch: the burgundy box overlaps toward the LEFT in RTL ---- */
html[dir="rtl"] .ev-contact__left{margin-right:0;margin-left:clamp(-110px,-6vw,-40px);}
/* the form's overlap breathing room is on the LEFT in English → move it to the RIGHT in RTL
   (otherwise the map box covers the right-aligned form fields) */
html[dir="rtl"] .ev-contact__panel{padding-left:clamp(34px,3.8vw,56px);padding-right:clamp(84px,9vw,150px);}
@media (max-width:880px){ html[dir="rtl"] .ev-contact__left{margin-left:0;} html[dir="rtl"] .ev-contact__panel{padding-right:clamp(28px,5vw,40px);} }

/* ---- mega menu: the Q watermark + intro sit on the other side ---- */
html[dir="rtl"] .ev-mega__q{right:auto;left:-2%;transform:scaleX(-1);}
html[dir="rtl"] .ev-nav__list .ev-mega__intro{grid-row:1/3;}

/* ---- you'll-know card: the corner Q mark moves to the left ---- */
html[dir="rtl"] .ev-know__mark{right:clamp(24px,3vw,38px);left:auto;} /* Q badge stays top-right in RTL */

/* ---- office HQ Q watermark ---- */
html[dir="rtl"] .ev-office__q{right:auto;left:-3%;transform:scaleX(-1);}

/* ---- get-in-touch: the form/map order flips automatically with grid+dir;
        just make sure the call row + labels read from the right ---- */
html[dir="rtl"] .ev-contact__call{flex-direction:row-reverse;text-align:right;}
html[dir="rtl"] .ev-form__field{text-align:right;}
html[dir="rtl"] .ev-form input,
html[dir="rtl"] .ev-form textarea{text-align:right;}

/* ---- connect info items: icon on the right of the text ---- */
html[dir="rtl"] .ev-connect__item{flex-direction:row-reverse;text-align:right;justify-content:flex-end;}

/* ---- footer: contact list + brand read from the right ---- */
html[dir="rtl"] .ev-footer__contact,
html[dir="rtl"] .ev-footer__inner{text-align:right;}

/* ---- back-to-top button: bottom-left in RTL ---- */
html[dir="rtl"] .ev-totop{right:auto;left:clamp(20px,3vw,40px);}

/* ---- custom cursor is pointer-following; no change needed ---- */

/* ---- mobile drawer slides in from the LEFT in RTL ---- */
@media (max-width:960px){
  html[dir="rtl"] .ev-nav{right:auto;left:0;transform:translateX(-100%);}
  html[dir="rtl"] .ev-nav.is-open{transform:translateX(0);}
  html[dir="rtl"] .ev-nav__list>li{text-align:right;}
}

/* =====================================================================
   SUBPAGE HEROES (traq verticals + Our Projects)
   In LTR the copy sits left and the photo's subject sits right, with a
   90deg scrim darkening the left. In RTL the copy moves right, so both
   have to swap: the scrim runs 270deg and the photo is a pre-mirrored
   file. We ship *-rtl.jpg rather than using transform:scaleX(-1) because
   a transform on the element turns its background-attachment:fixed into
   a local attachment and kills the hero parallax.

   Only background-image is overridden — position/size/repeat and, on the
   four burgundy heroes, the 4-entry background-blend-mode list all carry
   over from the base rule, so the layer order must stay identical:
     grad(scrim), grad(bottom fade), [solid duotone], url(photo)
   ===================================================================== */

/* pharma — teal, 3 layers, no blend */
html[dir="rtl"] .tq-s1{
  background-image:
    linear-gradient(270deg, rgb(22,69,63) 0%, rgb(22,69,63) 22%, rgba(22,69,63,0.80) 46%, rgba(22,69,63,0.42) 70%, rgba(22,69,63,0.15) 100%),
    linear-gradient(180deg, rgba(22,69,63,0) 52%, rgba(22,69,63,0.55) 100%),
    url('../img/traq-hero/Pharma-rtl.jpg');
}

/* logistics · luxury · food · auto — burgundy duotone, 4 layers (blend: normal,normal,color,normal) */
html[dir="rtl"] .tg-s1{
  background-image:
    linear-gradient(270deg, rgb(95,15,38) 0%, rgb(95,15,38) 22%, rgba(95,15,38,0.80) 46%, rgba(95,15,38,0.42) 70%, rgba(95,15,38,0.15) 100%),
    linear-gradient(180deg, rgba(95,15,38,0) 52%, rgba(95,15,38,0.55) 100%),
    linear-gradient(rgb(95,15,38), rgb(95,15,38)),
    url('../img/traq-hero/Logi-rtl.jpg');
}
html[dir="rtl"] .tl-s1{
  background-image:
    linear-gradient(270deg, rgb(95,15,38) 0%, rgb(95,15,38) 22%, rgba(95,15,38,0.80) 46%, rgba(95,15,38,0.42) 70%, rgba(95,15,38,0.15) 100%),
    linear-gradient(180deg, rgba(95,15,38,0) 52%, rgba(95,15,38,0.55) 100%),
    linear-gradient(rgb(95,15,38), rgb(95,15,38)),
    url('../img/traq-hero/Luxury-rtl.jpg?v=2');
}
html[dir="rtl"] .tf-s1{
  background-image:
    linear-gradient(270deg, rgb(95,15,38) 0%, rgb(95,15,38) 22%, rgba(95,15,38,0.80) 46%, rgba(95,15,38,0.42) 70%, rgba(95,15,38,0.15) 100%),
    linear-gradient(180deg, rgba(95,15,38,0) 52%, rgba(95,15,38,0.55) 100%),
    linear-gradient(rgb(95,15,38), rgb(95,15,38)),
    url('../img/traq-hero/Food-rtl.jpg');
}
html[dir="rtl"] .ta-s1{
  background-image:
    linear-gradient(270deg, rgb(95,15,38) 0%, rgb(95,15,38) 22%, rgba(95,15,38,0.80) 46%, rgba(95,15,38,0.42) 70%, rgba(95,15,38,0.15) 100%),
    linear-gradient(180deg, rgba(95,15,38,0) 52%, rgba(95,15,38,0.55) 100%),
    linear-gradient(rgb(95,15,38), rgb(95,15,38)),
    url('../img/traq-hero/Auto-rtl.jpg');
}

/* Our Projects hero: the ring graphic sits right of the copy in LTR.
   The copy moves right in RTL, so send the rings left and mirror them. */
html[dir="rtl"] .op-s1__net svg{
  right:auto;
  left:4%;
  transform:translateY(-50%) scaleX(-1);
}
@media (max-width:760px){
  html[dir="rtl"] .op-s1__net svg{right:auto;left:-6%;}
}

/* ---- traq use-case cards: ghost number to the LEFT in RTL ----
   The number is absolutely positioned top/right; the icon next to it sits in normal
   flow. In LTR the icon floats left and the number sits right, so they never meet.
   In RTL the icon flows to the RIGHT and lands under the pinned number. Sending the
   number left restores the mirrored version of the intended layout.
   (food reuses the tq- prefix, so .tq- covers pharma AND food.) */
html[dir="rtl"] .tq-s6__cardnum,
html[dir="rtl"] .tg-s6__cardnum,
html[dir="rtl"] .tl-s6__cardnum,
html[dir="rtl"] .ta-s6__cardnum{
  right:auto;
  left:clamp(18px,2vw,30px);
}

/* ---- SVG diagrams stay LTR ----
   `direction:rtl` inherits into <svg>, where the default text-anchor:start flips to
   the RIGHT edge — so <text x="118"> beside a circle at cx="80" renders leftward,
   straight across the circle (the auto/pharma chain-of-custody graphics). These
   diagrams are authored with explicit coordinates and their labels are not swapped
   (the swapper parks <svg>), so pin them back to LTR. */
html[dir="rtl"] svg text,
html[dir="rtl"] svg tspan{
  direction:ltr;
  unicode-bidi:isolate;
}