﻿[dir="rtl"] body{text-align:start}
[dir="rtl"] .brand,[dir="rtl"] .nav-menu a{letter-spacing:0}
[dir="rtl"] .dd-toggle{text-align:start}
[dir="rtl"] .nav-actions{flex-direction:row}
[dir="rtl"] .footer-col h3,[dir="rtl"] .footer-col p{text-align:start}
[dir="rtl"] .field{text-align:start}
[dir="rtl"] .hero-img{border-radius:999px 999px var(--radius) var(--radius)}
@media (max-width:1100px){
  [dir="rtl"] .dd{padding:0 .5rem 0 0}
}
[dir="rtl"] .tj-track::after{transform-origin:right}
@media (max-width:640px){[dir="rtl"] .tj-track::after{transform-origin:top}}
[dir="rtl"] .cs-tab-arrow{transform:scaleX(-1)}
[dir="rtl"] .private-photo-after{transform:translateX(60%)}
[dir="rtl"] .private-tile.is-visible .private-photo-after{transform:translateX(0)}
/* =========================================================
   SKIN THEORY
   ABOUT BANNER â€” RTL
========================================================= */


/* =========================================================
   RTL BASE
========================================================= */

html[dir="rtl"] .about-banner {

  direction: rtl;

}


/* =========================================================
   CENTERED CONTENT
========================================================= */

html[dir="rtl"] .about-banner__content {

  text-align: center;

  direction: rtl;

}


/* =========================================================
   RTL FEATURES
========================================================= */

html[dir="rtl"]
.about-banner__feature
+ .about-banner__feature {

  border-inline-start:
    1px solid
    var(--about-white-line);

}


/* =========================================================
   RTL BUTTON
========================================================= */

html[dir="rtl"] .about-banner__button {

  direction: rtl;

}


/*
   The arrow should point in the
   correct RTL direction.
*/

html[dir="rtl"]
.about-banner__arrow {

  transform:
    scaleX(-1);

}


/* =========================================================
   RTL BUTTON HOVER
========================================================= */

@media (hover: hover) and (pointer: fine) {

  html[dir="rtl"]
  .about-banner__button:hover
  .about-banner__arrow {

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

  }

}


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

@media (max-width: 650px) {

  /*
    Third feature starts the
    second row, so its left/right
    separator is removed logically.
  */

  html[dir="rtl"]
  .about-banner__feature:nth-child(3) {

    border-inline-start: 0;

  }

}
/* =========================================================
   SKIN THEORY
   RTL
========================================================= */


/* =========================================================
   RTL SECTION
========================================================= */

html[dir="rtl"] .about-story {

    direction:
        rtl;

}


/* =========================================================
   RTL MAIN
========================================================= */

html[dir="rtl"] .about-story__main {

    direction:
        rtl;

}


/* =========================================================
   RTL HEADER
========================================================= */

html[dir="rtl"] .about-story__header {

    text-align:
        center;

}


/* =========================================================
   RTL VISUAL
========================================================= */

html[dir="rtl"] .story-visual__body {

    direction:
        rtl;

}


html[dir="rtl"] .story-visual__copy {

    text-align:
        start;

}


/* =========================================================
   RTL PROGRESS
========================================================= */

html[dir="rtl"] .story-progress__track {

    direction:
        rtl;

}


html[dir="rtl"] .story-progress__fill {

    transform-origin:
        right center;

}


/* =========================================================
   RTL LINK
========================================================= */

html[dir="rtl"] .about-story__link {

    direction:
        rtl;

}


html[dir="rtl"] .about-story__link span {

    transform:
        scaleX(-1);

}


@media (hover: hover) and (pointer: fine) {

    html[dir="rtl"]
    .about-story__link:hover span {

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

    }

}


/* =========================================================
   RTL STATISTICS
========================================================= */

html[dir="rtl"] .story-stat {

    text-align:
        center;

}[dir="rtl"] .ht-bar span{transform-origin:right}
[dir="rtl"] .di-row .di-pick{text-align:start}


/* ===== home-2 / section 5: trust bento RTL ===== */
html[dir="rtl"] .trust-bento__grid{direction:rtl}
html[dir="rtl"] .trust-bento__heading,
html[dir="rtl"] .trust-bento__quote,
html[dir="rtl"] .trust-bento__info,
html[dir="rtl"] .trust-bento__cta{text-align:right}
html[dir="rtl"] .trust-bento__cta{align-items:flex-start}
@media (max-width:640px){html[dir="rtl"] .trust-bento__cta .btn{width:100%}}


/* =========================================================
   TREATMENTS â€” SECTION 4 / RTL
========================================================= */
html[dir="rtl"] .treatment-story--quote{
  direction:rtl;
  text-align:start;
}
html[dir="rtl"] .treatment-story__quote{
  padding-left:0;
  padding-right:16px;
  border-left:0;
  border-right:2px solid var(--accent);
}
html[dir="rtl"] .treatment-story__footer{
  direction:rtl;
}
html[dir="rtl"] .treatment-story__caption{
  text-align:start;
}

/* doctors / section 2 â€” specialist spotlight */
[dir="rtl"] .dsp{--dsp-x:-28px}

/* doctors / section 3 â€” availability planner */
[dir="rtl"] .dap__eyebrow,[dir="rtl"] .dap__dow{letter-spacing:0}
[dir="rtl"] .dap__title{letter-spacing:0}

/* doctors / section 4 â€” care at every depth */
[dir="rtl"] .dpt__eyebrow,[dir="rtl"] .dpt__level,[dir="rtl"] .dpt__gl{letter-spacing:0}
[dir="rtl"] .dpt__title,[dir="rtl"] .dpt__name{letter-spacing:0}
[dir="rtl"] .dpt__doc svg{transform:scaleX(-1)}
[dir="rtl"] .dpt__doc:hover svg{transform:scaleX(-1) translateX(4px)}

/* =========================================================
   DOCTORS / SECTION 5 â€” INSIDE SKIN THEORY / RTL
========================================================= */
html[dir="rtl"] .ist__layout{direction:rtl}
html[dir="rtl"] .ist__copy{text-align:right}
html[dir="rtl"] .ist__head{direction:rtl}
html[dir="rtl"] .ist__scroll{direction:rtl}
html[dir="rtl"] .ist__progress-labels{direction:rtl}
html[dir="rtl"] .ist__number-window{direction:ltr}
html[dir="rtl"] .ist__chips{direction:rtl}
html[dir="rtl"] .ist__photo-frame{direction:ltr}
html[dir="rtl"] .ist__photo img,
html[dir="rtl"] .ist__inset img{direction:ltr}
@media (max-width:900px){
  html[dir="rtl"] .ist__layout{direction:rtl}
  html[dir="rtl"] .ist__copy-stage{text-align:right}
}

/* home-2 / section 1 â€” split banner */
[dir="rtl"] .hbn__title{letter-spacing:0}
[dir="rtl"] .hbn .btn svg,[dir="rtl"] .hbn__go svg,[dir="rtl"] .hbn__loc-go svg{transform:scaleX(-1)}
[dir="rtl"] .hbn__num{direction:ltr;unicode-bidi:isolate;text-align:start}

/* home-1 / section 7 â€” join the journey */
[dir="rtl"] .cmu{--cmu-x:28px}
[dir="rtl"] .cmu__title{letter-spacing:0}
[dir="rtl"] .cmu__pill::before{transform-origin:right center}
[dir="rtl"] .cmu__label{letter-spacing:0}
[dir="rtl"] .cmu .btn svg,[dir="rtl"] .cmu__link svg{transform:scaleX(-1)}

/* Home-1 / section 8: consultation pass RTL */
html[dir="rtl"] .consult-pass__stub{text-align:center}
html[dir="rtl"] .consult-pass__eyebrow,html[dir="rtl"] .consult-pass__title,html[dir="rtl"] .consult-pass__text{text-align:right}
html[dir="rtl"] .consult-pass__number,html[dir="rtl"] .consult-pass__label,html[dir="rtl"] .consult-pass__eyebrow{letter-spacing:0}


@media(max-width:720px){html[dir="rtl"] .consult-pass__stub{text-align:right}html[dir="rtl"] .consult-pass__perforation:before,html[dir="rtl"] .consult-pass__perforation:after{transform:translateY(-50%) scale(.55)}html[dir="rtl"] .js-anim .consult-pass.is-in .consult-pass__perforation:before,html[dir="rtl"] .js-anim .consult-pass.is-in .consult-pass__perforation:after{transform:translateY(-50%) scale(1)}}


html[dir="rtl"] .doctors-banner .about-banner__content{text-align:center;direction:rtl}
html[dir="rtl"] .doctors-banner .about-banner__container{justify-content:center}
@media(max-width:760px){html[dir="rtl"] .doctors-banner .about-banner__content{align-items:center;text-align:center}}

/* doctors section 6 - promise */
[dir="rtl"] .psm__eyebrow,[dir="rtl"] .psm__link,[dir="rtl"] .psm__title,[dir="rtl"] .psm__num,[dir="rtl"] .psm__list li{letter-spacing:0}
[dir="rtl"] .psm__rule,[dir="rtl"] .psm__marquee::before,[dir="rtl"] .psm__marquee::after,[dir="rtl"] .psm__link::after{transform-origin:right center}
[dir="rtl"] .psm__track{direction:ltr}
[dir="rtl"] .psm__link svg{transform:scaleX(-1)}
[dir="rtl"] .psm__link:hover svg,[dir="rtl"] .psm__link:focus-visible svg{transform:scaleX(-1) translateX(6px)}
@media (max-width:700px){[dir="rtl"] .psm__stat+.psm__stat::before{transform-origin:right center}}

/* treatments section 2 - expanding strips */
[dir="rtl"] .tstrip__eyebrow,[dir="rtl"] .tstrip__count,[dir="rtl"] .tstrip__num,[dir="rtl"] .tstrip__link,[dir="rtl"] .tstrip__heading,[dir="rtl"] .tstrip__title{letter-spacing:0}
[dir="rtl"] .tstrip__bar,[dir="rtl"] .tstrip__link::after{transform-origin:right center}
[dir="rtl"] .tstrip__link svg{transform:scaleX(-1)}
[dir="rtl"] .tstrip__link:hover svg,[dir="rtl"] .tstrip__link:focus-visible svg{transform:scaleX(-1) translateX(6px)}

/* contact section 2 (Open Index) */
[dir="rtl"] .cx2{--cx-d:-1;--cx-origin:right;--cx-ang:-90deg}
[dir="rtl"] .cx2__eyebrow,[dir="rtl"] .cx2__lab,[dir="rtl"] .cx2__open,[dir="rtl"] .cx2__send{letter-spacing:0}
[dir="rtl"] .cx2__ctl input[type="tel"]{text-align:right}


/* Treatments closing CTA — RTL support */
[dir="rtl"] .treat-cta__copy{text-align:right}
[dir="rtl"] .treat-cta__title{align-items:flex-start;letter-spacing:0}
[dir="rtl"] .treat-cta__actions{justify-content:flex-start}
[dir="rtl"] .treat-cta__arrow{transform:scaleX(-1)}
[dir="rtl"] .treat-cta__button:hover .treat-cta__arrow,[dir="rtl"] .treat-cta__button:focus-visible .treat-cta__arrow{transform:scaleX(-1) translateX(4px)}
[dir="rtl"] .treat-cta__trust-item+.treat-cta__trust-item:before{left:auto;right:0}
[dir="rtl"] .treat-cta__trust-item:after{left:0;right:100%}
[dir="rtl"] .treat-cta.is-visible .treat-cta__trust-item:after{left:0;right:0}
@media(max-width:760px){[dir="rtl"] .treat-cta__trust-item{text-align:right}}

/* contact section 3 (Route Line) */
[dir="rtl"] .cx3{--cx-d:-1;--cx-origin:right;--cx-ang:-90deg}
[dir="rtl"] .cx3__eyebrow,[dir="rtl"] .cx3__lab,[dir="rtl"] .cx3__go{letter-spacing:0}


/* CONTACT SECTION 4 — Question Ladder RTL */
[dir="rtl"] .cx4__mast h2{direction:rtl}
[dir="rtl"] .cx4__rail{padding-inline-end:clamp(22px,3.5vw,48px);border-inline-end:1px dashed var(--border)}
[dir="rtl"] .cx4__item:before{inset-inline-start:auto;inset-inline-end:-2px;transform-origin:top}
[dir="rtl"] .cx4__question{text-align:right}
[dir="rtl"] .cx4__arrow,[dir="rtl"] .cx4__book span{display:inline-block;transform:scaleX(-1)}
[dir="rtl"] .cx4__call:hover .cx4__arrow,[dir="rtl"] .cx4__book:hover span{transform:scaleX(-1) translateX(5px)}
@media(max-width:760px){[dir="rtl"] .cx4__rail{border-inline-end:0;padding-inline-end:0}}


/* Contact banner RTL refinements */
[dir="rtl"] .contact-banner .about-banner__content { text-align: right; align-items: flex-start; }
[dir="rtl"] .contact-banner .about-banner__description { margin-inline: 0; }
[dir="rtl"] .contact-banner .about-banner__button { flex-direction: row-reverse; }
[dir="rtl"] .contact-banner .about-banner__arrow { transform: scaleX(-1); }
[dir="rtl"] .contact-banner .about-banner__features { direction: rtl; }


/* home 1 banner (Live Skin Scan) */
[dir="rtl"] .h1scan{--h1s-d:-1;--h1s-origin:right;--h1s-ang:-90deg}
[dir="rtl"] .h1scan__eyebrow,[dir="rtl"] .h1scan__rl,[dir="rtl"] .h1scan__fl{letter-spacing:0}
