/* mirrored for right-to-left pages from ../rs-sections.css; do not edit */
/* ================================================
RS-SECTIONS.CSS
1. Awards & Recognitions Grid
2. Services Section (Defining Standards) V3
3. Why Choose Reliant Surveyors V2 (Improved)
================================================ */
/* ------------------------------------------------
1. AWARDS & RECOGNITIONS GRID
------------------------------------------------ */
.rs-awards-grid {
padding: 60px 0;
background: #f8fafc;
}
.rs-awards-grid-inner {
/* max-width: 1200px; */
margin: 0 auto;
padding: 0 24px;
}
.rs-awards-grid-header {
text-align: center;
margin-bottom: 40px;
}
.rs-awards-grid-tag {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
color: #092db6;
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: 12px;
background: rgba(10, 83, 145, .06);
padding: 6px 18px;
border-radius: 30px;
}
/* .rs-awards-grid-title {
font-size: 34px;
font-weight: 700;
color: #0f172a;
margin: 0;
line-height: 1.25;
} */
/* Slider Wrapper */
.rs-awards-slider-wrap {
position: relative;
padding: 0;
}
.rs-awards-swiper {
overflow: hidden;
}
.rs-awards-swiper .swiper-slide {
height: auto;
}
.rs-award-cell {
background: #ffffff;
border: 1px solid #e8edf2;
border-radius: 16px;
padding: 28px 16px 22px;
text-align: center;
transition: all .4s cubic-bezier(.25, .46, .45, .94);
cursor: default;
position: relative;
overflow: hidden;
height: 100%;
}
/* Pagination Bullets */
.rs-awards-pagination {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 20px;
}
.rs-awards-pagination .swiper-pagination-bullet {
width: 10px;
height: 10px;
background: #c5d3e0;
opacity: 1;
border-radius: 50%;
transition: all .3s ease;
cursor: pointer;
}
.rs-awards-pagination .swiper-pagination-bullet-active {
background: #092db6;
transform: scale(1.2);
}
.rs-award-cell::after {
content: '';
position: absolute;
bottom: 0;
right: 50%;
transform: translateX(50%) scaleX(0);
width: 50px;
height: 3px;
background: linear-gradient(270deg, #092db6, #1e88e5);
border-radius: 3px 3px 0 0;
transition: transform .35s ease;
}
.rs-award-cell:hover {
transform: translateY(-6px);
box-shadow: 0 16px 40px rgba(10, 83, 145, .1);
border-color: rgba(10, 83, 145, .2);
}
.rs-award-cell:hover::after {
transform: translateX(50%) scaleX(1);
}
.rs-award-cell-img {
width: 150px;
height: 90px;
margin: 0 auto 16px;
display: flex;
align-items: center;
justify-content: center;
}
.rs-award-cell-img img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
transition: transform .35s ease;
}
.rs-award-cell-img svg {
width: 48px;
height: 48px;
}
.rs-award-cell:hover .rs-award-cell-img img,
.rs-award-cell:hover .rs-award-cell-img svg {
transform: scale(1.08);
}
.rs-award-cell-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.rs-award-cell-info strong {
font-size: 14px;
font-weight: 700;
color: #1e293b;
line-height: 1.3;
}
.rs-award-cell-info span {
font-size: 10px;
color: #64748b;
line-height: 1.4;
border-radius: 50px;
display: inline-block;
margin-top: 7px;
width: 100%;
}
/* span.badge.bg-primary.text-white {
background: #092db6 !important;
} */
/* CTA */
.rs-awards-grid-cta {
text-align: center;
margin-top: 32px;
}
.rs-awards-grid-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 28px;
border: 1.5px solid #092db6;
border-radius: 50px;
color: #092db6;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: all .3s ease;
background: transparent;
}
.rs-awards-grid-btn:hover {
background: linear-gradient(225deg, #092db6 0%, #2952e8 100%);
color: #fff;
}
.rs-awards-grid-btn svg {
transition: transform .3s ease;
}
.rs-awards-grid-btn:hover svg {
transform: translateX(-3px);
}
/* Awards Slider Responsive */
@media (max-width: 991px) {
.rs-awards-grid-title {
font-size: 28px;
}
}
@media (max-width: 575px) {
.rs-awards-grid {
padding: 40px 0;
}
.rs-awards-slider-wrap {
padding: 0;
}
.rs-awards-grid-title {
font-size: 22px;
}
.rs-award-cell {
padding: 20px 12px 16px;
}
.rs-award-cell-img {
width: 60px;
height: 70px;
}
.rs-award-cell-info strong {
font-size: 13px;
}
}
/* ------------------------------------------------
2. SERVICES SECTION V3 - DEFINING STANDARDS
------------------------------------------------ */
.rs-svc-v3 {
padding: 80px 0 60px;
background: #fff;
position: relative;
overflow: hidden;
}
.rs-svc-v3::before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
height: 4px;
background: linear-gradient(270deg, #092db6, #1e88e5, #3b9eff, #1e88e5, #092db6);
display: none;
}
.rs-svc-v3-inner {
padding: 0 60px;
}
.rs-svc-v3-top {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 40px;
margin-bottom: 44px;
flex-wrap: wrap;
}
.rs-svc-v3-left {
flex: 1;
min-width: 300px;
}
.rs-svc-v3-tag {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 700;
color: #092db6;
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: 16px;
background: rgba(10, 83, 145, .05);
padding: 6px 16px;
border-radius: 8px;
}
.rs-svc-v3-tag svg {
stroke: #092db6;
}
/* .rs-svc-v3-title {
font-size: 42px;
font-weight: 700;
color: #0f172a;
line-height: 1.2;
margin: 0;
letter-spacing: -0.5px;
} */
.rs-svc-v3-title span {
background: linear-gradient(225deg, #092db6, #1e88e5);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.rs-svc-v3-right {
display: flex;
align-items: flex-end;
gap: 28px;
max-width: 480px;
flex-shrink: 0;
}
.rs-svc-v3-desc {
font-size: 15px;
color: #64748b;
line-height: 1.7;
margin: 0;
}
/* Nav Buttons with Counter */
.rs-svc-v3-nav {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.rs-svc-v3-btn {
width: 44px;
height: 44px;
border-radius: 12px;
border: 1.5px solid #e2e8f0;
background: #fff;
color: #092db6;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all .3s cubic-bezier(.25, .46, .45, .94);
}
.rs-svc-v3-btn:hover {
background: linear-gradient(225deg, #092db6 0%, #2952e8 100%);
color: #fff;
border-color: #092db6;
box-shadow: 0 4px 14px rgba(10, 83, 145, .25);
}
.rs-svc-v3-btn svg {
width: 18px;
height: 18px;
stroke: currentColor;
stroke-width: 2;
fill: none;
}
.rs-svc-v3-counter {
font-size: 14px;
font-weight: 600;
color: #94a3b8;
white-space: nowrap;
min-width: 40px;
text-align: center;
}
.rs-svc-v3-counter .rs-svc-v3-current {
color: #092db6;
font-size: 18px;
font-weight: 700;
}
/* Slider area */
.rs-svc-v3-slider {
padding: 0 60px 10px;
}
/* Responsive */
@media (max-width: 991px) {
.rs-svc-v3 {
padding: 50px 0 40px;
}
.rs-svc-v3-inner {
padding: 0 24px;
}
.rs-svc-v3-top {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.rs-svc-v3-title {
font-size: 30px;
}
.rs-svc-v3-right {
max-width: 100%;
gap: 16px;
}
.rs-svc-v3-slider {
padding: 0 24px 10px;
}
}
@media (max-width: 575px) {
.rs-svc-v3-inner {
padding: 0 16px;
}
.rs-svc-v3-title {
font-size: 24px;
}
.rs-svc-v3-desc {
font-size: 14px;
}
.rs-svc-v3-slider {
padding: 0 16px 10px;
}
.rs-svc-v3-btn {
width: 38px;
height: 38px;
border-radius: 10px;
}
}
/* ------------------------------------------------
3. WHY CHOOSE US, SPLIT LAYOUT (FRESH)
------------------------------------------------ */
.rs-wcu {
position: relative;
padding: 0;
overflow: hidden;
min-height: 600px;
}
.rs-wcu-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 0;
}
.rs-wcu-overlay {
position: absolute;
inset: 0;
background: linear-gradient(225deg,
rgba(10, 30, 60, .92) 0%,
rgba(10, 83, 145, .11) 100%);
z-index: 1;
}
/* Split layout */
.rs-wcu-wrap {
position: relative;
z-index: 2;
display: flex;
min-height: 600px;
}
/* ---- Left panel ---- */
.rs-wcu-left {
width: 38%;
flex-shrink: 0;
padding: 80px 60px;
display: flex;
flex-direction: column;
justify-content: center;
}
.rs-wcu-label {
display: inline-block;
font-size: 11px;
font-weight: 600;
color: #0B2DBE;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 20px;
background: #fff;
padding: 6px 18px;
border-radius: 50px;
width: fit-content;
}
.rs-wcu-heading {
font-size: 42px;
font-weight: 500;
color: #ffffff;
line-height: 1.2;
margin: 0 0 18px;
letter-spacing: -0.3px;
}
.rs-wcu-text {
font-size: 15px;
color: rgba(255, 255, 255, .65);
line-height: 1.7;
margin: 0 0 40px;
max-width: 360px;
}
/* Controls, arrows + counter */
.rs-wcu-controls {
display: flex;
align-items: center;
gap: 16px;
}
.rs-wcu-arrow {
width: 48px;
height: 48px;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, .25);
background: transparent;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all .3s ease;
}
.rs-wcu-arrow:hover {
background: #0B2DBE;
border-color: #0B2DBE;
box-shadow: 0 4px 20px rgba(11, 45, 190, .4);
transform: scale(1.08);
}
.rs-wcu-arrow svg {
width: 20px;
height: 20px;
}
.rs-wcu-counter {
display: flex;
align-items: baseline;
gap: 4px;
font-family: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
}
.rs-wcu-cur {
font-size: 24px;
font-weight: 600;
color: #fff;
}
.rs-wcu-sep {
font-size: 16px;
color: rgba(255, 255, 255, .3);
margin: 0 2px;
}
.rs-wcu-tot {
font-size: 14px;
font-weight: 400;
color: rgba(255, 255, 255, .4);
}
/* ---- Right panel, slider ---- */
.rs-wcu-right {
flex: 1;
display: flex;
align-items: center;
padding: 60px 0 60px 60px;
overflow: hidden;
}
.rs-wcu-swiper {
width: 100%;
overflow: visible;
}
.rs-wcu-swiper .swiper-wrapper {
align-items: stretch;
}
.rs-wcu-swiper .swiper-slide {
height: auto;
display: flex;
}
/* ---- Responsive ---- */
@media (max-width: 991px) {
.rs-wcu-wrap {
flex-direction: column;
min-height: auto;
}
.rs-wcu-left {
width: 100%;
padding: 60px 24px 30px;
}
.rs-wcu-heading {
font-size: 32px;
}
.rs-wcu-text {
margin-bottom: 28px;
}
.rs-wcu-right {
padding: 0 24px 60px;
}
}
@media (max-width: 575px) {
.rs-wcu-left {
padding: 40px 16px 24px;
}
.rs-wcu-heading {
font-size: 32px;
}
.rs-wcu-right {
padding: 0 16px 40px;
}
.rs-wcu-arrow {
width: 42px;
height: 42px;
}
}
/* ------------------------------------------------
4. PREMIUM SVG ICONS & FEATURED CARD (Services)
------------------------------------------------ */
/* Premium SVG Icons for Service Cards */
.services-card .rs-svg-icon {
width: 48px;
height: 48px;
margin-bottom: 25px;
transition: all 0.4s ease;
}
.services-card:hover .rs-svg-icon {
transform: scale(1.1);
filter: drop-shadow(0 2px 6px rgba(10, 83, 145, 0.25));
}
/* Featured Card 0 - Property Valuation */
.rs-featured-card {
position: relative;
border: 2px solid #092db6 !important;
background: linear-gradient(195deg, #ffffff 0%, #f0f7ff 100%) !important;
box-shadow: 0 8px 32px rgba(10, 83, 145, 0.12) !important;
}
.rs-featured-card::before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
height: 4px;
background: linear-gradient(270deg, #092db6 0%, #1565c0 50%, #092db6 100%);
border-radius: 12px 12px 0 0;
z-index: 1;
}
.rs-featured-badge {
position: absolute;
top: 14px;
left: 14px;
background: linear-gradient(225deg, #092db6 0%, #1565c0 100%);
color: #ffffff;
font-size: 11px;
font-weight: 600;
padding: 4px 14px;
border-radius: 20px;
letter-spacing: 0.3px;
z-index: 2;
box-shadow: 0 3px 10px rgba(10, 83, 145, 0.3);
text-transform: uppercase;
}
.rs-featured-card .rs-service-icon .rs-svg-icon {
width: 54px;
height: 54px;
}
.rs-featured-card .services-card-bottom {
background-color: #dbeafe !important;
}
.rs-featured-card:hover {
box-shadow: 0 14px 48px rgba(10, 83, 145, 0.18) !important;
border-color: #1565c0 !important;
}
.rs-featured-card:hover .services-card-bottom {
background-color: #bfdbfe !important;
}
.rs-featured-card .service-details-btn {
color: #092db6;
font-weight: 600;
}
.rs-featured-card .service-details-btn:hover {
color: #fff !important;
}
@media (max-width: 768px) {
.services-card .rs-svg-icon {
width: 35px;
height: 35px;
margin-bottom: 10px;
}
.rs-featured-card .rs-service-icon .rs-svg-icon {
width: 40px;
height: 40px;
}
.rs-featured-badge {
font-size: 10px;
padding: 3px 10px;
top: 10px;
left: 10px;
}
}
/* ------------------------------------------------
5. MARKET REPORT SECTION
------------------------------------------------ */
.rs-mr-section {
padding: 30px 0 80px;
background: #fff;
overflow: hidden;
}
/* Header row: eyebrow + title on the left, a plain text link on the right,
closed off by a hairline that runs the full width of the container. */
.rs-mr-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
padding: 0 0 30px;
margin-bottom: 36px;
border-bottom: 1px solid #dcdfe6;
flex-wrap: wrap;
gap: 20px;
}
.rs-mr-header-left {
max-width: 520px;
}
.rs-mr-tag {
display: block;
font-size: 12px;
font-weight: 500;
color: #092db6;
letter-spacing: .22em;
text-transform: uppercase;
margin-bottom: 18px;
}
.rs-mr-heading {
font-size: 34px;
font-weight: 500;
color: #1a1a2e;
line-height: 1.25;
margin: 0;
}
.rs-mr-header-right {
display: flex;
align-items: center;
gap: 16px;
}
.rs-mr-btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 0 0 6px;
color: #14161c;
border-bottom: 1px solid #b9bfca;
font-weight: 500;
font-size: 15px;
text-decoration: none;
transition: color .25s ease, border-color .25s ease;
white-space: nowrap;
}
.rs-mr-btn__arrow {
display: block;
width: 22px;
height: auto;
transition: transform .25s ease;
}
.rs-mr-btn:hover {
color: #092db6;
border-color: #092db6;
}
.rs-mr-btn:hover .rs-mr-btn__arrow {
transform: translateX(-4px);
}
/* Report card, flat editorial item: image, title, summary, period.
No card box, no border-radius, no shadow. Shared by the home page
section and the /market-research-and-reports listing grid. */
.mr-col {
margin-bottom: 34px;
}
.mr-card {
display: flex;
flex-direction: column;
height: 100%;
background: transparent;
cursor: pointer;
}
/* MEDIA, square-cornered block at the source 3:2 ratio, so the report
cover fills it edge to edge with nothing cropped. */
.mr-card__media {
position: relative;
display: block;
width: 100%;
aspect-ratio: 3 / 2;
overflow: hidden;
background: #d9dade;
text-decoration: none;
}
.mr-card__photo {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.mr-card:hover .mr-card__photo {
transform: scale(1.04);
}
/* TITLE */
.mr-card__title {
margin: 20px 0 12px;
font-family: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
font-size: 18px;
font-weight: 500;
color: #14161c;
}
/* Underline wipes in left to right and carries across wrapped lines in
sequence, line one fills, then line two, then line three. A gradient
background on the inline box gives that: with the default sliced
box-decoration-break the ribbon is laid out as one continuous strip
and cut across the line fragments, so growing it from 0% to 100%
sweeps the lines in order, each hugging its own text width. */
.mr-card__title a {
color: inherit;
text-decoration: none;
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-position: 100% 100%;
background-size: 0% 1px;
transition: background-size 0.3s ease;
}
.mr-card:hover .mr-card__title a {
background-size: 100% 2px;
}
/* SUMMARY */
.mr-card__desc {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: #4a4d55;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* PERIOD, small caption line below the summary */
.mr-card__meta {
margin: 5px 0 0;
font-size: 12px;
font-weight: 700;
line-height: 1.2;
color: #14161c;
letter-spacing: 0.01em;
}
.mr-card__meta-label {
font-weight: 700;
}
/* Home grid, cards sit on the section's light background, so the
bottom margin of the last row is trimmed back. */
.rs-mr-grid .mr-col {
margin-bottom: 0;
}
/* Home grid card, tall cover tile on a soft grey ground, then a hairline,
the running number, the title and a two-line summary. Scoped to
.rs-mr-grid so the /market-research-and-reports listing keeps its own card. */
.rs-mr-grid .mr-card__media {
aspect-ratio: 3 / 4;
background: #e6e9ed;
}
.rs-mr-grid .mr-card__body {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid #dcdfe6;
}
.rs-mr-grid .mr-card__num {
display: block;
margin-bottom: 10px;
font-size: 12px;
font-weight: 500;
letter-spacing: .1em;
color: #092db6;
}
.rs-mr-grid .mr-card__title {
margin: 0 0 8px;
}
.rs-mr-grid .mr-card__title a {
background-image: none;
transition: color .25s ease;
}
.rs-mr-grid .mr-card:hover .mr-card__title a {
color: #092db6;
}
.rs-mr-grid .mr-card__desc {
color: #6b7280;
-webkit-line-clamp: 2;
}
@media (max-width: 1199.98px) {
.mr-card__title {
font-size: 18px;
}
}
@media (max-width: 991px) {
.rs-mr-section {
padding: 50px 0;
}
.rs-mr-header {
margin-bottom: 28px;
}
.rs-mr-heading {
font-size: 26px;
}
.mr-col {
margin-bottom: 26px;
}
.mr-card__title {
margin: 16px 0 10px;
font-size: 17px;
}
.mr-card__desc {
font-size: 13.5px;
}
.mr-card__meta {
margin-top: 12px;
}
}
@media (max-width: 575px) {
.rs-mr-header {
flex-direction: column;
align-items: flex-start;
}
.rs-mr-heading {
font-size: 26px;
}
.mr-col {
margin-bottom: 18px;
}
.mr-card__title {
font-size: 16px;
}
.mr-card__desc {
font-size: 13px;
}
}
@media (max-width: 767px) {
.rs-awards-grid-header {
margin-bottom: 12px;
}
.rs-svc-v3-nav {
display: none;
}
.rs-wcu-controls {
display: none;
}
.rs-mr-header-right {
display: none;
}
.rs-houzzhunt-logo {
height: 45px;
}
.footer-section-four .footer-lower-two ul li {
margin-bottom: 12px;
}
}
/* =========================================
Book a Valuation Section (rs-bv-*)
========================================= */
.rs-bv-section {
position: relative;
padding: 50px 0;
background: linear-gradient(225deg, #f6f9ff 0%, #ffffff 55%, #fdf3f5 100%);
overflow: hidden;
}
.rs-bv-section .rs-bv-bg-shape {
position: absolute;
border-radius: 50%;
filter: blur(90px);
opacity: 0.55;
pointer-events: none;
z-index: 0;
}
.rs-bv-section .rs-bv-bg-shape--one {
width: 360px;
height: 360px;
top: -120px;
right: -120px;
background: rgba(10, 83, 145, 0.18);
}
.rs-bv-section .rs-bv-bg-shape--two {
width: 320px;
height: 320px;
bottom: -120px;
left: -100px;
background: rgba(11, 45, 190, 0.12);
}
.rs-bv-section .container {
position: relative;
z-index: 1;
}
.rs-bv-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: end;
}
/* Left content */
.rs-bv-heading {
font-family: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
font-size: 46px;
line-height: 1.05;
color: #092db6;
font-weight: 400;
margin: 0 0 14px;
}
.rs-bv-heading-accent {
display: inline-block;
color: #0B2DBE;
position: relative;
padding-bottom: 4px;
}
.rs-bv-heading-accent::after {
content: "";
position: absolute;
right: 0;
left: 0;
bottom: 0;
height: 3px;
background: #0B2DBE;
border-radius: 3px;
}
.rs-bv-desc {
font-size: 15px;
line-height: 1.6;
color: #4b5563;
max-width: 520px;
margin: 0 0 22px;
text-align: justify;
}
.rs-bv-cta-row {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin-top: 28px;
}
.rs-bv-cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 26px;
background: linear-gradient(225deg, #092db6 0%, #2952e8 100%);
color: #ffffff !important;
font-size: 15px;
font-weight: 600;
border-radius: 8px;
text-decoration: none;
box-shadow: 0 10px 22px rgba(10, 83, 145, 0.24);
transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.rs-bv-cta svg {
width: 18px;
height: 18px;
transition: transform 0.25s ease;
}
.rs-bv-cta:hover {
background: linear-gradient(225deg, #0B2DBE 0%, #c4162d 100%);
transform: translateY(-2px);
color: #ffffff !important;
}
.rs-bv-cta:hover svg {
transform: translateX(-4px);
}
.rs-bv-cta-note {
font-size: 14px;
color: #4b5563;
}
.rs-bv-cta-note strong {
color: #092db6;
font-weight: 700;
}
.rs-bv-stats {
display: flex;
gap: 36px;
flex-wrap: wrap;
}
.rs-bv-stat strong {
display: block;
font-family: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
font-size: 30px;
color: #4b5563;
font-weight: 500 !important;
line-height: 1;
margin-bottom: 4px;
}
.rs-bv-stat span {
font-size: 11px;
font-weight: 600;
letter-spacing: 1.4px;
text-transform: uppercase;
color: #6b7280;
}
/* Right image */
.rs-bv-image-wrap {
position: relative;
}
.rs-bv-image {
border-radius: 20px;
overflow: hidden;
box-shadow: 0 16px 40px rgba(10, 83, 145, 0.15);
background: #092db6;
}
.rs-bv-image img {
width: 100%;
height: 380px;
object-fit: cover;
display: block;
transition: transform 0.6s ease;
}
.rs-bv-image:hover img {
transform: scale(1.03);
}
.rs-bv-floating-badge {
position: absolute;
top: 16px;
left: 16px;
background: #ffffff;
padding: 10px 16px;
border-radius: 10px;
box-shadow: 0 10px 24px rgba(10, 83, 145, 0.15);
text-align: center;
min-width: 90px;
}
.rs-bv-floating-badge strong {
display: block;
font-family: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
font-size: 24px;
color: #6b7280;
font-weight: 400;
line-height: 1;
margin-bottom: 2px;
}
.rs-bv-floating-badge span {
display: block;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
color: #6b7280;
}
/* Steps row */
.rs-bv-steps {
margin-top: 32px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.rs-bv-step {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 14px 18px;
background: #ffffff;
border: 1px solid rgba(10, 83, 145, 0.10);
border-radius: 12px;
box-shadow: 0 4px 12px rgba(10, 83, 145, 0.04);
text-decoration: none;
color: inherit;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.rs-bv-step:hover {
transform: translateY(-3px);
box-shadow: 0 16px 32px rgba(10, 83, 145, 0.10);
border-color: rgba(11, 45, 190, 0.30);
color: inherit;
}
.rs-bv-step-num {
font-family: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
font-size: 24px;
color: #0B2DBE;
line-height: 1;
flex-shrink: 0;
padding-top: 2px;
}
.rs-bv-step-body h3 {
margin: 0 0 4px;
font-size: 20px;
font-weight: 500;
color: #5f5c5c;
display: inline-flex;
align-items: center;
gap: 6px;
}
.rs-bv-step-icon {
width: 16px;
height: 16px;
color: #0B2DBE;
flex-shrink: 0;
}
.rs-bv-step-body p {
margin: 0;
font-size: 13px;
color: #6b7280;
line-height: 1.45;
}
/* Tablet */
@media (max-width: 991px) {
.rs-bv-section {
padding: 40px 0;
}
.rs-bv-grid {
grid-template-columns: 1fr;
gap: 28px;
}
.rs-bv-heading {
font-size: 36px;
}
.rs-bv-image img {
height: 320px;
}
.rs-bv-steps {
grid-template-columns: 1fr;
margin-top: 24px;
}
}
@media (max-width: 575px) {
.rs-book-valuation {
padding: 40px 0;
}
.rs-bv-heading {
font-size: 32px;
}
.rs-bv-image {
height: 340px;
}
.rs-bv-image img {
height: 100%;
}
.rs-bv-cta {
width: 100%;
justify-content: center;
}
.rs-bv-stats {
gap: 28px;
}
.rs-bv-stat strong {
font-size: 28px;
}
.rs-bv-floating-badge {
top: 16px;
left: 16px;
padding: 10px 14px;
min-width: 80px;
}
.rs-bv-floating-badge strong {
font-size: 22px;
}
.rs-bv-submit {
width: 100%;
}
}
/* =========================================================================
MOBILE NAV - aligned with desktop navbar
Adds: section group labels, CTA button, top-bar quick links, footer.
All colors/spacing match .main-menu-list conventions.
========================================================================= */
.mobile-nav-content {
padding: 28px 0 32px;
}
.mobile-nav-content .logo-box {
padding: 0 20px 20px;
}
.mobile-nav-container {
padding: 0;
}
/* Base list tweaks - crisper separators, no hover lag */
ul.mobile-menu-list {
margin: 18px 0 0 !important;
padding: 0 !important;
list-style: none;
}
ul.mobile-menu-list>li {
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
position: relative;
transition: background .25s ease;
}
ul.mobile-menu-list>li:hover,
ul.mobile-menu-list>li.expanded {
background: rgba(255, 255, 255, 0.04);
}
ul.mobile-menu-list>li>a {
font-size: 15px !important;
line-height: 1.3 !important;
font-weight: 500;
color: #fff;
padding: 14px 20px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
letter-spacing: 0.2px;
min-height: 50px;
text-decoration: none;
}
/* Submenu container - clean indent, no overflow */
ul.mobile-menu-list .dropdown>ul {
background: rgba(0, 0, 0, 0.18);
margin: 0;
padding: 6px 0 10px !important;
list-style: none;
display: none;
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
ul.mobile-menu-list .dropdown>ul>li {
border: 0;
}
ul.mobile-menu-list .dropdown>ul>li>a {
font-size: 14px !important;
font-weight: 400;
line-height: 1.4 !important;
color: rgba(255, 255, 255, 0.85);
padding: 10px 38px 10px 22px !important;
display: block;
transition: color .2s ease, background .2s ease;
}
ul.mobile-menu-list .dropdown>ul>li>a:hover,
ul.mobile-menu-list .dropdown>ul>li>a:focus {
color: #fff;
background: rgba(255, 255, 255, 0.06);
}
/* Sub-section header inside Services dropdown ("Our Services" / "Browse by Sector") */
ul.mobile-menu-list .menu-group-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 1.2px;
text-transform: uppercase;
color: rgba(200, 245, 208, 0.9);
padding: 12px 22px 6px 22px;
pointer-events: none;
user-select: none;
}
ul.mobile-menu-list .menu-group-label:not(:first-child) {
margin-top: 6px;
border-top: 1px dashed rgba(255, 255, 255, 0.10);
padding-top: 14px;
}
/* Chevron button injected by custom.js - align + style */
ul.mobile-menu-list .menu-item-has-children>a button {
position: static !important;
transform: none !important;
width: 28px;
height: 28px;
min-width: 28px;
padding: 0;
margin-right: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.10);
border: 0;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
transition: transform .25s ease, background .2s ease;
}
ul.mobile-menu-list .menu-item-has-children>a button:hover {
background: rgba(255, 255, 255, 0.18);
}
ul.mobile-menu-list .menu-item-has-children>a button.expanded {
transform: rotate(90deg) !important;
background: #0B2DBE;
}
ul.mobile-menu-list .menu-item-has-children>a button i {
pointer-events: none;
}
/* Primary CTA - mirrors desktop "Get In Touch +" */
.mobile-nav-cta {
padding: 22px 22px 8px;
}
.mobile-cta-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
background: #fff;
color: #092db6;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.2px;
padding: 14px 22px;
border-radius: 8px;
text-decoration: none;
border: 2px solid #fff;
transition: background .25s ease, color .25s ease, transform .2s ease;
}
.mobile-cta-btn:hover,
.mobile-cta-btn:focus {
background: #0B2DBE;
color: #fff;
border-color: #0B2DBE;
transform: translateY(-1px);
}
.mobile-cta-btn span {
font-size: 18px;
font-weight: 400;
line-height: 1;
}
/* Top-bar quick links block */
ul.mobile-nav-quicklinks {
list-style: none;
margin: 18px 0 0;
padding: 14px 10px 4px;
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
ul.mobile-nav-quicklinks>li {
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
ul.mobile-nav-quicklinks>li:last-child {
border-bottom: 0;
}
ul.mobile-nav-quicklinks>li>a {
display: flex;
align-items: center;
gap: 12px;
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
font-weight: 500;
padding: 13px 12px;
text-decoration: none;
}
ul.mobile-nav-quicklinks>li>a:hover,
ul.mobile-nav-quicklinks>li>a:focus {
color: #fff;
background: rgba(255, 255, 255, 0.05);
border-radius: 6px;
}
ul.mobile-nav-quicklinks svg {
flex-shrink: 0;
opacity: 0.85;
}
ul.mobile-nav-quicklinks .mobile-ql-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #23d46c;
box-shadow: 0 0 0 4px rgba(35, 212, 108, 0.25);
flex-shrink: 0;
animation: mobileQlBlink 1.6s ease-in-out infinite;
}
@keyframes mobileQlBlink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.4;
}
}
/* "Our Offices" nested list inside quicklinks */
ul.mobile-nav-quicklinks .dropdown>ul {
background: rgba(0, 0, 0, 0.18);
list-style: none;
margin: 0;
padding: 4px 0 6px;
display: none;
}
ul.mobile-nav-quicklinks .dropdown>ul>li>a {
font-size: 13px;
padding: 9px 42px 9px 12px;
color: rgba(255, 255, 255, 0.8);
display: block;
}
ul.mobile-nav-quicklinks .menu-item-has-children>a button {
position: static !important;
transform: none !important;
width: 24px;
height: 24px;
min-width: 24px;
margin-right: auto;
border-radius: 50%;
background: rgba(255, 255, 255, 0.10);
border: 0;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
transition: transform .25s ease, background .2s ease;
}
ul.mobile-nav-quicklinks .menu-item-has-children>a button.expanded {
transform: rotate(90deg) !important;
background: #0B2DBE;
}
/* Footer copyright */
.mobile-nav-foot {
padding: 20px 22px 0;
font-size: 12px;
color: rgba(255, 255, 255, 0.55);
text-align: center;
letter-spacing: 0.3px;
}
/* Close button - slim tap target, cleaner position */
.mobile-nav-close {
top: 42px !important;
left: 18px !important;
width: 20px !important;
height: 20px !important;
}
.mobile-nav-close span {
width: 2px !important;
background-color: #fff !important;
}
/* =========================================================================
MOBILE NAV - brand-blue theme override, polish + smooth expand
Overrides the default red (--uniqo-secondary) drawer to use brand blue.
Hides the in-drawer CTA so mobile stays uncluttered.
========================================================================= */
/* Blue drawer background (overrides var(--uniqo-secondary) = red) */
.mobile-nav-content {
background: linear-gradient(180deg, #092db6 0%, #0b4274 100%) !important;
padding: 24px 0 32px !important;
}
/* Logo area - centered, breathable, white brand mark */
.mobile-nav-logo {
padding: 10px 22px 6px !important;
display: flex;
align-items: center;
}
.mobile-nav-logo a {
display: inline-flex;
align-items: center;
text-decoration: none;
}
.mobile-brand-mark {
width: 160px;
height: auto;
display: block;
}
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Hide the primary CTA inside the drawer (requested) */
.mobile-nav-cta {
display: none !important;
}
/* Smooth submenu expand using max-height transition */
ul.mobile-menu-list .dropdown>ul,
ul.mobile-nav-quicklinks .dropdown>ul {
overflow: hidden;
transition: max-height .35s cubic-bezier(.4, 0, .2, 1);
}
/* Chevron pill: blue-on-white accent instead of red */
ul.mobile-menu-list .menu-item-has-children>a button.expanded,
ul.mobile-nav-quicklinks .menu-item-has-children>a button.expanded {
background: #ffffff !important;
color: #092db6 !important;
}
/* Group label accent - soft white instead of mint/green */
ul.mobile-menu-list .menu-group-label {
color: rgba(255, 255, 255, 0.72);
}
/* =========================================================================
Hamburger (header-menu-collaps) - smaller, cleaner
Applies only at the mobile breakpoint where it's visible.
========================================================================= */
@media (max-width: 1199px) {
.header-menu-collaps {
row-gap: 6px !important;
}
.header-menu-collaps span {
width: 33px !important;
height: 2px !important;
}
.header-menu-collaps span:nth-child(2) {
width: 22px !important;
}
.header-menu-collaps span:nth-child(3) {
width: 12px !important;
}
/* Hide desktop "Get In Touch +" button from mobile navbar */
.main-menu-right .btn-theme,
.main-menu-right .btn-light {
display: none !important;
}
}
/* ============================================================
SERVICES SECTION V5, SPLIT DARK/LIGHT CARDS
============================================================ */
.rs-svc-v3 {
background: linear-gradient(180deg, #f6f9fd 0%, #ffffff 70%);
}
.rs-svc-v3::after {
background: radial-gradient(circle, rgba(10, 83, 145, .10), transparent 65%);
}
/* --- Header redesign (clean & minimal) --- */
.rs-svc-v3-top {
align-items: flex-end !important;
gap: 60px !important;
}
.rs-svc-v3-left {
max-width: 720px;
}
/* Eyebrow tag: thin blue line + uppercase label */
.rs-svc-v3-tag {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
background: rgba(9, 45, 182, .06) !important;
border: 1px solid rgba(9, 45, 182, .16) !important;
padding: 7px 18px !important;
border-radius: 999px !important;
margin-bottom: 22px !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 2.4px !important;
color: #092db6 !important;
text-transform: uppercase;
}
.rs-svc-v3-tag svg {
display: none !important;
}
/* Dot accent */
.rs-svc-v3-tag .rs-svc-v3-tag-line {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: #092db6;
position: relative;
}
.rs-svc-v3-tag .rs-svc-v3-tag-line::after {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
border: 1px solid rgba(9, 45, 182, .28);
}
.rs-svc-v3-tag .rs-svc-v3-tag-text {
display: inline-block;
}
/* Title, uniform typography, single soft blue accent */
.rs-svc-v3-title {
font-size: 44px !important;
font-weight: 500 !important;
color: #0a1f3d !important;
line-height: 1.2 !important;
letter-spacing: -0.6px !important;
margin: 0 0 20px !important;
}
.rs-svc-v3-title span {
color: #092db6 !important;
background: none !important;
-webkit-background-clip: initial !important;
-webkit-text-fill-color: initial !important;
background-clip: initial !important;
font-style: normal;
font-weight: 500;
padding: 0;
}
.rs-svc-v3-title span::after {
content: none !important;
}
/* Description, plain, balanced */
.rs-svc-v3-desc {
font-size: 15.5px !important;
color: #64748b !important;
line-height: 1.75 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
max-width: 580px;
}
/* Right column = nav block only */
.rs-svc-v3-right {
display: flex !important;
align-items: flex-end !important;
justify-content: flex-end !important;
flex-shrink: 0;
max-width: none !important;
gap: 0 !important;
}
.rs-svc-v3-nav {
display: inline-flex !important;
align-items: center !important;
gap: 14px !important;
padding: 0 !important;
background: transparent;
border-radius: 0;
box-shadow: none;
border: 0;
}
.rs-svc-v3-btn {
width: 44px !important;
height: 44px !important;
border-radius: 50% !important;
border: 1px solid #e2e8f0 !important;
background: #ffffff !important;
color: #092db6 !important;
transition: background .3s ease, color .3s ease, border-color .3s ease !important;
box-shadow: none !important;
}
.rs-svc-v3-btn:hover {
background: linear-gradient(225deg, #092db6 0%, #2952e8 100%) !important;
color: #ffffff !important;
border-color: #092db6 !important;
transform: none;
box-shadow: none !important;
}
.rs-svc-v3-btn svg {
width: 16px;
height: 16px;
stroke-width: 2;
}
/* Counter + progress, minimal blue */
.rs-svc-v3-progress {
min-width: 100px !important;
gap: 8px !important;
padding: 0 4px !important;
}
.rs-svc-v3-count {
color: #94a3b8 !important;
font-size: 13px !important;
letter-spacing: 1px !important;
}
.rs-svc-v3-count .rs-svc-v3-current {
color: #0a1f3d !important;
font-size: 18px !important;
font-weight: 700 !important;
}
.rs-svc-v3-progress-bar {
background: #e2e8f0 !important;
height: 2px !important;
}
.rs-svc-v3-progress-fill {
background: #092db6 !important;
}
@media (max-width: 991px) {
.rs-svc-v3-top {
flex-direction: column !important;
align-items: flex-start !important;
gap: 30px !important;
text-align: right !important;
}
.rs-svc-v3-left {
width: 100%;
min-width: 0;
max-width: 100%;
text-align: right !important;
}
.rs-svc-v3-title {
font-size: 34px !important;
}
.rs-svc-v3-desc {
max-width: 100%;
}
.rs-svc-v3-right {
width: 100%;
justify-content: flex-start !important;
}
}
@media (max-width: 575px) {
.rs-svc-v3-title {
font-size: 26px !important;
}
.rs-svc-v3-desc {
font-size: 14px !important;
}
.rs-svc-v3-tag {
font-size: 11px !important;
letter-spacing: 2.2px !important;
}
.rs-svc-v3-tag .rs-svc-v3-tag-line {
width: 7px;
}
.rs-svc-v3-nav {
gap: 10px !important;
}
.rs-svc-v3-btn {
width: 40px !important;
height: 40px !important;
}
}
.rs-svc-v3 .rs-svc-v3-inner,
.rs-svc-v3 .rs-svc-v3-slider {
position: relative;
z-index: 1;
}
/* Progress bar + animated count */
.rs-svc-v3-progress {
display: flex;
flex-direction: column;
justify-content: center;
gap: 8px;
min-width: 130px;
padding: 0 4px;
}
.rs-svc-v3-count {
font-size: 12px;
font-weight: 600;
color: #94a3b8;
letter-spacing: 1.5px;
font-variant-numeric: tabular-nums;
display: flex;
align-items: baseline;
gap: 4px;
line-height: 1;
}
.rs-svc-v3-count .rs-svc-v3-current {
color: #092db6;
font-size: 18px;
font-weight: 800;
display: inline-block;
transition: transform .35s cubic-bezier(.5, 1.6, .4, 1), opacity .25s ease;
will-change: transform, opacity;
}
.rs-svc-v3-count.is-flipping .rs-svc-v3-current {
transform: translateY(-6px);
opacity: 0;
}
.rs-svc-v3-count .rs-svc-v3-sep {
color: #cbd5e1;
}
.rs-svc-v3-progress-bar {
width: 100%;
height: 3px;
background: rgba(10, 83, 145, 0.10);
border-radius: 999px;
overflow: hidden;
position: relative;
}
.rs-svc-v3-progress-fill {
display: block;
height: 100%;
width: 14.2857%;
background: linear-gradient(270deg, #092db6, #1e88e5, #3b9eff);
border-radius: 999px;
transition: width .65s cubic-bezier(.25, .46, .45, .94);
}
@media (max-width: 991px) {
.rs-svc-v3-progress {
min-width: 110px;
}
}
@media (max-width: 575px) {
.rs-svc-v3-progress {
min-width: 90px;
}
.rs-svc-v3-count {
font-size: 11px;
}
.rs-svc-v3-count .rs-svc-v3-current {
font-size: 16px;
}
}
.rs-svc-v3 .services-card {
position: relative;
display: flex !important;
flex-direction: column !important;
background: #ffffff !important;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border: 1px solid #e4ebf3 !important;
border-radius: 20px !important;
min-height: 450px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
transition: transform .55s cubic-bezier(.2, .8, .2, 1),
box-shadow .55s cubic-bezier(.2, .8, .2, 1),
border-color .4s ease;
}
.rs-svc-v3 .services-card::before {
content: none;
}
.rs-svc-v3 .services-card::after {
content: none;
}
.rs-svc-v3 .services-card:hover {
/* transform: translateY(-12px); */
/* box-shadow: 0 30px 60px rgba(10, 83, 145, 0.22); */
background: #ffffff !important;
border-color: rgba(10, 83, 145, 0.22) !important;
}
/* --- Image hero zone --- */
.rs-svc-v3 .services-card .rs-service-icon {
position: relative;
padding: 0 !important;
background: #eef2f7;
height: 220px;
overflow: hidden;
text-align: right;
z-index: 1;
}
.rs-svc-v3 .services-card .rs-svc-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .8s cubic-bezier(.2, .8, .2, 1);
z-index: 1;
}
.rs-svc-v3 .services-card:hover .rs-svc-img {
transform: scale(1.07);
}
.rs-svc-v3 .services-card .rs-service-icon::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(10, 31, 61, 0) 40%, rgba(10, 31, 61, 0.55) 75%, rgba(10, 31, 61, 0.85) 100%);
z-index: 2;
pointer-events: none;
transition: background .4s ease;
}
.rs-svc-v3 .services-card:hover .rs-service-icon::after {
background: linear-gradient(180deg, rgba(10, 31, 61, 0) 30%, rgba(10, 31, 61, 0.65) 70%, rgba(10, 31, 61, 0.90) 100%);
}
/* Legacy icon-badge from earlier iteration, hide if any markup still references it */
.rs-svc-v3 .services-card .rs-svc-icon-badge {
display: none !important;
}
.rs-svc-v3 .services-card .rs-svg-icon {
width: 32px !important;
height: 32px !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
}
/* Title sits over the image with the gradient backdrop */
.rs-svc-v3 .services-card h3 {
position: absolute;
right: 24px;
left: 24px;
bottom: 20px;
z-index: 3;
font-size: 22px;
font-weight: 600;
color: #ffffff !important;
line-height: 1.3;
margin: 0 !important;
letter-spacing: -0.3px;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.rs-svc-v3 .services-card h3 br {
display: inline;
}
/* --- Bottom body zone (light) --- */
.rs-svc-v3 .services-card .services-card-bottom {
flex: 1;
background: #ffffff !important;
backdrop-filter: none;
-webkit-backdrop-filter: none;
padding: 26px 24px 16px !important;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: background .35s ease;
}
.rs-svc-v3 .services-card:hover .services-card-bottom {
background: #f7fafd !important;
}
.rs-svc-v3 .services-card-bottom ul {
margin: 0 0 8px;
padding: 0;
list-style: none;
}
.rs-svc-v3 .services-card-bottom ul li {
position: relative;
color: #334155;
font-size: 14px;
font-weight: 500;
padding: 0 26px 12px 0;
}
.rs-svc-v3 .services-card-bottom ul li::before {
content: "";
position: absolute;
right: 0;
top: 4px;
width: 16px;
height: 16px;
border-radius: 4px;
background: linear-gradient(225deg, #0B2DBE 0%, #f23354 100%);
box-shadow: 0 2px 6px rgba(11, 45, 190, 0.25);
}
.rs-svc-v3 .services-card-bottom ul li::after {
content: "";
position: absolute;
right: 4px;
top: 8px;
width: 8px;
height: 4px;
border-right: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
transform: rotate(-45deg);
}
/* CTA button */
.rs-svc-v3 .services-card .service-details-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px;
width: 100%;
background: transparent !important;
color: #2952e8 !important;
padding: 16px 0 14px !important;
margin: 4px 0 6px !important;
font-weight: 600;
font-size: 14px;
letter-spacing: .4px;
text-transform: uppercase;
border: 0;
border-top: 1px solid rgba(10, 83, 145, 0.12);
border-radius: 0;
transition: color .35s ease;
}
.rs-svc-v3 .services-card .service-details-btn::after {
content: "" !important;
display: none !important;
}
.rs-svc-v3 .services-card .service-details-btn .rs-svc-arrow {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(225deg, #092db6 0%, #2952e8 100%);
color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform .45s cubic-bezier(.2, .8, .2, 1),
background .35s ease,
box-shadow .35s ease;
box-shadow: 0 6px 14px rgba(10, 83, 145, 0.30);
}
.rs-svc-v3 .services-card .service-details-btn .rs-svc-arrow::before {
content: "→";
font-size: 14px;
font-weight: 700;
line-height: 1;
}
.rs-svc-v3 .services-card:hover .service-details-btn {
color: #0B2DBE !important;
}
.rs-svc-v3 .services-card:hover .service-details-btn .rs-svc-arrow {
background: #0B2DBE;
transform: translateX(-6px) rotate(-12deg);
box-shadow: 0 8px 20px rgba(11, 45, 190, 0.36);
}
/* Featured-card overrides removed, all cards share the same look now. */
.rs-featured-badge {
display: none !important;
}
@media (max-width: 575px) {
.rs-svc-v3 .services-card {
min-height: 430px;
}
.rs-svc-v3 .services-card .rs-service-icon {
height: 180px;
}
.rs-svc-v3 .services-card h3 {
font-size: 19px;
right: 18px;
left: 18px;
bottom: 16px;
}
}
/* ============================================================
WHY CHOOSE V4, CLEAN PREMIUM CARDS
============================================================ */
.rs-wcu-swiper .swiper-slide {
padding: 10px 4px;
}
/* --- Card --- */
.rs-wcu-card {
width: 100%;
position: relative;
background: #ffffff;
border-radius: 18px;
padding: 36px 32px 34px;
display: flex;
flex-direction: column;
box-shadow: 0 18px 40px rgba(8, 22, 48, 0.18);
border: 1px solid rgba(255, 255, 255, 0.6);
overflow: hidden;
transition: transform .45s cubic-bezier(.2, .8, .2, 1),
box-shadow .45s ease;
}
.rs-wcu-card:hover {
transform: translateY(-6px);
box-shadow: 0 28px 56px rgba(8, 22, 48, 0.28);
}
/* --- Top row: icon (left) + index (right) --- */
.rs-wcu-card-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 26px;
}
.rs-wcu-icon {
width: 52px;
height: 52px;
border-radius: 12px;
background: linear-gradient(225deg, #0B2DBE 0%, #ff405c 100%);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 20px rgba(11, 45, 190, 0.25);
}
.rs-wcu-icon svg {
width: 24px;
height: 24px;
stroke: #ffffff;
stroke-width: 1.7;
fill: none;
}
/* Small text-style number (replaces the big outline number) */
.rs-wcu-num {
font-size: 12px;
font-weight: 600;
color: #94a3b8;
letter-spacing: 2.4px;
font-family: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
text-transform: uppercase;
line-height: 1;
position: static;
background: none;
-webkit-text-stroke: 0;
pointer-events: auto;
}
.rs-wcu-num::before {
content: "";
color: #cbd5e1;
}
/* --- Text --- */
.rs-wcu-card-title {
font-size: 21px;
font-weight: 600;
color: #0a1f3d;
line-height: 1.35;
margin: 0 0 14px;
letter-spacing: -0.2px;
}
.rs-wcu-card-desc {
font-size: 14.5px;
color: #64748b;
line-height: 1.7;
margin: 0;
}
/* --- Accent line at the bottom --- */
.rs-wcu-card-bar {
display: block;
width: 36px;
height: 2px;
background: linear-gradient(270deg, #0B2DBE 0%, #ff405c 100%);
border-radius: 999px;
margin-top: 22px;
transition: width .45s cubic-bezier(.2, .8, .2, 1);
}
.rs-wcu-card:hover .rs-wcu-card-bar {
width: 72px;
}
/* --- Responsive --- */
@media (max-width: 575px) {
.rs-wcu-card {
padding: 28px 24px 26px;
border-radius: 16px;
}
.rs-wcu-icon {
width: 46px;
height: 46px;
border-radius: 11px;
}
.rs-wcu-icon svg {
width: 22px;
height: 22px;
}
.rs-wcu-card-title {
font-size: 19px;
}
}
/* ============================================================
STRATEGIC VALUATIONS FOR BANKING EXCELLENCE
============================================================ */
.rs-bank-section {
padding: 80px 0;
background: #ffffff;
}
.rs-bank-inner {
width: 100%;
padding: 0 3px;
}
.rs-bank-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
margin-bottom: 25px;
flex-wrap: wrap;
padding: 0 30px;
}
.rs-bank-title {
font-family: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
font-size: 48px;
font-weight: 400;
color: #092db6;
line-height: 1.15;
margin: 0;
letter-spacing: -0.3px;
max-width: 720px;
}
.rs-bank-logo {
flex-shrink: 0;
display: inline-flex;
align-items: center;
}
.rs-bank-logo img {
height: 70px;
width: auto;
max-width: 220px;
object-fit: contain;
}
.rs-bank-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 16px;
padding: 0 30px;
}
.rs-bank-card {
position: relative;
display: block;
width: 100%;
border-radius: 14px;
overflow: hidden;
height: 460px;
background-color: #1e293b;
background-size: cover;
background-position: center;
isolation: isolate;
transition: transform .5s cubic-bezier(.2, .8, .2, 1),
box-shadow .5s ease;
}
.rs-bank-card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(15, 23, 42, 0.30) 0%, rgba(15, 23, 42, 0.55) 55%, rgba(15, 23, 42, 0.80) 100%);
transition: background .4s ease;
pointer-events: none;
z-index: 1;
}
.rs-bank-card:hover .rs-bank-card-overlay {
background: linear-gradient(180deg, rgba(15, 23, 42, 0.40) 0%, rgba(15, 23, 42, 0.65) 50%, rgba(15, 23, 42, 0.90) 100%);
}
.rs-bank-card-num {
position: absolute;
top: 22px;
right: 22px;
font-size: 64px;
font-weight: 500;
color: #ffffff;
line-height: 1;
letter-spacing: -2px;
font-family: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
z-index: 2;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
pointer-events: none;
}
.rs-bank-card-body {
position: absolute;
right: 22px;
left: 22px;
bottom: 24px;
z-index: 2;
}
.rs-bank-card-title {
font-size: 20px;
font-weight: 600;
color: #ffffff;
margin: 0 0 10px;
line-height: 1.25;
letter-spacing: -0.2px;
}
.rs-bank-card-desc {
font-size: 13px;
color: rgba(255, 255, 255, 0.86);
line-height: 1.55;
margin: 0;
}
.rs-bank-card:hover {
transform: translateY(-6px);
box-shadow: 0 24px 50px rgba(15, 23, 42, 0.30);
}
/* Responsive */
@media (max-width: 1399px) {
.rs-bank-card {
height: 440px;
}
.rs-bank-card-num {
font-size: 56px;
}
}
@media (max-width: 1199px) {
.rs-bank-inner {
padding: 0 40px;
}
.rs-bank-grid {
grid-template-columns: repeat(3, 1fr);
}
.rs-bank-title {
font-size: 40px;
}
.rs-bank-card {
height: 420px;
}
.rs-bank-logo img {
height: 60px;
}
}
@media (max-width: 767px) {
.rs-bank-section {
padding: 60px 0;
}
.rs-bank-inner {
padding: 0 24px;
}
.rs-bank-header {
gap: 20px;
margin-bottom: 36px;
}
.rs-bank-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.rs-bank-title {
font-size: 32px;
}
.rs-bank-card {
height: 380px;
}
.rs-bank-card-num {
font-size: 48px;
top: 18px;
right: 18px;
}
.rs-bank-card-body {
right: 18px;
left: 18px;
bottom: 18px;
}
.rs-bank-card-title {
font-size: 18px;
}
.rs-bank-logo img {
height: 50px;
}
}
@media (max-width: 480px) {
.rs-bank-inner {
padding: 0 16px;
}
.rs-bank-grid {
grid-template-columns: 1fr;
gap: 14px;
}
.rs-bank-card {
height: 320px;
}
}
/* ==================================================================
OUR SERVICES, Expanding image accordion (hover to reveal)
Namespace: .rs-svcacc (lives inside existing .rs-svc-v3 section)
================================================================== */
.rs-svcacc-wrap {
padding: 0;
}
.rs-svcacc {
display: flex;
gap: 0;
height: 650px;
width: 100%;
}
.rs-svcacc-panel {
position: relative;
display: block;
flex: 1 1 0%;
min-width: 0;
overflow: hidden;
border-radius: 0;
text-decoration: none;
color: #fff;
background: #0a1226;
transition: flex-grow .6s cubic-bezier(.22, 1, .36, 1);
will-change: flex-grow;
}
.rs-svcacc-panel.is-active {
flex-grow: 4.4;
}
/* Background image layer */
.rs-svcacc-img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
filter: grayscale(.55) brightness(.72);
transition: filter .6s ease;
}
.rs-svcacc-panel.is-active .rs-svcacc-img {
filter: none;
}
/* Dark gradient for legibility */
.rs-svcacc-shade {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(4, 11, 30, .90) 0%, rgba(6, 16, 40, .42) 46%, rgba(6, 16, 40, .04) 100%);
transition: background .55s ease;
}
.rs-svcacc-panel.is-active .rs-svcacc-shade {
background: linear-gradient(to top, rgba(4, 10, 26, .93) 0%, rgba(9, 45, 182, .30) 60%, rgba(9, 45, 182, .10) 100%);
}
/* Collapsed vertical title */
.rs-svcacc-vtitle {
position: absolute;
right: 50%;
bottom: 74px;
transform: translateX(50%) rotate(180deg);
writing-mode: vertical-rl;
white-space: nowrap;
font-size: 17px;
font-weight: 700;
letter-spacing: .3px;
color: #fff;
text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
transition: opacity .35s ease;
z-index: 2;
}
/* Collapsed mini arrow */
.rs-svcacc-mini {
position: absolute;
right: 50%;
bottom: 22px;
transform: translateX(50%);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
transition: opacity .35s ease;
z-index: 2;
}
.rs-svcacc-mini svg {
width: 24px;
height: 24px;
}
.rs-svcacc-panel.is-active .rs-svcacc-vtitle,
.rs-svcacc-panel.is-active .rs-svcacc-mini {
opacity: 0;
pointer-events: none;
}
/* Expanded content */
.rs-svcacc-body {
position: absolute;
right: 0;
left: 0;
bottom: 0;
display: block;
padding: 30px 34px 32px;
opacity: 0;
transform: translateY(20px);
transition: opacity .5s ease .08s, transform .5s ease .08s;
z-index: 3;
}
.rs-svcacc-panel.is-active .rs-svcacc-body {
opacity: 1;
transform: none;
}
.rs-svcacc-title {
display: block;
font-size: 26px;
font-weight: 700;
line-height: 1.15;
margin: 0 0 16px;
color: #fff;
white-space: nowrap;
}
.rs-svcacc-list {
list-style: none;
margin: 0 0 20px;
padding: 0;
display: flex;
flex-direction: column;
gap: 11px;
}
.rs-svcacc-list li {
position: relative;
padding-right: 18px;
font-size: 15px;
line-height: 1.35;
color: rgba(255, 255, 255, .94);
white-space: nowrap;
}
.rs-svcacc-list li::before {
content: '';
position: absolute;
right: 0;
top: 8px;
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255, 255, 255, .85);
}
.rs-svcacc-more {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 13px;
font-weight: 700;
letter-spacing: .8px;
text-transform: uppercase;
color: #fff;
}
.rs-svcacc-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
flex: none;
transition: transform .3s ease;
}
.rs-svcacc-arrow svg {
width: 24px;
height: 24px;
}
.rs-svcacc-panel.is-active:hover .rs-svcacc-arrow {
transform: translateX(-5px);
}
/* Tablet */
@media (max-width: 1199px) {
.rs-svcacc {
height: 520px;
}
.rs-svcacc-panel.is-active {
flex-grow: 5.2;
}
}
/* Stack on mobile / touch */
@media (max-width: 991px) {
.rs-svcacc-wrap {
padding: 0;
}
.rs-svcacc {
flex-direction: column;
height: auto;
gap: 0;
}
.rs-svcacc-panel {
flex: none;
height: 210px;
border-radius: 0;
}
.rs-svcacc-panel.is-active {
flex-grow: 0;
}
.rs-svcacc-img {
filter: none;
}
.rs-svcacc-shade {
background: linear-gradient(to top, rgba(4, 10, 26, .90) 0%, rgba(9, 45, 182, .25) 60%, rgba(6, 16, 40, .05) 100%);
}
.rs-svcacc-vtitle,
.rs-svcacc-mini,
.rs-svcacc-list {
display: none;
}
.rs-svcacc-body {
opacity: 1;
transform: none;
padding: 22px 24px;
}
.rs-svcacc-title {
font-size: 21px;
margin-bottom: 12px;
white-space: normal;
}
}
@media (max-width: 575px) {
.rs-svcacc-panel {
height: 190px;
}
.rs-svcacc-title {
font-size: 19px;
}
}
/* =========================================================
Company Journey, 49 years (rs-jr-*)
Markup: includes/establishment-journey.php
Static section, no scroll animation. Built from existing homepage tokens:
the dot-pill eyebrow and 44px title from "Our Services", DM Sans numerals,
the underlined arrow link from "Market Reports", hairline columns like "Vision & Mission", and the brand
gradient for the "49 years" block.
========================================================= */
.rs-jr {
--rs-jr-blue: #092db6;
--rs-jr-ink: #0a1f3d;
--rs-jr-rule: rgba(15, 31, 51, .14);
position: relative;
padding: 84px 0 80px;
background: #fff;
overflow: hidden;
}
.rs-jr-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: 80px;
align-items: center;
}
.rs-jr-copy {
max-width: 520px;
}
/* ---------- Copy ---------- */
.rs-jr-tag {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 7px 18px;
margin-bottom: 22px;
background: rgba(9, 45, 182, .06);
border: 1px solid rgba(9, 45, 182, .16);
border-radius: 999px;
font-size: 12px;
font-weight: 700;
line-height: 1.5;
letter-spacing: 2.4px;
text-transform: uppercase;
color: var(--rs-jr-blue);
}
.rs-jr-tag-dot {
position: relative;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--rs-jr-blue);
}
.rs-jr-tag-dot::after {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
border: 1px solid rgba(9, 45, 182, .28);
}
.rs-jr-title {
margin: 0 0 20px;
font-size: 44px;
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.6px;
color: var(--rs-jr-ink);
text-wrap: balance;
}
.rs-jr-title span {
color: var(--rs-jr-blue);
}
.rs-jr-lead {
max-width: 500px;
margin: 0 0 30px;
font-size: 16px;
line-height: 1.75;
color: #4b5563;
}
.rs-jr-link {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 0 0 6px;
color: #14161c;
border-bottom: 1px solid #b9bfca;
font-size: 15px;
font-weight: 500;
text-decoration: none;
transition: color .25s ease, border-color .25s ease;
}
.rs-jr-link:hover {
color: var(--rs-jr-blue);
border-color: var(--rs-jr-blue);
}
.rs-jr-link__arrow {
display: block;
width: 22px;
height: auto;
}
/* ---------- Photo + "49 years" block ---------- */
.rs-jr-media {
position: relative;
margin: 0;
}
.rs-jr-media img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 5 / 4;
object-fit: cover;
object-position: 50% 30%;
background: #eef1f7;
}
/* Solid block in the brand gradient, overlapping the photo's bottom-left corner */
.rs-jr-badge {
position: absolute;
right: -28px;
bottom: -28px;
display: flex;
flex-direction: column;
min-width: 236px;
padding: 28px 34px 26px;
color: #fff;
background: linear-gradient(210deg, #0E3FA8 0%, #1436D8 48%, #0B2DBE 100%);
}
.rs-jr-badge__num {
font-family: var(--font-montserrat, "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif);
font-size: 124px;
font-weight: 500;
line-height: .8;
letter-spacing: -0.04em;
font-variant-numeric: lining-nums;
}
.rs-jr-badge__unit {
margin-top: 20px;
font-size: 14px;
font-weight: 600;
line-height: 1;
letter-spacing: 3px;
text-transform: uppercase;
}
.rs-jr-badge__since {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid rgba(255, 255, 255, .28);
font-size: 12px;
line-height: 1;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(255, 255, 255, .82);
}
/* ---------- Supporting facts (hairlines, no cards) ---------- */
.rs-jr-facts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin: 76px 0 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--rs-jr-rule);
}
.rs-jr-fact {
padding: 30px 36px 0;
border-right: 1px solid var(--rs-jr-rule);
}
.rs-jr-fact:first-child {
padding-right: 0;
border-right: 0;
}
.rs-jr-fact-label {
display: block;
margin: 0 0 10px;
font-size: 12px;
font-weight: 700;
letter-spacing: 2.4px;
text-transform: uppercase;
color: var(--rs-jr-blue);
}
.rs-jr-fact p {
max-width: 340px;
margin: 0;
font-size: 15px;
line-height: 1.65;
color: #4b5563;
}
/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
.rs-jr {
padding: 72px 0 68px;
}
.rs-jr-grid {
column-gap: 56px;
}
.rs-jr-title {
font-size: 38px;
}
.rs-jr-badge {
right: -20px;
bottom: -20px;
min-width: 208px;
padding: 24px 28px 22px;
}
.rs-jr-badge__num {
font-size: 104px;
}
.rs-jr-fact {
padding: 28px 28px 0;
}
}
@media (max-width: 991px) {
.rs-jr-grid {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"head"
"media"
"body";
row-gap: 36px;
}
/* head / body become direct grid items so the photo can sit between them */
.rs-jr-copy {
display: contents;
}
.rs-jr-head {
grid-area: head;
}
.rs-jr-media {
grid-area: media;
}
.rs-jr-body {
grid-area: body;
}
.rs-jr-media img {
aspect-ratio: 16 / 10;
}
.rs-jr-badge {
right: 0;
bottom: 0;
}
.rs-jr-title {
font-size: 34px;
}
.rs-jr-lead {
max-width: 620px;
}
.rs-jr-facts {
margin-top: 56px;
}
}
@media (max-width: 767px) {
.rs-jr {
padding: 52px 0 48px;
}
.rs-jr-grid {
row-gap: 26px;
}
.rs-jr-tag {
margin-bottom: 16px;
}
.rs-jr-title {
margin-bottom: 0;
font-size: 28px;
}
.rs-jr-media img {
aspect-ratio: 4 / 3;
}
.rs-jr-badge {
min-width: 0;
padding: 18px 22px 16px;
}
.rs-jr-badge__num {
font-size: 76px;
}
.rs-jr-badge__unit {
margin-top: 14px;
font-size: 12px;
letter-spacing: 2.6px;
}
.rs-jr-badge__since {
margin-top: 10px;
padding-top: 10px;
font-size: 11px;
letter-spacing: 1.8px;
}
.rs-jr-lead {
margin-bottom: 22px;
font-size: 15px;
line-height: 1.7;
}
.rs-jr-facts {
grid-template-columns: minmax(0, 1fr);
margin-top: 36px;
}
.rs-jr-fact,
.rs-jr-fact:first-child {
padding: 20px 0;
border-right: 0;
}
.rs-jr-fact+.rs-jr-fact {
border-top: 1px solid var(--rs-jr-rule);
}
.rs-jr-fact:last-child {
padding-bottom: 0;
}
.rs-jr-fact p {
max-width: none;
font-size: 14px;
}
}
@media (max-width: 479px) {
.rs-jr-badge {
padding: 16px 18px 14px;
}
.rs-jr-badge__num {
font-size: 64px;
}
}
/* ============================================================
HOME, About Us as the 49th-anniversary band (.rs-abt2)
Modelled on the official "Celebrating Anniversary" banners.
The band is split down the middle: the Dubai skyline holds the
left half under a deep blue scrim and carries the serif 49
lockup with the years-in-practice note, while the right half is
the moving silk field carrying the tag, the tagline, the gold
script line and the About copy. That split is what gives the
skyline photograph a job, it used to sit on its own below this
band doing nothing.
· Silk: rs-motion.js paints the "silkBanner" preset behind the
content; the gradient on .rs-abt2 is what shows without WebGL
or with reduced motion.
· Fonts: the site own fonts only, Helvetica for the numerals and
the tagline, the body stack for the script line (no extra families).
Entrance + word fill come from rs-motion.js (data-rs-reveal /
data-rs-scrolltext).
============================================================ */
.rs-abt2 {
--abt2-serif: var(--rs-font-heading, "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif);
--abt2-script: var(--rs-font-body, "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif);
--abt2-gold: #e8c675;
position: relative;
overflow: hidden;
padding: 84px 0;
color: #fff;
background:
linear-gradient(242deg, transparent 22%, rgba(255, 255, 255, .07) 31%, transparent 40%),
linear-gradient(232deg, transparent 52%, rgba(255, 255, 255, .06) 60%, transparent 69%),
radial-gradient(90% 80% at 18% 18%, rgba(84, 132, 255, .55) 0%, transparent 62%),
radial-gradient(80% 90% at 92% 100%, rgba(4, 28, 168, .65) 0%, transparent 60%),
linear-gradient(245deg, #0a35e8 0%, #1447f4 46%, #0a30d8 100%);
}
/* ---- the skyline, holding the left half ---- */
.rs-abt2-photo {
position: absolute;
inset: 0 0 0 50%;
z-index: 1;
overflow: hidden;
border-left: 1px solid rgba(255, 255, 255, .3);
}
.rs-abt2-photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 42% 50%;
}
/* the scrim: deep enough on the left for the lockup to read, and
closing towards brand blue at the seam so the two halves meet */
.rs-abt2-photo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(270deg, rgba(3, 14, 72, .9) 0%, rgba(5, 22, 104, .76) 52%, rgba(10, 44, 190, .82) 100%);
}
.rs-abt2 > .container {
position: relative;
z-index: 3;
}
.rs-abt2-defs {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
/* ---- firework bursts (above the photo, so they cross the band) ---- */
.rs-abt2-burst {
position: absolute;
z-index: 2;
color: rgba(176, 202, 255, .55);
pointer-events: none;
animation: rs-abt2-burst 7s ease-in-out infinite;
}
.rs-abt2-burst--a { width: 300px; height: 300px; top: -110px; left: -70px; }
.rs-abt2-burst--b { width: 120px; height: 120px; top: 190px; left: 40px; animation-delay: -2.4s; color: rgba(176, 202, 255, .4); }
.rs-abt2-burst--c { width: 260px; height: 260px; bottom: -140px; left: -80px; animation-delay: -4.2s; }
.rs-abt2-burst--d { width: 150px; height: 150px; top: -60px; right: -40px; animation-delay: -1.2s; color: rgba(176, 202, 255, .34); }
@keyframes rs-abt2-burst {
0%, 100% { transform: scale(.94) rotate(0deg); opacity: .75; }
50% { transform: scale(1.04) rotate(4deg); opacity: 1; }
}
/* ---- the split ---- */
.rs-abt2-split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: clamp(40px, 5vw, 72px);
align-items: center;
}
/* ---- left: the lockup and the years note ----
The lockup is sized to its own content rather than the column, so
YEARS stays tied to the 9 instead of drifting out to the column
edge. The two numerals are one text run, so the pair kerns as a
pair: no overlap, no dropped 9, nothing colliding. The unit comes
from the YEARS IN PRACTICE label beneath, so the numeral is alone. */
.rs-abt2-lockup {
display: block;
width: fit-content;
max-width: 100%;
margin-bottom: 30px;
font-family: var(--abt2-serif);
font-size: clamp(110px, 14vw, 212px);
font-weight: 400;
line-height: .92;
font-variant-numeric: lining-nums;
}
.rs-abt2-digits {
display: block;
letter-spacing: -.035em;
color: #fff;
background-image: linear-gradient(192deg, #ffffff 26%, #edf4ff 60%, #c6daff 100%);
background-repeat: no-repeat;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
/* lifts the numerals off the photograph without a halo */
filter: drop-shadow(0 10px 30px rgba(2, 10, 48, .45));
}
.rs-abt2-stat-label {
display: block;
margin: 0 0 18px;
font-family: var(--rs-font-body, "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif);
font-size: 12px;
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
color: #c4d5ff;
}
.rs-abt2-stat-rule {
display: block;
width: 52px;
height: 1px;
margin-bottom: 18px;
background: var(--abt2-gold);
}
.rs-abt2-stat-desc {
margin: 0;
max-width: 440px;
font-family: var(--rs-font-body, "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif);
font-size: 14.5px;
line-height: 1.75;
color: rgba(255, 255, 255, .8);
}
/* ---- right: tag, tagline, script, About copy ---- */
.rs-abt2-tag {
display: inline-block;
margin: 0 0 22px;
padding: 9px 15px;
border: 1px solid rgba(255, 255, 255, .34);
font-family: var(--rs-font-body, "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif);
font-size: 11.5px;
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
color: #dbe6ff;
}
.rs-abt2 h2.rs-abt2-tagline {
margin: 0;
font-family: var(--abt2-serif) !important;
font-size: clamp(21px, 2vw, 30px);
font-weight: 400;
line-height: 1.3;
letter-spacing: .01em;
text-transform: uppercase;
color: #fff;
}
.rs-abt2-script {
margin: 16px 0 0;
font-family: var(--abt2-script);
font-size: clamp(21px, 2vw, 29px);
font-weight: 400;
letter-spacing: .01em;
line-height: 1.05;
color: var(--abt2-gold);
white-space: nowrap;
}
.rs-abt2-text {
margin-top: 28px;
padding-top: 28px;
border-top: 1px solid rgba(255, 255, 255, .2);
}
.rs-abt2-text p {
margin: 0;
font-family: var(--rs-font-heading, "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif);
font-size: clamp(16.5px, 1.35vw, 20px);
font-weight: 400;
line-height: 1.68;
letter-spacing: -.004em;
color: #fff;
/* scroll fill on blue: words wait faint and turn white as they pass */
--rs-st-dim: rgba(255, 255, 255, .32);
--rs-st-lit: #fff;
}
.rs-abt2-text p strong {
font-weight: 400;
color: var(--abt2-gold);
--rs-st-lit: var(--abt2-gold);
}
/* ---- tablet and below: the photo becomes the whole field ---- */
@media (max-width: 991px) {
.rs-abt2 {
padding: 68px 0;
}
.rs-abt2-photo {
inset: 0;
border-left: 0;
}
.rs-abt2-photo::after {
background: linear-gradient(190deg, rgba(5, 20, 92, .9) 0%, rgba(8, 34, 152, .93) 100%);
}
.rs-abt2-split {
grid-template-columns: minmax(0, 1fr);
row-gap: 38px;
}
.rs-abt2-lockup {
margin-bottom: 26px;
font-size: clamp(104px, 17vw, 176px);
}
.rs-abt2-stat-desc {
max-width: 640px;
}
.rs-abt2-burst--b,
.rs-abt2-burst--d {
display: none;
}
}
/* ---- phone ---- */
@media (max-width: 767px) {
.rs-abt2 {
padding: 54px 0;
}
.rs-abt2-lockup {
font-size: clamp(84px, 30vw, 128px);
margin-bottom: 22px;
}
.rs-abt2 h2.rs-abt2-tagline {
font-size: min(5.4vw, 22px);
}
.rs-abt2-script {
margin-top: 10px;
font-size: 19px;
}
.rs-abt2-text {
margin-top: 22px;
padding-top: 22px;
}
.rs-abt2-text p {
font-size: 16px;
}
.rs-abt2-burst--a { width: 200px; height: 200px; top: -80px; left: -70px; }
.rs-abt2-burst--c { width: 180px; height: 180px; bottom: -100px; left: -70px; }
}
@media (prefers-reduced-motion: reduce) {
.rs-abt2-burst {
animation: none;
}
}
/* ============================================================
HOME, About: the H1 block and key facts (.rs-abx--intro)
Sits under the awards strip and carries the page H1 with the
four headline figures. The Dubai skyline that used to follow
this block on its own now holds the left half of the About Us
band (.rs-abt2), so the expanding-photo rules went with it.
============================================================ */
.rs-abx {
background: #fff;
padding: 0 0 84px;
overflow: hidden;
}
.rs-abx-info {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
gap: 90px;
align-items: start;
padding: 70px 0 56px;
}
.rs-abx .rs-abx-title {
margin: 0;
font-size: clamp(26px, 2.5vw, 38px);
font-weight: 400;
line-height: 1.24;
letter-spacing: -.02em;
color: #14193f;
text-transform: none;
}
.rs-abx-copy {
margin: 0;
font-size: 16px;
line-height: 1.85;
color: #5b6478;
}
.rs-abx-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 34px 44px;
}
.rs-abx-stat {
border-top: 1px solid #e2e8f0;
padding-top: 24px;
}
.rs-abx-stat-num {
font-family: var(--rs-font-heading, "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif);
font-size: clamp(38px, 3.6vw, 56px);
font-weight: 500;
line-height: 1;
letter-spacing: -1.5px;
color: #14193f;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.rs-abx-stat-num small {
font-family: var(--rs-font-body, "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif);
font-size: 13px;
font-weight: 600;
letter-spacing: .12em;
color: #64748b;
margin-right: 2px;
}
/* Shared: the small asterisk footnote that explains a "4 hrs onwards*" figure.
rs-sections.css is loaded site-wide from includes/common-header.php, so any
page can drop *…
under a stat row. */
.rs-note-ast {
margin: 20px 0 0;
font-size: 12px;
line-height: 1.65;
color: #8792a6;
max-width: 680px;
}
/* asterisk footnote under the stat row: the "4 hrs onwards*" qualifier */
.rs-abx-note {
margin: 30px 0 0;
font-size: 12.5px;
line-height: 1.7;
color: #8792a6;
max-width: 760px;
}
.rs-abx-stat-label {
display: block;
margin-top: 14px;
font-size: 12px;
font-weight: 600;
letter-spacing: .15em;
text-transform: uppercase;
color: #64748b;
}
@media (max-width: 991px) {
.rs-abx {
padding-bottom: 60px;
}
.rs-abx-info {
grid-template-columns: 1fr;
gap: 20px;
padding: 46px 0 40px;
}
.rs-abx-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 575px) {
.rs-abx {
padding-bottom: 44px;
}
.rs-abx-info {
padding: 34px 0 30px;
}
.rs-abx-copy {
font-size: 14.5px;
line-height: 1.75;
}
.rs-abx-stats {
gap: 26px 22px;
}
.rs-abx-stat {
padding-top: 18px;
}
.rs-abx-stat-label {
font-size: 11px;
letter-spacing: .12em;
}
}
/* narrow phones: "onwards*" drops under the figure so the nowrap number
cannot push past its column (the "USD" qualifier is left alone) */
@media (max-width: 767px) {
.rs-abx-stat-num .rs-abx-stat-qual {
display: block;
margin-right: 0;
margin-top: 6px;
}
}
/* ============================================================
HOME, Services carousel cards (.rs-svc-car)
Swiper (loop + autoplay) drives it; the row bleeds past the
60px gutters so the neighbouring cards peek in at both ends.
============================================================ */
.rs-svc-v3-left {
flex: 0 0 auto;
}
.rs-svc-v3-top {
flex-wrap: nowrap;
}
.rs-svc-v3-right {
flex: 1 1 0;
min-width: 0;
gap: 32px !important;
}
.rs-svc-v3-right .rs-svc-v3-desc {
flex: 0 1 580px;
min-width: 0;
}
.rs-svc-v3-nav {
display: flex;
align-items: center;
gap: 14px;
flex-shrink: 0;
}
@media (max-width: 1199px) {
.rs-svc-v3-right {
flex-wrap: wrap;
gap: 18px !important;
}
.rs-svc-v3-right .rs-svc-v3-desc {
flex: 1 1 100%;
}
}
.rs-svc-car {
overflow: hidden;
padding: 0 60px;
margin-top: 10px;
}
.rs-svc-car .rs-svc-car-swiper {
overflow: visible;
}
.rs-svc-car .swiper-slide {
height: auto;
}
.rs-svc-car-card {
position: relative;
display: block;
height: 100%;
min-height: 440px;
border-radius: 18px;
overflow: hidden;
text-decoration: none;
background: #0a1f3d;
isolation: isolate;
}
.rs-svc-car-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .9s cubic-bezier(.2, .8, .2, 1);
}
.rs-svc-car-card:hover .rs-svc-car-img {
transform: scale(1.07);
}
.rs-svc-car-shade {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(10, 31, 61, .46) 0%, rgba(10, 31, 61, .06) 34%, rgba(10, 31, 61, .12) 55%, rgba(10, 31, 61, .74) 100%);
transition: background-color .5s ease;
}
.rs-svc-car-card:hover .rs-svc-car-shade {
background-color: rgba(9, 45, 182, .16);
}
.rs-svc-car-top {
position: absolute;
top: 26px;
right: 26px;
left: 26px;
z-index: 2;
display: flex;
align-items: center;
gap: 12px;
color: #fff;
font-size: 19px;
font-weight: 600;
line-height: 1.3;
letter-spacing: -.2px;
text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.rs-svc-car-go {
width: 28px;
height: 28px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, .18);
transition: background .35s ease, color .35s ease, transform .35s ease;
}
.rs-svc-car-go svg {
width: 14px;
height: 14px;
}
.rs-svc-car-card:hover .rs-svc-car-go {
background: #fff;
color: #092db6;
transform: translateX(-4px);
}
.rs-svc-car-num {
position: absolute;
left: 22px;
bottom: 16px;
z-index: 2;
font-size: 64px;
font-weight: 700;
line-height: 1;
color: rgba(255, 255, 255, .85);
transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.rs-svc-car-card:hover .rs-svc-car-num {
transform: translateY(-4px);
}
@media (max-width: 991px) {
.rs-svc-car {
padding: 0 24px;
}
.rs-svc-car-card {
min-height: 380px;
}
}
@media (max-width: 575px) {
.rs-svc-car {
padding: 0 16px;
}
.rs-svc-car-card {
min-height: 320px;
}
.rs-svc-car-top {
font-size: 17px;
top: 20px;
right: 20px;
left: 20px;
}
.rs-svc-car-num {
font-size: 48px;
left: 18px;
bottom: 14px;
}
}
/* ============================================================
HOME, Mission, Vision & Values (.rs-mvv)
Heading scrolls normally; the stage below it (tabs · photo with
fluted-glass panes · title + copy) pins to the screen and steps
through the three tabs as you scroll. The inline script in
index.php adds .is-pin when pinning is on (motion allowed, viewport
tall enough) and paints the glass on the canvas.
============================================================ */
.rs-mvv {
padding: 80px 0;
background: #f5f7fc;
}
.rs-mvv-tag {
display: block;
font-size: 12px;
font-weight: 500;
color: #092db6;
letter-spacing: .22em;
text-transform: uppercase;
margin-bottom: 16px;
}
.rs-mvv-rule {
height: 1px;
background: rgba(9, 45, 182, .18);
margin-bottom: 26px;
}
.rs-mvv-heading {
margin: 0 0 44px;
font-size: 32px;
font-weight: 500;
line-height: 1.5;
color: #0a1f3d;
max-width: 1040px;
}
.rs-mvv-heading span {
color: #092db6;
}
/* ---- pinning ---- */
.rs-mvv.is-pin {
padding-bottom: 0;
}
.rs-mvv.is-pin .rs-mvv-heading {
margin-bottom: 18px;
}
.rs-mvv.is-pin .rs-mvv-pin {
/* the sticky screen + the scroll distance the three tabs share */
height: 250vh;
height: calc(100svh + 150svh);
}
.rs-mvv.is-pin .rs-mvv-sticky {
position: sticky;
top: 0;
height: 100vh;
height: 100svh;
}
.rs-mvv.is-pin .rs-mvv-stage {
display: flex;
flex-direction: column;
justify-content: center;
/* tall screens: the capped block sits in the middle */
height: 100%;
padding-top: 26px;
padding-bottom: 34px;
}
.rs-mvv.is-pin .rs-mvv-tabrow,
.rs-mvv.is-pin .rs-mvv-panels {
flex: none;
}
.rs-mvv.is-pin .rs-mvv-media {
/* takes whatever height is left, so tabs + photo + copy always fit the screen */
flex: 1 1 auto;
aspect-ratio: auto;
min-height: 120px;
max-height: 660px;
}
/* ---- tab row: tabs left, 01, 03 right, progress bar on the base line ---- */
.rs-mvv-tabrow {
position: relative;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
border-bottom: 1px solid #cfd5e3;
padding-bottom: 16px;
margin-bottom: 22px;
}
.rs-mvv-bar {
position: absolute;
right: 0;
bottom: -1px;
height: 2px;
width: 120px;
background: #092db6;
transition: width .7s cubic-bezier(.22, 1, .36, 1);
}
.rs-mvv-tabs {
display: flex;
gap: 44px;
}
.rs-mvv-tab {
background: none;
border: 0;
padding: 0;
font-size: 13px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: #8a93a8;
cursor: pointer;
white-space: nowrap;
transition: color .4s ease;
}
.rs-mvv-tab:hover {
color: #3b4563;
}
.rs-mvv-tab-num {
margin-left: 8px;
font-weight: 500;
letter-spacing: .06em;
opacity: .8;
}
.rs-mvv-tab.is-active {
color: #14193f;
}
.rs-mvv-pagenum {
display: flex;
align-items: center;
gap: 12px;
font-size: 12px;
font-weight: 500;
letter-spacing: .1em;
color: #8a93a8;
flex-shrink: 0;
}
.rs-mvv-pagenum-current {
color: #14193f;
font-weight: 600;
}
.rs-mvv-pagenum-rule {
width: 34px;
height: 1px;
background: #aab2c5;
display: inline-block;
}
/* ---- photos (stacked, cross-faded by the script) + glass canvas ---- */
.rs-mvv-media {
position: relative;
overflow: hidden;
aspect-ratio: 2.44 / 1;
min-height: 300px;
background: #c9d6ea;
}
.rs-mvv-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
will-change: opacity;
}
.rs-mvv-photo[data-mvv-photo="mission"] {
object-position: 50% 6%;
}
.rs-mvv-photo[data-mvv-photo="vision"] {
object-position: 50% 42%;
opacity: 0;
}
.rs-mvv-photo[data-mvv-photo="values"] {
object-position: 50% 58%;
opacity: 0;
}
.rs-mvv-glass {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
pointer-events: none;
}
/* ---- title left, copy right; the three panels share one grid cell ---- */
.rs-mvv-panels {
display: grid;
margin-top: 30px;
}
.rs-mvv-panel {
grid-area: 1 / 1;
display: grid;
grid-template-columns: 42.5% minmax(0, 1fr);
align-items: start;
opacity: 0;
visibility: hidden;
transform: translateY(16px);
transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
}
.rs-mvv-panel.is-active {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity .65s ease .18s, transform .65s cubic-bezier(.22, 1, .36, 1) .18s;
}
.rs-mvv-panel h3 {
margin: 0;
font-size: clamp(30px, 3.4vw, 48px);
font-weight: 400;
line-height: 1.1;
letter-spacing: -.03em;
color: #14193f;
}
.rs-mvv-panel p {
margin: 6px 0 0;
font-size: 16px;
line-height: 1.8;
color: #5b6478;
max-width: 560px;
}
@media (max-width: 991px) {
.rs-mvv-heading {
font-size: 26px;
}
.rs-mvv-media {
aspect-ratio: 2 / 1;
}
.rs-mvv-panel {
grid-template-columns: 36% minmax(0, 1fr);
}
}
@media (max-width: 767px) {
.rs-mvv-panel {
grid-template-columns: 1fr;
gap: 10px;
}
.rs-mvv-panel p {
margin-top: 0;
max-width: none;
}
}
@media (max-width: 575px) {
.rs-mvv {
padding: 56px 0;
}
.rs-mvv.is-pin .rs-mvv-stage {
padding-top: 18px;
padding-bottom: 22px;
}
.rs-mvv-heading {
font-size: 21px;
margin-bottom: 30px;
}
.rs-mvv-tabrow {
padding-bottom: 12px;
margin-bottom: 16px;
}
.rs-mvv-tabs {
gap: 22px;
}
.rs-mvv-tab {
font-size: 11px;
letter-spacing: .1em;
}
.rs-mvv-tab-num {
margin-left: 5px;
}
.rs-mvv-pagenum-rule {
width: 18px;
}
.rs-mvv-media {
aspect-ratio: 4 / 3;
min-height: 0;
}
.rs-mvv-panels {
margin-top: 20px;
}
.rs-mvv-panel h3 {
font-size: 28px;
}
.rs-mvv-panel p {
font-size: 14.5px;
line-height: 1.7;
}
}
/* short screens (landscape laptops / phones): spend less height on the copy */
@media (max-height: 700px) {
.rs-mvv.is-pin .rs-mvv-stage {
padding-top: 16px;
padding-bottom: 20px;
}
.rs-mvv.is-pin .rs-mvv-panels {
margin-top: 18px;
}
.rs-mvv.is-pin .rs-mvv-panel h3 {
font-size: clamp(24px, 2.6vw, 36px);
}
.rs-mvv.is-pin .rs-mvv-panel p {
font-size: 14.5px;
line-height: 1.65;
}
}
/* ============================================================
HOME, Expertise · Integrated Advisory · Research (.rs-exp3)
============================================================ */
.rs-exp3 {
padding: 70px 0;
background: #fff;
}
.rs-exp3-grid {
display: grid;
grid-template-columns: 1.7fr 1fr;
gap: 24px;
}
.rs-exp3-left {
display: flex;
flex-direction: column;
gap: 24px;
}
.rs-exp3-card {
position: relative;
display: block;
text-decoration: none;
border-radius: 18px;
overflow: hidden;
background: #f4f6fb;
}
.rs-exp3-split {
display: flex;
align-items: stretch;
min-height: 230px;
}
.rs-exp3-split .rs-exp3-media {
flex: 0 0 42%;
position: relative;
background-size: cover;
background-position: center;
}
.rs-exp3-split .rs-exp3-body {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 16px;
padding: 40px;
}
.rs-exp3-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 12px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: #092db6;
}
.rs-exp3-eyebrow::before {
content: '';
width: 18px;
height: 1px;
background: currentColor;
display: inline-block;
}
.rs-exp3-heading {
display: block;
font-size: 25px;
font-weight: 500;
line-height: 1.3;
color: #0a1f3d;
max-width: 360px;
}
.rs-exp3-btn {
display: inline-flex;
align-items: center;
gap: 10px;
width: fit-content;
background: #092db6;
color: #fff;
font-size: 14px;
font-weight: 600;
padding: 13px 22px;
border-radius: 999px;
transition: background .3s ease, transform .3s ease;
}
.rs-exp3-btn svg {
width: 15px;
height: 15px;
flex-shrink: 0;
transition: transform .35s ease;
}
.rs-exp3-card:hover .rs-exp3-btn {
background: #092db6;
}
.rs-exp3-card:hover .rs-exp3-btn svg {
transform: translateX(-4px);
}
.rs-exp3-card:hover .rs-exp3-media {
filter: brightness(1.04);
}
/* Research & Intelligence, tall blue card */
.rs-exp3-blue {
display: flex;
}
.rs-exp3-blue .rs-exp3-media {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
}
.rs-exp3-blue-overlay {
position: absolute;
inset: 0;
background: linear-gradient(210deg, rgba(14, 63, 168, .88) 0%, rgba(20, 54, 216, .82) 48%, rgba(11, 45, 190, .92) 100%);
}
.rs-exp3-blue .rs-exp3-body {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
padding: 40px;
gap: 24px;
}
.rs-exp3-top {
display: flex;
flex-direction: column;
gap: 16px;
}
.rs-exp3-eyebrow--light {
color: #cfe0ff;
}
.rs-exp3-heading--light {
color: #fff;
font-size: 28px;
max-width: 280px;
}
.rs-exp3-btn--light {
background: #fff;
color: #092db6;
}
.rs-exp3-card.rs-exp3-blue:hover .rs-exp3-btn--light {
background: #f1f5ff;
}
@media (max-width: 991px) {
.rs-exp3-grid {
grid-template-columns: 1fr;
}
.rs-exp3-blue {
min-height: 320px;
}
}
@media (max-width: 767px) {
.rs-exp3-split {
flex-direction: column;
min-height: 0;
}
.rs-exp3-split .rs-exp3-media {
flex: 0 0 200px;
}
.rs-exp3-split .rs-exp3-body {
padding: 28px;
}
.rs-exp3-heading {
font-size: 21px;
max-width: 100%;
}
.rs-exp3-blue {
min-height: 280px;
}
.rs-exp3-blue .rs-exp3-body {
padding: 28px;
}
.rs-exp3-heading--light {
font-size: 23px;
max-width: 100%;
}
}
/* ============================================================
HOME, Advisory CTA (.rs-adv-cta)
Rounded card on a white band: heading left, copy + button right.
============================================================ */
.rs-adv-cta {
padding: 10px 60px 80px;
background: #fff;
}
.rs-adv-cta-card {
position: relative;
overflow: hidden;
isolation: isolate;
border-radius: 28px;
padding: 84px 72px;
background: linear-gradient(270deg, #0a2459 0%, #0a2c74 30%, #08359c 58%, #0b4cc6 100%);
}
.rs-adv-cta-bg {
position: absolute;
inset: 0;
z-index: -1;
width: 100%;
height: 100%;
object-fit: cover;
object-position: left center;
transition: transform 1.4s cubic-bezier(.2, .8, .2, 1);
}
.rs-adv-cta-card:hover .rs-adv-cta-bg {
transform: scale(1.04);
}
.rs-adv-cta-grid {
display: flex;
/* align-items: center; */
justify-content: space-between;
gap: 60px;
}
.rs-adv-cta-heading {
margin: 0;
flex: 0 0 auto;
font-size: clamp(32px, 3.1vw, 50px);
font-weight: 400;
line-height: 1.22;
letter-spacing: -.01em;
color: #fff;
}
.rs-adv-cta-right {
flex: 0 1 760px;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 26px;
}
.rs-adv-cta-desc {
margin: 0;
width: 100%;
font-size: 16.5px;
line-height: 1.85;
color: rgba(255, 255, 255, .88);
}
.rs-adv-cta-btn {
display: inline-flex;
align-items: center;
gap: 12px;
background: #fff;
color: #1436d8;
font-weight: 500;
font-size: 16px;
padding: 16px 34px;
border-radius: 999px;
text-decoration: none;
transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.rs-adv-cta-btn svg {
width: 17px;
height: 17px;
transition: transform .35s ease;
}
.rs-adv-cta-btn:hover {
background: #eaf1ff;
color: #0b2dbe;
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(3, 12, 60, .35);
}
.rs-adv-cta-btn:hover svg {
transform: translateX(-5px);
}
@media (max-width: 1199px) {
.rs-adv-cta-card {
padding: 64px 48px;
}
.rs-adv-cta-grid {
gap: 40px;
}
.rs-adv-cta-right {
flex-basis: 520px;
}
}
@media (max-width: 991px) {
.rs-adv-cta {
padding: 0 24px 60px;
}
.rs-adv-cta-card {
border-radius: 22px;
padding: 48px 36px;
}
.rs-adv-cta-grid {
flex-direction: column;
align-items: flex-start;
gap: 22px;
}
.rs-adv-cta-right {
flex: 0 1 auto;
align-items: flex-start;
gap: 22px;
}
.rs-adv-cta-bg {
object-position: 22% center;
}
}
@media (max-width: 575px) {
.rs-adv-cta {
padding: 0 16px 48px;
}
.rs-adv-cta-card {
border-radius: 18px;
padding: 38px 24px;
}
.rs-adv-cta-heading {
font-size: 28px;
}
.rs-adv-cta-desc {
font-size: 14.5px;
line-height: 1.75;
}
.rs-adv-cta-btn {
font-size: 14px;
padding: 13px 24px;
}
}
/* ============================================================
HOME, Services cards: details panel on hover
A brand-blue panel wipes up over the photo and carries the
service summary; the title and number underneath stay put so
nothing jumps. Pointer devices + keyboard focus only (a tap on
a phone goes straight to the service page).
============================================================ */
.rs-svc-car-info {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 16px;
padding: 26px 26px 30px;
color: #fff;
background: linear-gradient(210deg, #0E3FA8 0%, #1436D8 48%, #0B2DBE 100%);
clip-path: inset(100% 0 0 0);
visibility: hidden;
transition: clip-path .65s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .65s;
}
.rs-svc-car-info>* {
opacity: 0;
transform: translateY(22px);
transition: opacity .3s ease, transform .3s ease;
}
.rs-svc-car-info-title {
font-family: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
font-size: 21px;
font-weight: 600;
line-height: 1.3;
letter-spacing: -.2px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(255, 255, 255, .28);
}
.rs-svc-car-info-desc {
font-size: 15.5px;
line-height: 1.75;
color: rgba(255, 255, 255, .9);
}
.rs-svc-car-info-more {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 600;
letter-spacing: .04em;
}
.rs-svc-car-info-more svg {
width: 16px;
height: 16px;
transition: transform .35s ease;
}
@media (hover: hover) and (pointer: fine) {
.rs-svc-car-card:hover .rs-svc-car-info {
clip-path: inset(0 0 0 0);
visibility: visible;
transition: clip-path .65s cubic-bezier(.22, 1, .36, 1), visibility 0s;
}
.rs-svc-car-card:hover .rs-svc-car-info>* {
opacity: 1;
transform: none;
transition: opacity .5s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
}
.rs-svc-car-card:hover .rs-svc-car-info> :nth-child(1) {
transition-delay: .14s;
}
.rs-svc-car-card:hover .rs-svc-car-info> :nth-child(2) {
transition-delay: .22s;
}
.rs-svc-car-card:hover .rs-svc-car-info> :nth-child(3) {
transition-delay: .30s;
}
.rs-svc-car-card:hover .rs-svc-car-info-more svg {
transform: translateX(-5px);
}
/* the big number stays readable on the blue panel */
.rs-svc-car-num {
z-index: 4;
transition: transform .5s cubic-bezier(.2, .8, .2, 1), color .5s ease;
}
.rs-svc-car-card:hover .rs-svc-car-num {
color: rgba(255, 255, 255, .22);
}
}
.rs-svc-car-card:focus-visible .rs-svc-car-info {
clip-path: inset(0 0 0 0);
visibility: visible;
transition: clip-path .65s cubic-bezier(.22, 1, .36, 1), visibility 0s;
}
.rs-svc-car-card:focus-visible .rs-svc-car-info>* {
opacity: 1;
transform: none;
}
@media (max-width: 1199px) {
.rs-svc-car-info-desc {
font-size: 14.5px;
line-height: 1.65;
}
}
@media (prefers-reduced-motion: reduce) {
.rs-svc-car-info,
.rs-svc-car-info>* {
transition: none !important;
}
}
/* ============================================================
HOME, sharp edges
index.php sets $body_class = 'rs-home'; every homepage section
(cards, photos, buttons, inputs, badges, their pseudo-elements)
is squared off here. Shared sections keep their rounded corners
on other pages. Slider dots stay round.
============================================================ */
body.rs-home :is(#heroCarouselSection, .rs-awards-grid, .rs-abt2, .rs-abx, .rs-svc-v3, .rs-mvv, .rs-exp3, .rs-adv-cta, .rs-jr, .rs-mr-section, .rs-ct, .rs-sub, .rs-faq-section, .faq-heading),
body.rs-home :is(#heroCarouselSection, .rs-awards-grid, .rs-abt2, .rs-abx, .rs-svc-v3, .rs-mvv, .rs-exp3, .rs-adv-cta, .rs-jr, .rs-mr-section, .rs-ct, .rs-sub, .rs-faq-section) *:not(.swiper-pagination-bullet, .rs-exp3-btn, .rs-adv-cta-btn, .rs-ct__submit, .rs-sub__btn),
body.rs-home :is(#heroCarouselSection, .rs-awards-grid, .rs-abt2, .rs-abx, .rs-svc-v3, .rs-mvv, .rs-exp3, .rs-adv-cta, .rs-jr, .rs-mr-section, .rs-ct, .rs-sub, .rs-faq-section) *:not(.rs-exp3-btn, .rs-adv-cta-btn, .rs-ct__submit, .rs-sub__btn)::before,
body.rs-home :is(#heroCarouselSection, .rs-awards-grid, .rs-abt2, .rs-abx, .rs-svc-v3, .rs-mvv, .rs-exp3, .rs-adv-cta, .rs-jr, .rs-mr-section, .rs-ct, .rs-sub, .rs-faq-section) *:not(.rs-exp3-btn, .rs-adv-cta-btn, .rs-ct__submit, .rs-sub__btn)::after {
border-radius: 0 !important;
}
/* ============================================================
HOME, Awards cards: no hover effect, brand-gradient badges
============================================================ */
body.rs-home .rs-award-cell,
body.rs-home .rs-award-cell:hover {
transform: none;
box-shadow: none;
border-color: #e8edf2;
transition: none;
}
body.rs-home .rs-award-cell::after {
display: none;
}
body.rs-home .rs-award-cell:hover .rs-award-cell-img img,
body.rs-home .rs-award-cell:hover .rs-award-cell-img svg {
transform: none;
}
body.rs-home .rs-award-cell-info .badge {
background: linear-gradient(210deg, #0E3FA8 0%, #1436D8 48%, #0B2DBE 100%) !important;
}
/* ============================================================
HOME, Awards & Recognitions as a slim strip (.rs-awards-strip)
Label on the left, endless ticker of logo + name + caption.
The track holds four copies of the set and slides one set width.
============================================================ */
.rs-awards-grid.rs-awards-strip {
padding: 0;
background: #fff;
border-bottom: 1px solid #e6ebf3;
}
.rs-awstrip {
display: flex;
align-items: stretch;
}
.rs-awstrip-label {
flex: none;
display: flex;
align-items: center;
padding: 0 60px 0 30px;
font-size: 11px;
font-weight: 700;
letter-spacing: .2em;
text-transform: uppercase;
color: #092db6;
border-left: 1px solid #e6ebf3;
white-space: nowrap;
}
.rs-awstrip-viewport {
flex: 1 1 0;
min-width: 0;
overflow: hidden;
-webkit-mask-image: linear-gradient(270deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
mask-image: linear-gradient(270deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}
.rs-awstrip-track {
display: flex;
width: -webkit-max-content;
width: max-content;
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
will-change: transform;
-webkit-animation: rs-awstrip-slide 48s linear infinite;
animation: rs-awstrip-slide 48s linear infinite;
}
/* pause on hover only where a real mouse exists: on touch screens a tap leaves
:hover stuck and the ticker would stay frozen */
@media (hover: hover) and (pointer: fine) {
.rs-awstrip-viewport:hover .rs-awstrip-track {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
}
@-webkit-keyframes rs-awstrip-slide {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(25%, 0, 0);
}
}
@keyframes rs-awstrip-slide {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(25%, 0, 0);
}
}
.rs-awstrip-set {
display: flex;
flex: none;
margin: 0;
padding: 0;
list-style: none;
}
.rs-awstrip-item {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 34px;
border-left: 1px solid #eef1f6;
white-space: nowrap;
}
.rs-awstrip-item img {
height: 40px;
width: auto;
max-width: 96px;
object-fit: contain;
flex: none;
}
.rs-awstrip-text {
display: flex;
flex-direction: column;
gap: 2px;
line-height: 1.25;
}
.rs-awstrip-text strong {
font-size: 13.5px;
font-weight: 600;
color: #0a1f3d;
}
.rs-awstrip-text span {
font-size: 11.5px;
color: #64748b;
}
@media (max-width: 991px) {
.rs-awstrip-label {
padding: 0 28px 0 20px;
}
}
@media (max-width: 767px) {
.rs-awstrip {
flex-direction: column;
}
.rs-awstrip-label {
justify-content: center;
padding: 12px 18px 0;
border-left: 0;
font-size: 10px;
}
.rs-awstrip-item {
padding: 12px 22px;
gap: 10px;
}
.rs-awstrip-item img {
height: 32px;
max-width: 76px;
}
.rs-awstrip-text strong {
font-size: 12.5px;
}
.rs-awstrip-text span {
font-size: 10.5px;
}
}
/* "Reduce animations" is switched on by many phones, Windows laptops and battery
savers without the visitor knowing. Stopping the ticker there left a bare
scrollbar under the logos, so it keeps moving, just slower. */
@media (prefers-reduced-motion: reduce) {
.rs-awstrip-track {
-webkit-animation-duration: 80s;
animation-duration: 80s;
}
}
/* ============================================================
HOME, Expertise cards: taller photos, moving pattern on the
Research card (.rs-exp3-flow canvas, script in index.php)
============================================================ */
.rs-exp3-split {
min-height: 270px;
}
.rs-exp3-split .rs-exp3-media {
flex-basis: 46%;
}
.rs-exp3-blue {
background: linear-gradient(210deg, #0E3FA8 0%, #1436D8 48%, #0B2DBE 100%);
}
/* report mockup in the open space of the Research card */
.rs-exp3-mock {
position: relative;
z-index: 1;
flex: 1 1 auto;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
}
.rs-exp3-mock img {
display: block;
flex: none;
width: 128%;
max-width: none;
height: auto;
transition: transform .9s cubic-bezier(.22, 1, .36, 1);
}
.rs-exp3-blue:hover .rs-exp3-mock img {
transform: translate3d(0, -6px, 0);
}
@media (max-width: 575px) {
.rs-exp3-mock img {
width: 112%;
}
}
.rs-exp3-flow {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
pointer-events: none;
}
/* Mission, Vision & Values intro line: tighter, calmer setting */
.rs-mvv-heading {
line-height: 1.38;
letter-spacing: -.012em;
max-width: 980px;
}
/* ============================================================
HOME, Awards strip: taller band, larger logos, more air
============================================================ */
.rs-awstrip-label {
font-size: 12px;
padding: 0 60px 0 40px;
}
.rs-awstrip-viewport {
-webkit-mask-image: linear-gradient(270deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
mask-image: linear-gradient(270deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
.rs-awstrip-item {
gap: 20px;
padding: 30px 46px;
}
.rs-awstrip-item img {
height: 60px;
max-width: 150px;
}
.rs-awstrip-text {
gap: 4px;
}
.rs-awstrip-text strong {
font-size: 15.5px;
}
.rs-awstrip-text span {
font-size: 13px;
}
@media (max-width: 1199px) {
.rs-awstrip-label {
padding: 0 32px 0 28px;
}
.rs-awstrip-item {
gap: 16px;
padding: 26px 34px;
}
.rs-awstrip-item img {
height: 52px;
max-width: 130px;
}
}
@media (max-width: 767px) {
/* stacked: the ticker row must keep its own height (flex-basis 0 collapsed it) */
.rs-awstrip-viewport {
flex: none;
width: 100%;
}
.rs-awstrip-label {
padding: 22px 18px 4px;
font-size: 11px;
}
.rs-awstrip-item {
gap: 14px;
padding: 18px 26px 24px;
}
.rs-awstrip-item img {
height: 44px;
max-width: 110px;
}
.rs-awstrip-text strong {
font-size: 14px;
}
.rs-awstrip-text span {
font-size: 12px;
}
}
/* ============================================================
HOME, Our Services (.rs-sd)
Heading row on a CSS grid, then a five-up carousel of tall tiles
that alternate between a photo tile and a solid brand-blue tile.
Title at the top of each tile; summary and focus areas at the foot;
number and arrow in the top corners. Readable without hover.
Names are .rs-sd-* so the older home rules cannot reach it.
============================================================ */
.rs-sd {
padding: 50px 0 0px;
background: #fff;
overflow: hidden;
}
/* one shared frame for the heading row and the card row: the same width and side padding as the
site's containers (1320 / 1140 / 960 / 720 / 540 px caps, 12px padding), so the text and tiles
line up with every other home section */
.rs-sd-head {
box-sizing: border-box;
width: 100%;
max-width: 1320px;
margin-inline: auto;
padding-inline: 12px;
}
@media (max-width: 1399.98px) {
.rs-sd-head {
max-width: 1140px;
}
}
@media (max-width: 1199.98px) {
.rs-sd-head {
max-width: 960px;
}
}
@media (max-width: 991.98px) {
.rs-sd-head {
max-width: 720px;
}
}
@media (max-width: 767.98px) {
.rs-sd-head {
max-width: 540px;
}
}
@media (max-width: 575.98px) {
.rs-sd-head {
max-width: none;
}
}
/* heading row: title and intro sit side by side on one grid row */
.rs-sd-head {
display: grid;
grid-template-areas: "title aside";
grid-template-columns: minmax(0, 1fr) minmax(0, .93fr);
column-gap: 60px;
align-items: start;
margin-bottom: 52px;
}
.rs-sd-head > .rs-sd-intro {
grid-area: title;
}
.rs-sd-head > .rs-sd-aside {
grid-area: aside;
}
/* card row: full bleed, edge to edge of the viewport (the heading above keeps the page container) */
.rs-sd-row {
display: grid;
grid-template-columns: minmax(0, 1fr);
width: 100%;
margin-inline: 0;
padding-inline: 0;
}
/* the slider is the only item in the row: it must not grow to fit its slides */
.rs-sd-swiper {
width: 100%;
min-width: 0;
}
/* same type scale as the other home section titles (see "type: the section titles share one scale") */
.rs-sd-title {
margin: 0;
font-family: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
font-size: 34px;
font-weight: 400;
line-height: 1.2;
letter-spacing: -.01em;
color: #0b0d12;
}
@media (min-width: 768px) {
.rs-sd-title {
font-size: clamp(26px, 2.95vw, 42px);
}
}
.rs-sd-aside {
display: flex;
flex-direction: column;
gap: 32px;
padding-top: 6px;
}
.rs-sd-lead {
margin: 0;
max-width: 720px;
font-size: clamp(14.5px, 1.1vw, 17.5px);
line-height: 1.4;
color: #14171f;
}
.rs-sd-nav {
display: flex;
align-items: center;
gap: 12px;
width: min(100%, 470px);
margin-right: auto;
}
.rs-sd-bar {
position: relative;
flex: 1 1 0;
height: 2px;
background: #d5d8de;
overflow: hidden;
}
.rs-sd-bar-fill {
position: absolute;
inset: 0 0 0 auto;
background: #092db6;
transition: width 1s cubic-bezier(.45, .05, .25, 1);
}
.rs-sd-btn {
flex: none;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid #0b0d12;
border-radius: 50%;
background: transparent;
color: #0b0d12;
cursor: pointer;
transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.rs-sd-btn svg {
width: 18px;
height: 18px;
}
.rs-sd-btn:hover,
.rs-sd-btn:focus-visible {
background: #092db6;
border-color: #092db6;
color: #fff;
}
/* autoplay glide: an ease-in-out curve so each step starts and settles softly */
.rs-sd-swiper .swiper-wrapper {
transition-timing-function: cubic-bezier(.45, .05, .25, 1);
will-change: transform;
}
/* ---- tiles ---- */
.rs-sd-swiper .swiper-slide {
height: auto;
}
.rs-sd-card {
position: relative;
display: block;
height: 500px;
overflow: hidden;
color: #fff;
text-decoration: none;
isolation: isolate;
}
/* solid tile: brand blue, no photo */
.rs-sd-card--solid {
background: linear-gradient(195deg, #0b2dbe 0%, #092db6 52%, #061c74 100%);
}
/* photo tile: the photo under a blue gradient, darkest at the foot */
.rs-sd-card--photo {
background: #0b1a4a;
}
.rs-sd-card:focus-visible {
outline: 2px solid #092db6;
outline-offset: 3px;
}
.rs-sd-img {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.1s cubic-bezier(.2, .8, .2, 1);
}
.rs-sd-shade {
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(180deg, rgba(9, 20, 70, .3) 0%, rgba(9, 20, 70, .1) 38%, rgba(9, 20, 70, .9) 100%);
}
.rs-sd-card--solid .rs-sd-shade {
display: none;
}
.rs-sd-num {
position: absolute;
top: clamp(18px, 1.8vw, 26px);
right: clamp(18px, 1.8vw, 26px);
z-index: 2;
font-size: 13px;
font-weight: 500;
line-height: 1;
letter-spacing: .14em;
}
.rs-sd-arrow {
position: absolute;
top: clamp(14px, 1.5vw, 20px);
left: clamp(14px, 1.5vw, 20px);
z-index: 2;
width: 40px;
height: 40px;
display: grid;
place-items: center;
border: 1px solid rgba(255, 255, 255, .75);
border-radius: 50%;
transition: background-color .4s ease, color .4s ease, border-color .4s ease;
}
.rs-sd-arrow svg {
width: 17px;
height: 17px;
transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
/* title at the top (below the number row), summary and focus areas at the foot */
.rs-sd-body {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 24px;
padding: clamp(74px, 7vw, 96px) clamp(18px, 1.9vw, 26px) clamp(22px, 2.2vw, 30px);
}
.rs-sd-card-title {
font-family: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
font-size: clamp(20px, 1.9vw, 26px);
font-weight: 400;
line-height: 1.16;
letter-spacing: -.005em;
text-wrap: balance;
}
.rs-sd-bottom {
display: flex;
flex-direction: column;
gap: 14px;
}
.rs-sd-summary {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
font-size: clamp(13.5px, .95vw, 15px);
line-height: 1.5;
color: rgba(255, 255, 255, .9);
}
.rs-sd-list {
display: flex;
flex-direction: column;
gap: 6px;
padding-top: 14px;
border-top: 1px solid rgba(255, 255, 255, .28);
}
.rs-sd-list span {
display: flex;
align-items: center;
gap: 9px;
font-size: 13.5px;
font-weight: 500;
line-height: 1.2;
}
.rs-sd-list span::before {
content: "";
flex: none;
width: 10px;
height: 2px;
background: #fff;
}
/* hover / focus: photo moves, gradient deepens, arrow turns solid */
.rs-sd-card:hover .rs-sd-img,
.rs-sd-card:focus-visible .rs-sd-img {
transform: scale(1.06);
}
.rs-sd-card:hover .rs-sd-arrow,
.rs-sd-card:focus-visible .rs-sd-arrow {
background: #fff;
border-color: #fff;
color: #092db6;
}
.rs-sd-card:hover .rs-sd-arrow svg,
.rs-sd-card:focus-visible .rs-sd-arrow svg {
transform: rotate(-45deg);
}
/* tile height steps down with the number of tiles on screen */
@media (min-width: 1000px) and (max-width: 1199px) {
.rs-sd-card {
height: 440px;
}
.rs-sd-card-title {
font-size: clamp(19px, 2vw, 22px);
}
.rs-sd-summary,
.rs-sd-list span {
font-size: 13px;
}
}
@media (max-width: 991px) {
.rs-sd {
padding: 70px 0 76px;
}
.rs-sd-head {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "title" "aside";
row-gap: 24px;
margin-bottom: 36px;
}
.rs-sd-aside {
padding-top: 0;
gap: 26px;
}
.rs-sd-nav {
margin-right: 0;
}
.rs-sd-card {
height: 440px;
}
}
@media (max-width: 599px) {
.rs-sd {
padding: 52px 0 58px;
}
.rs-sd-head {
margin-bottom: 26px;
}
.rs-sd-card {
height: 420px;
}
.rs-sd-card-title {
font-size: 24px;
}
.rs-sd-summary,
.rs-sd-list span {
font-size: 14.5px;
}
}
@media (prefers-reduced-motion: reduce) {
.rs-sd-img,
.rs-sd-arrow,
.rs-sd-arrow svg,
.rs-sd-bar-fill,
.rs-sd-btn {
transition: none !important;
}
}
/* ============================================================
HOME, Hero: fit every screen
· desktop / laptop: the photo scales to the height that is
left under the header, so it is never cut off on short
screens (1366x650, 1280x600 ...)
· tablets (768-991): copy starts below the header, photo
sits under it at a height taken from the screen
============================================================ */
@media (min-width: 992px) {
body.rs-home #heroCarouselSection .hero-content {
gap: 0;
flex-wrap: nowrap;
}
body.rs-home #heroCarouselSection .hero-image-wrapper {
width: min(100%, calc((max(100vh, 600px) - 262px) * 1000 / 1240));
height: auto;
aspect-ratio: 1000 / 1240;
margin-right: auto;
}
body.rs-home #heroCarouselSection .hero-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
body.rs-home #heroCarouselSection .rs-hero-slide-49 .image-container {
max-height: calc(max(100vh, 600px) - 262px);
}
}
@media (min-width: 768px) and (max-width: 991px) {
body.rs-home #heroCarouselSection {
height: auto;
min-height: 0;
}
body.rs-home #heroCarouselSection .carousel,
body.rs-home #heroCarouselSection .carousel-inner {
height: auto;
}
body.rs-home #heroCarouselSection .carousel-item {
height: auto;
min-height: 100vh;
min-height: 100svh;
}
body.rs-home #heroCarouselSection .hero-content-wrapper {
height: auto;
padding: 200px 0 84px;
}
body.rs-home #heroCarouselSection .hero-content {
height: auto;
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
gap: 34px;
}
body.rs-home #heroCarouselSection .hero-content>[class*="col-"] {
flex: none;
width: 100%;
}
body.rs-home #heroCarouselSection .text-content {
bottom: 0;
max-width: 660px;
padding-left: 0;
}
body.rs-home #heroCarouselSection .main-heading {
font-size: 46px;
line-height: 1.06;
}
body.rs-home #heroCarouselSection .image-container {
height: clamp(300px, calc(100svh - 620px), 620px);
}
body.rs-home #heroCarouselSection .hero-image-wrapper {
width: 100%;
height: 100%;
}
body.rs-home #heroCarouselSection .hero-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
body.rs-home #heroCarouselSection .rs-hero-slide-49 .image-container {
aspect-ratio: auto;
justify-content: center;
}
body.rs-home #heroCarouselSection .rs-hero-49 {
max-width: 430px;
margin: 0 auto;
}
}
/* Mission / Vision / Values: the "01, 03" counter does not fit beside the tabs on narrow phones */
@media (max-width: 400px) {
.rs-mvv-pagenum {
display: none;
}
}
/* Hero, desktop / laptop: copy + photo centred in the space under the header */
@media (min-width: 992px) {
body.rs-home #heroCarouselSection .hero-content-wrapper {
display: flex;
align-items: center;
padding-bottom: 44px;
}
body.rs-home #heroCarouselSection .hero-content-wrapper>.container {
width: 100%;
}
body.rs-home #heroCarouselSection .hero-content {
height: auto;
}
body.rs-home #heroCarouselSection .text-content {
bottom: 0;
}
}
/* ============================================================
HOME, Hero photo runs down to the bottom edge of the hero
(slides 2-4). The photo column stretches from 40px under the
header to the very bottom of the section on every screen from
tablets up; its width follows the height (1000:1240) and is
capped by the column, the photo itself is cover-cropped.
============================================================ */
@media (min-width: 992px) {
body.rs-home #heroCarouselSection .hero-content-wrapper {
align-items: stretch;
padding-bottom: 0;
}
body.rs-home #heroCarouselSection .hero-content-wrapper>.container {
display: flex;
}
body.rs-home #heroCarouselSection .hero-content {
flex: 1 1 auto;
height: auto;
align-items: center;
}
body.rs-home #heroCarouselSection .carousel-item:not(.rs-hero-slide-49) .hero-content>[class*="col-"]:last-child {
align-self: stretch;
}
body.rs-home #heroCarouselSection .carousel-item:not(.rs-hero-slide-49) .image-container {
height: 100%;
align-items: stretch;
}
body.rs-home #heroCarouselSection .hero-image-wrapper {
width: min(100%, calc((max(100vh, 600px) - 180px) * 1000 / 1240));
height: auto;
aspect-ratio: auto;
position: relative;
}
body.rs-home #heroCarouselSection .hero-image {
position: absolute;
inset: 0;
}
/* the copy stays clear of the slide dots */
body.rs-home #heroCarouselSection .text-content {
margin-bottom: 44px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
body.rs-home #heroCarouselSection .carousel-item.active,
body.rs-home #heroCarouselSection .carousel-item-next,
body.rs-home #heroCarouselSection .carousel-item-prev {
display: flex;
flex-direction: column;
}
body.rs-home #heroCarouselSection .hero-content-wrapper {
flex: 1 1 auto;
display: flex;
flex-direction: column;
padding-bottom: 0;
}
body.rs-home #heroCarouselSection .hero-content-wrapper>.container {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
body.rs-home #heroCarouselSection .hero-content {
flex: 1 1 auto;
}
body.rs-home #heroCarouselSection .hero-content>[class*="col-"]:last-child {
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-height: 320px;
}
body.rs-home #heroCarouselSection .image-container {
flex: 1 1 auto;
height: auto;
align-items: stretch;
}
body.rs-home #heroCarouselSection .hero-image-wrapper {
position: relative;
height: auto;
}
body.rs-home #heroCarouselSection .hero-image {
position: absolute;
inset: 0;
}
body.rs-home #heroCarouselSection .rs-hero-slide-49 .image-container {
align-items: center;
padding-bottom: 70px;
}
}
/* ============================================================
HOME, CTA buttons (glow button + round arrow badge)
One look for every call-to-action on the homepage:
· glow = electric-blue gradient with a lit edge, white label,
white badge with a blue arrow (on light backgrounds)
· light = white button, blue label, gradient badge with a
white arrow (on the blue cards / bands)
Hover: the button lifts, the glow opens up, a sheen crosses it
and the arrow flies out to the top right and comes back in from
the bottom left. The buttons' own inline arrows are hidden; the
badge is the ::after, the sheen the ::before.
These selectors are exempt from the "sharp edges" rule above.
============================================================ */
body.rs-home :is(.rs-exp3-btn, .rs-adv-cta-btn, .rs-ct__submit, .rs-sub__btn, .rs-bk-btn) {
--rs-cta-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b2dbe' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18 18 6M8.5 6H18v9.5'/%3E%3C/svg%3E");
position: relative;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 14px;
width: fit-content !important;
min-width: 0;
padding: 9px 24px 9px 10px !important;
border: 1px solid rgba(146, 174, 255, .9) !important;
border-radius: 14px !important;
background: radial-gradient(130% 150% at 50% 50%, #0a3fe0 0%, #1046ee 42%, #2a62ff 76%, #5a9aff 100%) !important;
box-shadow: none !important;
color: #fff !important;
font-size: 15px;
font-weight: 500;
line-height: 1.2;
letter-spacing: .005em;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
transform: translateZ(0);
transition: transform .45s cubic-bezier(.22, 1, .36, 1), border-color .45s ease !important;
}
body.rs-home :is(.rs-exp3-btn, .rs-adv-cta-btn, .rs-ct__submit, .rs-sub__btn, .rs-bk-btn)>svg {
display: none !important;
}
/* arrow badge */
body.rs-home :is(.rs-exp3-btn, .rs-adv-cta-btn, .rs-ct__submit, .rs-sub__btn, .rs-bk-btn)::after {
content: "";
flex: none;
width: 32px;
height: 32px;
border-radius: 50% !important;
background-color: #fff;
background-image: var(--rs-cta-arrow);
background-repeat: no-repeat;
background-size: 13px 13px;
background-position: 9.5px 9.5px;
box-shadow: none;
transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
/* sheen */
body.rs-home :is(.rs-exp3-btn, .rs-adv-cta-btn, .rs-ct__submit, .rs-sub__btn, .rs-bk-btn)::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 46%;
background: linear-gradient(260deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .34) 50%, rgba(255, 255, 255, 0) 100%);
transform: translateX(130%) skewX(-18deg);
pointer-events: none;
}
/* ---- light variant (sits on blue) ---- */
body.rs-home :is(.rs-exp3-btn--light, .rs-adv-cta-btn, .rs-sub__btn) {
--rs-cta-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18 18 6M8.5 6H18v9.5'/%3E%3C/svg%3E");
border-color: rgba(255, 255, 255, .95) !important;
background: #fff !important;
box-shadow: none !important;
color: #0b2dbe !important;
}
body.rs-home :is(.rs-exp3-btn--light, .rs-adv-cta-btn, .rs-sub__btn)::after {
background-color: #1046ee;
background-image: var(--rs-cta-arrow), radial-gradient(130% 150% at 50% 50%, #0a3fe0 0%, #1046ee 42%, #2a62ff 76%, #5a9aff 100%);
background-size: 13px 13px, auto;
background-position: 9.5px 9.5px, 100% 0;
box-shadow: none;
}
body.rs-home :is(.rs-exp3-btn--light, .rs-adv-cta-btn, .rs-sub__btn)::before {
background: linear-gradient(260deg, rgba(40, 70, 255, 0) 0%, rgba(40, 70, 255, .16) 50%, rgba(40, 70, 255, 0) 100%);
}
/* ---- hover / focus (the three expertise cards trigger their button) ---- */
body.rs-home :is(.rs-adv-cta-btn, .rs-ct__submit, .rs-sub__btn, .rs-bk-btn):is(:hover, :focus-visible),
body.rs-home .rs-exp3-card:is(:hover, :focus-visible) .rs-exp3-btn {
transform: translate3d(0, -2px, 0);
border-color: rgba(190, 208, 255, 1) !important;
background: radial-gradient(130% 150% at 50% 50%, #0a3fe0 0%, #1046ee 42%, #2a62ff 76%, #5a9aff 100%) !important;
box-shadow: none !important;
color: #fff !important;
}
body.rs-home :is(.rs-adv-cta-btn, .rs-sub__btn):is(:hover, :focus-visible),
body.rs-home .rs-exp3-card:is(:hover, :focus-visible) .rs-exp3-btn--light {
border-color: #fff !important;
background: #fff !important;
box-shadow: none !important;
color: #0b2dbe !important;
}
body.rs-home :is(.rs-adv-cta-btn, .rs-ct__submit, .rs-sub__btn, .rs-bk-btn):is(:hover, :focus-visible)::before,
body.rs-home .rs-exp3-card:is(:hover, :focus-visible) .rs-exp3-btn::before {
animation: rs-cta-sheen .9s cubic-bezier(.3, .6, .3, 1) both;
}
body.rs-home :is(.rs-ct__submit, .rs-bk-btn):is(:hover, :focus-visible)::after,
body.rs-home .rs-exp3-card:is(:hover, :focus-visible) .rs-exp3-btn:not(.rs-exp3-btn--light)::after {
animation: rs-cta-arrow .62s cubic-bezier(.5, 0, .2, 1) both;
}
body.rs-home :is(.rs-adv-cta-btn, .rs-sub__btn):is(:hover, :focus-visible)::after,
body.rs-home .rs-exp3-card:is(:hover, :focus-visible) .rs-exp3-btn--light::after {
animation: rs-cta-arrow-2 .62s cubic-bezier(.5, 0, .2, 1) both;
}
body.rs-home :is(.rs-adv-cta-btn, .rs-ct__submit, .rs-sub__btn, .rs-bk-btn):active {
transform: translate3d(0, 0, 0) scale(.985);
}
@keyframes rs-cta-sheen {
from {
transform: translateX(130%) skewX(-18deg);
}
to {
transform: translateX(-330%) skewX(-18deg);
}
}
/* arrow leaves through the top right, re-enters from the bottom left */
@keyframes rs-cta-arrow {
0% {
background-position: 9.5px 9.5px;
}
45% {
background-position: 34px -15px;
}
46% {
background-position: -15px 34px;
}
100% {
background-position: 9.5px 9.5px;
}
}
@keyframes rs-cta-arrow-2 {
0% {
background-position: 9.5px 9.5px, 100% 0;
}
45% {
background-position: 34px -15px, 100% 0;
}
46% {
background-position: -15px 34px, 100% 0;
}
100% {
background-position: 9.5px 9.5px, 100% 0;
}
}
/* the submit button sits in a form column: keep it left-aligned at its own width */
body.rs-home .rs-ct__submit {
align-self: flex-start;
margin-top: 6px;
}
@media (max-width: 575px) {
body.rs-home :is(.rs-exp3-btn, .rs-adv-cta-btn, .rs-ct__submit, .rs-sub__btn, .rs-bk-btn) {
gap: 12px;
padding: 8px 20px 8px 9px !important;
font-size: 14px;
border-radius: 13px !important;
}
body.rs-home :is(.rs-exp3-btn, .rs-adv-cta-btn, .rs-ct__submit, .rs-sub__btn, .rs-bk-btn)::after {
width: 30px;
height: 30px;
background-position: 8.5px 8.5px;
}
body.rs-home :is(.rs-exp3-btn--light, .rs-adv-cta-btn, .rs-sub__btn)::after {
background-position: 8.5px 8.5px, 100% 0;
}
}
@media (prefers-reduced-motion: reduce) {
body.rs-home :is(.rs-exp3-btn, .rs-adv-cta-btn, .rs-ct__submit, .rs-sub__btn, .rs-bk-btn),
body.rs-home :is(.rs-exp3-btn, .rs-adv-cta-btn, .rs-ct__submit, .rs-sub__btn, .rs-bk-btn)::before,
body.rs-home :is(.rs-exp3-btn, .rs-adv-cta-btn, .rs-ct__submit, .rs-sub__btn, .rs-bk-btn)::after {
animation: none !important;
transition: none !important;
transform: none !important;
}
}
/* reduced motion: no sheen at all (it must not rest on top of the label) */
@media (prefers-reduced-motion: reduce) {
body.rs-home :is(.rs-exp3-btn, .rs-adv-cta-btn, .rs-ct__submit, .rs-sub__btn, .rs-bk-btn)::before {
display: none;
}
}
/* ============================================================
HOME, Scroll rhythm, alignment and calm motion (2026-10-02)
One vertical rhythm for the whole page instead of a different
gap after every section (they ran from 72px to 180px):
--rs-gap = white space between two neighbouring blocks
--rs-band = padding inside a tinted / coloured band
Each section takes half a gap above and below, so any two
neighbours are exactly one gap apart; bands (Mission/Vision/
Values, Get in Touch) keep the same distance from their edge.
Scoped to body.rs-home: shared includes are untouched elsewhere.
============================================================ */
body.rs-home {
--rs-gap: 112px;
--rs-band: 88px;
}
@media (max-width: 1199px) {
body.rs-home {
--rs-gap: 88px;
--rs-band: 72px;
}
}
@media (max-width: 767px) {
body.rs-home {
--rs-gap: 64px;
--rs-band: 52px;
}
}
/* About Us is a blue band now: half a gap of white on each side, band padding inside */
body.rs-home .rs-abt2 {
margin: calc(var(--rs-gap) / 2) 0;
/* the band is meant to read in one screen, so it takes a shorter band */
padding-top: calc(var(--rs-band) * .62);
padding-bottom: calc(var(--rs-band) * .62);
}
body.rs-home .rs-abx {
padding-bottom: calc(var(--rs-gap) / 2);
}
body.rs-home .rs-mvv {
margin: calc(var(--rs-gap) / 2) 0;
padding-top: var(--rs-band);
padding-bottom: var(--rs-band);
}
/* pinned mode: the stage already ends with 34px of its own */
body.rs-home .rs-mvv.is-pin {
padding-bottom: calc(var(--rs-band) - 34px);
}
/* the two card blocks (Expertise grid + Advisory card) read as one group: a shorter step between them */
body.rs-home .rs-exp3 {
padding-top: calc(var(--rs-gap) / 2);
padding-bottom: calc(var(--rs-gap) * .36);
}
body.rs-home .rs-adv-cta {
padding: calc(var(--rs-gap) * .36) 0 calc(var(--rs-gap) / 2);
}
body.rs-home .rs-mr-section {
padding-top: calc(var(--rs-gap) / 2) !important;
padding-bottom: calc(var(--rs-gap) / 2) !important;
}
body.rs-home .rs-ct {
margin-top: calc(var(--rs-gap) / 2);
margin-bottom: calc(var(--rs-gap) / 2);
}
body.rs-home .rs-ct + .rs-sub {
padding-top: calc(var(--rs-gap) / 2);
padding-bottom: calc(var(--rs-gap) / 2);
}
/* the footer band follows the FAQ directly: a little more air before it */
body.rs-home .rs-faq-section {
padding-top: calc(var(--rs-gap) / 2) !important;
padding-bottom: calc(var(--rs-gap) * .8) !important;
}
/* ---- alignment: every block starts on the container edge ---- */
body.rs-home .rs-faq-section > .rs-faq-grid {
padding-right: 0;
padding-left: 0;
}
/* ---- type: the section titles share one scale ---- */
body.rs-home .rs-mr-heading {
font-weight: 400;
letter-spacing: -.01em;
}
@media (min-width: 768px) {
body.rs-home .rs-mr-heading {
font-size: clamp(26px, 2.95vw, 42px);
line-height: 1.2;
}
body.rs-home .rs-mr-header-left {
max-width: 640px;
}
}
@media (min-width: 1200px) {
body.rs-home .rs-faq-heading {
font-size: 44px;
}
}
/* phones: the split Expertise cards stack photo + copy. The desktop min-height / 46% photo
(set later in the file than the phone rules) used to win here, so the first card cut its
button off and the second squeezed its photo to a strip. */
@media (max-width: 767px) {
body.rs-home .rs-exp3-split {
min-height: 0;
}
body.rs-home .rs-exp3-split .rs-exp3-media {
flex: 0 0 200px;
}
}
/* ============================================================
HOME, Get in Touch: the form card runs down to the bottom edge
of the blue band (no blue strip under it), and the heading row
gets more air above the card.
============================================================ */
body.rs-home .rs-ct {
padding-bottom: 0;
/* the white card now ends the band, so the page's own white follows it directly:
the gap to the next block is the subscribe section's top padding */
margin-bottom: 0;
}
body.rs-home .rs-ct__head {
margin-bottom: 60px;
}
body.rs-home .rs-ct__card {
box-shadow: none;
}
@media (max-width: 991px) {
body.rs-home .rs-ct__head {
margin-bottom: 32px;
}
}
@media (max-width: 575px) {
body.rs-home .rs-ct__head {
margin-bottom: 24px;
}
}
/* ============================================================
HOME, Book a Valuation (.rs-bk)
Sits between the H1 block and About Us.
Two columns: the statement, offer, three booking steps (as a
connected timeline) and the CTA on the left; the booking as a moving
picture on the right, carrying the RICS and DLD marks. The three figures close the section on a brand-blue
strip. The button keeps the shared glow CTA style (.rs-bk-btn is
listed with the other CTAs above).
============================================================ */
.rs-bk {
padding: var(--rs-band, 88px) 0;
background: #f6f8fc;
}
.rs-bk-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
column-gap: 72px;
align-items: center;
}
.rs-bk-eyebrow {
display: inline-block;
margin-bottom: 24px;
padding: 9px 15px;
border: 1px solid rgba(9, 45, 182, .32);
font-family: var(--rs-font-body, "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif);
font-size: 11.5px;
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
color: #092db6;
}
.rs-bk h2.rs-bk-title {
margin: 0 0 18px;
font-family: var(--rs-font-heading, "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif) !important;
font-size: clamp(32px, 3.6vw, 52px);
font-weight: 400;
line-height: 1.08;
letter-spacing: -.03em;
color: #0b1230;
text-transform: none;
}
.rs-bk-title span {
display: block;
color: #1436d8;
}
.rs-bk-desc {
margin: 0 0 34px;
max-width: 520px;
font-family: var(--rs-font-body, "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif);
font-size: 16px;
line-height: 1.75;
color: #5b6478;
}
/* ---- steps: numbered nodes joined by a vertical line ---- */
.rs-bk-steps {
margin: 0 0 38px;
padding: 0;
list-style: none;
}
.rs-bk-step {
position: relative;
display: grid;
grid-template-columns: 52px minmax(0, 1fr);
column-gap: 22px;
padding-bottom: 26px;
}
.rs-bk-step:last-child {
padding-bottom: 0;
}
.rs-bk-step::before {
content: "";
position: absolute;
right: 25px;
top: 52px;
bottom: 0;
width: 1px;
background: linear-gradient(#1436d8, rgba(20, 54, 216, .15));
}
.rs-bk-step:last-child::before {
display: none;
}
.rs-bk-step-num {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border: 1px solid #1436d8;
background: #fff;
font-family: var(--rs-font-heading, "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif);
font-size: 14px;
font-weight: 500;
letter-spacing: .06em;
color: #1436d8;
font-variant-numeric: tabular-nums;
}
.rs-bk h3.rs-bk-step-title {
margin: 2px 0 4px;
font-family: var(--rs-font-heading, "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif) !important;
font-size: 19px;
font-weight: 500;
line-height: 1.3;
letter-spacing: -.01em;
color: #14193f;
text-transform: none;
}
.rs-bk-step p {
margin: 0;
font-family: var(--rs-font-body, "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif);
font-size: 14.5px;
line-height: 1.65;
color: #5b6478;
}
/* ---- photo + RICS plate ---- */
.rs-bk-visual {
position: relative;
margin: 0;
aspect-ratio: 1 / 1.02;
}
/* ---- the booking told as a moving picture (includes/home-book-flow.php).
Sizes are in em on a font size set by the frame, so the whole scene scales as one.
Plain styles are the finished state; keyframes run from .is-run only. ---- */
.rs-bk-step-num {
transition: background-color .45s ease, color .45s ease;
}
.rs-bk-step.is-active .rs-bk-step-num {
background: #0b2dbe;
color: #fff;
}
.rs-bkf {
--bkf-ease: cubic-bezier(.22, 1, .36, 1);
--bkf-move: cubic-bezier(.65, 0, .2, 1);
position: absolute;
inset: 0;
overflow: hidden;
isolation: isolate;
container-type: size;
background: #0b2dbe;
color: #fff;
font-family: var(--rs-font-body, "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif);
}
.rs-bkf > * {
font-size: min(2.85cqw, 2.8cqh);
}
/* flat straight bands travelling slowly behind everything; one period apart, so the loop never shows */
.rs-bkf__bars {
position: absolute;
z-index: -1;
inset: -40% -80% -40% -40%;
background: repeating-linear-gradient(225deg, rgba(255, 255, 255, .055) 0 7em, rgba(255, 255, 255, 0) 7em 11em, rgba(3, 14, 80, .16) 11em 16em, rgba(255, 255, 255, 0) 16em 20em);
animation: rs-bkf-bars 26s linear infinite;
will-change: transform;
}
@keyframes rs-bkf-bars {
to { transform: translate3d(-28.284em, 0, 0); }
}
.rs-bkf.is-paused *,
.rs-bkf:not(.is-live) .rs-bkf__bars {
animation-play-state: paused !important;
}
/* three segments across the top, one per step */
.rs-bkf__rail {
position: absolute;
top: 1.5em;
right: 1.5em;
left: 1.5em;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .6em;
}
.rs-bkf__segline {
display: block;
height: 2px;
overflow: hidden;
background: rgba(255, 255, 255, .28);
}
.rs-bkf__segline i {
display: block;
height: 100%;
background: #fff;
transform: scaleX(0);
transform-origin: 100% 50%;
}
.rs-bkf__seg.is-done .rs-bkf__segline i,
.rs-bkf__seg.is-on .rs-bkf__segline i {
transform: none;
}
.rs-bkf.is-live .rs-bkf__seg.is-on .rs-bkf__segline i {
animation: rs-bkf-seg var(--hold, 5s) linear both;
}
@keyframes rs-bkf-seg {
from { transform: scaleX(0); }
to { transform: none; }
}
.rs-bkf__seglabel {
display: block;
margin-top: .55em;
font-size: .8em;
font-weight: 500;
line-height: 1.25;
color: rgba(255, 255, 255, .55);
transition: color .4s ease;
}
.rs-bkf__seglabel b {
margin-left: .25em;
font-weight: 700;
}
.rs-bkf__seg.is-on .rs-bkf__seglabel {
color: #fff;
}
/* a scene comes in from the right and leaves to the left */
.rs-bkf__scene {
position: absolute;
top: 5em;
right: 0;
left: 0;
bottom: 1.6em;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transform: translate3d(-2.5em, 0, 0);
}
.rs-bkf.is-live .rs-bkf__scene {
transition: opacity .5s ease, transform .52s var(--bkf-move), visibility 0s linear .52s;
}
.rs-bkf .rs-bkf__scene.is-on {
opacity: 1;
visibility: visible;
transform: none;
}
.rs-bkf.is-live .rs-bkf__scene.is-on {
transition: opacity .55s ease .24s, transform .85s var(--bkf-ease) .24s, visibility 0s;
}
.rs-bkf__scene.is-out {
transform: translate3d(2.5em, 0, 0);
}
/* ---- 01 the form ---- */
.rs-bkf__scene--form {
align-items: center;
}
.rs-bkf__card {
position: relative;
display: flex;
flex-direction: column;
gap: 1.05em;
width: 28em;
max-width: 80%;
padding: 1.7em;
background: #fff;
border-top: .2em solid #0b2dbe;
box-shadow: 0 0 0 .55em rgba(255, 255, 255, .12), 0 1.6em 3.4em rgba(3, 14, 80, .38);
color: #0b1230;
}
.rs-bkf__cardhead {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1em;
padding-bottom: 1em;
border-bottom: 1px solid #e4e9f4;
}
.rs-bkf__fieldico,
.rs-bkf__fieldchev {
flex: 0 0 auto;
width: 1.05em;
height: 1.05em;
color: #0b2dbe;
}
.rs-bkf__fieldchev {
width: .8em;
height: .8em;
margin-right: auto;
color: #8a93a6;
}
.rs-bkf__trust {
display: flex;
align-items: center;
justify-content: center;
gap: .45em;
margin-top: -.2em;
font-size: .68em;
font-weight: 500;
color: #5b6478;
}
.rs-bkf__trust svg {
flex: 0 0 auto;
width: 1.3em;
height: 1.3em;
color: #0b2dbe;
}
/* turnaround tile standing off the card's top-right corner */
.rs-bkf__fast {
position: absolute;
top: -1.1em;
left: -2.6em;
display: flex;
flex-direction: column-reverse;
gap: .15em;
padding: .7em .95em;
background: #06176e;
box-shadow: 0 .8em 1.8em rgba(3, 14, 80, .35);
font-size: .66em;
font-weight: 500;
letter-spacing: .06em;
text-transform: uppercase;
color: rgba(255, 255, 255, .72);
}
.rs-bkf__fast b {
font-size: 2.1em;
font-weight: 500;
letter-spacing: -.01em;
text-transform: none;
color: #fff;
}
.rs-bkf__cardtitle {
display: block;
font-size: 1.3em;
font-weight: 500;
line-height: 1.2;
letter-spacing: -.015em;
}
.rs-bkf__cardsub {
display: block;
margin-top: .3em;
font-size: .8em;
color: #5b6478;
}
.rs-bkf__fieldlabel {
display: block;
margin-bottom: .3em;
font-size: .72em;
font-weight: 600;
letter-spacing: .02em;
color: #5b6478;
}
.rs-bkf__fieldbox {
display: flex;
align-items: center;
gap: .6em;
padding: .55em .7em;
border: 1px solid #cdd7ee;
font-size: .9em;
line-height: 1.3;
}
.rs-bkf__value {
display: inline-block;
white-space: nowrap;
}
.rs-bkf__scene--form.is-run .rs-bkf__fieldbox {
animation: rs-bkf-focus .95s step-end calc(.75s + var(--i) * .95s) both;
}
@keyframes rs-bkf-focus {
from { border-color: #cdd7ee; }
1% { border-color: #0b2dbe; box-shadow: inset 0 0 0 1px #0b2dbe; }
to { border-color: #cdd7ee; box-shadow: none; }
}
.rs-bkf__scene--form.is-run .rs-bkf__value {
animation: rs-bkf-type .68s steps(var(--n)) calc(.8s + var(--i) * .95s) both;
}
@keyframes rs-bkf-type {
from { clip-path: inset(0 100% 0 0); }
to { clip-path: inset(0 0 0 0); }
}
.rs-bkf__send {
position: relative;
display: block;
margin-top: .2em;
padding: .72em 1em;
overflow: hidden;
background: #0b2dbe;
color: #fff;
font-size: .9em;
font-weight: 500;
line-height: 1.3;
text-align: center;
}
.rs-bkf__sendtext {
display: block;
visibility: hidden;
}
.rs-bkf__sent {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
gap: .5em;
}
.rs-bkf__sent svg {
width: .95em;
height: .95em;
}
.rs-bkf__scene--form.is-run .rs-bkf__sendtext {
visibility: visible;
animation: rs-bkf-sendtext .4s var(--bkf-move) 4.1s both;
}
@keyframes rs-bkf-sendtext {
to { transform: translate3d(0, -200%, 0); }
}
.rs-bkf__scene--form.is-run .rs-bkf__sent {
animation: rs-bkf-sent .4s var(--bkf-move) 4.1s both;
}
@keyframes rs-bkf-sent {
from { transform: translate3d(0, 100%, 0); opacity: 0; }
to { transform: none; opacity: 1; }
}
.rs-bkf__scene--form.is-run .rs-bkf__send {
animation: rs-bkf-press .3s ease 3.9s both;
}
@keyframes rs-bkf-press {
50% { transform: scale(.975); }
}
/* the pointer glides from the last field to the button and clicks */
.rs-bkf__pointer {
position: absolute;
left: 22%;
bottom: .7em;
width: 1.8em;
height: 1.8em;
opacity: 0;
filter: drop-shadow(0 .15em .3em rgba(3, 14, 80, .35));
}
.rs-bkf__scene--form.is-run .rs-bkf__pointer {
animation: rs-bkf-pointer 1.9s var(--bkf-move) 2.5s both;
}
@keyframes rs-bkf-pointer {
0% { opacity: 0; transform: translate3d(-5em, -9em, 0); }
18% { opacity: 1; }
70% { opacity: 1; transform: none; }
78% { opacity: 1; transform: scale(.85); }
86% { opacity: 1; transform: none; }
100% { opacity: 0; transform: translate3d(-.5em, .5em, 0); }
}
/* ---- 02 the assessment ---- */
.rs-bkf__scene--survey {
gap: .5em;
}
.rs-bkf__tower {
position: relative;
flex: 0 0 auto;
width: 22em;
height: 24em;
max-height: 100%;
overflow: hidden;
}
.rs-bkf__tower svg {
display: block;
width: 100%;
height: 100%;
}
.rs-bkf__draw {
stroke-dasharray: 1;
}
.rs-bkf__scene--survey.is-run .rs-bkf__draw {
animation: rs-bkf-draw 1s var(--bkf-move) calc(.45s + var(--d) * .1s) both;
}
.rs-bkf__scene--survey.is-run .rs-bkf__draw--edge {
animation-duration: 1.5s;
}
@keyframes rs-bkf-draw {
from { stroke-dashoffset: 1; }
to { stroke-dashoffset: 0; }
}
.rs-bkf__scene--survey.is-run .rs-bkf__face {
animation: rs-bkf-fade .9s ease 1.5s both;
}
@keyframes rs-bkf-fade {
from { opacity: 0; }
to { opacity: 1; }
}
/* the survey line passes down the building and back */
.rs-bkf__scan {
position: absolute;
right: 0;
left: 0;
top: 0;
height: 3.5em;
border-bottom: 2px solid #fff;
background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .22));
opacity: 0;
}
.rs-bkf__scene--survey.is-run .rs-bkf__scan {
animation: rs-bkf-scan 2.7s ease-in-out 1.7s both;
}
@keyframes rs-bkf-scan {
0% { opacity: 0; transform: translate3d(0, -1em, 0); }
12% { opacity: 1; }
50% { transform: translate3d(0, 19.5em, 0); }
88% { opacity: 1; }
100% { opacity: 0; transform: translate3d(0, -1em, 0); }
}
.rs-bkf__checks {
display: flex;
flex-direction: column;
gap: .75em;
flex: 0 0 auto;
width: 15.5em;
margin-right: -4.5em;
padding: 1.25em;
background: #fff;
box-shadow: 0 1.2em 2.6em rgba(3, 14, 80, .3);
color: #0b1230;
}
.rs-bkf__checkshead {
padding-bottom: .65em;
border-bottom: 1px solid #dfe5f2;
font-size: .82em;
font-weight: 600;
color: #0b2dbe;
}
.rs-bkf__check {
display: flex;
align-items: center;
gap: .6em;
font-size: .8em;
line-height: 1.25;
}
.rs-bkf__box {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 1.3em;
height: 1.3em;
background: #0b2dbe;
color: #fff;
}
.rs-bkf__box svg {
width: .8em;
height: .8em;
}
.rs-bkf__box path {
stroke-dasharray: 1;
}
.rs-bkf__scene--survey.is-run .rs-bkf__checks {
animation: rs-bkf-lift .8s var(--bkf-ease) .7s both;
}
@keyframes rs-bkf-lift {
from { opacity: 0; transform: translate3d(0, 1.4em, 0); }
to { opacity: 1; transform: none; }
}
.rs-bkf__scene--survey.is-run .rs-bkf__box {
animation: rs-bkf-box .3s ease calc(1.8s + var(--i) * .85s) both;
}
@keyframes rs-bkf-box {
from { background-color: #e6edff; }
to { background-color: #0b2dbe; }
}
.rs-bkf__scene--survey.is-run .rs-bkf__box path {
animation: rs-bkf-draw .35s ease-out calc(1.95s + var(--i) * .85s) both;
}
/* ---- 03 the report ---- */
.rs-bkf__stack {
position: relative;
width: 20em;
height: 26.5em;
max-height: 100%;
}
.rs-bkf__sheet,
.rs-bkf__report {
position: absolute;
inset: 0;
background: #fff;
}
.rs-bkf__sheet--2 {
background: #a9bbf5;
transform: translate3d(-1.5em, -1.1em, 0);
}
.rs-bkf__sheet--1 {
background: #d6e0fb;
transform: translate3d(-.75em, -.55em, 0);
}
.rs-bkf__report {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 1.8em;
box-shadow: 0 1.5em 3.2em rgba(3, 14, 80, .36);
color: #0b1230;
}
.rs-bkf__logo {
display: block;
width: 7.6em;
height: auto;
}
.rs-bkf__reporttitle {
margin-top: 1.1em;
font-size: 1.28em;
font-weight: 500;
line-height: 1.16;
letter-spacing: -.015em;
}
.rs-bkf__reportrule {
width: 100%;
height: 2px;
margin: 1em 0 .95em;
background: #0b2dbe;
transform-origin: 100% 50%;
}
.rs-bkf__line {
display: block;
width: var(--w);
height: .42em;
margin-bottom: .62em;
background: #dfe5f2;
transform-origin: 100% 50%;
}
.rs-bkf__valuelabel {
margin-top: .55em;
font-size: .72em;
font-weight: 600;
color: #5b6478;
}
.rs-bkf__valuebar {
display: block;
width: 62%;
height: 1.25em;
margin-top: .4em;
background: #0b2dbe;
transform-origin: 100% 50%;
}
.rs-bkf__stamp {
position: absolute;
left: 1.8em;
bottom: 3.4em;
padding: .42em .65em;
border: 2px solid #0b2dbe;
color: #0b2dbe;
font-size: .74em;
font-weight: 700;
line-height: 1;
letter-spacing: .12em;
text-transform: uppercase;
transform: rotate(-6deg);
}
.rs-bkf__tag {
position: absolute;
left: 1.5em;
bottom: 1.2em;
padding: .55em .8em;
background: #07196b;
color: #fff;
font-size: .82em;
font-weight: 500;
line-height: 1;
}
.rs-bkf__scene--report.is-run .rs-bkf__report {
animation: rs-bkf-report 1s var(--bkf-ease) .3s both;
}
@keyframes rs-bkf-report {
from { transform: translate3d(0, 5em, 0); opacity: 0; }
to { transform: none; opacity: 1; }
}
.rs-bkf__scene--report.is-run .rs-bkf__sheet--1 {
animation: rs-bkf-sheet1 .8s var(--bkf-ease) .95s both;
}
.rs-bkf__scene--report.is-run .rs-bkf__sheet--2 {
animation: rs-bkf-sheet2 .8s var(--bkf-ease) 1.05s both;
}
@keyframes rs-bkf-sheet1 {
from { transform: none; }
}
@keyframes rs-bkf-sheet2 {
from { transform: none; }
}
.rs-bkf__scene--report.is-run .rs-bkf__reportrule {
animation: rs-bkf-grow .7s var(--bkf-move) .9s both;
}
.rs-bkf__scene--report.is-run .rs-bkf__line {
animation: rs-bkf-grow .6s var(--bkf-move) calc(1.1s + var(--i) * .12s) both;
}
.rs-bkf__scene--report.is-run .rs-bkf__valuebar {
animation: rs-bkf-grow .7s var(--bkf-move) 1.7s both;
}
@keyframes rs-bkf-grow {
from { transform: scaleX(0); }
to { transform: none; }
}
.rs-bkf__scene--report.is-run .rs-bkf__stamp {
animation: rs-bkf-stamp .42s cubic-bezier(.3, 1.3, .5, 1) 2.45s both;
}
@keyframes rs-bkf-stamp {
from { opacity: 0; transform: rotate(-6deg) scale(1.7); }
to { opacity: 1; transform: rotate(-6deg) scale(1); }
}
.rs-bkf__scene--report.is-run .rs-bkf__tag {
animation: rs-bkf-lift .7s var(--bkf-ease) 2.95s both;
}
@media (max-width: 575px) {
.rs-bkf > * {
font-size: min(3.05cqw, 2.55cqh);
}
.rs-bkf__checks {
margin-right: -6em;
}
.rs-bkf__tower {
width: 18em;
height: 19.6em;
}
.rs-bkf__seglabel {
font-size: .76em;
}
}
@media (prefers-reduced-motion: reduce) {
.rs-bkf__bars {
animation: none;
}
.rs-bk-step-num {
transition: none;
}
}
.rs-bk-chip--rics {
position: absolute;
right: 20px;
bottom: 20px;
padding: 10px 16px;
background: #fff;
box-shadow: 0 6px 20px rgba(15, 23, 42, .14);
}
.rs-bk-chip--rics img {
display: block;
width: auto;
height: 40px;
object-fit: contain;
}
/* ---- the figures close the section on brand blue ---- */
.rs-bk-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
margin: 56px 0 0;
padding: 0;
list-style: none;
background: rgba(255, 255, 255, .28);
}
.rs-bk-stats li {
padding: 28px 34px 30px;
background: #0b34cf;
}
.rs-bk-stats strong {
display: block;
margin-bottom: 4px;
font-family: var(--rs-font-heading, "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif);
font-size: clamp(24px, 2.2vw, 32px);
font-weight: 500;
line-height: 1.1;
letter-spacing: -.02em;
color: #fff;
}
.rs-bk-stats strong small {
font-size: 13px;
font-weight: 400;
letter-spacing: 0;
}
.rs-bk-stats span {
display: block;
font-family: var(--rs-font-body, "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif);
font-size: 12px;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255, 255, 255, .74);
}
.rs-bk-note {
margin: 18px 0 0;
font-family: var(--rs-font-body, "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif);
font-size: 12.5px;
line-height: 1.6;
color: #7a8395;
}
/* ---- tablet ---- */
@media (max-width: 991px) {
.rs-bk-grid {
grid-template-columns: minmax(0, 1fr);
row-gap: 48px;
}
.rs-bk-desc {
max-width: 640px;
}
.rs-bk-visual {
aspect-ratio: 4 / 3;
}
}
/* ---- phone ---- */
@media (max-width: 575px) {
.rs-bk-step {
grid-template-columns: 44px minmax(0, 1fr);
column-gap: 16px;
}
.rs-bk-step-num {
width: 44px;
height: 44px;
font-size: 13px;
}
.rs-bk-step::before {
right: 21px;
top: 44px;
}
.rs-bk-visual {
aspect-ratio: 1 / 1.2;
}
.rs-bk-chip--rics {
right: 12px;
bottom: 12px;
padding: 8px 12px;
}
.rs-bk-chip--rics img {
height: 32px;
}
.rs-bk-stats {
grid-template-columns: minmax(0, 1fr);
margin-top: 40px;
}
.rs-bk-stats li {
padding: 20px 22px 22px;
}
}
/* ============================================================
HOME, Why Choose Reliant Surveyors (.rs-wcx)
Follows Mission / Vision / Values.
Alignment here is structural, not tuned. The header and both
card rows share ONE four-column grid with the same negative
outer margin and the same cell padding, so every gridline and
every content edge lines up from the top of the section to the
bottom of the brand band. Seven reasons split 4 on white + 3
on the band, and the regulator marks take the eighth cell,
that is what makes both rows complete fours instead of a 4
over a 3 that can never agree.
Cards are divided by a 1px gap with the row colour showing
through, so the hairlines are even by construction.
Type is the site's own: Helvetica for headings
(--rs-font-heading), the same stack for the rest (--rs-font-body).
============================================================ */
.rs-wcx {
--wcx-pad: 30px;
--wcx-line: #e2e8f0;
padding: calc(var(--rs-gap, 112px) * .4) 0 0;
background: #fff;
}
/* ---- the shared grid ----
Both the header and the two card rows use this, so a cell in
the band sits on exactly the same gridline as the cell above
it. The negative margin pulls the outer cells' padding back so
the first cell's text still starts flush with the container. */
.rs-wcx-head,
.rs-wcx-row {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1px;
margin-inline: calc(var(--wcx-pad) * -1);
}
.rs-wcx-head > *,
.rs-wcx-card {
padding-inline: var(--wcx-pad);
}
/* ---- header: headline on the left half, lead on the right ---- */
.rs-wcx-head {
align-items: end;
margin-bottom: 0;
}
.rs-wcx-headline {
grid-column: 1 / span 2;
}
.rs-wcx-head .rs-wcx-lead {
grid-column: 3 / span 2;
}
.rs-wcx-tag {
display: inline-block;
margin-bottom: 26px;
padding: 0;
border: 0;
font-family: var(--rs-font-body, "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif);
font-size: 11.5px;
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
color: #092db6;
}
.rs-wcx h2.rs-wcx-title {
margin: 0;
font-family: var(--rs-font-heading, "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif) !important;
font-size: clamp(30px, 3.4vw, 48px);
font-weight: 400;
line-height: 1.1;
letter-spacing: -.03em;
color: #0b1230;
text-transform: none;
}
.rs-wcx-title span {
display: block;
color: #1436d8;
}
.rs-wcx-lead {
margin: 0;
font-family: var(--rs-font-body, "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif);
font-size: 16px;
line-height: 1.75;
color: #5b6478;
}
/* the rule between header and cards spans the container, which is
exactly the first cell's text start to the last cell's text end */
.rs-wcx-hr {
height: 1px;
margin: 38px 0 0;
background: var(--wcx-line);
}
/* ---- cards ---- */
.rs-wcx-row {
margin-block: 0;
padding: 0;
list-style: none;
}
.rs-wcx-row--light {
background: var(--wcx-line);
}
.rs-wcx-card {
display: flex;
flex-direction: column;
padding-block: 34px 38px;
background: #fff;
}
.rs-wcx-num {
font-family: var(--rs-font-heading, "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif);
font-size: 14px;
font-weight: 500;
line-height: 1;
letter-spacing: .08em;
color: #1436d8;
font-variant-numeric: tabular-nums;
}
.rs-wcx-rule {
width: 28px;
height: 1px;
margin: 16px 0 18px;
background: #b9c8ef;
}
/* a fixed two-line box for the title, so the paragraph below it
starts on the same line in every card of the row */
.rs-wcx h3.rs-wcx-card-title {
margin: 0 0 12px;
min-height: calc(2 * 1.32em);
font-family: var(--rs-font-heading, "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif) !important;
font-size: 16px;
font-weight: 500;
line-height: 1.32;
letter-spacing: -.01em;
color: #14193f;
text-transform: none;
}
.rs-wcx-card-text {
margin: 0;
font-family: var(--rs-font-body, "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif);
font-size: 14.5px;
line-height: 1.68;
color: #5b6478;
}
/* ---- the brand band: 05–07 plus the regulator marks ---- */
.rs-wcx-band {
margin-top: calc(var(--rs-gap, 112px) * .4);
background: #0b34cf;
}
.rs-wcx-row--dark {
background: rgba(255, 255, 255, .26);
}
.rs-wcx-row--dark .rs-wcx-card {
padding-block: 46px 50px;
background: #0b34cf;
}
.rs-wcx-row--dark .rs-wcx-num {
color: #fff;
}
.rs-wcx-row--dark .rs-wcx-rule {
background: rgba(255, 255, 255, .5);
}
.rs-wcx .rs-wcx-row--dark h3.rs-wcx-card-title {
color: #fff;
}
.rs-wcx-row--dark .rs-wcx-card-text {
color: rgba(255, 255, 255, .78);
}
/* the eighth cell follows the same rhythm as 05–07 (number, rule, title),
then the marks sit on a white plate where the paragraph would be */
.rs-wcx-card--marks {
justify-content: flex-start;
}
.rs-wcx-card--marks .rs-wcx-card-text + .rs-wcx-marks {
margin-top: 20px;
}
.rs-wcx-marks {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
width: 100%;
padding: 16px 22px;
background: #fff;
}
.rs-wcx-mark {
display: block;
width: auto;
flex: none;
}
.rs-wcx-mark--rics {
height: 44px;
}
.rs-wcx-mark--rera {
height: 40px;
}
/* ---- tablet: two columns, still one shared grid ---- */
@media (max-width: 1199px) {
.rs-wcx {
--wcx-pad: 24px;
}
.rs-wcx-head {
grid-template-columns: minmax(0, 1fr);
row-gap: 20px;
align-items: start;
}
.rs-wcx-headline,
.rs-wcx-head .rs-wcx-lead {
grid-column: 1;
}
.rs-wcx-head .rs-wcx-lead {
max-width: 660px;
}
.rs-wcx-hr {
margin-top: 30px;
}
.rs-wcx-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rs-wcx-row--light {
padding-block: 0;
}
}
/* ---- phone: one column; the hairlines turn horizontal ---- */
@media (max-width: 767px) {
.rs-wcx {
--wcx-pad: 0px;
}
.rs-wcx-tag {
margin-bottom: 20px;
}
.rs-wcx-lead {
font-size: 15px;
}
.rs-wcx-hr {
margin-top: 26px;
}
.rs-wcx-row {
grid-template-columns: minmax(0, 1fr);
}
.rs-wcx-card {
padding-block: 26px 28px;
}
.rs-wcx-row--dark .rs-wcx-card {
padding-block: 30px 32px;
}
.rs-wcx h3.rs-wcx-card-title {
min-height: 0;
}
.rs-wcx-marks {
width: auto;
align-self: flex-start;
justify-content: flex-start;
gap: 22px;
}
.rs-wcx-mark--rics {
height: 38px;
}
.rs-wcx-mark--rera {
height: 33px;
}
}
/* ============================================================
HOME, Why Choose: the reasons slider visual (.rs-wcxv)
includes/why-choose-visual.php. Sits in the right half of the
.rs-wcx header on the home page only ($rs_wcx_visual); the
headline, lead and CTA stack in the left half.
A deep royal-blue panel with a slow abstract (light-blue waves
rolling along the bottom, a faint dot pattern and a pool of
light) and, in front, the eight reasons from includes/why-choose.php as a
slider: oversized numeral, title and text on a glass card, one
at a time, advancing by itself. The JS only moves .is-active /
.is-leaving and --rs-wcxv-p (the current dot's fill); every
movement is a CSS transition or keyframe, so the scene pauses
cleanly and degrades to a still frame. No pointer effects.
============================================================ */
/* the home page ends the section with the visual (no card rows), so it needs
its own bottom padding; the band provides it on sector pages */
.rs-wcx--visual {
padding-bottom: calc(var(--rs-gap, 112px) * .4);
}
.rs-wcx-head--visual {
align-items: center;
row-gap: 36px;
}
.rs-wcx-head--visual .rs-wcx-headline {
grid-column: 1 / span 2;
padding-block: 12px;
}
.rs-wcx-head--visual .rs-wcx-lead {
max-width: 480px;
margin-top: 22px;
}
.rs-wcx-head--visual .rs-wcx-cta {
margin-top: 32px;
}
.rs-wcx-visual {
grid-column: 3 / span 2;
min-width: 0;
}
.rs-wcxv {
--wcxv-blue: #1436d8;
--wcxv-sky: #8fb4ff;
--rs-wcxv-p: 0%;
position: relative;
aspect-ratio: 16 / 10;
min-height: 360px;
/* clip, not hidden: a hidden box can still be scrolled by focus or scrollIntoView */
overflow: hidden;
overflow: clip;
isolation: isolate;
border-radius: 18px;
background:
radial-gradient(90% 70% at 0% 0%, rgba(74, 120, 255, .55) 0%, rgba(74, 120, 255, 0) 60%),
linear-gradient(225deg, #0b22a8 0%, #071a6e 52%, #040f48 100%);
box-shadow: 0 34px 70px -40px rgba(4, 18, 80, .7);
color: #fff;
font-family: var(--rs-font-body, "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif);
}
/* ---- the abstract ---- */
.rs-wcxv-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
/* a faint dot pattern, fading out towards the lower left */
.rs-wcxv-dotgrid {
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(143, 180, 255, .55) 1px, transparent 1.6px);
background-size: 22px 22px;
opacity: .35;
-webkit-mask-image: radial-gradient(70% 70% at 22% 22%, #000 0%, transparent 100%);
mask-image: radial-gradient(70% 70% at 22% 22%, #000 0%, transparent 100%);
}
/* one pool of light that wanders (blurred, so it reads as glow, not a shape) */
.rs-wcxv-aurora {
position: absolute;
right: -18%;
top: -34%;
width: 72%;
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle, rgba(120, 160, 255, .6) 0%, rgba(120, 160, 255, 0) 70%);
filter: blur(44px);
animation: rs-wcxv-aurora 22s ease-in-out infinite alternate;
will-change: transform;
}
@keyframes rs-wcxv-aurora {
0% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(-8%, 6%, 0) scale(1.1); }
100% { transform: translate3d(5%, 10%, 0) scale(.96); }
}
/* three light-blue waves rolling along the bottom: each svg is twice the panel's width and slides by
half of itself (one two-period tile), so the loop is seamless; different speeds, one running back */
.rs-wcxv-wave {
position: absolute;
right: 0;
bottom: 0;
width: 200%;
height: 46%;
animation: rs-wcxv-roll var(--t, 18s) linear infinite;
will-change: transform;
}
.rs-wcxv-wave path {
fill: var(--wcxv-sky);
}
.rs-wcxv-wave--1 { height: 52%; fill-opacity: .10; --t: 26s; }
.rs-wcxv-wave--2 { height: 40%; fill-opacity: .14; --t: 17s; animation-direction: reverse; }
.rs-wcxv-wave--3 { height: 28%; fill-opacity: .22; --t: 12s; animation-delay: -4s; }
@keyframes rs-wcxv-roll {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(50%, 0, 0); }
}
/* ---- the slider ---- */
.rs-wcxv-stage {
position: absolute;
inset: 0;
z-index: 1;
display: grid;
place-items: center;
padding: 40px 48px 66px;
}
.rs-wcxv-slide {
position: relative;
grid-area: 1 / 1;
display: grid;
gap: 10px;
width: min(100%, 460px);
padding: 26px 28px 28px;
border-radius: 16px;
background: rgba(255, 255, 255, .08);
-webkit-backdrop-filter: blur(18px) saturate(140%);
backdrop-filter: blur(18px) saturate(140%);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .22), 0 30px 60px -34px rgba(2, 10, 50, .8);
opacity: 0;
translate: -52px 0;
scale: .97;
pointer-events: none;
transition: opacity .55s ease, translate .8s cubic-bezier(.22, 1, .36, 1), scale .8s cubic-bezier(.22, 1, .36, 1);
}
.rs-wcxv-slide.is-active {
opacity: 1;
translate: 0 0;
scale: 1;
pointer-events: auto;
}
.rs-wcxv-slide.is-leaving {
translate: 52px 0;
scale: .97;
transition-duration: .4s, .5s, .5s;
}
/* the oversized index numeral, the rhythm the reason cards use; drifts a little
further than the card for depth */
.rs-wcxv-num {
position: absolute;
left: 22px;
top: 10px;
font-family: var(--rs-font-heading, "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif);
font-size: 84px;
font-weight: 500;
font-style: normal;
letter-spacing: -.05em;
line-height: 1;
color: rgba(255, 255, 255, .10);
translate: -24px 0;
transition: translate 1s cubic-bezier(.22, 1, .36, 1) .05s;
pointer-events: none;
}
.rs-wcxv-slide.is-active .rs-wcxv-num {
translate: 0 0;
}
.rs-wcxv-slide.is-leaving .rs-wcxv-num {
translate: 24px 0;
transition-duration: .5s;
transition-delay: 0s;
}
.rs-wcxv-eyebrow {
font-size: 10.5px;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--wcxv-sky);
}
.rs-wcxv h3.rs-wcxv-title {
margin: 2px 0 0;
max-width: 320px;
font-family: var(--rs-font-heading, "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif);
font-size: 22px;
font-weight: 500;
font-style: normal;
letter-spacing: -.015em;
line-height: 1.22;
color: #fff;
}
.rs-wcxv p.rs-wcxv-text {
margin: 4px 0 0;
max-width: 360px;
font-size: 14px;
line-height: 1.65;
color: rgba(255, 255, 255, .78);
}
/* ---- which reason is up (dots, with the current one filling), the counter, pause / play ---- */
.rs-wcxv-dots {
position: absolute;
right: 24px;
bottom: 26px;
z-index: 2;
display: flex;
gap: 6px;
}
.rs-wcxv-dots i {
position: relative;
width: 6px;
height: 6px;
overflow: hidden;
border-radius: 999px;
background: rgba(255, 255, 255, .28);
transition: width .45s cubic-bezier(.22, 1, .36, 1);
}
.rs-wcxv-dots i.is-on {
width: 30px;
}
.rs-wcxv-dots i b {
position: absolute;
inset: 0;
width: 0;
background: #fff;
}
.rs-wcxv-dots i.is-on b {
width: var(--rs-wcxv-p);
}
.rs-wcxv-count {
position: absolute;
left: 64px;
bottom: 26px;
z-index: 2;
font-size: 11.5px;
font-variant-numeric: tabular-nums;
letter-spacing: .08em;
color: rgba(255, 255, 255, .55);
}
.rs-wcxv-count b {
font-weight: 600;
color: #fff;
}
.rs-wcxv-toggle {
position: absolute;
left: 16px;
bottom: 16px;
z-index: 2;
display: grid;
place-items: center;
width: 36px;
height: 36px;
padding: 0;
border: 0;
border-radius: 10px;
background: rgba(255, 255, 255, .12);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
color: #fff;
cursor: pointer;
transition: background .25s ease, transform .25s ease;
}
.rs-wcxv-toggle:hover {
background: rgba(255, 255, 255, .22);
transform: translateY(-1px);
}
.rs-wcxv-toggle:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
.rs-wcxv-toggle svg {
width: 18px;
height: 18px;
}
.rs-wcxv-ico-play,
.rs-wcxv[data-paused] .rs-wcxv-ico-pause {
display: none;
}
.rs-wcxv[data-paused] .rs-wcxv-ico-play {
display: block;
}
.rs-wcxv[data-paused] .rs-wcxv-aurora,
.rs-wcxv[data-paused] .rs-wcxv-wave {
animation-play-state: paused;
}
.rs-wcxv[data-static] .rs-wcxv-toggle,
.rs-wcxv[data-static] .rs-wcxv-dots,
.rs-wcxv[data-static] .rs-wcxv-count {
display: none;
}
/* ---- tablet / phone ---- */
@media (max-width: 1199px) {
.rs-wcx-head--visual {
row-gap: 28px;
}
.rs-wcx-head--visual .rs-wcx-headline,
.rs-wcx-visual {
grid-column: 1;
}
.rs-wcx-head--visual .rs-wcx-lead {
max-width: 660px;
}
.rs-wcxv {
min-height: 320px;
}
}
@media (max-width: 767px) {
.rs-wcxv {
aspect-ratio: auto;
height: 400px;
min-height: 0;
border-radius: 14px;
}
.rs-wcxv-stage {
padding: 24px 18px 70px;
}
.rs-wcxv-slide {
padding: 22px 20px 24px;
}
.rs-wcxv-num {
left: 16px;
top: 8px;
font-size: 64px;
}
.rs-wcxv h3.rs-wcxv-title {
font-size: 19px;
}
.rs-wcxv p.rs-wcxv-text {
font-size: 13.5px;
}
.rs-wcxv-count {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.rs-wcxv-aurora,
.rs-wcxv-wave {
animation: none;
}
.rs-wcxv-slide,
.rs-wcxv-num,
.rs-wcxv-dots i {
transition: none;
}
}
/* ============================================================
HOME, Mission, Vision & Values: glassmorphism
No overlay on the photos. A wide, low frosted-glass card (landscape)
sits on the bottom-left of the photo and carries the title + copy of
the active tab (title left, copy right); the three photos cross-fade
underneath it.
============================================================ */
.rs-mvv-photo {
opacity: 0;
transition: opacity .9s ease;
}
.rs-mvv-photo.is-active {
opacity: 1;
}
.rs-mvv-photo[data-mvv-photo="mission"] {
object-position: 50% 45%;
}
.rs-mvv-photo[data-mvv-photo="vision"] {
object-position: 40% 42%;
}
.rs-mvv-photo[data-mvv-photo="values"] {
object-position: 25% 40%;
}
.rs-mvv .rs-mvv-panels.rs-mvv-glass-card {
position: absolute;
z-index: 2;
right: 24px;
bottom: 24px;
width: min(820px, calc(100% - 48px));
margin: 0;
padding: 26px 32px;
display: grid;
align-items: center;
background: rgba(15, 23, 42, .26);
-webkit-backdrop-filter: blur(18px) saturate(150%);
backdrop-filter: blur(18px) saturate(150%);
border: 1px solid rgba(255, 255, 255, .45);
box-shadow: 0 10px 30px rgba(15, 23, 42, .18), inset 0 1px 0 rgba(255, 255, 255, .5);
}
/* pinned mode (tablet / desktop): the glass card is held back until the stage locks to the
top of the screen (.is-stuck, set by the scroll script in index.php), then rises in.
Phones, reduced motion and no-JS never get .is-pin, so the card is simply there. */
.rs-mvv.is-pin .rs-mvv-panels.rs-mvv-glass-card {
opacity: 0;
translate: 0 36px;
pointer-events: none;
transition: opacity .55s ease, translate .75s cubic-bezier(.22, 1, .36, 1);
}
.rs-mvv.is-pin.is-stuck .rs-mvv-panels.rs-mvv-glass-card {
opacity: 1;
translate: 0 0;
pointer-events: auto;
}
.rs-mvv .rs-mvv-glass-card .rs-mvv-panel {
grid-area: 1 / 1;
display: grid;
grid-template-columns: minmax(150px, 30%) minmax(0, 1fr);
column-gap: 32px;
align-items: center;
}
.rs-mvv .rs-mvv-glass-card .rs-mvv-panel h3 {
margin: 0;
font-size: clamp(26px, 2.6vw, 38px);
color: #fff;
text-shadow: 0 1px 12px rgba(15, 23, 42, .45);
}
.rs-mvv .rs-mvv-glass-card .rs-mvv-panel p {
margin: 0;
max-width: none;
font-size: 15.5px;
line-height: 1.7;
color: #fff;
text-shadow: 0 1px 10px rgba(15, 23, 42, .5);
}
@media (max-width: 991px) {
.rs-mvv .rs-mvv-panels.rs-mvv-glass-card {
right: 16px;
bottom: 16px;
width: calc(100% - 32px);
padding: 20px 22px;
}
.rs-mvv .rs-mvv-glass-card .rs-mvv-panel {
grid-template-columns: minmax(110px, 28%) minmax(0, 1fr);
column-gap: 22px;
}
.rs-mvv .rs-mvv-glass-card .rs-mvv-panel p {
font-size: 14px;
line-height: 1.6;
}
}
@media (max-width: 767px) {
.rs-mvv-media {
aspect-ratio: 4 / 5;
min-height: 380px;
}
.rs-mvv.is-pin .rs-mvv-media {
min-height: 300px;
}
.rs-mvv .rs-mvv-panels.rs-mvv-glass-card {
right: 12px;
bottom: 12px;
width: calc(100% - 24px);
padding: 18px 18px;
}
.rs-mvv .rs-mvv-glass-card .rs-mvv-panel {
grid-template-columns: 1fr;
row-gap: 8px;
}
}
/* ============================================================
HOME, Our Services: light cards, white arrow button, "Drag" cursor
Cards are pale tiles with the title at the top and the summary at
the foot. The first visible card (and any card under the pointer)
shows its photo. Mobile shows 1.5 cards so the next one peeks.
Corners stay square (0px) like the rest of the homepage.
============================================================ */
.rs-sd-row {
position: relative;
box-sizing: border-box;
width: 100%;
max-width: 1320px;
margin-inline: auto;
padding-inline: 0;
}
@media (min-width: 992px) {
.rs-sd-row {
padding-inline: 12px;
}
}
@media (min-width: 992px) and (max-width: 1399.98px) {
.rs-sd-row {
max-width: 1140px;
}
}
.rs-sd-card {
height: 480px;
color: #0b0d12;
background: #eef2fb;
transition: color .4s ease;
}
.rs-sd-card--solid {
background: #eef2fb;
}
.rs-sd-img {
opacity: 0;
transition: opacity .6s ease, transform 1.1s cubic-bezier(.2, .8, .2, 1);
}
.rs-sd-shade {
display: block;
opacity: 0;
background: linear-gradient(180deg, rgba(9, 20, 70, .4) 0%, rgba(9, 20, 70, .2) 35%, rgba(9, 20, 70, .94) 100%);
transition: opacity .6s ease;
}
.rs-sd-card--solid .rs-sd-shade {
display: block;
}
.rs-sd-num,
.rs-sd-list {
display: none;
}
.rs-sd-body {
padding: 26px 24px 96px;
}
.rs-sd-card-title {
font-size: clamp(21px, 1.9vw, 26px);
}
.rs-sd-bottom {
gap: 0;
}
.rs-sd-summary {
-webkit-line-clamp: 5;
line-clamp: 5;
font-size: clamp(14px, 1vw, 16px);
line-height: 1.7;
color: #3d4455;
transition: color .4s ease;
}
/* arrow: solid white disc at the foot of the card */
.rs-sd-arrow {
top: auto;
left: auto;
right: 24px;
bottom: 24px;
width: 46px;
height: 46px;
border: 0;
border-radius: 50%;
background: #fff;
color: #092db6;
box-shadow: 0 4px 14px rgba(15, 23, 42, .1);
}
/* photo state: first visible card, or the card being pointed at */
.rs-sd-swiper .swiper-slide-active .rs-sd-card,
.rs-sd-card:hover,
.rs-sd-card:focus-visible {
color: #fff;
}
.rs-sd-swiper .swiper-slide-active .rs-sd-img,
.rs-sd-swiper .swiper-slide-active .rs-sd-shade,
.rs-sd-card:hover .rs-sd-img,
.rs-sd-card:hover .rs-sd-shade,
.rs-sd-card:focus-visible .rs-sd-img,
.rs-sd-card:focus-visible .rs-sd-shade {
opacity: 1;
}
.rs-sd-swiper .swiper-slide-active .rs-sd-summary,
.rs-sd-card:hover .rs-sd-summary,
.rs-sd-card:focus-visible .rs-sd-summary {
color: rgba(255, 255, 255, .92);
}
/* while another card is pointed at, the first card goes back to its pale state */
.rs-sd-swiper:has(.rs-sd-card:hover) .swiper-slide-active .rs-sd-card:not(:hover) {
color: #0b0d12;
}
.rs-sd-swiper:has(.rs-sd-card:hover) .swiper-slide-active .rs-sd-card:not(:hover) .rs-sd-img,
.rs-sd-swiper:has(.rs-sd-card:hover) .swiper-slide-active .rs-sd-card:not(:hover) .rs-sd-shade {
opacity: 0;
}
.rs-sd-swiper:has(.rs-sd-card:hover) .swiper-slide-active .rs-sd-card:not(:hover) .rs-sd-summary {
color: #3d4455;
}
.rs-sd-card:hover .rs-sd-arrow,
.rs-sd-card:focus-visible .rs-sd-arrow {
background: #092db6;
color: #fff;
}
/* ---- "Drag" cursor: a small round chip with a left/right chevron pair ---- */
.rs-sd-drag {
position: absolute;
top: 0;
right: 0;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, .92);
box-shadow: 0 4px 14px rgba(15, 23, 42, .18);
color: #0b0d12;
pointer-events: none;
opacity: 0;
transition: opacity .25s ease, background .2s ease, color .2s ease;
}
.rs-sd-drag svg {
width: 22px;
height: 22px;
}
.rs-sd-drag.is-on {
opacity: 1;
}
.rs-sd-drag.is-down {
background: #092db6;
color: #fff;
}
@media (hover: none), (pointer: coarse) {
.rs-sd-drag {
display: none;
}
}
@media (max-width: 991px) {
.rs-sd-card {
height: 440px;
}
}
@media (max-width: 599px) {
.rs-sd-card {
height: 400px;
}
.rs-sd-body {
padding: 22px 18px 84px;
}
.rs-sd-arrow {
right: 18px;
bottom: 18px;
width: 42px;
height: 42px;
}
.rs-sd-card-title {
font-size: 22px;
}
.rs-sd-summary {
font-size: 14px;
-webkit-line-clamp: 4;
line-clamp: 4;
}
}
/* ============================================================
HOME, phone layout: shorter Book a Valuation + Mission/Vision/Values
============================================================ */
@media (max-width: 767px) {
/* ---- Book a Valuation: compact steps, a short banner photo, stats in one row ---- */
.rs-bk {
padding: 44px 0 40px;
}
.rs-bk-grid {
row-gap: 26px;
}
.rs-bk-eyebrow {
margin-bottom: 16px;
padding: 7px 12px;
font-size: 10.5px;
}
.rs-bk h2.rs-bk-title {
margin-bottom: 12px;
font-size: 30px;
}
.rs-bk-desc {
margin-bottom: 20px;
font-size: 14.5px;
line-height: 1.65;
}
.rs-bk-steps {
margin-bottom: 22px;
}
.rs-bk-step {
grid-template-columns: 36px minmax(0, 1fr);
column-gap: 14px;
padding-bottom: 14px;
}
.rs-bk-step-num {
width: 36px;
height: 36px;
font-size: 12px;
}
.rs-bk-step::before {
right: 17px;
top: 36px;
}
.rs-bk h3.rs-bk-step-title {
margin: 0 0 2px;
font-size: 16px;
}
.rs-bk-step p {
font-size: 13.5px;
line-height: 1.5;
}
.rs-bk-visual {
aspect-ratio: 4 / 3;
}
@media (max-width: 575px) {
.rs-bk-visual {
aspect-ratio: 1 / 1.2;
}
}
.rs-bk-photo {
object-position: 50% 22%;
}
.rs-bk-chip--rics {
right: 10px;
bottom: 10px;
padding: 6px 10px;
}
.rs-bk-chip--rics img {
height: 26px;
}
.rs-bk-stats {
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 24px;
}
.rs-bk-stats li {
padding: 16px 12px 18px;
}
.rs-bk-stats strong {
font-size: 20px;
}
.rs-bk-stats strong small {
display: block;
font-size: 10px;
line-height: 1.2;
}
.rs-bk-stats span {
font-size: 9.5px;
letter-spacing: .08em;
line-height: 1.35;
}
.rs-bk-note {
margin-top: 12px;
font-size: 11.5px;
}
/* ---- Mission, Vision & Values: a short photo with a compact glass card ---- */
.rs-mvv-media,
.rs-mvv.is-pin .rs-mvv-media {
flex: none;
aspect-ratio: auto;
height: 340px;
min-height: 0;
max-height: none;
}
.rs-mvv .rs-mvv-panels.rs-mvv-glass-card {
right: 10px;
bottom: 10px;
width: calc(100% - 20px);
padding: 14px 16px;
}
.rs-mvv .rs-mvv-glass-card .rs-mvv-panel {
row-gap: 6px;
}
.rs-mvv .rs-mvv-glass-card .rs-mvv-panel h3 {
font-size: 22px;
}
.rs-mvv .rs-mvv-glass-card .rs-mvv-panel p {
font-size: 13px;
line-height: 1.55;
}
}
/* Home hero: give the main headings normal line-height so wrapped lines do not touch */
body.rs-home #heroCarouselSection .main-heading {
line-height: 1.2;
}
/* ==================================================================
Homepage main headings: one weight (500) for every section title
================================================================== */
body.rs-home :is(.main-heading, .rs-abx-title, .rs-bk-title, .rs-sd-title, .rs-mvv-heading, .rs-wcx-title, .rs-adv-cta-heading, .rs-mr-heading, .rs-ct__title, .rs-sub__title, .rs-faq-heading) {
font-weight: 500 !important;
}
/* ==================================================================
Headings: one colour. Every heading on a light background is the
same black as the service pages (--frv-ink); no blue words inside.
Headings on dark / photo panels stay white.
================================================================== */
body.rs-home :is(.rs-abx-title, .rs-bk-title, .rs-sd-title, .rs-mvv-heading, .rs-wcx-title, .rs-exp3-heading:not(.rs-exp3-heading--light), .rs-mr-heading, .rs-faq-heading),
body:is(.rs-home, :has(main.frv-page)) .rs-popup-title {
color: #0a1230 !important;
}
body.rs-home :is(.rs-bk-title, .rs-mvv-heading, .rs-wcx-title, .rs-mr-heading, .rs-faq-heading) span,
body:is(.rs-home, :has(main.frv-page)) .rs-popup-title span {
color: inherit !important;
}
/* ==================================================================
FAQ: every page shows the home page's FAQ (title, spacing, gutters).
The two-column layout itself comes from bundle.css; these rules only
bring the type and spacing in line with the home page, and out-rank
the older per-page FAQ title overrides.
================================================================== */
body .rs-faq-section.rs-faq-section .rs-faq-heading {
font-family: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif !important;
font-weight: 500 !important;
color: #0a1230 !important;
line-height: 1.05 !important;
letter-spacing: .2px !important;
}
body .rs-faq-section.rs-faq-section .rs-faq-heading span {
color: inherit !important;
}
@media (min-width: 992px) {
body .rs-faq-section.rs-faq-section .rs-faq-heading {
font-size: 44px !important;
}
body .rs-faq-section.rs-faq-section {
padding: 56px 0 90px !important;
}
/* inside a container the gutter already comes from the container */
body :is(.container, .gvr__wrap) .rs-faq-section.rs-faq-section > .rs-faq-grid {
padding-right: 0;
padding-left: 0;
}
}
@media (min-width: 768px) and (max-width: 991px) {
body .rs-faq-section.rs-faq-section .rs-faq-heading {
font-size: 38px !important;
}
}
@media (max-width: 767px) {
body .rs-faq-section.rs-faq-section .rs-faq-heading {
font-size: 22px !important;
line-height: 1.25 !important;
}
}
/* FAQ on the mortgage calculator: the same look as the home page FAQ
(flat hairline rows, plain "+" that turns into "×" when a row is open) */
.mortgage-calculator h4 {
margin: 36px 0 12px;
font-family: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
font-size: 32px;
font-weight: 500;
line-height: 1.1;
color: #0a1230;
}
#faq .faq-section {
border-bottom: 1px solid #052056;
}
#faq .faq-question {
position: relative;
margin: 0;
padding: 22px 0 22px 36px;
font-family: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 500 !important;
line-height: 1.4;
color: #052056;
cursor: pointer;
transition: color .2s ease;
}
#faq .faq-question:hover {
color: #092db6;
}
#faq .faq-question::before,
#faq .faq-question::after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 18px;
height: 1.5px;
background: currentColor;
transition: transform .3s ease;
}
#faq .faq-question::after {
transform: rotate(90deg);
}
#faq .faq-question.is-open::before {
transform: rotate(45deg);
}
#faq .faq-question.is-open::after {
transform: rotate(135deg);
}
#faq .faq-answer {
margin: 0;
padding: 0 0 26px;
max-width: 94%;
font-family: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.7;
color: #4b5a6b;
}
/* ============================================================
HOME, How We Help (.rs-hx), replaces the Expertise bento
One photo frame on the left; three numbered rows on the right.
The row under the pointer / focus shows its photo (crossfade,
no zoom). Light, flat, square edges.
============================================================ */
.rs-hx {
padding: 72px 0;
background: #fff;
font-family: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
}
.rs-hx-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: 64px;
align-items: stretch;
}
.rs-hx-frame {
position: relative;
min-height: 460px;
overflow: hidden;
background: #eef2fb;
}
.rs-hx-shot {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity .6s ease;
}
.rs-hx-shot.is-on {
opacity: 1;
}
.rs-hx-shot img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* the report mockup sits whole on the pale panel */
.rs-hx-shot--book {
background: #eef2fb;
}
.rs-hx-shot--book img {
object-fit: contain;
padding: 9% 8%;
}
.rs-hx-caption {
position: absolute;
right: 0;
bottom: 0;
z-index: 1;
padding: 10px 16px;
background: #fff;
font-size: 12px;
font-weight: 600;
letter-spacing: .08em;
color: #5b6577;
}
.rs-hx-caption span {
color: #0b2dbe;
}
.rs-hx-side {
display: flex;
flex-direction: column;
}
.rs-hx-eyebrow {
display: block;
margin-bottom: 14px;
font-size: 12px;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: #0b2dbe;
}
.rs-hx .rs-hx-title {
margin: 0 0 28px;
font-family: inherit;
font-size: clamp(26px, 2.5vw, 38px);
font-weight: 500;
line-height: 1.18;
letter-spacing: -.01em;
color: #0a1230;
}
.rs-hx-list {
margin: 0;
padding: 0;
list-style: none;
border-bottom: 1px solid #dfe4ee;
}
.rs-hx-row {
position: relative;
display: grid;
grid-template-columns: 52px minmax(0, 1fr);
padding: 22px 0;
border-top: 1px solid #dfe4ee;
color: inherit;
text-decoration: none;
}
/* active row: the top rule turns brand blue */
.rs-hx-row::before {
content: "";
position: absolute;
top: -1px;
right: 0;
width: 100%;
height: 2px;
background: #0b2dbe;
transform: scaleX(0);
transform-origin: 100% 50%;
transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.rs-hx-row.is-on::before {
transform: scaleX(1);
}
.rs-hx-num {
padding-top: 3px;
font-size: 13px;
font-weight: 600;
letter-spacing: .04em;
color: #8a93a6;
transition: color .3s ease;
}
.rs-hx-row.is-on .rs-hx-num {
color: #0b2dbe;
}
.rs-hx-body {
display: flex;
flex-direction: column;
gap: 6px;
}
.rs-hx-label {
font-size: 11px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: #5b6577;
}
.rs-hx-heading {
font-size: clamp(19px, 1.5vw, 22px);
font-weight: 500;
line-height: 1.3;
color: #0a1230;
}
.rs-hx-text {
max-width: 520px;
font-size: 15px;
line-height: 1.55;
color: #4a5568;
}
.rs-hx-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 6px;
font-size: 14px;
font-weight: 500;
color: #0b2dbe;
}
.rs-hx-link svg {
width: 16px;
height: 16px;
}
.rs-hx-row:hover .rs-hx-link,
.rs-hx-row:focus-visible .rs-hx-link {
text-decoration: underline;
text-underline-offset: 4px;
}
.rs-hx-row:focus-visible {
outline: 2px solid #0b2dbe;
outline-offset: 2px;
}
body.rs-home .rs-hx {
padding-top: calc(var(--rs-gap) / 2);
padding-bottom: calc(var(--rs-gap) / 2);
}
@media (max-width: 991px) {
.rs-hx-grid {
grid-template-columns: 1fr;
gap: 32px;
}
.rs-hx-frame {
min-height: 0;
aspect-ratio: 16 / 10;
}
}
@media (max-width: 575px) {
.rs-hx-row {
grid-template-columns: 38px minmax(0, 1fr);
padding: 18px 0;
}
.rs-hx-text {
font-size: 14px;
}
}
/* ============================================================
Get in Touch (.rs-cq), every page that includes
includes/contact-form.php. Replaces the blue .rs-ct band:
one bordered box, a pale details panel on the left and the
enquiry form (boxed fields, two per row) on the right.
The submit button keeps .rs-ct__submit for the shared CTA style.
============================================================ */
.rs-cq {
padding: 72px 0;
background: #fff;
font-family: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
}
.rs-cq__box {
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
border: 1px solid #dfe4ee;
}
.rs-cq__info {
position: relative;
display: flex;
flex-direction: column;
padding: clamp(28px, 3.4vw, 52px);
background: #f4f6fb;
}
/* brand accent: a short rule on the panel's top edge */
.rs-cq__info::before {
content: "";
position: absolute;
top: -1px;
right: -1px;
width: 96px;
height: 3px;
background: #0b2dbe;
}
.rs-cq__eyebrow {
display: block;
margin-bottom: 14px;
font-size: 12px;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: #0b2dbe;
}
.rs-cq .rs-cq__title {
margin: 0 0 16px;
font-family: inherit;
font-size: clamp(26px, 2.4vw, 36px);
font-weight: 500;
line-height: 1.18;
letter-spacing: -.01em;
color: #0a1230;
}
.rs-cq .rs-cq__text {
max-width: 460px;
margin: 0 0 32px;
font-size: 16px;
line-height: 1.6;
color: #4a5568;
}
.rs-cq__details {
margin: auto 0 0;
border-top: 1px solid #dfe4ee;
}
.rs-cq__detail {
display: grid;
grid-template-columns: 84px minmax(0, 1fr);
gap: 16px;
padding: 16px 0;
border-bottom: 1px solid #dfe4ee;
}
.rs-cq__detail dt {
padding-top: 2px;
font-size: 11px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: #5b6577;
}
.rs-cq__detail dd {
margin: 0;
font-size: 15.5px;
line-height: 1.45;
}
.rs-cq__detail a {
color: #0a1230;
text-decoration: none;
}
.rs-cq__detail a:hover {
color: #0b2dbe;
text-decoration: underline;
text-underline-offset: 3px;
}
.rs-cq__form {
display: flex;
flex-direction: column;
gap: 22px;
padding: clamp(28px, 3.4vw, 52px);
background: #fff;
}
.rs-cq__fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px 20px;
}
.rs-cq__field {
display: flex;
flex-direction: column;
gap: 8px;
}
.rs-cq__field label {
margin: 0;
font-size: 13px;
font-weight: 500;
color: #0a1230;
}
.rs-cq__field input {
width: 100%;
height: 50px;
padding: 0 14px;
border: 1px solid #cfd6e4;
border-radius: 0;
background: #fff;
box-shadow: none;
font: inherit;
font-size: 15px;
color: #0a1230;
outline: none;
transition: border-color .2s ease, box-shadow .2s ease;
}
.rs-cq__field input:focus {
border-color: #0b2dbe;
box-shadow: inset 0 0 0 1px #0b2dbe;
}
.rs-cq__field input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 40px #fff inset;
-webkit-text-fill-color: #0a1230;
}
.rs-cq__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px 24px;
margin-top: 4px;
}
.rs-cq .rs-ct__submit {
margin: 0 !important;
}
.rs-cq__privacy {
margin: 0;
font-size: 13px;
line-height: 1.5;
color: #5b6577;
}
.rs-cq__privacy a {
color: #0a1230;
text-decoration: underline;
text-underline-offset: 3px;
}
/* spacing on the pages that set the shared rhythm */
body.rs-home .rs-cq {
padding-top: calc(var(--rs-gap) / 2);
padding-bottom: calc(var(--rs-gap) / 2);
}
html body.rs-sector .rs-cq {
padding-top: var(--sx-pad);
padding-bottom: var(--sx-pad);
}
@media (max-width: 991px) {
.rs-cq__box {
grid-template-columns: minmax(0, 1fr);
}
.rs-cq__details {
margin-top: 0;
}
}
@media (max-width: 575px) {
.rs-cq {
padding: 48px 0;
}
.rs-cq__fields {
grid-template-columns: 1fr;
}
.rs-cq__detail {
grid-template-columns: 64px minmax(0, 1fr);
}
.rs-cq__form {
padding: 24px 20px;
}
/* the 304px reCAPTCHA box, scaled to fit the narrow column */
.rs-cq .g-recaptcha {
transform: scale(.9);
transform-origin: 100% 0;
}
}
/* the subscribe band follows the contact box: the box's own bottom padding is the gap */
.rs-cq + .rs-sub {
padding-top: 0;
}
body.rs-home .rs-cq + .rs-sub {
padding-bottom: calc(var(--rs-gap) / 2);
}
html body.rs-sector .rs-cq + .rs-sub {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: var(--sx-pad) !important;
}
/* ============================================================
Report cards (.rs-rc), includes/report-card.php
Home "Research" block and the /market-research-and-reports
listing. Compact: landscape cover, sector | date, title, two
lines of summary, period + "Read report". White cards on a
pale band, square edges, no lift or zoom.
============================================================ */
.rs-rc-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
}
.rs-rc {
display: flex;
flex-direction: column;
height: 100%;
background: #fff;
border: 1px solid #dfe4ee;
color: #0a1230;
text-decoration: none;
font-family: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
transition: border-color .25s ease;
}
.rs-rc:hover,
.rs-rc:focus-visible {
border-color: #0b2dbe;
color: #0a1230;
}
.rs-rc:focus-visible {
outline: 2px solid #0b2dbe;
outline-offset: 2px;
}
.rs-rc__media {
position: relative;
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
background: #eef2f8;
}
.rs-rc__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.rs-rc__flag {
position: absolute;
top: 12px;
right: 12px;
padding: 5px 10px;
background: #0b2dbe;
color: #fff;
font-size: 11px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
}
.rs-rc__body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: 10px;
padding: 18px 20px 20px;
}
.rs-rc__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 10px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: #5b6577;
}
.rs-rc__tag {
color: #0b2dbe;
}
.rs-rc__meta time {
padding-right: 10px;
border-right: 1px solid #cfd6e4;
font-weight: 500;
}
.rs-rc__title {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 17px;
font-weight: 500;
line-height: 1.35;
color: #0a1230;
}
.rs-rc__desc {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 14px;
line-height: 1.55;
color: #5b6577;
}
.rs-rc__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: auto;
padding-top: 12px;
border-top: 1px solid #e8ecf3;
}
.rs-rc__period {
padding: 4px 8px;
border: 1px solid #cfd6e4;
font-size: 11px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: #4a5568;
}
.rs-rc__more {
display: inline-flex;
align-items: center;
gap: 6px;
margin-right: auto;
font-size: 13.5px;
font-weight: 500;
color: #0b2dbe;
}
.rs-rc__more svg {
width: 15px;
height: 15px;
}
.rs-rc:hover .rs-rc__more {
text-decoration: underline;
text-underline-offset: 3px;
}
/* the home block sits on a pale band so the white cards read as a set */
.rs-mr-section--compact {
background: #f4f6fb;
}
.rs-mr-section--compact .rs-mr-header {
margin-bottom: 28px;
padding-bottom: 22px;
}
body.rs-home .rs-mr-section--compact {
padding-top: calc(var(--rs-band) * .75) !important;
padding-bottom: calc(var(--rs-band) * .75) !important;
}
/* listing page: the pager keeps its own top margin under the grid */
.mrr-page .rs-rc-grid {
margin-bottom: 8px;
}
@media (max-width: 991px) {
.rs-rc-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 575px) {
.rs-rc-grid {
grid-template-columns: 1fr;
gap: 14px;
}
.rs-rc__body {
padding: 16px;
}
}
/* ============================================================
HOME, roomier section rhythm (2026-11-03)
The page read tight: most neighbours were only ~50-56px apart.
One larger gap for every block; white sections take half a gap
above and below, tinted bands take --rs-band inside. The blue
approach strip keeps to one screen, so it only gains a little.
============================================================ */
body.rs-home {
--rs-gap: 168px;
--rs-band: 104px;
}
@media (max-width: 1199px) {
body.rs-home {
--rs-gap: 136px;
--rs-band: 88px;
}
}
@media (max-width: 767px) {
body.rs-home {
--rs-gap: 96px;
--rs-band: 64px;
}
}
html body.rs-home .rs-qs {
padding-top: clamp(40px, 4.4vw, 72px);
padding-bottom: clamp(40px, 4.4vw, 72px);
}
html body.rs-home .rs-abx--intro,
html body.rs-home .rs-sd,
html body.rs-home .rs-hx,
html body.rs-home .rs-cq {
padding-top: calc(var(--rs-gap) / 2);
padding-bottom: calc(var(--rs-gap) / 2);
}
html body.rs-home .rs-bk {
padding-top: var(--rs-band);
padding-bottom: var(--rs-band);
}
html body.rs-home .rs-mr-section--compact {
padding-top: var(--rs-band) !important;
padding-bottom: var(--rs-band) !important;
}
/* subscribe follows Get in Touch: the box's bottom half-gap is the space above it */
html body.rs-home .rs-cq + .rs-sub {
padding-top: 0;
padding-bottom: calc(var(--rs-gap) / 2);
}
html body.rs-home .rs-home-faq .rs-faq-section {
padding-top: calc(var(--rs-gap) / 2) !important;
padding-bottom: calc(var(--rs-gap) * .6) !important;
}
@media (max-width: 991px) {
html body.rs-home .rs-qs {
padding-top: 40px;
padding-bottom: 40px;
}
html body.rs-home .rs-sd-head {
margin-bottom: 40px;
}
}
@media (max-width: 575px) {
html body.rs-home .rs-qs {
padding-top: 36px;
padding-bottom: 36px;
}
}
/* ============================================================
HOME, Sector Expertise (.rs-hsec), 2026-11-04
A 2 x 2 photo collage beside a pale panel. Every sector has four
photos; the set changes on its own every 5s (each frame a beat
after the last) and the panel copy follows. Square edges, no zoom.
============================================================ */
.rs-hsec {
background: #fff;
font-family: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
}
.rs-hsec-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 40px;
}
.rs-home .rs-hsec .rs-hsec-title {
margin: 0;
font-family: inherit;
font-size: clamp(30px, 3vw, 44px);
font-weight: 500;
line-height: 1.15;
letter-spacing: -.015em;
color: #0a1230;
}
.rs-hsec-nav {
display: flex;
align-items: center;
gap: 8px;
}
.rs-hsec-count {
margin-left: 12px;
font-size: 13px;
font-weight: 600;
letter-spacing: .06em;
color: #8a93a6;
}
.rs-hsec-count span {
color: #0b2dbe;
}
.rs-hsec-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid #cfd6e4;
border-radius: 0;
background: #fff;
color: #0a1230;
cursor: pointer;
transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.rs-hsec-btn svg {
width: 18px;
height: 18px;
}
.rs-hsec-btn:hover,
.rs-hsec-btn:focus-visible {
border-color: #0b2dbe;
background: #0b2dbe;
color: #fff;
}
.rs-hsec-stage {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
min-height: clamp(420px, 36vw, 540px);
}
.rs-hsec-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 2px;
background: #fff;
}
.rs-hsec-cell {
position: relative;
overflow: hidden;
background: #dfe6f5;
}
.rs-hsec-cell img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity .9s ease;
}
.rs-hsec-cell img.is-on {
opacity: 1;
}
.rs-hsec-panel {
position: relative;
display: flex;
align-items: center;
padding: clamp(32px, 4vw, 64px);
background: #f0f4fb;
}
.rs-hsec-copy {
max-width: 520px;
}
.rs-hsec-copy.is-on {
animation: rs-hsec-in .7s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes rs-hsec-in {
from { opacity: 0; transform: translate3d(0, 14px, 0); }
to { opacity: 1; transform: none; }
}
.rs-hsec-eyebrow {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 18px;
font-size: 12px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: #0b2dbe;
}
.rs-hsec-eyebrow span {
padding-right: 10px;
border-right: 1px solid rgba(11, 45, 190, .35);
font-weight: 500;
color: #3d4a6b;
}
.rs-home .rs-hsec .rs-hsec-name {
margin: 0 0 18px;
font-family: inherit;
font-size: clamp(28px, 2.6vw, 40px);
font-weight: 500;
line-height: 1.15;
letter-spacing: -.015em;
color: #0a1230;
}
.rs-hsec-text {
margin: 0 0 28px;
font-size: 16px;
line-height: 1.65;
color: #4a5568;
}
.rs-hsec-cta {
display: inline-flex;
align-items: center;
padding: 13px 26px;
background: #0b2dbe;
font-size: 14px;
font-weight: 500;
letter-spacing: .04em;
color: #fff;
text-decoration: none;
transition: background-color .25s ease;
}
.rs-hsec-cta:hover,
.rs-hsec-cta:focus-visible {
background: #06176e;
color: #fff;
}
/* time to the next sector */
.rs-hsec-bar {
position: absolute;
right: clamp(32px, 4vw, 64px);
left: clamp(32px, 4vw, 64px);
bottom: clamp(24px, 2.6vw, 40px);
height: 2px;
background: #d5dcea;
}
.rs-hsec-bar i {
position: absolute;
inset: 0;
background: #0b2dbe;
transform: scaleX(0);
transform-origin: 100% 50%;
}
.rs-hsec-bar i.is-run {
animation: rs-hsec-bar 4s linear both;
}
@keyframes rs-hsec-bar {
to { transform: scaleX(1); }
}
@media (max-width: 991px) {
.rs-hsec-stage {
grid-template-columns: minmax(0, 1fr);
min-height: 0;
}
.rs-hsec-grid {
aspect-ratio: 4 / 3;
}
.rs-hsec-panel {
padding: 36px 28px 56px;
}
.rs-hsec-bar {
right: 28px;
left: 28px;
bottom: 26px;
}
}
@media (max-width: 575px) {
.rs-hsec-head {
margin-bottom: 24px;
}
.rs-hsec-count {
display: none;
}
.rs-hsec-btn {
width: 40px;
height: 40px;
}
.rs-hsec-panel {
padding: 28px 20px 52px;
}
.rs-hsec-text {
font-size: 15px;
}
.rs-hsec-bar {
right: 20px;
left: 20px;
}
}
@media (prefers-reduced-motion: reduce) {
.rs-hsec-cell img {
transition: none;
}
.rs-hsec-copy.is-on {
animation: none;
}
}
/* ============================================================
HOME, Buy / sell / rent (.rs-hbuy), 2026-11-04
Brand-blue panel, a tall photo and two stacked photos; names sit
on a navy fade at the foot of each photo. No zoom on hover.
============================================================ */
.rs-hbuy {
background: #fff;
font-family: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
}
.rs-hbuy-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
min-height: clamp(420px, 34vw, 500px);
}
.rs-hbuy-panel {
grid-row: 1 / 3;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: clamp(28px, 2.8vw, 44px);
background: #0b2dbe;
color: #fff;
}
.rs-home .rs-hbuy .rs-hbuy-title {
margin: 0 0 16px;
font-family: inherit;
font-size: clamp(24px, 2vw, 30px);
font-weight: 500;
line-height: 1.22;
letter-spacing: -.01em;
color: #fff;
}
.rs-hbuy-text {
margin: 0 0 20px;
font-size: 16px;
line-height: 1.6;
color: rgba(255, 255, 255, .86);
}
.rs-hbuy-link {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 13px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: #fff;
text-decoration: none;
}
.rs-hbuy-link svg {
width: 8px;
height: 10px;
}
.rs-hbuy-link:hover,
.rs-hbuy-link:focus-visible {
color: #fff;
text-decoration: underline;
text-underline-offset: 5px;
}
.rs-hbuy-tile {
position: relative;
display: block;
overflow: hidden;
background: #0a1230;
color: #fff;
text-decoration: none;
}
.rs-hbuy-tile--tall {
grid-row: 1 / 3;
}
.rs-hbuy-tile img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.rs-hbuy-tile::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(6, 15, 60, 0) 45%, rgba(6, 15, 60, .82) 100%);
}
.rs-hbuy-name {
position: absolute;
z-index: 1;
right: clamp(20px, 2vw, 28px);
left: clamp(20px, 2vw, 28px);
bottom: clamp(20px, 2vw, 28px);
font-size: clamp(20px, 1.6vw, 24px);
font-weight: 500;
line-height: 1.25;
color: #fff;
}
.rs-hbuy-tile:hover .rs-hbuy-name,
.rs-hbuy-tile:focus-visible .rs-hbuy-name {
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-thickness: 1px;
}
.rs-hbuy-tile:focus-visible {
outline: 2px solid #0b2dbe;
outline-offset: 2px;
}
@media (max-width: 991px) {
.rs-hbuy-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: auto;
min-height: 0;
}
.rs-hbuy-panel {
grid-row: auto;
grid-column: 1 / 3;
}
.rs-hbuy-tile--tall {
grid-row: auto;
grid-column: 1 / 3;
aspect-ratio: 16 / 9;
}
.rs-hbuy-tile:not(.rs-hbuy-tile--tall) {
aspect-ratio: 4 / 3;
}
}
@media (max-width: 575px) {
.rs-hbuy-text {
font-size: 15px;
}
.rs-hbuy-tile:not(.rs-hbuy-tile--tall) {
grid-column: 1 / 3;
aspect-ratio: 16 / 9;
}
}
/* ============================================================
HOME, research reports in one light-blue box (.rs-mr-section--frame),
2026-11-04. Four line-framed cards; each frame leaves a gap at two
corners, and on hover the lines run on and close it while a base
line draws across the foot.
============================================================ */
.rs-mr-section--frame,
.rs-home .rs-mr-section--frame {
background: #fff;
}
.rs-mr-box {
padding: clamp(32px, 4vw, 64px);
background: #e6eefc;
}
.rs-mr-section--frame .rs-mr-header {
border-bottom-color: rgba(11, 45, 190, .18);
}
.rs-mr-section--frame .rs-rc-grid {
gap: clamp(16px, 1.8vw, 28px);
}
.rs-mr-section--frame .rs-rc {
--rc-line: rgba(11, 45, 190, .5);
--rc-gap: 32px;
position: relative;
padding: 14px;
border: 0;
background-color: transparent;
background-image:
linear-gradient(var(--rc-line), var(--rc-line)),
linear-gradient(var(--rc-line), var(--rc-line)),
linear-gradient(var(--rc-line), var(--rc-line)),
linear-gradient(var(--rc-line), var(--rc-line));
background-repeat: no-repeat;
background-position: left top, left top, right bottom, right bottom;
background-size:
calc(100% - var(--rc-gap)) 1px,
1px calc(100% - var(--rc-gap)),
calc(100% - var(--rc-gap)) 1px,
1px calc(100% - var(--rc-gap));
transition: background-size .6s cubic-bezier(.65, 0, .2, 1);
}
.rs-mr-section--frame .rs-rc::after {
content: "";
position: absolute;
right: 0;
left: 0;
bottom: 0;
height: 3px;
background: #0b2dbe;
transform: scaleX(0);
transform-origin: 100% 50%;
transition: transform .6s cubic-bezier(.65, 0, .2, 1) .1s;
}
.rs-mr-section--frame .rs-rc:is(:hover, :focus-visible) {
background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
}
.rs-mr-section--frame .rs-rc:is(:hover, :focus-visible)::after {
transform: scaleX(1);
}
.rs-mr-section--frame .rs-rc__media {
background: #d5e0f6;
}
.rs-mr-section--frame .rs-rc__body {
padding: 18px 6px 12px;
}
.rs-mr-section--frame :is(.rs-rc__desc, .rs-rc__period) {
display: none;
}
.rs-mr-section--frame .rs-rc__foot {
padding-top: 10px;
border-top: 0;
}
.rs-mr-section--frame .rs-rc__more {
margin-right: 0;
}
.rs-mr-section--frame .rs-rc__meta time {
border-right-color: rgba(11, 45, 190, .25);
}
@media (prefers-reduced-motion: reduce) {
.rs-mr-section--frame .rs-rc,
.rs-mr-section--frame .rs-rc::after {
transition: none;
}
}
/* the new blocks share the home rhythm: half a gap above and below */
html body.rs-home :is(.rs-hsec, .rs-hbuy) {
padding-top: calc(var(--rs-gap) / 2);
padding-bottom: calc(var(--rs-gap) / 2);
}
/* the light blue runs edge to edge; the box inside it is only a frame for the content */
html body.rs-home .rs-mr-section--frame {
padding-top: var(--rs-band) !important;
padding-bottom: var(--rs-band) !important;
background: #e6eefc;
}
html body.rs-home .rs-mr-section--frame .rs-mr-box {
padding: 0;
background: none;
}
/* subscribe follows the blue band: half a gap of white above it */
html body.rs-home .rs-mr-section + .rs-sub {
padding-top: calc(var(--rs-gap) / 2);
padding-bottom: calc(var(--rs-gap) / 2);
}
/* ============================================================
Four core services as photo panels (.rs-sp), 2026-11-04
includes/service-panels.php, on the home page and /services.
The open panel widens and shows its photo clear; the others keep
the photo behind frosted glass. No zoom: only widths and the glass
move. Square edges.
============================================================ */
.rs-sp {
display: flex;
gap: 16px;
height: clamp(440px, 38vw, 540px);
font-family: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
}
.rs-sp__panel {
position: relative;
flex: 1 1 0;
min-width: 0;
overflow: hidden;
background: #1b2a55;
color: #fff;
text-decoration: none;
isolation: isolate;
transition: flex-grow .7s cubic-bezier(.65, 0, .2, 1);
}
.rs-sp__panel.is-open {
flex-grow: 2.6;
}
.rs-sp__panel:hover,
.rs-sp__panel:focus-visible {
color: #fff;
}
.rs-sp__panel:focus-visible {
outline: 2px solid #0b2dbe;
outline-offset: 3px;
}
.rs-sp__img {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* frosted glass over the photo while the panel is closed */
.rs-sp__glass {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .1));
-webkit-backdrop-filter: blur(6px) saturate(1.25) brightness(1.06);
backdrop-filter: blur(6px) saturate(1.25) brightness(1.06);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38);
transition: opacity .6s ease;
}
.rs-sp__panel.is-open .rs-sp__glass {
opacity: 0;
}
/* a soft shade at the foot keeps the white copy readable on any photo */
.rs-sp__panel::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(180deg, rgba(6, 15, 60, 0) 38%, rgba(6, 15, 60, .72) 100%);
}
.rs-sp__chip {
position: absolute;
z-index: 3;
top: 20px;
right: 20px;
padding: 7px 11px;
border: 1px solid rgba(255, 255, 255, .8);
background: rgba(255, 255, 255, .1);
font-size: 12px;
font-weight: 600;
letter-spacing: .1em;
line-height: 1;
}
.rs-sp__foot {
position: absolute;
z-index: 3;
right: 24px;
left: 24px;
bottom: 24px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.rs-sp__title {
font-size: clamp(22px, 1.8vw, 27px);
font-weight: 500;
line-height: 1.2;
letter-spacing: -.01em;
}
/* the summary only shows on the open panel; a fixed measure stops it reflowing while the panel widens */
.rs-sp__text {
width: min(440px, 100%);
max-height: 0;
overflow: hidden;
opacity: 0;
font-size: 15px;
line-height: 1.55;
color: rgba(255, 255, 255, .88);
transition: max-height .6s ease, opacity .4s ease, margin .6s ease;
}
.rs-sp__panel.is-open .rs-sp__text {
max-height: 6em;
margin-top: 10px;
opacity: 1;
transition-delay: .2s;
}
.rs-sp__btn {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 18px;
padding: 11px 16px;
border: 1px solid #fff;
font-size: 14px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
transition: background-color .3s ease, border-color .3s ease;
}
.rs-sp__btn svg {
width: 15px;
height: 15px;
}
.rs-sp__panel.is-open .rs-sp__btn {
border-color: #0b2dbe;
background: #0b2dbe;
}
@media (max-width: 991px) {
.rs-sp {
flex-direction: column;
height: auto;
gap: 12px;
}
.rs-sp__panel,
.rs-sp__panel.is-open {
flex: none;
height: clamp(280px, 52vw, 380px);
}
.rs-sp__glass {
opacity: 0;
}
.rs-sp__text,
.rs-sp__panel.is-open .rs-sp__text {
max-height: none;
margin-top: 10px;
opacity: 1;
}
.rs-sp__btn,
.rs-sp__panel.is-open .rs-sp__btn {
border-color: #0b2dbe;
background: #0b2dbe;
}
}
@media (max-width: 575px) {
.rs-sp__foot {
right: 18px;
left: 18px;
bottom: 18px;
}
.rs-sp__text {
font-size: 14px;
}
}
@media (prefers-reduced-motion: reduce) {
.rs-sp__panel,
.rs-sp__glass,
.rs-sp__text {
transition: none;
}
}
/* ---- home: Our Services heading over the panels ---- */
.rs-hsv-head {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, .93fr);
gap: 24px 60px;
align-items: start;
margin-bottom: 52px;
}
.rs-home .rs-hsv .rs-hsv-title {
margin: 0;
font-family: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
font-size: clamp(30px, 3vw, 44px);
font-weight: 500;
line-height: 1.15;
letter-spacing: -.015em;
color: #0a1230;
}
.rs-hsv-lead {
margin: 0;
font-size: 16px;
line-height: 1.7;
color: #4a5568;
}
html body.rs-home .rs-hsv {
padding-top: calc(var(--rs-gap) / 2);
padding-bottom: calc(var(--rs-gap) / 2);
background: #fff;
}
@media (max-width: 991px) {
.rs-hsv-head {
grid-template-columns: minmax(0, 1fr);
margin-bottom: 32px;
}
}
/* several strips (the /services page): a row gap between them */
.rs-sp-set {
display: grid;
gap: 16px;
}
@media (max-width: 991px) {
.rs-sp-set {
gap: 12px;
}
}
/* ---- buy / sell / rent: eyebrow, arrow boxes and a one-time entrance (2026-11-04) ---- */
.rs-hbuy-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 18px;
font-size: 12px;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(255, 255, 255, .8);
}
.rs-hbuy-eyebrow::before {
content: "";
width: 28px;
height: 2px;
background: #fff;
}
.rs-hbuy-link svg {
transition: transform .3s ease;
}
.rs-hbuy-link:hover svg,
.rs-hbuy-link:focus-visible svg {
transform: translateX(-4px);
}
.rs-hbuy-name {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.rs-hbuy-go {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid rgba(255, 255, 255, .7);
transition: background-color .3s ease, border-color .3s ease;
}
.rs-hbuy-go svg {
width: 16px;
height: 16px;
}
.rs-hbuy-tile:hover .rs-hbuy-go,
.rs-hbuy-tile:focus-visible .rs-hbuy-go {
border-color: #0b2dbe;
background: #0b2dbe;
}
.rs-hbuy-tile:hover .rs-hbuy-name,
.rs-hbuy-tile:focus-visible .rs-hbuy-name {
text-decoration: none;
}
/* a blue line runs along the foot of a photo on hover */
.rs-hbuy-tile::before {
content: "";
position: absolute;
z-index: 2;
right: 0;
left: 0;
bottom: 0;
height: 4px;
background: #0b2dbe;
transform: scaleX(0);
transform-origin: 100% 50%;
transition: transform .6s cubic-bezier(.65, 0, .2, 1);
}
.rs-hbuy-tile:hover::before,
.rs-hbuy-tile:focus-visible::before {
transform: scaleX(1);
}
/* entrance: the panel copy rises line by line, the photos open from the bottom one after another */
.rs-hbuy.is-armed:not(.is-in) .rs-hbuy-panel > *,
.rs-hbuy.is-armed:not(.is-in) .rs-hbuy-tile {
opacity: 0;
}
.rs-hbuy.is-in .rs-hbuy-panel > * {
animation: rs-hbuy-rise .8s cubic-bezier(.22, 1, .36, 1) both;
}
.rs-hbuy.is-in .rs-hbuy-panel > :nth-child(2) { animation-delay: .08s; }
.rs-hbuy.is-in .rs-hbuy-panel > :nth-child(3) { animation-delay: .16s; }
.rs-hbuy.is-in .rs-hbuy-panel > :nth-child(4) { animation-delay: .24s; }
.rs-hbuy.is-in .rs-hbuy-tile {
animation: rs-hbuy-open 1s cubic-bezier(.65, 0, .2, 1) both;
}
.rs-hbuy.is-in .rs-hbuy-tile:not(.rs-hbuy-tile--tall):not(.rs-hbuy-tile--plain) { animation-delay: .12s; }
.rs-hbuy.is-in .rs-hbuy-tile--plain { animation-delay: .24s; }
@keyframes rs-hbuy-rise {
from { opacity: 0; transform: translate3d(0, 18px, 0); }
to { opacity: 1; transform: none; }
}
/* the photos rise in rather than wipe open: an animated clip-path on these tiles was left
un-painted by Safari after a zoom or resize, so the pictures vanished (fixed 2026-11-08) */
@keyframes rs-hbuy-open {
from { opacity: 0; transform: translate3d(0, 24px, 0); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.rs-hbuy-tile::before,
.rs-hbuy-link svg {
transition: none;
}
}
/* ======================================================================
"Register Your Interest" modal (includes/common-footer.php), every page.
Third design (2026-11-04): a Dubai skyline photo on the left with a short
promise and three figures; a quiet white form on the right with underline
fields, the header's arrow-box button and a phone link beside it.
Ids beat custom.css / rs-cta.css.
====================================================================== */
#PopupForm .modal-dialog {
--bs-modal-width: 1040px;
width: calc(100% - 48px);
max-width: 1040px;
}
#PopupForm .rs-popup-content {
border: 0 !important;
border-radius: 0 !important;
box-shadow: 0 30px 80px rgba(8, 10, 16, .3);
}
#PopupForm .rs-popup-wrapper {
min-height: 600px;
}
#PopupForm .rs-popup-close {
top: 14px;
left: 14px;
width: 44px;
height: 44px;
border: 0;
border-radius: 0;
background: transparent;
backdrop-filter: none;
box-shadow: none;
color: #0a1f4d;
transition: background-color .25s ease, color .25s ease;
}
#PopupForm .rs-popup-close:hover,
#PopupForm .rs-popup-close:focus-visible {
background: #eef2fa;
color: #0b2dbe;
transform: none;
}
/* ---- the photo panel ---- */
#PopupForm .rs-popup-brand {
width: 42%;
background: #0a1230;
color: #fff;
}
#PopupForm .rs-popup-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
#PopupForm .rs-popup-brand::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(8, 10, 16, .1) 0%, rgba(8, 10, 16, .2) 40%, rgba(8, 10, 16, .82) 100%);
}
#PopupForm .rs-popup-brand-content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
padding: 36px;
}
#PopupForm .rs-popup-logo {
width: 132px;
margin: 0;
}
#PopupForm .rs-popup-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
font-size: 12px;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(255, 255, 255, .85);
}
#PopupForm .rs-popup-eyebrow::before {
content: "";
width: 28px;
height: 2px;
background: #fff;
}
#PopupForm .rs-popup-tagline {
margin: 0 0 28px;
font-family: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
font-size: 26px;
font-weight: 500;
line-height: 1.2;
letter-spacing: -.01em;
color: #fff;
text-shadow: none;
}
#PopupForm .rs-popup-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin: 0;
border-top: 1px solid rgba(255, 255, 255, .35);
}
#PopupForm .rs-popup-stats div {
padding: 16px 0 0 12px;
}
#PopupForm .rs-popup-stats div + div {
padding-right: 14px;
border-right: 1px solid rgba(255, 255, 255, .35);
}
#PopupForm .rs-popup-stats dt {
font-size: 26px;
font-weight: 500;
line-height: 1;
letter-spacing: -.01em;
color: #fff;
}
#PopupForm .rs-popup-stats dd {
margin: 8px 0 0;
font-size: 12px;
line-height: 1.35;
color: rgba(255, 255, 255, .78);
}
/* ---- the form ---- */
#PopupForm .rs-popup-form-panel.rs-popup-form-panel {
flex: 1 1 auto;
width: auto;
}
#PopupForm .rs-popup-form-panel {
padding: 60px 56px 52px;
background: #fff;
}
#PopupForm .rs-popup-form-header {
margin-bottom: 34px;
padding-bottom: 0;
border-bottom: 0;
}
#PopupForm .rs-popup-kicker {
display: block;
margin-bottom: 12px;
font-size: 12px;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: #0b2dbe;
}
#PopupForm .rs-popup-title {
margin: 0 0 10px;
font-family: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
font-size: 32px;
font-weight: 500;
letter-spacing: -.015em;
color: #0a1230;
}
#PopupForm .rs-popup-subtitle {
max-width: 30em;
font-size: 15px;
line-height: 1.55;
color: #5b6782;
}
#PopupForm .rs-popup-fields-grid {
column-gap: 32px;
row-gap: 26px;
}
#PopupForm .rs-popup-field label {
margin-bottom: 4px;
font-size: 11px;
font-weight: 600;
letter-spacing: .12em;
color: #5b6782;
}
/* underline fields: no box, a hairline that turns blue and thickens on focus */
#PopupForm .rs-popup-input-wrap svg {
right: 0;
opacity: .5;
}
#PopupForm .rs-popup-input-wrap .form-control,
#PopupForm .rs-popup-phone-wrap .form-control {
height: 46px;
border: 0;
border-bottom: 1px solid #c9d2e3;
border-radius: 0;
background: transparent;
font-size: 15px;
color: #0a1230;
box-shadow: none;
transition: border-color .25s ease, box-shadow .25s ease;
}
#PopupForm .rs-popup-input-wrap .form-control {
padding-right: 28px !important;
}
#PopupForm .rs-popup-input-wrap .form-control:focus,
#PopupForm .rs-popup-phone-wrap .form-control:focus {
border-bottom-color: #0b2dbe;
background: transparent;
box-shadow: 0 1px 0 #0b2dbe;
}
#PopupForm .rs-popup-phone-wrap .iti--separate-dial-code .iti__selected-flag {
border-left: 0;
border-radius: 0;
background: transparent;
padding-right: 0;
}
/* bundle.css sets the phone box with !important, so the underline has to as well */
#PopupForm .rs-popup-phone-wrap input.form-control[type="tel"] {
height: 46px !important;
border: 0 !important;
border-bottom: 1px solid #c9d2e3 !important;
border-radius: 0 !important;
background: transparent !important;
color: #0a1230 !important;
font-size: 15px !important;
}
#PopupForm .rs-popup-phone-wrap input.form-control[type="tel"]:focus {
border-bottom-color: #0b2dbe !important;
box-shadow: 0 1px 0 #0b2dbe;
}
#PopupForm .rs-popup-recaptcha {
margin-top: 6px;
}
#PopupForm .rs-popup-actions {
flex-wrap: wrap;
align-items: center;
gap: 14px 28px;
margin-top: 8px;
}
/* the submit: the header's arrow-box button, filled blue */
#PopupForm.modal .rs-popup-actions .rs-popup-submit.rs-popup-submit {
display: inline-flex !important;
align-items: center;
gap: 0;
width: auto !important;
min-width: 0;
height: 52px !important;
padding: 0 28px 0 0 !important;
border: 1px solid #0b2dbe !important;
border-radius: 0 !important;
background: #0b2dbe !important;
box-shadow: none !important;
color: #fff !important;
font-size: 15px;
font-weight: 500;
letter-spacing: 0;
transform: none !important;
animation: none !important;
transition: background-color .3s ease;
}
#PopupForm.modal .rs-popup-actions .rs-popup-submit.rs-popup-submit::before,
#PopupForm.modal .rs-popup-actions .rs-popup-submit.rs-popup-submit::after {
content: none !important;
display: none !important;
}
#PopupForm.modal .rs-popup-actions .rs-popup-submit.rs-popup-submit > svg {
display: block !important;
box-sizing: border-box;
align-self: stretch;
width: 52px;
height: auto;
margin: -1px 28px -1px -1px;
padding: 0 13px;
background: #0a24a0;
color: #fff;
transform: none;
transition: padding .3s ease;
}
#PopupForm.modal .rs-popup-actions .rs-popup-submit.rs-popup-submit:hover,
#PopupForm.modal .rs-popup-actions .rs-popup-submit.rs-popup-submit:focus-visible {
background: #0a24a0 !important;
}
#PopupForm.modal .rs-popup-actions .rs-popup-submit.rs-popup-submit:hover > svg,
#PopupForm.modal .rs-popup-actions .rs-popup-submit.rs-popup-submit:focus-visible > svg {
padding: 0 17px 0 9px;
background: #081c80;
}
#PopupForm .rs-popup-call {
display: grid;
gap: 2px;
color: #0a1230;
font-size: 15px;
font-weight: 500;
text-decoration: none;
}
#PopupForm .rs-popup-call span {
font-size: 11px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: #5b6782;
}
#PopupForm .rs-popup-call:hover,
#PopupForm .rs-popup-call:focus-visible {
color: #0b2dbe;
}
/* the copy rises in once as the dialog opens */
#PopupForm.show .rs-popup-brand-foot,
#PopupForm.show .rs-popup-form-header,
#PopupForm.show .rs-popup-fields-grid {
animation: rs-hbuy-rise .7s cubic-bezier(.22, 1, .36, 1) both;
}
#PopupForm.show .rs-popup-form-header { animation-delay: .06s; }
#PopupForm.show .rs-popup-fields-grid { animation-delay: .14s; }
@media (prefers-reduced-motion: reduce) {
#PopupForm.show .rs-popup-brand-foot,
#PopupForm.show .rs-popup-form-header,
#PopupForm.show .rs-popup-fields-grid {
animation: none;
}
}
@media (max-width: 768px) {
#PopupForm .rs-popup-brand {
width: 100%;
min-height: 180px;
}
#PopupForm .rs-popup-brand-content {
padding: 20px;
}
#PopupForm .rs-popup-tagline {
font-size: 20px;
margin: 12px 0 0;
}
#PopupForm .rs-popup-eyebrow,
#PopupForm .rs-popup-stats {
display: none;
}
#PopupForm .rs-popup-form-panel {
padding: 28px 22px 26px;
}
#PopupForm .rs-popup-title {
font-size: 24px;
}
#PopupForm .rs-popup-form-header {
margin-bottom: 22px;
}
#PopupForm .rs-popup-close {
top: 8px;
left: 8px;
background: #fff;
}
}
/* ---- Book a Valuation picture, second pass (2026-11-04): a moving abstract behind it, the
pointer visiting every field, the button filling as it is pressed, a dimensioned survey with
a live count, and the report going out to the inbox ---- */
.rs-bkf {
background: #0a3fe0;
}
.rs-bkf__bars {
display: none;
}
.rs-bkf > .rs-bkf__abs {
position: absolute;
z-index: -1;
inset: 0;
font-size: 0;
}
.rs-bkf__abs > .rs-abstract-still {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* rail ticks */
.rs-bkf__segtick {
display: inline-flex;
width: 1em;
height: 1em;
margin-right: .45em;
vertical-align: -.12em;
opacity: 0;
transform: scale(.4);
transition: opacity .3s ease, transform .4s cubic-bezier(.3, 1.4, .5, 1);
}
.rs-bkf__segtick svg {
width: 100%;
height: 100%;
}
.rs-bkf__seg.is-done .rs-bkf__segtick {
opacity: 1;
transform: none;
}
.rs-bkf__seg.is-done .rs-bkf__seglabel {
color: rgba(255, 255, 255, .8);
}
/* 01: the pointer clicks each field in turn, then the button */
.rs-bkf__pointer {
top: 0;
right: 58%;
left: auto;
bottom: auto;
transform-origin: .37em .15em;
}
.rs-bkf__scene--form.is-run .rs-bkf__pointer {
animation: rs-bkf-pointer2 4.4s var(--bkf-move) .3s both;
}
@keyframes rs-bkf-pointer2 {
0% { opacity: 0; transform: translate3d(-3em, 13.5em, 0); }
9% { opacity: 1; transform: translate3d(0, 9.5em, 0); }
11.4% { transform: translate3d(0, 9.5em, 0) scale(.85); }
13.6% { transform: translate3d(0, 9.5em, 0); }
30.7% { transform: translate3d(0, 14.2em, 0); }
32.3% { transform: translate3d(0, 14.2em, 0) scale(.85); }
34.5% { transform: translate3d(0, 14.2em, 0); }
52.3% { transform: translate3d(0, 18.9em, 0); }
53.9% { transform: translate3d(0, 18.9em, 0) scale(.85); }
56.1% { transform: translate3d(0, 18.9em, 0); }
79.5% { opacity: 1; transform: translate3d(.3em, 22.3em, 0); }
81.8% { transform: translate3d(.3em, 22.3em, 0) scale(.85); }
84.1% { opacity: 1; transform: translate3d(.3em, 22.3em, 0); }
100% { opacity: 0; transform: translate3d(-.6em, 23em, 0); }
}
/* a caret blinks in the field being typed into */
.rs-bkf__fieldbox {
position: relative;
}
.rs-bkf__value::after {
content: "";
display: inline-block;
width: 1px;
height: 1.05em;
margin-right: 2px;
vertical-align: -.15em;
background: #0b2dbe;
opacity: 0;
}
.rs-bkf__scene--form.is-run .rs-bkf__value::after {
animation: rs-bkf-caret .95s step-end calc(.8s + var(--i) * .95s) both;
}
@keyframes rs-bkf-caret {
0%, 30%, 60% { opacity: 1; }
15%, 45%, 75%, 100% { opacity: 0; }
}
/* the button fills from the left as it is pressed */
.rs-bkf__send::before {
content: "";
position: absolute;
inset: 0;
background: #0a24a0;
transform: scaleX(0);
transform-origin: 100% 50%;
}
.rs-bkf__sendtext,
.rs-bkf__sent {
z-index: 1;
}
.rs-bkf__sendtext {
position: relative;
}
.rs-bkf__send::before {
transform: none;
}
.rs-bkf__scene--form.is-run .rs-bkf__send::before {
animation: rs-bkf-grow .45s var(--bkf-move) 3.92s both;
}
/* 02: the dimension lines, their figure and the live count */
.rs-bkf__tower {
overflow: visible;
}
.rs-bkf__tower svg {
overflow: visible;
}
.rs-bkf__dim {
stroke-opacity: .75;
}
.rs-bkf__dimtext {
font-size: 12px;
font-weight: 500;
letter-spacing: .06em;
}
.rs-bkf__scene--survey.is-run .rs-bkf__dimtext {
animation: rs-bkf-fade .6s ease 1.9s both;
}
.rs-bkf__checkshead {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1em;
padding-bottom: .5em;
border-bottom: 0;
}
@property --bkf-pct {
syntax: "";
initial-value: 100;
inherits: false;
}
.rs-bkf__pct {
--bkf-pct: 100;
counter-reset: bkf var(--bkf-pct);
font-size: .95em;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: #0b1230;
}
.rs-bkf__pct::after {
content: counter(bkf) "%";
}
.rs-bkf__scene--survey.is-run .rs-bkf__pct {
animation: rs-bkf-count 2.6s linear 1.75s both;
}
@keyframes rs-bkf-count {
from { --bkf-pct: 0; }
to { --bkf-pct: 100; }
}
.rs-bkf__meter {
display: block;
height: 3px;
margin: -.35em 0 .15em;
background: #e3e9f7;
}
.rs-bkf__meter i {
display: block;
height: 100%;
background: #0b2dbe;
transform-origin: 100% 50%;
}
.rs-bkf__scene--survey.is-run .rs-bkf__meter i {
animation: rs-bkf-grow 2.6s linear 1.75s both;
}
/* 03: the inbox card */
.rs-bkf__inbox {
position: absolute;
right: 1.5em;
bottom: 1.2em;
display: grid;
grid-template-columns: auto 1fr;
column-gap: .6em;
align-items: center;
padding: .65em .9em;
background: #fff;
box-shadow: 0 1em 2.2em rgba(3, 14, 80, .3);
color: #0b1230;
font-size: .8em;
font-weight: 500;
line-height: 1.2;
}
.rs-bkf__inbox .rs-bkf__box {
grid-row: span 2;
}
.rs-bkf__inbox small {
grid-column: 2;
font-size: .82em;
color: #5b6478;
}
.rs-bkf__scene--report.is-run .rs-bkf__inbox {
animation: rs-bkf-lift .7s var(--bkf-ease) 3.3s both;
}
.rs-bkf__scene--report.is-run .rs-bkf__inbox .rs-bkf__box {
animation: rs-bkf-box .3s ease 3.75s both;
}
.rs-bkf__scene--report.is-run .rs-bkf__inbox .rs-bkf__box path {
animation: rs-bkf-draw .35s ease-out 3.9s both;
}
@media (max-width: 575px) {
.rs-bkf__inbox {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.rs-bkf__segtick {
transition: none;
}
}
/* ---- Sector Expertise, groups of four (2026-11-04): the collage stays as it was; each frame now
holds one sector of the group as a link with its name on a small white label, and a
subheading sits under the title ---- */
.rs-hsec-intro {
max-width: 640px;
}
.rs-hsec-sub {
margin: 14px 0 0;
font-size: 17px;
line-height: 1.6;
color: #5b6782;
}
.rs-hsec-cell {
display: block;
}
.rs-hsec-shot {
position: absolute;
inset: 0;
display: block;
opacity: 0;
visibility: hidden;
transition: opacity .9s ease, visibility 0s linear .9s;
}
.rs-hsec-shot.is-on {
opacity: 1;
visibility: visible;
transition: opacity .9s ease, visibility 0s;
}
.rs-hsec .rs-hsec-shot img {
opacity: 1;
}
.rs-hsec-cap {
position: absolute;
right: 14px;
bottom: 14px;
max-width: calc(100% - 28px);
padding: 8px 12px;
background: #fff;
color: #0a1230;
font-size: 14px;
font-weight: 500;
line-height: 1.2;
transition: background-color .25s ease, color .25s ease;
}
.rs-hsec-shot:hover .rs-hsec-cap,
.rs-hsec-shot:focus-visible .rs-hsec-cap {
background: #0b2dbe;
color: #fff;
}
@media (max-width: 575px) {
.rs-hsec-cap {
right: 8px;
bottom: 8px;
padding: 6px 8px;
font-size: 12px;
}
.rs-hsec-sub {
font-size: 15px;
}
}
/* buy / sell / rent, third pass: the link and a "Powered by Valunxt" mark sit at the foot of the
blue panel, split by a hairline */
.rs-hbuy-foot {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 22px;
width: 100%;
margin-top: auto;
padding-top: 28px;
}
.rs-hbuy-power {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
padding-top: 22px;
border-top: 1px solid rgba(255, 255, 255, .3);
color: rgba(255, 255, 255, .78);
font-size: 12px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
text-decoration: none;
transition: color .25s ease;
}
.rs-hbuy-power img {
display: block;
width: 112px;
height: auto;
}
.rs-hbuy-power:hover,
.rs-hbuy-power:focus-visible {
color: #fff;
}
.rs-hbuy.is-in .rs-hbuy-panel > :nth-child(4) .rs-hbuy-power {
animation: rs-hbuy-rise .8s cubic-bezier(.22, 1, .36, 1) .4s both;
}
/* ---- home report frames, hover (2026-11-04, second pass): the gaps close, then two blue
lines set off from the open corners and run round the frame until they meet; a square node
lights at each corner as the lines join. Replaces the base line. ---- */
.rs-mr-section--frame .rs-rc::after {
display: none;
}
.rs-rc__frame {
position: absolute;
z-index: 2;
inset: 0;
pointer-events: none;
}
/* the two lines: one runs along the top and down the right, the other along the foot and up
the left, so they set off from the two open corners and meet at the far ones */
.rs-rc__ln {
position: absolute;
background: #0b2dbe;
transition: transform .3s cubic-bezier(.65, 0, .2, 1);
}
.rs-rc__ln--t,
.rs-rc__ln--b {
right: 0;
left: 0;
height: 2px;
transform: scaleX(0);
transition-delay: .2s;
}
.rs-rc__ln--r,
.rs-rc__ln--l {
top: 0;
bottom: 0;
width: 2px;
transform: scaleY(0);
}
.rs-rc__ln--t { top: 0; transform-origin: 100% 50%; }
.rs-rc__ln--r { left: 0; transform-origin: 50% 0; }
.rs-rc__ln--b { bottom: 0; transform-origin: 0% 50%; }
.rs-rc__ln--l { right: 0; transform-origin: 50% 100%; }
.rs-mr-section--frame .rs-rc:is(:hover, :focus-visible) .rs-rc__ln {
transform: none;
transition: transform .5s cubic-bezier(.65, 0, .2, 1) .15s;
}
.rs-mr-section--frame .rs-rc:is(:hover, :focus-visible) :is(.rs-rc__ln--r, .rs-rc__ln--l) {
transition-delay: .62s;
}
.rs-rc__node {
position: absolute;
width: 9px;
height: 9px;
background: #0b2dbe;
transform: scale(0);
transition: transform .25s ease;
}
.rs-rc__node--a {
right: -4px;
top: -4px;
}
.rs-rc__node--b {
left: -4px;
bottom: -4px;
}
.rs-mr-section--frame .rs-rc:is(:hover, :focus-visible) .rs-rc__node {
transform: none;
transition: transform .4s cubic-bezier(.3, 1.5, .5, 1) 1.1s;
}
.rs-mr-section--frame .rs-rc .rs-rc__more svg {
transition: transform .3s ease;
}
.rs-mr-section--frame .rs-rc:is(:hover, :focus-visible) .rs-rc__more svg {
transform: translateX(-4px);
}
@media (prefers-reduced-motion: reduce) {
.rs-rc__ln,
.rs-rc__node {
transition: none !important;
}
}
/* ---- home case studies (2026-11-04), in the frame band that held the reports: a paragraph on
the right of the heading, and each card's picture is its own moving abstract with the
assessed value set on it ---- */
.rs-hcs .rs-hcs-head {
align-items: flex-end;
gap: 48px;
}
.rs-hcs .rs-hcs-aside {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
max-width: 400px;
}
.rs-hcs-lead {
margin: 0;
font-size: 15px;
line-height: 1.6;
color: #5b6782;
}
.rs-hcs .rs-hcs-media {
position: relative;
overflow: hidden;
background: #0a3fe0;
}
.rs-hcs .rs-hcs-media > .rs-abstract-still {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.rs-hcs-figure {
position: absolute;
z-index: 2;
right: 18px;
bottom: 16px;
display: flex;
flex-direction: column;
gap: 4px;
color: #fff;
font-size: clamp(20px, 1.6vw, 26px);
font-weight: 500;
line-height: 1.1;
letter-spacing: -.01em;
}
.rs-hcs-figure small {
font-size: 11px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255, 255, 255, .8);
}
.rs-rc__meta .rs-hcs-loc {
padding-right: 10px;
border-right: 1px solid #cfd6e4;
font-weight: 500;
}
@media (max-width: 991px) {
.rs-hcs .rs-hcs-head {
flex-direction: column;
align-items: flex-start;
gap: 18px;
}
}
/* awards ticker: the page carries one set; it only moves once the script has added the copies */
.rs-awstrip-track:not(.is-looped) {
-webkit-animation: none;
animation: none;
}
/* ---- related links (includes/related-links.php): a hairline-ruled row of sibling pages on
service and sector pages; square, light, a blue line draws under a link on hover ---- */
.rs-rel {
padding: 56px 0;
background: #fff;
font-family: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
}
.rs-rel__inner {
padding-top: 28px;
border-top: 1px solid #e3e8f3;
}
.rs-rel .rs-rel__title {
margin: 0 0 20px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: #0b2dbe;
}
.rs-rel__list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 0 32px;
margin: 0;
padding: 0;
list-style: none;
}
.rs-rel__list a {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 0;
border-bottom: 1px solid #e3e8f3;
color: #0a1230;
font-size: 15px;
font-weight: 500;
text-decoration: none;
}
.rs-rel__list a::after {
content: "";
position: absolute;
right: 0;
left: 0;
bottom: -1px;
height: 2px;
background: #0b2dbe;
transform: scaleX(0);
transform-origin: 100% 50%;
transition: transform .45s cubic-bezier(.65, 0, .2, 1);
}
.rs-rel__list a:hover,
.rs-rel__list a:focus-visible {
color: #0b2dbe;
}
.rs-rel__list a:hover::after,
.rs-rel__list a:focus-visible::after {
transform: none;
}
.rs-rel__list svg {
flex: 0 0 auto;
width: 16px;
height: 16px;
color: #0b2dbe;
}
/* home key figures: a hint of blue that moves from figure to figure (index.php script); the
chosen figure's number and label turn blue and a blue line draws along its top rule */
.rs-abx-stat {
position: relative;
}
.rs-abx-stat::before {
content: "";
position: absolute;
top: -1px;
right: 0;
left: 0;
height: 2px;
background: #0b2dbe;
transform: scaleX(0);
transform-origin: 100% 50%;
transition: transform .7s cubic-bezier(.65, 0, .2, 1);
}
.rs-abx-stat-num,
.rs-abx-stat-label,
.rs-abx-stat-num small {
transition: color .6s ease;
}
.rs-abx-stat.is-on::before {
transform: none;
}
.rs-abx-stat.is-on .rs-abx-stat-num,
.rs-abx-stat.is-on .rs-abx-stat-num small,
.rs-abx-stat.is-on .rs-abx-stat-label {
color: #0b2dbe;
}
@media (prefers-reduced-motion: reduce) {
.rs-abx-stat::before,
.rs-abx-stat-num,
.rs-abx-stat-label {
transition: none;
}
}
/* home Insights & Blogs: the two "all" links side by side under the paragraph */
.rs-hin-links {
display: flex;
flex-wrap: wrap;
gap: 14px 32px;
}
/* Sector Expertise panel (2026-11-05): the four sectors of the group as numbered rows that match
the numbered labels on the photos; pointing at a row lights its photo's label */
.rs-hsec-cap b {
margin-left: 8px;
font-size: 11px;
font-weight: 600;
letter-spacing: .08em;
color: #0b2dbe;
transition: color .25s ease;
}
.rs-hsec-cell.is-hl .rs-hsec-cap {
background: #0b2dbe;
color: #fff;
}
.rs-hsec-cell.is-hl .rs-hsec-cap b {
color: rgba(255, 255, 255, .8);
}
.rs-hsec-list {
margin: 26px 0 0;
padding: 0;
list-style: none;
border-top: 1px solid #d5ddef;
}
.rs-hsec-list a {
position: relative;
display: flex;
align-items: center;
gap: 16px;
padding: 15px 0;
border-bottom: 1px solid #d5ddef;
color: #0a1230;
font-size: 17px;
font-weight: 500;
text-decoration: none;
transition: color .25s ease;
}
.rs-hsec-list a span {
min-width: 22px;
font-size: 12px;
font-weight: 600;
letter-spacing: .08em;
color: #0b2dbe;
}
.rs-hsec-list a svg {
width: 18px;
height: 18px;
margin-right: auto;
color: #0b2dbe;
transition: transform .3s ease;
}
.rs-hsec-list a::after {
content: "";
position: absolute;
right: 0;
left: 0;
bottom: -1px;
height: 2px;
background: #0b2dbe;
transform: scaleX(0);
transform-origin: 100% 50%;
transition: transform .45s cubic-bezier(.65, 0, .2, 1);
}
.rs-hsec-list a:hover,
.rs-hsec-list a:focus-visible {
color: #0b2dbe;
}
.rs-hsec-list a:hover::after,
.rs-hsec-list a:focus-visible::after {
transform: none;
}
.rs-hsec-list a:hover svg,
.rs-hsec-list a:focus-visible svg {
transform: translateX(-4px);
}
.rs-hsec-copy {
width: 100%;
}
@media (max-width: 575px) {
.rs-hsec-list a {
padding: 12px 0;
font-size: 15px;
}
}
/* home FAQ: the photo takes only the height left over, so the paragraph under it ends level with
the last question (and stays level when a question opens) */
html body.rs-home .rs-home-faq .rs-faq-section > .rs-faq-grid {
align-items: stretch;
}
html body.rs-home .rs-home-faq .rs-faq-left {
min-height: 0;
}
html body.rs-home .rs-home-faq .rs-faq-media {
flex: 1 1 0;
min-height: 300px;
height: auto;
aspect-ratio: auto;
}
@media (max-width: 991px) {
html body.rs-home .rs-home-faq .rs-faq-media {
flex: none;
aspect-ratio: 16 / 10;
}
}
/* newsletter on the footer (home, $rs_sub_variant = 'foot'): a full-width light-blue band with no
gap below, so it reads as the top of the footer; dark copy, underline field, square blue button */
html body .rs-sub.rs-sub--foot {
margin: 0;
padding: 72px 0;
background: #e6eefc;
}
html body .rs-sub--foot .rs-sub__banner {
padding: 0;
background: none;
color: #0a1230;
}
html body .rs-sub--foot .rs-sub__title {
color: #0a1230;
}
html body .rs-sub--foot .rs-sub__text {
color: #5b6782;
}
html body .rs-sub--foot .rs-sub__label {
color: #5b6782;
}
html body .rs-sub--foot .rs-sub__input {
border-bottom-color: #9aa8c7;
color: #0a1230;
}
html body .rs-sub--foot .rs-sub__input:focus {
border-bottom-color: #0b2dbe;
box-shadow: 0 1px 0 #0b2dbe !important;
}
html body .rs-sub--foot .rs-sub__input:-webkit-autofill {
-webkit-text-fill-color: #0a1230;
caret-color: #0a1230;
}
html body .rs-sub--foot .rs-sub__btn.rs-sub__btn {
gap: 16px;
padding: 15px 30px !important;
border: 1px solid #0b2dbe !important;
border-radius: 0 !important;
background: #0b2dbe !important;
color: #fff !important;
transform: none !important;
}
html body .rs-sub--foot .rs-sub__btn.rs-sub__btn > svg {
display: block !important;
}
html body .rs-sub--foot .rs-sub__btn.rs-sub__btn::before,
html body .rs-sub--foot .rs-sub__btn.rs-sub__btn::after {
content: none !important;
display: none !important;
}
html body .rs-sub--foot .rs-sub__btn.rs-sub__btn:hover,
html body .rs-sub--foot .rs-sub__btn.rs-sub__btn:focus-visible {
background: #0a24a0 !important;
border-color: #0a24a0 !important;
}
@media (max-width: 767px) {
html body .rs-sub.rs-sub--foot {
padding: 48px 0;
}
}
/* service pages, intro heading (2026-11-05): set like the home "Our Approach" heading, a small
"— Overview" label above a heading in capitals */
.rs-svc-eyebrow {
margin: 0 0 12px;
font-size: clamp(11px, .8vw, 13px);
font-weight: 500;
line-height: 1;
letter-spacing: .05em;
text-transform: uppercase;
color: #0a1230;
}
.rs-svc-eyebrow::before {
content: "\2014\00a0";
}
html body .frv-intro__head .frv-display-md,
html body .rs-svc-intro-h,
html body .vs-about__head .vs-h2 {
max-width: 16em;
font-size: clamp(26px, 2.2vw, 40px);
font-weight: 500;
line-height: 1.12;
letter-spacing: .01em;
text-transform: uppercase;
}
@media (max-width: 575px) {
html body .frv-intro__head .frv-display-md,
html body .rs-svc-intro-h,
html body .vs-about__head .vs-h2 {
font-size: 24px;
}
}
/* newsletter on the footer, every page (2026-11-05): the same band as the home page, set here in
full so it does not lean on the home page's own heading and button rules */
html body .rs-sub.rs-sub--foot {
position: relative;
z-index: 1;
font-family: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
}
html body .rs-sub.rs-sub--foot .rs-sub__title {
margin: 0 0 18px;
font-family: inherit;
font-size: clamp(28px, 2.6vw, 40px);
font-weight: 500 !important;
line-height: 1.15;
letter-spacing: -.01em;
color: #0a1230 !important;
-webkit-text-fill-color: currentColor;
background: none;
}
html body .rs-sub.rs-sub--foot .rs-sub__btn {
display: inline-flex !important;
align-items: center;
font-size: 15px;
font-weight: 500;
letter-spacing: .005em;
}
/* FAQ photo (every page): cropped to fill its frame, never squeezed */
html body .rs-faq-media,
html body img.rs-faq-media {
object-fit: cover !important;
object-position: center;
}
/* "Explore more" photo cards (2026-11-05, includes/explore-more.php): in place of the Related
Services pills and the ruled related-links row. Each card is a photo with the page's name under
it and a fine rule down its left edge; five to a row on desktop, the rest a sideways scroll. */
.rs-xm {
padding: clamp(56px, 6vw, 96px) 0;
background: #fff;
border-top: 1px solid #e3e8f3;
font-family: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
}
.rs-xm__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: clamp(28px, 3vw, 48px);
}
html body .rs-xm .rs-xm__title {
margin: 0;
font-family: inherit;
font-size: clamp(28px, 2.8vw, 42px);
font-weight: 500;
line-height: 1.15;
letter-spacing: -.015em;
color: #0a1230;
text-transform: none;
}
.rs-xm__nav {
display: flex;
gap: 8px;
}
.rs-xm__nav[hidden] {
display: none;
}
.rs-xm__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid #cfd6e4;
border-radius: 0;
background: #fff;
color: #0a1230;
cursor: pointer;
transition: background-color .25s ease, border-color .25s ease, color .25s ease, opacity .25s ease;
}
.rs-xm__btn svg {
width: 18px;
height: 18px;
}
.rs-xm__btn:hover:not(:disabled),
.rs-xm__btn:focus-visible {
border-color: #0b2dbe;
background: #0b2dbe;
color: #fff;
}
.rs-xm__btn:disabled {
opacity: .35;
cursor: default;
}
.rs-xm__row {
--rs-xm-gap: clamp(16px, 1.8vw, 28px);
display: flex;
gap: var(--rs-xm-gap);
margin: 0;
padding: 0 0 6px;
list-style: none;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.rs-xm__row::-webkit-scrollbar {
display: none;
}
.rs-xm__item {
flex: 0 0 calc((100% - 4 * var(--rs-xm-gap)) / 5);
min-width: 0;
scroll-snap-align: start;
}
.rs-xm__card {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding-right: clamp(16px, 1.6vw, 26px);
color: #0a1230;
text-decoration: none;
}
/* the rule down the left edge, blue when pointed at */
.rs-xm__card::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 1px;
background: #d5dcea;
}
.rs-xm__card::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 100%;
background: #0b2dbe;
transform: scaleY(0);
transform-origin: 50% 0;
transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.rs-xm__photo {
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
background: #e6ecf7;
}
.rs-xm__photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.rs-xm__name {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-top: clamp(24px, 3vw, 48px);
font-size: clamp(16px, 1.15vw, 19px);
font-weight: 500;
line-height: 1.35;
letter-spacing: -.005em;
transition: color .25s ease;
}
.rs-xm__name svg {
flex: none;
width: 18px;
height: 18px;
margin-top: 2px;
color: #0b2dbe;
transition: transform .3s ease;
}
.rs-xm__card:hover,
.rs-xm__card:focus-visible {
color: #0b2dbe;
}
.rs-xm__card:hover::after,
.rs-xm__card:focus-visible::after {
transform: scaleY(1);
}
.rs-xm__card:hover .rs-xm__name svg,
.rs-xm__card:focus-visible .rs-xm__name svg {
transform: translateX(-4px);
}
.rs-xm__card:focus-visible {
outline: 2px solid #0b2dbe;
outline-offset: 4px;
}
@media (max-width: 1199px) {
.rs-xm__item {
flex-basis: calc((100% - 3 * var(--rs-xm-gap)) / 4);
}
}
@media (max-width: 991px) {
.rs-xm__item {
flex-basis: calc((100% - 2 * var(--rs-xm-gap)) / 3);
}
}
@media (max-width: 575px) {
.rs-xm__item {
flex-basis: 72%;
}
.rs-xm__btn {
width: 40px;
height: 40px;
}
}
@media (prefers-reduced-motion: reduce) {
.rs-xm__card::after,
.rs-xm__name svg {
transition: none;
}
}
/* newsletter button on the footer band, every page: the home page's square blue button. Set more
specifically than the pill buttons of rs-cta.css, which style .rs-sub__btn on the other pages. */
html body .rs-sub.rs-sub--foot .rs-sub__banner .rs-sub__btn.rs-sub__btn:not(#rs-cta) {
display: inline-flex !important;
align-items: center;
gap: 16px;
width: auto;
padding: 15px 30px !important;
border: 1px solid #0b2dbe !important;
border-radius: 0 !important;
background: #0b2dbe !important;
color: #fff !important;
font-size: 15px;
font-weight: 500;
line-height: 1.2;
transform: none !important;
box-shadow: none !important;
}
html body .rs-sub.rs-sub--foot .rs-sub__banner .rs-sub__btn.rs-sub__btn:not(#rs-cta) > svg {
display: block !important;
width: 22px;
height: 9px;
}
html body .rs-sub.rs-sub--foot .rs-sub__banner .rs-sub__btn.rs-sub__btn:not(#rs-cta)::before,
html body .rs-sub.rs-sub--foot .rs-sub__banner .rs-sub__btn.rs-sub__btn:not(#rs-cta)::after {
content: none !important;
display: none !important;
}
html body .rs-sub.rs-sub--foot .rs-sub__banner .rs-sub__btn.rs-sub__btn:not(#rs-cta):hover,
html body .rs-sub.rs-sub--foot .rs-sub__banner .rs-sub__btn.rs-sub__btn:not(#rs-cta):focus-visible {
border-color: #0a24a0 !important;
background: #0a24a0 !important;
}
/* ============================================================
HOME, Sector Expertise photo change (2026-11-05, third pass)
The photos no longer swap all at once: they change one after another,
clockwise. Each new photo wipes up over the old one behind a thin blue
edge while the picture settles into place, then its label rises in.
The old photo stays underneath until it is covered, so nothing flashes.
============================================================ */
html body .rs-hsec .rs-hsec-cell .rs-hsec-shot {
opacity: 1;
visibility: hidden;
z-index: 0;
transition: none;
}
html body .rs-hsec .rs-hsec-cell .rs-hsec-shot.is-on {
visibility: visible;
z-index: 2;
}
html body .rs-hsec .rs-hsec-cell .rs-hsec-shot.is-was {
visibility: visible;
z-index: 1;
}
html body .rs-hsec .rs-hsec-cell .rs-hsec-shot img {
top: -6%;
height: 106%;
}
html body .rs-hsec.is-live .rs-hsec-cell .rs-hsec-shot.is-on {
animation: rs-hsec-wipe 1s cubic-bezier(.77, 0, .18, 1) var(--d, 0ms) both;
}
html body .rs-hsec.is-live .rs-hsec-cell .rs-hsec-shot.is-on img {
animation: rs-hsec-settle 1.5s cubic-bezier(.22, 1, .36, 1) var(--d, 0ms) both;
}
/* the blue edge that leads the wipe */
html body .rs-hsec .rs-hsec-cell .rs-hsec-shot::after {
content: "";
position: absolute;
z-index: 3;
right: 0;
left: 0;
bottom: 0;
height: 3px;
background: #0b2dbe;
opacity: 0;
pointer-events: none;
}
html body .rs-hsec.is-live .rs-hsec-cell .rs-hsec-shot.is-on::after {
animation: rs-hsec-edge 1s cubic-bezier(.77, 0, .18, 1) var(--d, 0ms) both;
}
html body .rs-hsec.is-live .rs-hsec-cell .rs-hsec-shot.is-on .rs-hsec-cap {
animation: rs-hsec-cap .6s cubic-bezier(.22, 1, .36, 1) calc(var(--d, 0ms) + 650ms) both;
}
html body .rs-hsec .rs-hsec-cell .rs-hsec-shot.is-was .rs-hsec-cap {
opacity: 0;
transition: opacity .25s ease;
}
/* the panel's rows come in together, with the photos */
html body .rs-hsec.is-live .rs-hsec-copy.is-on .rs-hsec-list li {
animation: rs-hsec-cap .6s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes rs-hsec-wipe {
from { clip-path: inset(100% 0 0 0); }
to { clip-path: inset(0 0 0 0); }
}
@keyframes rs-hsec-settle {
from { transform: translate3d(0, 6%, 0); }
to { transform: none; }
}
@keyframes rs-hsec-edge {
0% { bottom: 0; opacity: 1; transform: translateY(0); }
85% { opacity: 1; }
100% { bottom: 100%; opacity: 0; transform: translateY(100%); }
}
@keyframes rs-hsec-cap {
from { opacity: 0; transform: translate3d(0, 12px, 0); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
html body .rs-hsec.is-live .rs-hsec-cell .rs-hsec-shot.is-on,
html body .rs-hsec.is-live .rs-hsec-cell .rs-hsec-shot.is-on img,
html body .rs-hsec.is-live .rs-hsec-cell .rs-hsec-shot.is-on::after,
html body .rs-hsec.is-live .rs-hsec-cell .rs-hsec-shot.is-on .rs-hsec-cap,
html body .rs-hsec.is-live .rs-hsec-copy.is-on .rs-hsec-list li {
animation: none;
}
}
/* ============================================================
HOME, Buy / sell / rent, new arrangement (.rs-hbuy--v2, 2026-11-05)
A tall photo on the left; on the right a wide blue panel (title on one
side, copy and link on the other) above two photos. The panel ends with
"Powered by" and the Valunxt and Valunxt Capital marks. Photo names sit
on white labels with a blue arrow square, numbered 01 to 03.
============================================================ */
html body .rs-hbuy--v2 .rs-hbuy-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: auto minmax(250px, 1fr);
gap: 2px;
min-height: clamp(500px, 38vw, 580px);
background: #fff;
}
html body .rs-hbuy--v2 .rs-hbuy-tile--tall {
grid-column: 1;
grid-row: 1 / 3;
}
html body .rs-hbuy--v2 .rs-hbuy-panel {
grid-column: 2 / 4;
grid-row: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 26px clamp(24px, 3vw, 48px);
align-items: start;
padding: clamp(28px, 3vw, 44px);
}
html body.rs-home .rs-hbuy--v2 .rs-hbuy-title {
margin: 0;
font-size: clamp(24px, 2.1vw, 32px);
}
html body .rs-hbuy--v2 .rs-hbuy-text {
margin: 0 0 18px;
font-size: 15px;
}
/* the panel's calls to action: a solid white button to speak to the team and an outlined one to
book a valuation, square like the rest of the home page, each with an arrow box on the right */
html body .rs-hbuy--v2 .rs-hbuy-text {
margin-bottom: 22px;
}
html body .rs-hbuy--v2 .rs-hbuy-ctas {
display: grid;
gap: 10px;
width: min(100%, 360px);
}
html body .rs-hbuy--v2 .rs-hbuy-btn {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 52px;
padding-right: 20px;
border: 1px solid rgba(255, 255, 255, .55);
color: #fff;
font-size: 15px;
font-weight: 500;
line-height: 1.25;
text-decoration: none;
transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
html body .rs-hbuy--v2 .rs-hbuy-btn--solid {
border-color: #fff;
background: #fff;
color: #0b2dbe;
}
html body .rs-hbuy--v2 .rs-hbuy-btnbox {
display: inline-flex;
flex: 0 0 auto;
align-self: stretch;
align-items: center;
justify-content: center;
width: 52px;
border-right: 1px solid rgba(255, 255, 255, .55);
transition: background-color .3s ease, border-color .3s ease;
}
html body .rs-hbuy--v2 .rs-hbuy-btn--solid .rs-hbuy-btnbox {
border-right: 0;
background: #0b2dbe;
color: #fff;
}
html body .rs-hbuy--v2 .rs-hbuy-btn svg {
width: 16px;
height: 16px;
transition: transform .3s ease;
}
html body .rs-hbuy--v2 .rs-hbuy-btn:hover,
html body .rs-hbuy--v2 .rs-hbuy-btn:focus-visible {
border-color: #fff;
background: #fff;
color: #0b2dbe;
text-decoration: none;
}
html body .rs-hbuy--v2 .rs-hbuy-btn:hover .rs-hbuy-btnbox,
html body .rs-hbuy--v2 .rs-hbuy-btn:focus-visible .rs-hbuy-btnbox {
border-right-color: rgba(11, 45, 190, .2);
}
html body .rs-hbuy--v2 .rs-hbuy-btn--solid:hover,
html body .rs-hbuy--v2 .rs-hbuy-btn--solid:focus-visible {
background: #e8edff;
border-color: #e8edff;
}
html body .rs-hbuy--v2 .rs-hbuy-btn--solid:hover .rs-hbuy-btnbox,
html body .rs-hbuy--v2 .rs-hbuy-btn--solid:focus-visible .rs-hbuy-btnbox {
background: #06176e;
}
html body .rs-hbuy--v2 .rs-hbuy-btn:hover svg,
html body .rs-hbuy--v2 .rs-hbuy-btn:focus-visible svg {
transform: translateX(-3px);
}
html body .rs-hbuy--v2 .rs-hbuy-btn:focus-visible {
outline: 2px solid #fff;
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
html body .rs-hbuy--v2 .rs-hbuy-btn,
html body .rs-hbuy--v2 .rs-hbuy-btnbox,
html body .rs-hbuy--v2 .rs-hbuy-btn svg {
transition: none;
}
}
html body .rs-hbuy--v2 .rs-hbuy-power {
grid-column: 1 / 3;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px 24px;
width: 100%;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, .3);
}
html body .rs-hbuy--v2 .rs-hbuy-power__label {
font-size: 11px;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(255, 255, 255, .72);
}
html body .rs-hbuy--v2 .rs-hbuy-mark {
display: inline-flex;
align-items: center;
gap: 10px;
color: #fff;
text-decoration: none;
}
html body .rs-hbuy--v2 .rs-hbuy-mark img {
display: block;
width: 104px;
height: auto;
}
/* the Capital mark: the Valunxt wordmark with CAPITAL set beside it, split by a hairline */
html body .rs-hbuy--v2 .rs-hbuy-mark--capital {
padding-right: 24px;
border-right: 1px solid rgba(255, 255, 255, .3);
}
html body .rs-hbuy--v2 .rs-hbuy-mark--capital span {
padding-right: 10px;
border-right: 1px solid rgba(255, 255, 255, .55);
font-size: 12px;
font-weight: 600;
line-height: 1;
letter-spacing: .28em;
text-transform: uppercase;
}
/* photo names on a white label */
html body .rs-hbuy--v2 .rs-hbuy-tile::after {
background: linear-gradient(180deg, rgba(6, 15, 60, 0) 60%, rgba(6, 15, 60, .35) 100%);
}
html body .rs-hbuy--v2 .rs-hbuy-name {
right: 0;
left: auto;
bottom: 0;
max-width: calc(100% - 24px);
gap: 14px;
justify-content: flex-start;
padding: 0 20px 0 0;
background: #fff;
color: #0a1230;
font-size: clamp(16px, 1.3vw, 19px);
}
html body .rs-hbuy--v2 .rs-hbuy-name b {
font-size: 11px;
font-weight: 600;
letter-spacing: .08em;
color: #0b2dbe;
}
html body .rs-hbuy--v2 .rs-hbuy-go {
width: 48px;
height: 48px;
margin-right: 6px;
border: 0;
background: #0b2dbe;
color: #fff;
}
html body .rs-hbuy--v2 .rs-hbuy-go svg {
transition: transform .3s ease;
}
html body .rs-hbuy--v2 .rs-hbuy-tile:hover .rs-hbuy-go,
html body .rs-hbuy--v2 .rs-hbuy-tile:focus-visible .rs-hbuy-go {
background: #06176e;
}
html body .rs-hbuy--v2 .rs-hbuy-tile:hover .rs-hbuy-go svg,
html body .rs-hbuy--v2 .rs-hbuy-tile:focus-visible .rs-hbuy-go svg {
transform: translateX(-3px);
}
html body .rs-hbuy--v2 .rs-hbuy-tile::before {
z-index: 0;
}
html body .rs-hbuy--v2 .rs-hbuy-name {
z-index: 2;
}
@media (max-width: 991px) {
html body .rs-hbuy--v2 .rs-hbuy-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: auto;
min-height: 0;
}
html body .rs-hbuy--v2 .rs-hbuy-panel {
order: -1;
grid-column: 1 / 3;
grid-row: auto;
grid-template-columns: minmax(0, 1fr);
}
html body .rs-hbuy--v2 .rs-hbuy-power {
grid-column: 1;
}
html body .rs-hbuy--v2 .rs-hbuy-tile--tall {
grid-column: 1 / 3;
grid-row: auto;
aspect-ratio: 16 / 9;
}
}
@media (max-width: 575px) {
html body .rs-hbuy--v2 .rs-hbuy-tile:not(.rs-hbuy-tile--tall) {
grid-column: 1 / 3;
}
html body .rs-hbuy--v2 .rs-hbuy-mark--capital {
padding-right: 0;
border-right: 0;
}
html body .rs-hbuy--v2 .rs-hbuy-mark img {
width: 92px;
}
html body .rs-hbuy--v2 .rs-hbuy-go {
width: 44px;
height: 44px;
}
}
/* ============================================================
Newsletter on the footer, slim (2026-11-05, every page)
One low row: heading and a line of copy on the left, the e-mail
field and button side by side on the right. ~140px tall on desktop.
============================================================ */
html body .rs-sub.rs-sub--foot {
padding: 34px 0 !important;
}
html body .rs-sub.rs-sub--foot .rs-sub__banner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 20px 56px;
padding: 0;
}
html body .rs-sub.rs-sub--foot .rs-sub__copy {
flex: 1 1 420px;
min-width: 0;
}
html body .rs-sub.rs-sub--foot .rs-sub__title {
margin: 0 0 6px;
font-size: clamp(20px, 1.6vw, 24px);
line-height: 1.25;
}
html body .rs-sub.rs-sub--foot .rs-sub__text {
max-width: 560px;
font-size: 14px;
line-height: 1.5;
}
html body .rs-sub.rs-sub--foot .rs-sub__form {
flex: 0 1 520px;
flex-direction: row;
align-items: stretch;
min-width: 0;
}
/* the label stays for screen readers; the field carries a placeholder-style hint instead */
html body .rs-sub.rs-sub--foot .rs-sub__label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
html body .rs-sub.rs-sub--foot .rs-sub__input {
flex: 1 1 auto;
min-width: 0;
height: 50px;
padding: 0 16px;
border: 1px solid #b9c6e4;
border-left: 0;
background: #fff;
}
html body .rs-sub.rs-sub--foot .rs-sub__input:focus {
border-color: #0b2dbe;
box-shadow: none !important;
}
html body .rs-sub.rs-sub--foot .rs-sub__banner .rs-sub__btn.rs-sub__btn:not(#rs-cta) {
flex: 0 0 auto;
width: auto;
height: 50px;
margin: 0 !important;
padding: 0 26px !important;
justify-content: center;
}
@media (max-width: 767px) {
html body .rs-sub.rs-sub--foot {
padding: 28px 0 !important;
}
html body .rs-sub.rs-sub--foot .rs-sub__copy,
html body .rs-sub.rs-sub--foot .rs-sub__form {
flex-basis: 100%;
}
html body .rs-sub.rs-sub--foot .rs-sub__title {
font-size: 20px;
}
html body .rs-sub.rs-sub--foot .rs-sub__text {
font-size: 13px;
}
html body .rs-sub.rs-sub--foot .rs-sub__banner .rs-sub__btn.rs-sub__btn:not(#rs-cta) {
padding: 0 18px !important;
}
}
/* ============================================================
HOME, tighter rhythm (2026-11-05): less white space between
sections than the 2026-11-03 pass (168px gaps read as empty).
============================================================ */
body.rs-home {
--rs-gap: 112px;
--rs-band: 80px;
}
@media (max-width: 1199px) {
body.rs-home {
--rs-gap: 96px;
--rs-band: 68px;
}
}
@media (max-width: 767px) {
body.rs-home {
--rs-gap: 64px;
--rs-band: 48px;
}
}
/* FAQ on phones and tablets (2026-11-05): the photo was hidden by mobile.css (its rule for the old
plus/minus icons caught it too). It now shows between the heading and the intro, as a 16:9 crop. */
@media (max-width: 991px) {
html body .rs-faq-section img.rs-faq-media {
display: block !important;
flex: none;
width: 100%;
height: auto !important;
min-height: 0 !important;
aspect-ratio: 16 / 9 !important;
margin: 14px 0 16px !important;
background: #e6eefc;
}
}
/* newsletter on phones: heading and field only, to keep the band low */
@media (max-width: 575px) {
html body .rs-sub.rs-sub--foot .rs-sub__text {
display: none;
}
html body .rs-sub.rs-sub--foot .rs-sub__title {
margin: 0;
}
html body .rs-sub.rs-sub--foot .rs-sub__banner {
gap: 14px;
}
}
@media (max-width: 575px) {
html body .rs-hbuy--v2 .rs-hbuy-power__label {
flex-basis: 100%;
}
}
/* Sector Expertise on other pages (includes/home-sectors.php with $rsSecWrap set, 2026-11-05):
the same spacing as the page's own sections */
html body .rs-hsec.rs-hsec--page {
padding: clamp(56px, 5.5vw, 80px) 0;
background: #fff;
font-family: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
}
html body .rs-hsec--page .rs-hsec-name {
margin: 0 0 18px;
font-family: inherit;
font-size: clamp(26px, 2.4vw, 36px);
font-weight: 500;
line-height: 1.15;
letter-spacing: -.015em;
color: #0a1230;
}
html body .rs-hsec--page .rs-hsec-list {
padding-right: 0;
}
html body .rs-hsec--page .rs-hsec-title {
margin: 0;
font-family: inherit;
font-size: clamp(28px, 3vw, 44px) !important;
font-weight: 500;
line-height: 1.15;
letter-spacing: -.015em;
color: #0a1230;
}
/* "Explore more" row: the same guard as the case study rows, so the page keeps scrolling with the
mouse wheel when the pointer is over the cards */
html body .rs-xm__row {
overflow-y: hidden;
overscroll-behavior-x: contain;
}
/* Buy / sell / rent: only the Valunxt Capital mark now, so it needs no divider before it */
html body .rs-hbuy--v2 .rs-hbuy-mark--capital {
padding-right: 0;
border-right: 0;
}
html body .rs-hbuy--v2 .rs-hbuy-mark--capital img {
width: 118px;
}
/* ======================================================================
HOME, key figures in a numbers layout (.rs-abx--v2, 2026-11-05)
Eyebrow and heading on the left, copy on the right, a full-width rule,
then the four figures in blue between vertical rules. When the row comes
into view the rules draw in and all four numbers count up together
(script under the section in index.php).
====================================================================== */
html body .rs-abx--v2 .rs-abx-info {
padding-bottom: clamp(32px, 3.4vw, 52px);
border-bottom: 1px solid #e2e8f0;
}
html body .rs-abx--v2 .rs-abx-eyebrow {
display: block;
margin-bottom: 8px;
font-size: 15px;
font-weight: 500;
line-height: 1.3;
letter-spacing: 0;
color: #0b2dbe;
}
html body .rs-abx--v2 .rs-abx-copy {
color: #2f3854;
}
html body .rs-abx--v2 .rs-abx-stats {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
padding-top: clamp(32px, 3.4vw, 52px);
}
html body .rs-abx--v2 .rs-abx-stat {
padding: 4px clamp(18px, 2.4vw, 40px);
border-top: 0;
}
html body .rs-abx--v2 .rs-abx-stat:first-child {
padding-right: 0;
}
html body .rs-abx--v2 .rs-abx-stat:last-child {
padding-left: 0;
}
/* the old moving blue top line is not used here */
html body .rs-abx--v2 .rs-abx-stat::before {
display: none;
}
html body .rs-abx--v2 .rs-abx-stat:not(:first-child)::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 1px;
background: #d5dce8;
transform-origin: 50% 0;
transition: transform .9s cubic-bezier(.65, 0, .2, 1);
}
html body .rs-abx--v2 .rs-abx-stats.is-armed:not(.is-in) .rs-abx-stat::after {
transform: scaleY(0);
}
html body .rs-abx--v2 .rs-abx-stat-num {
font-size: clamp(44px, 4.4vw, 70px);
font-weight: 600;
letter-spacing: -.03em;
color: #0b2dbe;
}
html body .rs-abx--v2 .rs-abx-stat-num small {
margin-right: 4px;
font-size: 12px;
color: #0b2dbe;
opacity: .7;
}
html body .rs-abx--v2 .rs-abx-stat-label {
margin-top: 6px;
font-size: clamp(16px, 1.3vw, 21px);
font-weight: 400;
line-height: 1.4;
letter-spacing: 0;
text-transform: none;
color: #14193f;
}
@media (max-width: 991px) {
html body .rs-abx--v2 .rs-abx-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: 32px;
}
html body .rs-abx--v2 .rs-abx-stat:nth-child(odd) {
padding-right: 0;
}
html body .rs-abx--v2 .rs-abx-stat:nth-child(even) {
padding-right: 24px;
padding-left: 0;
}
html body .rs-abx--v2 .rs-abx-stat:nth-child(odd)::after {
display: none;
}
}
@media (max-width: 575px) {
html body .rs-abx--v2 .rs-abx-stat-num {
font-size: 36px;
}
html body .rs-abx--v2 .rs-abx-stat-num small {
display: block;
margin: 6px 0 0;
}
html body .rs-abx--v2 .rs-abx-stat:nth-child(even) {
padding-right: 18px;
}
html body .rs-abx--v2 .rs-abx-stat-label {
font-size: 15px;
}
}
@media (prefers-reduced-motion: reduce) {
html body .rs-abx--v2 .rs-abx-stat::after {
transition: none;
}
}
/* Sector Expertise panel (2026-11-05): a line under the group name on what the group covers, and a
"Talk to a sector specialist" button under the list (.rs-hsec-text and .rs-hsec-cta above) */
html body .rs-hsec .rs-hsec-name {
margin-bottom: 12px;
}
html body .rs-hsec .rs-hsec-text {
max-width: 34em;
margin: 0 0 4px;
font-size: 15.5px;
line-height: 1.65;
color: #4a5568;
}
html body .rs-hsec .rs-hsec-list {
margin-top: 22px;
}
html body .rs-hsec .rs-hsec-cta {
gap: 12px;
margin-top: 26px;
}
html body .rs-hsec .rs-hsec-cta svg {
width: 16px;
height: 16px;
transition: transform .3s ease;
}
html body .rs-hsec .rs-hsec-cta:hover svg,
html body .rs-hsec .rs-hsec-cta:focus-visible svg {
transform: translateX(-3px);
}
@media (max-width: 575px) {
html body .rs-hsec .rs-hsec-text {
font-size: 14.5px;
}
html body .rs-hsec .rs-hsec-cta {
margin-top: 22px;
}
}
/* ======================================================================
HOME, News & Insights, clean cards (.rs-hin, 2026-11-05)
The heading and the paragraph sit on one grid with the two "All" links
as square buttons under the paragraph. The cards are plain white with a
hairline border and the photo full bleed at the top (no gapped frame);
titles take two lines so every "Read" link lines up along the foot.
On hover the blue frame still draws round the card, the photo zooms a
little and the arrow slides on.
====================================================================== */
html body .rs-hin .rs-hcs-head {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: start;
gap: 24px clamp(32px, 5vw, 80px);
margin-bottom: clamp(28px, 2.6vw, 40px);
padding-bottom: clamp(24px, 2.2vw, 32px);
}
html body .rs-hin .rs-mr-header-left {
max-width: none;
}
html body .rs-hin .rs-hcs-aside {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
max-width: 560px;
margin-right: auto;
}
html body .rs-hin .rs-hcs-lead {
font-size: 16px;
line-height: 1.65;
color: #3d4a6b;
}
html body .rs-hin .rs-hin-links {
gap: 12px;
}
html body .rs-hin .rs-mr-btn {
gap: 14px;
min-height: 46px;
padding: 0 20px;
border: 1px solid #0b2dbe;
background: transparent;
color: #0b2dbe;
font-size: 14.5px;
transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
html body .rs-hin .rs-mr-btn--solid {
background: #0b2dbe;
color: #fff;
}
html body .rs-hin .rs-mr-btn:hover,
html body .rs-hin .rs-mr-btn:focus-visible {
border-color: #0b2dbe;
background: #0b2dbe;
color: #fff;
}
html body .rs-hin .rs-mr-btn--solid:hover,
html body .rs-hin .rs-mr-btn--solid:focus-visible {
border-color: #06176e;
background: #06176e;
}
html body .rs-hin .rs-rc-grid {
gap: clamp(16px, 1.6vw, 24px);
}
html body .rs-hin.rs-mr-section--frame .rs-rc {
padding: 0;
border: 1px solid #d3ddf2;
background: #fff;
background-image: none;
transition: border-color .3s ease, box-shadow .3s ease;
}
html body .rs-hin.rs-mr-section--frame .rs-rc:is(:hover, :focus-visible) {
border-color: transparent;
box-shadow: 0 20px 40px -28px rgba(10, 18, 48, .5);
}
html body .rs-hin .rs-rc__node {
display: none;
}
/* 16:9, the shape of the blog images, so they show whole (report covers lose only plain margin) */
html body .rs-hin .rs-rc__media {
aspect-ratio: 16 / 9;
}
html body .rs-hin .rs-rc__media img {
transition: transform .9s cubic-bezier(.22, 1, .36, 1);
}
html body .rs-hin .rs-rc:is(:hover, :focus-visible) .rs-rc__media img {
transform: scale(1.04);
}
html body .rs-hin.rs-mr-section--frame .rs-rc__body {
gap: 12px;
padding: 20px 22px 0;
}
html body .rs-hin .rs-rc__title {
-webkit-line-clamp: 2;
min-height: calc(1.35em * 2);
font-size: 18px;
}
html body .rs-hin.rs-mr-section--frame .rs-rc__foot {
margin: auto -22px 0;
padding: 14px 22px 16px;
border-top: 1px solid #e6ebf5;
}
html body .rs-hin.rs-mr-section--frame .rs-rc__more {
justify-content: space-between;
width: 100%;
font-size: 14px;
}
html body .rs-hin .rs-rc:hover .rs-rc__more {
text-decoration: none;
}
html body .rs-hin .rs-rc__more svg {
width: 17px;
height: 17px;
}
@media (max-width: 991px) {
html body .rs-hin .rs-hcs-head {
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
html body .rs-hin .rs-hcs-aside {
margin-right: 0;
}
}
@media (max-width: 575px) {
html body .rs-hin .rs-mr-btn {
min-height: 42px;
padding: 0 16px;
font-size: 14px;
}
html body .rs-hin.rs-mr-section--frame .rs-rc__body {
padding: 18px 18px 0;
}
html body .rs-hin.rs-mr-section--frame .rs-rc__foot {
margin: auto -18px 0;
padding: 12px 18px 14px;
}
}
@media (prefers-reduced-motion: reduce) {
html body .rs-hin .rs-rc__media img {
transition: none;
}
}
/* HOME, key figures, second pass (.rs-abx--v2, 2026-11-05): structured like a "numbers" band, with
far less white space. The section takes a modest padding of its own (not the home half-gap), the
heading is one line in a narrower left column with the eyebrow over it, a two-line paragraph sits
on the right, then the rule, the four figures with one-line labels tight under them, and a small
footnote. */
html body.rs-home .rs-abx--v2,
html body .rs-abx--v2 {
padding-top: clamp(44px, 4.4vw, 72px);
padding-bottom: clamp(40px, 4vw, 64px);
}
html body .rs-abx--v2 .rs-abx-info {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
gap: 18px clamp(32px, 4.4vw, 72px);
align-items: start;
padding: 0 0 clamp(24px, 2.4vw, 34px);
}
html body.rs-home .rs-abx--v2 .rs-abx-title,
html body .rs-abx--v2 .rs-abx-title {
font-size: clamp(26px, 2.2vw, 34px);
line-height: 1.15;
}
html body .rs-abx--v2 .rs-abx-eyebrow {
margin-bottom: 6px;
}
html body .rs-abx--v2 .rs-abx-copy {
max-width: 62em;
padding-top: 4px;
font-size: 16px;
line-height: 1.65;
}
html body .rs-abx--v2 .rs-abx-stats {
padding-top: clamp(24px, 2.4vw, 34px);
}
html body .rs-abx--v2 .rs-abx-stat {
padding-top: 2px;
padding-bottom: 2px;
}
html body .rs-abx--v2 .rs-abx-stat-num {
font-size: clamp(40px, 3.6vw, 58px);
}
html body .rs-abx--v2 .rs-abx-stat-label {
margin-top: 4px;
font-size: clamp(15px, 1.15vw, 18px);
white-space: nowrap;
}
html body .rs-abx--v2 .rs-abx-note {
margin: clamp(20px, 2vw, 28px) 0 0;
font-size: 12.5px;
line-height: 1.6;
color: #5b6478;
}
@media (max-width: 991px) {
html body .rs-abx--v2 .rs-abx-info {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
html body .rs-abx--v2 .rs-abx-stat-label {
white-space: normal;
}
}
@media (max-width: 575px) {
html body.rs-home .rs-abx--v2,
html body .rs-abx--v2 {
padding-top: 36px;
padding-bottom: 32px;
}
html body .rs-abx--v2 .rs-abx-copy {
font-size: 15px;
line-height: 1.6;
}
}
/* HOME, buy / sell / rent, shorter (2026-11-05): about a fifth less height. The panel takes less
padding and smaller gaps, the paragraph is three lines, and the photo row under the panel is
shorter; the grid no longer holds a tall minimum height. */
@media (min-width: 992px) {
html body .rs-hbuy--v2 .rs-hbuy-grid {
grid-template-rows: auto minmax(200px, 1fr);
min-height: 0;
}
/* the two photos under the panel each hold their own cell */
html body .rs-hbuy--v2 .rs-hbuy-tile:not(.rs-hbuy-tile--tall):not(.rs-hbuy-tile--plain) {
grid-column: 2;
grid-row: 2;
min-height: 200px;
}
html body .rs-hbuy--v2 .rs-hbuy-tile--plain {
grid-column: 3;
grid-row: 2;
min-height: 200px;
}
}
html body .rs-hbuy--v2 .rs-hbuy-panel {
gap: 18px clamp(24px, 3vw, 48px);
padding: clamp(22px, 2.2vw, 32px) clamp(24px, 2.6vw, 40px);
}
html body .rs-hbuy--v2 .rs-hbuy-eyebrow {
margin-bottom: 12px;
}
html body .rs-hbuy--v2 .rs-hbuy-text {
margin-bottom: 18px;
}
html body .rs-hbuy--v2 .rs-hbuy-ctas {
gap: 8px;
}
html body .rs-hbuy--v2 .rs-hbuy-btn {
min-height: 46px;
}
html body .rs-hbuy--v2 .rs-hbuy-btnbox {
width: 46px;
}
html body .rs-hbuy--v2 .rs-hbuy-power {
padding-top: 16px;
}
/* ======================================================================
HOME, Book a Valuation animation, upgrade (.rs-bkf, 2026-11-05)
01 the form: the card rises in and the "Report from" tag pops in after
it. Each field (in step with the pointer's click) opens a small menu of
three options; the highlight lands on the choice, the menu closes and
the value settles into the field, where a tick replaces the chevron.
Replaces the typed-in values and the caret. Scenes travel a little
further as they change. Every element's plain style is still its
finished state; the keyframes only run from .is-run.
====================================================================== */
.rs-bkf__scene {
transform: translate3d(-3.5em, 0, 0);
}
.rs-bkf__scene.is-out {
transform: translate3d(3.5em, 0, 0);
}
.rs-bkf__scene--form.is-run .rs-bkf__card {
animation: rs-bkf-cardin .9s var(--bkf-ease) .1s both;
}
@keyframes rs-bkf-cardin {
from { opacity: 0; transform: translate3d(0, 1.4em, 0) scale(.97); }
to { opacity: 1; transform: none; }
}
.rs-bkf__scene--form.is-run .rs-bkf__fast {
animation: rs-bkf-pop .6s cubic-bezier(.3, 1.4, .5, 1) .55s both;
}
@keyframes rs-bkf-pop {
from { opacity: 0; transform: scale(.6); }
to { opacity: 1; transform: none; }
}
/* the value no longer types in: it settles once the menu closes */
.rs-bkf__value::after {
display: none;
}
.rs-bkf__scene--form.is-run .rs-bkf__value {
clip-path: none;
animation: rs-bkf-valuein .4s var(--bkf-ease) calc(1.52s + var(--i) * .95s) both;
}
@keyframes rs-bkf-valuein {
from { opacity: 0; transform: translate3d(0, .35em, 0); }
to { opacity: 1; transform: none; }
}
/* the field stays lit while its menu is open */
.rs-bkf__scene--form.is-run .rs-bkf__fieldbox {
animation: rs-bkf-focus2 .95s ease calc(.75s + var(--i) * .95s) both;
}
@keyframes rs-bkf-focus2 {
from, 92% { border-color: #0b2dbe; box-shadow: inset 0 0 0 1px #0b2dbe, 0 0 0 .22em rgba(11, 45, 190, .12); }
to { border-color: #cdd7ee; box-shadow: none; }
}
/* the menu under the field */
.rs-bkf__menu {
position: absolute;
z-index: 3;
top: calc(100% + .3em);
right: -1px;
left: -1px;
display: flex;
flex-direction: column;
padding: .3em;
background: #fff;
border: 1px solid #cdd7ee;
box-shadow: 0 1em 2em rgba(3, 14, 80, .22);
opacity: 0;
visibility: hidden;
transform-origin: 50% 0;
pointer-events: none;
}
.rs-bkf__opt {
padding: .42em .6em;
font-size: .92em;
line-height: 1.25;
color: #3d4a6b;
}
.rs-bkf__scene--form.is-run .rs-bkf__menu {
animation: rs-bkf-menu .82s var(--bkf-ease) calc(.8s + var(--i) * .95s) both;
}
@keyframes rs-bkf-menu {
0% { opacity: 0; visibility: visible; transform: translate3d(0, -.3em, 0) scaleY(.92); }
16% { opacity: 1; transform: none; }
82% { opacity: 1; transform: none; }
100% { opacity: 0; visibility: hidden; transform: translate3d(0, -.2em, 0); }
}
.rs-bkf__scene--form.is-run .rs-bkf__opt.is-pick {
animation: rs-bkf-pick .82s step-end calc(.8s + var(--i) * .95s) both;
}
@keyframes rs-bkf-pick {
0% { background: transparent; color: #3d4a6b; }
38% { background: #eef2fd; color: #0b2dbe; }
62% { background: #0b2dbe; color: #fff; }
}
/* a tick takes the chevron's place once the value is in */
.rs-bkf__fieldok {
position: absolute;
left: .7em;
top: 50%;
width: .95em;
height: .95em;
margin-top: -.475em;
color: #0b2dbe;
opacity: 0;
}
.rs-bkf__fieldok svg {
display: block;
width: 100%;
height: 100%;
}
.rs-bkf__scene--form.is-run .rs-bkf__fieldchev {
animation: rs-bkf-chevout .25s ease calc(1.5s + var(--i) * .95s) both;
}
@keyframes rs-bkf-chevout {
to { opacity: 0; transform: scale(.6); }
}
.rs-bkf__scene--form.is-run .rs-bkf__fieldok {
animation: rs-bkf-okin .45s cubic-bezier(.3, 1.4, .5, 1) calc(1.6s + var(--i) * .95s) both;
}
@keyframes rs-bkf-okin {
from { opacity: 0; transform: scale(.4); }
to { opacity: 1; transform: none; }
}
/* without the animation the finished form shows its ticks */
.rs-bkf:not(.is-live) .rs-bkf__fieldchev {
opacity: 0;
}
.rs-bkf:not(.is-live) .rs-bkf__fieldok {
opacity: 1;
}
/* Book a Valuation animation, step 02 as valuation workings (2026-11-05): the card beside the measured
building lists the valuer's workings (comparables, rate, area, adjustment), each line coming in as
the meter runs, then the indicated market value lands on a rule at the foot */
.rs-bkf__calcs {
width: 16.2em;
gap: .55em;
}
.rs-bkf__calc {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: .8em;
padding: .2em 0;
font-size: .76em;
line-height: 1.3;
color: #5b6478;
}
.rs-bkf__calc b {
font-weight: 600;
color: #0b1230;
white-space: nowrap;
}
.rs-bkf__total {
display: flex;
flex-direction: column;
gap: .2em;
margin-top: .2em;
padding-top: .65em;
border-top: 1px solid #dfe5f2;
font-size: .72em;
color: #5b6478;
}
.rs-bkf__total b {
font-size: 1.75em;
font-weight: 600;
letter-spacing: -.01em;
color: #0b2dbe;
}
.rs-bkf__scene--survey.is-run .rs-bkf__calc {
animation: rs-bkf-rowin .45s var(--bkf-ease) calc(1.9s + var(--i) * .5s) both;
}
@keyframes rs-bkf-rowin {
from { opacity: 0; transform: translate3d(0, .4em, 0); }
to { opacity: 1; transform: none; }
}
.rs-bkf__scene--survey.is-run .rs-bkf__total {
animation: rs-bkf-rowin .5s var(--bkf-ease) 4s both;
}
.rs-bkf__scene--survey.is-run .rs-bkf__total b {
animation: rs-bkf-pop .55s cubic-bezier(.3, 1.4, .5, 1) 4.15s both;
}
/* HOME, buy / sell / rent, glass labels and panel texture (2026-11-06).
The photo labels are frosted glass with white type (the arrow behind a fine rule) and turn solid
white on hover. The blue panel carries a quiet texture: fine diagonal hairlines and a soft glow
from the top right corner. */
html body .rs-hbuy--v2 .rs-hbuy-tile::after {
background: linear-gradient(180deg, rgba(6, 15, 60, 0) 55%, rgba(6, 15, 60, .5) 100%);
}
html body .rs-hbuy--v2 .rs-hbuy-name {
border: 1px solid rgba(255, 255, 255, .38);
border-right: 0;
border-bottom: 0;
background: rgba(255, 255, 255, .14);
-webkit-backdrop-filter: blur(14px) saturate(160%);
backdrop-filter: blur(14px) saturate(160%);
color: #fff;
text-decoration: none;
transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
html body .rs-hbuy--v2 .rs-hbuy-name b {
color: rgba(255, 255, 255, .78);
transition: color .35s ease;
}
html body .rs-hbuy--v2 .rs-hbuy-go {
border-right: 1px solid rgba(255, 255, 255, .35);
background: transparent;
color: #fff;
transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
html body .rs-hbuy--v2 .rs-hbuy-tile:hover .rs-hbuy-name,
html body .rs-hbuy--v2 .rs-hbuy-tile:focus-visible .rs-hbuy-name {
border-color: #fff;
background: #fff;
color: #0a1230;
text-decoration: none;
}
html body .rs-hbuy--v2 .rs-hbuy-tile:hover .rs-hbuy-name b,
html body .rs-hbuy--v2 .rs-hbuy-tile:focus-visible .rs-hbuy-name b {
color: #0b2dbe;
}
html body .rs-hbuy--v2 .rs-hbuy-tile:hover .rs-hbuy-go,
html body .rs-hbuy--v2 .rs-hbuy-tile:focus-visible .rs-hbuy-go {
border-right-color: #0b2dbe;
background: #0b2dbe;
color: #fff;
}
/* without backdrop blur the label keeps a darker tint so the white type still reads */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
html body .rs-hbuy--v2 .rs-hbuy-name {
background: rgba(6, 15, 60, .55);
}
}
html body .rs-hbuy--v2 .rs-hbuy-panel {
background-color: #0b2dbe;
background-image:
radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 55%),
repeating-linear-gradient(225deg, rgba(255, 255, 255, .05) 0 1px, rgba(255, 255, 255, 0) 1px 15px);
}
@media (prefers-reduced-motion: reduce) {
html body .rs-hbuy--v2 .rs-hbuy-name,
html body .rs-hbuy--v2 .rs-hbuy-name b,
html body .rs-hbuy--v2 .rs-hbuy-go {
transition: none;
}
}
/* HOME, Our Services panels, blue glass (2026-11-06): the closed panels sit behind a deep blue
translucent glass (soft blur, the photo faintly showing through), a fine light edge and a highlight
along the top; the open panel still shows its photo clear. On phones every panel is open. */
.rs-sp__glass {
background: linear-gradient(180deg, rgba(30, 74, 196, .56) 0%, rgba(16, 48, 160, .7) 58%, rgba(8, 28, 112, .84) 100%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
backdrop-filter: blur(14px) saturate(140%);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), inset 0 1px 0 rgba(255, 255, 255, .38);
}
/* without backdrop blur the tint is a little denser so the photo does not compete with the type */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.rs-sp__glass {
background: linear-gradient(180deg, rgba(30, 74, 196, .78) 0%, rgba(8, 28, 112, .9) 100%);
}
}
/* Our Services panels, blue glass with more of the photo showing (2026-11-06): a lighter tint in the
upper part and a softer blur; the foot stays deep enough for the white type */
.rs-sp__glass {
background: linear-gradient(180deg, rgba(30, 74, 196, .3) 0%, rgba(18, 52, 168, .44) 50%, rgba(8, 28, 112, .74) 100%);
-webkit-backdrop-filter: blur(7px) saturate(150%);
backdrop-filter: blur(7px) saturate(150%);
}
/* Our Services panels, one step lighter again (2026-11-06): more of the photo, a lighter blur; the
foot keeps enough depth for the white type */
.rs-sp__glass {
background: linear-gradient(180deg, rgba(30, 74, 196, .18) 0%, rgba(18, 52, 168, .32) 50%, rgba(8, 28, 112, .66) 100%);
-webkit-backdrop-filter: blur(4px) saturate(150%);
backdrop-filter: blur(4px) saturate(150%);
}
/* HOME, Our Services panels, clear photos (2026-11-06): no blur on the closed panels, only a light
blue tint that deepens towards the foot for the white type, so each photo reads clearly. The narrow
panels are framed on their subject (the tower, the two people meeting). */
.rs-sp__glass {
background: linear-gradient(180deg, rgba(24, 60, 190, .1) 0%, rgba(14, 42, 150, .18) 55%, rgba(8, 28, 112, .42) 100%);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.rs-sp__img[src*="svc-building-consultancy"] {
object-position: 75% 50%;
}
.rs-sp__img[src*="svc-strategic-consultancy"] {
object-position: 61% 50%;
}
/* HOME, buy / sell / rent, touch-up (2026-11-06): the photo labels become a crisper navy-tinted glass
with the number in light blue (still solid white on hover); the photos ease in slightly on hover;
the panel gives the paragraph a little more room so it sits on three lines, and both buttons run
the full width of that column. */
html body .rs-hbuy--v2 .rs-hbuy-name {
border-color: rgba(255, 255, 255, .3);
background: rgba(8, 22, 92, .36);
-webkit-backdrop-filter: blur(16px) saturate(170%);
backdrop-filter: blur(16px) saturate(170%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
html body .rs-hbuy--v2 .rs-hbuy-name b {
color: #b9ccff;
}
html body .rs-hbuy--v2 .rs-hbuy-go {
border-right-color: rgba(255, 255, 255, .28);
}
html body .rs-hbuy--v2 .rs-hbuy-tile img {
transition: transform 1.2s cubic-bezier(.22, 1, .36, 1);
}
html body .rs-hbuy--v2 .rs-hbuy-tile:hover img,
html body .rs-hbuy--v2 .rs-hbuy-tile:focus-visible img {
transform: scale(1.045);
}
@media (min-width: 992px) {
html body .rs-hbuy--v2 .rs-hbuy-panel {
grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
}
}
html body .rs-hbuy--v2 .rs-hbuy-text {
color: rgba(255, 255, 255, .86);
}
html body .rs-hbuy--v2 .rs-hbuy-ctas {
width: 100%;
}
@media (prefers-reduced-motion: reduce) {
html body .rs-hbuy--v2 .rs-hbuy-tile img {
transition: none;
}
html body .rs-hbuy--v2 .rs-hbuy-tile:hover img,
html body .rs-hbuy--v2 .rs-hbuy-tile:focus-visible img {
transform: none;
}
}
/* Sector Expertise, about 10% smaller (2026-11-06): a lower collage, less padding in the panel, a
slightly smaller group name and tighter sector rows. Home page and the other pages that use it. */
html body .rs-hsec .rs-hsec-head {
margin-bottom: 32px;
}
html body .rs-hsec .rs-hsec-stage {
min-height: clamp(380px, 32vw, 486px);
}
html body .rs-hsec .rs-hsec-panel {
padding: clamp(28px, 3.2vw, 48px);
}
html body .rs-hsec .rs-hsec-bar {
right: clamp(28px, 3.2vw, 48px);
left: clamp(28px, 3.2vw, 48px);
bottom: clamp(20px, 2.2vw, 32px);
}
html body .rs-hsec .rs-hsec-eyebrow {
margin-bottom: 14px;
}
html body.rs-home .rs-hsec .rs-hsec-name,
html body .rs-hsec--page .rs-hsec-name {
font-size: clamp(26px, 2.3vw, 34px);
}
html body .rs-hsec .rs-hsec-text {
font-size: 15px;
}
html body .rs-hsec .rs-hsec-list {
margin-top: 18px;
}
html body .rs-hsec .rs-hsec-list a {
padding: 12px 0;
font-size: 16px;
}
html body .rs-hsec .rs-hsec-cta {
margin-top: 22px;
padding: 12px 24px;
}
/* Sector Expertise: the copy fills the panel so the sector list and the progress line end together */
html body .rs-hsec .rs-hsec-copy {
width: 100%;
max-width: none;
}
/* ============================================================
Get in Touch (.rs-cq), high-end (2026-11-06): the details panel
turns deep navy over a faint Downtown skyline with a hairline
texture; white type, the call / email / office rows each with a
line icon in a fine square, and three credential tags at the foot.
The form gains a heading row ("Enquiry form", title, "All fields
are required"), small-caps labels and soft filled fields with a
blue focus ring. The submit keeps the site-wide CTA style.
============================================================ */
html body .rs-cq .rs-cq__box {
grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
border: 0;
box-shadow: 0 40px 80px -52px rgba(10, 18, 48, .4);
}
html body .rs-cq .rs-cq__info {
overflow: hidden;
color: #fff;
background:
linear-gradient(200deg, rgba(8, 28, 128, .9) 0%, rgba(5, 16, 74, .95) 58%, rgba(4, 12, 60, .98) 100%),
url("../../images/valuation-services/portfolio-downtown-dubai-skyline.webp") center / cover no-repeat;
}
html body .rs-cq .rs-cq__info::before {
top: 0;
right: 0;
z-index: 2;
width: 96px;
height: 3px;
background: #7d98ff;
}
html body .rs-cq .rs-cq__info::after {
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(90% 70% at 0% 0%, rgba(125, 152, 255, .18) 0%, rgba(125, 152, 255, 0) 60%),
repeating-linear-gradient(225deg, rgba(255, 255, 255, .035) 0 1px, rgba(255, 255, 255, 0) 1px 16px);
pointer-events: none;
}
html body .rs-cq .rs-cq__info > * {
position: relative;
z-index: 1;
}
html body .rs-cq .rs-cq__eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
color: #a9c0ff;
}
html body .rs-cq .rs-cq__eyebrow::before {
content: "";
width: 32px;
height: 1px;
background: #a9c0ff;
}
html body .rs-cq .rs-cq__title {
color: #fff;
}
html body .rs-cq .rs-cq__text {
color: rgba(255, 255, 255, .78);
}
html body .rs-cq .rs-cq__details {
border-top-color: rgba(255, 255, 255, .16);
}
html body .rs-cq .rs-cq__detail {
grid-template-columns: 44px minmax(0, 1fr);
align-items: center;
gap: 3px 16px;
padding: 15px 0;
border-bottom-color: rgba(255, 255, 255, .16);
}
html body .rs-cq .rs-cq__detail::before {
content: "";
grid-row: 1 / 3;
grid-column: 1;
width: 44px;
height: 44px;
border: 1px solid rgba(255, 255, 255, .22);
background: rgba(255, 255, 255, .06) var(--rs-cq-ico) center / 18px no-repeat;
}
html body .rs-cq .rs-cq__detail:nth-child(1) {
--rs-cq-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c3d2ff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}
html body .rs-cq .rs-cq__detail:nth-child(2) {
--rs-cq-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c3d2ff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='1'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");
}
html body .rs-cq .rs-cq__detail:nth-child(3) {
--rs-cq-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c3d2ff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-5.5-7-11a7 7 0 0 1 14 0c0 5.5-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}
html body .rs-cq .rs-cq__detail dt {
grid-column: 2;
padding-top: 0;
font-size: 10.5px;
color: rgba(255, 255, 255, .58);
}
html body .rs-cq .rs-cq__detail dd {
grid-column: 2;
font-size: 15px;
}
html body .rs-cq .rs-cq__detail a {
color: #fff;
}
html body .rs-cq .rs-cq__detail a:hover,
html body .rs-cq .rs-cq__detail a:focus-visible {
color: #cfdcff;
}
html body .rs-cq .rs-cq__creds {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 24px 0 0;
padding: 0;
list-style: none;
}
html body .rs-cq .rs-cq__creds li {
padding: 7px 12px;
border: 1px solid rgba(255, 255, 255, .22);
background: rgba(255, 255, 255, .05);
font-size: 10.5px;
font-weight: 600;
line-height: 1.2;
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(255, 255, 255, .86);
}
/* the form */
html body .rs-cq .rs-cq__form {
gap: 22px;
border: 1px solid #e3e8f2;
border-right: 0;
}
html body .rs-cq .rs-cq__formhead {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: 6px 16px;
padding-bottom: 20px;
border-bottom: 1px solid #e3e8f2;
}
html body .rs-cq .rs-cq__kicker {
grid-column: 1 / -1;
font-size: 11.5px;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: #0b2dbe;
}
html body .rs-cq .rs-cq__formtitle {
margin: 0;
font-size: clamp(20px, 1.6vw, 24px);
font-weight: 500;
line-height: 1.25;
letter-spacing: -.01em;
color: #0a1230;
}
html body .rs-cq .rs-cq__req {
font-size: 12.5px;
color: #5b6577;
white-space: nowrap;
}
html body .rs-cq .rs-cq__fields {
gap: 20px 20px;
}
html body .rs-cq .rs-cq__field label {
font-size: 11px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: #3d4a6b;
}
html body .rs-cq .rs-cq__field input {
height: 52px;
padding: 0 16px;
border: 1px solid #dbe2ee;
border-bottom-color: #b6c2d8;
background: #f7f9fd;
font-size: 15px;
transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
html body .rs-cq .rs-cq__field input::placeholder {
color: #98a3b8;
opacity: 1;
}
html body .rs-cq .rs-cq__field input:hover {
border-color: #c4cee1;
border-bottom-color: #8f9dbb;
}
html body .rs-cq .rs-cq__field input:focus {
border-color: #0b2dbe;
background: #fff;
box-shadow: 0 0 0 3px rgba(11, 45, 190, .12);
}
html body .rs-cq .rs-cq__field input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 40px #f7f9fd inset;
}
html body .rs-cq .rs-cq__actions {
padding-top: 4px;
}
@media (max-width: 991px) {
html body .rs-cq .rs-cq__form {
border-top: 0;
border-right: 1px solid #e3e8f2;
}
}
@media (max-width: 575px) {
html body .rs-cq .rs-cq__formhead {
grid-template-columns: minmax(0, 1fr);
}
html body .rs-cq .rs-cq__req {
white-space: normal;
}
html body .rs-cq .rs-cq__detail {
grid-template-columns: 40px minmax(0, 1fr);
}
html body .rs-cq .rs-cq__detail::before {
width: 40px;
height: 40px;
}
}
/* Get in Touch: one column on tablets and phones (outranks the two-column rule above) */
@media (max-width: 991px) {
html body .rs-cq .rs-cq__box {
grid-template-columns: minmax(0, 1fr);
}
}
/* ============================================================
Valunxt Capital, residential adviser pop-up (.vx-pop, v2, 2026-11-06)
includes/valunxt-residential-popup.php. Wide, light and modern:
left, a bright residential photo with a frosted white card (the
Valunxt Capital mark in its dark version, the line, three points
with plain purple ticks, "In association with" and the Reliant
logo); right, the form on white: a quiet title, a segmented
buy / sell / rent / let out switch whose chosen option lifts as a
white chip, soft filled fields that take a purple underline on
focus, three fields to a row, and the reCAPTCHA beside a Valunxt
purple submit. Valunxt's purple (#9c00dd) is the only accent.
============================================================ */
.vx-modal .modal-dialog {
max-width: min(1140px, calc(100% - 32px));
}
.vx-modal .vx-pop {
position: relative;
width: 100%;
overflow: hidden;
border: 0;
border-radius: 0;
background: #fff;
box-shadow: 0 50px 120px -50px rgba(20, 10, 40, .55);
font-family: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
}
.vx-pop__close {
position: absolute;
top: 18px;
left: 18px;
z-index: 5;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
padding: 0;
border: 1px solid #e7e4ee;
border-radius: 0;
background: #fff;
color: #14101f;
transition: border-color .25s ease, color .25s ease, transform .35s ease;
}
.vx-pop__close:hover,
.vx-pop__close:focus-visible {
border-color: #9c00dd;
color: #9c00dd;
transform: rotate(90deg);
}
.vx-pop__grid {
display: grid;
grid-template-columns: minmax(0, .86fr) minmax(0, 1.34fr);
min-height: 600px;
}
/* ---- brand side: the photo, bright, with the frosted card at its foot ---- */
.vx-pop__brand {
position: relative;
display: flex;
align-items: flex-end;
padding: 22px;
overflow: hidden;
background: #ece9f2;
}
.vx-pop__photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.04);
transition: transform 6s cubic-bezier(.22, 1, .36, 1);
}
.vx-modal.show .vx-pop__photo {
transform: scale(1);
}
.vx-pop__glass {
position: relative;
z-index: 1;
width: 100%;
padding: 26px 26px 22px;
border: 1px solid rgba(255, 255, 255, .7);
background: rgba(255, 255, 255, .78);
-webkit-backdrop-filter: blur(18px) saturate(150%);
backdrop-filter: blur(18px) saturate(150%);
box-shadow: 0 24px 60px -30px rgba(20, 10, 40, .45);
color: #14101f;
}
.vx-pop__logo {
display: flex;
align-items: center;
gap: 12px;
}
.vx-pop__logo img {
width: auto !important;
height: 26px !important;
}
.vx-pop__logo span {
padding-right: 12px;
border-right: 1px solid #cfc9dc;
font-size: 11.5px;
font-weight: 600;
line-height: 1;
letter-spacing: .2em;
text-transform: uppercase;
color: #14101f;
}
.vx-pop__tag {
margin: 18px 0 16px;
font-size: clamp(20px, 1.7vw, 24px);
font-weight: 500;
line-height: 1.28;
letter-spacing: -.015em;
color: #14101f;
}
.vx-pop__points {
margin: 0;
padding: 0;
list-style: none;
}
.vx-pop__points li {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 0;
border-top: 1px solid rgba(20, 16, 31, .1);
font-size: 14px;
line-height: 1.4;
color: #3b3650;
}
.vx-pop__points svg {
flex: 0 0 auto;
width: 17px;
height: 17px;
color: #9c00dd;
}
.vx-pop__assoc {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 14px 0 0;
padding-top: 14px;
border-top: 1px solid rgba(20, 16, 31, .1);
font-size: 12px;
color: #6b6680;
}
.vx-pop__assoc img {
width: auto !important;
height: 30px !important;
}
/* ---- form side ---- */
.vx-pop__form {
display: flex;
flex-direction: column;
padding: 46px 48px 36px;
}
.vx-modal .vx-pop__title {
margin: 0 0 8px 64px;
font-family: inherit;
font-size: clamp(26px, 2.3vw, 34px);
font-weight: 500;
line-height: 1.12;
letter-spacing: -.025em;
color: #14101f;
}
.vx-pop__sub {
max-width: 52ch;
margin: 0 0 26px;
font-size: 15px;
line-height: 1.55;
color: #5e5a6b;
}
.vx-label {
display: block;
margin: 0 0 7px;
padding: 0;
font-size: 13px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: #3b3650;
}
.vx-label small {
font-size: 12px;
font-weight: 400;
color: #8a859a;
}
/* the switch: a soft track; the chosen option lifts as a white chip */
.vx-seg {
margin: 0 0 20px;
padding: 0;
border: 0;
min-width: 0;
}
.vx-seg legend {
float: none;
width: auto;
}
.vx-seg__opts {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 4px;
padding: 4px;
background: #f3f1f7;
}
.vx-seg__opts label {
position: relative;
margin: 0;
}
.vx-seg__opts input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
}
.vx-seg__opts span {
display: block;
padding: 11px 6px;
font-size: 14.5px;
font-weight: 500;
text-align: center;
color: #5e5a6b;
cursor: pointer;
transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.vx-seg__opts label:hover span {
color: #14101f;
}
.vx-seg__opts input:checked + span {
background: #fff;
box-shadow: 0 1px 2px rgba(20, 16, 31, .08), 0 6px 16px -8px rgba(20, 16, 31, .25);
color: #9c00dd;
}
.vx-seg__opts input:focus-visible + span {
outline: 2px solid #9c00dd;
outline-offset: -2px;
}
/* fields: three to a row, softly filled, a purple underline on focus */
.vx-fields {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px 16px;
}
.vx-field--full {
grid-column: 1 / -1;
}
.vx-field input,
.vx-field select,
.vx-field textarea {
display: block;
width: 100%;
height: 50px;
padding: 0 14px;
border: 0;
border-bottom: 1px solid #d9d4e3;
border-radius: 0;
background: #f7f6fa;
box-shadow: inset 0 -1px 0 transparent;
font: inherit;
font-size: 15px;
color: #14101f;
outline: none;
transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.vx-field select {
padding-left: 38px;
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e5a6b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-position: left 12px center;
background-size: 16px;
background-repeat: no-repeat;
}
.vx-field textarea {
height: auto;
min-height: 72px;
padding: 13px 14px;
resize: vertical;
}
.vx-field input::placeholder,
.vx-field textarea::placeholder {
color: #9b96aa;
opacity: 1;
}
.vx-field input:hover,
.vx-field select:hover,
.vx-field textarea:hover {
background-color: #f2f0f7;
}
.vx-field input:focus,
.vx-field select:focus,
.vx-field textarea:focus {
border-bottom-color: #9c00dd;
background-color: #fff;
box-shadow: inset 0 -1px 0 #9c00dd, 0 0 0 1px #ebe6f3;
}
/* the foot: reCAPTCHA and the submit side by side */
.vx-pop__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px 24px;
margin-top: auto;
padding-top: 22px;
}
.vx-pop__captcha {
min-height: 78px;
}
.vx-pop__act {
display: contents;
}
.vx-pop__privacy {
flex: 1 0 100%;
}
.vx-pop__submit {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 18px;
min-width: 240px;
height: 54px;
padding: 0 24px 0 22px;
border: 0;
border-radius: 0;
background: #9c00dd;
font-size: 15px;
font-weight: 500;
color: #fff;
cursor: pointer;
transition: background-color .25s ease, box-shadow .25s ease;
}
.vx-pop__submit svg {
width: 18px;
height: 18px;
transition: transform .3s ease;
}
.vx-pop__submit:hover,
.vx-pop__submit:focus-visible {
background: #7d00b3;
box-shadow: 0 14px 30px -14px rgba(156, 0, 221, .7);
}
.vx-pop__submit:hover svg,
.vx-pop__submit:focus-visible svg {
transform: translateX(-4px);
}
.vx-pop__submit:disabled {
opacity: .6;
cursor: wait;
}
.vx-pop__privacy {
margin: 0;
font-size: 12.5px;
color: #6b6680;
}
.vx-pop__privacy a {
color: #14101f;
text-decoration: underline;
text-underline-offset: 3px;
}
.vx-pop__msg {
margin: 12px 0 0;
font-size: 13.5px;
color: #4a4560;
}
.vx-pop__msg:empty {
display: none;
}
.vx-pop__msg.is-error {
color: #b42318;
}
/* tablets: two fields to a row, the foot stacks */
@media (max-width: 1099px) {
.vx-pop__grid {
grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
}
.vx-fields {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vx-pop__form {
padding: 40px 34px 30px;
}
}
/* phones: the photo becomes a short band with the mark on its glass; one field to a row */
@media (max-width: 767px) {
.vx-pop__grid {
grid-template-columns: minmax(0, 1fr);
min-height: 0;
}
.vx-pop__brand {
min-height: 150px;
padding: 14px;
}
.vx-pop__glass {
width: auto;
padding: 12px 14px;
}
.vx-pop__tag,
.vx-pop__points,
.vx-pop__assoc {
display: none;
}
.vx-pop__logo img {
height: 22px !important;
}
.vx-pop__logo span {
font-size: 10.5px;
}
.vx-pop__close {
top: 12px;
left: 12px;
}
.vx-pop__form {
padding: 24px 20px 22px;
}
.vx-modal .vx-pop__title {
margin-left: 0;
font-size: 24px;
}
.vx-pop__sub {
margin-bottom: 20px;
font-size: 14px;
}
.vx-fields {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.vx-seg__opts span {
padding: 10px 2px;
font-size: 13.5px;
}
.vx-pop__captcha .g-recaptcha {
transform: scale(.92);
transform-origin: 100% 0;
}
.vx-pop__submit {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.vx-pop__photo,
.vx-pop__close,
.vx-pop__submit,
.vx-pop__submit svg,
.vx-field input,
.vx-field select,
.vx-field textarea {
transition: none;
}
}
/* ============================================================
Get in Touch (.rs-cq), v3 (2026-11-06): the Downtown photo shows
through a lighter navy wash (no hatching); the call / email /
office rows sit on one frosted glass card; the RICS, Dubai Land
Department and 49-years marks stand on white tiles at the foot;
the form fields are a little shorter.
============================================================ */
html body .rs-cq .rs-cq__info {
background:
linear-gradient(195deg, rgba(8, 28, 128, .76) 0%, rgba(5, 16, 74, .88) 55%, rgba(4, 12, 60, .96) 100%),
url("../../images/valuation-services/portfolio-downtown-dubai-skyline.webp") center 35% / cover no-repeat;
}
html body .rs-cq .rs-cq__info::after {
background-image: radial-gradient(90% 70% at 0% 0%, rgba(125, 152, 255, .2) 0%, rgba(125, 152, 255, 0) 60%);
}
html body .rs-cq .rs-cq__text {
margin-bottom: 24px;
}
html body .rs-cq .rs-cq__details {
margin: 0;
padding: 4px 22px;
border: 1px solid rgba(255, 255, 255, .22);
background: rgba(255, 255, 255, .08);
-webkit-backdrop-filter: blur(16px) saturate(150%);
backdrop-filter: blur(16px) saturate(150%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
html body .rs-cq .rs-cq__detail {
padding: 14px 0;
}
html body .rs-cq .rs-cq__detail:last-child {
border-bottom: 0;
}
html body .rs-cq .rs-cq__detail::before {
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, .1);
}
html body .rs-cq .rs-cq__detail {
grid-template-columns: 40px minmax(0, 1fr);
}
html body .rs-cq .rs-cq__logos {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: auto 0 0;
padding: 24px 0 0;
list-style: none;
}
html body .rs-cq .rs-cq__logos li {
display: flex;
align-items: center;
justify-content: center;
height: 60px;
padding: 8px 12px;
background: #fff;
}
html body .rs-cq .rs-cq__logos img {
width: auto;
max-width: 100%;
height: auto;
max-height: 40px;
object-fit: contain;
}
html body .rs-cq .rs-cq__logos li:last-child img {
max-height: 46px;
}
html body .rs-cq .rs-cq__field input {
height: 48px;
}
html body .rs-cq .rs-cq__fields {
gap: 16px 18px;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
html body .rs-cq .rs-cq__details {
background: rgba(4, 12, 60, .55);
}
}
@media (max-width: 575px) {
html body .rs-cq .rs-cq__details {
padding: 2px 16px;
}
html body .rs-cq .rs-cq__logos li {
height: 52px;
padding: 6px 8px;
}
}
/* Get in Touch: the form sits centred in its column so both halves balance */
@media (min-width: 992px) {
html body .rs-cq .rs-cq__form {
justify-content: center;
}
}
/* ============================================================
"Explore more", v2 (2026-11-06): a small label, the heading and a
line under it; four cards to a view, each a white card on a hairline
with the photo full width (it eases in on hover), a blue category
tag, the name, one line on what the page covers and an "Explore"
link along the foot so every card ends level. A blue line runs
along the foot of the card pointed at.
============================================================ */
html body .rs-xm .rs-xm__head {
align-items: flex-end;
}
html body .rs-xm .rs-xm__eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
margin: 0 0 12px;
font-size: 12px;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: #0b2dbe;
}
html body .rs-xm .rs-xm__eyebrow::before {
content: "";
width: 32px;
height: 1px;
background: #0b2dbe;
}
html body .rs-xm .rs-xm__sub {
max-width: 40em;
margin: 12px 0 0;
font-size: 16px;
line-height: 1.6;
color: #5b6782;
}
html body .rs-xm .rs-xm__item {
flex-basis: calc((100% - 3 * var(--rs-xm-gap)) / 4);
}
html body .rs-xm .rs-xm__card {
overflow: hidden;
padding-right: 0;
border: 1px solid #e1e6f0;
background: #fff;
transition: border-color .3s ease, box-shadow .3s ease;
}
html body .rs-xm .rs-xm__card::before {
display: none;
}
html body .rs-xm .rs-xm__card::after {
top: auto;
bottom: 0;
width: 100%;
height: 2px;
transform: scaleX(0);
transform-origin: 100% 50%;
}
html body .rs-xm .rs-xm__photo {
aspect-ratio: 16 / 11;
}
html body .rs-xm .rs-xm__photo img {
transition: transform 1s cubic-bezier(.22, 1, .36, 1);
}
html body .rs-xm .rs-xm__body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
padding: 18px 22px 20px;
}
html body .rs-xm .rs-xm__cat {
font-size: 10.5px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: #0b2dbe;
}
html body .rs-xm .rs-xm__name {
display: block;
margin-top: 8px;
font-size: clamp(17px, 1.25vw, 19px);
font-weight: 600;
line-height: 1.3;
letter-spacing: -.01em;
color: #0a1230;
}
html body .rs-xm .rs-xm__line {
margin-top: 6px;
font-size: 14px;
line-height: 1.5;
color: #5b6782;
}
html body .rs-xm .rs-xm__go {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: auto;
padding-top: 16px;
font-size: 12px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: #0b2dbe;
}
html body .rs-xm .rs-xm__go svg {
width: 16px;
height: 16px;
transition: transform .3s ease;
}
html body .rs-xm .rs-xm__card:hover,
html body .rs-xm .rs-xm__card:focus-visible {
border-color: #c7d3ef;
box-shadow: 0 24px 44px -32px rgba(10, 18, 48, .4);
}
html body .rs-xm .rs-xm__card:hover::after,
html body .rs-xm .rs-xm__card:focus-visible::after {
transform: scaleX(1);
}
html body .rs-xm .rs-xm__card:hover .rs-xm__photo img,
html body .rs-xm .rs-xm__card:focus-visible .rs-xm__photo img {
transform: scale(1.05);
}
html body .rs-xm .rs-xm__card:hover .rs-xm__name,
html body .rs-xm .rs-xm__card:focus-visible .rs-xm__name {
color: #0b2dbe;
}
html body .rs-xm .rs-xm__card:hover .rs-xm__go svg,
html body .rs-xm .rs-xm__card:focus-visible .rs-xm__go svg {
transform: translateX(-4px);
}
@media (max-width: 1199px) {
html body .rs-xm .rs-xm__item {
flex-basis: calc((100% - 2 * var(--rs-xm-gap)) / 3);
}
}
@media (max-width: 767px) {
html body .rs-xm .rs-xm__item {
flex-basis: calc((100% - var(--rs-xm-gap)) / 2);
}
html body .rs-xm .rs-xm__head {
align-items: flex-start;
flex-direction: column;
}
}
@media (max-width: 575px) {
html body .rs-xm .rs-xm__item {
flex-basis: 78%;
}
html body .rs-xm .rs-xm__sub {
font-size: 15px;
}
html body .rs-xm .rs-xm__body {
padding: 16px 18px 18px;
}
}
@media (prefers-reduced-motion: reduce) {
html body .rs-xm .rs-xm__photo img,
html body .rs-xm .rs-xm__go svg,
html body .rs-xm .rs-xm__card {
transition: none;
}
}
/* "Explore more": less space above and below (2026-11-06) */
html body .rs-xm {
padding: clamp(40px, 4.4vw, 64px) 0;
}
html body .rs-xm .rs-xm__head {
margin-bottom: clamp(22px, 2.2vw, 32px);
}
/* Get in Touch, logos v2 (2026-11-06): the photo shows through a lighter wash; the RICS, Dubai Land
Department and 49-years marks in white on one frosted strip with hairline dividers */
html body .rs-cq .rs-cq__info {
background:
linear-gradient(190deg, rgba(8, 28, 128, .52) 0%, rgba(5, 16, 74, .7) 50%, rgba(4, 12, 60, .92) 100%),
url("../../images/valuation-services/portfolio-downtown-dubai-skyline.webp") center 35% / cover no-repeat;
}
html body .rs-cq .rs-cq__logos-wrap {
margin-top: auto;
padding-top: 24px;
}
html body .rs-cq .rs-cq__logos-label {
display: block;
margin-bottom: 10px;
font-size: 11px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255, 255, 255, .72);
}
html body .rs-cq .rs-cq__logos {
gap: 0;
margin: 0;
padding: 0;
border: 1px solid rgba(255, 255, 255, .26);
background: rgba(255, 255, 255, .1);
-webkit-backdrop-filter: blur(14px) saturate(140%);
backdrop-filter: blur(14px) saturate(140%);
}
html body .rs-cq .rs-cq__logos li {
height: 80px;
padding: 12px 18px;
background: transparent;
}
html body .rs-cq .rs-cq__logos li + li {
border-right: 1px solid rgba(255, 255, 255, .2);
}
html body .rs-cq .rs-cq__logos img {
max-height: 34px;
}
html body .rs-cq .rs-cq__logos img.is-mono {
max-height: 32px;
filter: brightness(0) invert(1);
}
html body .rs-cq .rs-cq__logos li:last-child img {
max-height: 56px;
}
@media (max-width: 575px) {
html body .rs-cq .rs-cq__logos li {
height: 66px;
padding: 10px;
}
html body .rs-cq .rs-cq__logos li:last-child img {
max-height: 46px;
}
}
/* Get in Touch: the white RICS and Dubai Land Department marks, a touch larger */
html body .rs-cq .rs-cq__logos img {
max-height: 40px;
}
html body .rs-cq .rs-cq__logos img.is-dld {
max-height: 34px;
}
html body .rs-cq .rs-cq__logos li:first-child img {
max-height: 50px;
}
/* ============================================================
Mobile menu (.rs-mnav, 2026-11-06; markup and script in
includes/common-footer.php). A white full-screen panel: logo and
a square close button; the sections in large type on hairlines,
fading in one after another; About Us, Services and Insights
slide in their own screen (Back, title, an overview link, then
grouped links); a fixed foot with Book a Valuation, Get in Touch,
the phone, email and social links. The page behind is locked.
============================================================ */
.rs-mnav {
--mn-ink: #0a1230;
--mn-blue: #0b2dbe;
--mn-line: #e1e6f0;
--mn-ease: cubic-bezier(.22, 1, .36, 1);
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
flex-direction: column;
height: 100vh;
height: 100dvh;
background: #fff;
color: var(--mn-ink);
font-family: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
opacity: 0;
transform: translateY(-8px);
transition: opacity .3s ease, transform .4s var(--mn-ease);
}
.rs-mnav[hidden] {
display: none;
}
.rs-mnav.is-open {
opacity: 1;
transform: none;
}
html.rs-mnav-open,
html.rs-mnav-open body {
overflow: hidden;
}
.rs-mnav__bar {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: space-between;
height: 76px;
padding: 0 20px;
border-bottom: 1px solid var(--mn-line);
}
.rs-mnav__logo img {
display: block;
width: auto;
height: 46px;
}
.rs-mnav__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
padding: 0;
border: 1px solid #d5ddef;
border-radius: 0;
background: #fff;
color: var(--mn-ink);
transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.rs-mnav__close svg {
width: 22px;
height: 22px;
}
.rs-mnav__close:hover,
.rs-mnav__close:focus-visible {
border-color: var(--mn-ink);
background: var(--mn-ink);
color: #fff;
}
.rs-mnav__stage {
position: relative;
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
.rs-mnav__screen {
position: absolute;
inset: 0;
padding: 8px 20px 28px;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
background: #fff;
transition: transform .38s var(--mn-ease), opacity .3s ease;
}
.rs-mnav__screen[hidden] {
display: none;
}
.rs-mnav__screen.is-right {
opacity: 0;
transform: translateX(-100%);
}
.rs-mnav__screen.is-left {
opacity: 0;
transform: translateX(28%);
}
.rs-mnav__list,
.rs-mnav__sublist {
margin: 0;
padding: 0;
list-style: none;
}
.rs-mnav__item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
min-height: 66px;
padding: 0 2px;
border: 0;
border-bottom: 1px solid var(--mn-line);
border-radius: 0;
background: none;
font: inherit;
font-size: 26px;
font-weight: 500;
line-height: 1.15;
letter-spacing: -.02em;
color: var(--mn-ink);
text-align: right;
text-decoration: none;
cursor: pointer;
transition: color .2s ease;
}
.rs-mnav__item svg {
flex: 0 0 auto;
width: 22px;
height: 22px;
color: var(--mn-blue);
transition: transform .25s ease;
}
.rs-mnav__item:hover,
.rs-mnav__item:focus-visible,
.rs-mnav__item:active {
color: var(--mn-blue);
}
.rs-mnav__item:active svg {
transform: translateX(-3px);
}
.rs-mnav.is-open .rs-mnav__list li {
animation: rs-mnav-in .55s var(--mn-ease) both;
animation-delay: calc(var(--i, 0) * 45ms + 90ms);
}
@keyframes rs-mnav-in {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: none;
}
}
/* section screens */
.rs-mnav__back {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 46px;
margin: 4px -6px 0 0;
padding: 0 2px 0 8px;
border: 0;
background: none;
font: inherit;
font-size: 14px;
font-weight: 600;
color: #5b6782;
cursor: pointer;
}
.rs-mnav__back svg {
width: 20px;
height: 20px;
}
.rs-mnav__back:hover,
.rs-mnav__back:focus-visible {
color: var(--mn-blue);
}
.rs-mnav__subtitle {
margin: 4px 0 16px;
font-size: 32px;
font-weight: 500;
line-height: 1.1;
letter-spacing: -.025em;
color: var(--mn-ink);
}
.rs-mnav__over {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 56px;
padding: 0 18px;
background: #f4f6fb;
font-size: 16px;
font-weight: 600;
color: var(--mn-blue);
text-decoration: none;
}
.rs-mnav__over svg {
width: 20px;
height: 20px;
}
.rs-mnav__group {
margin: 26px 0 4px;
font-size: 12px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: #6b7690;
}
.rs-mnav__over + .rs-mnav__sublist {
margin-top: 8px;
}
.rs-mnav__sublist a {
display: flex;
align-items: center;
min-height: 50px;
border-bottom: 1px solid #eef1f6;
font-size: 17px;
line-height: 1.3;
color: var(--mn-ink);
text-decoration: none;
}
.rs-mnav__sublist a:hover,
.rs-mnav__sublist a:focus-visible,
.rs-mnav__sublist a:active {
color: var(--mn-blue);
}
/* foot */
.rs-mnav__foot {
flex: 0 0 auto;
padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--mn-line);
background: #fff;
}
.rs-mnav__ctas {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.rs-mnav__btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 52px;
padding: 0 12px;
border: 1px solid var(--mn-ink);
border-radius: 0;
font-size: 14.5px;
font-weight: 600;
letter-spacing: .02em;
text-decoration: none;
transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.rs-mnav__btn svg {
width: 18px;
height: 18px;
}
.rs-mnav__btn--solid {
border-color: var(--mn-blue);
background: var(--mn-blue);
color: #fff;
}
.rs-mnav__btn--solid:hover,
.rs-mnav__btn--solid:focus-visible {
border-color: #06176e;
background: #06176e;
color: #fff;
}
.rs-mnav__btn--line {
background: #fff;
color: var(--mn-ink);
}
.rs-mnav__btn--line:hover,
.rs-mnav__btn--line:focus-visible {
background: var(--mn-ink);
color: #fff;
}
.rs-mnav__contact {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 4px 14px;
margin-top: 14px;
font-size: 14px;
}
.rs-mnav__contact a {
color: var(--mn-ink);
text-decoration: none;
}
.rs-mnav__contact a:hover {
color: var(--mn-blue);
}
.rs-mnav__social {
display: flex;
gap: 8px;
margin: 12px 0 0;
padding: 0;
list-style: none;
}
.rs-mnav__social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid var(--mn-line);
color: var(--mn-ink);
transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.rs-mnav__social svg {
width: 18px;
height: 18px;
}
.rs-mnav__social a:hover,
.rs-mnav__social a:focus-visible {
border-color: var(--mn-blue);
background: var(--mn-blue);
color: #fff;
}
/* short screens: a tighter foot */
@media (max-height: 640px) {
.rs-mnav__item {
min-height: 56px;
font-size: 23px;
}
.rs-mnav__social {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.rs-mnav,
.rs-mnav__screen {
transition: none;
}
.rs-mnav.is-open .rs-mnav__list li {
animation: none;
}
}
/* the old drawer is gone; keep any of its leftover styles from showing */
.mobile-nav-wrapper {
display: none !important;
}
/* mobile menu buttons: keep each label on one line */
.rs-mnav__btn {
gap: 8px;
padding: 0 10px;
font-size: 14px;
letter-spacing: 0;
white-space: nowrap;
}
.rs-mnav__btn svg {
width: 16px;
height: 16px;
}
/* ==========================================================================
MOBILE PASS (2026-11-06): header and menu button, home sections, team rows,
footer, and the scroll reveal. Phones and small tablets only.
========================================================================== */
/* ---- header: a slimmer bar, a smaller mark and a "Menu" button with two even lines ---- */
@media (max-width: 1024px) {
html body header.main-header nav.main-menu {
padding-top: 12px;
padding-bottom: 12px;
}
html body header.main-header .main-menu-logo img {
width: 112px !important;
max-width: 112px !important;
}
html body .header-menu-collaps {
position: relative;
display: inline-flex !important;
flex-direction: column;
align-items: flex-end;
justify-content: center;
row-gap: 5px !important;
height: 44px;
padding: 0 64px 0 14px;
border: 1px solid rgba(255, 255, 255, .6);
cursor: pointer;
transition: border-color .25s ease, background-color .25s ease;
}
html body .header-menu-collaps::before {
content: "Menu";
position: absolute;
top: 50%;
right: 14px;
transform: translateY(-50%);
font-family: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: 600;
line-height: 1;
letter-spacing: .05em;
color: #fff;
}
html body .header-menu-collaps span,
html body .header-menu-collaps span:nth-child(2) {
width: 18px !important;
height: 1.5px !important;
border-radius: 0 !important;
background-color: #fff !important;
}
html body .header-menu-collaps span:nth-child(3) {
display: none !important;
}
html body .main-header.is-scrolled .header-menu-collaps,
html body .main-header.white-bg .header-menu-collaps {
border-color: #cfd6e4;
}
html body .main-header.is-scrolled .header-menu-collaps::before,
html body .main-header.white-bg .header-menu-collaps::before {
color: #0a1230;
}
html body .main-header.is-scrolled .header-menu-collaps span,
html body .main-header.white-bg .header-menu-collaps span {
background-color: #0a1230 !important;
}
}
/* ---- home, Our Approach: the three columns stack as boxes on phones (no sideways row) ---- */
@media (max-width: 575px) {
html body .rs-qs {
padding: 28px 20px;
}
html body .rs-qs > :not(.rs-qs__tasks) {
padding-left: 0;
}
html body .rs-qs .rs-qs__tasks {
display: grid;
grid-auto-flow: row;
grid-template-columns: minmax(0, 1fr);
grid-auto-columns: auto;
gap: 12px;
overflow: visible;
scroll-snap-type: none;
}
html body .rs-qs .rs-qs__task {
display: grid;
grid-template-columns: 104px minmax(0, 1fr);
grid-template-areas:
"media label"
"media text"
"media link";
grid-template-rows: auto 1fr auto;
column-gap: 14px;
row-gap: 6px;
padding: 12px;
border: 1px solid rgba(255, 255, 255, .22);
background: rgba(255, 255, 255, .06);
}
html body .rs-qs .rs-qs__task > .rs-qs__label {
grid-area: label;
margin: 0;
}
html body .rs-qs .rs-qs__task > .rs-qs__text {
grid-area: text;
display: -webkit-box;
margin: 0;
overflow: hidden;
font-size: 13.5px;
line-height: 1.5;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}
html body .rs-qs .rs-qs__task > .rs-qs__media {
grid-area: media;
width: 100%;
height: 100%;
min-height: 128px;
}
html body .rs-qs .rs-qs__task > .rs-qs__link {
grid-area: link;
margin: 0;
font-size: 13px;
}
}
/* ---- home, Our Services: compact boxes on phones, photo left and the copy on white ---- */
@media (max-width: 767px) {
html body .rs-sp {
display: grid;
gap: 10px;
height: auto;
}
html body .rs-sp .rs-sp__panel,
html body .rs-sp .rs-sp__panel.is-open {
display: grid;
grid-template-columns: 116px minmax(0, 1fr);
height: auto;
min-height: 136px;
border: 1px solid #e1e6f0;
background: #fff;
color: #0a1230;
}
html body .rs-sp .rs-sp__panel::after,
html body .rs-sp .rs-sp__glass {
display: none;
}
html body .rs-sp .rs-sp__img {
position: relative;
inset: auto;
grid-column: 1;
grid-row: 1;
width: 100%;
height: 100%;
}
html body .rs-sp .rs-sp__chip {
top: 8px;
right: 8px;
padding: 4px 6px;
border: 0;
background: #fff;
font-size: 10.5px;
color: #0b2dbe;
}
html body .rs-sp .rs-sp__foot {
position: static;
grid-column: 2;
grid-row: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
padding: 14px 16px;
}
html body .rs-sp .rs-sp__title {
font-size: 18px;
line-height: 1.25;
color: #0a1230;
}
html body .rs-sp .rs-sp__text,
html body .rs-sp .rs-sp__panel.is-open .rs-sp__text {
display: -webkit-box;
max-height: none;
margin-top: 2px;
overflow: hidden;
font-size: 13.5px;
line-height: 1.5;
color: #4a5568;
opacity: 1;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
html body .rs-sp .rs-sp__btn,
html body .rs-sp .rs-sp__panel.is-open .rs-sp__btn {
align-self: flex-start;
margin-top: 6px;
padding: 0;
border: 0;
background: none;
font-size: 13px;
font-weight: 600;
color: #0b2dbe;
}
}
/* ---- home, News & Insights: two cards to a screen, swiped sideways, each snapping into place ---- */
@media (max-width: 767px) {
html body .rs-hin .rs-rc-grid {
display: grid;
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: calc((100% - 12px) / 2);
gap: 12px;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
html body .rs-hin .rs-rc-grid::-webkit-scrollbar {
display: none;
}
html body .rs-hin .rs-rc-grid > * {
min-width: 0;
scroll-snap-align: start;
}
html body .rs-hin .rs-rc__title {
font-size: 14.5px;
line-height: 1.35;
}
html body .rs-hin .rs-rc__body {
padding: 12px;
}
html body .rs-hin .rs-rc__meta,
html body .rs-hin .rs-rc__more {
font-size: 11.5px;
}
}
/* ---- team rows: a still two-column grid on phones instead of a sideways row ---- */
@media (max-width: 639px) {
html body .vpa-tp {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
grid-auto-flow: row !important;
grid-auto-columns: auto !important;
gap: 10px !important;
margin-inline: 0 !important;
padding: 0 !important;
overflow: visible !important;
scroll-snap-type: none !important;
}
html body .vpa-tp .vpa-tp__item {
width: auto !important;
min-width: 0 !important;
flex: none !important;
}
html body .vpa-tp .vpa-tp__body {
padding: 10px 10px 12px;
}
html body .vpa-tp .vpa-tp__name {
font-size: 15px;
}
html body .vpa-tp .vpa-tp__title {
font-size: 9.5px;
letter-spacing: .06em;
}
html body .vpa-tp .vpa-tp__dept {
font-size: 12px;
}
}
/* ---- footer on phones: logo and RICS mark side by side, the links as a ruled two-column grid,
services as a ruled list, square social buttons beside the Valunxt mark, quieter fine print ---- */
@media (max-width: 767px) {
html body .rs-ft .rs-ft__inner {
padding: 36px 20px 24px;
}
html body .rs-ft .rs-ft__top {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 22px;
}
html body .rs-ft .rs-ft__brand {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
html body .rs-ft .rs-ft__logo img {
width: 124px;
height: auto;
}
html body .rs-ft .rs-ft__rics img {
width: auto;
height: 34px;
}
html body .rs-ft .rs-ft__nav {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
margin: 0;
padding: 0;
border-top: 1px solid rgba(255, 255, 255, .2);
}
html body .rs-ft .rs-ft__nav li {
border-bottom: 1px solid rgba(255, 255, 255, .2);
}
html body .rs-ft .rs-ft__nav li:nth-child(odd) {
border-left: 1px solid rgba(255, 255, 255, .2);
}
html body .rs-ft .rs-ft__nav a {
display: flex;
align-items: center;
min-height: 50px;
padding: 0 14px;
font-size: 15px;
font-weight: 500;
}
html body .rs-ft .rs-ft__valunxt {
justify-self: start;
}
html body .rs-ft .rs-ft__valunxt img {
width: 108px;
height: auto;
}
html body .rs-ft .rs-ft__mid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 20px;
margin-top: 26px;
}
html body .rs-ft .rs-ft__services {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
margin: 0;
padding: 0;
}
html body .rs-ft .rs-ft__services a {
display: flex;
align-items: center;
min-height: 44px;
border-bottom: 1px solid rgba(255, 255, 255, .14);
font-size: 14px;
}
html body .rs-ft .rs-ft__social {
display: flex;
gap: 8px;
}
html body .rs-ft .rs-ft__social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border: 1px solid rgba(255, 255, 255, .3);
}
html body .rs-ft .rs-ft__disclaimer {
margin-top: 26px;
font-size: 11.5px;
line-height: 1.6;
opacity: .78;
}
html body .rs-ft .rs-ft__bottom {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid rgba(255, 255, 255, .2);
font-size: 12px;
}
}
/* ---- scroll reveal on phones (script in common-footer.php): content blocks fade up gently as they
come into view; nothing is hidden unless the script is running, and never with reduced motion ---- */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
html.rs-rv-on .rs-rv {
opacity: 0;
translate: 0 18px;
transition: opacity .6s cubic-bezier(.22, 1, .36, 1), translate .7s cubic-bezier(.22, 1, .36, 1);
transition-delay: var(--rv-d, 0ms);
}
html.rs-rv-on .rs-rv.is-in {
opacity: 1;
translate: 0 0;
}
}
/* mobile pass, fixes: the menu button sizes to its label; the footer shows all six links, the services
left-aligned and the social icons at a quieter size */
@media (max-width: 1024px) {
html body .header-menu-collaps {
width: auto !important;
min-width: 98px;
box-sizing: border-box;
}
}
@media (max-width: 767px) {
html body .rs-ft .rs-ft__nav li.rs-ft__nav-people {
display: list-item !important;
}
html body .rs-ft .rs-ft__nav li {
list-style: none;
}
html body .rs-ft .rs-ft__services-wrap,
html body .rs-ft .rs-ft__services li {
width: 100%;
text-align: right;
}
html body .rs-ft .rs-ft__services a {
justify-content: flex-start;
width: 100%;
}
html body .rs-ft .rs-ft__social {
justify-content: flex-start;
margin: 0;
padding: 0;
list-style: none;
}
html body .rs-ft .rs-ft__social svg {
width: 18px;
height: 18px;
fill: currentColor;
}
}
@media (max-width: 767px) {
html body .rs-ft .rs-ft__services li,
html body .rs-ft .rs-ft__services li:last-child {
justify-self: stretch;
width: 100% !important;
margin: 0 !important;
text-align: right !important;
}
html body .rs-ft .rs-ft__services li:last-child a {
justify-content: flex-start !important;
}
}
/* phones: every sideways row snaps each card firmly into place, so none rests half-scrolled (2026-11-06) */
@media (max-width: 767px) {
html body .rs-xm__row,
html body .rs-sx-feat__grid,
html body .rs-svs__track,
html body .ab-team__track,
html body .vpa-csx__row,
html body .frv-why,
html body .frv-process,
html body .frv-bento {
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
}
html body .rs-xm__row > *,
html body .rs-sx-feat__grid > *,
html body .rs-svs__track > *,
html body .ab-team__track > *,
html body .vpa-csx__row > *,
html body .frv-why > *,
html body .frv-process > *,
html body .frv-bento > * {
scroll-snap-align: start;
scroll-snap-stop: always;
}
}
@media (max-width: 767px) {
html body .vpa-csx__list,
html body .vpa-csx__track,
html body .vpa-csx__rail {
scroll-snap-type: x mandatory;
}
html body .vpa-csx__item {
scroll-snap-align: start;
scroll-snap-stop: always;
}
}
/* ============================================================
Subscribe band v2, "The Reliant Market Briefing" (2026-11-06;
includes/subscribe-section.php): white with a fine top rule; the
newest report's cover on the left, the title, one line and a
"Latest:" link, then the email field and the square button with a
short note under it. Phones: the cover is hidden, one column.
============================================================ */
html body .rs-sub.rs-sub--v2 {
padding: clamp(32px, 3.6vw, 52px) 0 !important;
border-top: 1px solid #e1e6f0;
background: #fff !important;
}
html body .rs-sub--v2 .rs-sub__banner {
display: grid;
grid-template-columns: minmax(0, 220px) minmax(0, 1fr) minmax(0, .95fr);
align-items: center;
gap: clamp(24px, 3.4vw, 56px);
padding: 0;
border: 0;
background: none;
box-shadow: none;
}
html body .rs-sub--v2 .rs-sub__media {
display: block;
}
html body .rs-sub--v2 .rs-sub__media img {
display: block;
width: 100%;
height: auto;
transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
html body .rs-sub--v2 .rs-sub__media:hover img {
transform: translateY(-4px);
}
html body .rs-sub--v2 .rs-sub__title {
margin: 0;
font-family: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
font-size: clamp(22px, 1.9vw, 28px);
font-weight: 500;
line-height: 1.2;
letter-spacing: -.015em;
color: #0a1230;
}
html body .rs-sub--v2 .rs-sub__text {
max-width: 30em;
margin: 10px 0 0;
font-size: 15px;
line-height: 1.6;
color: #4a5568;
}
html body .rs-sub--v2 .rs-sub__latest {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 14px;
font-size: 14px;
font-weight: 600;
color: #0b2dbe;
text-decoration: none;
}
html body .rs-sub--v2 .rs-sub__latest span {
font-weight: 500;
color: #5b6782;
}
html body .rs-sub--v2 .rs-sub__latest svg {
width: 16px;
height: 16px;
transition: transform .3s ease;
}
html body .rs-sub--v2 .rs-sub__latest:hover svg {
transform: translateX(-3px);
}
html body .rs-sub--v2 .rs-sub__form {
display: block;
width: 100%;
}
html body .rs-sub--v2 .rs-sub__label {
position: static;
display: block;
width: auto;
height: auto;
margin: 0 0 8px;
overflow: visible;
clip: auto;
font-size: 11.5px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: #5b6782;
}
html body .rs-sub--v2 .rs-sub__field {
display: flex;
align-items: stretch;
}
html body .rs-sub--v2 .rs-sub__input {
flex: 1 1 auto;
min-width: 0;
height: 54px;
padding: 0 16px;
border: 1px solid #cfd6e4;
border-left: 0;
border-radius: 0;
background: #f7f9fd;
font-size: 15px;
color: #0a1230;
outline: none;
}
html body .rs-sub--v2 .rs-sub__input:focus {
border-color: #0b2dbe;
background: #fff;
}
html body .rs-sub--v2 .rs-sub__note {
margin: 10px 0 0;
font-size: 12.5px;
color: #6b7690;
}
@media (max-width: 991px) {
html body .rs-sub--v2 .rs-sub__banner {
grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
}
html body .rs-sub--v2 .rs-sub__form {
grid-column: 1 / -1;
}
}
@media (max-width: 575px) {
html body .rs-sub--v2 .rs-sub__banner {
grid-template-columns: minmax(0, 1fr);
gap: 18px;
}
html body .rs-sub--v2 .rs-sub__media {
display: none;
}
html body .rs-sub--v2 .rs-sub__input {
height: 50px;
}
}
/* subscribe v2: beat the older footer-band flex rule */
html body .rs-sub.rs-sub--v2 .rs-sub__banner {
display: grid !important;
flex-direction: initial !important;
gap: clamp(24px, 3.4vw, 56px) !important;
padding: 0 !important;
}
html body .rs-sub.rs-sub--v2 .rs-sub__media,
html body .rs-sub.rs-sub--v2 .rs-sub__copy,
html body .rs-sub.rs-sub--v2 .rs-sub__form {
min-width: 0;
max-width: none !important;
flex: none !important;
}
@media (max-width: 575px) {
html body .rs-sub.rs-sub--v2 .rs-sub__banner {
gap: 18px !important;
}
}
/* ---- subscribe band v2: a phone showing the briefing email (2026-11-06). The phone rises from the
band's foot with its lower part tucked away, tilted slightly, and lifts a little on hover. Desktop
only; tablets and phones keep the copy and form. ---- */
@media (min-width: 992px) {
html body .rs-sub.rs-sub--v2 {
padding: 0 !important;
overflow: hidden;
}
html body .rs-sub.rs-sub--v2 .rs-sub__banner {
grid-template-columns: minmax(0, 250px) minmax(0, 1fr) minmax(0, .95fr);
align-items: center;
min-height: 280px;
}
html body .rs-sub--v2 .rs-sub__copy,
html body .rs-sub--v2 .rs-sub__form {
padding: 44px 0;
}
html body .rs-sub.rs-sub--v2 .rs-sub__media {
display: flex;
align-self: end;
justify-content: center;
height: 262px;
padding-top: 28px;
overflow: hidden;
}
}
@media (max-width: 991px) {
html body .rs-sub.rs-sub--v2 .rs-sub__media {
display: none;
}
html body .rs-sub.rs-sub--v2 .rs-sub__banner {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
html body .rs-sub--v2 .rs-sub__form {
grid-column: auto;
}
}
@media (max-width: 767px) {
html body .rs-sub.rs-sub--v2 .rs-sub__banner {
grid-template-columns: minmax(0, 1fr);
}
}
.rs-ph {
flex: none;
width: 212px;
height: 430px;
padding: 9px;
border-radius: 38px;
background: #0d1426;
box-shadow: 0 34px 60px -24px rgba(10, 18, 48, .5), inset 0 0 0 1.5px #2b3554;
transform: rotate(-4deg);
transform-origin: 50% 100%;
transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}
.rs-sub__banner:hover .rs-ph {
transform: rotate(-4deg) translateY(-8px);
}
.rs-ph__screen {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
border-radius: 30px;
background: #fff;
font-family: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
color: #0a1230;
}
.rs-ph__status {
display: flex;
align-items: center;
justify-content: space-between;
height: 30px;
padding: 6px 18px 0;
font-size: 10px;
font-weight: 600;
}
.rs-ph__island {
width: 62px;
height: 18px;
border-radius: 10px;
background: #0d1426;
}
.rs-ph__sig {
display: inline-flex;
align-items: flex-end;
gap: 2px;
}
.rs-ph__sig b {
display: block;
width: 3px;
background: #0a1230;
}
.rs-ph__sig b:nth-child(1) { height: 4px; }
.rs-ph__sig b:nth-child(2) { height: 6px; }
.rs-ph__sig b:nth-child(3) { height: 8px; }
.rs-ph__mail {
padding: 8px 13px 12px;
}
.rs-ph__from {
display: flex;
align-items: center;
gap: 8px;
padding-bottom: 8px;
border-bottom: 1px solid #eef1f6;
}
.rs-ph__from img {
width: auto;
height: 22px;
}
.rs-ph__from span {
display: flex;
flex-direction: column;
font-size: 9.5px;
font-weight: 600;
line-height: 1.25;
}
.rs-ph__from small {
font-size: 8.5px;
font-weight: 500;
color: #6b7690;
}
.rs-ph__title {
margin: 9px 0 7px;
font-size: 13px;
font-weight: 600;
line-height: 1.25;
letter-spacing: -.01em;
}
.rs-ph__hero {
height: 74px;
overflow: hidden;
}
.rs-ph__hero img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.rs-ph__kicker {
margin: 10px 0 2px;
font-size: 8.5px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: #0b2dbe;
}
.rs-ph__list {
margin: 0;
padding: 0;
list-style: none;
}
.rs-ph__list li {
display: -webkit-box;
padding: 6px 0;
overflow: hidden;
border-bottom: 1px solid #eef1f6;
font-size: 10.5px;
line-height: 1.35;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.rs-ph__btn {
display: block;
margin-top: 10px;
padding: 8px 0;
background: #0b2dbe;
font-size: 10px;
font-weight: 600;
text-align: center;
color: #fff;
}
@media (prefers-reduced-motion: reduce) {
.rs-ph {
transition: none;
}
}
html body .rs-ph .rs-ph__from img {
width: auto !important;
max-width: 64px !important;
height: 22px !important;
object-fit: contain;
}
/* ---- subscribe band: the whole phone, moving (2026-11-06). The full phone shows, floats gently, and
the briefing email inside scrolls slowly from top to foot and back. Still with reduced motion. ---- */
@media (min-width: 992px) {
html body .rs-sub.rs-sub--v2 .rs-sub__banner {
min-height: 0;
}
html body .rs-sub.rs-sub--v2 .rs-sub__media {
align-self: center;
height: auto;
padding: 34px 0;
overflow: visible;
}
}
html body .rs-sub .rs-ph {
width: 186px;
height: 378px;
padding: 8px;
border-radius: 34px;
animation: rs-ph-float 7s ease-in-out infinite;
}
.rs-sub__banner:hover .rs-ph {
transform: rotate(-4deg);
}
@keyframes rs-ph-float {
0%,
100% {
transform: rotate(-4deg) translateY(0);
}
50% {
transform: rotate(-3deg) translateY(-10px);
}
}
html body .rs-sub .rs-ph__screen {
position: relative;
border-radius: 27px;
}
html body .rs-sub .rs-ph__status {
position: relative;
z-index: 1;
flex: none;
background: #fff;
}
html body .rs-sub .rs-ph__mail {
animation: rs-ph-scroll 16s ease-in-out 1.5s infinite alternate;
}
@keyframes rs-ph-scroll {
0%,
12% {
transform: translateY(0);
}
88%,
100% {
transform: translateY(-150px);
}
}
.rs-ph__stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
}
.rs-ph__stats span {
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px;
background: #f4f6fb;
font-size: 8.5px;
color: #5b6782;
}
.rs-ph__stats b {
font-size: 15px;
font-weight: 600;
letter-spacing: -.02em;
color: #0b2dbe;
}
.rs-ph__sign {
margin: 12px 0 0;
padding-top: 8px;
border-top: 1px solid #eef1f6;
font-size: 8.5px;
text-align: center;
color: #6b7690;
}
@media (prefers-reduced-motion: reduce) {
html body .rs-sub .rs-ph,
html body .rs-sub .rs-ph__mail {
animation: none;
}
}
/* workflow v3: the markers sit centred on the line */
html body .vpa-wfx .vpa-wfx__ico {
display: block;
}
html body .vpa-wfx .vpa-wfx__steps::before {
top: 5px;
}
/* ============================================================
Get in Touch (.rs-cq), v4 (2026-11-06): no solid blue. The whole
box is a Downtown Dubai photo in natural colour that drifts slowly
(a gentle zoom), under a soft neutral shade. On it, the details sit
on a frosted dark-glass panel and the form on a bright frosted-glass
card. The "Get in Touch" label loses its dash.
============================================================ */
html body .rs-cq .rs-cq__box {
position: relative;
isolation: isolate;
gap: clamp(14px, 2vw, 24px);
padding: clamp(14px, 2.4vw, 32px);
overflow: hidden;
background: #0d1426;
box-shadow: 0 40px 80px -50px rgba(10, 18, 48, .55);
}
html body .rs-cq .rs-cq__box::before {
content: "";
position: absolute;
inset: -3%;
z-index: -2;
background: url("../../images/valuation-services/portfolio-downtown-dubai-skyline.webp") center 40% / cover no-repeat;
animation: rs-cq-drift 26s ease-in-out infinite alternate;
}
html body .rs-cq .rs-cq__box::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(245deg, rgba(8, 12, 28, .55) 0%, rgba(8, 12, 28, .2) 55%, rgba(8, 12, 28, .38) 100%);
pointer-events: none;
}
@keyframes rs-cq-drift {
from {
transform: scale(1) translate3d(0, 0, 0);
}
to {
transform: scale(1.08) translate3d(1.5%, -1%, 0);
}
}
html body .rs-cq .rs-cq__info {
border: 1px solid rgba(255, 255, 255, .24);
background: rgba(10, 16, 40, .34);
-webkit-backdrop-filter: blur(18px) saturate(140%);
backdrop-filter: blur(18px) saturate(140%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
html body .rs-cq .rs-cq__info::before,
html body .rs-cq .rs-cq__info::after {
display: none;
}
html body .rs-cq .rs-cq__eyebrow::before {
display: none;
}
html body .rs-cq .rs-cq__eyebrow {
color: rgba(255, 255, 255, .78);
}
html body .rs-cq .rs-cq__details {
background: rgba(255, 255, 255, .07);
}
html body .rs-cq .rs-cq__form {
border: 1px solid rgba(255, 255, 255, .65);
background: rgba(255, 255, 255, .86);
-webkit-backdrop-filter: blur(22px) saturate(160%);
backdrop-filter: blur(22px) saturate(160%);
box-shadow: 0 30px 60px -34px rgba(4, 8, 20, .55), inset 0 1px 0 rgba(255, 255, 255, .9);
}
html body .rs-cq .rs-cq__field input {
background: rgba(255, 255, 255, .7);
}
html body .rs-cq .rs-cq__field input:focus {
background: #fff;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
html body .rs-cq .rs-cq__info {
background: rgba(10, 16, 40, .72);
}
html body .rs-cq .rs-cq__form {
background: rgba(255, 255, 255, .97);
}
}
@media (max-width: 991px) {
html body .rs-cq .rs-cq__form {
border-right: 1px solid rgba(255, 255, 255, .65);
border-top: 1px solid rgba(255, 255, 255, .65);
}
}
@media (max-width: 575px) {
html body .rs-cq .rs-cq__box {
padding: 10px;
gap: 10px;
}
}
@media (prefers-reduced-motion: reduce) {
html body .rs-cq .rs-cq__box::before {
animation: none;
}
}
/* subscribe band: back to its compact height (2026-11-06). The phone rises from the band's foot with
its lower part tucked away (it still floats, and the email inside still scrolls), and its rounded
corners are kept even on the home page, which squares every other corner. */
@media (min-width: 992px) {
html body .rs-sub.rs-sub--v2 .rs-sub__media {
align-self: end;
height: 250px;
padding: 26px 0 0;
overflow: hidden;
}
html body .rs-sub--v2 .rs-sub__copy,
html body .rs-sub--v2 .rs-sub__form {
padding: 40px 0;
}
}
html body .rs-sub .rs-ph:not(#rs-x) {
border-radius: 34px !important;
}
html body .rs-sub .rs-ph__screen:not(#rs-x) {
border-radius: 27px !important;
}
html body .rs-sub .rs-ph__island:not(#rs-x) {
border-radius: 10px !important;
}
/* ============================================================
Get in Touch (.rs-cq), v5 (2026-11-06): fresh, minimal and light,
no dark panels. Left, on white: the label in blue, the heading,
the line, the call / email / office rows with blue line icons in
pale squares, and the colour RICS, Dubai Land Department and
49-years marks on white tiles. Right: a Downtown photo in natural
colour with the form on a white card over its lower-left corner.
============================================================ */
html body .rs-cq .rs-cq__box {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
align-items: center;
gap: clamp(32px, 5vw, 88px);
padding: 0;
overflow: visible;
background: none;
box-shadow: none;
}
html body .rs-cq .rs-cq__box::before,
html body .rs-cq .rs-cq__box::after {
display: none;
}
html body .rs-cq .rs-cq__info {
padding: 0;
border: 0;
background: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: none;
color: #0a1230;
}
html body .rs-cq .rs-cq__eyebrow {
color: #0b2dbe;
}
html body .rs-cq .rs-cq__title {
color: #0a1230;
}
html body .rs-cq .rs-cq__text {
color: #4a5568;
}
html body .rs-cq .rs-cq__details {
padding: 0;
border: 0;
border-top: 1px solid #e1e6f0;
background: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: none;
}
html body .rs-cq .rs-cq__detail {
border-bottom: 1px solid #e1e6f0;
}
html body .rs-cq .rs-cq__detail:last-child {
border-bottom: 1px solid #e1e6f0;
}
html body .rs-cq .rs-cq__detail::before {
border-color: #d5ddef;
background-color: #f4f6fb;
}
html body .rs-cq .rs-cq__detail:nth-child(1) {
--rs-cq-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b2dbe' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}
html body .rs-cq .rs-cq__detail:nth-child(2) {
--rs-cq-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b2dbe' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='1'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");
}
html body .rs-cq .rs-cq__detail:nth-child(3) {
--rs-cq-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b2dbe' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-5.5-7-11a7 7 0 0 1 14 0c0 5.5-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}
html body .rs-cq .rs-cq__detail dt {
color: #6b7690;
}
html body .rs-cq .rs-cq__detail a {
color: #0a1230;
}
html body .rs-cq .rs-cq__detail a:hover,
html body .rs-cq .rs-cq__detail a:focus-visible {
color: #0b2dbe;
}
html body .rs-cq .rs-cq__logos-label {
color: #6b7690;
}
html body .rs-cq .rs-cq__logos {
gap: 8px;
border: 0;
background: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
html body .rs-cq .rs-cq__logos li,
html body .rs-cq .rs-cq__logos li + li {
height: 72px;
border: 1px solid #e1e6f0;
background: #fff;
box-shadow: 0 12px 24px -20px rgba(10, 18, 48, .35);
}
html body .rs-cq .rs-cq__logos img,
html body .rs-cq .rs-cq__logos img.is-dld {
max-height: 38px;
filter: none;
}
html body .rs-cq .rs-cq__logos li:last-child img {
max-height: 52px;
}
/* the photo with the form card over it */
html body .rs-cq .rs-cq__side {
position: relative;
padding: 64px 64px 0 0;
}
html body .rs-cq .rs-cq__photo {
position: absolute;
top: 0;
left: 0;
width: 82%;
height: 300px;
margin: 0;
overflow: hidden;
}
html body .rs-cq .rs-cq__photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 35%;
}
html body .rs-cq .rs-cq__form {
position: relative;
z-index: 1;
padding: clamp(26px, 2.8vw, 40px);
border: 1px solid #e1e6f0;
background: #fff;
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: 0 40px 80px -48px rgba(10, 18, 48, .4);
}
html body .rs-cq .rs-cq__field input {
background: #f7f9fd;
}
@media (max-width: 991px) {
html body .rs-cq .rs-cq__box {
grid-template-columns: minmax(0, 1fr);
}
html body .rs-cq .rs-cq__side {
padding: 120px 0 0;
}
html body .rs-cq .rs-cq__photo {
width: 100%;
height: 200px;
}
html body .rs-cq .rs-cq__form {
margin: 0 12px;
border-right: 1px solid #e1e6f0;
border-top: 1px solid #e1e6f0;
}
}
@media (max-width: 575px) {
html body .rs-cq .rs-cq__side {
padding-top: 110px;
}
html body .rs-cq .rs-cq__photo {
height: 170px;
}
html body .rs-cq .rs-cq__form {
margin: 0 8px;
padding: 22px 18px;
}
html body .rs-cq .rs-cq__logos li,
html body .rs-cq .rs-cq__logos li + li {
height: 60px;
}
}
/* Get in Touch v5, refinements: more of the photo shows above the form card, and the contact icons
stand alone without boxes */
@media (min-width: 992px) {
html body .rs-cq .rs-cq__side {
padding-top: 120px;
}
html body .rs-cq .rs-cq__photo {
height: 340px;
}
}
html body .rs-cq .rs-cq__detail {
grid-template-columns: 28px minmax(0, 1fr);
}
html body .rs-cq .rs-cq__detail::before {
width: 28px;
height: 28px;
border: 0;
background-color: transparent;
background-size: 22px;
}
/* ============================================================
Subscribe band: laptop + phone mockup (2026-11-06). Drawn in
markup: a laptop showing the briefing email (its content scrolls
slowly) with a phone in front, floating gently. Fits the band's
compact height; desktop only. A small blue line sits over the
heading.
============================================================ */
html body .rs-sub--v2 .rs-sub__kicker {
margin: 0 0 8px;
font-size: 12px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: #0b2dbe;
}
@media (min-width: 992px) {
html body .rs-sub.rs-sub--v2 .rs-sub__banner {
grid-template-columns: minmax(0, 360px) minmax(0, 1fr) minmax(0, .9fr);
}
html body .rs-sub.rs-sub--v2 .rs-sub__media {
align-self: end;
height: 250px;
padding: 26px 0 0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: flex-end;
}
}
/* ---- the devices (v2, 2026-11-06): the briefing arriving and opening, one 12-second loop.
Laptop: the Reliant email lands at the top of the inbox, then opens as "Market Update" with the
reports appearing one by one and Forward lighting up. Phone: a notification on the lock screen, an
envelope sealed with the Reliant mark opens, the email shows. Reduced motion: the open email only. ---- */
.rs-dv {
position: relative;
width: 340px;
height: 224px;
flex: none;
font-family: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
color: #0a1230;
}
.rs-dv__laptop {
position: absolute;
right: 0;
bottom: 0;
width: 300px;
}
.rs-dv__screen {
height: 196px;
padding: 7px 7px 0;
overflow: hidden;
border-radius: 10px 10px 0 0;
background: #0d1426;
box-shadow: inset 0 0 0 1px #2b3554;
}
html body .rs-sub .rs-dv__screen:not(#rs-x) {
border-radius: 10px 10px 0 0 !important;
}
.rs-dv__bar {
display: flex;
align-items: center;
gap: 4px;
height: 18px;
padding: 0 8px;
background: #eef1f6;
font-size: 7.5px;
color: #6b7690;
}
.rs-dv__bar i {
width: 5px;
height: 5px;
background: #cfd6e4;
}
html body .rs-sub .rs-dv__bar i:not(#rs-x) {
border-radius: 50% !important;
}
.rs-dv__bar span {
margin-right: 8px;
}
.rs-dv__stage {
position: relative;
height: calc(100% - 18px);
overflow: hidden;
background: #fff;
}
.rs-dv__inbox,
.rs-dv__mail {
position: absolute;
inset: 0;
}
/* inbox */
.rs-dv__inbox {
animation: rs-dv-inbox 12s ease-in-out infinite both;
}
.rs-dv__row {
display: flex;
align-items: center;
gap: 7px;
height: 26px;
padding: 0 10px;
border-bottom: 1px solid #eef1f6;
}
.rs-dv__row i {
display: block;
height: 5px;
background: #e3e8f2;
}
.rs-dv__row i:nth-child(1) {
flex: none;
width: 11px;
height: 11px;
}
.rs-dv__row i:nth-child(2) {
flex: none;
width: 56px;
}
.rs-dv__row i:nth-child(3) {
flex: 1 1 auto;
background: #eef1f6;
}
.rs-dv__row--new {
position: relative;
max-height: 26px;
overflow: hidden;
background: #eef2ff;
font-size: 8px;
white-space: nowrap;
animation: rs-dv-arrive 12s ease-in-out infinite both;
}
.rs-dv__row--new::before {
content: "";
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 2px;
background: #0b2dbe;
}
html body .rs-dv__row--new img {
flex: none;
width: 11px !important;
height: 11px !important;
object-fit: contain;
}
.rs-dv__row--new b {
flex: none;
font-weight: 700;
}
.rs-dv__row--new span {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
color: #4a5568;
}
.rs-dv__row--new em {
font-style: normal;
font-weight: 600;
color: #0b2dbe;
}
/* the email */
.rs-dv__mail {
padding: 5px 10px 0;
overflow: hidden;
animation: rs-dv-open 12s ease-in-out infinite both;
}
.rs-dv__from {
display: flex;
align-items: center;
gap: 6px;
padding-bottom: 5px;
border-bottom: 1px solid #eef1f6;
}
html body .rs-dv__from img,
html body .rs-dv__plogo {
flex: none;
width: auto !important;
max-width: 60px !important;
height: 15px !important;
object-fit: contain;
}
.rs-dv__who {
display: flex;
flex-direction: column;
line-height: 1.15;
}
.rs-dv__who b {
font-size: 7.5px;
}
.rs-dv__who small {
font-size: 6.5px;
color: #6b7690;
}
.rs-dv__tools {
display: flex;
align-items: center;
gap: 4px;
margin-right: 14px;
}
.rs-dv__tools i {
display: inline-flex;
align-items: center;
gap: 3px;
height: 13px;
padding: 0 4px;
border: 1px solid #e1e6f0;
font-size: 6.5px;
font-style: normal;
font-weight: 600;
color: #5b6782;
}
.rs-dv__tools svg {
width: 7px;
height: 7px;
}
.rs-dv__fwd {
animation: rs-dv-fwd 12s ease-in-out infinite both;
}
.rs-dv__hero {
position: relative;
height: 44px;
margin-top: 5px;
overflow: hidden;
}
.rs-dv__hero img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.rs-dv__htxt {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1px;
padding: 0 9px;
background: linear-gradient(270deg, rgba(11, 45, 190, .92) 0%, rgba(11, 45, 190, .55) 52%, rgba(11, 45, 190, 0) 80%);
color: #fff;
}
.rs-dv__htxt small {
font-size: 6px;
letter-spacing: .06em;
opacity: .85;
}
.rs-dv__htxt b {
font-size: 13px;
font-weight: 600;
line-height: 1.1;
letter-spacing: -.01em;
}
.rs-dv__list {
margin: 3px 0 0;
padding: 0;
list-style: none;
}
.rs-dv__list li {
position: relative;
padding: 3px 9px 3px 0;
border-bottom: 1px solid #eef1f6;
font-size: 7.5px;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
animation: rs-dv-li 12s ease-out infinite both;
}
.rs-dv__list li::before {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 4px;
height: 4px;
margin-top: -2px;
background: #0b2dbe;
}
.rs-dv__list li:nth-child(2) { animation-delay: .35s; }
.rs-dv__list li:nth-child(3) { animation-delay: .7s; }
.rs-dv__list li:nth-child(4) { animation-delay: 1.05s; }
.rs-dv__btn {
display: inline-block;
margin-top: 5px;
padding: 3px 9px;
background: #0b2dbe;
font-size: 7.5px;
font-weight: 600;
color: #fff;
}
.rs-dv__base {
position: relative;
width: 340px;
height: 12px;
margin-right: -20px;
background: linear-gradient(180deg, #d9dee8 0%, #b9c1d0 100%);
box-shadow: 0 16px 24px -14px rgba(10, 18, 48, .45);
}
html body .rs-sub .rs-dv__base:not(#rs-x) {
border-radius: 0 0 10px 10px !important;
}
.rs-dv__base::before {
content: "";
position: absolute;
top: 0;
right: 50%;
width: 56px;
height: 5px;
background: #a9b2c4;
transform: translateX(50%);
}
/* the phone */
.rs-dv__phone {
position: absolute;
left: 0;
bottom: 0;
z-index: 2;
width: 92px;
height: 186px;
padding: 5px;
background: #0d1426;
box-shadow: 0 20px 34px -16px rgba(10, 18, 48, .55), inset 0 0 0 1px #2b3554;
animation: rs-dv-float 6s ease-in-out infinite;
}
html body .rs-sub .rs-dv__phone:not(#rs-x) {
border-radius: 18px !important;
}
@keyframes rs-dv-float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
}
.rs-dv__pscreen {
position: relative;
height: 100%;
overflow: hidden;
background: #fff;
}
html body .rs-sub .rs-dv__pscreen:not(#rs-x) {
border-radius: 14px !important;
}
.rs-dv__island {
position: absolute;
top: 5px;
right: 50%;
z-index: 6;
width: 28px;
height: 7px;
background: #0d1426;
transform: translateX(50%);
}
html body .rs-sub .rs-dv__island:not(#rs-x) {
border-radius: 6px !important;
}
/* lock screen and notification */
.rs-dv__lock {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 22px;
background: linear-gradient(190deg, #c9d5ff 0%, #e8edfb 55%, #f6f8fd 100%);
animation: rs-dv-lock 12s ease-in-out infinite both;
}
.rs-dv__time {
font-size: 21px;
font-weight: 300;
line-height: 1;
letter-spacing: -.02em;
color: #0a1230;
}
.rs-dv__date {
margin-top: 3px;
font-size: 6px;
color: #4a5568;
}
.rs-dv__notif {
position: absolute;
top: 64px;
right: 4px;
left: 4px;
display: flex;
align-items: center;
gap: 4px;
padding: 5px;
background: rgba(255, 255, 255, .86);
box-shadow: 0 6px 14px -6px rgba(10, 18, 48, .35);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
animation: rs-dv-notif 12s cubic-bezier(.22, 1, .36, 1) infinite both;
}
html body .rs-sub .rs-dv__notif:not(#rs-x) {
border-radius: 6px !important;
}
html body .rs-dv__notif img {
flex: none;
width: 13px !important;
height: 13px !important;
object-fit: contain;
}
.rs-dv__notif span {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.2;
}
.rs-dv__notif b {
font-size: 6px;
}
.rs-dv__notif small {
overflow: hidden;
font-size: 5.5px;
white-space: nowrap;
text-overflow: ellipsis;
color: #4a5568;
}
/* the envelope */
.rs-dv__env {
position: absolute;
top: 50%;
right: 50%;
width: 64px;
height: 42px;
margin: -12px -32px 0 0;
perspective: 240px;
animation: rs-dv-env 12s ease-in-out infinite both;
}
.rs-dv__envback,
.rs-dv__envfront,
.rs-dv__flap {
position: absolute;
display: block;
}
.rs-dv__envback {
inset: 0;
z-index: 1;
background: #d5def5;
}
.rs-dv__letter {
position: absolute;
right: 5px;
left: 5px;
top: 3px;
height: 36px;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
padding: 4px 5px;
background: #fff;
box-shadow: 0 2px 6px -2px rgba(10, 18, 48, .25);
animation: rs-dv-letter 12s cubic-bezier(.22, 1, .36, 1) infinite both;
}
html body .rs-dv__letter img {
width: 8px !important;
height: 8px !important;
object-fit: contain;
}
.rs-dv__letter b {
font-size: 5.5px;
line-height: 1.1;
}
.rs-dv__letter i {
display: block;
width: 100%;
height: 2px;
background: #e3e8f2;
}
.rs-dv__envfront {
inset: 0;
z-index: 3;
background: linear-gradient(180deg, #e9eefb 0%, #dfe6f8 100%);
clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%);
}
.rs-dv__flap {
right: 0;
left: 0;
top: 0;
height: 62%;
z-index: 4;
background: #0b2dbe;
clip-path: polygon(0 0, 100% 0, 50% 100%);
transform-origin: 50% 0;
animation: rs-dv-flap 12s ease-in-out infinite both;
}
.rs-dv__seal {
position: absolute;
top: 19px;
right: 50%;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
width: 13px;
height: 13px;
margin-right: -6.5px;
background: #fff;
box-shadow: 0 1px 3px rgba(10, 18, 48, .35);
animation: rs-dv-seal 12s ease-in-out infinite both;
}
html body .rs-sub .rs-dv__seal:not(#rs-x) {
border-radius: 50% !important;
}
html body .rs-dv__seal img {
width: 8px !important;
height: 8px !important;
object-fit: contain;
}
/* the email on the phone */
.rs-dv__popen {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
gap: 3px;
padding: 17px 6px 6px;
background: #fff;
animation: rs-dv-popen 12s ease-in-out infinite both;
}
.rs-dv__ptitle {
margin-top: 2px;
font-size: 8.5px;
line-height: 1.1;
color: #0a1230;
}
.rs-dv__pdate {
font-size: 5.5px;
color: #6b7690;
}
.rs-dv__phero {
height: 46px;
margin-top: 2px;
overflow: hidden;
}
.rs-dv__phero img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.rs-dv__line {
display: block;
height: 4px;
background: #e3e8f2;
}
.rs-dv__line--short {
width: 60%;
}
.rs-dv__pbtn {
margin-top: auto;
padding: 3px 0;
background: #0b2dbe;
font-size: 7px;
font-weight: 600;
text-align: center;
color: #fff;
}
/* the loop */
@keyframes rs-dv-inbox {
0%, 42% { opacity: 1; transform: none; }
48%, 96% { opacity: 0; transform: translateX(14px); }
100% { opacity: 1; transform: none; }
}
@keyframes rs-dv-arrive {
0%, 4% { max-height: 0; opacity: 0; background-color: #eef2ff; }
10% { max-height: 26px; opacity: 1; background-color: #eef2ff; }
32% { background-color: #eef2ff; }
36%, 92% { max-height: 26px; opacity: 1; background-color: #d9e2ff; }
95%, 100% { max-height: 0; opacity: 0; }
}
@keyframes rs-dv-open {
0%, 44% { opacity: 0; transform: translateX(-14px); }
50%, 92% { opacity: 1; transform: none; }
97%, 100% { opacity: 0; transform: none; }
}
@keyframes rs-dv-li {
0%, 50% { opacity: 0; transform: translateY(5px); }
56%, 92% { opacity: 1; transform: none; }
97%, 100% { opacity: 0; transform: none; }
}
@keyframes rs-dv-fwd {
0%, 74% { border-color: #e1e6f0; background-color: transparent; color: #5b6782; }
78%, 86% { border-color: #0b2dbe; background-color: #0b2dbe; color: #fff; }
90%, 100% { border-color: #e1e6f0; background-color: transparent; color: #5b6782; }
}
@keyframes rs-dv-lock {
0%, 28% { opacity: 1; }
32%, 96% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes rs-dv-notif {
0%, 3% { opacity: 0; transform: translateY(-34px); }
9%, 22% { opacity: 1; transform: none; }
27%, 100% { opacity: 0; transform: scale(.9); }
}
@keyframes rs-dv-env {
0%, 26% { opacity: 0; transform: scale(.6); }
32%, 50% { opacity: 1; transform: none; }
55%, 100% { opacity: 0; transform: scale(1.08); }
}
@keyframes rs-dv-seal {
0%, 33% { opacity: 1; transform: none; }
36%, 100% { opacity: 0; transform: scale(.5); }
}
@keyframes rs-dv-flap {
0%, 34% { z-index: 4; transform: rotateX(0); }
37% { z-index: 1; }
41%, 100% { z-index: 1; transform: rotateX(180deg); }
}
@keyframes rs-dv-letter {
0%, 40% { transform: none; }
48%, 100% { transform: translateY(-26px); }
}
@keyframes rs-dv-popen {
0%, 50% { opacity: 0; transform: translateY(8px); }
56%, 92% { opacity: 1; transform: none; }
97%, 100% { opacity: 0; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.rs-dv__phone,
.rs-dv__mail,
.rs-dv__list li,
.rs-dv__fwd,
.rs-dv__popen {
animation: none;
}
.rs-dv__inbox,
.rs-dv__lock,
.rs-dv__env {
display: none;
}
}
/* Valunxt pop-up: a soft, blurred backdrop behind it */
body:has(#VxResidentialModal.show) .modal-backdrop.show {
background: #120a24;
opacity: .5;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
body:has(#VxResidentialModal.show) .modal-backdrop.show {
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
}
/* Get in Touch: the blue abstract behind the form card (replaces the skyline photo, 2026-11-06) */
html body .rs-cq .rs-cq__photo--abstract img {
object-position: 50% 45%;
}
/* Get in Touch: the accreditation marks larger and clearer (2026-11-06). Taller tiles with less
padding; the RICS mark is a tightly cropped copy so it fills its tile like the others. */
html body .rs-cq .rs-cq__logos li,
html body .rs-cq .rs-cq__logos li + li {
height: 96px;
padding: 10px 14px;
}
html body .rs-cq .rs-cq__logos li img,
html body .rs-cq .rs-cq__logos li img.is-dld,
html body .rs-cq .rs-cq__logos li:first-child img,
html body .rs-cq .rs-cq__logos li:last-child img {
width: auto;
max-width: 100%;
object-fit: contain;
}
html body .rs-cq .rs-cq__logos li img.is-rics {
max-height: 50px;
}
html body .rs-cq .rs-cq__logos li img.is-dld {
max-height: 54px;
}
html body .rs-cq .rs-cq__logos li:last-child img {
max-height: 78px;
}
@media (max-width: 575px) {
html body .rs-cq .rs-cq__logos li,
html body .rs-cq .rs-cq__logos li + li {
height: 74px;
padding: 8px;
}
html body .rs-cq .rs-cq__logos li img.is-rics {
max-height: 36px;
}
html body .rs-cq .rs-cq__logos li img.is-dld {
max-height: 40px;
}
html body .rs-cq .rs-cq__logos li:last-child img {
max-height: 60px;
}
}
/* the Land Department mark is wide: its tile takes more of the row */
html body .rs-cq .rs-cq__logos {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
}
html body .rs-cq .rs-cq__logos li {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
}
/* ==========================================================================
Phones, polish (2026-11-06): no text cut off mid-word on the home page,
and the last footer service link aligned with the others.
========================================================================== */
@media (max-width: 767px) {
/* Our Approach: each column's text in full */
html body .rs-qs .rs-qs__task > .rs-qs__text {
display: block;
overflow: visible;
-webkit-line-clamp: unset;
}
/* Our Services: up to three lines */
html body .rs-sp .rs-sp__text,
html body .rs-sp .rs-sp__panel.is-open .rs-sp__text {
-webkit-line-clamp: 3;
}
/* News & Insights: titles up to four lines, so they are not cut after two words */
html body .rs-hin .rs-rc__title {
-webkit-line-clamp: 4;
min-height: 0;
}
/* footer: the last service link starts where the others do */
html body .rs-ft .rs-ft__services li:last-child {
justify-content: flex-start !important;
}
html body .rs-ft .rs-ft__services li:last-child a {
width: 100% !important;
text-align: right !important;
}
}
/* ==========================================================================
Mobile menu v2 (2026-11-06): formal and composed. A slim bar (logo, the
language switch, a fine close square); the sections numbered in large
type on hairlines, each with a quiet chevron; under them a card for the
latest market report. Section screens: a short line under each About and
Insights link, the sectors as a two-column grid of tiles. A mist foot with
the two actions, the phone and email with their icons, and social links.
Items rise in one after another as the menu opens.
========================================================================== */
.rs-mnav .rs-mnav__bar {
gap: 10px;
height: 72px;
padding: 0 18px;
}
.rs-mnav .rs-mnav__logo {
margin-inline-end: auto;
}
.rs-mnav .rs-mnav__logo img {
height: 42px;
}
.rs-mnav .rs-mnav__close {
width: 44px;
height: 44px;
border-color: #d5ddef;
}
.rs-mnav .rs-mnav__close svg {
width: 20px;
height: 20px;
}
.rs-mnav .rs-mnav__screen {
padding: 6px 22px 30px;
}
/* the sections */
.rs-mnav .rs-mnav__item {
justify-content: flex-start;
gap: 14px;
min-height: 64px;
padding: 0;
font-size: 25px;
}
.rs-mnav .rs-mnav__item > span {
flex: 1 1 auto;
}
.rs-mnav .rs-mnav__num {
flex: none;
width: 26px;
padding-top: 3px;
font-size: 12px;
font-style: normal;
font-weight: 600;
letter-spacing: .06em;
color: var(--mn-blue);
}
.rs-mnav .rs-mnav__item svg {
width: 20px;
height: 20px;
color: #9aa6c2;
transition: transform .3s var(--mn-ease), color .3s ease;
}
.rs-mnav .rs-mnav__item:hover svg,
.rs-mnav .rs-mnav__item:focus-visible svg,
.rs-mnav .rs-mnav__item:active svg {
color: var(--mn-blue);
transform: translateX(-3px);
}
/* the latest report */
.rs-mnav .rs-mnav__card {
display: grid;
grid-template-columns: 104px minmax(0, 1fr);
align-items: center;
gap: 16px;
margin-top: 26px;
padding: 12px;
border: 1px solid var(--mn-line);
background: #f7f9fd;
color: var(--mn-ink);
text-decoration: none;
transition: border-color .25s ease, background-color .25s ease;
}
.rs-mnav .rs-mnav__card:hover,
.rs-mnav .rs-mnav__card:focus-visible {
border-color: #c9d3ea;
background: #f1f4fc;
}
.rs-mnav .rs-mnav__card-img {
display: block;
height: 84px;
overflow: hidden;
background: #e9edf5;
}
.rs-mnav .rs-mnav__card-img img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.rs-mnav .rs-mnav__card-body {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.rs-mnav .rs-mnav__card-body small {
font-size: 12px;
line-height: 1.3;
color: #6b7690;
}
.rs-mnav .rs-mnav__card-body b {
display: -webkit-box;
overflow: hidden;
font-size: 15px;
font-weight: 500;
line-height: 1.35;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.rs-mnav .rs-mnav__card-body em {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 2px;
font-size: 13.5px;
font-style: normal;
font-weight: 600;
color: var(--mn-blue);
}
.rs-mnav .rs-mnav__card-body em svg {
width: 16px;
height: 16px;
}
.rs-mnav.is-open .rs-mnav__card {
animation: rs-mnav-in .55s var(--mn-ease) both;
animation-delay: 400ms;
}
/* section screens */
.rs-mnav .rs-mnav__back {
font-size: 13.5px;
}
.rs-mnav .rs-mnav__subtitle {
margin: 2px 0 14px;
font-size: 30px;
}
.rs-mnav .rs-mnav__over {
min-height: 54px;
padding: 0 16px;
border: 1px solid #dfe5f2;
background: #f4f6fb;
}
.rs-mnav .rs-mnav__group {
margin: 24px 0 2px;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
color: #6b7690;
}
.rs-mnav .rs-mnav__sublist a {
justify-content: space-between;
gap: 12px;
min-height: 52px;
padding: 10px 0;
font-size: 16.5px;
}
.rs-mnav .rs-mnav__sublist a > span {
display: flex;
flex-direction: column;
gap: 2px;
}
.rs-mnav .rs-mnav__sublist small {
font-size: 13px;
line-height: 1.4;
color: #6b7690;
}
.rs-mnav .rs-mnav__sublist a > svg {
flex: none;
width: 18px;
height: 18px;
color: #9aa6c2;
}
.rs-mnav .rs-mnav__sublist--grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin-top: 10px;
}
.rs-mnav .rs-mnav__sublist--grid a {
min-height: 48px;
padding: 10px 12px;
border: 1px solid var(--mn-line);
background: #fff;
font-size: 14.5px;
line-height: 1.3;
}
/* foot */
.rs-mnav .rs-mnav__foot {
padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--mn-line);
background: #f4f6fb;
}
.rs-mnav .rs-mnav__btn {
min-height: 50px;
}
.rs-mnav .rs-mnav__btn--line {
border-color: #c9d3ea;
background: #fff;
}
.rs-mnav .rs-mnav__contact {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 8px;
margin-top: 14px;
}
.rs-mnav .rs-mnav__contact a {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: var(--mn-ink);
}
.rs-mnav .rs-mnav__contact svg {
flex: none;
width: 17px;
height: 17px;
color: var(--mn-blue);
}
.rs-mnav .rs-mnav__social {
gap: 6px;
margin-top: 12px;
}
.rs-mnav .rs-mnav__social a {
width: 38px;
height: 38px;
border-color: #d5ddef;
background: #fff;
}
@media (max-height: 700px) {
.rs-mnav .rs-mnav__item {
min-height: 56px;
font-size: 22px;
}
.rs-mnav .rs-mnav__card {
margin-top: 18px;
}
}
@media (prefers-reduced-motion: reduce) {
.rs-mnav.is-open .rs-mnav__card {
animation: none;
}
}
/* phones and tablets: a larger logo in the header for the brand (2026-11-06; was 112px; 2026-11-10 a
touch larger again, 156px -> 168px and 138px -> 148px, with the desktop mark at 206px) */
@media (max-width: 1024px) {
html body header.main-header .main-menu-logo img {
width: 168px !important;
max-width: 168px !important;
}
}
@media (max-width: 374px) {
html body header.main-header .main-menu-logo img {
width: 148px !important;
max-width: 148px !important;
}
}
/* ==========================================================================
Header on phones and tablets, v2 (2026-11-06). One side gutter for the logo,
the Menu button and the page copy: 20px on phones (every .container takes
it too), the centred .container width on tablets. The logo drops its
desktop 25px offset. The Menu button: frosted glass, the label and two
lines of unequal length either side of a hairline; it turns white on
hover and press. On the white (scrolled) header it is white with a grey
hairline and turns mist.
========================================================================== */
@media (max-width: 1024px) {
html body header.main-header .main-menu-logo {
right: 0 !important;
max-width: none !important;
}
html body .header-menu-collaps {
min-width: 0 !important;
height: 44px;
padding: 0 79px 0 13px;
row-gap: 6px !important;
border: 1px solid rgba(255, 255, 255, .34);
background: rgba(255, 255, 255, .08);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
transition: background-color .3s ease, border-color .3s ease;
}
html body .header-menu-collaps::before {
right: 16px;
font-size: 14px;
font-weight: 500;
letter-spacing: .01em;
transition: color .3s ease;
}
html body .header-menu-collaps::after {
content: "";
position: absolute;
top: 11px;
bottom: 11px;
right: 65px;
width: 1px;
background: rgba(255, 255, 255, .34);
transition: background-color .3s ease;
}
html body .header-menu-collaps span,
html body .header-menu-collaps span:nth-child(2) {
width: 18px !important;
transition: background-color .3s ease, width .3s ease;
}
html body .header-menu-collaps span:nth-child(2) {
width: 12px !important;
}
html body .header-menu-collaps:hover,
html body .header-menu-collaps:active {
border-color: #fff;
background: #fff;
}
html body .header-menu-collaps:hover::before,
html body .header-menu-collaps:active::before {
color: #0a1230;
}
html body .header-menu-collaps:hover::after,
html body .header-menu-collaps:active::after {
background: #e1e6f0;
}
html body .header-menu-collaps:hover span,
html body .header-menu-collaps:active span {
background-color: #0a1230 !important;
}
html body .header-menu-collaps:hover span:nth-child(2) {
width: 18px !important;
}
html body .main-header.is-scrolled .header-menu-collaps,
html body .main-header.white-bg .header-menu-collaps {
border-color: #d9dfeb;
background: #fff;
}
html body .main-header.is-scrolled .header-menu-collaps::after,
html body .main-header.white-bg .header-menu-collaps::after {
background: #e1e6f0;
}
html body .main-header.is-scrolled .header-menu-collaps:hover,
html body .main-header.white-bg .header-menu-collaps:hover {
border-color: #c9d2e3;
background: #f4f6fb;
}
}
@media (min-width: 768px) and (max-width: 991px) {
html body header.main-header > .container-fluid {
max-width: 720px;
}
}
@media (min-width: 992px) and (max-width: 1024px) {
html body header.main-header > .container-fluid {
max-width: 960px;
}
}
@media (max-width: 767px) {
html body .container,
html body .container-fluid,
html body .container-sm,
html body .container-md {
--bs-gutter-x: 40px;
max-width: none;
}
html body header.main-header > .container-fluid {
padding-left: 20px;
padding-right: 20px;
}
}
@media (prefers-reduced-motion: reduce) {
html body .header-menu-collaps,
html body .header-menu-collaps::before,
html body .header-menu-collaps::after,
html body .header-menu-collaps span {
transition: none;
}
}
/* ============================================================
Valunxt pop-up, v3 (2026-11-06): shorter, and no dark logo.
The brand side loses its frosted card: a soft scrim rises from
the foot of the photo and the white Valunxt Capital mark, the
line, the points and "In association with" sit on it in white.
The form drops the message field and tightens its rhythm.
============================================================ */
.vx-pop__grid {
min-height: 0;
}
.vx-pop__brand {
padding: 34px 34px 30px;
}
.vx-pop__brand::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(16, 10, 30, 0) 16%, rgba(16, 10, 30, .5) 46%, rgba(16, 10, 30, .86) 100%);
pointer-events: none;
}
.vx-pop__glass {
z-index: 2;
padding: 0;
border: 0;
background: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: none;
color: #fff;
}
.vx-pop__logo img {
height: 28px !important;
}
.vx-pop__logo span {
border-right-color: rgba(255, 255, 255, .45);
color: #fff;
}
.vx-pop__tag {
color: #fff;
}
.vx-pop__points li {
border-top-color: rgba(255, 255, 255, .2);
color: rgba(255, 255, 255, .9);
}
.vx-pop__points svg {
color: #dcb4ff;
}
.vx-pop__assoc {
border-top-color: rgba(255, 255, 255, .2);
color: rgba(255, 255, 255, .78);
}
.vx-pop__form {
padding: 40px 44px 30px;
}
.vx-modal .vx-pop__title {
margin-bottom: 6px;
}
.vx-pop__sub {
margin-bottom: 22px;
}
.vx-seg {
margin-bottom: 18px;
}
.vx-fields {
row-gap: 14px;
}
.vx-field input,
.vx-field select {
height: 48px;
}
.vx-pop__foot {
padding-top: 22px;
}
@media (max-width: 1099px) {
.vx-pop__form {
padding: 36px 32px 28px;
}
}
@media (max-width: 767px) {
.vx-pop__brand {
min-height: 132px;
padding: 18px 20px;
}
.vx-pop__brand::after {
background: linear-gradient(180deg, rgba(16, 10, 30, .05) 0%, rgba(16, 10, 30, .62) 100%);
}
.vx-pop__logo img {
height: 24px !important;
}
.vx-pop__form {
padding: 22px 20px 20px;
}
}
/* Valunxt pop-up v3, phones: property type and location share a row, the title balances its lines */
@media (max-width: 767px) {
.vx-fields {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 10px;
}
.vx-fields > .vx-field:nth-child(-n+3),
.vx-fields > .vx-field:nth-child(6) {
grid-column: 1 / -1;
}
.vx-modal .vx-pop__title {
font-size: 23px;
text-wrap: balance;
}
.vx-pop__sub {
margin-bottom: 18px;
}
}
/* ============================================================
HOME, buy / sell / rent on phones, compact (2026-11-06). The
blue panel comes first and tighter (no label above the title);
the three photos become slim rows (a square thumbnail, the
number and name, the arrow) on white hairlines, so the block
is about half its former height.
============================================================ */
@media (max-width: 575px) {
html body .rs-hbuy--v2 .rs-hbuy-grid {
display: flex;
flex-direction: column;
gap: 0;
min-height: 0;
background: transparent;
}
html body .rs-hbuy--v2 .rs-hbuy-panel {
order: -1;
gap: 18px;
padding: 26px 20px 22px;
}
html body .rs-hbuy--v2 .rs-hbuy-eyebrow {
display: none;
}
html body.rs-home .rs-hbuy--v2 .rs-hbuy-title {
font-size: 23px;
line-height: 1.22;
}
html body .rs-hbuy--v2 .rs-hbuy-text {
margin-bottom: 16px;
font-size: 14.5px;
line-height: 1.6;
}
html body .rs-hbuy--v2 .rs-hbuy-tile,
html body .rs-hbuy--v2 .rs-hbuy-tile--tall,
html body .rs-hbuy--v2 .rs-hbuy-tile:not(.rs-hbuy-tile--tall) {
display: grid;
grid-template-columns: 72px minmax(0, 1fr);
align-items: stretch;
height: 74px;
min-height: 0;
aspect-ratio: auto;
border: 1px solid #e3e8f2;
border-top: 0;
background: #fff;
color: #0a1230;
}
html body .rs-hbuy--v2 .rs-hbuy-tile::after {
display: none;
}
html body .rs-hbuy--v2 .rs-hbuy-tile img {
position: static;
width: 72px;
height: 72px;
object-fit: cover;
transform: none;
}
html body .rs-hbuy--v2 .rs-hbuy-name {
position: static;
display: flex;
align-items: center;
gap: 10px;
width: auto;
height: 72px;
margin: 0;
padding: 0 16px 0 0;
border: 0;
background: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
font-size: 16px;
color: #0a1230;
}
html body .rs-hbuy--v2 .rs-hbuy-name b {
font-size: 12.5px;
color: #0b2dbe;
}
html body .rs-hbuy--v2 .rs-hbuy-go,
html body .rs-hbuy--v2 .rs-hbuy-tile .rs-hbuy-go {
flex: 0 0 auto;
width: 52px;
height: 72px;
margin-right: auto;
border-right: 1px solid #e3e8f2;
background: transparent;
color: #0b2dbe;
}
html body .rs-hbuy--v2 .rs-hbuy-tile:hover .rs-hbuy-name,
html body .rs-hbuy--v2 .rs-hbuy-tile:focus-visible .rs-hbuy-name {
background: #f5f7fb;
color: #0a1230;
}
html body .rs-hbuy--v2 .rs-hbuy-panel .rs-hbuy-power {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-top: 16px;
}
html body .rs-hbuy--v2 .rs-hbuy-power__label {
margin: 0;
white-space: nowrap;
}
html body .rs-hbuy--v2 .rs-hbuy-power .rs-hbuy-mark {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 10px;
}
html body .rs-hbuy--v2 .rs-hbuy-power .rs-hbuy-mark img {
flex: 0 0 auto;
width: 104px;
max-width: none;
height: auto;
}
}
/* ==========================================================================
Footer on phones, v3 (2026-11-06). One grid: the logo and RICS mark; the
contact rows (call, email, head office) with fine line icons; the Company
and Services links as two plain columns under quiet headings; the social
icons without boxes beside the Valunxt mark on a hairline; then the
copyright with Privacy Policy and Terms. The contact rows, headings and
legal links exist only here (hidden on wider screens).
========================================================================== */
.rs-ft .rs-ft__contact,
.rs-ft .rs-ft__head,
.rs-ft .rs-ft__legal {
display: none;
}
@media (max-width: 767px) {
html body .rs-ft .rs-ft__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas:
"brand brand"
"contact contact"
"navh svch"
"nav svc"
"social valunxt"
"bottom bottom";
column-gap: 20px;
padding: 34px 20px 22px;
}
html body .rs-ft .rs-ft__top,
html body .rs-ft .rs-ft__mid,
html body .rs-ft .rs-ft__services-wrap {
display: contents;
}
html body .rs-ft .rs-ft__brand {
grid-area: brand;
padding-bottom: 24px;
border-bottom: 1px solid rgba(255, 255, 255, .18);
}
html body .rs-ft .rs-ft__contact {
grid-area: contact;
display: block;
margin: 0;
padding: 8px 0;
list-style: none;
border-bottom: 1px solid rgba(255, 255, 255, .18);
}
html body .rs-ft .rs-ft__contact a {
display: grid;
grid-template-columns: 20px minmax(0, 1fr);
column-gap: 14px;
align-items: start;
padding: 11px 0;
color: #fff;
text-decoration: none;
}
html body .rs-ft .rs-ft__contact svg {
width: 18px;
height: 18px;
margin-top: 3px;
color: rgba(255, 255, 255, .72);
}
html body .rs-ft .rs-ft__contact span {
font-size: 15px;
line-height: 1.45;
overflow-wrap: anywhere;
}
html body .rs-ft .rs-ft__contact small {
display: block;
margin-bottom: 2px;
font-size: 12px;
color: rgba(255, 255, 255, .62);
}
html body .rs-ft .rs-ft__head {
display: block;
margin: 26px 0 8px;
font-size: 13px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: rgba(255, 255, 255, .6);
}
html body .rs-ft .rs-ft__head--nav {
grid-area: navh;
}
html body .rs-ft .rs-ft__head--svc {
grid-area: svch;
}
html body .rs-ft .rs-ft__nav {
grid-area: nav;
display: flex;
flex-direction: column;
border: 0;
}
html body .rs-ft .rs-ft__nav li,
html body .rs-ft .rs-ft__nav li:nth-child(odd) {
border: 0;
}
html body .rs-ft .rs-ft__nav a,
html body .rs-ft .rs-ft__services a {
display: block;
min-height: 0;
padding: 7px 0;
border: 0;
font-size: 15px;
font-weight: 400;
line-height: 1.4;
color: #fff;
}
html body .rs-ft .rs-ft__services {
grid-area: svc;
display: flex;
flex-direction: column;
}
html body .rs-ft .rs-ft__social {
grid-area: social;
align-items: center;
gap: 22px;
margin-top: 26px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, .18);
}
html body .rs-ft .rs-ft__social a {
width: auto;
height: auto;
border: 0;
color: #fff;
opacity: .9;
}
html body .rs-ft .rs-ft__social svg {
width: 20px;
height: 20px;
}
html body .rs-ft .rs-ft__valunxt {
grid-area: valunxt;
display: flex;
align-items: center;
justify-content: flex-end;
justify-self: stretch;
margin: 26px -20px 0 0;
padding: 20px 20px 0 0;
border-top: 1px solid rgba(255, 255, 255, .18);
}
html body .rs-ft .rs-ft__valunxt img {
width: 96px;
height: auto;
}
html body .rs-ft .rs-ft__bottom,
html body footer.rs-ft .rs-ft__bottom {
grid-area: bottom;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 22px;
padding-top: 16px;
border-top: 1px solid rgba(255, 255, 255, .18);
text-align: right;
}
html body .rs-ft .rs-ft__copy {
margin: 0;
font-size: 12px;
color: rgba(255, 255, 255, .72);
}
html body .rs-ft .rs-ft__legal {
display: flex;
flex: 0 0 auto;
gap: 14px;
}
html body .rs-ft .rs-ft__legal a {
font-size: 12px;
color: rgba(255, 255, 255, .82);
text-decoration: none;
}
}
/* phones (2026-11-06): the header is not pinned; it sits at the top of the page over the hero and
scrolls away with it (the scroll script no longer turns it white here) */
@media (max-width: 767px) {
html body header.main-header,
html body header.main-header.is-scrolled {
position: absolute !important;
top: 0;
left: 0;
right: 0;
}
}
/* footer on phones, v3 fix: the Services column reads from the left like the Company column */
@media (max-width: 767px) {
html body .rs-ft .rs-ft__services li,
html body .rs-ft .rs-ft__services a {
text-align: right !important;
}
}
/* ==================================================================
FAQ left column, balanced (2026-11-08): the title, the line directly under it, then the
photo, which grows to close level with the accordion's last rule. Square corners, full
column width. Applies wherever the shared FAQ layout is injected (common-footer.php).
================================================================== */
html body .rs-faq-section .rs-faq-left {
justify-content: flex-start;
gap: 20px;
min-height: 420px;
}
html body .rs-faq-section .rs-faq-left > .rs-faq-subtitle {
order: 1;
max-width: 30em;
}
html body .rs-faq-section .rs-faq-left > img.rs-faq-media,
html body.rs-home .rs-home-faq .rs-faq-left > img.rs-faq-media {
order: 2;
flex: 1 1 auto;
width: 100%;
max-width: none;
height: auto;
min-height: 240px;
aspect-ratio: auto;
border-radius: 0;
object-fit: cover;
object-position: 50% 35%;
background: #f3f6fc;
}
@media (max-width: 991px) {
html body .rs-faq-section .rs-faq-left > img.rs-faq-media,
html body.rs-home .rs-home-faq .rs-faq-left > img.rs-faq-media {
flex: none;
aspect-ratio: 16 / 9;
min-height: 0;
}
}
/* ============================================================
Get in Touch (.rs-cq), v6 (2026-11-09): aligned. The blue abstract
is now the enquiry card's own top band (same width as the card,
heading in white on it) instead of a panel offset behind the card.
On desktop the card's top lines up with the "Get in touch" label and
its bottom with the accreditation row: the band takes up any spare
height, so both columns always end on one line.
============================================================ */
html body .rs-cq .rs-cq__box {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
align-items: stretch;
gap: clamp(32px, 5vw, 88px);
}
html body .rs-cq .rs-cq__info {
display: flex;
flex-direction: column;
}
html body .rs-cq .rs-cq__side {
display: flex;
position: relative;
padding: 0;
}
html body .rs-cq .rs-cq__form {
display: flex;
flex-direction: column;
gap: 0;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e1e6f0;
background: #fff;
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: 0 40px 80px -52px rgba(10, 18, 48, .42);
}
/* the band: abstract, a navy wash for legibility, then the heading */
html body .rs-cq .rs-cq__formhead {
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-content: end;
align-items: end;
gap: 10px 20px;
flex: 1 0 auto;
min-height: clamp(150px, 12vw, 184px);
padding: clamp(24px, 2.4vw, 34px) clamp(24px, 2.8vw, 40px);
border: 0;
background: #0a2fb0;
color: #fff;
}
html body .rs-cq .rs-cq__formhead::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(to top, rgba(4, 16, 84, .62) 0%, rgba(4, 16, 84, 0) 72%),
linear-gradient(270deg, rgba(4, 16, 84, .5) 0%, rgba(4, 16, 84, .12) 70%);
}
html body .rs-cq .rs-cq__photo,
html body .rs-cq .rs-cq__photo--abstract {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
}
html body .rs-cq .rs-cq__photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 45%;
transform-origin: 35% 40%;
animation: rsCqBandDrift 24s ease-in-out infinite alternate;
}
@keyframes rsCqBandDrift {
0% { transform: scale(1.08) translate3d(2%, -1.5%, 0); }
100% { transform: scale(1.18) translate3d(-2%, 1.5%, 0); }
}
html body .rs-cq .rs-cq__kicker {
display: flex;
align-items: center;
gap: 12px;
grid-column: 1 / -1;
color: #d3ddff;
}
html body .rs-cq .rs-cq__kicker::before {
content: "";
width: 28px;
height: 1px;
background: rgba(255, 255, 255, .7);
}
html body .rs-cq .rs-cq__formtitle {
margin: 0;
font-size: clamp(22px, 1.9vw, 30px);
font-weight: 500;
line-height: 1.2;
letter-spacing: -.01em;
color: #fff;
}
html body .rs-cq .rs-cq__req {
padding-bottom: 4px;
font-size: 12.5px;
color: rgba(255, 255, 255, .78);
white-space: nowrap;
}
/* the fields */
html body .rs-cq .rs-cq__body {
display: flex;
flex-direction: column;
gap: 24px;
padding: clamp(26px, 2.6vw, 36px) clamp(24px, 2.8vw, 40px) clamp(28px, 2.8vw, 40px);
}
html body .rs-cq .rs-cq__fields {
gap: 20px 20px;
}
html body .rs-cq .rs-cq__field label {
color: #3d4a6b;
}
html body .rs-cq .rs-cq__field input {
height: 52px;
border: 1px solid #d9e0ec;
background: #fff;
}
html body .rs-cq .rs-cq__field input:hover {
border-color: #b9c5da;
}
html body .rs-cq .rs-cq__field input:focus {
border-color: #0b2dbe;
background: #fff;
box-shadow: 0 0 0 3px rgba(11, 45, 190, .1);
}
html body .rs-cq .rs-cq__field input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 40px #fff inset;
}
html body .rs-cq .rs-cq__actions {
padding-top: 0;
}
@media (min-width: 992px) {
html body .rs-cq .rs-cq__details {
margin-top: auto;
}
}
@media (max-width: 991px) {
html body .rs-cq .rs-cq__box {
grid-template-columns: minmax(0, 1fr);
}
html body .rs-cq .rs-cq__side {
padding: 0;
}
html body .rs-cq .rs-cq__form {
margin: 0;
border: 1px solid #e1e6f0;
}
html body .rs-cq .rs-cq__photo,
html body .rs-cq .rs-cq__photo--abstract {
width: 100%;
height: 100%;
}
html body .rs-cq .rs-cq__formhead {
min-height: 150px;
}
}
@media (max-width: 575px) {
html body .rs-cq .rs-cq__formhead {
grid-template-columns: minmax(0, 1fr);
gap: 8px;
min-height: 140px;
padding: 22px 20px;
}
html body .rs-cq .rs-cq__req {
white-space: normal;
}
html body .rs-cq .rs-cq__body {
gap: 20px;
padding: 22px 20px 26px;
}
html body .rs-cq .rs-cq__form {
padding: 0;
}
}
@media (prefers-reduced-motion: reduce) {
html body .rs-cq .rs-cq__photo img {
animation: none;
transform: scale(1.08);
}
}
/* Subscribe band inside the blog listing (2026-11-10): between the featured article and the posts, in
the featured article's mist panel (8px corners) with the same 56px below it, in the footer band's
layout (.rs-sub--foot). The selectors carry .rs-sub--foot as well, and the padding !important, to
outweigh the band's own padding: 0 !important */
html body .rs-sub.rs-sub--foot.rs-sub--blog {
margin: 0 0 56px;
padding: 0;
border: 0;
background: transparent;
}
html body .rs-sub.rs-sub--foot.rs-sub--blog > .container {
max-width: none;
padding: 0;
}
html body .rs-sub.rs-sub--foot.rs-sub--blog .rs-sub__banner {
padding: clamp(24px, 2.6vw, 40px) clamp(20px, 3vw, 48px) !important;
border: 0;
border-radius: 8px;
background: #f4f6fb;
}
@media (max-width: 767px) {
html body .rs-sub.rs-sub--foot.rs-sub--blog {
margin-bottom: 36px;
}
html body .rs-sub.rs-sub--foot.rs-sub--blog .rs-sub__banner {
padding: 22px 18px !important;
}
}
/* FAQ photo, v3 (2026-11-11): a smaller 16:10 frame on a crop centred on the two executives
(assets/images/faq/faq-executives-v2-*), sitting on the column's bottom line so the photo and the
questions end together */
html body .rs-faq-section .rs-faq-left > img.rs-faq-media,
html body.rs-home .rs-home-faq .rs-faq-left > img.rs-faq-media {
flex: none;
margin-top: 0;
width: 100%;
height: auto;
min-height: 0;
max-height: 312px;
aspect-ratio: 16 / 10;
object-fit: cover;
object-position: 50% 42%;
}
@media (max-width: 991px) {
html body .rs-faq-section .rs-faq-left > img.rs-faq-media,
html body.rs-home .rs-home-faq .rs-faq-left > img.rs-faq-media {
margin-top: 0;
max-height: none;
aspect-ratio: 16 / 10;
}
}
/* FAQ, balanced (2026-11-11): heading, intro and photo stay together as one block, and on desktop the
block stays in view beside the questions, so a long list never leaves a gap under the intro */
@media (min-width: 992px) {
html body .rs-faq-section .rs-faq-grid {
align-items: start;
}
html body .rs-faq-section .rs-faq-left {
position: sticky;
top: 120px;
align-self: start;
}
}
/* ---------- Newsletter band: the result of a sign-up (2026-11-11). The note under the field turns
brand blue on success and red on an error; the bot-trap field is kept off screen. ---------- */
html body .rs-sub .rs-sub__hp {
position: absolute !important;
right: -9999px !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
border: 0 !important;
opacity: 0;
}
html body .rs-sub .rs-sub__note.is-ok {
color: #0b2dbe;
font-weight: 500;
}
html body .rs-sub .rs-sub__note.is-err {
color: #b42318;
}
html body .rs-sub .rs-sub__btn[disabled] {
opacity: .6;
cursor: default;
}
/* desktop header logo 20% smaller (2026-11-11): 206px -> 165px over the hero. The slim scrolled bar
keeps its 115px mark; phones and tablets keep theirs (168px / 148px). */
@media (min-width: 1025px) {
html body header.main-header:not(.is-scrolled) .main-menu-logo img {
width: 165px;
max-width: 165px;
}
}