/* mirrored for right-to-left pages from ../rs-home-hero.css; do not edit */
/* ==================================================================
   HOME, the tabbed photo hero (.rs-thero) and the blue questions
   section (.rs-qs) that follows the awards strip. Home page only.
   ================================================================== */

/* ---------- 1. Hero: one full-bleed photo per service ---------- */
.rs-thero {
    --rs-thero-brand: #0b2dbe;
    --rs-thero-gutter: clamp(20px, 8.2vw, 150px);
    position: relative;
    overflow: hidden;
    height: clamp(640px, 54vw, 100vh);
    background: #06226b;
    color: #fff;
}

.rs-thero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .9s ease, visibility 0s linear .9s;
}

.rs-thero__slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity .9s ease;
}

.rs-thero__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rs-thero .rs-thero__art {
    position: absolute;
    inset: 0;
}

/* the abstracts carry the copy by themselves: only a touch of depth under the nav */
.rs-thero__slide--art::after {
    background: linear-gradient(180deg, rgba(6, 36, 184, .28) 0%, rgba(6, 36, 184, 0) 22%) !important;
}

/* a neutral shade from the left and under the nav (no blue tint on the photos), so the copy holds over any photo */
.rs-thero__slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(270deg, rgba(8, 10, 16, .62) 0%, rgba(8, 10, 16, .34) 42%, rgba(8, 10, 16, 0) 78%),
        linear-gradient(180deg, rgba(8, 10, 16, .45) 0%, rgba(8, 10, 16, 0) 26%);
}

.rs-thero__copy {
    position: absolute;
    z-index: 1;
    right: var(--rs-thero-gutter);
    left: var(--rs-thero-gutter);
    top: 39%;
    max-width: 780px;
}

.rs-thero__slide.is-active .rs-thero__copy {
    animation: rs-thero-rise .8s cubic-bezier(.22, 1, .36, 1) both;
}

.rs-thero.is-loading .rs-thero__copy,
.rs-thero.is-loading .rs-thero__bar {
    animation-play-state: paused !important;
}

@keyframes rs-thero-rise {
    from { opacity: 0; transform: translate3d(0, 18px, 0); }
    to { opacity: 1; transform: none; }
}

.rs-thero__title {
    font-family: inherit;
    margin: 0;
    color: #fff;
    font-size: clamp(32px, 3.85vw, 64px);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -.025em;
}

.rs-thero__sub {
    margin: 18px 0 0;
    color: #fff;
    font-size: clamp(14px, 1.08vw, 18px);
    line-height: 1.45;
    letter-spacing: -.005em;
}

.rs-thero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.rs-thero__btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 7px 18px 7px 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.rs-thero__btn svg {
    flex: none;
    box-sizing: content-box;
    width: 12px;
    height: 12px;
    padding: 6px;
    border-radius: 50%;
}

.rs-thero__btn--white {
    background: #fff;
    color: var(--rs-thero-brand);
}

.rs-thero__btn--white svg {
    background: var(--rs-thero-brand);
    color: #fff;
}

.rs-thero__btn--white:hover {
    background: #eef2ff;
    color: var(--rs-thero-brand);
}

.rs-thero__btn--blue {
    border-color: rgba(255, 255, 255, .55);
    background: var(--rs-thero-brand);
    color: #fff;
}

.rs-thero__btn--blue svg {
    background: #fff;
    color: var(--rs-thero-brand);
}

.rs-thero__btn--blue:hover {
    background: #0a27a3;
    color: #fff;
}

/* the service tabs along the bottom: clear glass, the active one solid white with its line running the slide's time */
.rs-thero__tabs {
    position: absolute;
    z-index: 2;
    right: clamp(16px, 2.6vw, 50px);
    left: clamp(16px, 2.6vw, 50px);
    bottom: clamp(14px, 1.7vw, 30px);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(8px, .75vw, 14px);
}

.rs-thero__tab {
    position: relative;
    overflow: hidden;
    height: clamp(52px, 3.9vw, 74px);
    padding: 0 clamp(14px, 1.15vw, 22px);
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 8px;
    background: rgba(255, 255, 255, .1);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    color: #fff;
    font-size: clamp(11px, .8vw, 15px);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: .14em;
    text-align: right;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.rs-thero__tab:hover {
    border-color: rgba(255, 255, 255, .42);
    background: rgba(255, 255, 255, .18);
}

.rs-thero__tab.is-active {
    border-color: #fff;
    background: #fff;
    color: var(--rs-thero-brand);
}

.rs-thero__tab:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.rs-thero__bar {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: var(--rs-thero-brand);
    transform: scaleX(0);
    transform-origin: right;
}

.rs-thero__tab.is-active .rs-thero__bar {
    animation: rs-thero-bar 7s linear both;
}

/* hold the slide while the visitor is on the tabs or tabbing through the copy */
.rs-thero:has(.rs-thero__tabs:hover) .rs-thero__bar,
.rs-thero:has(:focus-visible) .rs-thero__bar,
body.megamenu-open .rs-thero__bar {
    animation-play-state: paused;
}

@keyframes rs-thero-bar {
    to { transform: scaleX(1); }
}

/* "Book a Valuation" and "Global" above the nav (home only, see navbar-global.php) */
/* two quiet text links over the top right corner, split by a hairline: no box, no dot.
   A line draws under each on hover. */
.rs-nav-util {
    position: absolute;
    z-index: 2;
    top: 12px;
    left: 12px;
    display: flex;
    align-items: center;
}

.rs-nav-util a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 2px 14px;
    color: rgba(255, 255, 255, .88);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1;
    text-decoration: none;
    transition: color .25s ease;
}

.rs-nav-util a:last-child {
    padding-left: 0;
}

.rs-nav-util a + a {
    border-right: 1px solid rgba(255, 255, 255, .32);
}

.rs-nav-util a::after {
    content: "";
    position: absolute;
    right: 14px;
    left: 14px;
    bottom: -5px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: 100% 50%;
    transition: transform .35s cubic-bezier(.65, 0, .2, 1);
}

.rs-nav-util a:last-child::after {
    left: 0;
}

.rs-nav-util a:hover,
.rs-nav-util a:focus-visible {
    color: #fff;
}

.rs-nav-util a:hover::after,
.rs-nav-util a:focus-visible::after {
    transform: scaleX(1);
}

.rs-nav-util__dot {
    display: none;
}

.rs-nav-util svg {
    width: 13px;
    height: 13px;
}

/* over a white header the links turn dark */
.main-header.white-bg .rs-nav-util a {
    color: #0a1f4d;
}

.main-header.white-bg .rs-nav-util a + a {
    border-right-color: rgba(10, 31, 77, .25);
}

.main-header.is-scrolled .rs-nav-util {
    display: none;
}

/* the nav sits in a glass pill while it floats over the photo. The pill is drawn behind the
   list, because the list's tall hover area is what keeps the mega menu open. The list's own left
   padding changes between screen widths, so it is cleared here and the pill measures from the links */
@media (min-width: 1200px) {
    body.rs-home .main-header:not(.fixed):not(.white-bg) ul.main-menu-list {
        position: relative;
        padding-right: 0;
    }

    body.rs-home .main-header:not(.fixed):not(.white-bg) ul.main-menu-list::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 50%;
        right: -22px;
        left: -22px;
        height: 46px;
        margin-top: -23px;
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: 999px;
        background: rgba(8, 40, 100, .58);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        pointer-events: none;
    }
}

@media (max-width: 991px) {
    .rs-nav-util {
        display: none;
    }
}

@media (max-width: 767px) {
    /* one fixed height for every slide, so the tabs never jump as the slides change */
    .rs-thero {
        height: 700px;
    }

    .rs-thero__slide::after {
        background: linear-gradient(180deg, rgba(8, 10, 16, .6) 0%, rgba(8, 10, 16, .42) 55%, rgba(8, 10, 16, .62) 100%);
    }

    .rs-thero__copy {
        top: 124px;
    }

    .rs-thero__tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rs-thero__tab {
        height: 46px;
        font-size: 10px;
        letter-spacing: .1em;
    }

    .rs-thero__btn {
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rs-thero__slide,
    .rs-thero__slide.is-active {
        transition: none;
    }

    .rs-thero__slide.is-active .rs-thero__copy,
    .rs-thero__tab.is-active .rs-thero__bar {
        animation: none;
    }

    .rs-thero__tab.is-active .rs-thero__bar {
        transform: none;
    }
}

/* ---------- 2. Blue section: our approach ----------
   Sized to fit one screen, heading to links: wide text columns so the copy wraps less,
   and photo height tied to the screen height. On phones the three columns swipe sideways. */
.rs-qs {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(24px, 3vw, 56px);
    padding: clamp(26px, 2.6vw, 44px) clamp(24px, 4vw, 80px);
    background: #0b2dbe;
    color: #fff;
}

.rs-qs__eyebrow {
    margin: 0 0 10px;
    color: #fff;
    font-size: clamp(11px, .8vw, 13px);
    line-height: 1;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.rs-qs__eyebrow::before {
    content: "\2014\00a0";
}

.rs-qs__title {
    margin: 0;
    color: #fff;
    font-size: clamp(22px, 1.95vw, 34px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.rs-qs__lead {
    margin: 0;
    color: #fff;
    font-size: clamp(15px, 1.2vw, 21px);
    line-height: 1.42;
    letter-spacing: -.01em;
}

.rs-qs__note {
    align-self: end;
    margin: 0;
    color: #fff;
    font-size: clamp(12px, .88vw, 15px);
    line-height: 1.4;
}

.rs-qs__arrows {
    white-space: nowrap;
}

.rs-qs__tasks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 0;
    margin-top: clamp(20px, 2vw, 34px);
}

.rs-qs__task {
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255, 255, 255, .55);
}

.rs-qs__label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    color: #fff;
    font-size: clamp(11px, .82vw, 13px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.rs-qs__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55em;
    height: 1.55em;
    border-radius: 50%;
    background: #3fd267;
    color: #06226b;
    font-size: .95em;
    letter-spacing: 0;
}

.rs-qs__text {
    flex: 1 1 auto;
    margin: clamp(10px, .9vw, 16px) 0 clamp(12px, 1vw, 18px);
    padding: 0 12px;
    color: #fff;
    font-size: clamp(13px, .92vw, 15px);
    font-weight: 400;
    line-height: 1.45;
}

.rs-qs__photo {
    display: block;
    width: calc(100% - 12px);
    height: clamp(104px, 19vh, 210px);
    object-fit: cover;
}

.rs-qs__link {
    margin-top: 10px;
    padding: 0 12px;
    color: #fff;
    font-size: clamp(11px, .78vw, 13px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .02em;
    text-decoration: none;
    text-transform: uppercase;
}

.rs-qs__link:hover {
    color: #fff;
    text-decoration: underline;
}

@media (max-width: 991px) {
    .rs-qs {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        row-gap: 14px;
        padding: 28px 24px;
    }

    .rs-qs__tasks {
        margin-top: 4px;
    }
}

/* phones: the columns swipe sideways, with the next one peeking in, so the section stays one screen */
@media (max-width: 575px) {
    .rs-qs {
        padding: 24px 20px 24px 0;
    }

    .rs-qs > :not(.rs-qs__tasks) {
        padding-left: 20px;
    }

    .rs-qs__title {
        font-size: 21px;
    }

    .rs-qs__lead {
        font-size: 14px;
    }

    .rs-qs__tasks {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 78%;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .rs-qs__tasks::-webkit-scrollbar {
        display: none;
    }

    .rs-qs__task {
        scroll-snap-align: start;
    }

    .rs-qs__photo {
        height: 120px;
    }
}

/* ---------- 3. Book section: RICS and Dubai Land Department on the photo ---------- */
.rs-bk-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 22px;
}

.rs-bk-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
}

.rs-bk-chips .rs-bk-chip {
    position: static;
    display: flex;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid #dfe5f2;
    background: #fff;
    box-shadow: none;
}

.rs-bk-chips .rs-bk-chip img {
    display: block;
    width: auto;
    object-fit: contain;
}

.rs-bk-chips .rs-bk-chip--rics img {
    height: 44px;
}

.rs-bk-chips .rs-bk-chip--dld img {
    height: 32px;
}

@media (max-width: 767px) {
    .rs-bk-chips .rs-bk-chip {
        padding: 6px 10px;
    }

    .rs-bk-chips .rs-bk-chip--rics img {
        height: 44px;
    }

    .rs-bk-chips .rs-bk-chip--dld img {
        height: 32px;
    }
}

/* Our Approach, 2026-11-04: a larger heading held to a narrow measure (five to six lines),
   so it no longer runs up against the lead and the columns; the note under it is now two
   real links, each with a square arrow box. */
.rs-qs__title {
    max-width: 9.2em;
    font-size: clamp(30px, 2.7vw, 50px);
    line-height: 1.14;
}

.rs-qs__note {
    display: grid;
    align-self: end;
    width: min(100%, 420px);
    border-top: 1px solid rgba(255, 255, 255, .35);
}

.rs-qs__go {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
    font-size: clamp(14px, .95vw, 16px);
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
}

.rs-qs__gobox {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, .7);
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

.rs-qs__gobox svg {
    width: 16px;
    height: 16px;
    transition: transform .3s ease;
}

.rs-qs__go:hover,
.rs-qs__go:focus-visible {
    color: #fff;
}

.rs-qs__go:hover .rs-qs__gobox,
.rs-qs__go:focus-visible .rs-qs__gobox {
    border-color: #fff;
    background: #fff;
    color: #0b2dbe;
}

.rs-qs__go:hover .rs-qs__gobox svg,
.rs-qs__go:focus-visible .rs-qs__gobox svg {
    transform: translateX(-2px);
}

@media (max-width: 991px) {
    .rs-qs__title {
        max-width: 14em;
    }

    .rs-qs__note {
        margin-bottom: 8px;
    }
}

@media (max-width: 575px) {
    .rs-qs__title {
        font-size: 26px;
    }
}

/* Our Approach, second pass: a shorter heading set in capitals over three lines, so the band
   keeps its old height */
.rs-qs__title {
    max-width: 14em;
    font-size: clamp(26px, 2.2vw, 40px);
    line-height: 1.12;
    letter-spacing: .01em;
    text-transform: uppercase;
}

@media (max-width: 575px) {
    .rs-qs__title {
        font-size: 24px;
    }
}

/* Our Approach: the "Celebrating 49 years" mark fills the space between the heading and the
   two links in the left column */
.rs-qs__side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    min-width: 0;
}

.rs-qs__mark {
    display: block;
    width: clamp(120px, 10vw, 170px);
    height: auto;
    margin: auto 0;
}

.rs-qs__side .rs-qs__note {
    align-self: auto;
}

@media (max-width: 991px) {
    .rs-qs__mark {
        width: 96px;
        margin: 8px 0;
    }
}

/* Our Approach: hover for the three columns (2026-11-05, formal pass). Pointing at a column (or
   tabbing to its link) draws its left rule down in white, eases the photo in a little and draws a
   fine underline under the link text while the arrow steps on; the other two columns dim back so
   the chosen one reads first. Nothing jumps, glows or changes colour. Mouse and trackpad only, and
   none of it with reduced motion. */
.rs-qs__task {
    position: relative;
}

.rs-qs__media {
    display: block;
    width: calc(100% - 12px);
    height: clamp(104px, 19vh, 210px);
    overflow: hidden;
}

.rs-qs__media .rs-qs__photo {
    width: 100%;
    height: 100%;
}

.rs-qs__link {
    align-self: flex-start;
}

.rs-qs__arrow {
    display: inline-block;
}

@media (max-width: 991px) {
    .rs-qs__media {
        height: 120px;
    }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .rs-qs__task::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: -1px;
        width: 2px;
        background: #fff;
        transform: scaleY(0);
        transform-origin: 50% 0;
        transition: transform .7s cubic-bezier(.65, 0, .2, 1);
        pointer-events: none;
    }

    .rs-qs__task > * {
        transition: opacity .45s ease;
    }

    .rs-qs__media .rs-qs__photo {
        transition: transform 1.2s cubic-bezier(.22, 1, .36, 1);
    }

    .rs-qs__linktext {
        padding-bottom: 3px;
        background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
        transition: background-size .5s cubic-bezier(.65, 0, .2, 1);
    }

    .rs-qs__arrow {
        transition: transform .4s cubic-bezier(.22, 1, .36, 1);
    }

    .rs-qs__task .rs-qs__link:hover {
        text-decoration: none;
    }

    .rs-qs__task:hover::before,
    .rs-qs__task:focus-within::before {
        transform: none;
    }

    .rs-qs__task:hover .rs-qs__photo,
    .rs-qs__task:focus-within .rs-qs__photo {
        transform: scale(1.035);
    }

    .rs-qs__task:hover .rs-qs__linktext,
    .rs-qs__task:focus-within .rs-qs__linktext {
        background-size: 100% 1px;
    }

    .rs-qs__task:hover .rs-qs__arrow,
    .rs-qs__task:focus-within .rs-qs__arrow {
        transform: translateX(-4px);
    }

    /* the other two columns step back while one is pointed at */
    .rs-qs__tasks:has(.rs-qs__task:hover) .rs-qs__task:not(:hover) > *,
    .rs-qs__tasks:has(.rs-qs__task:focus-within) .rs-qs__task:not(:focus-within) > * {
        opacity: .55;
    }
}

/* ==================================================================
   Hero, v3 (2026-11-06): formal and minimal. The copy is anchored just
   above a ruled index of the four services; a large light headline, a
   sentence-case line, two square buttons (solid white, white outline)
   with a plain arrow. The tabs lose their boxes: a fine white rule runs
   across, each service is a number and a name, the active one in full
   white with its own line filling along the top while the slide plays.
   Phones: the same order, compact, no empty band.
   ================================================================== */
.rs-thero {
    --rs-thero-gutter: clamp(20px, 6.4vw, 120px);
}

.rs-thero .rs-thero__copy {
    top: auto;
    bottom: clamp(122px, 10.5vw, 168px);
    max-width: 860px;
}

.rs-thero .rs-thero__title {
    max-width: 15.5ch;
    font-size: clamp(38px, 4.3vw, 72px);
    font-weight: 400;
    line-height: 1.03;
    letter-spacing: -.032em;
}

.rs-thero .rs-thero__sub {
    max-width: 46ch;
    margin-top: 22px;
    font-size: clamp(15px, 1.15vw, 19px);
    line-height: 1.55;
    letter-spacing: 0;
    color: rgba(255, 255, 255, .84);
}

.rs-thero .rs-thero__actions {
    gap: 12px;
    margin-top: clamp(26px, 2.4vw, 36px);
}

.rs-thero .rs-thero__btn {
    gap: 16px;
    height: 54px;
    padding: 0 24px;
    border: 1px solid #fff;
    border-radius: 0;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.rs-thero .rs-thero__btn svg {
    width: 18px;
    height: 18px;
    padding: 0;
    border-radius: 0;
    background: none;
    color: currentColor;
    transition: transform .3s ease;
}

.rs-thero .rs-thero__btn:hover svg,
.rs-thero .rs-thero__btn:focus-visible svg {
    transform: translateX(-4px);
}

.rs-thero .rs-thero__btn--white {
    background: #fff;
    color: var(--rs-thero-brand);
}

.rs-thero .rs-thero__btn--white svg {
    background: none;
    color: var(--rs-thero-brand);
}

.rs-thero .rs-thero__btn--white:hover,
.rs-thero .rs-thero__btn--white:focus-visible {
    border-color: #eef2ff;
    background: #eef2ff;
    color: var(--rs-thero-brand);
}

.rs-thero .rs-thero__btn--blue {
    border-color: rgba(255, 255, 255, .6);
    background: transparent;
    color: #fff;
}

.rs-thero .rs-thero__btn--blue svg {
    background: none;
    color: #fff;
}

.rs-thero .rs-thero__btn--blue:hover,
.rs-thero .rs-thero__btn--blue:focus-visible {
    border-color: #fff;
    background: #fff;
    color: var(--rs-thero-brand);
}

.rs-thero .rs-thero__btn--blue:hover svg,
.rs-thero .rs-thero__btn--blue:focus-visible svg {
    color: var(--rs-thero-brand);
}

/* the ruled index of services */
.rs-thero .rs-thero__tabs {
    right: var(--rs-thero-gutter);
    left: var(--rs-thero-gutter);
    bottom: clamp(24px, 2.4vw, 40px);
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, .3);
}

.rs-thero .rs-thero__tab,
.rs-thero .rs-thero__tab.is-active,
.rs-thero .rs-thero__tab:hover {
    display: flex;
    align-items: baseline;
    gap: 12px;
    overflow: visible;
    height: auto;
    padding: 20px 0 4px 24px;
    border: 0;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0;
    text-align: right;
    text-transform: none;
    color: rgba(255, 255, 255, .62);
    transition: color .3s ease;
}

.rs-thero .rs-thero__tab:hover,
.rs-thero .rs-thero__tab.is-active {
    color: #fff;
}

.rs-thero .rs-thero__tabnum {
    flex: none;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .5);
    transition: color .3s ease;
}

.rs-thero .rs-thero__tab.is-active .rs-thero__tabnum {
    color: #fff;
}

.rs-thero .rs-thero__tab:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

/* the active service's line, drawn along the top rule while its slide plays */
.rs-thero .rs-thero__bar {
    top: -1px;
    bottom: auto;
    right: 0;
    width: calc(100% - 24px);
    height: 2px;
    background: #fff;
    transform-origin: 100% 50%;
}

@media (max-width: 767px) {
    .rs-thero {
        height: 640px;
    }

    .rs-thero .rs-thero__copy {
        bottom: 150px;
    }

    .rs-thero .rs-thero__title {
        max-width: none;
        font-size: 33px;
        line-height: 1.08;
    }

    .rs-thero .rs-thero__sub {
        margin-top: 14px;
        font-size: 15px;
    }

    .rs-thero .rs-thero__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-top: 22px;
    }

    .rs-thero .rs-thero__btn {
        justify-content: space-between;
        height: 50px;
        padding: 0 18px;
        font-size: 14.5px;
    }

    .rs-thero .rs-thero__tabs {
        bottom: 18px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rs-thero .rs-thero__tab,
    .rs-thero .rs-thero__tab.is-active,
    .rs-thero .rs-thero__tab:hover {
        gap: 8px;
        padding: 13px 0 9px 12px;
        font-size: 13.5px;
    }

    .rs-thero .rs-thero__tab:nth-child(n + 3) {
        border-top: 1px solid rgba(255, 255, 255, .18);
    }

    .rs-thero .rs-thero__tabnum {
        font-size: 11.5px;
    }

    .rs-thero .rs-thero__bar {
        width: calc(100% - 12px);
    }
}

/* v3 refinements: the headline over three lines on desktop; tighter on phones */
.rs-thero .rs-thero__title {
    max-width: 17.5ch;
    font-size: clamp(38px, 4vw, 66px);
}

@media (max-width: 767px) {
    .rs-thero .rs-thero__title {
        font-size: 30px;
    }

    .rs-thero .rs-thero__tab,
    .rs-thero .rs-thero__tab.is-active,
    .rs-thero .rs-thero__tab:hover {
        font-size: 13px;
    }
}

.rs-thero .rs-thero__title {
    max-width: 12.6em;
}

@media (max-width: 767px) {
    .rs-thero .rs-thero__title {
        max-width: none;
    }
}

/* slide changes: the outgoing copy fades out quickly, then the new copy rises in, so two headlines
   never sit on top of each other */
.rs-thero .rs-thero__slide:not(.is-active) .rs-thero__copy {
    opacity: 0;
    transition: opacity .25s ease;
}

.rs-thero .rs-thero__slide.is-active .rs-thero__copy {
    animation-delay: .22s;
}

@media (prefers-reduced-motion: reduce) {
    .rs-thero .rs-thero__slide:not(.is-active) .rs-thero__copy {
        transition: none;
    }
}