/* ================================================================
   ARABIC EXPERIENCE LAYER   |  arabic.css
   ----------------------------------------------------------------
   Every rule is scoped to [dir="rtl"] so this file is INERT on the
   English (LTR) experience — it can load unconditionally.

   The active Arabic font family is injected by inc/arabic.php as the
   CSS custom property --sm-arabic-font (Dubai / Google / custom).
   ================================================================ */

/* ─── Arabic typography system ─────────────────────────────────
   Swap the body font to the Arabic family. The display font
   (BUNDAYCLEAN) has no Arabic glyphs, so cinematic headings also
   fall back to the Arabic family — but heavier weight so they keep
   the cinematic "display" presence. */

[dir="rtl"] #sm-cinematic-app,
[dir="rtl"] .sm-navbar-widget,
[dir="rtl"] .sm-footer-widget,
[dir="rtl"] .sm-cf7,
[dir="rtl"] #mobile-nav {
	font-family: var(--sm-arabic-font, 'Segoe UI', Tahoma, sans-serif);
}

/* Cinematic display headings — Arabic glyphs at display weight. */
[dir="rtl"] #sm-cinematic-app .font-display,
[dir="rtl"] #sm-cinematic-app h1,
[dir="rtl"] #sm-cinematic-app h2,
[dir="rtl"] #sm-cinematic-app h3 {
	font-family: var(--sm-arabic-font, 'Segoe UI', Tahoma, sans-serif);
	font-weight: 700;
	letter-spacing: 0;        /* Arabic must never be letter-spaced */
	line-height: 1.18;        /* Arabic needs more leading than Latin display */
}

/* Arabic hero + H2 tokens (TASK 07 §3) — Arabic glyphs settle correctly
   at line-height:1 for the BIG display sizes, whereas the 1.18 above
   suits inline H3/body headings. Hero titles and section H2s use 1. */
[dir="rtl"] #sm-cinematic-app .hero-title,
[dir="rtl"] #sm-cinematic-app .abt-title,
[dir="rtl"] #sm-cinematic-app .c-hero-title,
[dir="rtl"] #sm-cinematic-app .ct-hero-title,
[dir="rtl"] #sm-cinematic-app .cr-hero-title,
[dir="rtl"] #sm-cinematic-app h2 {
	line-height: 1 !important;
}

/* Arabic overflow-clipping fix (TASK 07 §7) — Arabic glyphs have taller
   ascenders + descenders than Latin, so when a SplitType / line-mask
   container uses overflow:hidden with a tight line-height the visible
   glyphs get clipped top/bottom. overflow:hidden clips at the PADDING
   edge, so adding a small vertical padding restores breathing room
   without breaking the translateY(110%) reveal (the off-screen state
   is still clipped, just by a slightly larger box). Covers every
   animated heading mask + the pinned Success Stories title. */
/* Arabic-specific overflow padding for headings that aren't covered
   by the global rule in main.css (the pinned testimonials header +
   any other overflow-hidden wrapper containing line chars). The
   shared masks already get 0.22em from main.css. */
[dir="rtl"] #sm-cinematic-app .c-test-pinned-header,
[dir="rtl"] #sm-cinematic-app .finale-headline,
[dir="rtl"] #sm-cinematic-app .c-form-headline,
[dir="rtl"] #sm-cinematic-app [class*="overflow-hidden"]:has(.c-line-char),
[dir="rtl"] #sm-cinematic-app [class*="overflow-hidden"]:has(.cr-line-char),
[dir="rtl"] #sm-cinematic-app [class*="overflow-hidden"]:has(.ct-line-char) {
	padding-block: 0.22em;
}

/* Container-level overflow guard: SplitType + the cinematic heading
   masks must never spawn a body-level horizontal scrollbar in Arabic.
   Use `overflow: clip` on the section wrappers so any glyph that
   shows up wider than expected is simply not painted instead of
   forcing the document to scroll. (overflow:clip clips without
   establishing a scroll container.) */
[dir="rtl"] body { overflow-x: clip; }

/* Tracked uppercase eyebrows: uppercase + letter-spacing is
   meaningless / harmful in Arabic — neutralise it. */
[dir="rtl"] #sm-cinematic-app [class*="tracking-"],
[dir="rtl"] #sm-cinematic-app [class*="uppercase"] {
	letter-spacing: 0 !important;
	text-transform: none !important;
}

/* Body copy — Arabic reads better slightly larger with more leading. */
[dir="rtl"] #sm-cinematic-app p {
	line-height: 1.9;
}


/* ─── Arabic responsive typography ─────────────────────────────
   The Latin display sizes use aggressive clamp() values tuned to
   condensed Latin caps. Arabic glyphs are taller/wider — pull the
   upper clamp bound down a touch so headings don't overflow. */

@media (max-width: 767px) {
	[dir="rtl"] #sm-cinematic-app .font-display {
		word-break: break-word;
	}
	[dir="rtl"] #sm-cinematic-app h1.font-display,
	[dir="rtl"] #sm-cinematic-app h2.font-display {
		font-size: clamp(2.2rem, 9vw, 4.5rem);
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	[dir="rtl"] #sm-cinematic-app h1.font-display {
		font-size: clamp(3rem, 8vw, 7rem);
	}
}


/* ─── Mirrored directional icons / arrows ──────────────────────
   Cinematic arrow SVGs point right (→) for LTR. Flip them for RTL so
   they point with the reading direction. Decorative non-directional
   SVGs (play icons, social icons, journey nodes) are NOT flipped. */

[dir="rtl"] #sm-cinematic-app .magnetic-btn svg,
[dir="rtl"] #sm-cinematic-app .hero-subopt-link svg,
[dir="rtl"] #sm-cinematic-app .ct-info-arrow svg,
[dir="rtl"] #sm-cinematic-app .group svg:not(.yt-play-icon):not(.c-wall-play svg):not(.sm-icon-brand) {
	transform: scaleX(-1);
}
/* Brand glyphs (WhatsApp, social icons, etc.) carry .sm-icon-brand
   and MUST NOT mirror in RTL — flipping a logo wordmark is wrong. */
[dir="rtl"] #sm-cinematic-app .sm-icon-brand,
[dir="rtl"] #sm-cinematic-app .sm-icon-brand svg {
	transform: none !important;
}

/* Do NOT mirror media-play triangles, theme-toggle icons, or the
   journey-node SVG illustrations. */
[dir="rtl"] #sm-cinematic-app .yt-play-icon,
[dir="rtl"] #sm-cinematic-app .c-wall-play svg,
[dir="rtl"] #sm-cinematic-app .node-svg,
[dir="rtl"] #sm-cinematic-app .theme-toggle svg,
[dir="rtl"] #sm-cinematic-app .stat-count {
	transform: none;
}

/* The hover-grow underline rule on text CTAs grows from the start
   edge — already direction-agnostic via flex; nothing to do. */


/* ─── RTL-aware layout flips ───────────────────────────────────
   Most cinematic layouts use Flex / Grid and flip automatically
   under dir="rtl". The exceptions are decorative pseudo-borders and
   absolutely-positioned ornaments tied to a physical edge. */

[dir="rtl"] #sm-cinematic-app .consult-quote,
[dir="rtl"] #sm-cinematic-app .abt-mission,
[dir="rtl"] #sm-cinematic-app .c-elig-quote {
	padding-left: 0;
	padding-right: 1.5rem;
	border-left: 0;
	border-right: 2px solid #BB2649;
}

[dir="rtl"] #sm-cinematic-app .def-reveal .w-px,
[dir="rtl"] #sm-cinematic-app .hero-divider {
	/* vertical rules — direction-neutral, no change needed */
}

/* Finale side-portrait is pinned to the inline-end edge already via
   `inset-inline-end` in the markup — logical property, auto-flips. */


/* ─── RTL-aware motion behaviour ───────────────────────────────
   The horizontal-scrub sections (about-track, c-wall-track) are
   translated by GSAP along the X axis. main.js reads samaanChild.isRtl
   and negates the translate direction. This CSS only ensures the
   tracks START at the correct edge so the first frame is correct
   before JS hydrates. */

[dir="rtl"] #sm-cinematic-app .about-track,
[dir="rtl"] #sm-cinematic-app .c-wall-track {
	margin-inline-start: 0;
	margin-inline-end: auto;
}

/* Kinetic background words: the hero/finale decorative words use
   text — fine in Arabic, but keep them from being letter-spaced. */
[dir="rtl"] #sm-cinematic-app .hero-kinetic-word,
[dir="rtl"] #sm-cinematic-app .finale-deco-word,
[dir="rtl"] #sm-cinematic-app .footer-wordmark-text {
	letter-spacing: 0;
}


/* ─── RTL hover-line origins (TASK 07 §6 + TASK 08) ─────────────
   Every cinematic card / link that paints a thin crimson bar that
   grows width 0 → 100% on hover MUST anchor to the right edge in
   RTL so the gesture matches Arabic reading direction. The bars
   are absolutely positioned via `left: 0` in LTR; flipping them is
   a one-line `left: auto; right: 0`. Listed together so adding a
   new card-style hover is just one selector. */
[dir="rtl"] #sm-cinematic-app .c-svc-bar,
[dir="rtl"] #sm-cinematic-app .c-pillar::after,
[dir="rtl"] #sm-cinematic-app .cr-feature-card::after,
[dir="rtl"] #sm-cinematic-app .ct-info-card::after {
	left: auto;
	right: 0;
}

/* Nav-link underline lives in the Theme Builder header — OUTSIDE
   #sm-cinematic-app — so it can't be scoped under that wrapper.
   Use the navbar widget root + a bare fallback so the rule still
   wins when WPML toggles dir="rtl" on <html>. */
[dir="rtl"] .sm-navbar-widget .nav-link::after,
[dir="rtl"] #navbar .nav-link::after,
[dir="rtl"] .nav-link::after {
	left: auto;
	right: 0;
}

/* Inline-end accent line under CTAs (.abt-cta and similar) — the
   tiny "→" line that expands from w-8 to w-16 on hover. The
   inline-block flows naturally in RTL; transform-origin anchors
   the growth to the text edge so it expands away from the text. */
[dir="rtl"] #sm-cinematic-app .abt-cta .bg-brand-crimson {
	transform-origin: right center;
}

/* Lesson hover translate — flips direction so the card slides
   towards the start (left) in RTL instead of away into the gutter. */
[dir="rtl"] #sm-cinematic-app .cr-lesson:hover {
	transform: translateX(-4px);
}

/* Lesson left accent bar + decorative bg number — these are
   physically positioned with `left: 0` / `right: 1.5rem` in
   course.css. Swap the edges in RTL so the accent reads from the
   inline-start (right) and the giant background number sits on
   the inline-end (left), matching the natural Arabic flow. */
[dir="rtl"] #sm-cinematic-app .cr-lesson-bar {
	left: auto;
	right: 0;
	border-radius: 2px 0 0 2px;
}
[dir="rtl"] #sm-cinematic-app .cr-lesson-bgnum {
	right: auto;
	left: 1.5rem;
}


/* ─── Navbar / footer in RTL ───────────────────────────────────
   Logo sits on the inline-start edge automatically via flex. The
   absolute-positioned dark logo override needs the logical edge. */

[dir="rtl"] .sm-navbar-widget .nav-logo-dark {
	left: auto;
	right: 0;
}

[dir="rtl"] .sm-langs { flex-direction: row-reverse; }


/* ─── Forms in RTL ─────────────────────────────────────────────
   CF7 RTL is handled in cf7-cinematic.css; this covers the
   cinematic native form fields (consultation / contact widgets). */

[dir="rtl"] #sm-cinematic-app .c-input,
[dir="rtl"] #sm-cinematic-app .ct-input {
	text-align: right;
}


/* ════════════════════════════════════════════════════════════════
   TASK 06 — RTL LAYOUT CORRECTIONS + DIRECTIONAL UI + TYPOGRAPHY
   All rules [dir="rtl"]-scoped — inert on the English experience.
   ════════════════════════════════════════════════════════════════ */

/* ─── PART 03 — Arabic typography hierarchy & rhythm ───────────── */

/* Heading hierarchy — Arabic glyphs carry more visual weight than
   condensed Latin caps, so step the display scale down slightly and
   give each level breathing room. */
[dir="rtl"] #sm-cinematic-app h1.font-display { line-height: 1.15; }
[dir="rtl"] #sm-cinematic-app h2.font-display { line-height: 1.2; }
[dir="rtl"] #sm-cinematic-app h3.font-display { line-height: 1.3; font-weight: 700; }

/* Eyebrow / chapter labels — Latin tracks them wide; Arabic must not
   be letter-spaced, so restore normal rhythm + a touch more size. */
[dir="rtl"] #sm-cinematic-app [class*="tracking-"]:not(.font-display) {
	font-size: 0.78rem;
	font-weight: 600;
}

/* Body rhythm — Arabic reads better with generous leading + a hair
   more size than the Latin clamp() floors. */
[dir="rtl"] #sm-cinematic-app p,
[dir="rtl"] #sm-cinematic-app li {
	line-height: 1.95;
	letter-spacing: 0;
}

/* Strong/em inside Arabic copy — keep weight contrast subtle. */
[dir="rtl"] #sm-cinematic-app strong { font-weight: 700; }
[dir="rtl"] #sm-cinematic-app em { font-style: normal; }

/* Arabic section-spacing — the Latin clamp paddings feel tight with
   taller Arabic line-boxes; nudge vertical breathing room up. */
@media (min-width: 1024px) {
	[dir="rtl"] #sm-cinematic-app .def-section,
	[dir="rtl"] #sm-cinematic-app .impact-section,
	[dir="rtl"] #sm-cinematic-app .abt-story,
	[dir="rtl"] #sm-cinematic-app .abt-why,
	[dir="rtl"] #sm-cinematic-app .abt-diff { padding-block: 11rem; }
}

/* Arabic responsive scaling — cap display headings so long Arabic
   words never overflow their column. */
@media (max-width: 767px) {
	[dir="rtl"] #sm-cinematic-app .hero-name-1,
	[dir="rtl"] #sm-cinematic-app .hero-name-2,
	[dir="rtl"] #sm-cinematic-app .abt-char,
	[dir="rtl"] #sm-cinematic-app .c-hero-char {
		font-size: clamp(2.6rem, 13vw, 5rem) !important;
	}
}


/* ─── PART 04 — RTL layout corrections ────────────────────────── */

/* Hero CTA dropdown — Tailwind `left-0` anchors the 288px panel to the
   button's left edge; in RTL that shoots it off the right of the
   viewport. Re-anchor to the inline-end (right) edge. */
[dir="rtl"] #sm-cinematic-app #hero-cta-menu {
	left: auto !important;
	right: 0 !important;
}

/* Sub-options accordion — the crimson guide border + padding sit on
   the physical left; flip to the right. */
[dir="rtl"] #sm-cinematic-app #hero-subopts-personal > div {
	border-left: 0;
	border-right-width: 2px;
	border-right-style: solid;
	padding-left: 0.5rem;
	padding-right: 0.75rem;
	margin-left: 0.5rem;
	margin-right: 1rem;
}

/* Hero stat cards — absolutely positioned to physical left/right;
   mirror so the +Years and +Brands cards swap sides in Arabic. */
[dir="rtl"] #sm-cinematic-app .hero-stat-card {
	left: auto;
	right: 0;
}
@media (min-width: 1024px) {
	[dir="rtl"] #sm-cinematic-app .hero-stat-card { right: -2rem; }
}
[dir="rtl"] #sm-cinematic-app .hero-stat-card-2 {
	right: auto;
	left: 0;
}
@media (min-width: 1024px) {
	[dir="rtl"] #sm-cinematic-app .hero-stat-card-2 { left: -1rem; }
}

/* Hero CTA root must not clip its dropdown — keep overflow visible
   on every ancestor up to the section. */
[dir="rtl"] #sm-cinematic-app .hero-cta,
[dir="rtl"] #sm-cinematic-app .hero-cta-root,
[dir="rtl"] #sm-cinematic-app .hero-text { overflow: visible; }

/* Hero section — allow horizontal bleed of stat cards without a
   scrollbar, but never clip the CTA menu. */
[dir="rtl"] #sm-cinematic-app .hero-section { overflow-x: clip; }
[dir="rtl"] #sm-cinematic-app .hero-section .max-w-screen-xl { overflow: visible; }

/* Arsenal / chapter counters — the "01 / 06" counter and dots align
   to the inline-start automatically via flex; ensure the left column
   text-aligns to the start edge. */
[dir="rtl"] #sm-cinematic-app .arsenal-left,
[dir="rtl"] #sm-cinematic-app .c-realwork-text,
[dir="rtl"] #sm-cinematic-app .consult-copy { text-align: right; }

/* Tailwind physical-edge utilities used in cinematic markup — remap
   the few that carry meaning in absolutely-positioned ornaments. */
[dir="rtl"] #sm-cinematic-app .lg\:-left-8  { left: auto; }
[dir="rtl"] #sm-cinematic-app .lg\:-right-4 { right: auto; }

/* Scroll indicator stays centred (translate-x-1/2) — direction-neutral. */

/* Four Pillars — the giant decorative number is physically bottom-right;
   mirror it to bottom-left so it trails the RTL reading flow. */
[dir="rtl"] #sm-cinematic-app .c-pillar-bg-num {
	right: auto;
	left: -0.05em;
}

/* Pull-quotes / mission borders already flipped earlier in this file. */

/* Eliminate layout clipping — cinematic sections that used overflow
   hidden purely for the Latin entrance masks keep their mask, but the
   row-level wrappers must not clip RTL bleed. */
[dir="rtl"] #sm-cinematic-app .hero-cta-menu { overflow: visible; }


/* ─── PART 05 — Directional UI system ─────────────────────────── */

/* Inline "arrow" SVGs inside buttons/links point in the reading
   direction. Mirror every directional arrow automatically; exclude
   media-play triangles, theme icons, journey illustrations, social
   icons and the hamburger. */
[dir="rtl"] #sm-cinematic-app a svg:not(.sm-icon-brand):not(.yt-play-icon),
[dir="rtl"] #sm-cinematic-app button svg:not(.sm-icon-brand):not(.yt-play-icon),
[dir="rtl"] .sm-navbar-widget a svg:not(.sm-icon-brand),
[dir="rtl"] .sm-footer-widget a svg:not(.sm-icon-brand) {
	transform: scaleX(-1);
}
[dir="rtl"] #sm-cinematic-app .yt-play-icon,
[dir="rtl"] #sm-cinematic-app .c-wall-play svg,
[dir="rtl"] #sm-cinematic-app .node-svg,
[dir="rtl"] #sm-cinematic-app .theme-toggle svg,
[dir="rtl"] #sm-cinematic-app .stat-count,
[dir="rtl"] #sm-cinematic-app .hamburger-wrap svg,
[dir="rtl"] .sm-navbar-widget .theme-toggle svg,
[dir="rtl"] .sm-footer-widget .social-icon svg,
[dir="rtl"] #sm-cinematic-app .social-icon svg,
[dir="rtl"] #sm-cinematic-app .ct-social svg,
[dir="rtl"] #sm-cinematic-app .yt-play-btn svg {
	transform: none;
}

/* Chevrons that point DOWN (CTA accordion) — direction-neutral, but
   the rotate-180 open-state must still work; don't scaleX them. */
[dir="rtl"] #sm-cinematic-app #hero-cta-chevron,
[dir="rtl"] #sm-cinematic-app #hero-cta-arrow { transform: none; }

/* Hover-grow underline on text CTAs — grows from the inline-start
   edge; flex already handles direction. The scroll-indicator pulse
   line is vertical — neutral. */

/* Button directional layouts — the cinematic buttons are authored
   DOM-order [label][arrow]. A flex row in an RTL document already
   reverses VISUAL order, placing the arrow at the inline-END (the
   left, in Arabic reading direction):  "← تواصل معنا".
   So we DO NOT force `row-reverse` — that would wrongly drag the
   arrow to the start. The arrow glyph itself is mirrored via the
   `scaleX(-1)` rule above so → becomes ←. Nothing to do here; this
   note documents the deliberate absence of a row-reverse override. */


/* ─── Motion-indicator adaptation ─────────────────────────────── */

/* The "Scroll to advance →" hint in the About horizontal pin points
   in the scrub direction. RTL scrubs the other way — flip the arrow
   glyph by mirroring the text node's inline arrows. */
[dir="rtl"] #sm-cinematic-app .about-hint { direction: rtl; }


/* ════════════════════════════════════════════════════════════════
   TASK 06b — ARABIC BUTTON + EYEBROW REFINEMENTS
   ════════════════════════════════════════════════════════════════ */

/* ─── Buttons — the Latin design uses tiny 10–11px tracked caps.
       Arabic glyphs at that size are hard to read; step every
       cinematic button (and CF7 submit) up a notch. ─── */
[dir="rtl"] #sm-cinematic-app .magnetic-btn,
[dir="rtl"] #sm-cinematic-app .nav-cta,
[dir="rtl"] #sm-cinematic-app .hero-cta-trigger,
[dir="rtl"] #sm-cinematic-app .c-svc-cta,
[dir="rtl"] #sm-cinematic-app .hero-cta-choice,
[dir="rtl"] #sm-cinematic-app .hero-subopt-link,
[dir="rtl"] .sm-navbar-widget .nav-cta,
[dir="rtl"] .sm-footer-widget .magnetic-btn,
[dir="rtl"] .sm-cf7 input[type="submit"],
[dir="rtl"] .sm-cf7 .sm-cf7-submit {
	font-size: 13.5px;
	font-weight: 600;
}
/* The button's inner <span> carries the label — make it inherit so the
   Tailwind text-[11px] on the span doesn't shrink it back. */
[dir="rtl"] #sm-cinematic-app .magnetic-btn > span,
[dir="rtl"] #sm-cinematic-app .hero-cta-choice > span,
[dir="rtl"] .sm-navbar-widget .nav-cta > span {
	font-size: inherit;
}
/* Slightly larger tap target so the bigger glyphs sit comfortably. */
[dir="rtl"] #sm-cinematic-app .magnetic-btn { line-height: 1.4; }


/* ─── Eyebrow / chapter labels — bigger + tighter to their heading.
       Latin eyebrows are 9–10px tracked caps with mb-5/mb-6/mb-8;
       Arabic needs more glyph size and LESS gap to the heading. ─── */
[dir="rtl"] #sm-cinematic-app .hero-eyebrow,
[dir="rtl"] #sm-cinematic-app .abt-eyebrow,
[dir="rtl"] #sm-cinematic-app .c-eyebrow,
[dir="rtl"] #sm-cinematic-app .cr-eyebrow,
[dir="rtl"] #sm-cinematic-app .ct-eyebrow,
[dir="rtl"] #sm-cinematic-app .consult-eyebrow,
[dir="rtl"] #sm-cinematic-app .c-sect-eyebrow,
[dir="rtl"] #sm-cinematic-app .finale-eyebrow,
[dir="rtl"] #sm-cinematic-app .abt-reveal,
[dir="rtl"] #sm-cinematic-app .c-reveal,
[dir="rtl"] #sm-cinematic-app .cr-reveal,
[dir="rtl"] #sm-cinematic-app [class*="tracking-[0.5"],
[dir="rtl"] #sm-cinematic-app [class*="tracking-[0.45"] {
	font-size: 0.92rem;
	font-weight: 600;
	letter-spacing: 0 !important;
}

/* Less bottom margin between eyebrow and its heading. Overrides the
   Tailwind mb-5 / mb-6 / mb-8 utilities (class specificity 0,1,0;
   ours is higher via the id-scoped selectors above). */
[dir="rtl"] #sm-cinematic-app .hero-eyebrow,
[dir="rtl"] #sm-cinematic-app .abt-eyebrow,
[dir="rtl"] #sm-cinematic-app .c-eyebrow,
[dir="rtl"] #sm-cinematic-app .cr-eyebrow,
[dir="rtl"] #sm-cinematic-app .ct-eyebrow,
[dir="rtl"] #sm-cinematic-app .consult-eyebrow,
[dir="rtl"] #sm-cinematic-app .c-sect-eyebrow,
[dir="rtl"] #sm-cinematic-app .finale-eyebrow {
	margin-bottom: 0.85rem;
}


/* ─── Hero CTA dropdown — directional arrows ──────────────────────
       The business choice (an <a>) carries a horizontal → arrow that
       must mirror in RTL; the personal choice carries the vertical
       down-chevron (#hero-cta-chevron) which must NOT mirror (GSAP
       rotates it open/closed). The main #hero-cta-arrow on the
       trigger is also vertical — GSAP rotates it down→up; never
       x-mirror it. ─── */
[dir="rtl"] #sm-cinematic-app .hero-cta-choice svg:not(#hero-cta-chevron):not(.sm-icon-brand),
[dir="rtl"] #sm-cinematic-app .hero-subopt-link svg:not(.sm-icon-brand) {
	transform: scaleX(-1);
}
[dir="rtl"] #sm-cinematic-app #hero-cta-chevron,
[dir="rtl"] #sm-cinematic-app #hero-cta-arrow {
	transform: none;   /* GSAP owns rotation — CSS must not x-flip these */
}