/*
 * Site-wide RTL layout. Scoped under html[dir="rtl"], which is set either
 * server-side (Arabic pages, see includes/lang.php) or client-side when the
 * Emotii widget translates an English page into an RTL language (see the
 * detection script in layouts/footer.php). Loaded on every page from
 * layouts/header.php, after all other stylesheets, so these overrides win
 * the cascade without needing !important.
 *
 * direction:rtl on <html> already mirrors most flexbox/inline-flow layout
 * (menus, flex rows, text-align defaults, list markers) for free. The rules
 * below only correct properties that are physical rather than logical —
 * fixed/absolute left/right offsets, margins, transforms, and floats — that
 * the base stylesheets hardcode for the LTR-only layout.
 */

html[dir="rtl"] {
    direction: rtl;
}

html[dir="rtl"] body {
    text-align: right;
}

/* .js_hover (static/js/main.js initHover / style.css:370) splits any
   non-Arabic text into one <span> per character for a hover-flip effect,
   and the wrapper is display:inline-flex — so under dir="rtl" those
   per-character spans get reordered right-to-left along with everything
   else, visually scrambling English fallback text letter-by-letter.
   Arabic text is never split (see the hasArabic check in initHover), so
   forcing ltr here only affects the split-English case and is safe. */
html[dir="rtl"] .js_hover {
    direction: ltr;
}

/* .js_split (static/js/main.js initSplitText / style.css:822) wraps every
   word in its own inline-block span for a scroll-reveal animation. Under
   dir="rtl" the browser's bidi algorithm reorders those atomic
   inline-block boxes right-to-left within each line, visually scrambling
   word order for non-Arabic text (e.g. "Social media is" renders as "is
   media Social") even though the DOM order is untouched. initSplitText()
   now skips Arabic content (matching initHover()'s existing hasArabic
   guard), so .js_split only ever wraps non-Arabic text — forcing ltr here
   is safe and only affects that case. */
html[dir="rtl"] .js_split {
    direction: ltr;
}

/* ---------------------------------------------------------------------- */
/* Header / nav (layouts/header.php)                                      */
/* ---------------------------------------------------------------------- */

/* Lang switcher + hamburger group: was pinned right via margin-left:auto */
html[dir="rtl"] .header-right {
    margin-left: 0;
    margin-right: auto;
}

/* Off-canvas menu: slides in from the inline-start edge (left in RTL)
   instead of the right */
html[dir="rtl"] .menu {
    right: auto;
    left: -100%;
    text-align: right;
}

html[dir="rtl"] .menu.open {
    left: 0;
    right: auto;
}

/* Services submenu: opens toward the inline-start edge */
html[dir="rtl"] .submenu {
    right: auto;
    left: -300px;
}

html[dir="rtl"] .submenu li {
    transform: translateX(-40px);
}

html[dir="rtl"] .has-submenu.open > .submenu li {
    transform: translateX(0);
}

/* "Let's talk" pinned to the end of the nav row via .to-right */
html[dir="rtl"] .to-right {
    margin-left: 0;
    margin-right: auto;
}

/* ---------------------------------------------------------------------- */
/* Footer (layouts/footer.php)                                            */
/* ---------------------------------------------------------------------- */

html[dir="rtl"] .foot-office-social,
html[dir="rtl"] .foot-tags,
html[dir="rtl"] .foot-nav-row ul,
html[dir="rtl"] .foot-bottom ul {
    padding-right: 0;
}

/* Fixed Call/Chat dock and the Emotii widget both anchor bottom-right by
   design (see the offset-y stacking comment in footer.php) — deliberately
   left un-mirrored so the two never collide, matching common practice for
   floating action buttons regardless of reading direction. */

/* Client-logo marquee (index.php #leftSlider/#rightSlider, initSlider()):
   the JS drives the scroll purely with pixel-math translateX() against
   track.scrollWidth, tuned for an LTR flex row. Under dir="rtl" the
   .logo-track flex row auto-mirrors (its overflow content shifts to the
   opposite side), which the hand-rolled math doesn't account for — the
   reverse-direction row ends up translated fully off-canvas. No
   reading-direction meaning here (it's a decorative logo showcase), so
   the simplest correct fix is to keep this component LTR always. */
html[dir="rtl"] .logo-slider {
    direction: ltr;
}

/* ---------------------------------------------------------------------- */
/* style.css — hero, marquee, subscribe button, form inputs, other-pages  */
/* ---------------------------------------------------------------------- */

@keyframes marquee-rtl {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(50%, 0, 0);
    }
}
html[dir="rtl"] .marquee-line {
    animation-name: marquee-rtl;
} /* mirrors style.css:927 (@keyframes marquee at style.css:951) */

html[dir="rtl"] .subscr-cover-link .btn {
    padding: 0 0 0 calc(56px + (var(--size) - 44px) / 2);
} /* mirrors style.css:1055 */

html[dir="rtl"] .subscr-cover-link .arrow {
    right: auto;
    left: calc((var(--size) - 44px) / 2);
} /* mirrors style.css:1100 */

html[dir="rtl"] .subscr-cover-link .btn .text.ready .line > * {
    padding: 0 20px 0 0;
} /* mirrors style.css:1085 */

html[dir="rtl"] .subscr-cover-link .btn .text.ready .line {
    animation-name: marquee-rtl;
} /* mirrors style.css:1081 (shares @keyframes marquee) */

html[dir="rtl"] .input-info {
    text-align: right;
} /* mirrors style.css:1301 */

html[dir="rtl"] .input-label {
    transform-origin: 100% -100%;
} /* mirrors style.css:1329 */

@media only screen and (min-width: 550px) and (max-width: 849.99px), only screen and (min-width: 1000px) {
    html[dir="rtl"] .other-pages .block .arrow {
        right: auto;
        left: 0;
    } /* mirrors style.css:1757 */
}

/* ---------------------------------------------------------------------- */
/* startups.css — hero ratings ticker, steps, benefits, priorities        */
/* ---------------------------------------------------------------------- */

html[dir="rtl"] .ready .startups-hero .ratings ul {
    animation-name: marquee-rtl;
} /* mirrors startups.css:65 (shares @keyframes marquee) */

html[dir="rtl"] .startups-hero .ratings li {
    padding-right: 0;
    padding-left: 16px;
} /* mirrors startups.css:69 */

html[dir="rtl"] .startups-hero .ratings li:after {
    right: auto;
    left: 8px;
    transform: translate3d(-50%, -50%, 0);
} /* mirrors startups.css:76,82 */

@media only screen and (orientation: landscape) {
    html[dir="rtl"] .startups-hero .text {
        margin-left: 0;
        margin-right: auto;
    } /* mirrors startups.css:95 */

    @media only screen and (min-width: 1920px) {
        html[dir="rtl"] .startups-hero .text {
            margin-right: 0;
            margin-left: calc((100vw - 1920px) / 2);
        } /* mirrors startups.css:103 */
    }
}

@media only screen and (orientation: landscape) {
    html[dir="rtl"] .startups-steps ol {
        padding-left: 0;
        padding-right: 2.888em;
    } /* mirrors startups.css:285 */

    html[dir="rtl"] .startups-steps ol:before {
        left: auto;
        right: 2px;
    } /* mirrors startups.css:297 */

    html[dir="rtl"] .startups-steps ol:after {
        left: auto;
        right: 0;
    } /* mirrors startups.css:301 */

    html[dir="rtl"] .startups-steps .image {
        left: var(--side-padding);
        right: 50%;
    } /* mirrors startups.css:312,314 */
}

@media only screen and (orientation: portrait) {
    html[dir="rtl"] .startups-steps ol:after {
        left: auto;
        right: 0;
    } /* mirrors startups.css:335 */

    html[dir="rtl"] .startups-steps li {
        transform: translate3d(calc((100% * var(--percent2)) + 100% * var(--percent3)), 0, 0);
    } /* mirrors startups.css:343 */
}

@media only screen and (orientation: landscape) {
    html[dir="rtl"] .startups-benefits-head .bg {
        left: auto;
        right: 40%;
    } /* mirrors startups.css:432 */

    html[dir="rtl"] .startups-benefits .list {
        transform: translate3d(calc((110% + 100vw) * var(--percent)), 0, 0) !important;
    } /* mirrors startups.css:653 */

    html[dir="rtl"] .startups-benefits .card {
        transform: translate3d(calc(50% * var(--speed) * var(--percent)), 0, 0) rotate(calc(var(--angle) * var(--percent) * 3));
    } /* mirrors startups.css:660 — rotate() left as-is, decorative tilt is not a directional property */
}

@media only screen and (orientation: portrait) {
    html[dir="rtl"] .startups-benefits .card:not(:first-child) {
        margin-left: 0;
        margin-right: -100%;
    } /* mirrors startups.css:579 */
}

html[dir="rtl"] .startups-priorities .text > * > *:not(:first-child) {
    margin-left: 0;
    margin-right: -100%;
} /* mirrors startups.css:725 */

@media only screen and (orientation: landscape) {
    html[dir="rtl"] .startups-priorities .title {
        text-align: left;
        padding-right: 0;
        padding-left: var(--gap);
    } /* mirrors startups.css:787-788 */

    html[dir="rtl"] .startups-priorities .list {
        padding-left: 0;
        padding-right: var(--gap);
    } /* mirrors startups.css:791 */

    html[dir="rtl"] .startups-priorities .text > * {
        margin-left: 0;
        margin-right: 50%;
        padding-left: 0;
        padding-right: var(--gap);
    } /* mirrors startups.css:822-823 */

    html[dir="rtl"] .startups-priorities .text > *:before {
        right: auto;
        left: 100%;
        margin-right: 0;
        margin-left: var(--gap);
    } /* mirrors startups.css:829-830 */
}

/* ---------------------------------------------------------------------- */
/* contact.css                                                            */
/* ---------------------------------------------------------------------- */

html[dir="rtl"] .contact-form-panel .input-label {
    left: auto;
    right: clamp(12px, 0.875rem, 14px);
    transform-origin: right top;
} /* mirrors contact.css:512,532 */

html[dir="rtl"] .contact-form-panel .input-info {
    text-align: right;
} /* mirrors contact.css:561 */

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

@media only screen and (min-width: 1000px) {
    html[dir="rtl"] .services .num {
        right: auto;
        left: 0;
    } /* mirrors services.css:305 */

    html[dir="rtl"] .services .text {
        left: auto;
        right: 0;
    } /* mirrors services.css:323 */
}

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

html[dir="rtl"] .services-index__row:hover .services-index__cta-icon,
html[dir="rtl"] .services-index__row:focus-visible .services-index__cta-icon {
    transform: translateX(-3px);
} /* mirrors services-index.css:273 */

/* ---------------------------------------------------------------------- */
/* service.css                                                            */
/* ---------------------------------------------------------------------- */

@media only screen and (min-width: 700px) {
    html[dir="rtl"] .service-head .mini-title {
        right: auto;
        left: var(--side-padding);
    } /* mirrors service.css:70 */
}

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

html[dir="rtl"] .home-services__row::before {
    inset: 0 0 0 auto;
} /* mirrors home-services.css:84 */

html[dir="rtl"] .home-services__row::after {
    background: linear-gradient(270deg, rgba(0, 0, 0, 0.03) 0%, transparent 55%);
} /* mirrors home-services.css:104 */

html[dir="rtl"] .home-services__tags li:not(:last-child)::after {
    right: auto;
    left: calc(-0.65em - 2px);
} /* mirrors home-services.css:206 */

html[dir="rtl"] .home-services__row:hover .home-services__cta-icon,
html[dir="rtl"] .home-services__row:focus-visible .home-services__cta-icon {
    transform: translateX(-6px);
} /* mirrors home-services.css:263 */

/* The arrow glyph is drawn pointing right (LTR "forward"); under RTL it
   must point left instead, or it reads as pointing backward relative to
   the row's own hover/reading direction. */
html[dir="rtl"] .home-services__cta-arrow {
    transform: scaleX(-1);
} /* mirrors home-services.css:246 */

/* ---------------------------------------------------------------------- */
/* works.css                                                              */
/* ---------------------------------------------------------------------- */

@media only screen and (min-width: 700px) {
    html[dir="rtl"] .works .info {
        left: auto;
        right: 0;
    } /* mirrors works.css:94-100 */

    html[dir="rtl"] .works .title {
        right: auto;
        left: 0;
    } /* mirrors works.css:94-97,101-104 */

    html[dir="rtl"] .works .thumbs {
        left: auto;
        right: 0;
    } /* mirrors works.css:119-122 */

    html[dir="rtl"] .works .number {
        right: auto;
        left: 0;
        padding-left: 0;
        padding-right: 3ch;
    } /* mirrors works.css:123-127,133-136 */

    html[dir="rtl"] .works .number:before,
    html[dir="rtl"] .works .number:after {
        right: auto;
        left: 1ch;
    } /* mirrors works.css:137-144 */

    html[dir="rtl"] .works .number:before {
        left: 2ch;
    } /* mirrors works.css:148-150 */
}

/* ---------------------------------------------------------------------- */
/* works-index.css                                                        */
/* ---------------------------------------------------------------------- */

html[dir="rtl"] .works-index .case-item::before {
    inset: 0 0 0 auto;
} /* mirrors works-index.css:227-237 */

html[dir="rtl"] .works-index__filter {
    border-right: 0;
    border-left: 1px solid rgba(0, 0, 0, 0.12);
}
html[dir="rtl"] .works-index__filter:last-child {
    border-left: 0;
} /* mirrors works-index.css:72-96 */

html[dir="rtl"] .works-index__view {
    border-right: 0;
    border-left: 1px solid rgba(0, 0, 0, 0.12);
}
html[dir="rtl"] .works-index__view:last-child {
    border-left: 0;
} /* mirrors works-index.css:118-147 */

html[dir="rtl"] .works-index-dock__btn {
    border-right: 0;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
}
html[dir="rtl"] .works-index-dock__btn:last-child {
    border-left: 0;
} /* mirrors works-index.css:377-395 */

/* .works-index-dock's asymmetric padding (0 132px 0 12px) reserves space for
   the fixed Call/Chat dock, which stays bottom-right in RTL too (see the
   footer.php note above) — so this is intentionally left un-mirrored. */

/* ---------------------------------------------------------------------- */
/* team.css                                                               */
/* ---------------------------------------------------------------------- */

html[dir="rtl"] .team .top-text {
    float: left;
} /* mirrors team.css:15 (float: right) */

html[dir="rtl"] .slider-team .swiper-slide:first-child {
    margin-left: 0;
    margin-right: auto;
} /* mirrors team.css:95-97 */

html[dir="rtl"] .slider-team .swiper-slide:last-child {
    margin-right: 0;
    margin-left: auto;
} /* mirrors team.css:98-100 */

/* ---------------------------------------------------------------------- */
/* expertieses.css                                                        */
/* ---------------------------------------------------------------------- */

html[dir="rtl"] .expertieses .list li {
    text-align: left;
} /* mirrors expertieses.css:43 (text-align: right) */

html[dir="rtl"] .expertieses .list .title {
    padding-left: 0;
    padding-right: clamp(100px, 15.25rem, 244px);
} /* mirrors expertieses.css:64 */

html[dir="rtl"] .expertieses .list .title:before {
    left: auto;
    right: calc(clamp(100px, 15.25rem, 244px) / 2);
    transform: translate3d(50%, -50%, 0);
} /* mirrors expertieses.css:71-72 */

html[dir="rtl"] .expertieses .list .text {
    float: left;
} /* mirrors expertieses.css:83 (float: right) */

/* ---------------------------------------------------------------------- */
/* reviews.css                                                            */
/* ---------------------------------------------------------------------- */

html[dir="rtl"] .reviews-prev {
    transform: scale(1, 1);
}
html[dir="rtl"] .reviews-next {
    transform: scale(-1, 1);
} /* mirrors reviews.css:74-76 — no Swiper instance passes rtl:true, verified */

html[dir="rtl"] .review .photo {
    left: auto;
    right: 0;
} /* mirrors reviews.css:218-221 */

html[dir="rtl"] .review .author {
    padding-left: 0;
    padding-right: calc(var(--photo) + 20px);
} /* mirrors reviews.css:238 */

@media only screen and (min-width: 1400px) {
    html[dir="rtl"] .review .author {
        margin-right: 0;
        margin-left: calc(clamp(134px, 10.875rem, 174px) + 10px);
    } /* mirrors reviews.css:348 */

    html[dir="rtl"] .review .stars {
        right: auto;
        left: var(--hor);
    } /* mirrors reviews.css:351-356 */
}

html[dir="rtl"] .modal-video-close {
    left: auto;
    right: 100%;
} /* mirrors reviews.css:387-391 */

@media only screen and (orientation: portrait) {
    html[dir="rtl"] .modal-video-close {
        right: auto;
        left: 0;
    } /* mirrors reviews.css:429-435 */
}

/* ---------------------------------------------------------------------- */
/* faq.css                                                                */
/* ---------------------------------------------------------------------- */

@media only screen and (max-width: 999.99px) {
    html[dir="rtl"] .faq-thumbs .swiper-slide:nth-child(1) {
        margin-left: 0;
        margin-right: auto;
    } /* mirrors faq.css:137-139 */

    html[dir="rtl"] .faq-thumbs .swiper-slide:nth-last-child(1) {
        margin-right: 0;
        margin-left: auto;
    } /* mirrors faq.css:140-142 */
}

/* ---------------------------------------------------------------------- */
/* pricing.css                                                            */
/* ---------------------------------------------------------------------- */

/* .screen2 is the 2nd child of .pricing's unconditional row flex container.
   Under dir=rtl the row auto-reverses so screen2 sits off-canvas to the LEFT
   of screen1 instead of the right — translateX(-100%) would push it further
   off instead of back over screen1, so the sign must flip. */
html[dir="rtl"] .pricing .screen2 {
    transform: translate3d(100%, 0, 0);
} /* mirrors pricing.css:25-26 */

html[dir="rtl"] .pricing .twice .trigger {
    margin-left: 0;
    margin-right: clamp(9px, 0.875rem, 14px);
} /* mirrors pricing.css:122 */

html[dir="rtl"] .pricing .twice .trigger:before {
    left: auto;
    right: 0;
} /* mirrors pricing.css:131-132 */
html[dir="rtl"] .pricing input:checked ~ .screen .twice .trigger:before {
    transform: translate3d(-1.5625em, 0, 0);
} /* mirrors pricing.css:145-147 */

html[dir="rtl"] .pricing li {
    padding-left: 0;
    padding-right: calc(clamp(20px, 2.3125rem, 37px) + clamp(10px, 0.75rem, 12px));
} /* mirrors pricing.css:223 */
html[dir="rtl"] .pricing li:before {
    left: auto;
    right: 0;
} /* mirrors pricing.css:229 */

@media only screen and (max-width: 999.99px) {
    html[dir="rtl"] .pricing .image > * {
        left: auto;
        right: -25%;
    } /* mirrors pricing.css:285-291 */

    html[dir="rtl"] .pricing .screen2 .image > * {
        left: auto;
        right: -40%;
    } /* mirrors pricing.css:292-297 */

    html[dir="rtl"] .pricing .week {
        right: auto;
        left: var(--side-padding);
    } /* mirrors pricing.css:307-310 */
}

@media only screen and (min-width: 1000px) {
    html[dir="rtl"] .pricing .screen .text {
        margin-left: 0;
        margin-right: 43.75%;
    } /* mirrors pricing.css:318-322 */

    html[dir="rtl"] .pricing .image {
        left: auto;
        right: calc((100% - var(--side-padding) * 2) * 0.21875 + var(--side-padding));
        transform: translate3d(50%, -50%, 0);
    } /* mirrors pricing.css:326-328 */
    html[dir="rtl"]:not(.ready) .pricing .image {
        transform: translate3d(50%, calc(-50% + var(--distance)), 0);
    } /* mirrors pricing.css:331-334 */

    html[dir="rtl"] .pricing .screen1 .image {
        transform: translate3d(50%, -50%, 0) rotate(-15deg);
    } /* mirrors pricing.css:342-343 */
    html[dir="rtl"]:not(.ready) .pricing .screen1 .image {
        transform: translate3d(50%, calc(-50% + var(--distance)), 0) rotate(-15deg);
    } /* mirrors pricing.css:345-347 */

    html[dir="rtl"] .pricing .week {
        left: auto;
        right: calc((100% - var(--side-padding) * 2) * 0.17 + var(--side-padding));
        transform: translate3d(50%, -50%, 0);
    } /* mirrors pricing.css:351-354 */
}

/* ---------------------------------------------------------------------- */
/* profitable.css                                                         */
/* ---------------------------------------------------------------------- */

@media only screen and (min-width: 1000px) {
    html[dir="rtl"] .profitable .legend .el {
        text-align: right;
    } /* mirrors profitable.css:139 (text-align: left) */
}

/* ---------------------------------------------------------------------- */
/* text-block.css                                                         */
/* ---------------------------------------------------------------------- */

html[dir="rtl"] .text-block .text {
    float: left;
} /* mirrors text-block.css:31 (float: right) */

/* ---------------------------------------------------------------------- */
/* services/{slug}/index.php — "Discover" showcase carousel (branding,    */
/* web-development, photography, video-production,                       */
/* social-media-management, growth-marketing — identical inline markup)   */
/* ---------------------------------------------------------------------- */

/* .discover-nav is a plain display:flex row (prev button with a
   180deg-rotated arrow-right icon, then next button with the same icon
   unrotated) and the underlying Swiper instance is never given rtl:true
   (same root cause as the reviews-prev/reviews-next fix above) — under
   dir=rtl the row auto-reverses, swapping which button sits on which side
   without swapping the icon each button carries, so the left-pointing
   arrow ends up on the right and the right-pointing arrow ends up on the
   left. Reversing the row again restores each icon to its correct side. */
html[dir="rtl"] .discover-nav {
    flex-direction: row-reverse;
} /* mirrors services/branding/index.php:532 (and identical block in the
     other 5 service page templates) */

/* ---------------------------------------------------------------------- */
/* case.css                                                               */
/* ---------------------------------------------------------------------- */

/* .case-head uses the "100vw + left:50% + translateX(-50%)" full-bleed
   breakout trick to escape its padded container. Confirmed via live
   measurement (getBoundingClientRect) that under dir="rtl" this leaves the
   block ~40px off-center (case-head + its .palette/.info children
   partially clipped past the left edge on mobile) — mirroring the offset
   direction (right/+50% instead of left/-50%) restores correct centering. */
html[dir="rtl"] .case-head {
    left: auto;
    right: 50%;
    transform: translate3d(50%, 0, 0);
} /* mirrors case.css:2-7 */

/* ---------------------------------------------------------------------- */
/* works/case-study.php — related-works swiper nav (inline <style> block)  */
/* ---------------------------------------------------------------------- */

/* .pi47-swiper-nav is a plain display:flex row (swiper-button-prev with a
   left-pointing icon, then swiper-button-next with a right-pointing icon)
   and the underlying Swiper instance is never given rtl:true (same root
   cause as the discover-nav fix above) — under dir=rtl the row auto-
   reverses, swapping which button sits on which side without swapping the
   icon each button carries, so the left-pointing arrow ends up on the
   right and the right-pointing arrow ends up on the left. Reversing the
   row again restores each icon to its correct side. */
html[dir="rtl"] .pi47-swiper-nav {
    flex-direction: row-reverse;
} /* mirrors works/case-study.php:875-878 */

/* ---------------------------------------------------------------------- */
/* works/case-study.php — "All Works" CTA icon                            */
/* ---------------------------------------------------------------------- */

/* .link-all .link is a flex row (round icon button, then label) with no
   row-reverse, so under dir=rtl it auto-flips: the icon (first in DOM)
   lands on the right instead of the left, but the arrow-right sprite inside
   it still points right — away from the label instead of into it. Mirroring
   just the icon keeps it pointing toward the text on both sides. */
html[dir="rtl"] .link-all .btn svg {
    transform: scaleX(-1);
} /* mirrors works/case-study.php:966-969 */

/* ---------------------------------------------------------------------- */
/* index.php — "See all works" featured-works CTA                         */
/* ---------------------------------------------------------------------- */

/* .cta-arrow is a literal "→" character, not an icon font/SVG, so it never
   mirrors on its own under dir=rtl. */
html[dir="rtl"] .cta-arrow {
    display: inline-block;
    transform: scaleX(-1);
} /* mirrors index.php:681,685 */

/* .mySwiper hardcodes padding-left for the leading gap before the first
   card, which is correct for LTR but leaves the RTL swiper's leading
   (right) edge flush against the viewport — the active card's image,
   title, subtitle, and pagination dots all end up crammed against the
   screen edge instead of inset to match the trailing side. */
html[dir="rtl"] .featured-works .mySwiper {
    padding: 0 var(--side-padding) 28px 0;
} /* mirrors index.php:503-506 */