/* ==========================================================================
   Mortgage and Secured Lending Valuation Services in Dubai, UAE — page styles (v4, mirrors portfolio-valuation-dubai.css)
   Full from-scratch UI. Content/text is untouched — only structure, class
   hooks, imagery and this stylesheet changed.
     · Hero h1 + every section h2 (incl. the FAQ title) → Playfair Display
       (h2 32px desktop / 24px ≤767px); everything else → DM Sans (global)
     · ≤767px: dedicated MOBILE REFINEMENTS block at the end of this file
     · Sections → bottom padding only (50px)
     · Accent    → brand blue #092db6 → #1436d8, red #e21d37
     · Cards     → white, soft border, large soft shadows, 16-20px radius
   All rules are prefixed .mv-* so they never collide with the global bundle
   or other page-scoped stylesheets. Shared chrome (page-header-section base
   box model, breadcrumb, accordion FAQ) is left alone — only decorated.
   ========================================================================== */

:root {
    --blue: #092db6;
    --blue-mid: #1436d8;
    --blue-deep: #061b4d;
    --red: #e21d37;
    --ink: #0b1830;
    --muted: #5b6472;
    --line: #e8edf2;
    --surface: #f7f9fc;
    --shadow: 0 24px 60px -30px rgba(9, 45, 182, .35);
    --font-head: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-body: "DM Sans", sans-serif;
    --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
    --tint: #e8edfc;
}

/* Global site CSS sets a sitewide h1-h6 { font-family: "Sanomat", serif } rule
   (bundle.css) whose font files 404, so any heading below h1/h2 that doesn't
   get an explicit family here falls through to a broken-serif fallback
   instead of inheriting DM Sans from body. Every h3 on this page must
   therefore declare font-family explicitly rather than relying on
   inheritance. */

/* ==========================================================================
   TYPE — h1/h2 use the system font stack site-wide default is DM Sans, so
   only these two levels are overridden. Scoped to this page's own markup.
   ========================================================================== */
.page-header-heading h1.rs-page-h1 {
    font-family: var(--font-serif);
    font-weight: 400;
}

/* MAIN HEADINGS — every section heading (h2) on this page shares one family
   and one size: Playfair Display at 32px. Section variants below only set
   colour / margins / width, never font-family or font-size. */
.mv-h2,
.mv-open-split h2,
.mv-cta h2 {
    font-family: var(--font-serif);
    font-size: 32px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
}

.mv-h2 {
    color: var(--ink);
    margin: 0 0 16px;
}

/* FAQ title comes from the sitewide FAQ component (bundle.css / mobile.css
   force Sanomat with !important), so match it here with extra specificity. */
.pb-5.rs-faq-section .rs-faq-heading {
    font-family: var(--font-serif) !important;
    font-size: 32px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
}

/* Section labels — every label on the page matches the "Our Process"
   kicker (.mv-kicker): plain uppercase brand blue, wide tracking, no
   leading line or dot. */
.mv-eyebrow {
    display: inline-flex;
    align-items: center;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 18px;
}

.mv-body-text p {
    font-size: 16px;
    line-height: 1.75;
    color: var(--muted);
    margin: 0 0 16px;
}

.mv-body-text p:last-child {
    margin-bottom: 0;
}

.mv-body-text a {
    color: var(--blue);
    text-decoration: underline;
    text-decoration-color: rgba(9, 45, 182, .35);
}

.mv-head {
    max-width: 740px;
    margin: 0 auto 46px;
    text-align: center;
}

.mv-head .mv-eyebrow {
    justify-content: center;
}

.mv-head .mv-h2 {
    margin-bottom: 10px;
}

.mv-head>p {
    font-size: 16px;
    color: var(--muted);
    margin: 0;
}

/* ==========================================================================
   LAYOUT RHYTHM
   ========================================================================== */
/* Every section on this page: bottom padding only (50px), at all widths. */
.mv-section {
    position: relative;
    padding: 0 0 50px;
    background: #fff;
    overflow: hidden;
}

/* first section sits straight under the hero banner — keep the same 50px
   of breathing room above it so its label doesn't touch the photo edge */
.mv-section.mv-about {
    padding-top: 50px;
}

/* sitewide FAQ block (bundle.css 70px/90px, Bootstrap .pb-5, mobile.css
   20px — all !important-backed) brought in line with the sections above */
.pb-5.rs-faq-section {
    padding: 0 0 50px !important;
}


.mv-section>.container {
    position: relative;
    z-index: 1;
}

.mv-section--decor {
    isolation: isolate;
    padding-top: 50px;
}

/* Extra per-section decoration hooks — every section gets a photo, a real
   texture image, or a CSS "abstract" blob so nothing reads as flat/empty. */
.mv-section--methods,
.mv-section--docs {
    isolation: isolate;
    padding-top: 50px;
}

.mv-section--methods::before,
.mv-section--docs::before {
    content: "";
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(70px);
}

.mv-section--methods::before {
    bottom: -140px;
    right: -100px;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(226, 29, 55, .07) 0%, rgba(226, 29, 55, 0) 70%);
}

.mv-section--docs::before {
    bottom: -140px;
    left: -100px;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(9, 45, 182, .08) 0%, rgba(9, 45, 182, 0) 70%);
}

.mv-section--cost {
    position: relative;
    isolation: isolate;
    padding-top: 50px;
}

.mv-section--cost::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('../images/background/market-report-texture.png');
    background-size: cover;
    background-position: center;
    opacity: .045;
    pointer-events: none;
}

/* Texture sections: a real image asset laid in at low opacity for grain,
   instead of another flat gradient. */
.mv-texture {
    position: relative;
    isolation: isolate;
    padding-top: 50px;
}

.mv-texture::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('../images/background/service-texture-bg.webp');
    background-size: cover;
    background-position: center;
    opacity: .05;
    pointer-events: none;
}

.mv-texture>.container {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   HERO BANNER DECORATION (structure/height untouched — decoration only)
   ========================================================================== */
.page-header-heading .mv-banner-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .3);
    padding: 6px 16px;
    border-radius: 30px;
    margin-bottom: 16px;
    backdrop-filter: blur(4px);
}

.page-header-section {
    isolation: isolate;
}

.page-header-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(6, 14, 38, .66) 0%, rgba(6, 14, 38, .40) 45%, rgba(6, 14, 38, .18) 75%, rgba(6, 14, 38, .08) 100%);
}

.page-header-section>.container {
    position: relative;
    z-index: 1;
}

.mv-hero-ring {
    position: absolute;
    top: 12%;
    right: 6%;
    width: 280px;
    height: 280px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

.mv-hero-ring::before {
    content: "";
    position: absolute;
    inset: 34px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
}

@media (max-width: 1199px) {
    .mv-hero-ring {
        display: none;
    }
}

/* ==========================================================================
   SHARED — dot label + two-tone heading accent (About / Related sections)
   ========================================================================== */
.mv-dot-label {
    display: inline-flex;
    align-items: center;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--blue);
}

.mv-accent {
    color: var(--blue);
}

/* ==========================================================================
   WHAT IS PORTFOLIO VALUATION — label column + heading / copy / photo,
   with the intro CTA bar attached to the bottom of the photo.
   ========================================================================== */
/* Single full-width column: the dot label sits above the heading so the
   copy, columns and photo all span 100% of the container. */
.mv-about__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 18px;
}

.mv-h2.mv-about__title {
    margin: 0 0 22px;
}

.mv-about__lead {
    margin: 0;
    font-size: 17px;
    line-height: 1.75;
    color: #2a3550;
}

.mv-about__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 48px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--line);
}

.mv-about__cols p {
    position: relative;
    margin: 0;
    font-size: 15px;
    line-height: 1.75;
    color: var(--muted);
}

/* short brand-blue tick sitting on the divider above each column */
/* .mv-about__cols p::before {
    content: "";
    position: absolute;
    top: -29px;
    left: 0;
    width: 44px;
    height: 2px;
    background: var(--blue);
} */

.mv-about__media {
    margin-top: 20px;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.mv-about__img {
    position: relative;
    margin: 0;
    overflow: hidden;
    isolation: isolate;
}

.mv-about__img img {
    display: block;
    width: 100%;
    height: 250px;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    object-position: center 58%;
    transition: transform .9s ease;
}

.mv-about__media:hover .mv-about__img img {
    transform: scale(1.04);
}

.mv-about__img figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 48px 24px 18px;
    font-size: 13px;
    line-height: 1.5;
    color: #fff;
    background: linear-gradient(0deg, rgba(6, 14, 38, .78) 0%, rgba(6, 14, 38, 0) 100%);
}

.mv-about__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px 28px;
    padding: 24px 28px;
}

.mv-about__cta-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 1 360px;
    min-width: 0;
}

.mv-about__cta-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--blue);
    color: #fff;
    font-size: 18px;
}

.mv-about__cta-left p {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: #2a3550;
}

.mv-about__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.mv-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 24px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--blue), var(--blue-mid));
    color: #fff;
    font-size: 14.5px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 14px 26px -12px rgba(9, 45, 182, .55);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
    border: 1px solid transparent;
}

.mv-btn i,
.mv-btn svg {
    font-size: 13px;
    transition: transform .25s ease;
}

.mv-btn:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 18px 30px -12px rgba(9, 45, 182, .6);
}

.mv-btn:hover i {
    transform: translateX(3px);
}

.mv-btn--outline {
    background: #fff;
    color: var(--blue);
    border: 1px solid var(--line);
    box-shadow: none;
}

.mv-btn--outline:hover {
    color: var(--blue);
    background: #eef2fd;
    border-color: #d9e2fa;
    box-shadow: none;
}

.mv-btn--light {
    background: #fff;
    color: var(--blue);
    box-shadow: 0 14px 26px -12px rgba(0, 0, 0, .25);
}

.mv-btn--light:hover {
    color: var(--blue);
    background: #f2f5fd;
}

.mv-btn--ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .45);
    color: #fff;
    box-shadow: none;
}

.mv-btn--ghost:hover {
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .7);
}

/* ==========================================================================
   PHOTO BADGE — pill floated over the top-left of a photo
   ========================================================================== */
.mv-figure__badge {
    position: absolute;
    left: 18px;
    top: 18px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 30px;
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(6px);
    color: var(--blue);
    font-size: 12.5px;
    font-weight: 500;
    box-shadow: 0 10px 24px -8px rgba(9, 45, 182, .4);
}

.mv-figure__badge i {
    color: var(--red);
}

/* ==========================================================================
   FEATURE GRID / SWIPER CARDS
   ========================================================================== */
.mv-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.mv-feature-grid--tight {
    grid-template-columns: repeat(4, 1fr);
}

.mv-feature {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 26px 22px;
    height: 100%;
    box-shadow: 0 18px 40px -30px rgba(15, 30, 70, .25);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.mv-feature:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 46px -26px rgba(9, 45, 182, .32);
    border-color: #d9e2fa;
}

.mv-feature__ico {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #eef2fd;
    color: var(--blue);
    font-size: 18px;
    transition: background .3s ease, color .3s ease, transform .3s ease;
}

.mv-feature:hover .mv-feature__ico {
    background: linear-gradient(145deg, var(--blue), var(--blue-mid));
    color: #fff;
    transform: rotate(-6deg) scale(1.05);
}

.mv-feature h3 {
    font-family: var(--font-body);
    font-size: 16.5px;
    font-weight: 500;
    color: var(--ink);
    margin: 0 0 6px;
    line-height: 1.35;
}

.mv-feature p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
    margin: 0;
}

/* Circular carousel arrow (Related Services header) */
.mv-swiper-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: all .25s ease;
    flex-shrink: 0;
}

.mv-swiper-btn:hover {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
    transform: translateY(-2px);
}

/* ==========================================================================
   WHY IT MATTERS — block mosaic: light header panel (heading + arched
   photo) over a navy tile + light text panel, tall blue tile on the right.
   ========================================================================== */
.mv-mosaic {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 16px;
}

.mv-mosaic__main {
    display: grid;
    grid-template-rows: auto 1fr;
    border-radius: 16px;
    overflow: hidden;
}

.mv-mosaic__head {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 300px;
    padding: 48px 52px;
    background: #dfe6f6;
    overflow: hidden;
    isolation: isolate;
}

.mv-mosaic__copy {
    position: relative;
    z-index: 1;
    max-width: calc(100% - 290px);
}

.mv-h2.mv-mosaic__title {
    margin: 16px 0 0;
}

/* tall arch-shaped photo standing on the bottom edge of the panel */
.mv-mosaic__arch {
    position: absolute;
    right: 64px;
    bottom: 0;
    width: 200px;
    height: calc(100% - 36px);
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    box-shadow: 0 30px 60px -30px rgba(6, 27, 77, .55);
}

.mv-mosaic__arch::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(9, 45, 182, .18) 0%, rgba(9, 45, 182, 0) 45%);
    pointer-events: none;
}

.mv-mosaic__arch img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 35% center;
    transition: transform .9s ease;
}

.mv-mosaic__head:hover .mv-mosaic__arch img {
    transform: scale(1.06);
}

.mv-mosaic__row {
    display: grid;
    grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
}

.mv-mosaic__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(9, 45, 182, .1);
    color: var(--blue);
    font-size: 15px;
}

.mv-mosaic h3 {
    font-family: var(--font-body);
    font-weight: 500;
}

/* navy tile */
.mv-mosaic__dark {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 38px;
    background: var(--blue-deep);
    color: #fff;
}

.mv-mosaic__dark .mv-mosaic__ico,
.mv-mosaic__side .mv-mosaic__ico {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    margin-bottom: 18px;
}

.mv-mosaic__dark h3 {
    font-size: 21px;
    line-height: 1.3;
    color: #fff;
    margin: 0 0 10px;
}

.mv-mosaic__dark p {
    font-size: 14px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .72);
    margin: 0;
}

/* light text panel — 2 × 2 items */
.mv-mosaic__text {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 32px;
    padding: 36px 40px;
    background: #eef2fb;
}

.mv-mosaic__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.mv-mosaic__item h3 {
    font-size: 15.5px;
    line-height: 1.35;
    color: var(--ink);
    margin: 7px 0 6px;
}

.mv-mosaic__item p {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--muted);
    margin: 0;
}

.mv-mosaic__item .mv-mosaic__ico {
    transition: background-color .35s ease, color .35s ease;
}

.mv-mosaic__item:hover .mv-mosaic__ico {
    background: var(--blue);
    color: #fff;
}

/* tall blue side tile */
.mv-mosaic__side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 40px 32px 32px;
    border-radius: 16px;
    background:
        radial-gradient(90% 60% at 100% 0%, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 60%),
        var(--blue);
    color: #fff;
}

.mv-mosaic__side h3 {
    font-size: 24px;
    line-height: 1.25;
    color: #fff;
    margin: 0 0 14px;
}

.mv-mosaic__side p {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .8);
    margin: 0 0 28px;
}

.mv-mosaic__btn {
    align-self: stretch;
    margin-top: auto;
    padding: 13px 20px;
    border-radius: 40px;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    transition: background-color .35s ease, color .35s ease;
}

.mv-mosaic__btn:hover,
.mv-mosaic__btn:focus-visible {
    background: #fff;
    color: var(--blue);
}

/* ==========================================================================
   DECORATIVE BLOBS
   ========================================================================== */
.mv-blob {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(70px);
}

.mv-blob--tr {
    top: -140px;
    right: -120px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(9, 45, 182, .12) 0%, rgba(9, 45, 182, 0) 70%);
}

/* ==========================================================================
   CHIPS (audience / asset-type / factor tags)
   ========================================================================== */
.mv-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.mv-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 18px 10px 10px;
    border-radius: 30px;
    background: #eef2fd;
    color: var(--blue-deep);
    font-size: 14px;
    font-weight: 500;
    border: 1px solid transparent;
    transition: all .28s ease;
}

.mv-chip:hover {
    background: linear-gradient(135deg, var(--blue), var(--blue-mid));
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 14px 24px -12px rgba(9, 45, 182, .5);
}

.mv-chip__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    color: var(--blue);
    font-size: 11.5px;
    flex-shrink: 0;
    transition: color .28s ease;
}

/* ==========================================================================
   COVERAGE — split banner: deep navy copy panel left, photo right
   ========================================================================== */
.mv-cover {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    border-radius: 16px;
    overflow: hidden;
    /* box-shadow: 0 40px 80px -48px rgba(6, 29, 134, .6); */
}

.mv-cover__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 48px 52px 46px;
    background:
        radial-gradient(80% 60% at 0% 0%, rgba(20, 54, 216, .45) 0%, rgba(20, 54, 216, 0) 60%),
        #061d86;
    color: #fff;
    isolation: isolate;
}

/* same label style as .mv-kicker; light blue instead of brand blue so it
   stays readable on the navy panel */
.mv-cover__eyebrow {
    display: inline-flex;
    align-items: center;
    margin-bottom: 18px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #b3c6ff;
}

.mv-h2.mv-cover__title {
    margin: 0 0 14px;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: #fff;
}

.mv-cover__intro {
    margin: 0 0 14px;
    font-size: 15.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .8);
}

.mv-cover__list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mv-cover__list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    font-size: 14px;
    line-height: 1.45;
    color: #fff;
}

.mv-cover__ico {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .1);
    color: #bcd0ff;
    font-size: 12.5px;
}

.mv-cover__note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 18px 0 24px;
    font-size: 12.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .62);
}

.mv-cover__note i {
    margin-top: 3px;
    color: rgba(255, 255, 255, .7);
}

/* outlined pill button, fills white on hover */
.mv-cover__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding: 11px 24px;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 40px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}

.mv-cover__btn i {
    font-size: 12px;
    transition: transform .35s ease;
}

.mv-cover__btn:hover,
.mv-cover__btn:focus-visible {
    background-color: #fff;
    border-color: #fff;
    color: var(--blue);
}

.mv-cover__btn:hover i {
    transform: translateX(4px);
}

.mv-cover__media {
    position: relative;
    min-height: 420px;
    overflow: hidden;
}

.mv-cover__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s ease;
}

.mv-cover:hover .mv-cover__media img {
    transform: scale(1.04);
}

.mv-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #eef2fd;
    color: var(--blue);
    font-size: 16px;
    flex-shrink: 0;
}

.mv-ico--sm {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-size: 14px;
}

/* ==========================================================================
   NOTES / CALLOUTS
   ========================================================================== */
.mv-note {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 30px;
    padding: 18px 22px;
    border-radius: 14px;
    background: #eef2fd;
    border-left: 3px solid var(--blue);
}

.mv-note i {
    color: var(--blue);
    font-size: 18px;
    margin-top: 2px;
}

.mv-note p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--muted);
}

/* ==========================================================================
   SHARED — plain kicker + serif display heading used by the three
   reference-matched sections (How it works / Why choose us / Report).
   ========================================================================== */
.mv-kicker {
    display: block;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 18px;
}

.mv-h2.mv-serif {
    color: var(--ink);
    margin: 0;
    text-wrap: balance;
}

/* ==========================================================================
   HOW IT WORKS — solid brand-blue numbered cards
   ========================================================================== */
.mv-how {
    background: #f4f6fb;
    padding-top: 50px;
}

.mv-how__head {
    max-width: 720px;
    margin-bottom: 44px;
}

.mv-how__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

/* Cards rest on a light surface and fill with brand blue on hover; every
   colour change shares one easing/duration so the swap reads as one fade. */
.mv-how__card {
    --how-ease: .45s cubic-bezier(.22, .61, .36, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 290px;
    padding: 24px 24px 28px;
    border-radius: 12px;
    background-color: var(--tint);
    border-color: transparent;
    color: var(--ink);
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--how-ease), box-shadow var(--how-ease), background-color var(--how-ease), border-color var(--how-ease);
}

/* Corner glows: a faint blue one at rest, cross-faded to a white one on
   hover (gradients can't transition, so two layers swap opacity). */
.mv-how__card::before,
.mv-how__card::after {
    content: "";
    position: absolute;
    top: -90px;
    right: -90px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
    transition: opacity var(--how-ease), transform .6s ease;
}

.mv-how__card::before {
    background: radial-gradient(circle, rgba(9, 45, 182, .08) 0%, rgba(9, 45, 182, 0) 70%);
}

.mv-how__card::after {
    background: radial-gradient(circle, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 70%);
    opacity: 0;
}

.mv-how__card:hover,
.mv-how__card:focus-visible {
    transform: translateY(-6px);
    background-color: var(--blue);
    border-color: var(--blue);
    box-shadow: 0 26px 44px -24px rgba(9, 45, 182, .6);
}

.mv-how__card:hover::before,
.mv-how__card:focus-visible::before {
    opacity: 0;
}

.mv-how__card:hover::after,
.mv-how__card:focus-visible::after {
    opacity: 1;
    transform: scale(1.35);
}

.mv-how__num {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .12em;
    color: rgba(9, 45, 182, .75);
    transition: color var(--how-ease);
}

.mv-how__ico {
    display: block;
    width: 36px;
    height: 36px;
    margin: 22px 0 38px;
    color: var(--blue);
    transition: color var(--how-ease), transform var(--how-ease);
}

.mv-how__ico svg {
    display: block;
    width: 100%;
    height: 100%;
}

.mv-how__card h3 {
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--ink);
    margin: 0 0 12px;
    transition: color var(--how-ease);
}

.mv-how__card p {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--muted);
    margin: 0;
    transition: color var(--how-ease);
}

.mv-how__card:hover .mv-how__num,
.mv-how__card:focus-visible .mv-how__num {
    color: rgba(255, 255, 255, .72);
}

.mv-how__card:hover .mv-how__ico,
.mv-how__card:focus-visible .mv-how__ico {
    color: rgba(255, 255, 255, .85);
    transform: translateY(-3px);
}

.mv-how__card:hover h3,
.mv-how__card:focus-visible h3 {
    color: #fff;
}

.mv-how__card:hover p,
.mv-how__card:focus-visible p {
    color: rgba(255, 255, 255, .84);
}

/* 8th tile — the process CTA: light tint at rest (vs white steps) so it
   still reads as the action, same blue fill on hover. */
.mv-how__card--cta {
    background-color: var(--tint);
    border-color: transparent;
}

.mv-how__card--cta .mv-how__ico {
    margin-top: 38px;
}

.mv-how__cta-text {
    font-size: 20px;
    line-height: 1.3;
    color: var(--ink);
    margin-bottom: 26px;
    transition: color var(--how-ease);
}

.mv-how__go {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--blue);
    color: #fff;
    font-size: 14px;
    transition: transform var(--how-ease), background-color var(--how-ease), color var(--how-ease);
}

.mv-how__card--cta:hover .mv-how__cta-text,
.mv-how__card--cta:focus-visible .mv-how__cta-text {
    color: #fff;
}

.mv-how__card--cta:hover .mv-how__go,
.mv-how__card--cta:focus-visible .mv-how__go {
    transform: translateX(4px);
    background-color: #fff;
    color: var(--blue);
}

.mv-inline-cta {
    text-align: center;
    margin-top: 46px;
}

/* ==========================================================================
   DOCUMENTS REQUIRED — editorial photo cards (image, round icon badge,
   title below), 4 per row. Static — no hover effects. The note sits
   underneath as a full-width solid brand-blue strip.
   ========================================================================== */
.mv-docs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 34px 24px;
}

.mv-doc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mv-doc-card__media {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

.mv-doc-card__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 11;
    object-fit: cover;
}

.mv-doc-card__badge {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    color: var(--blue);
    font-size: 13px;
    box-shadow: 0 8px 18px -8px rgba(6, 27, 77, .45);
}

.mv-doc-card__body {
    padding: 18px 2px 0;
}

/* two-line minimum so every title row lines up */
.mv-doc-card__body h3 {
    min-height: calc(2 * 1.35em);
    margin: 0;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--blue-deep);
}

/* Note — full-width solid blue strip under the two card rows */
.mv-doc-card--note {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 18px;
    padding: 24px 30px;
    border-radius: 12px;
    background-color: var(--blue);
}

.mv-doc-card--note .mv-doc-card__badge {
    position: static;
}

.mv-doc-card--note p {
    margin: 0;
    font-size: 19px;
    line-height: 1.4;
    color: #fff;
}

/* ==========================================================================
   REPORT CONTENTS — text + bullets left, dark brand "dashboard" panel right
   ========================================================================== */
.mv-dash-section {
    background: #f4f6fb;
    padding-top: 50px;
}

.mv-dash-section .mv-h2.mv-serif {
    max-width: 560px;
}

.mv-dash-intro {
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink);
    margin: 22px 0 22px;
    max-width: 520px;
}

.mv-dash-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px 28px;
}

.mv-dash-list li {
    position: relative;
    padding-left: 18px;
    font-size: 14.5px;
    line-height: 1.5;
    color: #2a3550;
}

.mv-dash-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .58em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue);
}

.mv-dash {
    position: relative;
    padding: 30px 32px 34px;
    border-radius: 16px;
    background: linear-gradient(150deg, #0E3FA8 0%, #1436D8 48%, #0B2DBE 100%);
    color: #fff;
    overflow: hidden;
    box-shadow: 0 40px 80px -44px rgba(6, 27, 77, .7);
}

.mv-dash__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.mv-dash__top i {
    font-size: 15px;
    letter-spacing: 0;
    color: rgba(255, 255, 255, .7);
}

.mv-dash__num {
    display: block;
    margin-top: 40px;
    font-family: var(--font-body);
    font-size: 72px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.02em;
}

.mv-dash__label {
    display: block;
    margin: 12px 0 30px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

/* 12-segment bar: one segment per report component, filled in sequence
   when the column is revealed by wow.js (.animated). */
.mv-dash__bar {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 5px;
}

.mv-dash__bar i {
    display: block;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .88);
    transform-origin: left center;
}

.animated .mv-dash__bar i {
    animation: mvSegFill .5s ease both;
    animation-delay: calc(var(--i) * 70ms + 300ms);
}

@keyframes mvSegFill {
    from {
        transform: scaleX(0);
        opacity: .2;
    }

    to {
        transform: scaleX(1);
        opacity: 1;
    }
}

.mv-dash__scale {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    font-size: 11px;
    letter-spacing: .1em;
    color: rgba(255, 255, 255, .5);
}

.mv-dash p {
    margin: 22px 0 0;
    font-size: 14.5px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .78);
}

/* ==========================================================================
   OPEN SPLIT (cost / turnaround)
   ========================================================================== */
.mv-open-split {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.mv-open-split__col {
    position: relative;
    padding-left: 30px;
}

.mv-open-split__col:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: -20px;
    width: 1px;
    background: var(--line);
}

.mv-open-split .mv-ico {
    margin-bottom: 16px;
}

.mv-open-split h2 {
    color: var(--ink);
    margin: 0 0 12px;
}

.mv-open-split p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted);
    margin: 0 0 12px;
}

.mv-open-split p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   WHY CHOOSE US — heading/description row + bento grid of tiles
   ========================================================================== */
.mv-bento-section {
    background: #f4f6fb;
}

.mv-bento-head .mv-h2.mv-serif {
    max-width: 520px;
}

.mv-bento-head__text p {
    font-size: 15px;
    line-height: 1.7;
    color: #2a3550;
    margin: 0 0 12px;
}

.mv-bento-head__text p:last-child {
    margin-bottom: 0;
}

.mv-bento {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
        "quote chart stat-a"
        "quote stat-b list";
    gap: 20px;
    margin-top: 52px;
}

.mv-bento__tile {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 30px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #e6ebf5;
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease;
}

.mv-bento__tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 50px -34px rgba(9, 45, 182, .45);
}

.mv-bento__tile--tint {
    background: var(--tint);
    border-color: transparent;
}

.mv-bento__quote {
    grid-area: quote;
    justify-content: space-between;
    margin: 0;
}

.mv-bento__chart {
    grid-area: chart;
}

.mv-bento__stat--a {
    grid-area: stat-a;
}

.mv-bento__stat--b {
    grid-area: stat-b;
}

.mv-bento__list {
    grid-area: list;
}

/* Quote */
.mv-bento__quote blockquote {
    margin: 0 0 48px;
    font-family: var(--font-body);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--ink);
}

.mv-bento__quote blockquote::before {
    content: "\201C";
}

.mv-bento__quote blockquote::after {
    content: "\201D";
}

.mv-bento__quote figcaption p,
.mv-bento__stat p {
    font-size: 13.5px;
    line-height: 1.6;
    color: #3d4a66;
    margin: 0;
}

.mv-bento__name {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--ink);
    margin: 0 0 8px;
}

.mv-bento__name--dash::before {
    content: "\2013\00a0";
}

/* Big-number stat tiles */
.mv-bento__big {
    display: block;
    margin-bottom: 44px;
    font-family: var(--font-body);
    font-size: 58px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--ink);
}

/* Chart tile */
.mv-bento__chart-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.mv-bento__chart-num {
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
    color: var(--ink);
}

.mv-bento__pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 20px;
    background: var(--blue-mid);
    color: #fff;
    font-size: 10px;
}

.mv-bento__chart-body {
    position: relative;
    flex: 1;
    min-height: 150px;
}

.mv-bento__svg {
    position: absolute;
    left: -30px;
    right: -30px;
    bottom: -30px;
    width: calc(100% + 60px);
    height: 120px;
}

.mv-bento__tip {
    position: relative;
    z-index: 1;
    margin-left: auto;
    width: 62%;
    padding: 12px 14px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e6ebf5;
    box-shadow: 0 16px 30px -18px rgba(9, 45, 182, .35);
}

.mv-bento__tip h3 {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    margin: 0 0 4px;
}

.mv-bento__tip p {
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted);
    margin: 0;
}

/* Offices list tile — mini "app panel" floated on a faint UAE map */
.mv-bento__list {
    justify-content: center;
    isolation: isolate;
}

.mv-bento__list::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url('../images/background/Map.jpg');
    background-size: cover;
    background-position: center;
    opacity: .07;
    pointer-events: none;
}

.mv-bento__panel {
    padding: 16px 18px 8px;
    border-radius: 12px;
    background: #fff;
    /* border: 1px solid #e6ebf5; */
    /* box-shadow: 0 18px 36px -24px rgba(9, 45, 182, .35); */
}

.mv-bento__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
}

.mv-bento__panel-head i {
    color: var(--blue-mid);
    font-size: 14px;
}

.mv-bento__panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mv-bento__panel li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid #eef1f7;
    font-size: 13.5px;
    color: #2a3550;
}

.mv-bento__panel li > span:nth-child(2) {
    flex: 1;
}

.mv-bento__panel li i {
    font-size: 12px;
    color: #9db2f5;
}

.mv-bento__dot {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--blue);
}

.mv-bento__panel li:nth-child(2) .mv-bento__dot {
    background: var(--blue-mid);
}

.mv-bento__panel li:nth-child(3) .mv-bento__dot {
    background: #6f8cf0;
}

.mv-bento__panel li:nth-child(4) .mv-bento__dot {
    background: #b5c5f7;
}

/* ==========================================================================
   RELATED SERVICES — header row (label / two-tone heading / arrows) +
   autoplay slider of tall cards alternating deep navy and light tint.
   ========================================================================== */
.mv-rel__head {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) auto;
    align-items: start;
    gap: 20px 40px;
    margin-bottom: 52px;
}

.mv-rel__head .mv-dot-label {
    padding-top: 16px;
}

.mv-h2.mv-rel__title {
    max-width: 720px;
    margin: 0;
}

.mv-rel__nav {
    display: flex;
    gap: 10px;
    padding-top: 8px;
}

.mv-rel__slider .swiper {
    overflow: hidden;
    padding: 8px 2px 14px;
}

.mv-rel__slider .swiper-slide {
    height: auto;
    display: flex;
}

.mv-rel__card {
    --rel-ease: .45s cubic-bezier(.22, .61, .36, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    min-height: 380px;
    padding: 28px 26px 26px;
    border-radius: 12px;
    background-color: var(--tint);
    color: var(--ink);
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--rel-ease), box-shadow var(--rel-ease), background-color var(--rel-ease), color var(--rel-ease);
}

/* alternate: every other card is deep brand navy */
.mv-rel__slider .swiper-slide:nth-child(odd) .mv-rel__card {
    background-color: #061d86;
    color: #fff;
}

.mv-rel__card::after {
    content: "";
    position: absolute;
    right: -80px;
    bottom: -80px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    z-index: -1;
    background: radial-gradient(circle, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 70%);
    opacity: 0;
    transition: opacity var(--rel-ease), transform .6s ease;
}

.mv-rel__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1.5px solid currentColor;
    border-radius: 6px;
    color: var(--blue);
    transition: color var(--rel-ease), transform var(--rel-ease);
}

.mv-rel__slider .swiper-slide:nth-child(odd) .mv-rel__ico {
    color: rgba(255, 255, 255, .85);
}

.mv-rel__ico svg {
    width: 24px;
    height: 24px;
}

.mv-rel__card h3 {
    font-family: var(--font-body);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.3;
    color: inherit;
    margin: 0 0 18px;
}

.mv-rel__more {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid currentColor;
    border-top-color: rgba(9, 45, 182, .18);
    font-size: 13.5px;
    color: var(--blue);
    transition: color var(--rel-ease), border-color var(--rel-ease);
}

.mv-rel__slider .swiper-slide:nth-child(odd) .mv-rel__more {
    color: rgba(255, 255, 255, .78);
    border-top-color: rgba(255, 255, 255, .2);
}

.mv-rel__more i {
    font-size: 12px;
    transition: transform var(--rel-ease);
}

/* hover: both variants settle on the same brand blue */
.mv-rel__slider .swiper-slide .mv-rel__card:hover,
.mv-rel__slider .swiper-slide .mv-rel__card:focus-visible {
    background-color: var(--blue);
    color: #fff;
    transform: translateY(-6px);
    box-shadow: 0 26px 44px -24px rgba(9, 45, 182, .55);
}

.mv-rel__card:hover::after,
.mv-rel__card:focus-visible::after {
    opacity: 1;
    transform: scale(1.3);
}

.mv-rel__slider .swiper-slide .mv-rel__card:hover .mv-rel__ico,
.mv-rel__slider .swiper-slide .mv-rel__card:focus-visible .mv-rel__ico {
    color: #fff;
    transform: translateY(-3px);
}

.mv-rel__slider .swiper-slide .mv-rel__card:hover .mv-rel__more,
.mv-rel__slider .swiper-slide .mv-rel__card:focus-visible .mv-rel__more {
    color: #fff;
    border-top-color: rgba(255, 255, 255, .3);
}

.mv-rel__card:hover .mv-rel__more i,
.mv-rel__card:focus-visible .mv-rel__more i {
    transform: translateX(5px);
}

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.mv-cta {
    position: relative;
    isolation: isolate;
    text-align: center;
    max-width:100%;
    margin: 0 auto;
    padding: 64px 48px;
    border-radius: 26px;
    background: linear-gradient(135deg, var(--blue) 0%, var(--blue-mid) 100%);
    color: #fff;
    overflow: hidden;
}

.mv-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('../images/background/banner-two-bg.png');
    background-size: cover;
    background-position: center;
    opacity: .16;
    pointer-events: none;
}

.mv-cta>* {
    position: relative;
    z-index: 1;
}

.mv-cta h2 {
    color: #fff;
    margin: 0 0 16px;
}

.mv-cta p {
    font-size: 15.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .85);
    max-width: 680px;
    margin: 0 auto 30px;
}

.mv-cta__disclaimer {
    font-size: 13px !important;
    color: rgba(255, 255, 255, .65) !important;
}

.mv-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

/* ==========================================================================
   ABSTRACT background blobs (Why Choose Us / CTA)
   ========================================================================== */
.mv-abstract {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(60px);
}

.mv-abstract--three {
    top: -90px;
    left: -60px;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 70%);
}

.mv-abstract--four {
    bottom: -110px;
    right: -60px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 70%);
}

.mv-abstract--light-two {
    bottom: -100px;
    left: -80px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(20, 54, 216, .08) 0%, rgba(20, 54, 216, 0) 70%);
}

section.mv-section.mv-rel {
 padding-top: 50px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1199px) {
    .mv-feature-grid--tight {
        grid-template-columns: repeat(2, 1fr);
    }

    /* narrower 4-up document cards: smaller titles so they stay on 2 lines */
    .mv-doc-card__body h3 {
        font-size: 16px;
    }

    /* side tile drops below the main block and runs full width */
    .mv-mosaic {
        grid-template-columns: 1fr;
    }

    .mv-mosaic__side {
        padding: 34px 36px;
    }

    .mv-mosaic__btn {
        align-self: flex-start;
        padding: 13px 28px;
    }

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

    .mv-how__card {
        min-height: 0;
    }

    .mv-rel__head {
        grid-template-columns: 170px minmax(0, 1fr) auto;
        column-gap: 28px;
    }
}

@media (max-width: 991px) {
    .mv-docs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mv-head {
        margin-bottom: 34px;
    }

    .mv-about__grid {
        row-gap: 14px;
    }

    .mv-rel__head .mv-dot-label {
        padding-top: 0;
    }

    .mv-rel__head {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "label label"
            "title nav";
        align-items: end;
        row-gap: 14px;
        margin-bottom: 36px;
    }

    .mv-rel__head .mv-dot-label {
        grid-area: label;
    }

    .mv-rel__title {
        grid-area: title;
    }

    .mv-rel__nav {
        grid-area: nav;
        padding-top: 0;
    }

    .mv-about__media {
        margin-top: 36px;
    }

    .mv-feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mv-mosaic__row {
        grid-template-columns: 1fr;
    }

    .mv-mosaic__arch {
        right: 36px;
        width: 160px;
    }

    .mv-mosaic__copy {
        max-width: calc(100% - 210px);
    }

    /* banner stacks: copy panel on top, photo below */
    .mv-cover {
        grid-template-columns: 1fr;
    }

    .mv-cover__panel {
        padding: 44px 36px 40px;
    }

    .mv-cover__media {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .mv-open-split {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .mv-open-split__col:not(:first-child)::before {
        display: none;
    }

    .mv-bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "quote quote"
            "chart stat-a"
            "stat-b list";
        margin-top: 40px;
    }

    .mv-bento__quote blockquote {
        margin-bottom: 32px;
    }

    .mv-how__head {
        margin-bottom: 34px;
    }
}

@media (max-width: 767px) {
    .mv-feature-grid,
    .mv-feature-grid--tight,
    .mv-docs,
    .mv-dash-list,
    .mv-cover__list {
        grid-template-columns: 1fr;
    }

    .mv-doc-card--note {
        align-items: flex-start;
        padding: 22px;
    }

    .mv-doc-card--note p {
        font-size: 17px;
    }

    /* header panel stacks: copy, then the arch standing on the bottom edge */
    .mv-mosaic__head {
        flex-direction: column;
        align-items: flex-start;
        min-height: 0;
        padding: 34px 24px 0;
    }

    .mv-mosaic__copy {
        max-width: none;
    }

    .mv-mosaic__arch {
        position: relative;
        right: auto;
        align-self: flex-end;
        width: 150px;
        height: 190px;
        margin-top: 24px;
    }

    .mv-mosaic__dark,
    .mv-mosaic__text,
    .mv-mosaic__side {
        padding: 30px 24px;
    }

    .mv-mosaic__text {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .mv-mosaic__btn {
        align-self: stretch;
    }

    .mv-cover__panel {
        padding: 34px 22px 32px;
    }

    .mv-cover__media {
        aspect-ratio: 4 / 3;
    }

    .mv-how__grid {
        grid-template-columns: 1fr;
    }

    .mv-how__ico {
        margin-bottom: 26px;
    }

    .mv-bento {
        grid-template-columns: 1fr;
        grid-template-areas:
            "quote"
            "chart"
            "stat-a"
            "stat-b"
            "list";
        gap: 16px;
    }

    .mv-bento__tile {
        padding: 26px 24px;
    }

    .mv-bento__svg {
        left: -24px;
        right: -24px;
        bottom: -26px;
        width: calc(100% + 48px);
    }

    .mv-bento__quote blockquote {
        font-size: 19px;
    }

    .mv-bento__big {
        font-size: 50px;
        margin-bottom: 28px;
    }

    .mv-dash {
        padding: 26px 22px 28px;
    }

    .mv-dash__num {
        font-size: 60px;
        margin-top: 30px;
    }

    .mv-about__lead {
        font-size: 16px;
    }

    .mv-about__cols {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .mv-about__cols p:nth-child(2)::before {
        display: none;
    }

    .mv-about__img img {
        aspect-ratio: 4 / 3;
    }

    /* definite widths so the full-width buttons can't overflow the bar */
    .mv-about__cta {
        flex-direction: column;
        align-items: stretch;
        padding: 22px 20px;
    }

    .mv-about__cta-left {
        flex-basis: auto;
        align-items: flex-start;
    }

    .mv-about__actions {
        width: 100%;
    }

    .mv-about__actions .mv-btn {
        flex: 1 1 auto;
        justify-content: center;
        white-space: normal;
        text-align: center;
    }

    .mv-rel__head {
        grid-template-columns: 1fr;
        grid-template-areas:
            "label"
            "title"
            "nav";
        align-items: start;
    }

    .mv-rel__card {
        min-height: 320px;
    }

    .mv-cta {
        padding: 44px 24px;
    }
}

/* ==========================================================================
   PAGE-SPECIFIC COMPONENTS — ported from the previous version of this page
   ========================================================================== */

/* Structural hooks carried over from the reference markup (they carry no
   styling there either) — min-width:0 just lets the grid items shrink. */
.mv-about__label,
.mv-about__main {
    min-width: 0;
}

.mv-section--alt {
    background: #fff;
}

/* The final CTA follows the tinted bento section directly on this page
   (the reference has Related Services in between), so give it its own
   top gap instead of butting the blue card against the tint. */
.mv-section--cta {
    padding-top: 50px;
}

/* --------------------------------------------------------------------------
   EMPHASIS CALLOUT — "What Is …?" section, sits under the paragraph columns.
   Keeps its deliberate red accent rule; restyled to the tint / DM Sans set.
   -------------------------------------------------------------------------- */
.mv-emphasis {
    position: relative;
    margin-top: 22px;
    padding: 18px 24px;
    border-radius: 0 12px 12px 0;
    border-left: 3px solid var(--red);
    background: var(--tint);
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--blue-deep);
}

/* --------------------------------------------------------------------------
   MOSAIC — intro line under the heading; title-only items (no description)
   -------------------------------------------------------------------------- */
.mv-mosaic__intro {
    margin: 12px 0 0;
    font-size: 15px;
    line-height: 1.65;
    color: #2a3550;
}

.mv-mosaic__item {
    align-items: center;
}

.mv-mosaic__item h3:last-child,
.mv-mosaic__dark h3:last-child {
    margin: 0;
}

/* --------------------------------------------------------------------------
   SUB-BLOCK — a second chip group inside a section that has one h2
   (What We Value / Key Factors): thin divider, no extra heading.
   -------------------------------------------------------------------------- */
.mv-subblock {
    margin-top: 44px;
    padding-top: 40px;
    border-top: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   HOW IT WORKS — inline link inside a step description follows the card's
   light → blue hover swap
   -------------------------------------------------------------------------- */
.mv-how__card p a {
    color: var(--blue);
    text-decoration: underline;
    text-decoration-color: rgba(9, 45, 182, .35);
    transition: color var(--how-ease), text-decoration-color var(--how-ease);
}

.mv-how__card:hover p a {
    color: #fff;
    text-decoration-color: rgba(255, 255, 255, .55);
}

/* --------------------------------------------------------------------------
   INFORMATION REQUIRED + REPORT CONTENTS — one section: document cards,
   then the report checklist / dashboard row underneath (no second h2)
   -------------------------------------------------------------------------- */
.mv-docs-report {
    margin-top: 56px;
}

.mv-docs-report .mv-dash-intro {
    margin-top: 0;
}

/* --------------------------------------------------------------------------
   COST — single heading block, centred, with the inline quotation button
   -------------------------------------------------------------------------- */
.mv-section--cost .mv-head {
    margin-bottom: 30px;
}

.mv-section--cost .mv-inline-cta {
    margin-top: 0;
}

@media (max-width: 767px) {
    .mv-emphasis {
        font-size: 16px;
        padding: 16px 20px;
    }

    .mv-subblock {
        margin-top: 34px;
        padding-top: 30px;
    }

    .mv-docs-report {
        margin-top: 40px;
    }
}

/* Long CTA labels wrap on narrow screens instead of running off the edge */
@media (max-width: 575px) {
    .mv-btn {
        max-width: 100%;
        white-space: normal;
        text-align: center;
        justify-content: center;
    }
}

/* ==========================================================================
   MOBILE REFINEMENTS (≤767px) — typography scale, spacing rhythm and a few
   phone-specific layouts. Kept last in the file so it wins over the base
   rules above. Desktop / tablet are unaffected.
   ========================================================================== */
@media (max-width: 767px) {

    /* ---- Hero banner ---- */
    .page-header-heading {
        padding-left: 16px !important;
        margin-bottom: 30px !important;
    }

    .page-header-heading .mv-banner-badge {
        font-size: 10.5px;
        letter-spacing: 1.6px;
        padding: 5px 12px;
        margin-bottom: 14px;
    }

    .page-header-section .page-header-heading h1.rs-page-h1 {
        font-size: 30px !important;
        line-height: 1.2 !important;
        font-weight: 400 !important;
        letter-spacing: 0 !important;
        margin: 0 0 12px !important;
    }

    .page-header-heading p.lead {
        font-size: 14.5px !important;
        line-height: 1.6 !important;
    }

    .page-header-section .breadcrumb {
        padding: 18px 0 !important;
        font-size: 13px !important;
        row-gap: 4px;
    }

    .page-header-section .breadcrumb a,
    .page-header-section .breadcrumb span {
        font-size: 13px !important;
    }

    /* ---- Section rhythm: equal top/bottom so tinted bands never sit
       flush against their content ---- */
    section.mv-section[class] {
        padding-top: 36px;
        padding-bottom: 36px;
    }

    .pb-5.rs-faq-section {
        padding: 36px 0 !important;
    }

    /* ---- Type scale ---- */
    .mv-h2,
    .mv-open-split h2,
    .mv-cta h2 {
        font-size: 24px;
        line-height: 1.25;
    }

    .mv-h2 {
        margin-bottom: 12px;
    }

    .pb-5.rs-faq-section .rs-faq-heading {
        font-size: 24px !important;
        line-height: 1.25 !important;
    }

    .mv-eyebrow,
    .mv-kicker,
    .mv-dot-label,
    .mv-cover__eyebrow {
        font-size: 11px;
        letter-spacing: .18em;
    }

    .mv-eyebrow,
    .mv-kicker,
    .mv-cover__eyebrow {
        margin-bottom: 12px;
    }

    .mv-body-text p {
        font-size: 15px;
        line-height: 1.7;
        margin-bottom: 14px;
    }

    .mv-head {
        margin-bottom: 26px;
    }

    .mv-head > p {
        font-size: 15px;
    }

    .mv-btn {
        font-size: 14px;
        padding: 12px 20px;
    }

    .mv-note {
        padding: 14px 16px;
        gap: 12px;
        margin-top: 22px;
    }

    .mv-note p {
        font-size: 13.5px;
    }

    .mv-inline-cta {
        margin-top: 28px;
    }

    /* ---- About (What is …) ---- */
    .mv-about__grid {
        row-gap: 10px;
    }

    .mv-h2.mv-about__title {
        margin-bottom: 14px;
    }

    .mv-about__lead {
        font-size: 15.5px;
        line-height: 1.7;
    }

    .mv-about__cols {
        margin-top: 24px;
        padding-top: 20px;
        gap: 14px;
    }

    .mv-about__cols p {
        font-size: 14.5px;
        line-height: 1.7;
    }

    .mv-about__cols p::before {
        top: -21px;
    }

    .mv-about__media {
        margin-top: 26px;
        border-radius: 14px;
    }

    .mv-about__img figcaption {
        padding: 36px 16px 14px;
        font-size: 12px;
    }

    .mv-about__cta {
        padding: 20px 18px;
        gap: 16px;
    }

    .mv-about__cta-left {
        flex-direction: column;
        gap: 12px;
    }

    .mv-about__cta-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        font-size: 16px;
    }

    .mv-about__cta-left p {
        font-size: 14.5px;
        line-height: 1.6;
    }

    .mv-about__actions {
        gap: 10px;
    }

    /* ---- Chips ---- */
    .mv-chips {
        gap: 8px;
    }

    .mv-chip {
        font-size: 13px;
        padding: 7px 14px 7px 7px;
        gap: 8px;
    }

    .mv-chip__ico {
        width: 22px;
        height: 22px;
        font-size: 10px;
    }

    /* ---- Mosaic (Why it matters) ---- */
    .mv-mosaic {
        gap: 12px;
    }

    .mv-mosaic__head {
        padding: 28px 20px 0;
    }

    .mv-h2.mv-mosaic__title {
        margin-top: 12px;
    }

    .mv-mosaic__arch {
        width: 130px;
        height: 165px;
        margin-top: 20px;
    }

    .mv-mosaic__dark,
    .mv-mosaic__text,
    .mv-mosaic__side {
        padding: 26px 20px;
    }

    .mv-mosaic__text {
        gap: 18px;
    }

    .mv-mosaic__dark h3 {
        font-size: 19px;
    }

    .mv-mosaic__side h3 {
        font-size: 21px;
    }

    .mv-mosaic__item h3 {
        font-size: 15px;
    }

    .mv-mosaic__dark p,
    .mv-mosaic__side p,
    .mv-mosaic__item p {
        font-size: 13.5px;
    }

    .mv-mosaic__ico {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }

    /* ---- Cover banner ---- */
    .mv-cover {
        border-radius: 14px;
    }

    .mv-cover__panel {
        padding: 30px 20px 28px;
    }

    .mv-cover__intro {
        font-size: 14.5px;
    }

    .mv-cover__list li {
        font-size: 13.5px;
        padding: 9px 0;
        gap: 10px;
    }

    .mv-cover__ico {
        width: 28px;
        height: 28px;
        font-size: 11.5px;
    }

    .mv-cover__note {
        margin: 16px 0 20px;
    }

    .mv-cover__btn {
        font-size: 13.5px;
        padding: 10px 20px;
    }

    /* ---- How it works ---- */
    .mv-how__head {
        margin-bottom: 24px;
    }

    .mv-how__grid {
        gap: 12px;
    }

    .mv-how__card {
        padding: 22px 20px 24px;
    }

    .mv-how__ico {
        width: 32px;
        height: 32px;
        margin: 16px 0 20px;
    }

    .mv-how__card h3,
    .mv-how__cta-text {
        font-size: 18px;
        margin-bottom: 8px;
    }

    .mv-how__card p {
        font-size: 13.5px;
    }

    .mv-how__card--cta .mv-how__ico {
        margin-top: 4px;
    }

    /* ---- Feature cards (methods, assignments) ---- */
    .mv-feature-grid {
        gap: 12px;
    }

    .mv-feature {
        padding: 20px 18px;
        gap: 14px;
    }

    .mv-feature__ico {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .mv-feature h3 {
        font-size: 16px;
    }

    .mv-feature p {
        font-size: 13.5px;
    }

    /* ---- Documents: compact thumbnail list instead of a tall stack of
       full-width photos ---- */
    .mv-docs {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .mv-docs > * {
        grid-column: 1 / -1 !important;
    }

    .mv-doc-card:not(.mv-doc-card--note) {
        flex-direction: row;
        align-items: center;
        gap: 14px;
        padding: 8px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 12px;
    }

    .mv-doc-card:not(.mv-doc-card--note) .mv-doc-card__media {
        flex: 0 0 84px;
        border-radius: 8px;
    }

    .mv-doc-card:not(.mv-doc-card--note) .mv-doc-card__media img {
        aspect-ratio: 1 / 1;
    }

    .mv-doc-card:not(.mv-doc-card--note) .mv-doc-card__badge {
        display: none;
    }

    .mv-doc-card__body {
        flex: 1;
        min-width: 0;
        padding: 0 6px 0 0;
    }

    .mv-doc-card__body h3 {
        min-height: 0;
        font-size: 15px;
        line-height: 1.4;
    }

    .mv-doc-card--note {
        padding: 18px;
        gap: 14px;
        align-items: flex-start;
    }

    .mv-doc-card--note p {
        font-size: 15.5px;
    }

    /* ---- Report dashboard ---- */
    .mv-dash-intro {
        font-size: 15px;
        margin: 14px 0 16px;
    }

    .mv-dash-list {
        gap: 10px;
    }

    .mv-dash-list li {
        font-size: 14px;
    }

    .mv-dash {
        padding: 24px 20px 26px;
        border-radius: 14px;
    }

    .mv-dash__num {
        font-size: 52px;
        margin-top: 24px;
    }

    .mv-dash__label {
        margin: 10px 0 22px;
    }

    .mv-dash p {
        font-size: 14px;
        margin-top: 18px;
    }

    /* ---- Cost / turnaround split ---- */
    .mv-open-split {
        gap: 28px;
    }

    .mv-open-split__col {
        padding-left: 0;
    }

    .mv-open-split p {
        font-size: 15px;
    }

    /* ---- Why choose us (bento) ---- */
    .mv-bento {
        gap: 12px;
        margin-top: 28px;
    }

    .mv-bento-head__text p {
        font-size: 14.5px;
    }

    .mv-bento__tile {
        padding: 24px 20px;
    }

    .mv-bento__quote blockquote {
        font-size: 18px;
        margin-bottom: 24px;
    }

    .mv-bento__big {
        font-size: 44px;
        margin-bottom: 20px;
    }

    .mv-bento__name {
        font-size: 18px;
    }

    .mv-bento__chart-num {
        font-size: 26px;
    }

    .mv-bento__svg {
        left: -20px;
        right: -20px;
        bottom: -24px;
        width: calc(100% + 40px);
    }

    /* ---- Related services slider ---- */
    .mv-rel__head {
        margin-bottom: 26px;
        row-gap: 10px;
    }

    .mv-rel__card {
        min-height: 280px;
        padding: 24px 22px 22px;
    }

    .mv-rel__card h3 {
        font-size: 20px;
    }

    /* ---- Final CTA ---- */
    .mv-cta {
        padding: 36px 20px;
        border-radius: 18px;
    }

    .mv-cta p {
        font-size: 15px;
        margin-bottom: 24px;
    }

    .mv-cta__actions {
        gap: 10px;
    }
}