/* =========================================================================
   RTL (Arabic)
   Loaded only when is_rtl(), after every other stylesheet. Each block mirrors
   a physical left/right rule from the file named in its heading, so the LTR
   stylesheets stay untouched. Directional icons are mirrored in no_icon().
   ========================================================================= */

/* ---- Typography -------------------------------------------------------- */

/* Cairo everywhere: every font-family in the theme goes through these three. */
:root[dir="rtl"] {
  --no-font-display: "Cairo", "Segoe UI", Tahoma, sans-serif;
  --no-font-body:    "Cairo", "Segoe UI", Tahoma, sans-serif;
  --no-font-mono:    "Cairo", "Segoe UI", Tahoma, sans-serif;
}

/* Tracking breaks the joins between Arabic letters. */
[dir="rtl"] body,
[dir="rtl"] body * { letter-spacing: normal !important; }

/* Numbers, phone numbers and codes read left to right inside Arabic text. */
/* Only bare number links: buttons and the location cards are tel: links too,
   and flipping those would reverse their whole layout. */
[dir="rtl"] a[href^="tel:"]:not(.no-port):not(.no-btn):not(.no-cta__phone),
[dir="rtl"] .no-port__phone,
[dir="rtl"] .no-cta__phone b { direction: ltr; unicode-bidi: isolate; text-align: right; }
[dir="rtl"] .no-stat__num { direction: ltr; unicode-bidi: isolate; text-align: right; }
[dir="rtl"] .no-hero-stats .no-stat__num { justify-content: flex-end; }

/* ---- base.css ---------------------------------------------------------- */

/* Cairo sits taller than Inter; line-height 1 clipped long Arabic labels. */
[dir="rtl"] .no-btn { line-height: 1.35; padding-top: .75rem; padding-bottom: .75rem; }
[dir="rtl"] .no-btn:hover .no-btn__ico,
[dir="rtl"] .no-btn:focus-visible .no-btn__ico { transform: translateX(-3px); }
[dir="rtl"] .no-skip-link { left: auto; right: 16px; }

/* ---- Forms: right-aligned text, arrow on the left ---------------------- */

[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select { text-align: right; }
[dir="rtl"] input::placeholder,
[dir="rtl"] textarea::placeholder { text-align: right; }
/* Form controls don't inherit the page font, and MetForm sets its own. */
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select,
[dir="rtl"] button,
[dir="rtl"] input::placeholder,
[dir="rtl"] textarea::placeholder,
[dir="rtl"] input::file-selector-button,
[dir="rtl"] [class*="mf_select__"] { font-family: var(--no-font-body) !important; }
[dir="rtl"] input::file-selector-button { margin-right: 0; margin-left: .75rem; }
/* MetForm hides the file input and draws this label as the button. */
[dir="rtl"] .mf-input-file-upload-label { margin-right: 0 !important; margin-left: .75rem !important; }
/* What people type into these is Latin, but it still sits on the right. */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="url"] { direction: ltr; text-align: right; }
/* Chrome ignores text-align on <select>; direction and text-align-last move it. */
[dir="rtl"] select { direction: rtl; text-align-last: right; }
[dir="rtl"] .no-field select {
  background-position: left .875rem center;
  padding-right: .9375rem;
  padding-left: 2.5rem;
}
/* MetForm dropdowns are react-select divs, not <select>. */
[dir="rtl"] .mf_select__control,
[dir="rtl"] .mf_select__value-container,
[dir="rtl"] .mf_select__menu { direction: rtl; text-align: right; }
[dir="rtl"] .mf_select__placeholder,
[dir="rtl"] .mf_select__single-value { justify-self: start; text-align: right; }
[dir="rtl"] .no-search__ico { left: auto; right: .875rem; }
[dir="rtl"] .no-search__input { padding: .625rem 2.875rem .625rem .875rem; }
[dir="rtl"] .no-search__input::-webkit-search-cancel-button { margin-right: 0; margin-left: .125rem; }

/* ---- layout.css: header, menu, drawer, footer --------------------------- */

[dir="rtl"] .no-nav__link::after { transform-origin: right; }
[dir="rtl"] .no-drawer {
  inset: 0 auto 0 0;
  transform: translateX(-100%);
}
[dir="rtl"] .no-drawer.is-open { transform: none; }
[dir="rtl"] .no-macc__btn { text-align: right; }
[dir="rtl"] .no-flist a:hover { transform: translateX(-3px); }
[dir="rtl"] .no-progress { transform-origin: right; }

/* ---- home.css: hero ----------------------------------------------------- */

/* The dark side of the scrim follows the text, which is now on the right. */
[dir="rtl"] .no-hero__scrim {
  background:
    linear-gradient(180deg, rgba(11,30,44,.78) 0%, rgba(11,30,44,.56) 34%, rgba(11,30,44,.62) 62%, rgba(6,15,23,.92) 100%),
    linear-gradient(270deg, rgba(6,15,23,.80) 0%, rgba(11,30,44,.46) 46%, rgba(11,30,44,.10) 78%, transparent 100%);
}
[dir="rtl"] .no-hero__sonar { right: auto; left: -8%; }

/* Dark stats strip */
[dir="rtl"] .no-stat { border-left: 0; border-right: 1px solid rgba(255,255,255,.1); }
[dir="rtl"] .no-stat:first-child { border-right: 0; padding-right: 0; padding-left: clamp(.75rem, .4rem + 1vw, 1.75rem); }
@media (max-width: 780px) {
  [dir="rtl"] .no-stat:nth-child(odd) { border-right: 0; padding-right: 0; padding-left: clamp(.75rem, .4rem + 1vw, 1.75rem); }
}

/* Light stats band under the hero */
[dir="rtl"] .no-hero-stats .no-stat::before { left: auto; right: 0; }
[dir="rtl"] .no-hero-stats .no-stat:first-child { padding-right: 0; padding-left: clamp(1.25rem, .8rem + 1.8vw, 2.75rem); }
[dir="rtl"] .no-hero-stats .no-stat:last-child { padding-left: 0; padding-right: clamp(1.25rem, .8rem + 1.8vw, 2.75rem); }
@media (max-width: 900px) {
  [dir="rtl"] .no-hero-stats .no-stat:nth-child(odd) { padding-right: 0; padding-left: clamp(1rem, .7rem + 1.4vw, 1.75rem); }
  [dir="rtl"] .no-hero-stats .no-stat:nth-child(even) { padding-left: 0; padding-right: clamp(1rem, .7rem + 1.4vw, 1.75rem); }
}

/* ---- home.css: about, ports, map --------------------------------------- */

[dir="rtl"] .no-about__frame--sm { right: auto; left: -6%; }
@media (max-width: 960px) {
  [dir="rtl"] .no-about__frame--sm { left: 0; }
}
[dir="rtl"] .no-years { left: auto; right: clamp(-1.5rem, -2vw, -0.5rem); }
@media (max-width: 560px) {
  [dir="rtl"] .no-years { text-align: right; }
}

[dir="rtl"] .no-port { text-align: right; }
[dir="rtl"] .no-port:hover,
[dir="rtl"] .no-port.is-active { transform: translateX(-5px); }
[dir="rtl"] .no-port__go { margin-left: 0; margin-right: auto; }
[dir="rtl"] .no-port__phone { margin-left: 0; margin-right: auto; }
[dir="rtl"] .no-port__phone + .no-port__go { margin-left: 0; margin-right: .875rem; }
[dir="rtl"] .no-port:hover .no-port__go,
[dir="rtl"] .no-port.is-active .no-port__go { transform: translateX(-3px); }
@media (max-width: 1280px) {
  [dir="rtl"] .no-port__phone { margin-right: 0; padding-left: 0; padding-right: calc(var(--no-s-4) + 2.6rem); }
  [dir="rtl"] .no-port__phone + .no-port__go { margin-right: auto; }
}
@media (max-width: 1024px) {
  [dir="rtl"] .no-port__phone { margin-right: auto; padding-right: 0; }
}
@media (max-width: 560px) {
  [dir="rtl"] .no-port__phone { margin-right: 0; padding-right: calc(var(--no-s-4) + 2.6rem); }
}

/* In RTL, SVG text-anchor="start" flips to the right edge and the labels slide
   over their pins; LTR keeps the anchor as drawn (Arabic glyphs still shape RTL). */
[dir="rtl"] .no-map svg text { direction: ltr; }
[dir="rtl"] .no-map__legend { left: auto; right: 1rem; }
[dir="rtl"] .no-map__legend i { margin-right: 0; margin-left: .375rem; }
@media (max-width: 700px) {
  [dir="rtl"] .no-map__legend { right: auto; }
}

/* ---- home.css: partner logo marquee ------------------------------------ */

/* In RTL the strip overflows to the left, so it has to travel right. */
[dir="rtl"] .no-marquee__track { animation-name: noMarqueeRtl; }
@keyframes noMarqueeRtl { to { transform: translateX(50%); } }

/* ---- home.css: cards ---------------------------------------------------- */

[dir="rtl"] .no-core__card::after { transform-origin: right; }
[dir="rtl"] .no-core__rank { right: auto; left: 0; }
[dir="rtl"] .no-svccard__ico { left: auto; right: 1rem; }
[dir="rtl"] .no-more-svc a:hover .no-more-svc__go { transform: translate(-2px, -2px); }
[dir="rtl"] .no-why__cell::after { left: auto; right: 0; }
[dir="rtl"] .no-post__cat { left: auto; right: .875rem; }
[dir="rtl"] .no-cert { text-align: right; }
[dir="rtl"] .no-cert__zoom { right: auto; left: .5rem; }
[dir="rtl"] .no-lightbox__close { right: auto; left: clamp(.75rem, 2vw, 1.5rem); }

/* ---- CTA scrims --------------------------------------------------------- */

[dir="rtl"] .no-cta::after {
  background: linear-gradient(260deg, rgba(6,15,23,.88) 0%, rgba(11,30,44,.72) 45%, rgba(10,65,87,.52) 100%);
}
[dir="rtl"] #about-cta.no-cta::after {
  background: linear-gradient(260deg, rgba(6,15,23,.8) 0%, rgba(11,30,44,.64) 48%, rgba(10,65,87,.46) 100%);
}

/* ---- pages.css: page heroes, about timeline, contact, gallery ---------- */

[dir="rtl"] .no-phero__scrim {
  background:
    linear-gradient(180deg, rgba(11, 30, 44, .72) 0%, rgba(11, 30, 44, .52) 55%, rgba(6, 15, 23, .82) 100%),
    linear-gradient(270deg, rgba(11, 30, 44, .62) 0%, rgba(11, 30, 44, .18) 70%, transparent 100%);
}
[dir="rtl"] .no-phero--vessel .no-phero__scrim {
  background:
    linear-gradient(180deg, rgba(11, 30, 44, .56) 0%, rgba(11, 30, 44, .42) 52%, rgba(6, 15, 23, .76) 100%),
    linear-gradient(270deg, rgba(11, 30, 44, .64) 0%, rgba(11, 30, 44, .2) 72%, transparent 100%);
}
[dir="rtl"] .no-history::before {
  background:
    linear-gradient(180deg, rgba(6, 15, 23, .42) 0%, rgba(6, 15, 23, .28) 45%, rgba(6, 15, 23, .50) 100%),
    linear-gradient(270deg, rgba(11, 30, 44, .50) 0%, rgba(11, 30, 44, .14) 62%, rgba(11, 30, 44, .26) 100%);
}

[dir="rtl"] .no-tl__rail { padding-left: 0; padding-right: 2.25rem; }
[dir="rtl"] .no-tl__line { left: auto; right: 1.06rem; }
[dir="rtl"] .no-tl__marker {
  margin-left: 0; margin-right: -2.25rem;
  padding-left: 1rem; padding-right: 2.25rem;
  text-align: right;
}
[dir="rtl"] .no-tl__ghost { right: auto; left: -.05em; }
@media (max-width: 900px) {
  [dir="rtl"] .no-tl__panel::before { left: auto; right: 0; }
}
[dir="rtl"] .no-vm__card::after { transform-origin: right; }
[dir="rtl"] .no-cinfo__row:hover { transform: translateX(-3px); }
[dir="rtl"] .no-gal__zoomico { right: auto; left: 1rem; }

/* ---- blog.css ----------------------------------------------------------- */

[dir="rtl"] .no-article__body ul,
[dir="rtl"] .no-article__body ol { padding-left: 0; padding-right: 1.35em; }
[dir="rtl"] .no-article__body blockquote {
  border-left: 0;
  border-right: 3px solid var(--no-primary-action);
  border-radius: var(--no-r-md) 0 0 var(--no-r-md);
}
[dir="rtl"] .no-article__body th,
[dir="rtl"] .no-article__body td { text-align: right; }

/* ---- careers.css -------------------------------------------------------- */

[dir="rtl"] .no-jcard { border-left: 1px solid var(--no-border); border-right: 3px solid var(--no-primary-action); }
[dir="rtl"] .no-jcard--closed { border-left-color: var(--no-border); border-right-color: var(--no-border); }
[dir="rtl"] .no-jcard--urgent { border-left-color: var(--no-border); border-right-color: #7A4A06; }
[dir="rtl"] .no-jcard__meta li + li::before { margin-right: 0; margin-left: .75rem; }
[dir="rtl"] .no-jfacts dd { text-align: left; }
[dir="rtl"] .no-jprivacy ul { padding-left: 0; padding-right: 1.125rem; }

/* ---- projects.css ------------------------------------------------------- */

[dir="rtl"] .no-pcard__cat { left: auto; right: 1rem; }

/* ---- services.css ------------------------------------------------------- */

[dir="rtl"] .no-svccat a:hover .no-svccat__arrow { transform: translateX(-4px); }
[dir="rtl"] .no-svcfact + .no-svcfact {
  border-left: 0; padding-left: 0;
  border-right: 1px solid var(--no-border); padding-right: var(--no-s-6);
}
@media (max-width: 1024px) {
  [dir="rtl"] .no-svcfact + .no-svcfact { border-right: 0; padding-right: 0; }
  [dir="rtl"] .no-svcfact:nth-child(even) {
    border-left: 0; padding-left: 0;
    border-right: 1px solid var(--no-border); padding-right: var(--no-s-5);
  }
}
@media (max-width: 620px) {
  [dir="rtl"] .no-svcfact:nth-child(even) { padding-right: 1rem; }
}
/* The mirrored arrow points left, so it turns the other way to point down. */
[dir="rtl"] .no-svcintro__jump svg { transform: rotate(-90deg); }
[dir="rtl"] .no-scope__tab { text-align: right; }
@media (min-width: 1025px) {
  [dir="rtl"] .no-scope.is-ready .no-scope__panel { border-left: 0; border-right: 1px solid var(--no-border); }
  [dir="rtl"] .no-scope.is-ready .no-scope__tab { border-right: 0; border-left: 1px solid var(--no-border); }
  [dir="rtl"] .no-scope.is-ready .no-scope__tab.is-active { border-left-color: transparent; }
}
[dir="rtl"] .no-svcport { border-left: 1px solid var(--no-border); border-right: 3px solid var(--no-primary-action); }

/* Process steps: the connector runs right to left. */
[dir="rtl"] .no-step::before {
  left: calc(var(--no-s-5) * -1); right: 0;
  background: linear-gradient(270deg, rgba(111, 207, 255, .38), rgba(111, 207, 255, .12));
}
[dir="rtl"] .no-step:last-child::before {
  left: 0;
  background: linear-gradient(270deg, rgba(111, 207, 255, .38), transparent);
}
[dir="rtl"] .no-step__dot { left: auto; right: 0; }
@media (max-width: 860px) {
  [dir="rtl"] .no-step { padding: 0 3.5rem var(--no-s-6) 0; }
  [dir="rtl"] .no-step::before {
    left: auto; right: 19px;
    background: linear-gradient(180deg, rgba(111, 207, 255, .38), rgba(111, 207, 255, .1));
  }
}

[dir="rtl"] .no-svcnav__link--next { text-align: left; }
[dir="rtl"] .no-svcnav__link--prev:hover .no-svcnav__ico { transform: rotate(180deg) translateX(-3px); }
[dir="rtl"] .no-svcnav__link--next:hover .no-svcnav__ico { transform: translateX(-3px); }

/* ---- vessels.css -------------------------------------------------------- */

[dir="rtl"] .no-vtype a:hover .no-vtype__arrow { transform: translateX(-4px); }
[dir="rtl"] .no-vcard__status { right: auto; left: 1rem; }
[dir="rtl"] .no-vcard__body { text-align: right; }
[dir="rtl"] .no-detail__specs dd { text-align: right; }
[dir="rtl"] .no-vessel-hero__status { left: auto; right: 1rem; }
[dir="rtl"] .no-vessel-side-list a:hover,
[dir="rtl"] .no-vessel-side-list a:focus-visible { transform: translateX(-3px); }