/* =========================================================
   MERSAD ARABIC / RTL LAYER
   Loaded after the English styles. No original section file
   is modified by this stylesheet.
   ========================================================= */

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

html.mersad-rtl {
  direction: rtl;
  text-align: right;
  --mersad-font-ar: "Cairo", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
}

html.mersad-rtl body {
  direction: rtl;
  text-align: right;
  font-family: var(--mersad-font-ar);
  font-size: 17px;
  line-height: 1.75;
}

/* Make translated text use Cairo without touching icons or code */
html.mersad-rtl body :where(
  h1, h2, h3, h4, h5, h6,
  p, a, button, label, input, textarea, select, option,
  summary, blockquote, figcaption, li, span
):not(.notranslate):not([class*="icon"]):not([class*="Icon"]) {
  font-family: var(--mersad-font-ar);
}

/* Preserve the Latin brand lockup and numeric/data appearance */
html.mersad-rtl :where(
  .mersad-header__brand-copy,
  .mersad-header__brand-name,
  .mersad-header__brand-separator,
  .mersad-header__brand-position,
  [data-impact-number],
  .mersad-impact-stat__number,
  .mersad-case-result__value,
  .mersad-case-card__metric strong,
  .mersad-hero-dashboard,
  .mersad-case-dashboard,
  code, pre, kbd, samp
) {
  font-family: "Inter", Arial, sans-serif;
  direction: ltr;
  unicode-bidi: isolate;
}

html.mersad-rtl :where(input, textarea, select) {
  direction: rtl;
  text-align: right;
}

html.mersad-rtl :where(input[type="email"], input[type="url"], input[type="tel"]) {
  direction: ltr;
  text-align: right;
}

html.mersad-rtl :where(h1, h2, h3, h4, h5, h6) {
  letter-spacing: 0 !important;
  text-wrap: balance;
}

html.mersad-rtl :where(p, li) {
  letter-spacing: 0 !important;
}

html.mersad-rtl :where(
  .mersad-hero__eyebrow,
  .mersad-services__eyebrow,
  .mersad-cases__eyebrow,
  .mersad-process__eyebrow,
  .mersad-impact__eyebrow,
  .mersad-testimonials__eyebrow,
  .mersad-insights__eyebrow,
  .mersad-contact__eyebrow,
  .mersad-engagement__eyebrow,
  .technology-stack__eyebrow,
  .mersad-footer__eyebrow,
  .mersad-footer__group-title,
  [class*="__kicker"],
  [class*="__label"]
) {
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 700;
}

/* =========================================================
   GLOBAL RTL GEOMETRY
   ========================================================= */

html.mersad-rtl :where(
  .mersad-header__desktop-nav,
  .mersad-header__mobile-nav,
  .mersad-hero__content,
  .mersad-services__intro,
  .mersad-cases__heading,
  .mersad-cases__header-copy,
  .mersad-process__intro,
  .mersad-impact__heading,
  .mersad-impact__header-copy,
  .mersad-testimonials__heading,
  .mersad-testimonials__header-copy,
  .mersad-insights__heading,
  .mersad-contact__header,
  .mersad-contact__panel-header,
  .mersad-contact__direct,
  .mersad-engagement__heading,
  .mersad-engagement__header-copy,
  .technology-stack__header,
  .mersad-about__heading,
  .mersad-about__content,
  .mersad-footer__brand,
  .mersad-footer__content
) {
  text-align: right;
}

html.mersad-rtl :where(
  .mersad-hero__layout,
  .mersad-services__intro,
  .mersad-cases__header,
  .mersad-process__container,
  .mersad-impact__header,
  .mersad-testimonials__header,
  .mersad-insights__header,
  .mersad-contact__layout,
  .mersad-engagement__header,
  .technology-stack__header,
  .mersad-about__main,
  .mersad-footer__top,
  .mersad-footer__bottom
) {
  direction: rtl;
}

/* Horizontal arrows only */
html.mersad-rtl :where(
  .mersad-header__cta,
  .mersad-header__mobile-cta,
  .mersad-hero__button,
  .mersad-services__cta,
  .mersad-service__link,
  .mersad-cases__all-link,
  .mersad-featured-case__link,
  .mersad-case-card__link,
  .mersad-case-card__cta-button,
  .mersad-process__cta,
  .mersad-impact__header-link,
  .mersad-impact__cta,
  .mersad-testimonials__header-link,
  .mersad-insights__view-all,
  .mersad-contact-form__submit,
  .mersad-contact-option,
  .mersad-engagement-card__cta,
  .mersad-engagement__footer a,
  .mersad-footer__primary-link,
  .mersad-footer__contact-action
) > svg:last-child,
html.mersad-rtl :where(
  .mersad-contact-option__arrow,
  .mersad-footer__contact-action-arrow
) {
  transform: scaleX(-1);
  transform-origin: center;
}

html.mersad-rtl :where(
  .mersad-services__cta,
  .mersad-service__link,
  .mersad-cases__all-link,
  .mersad-featured-case__link,
  .mersad-case-card__link,
  .mersad-process__cta,
  .mersad-impact__header-link,
  .mersad-impact__cta,
  .mersad-testimonials__header-link,
  .mersad-insights__view-all,
  .mersad-contact-option,
  .mersad-footer__links a
):hover {
  transform: none;
}

/* =========================================================
   HEADER
   ========================================================= */

html.mersad-rtl .mersad-header {
  left: 0;
  right: 0;
}

html.mersad-rtl .mersad-header__inner {
  grid-template-columns: 220px minmax(0, 1fr) 270px;
}

html.mersad-rtl .mersad-header.is-scrolled .mersad-header__inner {
  grid-template-columns: 205px minmax(0, 1fr) 238px;
}

html.mersad-rtl .mersad-header__brand {
  justify-self: end;
  direction: ltr;
}

html.mersad-rtl .mersad-header__desktop-nav {
  direction: rtl;
}

html.mersad-rtl .mersad-header__menu,
html.mersad-rtl .mersad-header__mobile-menu {
  direction: rtl;
  text-align: right;
}

html.mersad-rtl .mersad-header__actions {
  justify-self: start;
}

html.mersad-rtl .mersad-header__mobile-panel,
html.mersad-rtl .mersad-header__mobile-footer {
  direction: rtl;
  text-align: right;
}

/* =========================================================
   HERO
   ========================================================= */

html.mersad-rtl .mersad-hero__content {
  max-width: 760px;
}

html.mersad-rtl .mersad-hero__title {
  font-size: clamp(50px, 4.5vw, 70px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0 !important;
}

html.mersad-rtl .mersad-hero__description {
  max-width: 650px;
  font-size: 18px;
  line-height: 1.9;
}

html.mersad-rtl .mersad-hero__actions,
html.mersad-rtl .mersad-hero__capabilities {
  justify-content: flex-start;
}

html.mersad-rtl .mersad-hero__dynamic-wrapper {
  text-align: right;
}

/* Keep dashboard data visual LTR while the section remains mirrored */
html.mersad-rtl .mersad-hero__visual {
  direction: ltr;
}

/* =========================================================
   SERVICES
   ========================================================= */

html.mersad-rtl .mersad-service__trigger,
html.mersad-rtl .mersad-service__panel-inner,
html.mersad-rtl .mersad-service__features,
html.mersad-rtl .mersad-service__copy {
  direction: rtl;
  text-align: right;
}

html.mersad-rtl .mersad-service__name {
  line-height: 1.25;
}

html.mersad-rtl .mersad-service__features li::before {
  margin-left: 12px;
  margin-right: 0;
}

/* =========================================================
   CASE STUDIES / CARDS
   ========================================================= */

html.mersad-rtl .mersad-featured-case__content,
html.mersad-rtl .mersad-case-card,
html.mersad-rtl .mersad-case-card__top,
html.mersad-rtl .mersad-case-card__metrics {
  direction: rtl;
  text-align: right;
}

html.mersad-rtl .mersad-featured-case__visual,
html.mersad-rtl .mersad-case-dashboard {
  direction: ltr;
  text-align: left;
}

/* =========================================================
   PROCESS
   ========================================================= */

html.mersad-rtl .mersad-process__journey {
  direction: rtl;
}

html.mersad-rtl .mersad-process-step,
html.mersad-rtl .mersad-process-step__card,
html.mersad-rtl .mersad-process-step__items {
  direction: rtl;
  text-align: right;
}

html.mersad-rtl .mersad-process-step__items li::before {
  margin-left: 12px;
  margin-right: 0;
}

html.mersad-rtl .mersad-process__intro.is-fixed {
  left: auto !important;
}

/* =========================================================
   STATS / TESTIMONIALS / MARQUEES
   ========================================================= */

html.mersad-rtl .mersad-impact-stat,
html.mersad-rtl .mersad-testimonial-card,
html.mersad-rtl .mersad-testimonial-card__identity {
  direction: rtl;
  text-align: right;
}

html.mersad-rtl .mersad-testimonials__track--left,
html.mersad-rtl .mersad-testimonials__track--right,
html.mersad-rtl .technology-stack__row {
  animation-direction: reverse;
}

/* =========================================================
   INSIGHTS CAROUSEL
   ========================================================= */

html.mersad-rtl .mersad-insights__actions,
html.mersad-rtl .mersad-insight,
html.mersad-rtl .mersad-insight__link,
html.mersad-rtl .mersad-insight__top,
html.mersad-rtl .mersad-insight__footer {
  direction: rtl;
  text-align: right;
}

/* Standardize the browser scroll coordinate system; JS mirrors the track */
html.mersad-rtl .mersad-insights__viewport {
  direction: ltr;
}

html.mersad-rtl .mersad-insights__track {
  direction: rtl;
}

html.mersad-rtl .mersad-insights__control svg {
  transform: scaleX(-1);
}

html.mersad-rtl .mersad-insight__footer svg {
  transform: scaleX(-1);
}

html.mersad-rtl .mersad-insight:hover .mersad-insight__footer svg {
  transform: scaleX(-1) translate(-3px, -3px);
}

/* =========================================================
   ENGAGEMENT OPTIONS
   ========================================================= */

html.mersad-rtl .mersad-engagement__grid,
html.mersad-rtl .mersad-engagement-card,
html.mersad-rtl .mersad-engagement-card__top,
html.mersad-rtl .mersad-engagement-card__features,
html.mersad-rtl .mersad-engagement-card__deliverables,
html.mersad-rtl .mersad-engagement-card__more {
  direction: rtl;
  text-align: right;
}

html.mersad-rtl .mersad-engagement-card__features li,
html.mersad-rtl .mersad-engagement-card__deliverable-list {
  text-align: right;
}

/* =========================================================
   CONTACT / FORMS
   ========================================================= */

html.mersad-rtl .mersad-contact-form,
html.mersad-rtl .mersad-contact-form__grid,
html.mersad-rtl .mersad-contact-form__field,
html.mersad-rtl .mersad-contact-form__footer,
html.mersad-rtl .mersad-contact__options,
html.mersad-rtl .mersad-contact-option,
html.mersad-rtl .mersad-contact__response,
html.mersad-rtl .mersad-contact__trust {
  direction: rtl;
  text-align: right;
}

html.mersad-rtl .mersad-contact-form__select-wrap::after {
  right: auto;
  left: 15px;
}

html.mersad-rtl .mersad-contact-form select {
  padding-right: 16px;
  padding-left: 44px;
}

html.mersad-rtl .mersad-contact-form__field-footer {
  flex-direction: row-reverse;
}

html.mersad-rtl .mersad-contact-option__content {
  text-align: right;
}

/* =========================================================
   FOOTER
   ========================================================= */

html.mersad-rtl .mersad-footer__top,
html.mersad-rtl .mersad-footer__content,
html.mersad-rtl .mersad-footer__links,
html.mersad-rtl .mersad-footer__contact-copy,
html.mersad-rtl .mersad-footer__contact-action {
  direction: rtl;
  text-align: right;
}

html.mersad-rtl .mersad-footer__links a:hover {
  transform: translateX(-3px);
}

html.mersad-rtl .mersad-footer__socials,
html.mersad-rtl .mersad-footer__legal {
  direction: ltr;
}

html.mersad-rtl .mersad-footer__back-to-top {
  right: auto;
  left: 28px;
}

/* =========================================================
   ARCHIVES / SINGLE PAGES / LEGAL
   ========================================================= */

html.mersad-rtl :where(
  [class*="archive__"],
  [class*="single__"],
  [class*="legal-"],
  .service-card,
  .case-study-card,
  .insight-card,
  .resource-card
) {
  text-align: right;
}

html.mersad-rtl :where(
  .insight-card__meta span + span::before,
  .case-study-card__meta span + span::before,
  .resource-card__meta span + span::before
) {
  margin-left: 8px;
  margin-right: 0;
}

/* =========================================================
   ARABIC TYPE SCALE
   ========================================================= */

html.mersad-rtl :where(
  .mersad-services__title,
  .mersad-cases__title,
  .mersad-process__title,
  .mersad-impact__title,
  .mersad-testimonials__title,
  .mersad-insights__title,
  .mersad-contact__title,
  .mersad-engagement__title,
  .technology-stack__title,
  .mersad-about__title,
  .mersad-footer__statement
) {
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0 !important;
}

html.mersad-rtl :where(
  .mersad-services__description,
  .mersad-cases__header-copy,
  .mersad-process__description,
  .mersad-impact__header-copy,
  .mersad-testimonials__header-copy,
  .mersad-contact__intro,
  .mersad-engagement__header-copy,
  .technology-stack__description,
  .mersad-about__lead,
  .mersad-footer__description,
  .mersad-insight__excerpt,
  .mersad-service__copy,
  .mersad-process-step__description
) {
  font-size: max(16px, 1em);
  line-height: 1.85;
}

html.mersad-rtl :where(
  .mersad-service__short-title,
  .mersad-insight__category,
  .mersad-impact-stat__index,
  .mersad-case-card__category,
  .mersad-featured-case__industry
) {
  font-size: 12px;
  line-height: 1.5;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {
  html.mersad-rtl .mersad-header__inner,
  html.mersad-rtl .mersad-header.is-scrolled .mersad-header__inner {
    grid-template-columns: 1fr auto;
  }

  html.mersad-rtl .mersad-header__brand {
    justify-self: end;
  }

  html.mersad-rtl .mersad-header__actions {
    justify-self: start;
  }

  html.mersad-rtl .mersad-hero__title {
    font-size: clamp(44px, 7vw, 62px);
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
  html.mersad-rtl body {
    font-size: 16px;
    line-height: 1.75;
  }

  html.mersad-rtl .mersad-header {
    padding-inline: 8px;
  }

  html.mersad-rtl .mersad-header__inner,
  html.mersad-rtl .mersad-header.is-scrolled .mersad-header__inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  html.mersad-rtl .mersad-header__brand-copy {
    font-size: 14px;
  }

  html.mersad-rtl .mersad-hero__title {
    font-size: clamp(38px, 11vw, 52px);
    line-height: 1.17;
  }

  html.mersad-rtl .mersad-hero__description {
    font-size: 16px;
    line-height: 1.85;
  }

  html.mersad-rtl :where(
    .mersad-services__title,
    .mersad-cases__title,
    .mersad-process__title,
    .mersad-impact__title,
    .mersad-testimonials__title,
    .mersad-insights__title,
    .mersad-contact__title,
    .mersad-engagement__title,
    .technology-stack__title,
    .mersad-about__title,
    .mersad-footer__statement
  ) {
    font-size: clamp(32px, 9.5vw, 44px);
    line-height: 1.22;
  }

  html.mersad-rtl :where(
    .mersad-service__name,
    .mersad-process-step__title,
    .mersad-engagement-card__title,
    .mersad-insight__title,
    .mersad-case-card__title,
    .mersad-featured-case__title
  ) {
    font-size: clamp(24px, 7vw, 32px);
    line-height: 1.3;
  }

  html.mersad-rtl .mersad-process__intro.is-fixed {
    position: static !important;
    right: auto !important;
    left: auto !important;
    width: auto !important;
  }

  html.mersad-rtl .mersad-insights__track {
    grid-auto-columns: 90%;
  }

  html.mersad-rtl .mersad-contact-form__field-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  html.mersad-rtl .mersad-footer__back-to-top {
    left: 17px;
    right: auto;
  }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {
  html.mersad-rtl .mersad-hero__title {
    font-size: clamp(34px, 10.5vw, 44px);
  }

  html.mersad-rtl :where(
    .mersad-services__title,
    .mersad-cases__title,
    .mersad-process__title,
    .mersad-impact__title,
    .mersad-testimonials__title,
    .mersad-insights__title,
    .mersad-contact__title,
    .mersad-engagement__title,
    .technology-stack__title,
    .mersad-about__title,
    .mersad-footer__statement
  ) {
    font-size: clamp(29px, 9vw, 38px);
  }
}