/**
 * Arabic global design layer.
 *
 * Enqueued only on Arabic URLs (body.site-lang-ar). This is the single home for
 * Tajawal, the design tokens and the .rrar component system, so Arabic pages
 * carry semantic HTML only and never repeat these rules inline.
 *
 * Scoped to the language, not to a page ID, so every Arabic page inherits the
 * reference-page system.
 */

/* ---------------------------------------------------------------- fonts ---- */

@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/tajawal-arabic-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}

@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/tajawal-arabic-700.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}

@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/tajawal-arabic-800.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}

@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/tajawal-arabic-900.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}

/* Latin subsets keep phone numbers, URLs and model names (L322, Evoque) legible
   inside RTL copy without falling back to a mismatched system font. */

@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/tajawal-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/tajawal-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/tajawal-latin-800.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/tajawal-latin-900.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------- theme layout overrides ---- */
/* Phlox Pro wraps page content in a constrained column and prints an entry
   header. Full-bleed Arabic sections need both removed. */

body.site-lang-ar .site-content > .container,
body.site-lang-ar .site-main,
body.site-lang-ar #primary,
body.site-lang-ar .entry-content {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.site-lang-ar #main.aux-content-top-margin {
  margin-top: 0 !important;
}

body.site-lang-ar .entry-main {
  margin-bottom: 0 !important;
}

body.site-lang-ar .entry-header,
body.site-lang-ar .post-thumb-img-content,
body.site-lang-ar .post-thumbnail {
  display: none !important;
}

/* wpautop leaves empty paragraphs and paragraph-wrapped scripts behind. */
body.site-lang-ar .entry-content > p:empty,
body.site-lang-ar .rrar > p:empty,
body.site-lang-ar .rrar > p:has(> script) {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ------------------------------------------------------- design tokens ---- */

.rrar {
  --forest: #153F35;
  --green: #246B58;
  --sage: #E8F0EB;
  --neutral: #F5F1E8;
  --silver: #D7D9D6;
  --gold: #B79A57;
  --ink: #20352F;
  --warning: #7A1E1E;

  direction: rtl;
  text-align: right;
  color: var(--ink);
  background: #fff;
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  overflow: hidden;
  font-family: "Tajawal", "Segoe UI", Tahoma, sans-serif;
}

.rrar *,
.rrar *::before,
.rrar *::after {
  box-sizing: border-box;
}

/* ------------------------------------------------------------ structure ---- */

.rrar .wrap {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.rrar section {
  padding: 72px 0;
}

/* ------------------------------------------------------------ typography ---- */

.rrar h1,
.rrar h2,
.rrar h3 {
  margin: 0 0 16px;
  line-height: 1.28;
}

.rrar h1 {
  max-width: 820px;
  color: #fff;
  font-size: clamp(40px, 5.5vw, 70px);
  font-weight: 800;
}

.rrar h2 {
  color: var(--forest);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 800;
}

.rrar h3 {
  color: var(--forest);
  font-size: 21px;
  font-weight: 800;
}

.rrar p,
.rrar li {
  font-size: 17px;
  line-height: 1.9;
}

.rrar p {
  margin: 0 0 16px;
}

.rrar a {
  text-decoration: none;
}

.rrar .eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--green);
  font-size: 14px;
  font-weight: 800;
}

.rrar .small {
  font-size: 14px !important;
  line-height: 1.7 !important;
}

/* Latin runs inside RTL copy: phone numbers, URLs, model designations. */
.rrar .latin,
.rrar a[href^="tel:"],
.rrar .model-list span {
  unicode-bidi: isolate;
}

/* ----------------------------------------------------------------- hero ---- */

.rrar .hero {
  min-height: 620px;
  display: flex;
  align-items: center;
  padding: 82px 0 88px;
  background:
    linear-gradient(270deg, rgba(21, 63, 53, .98) 0%, rgba(21, 63, 53, .91) 46%, rgba(21, 63, 53, .58) 100%),
    url('https://rangeroverspecialist.ae/wp-content/uploads/2023/10/range-rover.jpg') center / cover no-repeat;
}

.rrar .hero .eyebrow,
.rrar .dark .eyebrow,
.rrar .final .eyebrow {
  color: #EAD9A4;
}

.rrar .hero-copy {
  max-width: 770px;
  color: #F7F5EF;
  font-size: 20px;
}

.rrar .hero-note {
  margin-top: 18px;
  color: #E5ECE9;
  font-weight: 700;
}

/* -------------------------------------------------------------- buttons ---- */

.site-ar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.site-ar-btn,
.site-ar-btn:visited {
  position: relative;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 24px;
  border: 2px solid var(--forest, #153F35);
  border-radius: 9px;
  overflow: hidden;
  background: var(--forest, #153F35);
  color: #fff !important;
  font-family: "Tajawal", "Segoe UI", Tahoma, sans-serif;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
  text-decoration: none !important;
  box-shadow: 0 10px 24px rgb(0 0 0 / .14);
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}

.site-ar-btn--light,
.site-ar-btn--light:visited {
  border-color: #fff;
  background: #fff;
  color: var(--forest, #153F35) !important;
}

.site-ar-btn--whatsapp,
.site-ar-btn--whatsapp:visited {
  border-color: var(--gold, #B79A57);
  background: var(--gold, #B79A57);
  color: #172B25 !important;
}

.site-ar-btn:hover,
.site-ar-btn:focus-visible {
  transform: translateY(-2px);
  border-color: var(--green, #246B58);
  background: var(--green, #246B58);
  color: #fff !important;
}

.rrar .hero .site-ar-btn:hover,
.rrar .hero .site-ar-btn:focus-visible,
.rrar .final .site-ar-btn:hover,
.rrar .final .site-ar-btn:focus-visible,
.rrar .dark .site-ar-btn:hover,
.rrar .dark .site-ar-btn:focus-visible {
  border-color: #fff;
  background: transparent;
  color: #fff !important;
}

.site-ar-btn:focus-visible {
  outline: 3px solid var(--gold, #B79A57);
  outline-offset: 3px;
}

.site-ar-btn--sheen::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -45%;
  width: 32%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .34), transparent);
  transform: skewX(-18deg);
  transition: inset-inline-start .45s ease;
  pointer-events: none;
}

.site-ar-btn--sheen:hover::after,
.site-ar-btn--sheen:focus-visible::after {
  inset-inline-start: 115%;
}

.rrar .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.rrar .btn {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 24px;
  border: 2px solid #fff;
  border-radius: 8px;
  background: #fff;
  color: var(--forest) !important;
  font-weight: 800;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.rrar .btn.alt {
  border-color: var(--gold);
  background: var(--gold);
  color: #172B25 !important;
}

.rrar .btn:hover,
.rrar .btn:focus-visible {
  border-color: #fff;
  background: var(--sage);
  color: var(--forest) !important;
  outline: 3px solid #fff;
  outline-offset: 3px;
  transform: translateY(-1px);
}

/* ------------------------------------------------------------- sections ---- */

.rrar .intro,
.rrar .process,
.rrar .local {
  background: var(--neutral);
}

.rrar .quick-grid,
.rrar .service-grid,
.rrar .trust-grid {
  display: grid;
  gap: 16px;
  margin-top: 30px;
}

.rrar .quick-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rrar .service-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rrar .trust-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rrar .quick,
.rrar .service-card,
.rrar .trust-card,
.rrar .step {
  height: 100%;
  padding: 24px;
  border: 1px solid var(--silver);
  border-radius: 14px;
  background: #fff;
}

.rrar .quick b {
  display: block;
  margin-bottom: 8px;
  color: var(--green);
  font-size: 14px;
}

.rrar .service-card {
  display: flex;
  flex-direction: column;
  background: var(--neutral);
  border-color: #E7E0D5;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.rrar .service-card:hover,
.rrar .service-card:focus-within {
  border-color: var(--green);
  box-shadow: 0 12px 30px rgba(20, 52, 44, .1);
  transform: translateY(-2px);
}

.rrar .service-card .tag {
  align-self: flex-start;
  display: inline-block;
  margin-bottom: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--sage);
  color: var(--forest);
  font-size: 13px;
  font-weight: 800;
}

.rrar .dark {
  background: var(--forest);
  color: #fff;
}

.rrar .dark h2,
.rrar .dark h3 {
  color: #fff;
}

.rrar .symptom-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.rrar .symptom-card {
  height: 100%;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 14px;
  background: rgba(255, 255, 255, .07);
}

.rrar .split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: 44px;
  align-items: center;
}

.rrar .split.reverse {
  grid-template-columns: minmax(320px, .95fr) minmax(0, 1.05fr);
}

.rrar .image-frame {
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  background: var(--sage);
  box-shadow: 0 14px 34px rgba(21, 63, 53, .12);
}

.rrar .image-frame img {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
  object-fit: cover;
}

.rrar .image-frame img.portrait-focus {
  object-position: center 60%;
}

.rrar .image-frame figcaption {
  padding: 12px 16px;
  color: #52665F;
  background: #fff;
  font-size: 13px;
  line-height: 1.6;
}

.rrar .trust {
  background: var(--sage);
}

.rrar .trust-card {
  border-top: 5px solid var(--gold);
}

.rrar .steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 30px;
}

.rrar .step-number {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--forest);
  color: #fff;
  font-weight: 800;
}

.rrar .models {
  background: #fff;
}

.rrar .model-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.rrar .model-list span {
  padding: 11px 16px;
  border-radius: 999px;
  background: var(--sage);
  color: var(--forest);
  font-weight: 800;
}

.rrar .warning {
  margin-top: 26px;
  padding: 28px;
  border: 1px solid #D9A363;
  border-inline-start: 6px solid var(--warning);
  border-radius: 14px;
  background: #FFF7EE;
}

.rrar .warning h3 {
  color: var(--warning);
}

.rrar .decision-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.rrar .decision {
  padding: 24px;
  border: 1px solid var(--silver);
  border-radius: 14px;
  background: #fff;
}

.rrar .faq details {
  padding: 18px 0;
  border-bottom: 1px solid var(--silver);
}

.rrar .faq summary {
  cursor: pointer;
  color: var(--forest);
  font-size: 18px;
  font-weight: 800;
}

.rrar .faq summary:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 5px;
}

.rrar .faq details p {
  margin: 12px 0 0;
}

.rrar .author-box {
  padding: 26px;
  border: 1px solid var(--silver);
  border-radius: 14px;
  background: var(--neutral);
}

.rrar .author-box p:last-child {
  margin-bottom: 0;
}

.rrar .final {
  background: linear-gradient(135deg, var(--green), var(--forest));
  color: #fff;
}

.rrar .final h2 {
  color: #fff;
}

.rrar .final-copy {
  max-width: 850px;
  color: #F2F6F4;
  font-size: 19px;
}

/* ----------------------------------------------------------- responsive ---- */

@media (max-width: 980px) {
  .rrar .quick-grid,
  .rrar .service-grid,
  .rrar .trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rrar .symptom-grid,
  .rrar .decision-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rrar .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .rrar section {
    padding: 50px 0;
  }

  .rrar .wrap {
    width: min(100% - 28px, 1180px);
  }

  .rrar .hero {
    min-height: 590px;
    padding: 66px 0 74px;
    background-position: 48% center;
  }

  .rrar .hero-copy {
    font-size: 18px;
  }

  .rrar .actions {
    flex-direction: column;
  }

  .rrar .btn,
  .rrar .site-ar-actions .site-ar-btn {
    width: 100%;
  }

  .rrar .quick-grid,
  .rrar .service-grid,
  .rrar .symptom-grid,
  .rrar .trust-grid,
  .rrar .steps,
  .rrar .decision-grid,
  .rrar .split,
  .rrar .split.reverse {
    grid-template-columns: 1fr;
  }

  .rrar .split .image-frame {
    order: 2;
  }

  .rrar .quick,
  .rrar .service-card,
  .rrar .symptom-card,
  .rrar .trust-card,
  .rrar .step,
  .rrar .decision {
    padding: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rrar *,
  .rrar *::before,
  .rrar *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* Arabic homepage and service-page extensions */
body.page-id-14517 .elementor-location-header li.aux-menu-depth-0.current-menu-item > a.aux-item-content,
body.page-id-14517 .elementor-location-header li.aux-menu-depth-0.current-menu-ancestor > a.aux-item-content {
  color: #153F35 !important;
}

body.page-id-14517 .elementor-location-header li.aux-menu-depth-0 > a.aux-item-content:hover,
body.page-id-14517 .elementor-location-header li.aux-menu-depth-0 > a.aux-item-content:focus-visible {
  color: #246B58 !important;
}

.rrar p:empty {
  display: none !important;
}

.rrar .dark .service-card,
.rrar .dark .service-card h3,
.rrar .dark .service-card p {
  color: var(--ink);
}

.rrar .decision-note {
  margin: 22px 0 0;
  padding: 16px 18px;
  border-inline-start: 4px solid var(--gold);
  border-radius: 10px;
  background: rgb(255 255 255 / .12);
  color: #fff;
  font-weight: 700;
}

body.site-lang-ar .chaty-tooltip .on-hover-text {
  display: none !important;
}

body.site-lang-ar .chaty-widget.right-position {
  right: 6px !important;
}

@media (max-width: 760px) {
  body.site-lang-ar .chaty-widget {
    display: none !important;
  }
}

/* Transmission service */
/* Engine service */
/* Diagnostics service */
/* Maintenance service */
.rrar-maintenance .dark .history-step,
.rrar-maintenance .dark .history-step p,
.rrar-maintenance .dark .price-card,
.rrar-maintenance .dark .price-card h3,
.rrar-maintenance .dark .price-card p,
.rrar-maintenance .dark .scope-table td {
  color: var(--ink);
}

.rrar-maintenance .dark .scope-table td {
  background: #fff;
}

.rrar-maintenance .service-planner,
.rrar-maintenance .price-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.rrar-maintenance .plan-card {
  position: relative;
  padding: 26px;
  border: 1px solid var(--silver);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 24px rgb(21 63 53 / .06);
}

.rrar-maintenance .plan-card b {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--sage);
  color: var(--forest);
}

.rrar-maintenance .history-line {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 28px;
  border: 1px solid var(--silver);
  border-radius: 16px;
  overflow: hidden;
}

.rrar-maintenance .history-step {
  padding: 23px;
  border-inline-start: 1px solid var(--silver);
  background: #fff;
}

.rrar-maintenance .history-step:first-child {
  border-inline-start: 0;
}

.rrar-maintenance .history-step strong {
  display: block;
  color: var(--forest);
}

.rrar-maintenance .price-cards {
  gap: 15px;
  margin-top: 25px;
}

.rrar-maintenance .price-card {
  padding: 23px;
  border-top: 4px solid var(--gold);
  border-radius: 15px;
  background: #fff;
}

.rrar-maintenance .price-card strong {
  display: block;
  color: var(--forest);
  font-size: 20px;
}

.rrar-maintenance .image-frame img {
  object-position: center;
}

.rrar-maintenance .hero {
  min-height: 600px;
  padding: 54px 0 58px;
  background: linear-gradient(270deg, rgb(21 63 53 / .98) 0%, rgb(21 63 53 / .91) 50%, rgb(21 63 53 / .38) 100%), url("https://rangeroverspecialist.ae/wp-content/uploads/2023/07/Range-Rover-Service-1.jpg") center 50% / cover no-repeat;
}

.rrar-maintenance .hero-record {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(0, 1fr));
  max-width: 860px;
  margin-top: 22px;
  align-items: center;
  border: 1px solid rgb(255 255 255 / .28);
  border-radius: 14px;
  overflow: hidden;
  background: rgb(245 241 232 / .94);
  color: var(--forest);
}

.rrar-maintenance .hero-record strong {
  display: grid;
  align-self: stretch;
  padding: 12px 16px;
  place-items: center;
  background: var(--gold);
  color: var(--forest);
}

.rrar-maintenance .hero-record span {
  padding: 12px 14px;
  border-inline-start: 1px solid rgb(21 63 53 / .14);
  font-weight: 800;
}

@media (max-width: 950px) {
  .rrar-maintenance .service-planner,
  .rrar-maintenance .price-cards {
    grid-template-columns: 1fr;
  }

  .rrar-maintenance .history-line {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .rrar-maintenance .history-line {
    grid-template-columns: 1fr;
  }

  .rrar-maintenance .history-step {
    border-inline-start: 0;
    border-bottom: 1px solid var(--silver);
  }

  .rrar-maintenance .hero-record {
    grid-template-columns: 1fr 1fr;
  }

  .rrar-maintenance .hero-record strong {
    grid-column: 1 / -1;
  }

  .rrar-maintenance .hero-record span {
    padding: 9px 11px;
  }
}

/* Brake service */
.rrar-brakes .dark .service-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rrar-brakes .safety-gate {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  margin-top: 26px;
}

.rrar-brakes .gate {
  padding: 24px;
  border: 1px solid var(--silver);
  border-radius: 16px;
  background: #fff;
}

.rrar-brakes .gate.stop {
  border-top: 5px solid #8A2525;
}

.rrar-brakes .gate.caution {
  border-top: 5px solid #B7791F;
}

.rrar-brakes .gate.inspect {
  border-top: 5px solid var(--green);
}

.rrar-brakes .brake-map {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
}

.rrar-brakes .brake-node {
  padding: 20px 14px;
  border: 1px solid var(--silver);
  border-radius: 14px;
  background: #fff;
  text-align: center;
}

.rrar-brakes .brake-node strong {
  display: block;
  color: var(--forest);
}

.rrar-brakes .cost-band {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid rgb(183 154 87 / .65);
  border-radius: 16px;
  background: linear-gradient(135deg, #fff, var(--neutral));
}

.rrar-brakes .cost-band strong {
  display: block;
  color: var(--forest);
  font-size: 21px;
}

.rrar-brakes .image-frame img {
  object-position: center;
}

.rrar-brakes .hero {
  min-height: 600px;
  padding: 54px 0 58px;
  background: linear-gradient(270deg, rgb(21 63 53 / .98) 0%, rgb(21 63 53 / .92) 52%, rgb(21 63 53 / .38) 100%), url("https://rangeroverspecialist.ae/wp-content/uploads/2023/07/Range-Rove-Brake.jpg") center 52% / cover no-repeat;
}

.rrar-brakes .hero-gate {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 820px;
  gap: 10px;
  margin-top: 22px;
}

.rrar-brakes .hero-gate div {
  padding: 11px 14px;
  border: 1px solid rgb(255 255 255 / .28);
  border-radius: 12px;
  background: rgb(10 39 33 / .62);
  color: #fff;
}

.rrar-brakes .hero-gate strong {
  display: block;
  margin-bottom: 2px;
  color: #EAD9A4;
  font-size: 14px;
}

.rrar-brakes .hero-gate .stop {
  border-color: rgb(245 119 105 / .8);
  background: rgb(104 29 24 / .76);
}

@media (max-width: 1050px) {
  .rrar-brakes .brake-map {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .rrar-brakes .dark .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .rrar-brakes .safety-gate {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .rrar-brakes .brake-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rrar-brakes .dark .service-grid,
  .rrar-brakes .hero-gate {
    grid-template-columns: 1fr;
  }
}

.rrar-diagnostics .dark .outcome h3 {
  color: var(--forest);
}

.rrar-diagnostics .signal-chain {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
}

.rrar-diagnostics .signal {
  position: relative;
  padding: 21px 17px;
  border: 1px solid var(--silver);
  border-radius: 14px;
  background: #fff;
  text-align: center;
}

.rrar-diagnostics .signal b {
  display: grid;
  width: 42px;
  height: 42px;
  margin: 0 auto 12px;
  place-items: center;
  border-radius: 50%;
  background: var(--forest);
  color: #fff;
}

.rrar-diagnostics .signal:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 41px;
  left: -11px;
  width: 11px;
  height: 2px;
  background: var(--gold);
}

.rrar-diagnostics .diagnostic-matrix,
.rrar-maintenance .scope-table,
.rrar .action-table {
  width: 100%;
  margin-top: 26px;
  border: 1px solid var(--silver);
  border-radius: 15px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: #fff;
}

.rrar-diagnostics .diagnostic-matrix th,
.rrar-diagnostics .diagnostic-matrix td,
.rrar-maintenance .scope-table th,
.rrar-maintenance .scope-table td,
.rrar .action-table th,
.rrar .action-table td {
  padding: 16px;
  border-bottom: 1px solid var(--silver);
  text-align: right;
  vertical-align: top;
  color: var(--ink);
}

.rrar-diagnostics .diagnostic-matrix th,
.rrar-maintenance .scope-table th,
.rrar .action-table th {
  background: var(--forest);
  color: #fff;
}

.rrar-diagnostics .diagnostic-matrix tr:last-child td,
.rrar-maintenance .scope-table tr:last-child td,
.rrar .action-table tr:last-child td {
  border-bottom: 0;
}

.rrar-diagnostics .outcome-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 25px;
}

.rrar-diagnostics .outcome {
  padding: 22px;
  border-top: 4px solid var(--gold);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
}

.rrar-diagnostics .estimate {
  margin-top: 24px;
  padding: 23px;
  border: 1px solid rgb(183 154 87 / .62);
  border-radius: 15px;
  background: linear-gradient(135deg, var(--neutral), #fff);
}

.rrar-diagnostics .estimate strong {
  display: block;
  color: var(--forest);
  font-size: 21px;
}

.rrar-diagnostics .hero {
  min-height: 600px;
  padding: 54px 0 58px;
  background: linear-gradient(270deg, rgb(21 63 53 / .98) 0%, rgb(21 63 53 / .91) 50%, rgb(21 63 53 / .36) 100%), url("https://rangeroverspecialist.ae/wp-content/uploads/2023/07/Range-Rover-ECU-repair-1.jpg") center 48% / cover no-repeat;
}

.rrar-diagnostics .hero-chain {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  max-width: 780px;
  margin: 22px 0 0;
  padding: 0;
  border: 1px solid rgb(255 255 255 / .28);
  border-radius: 14px;
  overflow: hidden;
  background: rgb(10 39 33 / .6);
  backdrop-filter: blur(7px);
  list-style: none;
}

.rrar-diagnostics .hero-chain li {
  display: flex;
  flex: 1 1 185px;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  color: #fff;
  font-weight: 800;
}

.rrar-diagnostics .hero-chain li + li {
  border-inline-start: 1px solid rgb(255 255 255 / .18);
}

.rrar-diagnostics .hero-chain b {
  display: grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--forest);
}

@media (max-width: 1000px) {
  .rrar-diagnostics .signal-chain,
  .rrar-diagnostics .outcome-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rrar-diagnostics .signal::after {
    display: none;
  }
}

@media (max-width: 760px) {
  .rrar-diagnostics .signal-chain,
  .rrar-diagnostics .outcome-grid {
    grid-template-columns: 1fr;
  }

  .rrar-diagnostics .diagnostic-matrix,
  .rrar-diagnostics .diagnostic-matrix tbody,
  .rrar-diagnostics .diagnostic-matrix tr,
  .rrar-diagnostics .diagnostic-matrix td,
  .rrar-maintenance .scope-table,
  .rrar-maintenance .scope-table tbody,
  .rrar-maintenance .scope-table tr,
  .rrar-maintenance .scope-table td,
  .rrar .action-table,
  .rrar .action-table tbody,
  .rrar .action-table tr,
  .rrar .action-table td {
    display: block;
    width: 100%;
  }

  .rrar-diagnostics .diagnostic-matrix thead,
  .rrar-maintenance .scope-table thead,
  .rrar .action-table thead {
    display: none;
  }

  .rrar-diagnostics .diagnostic-matrix tr {
    border-bottom: 3px solid var(--sage);
  }

  .rrar-diagnostics .diagnostic-matrix td::before,
  .rrar-maintenance .scope-table td::before,
  .rrar .action-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: var(--forest);
    font-weight: 900;
  }
}

.rrar-engine .dark .severity article,
.rrar-engine .dark .severity article h3,
.rrar-engine .dark .severity article p {
  color: var(--ink);
}

.rrar-engine .evidence-ladder {
  display: grid;
  gap: 0;
  margin-top: 28px;
  counter-reset: evidence;
}

.rrar-engine .evidence-rung {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 18px;
  padding: 20px;
  border: 1px solid var(--silver);
  border-bottom: 0;
  background: #fff;
}

.rrar-engine .evidence-rung:first-child {
  border-radius: 16px 16px 0 0;
}

.rrar-engine .evidence-rung:last-child {
  border-bottom: 1px solid var(--silver);
  border-radius: 0 0 16px 16px;
}

.rrar-engine .evidence-rung::before {
  counter-increment: evidence;
  content: counter(evidence);
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  background: var(--forest);
  color: #fff;
  font-weight: 900;
}

.rrar-engine .evidence-rung h3 {
  margin: 0 0 5px;
}

.rrar-engine .repair-board,
.rrar-engine .severity {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.rrar-engine .repair-route {
  padding: 25px;
  border: 1px solid rgb(255 255 255 / .18);
  border-top: 4px solid var(--gold);
  border-radius: 16px;
  background: rgb(255 255 255 / .07);
}

.rrar-engine .repair-route h3 {
  color: #F0E1B8;
}

.rrar-engine .severity {
  gap: 14px;
  margin-top: 24px;
}

.rrar-engine .severity article {
  padding: 21px;
  border: 1px solid var(--silver);
  border-radius: 14px;
  background: #fff;
}

.rrar-engine .severity .stop {
  border-inline-start: 5px solid #8A2525;
}

.rrar-engine .severity .caution {
  border-inline-start: 5px solid #B7791F;
}

.rrar-engine .severity .inspect {
  border-inline-start: 5px solid var(--green);
}

.rrar-engine .cost-note {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid rgb(183 154 87 / .65);
  border-radius: 16px;
  background: var(--neutral);
}

.rrar-engine .cost-note strong {
  display: block;
  color: var(--forest);
  font-size: 21px;
}

.rrar-engine .image-frame img {
  object-position: center 15%;
}

.rrar-engine .hero {
  min-height: 600px;
  padding: 54px 0 58px;
  background: linear-gradient(270deg, rgb(21 63 53 / .98) 0%, rgb(21 63 53 / .92) 52%, rgb(21 63 53 / .38) 100%), url("https://rangeroverspecialist.ae/wp-content/uploads/2023/07/Range-rover-engine-repair.jpg") center 46% / cover no-repeat;
}

.rrar-engine .hero-safety {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 820px;
  margin-top: 22px;
}

.rrar-engine .hero-safety span {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  padding: 9px 14px;
  border: 1px solid rgb(255 255 255 / .28);
  border-radius: 999px;
  background: rgb(10 39 33 / .58);
  color: #fff;
  font-weight: 800;
}

.rrar-engine .hero-safety .urgent {
  border-color: rgb(244 176 76 / .75);
  background: rgb(113 61 12 / .72);
}

.rrar-engine .faq-list .wrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.rrar-engine .faq-list .eyebrow,
.rrar-engine .faq-list h2,
.rrar-engine .faq-list .faq:last-child {
  grid-column: 1 / -1;
}

.rrar-engine .faq-list .faq {
  margin: 0;
  padding: 0 18px;
  border: 1px solid var(--silver);
  border-radius: 14px;
  overflow: hidden;
  background: var(--neutral);
}

.rrar-engine .faq-list .faq summary {
  min-height: 68px;
  padding: 18px 28px 18px 0;
  color: var(--forest);
  font-weight: 800;
  line-height: 1.65;
  cursor: pointer;
}

.rrar-engine .faq-list .faq p {
  margin: 0;
  padding: 0 0 18px;
  color: var(--ink);
}

@media (max-width: 900px) {
  .rrar-engine .repair-board,
  .rrar-engine .severity {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .rrar-engine .evidence-rung {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
    padding: 17px;
  }

  .rrar-engine .evidence-rung::before {
    width: 40px;
    height: 40px;
  }

  .rrar-engine .faq-list .wrap {
    grid-template-columns: 1fr;
  }

  .rrar-engine .faq-list .faq,
  .rrar-engine .faq-list .faq:last-child {
    grid-column: 1;
  }
}

.rrar-transmission .dark .path h3 {
  color: var(--forest);
}

.rrar-transmission .observation-list {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.rrar-transmission .observation-list article {
  padding: 18px 20px;
  border: 1px solid var(--silver);
  border-inline-start: 5px solid var(--gold);
  border-radius: 12px;
  background: #fff;
}

.rrar-transmission .observation-list h3 {
  margin-bottom: 5px;
  font-size: 18px;
}

.rrar-transmission .observation-list p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.8;
}

.rrar-transmission .owner-note {
  margin: 14px 0 0;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--sage);
  color: var(--forest);
  font-weight: 800;
}

.rrar-transmission .shift-map {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.rrar-transmission .shift-point {
  position: relative;
  padding: 22px;
  border: 1px solid var(--silver);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 10px 24px rgb(21 63 53 / .06);
}

.rrar-transmission .shift-point::before {
  content: attr(data-order);
  display: grid;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  place-items: center;
  border-radius: 50%;
  background: var(--forest);
  color: #fff;
  font-weight: 800;
}

.rrar-transmission .shift-point h3 {
  margin-bottom: 7px;
}

.rrar-transmission .pathway {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 26px;
}

.rrar-transmission .path {
  padding: 24px;
  border-top: 4px solid var(--gold);
  border-radius: 15px;
  background: #fff;
  color: var(--ink);
}

.rrar-transmission .price-band {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid rgb(183 154 87 / .65);
  border-radius: 16px;
  background: linear-gradient(135deg, #fff, var(--neutral));
}

.rrar-transmission .price-band strong {
  display: block;
  color: var(--forest);
  font-size: 21px;
}

.rrar-transmission .evidence-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.rrar-transmission .evidence-strip div {
  padding: 18px;
  border-inline-start: 4px solid var(--gold);
  border-radius: 12px;
  background: var(--sage);
}

.rrar-transmission .image-frame img {
  object-position: center 25%;
}

.rrar-transmission .hero {
  min-height: 600px;
  padding: 54px 0 58px;
  background: linear-gradient(270deg, rgb(21 63 53 / .98) 0%, rgb(21 63 53 / .93) 52%, rgb(21 63 53 / .42) 100%), url("https://rangeroverspecialist.ae/wp-content/uploads/2023/07/Range-Rover-Transmission-.jpg") center 48% / cover no-repeat;
}

.rrar-transmission .hero-decision {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 810px;
  margin-top: 22px;
  border: 1px solid rgb(255 255 255 / .28);
  border-radius: 14px;
  overflow: hidden;
  background: rgb(10 39 33 / .58);
  backdrop-filter: blur(7px);
}

.rrar-transmission .hero-decision div {
  padding: 13px 16px;
  border-inline-start: 1px solid rgb(255 255 255 / .18);
}

.rrar-transmission .hero-decision div:first-child {
  border-inline-start: 0;
}

.rrar-transmission .hero-decision strong {
  display: block;
  margin-bottom: 2px;
  color: #EAD9A4;
  font-size: 14px;
}

.rrar-transmission .hero-decision span {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

@media (max-width: 1000px) {
  .rrar-transmission .shift-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rrar-transmission .pathway {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .rrar-transmission .shift-map,
  .rrar-transmission .evidence-strip,
  .rrar-transmission .hero-decision {
    grid-template-columns: 1fr;
  }

  .rrar-transmission .hero-decision div {
    padding: 10px 13px;
    border-top: 1px solid rgb(255 255 255 / .18);
    border-inline-start: 0;
  }

  .rrar-transmission .hero-decision div:first-child {
    border-top: 0;
  }
}

/* ============================================================================ SITE ARABIC DESIGN SYSTEM, ADDITIONS v2 Append this block to the Site Arabic Design plugin stylesheet, after the existing rules. Every selector uses .rrar or .site-ar-* only. No page-id selectors, no inline styles, no page-level overrides. ============================================================================ */ /* ---------- 1. Tokens added to the system ---------- */ .rrar { --rr-shadow-1: 0 8px 22px rgb(21 63 53 / .07); --rr-shadow-2: 0 20px 48px rgb(21 63 53 / .16); --rr-ease: cubic-bezier(.22, .61, .36, 1); --rr-r-lg: 20px; --rr-r-md: 14px; --rr-r-sm: 10px; --rr-gap: clamp(14px, 1.5vw, 18px); } /* ---------- 2. Utilities ---------- */ .rrar .rr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .rrar.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--rr-ease), transform .7s var(--rr-ease); } .rrar.js .reveal.is-in { opacity: 1; transform: none; } .rrar.js .reveal-stagger > * { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--rr-ease), transform .6s var(--rr-ease); transition-delay: calc(var(--i, 0) * 60ms); } .rrar.js .reveal-stagger.is-in > * { opacity: 1; transform: none; } /* ---------- 3. Section head ---------- */ .rrar .section-head { max-width: 860px; margin-block-end: 8px; } .rrar .section-head .eyebrow { display: inline-flex; align-items: center; gap: 10px; } .rrar .section-head .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--gold); } .rrar .section-head .lead { max-width: 74ch; font-size: 18px; color: #43574F; } .rrar .dark .section-head .lead, .rrar .final .section-head .lead { color: #DCE7E2; } /* ---------- 4. Hero ---------- */ .rrar .hero { position: relative; isolation: isolate; overflow: hidden; } .rrar .hero::before { content: ""; position: absolute; z-index: 0; inset-block-start: -30%; inset-inline-start: -10%; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; border-radius: 50%; background: radial-gradient(circle, rgb(183 154 87 / .22) 0%, rgb(183 154 87 / 0) 62%); pointer-events: none; } .rrar .hero::after { content: ""; position: absolute; z-index: 0; inset-inline: 0; inset-block-end: 0; height: 120px; background: linear-gradient(to top, rgb(255 255 255 / .1), transparent); pointer-events: none; } .rrar .hero .wrap { position: relative; z-index: 1; } .rrar .hero .eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 12px; border: 1px solid rgb(234 217 164 / .38); border-radius: 999px; background: rgb(255 255 255 / .08); } .rrar .hero .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgb(183 154 87 / .28); } .rrar .hero h1 { max-width: 940px; font-size: clamp(40px, 4.7vw, 64px); letter-spacing: -.5px; } .rrar .hero-note { display: flex; flex-wrap: wrap; gap: 6px 18px; } .rrar .hero-note span:last-child { color: #F7F5EF; } .rrar .hero-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; } .rrar .hero-facts li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid rgb(255 255 255 / .26); border-radius: 999px; background: rgb(255 255 255 / .09); color: #F2F6F4; font-size: 14.5px; font-weight: 700; line-height: 1.4; } .rrar .hero-facts svg { flex: 0 0 auto; width: 16px; height: 16px; fill: #EAD9A4; } /* ---------- 5. Spec strip ---------- */ .rrar .spec-strip { padding: 0; background: var(--forest); } .rrar .spec-strip .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: rgb(255 255 255 / .14); border-inline: 1px solid rgb(255 255 255 / .14); } .rrar .spec-strip .spec { display: flex; align-items: center; gap: 14px; padding: 26px 22px; background: var(--forest); } .rrar .spec-strip .spec svg { flex: 0 0 auto; width: 26px; height: 26px; fill: var(--gold); } .rrar .spec-strip .spec b { display: block; color: #fff; font-size: 16px; font-weight: 800; line-height: 1.4; } .rrar .spec-strip .spec span { display: block; margin-block-start: 3px; color: #C6D5CF; font-size: 13.5px; line-height: 1.6; } /* ---------- 6. Card family, shared behaviour ---------- */ .rrar .quick, .rrar .service-card, .rrar .trust-card, .rrar .decision, .rrar .promise { transition: transform .3s var(--rr-ease), box-shadow .3s var(--rr-ease), border-color .3s var(--rr-ease); } .rrar .quick:hover, .rrar .trust-card:hover, .rrar .decision:hover, .rrar .promise:hover { transform: translateY(-3px); border-color: rgb(183 154 87 / .6); box-shadow: var(--rr-shadow-2); } .rrar .quick, .rrar .decision { border-radius: var(--rr-r-md); } .rrar .quick { position: relative; padding-block-start: 26px; overflow: hidden; } .rrar .quick::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 4px; background: linear-gradient(to left, var(--gold), rgb(183 154 87 / .25)); } .rrar .decision { border-inline-start: 4px solid var(--forest); } /* Service cards, tag chip plus a next step line */ .rrar .service-card { border-radius: var(--rr-r-md); } .rrar .service-card .next-step { margin-block: auto 0; padding-block-start: 14px; border-block-start: 1px dashed #CFC7B7; color: var(--forest); font-size: 14.5px; font-weight: 700; line-height: 1.7; } .rrar .service-card .next-step a { color: var(--forest); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; } .rrar .service-card .next-step a:hover, .rrar .service-card .next-step a:focus-visible { color: var(--green); text-decoration-color: var(--green); } /* ---------- 7. Symptom cards with icons ---------- */ .rrar .symptom-grid { grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); gap: var(--rr-gap); } .rrar .symptom-card { display: flex; flex-direction: column; gap: 4px; border-inline-start: 4px solid rgb(183 154 87 / .85); transition: background-color .3s var(--rr-ease), border-color .3s var(--rr-ease), transform .3s var(--rr-ease); } .rrar .symptom-card:hover { transform: translateY(-3px); border-inline-start-color: #EAD9A4; background: rgb(255 255 255 / .13); } .rrar .symptom-card .ico { display: grid; width: 42px; height: 42px; margin-block-end: 12px; place-items: center; border-radius: 12px; background: rgb(255 255 255 / .12); } .rrar .symptom-card .ico svg { width: 22px; height: 22px; fill: #EAD9A4; } .rrar .symptom-card p { margin: 0; color: #DCE7E2; font-size: 15.5px; } /* ---------- 8. Triage, the symptom describer ---------- */ .rrar .triage { background: var(--sage); } .rrar .triage-card { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .85fr); gap: 0; margin-block-start: 30px; border: 1px solid var(--silver); border-radius: var(--rr-r-lg); overflow: hidden; background: #fff; box-shadow: var(--rr-shadow-1); } .rrar .triage-body { padding: clamp(22px, 2.4vw, 34px); } .rrar .triage-step { margin: 0 0 26px; padding: 0; border: 0; } .rrar .triage-step:last-child { margin-block-end: 0; } .rrar .triage-step legend { display: flex; align-items: center; gap: 12px; margin-block-end: 14px; padding: 0; color: var(--forest); font-size: 19px; font-weight: 800; } .rrar .triage-num { display: grid; flex: 0 0 auto; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: var(--forest); color: #fff; font-size: 15px; font-weight: 800; } .rrar .chip-row { display: flex; flex-wrap: wrap; gap: 9px; } .rrar .chip { padding: 10px 16px; border: 1px solid var(--silver); border-radius: 999px; background: #fff; color: var(--ink); font-family: Tajawal, "Segoe UI", Tahoma, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.4; cursor: pointer; transition: background-color .2s var(--rr-ease), border-color .2s var(--rr-ease), color .2s var(--rr-ease), transform .2s var(--rr-ease); } .rrar .chip:hover { border-color: var(--green); background: var(--sage); transform: translateY(-1px); } .rrar .chip[aria-pressed="true"] { border-color: var(--forest); background: var(--forest); color: #fff; } .rrar .chip[aria-pressed="true"]::before { content: "\2713"; margin-inline-end: 7px; color: #EAD9A4; font-weight: 800; } .rrar .chip:focus-visible, .rrar .faq-toggle:focus-visible, .rrar .triage-field input:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; } .rrar .triage-fields { display: flex; flex-wrap: wrap; gap: 14px; margin-block-start: 16px; } .rrar .triage-field { flex: 1 1 190px; } .rrar .triage-field span { display: block; margin-block-end: 7px; color: var(--forest); font-size: 14px; font-weight: 800; } .rrar .triage-field input { width: 100%; min-height: 48px; padding: 11px 15px; border: 1px solid var(--silver); border-radius: var(--rr-r-sm); background: #fff; color: var(--ink); font-family: Tajawal, "Segoe UI", Tahoma, sans-serif; font-size: 16px; unicode-bidi: plaintext; } .rrar .triage-field input:focus { border-color: var(--green); } .rrar .triage-out { display: flex; flex-direction: column; padding: clamp(22px, 2.4vw, 30px); border-inline-start: 1px solid var(--silver); background: linear-gradient(160deg, var(--neutral), #fff 65%); } .rrar .triage-out h3 { display: flex; align-items: center; gap: 9px; margin-block-end: 12px; } .rrar .triage-out h3::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); } .rrar .triage-msg { min-height: 132px; padding: 16px 18px; border: 1px dashed #C3BCAC; border-radius: var(--rr-r-md); background: #fff; color: var(--ink); font-size: 15.5px; line-height: 1.95; white-space: pre-line; } .rrar .triage-msg.is-empty { color: #6C7C76; } .rrar .triage-path { margin-block-start: 16px; } .rrar .triage-path b { display: block; margin-block-end: 8px; color: var(--forest); font-size: 14px; } .rrar .triage-path ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; } .rrar .triage-path li { padding: 7px 13px; border: 1px solid rgb(183 154 87 / .55); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 700; line-height: 1.4; } .rrar .triage-path li a { color: var(--forest); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; } .rrar .triage-note { margin-block: 16px 0; color: #5A6C65; font-size: 13.5px !important; line-height: 1.7 !important; } .rrar .triage-actions { margin-block-start: auto; padding-block-start: 18px; gap: 10px; } .rrar .triage-actions .site-ar-btn { flex: 1 1 150px; min-height: 48px; font-size: 15px; } .rrar .triage-live { min-height: 20px; margin-block-start: 10px; color: var(--green); font-size: 13.5px; font-weight: 800; } /* ---------- 9. Process timeline ---------- */ .rrar .timeline { position: relative; max-width: 880px; margin-block-start: 34px; padding-inline-start: 46px; } .rrar .timeline::before { content: ""; position: absolute; inset-block: 14px 14px; inset-inline-start: 20px; width: 2px; background: var(--silver); } .rrar .timeline::after { content: ""; position: absolute; inset-block-start: 14px; inset-inline-start: 20px; width: 2px; height: calc(var(--fill, 0) * (100% - 28px)); background: linear-gradient(to bottom, var(--gold), var(--green)); transition: height .25s linear; } .rrar .tl-item { position: relative; margin-block-end: 16px; padding: 22px 24px; border: 1px solid var(--silver); border-radius: var(--rr-r-md); background: #fff; transition: transform .3s var(--rr-ease), box-shadow .3s var(--rr-ease), border-color .3s var(--rr-ease); } .rrar .tl-item:last-child { margin-block-end: 0; } .rrar .tl-item:hover { transform: translateX(-4px); border-color: rgb(183 154 87 / .6); box-shadow: var(--rr-shadow-2); } .rrar .tl-item .tl-dot { position: absolute; z-index: 1; inset-block-start: 24px; inset-inline-start: -46px; display: grid; width: 42px; height: 42px; place-items: center; border: 3px solid var(--neutral); border-radius: 50%; background: var(--forest); color: #fff; font-size: 16px; font-weight: 800; } .rrar .tl-item.is-in .tl-dot { background: var(--gold); color: #172B25; } .rrar .tl-item h3 { margin-block-end: 6px; } .rrar .tl-item p { margin: 0; font-size: 16px; } /* ---------- 10. Promise grid, what we commit to and what we do not promise ---------- */ .rrar .promise-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rr-gap); margin-block-start: 30px; } .rrar .promise { padding: 26px; border: 1px solid var(--silver); border-radius: var(--rr-r-md); background: #fff; } .rrar .promise h3 { display: flex; align-items: center; gap: 10px; margin-block-end: 14px; } .rrar .promise ul { margin: 0; padding: 0; list-style: none; } .rrar .promise li { display: flex; gap: 11px; align-items: flex-start; padding-block: 10px; border-block-start: 1px solid #E7EBE9; font-size: 16px; line-height: 1.8; } .rrar .promise li:first-child { border-block-start: 0; padding-block-start: 0; } .rrar .promise li::before { flex: 0 0 auto; display: grid; width: 22px; height: 22px; margin-block-start: 5px; place-items: center; border-radius: 50%; font-size: 13px; font-weight: 800; } .rrar .promise--yes { border-block-start: 4px solid var(--green); } .rrar .promise--yes li::before { content: "\2713"; background: var(--sage); color: var(--green); } .rrar .promise--no { border-block-start: 4px solid var(--warning); background: var(--neutral); } .rrar .promise--no h3 { color: var(--warning); } .rrar .promise--no li::before { content: "\2715"; background: #F6E6E2; color: var(--warning); } /* ---------- 11. Image frame accent ---------- */ .rrar .image-frame { position: relative; } .rrar .image-frame::after { content: ""; position: absolute; z-index: 1; inset-block-start: 16px; inset-inline-start: 16px; width: 46px; height: 46px; border-block-start: 3px solid var(--gold); border-inline-start: 3px solid var(--gold); border-start-start-radius: 8px; pointer-events: none; } /* ---------- 12. Model chips as buttons ---------- */ .rrar .model-list { gap: 10px; } .rrar .model-list button { padding: 11px 18px; border: 1px solid transparent; border-radius: 999px; background: var(--sage); color: var(--forest); font-family: Tajawal, "Segoe UI", Tahoma, sans-serif; font-size: 15px; font-weight: 800; cursor: pointer; unicode-bidi: isolate; transition: background-color .2s var(--rr-ease), color .2s var(--rr-ease), transform .2s var(--rr-ease); } .rrar .model-list button:hover { background: var(--forest); color: #fff; transform: translateY(-2px); } .rrar .model-list button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; } .rrar .model-hint { margin-block-start: 18px; color: #5A6C65; font-size: 14.5px !important; } /* ---------- 13. FAQ ---------- */ .rrar .faq-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-block: 26px 8px; } .rrar .faq-search { position: relative; flex: 1 1 300px; } .rrar .faq-search input { width: 100%; min-height: 52px; padding: 13px 46px 13px 16px; border: 1px solid var(--silver); border-radius: 999px; background: #fff; color: var(--ink); font-family: Tajawal, "Segoe UI", Tahoma, sans-serif; font-size: 16px; } .rrar .faq-search input:focus { border-color: var(--green); outline: 3px solid var(--gold); outline-offset: 2px; } .rrar .faq-search svg { position: absolute; inset-block-start: 50%; inset-inline-start: 17px; width: 19px; height: 19px; transform: translateY(-50%); fill: #7A8A84; pointer-events: none; } .rrar .faq-toggle { min-height: 52px; padding: 12px 22px; border: 2px solid var(--forest); border-radius: 999px; background: transparent; color: var(--forest); font-family: Tajawal, "Segoe UI", Tahoma, sans-serif; font-size: 15px; font-weight: 800; cursor: pointer; transition: background-color .2s var(--rr-ease), color .2s var(--rr-ease); } .rrar .faq-toggle:hover { background: var(--forest); color: #fff; } .rrar .faq-group { margin-block-start: 28px; } .rrar .faq-group > h3 { margin-block-end: 12px; padding-inline-start: 13px; border-inline-start: 4px solid var(--gold); } .rrar .faq details { margin-block-end: 10px; padding: 0; border: 1px solid var(--silver); border-block-end: 1px solid var(--silver); border-radius: var(--rr-r-md); background: #fff; transition: border-color .25s var(--rr-ease), box-shadow .25s var(--rr-ease); } .rrar .faq details[open] { border-color: rgb(183 154 87 / .65); box-shadow: var(--rr-shadow-1); } .rrar .faq summary { display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 17px 20px; font-size: 17px; list-style: none; } .rrar .faq summary::-webkit-details-marker { display: none; } .rrar .faq summary::after { content: ""; flex: 0 0 auto; width: 11px; height: 11px; margin-block-start: -4px; border-inline-end: 2px solid var(--gold); border-block-end: 2px solid var(--gold); transform: rotate(45deg); transition: transform .25s var(--rr-ease); } .rrar .faq details[open] summary::after { margin-block-start: 4px; transform: rotate(-135deg); } .rrar .faq details p { padding: 0 20px 18px; margin: 0; font-size: 16px; } .rrar .faq details p a { color: var(--forest); font-weight: 700; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; } .rrar .faq-empty { padding: 22px; border: 1px dashed var(--silver); border-radius: var(--rr-r-md); background: var(--neutral); text-align: center; } /* ---------- 14. Sticky action dock, small screens only ---------- */ .rrar .dock { position: fixed; z-index: 60; inset-inline: 0; inset-block-end: 0; display: none; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-block-start: 1px solid rgb(183 154 87 / .5); background: rgb(21 63 53 / .97); box-shadow: 0 -10px 30px rgb(0 0 0 / .22); } .rrar .dock a { flex: 1 1 0; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; font-size: 15.5px; font-weight: 800; } .rrar .dock svg { width: 18px; height: 18px; fill: currentcolor; } .rrar .dock .dock-call { background: #fff; color: var(--forest) !important; } .rrar .dock .dock-wa { background: var(--gold); color: #172B25 !important; } .rrar .dock a:focus-visible { outline: 3px solid #fff; outline-offset: -4px; } /* ---------- 15. Warning block refinement ---------- */ .rrar .warning { position: relative; padding-inline-start: 74px; } .rrar .warning::before { content: "!"; position: absolute; inset-block-start: 26px; inset-inline-start: 26px; display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: var(--warning); color: #fff; font-size: 19px; font-weight: 800; } /* ---------- 16. Responsive ---------- */ @media (max-width: 1080px) { .rrar .triage-card { grid-template-columns: 1fr; } .rrar .triage-out { border-inline-start: 0; border-block-start: 1px solid var(--silver); } } @media (max-width: 980px) { .rrar .spec-strip .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rrar .promise-grid { grid-template-columns: 1fr; } } @media (max-width: 760px) { .rrar { padding-block-end: 82px; } .rrar .hero-facts li { font-size: 13.5px; } .rrar .spec-strip .wrap { grid-template-columns: 1fr; } .rrar .spec-strip .spec { padding: 20px 18px; } .rrar .timeline { padding-inline-start: 38px; } .rrar .timeline::before, .rrar .timeline::after { inset-inline-start: 16px; } .rrar .tl-item .tl-dot { inset-block-start: 18px; inset-inline-start: -38px; width: 34px; height: 34px; font-size: 14px; } .rrar .tl-item:hover { transform: none; } .rrar .triage-actions .site-ar-btn { flex: 1 1 100%; } .rrar .faq-toggle { width: 100%; } .rrar .warning { padding-inline-start: 22px; } .rrar .warning::before { position: static; margin-block-end: 12px; } .rrar .dock { display: flex; } .rrar .image-frame::after { inset-block-start: 12px; inset-inline-start: 12px; width: 34px; height: 34px; } } @media (min-width: 761px) { .rrar .dock { display: none !important; } } /* The floating chat widget and the dock must not share the same corner */ body.site-lang-ar.site-has-rrar-dock .chaty-widget, body.site-lang-ar.site-has-rrar-dock .chaty { display: none !important; } @media (prefers-reduced-motion: reduce) { .rrar.js .reveal, .rrar.js .reveal-stagger > * { opacity: 1 !important; transform: none !important; } .rrar .timeline::after { transition: none; } } .rrar .triage-card { align-items: start; gap: var(--rr-gap); border: 0; border-radius: 0; overflow: visible; background: transparent; box-shadow: none; } .rrar .triage-body { border: 1px solid var(--silver); border-radius: var(--rr-r-lg); background: #fff; box-shadow: var(--rr-shadow-1); } .rrar .triage-out { position: sticky; top: 18px; align-self: start; border: 1px solid var(--silver); border-radius: var(--rr-r-lg); background: linear-gradient(160deg, var(--neutral), #fff 65%); box-shadow: var(--rr-shadow-1); } @media (max-width: 1080px) { .rrar .triage-out { position: static; border: 1px solid var(--silver); } }
/**
 * Arabic global design layer.
 *
 * Enqueued only on Arabic URLs (body.site-lang-ar). This is the single home for
 * Tajawal, the design tokens and the .rrar component system, so Arabic pages
 * carry semantic HTML only and never repeat these rules inline.
 *
 * Scoped to the language, not to a page ID, so every Arabic page inherits the
 * reference-page system.
 */

/* ---------------------------------------------------------------- fonts ---- */

@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/tajawal-arabic-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}

@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/tajawal-arabic-700.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}

@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/tajawal-arabic-800.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}

@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/tajawal-arabic-900.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}

/* Latin subsets keep phone numbers, URLs and model names (L322, Evoque) legible
   inside RTL copy without falling back to a mismatched system font. */

@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/tajawal-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/tajawal-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/tajawal-latin-800.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/tajawal-latin-900.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------- theme layout overrides ---- */
/* Phlox Pro wraps page content in a constrained column and prints an entry
   header. Full-bleed Arabic sections need both removed. */

body.site-lang-ar .site-content > .container,
body.site-lang-ar .site-main,
body.site-lang-ar #primary,
body.site-lang-ar .entry-content {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.site-lang-ar #main.aux-content-top-margin {
  margin-top: 0 !important;
}

body.site-lang-ar .entry-main {
  margin-bottom: 0 !important;
}

body.site-lang-ar .entry-header,
body.site-lang-ar .post-thumb-img-content,
body.site-lang-ar .post-thumbnail {
  display: none !important;
}

/* wpautop leaves empty paragraphs and paragraph-wrapped scripts behind. */
body.site-lang-ar .entry-content > p:empty,
body.site-lang-ar .rrar > p:empty,
body.site-lang-ar .rrar > p:has(> script) {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ------------------------------------------------------- design tokens ---- */

.rrar {
  --forest: #153F35;
  --green: #246B58;
  --sage: #E8F0EB;
  --neutral: #F5F1E8;
  --silver: #D7D9D6;
  --gold: #B79A57;
  --ink: #20352F;
  --warning: #7A1E1E;

  direction: rtl;
  text-align: right;
  color: var(--ink);
  background: #fff;
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  overflow: hidden;
  font-family: "Tajawal", "Segoe UI", Tahoma, sans-serif;
}

.rrar *,
.rrar *::before,
.rrar *::after {
  box-sizing: border-box;
}

/* ------------------------------------------------------------ structure ---- */

.rrar .wrap {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.rrar section {
  padding: 72px 0;
}

/* ------------------------------------------------------------ typography ---- */

.rrar h1,
.rrar h2,
.rrar h3 {
  margin: 0 0 16px;
  line-height: 1.28;
}

.rrar h1 {
  max-width: 820px;
  color: #fff;
  font-size: clamp(40px, 5.5vw, 70px);
  font-weight: 800;
}

.rrar h2 {
  color: var(--forest);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 800;
}

.rrar h3 {
  color: var(--forest);
  font-size: 21px;
  font-weight: 800;
}

.rrar p,
.rrar li {
  font-size: 17px;
  line-height: 1.9;
}

.rrar p {
  margin: 0 0 16px;
}

.rrar a {
  text-decoration: none;
}

.rrar .eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--green);
  font-size: 14px;
  font-weight: 800;
}

.rrar .small {
  font-size: 14px !important;
  line-height: 1.7 !important;
}

/* Latin runs inside RTL copy: phone numbers, URLs, model designations. */
.rrar .latin,
.rrar a[href^="tel:"],
.rrar .model-list span {
  unicode-bidi: isolate;
}

/* ----------------------------------------------------------------- hero ---- */

.rrar .hero {
  min-height: 620px;
  display: flex;
  align-items: center;
  padding: 82px 0 88px;
  background:
    linear-gradient(270deg, rgba(21, 63, 53, .98) 0%, rgba(21, 63, 53, .91) 46%, rgba(21, 63, 53, .58) 100%),
    url('https://rangeroverspecialist.ae/wp-content/uploads/2023/10/range-rover.jpg') center / cover no-repeat;
}

.rrar .hero .eyebrow,
.rrar .dark .eyebrow,
.rrar .final .eyebrow {
  color: #EAD9A4;
}

.rrar .hero-copy {
  max-width: 770px;
  color: #F7F5EF;
  font-size: 20px;
}

.rrar .hero-note {
  margin-top: 18px;
  color: #E5ECE9;
  font-weight: 700;
}

/* -------------------------------------------------------------- buttons ---- */

.site-ar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.site-ar-btn,
.site-ar-btn:visited {
  position: relative;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 24px;
  border: 2px solid var(--forest, #153F35);
  border-radius: 9px;
  overflow: hidden;
  background: var(--forest, #153F35);
  color: #fff !important;
  font-family: "Tajawal", "Segoe UI", Tahoma, sans-serif;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
  text-decoration: none !important;
  box-shadow: 0 10px 24px rgb(0 0 0 / .14);
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}

.site-ar-btn--light,
.site-ar-btn--light:visited {
  border-color: #fff;
  background: #fff;
  color: var(--forest, #153F35) !important;
}

.site-ar-btn--whatsapp,
.site-ar-btn--whatsapp:visited {
  border-color: var(--gold, #B79A57);
  background: var(--gold, #B79A57);
  color: #172B25 !important;
}

.site-ar-btn:hover,
.site-ar-btn:focus-visible {
  transform: translateY(-2px);
  border-color: var(--green, #246B58);
  background: var(--green, #246B58);
  color: #fff !important;
}

.rrar .hero .site-ar-btn:hover,
.rrar .hero .site-ar-btn:focus-visible,
.rrar .final .site-ar-btn:hover,
.rrar .final .site-ar-btn:focus-visible,
.rrar .dark .site-ar-btn:hover,
.rrar .dark .site-ar-btn:focus-visible {
  border-color: #fff;
  background: transparent;
  color: #fff !important;
}

.site-ar-btn:focus-visible {
  outline: 3px solid var(--gold, #B79A57);
  outline-offset: 3px;
}

.site-ar-btn--sheen::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -45%;
  width: 32%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .34), transparent);
  transform: skewX(-18deg);
  transition: inset-inline-start .45s ease;
  pointer-events: none;
}

.site-ar-btn--sheen:hover::after,
.site-ar-btn--sheen:focus-visible::after {
  inset-inline-start: 115%;
}

.rrar .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.rrar .btn {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 24px;
  border: 2px solid #fff;
  border-radius: 8px;
  background: #fff;
  color: var(--forest) !important;
  font-weight: 800;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.rrar .btn.alt {
  border-color: var(--gold);
  background: var(--gold);
  color: #172B25 !important;
}

.rrar .btn:hover,
.rrar .btn:focus-visible {
  border-color: #fff;
  background: var(--sage);
  color: var(--forest) !important;
  outline: 3px solid #fff;
  outline-offset: 3px;
  transform: translateY(-1px);
}

/* ------------------------------------------------------------- sections ---- */

.rrar .intro,
.rrar .process,
.rrar .local {
  background: var(--neutral);
}

.rrar .quick-grid,
.rrar .service-grid,
.rrar .trust-grid {
  display: grid;
  gap: 16px;
  margin-top: 30px;
}

.rrar .quick-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rrar .service-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rrar .trust-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rrar .quick,
.rrar .service-card,
.rrar .trust-card,
.rrar .step {
  height: 100%;
  padding: 24px;
  border: 1px solid var(--silver);
  border-radius: 14px;
  background: #fff;
}

.rrar .quick b {
  display: block;
  margin-bottom: 8px;
  color: var(--green);
  font-size: 14px;
}

.rrar .service-card {
  display: flex;
  flex-direction: column;
  background: var(--neutral);
  border-color: #E7E0D5;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.rrar .service-card:hover,
.rrar .service-card:focus-within {
  border-color: var(--green);
  box-shadow: 0 12px 30px rgba(20, 52, 44, .1);
  transform: translateY(-2px);
}

.rrar .service-card .tag {
  align-self: flex-start;
  display: inline-block;
  margin-bottom: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--sage);
  color: var(--forest);
  font-size: 13px;
  font-weight: 800;
}

.rrar .dark {
  background: var(--forest);
  color: #fff;
}

.rrar .dark h2,
.rrar .dark h3 {
  color: #fff;
}

.rrar .symptom-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.rrar .symptom-card {
  height: 100%;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 14px;
  background: rgba(255, 255, 255, .07);
}

.rrar .split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: 44px;
  align-items: center;
}

.rrar .split.reverse {
  grid-template-columns: minmax(320px, .95fr) minmax(0, 1.05fr);
}

.rrar .image-frame {
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  background: var(--sage);
  box-shadow: 0 14px 34px rgba(21, 63, 53, .12);
}

.rrar .image-frame img {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
  object-fit: cover;
}

.rrar .image-frame img.portrait-focus {
  object-position: center 60%;
}

.rrar .image-frame figcaption {
  padding: 12px 16px;
  color: #52665F;
  background: #fff;
  font-size: 13px;
  line-height: 1.6;
}

.rrar .trust {
  background: var(--sage);
}

.rrar .trust-card {
  border-top: 5px solid var(--gold);
}

.rrar .steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 30px;
}

.rrar .step-number {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--forest);
  color: #fff;
  font-weight: 800;
}

.rrar .models {
  background: #fff;
}

.rrar .model-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.rrar .model-list span {
  padding: 11px 16px;
  border-radius: 999px;
  background: var(--sage);
  color: var(--forest);
  font-weight: 800;
}

.rrar .warning {
  margin-top: 26px;
  padding: 28px;
  border: 1px solid #D9A363;
  border-inline-start: 6px solid var(--warning);
  border-radius: 14px;
  background: #FFF7EE;
}

.rrar .warning h3 {
  color: var(--warning);
}

.rrar .decision-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.rrar .decision {
  padding: 24px;
  border: 1px solid var(--silver);
  border-radius: 14px;
  background: #fff;
}

.rrar .faq details {
  padding: 18px 0;
  border-bottom: 1px solid var(--silver);
}

.rrar .faq summary {
  cursor: pointer;
  color: var(--forest);
  font-size: 18px;
  font-weight: 800;
}

.rrar .faq summary:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 5px;
}

.rrar .faq details p {
  margin: 12px 0 0;
}

.rrar .author-box {
  padding: 26px;
  border: 1px solid var(--silver);
  border-radius: 14px;
  background: var(--neutral);
}

.rrar .author-box p:last-child {
  margin-bottom: 0;
}

.rrar .final {
  background: linear-gradient(135deg, var(--green), var(--forest));
  color: #fff;
}

.rrar .final h2 {
  color: #fff;
}

.rrar .final-copy {
  max-width: 850px;
  color: #F2F6F4;
  font-size: 19px;
}

/* ----------------------------------------------------------- responsive ---- */

@media (max-width: 980px) {
  .rrar .quick-grid,
  .rrar .service-grid,
  .rrar .trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rrar .symptom-grid,
  .rrar .decision-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rrar .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .rrar section {
    padding: 50px 0;
  }

  .rrar .wrap {
    width: min(100% - 28px, 1180px);
  }

  .rrar .hero {
    min-height: 590px;
    padding: 66px 0 74px;
    background-position: 48% center;
  }

  .rrar .hero-copy {
    font-size: 18px;
  }

  .rrar .actions {
    flex-direction: column;
  }

  .rrar .btn,
  .rrar .site-ar-actions .site-ar-btn {
    width: 100%;
  }

  .rrar .quick-grid,
  .rrar .service-grid,
  .rrar .symptom-grid,
  .rrar .trust-grid,
  .rrar .steps,
  .rrar .decision-grid,
  .rrar .split,
  .rrar .split.reverse {
    grid-template-columns: 1fr;
  }

  .rrar .split .image-frame {
    order: 2;
  }

  .rrar .quick,
  .rrar .service-card,
  .rrar .symptom-card,
  .rrar .trust-card,
  .rrar .step,
  .rrar .decision {
    padding: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rrar *,
  .rrar *::before,
  .rrar *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* Arabic homepage and service-page extensions */
body.page-id-14517 .elementor-location-header li.aux-menu-depth-0.current-menu-item > a.aux-item-content,
body.page-id-14517 .elementor-location-header li.aux-menu-depth-0.current-menu-ancestor > a.aux-item-content {
  color: #153F35 !important;
}

body.page-id-14517 .elementor-location-header li.aux-menu-depth-0 > a.aux-item-content:hover,
body.page-id-14517 .elementor-location-header li.aux-menu-depth-0 > a.aux-item-content:focus-visible {
  color: #246B58 !important;
}

.rrar p:empty {
  display: none !important;
}

.rrar .dark .service-card,
.rrar .dark .service-card h3,
.rrar .dark .service-card p {
  color: var(--ink);
}

.rrar .decision-note {
  margin: 22px 0 0;
  padding: 16px 18px;
  border-inline-start: 4px solid var(--gold);
  border-radius: 10px;
  background: rgb(255 255 255 / .12);
  color: #fff;
  font-weight: 700;
}

body.site-lang-ar .chaty-tooltip .on-hover-text {
  display: none !important;
}

body.site-lang-ar .chaty-widget.right-position {
  right: 6px !important;
}

@media (max-width: 760px) {
  body.site-lang-ar .chaty-widget {
    display: none !important;
  }
}

/* Transmission service */
/* Engine service */
/* Diagnostics service */
/* Maintenance service */
.rrar-maintenance .dark .history-step,
.rrar-maintenance .dark .history-step p,
.rrar-maintenance .dark .price-card,
.rrar-maintenance .dark .price-card h3,
.rrar-maintenance .dark .price-card p,
.rrar-maintenance .dark .scope-table td {
  color: var(--ink);
}

.rrar-maintenance .dark .scope-table td {
  background: #fff;
}

.rrar-maintenance .service-planner,
.rrar-maintenance .price-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.rrar-maintenance .plan-card {
  position: relative;
  padding: 26px;
  border: 1px solid var(--silver);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 24px rgb(21 63 53 / .06);
}

.rrar-maintenance .plan-card b {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--sage);
  color: var(--forest);
}

.rrar-maintenance .history-line {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 28px;
  border: 1px solid var(--silver);
  border-radius: 16px;
  overflow: hidden;
}

.rrar-maintenance .history-step {
  padding: 23px;
  border-inline-start: 1px solid var(--silver);
  background: #fff;
}

.rrar-maintenance .history-step:first-child {
  border-inline-start: 0;
}

.rrar-maintenance .history-step strong {
  display: block;
  color: var(--forest);
}

.rrar-maintenance .price-cards {
  gap: 15px;
  margin-top: 25px;
}

.rrar-maintenance .price-card {
  padding: 23px;
  border-top: 4px solid var(--gold);
  border-radius: 15px;
  background: #fff;
}

.rrar-maintenance .price-card strong {
  display: block;
  color: var(--forest);
  font-size: 20px;
}

.rrar-maintenance .image-frame img {
  object-position: center;
}

.rrar-maintenance .hero {
  min-height: 600px;
  padding: 54px 0 58px;
  background: linear-gradient(270deg, rgb(21 63 53 / .98) 0%, rgb(21 63 53 / .91) 50%, rgb(21 63 53 / .38) 100%), url("https://rangeroverspecialist.ae/wp-content/uploads/2023/07/Range-Rover-Service-1.jpg") center 50% / cover no-repeat;
}

.rrar-maintenance .hero-record {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(0, 1fr));
  max-width: 860px;
  margin-top: 22px;
  align-items: center;
  border: 1px solid rgb(255 255 255 / .28);
  border-radius: 14px;
  overflow: hidden;
  background: rgb(245 241 232 / .94);
  color: var(--forest);
}

.rrar-maintenance .hero-record strong {
  display: grid;
  align-self: stretch;
  padding: 12px 16px;
  place-items: center;
  background: var(--gold);
  color: var(--forest);
}

.rrar-maintenance .hero-record span {
  padding: 12px 14px;
  border-inline-start: 1px solid rgb(21 63 53 / .14);
  font-weight: 800;
}

@media (max-width: 950px) {
  .rrar-maintenance .service-planner,
  .rrar-maintenance .price-cards {
    grid-template-columns: 1fr;
  }

  .rrar-maintenance .history-line {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .rrar-maintenance .history-line {
    grid-template-columns: 1fr;
  }

  .rrar-maintenance .history-step {
    border-inline-start: 0;
    border-bottom: 1px solid var(--silver);
  }

  .rrar-maintenance .hero-record {
    grid-template-columns: 1fr 1fr;
  }

  .rrar-maintenance .hero-record strong {
    grid-column: 1 / -1;
  }

  .rrar-maintenance .hero-record span {
    padding: 9px 11px;
  }
}

/* Brake service */
.rrar-brakes .dark .service-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rrar-brakes .safety-gate {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
  margin-top: 26px;
}

.rrar-brakes .gate {
  padding: 24px;
  border: 1px solid var(--silver);
  border-radius: 16px;
  background: #fff;
}

.rrar-brakes .gate.stop {
  border-top: 5px solid #8A2525;
}

.rrar-brakes .gate.caution {
  border-top: 5px solid #B7791F;
}

.rrar-brakes .gate.inspect {
  border-top: 5px solid var(--green);
}

.rrar-brakes .brake-map {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
}

.rrar-brakes .brake-node {
  padding: 20px 14px;
  border: 1px solid var(--silver);
  border-radius: 14px;
  background: #fff;
  text-align: center;
}

.rrar-brakes .brake-node strong {
  display: block;
  color: var(--forest);
}

.rrar-brakes .cost-band {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid rgb(183 154 87 / .65);
  border-radius: 16px;
  background: linear-gradient(135deg, #fff, var(--neutral));
}

.rrar-brakes .cost-band strong {
  display: block;
  color: var(--forest);
  font-size: 21px;
}

.rrar-brakes .image-frame img {
  object-position: center;
}

.rrar-brakes .hero {
  min-height: 600px;
  padding: 54px 0 58px;
  background: linear-gradient(270deg, rgb(21 63 53 / .98) 0%, rgb(21 63 53 / .92) 52%, rgb(21 63 53 / .38) 100%), url("https://rangeroverspecialist.ae/wp-content/uploads/2023/07/Range-Rove-Brake.jpg") center 52% / cover no-repeat;
}

.rrar-brakes .hero-gate {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 820px;
  gap: 10px;
  margin-top: 22px;
}

.rrar-brakes .hero-gate div {
  padding: 11px 14px;
  border: 1px solid rgb(255 255 255 / .28);
  border-radius: 12px;
  background: rgb(10 39 33 / .62);
  color: #fff;
}

.rrar-brakes .hero-gate strong {
  display: block;
  margin-bottom: 2px;
  color: #EAD9A4;
  font-size: 14px;
}

.rrar-brakes .hero-gate .stop {
  border-color: rgb(245 119 105 / .8);
  background: rgb(104 29 24 / .76);
}

@media (max-width: 1050px) {
  .rrar-brakes .brake-map {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .rrar-brakes .dark .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .rrar-brakes .safety-gate {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .rrar-brakes .brake-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rrar-brakes .dark .service-grid,
  .rrar-brakes .hero-gate {
    grid-template-columns: 1fr;
  }
}

.rrar-diagnostics .dark .outcome h3 {
  color: var(--forest);
}

.rrar-diagnostics .signal-chain {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
}

.rrar-diagnostics .signal {
  position: relative;
  padding: 21px 17px;
  border: 1px solid var(--silver);
  border-radius: 14px;
  background: #fff;
  text-align: center;
}

.rrar-diagnostics .signal b {
  display: grid;
  width: 42px;
  height: 42px;
  margin: 0 auto 12px;
  place-items: center;
  border-radius: 50%;
  background: var(--forest);
  color: #fff;
}

.rrar-diagnostics .signal:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 41px;
  left: -11px;
  width: 11px;
  height: 2px;
  background: var(--gold);
}

.rrar-diagnostics .diagnostic-matrix,
.rrar-maintenance .scope-table,
.rrar .action-table {
  width: 100%;
  margin-top: 26px;
  border: 1px solid var(--silver);
  border-radius: 15px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: #fff;
}

.rrar-diagnostics .diagnostic-matrix th,
.rrar-diagnostics .diagnostic-matrix td,
.rrar-maintenance .scope-table th,
.rrar-maintenance .scope-table td,
.rrar .action-table th,
.rrar .action-table td {
  padding: 16px;
  border-bottom: 1px solid var(--silver);
  text-align: right;
  vertical-align: top;
  color: var(--ink);
}

.rrar-diagnostics .diagnostic-matrix th,
.rrar-maintenance .scope-table th,
.rrar .action-table th {
  background: var(--forest);
  color: #fff;
}

.rrar-diagnostics .diagnostic-matrix tr:last-child td,
.rrar-maintenance .scope-table tr:last-child td,
.rrar .action-table tr:last-child td {
  border-bottom: 0;
}

.rrar-diagnostics .outcome-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 25px;
}

.rrar-diagnostics .outcome {
  padding: 22px;
  border-top: 4px solid var(--gold);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
}

.rrar-diagnostics .estimate {
  margin-top: 24px;
  padding: 23px;
  border: 1px solid rgb(183 154 87 / .62);
  border-radius: 15px;
  background: linear-gradient(135deg, var(--neutral), #fff);
}

.rrar-diagnostics .estimate strong {
  display: block;
  color: var(--forest);
  font-size: 21px;
}

.rrar-diagnostics .hero {
  min-height: 600px;
  padding: 54px 0 58px;
  background: linear-gradient(270deg, rgb(21 63 53 / .98) 0%, rgb(21 63 53 / .91) 50%, rgb(21 63 53 / .36) 100%), url("https://rangeroverspecialist.ae/wp-content/uploads/2023/07/Range-Rover-ECU-repair-1.jpg") center 48% / cover no-repeat;
}

.rrar-diagnostics .hero-chain {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  max-width: 780px;
  margin: 22px 0 0;
  padding: 0;
  border: 1px solid rgb(255 255 255 / .28);
  border-radius: 14px;
  overflow: hidden;
  background: rgb(10 39 33 / .6);
  backdrop-filter: blur(7px);
  list-style: none;
}

.rrar-diagnostics .hero-chain li {
  display: flex;
  flex: 1 1 185px;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  color: #fff;
  font-weight: 800;
}

.rrar-diagnostics .hero-chain li + li {
  border-inline-start: 1px solid rgb(255 255 255 / .18);
}

.rrar-diagnostics .hero-chain b {
  display: grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--forest);
}

@media (max-width: 1000px) {
  .rrar-diagnostics .signal-chain,
  .rrar-diagnostics .outcome-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rrar-diagnostics .signal::after {
    display: none;
  }
}

@media (max-width: 760px) {
  .rrar-diagnostics .signal-chain,
  .rrar-diagnostics .outcome-grid {
    grid-template-columns: 1fr;
  }

  .rrar-diagnostics .diagnostic-matrix,
  .rrar-diagnostics .diagnostic-matrix tbody,
  .rrar-diagnostics .diagnostic-matrix tr,
  .rrar-diagnostics .diagnostic-matrix td,
  .rrar-maintenance .scope-table,
  .rrar-maintenance .scope-table tbody,
  .rrar-maintenance .scope-table tr,
  .rrar-maintenance .scope-table td,
  .rrar .action-table,
  .rrar .action-table tbody,
  .rrar .action-table tr,
  .rrar .action-table td {
    display: block;
    width: 100%;
  }

  .rrar-diagnostics .diagnostic-matrix thead,
  .rrar-maintenance .scope-table thead,
  .rrar .action-table thead {
    display: none;
  }

  .rrar-diagnostics .diagnostic-matrix tr {
    border-bottom: 3px solid var(--sage);
  }

  .rrar-diagnostics .diagnostic-matrix td::before,
  .rrar-maintenance .scope-table td::before,
  .rrar .action-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: var(--forest);
    font-weight: 900;
  }
}

.rrar-engine .dark .severity article,
.rrar-engine .dark .severity article h3,
.rrar-engine .dark .severity article p {
  color: var(--ink);
}

.rrar-engine .evidence-ladder {
  display: grid;
  gap: 0;
  margin-top: 28px;
  counter-reset: evidence;
}

.rrar-engine .evidence-rung {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 18px;
  padding: 20px;
  border: 1px solid var(--silver);
  border-bottom: 0;
  background: #fff;
}

.rrar-engine .evidence-rung:first-child {
  border-radius: 16px 16px 0 0;
}

.rrar-engine .evidence-rung:last-child {
  border-bottom: 1px solid var(--silver);
  border-radius: 0 0 16px 16px;
}

.rrar-engine .evidence-rung::before {
  counter-increment: evidence;
  content: counter(evidence);
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  background: var(--forest);
  color: #fff;
  font-weight: 900;
}

.rrar-engine .evidence-rung h3 {
  margin: 0 0 5px;
}

.rrar-engine .repair-board,
.rrar-engine .severity {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.rrar-engine .repair-route {
  padding: 25px;
  border: 1px solid rgb(255 255 255 / .18);
  border-top: 4px solid var(--gold);
  border-radius: 16px;
  background: rgb(255 255 255 / .07);
}

.rrar-engine .repair-route h3 {
  color: #F0E1B8;
}

.rrar-engine .severity {
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 24px;
}

.rrar-engine .severity article {
  padding: 21px;
  border: 1px solid var(--silver);
  border-radius: 14px;
  background: #fff;
}

.rrar-engine .severity .stop {
  border-inline-start: 5px solid #8A2525;
}

.rrar-engine .severity .caution {
  border-inline-start: 5px solid #B7791F;
}

.rrar-engine .severity .inspect {
  border-inline-start: 5px solid var(--green);
}

.rrar-engine .cost-note {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid rgb(183 154 87 / .65);
  border-radius: 16px;
  background: var(--neutral);
}

.rrar-engine .cost-note strong {
  display: block;
  color: var(--forest);
  font-size: 21px;
}

.rrar-engine .image-frame img {
  object-position: center 15%;
}

.rrar-engine .hero {
  min-height: 600px;
  padding: 54px 0 58px;
  background: linear-gradient(270deg, rgb(21 63 53 / .98) 0%, rgb(21 63 53 / .92) 52%, rgb(21 63 53 / .38) 100%), url("https://rangeroverspecialist.ae/wp-content/uploads/2023/07/Range-rover-engine-repair.jpg") center 46% / cover no-repeat;
}

.rrar-engine .hero-safety {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 820px;
  margin-top: 22px;
}

.rrar-engine .hero-safety span {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  padding: 9px 14px;
  border: 1px solid rgb(255 255 255 / .28);
  border-radius: 999px;
  background: rgb(10 39 33 / .58);
  color: #fff;
  font-weight: 800;
}

.rrar-engine .hero-safety .urgent {
  border-color: rgb(244 176 76 / .75);
  background: rgb(113 61 12 / .72);
}

.rrar-engine .faq-list .wrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.rrar-engine .faq-list .eyebrow,
.rrar-engine .faq-list h2,
.rrar-engine .faq-list .faq:last-child {
  grid-column: 1 / -1;
}

.rrar-engine .faq-list .faq {
  margin: 0;
  padding: 0 18px;
  border: 1px solid var(--silver);
  border-radius: 14px;
  overflow: hidden;
  background: var(--neutral);
}

.rrar-engine .faq-list .faq summary {
  min-height: 68px;
  padding: 18px 28px 18px 0;
  color: var(--forest);
  font-weight: 800;
  line-height: 1.65;
  cursor: pointer;
}

.rrar-engine .faq-list .faq p {
  margin: 0;
  padding: 0 0 18px;
  color: var(--ink);
}

@media (max-width: 900px) {
  .rrar-engine .repair-board,
  .rrar-engine .severity {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .rrar-engine .evidence-rung {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
    padding: 17px;
  }

  .rrar-engine .evidence-rung::before {
    width: 40px;
    height: 40px;
  }

  .rrar-engine .faq-list .wrap {
    grid-template-columns: 1fr;
  }

  .rrar-engine .faq-list .faq,
  .rrar-engine .faq-list .faq:last-child {
    grid-column: 1;
  }
}

.rrar-transmission .dark .path h3 {
  color: var(--forest);
}

.rrar-transmission .observation-list {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.rrar-transmission .observation-list article {
  padding: 18px 20px;
  border: 1px solid var(--silver);
  border-inline-start: 5px solid var(--gold);
  border-radius: 12px;
  background: #fff;
}

.rrar-transmission .observation-list h3 {
  margin-bottom: 5px;
  font-size: 18px;
}

.rrar-transmission .observation-list p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.8;
}

.rrar-transmission .owner-note {
  margin: 14px 0 0;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--sage);
  color: var(--forest);
  font-weight: 800;
}

.rrar-transmission .shift-map {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.rrar-transmission .shift-point {
  position: relative;
  padding: 22px;
  border: 1px solid var(--silver);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 10px 24px rgb(21 63 53 / .06);
}

.rrar-transmission .shift-point::before {
  content: attr(data-order);
  display: grid;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  place-items: center;
  border-radius: 50%;
  background: var(--forest);
  color: #fff;
  font-weight: 800;
}

.rrar-transmission .shift-point h3 {
  margin-bottom: 7px;
}

.rrar-transmission .pathway {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 26px;
}

.rrar-transmission .path {
  padding: 24px;
  border-top: 4px solid var(--gold);
  border-radius: 15px;
  background: #fff;
  color: var(--ink);
}

.rrar-transmission .price-band {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid rgb(183 154 87 / .65);
  border-radius: 16px;
  background: linear-gradient(135deg, #fff, var(--neutral));
}

.rrar-transmission .price-band strong {
  display: block;
  color: var(--forest);
  font-size: 21px;
}

.rrar-transmission .evidence-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.rrar-transmission .evidence-strip div {
  padding: 18px;
  border-inline-start: 4px solid var(--gold);
  border-radius: 12px;
  background: var(--sage);
}

.rrar-transmission .image-frame img {
  object-position: center 25%;
}

.rrar-transmission .hero {
  min-height: 600px;
  padding: 54px 0 58px;
  background: linear-gradient(270deg, rgb(21 63 53 / .98) 0%, rgb(21 63 53 / .93) 52%, rgb(21 63 53 / .42) 100%), url("https://rangeroverspecialist.ae/wp-content/uploads/2023/07/Range-Rover-Transmission-.jpg") center 48% / cover no-repeat;
}

.rrar-transmission .hero-decision {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 810px;
  margin-top: 22px;
  border: 1px solid rgb(255 255 255 / .28);
  border-radius: 14px;
  overflow: hidden;
  background: rgb(10 39 33 / .58);
  backdrop-filter: blur(7px);
}

.rrar-transmission .hero-decision div {
  padding: 13px 16px;
  border-inline-start: 1px solid rgb(255 255 255 / .18);
}

.rrar-transmission .hero-decision div:first-child {
  border-inline-start: 0;
}

.rrar-transmission .hero-decision strong {
  display: block;
  margin-bottom: 2px;
  color: #EAD9A4;
  font-size: 14px;
}

.rrar-transmission .hero-decision span {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

@media (max-width: 1000px) {
  .rrar-transmission .shift-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rrar-transmission .pathway {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .rrar-transmission .shift-map,
  .rrar-transmission .evidence-strip,
  .rrar-transmission .hero-decision {
    grid-template-columns: 1fr;
  }

  .rrar-transmission .hero-decision div {
    padding: 10px 13px;
    border-top: 1px solid rgb(255 255 255 / .18);
    border-inline-start: 0;
  }

  .rrar-transmission .hero-decision div:first-child {
    border-top: 0;
  }
}

/* ============================================================================ SITE ARABIC DESIGN SYSTEM, ADDITIONS v2 Append this block to the Site Arabic Design plugin stylesheet, after the existing rules. Every selector uses .rrar or .site-ar-* only. No page-id selectors, no inline styles, no page-level overrides. ============================================================================ */ /* ---------- 1. Tokens added to the system ---------- */ .rrar { --rr-shadow-1: 0 8px 22px rgb(21 63 53 / .07); --rr-shadow-2: 0 20px 48px rgb(21 63 53 / .16); --rr-ease: cubic-bezier(.22, .61, .36, 1); --rr-r-lg: 20px; --rr-r-md: 14px; --rr-r-sm: 10px; --rr-gap: clamp(14px, 1.5vw, 18px); } /* ---------- 2. Utilities ---------- */ .rrar .rr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .rrar.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--rr-ease), transform .7s var(--rr-ease); } .rrar.js .reveal.is-in { opacity: 1; transform: none; } .rrar.js .reveal-stagger > * { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--rr-ease), transform .6s var(--rr-ease); transition-delay: calc(var(--i, 0) * 60ms); } .rrar.js .reveal-stagger.is-in > * { opacity: 1; transform: none; } /* ---------- 3. Section head ---------- */ .rrar .section-head { max-width: 860px; margin-block-end: 8px; } .rrar .section-head .eyebrow { display: inline-flex; align-items: center; gap: 10px; } .rrar .section-head .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--gold); } .rrar .section-head .lead { max-width: 74ch; font-size: 18px; color: #43574F; } .rrar .dark .section-head .lead, .rrar .final .section-head .lead { color: #DCE7E2; } /* ---------- 4. Hero ---------- */ .rrar .hero { position: relative; isolation: isolate; overflow: hidden; } .rrar .hero::before { content: ""; position: absolute; z-index: 0; inset-block-start: -30%; inset-inline-start: -10%; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; border-radius: 50%; background: radial-gradient(circle, rgb(183 154 87 / .22) 0%, rgb(183 154 87 / 0) 62%); pointer-events: none; } .rrar .hero::after { content: ""; position: absolute; z-index: 0; inset-inline: 0; inset-block-end: 0; height: 120px; background: linear-gradient(to top, rgb(255 255 255 / .1), transparent); pointer-events: none; } .rrar .hero .wrap { position: relative; z-index: 1; } .rrar .hero .eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 12px; border: 1px solid rgb(234 217 164 / .38); border-radius: 999px; background: rgb(255 255 255 / .08); } .rrar .hero .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgb(183 154 87 / .28); } .rrar .hero h1 { max-width: 940px; font-size: clamp(40px, 4.7vw, 64px); letter-spacing: -.5px; } .rrar .hero-note { display: flex; flex-wrap: wrap; gap: 6px 18px; } .rrar .hero-note span:last-child { color: #F7F5EF; } .rrar .hero-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; } .rrar .hero-facts li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid rgb(255 255 255 / .26); border-radius: 999px; background: rgb(255 255 255 / .09); color: #F2F6F4; font-size: 14.5px; font-weight: 700; line-height: 1.4; } .rrar .hero-facts svg { flex: 0 0 auto; width: 16px; height: 16px; fill: #EAD9A4; } /* ---------- 5. Spec strip ---------- */ .rrar .spec-strip { padding: 0; background: var(--forest); } .rrar .spec-strip .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: rgb(255 255 255 / .14); border-inline: 1px solid rgb(255 255 255 / .14); } .rrar .spec-strip .spec { display: flex; align-items: center; gap: 14px; padding: 26px 22px; background: var(--forest); } .rrar .spec-strip .spec svg { flex: 0 0 auto; width: 26px; height: 26px; fill: var(--gold); } .rrar .spec-strip .spec b { display: block; color: #fff; font-size: 16px; font-weight: 800; line-height: 1.4; } .rrar .spec-strip .spec span { display: block; margin-block-start: 3px; color: #C6D5CF; font-size: 13.5px; line-height: 1.6; } /* ---------- 6. Card family, shared behaviour ---------- */ .rrar .quick, .rrar .service-card, .rrar .trust-card, .rrar .decision, .rrar .promise { transition: transform .3s var(--rr-ease), box-shadow .3s var(--rr-ease), border-color .3s var(--rr-ease); } .rrar .quick:hover, .rrar .trust-card:hover, .rrar .decision:hover, .rrar .promise:hover { transform: translateY(-3px); border-color: rgb(183 154 87 / .6); box-shadow: var(--rr-shadow-2); } .rrar .quick, .rrar .decision { border-radius: var(--rr-r-md); } .rrar .quick { position: relative; padding-block-start: 26px; overflow: hidden; } .rrar .quick::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 4px; background: linear-gradient(to left, var(--gold), rgb(183 154 87 / .25)); } .rrar .decision { border-inline-start: 4px solid var(--forest); } /* Service cards, tag chip plus a next step line */ .rrar .service-card { border-radius: var(--rr-r-md); } .rrar .service-card .next-step { margin-block: auto 0; padding-block-start: 14px; border-block-start: 1px dashed #CFC7B7; color: var(--forest); font-size: 14.5px; font-weight: 700; line-height: 1.7; } .rrar .service-card .next-step a { color: var(--forest); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; } .rrar .service-card .next-step a:hover, .rrar .service-card .next-step a:focus-visible { color: var(--green); text-decoration-color: var(--green); } /* ---------- 7. Symptom cards with icons ---------- */ .rrar .symptom-grid { grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); gap: var(--rr-gap); } .rrar .symptom-card { display: flex; flex-direction: column; gap: 4px; border-inline-start: 4px solid rgb(183 154 87 / .85); transition: background-color .3s var(--rr-ease), border-color .3s var(--rr-ease), transform .3s var(--rr-ease); } .rrar .symptom-card:hover { transform: translateY(-3px); border-inline-start-color: #EAD9A4; background: rgb(255 255 255 / .13); } .rrar .symptom-card .ico { display: grid; width: 42px; height: 42px; margin-block-end: 12px; place-items: center; border-radius: 12px; background: rgb(255 255 255 / .12); } .rrar .symptom-card .ico svg { width: 22px; height: 22px; fill: #EAD9A4; } .rrar .symptom-card p { margin: 0; color: #DCE7E2; font-size: 15.5px; } /* ---------- 8. Triage, the symptom describer ---------- */ .rrar .triage { background: var(--sage); } .rrar .triage-card { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .85fr); gap: 0; margin-block-start: 30px; border: 1px solid var(--silver); border-radius: var(--rr-r-lg); overflow: hidden; background: #fff; box-shadow: var(--rr-shadow-1); } .rrar .triage-body { padding: clamp(22px, 2.4vw, 34px); } .rrar .triage-step { margin: 0 0 26px; padding: 0; border: 0; } .rrar .triage-step:last-child { margin-block-end: 0; } .rrar .triage-step legend { display: flex; align-items: center; gap: 12px; margin-block-end: 14px; padding: 0; color: var(--forest); font-size: 19px; font-weight: 800; } .rrar .triage-num { display: grid; flex: 0 0 auto; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: var(--forest); color: #fff; font-size: 15px; font-weight: 800; } .rrar .chip-row { display: flex; flex-wrap: wrap; gap: 9px; } .rrar .chip { padding: 10px 16px; border: 1px solid var(--silver); border-radius: 999px; background: #fff; color: var(--ink); font-family: Tajawal, "Segoe UI", Tahoma, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.4; cursor: pointer; transition: background-color .2s var(--rr-ease), border-color .2s var(--rr-ease), color .2s var(--rr-ease), transform .2s var(--rr-ease); } .rrar .chip:hover { border-color: var(--green); background: var(--sage); transform: translateY(-1px); } .rrar .chip[aria-pressed="true"] { border-color: var(--forest); background: var(--forest); color: #fff; } .rrar .chip[aria-pressed="true"]::before { content: "\2713"; margin-inline-end: 7px; color: #EAD9A4; font-weight: 800; } .rrar .chip:focus-visible, .rrar .faq-toggle:focus-visible, .rrar .triage-field input:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; } .rrar .triage-fields { display: flex; flex-wrap: wrap; gap: 14px; margin-block-start: 16px; } .rrar .triage-field { flex: 1 1 190px; } .rrar .triage-field span { display: block; margin-block-end: 7px; color: var(--forest); font-size: 14px; font-weight: 800; } .rrar .triage-field input { width: 100%; min-height: 48px; padding: 11px 15px; border: 1px solid var(--silver); border-radius: var(--rr-r-sm); background: #fff; color: var(--ink); font-family: Tajawal, "Segoe UI", Tahoma, sans-serif; font-size: 16px; unicode-bidi: plaintext; } .rrar .triage-field input:focus { border-color: var(--green); } .rrar .triage-out { display: flex; flex-direction: column; padding: clamp(22px, 2.4vw, 30px); border-inline-start: 1px solid var(--silver); background: linear-gradient(160deg, var(--neutral), #fff 65%); } .rrar .triage-out h3 { display: flex; align-items: center; gap: 9px; margin-block-end: 12px; } .rrar .triage-out h3::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); } .rrar .triage-msg { min-height: 132px; padding: 16px 18px; border: 1px dashed #C3BCAC; border-radius: var(--rr-r-md); background: #fff; color: var(--ink); font-size: 15.5px; line-height: 1.95; white-space: pre-line; } .rrar .triage-msg.is-empty { color: #6C7C76; } .rrar .triage-path { margin-block-start: 16px; } .rrar .triage-path b { display: block; margin-block-end: 8px; color: var(--forest); font-size: 14px; } .rrar .triage-path ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; } .rrar .triage-path li { padding: 7px 13px; border: 1px solid rgb(183 154 87 / .55); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 700; line-height: 1.4; } .rrar .triage-path li a { color: var(--forest); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; } .rrar .triage-note { margin-block: 16px 0; color: #5A6C65; font-size: 13.5px !important; line-height: 1.7 !important; } .rrar .triage-actions { margin-block-start: auto; padding-block-start: 18px; gap: 10px; } .rrar .triage-actions .site-ar-btn { flex: 1 1 150px; min-height: 48px; font-size: 15px; } .rrar .triage-live { min-height: 20px; margin-block-start: 10px; color: var(--green); font-size: 13.5px; font-weight: 800; } /* ---------- 9. Process timeline ---------- */ .rrar .timeline { position: relative; max-width: 880px; margin-block-start: 34px; padding-inline-start: 46px; } .rrar .timeline::before { content: ""; position: absolute; inset-block: 14px 14px; inset-inline-start: 20px; width: 2px; background: var(--silver); } .rrar .timeline::after { content: ""; position: absolute; inset-block-start: 14px; inset-inline-start: 20px; width: 2px; height: calc(var(--fill, 0) * (100% - 28px)); background: linear-gradient(to bottom, var(--gold), var(--green)); transition: height .25s linear; } .rrar .tl-item { position: relative; margin-block-end: 16px; padding: 22px 24px; border: 1px solid var(--silver); border-radius: var(--rr-r-md); background: #fff; transition: transform .3s var(--rr-ease), box-shadow .3s var(--rr-ease), border-color .3s var(--rr-ease); } .rrar .tl-item:last-child { margin-block-end: 0; } .rrar .tl-item:hover { transform: translateX(-4px); border-color: rgb(183 154 87 / .6); box-shadow: var(--rr-shadow-2); } .rrar .tl-item .tl-dot { position: absolute; z-index: 1; inset-block-start: 24px; inset-inline-start: -46px; display: grid; width: 42px; height: 42px; place-items: center; border: 3px solid var(--neutral); border-radius: 50%; background: var(--forest); color: #fff; font-size: 16px; font-weight: 800; } .rrar .tl-item.is-in .tl-dot { background: var(--gold); color: #172B25; } .rrar .tl-item h3 { margin-block-end: 6px; } .rrar .tl-item p { margin: 0; font-size: 16px; } /* ---------- 10. Promise grid, what we commit to and what we do not promise ---------- */ .rrar .promise-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rr-gap); margin-block-start: 30px; } .rrar .promise { padding: 26px; border: 1px solid var(--silver); border-radius: var(--rr-r-md); background: #fff; } .rrar .promise h3 { display: flex; align-items: center; gap: 10px; margin-block-end: 14px; } .rrar .promise ul { margin: 0; padding: 0; list-style: none; } .rrar .promise li { display: flex; gap: 11px; align-items: flex-start; padding-block: 10px; border-block-start: 1px solid #E7EBE9; font-size: 16px; line-height: 1.8; } .rrar .promise li:first-child { border-block-start: 0; padding-block-start: 0; } .rrar .promise li::before { flex: 0 0 auto; display: grid; width: 22px; height: 22px; margin-block-start: 5px; place-items: center; border-radius: 50%; font-size: 13px; font-weight: 800; } .rrar .promise--yes { border-block-start: 4px solid var(--green); } .rrar .promise--yes li::before { content: "\2713"; background: var(--sage); color: var(--green); } .rrar .promise--no { border-block-start: 4px solid var(--warning); background: var(--neutral); } .rrar .promise--no h3 { color: var(--warning); } .rrar .promise--no li::before { content: "\2715"; background: #F6E6E2; color: var(--warning); } /* ---------- 11. Image frame accent ---------- */ .rrar .image-frame { position: relative; } .rrar .image-frame::after { content: ""; position: absolute; z-index: 1; inset-block-start: 16px; inset-inline-start: 16px; width: 46px; height: 46px; border-block-start: 3px solid var(--gold); border-inline-start: 3px solid var(--gold); border-start-start-radius: 8px; pointer-events: none; } /* ---------- 12. Model chips as buttons ---------- */ .rrar .model-list { gap: 10px; } .rrar .model-list button { padding: 11px 18px; border: 1px solid transparent; border-radius: 999px; background: var(--sage); color: var(--forest); font-family: Tajawal, "Segoe UI", Tahoma, sans-serif; font-size: 15px; font-weight: 800; cursor: pointer; unicode-bidi: isolate; transition: background-color .2s var(--rr-ease), color .2s var(--rr-ease), transform .2s var(--rr-ease); } .rrar .model-list button:hover { background: var(--forest); color: #fff; transform: translateY(-2px); } .rrar .model-list button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; } .rrar .model-hint { margin-block-start: 18px; color: #5A6C65; font-size: 14.5px !important; } /* ---------- 13. FAQ ---------- */ .rrar .faq-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-block: 26px 8px; } .rrar .faq-search { position: relative; flex: 1 1 300px; } .rrar .faq-search input { width: 100%; min-height: 52px; padding: 13px 46px 13px 16px; border: 1px solid var(--silver); border-radius: 999px; background: #fff; color: var(--ink); font-family: Tajawal, "Segoe UI", Tahoma, sans-serif; font-size: 16px; } .rrar .faq-search input:focus { border-color: var(--green); outline: 3px solid var(--gold); outline-offset: 2px; } .rrar .faq-search svg { position: absolute; inset-block-start: 50%; inset-inline-start: 17px; width: 19px; height: 19px; transform: translateY(-50%); fill: #7A8A84; pointer-events: none; } .rrar .faq-toggle { min-height: 52px; padding: 12px 22px; border: 2px solid var(--forest); border-radius: 999px; background: transparent; color: var(--forest); font-family: Tajawal, "Segoe UI", Tahoma, sans-serif; font-size: 15px; font-weight: 800; cursor: pointer; transition: background-color .2s var(--rr-ease), color .2s var(--rr-ease); } .rrar .faq-toggle:hover { background: var(--forest); color: #fff; } .rrar .faq-group { margin-block-start: 28px; } .rrar .faq-group > h3 { margin-block-end: 12px; padding-inline-start: 13px; border-inline-start: 4px solid var(--gold); } .rrar .faq details { margin-block-end: 10px; padding: 0; border: 1px solid var(--silver); border-block-end: 1px solid var(--silver); border-radius: var(--rr-r-md); background: #fff; transition: border-color .25s var(--rr-ease), box-shadow .25s var(--rr-ease); } .rrar .faq details[open] { border-color: rgb(183 154 87 / .65); box-shadow: var(--rr-shadow-1); } .rrar .faq summary { display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 17px 20px; font-size: 17px; list-style: none; } .rrar .faq summary::-webkit-details-marker { display: none; } .rrar .faq summary::after { content: ""; flex: 0 0 auto; width: 11px; height: 11px; margin-block-start: -4px; border-inline-end: 2px solid var(--gold); border-block-end: 2px solid var(--gold); transform: rotate(45deg); transition: transform .25s var(--rr-ease); } .rrar .faq details[open] summary::after { margin-block-start: 4px; transform: rotate(-135deg); } .rrar .faq details p { padding: 0 20px 18px; margin: 0; font-size: 16px; } .rrar .faq details p a { color: var(--forest); font-weight: 700; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; } .rrar .faq-empty { padding: 22px; border: 1px dashed var(--silver); border-radius: var(--rr-r-md); background: var(--neutral); text-align: center; } /* ---------- 14. Sticky action dock, small screens only ---------- */ .rrar .dock { position: fixed; z-index: 60; inset-inline: 0; inset-block-end: 0; display: none; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-block-start: 1px solid rgb(183 154 87 / .5); background: rgb(21 63 53 / .97); box-shadow: 0 -10px 30px rgb(0 0 0 / .22); } .rrar .dock a { flex: 1 1 0; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; font-size: 15.5px; font-weight: 800; } .rrar .dock svg { width: 18px; height: 18px; fill: currentcolor; } .rrar .dock .dock-call { background: #fff; color: var(--forest) !important; } .rrar .dock .dock-wa { background: var(--gold); color: #172B25 !important; } .rrar .dock a:focus-visible { outline: 3px solid #fff; outline-offset: -4px; } /* ---------- 15. Warning block refinement ---------- */ .rrar .warning { position: relative; padding-inline-start: 74px; } .rrar .warning::before { content: "!"; position: absolute; inset-block-start: 26px; inset-inline-start: 26px; display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: var(--warning); color: #fff; font-size: 19px; font-weight: 800; } /* ---------- 16. Responsive ---------- */ @media (max-width: 1080px) { .rrar .triage-card { grid-template-columns: 1fr; } .rrar .triage-out { border-inline-start: 0; border-block-start: 1px solid var(--silver); } } @media (max-width: 980px) { .rrar .spec-strip .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rrar .promise-grid { grid-template-columns: 1fr; } } @media (max-width: 760px) { .rrar { padding-block-end: 82px; } .rrar .hero-facts li { font-size: 13.5px; } .rrar .spec-strip .wrap { grid-template-columns: 1fr; } .rrar .spec-strip .spec { padding: 20px 18px; } .rrar .timeline { padding-inline-start: 38px; } .rrar .timeline::before, .rrar .timeline::after { inset-inline-start: 16px; } .rrar .tl-item .tl-dot { inset-block-start: 18px; inset-inline-start: -38px; width: 34px; height: 34px; font-size: 14px; } .rrar .tl-item:hover { transform: none; } .rrar .triage-actions .site-ar-btn { flex: 1 1 100%; } .rrar .faq-toggle { width: 100%; } .rrar .warning { padding-inline-start: 22px; } .rrar .warning::before { position: static; margin-block-end: 12px; } .rrar .dock { display: flex; } .rrar .image-frame::after { inset-block-start: 12px; inset-inline-start: 12px; width: 34px; height: 34px; } } @media (min-width: 761px) { .rrar .dock { display: none !important; } } /* The floating chat widget and the dock must not share the same corner */ body.site-lang-ar.site-has-rrar-dock .chaty-widget, body.site-lang-ar.site-has-rrar-dock .chaty { display: none !important; } @media (prefers-reduced-motion: reduce) { .rrar.js .reveal, .rrar.js .reveal-stagger > * { opacity: 1 !important; transform: none !important; } .rrar .timeline::after { transition: none; } } .rrar .triage-card { align-items: start; gap: var(--rr-gap); border: 0; border-radius: 0; overflow: visible; background: transparent; box-shadow: none; } .rrar .triage-body { border: 1px solid var(--silver); border-radius: var(--rr-r-lg); background: #fff; box-shadow: var(--rr-shadow-1); } .rrar .triage-out { position: sticky; top: 18px; align-self: start; border: 1px solid var(--silver); border-radius: var(--rr-r-lg); background: linear-gradient(160deg, var(--neutral), #fff 65%); box-shadow: var(--rr-shadow-1); } @media (max-width: 1080px) { .rrar .triage-out { position: static; border: 1px solid var(--silver); } }
/**
 * Arabic global design layer.
 *
 * Enqueued only on Arabic URLs (body.site-lang-ar). This is the single home for
 * Tajawal, the design tokens and the .rrar component system, so Arabic pages
 * carry semantic HTML only and never repeat these rules inline.
 *
 * Scoped to the language, not to a page ID, so every Arabic page inherits the
 * reference-page system.
 */

/* ---------------------------------------------------------------- fonts ---- */

@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/tajawal-arabic-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}

@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/tajawal-arabic-700.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}

@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/tajawal-arabic-800.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}

@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/tajawal-arabic-900.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}

/* Latin subsets keep phone numbers, URLs and model names (L322, Evoque) legible
   inside RTL copy without falling back to a mismatched system font. */

@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/tajawal-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/tajawal-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/tajawal-latin-800.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/tajawal-latin-900.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------- theme layout overrides ---- */
/* Phlox Pro wraps page content in a constrained column and prints an entry
   header. Full-bleed Arabic sections need both removed. */

body.site-lang-ar .site-content > .container,
body.site-lang-ar .site-main,
body.site-lang-ar #primary,
body.site-lang-ar .entry-content {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.site-lang-ar #main.aux-content-top-margin {
  margin-top: 0 !important;
}

body.site-lang-ar .entry-main {
  margin-bottom: 0 !important;
}

body.site-lang-ar .entry-header,
body.site-lang-ar .post-thumb-img-content,
body.site-lang-ar .post-thumbnail {
  display: none !important;
}

/* wpautop leaves empty paragraphs and paragraph-wrapped scripts behind. */
body.site-lang-ar .entry-content > p:empty,
body.site-lang-ar .rrar > p:empty,
body.site-lang-ar .rrar > p:has(> script) {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ------------------------------------------------------- design tokens ---- */

.rrar {
  --forest: #153F35;
  --green: #246B58;
  --sage: #E8F0EB;
  --neutral: #F5F1E8;
  --silver: #D7D9D6;
  --gold: #B79A57;
  --ink: #20352F;
  --warning: #7A1E1E;

  direction: rtl;
  text-align: right;
  color: var(--ink);
  background: #fff;
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  overflow: hidden;
  font-family: "Tajawal", "Segoe UI", Tahoma, sans-serif;
}

.rrar *,
.rrar *::before,
.rrar *::after {
  box-sizing: border-box;
}

/* ------------------------------------------------------------ structure ---- */

.rrar .wrap {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.rrar section {
  padding: 72px 0;
}

/* ------------------------------------------------------------ typography ---- */

.rrar h1,
.rrar h2,
.rrar h3 {
  margin: 0 0 16px;
  line-height: 1.28;
}

.rrar h1 {
  max-width: 820px;
  color: #fff;
  font-size: clamp(40px, 5.5vw, 70px);
  font-weight: 800;
}

.rrar h2 {
  color: var(--forest);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 800;
}

.rrar h3 {
  color: var(--forest);
  font-size: 21px;
  font-weight: 800;
}

.rrar p,
.rrar li {
  font-size: 17px;
  line-height: 1.9;
}

.rrar p {
  margin: 0 0 16px;
}

.rrar a {
  text-decoration: none;
}

.rrar .eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--green);
  font-size: 14px;
  font-weight: 800;
}

.rrar .small {
  font-size: 14px !important;
  line-height: 1.7 !important;
}

/* Latin runs inside RTL copy: phone numbers, URLs, model designations. */
.rrar .latin,
.rrar a[href^="tel:"],
.rrar .model-list span {
  unicode-bidi: isolate;
}

/* ----------------------------------------------------------------- hero ---- */

.rrar .hero {
  min-height: 620px;
  display: flex;
  align-items: center;
  padding: 82px 0 88px;
  background:
    linear-gradient(270deg, rgba(21, 63, 53, .98) 0%, rgba(21, 63, 53, .91) 46%, rgba(21, 63, 53, .58) 100%),
    url('https://rangeroverspecialist.ae/wp-content/uploads/2023/10/range-rover.jpg') center / cover no-repeat;
}

.rrar .hero .eyebrow,
.rrar .dark .eyebrow,
.rrar .final .eyebrow {
  color: #EAD9A4;
}

.rrar .hero-copy {
  max-width: 770px;
  color: #F7F5EF;
  font-size: 20px;
}

.rrar .hero-note {
  margin-top: 18px;
  color: #E5ECE9;
  font-weight: 700;
}

/* -------------------------------------------------------------- buttons ---- */

.site-ar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.site-ar-btn,
.site-ar-btn:visited {
  position: relative;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 24px;
  border: 2px solid var(--forest, #153F35);
  border-radius: 9px;
  overflow: hidden;
  background: var(--forest, #153F35);
  color: #fff !important;
  font-family: "Tajawal", "Segoe UI", Tahoma, sans-serif;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
  text-decoration: none !important;
  box-shadow: 0 10px 24px rgb(0 0 0 / .14);
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}

.site-ar-btn--light,
.site-ar-btn--light:visited {
  border-color: #fff;
  background: #fff;
  color: var(--forest, #153F35) !important;
}

.site-ar-btn--whatsapp,
.site-ar-btn--whatsapp:visited {
  border-color: var(--gold, #B79A57);
  background: var(--gold, #B79A57);
  color: #172B25 !important;
}

.site-ar-btn:hover,
.site-ar-btn:focus-visible {
  transform: translateY(-2px);
  border-color: var(--green, #246B58);
  background: var(--green, #246B58);
  color: #fff !important;
}

.rrar .hero .site-ar-btn:hover,
.rrar .hero .site-ar-btn:focus-visible,
.rrar .final .site-ar-btn:hover,
.rrar .final .site-ar-btn:focus-visible,
.rrar .dark .site-ar-btn:hover,
.rrar .dark .site-ar-btn:focus-visible {
  border-color: #fff;
  background: transparent;
  color: #fff !important;
}

.site-ar-btn:focus-visible {
  outline: 3px solid var(--gold, #B79A57);
  outline-offset: 3px;
}

.site-ar-btn--sheen::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -45%;
  width: 32%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .34), transparent);
  transform: skewX(-18deg);
  transition: inset-inline-start .45s ease;
  pointer-events: none;
}

.site-ar-btn--sheen:hover::after,
.site-ar-btn--sheen:focus-visible::after {
  inset-inline-start: 115%;
}

.rrar .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.rrar .btn {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 24px;
  border: 2px solid #fff;
  border-radius: 8px;
  background: #fff;
  color: var(--forest) !important;
  font-weight: 800;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.rrar .btn.alt {
  border-color: var(--gold);
  background: var(--gold);
  color: #172B25 !important;
}

.rrar .btn:hover,
.rrar .btn:focus-visible {
  border-color: #fff;
  background: var(--sage);
  color: var(--forest) !important;
  outline: 3px solid #fff;
  outline-offset: 3px;
  transform: translateY(-1px);
}

/* ------------------------------------------------------------- sections ---- */

.rrar .intro,
.rrar .process,
.rrar .local {
  background: var(--neutral);
}

.rrar .quick-grid,
.rrar .service-grid,
.rrar .trust-grid {
  display: grid;
  gap: 16px;
  margin-top: 30px;
}

.rrar .quick-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rrar .service-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rrar .trust-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rrar .quick,
.rrar .service-card,
.rrar .trust-card,
.rrar .step {
  height: 100%;
  padding: 24px;
  border: 1px solid var(--silver);
  border-radius: 14px;
  background: #fff;
}

.rrar .quick b {
  display: block;
  margin-bottom: 8px;
  color: var(--green);
  font-size: 14px;
}

.rrar .service-card {
  display: flex;
  flex-direction: column;
  background: var(--neutral);
  border-color: #E7E0D5;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.rrar .service-card:hover,
.rrar .service-card:focus-within {
  border-color: var(--green);
  box-shadow: 0 12px 30px rgba(20, 52, 44, .1);
  transform: translateY(-2px);
}

.rrar .service-card .tag {
  align-self: flex-start;
  display: inline-block;
  margin-bottom: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--sage);
  color: var(--forest);
  font-size: 13px;
  font-weight: 800;
}

.rrar .dark {
  background: var(--forest);
  color: #fff;
}

.rrar .dark h2,
.rrar .dark h3 {
  color: #fff;
}

.rrar .symptom-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.rrar .symptom-card {
  height: 100%;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 14px;
  background: rgba(255, 255, 255, .07);
}

.rrar .split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: 44px;
  align-items: center;
}

.rrar .split.reverse {
  grid-template-columns: minmax(320px, .95fr) minmax(0, 1.05fr);
}

.rrar .image-frame {
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  background: var(--sage);
  box-shadow: 0 14px 34px rgba(21, 63, 53, .12);
}

.rrar .image-frame img {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
  object-fit: cover;
}

.rrar .image-frame img.portrait-focus {
  object-position: center 60%;
}

.rrar .image-frame figcaption {
  padding: 12px 16px;
  color: #52665F;
  background: #fff;
  font-size: 13px;
  line-height: 1.6;
}

.rrar .trust {
  background: var(--sage);
}

.rrar .trust-card {
  border-top: 5px solid var(--gold);
}

.rrar .steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 30px;
}

.rrar .step-number {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--forest);
  color: #fff;
  font-weight: 800;
}

.rrar .models {
  background: #fff;
}

.rrar .model-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.rrar .model-list span {
  padding: 11px 16px;
  border-radius: 999px;
  background: var(--sage);
  color: var(--forest);
  font-weight: 800;
}

.rrar .warning {
  margin-top: 26px;
  padding: 28px;
  border: 1px solid #D9A363;
  border-inline-start: 6px solid var(--warning);
  border-radius: 14px;
  background: #FFF7EE;
}

.rrar .warning h3 {
  color: var(--warning);
}

.rrar .decision-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.rrar .decision {
  padding: 24px;
  border: 1px solid var(--silver);
  border-radius: 14px;
  background: #fff;
}

.rrar .faq details {
  padding: 18px 0;
  border-bottom: 1px solid var(--silver);
}

.rrar .faq summary {
  cursor: pointer;
  color: var(--forest);
  font-size: 18px;
  font-weight: 800;
}

.rrar .faq summary:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 5px;
}

.rrar .faq details p {
  margin: 12px 0 0;
}

.rrar .author-box {
  padding: 26px;
  border: 1px solid var(--silver);
  border-radius: 14px;
  background: var(--neutral);
}

.rrar .author-box p:last-child {
  margin-bottom: 0;
}

.rrar .final {
  background: linear-gradient(135deg, var(--green), var(--forest));
  color: #fff;
}

.rrar .final h2 {
  color: #fff;
}

.rrar .final-copy {
  max-width: 850px;
  color: #F2F6F4;
  font-size: 19px;
}

/* ----------------------------------------------------------- responsive ---- */

@media (max-width: 980px) {
  .rrar .quick-grid,
  .rrar .service-grid,
  .rrar .trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rrar .symptom-grid,
  .rrar .decision-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rrar .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .rrar section {
    padding: 50px 0;
  }

  .rrar .wrap {
    width: min(100% - 28px, 1180px);
  }

  .rrar .hero {
    min-height: 590px;
    padding: 66px 0 74px;
    background-position: 48% center;
  }

  .rrar .hero-copy {
    font-size: 18px;
  }

  .rrar .actions {
    flex-direction: column;
  }

  .rrar .btn,
  .rrar .site-ar-actions .site-ar-btn {
    width: 100%;
  }

  .rrar .quick-grid,
  .rrar .service-grid,
  .rrar .symptom-grid,
  .rrar .trust-grid,
  .rrar .steps,
  .rrar .decision-grid,
  .rrar .split,
  .rrar .split.reverse {
    grid-template-columns: 1fr;
  }

  .rrar .split .image-frame {
    order: 2;
  }

  .rrar .quick,
  .rrar .service-card,
  .rrar .symptom-card,
  .rrar .trust-card,
  .rrar .step,
  .rrar .decision {
    padding: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rrar *,
  .rrar *::before,
  .rrar *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* Arabic homepage and service-page extensions */
body.page-id-14517 .elementor-location-header li.aux-menu-depth-0.current-menu-item > a.aux-item-content,
body.page-id-14517 .elementor-location-header li.aux-menu-depth-0.current-menu-ancestor > a.aux-item-content {
  color: #153F35 !important;
}

body.page-id-14517 .elementor-location-header li.aux-menu-depth-0 > a.aux-item-content:hover,
body.page-id-14517 .elementor-location-header li.aux-menu-depth-0 > a.aux-item-content:focus-visible {
  color: #246B58 !important;
}

.rrar p:empty {
  display: none !important;
}

.rrar .dark .service-card,
.rrar .dark .service-card h3,
.rrar .dark .service-card p {
  color: var(--ink);
}

.rrar .decision-note {
  margin: 22px 0 0;
  padding: 16px 18px;
  border-inline-start: 4px solid var(--gold);
  border-radius: 10px;
  background: rgb(255 255 255 / .12);
  color: #fff;
  font-weight: 700;
}

body.site-lang-ar .chaty-tooltip .on-hover-text {
  display: none !important;
}

body.site-lang-ar .chaty-widget.right-position {
  right: 6px !important;
}

@media (max-width: 760px) {
  body.site-lang-ar .chaty-widget {
    display: none !important;
  }
}

/* Transmission service */
/* Engine service */
/* Diagnostics service */
/* Maintenance service */
.rrar-maintenance .dark .history-step,
.rrar-maintenance .dark .history-step p,
.rrar-maintenance .dark .price-card,
.rrar-maintenance .dark .price-card h3,
.rrar-maintenance .dark .price-card p,
.rrar-maintenance .dark .scope-table td {
  color: var(--ink);
}

.rrar-maintenance .dark .scope-table td {
  background: #fff;
}

.rrar-maintenance .service-planner,
.rrar-maintenance .price-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.rrar-maintenance .plan-card {
  position: relative;
  padding: 26px;
  border: 1px solid var(--silver);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 24px rgb(21 63 53 / .06);
}

.rrar-maintenance .plan-card b {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--sage);
  color: var(--forest);
}

.rrar-maintenance .history-line {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 28px;
  border: 1px solid var(--silver);
  border-radius: 16px;
  overflow: hidden;
}

.rrar-maintenance .history-step {
  padding: 23px;
  border-inline-start: 1px solid var(--silver);
  background: #fff;
}

.rrar-maintenance .history-step:first-child {
  border-inline-start: 0;
}

.rrar-maintenance .history-step strong {
  display: block;
  color: var(--forest);
}

.rrar-maintenance .price-cards {
  gap: 15px;
  margin-top: 25px;
}

.rrar-maintenance .price-card {
  padding: 23px;
  border-top: 4px solid var(--gold);
  border-radius: 15px;
  background: #fff;
}

.rrar-maintenance .price-card strong {
  display: block;
  color: var(--forest);
  font-size: 20px;
}

.rrar-maintenance .image-frame img {
  object-position: center;
}

.rrar-maintenance .hero {
  min-height: 600px;
  padding: 54px 0 58px;
  background: linear-gradient(270deg, rgb(21 63 53 / .98) 0%, rgb(21 63 53 / .91) 50%, rgb(21 63 53 / .38) 100%), url("https://rangeroverspecialist.ae/wp-content/uploads/2023/07/Range-Rover-Service-1.jpg") center 50% / cover no-repeat;
}

.rrar-maintenance .hero-record {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(0, 1fr));
  max-width: 860px;
  margin-top: 22px;
  align-items: center;
  border: 1px solid rgb(255 255 255 / .28);
  border-radius: 14px;
  overflow: hidden;
  background: rgb(245 241 232 / .94);
  color: var(--forest);
}

.rrar-maintenance .hero-record strong {
  display: grid;
  align-self: stretch;
  padding: 12px 16px;
  place-items: center;
  background: var(--gold);
  color: var(--forest);
}

.rrar-maintenance .hero-record span {
  padding: 12px 14px;
  border-inline-start: 1px solid rgb(21 63 53 / .14);
  font-weight: 800;
}

@media (max-width: 950px) {
  .rrar-maintenance .service-planner,
  .rrar-maintenance .price-cards {
    grid-template-columns: 1fr;
  }

  .rrar-maintenance .history-line {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .rrar-maintenance .history-line {
    grid-template-columns: 1fr;
  }

  .rrar-maintenance .history-step {
    border-inline-start: 0;
    border-bottom: 1px solid var(--silver);
  }

  .rrar-maintenance .hero-record {
    grid-template-columns: 1fr 1fr;
  }

  .rrar-maintenance .hero-record strong {
    grid-column: 1 / -1;
  }

  .rrar-maintenance .hero-record span {
    padding: 9px 11px;
  }
}

/* Brake service */
.rrar-brakes .dark .service-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rrar-brakes .safety-gate {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
  margin-top: 26px;
}

.rrar-brakes .gate {
  padding: 24px;
  border: 1px solid var(--silver);
  border-radius: 16px;
  background: #fff;
}

.rrar-brakes .gate.stop {
  border-top: 5px solid #8A2525;
}

.rrar-brakes .gate.caution {
  border-top: 5px solid #B7791F;
}

.rrar-brakes .gate.inspect {
  border-top: 5px solid var(--green);
}

.rrar-brakes .brake-map {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
}

.rrar-brakes .brake-node {
  padding: 20px 14px;
  border: 1px solid var(--silver);
  border-radius: 14px;
  background: #fff;
  text-align: center;
}

.rrar-brakes .brake-node strong {
  display: block;
  color: var(--forest);
}

.rrar-brakes .cost-band {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid rgb(183 154 87 / .65);
  border-radius: 16px;
  background: linear-gradient(135deg, #fff, var(--neutral));
}

.rrar-brakes .cost-band strong {
  display: block;
  color: var(--forest);
  font-size: 21px;
}

.rrar-brakes .image-frame img {
  object-position: center;
}

.rrar-brakes .hero {
  min-height: 600px;
  padding: 54px 0 58px;
  background: linear-gradient(270deg, rgb(21 63 53 / .98) 0%, rgb(21 63 53 / .92) 52%, rgb(21 63 53 / .38) 100%), url("https://rangeroverspecialist.ae/wp-content/uploads/2023/07/Range-Rove-Brake.jpg") center 52% / cover no-repeat;
}

.rrar-brakes .hero-gate {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 820px;
  gap: 10px;
  margin-top: 22px;
}

.rrar-brakes .hero-gate div {
  padding: 11px 14px;
  border: 1px solid rgb(255 255 255 / .28);
  border-radius: 12px;
  background: rgb(10 39 33 / .62);
  color: #fff;
}

.rrar-brakes .hero-gate strong {
  display: block;
  margin-bottom: 2px;
  color: #EAD9A4;
  font-size: 14px;
}

.rrar-brakes .hero-gate .stop {
  border-color: rgb(245 119 105 / .8);
  background: rgb(104 29 24 / .76);
}

@media (max-width: 1050px) {
  .rrar-brakes .brake-map {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .rrar-brakes .dark .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .rrar-brakes .safety-gate {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .rrar-brakes .brake-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rrar-brakes .dark .service-grid,
  .rrar-brakes .hero-gate {
    grid-template-columns: 1fr;
  }
}

.rrar-diagnostics .dark .outcome h3 {
  color: var(--forest);
}

.rrar-diagnostics .signal-chain {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
}

.rrar-diagnostics .signal {
  position: relative;
  padding: 21px 17px;
  border: 1px solid var(--silver);
  border-radius: 14px;
  background: #fff;
  text-align: center;
}

.rrar-diagnostics .signal b {
  display: grid;
  width: 42px;
  height: 42px;
  margin: 0 auto 12px;
  place-items: center;
  border-radius: 50%;
  background: var(--forest);
  color: #fff;
}

.rrar-diagnostics .signal:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 41px;
  left: -11px;
  width: 11px;
  height: 2px;
  background: var(--gold);
}

.rrar-diagnostics .diagnostic-matrix,
.rrar-maintenance .scope-table,
.rrar .action-table {
  width: 100%;
  margin-top: 26px;
  border: 1px solid var(--silver);
  border-radius: 15px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: #fff;
}

.rrar-diagnostics .diagnostic-matrix th,
.rrar-diagnostics .diagnostic-matrix td,
.rrar-maintenance .scope-table th,
.rrar-maintenance .scope-table td,
.rrar .action-table th,
.rrar .action-table td {
  padding: 16px;
  border-bottom: 1px solid var(--silver);
  text-align: right;
  vertical-align: top;
  color: var(--ink);
}

.rrar-diagnostics .diagnostic-matrix th,
.rrar-maintenance .scope-table th,
.rrar .action-table th {
  background: var(--forest);
  color: #fff;
}

.rrar-diagnostics .diagnostic-matrix tr:last-child td,
.rrar-maintenance .scope-table tr:last-child td,
.rrar .action-table tr:last-child td {
  border-bottom: 0;
}

.rrar-diagnostics .outcome-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 25px;
}

.rrar-diagnostics .outcome {
  padding: 22px;
  border-top: 4px solid var(--gold);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
}

.rrar-diagnostics .estimate {
  margin-top: 24px;
  padding: 23px;
  border: 1px solid rgb(183 154 87 / .62);
  border-radius: 15px;
  background: linear-gradient(135deg, var(--neutral), #fff);
}

.rrar-diagnostics .estimate strong {
  display: block;
  color: var(--forest);
  font-size: 21px;
}

.rrar-diagnostics .hero {
  min-height: 600px;
  padding: 54px 0 58px;
  background: linear-gradient(270deg, rgb(21 63 53 / .98) 0%, rgb(21 63 53 / .91) 50%, rgb(21 63 53 / .36) 100%), url("https://rangeroverspecialist.ae/wp-content/uploads/2023/07/Range-Rover-ECU-repair-1.jpg") center 48% / cover no-repeat;
}

.rrar-diagnostics .hero-chain {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  max-width: 780px;
  margin: 22px 0 0;
  padding: 0;
  border: 1px solid rgb(255 255 255 / .28);
  border-radius: 14px;
  overflow: hidden;
  background: rgb(10 39 33 / .6);
  backdrop-filter: blur(7px);
  list-style: none;
}

.rrar-diagnostics .hero-chain li {
  display: flex;
  flex: 1 1 185px;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  color: #fff;
  font-weight: 800;
}

.rrar-diagnostics .hero-chain li + li {
  border-inline-start: 1px solid rgb(255 255 255 / .18);
}

.rrar-diagnostics .hero-chain b {
  display: grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--forest);
}

@media (max-width: 1000px) {
  .rrar-diagnostics .signal-chain,
  .rrar-diagnostics .outcome-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rrar-diagnostics .signal::after {
    display: none;
  }
}

@media (max-width: 760px) {
  .rrar-diagnostics .signal-chain,
  .rrar-diagnostics .outcome-grid {
    grid-template-columns: 1fr;
  }

  .rrar-diagnostics .diagnostic-matrix,
  .rrar-diagnostics .diagnostic-matrix tbody,
  .rrar-diagnostics .diagnostic-matrix tr,
  .rrar-diagnostics .diagnostic-matrix td,
  .rrar-maintenance .scope-table,
  .rrar-maintenance .scope-table tbody,
  .rrar-maintenance .scope-table tr,
  .rrar-maintenance .scope-table td,
  .rrar .action-table,
  .rrar .action-table tbody,
  .rrar .action-table tr,
  .rrar .action-table td {
    display: block;
    width: 100%;
  }

  .rrar-diagnostics .diagnostic-matrix thead,
  .rrar-maintenance .scope-table thead,
  .rrar .action-table thead {
    display: none;
  }

  .rrar-diagnostics .diagnostic-matrix tr {
    border-bottom: 3px solid var(--sage);
  }

  .rrar-diagnostics .diagnostic-matrix td::before,
  .rrar-maintenance .scope-table td::before,
  .rrar .action-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: var(--forest);
    font-weight: 900;
  }
}

.rrar-engine .dark .severity article,
.rrar-engine .dark .severity article h3,
.rrar-engine .dark .severity article p {
  color: var(--ink);
}

.rrar-engine .evidence-ladder {
  display: grid;
  gap: 0;
  margin-top: 28px;
  counter-reset: evidence;
}

.rrar-engine .evidence-rung {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 18px;
  padding: 20px;
  border: 1px solid var(--silver);
  border-bottom: 0;
  background: #fff;
}

.rrar-engine .evidence-rung:first-child {
  border-radius: 16px 16px 0 0;
}

.rrar-engine .evidence-rung:last-child {
  border-bottom: 1px solid var(--silver);
  border-radius: 0 0 16px 16px;
}

.rrar-engine .evidence-rung::before {
  counter-increment: evidence;
  content: counter(evidence);
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  background: var(--forest);
  color: #fff;
  font-weight: 900;
}

.rrar-engine .evidence-rung h3 {
  margin: 0 0 5px;
}

.rrar-engine .repair-board,
.rrar-engine .severity {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.rrar-engine .repair-route {
  padding: 25px;
  border: 1px solid rgb(255 255 255 / .18);
  border-top: 4px solid var(--gold);
  border-radius: 16px;
  background: rgb(255 255 255 / .07);
}

.rrar-engine .repair-route h3 {
  color: #F0E1B8;
}

.rrar-engine .severity {
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 24px;
}

.rrar-engine .severity article {
  padding: 21px;
  border: 1px solid var(--silver);
  border-radius: 14px;
  background: #fff;
}

.rrar-engine .severity .stop {
  border-inline-start: 5px solid #8A2525;
}

.rrar-engine .severity .caution {
  border-inline-start: 5px solid #B7791F;
}

.rrar-engine .severity .inspect {
  border-inline-start: 5px solid var(--green);
}

.rrar-engine .cost-note {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid rgb(183 154 87 / .65);
  border-radius: 16px;
  background: var(--neutral);
}

.rrar-engine .cost-note strong {
  display: block;
  color: var(--forest);
  font-size: 21px;
}

.rrar-engine .image-frame img {
  object-position: center 15%;
}

.rrar-engine .hero {
  min-height: 600px;
  padding: 54px 0 58px;
  background: linear-gradient(270deg, rgb(21 63 53 / .98) 0%, rgb(21 63 53 / .92) 52%, rgb(21 63 53 / .38) 100%), url("https://rangeroverspecialist.ae/wp-content/uploads/2023/07/Range-rover-engine-repair.jpg") center 46% / cover no-repeat;
}

.rrar-engine .hero-safety {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 820px;
  margin-top: 22px;
}

.rrar-engine .hero-safety span {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  padding: 9px 14px;
  border: 1px solid rgb(255 255 255 / .28);
  border-radius: 999px;
  background: rgb(10 39 33 / .58);
  color: #fff;
  font-weight: 800;
}

.rrar-engine .hero-safety .urgent {
  border-color: rgb(244 176 76 / .75);
  background: rgb(113 61 12 / .72);
}

.rrar-engine .faq-list .wrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.rrar-engine .faq-list .eyebrow,
.rrar-engine .faq-list h2,
.rrar-engine .faq-list .faq:last-child {
  grid-column: 1 / -1;
}

.rrar-engine .faq-list .faq {
  margin: 0;
  padding: 0 18px;
  border: 1px solid var(--silver);
  border-radius: 14px;
  overflow: hidden;
  background: var(--neutral);
}

.rrar-engine .faq-list .faq summary {
  min-height: 68px;
  padding: 18px 28px 18px 0;
  color: var(--forest);
  font-weight: 800;
  line-height: 1.65;
  cursor: pointer;
}

.rrar-engine .faq-list .faq p {
  margin: 0;
  padding: 0 0 18px;
  color: var(--ink);
}

@media (max-width: 900px) {
  .rrar-engine .repair-board,
  .rrar-engine .severity {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .rrar-engine .evidence-rung {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
    padding: 17px;
  }

  .rrar-engine .evidence-rung::before {
    width: 40px;
    height: 40px;
  }

  .rrar-engine .faq-list .wrap {
    grid-template-columns: 1fr;
  }

  .rrar-engine .faq-list .faq,
  .rrar-engine .faq-list .faq:last-child {
    grid-column: 1;
  }
}

.rrar-transmission .dark .path h3 {
  color: var(--forest);
}

.rrar-transmission .observation-list {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.rrar-transmission .observation-list article {
  padding: 18px 20px;
  border: 1px solid var(--silver);
  border-inline-start: 5px solid var(--gold);
  border-radius: 12px;
  background: #fff;
}

.rrar-transmission .observation-list h3 {
  margin-bottom: 5px;
  font-size: 18px;
}

.rrar-transmission .observation-list p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.8;
}

.rrar-transmission .owner-note {
  margin: 14px 0 0;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--sage);
  color: var(--forest);
  font-weight: 800;
}

.rrar-transmission .shift-map {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.rrar-transmission .shift-point {
  position: relative;
  padding: 22px;
  border: 1px solid var(--silver);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 10px 24px rgb(21 63 53 / .06);
}

.rrar-transmission .shift-point::before {
  content: attr(data-order);
  display: grid;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  place-items: center;
  border-radius: 50%;
  background: var(--forest);
  color: #fff;
  font-weight: 800;
}

.rrar-transmission .shift-point h3 {
  margin-bottom: 7px;
}

.rrar-transmission .pathway {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 26px;
}

.rrar-transmission .path {
  padding: 24px;
  border-top: 4px solid var(--gold);
  border-radius: 15px;
  background: #fff;
  color: var(--ink);
}

.rrar-transmission .price-band {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid rgb(183 154 87 / .65);
  border-radius: 16px;
  background: linear-gradient(135deg, #fff, var(--neutral));
}

.rrar-transmission .price-band strong {
  display: block;
  color: var(--forest);
  font-size: 21px;
}

.rrar-transmission .evidence-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.rrar-transmission .evidence-strip div {
  padding: 18px;
  border-inline-start: 4px solid var(--gold);
  border-radius: 12px;
  background: var(--sage);
}

.rrar-transmission .image-frame img {
  object-position: center 25%;
}

.rrar-transmission .hero {
  min-height: 600px;
  padding: 54px 0 58px;
  background: linear-gradient(270deg, rgb(21 63 53 / .98) 0%, rgb(21 63 53 / .93) 52%, rgb(21 63 53 / .42) 100%), url("https://rangeroverspecialist.ae/wp-content/uploads/2023/07/Range-Rover-Transmission-.jpg") center 48% / cover no-repeat;
}

.rrar-transmission .hero-decision {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 810px;
  margin-top: 22px;
  border: 1px solid rgb(255 255 255 / .28);
  border-radius: 14px;
  overflow: hidden;
  background: rgb(10 39 33 / .58);
  backdrop-filter: blur(7px);
}

.rrar-transmission .hero-decision div {
  padding: 13px 16px;
  border-inline-start: 1px solid rgb(255 255 255 / .18);
}

.rrar-transmission .hero-decision div:first-child {
  border-inline-start: 0;
}

.rrar-transmission .hero-decision strong {
  display: block;
  margin-bottom: 2px;
  color: #EAD9A4;
  font-size: 14px;
}

.rrar-transmission .hero-decision span {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

@media (max-width: 1000px) {
  .rrar-transmission .shift-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rrar-transmission .pathway {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .rrar-transmission .shift-map,
  .rrar-transmission .evidence-strip,
  .rrar-transmission .hero-decision {
    grid-template-columns: 1fr;
  }

  .rrar-transmission .hero-decision div {
    padding: 10px 13px;
    border-top: 1px solid rgb(255 255 255 / .18);
    border-inline-start: 0;
  }

  .rrar-transmission .hero-decision div:first-child {
    border-top: 0;
  }
}

/* Mobile header and CTA collision safeguards */
@media (max-width: 768px) {
  body.site-lang-ar .elementor-location-header .aux-nav-menu-element .aux-offcanvas-menu:not(.aux-open) {
    display: none !important;
  }

  body.site-lang-ar .elementor-location-header .aux-nav-menu-element .aux-offcanvas-menu.aux-open {
    display: block !important;
  }

  .rrar .dock {
    display: none !important;
  }

  .rrar {
    padding-block-end: 0;
  }
}

/* ============================================================================ SITE ARABIC DESIGN SYSTEM, ADDITIONS v2 Append this block to the Site Arabic Design plugin stylesheet, after the existing rules. Every selector uses .rrar or .site-ar-* only. No page-id selectors, no inline styles, no page-level overrides. ============================================================================ */ /* ---------- 1. Tokens added to the system ---------- */ .rrar { --rr-shadow-1: 0 8px 22px rgb(21 63 53 / .07); --rr-shadow-2: 0 20px 48px rgb(21 63 53 / .16); --rr-ease: cubic-bezier(.22, .61, .36, 1); --rr-r-lg: 20px; --rr-r-md: 14px; --rr-r-sm: 10px; --rr-gap: clamp(14px, 1.5vw, 18px); } /* ---------- 2. Utilities ---------- */ .rrar .rr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .rrar.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--rr-ease), transform .7s var(--rr-ease); } .rrar.js .reveal.is-in { opacity: 1; transform: none; } .rrar.js .reveal-stagger > * { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--rr-ease), transform .6s var(--rr-ease); transition-delay: calc(var(--i, 0) * 60ms); } .rrar.js .reveal-stagger.is-in > * { opacity: 1; transform: none; } /* ---------- 3. Section head ---------- */ .rrar .section-head { max-width: 860px; margin-block-end: 8px; } .rrar .section-head .eyebrow { display: inline-flex; align-items: center; gap: 10px; } .rrar .section-head .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--gold); } .rrar .section-head .lead { max-width: 74ch; font-size: 18px; color: #43574F; } .rrar .dark .section-head .lead, .rrar .final .section-head .lead { color: #DCE7E2; } /* ---------- 4. Hero ---------- */ .rrar .hero { position: relative; isolation: isolate; overflow: hidden; } .rrar .hero::before { content: ""; position: absolute; z-index: 0; inset-block-start: -30%; inset-inline-start: -10%; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; border-radius: 50%; background: radial-gradient(circle, rgb(183 154 87 / .22) 0%, rgb(183 154 87 / 0) 62%); pointer-events: none; } .rrar .hero::after { content: ""; position: absolute; z-index: 0; inset-inline: 0; inset-block-end: 0; height: 120px; background: linear-gradient(to top, rgb(255 255 255 / .1), transparent); pointer-events: none; } .rrar .hero .wrap { position: relative; z-index: 1; } .rrar .hero .eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 12px; border: 1px solid rgb(234 217 164 / .38); border-radius: 999px; background: rgb(255 255 255 / .08); } .rrar .hero .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgb(183 154 87 / .28); } .rrar .hero h1 { max-width: 940px; font-size: clamp(40px, 4.7vw, 64px); letter-spacing: -.5px; } .rrar .hero-note { display: flex; flex-wrap: wrap; gap: 6px 18px; } .rrar .hero-note span:last-child { color: #F7F5EF; } .rrar .hero-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; } .rrar .hero-facts li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid rgb(255 255 255 / .26); border-radius: 999px; background: rgb(255 255 255 / .09); color: #F2F6F4; font-size: 14.5px; font-weight: 700; line-height: 1.4; } .rrar .hero-facts svg { flex: 0 0 auto; width: 16px; height: 16px; fill: #EAD9A4; } /* ---------- 5. Spec strip ---------- */ .rrar .spec-strip { padding: 0; background: var(--forest); } .rrar .spec-strip .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: rgb(255 255 255 / .14); border-inline: 1px solid rgb(255 255 255 / .14); } .rrar .spec-strip .spec { display: flex; align-items: center; gap: 14px; padding: 26px 22px; background: var(--forest); } .rrar .spec-strip .spec svg { flex: 0 0 auto; width: 26px; height: 26px; fill: var(--gold); } .rrar .spec-strip .spec b { display: block; color: #fff; font-size: 16px; font-weight: 800; line-height: 1.4; } .rrar .spec-strip .spec span { display: block; margin-block-start: 3px; color: #C6D5CF; font-size: 13.5px; line-height: 1.6; } /* ---------- 6. Card family, shared behaviour ---------- */ .rrar .quick, .rrar .service-card, .rrar .trust-card, .rrar .decision, .rrar .promise { transition: transform .3s var(--rr-ease), box-shadow .3s var(--rr-ease), border-color .3s var(--rr-ease); } .rrar .quick:hover, .rrar .trust-card:hover, .rrar .decision:hover, .rrar .promise:hover { transform: translateY(-3px); border-color: rgb(183 154 87 / .6); box-shadow: var(--rr-shadow-2); } .rrar .quick, .rrar .decision { border-radius: var(--rr-r-md); } .rrar .quick { position: relative; padding-block-start: 26px; overflow: hidden; } .rrar .quick::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 4px; background: linear-gradient(to left, var(--gold), rgb(183 154 87 / .25)); } .rrar .decision { border-inline-start: 4px solid var(--forest); } /* Service cards, tag chip plus a next step line */ .rrar .service-card { border-radius: var(--rr-r-md); } .rrar .service-card .next-step { margin-block: auto 0; padding-block-start: 14px; border-block-start: 1px dashed #CFC7B7; color: var(--forest); font-size: 14.5px; font-weight: 700; line-height: 1.7; } .rrar .service-card .next-step a { color: var(--forest); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; } .rrar .service-card .next-step a:hover, .rrar .service-card .next-step a:focus-visible { color: var(--green); text-decoration-color: var(--green); } /* ---------- 7. Symptom cards with icons ---------- */ .rrar .symptom-grid { grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); gap: var(--rr-gap); } .rrar .symptom-card { display: flex; flex-direction: column; gap: 4px; border-inline-start: 4px solid rgb(183 154 87 / .85); transition: background-color .3s var(--rr-ease), border-color .3s var(--rr-ease), transform .3s var(--rr-ease); } .rrar .symptom-card:hover { transform: translateY(-3px); border-inline-start-color: #EAD9A4; background: rgb(255 255 255 / .13); } .rrar .symptom-card .ico { display: grid; width: 42px; height: 42px; margin-block-end: 12px; place-items: center; border-radius: 12px; background: rgb(255 255 255 / .12); } .rrar .symptom-card .ico svg { width: 22px; height: 22px; fill: #EAD9A4; } .rrar .symptom-card p { margin: 0; color: #DCE7E2; font-size: 15.5px; } /* ---------- 8. Triage, the symptom describer ---------- */ .rrar .triage { background: var(--sage); } .rrar .triage-card { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .85fr); gap: 0; margin-block-start: 30px; border: 1px solid var(--silver); border-radius: var(--rr-r-lg); overflow: hidden; background: #fff; box-shadow: var(--rr-shadow-1); } .rrar .triage-body { padding: clamp(22px, 2.4vw, 34px); } .rrar .triage-step { margin: 0 0 26px; padding: 0; border: 0; } .rrar .triage-step:last-child { margin-block-end: 0; } .rrar .triage-step legend { display: flex; align-items: center; gap: 12px; margin-block-end: 14px; padding: 0; color: var(--forest); font-size: 19px; font-weight: 800; } .rrar .triage-num { display: grid; flex: 0 0 auto; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: var(--forest); color: #fff; font-size: 15px; font-weight: 800; } .rrar .chip-row { display: flex; flex-wrap: wrap; gap: 9px; } .rrar .chip { padding: 10px 16px; border: 1px solid var(--silver); border-radius: 999px; background: #fff; color: var(--ink); font-family: Tajawal, "Segoe UI", Tahoma, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.4; cursor: pointer; transition: background-color .2s var(--rr-ease), border-color .2s var(--rr-ease), color .2s var(--rr-ease), transform .2s var(--rr-ease); } .rrar .chip:hover { border-color: var(--green); background: var(--sage); transform: translateY(-1px); } .rrar .chip[aria-pressed="true"] { border-color: var(--forest); background: var(--forest); color: #fff; } .rrar .chip[aria-pressed="true"]::before { content: "\2713"; margin-inline-end: 7px; color: #EAD9A4; font-weight: 800; } .rrar .chip:focus-visible, .rrar .faq-toggle:focus-visible, .rrar .triage-field input:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; } .rrar .triage-fields { display: flex; flex-wrap: wrap; gap: 14px; margin-block-start: 16px; } .rrar .triage-field { flex: 1 1 190px; } .rrar .triage-field span { display: block; margin-block-end: 7px; color: var(--forest); font-size: 14px; font-weight: 800; } .rrar .triage-field input { width: 100%; min-height: 48px; padding: 11px 15px; border: 1px solid var(--silver); border-radius: var(--rr-r-sm); background: #fff; color: var(--ink); font-family: Tajawal, "Segoe UI", Tahoma, sans-serif; font-size: 16px; unicode-bidi: plaintext; } .rrar .triage-field input:focus { border-color: var(--green); } .rrar .triage-out { display: flex; flex-direction: column; padding: clamp(22px, 2.4vw, 30px); border-inline-start: 1px solid var(--silver); background: linear-gradient(160deg, var(--neutral), #fff 65%); } .rrar .triage-out h3 { display: flex; align-items: center; gap: 9px; margin-block-end: 12px; } .rrar .triage-out h3::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); } .rrar .triage-msg { min-height: 132px; padding: 16px 18px; border: 1px dashed #C3BCAC; border-radius: var(--rr-r-md); background: #fff; color: var(--ink); font-size: 15.5px; line-height: 1.95; white-space: pre-line; } .rrar .triage-msg.is-empty { color: #6C7C76; } .rrar .triage-path { margin-block-start: 16px; } .rrar .triage-path b { display: block; margin-block-end: 8px; color: var(--forest); font-size: 14px; } .rrar .triage-path ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; } .rrar .triage-path li { padding: 7px 13px; border: 1px solid rgb(183 154 87 / .55); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 700; line-height: 1.4; } .rrar .triage-path li a { color: var(--forest); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; } .rrar .triage-note { margin-block: 16px 0; color: #5A6C65; font-size: 13.5px !important; line-height: 1.7 !important; } .rrar .triage-actions { margin-block-start: auto; padding-block-start: 18px; gap: 10px; } .rrar .triage-actions .site-ar-btn { flex: 1 1 150px; min-height: 48px; font-size: 15px; } .rrar .triage-live { min-height: 20px; margin-block-start: 10px; color: var(--green); font-size: 13.5px; font-weight: 800; } /* ---------- 9. Process timeline ---------- */ .rrar .timeline { position: relative; max-width: 880px; margin-block-start: 34px; padding-inline-start: 46px; } .rrar .timeline::before { content: ""; position: absolute; inset-block: 14px 14px; inset-inline-start: 20px; width: 2px; background: var(--silver); } .rrar .timeline::after { content: ""; position: absolute; inset-block-start: 14px; inset-inline-start: 20px; width: 2px; height: calc(var(--fill, 0) * (100% - 28px)); background: linear-gradient(to bottom, var(--gold), var(--green)); transition: height .25s linear; } .rrar .tl-item { position: relative; margin-block-end: 16px; padding: 22px 24px; border: 1px solid var(--silver); border-radius: var(--rr-r-md); background: #fff; transition: transform .3s var(--rr-ease), box-shadow .3s var(--rr-ease), border-color .3s var(--rr-ease); } .rrar .tl-item:last-child { margin-block-end: 0; } .rrar .tl-item:hover { transform: translateX(-4px); border-color: rgb(183 154 87 / .6); box-shadow: var(--rr-shadow-2); } .rrar .tl-item .tl-dot { position: absolute; z-index: 1; inset-block-start: 24px; inset-inline-start: -46px; display: grid; width: 42px; height: 42px; place-items: center; border: 3px solid var(--neutral); border-radius: 50%; background: var(--forest); color: #fff; font-size: 16px; font-weight: 800; } .rrar .tl-item.is-in .tl-dot { background: var(--gold); color: #172B25; } .rrar .tl-item h3 { margin-block-end: 6px; } .rrar .tl-item p { margin: 0; font-size: 16px; } /* ---------- 10. Promise grid, what we commit to and what we do not promise ---------- */ .rrar .promise-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rr-gap); margin-block-start: 30px; } .rrar .promise { padding: 26px; border: 1px solid var(--silver); border-radius: var(--rr-r-md); background: #fff; } .rrar .promise h3 { display: flex; align-items: center; gap: 10px; margin-block-end: 14px; } .rrar .promise ul { margin: 0; padding: 0; list-style: none; } .rrar .promise li { display: flex; gap: 11px; align-items: flex-start; padding-block: 10px; border-block-start: 1px solid #E7EBE9; font-size: 16px; line-height: 1.8; } .rrar .promise li:first-child { border-block-start: 0; padding-block-start: 0; } .rrar .promise li::before { flex: 0 0 auto; display: grid; width: 22px; height: 22px; margin-block-start: 5px; place-items: center; border-radius: 50%; font-size: 13px; font-weight: 800; } .rrar .promise--yes { border-block-start: 4px solid var(--green); } .rrar .promise--yes li::before { content: "\2713"; background: var(--sage); color: var(--green); } .rrar .promise--no { border-block-start: 4px solid var(--warning); background: var(--neutral); } .rrar .promise--no h3 { color: var(--warning); } .rrar .promise--no li::before { content: "\2715"; background: #F6E6E2; color: var(--warning); } /* ---------- 11. Image frame accent ---------- */ .rrar .image-frame { position: relative; } .rrar .image-frame::after { content: ""; position: absolute; z-index: 1; inset-block-start: 16px; inset-inline-start: 16px; width: 46px; height: 46px; border-block-start: 3px solid var(--gold); border-inline-start: 3px solid var(--gold); border-start-start-radius: 8px; pointer-events: none; } /* ---------- 12. Model chips as buttons ---------- */ .rrar .model-list { gap: 10px; } .rrar .model-list button { padding: 11px 18px; border: 1px solid transparent; border-radius: 999px; background: var(--sage); color: var(--forest); font-family: Tajawal, "Segoe UI", Tahoma, sans-serif; font-size: 15px; font-weight: 800; cursor: pointer; unicode-bidi: isolate; transition: background-color .2s var(--rr-ease), color .2s var(--rr-ease), transform .2s var(--rr-ease); } .rrar .model-list button:hover { background: var(--forest); color: #fff; transform: translateY(-2px); } .rrar .model-list button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; } .rrar .model-hint { margin-block-start: 18px; color: #5A6C65; font-size: 14.5px !important; } /* ---------- 13. FAQ ---------- */ .rrar .faq-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-block: 26px 8px; } .rrar .faq-search { position: relative; flex: 1 1 300px; } .rrar .faq-search input { width: 100%; min-height: 52px; padding: 13px 46px 13px 16px; border: 1px solid var(--silver); border-radius: 999px; background: #fff; color: var(--ink); font-family: Tajawal, "Segoe UI", Tahoma, sans-serif; font-size: 16px; } .rrar .faq-search input:focus { border-color: var(--green); outline: 3px solid var(--gold); outline-offset: 2px; } .rrar .faq-search svg { position: absolute; inset-block-start: 50%; inset-inline-start: 17px; width: 19px; height: 19px; transform: translateY(-50%); fill: #7A8A84; pointer-events: none; } .rrar .faq-toggle { min-height: 52px; padding: 12px 22px; border: 2px solid var(--forest); border-radius: 999px; background: transparent; color: var(--forest); font-family: Tajawal, "Segoe UI", Tahoma, sans-serif; font-size: 15px; font-weight: 800; cursor: pointer; transition: background-color .2s var(--rr-ease), color .2s var(--rr-ease); } .rrar .faq-toggle:hover { background: var(--forest); color: #fff; } .rrar .faq-group { margin-block-start: 28px; } .rrar .faq-group > h3 { margin-block-end: 12px; padding-inline-start: 13px; border-inline-start: 4px solid var(--gold); } .rrar .faq details { margin-block-end: 10px; padding: 0; border: 1px solid var(--silver); border-block-end: 1px solid var(--silver); border-radius: var(--rr-r-md); background: #fff; transition: border-color .25s var(--rr-ease), box-shadow .25s var(--rr-ease); } .rrar .faq details[open] { border-color: rgb(183 154 87 / .65); box-shadow: var(--rr-shadow-1); } .rrar .faq summary { display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 17px 20px; font-size: 17px; list-style: none; } .rrar .faq summary::-webkit-details-marker { display: none; } .rrar .faq summary::after { content: ""; flex: 0 0 auto; width: 11px; height: 11px; margin-block-start: -4px; border-inline-end: 2px solid var(--gold); border-block-end: 2px solid var(--gold); transform: rotate(45deg); transition: transform .25s var(--rr-ease); } .rrar .faq details[open] summary::after { margin-block-start: 4px; transform: rotate(-135deg); } .rrar .faq details p { padding: 0 20px 18px; margin: 0; font-size: 16px; } .rrar .faq details p a { color: var(--forest); font-weight: 700; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; } .rrar .faq-empty { padding: 22px; border: 1px dashed var(--silver); border-radius: var(--rr-r-md); background: var(--neutral); text-align: center; } /* ---------- 14. Sticky action dock, small screens only ---------- */ .rrar .dock { position: fixed; z-index: 60; inset-inline: 0; inset-block-end: 0; display: none; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-block-start: 1px solid rgb(183 154 87 / .5); background: rgb(21 63 53 / .97); box-shadow: 0 -10px 30px rgb(0 0 0 / .22); } .rrar .dock a { flex: 1 1 0; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; font-size: 15.5px; font-weight: 800; } .rrar .dock svg { width: 18px; height: 18px; fill: currentcolor; } .rrar .dock .dock-call { background: #fff; color: var(--forest) !important; } .rrar .dock .dock-wa { background: var(--gold); color: #172B25 !important; } .rrar .dock a:focus-visible { outline: 3px solid #fff; outline-offset: -4px; } /* ---------- 15. Warning block refinement ---------- */ .rrar .warning { position: relative; padding-inline-start: 74px; } .rrar .warning::before { content: "!"; position: absolute; inset-block-start: 26px; inset-inline-start: 26px; display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: var(--warning); color: #fff; font-size: 19px; font-weight: 800; } /* ---------- 16. Responsive ---------- */ @media (max-width: 1080px) { .rrar .triage-card { grid-template-columns: 1fr; } .rrar .triage-out { border-inline-start: 0; border-block-start: 1px solid var(--silver); } } @media (max-width: 980px) { .rrar .spec-strip .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rrar .promise-grid { grid-template-columns: 1fr; } } @media (max-width: 760px) { .rrar { padding-block-end: 82px; } .rrar .hero-facts li { font-size: 13.5px; } .rrar .spec-strip .wrap { grid-template-columns: 1fr; } .rrar .spec-strip .spec { padding: 20px 18px; } .rrar .timeline { padding-inline-start: 38px; } .rrar .timeline::before, .rrar .timeline::after { inset-inline-start: 16px; } .rrar .tl-item .tl-dot { inset-block-start: 18px; inset-inline-start: -38px; width: 34px; height: 34px; font-size: 14px; } .rrar .tl-item:hover { transform: none; } .rrar .triage-actions .site-ar-btn { flex: 1 1 100%; } .rrar .faq-toggle { width: 100%; } .rrar .warning { padding-inline-start: 22px; } .rrar .warning::before { position: static; margin-block-end: 12px; } .rrar .dock { display: flex; } .rrar .image-frame::after { inset-block-start: 12px; inset-inline-start: 12px; width: 34px; height: 34px; } } @media (min-width: 761px) { .rrar .dock { display: none !important; } } /* The floating chat widget and the dock must not share the same corner */ body.site-lang-ar.site-has-rrar-dock .chaty-widget, body.site-lang-ar.site-has-rrar-dock .chaty { display: none !important; } @media (prefers-reduced-motion: reduce) { .rrar.js .reveal, .rrar.js .reveal-stagger > * { opacity: 1 !important; transform: none !important; } .rrar .timeline::after { transition: none; } } .rrar .triage-card { align-items: start; gap: var(--rr-gap); border: 0; border-radius: 0; overflow: visible; background: transparent; box-shadow: none; } .rrar .triage-body { border: 1px solid var(--silver); border-radius: var(--rr-r-lg); background: #fff; box-shadow: var(--rr-shadow-1); } .rrar .triage-out { position: sticky; top: 18px; align-self: start; border: 1px solid var(--silver); border-radius: var(--rr-r-lg); background: linear-gradient(160deg, var(--neutral), #fff 65%); box-shadow: var(--rr-shadow-1); } @media (max-width: 1080px) { .rrar .triage-out { position: static; border: 1px solid var(--silver); } }