/* ============================================================
   INDO 2027 - right-to-left (Arabic)

   Loaded ONLY on right-to-left requests (inc/rtl.php, is_rtl()),
   after every other theme sheet. Every rule is scoped under
   html[dir="rtl"], so this file cannot change a left-to-right
   page even if it were printed on one. No existing sheet was
   edited for RTL: this file overrides.

   HOW IT MIRRORS. Flex and grid rows, `margin-inline`,
   `padding-inline`, `inset: 0` and `text-align: start` already
   follow dir="rtl" on their own. What does not is every PHYSICAL
   declaration (left/right, padding-left, border-left, text-align:
   left, translateX, transform-origin: left, 90deg gradients), so
   each one that is not symmetric is restated here with its sides
   swapped. The html[dir="rtl"] prefix adds (0,1,1) of specificity,
   so a mirror beats its original at any breakpoint; where the
   original is later changed inside a media query, the media rule
   is mirrored too, in the same order, so the cascade resolves the
   same way it does in LTR.

   ------------------------------------------------------------
   AUDIT, 2026-09-29: every physical left/right declaration in the
   12 sheets (base, catalogue, chrome, components, editorial,
   fonts, home, layout, login, tokens, tokens-extra, utility).

   MIRRORED (selector, file):
     base.css       .indo-skip-link (+:focus), ul/ol, blockquote,
                    th/td text-align
     catalogue.css  .indo-product__excerpt li (+::before),
                    .indo-product__kpi .indo-spectable__kpivalue,
                    .indo-product__prose li (+::before),
                    .indo-product-spec .indo-spectable__value,
                    table.indo-spec-table th/td, .indo-refine__link--up
                    ::before (arrow flipped), .indo-card__point
                    (+::before), .indo-family__points li (+::before),
                    .indo-accordion__panel--prose ul/ol,
                    .indo-spectrum__copy p (!important as original),
                    .indo-umsug fieldset label, .indo-umsug__error,
                    .indo-gallery__thumbs[data-overflow] masks
     chrome.css     .indo-header__nav, .indo-nav__rule origin,
                    .indo-header__utility, .indo-mega__arrow (flip and
                    hover nudge), .indo-mega__rule origin,
                    .indo-langpanel (side), .indo-langpanel__alt,
                    .indo-header__mobile, .indo-header__bar (1160 pad),
                    .indo-drawer__list--sub, .indo-searchoverlay__close,
                    .indo-searchform__field, .indo-quotepill,
                    .indo-video-toggle on heroes and the home split,
                    .indo-modal__close, .indo-callbackform__hp,
                    .indo-callbackform__req, .indo-newsletter fields,
                    .indo-header__wordmark / .indo-footer__wordmark
                    mask position
     components.css .indo-arrowlink__arrow, .indo-btn__arrow (flip),
                    .indo-hero--split panel divider, .indo-stat--inline
                    label, .indo-statband cells (all breakpoints),
                    .indo-card--row-dark hover, .indo-filterpanel,
                    .indo-chip, .indo-segment__btn, .indo-tabs masks,
                    .indo-spectable__value, .indo-doctable__cell
                    (+ doclib sticky column and its shadow),
                    .indo-accordion__q, .indo-pullquote (+--sm, cite),
                    .indo-quote--featured body, .indo-marquee (tiles
                    and direction), .indo-filmstrip__row,
                    .indo-errorsummary (+list), .indo-toggle,
                    .indo-modal__close, .indo-quotepill,
                    .indo-ctaband--split lede, .indo-ctaband--panel,
                    .indo-gallery__nav prev/next (side and chevron),
                    WPForms Choices select caret, family hero and
                    pillar film rail gradients (::before),
                    .indo-spectrum__cue (side and arrow),
                    .indo-spectrumspage lede and chart masks,
                    .indo-pagination next arrow, .indo-downloads arrow,
                    .indo-filmplayer__link arrow
     editorial.css  .indo-facts__cell (all breakpoints),
                    .indo-editorial-prose lists/blockquote/th/td,
                    .indo-yearitem__arrow, .indo-legacy-button,
                    .indo-about__stats statband (601 to 820),
                    .indo-topictabs__row mask
     home.css       .indo-home-split__panel:first-child body padding,
                    .indo-home-split__meter, .indo-dd-prose ul,
                    .indo-lp-refrain, .indo-lp-specs
     utility.css    .indo-enquiry__aside, .indo-legal__prose,
                    .indo-legal__empty, .indo-404__route hover,
                    .indo-404__arrow, consent bar manage link,
                    .indo-marquee__toggle, .indo-consentpanel__close
                    and title, WPForms error and confirmation boxes,
                    .indo-returns__progress-btn, __content, __done,
                    .indo-map__credit, .indo-feedback__optional,
                    .indo-feedback__hp, .indo-feedback__done,
                    .indo-nps__legend, .indo-nps__ends--under

   JUDGED SYMMETRIC OR NOT NEEDING A MIRROR:
     left: 0 + right: 0 pairs and inset: 0 (.indo-header,
       .indo-mega--products/--contact, .indo-drawer, overlays,
       backdrops, modals, .indo-filmplayer__caption, consent bar,
       .indo-map__overlay, hero ::before scrims, .indo-home-split
       __body, .indo-card--project .indo-card__text::before).
     translateY / scale transforms (buttons, cards, images).
     .indo-nav__caret, .indo-refine__toggle svg rotate(180deg):
       a down-pointing triangle or chevron is symmetric.
     .indo-family__hero .indo-hero__rail (components.css:376): its
       asymmetric padding and margin are superseded at :3598 by
       padding: var(--space-3) 0; margin: 0 auto.
     .indo-stat__unit margin-left: the value is isolated with
       unicode-bidi: plaintext below, so a Latin unit ("lm/W", "%")
       still sits to the right of its number, where the margin is.
     .indo-video-toggle base position: video.js writes the link's
       offsetLeft into --indo-vt-left, so it lands on the link's top
       left corner in either direction.
     .indo-teamcard__media--tall transform-origin 50% 0 (centred).
     --mask-marquee (6% fade at both edges).
     .indo-archive-head .indo-filterpanel (position: static there).
     login.css: wp-login only, never an Arabic front-end page.
     fonts.css, tokens.css, tokens-extra.css, layout.css: no
       physical sides (layout.css already uses logical properties).
     Breadcrumbs: a flex row, so the order reverses by itself; the
       "/" separator reads the same in both directions.
     The NPS 0 to 10 scale: a grid, so 0 starts on the right, which
       is the right-to-left reading of a scale.
   ============================================================ */


/* ============================================================
   1. Arabic type
   IBM Plex Sans Arabic (fonts-arabic.css) is placed SECOND in
   each stack: Latin letters and digits in an Arabic sentence
   (INDO, TopLink, 4000K) still come from Lexend Deca and Inter,
   and only the Arabic glyphs fall through to Plex. Arabic joins
   letter to letter, so tracking is removed, and it needs more
   leading than Latin for its ascenders, descenders and dots.
   ============================================================ */

html[dir="rtl"]:lang(ar) {
	--font-display: "Lexend Deca", "IBM Plex Sans Arabic", "Inter", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", "Geeza Pro", Tahoma, sans-serif;
	--font-body: "Inter", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", "Geeza Pro", Tahoma, sans-serif;
	--font-numeric: "Manrope", "Inter", "IBM Plex Sans Arabic", sans-serif;

	--lh-display: 1.35;
	--lh-tight: 1.4;
	--lh-body: 1.8;

	--tracking-eyebrow: 0;
	--tracking-eyebrow-sm: 0;
	--tracking-eyebrow-xs: 0;
	--tracking-display: 0;
	--tracking-display-tight: 0;
}

/* Letter-spacing separates joined Arabic letters. Several components set
   it directly rather than through the tokens above. */
html[dir="rtl"] body *:lang(ar) { letter-spacing: 0 !important; }

/* Headings set their own tight line-heights (1.05 to 1.25) in about
   twenty places; at those values Arabic marks above and below the line
   collide or clip. */
html[dir="rtl"] :is(h1, h2, h3, h4, h5, h6, blockquote, .indo-pullquote, .indo-home-split__title, .indo-stat__label):lang(ar) {
	line-height: 1.45 !important;
}


/* ============================================================
   2. Left-to-right islands
   Phone numbers, email addresses, URLs, product codes and spec
   values keep their own order inside Arabic text. `plaintext`
   takes the direction from the content itself, so an Arabic spec
   value still reads right to left; `match-parent` keeps the
   alignment of the surrounding right-to-left column.
   ============================================================ */

html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"],
html[dir="rtl"] .indo-langpanel__code,
html[dir="rtl"] .indo-header__langcode,
html[dir="rtl"] bdi[dir="ltr"] {
	direction: ltr;
	unicode-bidi: isolate;
}

html[dir="rtl"] .indo-stat__value,
html[dir="rtl"] .indo-facts__value,
html[dir="rtl"] .indo-spectable__value,
html[dir="rtl"] .indo-spectable__kpivalue,
html[dir="rtl"] table.indo-spec-table td,
html[dir="rtl"] .indo-downloads__tag {
	unicode-bidi: plaintext;
	text-align: -webkit-match-parent;
	text-align: match-parent;
}

/* Fields that only ever hold Latin data: typed left to right, sitting on
   the right edge of the right-to-left form, with an Arabic placeholder
   still reading right to left. */
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="number"] {
	direction: ltr;
	text-align: right;
}
html[dir="rtl"] input[type="email"]::placeholder,
html[dir="rtl"] input[type="tel"]::placeholder,
html[dir="rtl"] input[type="url"]::placeholder,
html[dir="rtl"] input[type="number"]::placeholder { direction: rtl; }


/* ============================================================
   3. Arrows and motion
   The theme prints → as a glyph, and Unicode arrows are not
   mirrored by the bidi algorithm, so each one is flipped here.
   No template was edited.
   ============================================================ */

html[dir="rtl"] .indo-arrowlink__arrow,
html[dir="rtl"] .indo-btn__arrow,
html[dir="rtl"] .indo-404__arrow,
html[dir="rtl"] .indo-yearitem__arrow,
html[dir="rtl"] .indo-pagination__cell--next > span[aria-hidden="true"],
html[dir="rtl"] .indo-downloads__tag > span[aria-hidden="true"],
html[dir="rtl"] .indo-filmplayer__link > span[aria-hidden="true"],
html[dir="rtl"] .indo-refine__link--up::before,
html[dir="rtl"] .indo-mega__arrow {
	display: inline-block;
	transform: scaleX(-1);
}
html[dir="rtl"] .indo-mega__head:hover .indo-mega__arrow,
html[dir="rtl"] .indo-mega__head:focus-visible .indo-mega__arrow { transform: translateX(-4px) scaleX(-1); }

html[dir="rtl"] .indo-yearitem__arrow { margin-left: 0; margin-right: var(--space-0-5); }
html[dir="rtl"] .indo-refine__link--up::before { margin-right: 0; margin-left: 8px; }

/* Underlines grow from the start of the label. */
html[dir="rtl"] .indo-nav__rule,
html[dir="rtl"] .indo-mega__rule { transform-origin: right; }

/* The logo marquee runs the other way: in RTL the track hangs from the
   right edge and overflows to the left, so it travels +50%. */
html[dir="rtl"] .indo-marquee__track { animation-name: indo-marquee-rtl; }
@keyframes indo-marquee-rtl {
	from { transform: translateX(0); }
	to   { transform: translateX(50%); }
}
html[dir="rtl"] .indo-marquee__tile { margin-right: 0; margin-left: 20px; }
@media (max-width: 600px) {
	html[dir="rtl"] .indo-marquee__tile { margin-left: var(--space-1); }
}

/* The switch: knob starts on the right, slides left when on. */
html[dir="rtl"] .indo-toggle::after { left: auto; right: 3px; }
html[dir="rtl"] .indo-toggle:checked::after { transform: translateX(-24px); }

/* Product gallery: "previous" is on the right, pointing right. */
html[dir="rtl"] .indo-gallery__nav--prev { left: auto; right: 8px; }
html[dir="rtl"] .indo-gallery__nav--next { right: auto; left: 8px; }
html[dir="rtl"] .indo-gallery__nav svg { transform: scaleX(-1); }


/* ============================================================
   4. Chrome: header, mega menus, language panel, drawer, search,
   footer, quote pill, modals
   ============================================================ */

/* Logo wordmark hugs the start edge of its box. */
html[dir="rtl"] .indo-header__wordmark:not(.indo-header__wordmark--text),
html[dir="rtl"] .indo-footer__wordmark:not(.indo-footer__wordmark--text) {
	-webkit-mask-position: right center;
	mask-position: right center;
}

html[dir="rtl"] .indo-header__nav { margin-left: 0; margin-right: 12px; }
html[dir="rtl"] .indo-header__utility,
html[dir="rtl"] .indo-header__mobile { margin-left: 0; margin-right: auto; }

/* The language panel hangs from the end side. nav.js positions it inline
   (left, right: auto) when it opens; this covers the closed state and the
   no-JavaScript fallback. */
html[dir="rtl"] .indo-js .indo-langpanel { right: auto; left: 150px; }
html[dir="rtl"] .indo-langpanel__alt { margin-left: 0; margin-right: auto; }

@media (max-width: 1160px) {
	html[dir="rtl"] .indo-js .indo-header__bar {
		padding-right: max(var(--chrome-pad), calc((100% - var(--rail)) / 2));
		padding-left: calc(var(--chrome-pad) - 10px);
	}
	html[dir="rtl"] .indo-js .indo-langpanel { right: auto; left: 12px; }
}

html[dir="rtl"] .indo-drawer__list--sub { padding-left: 0; padding-right: 16px; }

html[dir="rtl"] .indo-searchoverlay__close { right: auto; left: 0; }

/* Field and button share one border: the field's open side faces the
   button, which is now on its left. */
html[dir="rtl"] .indo-searchform .indo-searchform__field,
html[dir="rtl"] .indo-newsletter input[type="email"],
html[dir="rtl"] .indo-newsletter input[type="text"]:not([name="_mc4wp_honeypot"]) {
	border-right: 1px solid var(--border-on-dark-2);
	border-left: 0;
}
@container (max-width: 320px) {
	html[dir="rtl"] .indo-newsletter input[type="email"],
	html[dir="rtl"] .indo-newsletter input[type="text"]:not([name="_mc4wp_honeypot"]) { border-left: 1px solid var(--border-on-dark-2); }
}
@media (max-width: 620px) {
	html[dir="rtl"] .indo-newsletter input[type="email"],
	html[dir="rtl"] .indo-newsletter input[type="text"]:not([name="_mc4wp_honeypot"]) { border-left: 1px solid var(--border-on-dark-2); }
}

/* Floating quote pill: bottom left. Both sheets that place it. */
html[dir="rtl"] .indo-quotepill { right: auto; left: 28px; }
@media (max-width: 600px) {
	html[dir="rtl"] .indo-quotepill { left: 14px; }
}

html[dir="rtl"] .indo-modal__close { right: auto; left: 8px; }
html[dir="rtl"] .indo-consentpanel__close { right: auto; left: 12px; }
html[dir="rtl"] .indo-consentpanel__title { padding-right: 0; padding-left: var(--space-4); }

html[dir="rtl"] .indo-callbackform__req { margin-left: 0; margin-right: 2px; }
html[dir="rtl"] .indo-feedback__optional { margin-left: 0; margin-right: 4px; }

/* OFF-SCREEN ELEMENTS GO RIGHT, NOT LEFT. In a right-to-left document the
   scrollable overflow runs to the left, so an element parked at
   left: -9999px would add a 10,000px horizontal scroll to the page.
   Parked to the right it is unreachable, as it is in LTR. */
html[dir="rtl"] .indo-skip-link { left: auto; right: -9999px; }
html[dir="rtl"] .indo-skip-link:focus { right: 0; }
html[dir="rtl"] .indo-callbackform__hp { left: auto; right: -9999px; }
html[dir="rtl"] .indo-feedback__hp { left: auto; right: -10000px; }

/* Cookie bar "Manage" link on phones. */
@media (max-width: 600px) {
	html[dir="rtl"] .indo-consent--bar .indo-consent__managelink::before { margin: 0 0.2em 0 0.45em; }
	html[dir="rtl"] .indo-consent--bar .indo-consent__managelink::after { right: 0; left: -4px; }
}

/* Video pause button on media heroes: the bottom corner on the rail's
   end edge, which is now the left. */
html[dir="rtl"] .indo-hero:not(.indo-hero--split) > .indo-video-toggle {
	right: auto;
	left: max(var(--gutter), calc((100% - var(--rail)) / 2));
}
@media (max-width: 820px) {
	html[dir="rtl"] .indo-hero:not(.indo-hero--split) > .indo-video-toggle { left: var(--gutter-mobile); }
}
/* Homepage split hero: over the film panel, which is now on the right. */
html[dir="rtl"] .indo-home-split > .indo-video-toggle {
	left: auto;
	right: max(var(--indo-gutter), calc((var(--indo-page-w, 100vw) - var(--rail)) / 2));
}


/* ============================================================
   5. Base
   ============================================================ */

html[dir="rtl"] ul,
html[dir="rtl"] ol { padding-left: 0; padding-right: 1.25em; }

html[dir="rtl"] blockquote {
	padding-left: 0;
	padding-right: var(--space-2);
	border-left: 0;
	border-right: 2px solid var(--accent);
}

html[dir="rtl"] th,
html[dir="rtl"] td { text-align: right; }


/* ============================================================
   6. Components
   ============================================================ */

/* Split hero divider. */
html[dir="rtl"] .indo-hero--split > .indo-hero__panel + .indo-hero__panel {
	border-left: 0;
	border-right: 1px solid rgba(255, 255, 255, 0.14);
}
@media (max-width: 820px) {
	html[dir="rtl"] .indo-hero--split > .indo-hero__panel + .indo-hero__panel { border-right: 0; }
}

/* Text gradients behind hero copy fade out towards the end side. */
html[dir="rtl"] .indo-family__hero .indo-hero__rail::before {
	left: auto;
	right: calc(var(--space-4) * -1);
	background: linear-gradient(270deg, rgba(13, 21, 25, 0.86) 0%, rgba(13, 21, 25, 0.74) 55%, rgba(13, 21, 25, 0) 100%);
}
html[dir="rtl"] :is(.indo-pillar-hero--film, .indo-hero--backdrop) .indo-hero__rail::before {
	left: auto;
	right: calc(max(var(--gutter), (100vw - var(--rail)) / 2) * -1);
	background: linear-gradient(270deg, rgba(13, 21, 25, 0.82) 0, rgba(13, 21, 25, 0.76) calc(100% - 320px), rgba(13, 21, 25, 0.3) calc(100% - 140px), rgba(13, 21, 25, 0) 100%);
}
@media (max-width: 820px) {
	html[dir="rtl"] .indo-family__hero .indo-hero__rail::before {
		right: calc(var(--gutter-mobile) * -1);
		background: rgba(13, 21, 25, 0.72);
	}
	html[dir="rtl"] :is(.indo-pillar-hero--film, .indo-hero--backdrop) .indo-hero__rail::before {
		right: calc(var(--gutter-mobile) * -1);
		background: rgba(13, 21, 25, 0.78);
	}
}

/* Stat blocks. */
html[dir="rtl"] .indo-stat--inline .indo-stat__label { margin: 0 auto 0 0; }

/* Stat band. LTR: every cell has a divider on its left, the first cell
   drops its outer (left) padding and divider, the last its right padding.
   Mirrored per breakpoint; :not() guards keep a one-cell band at 0/0. */
html[dir="rtl"] .indo-statband__cell {
	border-left: 0;
	border-right: 1px solid var(--border-2);
}
html[dir="rtl"] .indo-statband--dark .indo-statband__cell { border-right-color: var(--border-on-dark-hair); }
html[dir="rtl"] .indo-statband__cell:first-child { padding-right: 0; border-right: 0; }
html[dir="rtl"] .indo-statband__cell:last-child { padding-left: 0; }
html[dir="rtl"] .indo-statband__cell:first-child:not(:last-child) { padding-left: var(--gutter); }
html[dir="rtl"] .indo-statband__cell:last-child:not(:first-child) { padding-right: var(--gutter); }
html[dir="rtl"] .indo-statband--dark .indo-statband__cell:first-child:not(:last-child) { padding-left: var(--space-3); }
html[dir="rtl"] .indo-statband--dark .indo-statband__cell:last-child:not(:first-child) { padding-right: var(--space-3); }

@media (max-width: 820px) {
	html[dir="rtl"] .indo-statband__cell { border-right: 0; }
	html[dir="rtl"] .indo-statband .indo-statband__cell:first-child:not(:last-child) { padding-left: var(--space-2); }
	html[dir="rtl"] .indo-statband .indo-statband__cell:last-child:not(:first-child) { padding-right: var(--space-2); }
}
@media (min-width: 601px) and (max-width: 820px) {
	html[dir="rtl"] .indo-statband:not(.indo-statband--4) .indo-statband__cell {
		border-left: 0;
		border-right: 1px solid var(--border-2);
	}
	html[dir="rtl"] .indo-statband--dark:not(.indo-statband--4) .indo-statband__cell { border-right-color: var(--border-on-dark-hair); }
	html[dir="rtl"] .indo-statband:not(.indo-statband--4) .indo-statband__cell:first-child { padding-right: 0; border-right: 0; }
	html[dir="rtl"] .indo-statband.indo-statband--4 .indo-statband__cell:is(:first-child, :last-child) { padding-inline: 0; }

	html[dir="rtl"] .indo-about__stats .indo-statband .indo-statband__cell {
		border-left: 0;
		border-right: 1px solid var(--border-on-dark-hair);
	}
	html[dir="rtl"] .indo-about__stats .indo-statband .indo-statband__cell:first-child { padding-right: 0; border-right: 0; }
	html[dir="rtl"] .indo-about__stats .indo-statband .indo-statband__cell:last-child { padding-left: 0; }
	html[dir="rtl"] .indo-about__stats .indo-statband .indo-statband__cell:first-child:not(:last-child) { padding-left: var(--space-2); }
	html[dir="rtl"] .indo-about__stats .indo-statband .indo-statband__cell:last-child:not(:first-child) { padding-right: var(--space-2); }
}
@media (max-width: 600px) {
	html[dir="rtl"] .indo-statband .indo-statband__cell:nth-child(n):is(:first-child, :last-child) { padding-inline: 0; }
	html[dir="rtl"] .indo-about__stats .indo-statband .indo-statband__cell:is(:first-child, :last-child) { padding-inline: 0; }
}

/* Dark row cards and 404 routes nudge towards the end on hover. */
html[dir="rtl"] .indo-card--row-dark { transition: padding-right var(--dur-base) var(--easing); }
html[dir="rtl"] .indo-card--row-dark:hover,
html[dir="rtl"] .indo-card--row-dark:focus-within { padding-left: 0; padding-right: 8px; }
html[dir="rtl"] .indo-404__route { transition: padding-right var(--dur-base) var(--easing); }
html[dir="rtl"] .indo-404__route:hover,
html[dir="rtl"] .indo-404__route:focus-visible { padding-left: 0; padding-right: 8px; }

/* Filter panel hangs from the end edge of its trigger row. */
html[dir="rtl"] .indo-filterpanel { right: auto; left: 0; }
@media (max-width: 600px) {
	html[dir="rtl"] .indo-filterpanel { right: 0; }
}
html[dir="rtl"] .indo-chip { text-align: right; }

/* Segmented control dividers. */
html[dir="rtl"] .indo-segment__btn {
	border-right: 0;
	border-left: 1px solid var(--border-on-dark-2);
}
html[dir="rtl"] .indo-segment__btn:last-child { border-left: 0; }

/* Scroll-edge fades on the spec tabs and gallery thumbs: "end" is the
   left edge now. (catalogue.js computes the state from scrollLeft, which
   is 0 or negative in RTL: see the note for the lead in the report.) */
html[dir="rtl"] .indo-tabs[data-overflow="end"],
html[dir="rtl"] .indo-gallery__thumbs[data-overflow="end"] {
	-webkit-mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent);
	mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent);
}
html[dir="rtl"] .indo-tabs[data-overflow="start"],
html[dir="rtl"] .indo-gallery__thumbs[data-overflow="start"] {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
}
html[dir="rtl"] .indo-gallery__thumbs[data-overflow="end"] {
	-webkit-mask-image: linear-gradient(to left, #000 calc(100% - 56px), transparent);
	mask-image: linear-gradient(to left, #000 calc(100% - 56px), transparent);
}
html[dir="rtl"] .indo-gallery__thumbs[data-overflow="start"] {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
}
@media (max-width: 600px) {
	html[dir="rtl"] .indo-tabs[data-overflow="end"] {
		-webkit-mask-image: linear-gradient(to left, #000 calc(100% - 48px), rgba(0, 0, 0, 0.55));
		mask-image: linear-gradient(to left, #000 calc(100% - 48px), rgba(0, 0, 0, 0.55));
	}
	html[dir="rtl"] .indo-tabs[data-overflow="start"] {
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), rgba(0, 0, 0, 0.55));
		mask-image: linear-gradient(to right, #000 calc(100% - 48px), rgba(0, 0, 0, 0.55));
	}
}

/* Spec table: values sit against the end edge (left) on wide screens and
   under their key (right) on phones. */
html[dir="rtl"] .indo-spectable__value { text-align: left; }
@media (max-width: 600px) {
	html[dir="rtl"] .indo-spectable__value { text-align: right; }
}
html[dir="rtl"] .indo-product-spec .indo-spectable__value { text-align: right; }

/* Document table. */
html[dir="rtl"] .indo-doctable__cell { text-align: right; }
html[dir="rtl"] .indo-doctable__cell:first-child { padding-right: 0; }
html[dir="rtl"] .indo-doctable__cell:last-child { padding-left: 0; }
html[dir="rtl"] .indo-doctable__cell:first-child:not(:last-child) { padding-left: var(--space-1); }
html[dir="rtl"] .indo-doctable__cell:last-child:not(:first-child) { padding-right: var(--space-1); }
@media (max-width: 900px) {
	html[dir="rtl"] .indo-doclib .indo-doctable--set .indo-doctable__cell:last-child {
		right: auto;
		left: 0;
		padding-left: 0;
		padding-right: var(--space-1);
		box-shadow: inset -1px 0 0 var(--border-5), 10px 0 12px -6px rgba(33, 33, 33, 0.22);
	}
}

html[dir="rtl"] .indo-accordion__q { text-align: right; }
html[dir="rtl"] .indo-filmstrip__row { text-align: right; }
html[dir="rtl"] .indo-ctaband--split .indo-ctaband__lede { text-align: right; }
html[dir="rtl"] .indo-spectrumspage .indo-spectrumspage__lede { text-align: right; }

/* Pull quotes and featured quotes: the rule is on the start side. */
html[dir="rtl"] .indo-pullquote {
	padding-left: 0;
	padding-right: 28px;
	border-left: 0;
	border-right: 2px solid var(--accent);
}
html[dir="rtl"] .indo-pullquote--sm { padding: 4px 28px 4px 0; }
html[dir="rtl"] .indo-pullquote__cite { padding-left: 0; padding-right: 28px; }
@media (max-width: 600px) {
	html[dir="rtl"] .indo-pullquote,
	html[dir="rtl"] .indo-pullquote--sm { padding-right: var(--space-1); }
}
html[dir="rtl"] .indo-quote--featured .indo-quote__body {
	padding: 0 36px 0 0;
	border-left: 0;
	border-right: 2px solid var(--accent);
}
@media (max-width: 820px) {
	html[dir="rtl"] .indo-quote--featured .indo-quote__body { padding-right: var(--space-2); }
}

/* Accent-ruled callouts: error summaries, panels, confirmations. */
html[dir="rtl"] :is(
	.indo-errorsummary,
	.indo-ctaband--panel,
	.indo-umsug__error,
	.indo-legal__empty,
	.indo-feedback__done,
	.indo-enquiry .indo-returns__content,
	.indo-enquiry .indo-returns__done,
	.indo-formshell .wpforms-error-container,
	.indo-formshell .wpforms-error-noscript,
	.indo-formshell .wpforms-error-alert,
	.indo-formshell .wpforms-confirmation-container-full,
	.indo-formshell .wpforms-confirmation-container
) {
	border-left: 0;
	border-right: 3px solid var(--accent);
}
html[dir="rtl"] .indo-errorsummary__list { padding-left: 0; padding-right: 1.1em; }

/* WPForms "modern" select caret. */
html[dir="rtl"] .indo-formshell div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-select-style-modern .choices[data-type*="select-one"]::after {
	right: auto;
	left: 16px;
}

/* Spectrums page: the phone scroll cue and the chart's scroll fade. The
   chart scrolls from its right edge in RTL, so the fade is on the left. */
@media (max-width: 600px) {
	html[dir="rtl"] .indo-spectrum__cue {
		right: auto;
		left: 8px;
		transform: scaleX(-1);
	}
	html[dir="rtl"] .indo-spectrumspage .indo-spectrum__chart {
		-webkit-mask-image: linear-gradient(270deg, #000 85%, rgba(0, 0, 0, 0.55) 100%);
		mask-image: linear-gradient(270deg, #000 85%, rgba(0, 0, 0, 0.55) 100%);
	}
}


/* ============================================================
   7. Catalogue
   ============================================================ */

/* Square accent bullets. */
html[dir="rtl"] .indo-product__excerpt li,
html[dir="rtl"] .indo-product__prose li { padding-left: 0; padding-right: 18px; }
html[dir="rtl"] .indo-card__blurb .indo-card__point { padding-left: 0; padding-right: 15px; }
html[dir="rtl"] .indo-family__points li { padding: 12px 22px 12px 0; }
html[dir="rtl"] .indo-product__excerpt li::before,
html[dir="rtl"] .indo-product__prose li::before,
html[dir="rtl"] .indo-card__blurb .indo-card__point::before,
html[dir="rtl"] .indo-family__points li::before { left: auto; right: 0; }

@container (max-width: 479px) {
	html[dir="rtl"] .indo-product__kpi .indo-spectable__kpivalue {
		margin: 0 auto 0 0;
		text-align: left;
	}
}

html[dir="rtl"] table.indo-spec-table th,
html[dir="rtl"] table.indo-spec-table td {
	padding: 13px 0 13px var(--space-1);
	text-align: right;
}

html[dir="rtl"] .indo-accordion__panel--prose ul,
html[dir="rtl"] .indo-accordion__panel--prose ol { padding-left: 0; padding-right: var(--space-2); }

html[dir="rtl"] .indo-spectrum__copy p { text-align: right !important; }

html[dir="rtl"] .indo-umsug fieldset label { margin-right: 0; margin-left: var(--space-3); }


/* ============================================================
   8. Editorial
   ============================================================ */

/* Facts band: same shape as the stat band. */
html[dir="rtl"] .indo-facts__cell {
	border-left: 0;
	border-right: 1px solid var(--border-on-dark-hair);
}
html[dir="rtl"] .indo-facts__cell:first-child {
	padding-right: 0;
	padding-left: var(--space-3);
	border-right: 0;
}
@media (max-width: 1024px) {
	html[dir="rtl"] .indo-facts__cell:nth-child(odd) {
		padding-right: 0;
		padding-left: var(--space-3);
		border-right: 0;
	}
}
@media (max-width: 600px) {
	html[dir="rtl"] .indo-facts__cell {
		padding-right: 0;
		padding-left: var(--space-3);
		border-right: 0;
	}
}

html[dir="rtl"] .indo-editorial-prose ul,
html[dir="rtl"] .indo-editorial-prose ol { padding-left: 0; padding-right: var(--space-2); }

html[dir="rtl"] .indo-editorial-prose blockquote {
	padding: 4px var(--space-1-75) 4px 0;
	border-left: 0;
	border-right: 2px solid var(--accent);
}
html[dir="rtl"] .indo-editorial-prose th,
html[dir="rtl"] .indo-editorial-prose td { text-align: right; }

html[dir="rtl"] .indo-editorial-prose .indo-legacy-button { margin: 4px 0 4px 12px; }

@media (max-width: 1023px) {
	html[dir="rtl"] .indo-filterbar--sticky .indo-topictabs__row {
		-webkit-mask-image: linear-gradient(270deg, #000 88%, transparent);
		mask-image: linear-gradient(270deg, #000 88%, transparent);
	}
}


/* ============================================================
   9. Home family (home, pillars, Direct Drive, campaign landing)
   ============================================================ */

html[dir="rtl"] .indo-home-split__panel:first-child .indo-home-split__body {
	padding-left: var(--space-2-5);
	padding-right: max(var(--indo-gutter), calc((var(--indo-page-w, 100vw) - var(--rail)) / 2));
}
html[dir="rtl"] .indo-home-split__meter { right: auto; left: var(--space-2); }

html[dir="rtl"] .indo-dd-prose ul,
html[dir="rtl"] .indo-landing__body .indo-lp-specs { padding-left: 0; padding-right: 1.1em; }

html[dir="rtl"] .indo-landing__body .indo-lp-refrain {
	padding-left: 0;
	padding-right: var(--space-2);
	border-left: 0;
	border-right: 2px solid var(--accent);
}


/* ============================================================
   10. Utility (forms, legal, 404, map, feedback)
   ============================================================ */

html[dir="rtl"] .indo-enquiry__aside {
	border-left: 0;
	border-right: 1px solid var(--border-2);
	padding-left: 0;
	padding-right: var(--space-2-5);
}
@media (max-width: 820px) {
	html[dir="rtl"] .indo-enquiry__aside { border-right: 0; padding-right: 0; }
}

html[dir="rtl"] .indo-legal__prose { padding-left: 0; padding-right: 72px; }
@media (max-width: 820px) {
	html[dir="rtl"] .indo-legal__prose { padding-right: 0; }
}

html[dir="rtl"] .indo-enquiry .indo-returns__progress-btn { text-align: right; }

html[dir="rtl"] .indo-map__credit { margin: 0 auto 0 0; }

html[dir="rtl"] .indo-nps__legend { float: right; }
html[dir="rtl"] .indo-nps__ends--under span:last-child { text-align: left; }