/* ============================================================
   ARABIC / RTL
   Loaded only on /ar pages, after site.css.

   site.css is written in physical properties (left/right/translateX), which is
   fine for one direction and wrong for the other. Rather than rewrite it, this
   sheet mirrors the handful of places where the physical side actually matters:
   the nav, the pinned renders, the sliders, the timeline and the cards. Padding
   and margins that are symmetric need nothing.
============================================================ */

/* ---------------------------------------------------------------- the face */
@font-face{font-family:"Thmanyah";src:url("../fonts/thmanyah/thmanyahserifdisplay-Light.woff2") format("woff2");
  font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Thmanyah";src:url("../fonts/thmanyah/thmanyahserifdisplay-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Thmanyah";src:url("../fonts/thmanyah/thmanyahserifdisplay-Medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Thmanyah";src:url("../fonts/thmanyah/thmanyahserifdisplay-Bold.woff2") format("woff2");
  font-weight:600 700;font-style:normal;font-display:swap}
@font-face{font-family:"Thmanyah";src:url("../fonts/thmanyah/thmanyahserifdisplay-Black.woff2") format("woff2");
  font-weight:800 900;font-style:normal;font-display:swap}

/* Thmanyah first, Poppins behind it: the Arabic face has no Latin glyphs worth
   using, so model names, kW figures and dates fall through to Poppins. */
[dir="rtl"] body,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select,
[dir="rtl"] button{font-family:"Thmanyah","Poppins",system-ui,sans-serif}

/* the display face runs small and tight at body sizes */
[dir="rtl"]{--ar-lift:1.06}
[dir="rtl"] body{font-size:calc(1rem * var(--ar-lift));line-height:1.85}
[dir="rtl"] p,[dir="rtl"] li,[dir="rtl"] .lead{line-height:1.9}
/* and Arabic has no uppercase — letter-spaced small caps just look broken */
[dir="rtl"] .eyebrow,[dir="rtl"] .pd-series-kicker,[dir="rtl"] .sd-badge,
[dir="rtl"] .pcard-cat,[dir="rtl"] .co-honors-head .eyebrow,
[dir="rtl"] .inno-hero h1,[dir="rtl"] .co-hero h1,[dir="rtl"] .po-crumb,
[dir="rtl"] .sd-title,[dir="rtl"] .pd-series-name,[dir="rtl"] .co-profile-meta
{text-transform:none;letter-spacing:0}

/* numbers, model names and units stay left-to-right inside Arabic sentences */
[dir="rtl"] .spec-value,[dir="rtl"] .pd-chips li span,[dir="rtl"] .pcard-spec b,
[dir="rtl"] .stat-card b,[dir="rtl"] .sd-gauges b,[dir="rtl"] .dlp-size,
[dir="rtl"] .co-year-num,[dir="rtl"] .hn-meta,[dir="rtl"] .news-date,
[dir="rtl"] .blog-date,[dir="rtl"] .ct-phone,[dir="rtl"] .foot-contact a
{direction:ltr;unicode-bidi:embed;display:inline-block}

/* ------------------------------------------------------------------ chrome */
[dir="rtl"] .nav-inner,[dir="rtl"] .nav-links,[dir="rtl"] .nav-utility-inner,
[dir="rtl"] .footer-grid,[dir="rtl"] .footer-bottom{direction:rtl}
[dir="rtl"] .nav-mega{left:auto;right:0}
[dir="rtl"] .nav-links>a::after{left:auto;right:0}
[dir="rtl"] .btn .ico svg,[dir="rtl"] .hn-arrow svg,[dir="rtl"] .pcard-go svg,
[dir="rtl"] .po-more svg,[dir="rtl"] .pobl-go svg,[dir="rtl"] .inno-hero-inner svg{transform:scaleX(-1)}
[dir="rtl"] .lang-switch{margin-inline-start:14px}

/* --------------------------------------------------------------- the heroes */
/* the banners carry baked-in English artwork, so they are never mirrored */
[dir="rtl"] .slide-img,[dir="rtl"] .co-hero-img,[dir="rtl"] .inno-hero-img{transform:none}
[dir="rtl"] .slide-scrim{background:linear-gradient(270deg,var(--navy-900) 0%,var(--navy-900) 38%,
  rgba(20,24,35,.86) 50%,rgba(20,24,35,.42) 64%,rgba(20,24,35,0) 78%)}
[dir="rtl"] .co-hero-scrim{background:linear-gradient(270deg,rgba(20,24,35,.8),rgba(20,24,35,.3) 66%),
  linear-gradient(0deg,rgba(20,24,35,.62),transparent 46%)}
[dir="rtl"] .inno-hero-scrim{background:linear-gradient(270deg,rgba(20,24,35,.78),rgba(20,24,35,.25) 62%),
  linear-gradient(0deg,rgba(20,24,35,.6),transparent 45%)}
[dir="rtl"] .slide-over::before{background:linear-gradient(270deg,rgba(6,10,24,.66),
  rgba(6,10,24,.34) 34%,rgba(6,10,24,0) 58%)}
@media(max-width:860px){
  [dir="rtl"] .slide-over::before{background:linear-gradient(180deg,rgba(6,10,24,.72),
    rgba(6,10,24,.28) 42%,rgba(6,10,24,0) 62%)}
}

/* -------------------------------------------------------- the product pages */
/* the studio shot moves to the left half and its fade turns around with it */
[dir="rtl"] .pd-panel-media{right:auto;left:0}
[dir="rtl"] .pd-panel-media img{mask-image:linear-gradient(270deg,transparent,#000 26%);
  -webkit-mask-image:linear-gradient(270deg,transparent,#000 26%)}
[dir="rtl"] .pd-panel-body{left:auto;right:0;padding-left:24px;
  padding-right:clamp(28px,7vw,120px)}
[dir="rtl"] .pd-crumb{left:auto;right:clamp(28px,7vw,120px)}
[dir="rtl"] .sd-hero-media{right:auto;left:0}

/* The Key Advantages panel reveals the photo from the right (clip-path is a
   physical property and is not mirrored). Left untouched, the RTL copy would
   start on the right and land on top of the product, so the column moves to
   the left and is kept narrower than the 55% the photo takes. */
[dir="rtl"] .ka-title,[dir="rtl"] .ka-grid{max-width:min(560px,48%);
  margin-inline-start:auto;margin-inline-end:0}
/* the CTA stays over the photo on the right, where the copy no longer is */
[dir="rtl"] .ka-cta{right:clamp(28px,5vw,80px);left:auto;align-items:flex-start}
[dir="rtl"] .ka-cta-go svg{transform:scaleX(-1)}

/* the icon sits at the top of the slide, which in RTL is the same corner the
   slide counter was pinned to */
[dir="rtl"] .pd-feat-count{right:auto;left:24px}
/* "1 — 4" is a position, not a sentence: it stays left to right */
.pd-feat-count{direction:ltr}
@media(max-width:860px){
  [dir="rtl"] .pd-panel-media img{mask-image:linear-gradient(180deg,#000 68%,transparent 99%);
    -webkit-mask-image:linear-gradient(180deg,#000 68%,transparent 99%)}
  [dir="rtl"] .pd-panel-body{padding-inline:22px}
  [dir="rtl"] .pd-crumb{right:auto}
}

/* the products index rail and its rider */
[dir="rtl"] .po-rail{left:auto;right:50%;translate:50% 0}
[dir="rtl"] .po-hero-img{right:auto;left:0;transform:scaleX(-1)}
[dir="rtl"] .pobl-li.left{text-align:right}
[dir="rtl"] .pobl-li.right{text-align:left}

/* --------------------------------------------------------------- the slides */
/* a rail scrolls the other way in RTL; the arrows have to agree */
[dir="rtl"] .hn-rail,[dir="rtl"] .pcards{direction:rtl}
[dir="rtl"] .hn-arrow svg{transform:scaleX(-1)}
[dir="rtl"] .pcard-go{right:auto;left:14px}
[dir="rtl"] .pcard-spec{flex-direction:row-reverse}

/* ------------------------------------------------------------- the hotspots */
/* dir:rtl already reverses the row, so the dot — second in the markup — ends up
   at the LEFT edge of the box. Only the offset that lands it on the anchor has
   to change; flipping flex-direction as well would undo the reversal. */
[dir="rtl"] .hotspot{translate:-13px -50%;transform-origin:13px center}
[dir="rtl"] .hotspot.flip{translate:calc(-100% + 13px) -50%;
  transform-origin:calc(100% - 13px) center}

/* --------------------------------------------------------------- company */
[dir="rtl"] .co-year-rule{transform:scaleX(-1)}
[dir="rtl"] .co-pin-label{transform:translateX(50%)}
[dir="rtl"] .co-history-bg{transform:scaleX(-1)}
[dir="rtl"] .co-profile-meta{margin-left:0;margin-right:4px;
  padding-left:0;padding-right:12px;border-left:0;border-right:1px solid rgba(255,255,255,.34)}

/* ------------------------------------------------------------ forms, tables */
[dir="rtl"] .dlp-table th,[dir="rtl"] .dlp-table td,
[dir="rtl"] .ct-field label,[dir="rtl"] .ct-form{text-align:right}
[dir="rtl"] .dlp-select,[dir="rtl"] .ct-input,[dir="rtl"] .ct-textarea{text-align:right}
[dir="rtl"] .dlp-select{background-position:left 14px center;padding-left:38px;padding-right:16px}

/* ------------------------------------------------------ reveals go the other way */
[dir="rtl"] .wow.fade-left{transform:translateX(-44px)}
[dir="rtl"] .wow.fade-right{transform:translateX(44px)}
@media(max-width:860px){
  [dir="rtl"] .wow.fade-left,[dir="rtl"] .wow.fade-right{transform:translateY(38px)}
}