/* ============================================================
   MIX N MUSE — RTL (replace the whole assets/css/rtl.css)
   ------------------------------------------------------------
   Rule: <html dir="rtl"> already mirrors flex/grid layouts.
   Column 1 / first flex item = RIGHT side. So we DO NOT force
   grid columns or order values (that flipped it back to LTR).
   ============================================================ */

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

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

/* Logo artwork stays horizontal (SVG text anchors break in rtl) */
html[dir="rtl"] .brand-logo-svg,
html[dir="rtl"] .mobile-menu-logo {
    direction: ltr;
}

/* Brand name text in RTL stays readable */
html[dir="rtl"] .brand-logo,
html[dir="rtl"] .mobile-menu-brand {
    justify-content: flex-start;   /* start = right in RTL */
}


/* ============================================================
   DESKTOP / LAPTOP  (1024px and up)
   Result:  [CTA] [Dark] [RTL]  |  Contact ← … ← Home  |  Logo
            (left)                (centre, reversed)     (right)
   ============================================================ */

@media (min-width: 1024px) {

    /* Actions sit in the LEFT column; flex-end = left in RTL */
    html[dir="rtl"] .desktop-actions {
        justify-content: flex-end;
    }

    /* Nav order reverses automatically: Home is now on the right */
    html[dir="rtl"] .desktop-navigation {
        justify-content: center;
    }

    /* CTA arrow points left */
    html[dir="rtl"] .nav-cta svg {
        transform: scaleX(-1);
    }

    html[dir="rtl"] .nav-cta:hover svg {
        transform: scaleX(-1) translateX(3px);
    }

    /* Home dropdown stays centred under its button */
    html[dir="rtl"] .desktop-dropdown-menu {
        left: auto;
        right: 50%;
        transform: translate(50%, -8px) scale(0.98);
    }

    html[dir="rtl"] .nav-dropdown.open .desktop-dropdown-menu {
        transform: translate(50%, 0) scale(1);
    }

    html[dir="rtl"] .dropdown-item {
        text-align: start;
    }
}


/* ============================================================
   MOBILE + TABLET  (below 1024px, all screen sizes)
   Result:  [Hamburger] [Dark] [RTL]  ……………  Logo
            (left corner)                      (right corner)
   Nothing to force: flex row already starts from the right.
   ============================================================ */

@media (max-width: 1023px) {

    html[dir="rtl"] .main-navbar {
        justify-content: space-between;
    }

    html[dir="rtl"] .mobile-actions {
        justify-content: flex-end;   /* flex-end = left in RTL */
    }
}


/* ============================================================
   HAMBURGER MENU (RTL)
   Headings align to the RIGHT edge (mirror of left in LTR),
   logo on the right, close button on the left.
   ============================================================ */

html[dir="rtl"] .mobile-nav-link,
html[dir="rtl"] .mobile-submenu-link {
    text-align: start;
}

html[dir="rtl"] .mobile-menu-cta svg {
    transform: scaleX(-1);
}

html[dir="rtl"] .mobile-menu-cta:hover svg {
    transform: scaleX(-1) translateX(3px);
}


/* ============================================================
   SHARED RTL HELPERS (use on every new section / page)
   ============================================================ */

/* Flip arrows / directional icons: add class="flip-rtl" */
html[dir="rtl"] .flip-rtl {
    transform: scaleX(-1);
}

/* Form fields: text starts on the right */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    text-align: start;
}

/* Phone / email / URL stay left-to-right but sit on the right */
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"] {
    direction: ltr;
    text-align: right;
}

/* Lists */
html[dir="rtl"] ul,
html[dir="rtl"] ol {
    padding-inline-start: 1.25em;
}


/* MIX N MUSE – RTL (hero section). Layout mirrors via logical properties. */
html[dir="rtl"]{direction:rtl;--dir:-1}
html[dir="rtl"] body{text-align:start}
html[dir="rtl"] .tag{letter-spacing:0}
html[dir="rtl"] .btn::before{transform-origin:right center}
html[dir="rtl"] .btn svg{transform:scaleX(-1)}
html[dir="rtl"] .btn:hover svg{transform:scaleX(-1) translateX(5px)}
html[dir="rtl"] .hl svg{transform:scaleX(-1)}
html[dir="rtl"] .is-on.v0{animation-name:wipeD}
html[dir="rtl"] .is-on.v3{animation-name:wipeA}

/* MIX N MUSE - SECTION 2 RTL (logical properties handle the layout mirroring) */
html[dir=rtl]{direction:rtl}html[dir=rtl] .ag-btn::before,html[dir=rtl] .ag-prog i{transform-origin:right center}html[dir=rtl] .ag-btn svg{transform:scaleX(-1)}html[dir=rtl] .ag-btn:hover svg{transform:scaleX(-1) translateX(5px)}html[dir=rtl] .ag-hl svg{transform:scaleX(-1)}html[dir=rtl] .ag-tag,html[dir=rtl] .ag-kicker{letter-spacing:0}
html[dir=rtl] .ag-brush{transform:scaleX(-1)}
html[dir=rtl] .ag-spiral{transform:scaleX(-1)}

/* ============================================================
   MIX N MUSE
   SECTION 3 — DISCOVER YOUR ART WORLD
   RTL MIRROR
============================================================ */


/* ============================================================
   SECTION DIRECTION
============================================================ */

html[dir="rtl"] .discover-art {
    direction: rtl;
}


/* ============================================================
   ART GRID
============================================================ */

html[dir="rtl"] .daw-art-grid {
    direction: rtl;
}


/* ============================================================
   DECORATIVE CORNERS — MIRROR
============================================================ */

html[dir="rtl"] .daw-paint-yellow {
    left: auto;
    right: -85px;
}

html[dir="rtl"] .daw-paint-purple {
    right: auto;
    left: -80px;
}

html[dir="rtl"] .daw-paint-aqua {
    left: auto;
    right: -95px;
}

html[dir="rtl"] .daw-paint-orange {
    right: auto;
    left: -95px;
}


/* ============================================================
   DOODLES — MIRROR
============================================================ */

html[dir="rtl"] .daw-star-one {
    left: auto;
    right: 5%;
}

html[dir="rtl"] .daw-star-two {
    right: auto;
    left: 5%;
}

html[dir="rtl"] .daw-heart {
    right: auto;
    left: 9%;
}

html[dir="rtl"] .daw-spark {
    left: auto;
    right: 3%;
}


/* ============================================================
   IMAGE ARTWORK
============================================================ */

html[dir="rtl"] .daw-image-frame,
html[dir="rtl"] .daw-brush-bg {
    transform: scaleX(-1);
}


/*
   Keep the actual photographs/images visually normal.
   Only the surrounding composition is mirrored.
*/

html[dir="rtl"] .daw-image-frame img {
    transform: scaleX(-1);
}


/* ============================================================
   HOVER IMAGE
============================================================ */

html[dir="rtl"]
.daw-art-item:hover
.daw-image-frame {

    transform:
        scaleX(-1)
        translateY(-7px);
}

html[dir="rtl"]
.daw-art-item:hover
.daw-image-frame img {

    transform:
        scaleX(-1)
        scale(1.045);
}


/* ============================================================
   NUMBER BADGE
============================================================ */

html[dir="rtl"] .daw-art-number {
    left: 50%;
    right: auto;
}


/* ============================================================
   ART SIDE MARK
============================================================ */

html[dir="rtl"] .daw-side-mark {
    transform: scaleX(-1);
}


/* ============================================================
   BOTTOM NOTE
============================================================ */

html[dir="rtl"] .daw-bottom-note {
    direction: rtl;
}


/* ============================================================
   MOBILE RTL
============================================================ */

@media (max-width: 767px) {

    html[dir="rtl"] .daw-paint-yellow {
        right: -95px;
        left: auto;
    }

    html[dir="rtl"] .daw-paint-purple {
        left: -95px;
        right: auto;
    }

    html[dir="rtl"] .daw-paint-aqua {
        right: -90px;
        left: auto;
    }

    html[dir="rtl"] .daw-paint-orange {
        left: -90px;
        right: auto;
    }

    html[dir="rtl"] .daw-star-one {
        right: 5%;
        left: auto;
    }

    html[dir="rtl"] .daw-star-two {
        left: 4%;
        right: auto;
    }
}


/* ============================================================
   MOBILE-S RTL
============================================================ */

@media (max-width: 374px) {

    html[dir="rtl"] .daw-star-one,
    html[dir="rtl"] .daw-star-two {
        display: none;
    }
}

/* MIX N MUSE - SECTION 3 RTL (logical properties mirror the layout; these flip directional art) */
html[dir=rtl]{direction:rtl}html[dir=rtl] .wp-btn::before{transform-origin:right center}html[dir=rtl] .wp-btn svg,html[dir=rtl] .wp-hl svg{transform:scaleX(-1)}html[dir=rtl] .wp-btn:hover svg{transform:scaleX(-1) translateX(5px)}html[dir=rtl] .wp-tag{letter-spacing:0}
html[dir=rtl] .wp-l .wp-arrow{transform:scaleX(-1)}
html[dir=rtl] .wp-r .wp-arrow{transform:none}

/* MIX N MUSE - GALLERY + CTA RTL (reveal side, roller, arrows, underline, fill origin) */
html[dir=rtl]{direction:rtl}html[dir=rtl] .tc-fill{clip-path:inset(0 0 0 calc((1 - var(--p))*100%) round 32px)}html[dir=rtl] .tc-roller{transform:scaleX(-1)}html[dir=rtl] .tc-btn::before{transform-origin:right center}html[dir=rtl] .tc-btn svg,html[dir=rtl] .gw-hl svg,html[dir=rtl] .gw-hint svg{transform:scaleX(-1)}html[dir=rtl] .gw-tag,html[dir=rtl] .tc-tag{letter-spacing:0}

/* MIX N MUSE - JOURNEY RTL (grid/flex mirror via direction; the route is rebuilt from the DOM) */
html[dir=rtl] .jr-hl svg{transform:scaleX(-1)}html[dir=rtl] .jr-tag{letter-spacing:0}

/* ===== MIX LAB · paste at the END of rtl.css (replaces the earlier Mix Lab block) ===== */
/* Columns, text and the grid mirror automatically. Only these need help. */

html[dir="rtl"] .ml-tag { letter-spacing: 0; }

/* Tubes tilt toward the bowl the other way */
html[dir="rtl"] .ml-tube:hover { transform: rotate(6deg) translateY(2px); }
html[dir="rtl"] .ml-tube:nth-child(even):hover { transform: rotate(-6deg) translateY(2px); }

/* Bowl and drops stay left-to-right so the painting looks right */
html[dir="rtl"] .ml-bowl { direction: ltr; }

/* MIX N MUSE - FAQ RTL (logical properties mirror the layout; these flip directional art) */
html[dir=rtl]{direction:rtl}html[dir=rtl] .pc-btn::before{transform-origin:right center}html[dir=rtl] .pc-btn svg,html[dir=rtl] .pc-hl svg{transform:scaleX(-1)}html[dir=rtl] .pc-btn:hover svg{transform:scaleX(-1) translateX(5px)}html[dir=rtl] .pc-tag{letter-spacing:0}html[dir=rtl] .pc-arr svg{transform:scaleX(-1)}html[dir=rtl] .pc-plane{animation-name:pcFlyR;transform:scaleX(-1)}

/* ============================================================
   MIX N MUSE — FINAL CTA RTL
============================================================ */

html[dir="rtl"] .mm-final-cta {
    direction: rtl;
}


/* ============================================================
   CTA BUTTON ARROWS
============================================================ */

html[dir="rtl"] .mm-cta-button svg {
    transform:
        scaleX(-1);
}


html[dir="rtl"] .mm-cta-button:hover svg {
    transform:
        scaleX(-1)
        translateX(4px);
}


/* ============================================================
   RTL PAINT REVEAL
============================================================ */

html[dir="rtl"] .mm-cta-button::before {

    transform:
        translateX(105%)
        skewX(12deg);

    transform-origin:
        right center;
}


html[dir="rtl"] .mm-cta-button:hover::before {

    transform:
        translateX(0)
        skewX(12deg);
}


/* ============================================================
   RTL TITLE PAINT
============================================================ */

html[dir="rtl"] .mm-title-paint::after {

    transform-origin:
        right center;
}


/* ============================================================
   RTL DECORATIVE ART
============================================================ */

html[dir="rtl"] .mm-art-left {
    left: auto;
    right: 7%;
}


html[dir="rtl"] .mm-art-right {
    right: auto;
    left: 6%;
}


/* ============================================================
   TABLET
============================================================ */

@media (min-width: 768px) {

    html[dir="rtl"] .mm-art-left {
        right: 6%;
        left: auto;
    }

    html[dir="rtl"] .mm-art-right {
        left: 6%;
        right: auto;
    }
}


/* ============================================================
   LAPTOP
============================================================ */

@media (min-width: 1024px) {

    html[dir="rtl"] .mm-art-left {
        right: 7%;
        left: auto;
    }

    html[dir="rtl"] .mm-art-right {
        left: 7%;
        right: auto;
    }
}


/* ============================================================
   LAPTOP-L
============================================================ */

@media (min-width: 1280px) {

    html[dir="rtl"] .mm-art-left {
        right: 9%;
        left: auto;
    }

    html[dir="rtl"] .mm-art-right {
        left: 9%;
        right: auto;
    }

    html[dir="rtl"] .mm-star-one {
        left: auto;
        right: 27%;
    }

    html[dir="rtl"] .mm-star-two {
        right: auto;
        left: 26%;
    }
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767px) {

    html[dir="rtl"] .mm-art-left {
        right: -12px;
        left: auto;
    }

    html[dir="rtl"] .mm-art-right {
        left: -13px;
        right: auto;
    }
}


/* ============================================================
   MOBILE-M
============================================================ */

@media (max-width: 424px) {

    html[dir="rtl"] .mm-art-left {
        right: -35px;
        left: auto;
    }

    html[dir="rtl"] .mm-art-right {
        left: -36px;
        right: auto;
    }
}


/* ============================================================
   MOBILE-S
============================================================ */

@media (max-width: 374px) {

    html[dir="rtl"] .mm-art-left {
        right: -48px;
        left: auto;
    }

    html[dir="rtl"] .mm-art-right {
        left: -48px;
        right: auto;
    }
}

/* ============================================================
   MIX N MUSE — FOOTER RTL
============================================================ */

html[dir="rtl"] .mm-footer {

    direction:
        rtl;

    text-align:
        start;
}


/* ============================================================
   BRAND
============================================================ */

html[dir="rtl"] .mm-footer-brand {

    text-align:
        right;
}


html[dir="rtl"] .mm-footer-brand-link {

    flex-direction:
        row-reverse;
}


html[dir="rtl"] .mm-footer-brand-link svg {

    transform:
        scaleX(-1);
}


html[dir="rtl"] .mm-footer-brand-link:hover svg {

    transform:
        scaleX(-1)
        translateX(3px);
}


/* ============================================================
   QUICK LINK ARROWS
============================================================ */

html[dir="rtl"] .mm-footer-links a {

    flex-direction:
        row-reverse;
}


html[dir="rtl"] .mm-footer-links a svg {

    transform:
        scaleX(-1);
}


html[dir="rtl"] .mm-footer-links a:hover {

    padding-inline-start:
        0;

    padding-inline-end:
        5px;
}


html[dir="rtl"] .mm-footer-links a:hover svg {

    transform:
        scaleX(-1)
        translateX(3px);
}


/* ============================================================
   CONTACT
============================================================ */

html[dir="rtl"] .mm-footer-contact {

    direction:
        rtl;
}


/* ============================================================
   NEWSLETTER
============================================================ */

html[dir="rtl"] .mm-footer-input-wrap {

    direction:
        rtl;
}


html[dir="rtl"] .mm-footer-input-wrap input {

    text-align:
        right;
}


html[dir="rtl"] .mm-footer-subscribe {

    flex-direction:
        row-reverse;
}


html[dir="rtl"] .mm-footer-subscribe svg {

    transform:
        scaleX(-1);
}


html[dir="rtl"] .mm-footer-subscribe:hover svg {

    transform:
        scaleX(-1)
        translateX(3px);
}


/* ============================================================
   BOTTOM BAR
============================================================ */

html[dir="rtl"] .mm-footer-made {

    text-align:
        start;
}


/* ============================================================
   TABLET
============================================================ */

@media (min-width: 768px) {

    html[dir="rtl"] .mm-footer-brand {

        text-align:
            right;
    }
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767px) {

    html[dir="rtl"] .mm-footer-brand {

        text-align:
            center;
    }


    html[dir="rtl"] .mm-footer-brand-link {

        justify-content:
            center;
    }


    html[dir="rtl"] .mm-footer-heading-row {

        justify-content:
            flex-start;
    }


    html[dir="rtl"] .mm-footer-bottom {

        text-align:
            center;
    }


    html[dir="rtl"] .mm-footer-copyright,
    html[dir="rtl"] .mm-footer-made {

        text-align:
            center;
    }


    html[dir="rtl"] .mm-footer-input-wrap input {

        text-align:
            right;
    }
}


/* ============================================================
   RTL LOGO
   The SVG itself must NOT mirror.
============================================================ */

html[dir="rtl"] .mm-footer-logo-svg {

    direction:
        ltr;

    transform:
        none;
}

/* MIX N MUSE – RTL (classes page). Layout mirrors via logical properties + grid order; only arrows/underlines/letter-spacing need help. */
html[dir=rtl] .cl-btn::before{transform-origin:right center}
html[dir=rtl] .cl-btn svg{transform:scaleX(-1)}
html[dir=rtl] .cl-btn:hover svg{transform:scaleX(-1) translateX(5px)}
html[dir=rtl] .cl-hl svg{transform:scaleX(-1)}
html[dir=rtl] .cl-tag,html[dir=rtl] .cl-kicker,html[dir=rtl] .cl-facts dt{letter-spacing:0}
html[dir=rtl] .cl-crumb{direction:rtl}
html[dir=rtl] .cl-tile:hover{transform:translateY(-6px) rotate(.6deg)}

/* HAPPY MAIL: RTL */
html[dir="rtl"] .hm-btn::before{transform-origin:right center}
html[dir="rtl"] .hm-btn svg,html[dir="rtl"] .hm-hl svg{transform:scaleX(-1)}
html[dir="rtl"] .hm-btn:hover svg{transform:scaleX(-1) translateX(5px)}
html[dir="rtl"] .hm-tag{letter-spacing:0}
html[dir="rtl"] .hm-prog i{transform-origin:right}
html[dir="rtl"] .hm-q p,html[dir="rtl"] .hm-by,html[dir="rtl"] .hm-dear{direction:ltr;unicode-bidi:isolate;text-align:right}

/* BEYOND THE EASEL: RTL (layout mirrors via logical properties; only arrows, underline and letter-spacing need help) */
html[dir="rtl"] .bx-hl svg{transform:scaleX(-1)}
html[dir="rtl"] .bx-g .bx-arrow{transform:scaleX(-1)}
html[dir="rtl"] .bx-g:hover .bx-arrow,html[dir="rtl"] .bx-g:focus-visible .bx-arrow{transform:scaleX(-1) translateX(8px)}
html[dir="rtl"] .bx-tag,html[dir="rtl"] .bx-k{letter-spacing:0}
html[dir="rtl"] .bx-ring{transform:rotate(-90deg) scaleY(-1)}
html[dir="rtl"] .bx-big{direction:ltr;unicode-bidi:isolate;justify-self:start}
html[dir="rtl"] .bx-mq,html[dir="rtl"] .bx-track{direction:ltr}

/* INSTRUCTORS BANNER: RTL (layout mirrors via grid + logical properties; only arrows, underline and letter-spacing need help) */
html[dir="rtl"] .ib-btn::before{transform-origin:right center}
html[dir="rtl"] .ib-btn svg,html[dir="rtl"] .ib-hl svg{transform:scaleX(-1)}
html[dir="rtl"] .ib-btn:hover svg{transform:scaleX(-1) translateX(5px)}
html[dir="rtl"] .ib-crumb i{display:inline-block;transform:scaleX(-1)}
html[dir="rtl"] .ib-drips{transform:scaleX(-1)}

/* ============================================================
   MIX N MUSE — INSTRUCTORS
   SECTION 05 + 07 RTL ONLY
   ============================================================ */


/* ============================================================
   SECTION 05
   ============================================================ */

html[dir="rtl"] .im5-heading,
html[dir="rtl"] .im5-bottom-message,
html[dir="rtl"] .im7-content {
    text-align: center;
}


/* Keep visual cards readable while content follows RTL */

html[dir="rtl"] .im5-principle {
    text-align: right;
}


/* Number line */

html[dir="rtl"] .im5-number {
    flex-direction: row-reverse;
}


/* Directional decorative line */

html[dir="rtl"] .im5-paint-line span {
    animation-name: im5PaintTravelRTL;
}


/* ============================================================
   SECTION 07
   ============================================================ */

html[dir="rtl"] .im7-content {
    direction: rtl;
}


/* Reverse button arrow */

html[dir="rtl"] .im7-btn svg {
    transform: scaleX(-1);
}

html[dir="rtl"] .im7-btn:hover svg {
    transform: scaleX(-1) translateX(4px);
}


/* Reverse brush underline origin */

html[dir="rtl"] .im7-content h2 span::after {
    transform-origin: right;
}


/* Top label */

html[dir="rtl"] .im7-top-row {
    direction: rtl;
}


/* ============================================================
   RTL PAINT ANIMATION
   ============================================================ */

@keyframes im5PaintTravelRTL {

    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(-100%);
    }
}

/* MOSAIC GALLERY: RTL */
html[dir="rtl"] .mg-btn::before{transform-origin:right center}
html[dir="rtl"] .mg-btn svg,html[dir="rtl"] .mg-hl svg,html[dir="rtl"] .mg-lb-p svg,html[dir="rtl"] .mg-lb-n svg{transform:scaleX(-1)}
html[dir="rtl"] .mg-btn:hover svg{transform:scaleX(-1) translateX(5px)}
html[dir="rtl"] .mg-top,html[dir="rtl"] .mg-top span{letter-spacing:0!important}

/* =========================================================
   MIX N MUSE — STEP INTO THEIR ART WORLD
   RTL SUPPORT
   SECTION-SCOPED
========================================================= */

html[dir="rtl"] .cz-zoom {
    direction: rtl;
}


/* ---------------------------------------------------------
   Intro
--------------------------------------------------------- */

html[dir="rtl"] .cz-zoom-intro {
    direction: rtl;
}


/* ---------------------------------------------------------
   Scroll arrow
--------------------------------------------------------- */

html[dir="rtl"] .cz-zoom-scroll-note svg {
    transform: scaleX(-1);
}


/* ---------------------------------------------------------
   Caption
--------------------------------------------------------- */

html[dir="rtl"] .cz-zoom-caption {
    direction: rtl;
}


/* ---------------------------------------------------------
   Heading / text
--------------------------------------------------------- */

html[dir="rtl"] .cz-zoom-message-inner {
    direction: rtl;

    text-align: center;
}


/* ---------------------------------------------------------
   Buttons
--------------------------------------------------------- */

html[dir="rtl"] .cz-zoom-btn {
    direction: rtl;
}

html[dir="rtl"] .cz-zoom-btn svg {
    transform: scaleX(-1);
}

html[dir="rtl"] .cz-zoom-btn:hover svg {
    transform:
        scaleX(-1)
        translateX(5px);
}


/* ---------------------------------------------------------
   Progress indicator
--------------------------------------------------------- */

html[dir="rtl"] .cz-zoom-progress {
    inset-inline-start: 20px;
    inset-inline-end: auto;
}

html[dir="rtl"] .cz-zoom-progress-label {
    inset-inline-start: 13px;
    inset-inline-end: auto;
}


/* ---------------------------------------------------------
   Tablet
--------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1023px) {

    html[dir="rtl"] .cz-zoom-progress {
        inset-inline-start: 24px;
        inset-inline-end: auto;
    }

}


/* ---------------------------------------------------------
   Laptop
--------------------------------------------------------- */

@media (min-width: 1024px) and (max-width: 1279px) {

    html[dir="rtl"] .cz-zoom-progress {
        inset-inline-start: 32px;
        inset-inline-end: auto;
    }

}


/* ---------------------------------------------------------
   Laptop-L
--------------------------------------------------------- */

@media (min-width: 1280px) and (max-width: 1439px) {

    html[dir="rtl"] .cz-zoom-progress {
        inset-inline-start: 40px;
        inset-inline-end: auto;
    }

}


/* ---------------------------------------------------------
   Desktop
--------------------------------------------------------- */

@media (min-width: 1440px) {

    html[dir="rtl"] .cz-zoom-progress {
        inset-inline-start: clamp(40px, 3.5vw, 52px);
        inset-inline-end: auto;
    }

}


/* ---------------------------------------------------------
   Mobile
--------------------------------------------------------- */

@media (max-width: 767px) {

    html[dir="rtl"] .cz-zoom-progress,
    html[dir="rtl"] .cz-zoom-progress-label {
        display: none;
    }

}


/* ---------------------------------------------------------
   Reduced motion
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    html[dir="rtl"] .cz-zoom-btn:hover svg {
        transform: scaleX(-1);
    }

}

/* =========================================================
   MIX N MUSE
   RTL — SECTION ONLY
========================================================= */

html[dir="rtl"] .mnn-art-journey {
    direction: rtl;
}


/* INTRO */

html[dir="rtl"] .mnn-art-journey .mnn-intro {
    text-align: center;
}


/* STAGE */

html[dir="rtl"] .mnn-art-journey .mnn-stage-top,
html[dir="rtl"] .mnn-art-journey .mnn-stage-bottom {
    direction: rtl;
}

html[dir="rtl"] .mnn-art-journey .mnn-stage-progress {
    flex-direction: row-reverse;
}


/* CONTROLS */

html[dir="rtl"] .mnn-art-journey .mnn-controls {
    direction: rtl;
}


/* MESSAGE */

html[dir="rtl"] .mnn-art-journey .mnn-message,
html[dir="rtl"] .mnn-art-journey .mnn-final-message {
    text-align: center;
}


/* VALUES */

html[dir="rtl"] .mnn-art-journey .mnn-values,
html[dir="rtl"] .mnn-art-journey .mnn-final-actions {
    direction: rtl;
}


/* BOTTOM NOTE */

html[dir="rtl"] .mnn-art-journey .mnn-bottom-note {
    direction: rtl;
}


/* MOBILE */

@media (max-width: 767px) {

    html[dir="rtl"] .mnn-art-journey .mnn-stage-top {
        flex-direction: row-reverse;
    }

    html[dir="rtl"] .mnn-art-journey .mnn-controls {
        direction: rtl;
    }

}

/* ===== MEET THE MAKERS · paste at the END of rtl.css ===== */
/* The heading row, panel and chips mirror automatically.
   The 3D stage stays left-to-right on purpose so the easels rotate correctly. */

html[dir="rtl"] .ez-tag {
    letter-spacing: 0;
}

/* Arrows point the way people read in RTL */
html[dir="rtl"] .ez-arrow {
    transform: scaleX(-1);
}

html[dir="rtl"] .ez-arrow:hover {
    transform: scaleX(-1) scale(1.1);
}

/* Keep the Latin-style counter readable */
html[dir="rtl"] .ez-count {
    direction: ltr;
}

/* Teacher thumbnails follow the same left-to-right order as the easels */
html[dir="rtl"] .ez-thumbs {
    direction: ltr;
}

/* ============================================================
   LITTLE ARTIST'S TOOLBOX
   RTL
============================================================ */

html[dir="rtl"] .lat-step.is-active {

    transform:
        translateX(-4px);
}


html[dir="rtl"] .lat-progress-fill {

    transform-origin:
        right center;
}


html[dir="rtl"] .lat-button svg {

    transform:
        scaleX(-1);
}


html[dir="rtl"] .lat-button:hover svg {

    transform:
        scaleX(-1)
        translateX(4px);
}


html[dir="rtl"] .lat-kicker,
html[dir="rtl"] .lat-visual-top,
html[dir="rtl"] .lat-story-top,
html[dir="rtl"] .lat-progress-labels {

    letter-spacing: 0;
}


@media (max-width: 767px) {

    html[dir="rtl"] .lat-step.is-active {

        transform: none;
    }

}

/* ============================================================
   HOME 2 — VERMILLION CTA RTL
   FULLY SCOPED: .h2cta ONLY
============================================================ */


/* Reverse CTA group direction */

html[dir="rtl"] .h2cta__actions {

    direction: rtl;
}


/* Reverse arrows */

html[dir="rtl"] .h2cta__btn svg {

    transform:
        scaleX(-1);
}


html[dir="rtl"] .h2cta__btn:hover svg,
html[dir="rtl"] .h2cta__btn:focus-visible svg {

    transform:
        scaleX(-1)
        translateX(4px);
}


/* Bottom artistic line */

html[dir="rtl"] .h2cta__note {

    direction: rtl;
}

/* MEET THE ARTISTS: RTL (the wall mirrors via flex + logical properties; only slide direction, hover nudges and letter-spacing need help) */
html[dir="rtl"] .sw{--dx:26px}
html[dir="rtl"] .sw-opt:hover{transform:translateX(-6px)}
html[dir="rtl"] .sw-hl svg{transform:scaleX(-1)}
html[dir="rtl"] .sw-tag,html[dir="rtl"] .sw-gtag{letter-spacing:0}
html[dir="rtl"] .sw-hud{direction:rtl}
html[dir="rtl"] .sw-arena{direction:ltr}

/* ============================================================
   MIX N MUSE — ABOUT HERO
   RTL
   FULLY SCOPED: abhero-
============================================================ */


/* ============================================================
   DESKTOP / TABLET MIRROR
============================================================ */

html[dir="rtl"] .abhero-wrap {

    direction:
        rtl;
}


/*
   In RTL the text moves to the right
   and the artwork moves to the left.
*/

html[dir="rtl"] .abhero-copy {

    text-align:
        right;
}


html[dir="rtl"] .abhero-actions {

    justify-content:
        flex-start;
}


/* ============================================================
   HEADING UNDERLINE
============================================================ */

html[dir="rtl"] .abhero-highlight svg {

    transform:
        scaleX(-1);
}


/* ============================================================
   BUTTON ARROWS
============================================================ */

html[dir="rtl"] .abhero-btn::before {

    transform-origin:
        right center;
}


html[dir="rtl"] .abhero-btn svg {

    transform:
        scaleX(-1);
}


html[dir="rtl"] .abhero-btn:hover svg {

    transform:
        scaleX(-1)
        translateX(5px);
}


/* ============================================================
   META
============================================================ */

html[dir="rtl"] .abhero-meta {

    right:
        auto;

    left:
        1%;

    direction:
        rtl;
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767px) {

    html[dir="rtl"] .abhero-wrap {

        direction:
            rtl;
    }


    html[dir="rtl"] .abhero-copy {

        text-align:
            center;
    }


    html[dir="rtl"] .abhero-actions {

        justify-content:
            center;
    }


    /*
       Keep the five image slices visually identical.
       We do not reverse their internal image order,
       otherwise the continuous photograph would break.
    */

    html[dir="rtl"] .abhero-slices {

        direction:
            ltr;
    }
}

/* ============================================================
   MIX N MUSE — ABOUT
   MISSION & VISION + HISTORY
   RTL ONLY
   FULLY SCOPED
============================================================ */


/* ============================================================
   MISSION & VISION
============================================================ */

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


html[dir="rtl"] .abmv-head {
    text-align: center;
}


html[dir="rtl"] .abmv-card {
    text-align: right;
}


html[dir="rtl"] .abmv-mini-label {
    text-align: start;
}


html[dir="rtl"] .abmv-values li {
    text-align: right;
}


html[dir="rtl"] .abmv-path-items {
    direction: rtl;
}


/*
   The orbit itself is circular, so it remains unchanged.
   Only the small decorative travel direction is mirrored.
*/

html[dir="rtl"] .abmv-core-dot-a {
    animation-direction: reverse;
}


html[dir="rtl"] .abmv-core-dot-b {
    animation-direction: reverse;
}


html[dir="rtl"] .abmv-core-dot-c {
    animation-direction: reverse;
}


/* ============================================================
   HISTORY
============================================================ */

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


html[dir="rtl"] .abh-head {
    text-align: right;
}


html[dir="rtl"] .abh-intro {
    text-align: right;
}


html[dir="rtl"] .abh-event-copy {
    text-align: right;
}


html[dir="rtl"] .abh-note {
    direction: rtl;
}


/* ============================================================
   MOBILE RTL
============================================================ */

@media (max-width: 767px) {

    html[dir="rtl"] .abmv-head,
    html[dir="rtl"] .abh-head {
        text-align: center;
    }


    html[dir="rtl"] .abh-intro {
        text-align: center;
    }


}


/* CONTACT BANNER: RTL */
html[dir="rtl"] .cb-btn::before{transform-origin:right center}
html[dir="rtl"] .cb-btn svg,html[dir="rtl"] .cb-hl svg{transform:scaleX(-1)}
html[dir="rtl"] .cb-btn:hover svg{transform:scaleX(-1) translateX(5px)}
html[dir="rtl"] .cb-crumb i{display:inline-block;transform:scaleX(-1)}
html[dir="rtl"] .cb-track{animation-direction:reverse}
html[dir="rtl"] .cb-hi,html[dir="rtl"] .cb-chips li{letter-spacing:0}

/* ============================================================
   MIX N MUSE — CONTACT SECTIONS
   RTL ONLY
   SECTION SCOPED
============================================================ */


/* ============================================================
   CONTACT INFORMATION
============================================================ */

html[dir="rtl"] .ct-contact-arrow {
    transform: scaleX(-1);
}

html[dir="rtl"] .ct-contact-item:hover .ct-contact-arrow {
    transform:
        scaleX(-1)
        translateX(5px);
}

html[dir="rtl"] .ct-info-footer {
    direction: rtl;
}


/* ============================================================
   MESSAGE FORM
============================================================ */

html[dir="rtl"] .ct-message-point {
    direction: rtl;
}

html[dir="rtl"] .ct-submit::before {
    transform-origin: right center;
}

html[dir="rtl"] .ct-submit svg,
html[dir="rtl"] .ct-map-link svg,
html[dir="rtl"] .ct-map-cta svg {
    transform: scaleX(-1);
}

html[dir="rtl"] .ct-submit:hover svg,
html[dir="rtl"] .ct-map-link:hover svg,
html[dir="rtl"] .ct-map-cta:hover svg {
    transform:
        scaleX(-1)
        translateX(5px);
}

html[dir="rtl"] .ct-form-wrap::before {
    transform-origin: right center;
}


/* ============================================================
   MAP
============================================================ */

html[dir="rtl"] .ct-map-link,
html[dir="rtl"] .ct-map-cta {
    direction: rtl;
}

html[dir="rtl"] .ct-map-label {
    left: auto;
    right: 22px;
}


/* ============================================================
   MOBILE RTL
============================================================ */

@media (max-width: 767px) {

    html[dir="rtl"] .ct-info-heading,
    html[dir="rtl"] .ct-map-heading {
        text-align: center;
    }

    html[dir="rtl"] .ct-info-intro,
    html[dir="rtl"] .ct-map-heading > p {
        justify-self: center;
        text-align: center;
    }

    html[dir="rtl"] .ct-contact-item {
        text-align: right;
    }

    html[dir="rtl"] .ct-map-label {
        right: 14px;
    }

}

/* ===== INSIDE THE STUDIO · paste at the END of rtl.css ===== */
/* The grid, tiles, captions and buttons mirror automatically (logical properties).
   Only these need help. */

html[dir="rtl"] .im6-tag {
    letter-spacing: 0;
}

/* video progress bar fills from the right */
html[dir="rtl"] .im6-bar i {
    transform-origin: right;
}

/* link underline grows from the right */
html[dir="rtl"] .im6-link {
    background-position: 100% 100%;
}

/* video tilt follows the mirrored side */
html[dir="rtl"] .im6-vin {
    transform: perspective(900px) rotateY(calc(var(--ry, 0deg) * -1)) rotateX(var(--rx, 0deg));
}

/* =========================================================
   CONTACT CTA — RTL
   ========================================================= */

html[dir="rtl"] :where(.cncta-section) {
    direction: rtl;
}


html[dir="rtl"] :where(.cncta-section) .cncta-title,
html[dir="rtl"] :where(.cncta-section) .cncta-description,
html[dir="rtl"] :where(.cncta-section) .cncta-note {
    text-align: center;
}


html[dir="rtl"] :where(.cncta-section) .cncta-btn {
    flex-direction: row-reverse;
}


html[dir="rtl"] :where(.cncta-section) .cncta-arrow {
    transform: scaleX(-1);
}


html[dir="rtl"] :where(.cncta-section) .cncta-btn:hover .cncta-arrow {
    transform:
        scaleX(-1)
        translateX(5px);
}


html[dir="rtl"] :where(.cncta-section) .cncta-title span::after {
    left: -2%;
    right: 2%;

    transform-origin: right center;
}


html[dir="rtl"] :where(.cncta-section) .cncta-brush {
    transform:
        translateX(-50%)
        scaleX(-1)
        rotate(-2deg);
}
/* MIX & PAINT ARCADE: RTL (layout mirrors via grid and logical properties; only underline, letter-spacing and the picture direction need help) */
html[dir="rtl"] .mp-hl svg{transform:scaleX(-1)}
html[dir="rtl"] .mp-tag{letter-spacing:0}
html[dir="rtl"] .mp-bar i{transform-origin:right}
html[dir="rtl"] .mp-pic{direction:ltr}

/* =========================================================
   HOME 2 CTA — RTL
   Scoped only to .h2cta
========================================================= */

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

html[dir="rtl"] .h2cta-title span::after {
    left: auto;
    right: 2%;

    transform-origin: right center;

    animation-name: h2cta-underline-rtl;
}

@keyframes h2cta-underline-rtl {
    from {
        transform: scaleX(0) rotate(1deg);
    }

    to {
        transform: scaleX(1) rotate(1deg);
    }
}

html[dir="rtl"] .h2cta-button:hover .h2cta-arrow {
    transform: translateX(-4px);
}

html[dir="rtl"] .h2cta-brush-left {
    left: auto;
    right: -24px;

    transform: rotate(13deg);
}

html[dir="rtl"] .h2cta-brush-right {
    right: auto;
    left: -30px;

    transform: rotate(-15deg);
}

html[dir="rtl"] .h2cta-particle-1 {
    left: auto;
    right: 9%;
}

html[dir="rtl"] .h2cta-particle-3 {
    left: auto;
    right: 7%;
}

html[dir="rtl"] .h2cta-particle-5 {
    left: auto;
    right: 29%;
}

html[dir="rtl"] .h2cta-particle-7 {
    left: auto;
    right: 26%;
}

html[dir="rtl"] .h2cta-particle-2 {
    right: auto;
    left: 12%;
}

html[dir="rtl"] .h2cta-particle-4 {
    right: auto;
    left: 9%;
}

html[dir="rtl"] .h2cta-particle-6 {
    right: auto;
    left: 30%;
}

html[dir="rtl"] .h2cta-particle-8 {
    right: auto;
    left: 26%;
}

html[dir="rtl"] .h2cta-star-1 {
    left: auto;
    right: 17%;
}

html[dir="rtl"] .h2cta-star-2 {
    right: auto;
    left: 17%;
}

html[dir="rtl"] .h2cta-star-3 {
    left: auto;
    right: 18%;
}

/* =========================================================
   MIX N MUSE — ABOUT
   LITTLE PROOF + FAMILY VOICES
   RTL
   FULLY SCOPED
========================================================= */


/* =========================================================
   LITTLE PROOF
========================================================= */

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


html[dir="rtl"] .abimpact__stat {
    border-inline-end: 1px solid var(--border);
}


html[dir="rtl"] .abimpact__stat:last-child {
    border-inline-end: 0;
}


html[dir="rtl"] .abimpact__stroke {
    transform-origin: right center;
}


html[dir="rtl"] .abimpact__footer-art {
    justify-self: start;
}


html[dir="rtl"] .abimpact__paint {
    transform-origin: center;
}


/* =========================================================
   FAMILY VOICES
========================================================= */

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


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


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


html[dir="rtl"] .abvoices__voice::before {
    inset-inline-start: auto;
    inset-inline-end: 0;
}


html[dir="rtl"] .abvoices__portrait {
    transform: rotate(3deg);
}


html[dir="rtl"] .abvoices__voice:nth-child(even)
.abvoices__portrait {
    transform: rotate(-3deg);
}


html[dir="rtl"] .abvoices__voice:hover
.abvoices__portrait {
    transform: rotate(0) scale(1.06);
}


/*
   The marquee itself stays visually horizontal.
   We reverse the track animation rather than changing
   the content order, keeping the infinite loop seamless.
*/

html[dir="rtl"] .abvoices__track--one {
    animation-name: abvoicesMoveRight;
}


html[dir="rtl"] .abvoices__track--two {
    animation-name: abvoicesMoveLeft;
}


html[dir="rtl"] .abvoices__marquee::before {
    inset-inline-start: auto;
    inset-inline-end: 0;

    background:
        linear-gradient(
            to left,
            var(--surface),
            transparent
        );
}


html[dir="rtl"] .abvoices__marquee::after {
    inset-inline-end: auto;
    inset-inline-start: 0;

    background:
        linear-gradient(
            to right,
            var(--surface),
            transparent
        );
}


/* =========================================================
   MOBILE RTL
========================================================= */

@media (max-width: 767px) {

    html[dir="rtl"] .abimpact__stat:nth-child(2n) {
        border-inline-end: 0;
    }


    html[dir="rtl"] .abimpact__stat:nth-child(2n + 1) {
        border-inline-end: 1px solid var(--border);
    }


    html[dir="rtl"] .abimpact__footer-art {
        justify-self: start;
    }

}

/* TRIAL BOOKING FORM: RTL */
html[dir="rtl"] .tf .au-field input[type="email"],html[dir="rtl"] .tf .au-field input[type="tel"],html[dir="rtl"] .tf .au-field input[type="date"]{direction:ltr;text-align:right}
html[dir="rtl"] .tf-hl svg,html[dir="rtl"] .tf .arr{transform:scaleX(-1)}
html[dir="rtl"] .tf-tag{letter-spacing:0}
html[dir="rtl"] .tf-recap dt{letter-spacing:0}
html[dir="rtl"] .tf-scene{direction:ltr}

/* ============================================================
   MIX N MUSE — COMING SOON RTL
   PAGE-SCOPED ONLY
   ============================================================ */

html[dir="rtl"] .cs-controls {
    right: auto;
    left:
        clamp(16px, 3.5vw, 48px);
}


html[dir="rtl"] .cs-content {
    direction: rtl;
}


html[dir="rtl"] .cs-copy {
    text-align: right;
}


html[dir="rtl"] .cs-eyebrow {
    margin-inline-start: 0;
    margin-inline-end: 0;
}


html[dir="rtl"] .cs-description {
    margin-inline-start: 0;
    margin-inline-end: 0;
}


html[dir="rtl"] .cs-mini-message {
    border-left: 0;
    border-right: 3px solid var(--aqua);
}


html[dir="rtl"] .cs-progress-fill {
    left: auto;
    right: 0;

    transform-origin: right center;
}


html[dir="rtl"] .cs-progress-dot {
    left: auto;
    right: 76%;

    transform:
        translate(50%, -50%);
}


html[dir="rtl"] .cs-art-label {
    right: auto;
    left: 4%;
}


html[dir="rtl"] .cs-label-line {
    order: 2;
}


html[dir="rtl"] .cs-art-area {
    direction: ltr;
}


html[dir="rtl"] .cs-home-button svg {
    transform: scaleX(-1);
}


html[dir="rtl"] .cs-home-button:hover svg {
    transform:
        scaleX(-1)
        translateX(4px);
}


html[dir="rtl"] .cs-brush-line {
    transform: scaleX(-1);
    transform-origin: center;
}


html[dir="rtl"] .cs-paint-back-a {
    right: auto;
    left: 5%;
}


html[dir="rtl"] .cs-paint-back-b {
    left: auto;
    right: 7%;
}


html[dir="rtl"] .cs-paint-back-c {
    right: auto;
    left: 18%;
}


@media (max-width: 1023px) {

    html[dir="rtl"] .cs-copy {
        text-align: center;
    }

    html[dir="rtl"] .cs-mini-message {
        border-right: 0;
        border-left: 3px solid var(--aqua);
        text-align: right;
    }

    html[dir="rtl"] .cs-art-label {
        left: 8%;
        right: auto;
    }
}


@media (max-width: 767px) {

    html[dir="rtl"] .cs-controls {
        left: 16px;
        right: auto;
    }

    html[dir="rtl"] .cs-art-label {
        left: 3%;
        right: auto;
    }
}

/* LIVING CANVAS HERO: RTL (layout mirrors via grid and logical properties; only the underline, arrow, letter-spacing and the brush need help) */
html[dir="rtl"] .lc-hl svg{transform:scaleX(-1)}
html[dir="rtl"] .lc-btn-p svg{transform:scaleX(-1)}
html[dir="rtl"] .lc-btn-p:hover svg{transform:scaleX(-1) translateX(5px)}
html[dir="rtl"] .lc-btn::before{transform-origin:right center}
html[dir="rtl"] .lc-tag{letter-spacing:0}
html[dir="rtl"] .lc-ring text{letter-spacing:0}
html[dir="rtl"] .lc-stage{direction:ltr}
html[dir="rtl"] .lc-cap,html[dir="rtl"] .lc-hint,html[dir="rtl"] .lc-chip{direction:rtl}

/* A DAY IN CLASS: RTL (grid mirrors by itself; the paint track keeps its own left-to-right drawing, labels, arrow and underline need help) */
html[dir="rtl"] .cd-hl svg{transform:scaleX(-1)}
html[dir="rtl"] .cd-tag,html[dir="rtl"] .cd-k{letter-spacing:0}
html[dir="rtl"] .cd-btn svg{transform:scaleX(-1)}
html[dir="rtl"] .cd-btn:hover svg{transform:scaleX(-1) translateX(5px)}
html[dir="rtl"] .cd-trackwrap{direction:ltr}
html[dir="rtl"] .cd-lb{direction:rtl}
html[dir="rtl"] .cd-card::before{border-radius:6px 0 0 6px}