/* ==========================================================================
   Financial Reporting Valuation Dubai, page styles
   Replicates the Valuation & Advisory reference layout (hero → Related
   Services). Every rule is scoped under .frv-page / prefixed .frv-* so it
   never collides with bundle.css, Bootstrap or other page sheets.

   Tokens (from the reference): brand #0b2dbe · ink #0a1230 · ink-700 #2a3350
   ink-500 #5b6478 · mist #f5f6f9 · line #e3e6ec · brand-900 #061861
   Type: headings = site heading stack (rs-fonts.css), body = same stack (Helvetica / Inter).
   ========================================================================== */

.frv-page {
    --frv-brand: #0b2dbe;
    --frv-brand-700: #0a27a3;
    --frv-brand-900: #061861;
    --frv-brand-50: #eef2ff;
    --frv-ink: #0a1230;
    --frv-ink-700: #2a3350;
    --frv-ink-500: #5b6478;
    --frv-ink-400: #8b93a7;
    --frv-mist: #f5f6f9;
    --frv-line: #e3e6ec;
    --frv-ease: cubic-bezier(.2, .65, .2, 1);
    --frv-head: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
    --frv-body: "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
    --frv-header-h: 106px;
    /* absolute site header overlapping the hero */
    font-family: var(--frv-body);
    color: var(--frv-ink);
    background: #fff;
    overflow-x: clip;
}

/* ---- resets inside the page (bundle.css adds margins / bullets) --------- */
.frv-page :where(h1, h2, h3, p, ul, ol, figure) {
    margin: 0;
    padding: 0;
}

.frv-page :where(ul, ol) {
    list-style: none;
}

.frv-page :where(img) {
    display: block;
    max-width: 100%;
}

.frv-page :where(a) {
    text-decoration: none;
    color: inherit;
    transition: color .25s ease, border-color .25s ease, background-color .25s ease;
}

.frv-page :where(a):hover,
.frv-page :where(a):focus {
    text-decoration: none;
}

.frv-page button {
    font-family: inherit;
}

.frv-page :focus-visible {
    outline: 2px solid var(--frv-brand);
    outline-offset: 3px;
}

.frv-ic {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.frv-ic--xs {
    width: 14px;
    height: 14px;
}

.frv-ic--xxs {
    width: 12px;
    height: 12px;
}

/* ---- layout primitives --------------------------------------------------- */
.frv-wrap {
    width: 100%;
    max-width: 1408px;
    margin-inline: auto;
    padding-inline: 20px;
}

@media (min-width: 640px) {
    .frv-wrap {
        padding-inline: 32px;
    }
}

@media (min-width: 1024px) {
    .frv-wrap {
        padding-inline: 48px;
    }
}

@media (min-width: 1280px) {
    .frv-wrap {
        padding-inline: 64px;
    }
}

.frv-section {
    padding-block: 48px;
}

@media (min-width: 640px) {
    .frv-section {
        padding-block: 56px;
    }
}

@media (min-width: 1024px) {
    .frv-section {
        padding-block: 80px;
    }
}

.frv-pad-10 {
    padding-block: 40px;
}

.frv-mist {
    background: var(--frv-mist);
}

.frv-brand {
    background: var(--frv-brand);
    color: #fff;
}

.frv-white {
    color: #fff !important;
}

.frv-mb-4 {
    margin-bottom: 16px !important;
}

.frv-mb-5 {
    margin-bottom: 20px !important;
}

.frv-panelwrap {
    padding: 16px 12px;
}

@media (min-width: 640px) {
    .frv-panelwrap {
        padding: 20px 16px;
    }
}

.frv-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 16px;
}

.frv-panel--blue {
    color: #fff;
    background: linear-gradient(150deg, #0e3fa8, #1436d8 48%, #0b2dbe);
}

.frv-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .1);
    pointer-events: none;
}

.frv-ring--tl {
    left: -160px;
    top: -160px;
    width: 520px;
    height: 520px;
}

.frv-ring--br {
    right: -128px;
    bottom: 0;
    width: 620px;
    height: 620px;
}

/* ---- type -------------------------------------------------------------- */
.frv-display-lg,
.frv-display-md,
.frv-display-sm {
    font-family: var(--frv-head) !important;
    color: inherit;
}

.frv-display-lg {
    font-size: 32px;
    line-height: 1.08;
    font-weight: 300;
    letter-spacing: -.03em;
}

.frv-display-md {
    font-size: 28px;
    line-height: 1.12;
    font-weight: 300;
    letter-spacing: -.025em;
}

.frv-display-sm {
    font-size: 22.4px;
    line-height: 1.15;
    font-weight: 400;
    letter-spacing: -.02em;
}

@media (min-width: 640px) {
    .frv-display-lg {
        font-size: 36px;
    }

    .frv-display-md {
        font-size: 30px;
    }

    .frv-display-sm {
        font-size: 26.4px;
    }
}

@media (min-width: 1024px) {
    .frv-display-lg {
        font-size: 48px;
    }

    .frv-display-md {
        font-size: 36px;
    }
}

@media (min-width: 1280px) {
    .frv-display-lg {
        font-size: 36px;
    }
}

.frv-eyebrow {
    display: block;
    margin-bottom: 24px;
    font-family: var(--frv-body);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--frv-brand);
}

.frv-eyebrow::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 1px;
    margin-right: 12px;
    vertical-align: middle;
    background: currentColor;
}

.frv-eyebrow--dark {
    color: rgba(255, 255, 255, .7);
}

.frv-lede {
    font-size: 17px;
    line-height: 1.625;
    color: var(--frv-ink-500);
}

.frv-page .frv-linkline {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--frv-brand);
}

.frv-linkline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(.35);
    transform-origin: 0 50%;
    transition: transform .5s var(--frv-ease);
}

.frv-page .frv-linkline:hover {
    color: var(--frv-brand);
}

.frv-linkline:hover::after {
    transform: scaleX(1);
}

.frv-page .frv-linkline--white,
.frv-page .frv-linkline--white:hover {
    color: #fff;
    margin-top: 0;
}

/* Service pages: every main heading at weight 500 */
main.frv-page :is(.frv-display-lg, .frv-display-md, .frv-display-sm) {
    font-weight: 500;
}

/* ---- buttons ----------------------------------------------------------- */
.frv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: var(--frv-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}

.frv-btn:active {
    transform: translateY(1px);
}

.frv-btn--sm {
    padding: 9px 15px;
    font-size: 13px;
}

.frv-page .frv-btn--primary {
    background: var(--frv-brand);
    color: #fff;
}

.frv-page .frv-btn--primary:hover {
    background: var(--frv-brand-700);
    color: #fff;
}

.frv-page .frv-btn--white {
    background: #fff;
    color: var(--frv-ink);
}

.frv-page .frv-btn--white:hover {
    background: var(--frv-mist);
    color: var(--frv-ink);
}

.frv-page .frv-btn--outline {
    border-color: rgba(10, 18, 48, .25);
    color: var(--frv-ink);
    background: transparent;
}

.frv-page .frv-btn--outline:hover {
    border-color: var(--frv-ink);
    background: var(--frv-ink);
    color: #fff;
}

.frv-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

/* ---- shared section header grids -------------------------------------- */
.frv-sechead {
    display: grid;
    gap: 24px;
    margin-bottom: 32px;
}

@media (min-width: 1024px) {
    .frv-sechead {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 0px;
    }

    /* .frv-sechead--7-5 {
        align-items: end;
    } */

    .frv-sechead--7-5> :first-child {
        grid-column: span 7;
    }

    .frv-sechead--7-5> :last-child {
        grid-column: span 5;
    }

    .frv-sechead--5-6> :first-child {
        grid-column: span 5;
    }

    .frv-sechead--5-6> :last-child {
        grid-column: 7 / span 6;
    }

    .frv-sechead--end {
        align-items: end;
    }

    /* .frv-sechead__pt {
        padding-top: 32px;
    } */
}

/* ========================================================================
   HERO
   ======================================================================== */
.frv-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--frv-brand);
    color: #fff;
}

.frv-hero__ring {
    position: absolute;
    width: 720px;
    height: 720px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .1);
    pointer-events: none;
}

/* the moving abstract (rs-motion.js) takes over from these once it has drawn */
.rs-abstract--ready > .frv-hero__ring,
.rs-abstract--ready > .frv-hero__glow {
    opacity: 0;
}

.frv-hero__ring--1 {
    right: -192px;
    top: -288px;
}

.frv-hero__ring--2 {
    right: -80px;
    top: 40px;
}

.frv-hero__glow {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 50%;
    pointer-events: none;
    background: radial-gradient(60% 70% at 80% 30%, rgba(255, 255, 255, .14), transparent 70%);
}

.frv-hero__inner {
    position: relative;
    padding-top: calc(var(--frv-header-h) + 40px);
    padding-bottom: 96px;
}

@media (max-width: 1024px) {
    .frv-page {
        --frv-header-h: 136px;
    }
}

@media (max-width: 767px) {
    .frv-page {
        --frv-header-h: 96px;
    }
}

.frv-crumb {
    margin:32px 0;
    font-size: 13px;
    color: rgba(255, 255, 255, .6);
}

.frv-crumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.frv-crumb li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.frv-page .frv-crumb a {
    color: inherit;
    text-underline-offset: 4px;
}

.frv-page .frv-crumb a:hover {
    color: #fff;
    text-decoration: underline;
}

.frv-crumb__sep {
    opacity: .5;
}

.frv-crumb [aria-current] {
    color: #fff;
}

.frv-hero__h1 {
    max-width: 1040px;
    color: #fff;
    text-wrap: balance;
}

.frv-w {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding: .14em .04em;
    margin: -.14em -.04em;
}

.frv-w__in {
    display: inline-block;
    will-change: transform;
}

.frv-js .frv-w__in {
    opacity: 0;
    transform: translateY(110%);
    transition: transform .9s var(--frv-ease), opacity .6s ease;
    transition-delay: calc(var(--i, 0) * 60ms);
}

.frv-js .frv-hero__h1.is-in .frv-w__in {
    opacity: 1;
    transform: none;
}

.frv-hero__lead {
    max-width: 672px;
    margin-top: 24px;
    font-size: 18px;
    line-height: 1.625;
    color: rgba(255, 255, 255, .8);
}

@media (min-width: 640px) {
    .frv-hero__lead {
        font-size: 20px;
    }
}

/* ========================================================================
   INTRO
   ======================================================================== */
.frv-intro {
    display: grid;
    gap: 32px;
}

@media (min-width: 1024px) {
    .frv-intro {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .frv-intro__head {
        grid-column: span 6;
    }

    /* heading and copy start on the same line */
    .frv-intro {
        align-items: start;
    }

    .frv-intro__body {
        grid-column: 8 / span 5;
        padding-top: 0;
    }
}

.frv-intro__head .frv-display-md {
    margin-top: 0;
}

.frv-intro__body p:first-child {
    margin-top: 0;
}

.frv-intro__head .frv-display-md {
    max-width: 576px;
}

.frv-intro__body p {
    font-size: 16.8px;
    line-height: 1.625;
    color: var(--frv-ink-700);
}

@media (min-width: 640px) {
    .frv-intro__body p {
        font-size: 18px;
    }
}

/* ========================================================================
   TABS
   ======================================================================== */
.frv-tabs__list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    border-bottom: 1px solid var(--frv-line);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.frv-tabs__list::-webkit-scrollbar {
    display: none;
}

.frv-tabs__tab {
    position: relative;
    flex: 0 0 auto;
    padding: 12px 16px;
    border: 0;
    background: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.43;
    color: var(--frv-ink-500);
    cursor: pointer;
    transition: color .25s ease;
}

@media (min-width: 640px) {
    .frv-tabs__tab {
        flex: 1 1 0;
        text-align: center;
    }
}

.frv-tabs__tab:hover {
    color: var(--frv-ink);
}

.frv-tabs__tab.is-active {
    color: var(--frv-brand);
}

.frv-tabs__tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--frv-brand);
    opacity: 0;
    transform: scaleX(.6);
    transition: opacity .3s ease, transform .4s var(--frv-ease);
}

.frv-tabs__tab.is-active::after {
    opacity: 1;
    transform: none;
}

.frv-tabs__grid {
    display: grid;
    gap: 32px;
    padding-top: 32px;
}

@media (min-width: 1024px) {
    .frv-tabs__grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 56px;
        padding-top: 40px;
        align-items: stretch;
    }

    .frv-tabs__content {
        grid-column: span 7;
    }

    .frv-tabs__media {
        grid-column: span 5;
    }
}

.frv-tabs__panel[hidden] {
    display: none;
}

.frv-tabs__panel.is-enter {
    animation: frv-panel-in .45s var(--frv-ease) both;
}

@keyframes frv-panel-in {
    from {
        opacity: 0;
        translate: 0 12px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

.frv-tabs__intro {
    max-width: 672px;
    font-size: 16.8px;
    line-height: 1.625;
    color: var(--frv-ink-700);
}

.frv-linelist {
    display: grid;
    margin-top: 24px;
    gap: 20px 32px;
}

.frv-linelist--1 {
    gap: 28px 32px;
}

@media (min-width: 640px) {
    .frv-linelist--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.frv-linelist li {
    border-left: 2px solid var(--frv-line);
    padding-left: 16px;
}

.frv-linelist__title {
    font-size: 16px;
    font-weight: 500;
    color: var(--frv-ink);
}

.frv-linelist__desc {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.625;
    color: var(--frv-ink-500);
}

/* ---- icon-tile list: the 3rd tab on the five core service pages ----
   One column. Each row is an icon tile, a hairline divider, then title + copy,
   with a hairline between rows (none after the last). */
.frv-linelist--icons {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-top: 0;
}

.frv-tabs__intro + .frv-linelist--icons {
    margin-top: 12px;
}

.frv-linelist--icons .frv-linelist__item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 9px 0;
    border-left: 0;
    border-bottom: 1px solid var(--frv-line);
}

.frv-linelist--icons .frv-linelist__item:last-child {
    border-bottom: 0;
}

/* plain line icons, no plate behind them */
.frv-linelist__ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    color: #0a1f6b;
}

.frv-linelist__ico .frv-ic {
    width: 42px;
    height: 42px;
}

.frv-linelist__body {
    min-width: 0;
    flex: 1 1 auto;
    padding: 0 0 0 20px;
    border-left: 1px solid var(--frv-line);
}

/* desktop: the copy column is as tall as the photo, so the list spreads to fill it
   (rows share the spare height) and the last row ends level with the photo's foot */
@media (min-width: 1024px) {
    .frv-tabs__content:has(.frv-linelist--icons) {
        display: flex;
        flex-direction: column;
    }

    .frv-tabs__content:has(.frv-linelist--icons) > .frv-tabs__panel:has(.frv-linelist--icons):not([hidden]) {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
    }

    .frv-linelist--icons {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
    }

    .frv-linelist--icons .frv-linelist__item {
        flex: 1 1 auto;
    }
}

.frv-linelist--icons .frv-linelist__title {
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    line-height: 1.32;
    letter-spacing: -.01em;
}

.frv-linelist--icons .frv-linelist__desc {
    margin-top: 4px;
}

@media (max-width: 639px) {
    .frv-linelist--icons .frv-linelist__item {
        gap: 14px;
        padding: 14px 0;
    }

    .frv-linelist__ico {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
    }

    .frv-linelist__ico .frv-ic {
        width: 38px;
        height: 38px;
    }

    .frv-linelist__body {
        padding-left: 14px;
    }

    .frv-linelist--icons .frv-linelist__title {
        font-size: 16px;
    }
}

.frv-cardlist {
    display: grid;
    margin-top: 32px;
    gap: 16px;
}

@media (min-width: 640px) {
    .frv-cardlist {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.frv-cardlist__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--frv-line);
    border-radius: 12px;
    background: #fff;
    transition: border-color .25s ease;
}

.frv-cardlist__item:hover {
    border-color: rgba(11, 45, 190, .4);
}

.frv-cardlist__ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    color: #0a1f6b;
}

.frv-cardlist__ico .frv-ic {
    width: 42px;
    height: 42px;
}

.frv-cardlist__txt {
    flex: 1 1 auto;
}

.frv-cardlist__num {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .18em;
    color: var(--frv-ink-400);
}

.frv-cardlist__title {
    display: block;
    margin-top: 4px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.375;
    color: var(--frv-ink);
}

.frv-tabs__fig {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    background: var(--frv-mist);
}

/* fixed height on desktop so every tab shows the same-sized image, whatever the copy length */
@media (min-width: 1024px) {
    .frv-tabs__media {
        align-self: start;
    }

    .frv-tabs__fig {
        height: 620px;
        min-height: 0;
        aspect-ratio: auto;
    }

    /* the copy column is the same height as the photo; each tab's copy is kept short enough to fit inside it */
    .frv-tabs__content {
        min-height: 620px;
    }
}

/* wider screens give the copy more room per line, so the photo and copy column are shorter */
@media (min-width: 1440px) {
    .frv-tabs__fig {
        height: 580px;
    }

    .frv-tabs__content {
        min-height: 580px;
    }
}

.frv-tabs__fig img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 40%;
}

.frv-tabs__fig .frv-tabs__img {
    opacity: 0;
    transition: opacity .5s ease;
}

.frv-tabs__fig .frv-tabs__img.is-active {
    opacity: 1;
}

.frv-tabs__fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 160px;
    background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent);
}

.frv-page .frv-tabs__cta {
    position: absolute;
    left: 24px;
    bottom: 24px;
}

/* ========================================================================
   SECTORS (bento)
   ======================================================================== */
.frv-bento {
    display: grid;
    gap: 16px;
}

.frv-bento__item {
    min-height: 200px;
}

@media (min-width: 768px) {
    .frv-bento {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        /* rows grow when a narrow tile's copy needs more room than the base height */
        grid-auto-rows: minmax(190px, auto);
    }

    .frv-bento__item--a {
        grid-column: span 5;
        grid-row: span 2;
    }

    .frv-bento__item--b {
        grid-column: span 7;
    }

    .frv-bento__item--c {
        grid-column: span 4;
    }

    .frv-bento__item--d {
        grid-column: span 3;
    }

    .frv-bento__item--e {
        grid-column: span 7;
    }

    .frv-bento__item--f {
        grid-column: span 5;
    }
}

@media (min-width: 1024px) {
    .frv-bento {
        grid-auto-rows: minmax(210px, auto);
    }
}

.frv-page .frv-bento__card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    min-height: inherit;
    overflow: hidden;
    padding: 20px;
    border-radius: 12px;
    background: var(--frv-ink);
    color: #fff;
}

@media (min-width: 1024px) {
    .frv-bento__card {
        padding: 24px;
    }
}

.frv-page .frv-bento__card--brand {
    background: var(--frv-brand);
}

.frv-bento__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--frv-ease);
}

.frv-bento__card:hover .frv-bento__img {
    transform: scale(1.06);
}

.frv-bento__shade {
    position: absolute;
    inset: 0;
    /* neutral black scrim: keeps the photo's own colours, darkens only behind the copy */
    /* deep enough behind the title that it stays readable on bright photos */
    background: linear-gradient(to top, rgba(0, 0, 0, .82), rgba(0, 0, 0, .55) 38%, rgba(0, 0, 0, .12) 68%, rgba(0, 0, 0, 0));
    transition: opacity .5s ease;
}

.frv-bento__card:hover .frv-bento__shade {
    opacity: .9;
}

.frv-bento__ring {
    position: absolute;
    width: 288px;
    height: 288px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .15);
    transition: transform .7s ease;
}

.frv-bento__ring--1 {
    right: -96px;
    top: -96px;
}

.frv-bento__ring--2 {
    right: -40px;
    top: 40px;
    border-color: rgba(255, 255, 255, .1);
}

.frv-bento__card:hover .frv-bento__ring {
    transform: scale(1.1);
}

.frv-bento__body {
    position: relative;
    display: flex;
    align-items: center;
}

.frv-bento__title {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.375;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

@media (min-width: 1024px) {
    .frv-bento__title {
        font-size: 20px;
    }
}

.frv-bento__desc {
    max-width: 480px;
    margin-top: 8px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.55;
    color: rgba(255, 255, 255, .95);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
    display: -webkit-box;
    line-clamp: 4;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .frv-bento__desc {
        font-size: 16px;
    }
}

.frv-bento__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
}

/* the label stays put on hover (sliding it inside the clip cut off its last letter); only the arrow moves */
.frv-bento__more-clip {
    display: inline-block;
}

.frv-bento__more-txt {
    display: block;
}

.frv-bento__more .frv-ic {
    transition: transform .5s var(--frv-ease);
}

.frv-bento__card:hover .frv-bento__more .frv-ic {
    transform: translateX(6px);
}

/* title-only variant (core service pages): larger title, arrow flowing right after its last word, no description */
.frv-bento--titles .frv-bento__title {
    display: inline;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
}

.frv-bento--titles .frv-bento__more {
    margin: 0 0 0 10px;
    vertical-align: middle;
}

.frv-bento--titles .frv-bento__more .frv-ic {
    width: 20px;
    height: 20px;
}

/* ========================================================================
   WHY RELIANT
   ======================================================================== */
.frv-why__p {
    font-size: 16.3px;
    line-height: 1.625;
    color: rgba(255, 255, 255, .8);
}

.frv-why {
    display: grid;
    grid-auto-rows: 1fr;
    gap: 1px;
    margin-top: 32px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 12px;
    background: rgba(255, 255, 255, .2);
}

@media (min-width: 640px) {
    .frv-why {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .frv-why {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.frv-why__card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 220px;
    padding: 28px;
    background: rgba(11, 45, 190, .8);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: background-color .5s ease;
}

@media (min-width: 1024px) {
    .frv-why__card {
        padding: 36px;
    }
}

.frv-why__card:hover {
    background: rgba(255, 255, 255, .1);
}

.frv-why__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.frv-why__num {
    font-family: var(--frv-head);
    font-size: 36px;
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -.025em;
    color: rgba(255, 255, 255, .6);
    transition: color .5s ease;
}

.frv-why__card:hover .frv-why__num {
    color: #fff;
}

.frv-why__ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
    transition: border-color .5s ease;
}

.frv-why__ico .frv-ic {
    width: 20px;
    height: 20px;
}

.frv-why__card:hover .frv-why__ico {
    border-color: rgba(255, 255, 255, .7);
}

.frv-why__title {
    margin-top: 0;
    padding-top: 56px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.375;
    color: #fff;
}

.frv-why__desc {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.625;
    color: rgba(255, 255, 255, .8);
}

.frv-why__line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: #fff;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .7s var(--frv-ease);
}

.frv-why__card:hover .frv-why__line {
    transform: scaleX(1);
}

/* ========================================================================
   PROCESS
   ======================================================================== */
.frv-process__p {
    font-size: 14px;
    line-height: 1.625;
    color: var(--frv-ink-500);
}

.frv-process {
    display: grid;
    grid-auto-rows: 1fr;
    gap: 20px;
    margin-top: 32px;
}

@media (min-width: 640px) {
    .frv-process {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .frv-process {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.frv-process__card {
    height: 100%;
    padding: 28px 18px;
    border-radius: 16px;
    background: #fff;
}

.frv-process__num {
    display: block;
    font-family: var(--frv-head);
    font-size: 30px;
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -.025em;
    color: var(--frv-brand);
}

.frv-process__title {
    margin-top: 24px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--frv-ink);
}

.frv-process__desc {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.625;
    color: var(--frv-ink-500);
}

/* ========================================================================
   CTA (photo panel + glass card)
   ======================================================================== */
.frv-cta {
    min-height: 400px;
    background: var(--frv-ink);
    color: #fff;
}

.frv-cta__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.frv-cta__bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 65% center;
    transform: scale(1.05);
}

.frv-cta__fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    height: 160px;
    background: linear-gradient(to top, rgba(0, 0, 0, .4), transparent);
}

.frv-cta__inner {
    padding-block: 32px;
}

@media (min-width: 1024px) {
    .frv-cta__inner {
        padding-block: 48px;
    }
}

/* One fixed card size on every service page: same width everywhere, and a
   min-height that fits the longest copy so the cards line up page to page. */
.frv-glass {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 600px;
    overflow: hidden;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 16px;
    background: rgba(8, 12, 24, .5);
    box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .6);
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);
}

@media (min-width: 640px) {
    .frv-glass {
        padding: 36px 40px;
    }
}

@media (min-width: 1024px) {
    .frv-glass {
        display: flex;
        flex-direction: column;
        min-height: 456px;
        padding: 40px 44px;
    }

    /* button sits on the card's bottom edge whatever the copy length */
    .frv-glass .frv-glass__in {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: flex-start;
    }

    .frv-glass .frv-glass__in .frv-actions {
        margin-top: auto;
        padding-top: 28px;
    }
}

/* CTA card type: smaller, steadier scale so every line reads on the glass */
.frv-glass .frv-display-md {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -.015em;
    text-wrap: balance;
}

@media (min-width: 640px) {
    .frv-glass .frv-display-md {
        font-size: 26px;
    }
}

@media (min-width: 1024px) {
    .frv-glass .frv-display-md {
        font-size: 28px;
    }
}

.frv-glass .frv-cta__p {
    max-width: none;
    margin-top: 16px;
    font-size: 14.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .88);
}

.frv-glass .frv-chips {
    margin-top: 20px;
}

.frv-glass .frv-chip {
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .12);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .01em;
}

.frv-glass .frv-actions {
    margin-top: 28px;
}

/* long labels ("Discuss Your Investment Requirements") wrap instead of
   running past the card edge on phones */
@media (max-width: 639px) {
    .frv-glass .frv-btn {
        max-width: 100%;
        white-space: normal;
        line-height: 1.3;
        text-align: center;
    }
}

.frv-glass__sheen {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, .1), transparent 50%, rgba(0, 0, 0, .2));
}

.frv-glass__edge {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, .7), transparent);
}

.frv-glass__in {
    position: relative;
}

.frv-cta__p {
    max-width: 576px;
    margin-top: 24px;
    font-size: 15.2px;
    line-height: 1.625;
    color: rgba(255, 255, 255, .85);
}

.frv-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

.frv-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .15);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    color: #fff;
}

/* ========================================================================
   INSIGHTS
   ======================================================================== */
.frv-ins__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.frv-ins {
    display: grid;
    gap: 20px;
    margin-top: 32px;
}

@media (min-width: 768px) {
    .frv-ins {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.frv-page .frv-ins__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    transition: background-color .25s ease;
}

.frv-page .frv-ins__card:hover {
    background: rgba(255, 255, 255, .05);
    color: #fff;
}

.frv-ins__media {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--frv-brand-900);
}

.frv-ins__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s var(--frv-ease);
}

.frv-ins__card:hover .frv-ins__media img {
    transform: scale(1.04);
}

.frv-ins__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 20px 8px 12px;
}

.frv-ins__tag {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
}

.frv-ins__title {
    margin-top: 12px;
    font-family: var(--frv-body) !important;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.375;
    color: #fff;
}

.frv-ins__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 24px;
    font-size: 12px;
    color: rgba(255, 255, 255, .6);
}

.frv-ins__foot .frv-ic {
    color: #fff;
    transition: transform .5s ease;
}

.frv-ins__card:hover .frv-ins__foot .frv-ic {
    transform: translate(2px, -2px);
}

/* ========================================================================
   EXPERTISE
   ======================================================================== */
.frv-exp {
    display: grid;
    background: var(--frv-mist);
    color: var(--frv-ink);
}

@media (min-width: 1024px) {
    .frv-exp {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.frv-exp__media {
    position: relative;
    min-height: 200px;
}

@media (min-width: 1024px) {
    .frv-exp__media {
        min-height: 460px;
    }
}

.frv-exp__media>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.frv-exp__shade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent);
}

.frv-exp__lead {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 12px;
    background: rgba(0, 0, 0, .35);
    color: #fff;
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
}

@media (min-width: 640px) {
    .frv-exp__lead {
        right: auto;
        max-width: 384px;
    }
}

.frv-exp__lead-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.frv-avatars {
    display: flex;
    flex: 0 0 auto;
}

.frv-page .frv-avatar {
    position: relative;
    display: block;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .8);
    background: var(--frv-mist);
    transition: transform .25s ease;
}

.frv-avatar+.frv-avatar {
    margin-left: -12px;
}

.frv-avatar:hover {
    z-index: 2;
    transform: scale(1.1);
}

.frv-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.frv-exp__lead-txt {
    font-size: 14px;
    line-height: 1.375;
    color: rgba(255, 255, 255, .85);
}

.frv-exp__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px;
}

@media (min-width: 640px) {
    .frv-exp__body {
        padding: 48px;
    }
}

@media (min-width: 1024px) {
    .frv-exp__body {
        padding: 64px;
    }
}

.frv-exp__p {
    max-width: 576px;
    margin-top: 24px;
    font-size: 16.8px;
    line-height: 1.625;
    color: var(--frv-ink-700);
}

.frv-badges {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 32px;
    padding-block: 24px;
    border-top: 1px solid var(--frv-line);
    border-bottom: 1px solid var(--frv-line);
}

.frv-badge {
    display: flex;
    align-items: center;
    gap: 12px;
}

.frv-badge__logo {
    position: relative;
    flex: 0 0 56px;
    width: 56px;
    height: 36px;
}

.frv-badge__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
}

.frv-badge__txt {
    font-size: 12px;
    line-height: 1.375;
    color: var(--frv-ink-500);
}

@media (max-width: 479px) {
    .frv-badges {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* ========================================================================
   RELATED SERVICES
   ======================================================================== */
.frv-related {
    border-top: 1px solid var(--frv-line);
    background: #fff;
}

.frv-related__head {
    max-width: 768px;
    margin-bottom: 32px;
}

.frv-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.frv-page .frv-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--frv-line);
    border-radius: 999px;
    font-size: 14px;
    line-height: 1.43;
    color: var(--frv-ink-700);
}

.frv-page .frv-pill:hover {
    border-color: var(--frv-brand);
    color: var(--frv-brand);
}

/* ---- reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .frv-js .frv-w__in {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .frv-tabs__panel.is-enter {
        animation: none;
    }

    .frv-page * {
        transition-duration: .01ms !important;
    }
}

/* ==========================================================================
   MOBILE REFINEMENTS
   ========================================================================== */
@media (max-width: 1023px) {

    /* Photo needs room for the Leadership card without clipping it */
    .frv-exp__media {
        min-height: 340px;
    }

    .frv-exp__lead {
        max-width: none;
    }
}

@media (max-width: 639px) {
    .frv-page {
        --frv-header-h: 100px;
    }

    .frv-hero__inner {
        padding-top: calc(var(--frv-header-h) + 32px);
        padding-bottom: 56px;
    }

    .frv-crumb {
        margin-bottom: 24px;
    }

    .frv-hero__lead {
        margin-top: 20px;
        font-size: 17px;
    }

    .frv-section {
        padding-block: 40px;
    }

    /* Tabs: full-width stacked list instead of a hidden sideways scroll */
    .frv-tabs__list {
        flex-direction: column;
        gap: 0;
        overflow: visible;
        border-bottom: 0;
    }

    .frv-tabs__tab {
        width: 100%;
        padding: 14px 16px 14px 18px;
        text-align: left;
        border-bottom: 1px solid var(--frv-line);
        line-height: 1.4;
    }

    .frv-tabs__tab::after {
        left: 0;
        right: auto;
        top: 0;
        bottom: 0;
        width: 3px;
        height: auto;
        transform: scaleY(.6);
    }

    .frv-tabs__tab.is-active {
        background: #fff;
    }

    .frv-tabs__tab.is-active::after {
        transform: none;
    }

    .frv-tabs__grid {
        padding-top: 24px;
        gap: 24px;
    }

    .frv-tabs__fig {
        aspect-ratio: 16 / 11;
    }

    .frv-tabs__cta {
        left: 16px;
        bottom: 16px;
    }

    .frv-linelist {
        gap: 20px;
        margin-top: 24px;
    }

    .frv-cardlist {
        margin-top: 24px;
    }

    .frv-cardlist__item {
        padding: 16px;
    }

    .frv-sechead {
        gap: 16px;
        margin-bottom: 24px;
    }

    .frv-bento {
        gap: 12px;
    }

    .frv-bento__item {
        min-height: 220px;
    }

    .frv-bento__card {
        padding: 18px;
    }

    .frv-why__card {
        min-height: 0;
        padding: 24px;
    }

    .frv-why__title {
        padding-top: 32px;
    }

    .frv-why {
        margin-top: 24px;
    }

    .frv-process {
        gap: 12px;
        margin-top: 24px;
    }

    .frv-process__card {
        padding: 22px;
    }

    .frv-process__title {
        margin-top: 16px;
    }

    .frv-panelwrap {
        padding: 12px 10px;
    }

    .frv-glass {
        padding: 24px 20px;
    }

    .frv-cta__inner {
        padding-block: 20px;
        padding-inline: 16px;
    }

    .frv-cta__p {
        margin-top: 18px;
    }

    .frv-actions {
        margin-top: 24px;
    }

    .frv-actions .frv-btn {
        flex: 1 1 100%;
    }

    .frv-ins__head {
        gap: 12px;
    }

    .frv-ins {
        gap: 16px;
        margin-top: 24px;
    }

    .frv-exp__media {
        min-height: 300px;
    }

    .frv-exp__lead {
        left: 14px;
        right: 14px;
        bottom: 14px;
        padding: 16px;
    }

    .frv-exp__body {
        padding: 28px 22px;
    }

    .frv-exp__p {
        margin-top: 18px;
    }

    .frv-badges {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .frv-related__head {
        margin-bottom: 20px;
    }

    .frv-pills {
        gap: 8px;
    }

    .frv-pill {
        padding: 9px 14px;
        font-size: 13.5px;
    }
}

/* ========================================================================
   CONTENT SLOTS ADDED FOR CLIENT COPY (multi-paragraph blocks, card
   descriptions, insights intro). Same type scale as the neighbouring text.
   ======================================================================== */
.frv-intro__body p+p {
    margin-top: 18px;
}

.frv-exp__p+.frv-exp__p,
.frv-cta__p+.frv-cta__p {
    margin-top: 14px;
}

.frv-cardlist__desc {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--frv-ink-500);
}

.frv-ins__lede {
    max-width: 640px;
    margin-top: 16px;
    font-size: 15.2px;
    line-height: 1.625;
    color: rgba(255, 255, 255, .8);
}

.frv-badge__logo .frv-ic {
    width: 28px;
    height: 28px;
    color: var(--frv-brand);
}

/* Single-column variant of the numbered card list (tabs with 3 items) */
.frv-cardlist.frv-cardlist--1 {
    grid-template-columns: minmax(0, 1fr);
}

/* Four-up variant of the insights grid (latest 4 reports) */
@media (min-width: 768px) {
    .frv-ins.frv-ins--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .frv-ins.frv-ins--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ========================================================================
   MOBILE COMPACT (service pages with <main class="frv-mcompact">)
   Long stacked sections become swipeable rows on phones so the page is
   shorter; nothing is hidden. Desktop/tablet are untouched.
   ======================================================================== */
@media (max-width: 639px) {
    /* swipe rows: sectors, why, process, insights */
    .frv-mcompact :is(.frv-bento, .frv-why, .frv-process, .frv-ins) {
        display: flex;
        gap: 12px;
        margin-inline: -20px;
        padding-inline: 20px;
        padding-bottom: 6px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 20px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .frv-mcompact :is(.frv-bento, .frv-why, .frv-process, .frv-ins)::-webkit-scrollbar {
        display: none;
    }

    .frv-mcompact :is(.frv-bento__item, .frv-why__card, .frv-process__card, .frv-ins__card) {
        flex: 0 0 82%;
        scroll-snap-align: start;
    }

    /* the scroll-reveal only fires on vertical entry, so cards waiting off to the
       side of a swipe row would stay hidden; keep them visible on phones */
    .frv-mcompact :is(.frv-bento__item, .frv-why__card, .frv-process__card, .frv-ins__card)[data-rs-a] {
        opacity: 1 !important;
        translate: none !important;
        scale: none !important;
    }

    .frv-mcompact .frv-bento__item {
        min-height: 240px;
    }

    /* why: the joined-grid frame doesn't suit a row, give each card its own */
    .frv-mcompact .frv-why {
        border: 0;
        border-radius: 0;
        background: none;
    }

    .frv-mcompact .frv-why__card {
        border: 1px solid rgba(255, 255, 255, .2);
        border-radius: 12px;
    }

    .frv-mcompact .frv-process__card {
        height: auto;
    }

    /* tabs: tighter lists */
    .frv-mcompact .frv-tabs__intro {
        font-size: 15px;
        line-height: 1.6;
    }

    .frv-mcompact .frv-linelist {
        gap: 14px;
        margin-top: 18px;
    }

    .frv-mcompact .frv-linelist__desc,
    .frv-mcompact .frv-cardlist__desc {
        font-size: 13.5px;
        line-height: 1.5;
    }

    .frv-mcompact .frv-cardlist {
        gap: 10px;
        margin-top: 18px;
    }

    .frv-mcompact .frv-cardlist__item {
        align-items: flex-start;
        padding: 14px;
    }

    .frv-mcompact .frv-cardlist__ico {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }

    .frv-mcompact .frv-tabs__fig {
        aspect-ratio: 16 / 10;
    }

    /* tabs: one swipeable row of tab buttons instead of a stacked list */
    .frv-mcompact .frv-tabs__list {
        flex-direction: row;
        gap: 4px;
        margin-inline: -20px;
        padding-inline: 20px;
        overflow-x: auto;
        border-bottom: 1px solid var(--frv-line);
    }

    .frv-mcompact .frv-tabs__tab {
        width: auto;
        flex: 0 0 auto;
        max-width: 200px;
        padding: 10px 14px 12px;
        border-bottom: 0;
        font-size: 13.5px;
        line-height: 1.35;
        text-align: left;
    }

    .frv-mcompact .frv-tabs__tab.is-active {
        background: none;
    }

    .frv-mcompact .frv-tabs__tab::after {
        left: 0;
        right: 0;
        top: auto;
        bottom: -1px;
        width: auto;
        height: 2px;
        transform: scaleX(0);
    }

    .frv-mcompact .frv-tabs__tab.is-active::after {
        transform: none;
    }

    /* expertise image */
    .frv-mcompact .frv-exp__media {
        min-height: 220px;
    }
}

/* ========================================================================
   MOBILE COMPACT 2 (2026-10-21): pill tabs, swipeable tab lists and a
   prev / progress / next control under every swipe row. The control is
   added by assets/js/frv-swipe.js; phones only.
   ======================================================================== */
.frv-swipe-nav {
    display: none;
}

@media (max-width: 639px) {
    /* tabs: one line of pills, swiped sideways, the active one filled */
    .frv-mcompact .frv-tabs__list {
        gap: 8px;
        padding-bottom: 16px;
        border-bottom: 0;
        scroll-snap-type: x proximity;
    }

    .frv-mcompact .frv-tabs__tab {
        max-width: none;
        padding: 9px 16px;
        border: 1px solid var(--frv-line);
        border-radius: 999px;
        background: #fff;
        font-size: 13px;
        line-height: 1.3;
        white-space: nowrap;
        text-align: center;
        scroll-snap-align: start;
    }

    .frv-mcompact .frv-tabs__tab.is-active {
        border-color: var(--frv-brand);
        background: var(--frv-brand);
        color: #fff;
    }

    .frv-mcompact .frv-tabs__tab::after {
        display: none;
    }

    /* minmax(0, 1fr): the sideways list must not widen the column */
    .frv-mcompact .frv-tabs__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding-top: 8px;
    }

    .frv-mcompact :is(.frv-tabs__content, .frv-tabs__panel) {
        min-width: 0;
    }

    .frv-mcompact .frv-tabs__intro {
        font-size: 14.5px;
    }

    /* tab lists: one swipeable row of cards instead of a long stack */
    .frv-mcompact .frv-tabs__panel :is(.frv-linelist, .frv-cardlist) {
        display: flex;
        gap: 12px;
        margin: 18px -20px 0;
        padding: 0 20px 4px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 20px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .frv-mcompact .frv-tabs__panel :is(.frv-linelist, .frv-cardlist)::-webkit-scrollbar {
        display: none;
    }

    .frv-mcompact .frv-tabs__panel .frv-linelist li,
    .frv-mcompact .frv-tabs__panel .frv-cardlist__item {
        flex: 0 0 74%;
        scroll-snap-align: start;
    }

    .frv-mcompact .frv-tabs__panel .frv-linelist li {
        padding: 16px;
        border: 1px solid var(--frv-line);
        border-left: 2px solid var(--frv-brand);
        border-radius: 12px;
        background: #fff;
    }

    .frv-mcompact .frv-tabs__panel .frv-linelist__title {
        font-size: 15px;
        line-height: 1.35;
    }

    .frv-mcompact .frv-tabs__panel .frv-linelist__desc {
        font-size: 13.5px;
        line-height: 1.5;
    }

    /* the control: prev · progress · next */
    .frv-mcompact .frv-swipe-nav {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 16px;
    }

    .frv-swipe-nav__bar {
        position: relative;
        flex: 1 1 0;
        height: 2px;
        overflow: hidden;
        background: var(--frv-line);
    }

    .frv-swipe-nav__fill {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 30%;
        background: var(--frv-brand);
        transition: left .2s ease, width .2s ease;
    }

    .frv-swipe-nav__btn {
        display: inline-flex;
        flex: none;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        padding: 0;
        border: 1px solid var(--frv-ink);
        border-radius: 50%;
        background: transparent;
        color: var(--frv-ink);
        cursor: pointer;
    }

    .frv-swipe-nav__btn svg {
        width: 17px;
        height: 17px;
    }

    .frv-swipe-nav__btn:disabled {
        opacity: .3;
        cursor: default;
    }

    /* on the blue panels (why, insights) the control turns white */
    .frv-swipe-nav--light .frv-swipe-nav__bar {
        background: rgba(255, 255, 255, .25);
    }

    .frv-swipe-nav--light .frv-swipe-nav__fill {
        background: #fff;
    }

    .frv-swipe-nav--light .frv-swipe-nav__btn {
        border-color: #fff;
        color: #fff;
    }
}

/* ========================================================================
   CORE SERVICE PAGES (.frv-mcompact): icon-only tab cards, larger CTA glass
   card, accreditation tiles
   ======================================================================== */

/* tab cards: icon + title only, no running number */
.frv-mcompact .frv-cardlist__title {
    margin-top: 0;
}

/* CTA: tall photo panel, wide glass card sized to its copy and sitting low in the panel */
@media (min-width: 640px) {
    .frv-mcompact .frv-glass {
        max-width: 720px;
        padding: 44px 48px;
    }
}

@media (min-width: 1024px) {
    .frv-mcompact .frv-cta {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        min-height: 600px;
    }

    .frv-mcompact .frv-cta__inner {
        padding-block: 0;
    }

    .frv-mcompact .frv-glass {
        max-width: min(1040px, 62%);
        min-height: 0;
        padding: 48px 56px;
    }

    /* button follows the copy instead of being pushed to the card's bottom edge */
    .frv-mcompact .frv-glass .frv-glass__in .frv-actions {
        margin-top: 0;
        padding-top: 32px;
    }

    .frv-mcompact .frv-glass .frv-display-md {
        font-size: 34px;
    }

    .frv-mcompact .frv-glass .frv-cta__p {
        max-width: 720px;
        margin-top: 20px;
        font-size: 16px;
    }

    .frv-mcompact .frv-glass .frv-chips {
        margin-top: 24px;
    }

    .frv-mcompact .frv-glass .frv-chip {
        padding: 7px 14px;
        font-size: 12.5px;
    }
}

/* every size: the card sits 20px in from the panel's left edge and 20px up from its bottom */
.frv-mcompact .frv-cta__inner {
    max-width: none;
    margin-inline: 0;
    padding: 0 40px 20px;
}

/* tablets and phones: the photo becomes a strip above the card (so the people
   in it stay visible) and the card overlaps its lower edge at full width */
@media (max-width: 1023px) {
    .frv-mcompact .frv-cta {
        min-height: 0;
    }

    .frv-mcompact .frv-cta__bg {
        position: relative;
        inset: auto;
        z-index: 0;
        height: 340px;
    }

    .frv-mcompact .frv-cta__bg img {
        object-position: 72% 60%;
        transform: none;
    }

    .frv-mcompact .frv-cta__bg::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 55%;
        background: linear-gradient(to top, var(--frv-ink), transparent);
    }

    .frv-mcompact .frv-cta__fade {
        display: none;
    }

    .frv-mcompact .frv-cta__inner {
        position: relative;
        z-index: 1;
        margin-top: -96px;
    }

    .frv-mcompact .frv-glass {
        max-width: none;
        min-height: 0;
    }
}

@media (max-width: 639px) {
    .frv-mcompact .frv-cta__bg {
        height: 220px;
    }

    .frv-mcompact .frv-cta__inner {
        margin-top: -64px;
    }

    .frv-mcompact .frv-glass .frv-chips {
        gap: 6px;
    }

    .frv-mcompact .frv-glass .frv-actions .frv-btn {
        width: 100%;
    }
}

/* accreditations: three columns split by hairlines, no tiles. Logos sit on one
   line and labels on the line below, so both rows line up across columns. Columns
   size to their label so labels stay on one line wherever the row has room. */
.frv-mcompact .frv-badges {
    display: flex;
    gap: 0;
}

.frv-mcompact .frv-badge {
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding-inline: 24px;
}

.frv-mcompact .frv-badge:first-child {
    padding-left: 0;
}

.frv-mcompact .frv-badge + .frv-badge {
    border-left: 1px solid var(--frv-line);
}

.frv-mcompact .frv-badge__logo {
    display: flex;
    align-items: center;
    flex: none;
    width: 100%;
    height: 40px;
}

.frv-mcompact .frv-badge__logo img {
    width: auto;
    max-width: 96px;
}

/* icon badges (no logo artwork) sit in a soft brand circle the same height as the logos */
.frv-mcompact .frv-badge__logo .frv-ic {
    box-sizing: content-box;
    width: 20px;
    height: 20px;
    padding: 10px;
    border-radius: 50%;
    background: var(--frv-brand-50);
}

.frv-mcompact .frv-badge__txt {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--frv-ink-700);
}

/* phones: keep the three columns, just tighter */
@media (max-width: 639px) {
    .frv-mcompact .frv-badges {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
    }

    .frv-mcompact .frv-badge {
        gap: 10px;
        padding-inline: 12px;
    }

    .frv-mcompact .frv-badge__logo {
        height: 34px;
    }

    .frv-mcompact .frv-badge__logo img {
        max-width: 72px;
    }

    .frv-mcompact .frv-badge__logo .frv-ic {
        width: 18px;
        height: 18px;
        padding: 8px;
    }

    .frv-mcompact .frv-badge__txt {
        font-size: 12.5px;
    }
}


/* ========================================================================
   CTA, split layout (all five core service pages)
   Light panel: eyebrow, heading, copy, outlined pills and a blue button on the
   left; the photo on the right with a slanted left edge and a pale-blue stripe
   along the slant. Replaces the full-bleed photo + glass card. Phones and
   tablets stack: photo strip with a slanted foot above the copy.
   ======================================================================== */
.frv-cta.frv-cta--split {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    min-height: 0;
    border: 1px solid rgba(20, 54, 216, .08);
    background: linear-gradient(120deg, #fff 0%, #f5f8ff 55%, #eaf0ff 100%);
    color: var(--frv-ink);
}

/* the photo: right 56%, slanted left edge */
.frv-cta--split .frv-cta__bg {
    position: absolute;
    inset: 0 0 0 auto;
    z-index: -1;
    width: 52%;
    clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
}

.frv-cta--split .frv-cta__bg img {
    object-position: 60% 40%;
    transform: none;
}

/* focal point per photo: keep the people in frame whatever the crop */
.frv-cta--split .frv-cta__bg img[src*="valuation_advisory_cta"] { object-position: 90% 50%; }
.frv-cta--split .frv-cta__bg img[src*="research_cta_banner"] { object-position: 100% 40%; }
.frv-cta--split .frv-cta__bg img[src*="building_consultancy_cta"] { object-position: 80% 35%; }
.frv-cta--split .frv-cta__bg img[src*="transaction_advisers_signing"] { object-position: 95% 50%; }
.frv-cta--split .frv-cta__bg img[src*="capital_markets_cta"] { object-position: 86% 45%; }

/* the pale-blue stripe that runs along the slant, a little to the left of the photo */
.frv-cta--split .frv-cta__fade {
    display: block;
    position: absolute;
    inset: 0 0 0 auto;
    z-index: -2;
    width: 52%;
    height: auto;
    background: linear-gradient(180deg, #e3eaff, #d3dfff);
    clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
    transform: translateX(-24px);
}

.frv-cta--split .frv-cta__inner {
    box-sizing: border-box;
    width: 100%;
    /* stays left of the slant's foot (48% of the panel) with room for the stripe */
    max-width: calc(48% - 40px);
    margin: 0;
    padding: 68px 0 68px clamp(32px, 4.4vw, 72px);
}

/* the glass card becomes a plain column */
.frv-cta--split .frv-glass {
    display: block;
    max-width: 740px;
    min-height: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.frv-cta--split .frv-glass__sheen,
.frv-cta--split .frv-glass__edge {
    display: none;
}

.frv-cta--split .frv-glass .frv-glass__in {
    display: block;
}

/* same type as the home page main headings (Why Choose title): 48px max, 500, 1.1, -.03em, ink */
.frv-cta--split .frv-glass .frv-display-md {
    margin-top: 0;
    font-size: clamp(30px, 3.4vw, 48px);
    font-weight: 500;
    font-style: normal;
    line-height: 1.1;
    letter-spacing: -.03em;
    text-transform: none;
    color: var(--frv-ink);
    text-wrap: balance;
}

.frv-cta--split .frv-glass .frv-cta__p {
    max-width: 560px;
    margin-top: 24px;
    font-size: 16px;
    font-style: normal;
    line-height: 1.75;
    color: var(--frv-ink-500);
}

.frv-cta--split .frv-glass .frv-chips {
    gap: 10px;
    margin-top: 30px;
}

.frv-cta--split .frv-glass .frv-chip {
    padding: 10px 15px;
    border: 1px solid #c5d3fb;
    background: rgba(255, 255, 255, .78);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    color: #0b1b5c;
}

.frv-cta--split .frv-glass .frv-glass__in .frv-actions {
    margin-top: 0;
    padding-top: 36px;
}

/* CTA button: styled site-wide by assets/css/rs-cta.css (the home page glow button) */

/* tablets and phones: photo strip (slanted foot) above the copy */
@media (max-width: 1023px) {
    .frv-cta.frv-cta--split {
        display: block;
    }

    .frv-cta--split .frv-cta__bg {
        position: relative;
        inset: auto;
        z-index: 0;
        width: 100%;
        height: 280px;
        clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
    }

    .frv-cta--split .frv-cta__bg::after,
    .frv-cta--split .frv-cta__fade {
        display: none;
    }

    .frv-cta--split .frv-cta__inner {
        position: relative;
        z-index: 1;
        max-width: none;
        margin-top: 0;
        padding: 12px 32px 44px;
    }

    .frv-cta--split .frv-glass {
        max-width: 640px;
    }
}

@media (max-width: 639px) {
    .frv-cta--split .frv-cta__bg {
        height: 220px;
    }

    .frv-cta--split .frv-cta__inner {
        margin-top: 0;
        padding: 8px 20px 32px;
    }

    .frv-cta--split .frv-glass .frv-chips {
        gap: 8px;
    }

    .frv-cta--split .frv-glass .frv-chip {
        padding: 9px 14px;
        font-size: 12.5px;
    }

    .frv-cta--split .frv-glass .frv-glass__in .frv-actions {
        padding-top: 28px;
    }
}


/* ========================================================================
   WHY RELIANT, block layout (all five core service pages)
   Flat light panel; heading with a blue accent on its last two words and the
   lead beside it behind a hairline; four solid panels of equal size joined into
   one band, stepping from deep navy to brand blue with white type throughout.
   Each panel carries its number on a rule and a set of straight 45-degree bars
   in the corner: no curves, no rounded corners, no soft fades. 2 x 2 on tablets
   and a swipe row on phones.
   ======================================================================== */
.frv-panel.frv-panel--why {
    border: 0;
    border-top: 1px solid #dfe5f2;
    border-radius: 0;
    background: #f5f7fc;
    color: var(--frv-ink);
}

.frv-panel--why .frv-ring,
.frv-panel--why .frv-why__ico {
    display: none;
}

/* header: heading left, lead right behind a hairline */
.frv-panel--why .frv-sechead {
    align-items: center;
    margin-bottom: 0;
}

.frv-panel--why .frv-sechead .frv-display-md {
    font-size: clamp(26px, 2.5vw, 36px);
    font-weight: 500;
    font-style: normal;
    line-height: 1.1;
    letter-spacing: -.03em;
    color: var(--frv-ink);
}

.frv-why-accent {
    color: #0b2dbe;
}

.frv-panel--why .frv-why__p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--frv-ink-500);
}

@media (min-width: 1024px) {
    .frv-panel--why .frv-sechead.frv-sechead--5-6 {
        grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
        column-gap: 0;
    }

    .frv-panel--why .frv-sechead.frv-sechead--5-6 > :first-child {
        grid-column: 1;
        padding-right: 32px;
    }

    .frv-panel--why .frv-sechead.frv-sechead--5-6 > :last-child {
        grid-column: 2;
        padding-left: 32px;
        border-left: 1px solid #cdd7ee;
    }
}

/* the grid */
.frv-panel--why .frv-why {
    gap: 2px;
    margin-top: 36px;
    border: 0;
    border-radius: 0;
    background: none;
}

/* phones keep the existing swipe row (see MOBILE COMPACT); the grid starts at tablet */
@media (min-width: 640px) {
    .frv-panel--why .frv-why {
        display: grid;
        grid-auto-rows: 1fr;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
    }
}

@media (min-width: 1024px) {
    .frv-panel--why .frv-why {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* panels: one family, navy through to the brand blue */
.frv-panel--why .frv-why__card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 220px;
    padding: 28px 28px 32px;
    overflow: hidden;
    isolation: isolate;
    border: 0;
    border-radius: 0;
    background: #07196b;
    box-shadow: none;
    color: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: none;
}

.frv-panel--why .frv-why__card:nth-child(2),
.frv-panel--why .frv-why__card:nth-child(2):hover {
    background: #08208f;
}

.frv-panel--why .frv-why__card:nth-child(3),
.frv-panel--why .frv-why__card:nth-child(3):hover {
    background: #0a27a8;
}

.frv-panel--why .frv-why__card:nth-child(4),
.frv-panel--why .frv-why__card:nth-child(4):hover {
    background: #0b2dbe;
}

.frv-panel--why .frv-why__card:nth-child(1):hover {
    background: #07196b;
}

@media (min-width: 1024px) {
    .frv-panel--why .frv-why__card {
        min-height: clamp(340px, 26vw, 420px);
        padding: 30px 30px 40px;
    }
}

/* the number sits on a rule across the panel */
.frv-panel--why .frv-why__top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    margin-bottom: 26px;
}

.frv-panel--why .frv-why__top::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: rgba(255, 255, 255, .32);
}

.frv-panel--why .frv-why__num,
.frv-panel--why .frv-why__card:hover .frv-why__num {
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .08em;
    color: #fff;
}

.frv-panel--why .frv-why__title {
    margin: 0;
    padding: 0;
    font-size: clamp(20px, 1.5vw, 24px);
    font-weight: 500;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: #fff;
    text-wrap: balance;
}

.frv-panel--why .frv-why__desc {
    max-width: 42ch;
    margin: 12px 0 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .88);
}

/* a solid bar runs along the top edge on hover */
.frv-panel--why .frv-why__line {
    top: 0;
    bottom: auto;
    height: 3px;
    background: #fff;
    transition: transform .45s var(--frv-ease);
}

/* straight bars in the corner, flat tones of the panel's own colour */
.frv-panel--why .frv-why__card::before {
    content: "";
    position: absolute;
    z-index: -1;
    right: 0;
    bottom: 0;
    width: min(62%, 190px);
    aspect-ratio: 1;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cpath d='M40 400 400 40v28L68 400Z' fill='%23fff' fill-opacity='.2'/%3E%3Cpath d='M130 400 400 130v110L240 400Z' fill='%23fff' fill-opacity='.08'/%3E%3Cpath d='M300 400 400 300v100Z' fill='%23fff' fill-opacity='.24'/%3E%3C/svg%3E") no-repeat right bottom / 100% 100%;
    pointer-events: none;
}

/* tablets: 2 x 2 */
@media (min-width: 640px) and (max-width: 1023px) {
    .frv-panel--why .frv-why__card::before {
        width: 140px;
    }
}

/* phones: the swipe row keeps working; each panel is its own tile */
@media (max-width: 639px) {
    .frv-panel--why .frv-why__card {
        min-height: 260px;
        padding: 24px 22px 30px;
    }

    .frv-panel--why .frv-why__card::before {
        width: 110px;
    }

    .frv-panel--why .frv-why__top {
        margin-bottom: 22px;
    }

    .frv-panel--why .frv-why {
        margin-top: 24px;
    }

    .frv-panel--why .frv-sechead {
        row-gap: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .frv-panel--why .frv-why__line {
        transition: none;
    }
}

/* ---------- Valuation & Advisory only: Sector Expertise as a grid of photo cards ----------
   (valuation-and-professional-advisory.php, .vpa-sectors). Centred heading, three columns,
   a wide photo over the sector's name and one line. Square and flat: on hover the name turns
   blue and a line draws under the photo; the photo itself never zooms. */
.vpa-sectors__head {
    max-width: 760px;
    margin: 0 auto 48px;
    text-align: center;
}

.frv-page .vpa-sectors__title {
    margin: 0 0 14px;
    font-family: inherit;
    font-size: clamp(30px, 2.8vw, 42px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.015em;
    color: #0a1230;
}

.vpa-sectors__lead {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #5b6782;
}

.vpa-sectors__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 56px 24px;
}

.vpa-sector {
    display: flex;
    flex-direction: column;
    color: #0a1230;
    text-decoration: none;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

/* the card rises a few pixels on hover (asked for on this page) */
.vpa-sector:hover,
.vpa-sector:focus-visible {
    transform: translateY(-6px);
}

@media (prefers-reduced-motion: reduce) {
    .vpa-sector {
        transition: none;
    }

    .vpa-sector:hover,
    .vpa-sector:focus-visible {
        transform: none;
    }
}

.vpa-sector__photo {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #e6eefc;
}

.vpa-sector__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vpa-sector__photo::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: #0b2dbe;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .5s cubic-bezier(.65, 0, .2, 1);
}

.vpa-sector__name {
    margin: 24px 0 12px;
    font-size: clamp(20px, 1.65vw, 26px);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: .005em;
    transition: color .25s ease;
}

.vpa-sector__text {
    font-size: 15px;
    line-height: 1.6;
    color: #5b6782;
}

.vpa-sector:hover .vpa-sector__name,
.vpa-sector:focus-visible .vpa-sector__name {
    color: #0b2dbe;
}

.vpa-sector:hover .vpa-sector__photo::after,
.vpa-sector:focus-visible .vpa-sector__photo::after {
    transform: none;
}

.vpa-sector:focus-visible {
    outline: 2px solid #0b2dbe;
    outline-offset: 4px;
}

.vpa-sectors__foot {
    display: flex;
    justify-content: center;
    margin-top: 48px;
}

.vpa-sectors__all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #0b2dbe;
    color: #0b2dbe;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}

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

.vpa-sectors__all:hover svg,
.vpa-sectors__all:focus-visible svg {
    transform: translateX(4px);
}

@media (max-width: 991px) {
    .vpa-sectors__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px 20px;
    }
}

@media (max-width: 575px) {
    .vpa-sectors__head {
        margin-bottom: 32px;
        text-align: left;
    }

    .vpa-sectors__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .vpa-sector__name {
        margin-top: 16px;
    }
}

/* ---------- Valuation & Advisory only: the newest report as a photo band (.vpa-report) ---------- */
.vpa-report__band {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(320px, 30vw, 440px);
    overflow: hidden;
    color: #fff;
    text-decoration: none;
}

.vpa-report__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% 50%;
}

.vpa-report__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(4, 26, 110, .9) 0%, rgba(4, 26, 110, .72) 38%, rgba(4, 26, 110, .25) 70%, rgba(4, 26, 110, .12) 100%);
}

.vpa-report__copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 560px;
    padding: clamp(32px, 4vw, 56px);
}

.vpa-report__eyebrow {
    display: inline-flex;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
}

.vpa-report__eyebrow span {
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, .4);
}

.vpa-report__title {
    font-size: clamp(24px, 2.2vw, 34px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.01em;
}

.vpa-report__name {
    margin: 14px 0 26px;
    font-size: 15px;
    color: rgba(255, 255, 255, .82);
}

.vpa-report__btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 13px 18px 13px 20px;
    background: #fff;
    color: #0a1230;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: background-color .3s ease, color .3s ease;
}

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

.vpa-report__band:hover .vpa-report__btn,
.vpa-report__band:focus-visible .vpa-report__btn {
    background: #0b2dbe;
    color: #fff;
}

.vpa-report__band:hover .vpa-report__btn svg,
.vpa-report__band:focus-visible .vpa-report__btn svg {
    transform: translateX(3px);
}

@media (max-width: 767px) {
    .vpa-report__shade {
        background: linear-gradient(180deg, rgba(4, 26, 110, .55) 0%, rgba(4, 26, 110, .9) 100%);
    }
}

/* ---------- Valuation & Advisory only: the valuation team (.vpa-team), People page cards ---------- */
.vpa-team__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 36px;
}

.frv-page .vpa-team__title {
    margin: 0;
    font-family: inherit;
    font-size: clamp(30px, 2.8vw, 42px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.015em;
    color: #0a1230;
}

.vpa-team__all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #0b2dbe;
    color: #0b2dbe;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.vpa-team__all svg {
    width: 16px;
    height: 16px;
}

.vpa-team__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px;
}

.vpa-person {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 12px 22px;
    background: #fff;
    border: 1px solid #e3e8f3;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .3s ease, transform .3s ease;
}

.vpa-person:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(9, 45, 182, .12);
    color: inherit;
}

.vpa-person__photo {
    display: block;
    width: 100%;
    aspect-ratio: 5 / 6;
    overflow: hidden;
    border-radius: 8px;
    background: #e9ecf5;
}

.vpa-person__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform .5s ease;
}

.vpa-person:hover .vpa-person__photo img {
    transform: scale(1.04);
}

.vpa-person__name {
    display: block;
    margin-top: 16px;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: #14193f;
    transition: color .2s ease;
}

a.vpa-person:hover .vpa-person__name {
    color: #0b2dbe;
}

.vpa-person__role {
    display: block;
    margin-top: 6px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #5b6782;
}

@media (max-width: 1199px) {
    .vpa-team__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .vpa-team__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .vpa-team__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vpa-person,
    .vpa-person__photo img {
        transition: none;
    }
}

/* ---------- blue "why" cards, hover (2026-11-05): the corner stripes grow out of the corner,
   a band of light sweeps once across the card and it brightens a step; the old white bar on
   the top edge is gone. Straight edges only, no lift. ---------- */
.frv-panel--why .frv-why__line {
    display: none;
}

.frv-panel--why .frv-why__card::before {
    transform-origin: 100% 100%;
    transition: transform .9s cubic-bezier(.22, 1, .36, 1), opacity .6s ease;
}

.frv-panel--why .frv-why__card::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -20%;
    bottom: -20%;
    left: -60%;
    width: 45%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .12) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-24deg) translateX(0);
    opacity: 0;
    pointer-events: none;
}

.frv-panel--why .frv-why__card {
    transition: background-color .5s ease;
}

.frv-panel--why .frv-why__card:hover::before,
.frv-panel--why .frv-why__card:focus-within::before {
    transform: scale(1.7);
}

.frv-panel--why .frv-why__card:hover::after,
.frv-panel--why .frv-why__card:focus-within::after {
    animation: frv-why-sweep 1.1s cubic-bezier(.65, 0, .2, 1) both;
}

@keyframes frv-why-sweep {
    0% { opacity: 0; transform: skewX(-24deg) translateX(0); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: skewX(-24deg) translateX(420%); }
}

.frv-panel--why .frv-why__card:nth-child(1):hover { background: #08208f; }
.frv-panel--why .frv-why__card:nth-child(2):hover { background: #0a27a8; }
.frv-panel--why .frv-why__card:nth-child(3):hover { background: #0b2dbe; }
.frv-panel--why .frv-why__card:nth-child(4):hover { background: #0d38d6; }

@media (prefers-reduced-motion: reduce) {
    .frv-panel--why .frv-why__card::before {
        transition: none;
    }

    .frv-panel--why .frv-why__card:hover::after {
        animation: none;
    }
}

/* =====================================================================================
   Valuation & Advisory, round of 2026-11-05
   ===================================================================================== */

/* ---------- Sector Expertise (.vpa-sx): the home page's animated sector layout, turned round.
   Copy and sector list on the left, a three-photo mosaic (one tall, two stacked) on the right. ---------- */
.vpa-sx__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 40px;
    margin-bottom: 40px;
}

.vpa-sx__intro {
    max-width: 760px;
}

.frv-page .vpa-sx__title,
.frv-page .vpa-cs__title {
    margin: 0;
    font-family: inherit;
    font-size: clamp(30px, 2.8vw, 42px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.015em;
    color: #0a1230;
}

.vpa-sx__lead {
    margin: 14px 0 0;
    font-size: 16px;
    line-height: 1.65;
    color: #5b6782;
}

.vpa-sx__nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

.vpa-sx__count {
    margin-right: 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    color: #8a93a6;
}

.vpa-sx__count span {
    color: #0b2dbe;
}

.vpa-sx__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;
}

.vpa-sx__btn svg {
    width: 18px;
    height: 18px;
}

.vpa-sx__btn:hover,
.vpa-sx__btn:focus-visible {
    border-color: #0b2dbe;
    background: #0b2dbe;
    color: #fff;
}

.vpa-sx__stage {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    min-height: clamp(460px, 38vw, 580px);
}

.vpa-sx__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(32px, 3.6vw, 56px) clamp(28px, 3.6vw, 56px) clamp(56px, 5vw, 76px);
    background: #f0f4fb;
}

.vpa-sx__copy.is-on {
    animation: vpa-sx-in .7s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes vpa-sx-in {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to { opacity: 1; transform: none; }
}

.vpa-sx__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #0b2dbe;
}

.vpa-sx__eyebrow span {
    padding-left: 10px;
    border-left: 1px solid rgba(11, 45, 190, .35);
    font-weight: 500;
    color: #3d4a6b;
}

.frv-page .vpa-sx__name {
    margin: 0 0 18px;
    font-family: inherit;
    font-size: clamp(26px, 2.3vw, 36px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.015em;
    color: #0a1230;
}

.vpa-sx__list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #d5dcea;
}

.vpa-sx__list li {
    border-bottom: 1px solid #d5dcea;
}

.vpa-sx__list a {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 20px;
    gap: 14px;
    align-items: start;
    padding: 18px 0;
    color: #0a1230;
    text-decoration: none;
}

/* a line draws along the row's foot when it is pointed at */
.vpa-sx__list a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: #0b2dbe;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.vpa-sx__num {
    padding-top: 2px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    color: #0b2dbe;
}

.vpa-sx__body b {
    display: block;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    transition: color .25s ease;
}

.vpa-sx__body span {
    display: block;
    margin-top: 6px;
    font-size: 14.5px;
    line-height: 1.55;
    color: #5b6782;
}

.vpa-sx__list svg {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    color: #0b2dbe;
    transition: transform .3s ease;
}

.vpa-sx__list a:hover::after,
.vpa-sx__list a:focus-visible::after {
    transform: scaleX(1);
}

.vpa-sx__list a:hover b,
.vpa-sx__list a:focus-visible b {
    color: #0b2dbe;
}

.vpa-sx__list a:hover svg,
.vpa-sx__list a:focus-visible svg {
    transform: translateX(4px);
}

.vpa-sx__all {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    padding-bottom: 5px;
    border-bottom: 1px solid #0b2dbe;
    font-size: 15px;
    font-weight: 500;
    color: #0b2dbe;
    text-decoration: none;
}

.vpa-sx__all svg {
    width: 16px;
    height: 16px;
}

.vpa-sx__bar {
    position: absolute;
    left: clamp(28px, 3.6vw, 56px);
    right: clamp(28px, 3.6vw, 56px);
    bottom: clamp(24px, 2.4vw, 36px);
    height: 2px;
    background: #d5dcea;
}

.vpa-sx__bar i {
    position: absolute;
    inset: 0;
    background: #0b2dbe;
    transform: scaleX(0);
    transform-origin: 0 50%;
}

.vpa-sx__bar i.is-run {
    animation: vpa-sx-bar 5s linear both;
}

@keyframes vpa-sx-bar {
    to { transform: scaleX(1); }
}

/* the mosaic: one tall frame and two stacked */
.vpa-sx__mosaic {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding-left: 4px;
    background: #fff;
}

.vpa-sx__cell {
    position: relative;
    overflow: hidden;
    background: #dfe6f5;
}

.vpa-sx__cell:first-child {
    grid-row: 1 / span 2;
}

.vpa-sx__shot {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: opacity .9s ease, visibility 0s linear .9s;
}

.vpa-sx__shot.is-on {
    opacity: 1;
    visibility: visible;
    transition: opacity .9s ease, visibility 0s;
}

.vpa-sx__shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* the cell's caption on frosted glass */
.vpa-sx__cap {
    position: absolute;
    left: 14px;
    bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100% - 28px);
    padding: 9px 14px;
    border: 1px solid rgba(255, 255, 255, .4);
    background: rgba(255, 255, 255, .18);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    transition: background-color .35s ease, border-color .35s ease;
}

.vpa-sx__cap b {
    padding-right: 10px;
    border-right: 1px solid rgba(255, 255, 255, .5);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
}

/* the photo of the sector pointed at in the list: a royal-blue rim and a solid caption */
.vpa-sx__cell::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 3px solid #0b2dbe;
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}

.vpa-sx__cell.is-hl::after,
.vpa-sx__cell:hover::after {
    opacity: 1;
}

.vpa-sx__cell.is-hl .vpa-sx__cap,
.vpa-sx__cell:hover .vpa-sx__cap {
    border-color: #0b2dbe;
    background: #0b2dbe;
}

@media (max-width: 991px) {
    .vpa-sx__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .vpa-sx__stage {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .vpa-sx__mosaic {
        order: -1;
        aspect-ratio: 4 / 3;
        padding: 0 0 4px;
    }
}

@media (max-width: 575px) {
    .vpa-sx__count {
        display: none;
    }

    .vpa-sx__panel {
        padding: 26px 20px 56px;
    }

    .vpa-sx__bar {
        left: 20px;
        right: 20px;
    }

    .vpa-sx__cap {
        left: 8px;
        bottom: 8px;
        max-width: calc(100% - 16px);
        padding: 6px 10px;
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vpa-sx__shot,
    .vpa-sx__list a::after {
        transition: none;
    }

    .vpa-sx__copy.is-on {
        animation: none;
    }
}

/* ---------- Case studies (.vpa-cs): tall photo cards with their details on frosted glass, in a row
   that steps on by itself every 5s; a line under the row shows how far along it is ---------- */
.vpa-cs {
    background: #f5f7fc;
}

.vpa-cs__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px 64px;
    align-items: end;
    margin-bottom: 40px;
}

.vpa-cs__lead {
    margin: 0 0 22px;
    font-size: 16px;
    line-height: 1.65;
    color: #5b6782;
}

.vpa-cs__nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vpa-cs__all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    padding-bottom: 5px;
    border-bottom: 1px solid #0b2dbe;
    font-size: 15px;
    font-weight: 500;
    color: #0b2dbe;
    text-decoration: none;
    white-space: nowrap;
}

.vpa-cs__all svg {
    width: 16px;
    height: 16px;
}

.vpa-cs__row {
    display: flex;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.vpa-cs__row::-webkit-scrollbar {
    display: none;
}

.vpa-cs__item {
    flex: 0 0 calc((100% - 48px) / 3.6);
    min-width: 0;
    scroll-snap-align: start;
}

.vpa-cs__card {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #0a1a5c;
    color: #fff;
    text-decoration: none;
}

.vpa-cs__card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vpa-cs__card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(6, 36, 184, 0) 40%, rgba(6, 24, 110, .55) 100%);
    pointer-events: none;
}

.vpa-cs__num {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, .4);
    background: rgba(255, 255, 255, .16);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
}

.vpa-cs__glass {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    padding: 20px 20px 18px;
    border: 1px solid rgba(255, 255, 255, .38);
    background: linear-gradient(135deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .08) 100%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
    transition: background-color .4s ease, border-color .4s ease;
}

.vpa-cs__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .85);
}

.vpa-cs__name {
    margin-top: 8px;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.25;
}

.vpa-cs__place {
    margin-top: 4px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, .82);
}

.vpa-cs__value {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .3);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.1;
}

.vpa-cs__value small {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}

/* pointed at: the glass turns solid royal blue (nothing moves) */
.vpa-cs__card:hover .vpa-cs__glass,
.vpa-cs__card:focus-visible .vpa-cs__glass {
    border-color: #0b2dbe;
    background: rgba(11, 45, 190, .92);
}

.vpa-cs__card:focus-visible {
    outline: 2px solid #0b2dbe;
    outline-offset: 3px;
}

.vpa-cs__track {
    position: relative;
    display: block;
    height: 2px;
    margin-top: 28px;
    overflow: hidden;
    background: #d5dcea;
}

.vpa-cs__track i {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 30%;
    background: #0b2dbe;
    transition: transform .35s ease;
}

@media (max-width: 1199px) {
    .vpa-cs__item {
        flex-basis: calc((100% - 32px) / 2.6);
    }
}

@media (max-width: 991px) {
    .vpa-cs__head {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
}

@media (max-width: 575px) {
    .vpa-cs__item {
        flex-basis: 80%;
    }

    .vpa-cs__all {
        font-size: 14px;
    }
}

/* ---------- report band: the copy on a frosted-glass panel on the right, the photo left clear and
   only lightly tinted ---------- */
.vpa-report__band {
    justify-content: flex-end;
}

.vpa-report__img {
    object-position: 30% 50%;
}

.vpa-report__shade {
    background: linear-gradient(270deg, rgba(6, 36, 184, .5) 0%, rgba(6, 36, 184, .2) 45%, rgba(6, 36, 184, .04) 100%);
}

.vpa-report__copy--glass {
    margin: clamp(20px, 3vw, 44px);
    max-width: 540px;
    border: 1px solid rgba(255, 255, 255, .4);
    background: linear-gradient(135deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, .08) 100%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 24px 60px rgba(4, 16, 70, .22);
}

.vpa-report__copy--glass .vpa-report__eyebrow {
    color: #fff;
}

.vpa-report__copy--glass .vpa-report__btn {
    background: #0b2dbe;
    color: #fff;
}

.vpa-report__band:hover .vpa-report__copy--glass .vpa-report__btn,
.vpa-report__band:focus-visible .vpa-report__copy--glass .vpa-report__btn {
    background: #fff;
    color: #0a1230;
}

@media (max-width: 767px) {
    .vpa-report__band {
        justify-content: stretch;
        align-items: flex-end;
        min-height: 460px;
    }

    .vpa-report__shade {
        background: linear-gradient(180deg, rgba(6, 36, 184, .05) 0%, rgba(6, 36, 184, .45) 100%);
    }

    .vpa-report__copy--glass {
        margin: 14px;
        padding: 24px;
    }
}

/* ---------- team: the title on its own line under the name, the department under it; every card
   reads the same way and lines up. Pointing at a card no longer moves it. ---------- */
.vpa-person {
    align-items: stretch;
    text-align: left;
}

.vpa-person:hover {
    transform: none;
    box-shadow: none;
    border-color: #0b2dbe;
}

.vpa-person__photo {
    border-radius: 6px;
}

.vpa-person:hover .vpa-person__photo img {
    transform: none;
}

.vpa-person__name {
    padding: 0 4px;
}

.vpa-person__title {
    display: block;
    margin-top: 10px;
    padding: 10px 4px 0;
    border-top: 1px solid #e3e8f3;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #0b2dbe;
}

.vpa-person__role {
    margin-top: 4px;
    padding: 0 4px;
    font-size: 13.5px;
    line-height: 1.45;
}

.vpa-person:hover .vpa-person__name {
    color: #0b2dbe;
}

@media (max-width: 1299px) {
    .vpa-team__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .vpa-team__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vpa-person__title {
        white-space: normal;
    }
}

/* ---------- Key Services (.vpa-ks, 2026-11-05): ruled columns, three to a row. Each column has a
   fine line down its left edge, the service name, one line of copy, an "Explore" link and a photo;
   the photos line up along the foot of each row. Kept tight: no large gaps. ---------- */
.vpa-ks__head {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 18px 64px;
    align-items: end;
    margin-bottom: clamp(32px, 3.4vw, 48px);
}

.frv-page .vpa-ks__title {
    margin: 0;
    font-size: clamp(28px, 2.6vw, 42px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: #0a1230;
}

.frv-page .vpa-ks__title span {
    display: block;
    color: #0b2dbe;
}

.vpa-ks__lead {
    max-width: 520px;
    margin: 0;
    font-size: 16px;
    line-height: 1.65;
    color: #5b6782;
}

.vpa-ks__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vpa-ks__item {
    display: flex;
    min-width: 0;
}

.vpa-ks__card {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 2px 28px 0 24px;
    border-left: 1px solid #d5dcea;
    color: inherit;
    text-decoration: none;
    transition: border-color .3s ease;
}

.vpa-ks__name {
    font-size: clamp(20px, 1.6vw, 24px);
    font-weight: 500;
    line-height: 1.2;
    color: #0a1230;
    transition: color .3s ease;
}

.vpa-ks__text {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.6;
    color: #5b6782;
}

.vpa-ks__more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    font-size: 15px;
    font-weight: 500;
    color: #0b2dbe;
}

.vpa-ks__more svg {
    flex: 0 0 auto;
    width: 22px;
    height: 9px;
    transition: transform .3s ease;
}

.vpa-ks__photo {
    display: block;
    margin-top: auto;
    padding-top: 22px;
}

.vpa-ks__photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: #e6eefc;
}

/* pointed at: the rule and the name turn blue, the arrow steps on; the photo stays still */
.vpa-ks__card:hover,
.vpa-ks__card:focus-visible {
    border-left-color: #0b2dbe;
}

.vpa-ks__card:hover .vpa-ks__name,
.vpa-ks__card:focus-visible .vpa-ks__name {
    color: #0b2dbe;
}

.vpa-ks__card:hover .vpa-ks__more svg,
.vpa-ks__card:focus-visible .vpa-ks__more svg {
    transform: translateX(4px);
}

.vpa-ks__card:focus-visible {
    outline: 2px solid #0b2dbe;
    outline-offset: 4px;
}

@media (max-width: 991px) {
    .vpa-ks__head {
        grid-template-columns: minmax(0, 1fr);
    }

    .vpa-ks__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 0;
    }
}

@media (max-width: 575px) {
    .vpa-ks__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .vpa-ks__card {
        padding: 0 0 0 18px;
    }

    .vpa-ks__photo {
        padding-top: 16px;
    }
}

/* ---------- case study cards, smooth scrolling (2026-11-05): the frosted-glass blur was redrawn
   on every frame over eight photos, which made the page stutter while scrolling past. The panels
   keep the same look with a flat translucent tint instead of a live blur. ---------- */
.vpa-cs__card {
    contain: paint;
}

.vpa-cs__glass {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: linear-gradient(135deg, rgba(20, 40, 120, .62) 0%, rgba(10, 26, 92, .5) 100%);
}

.vpa-cs__num {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(10, 26, 92, .45);
}

.vpa-cs__track i {
    transition: none;
    will-change: transform;
}

/* hero photo (2026-11-05): set lower so the whole room shows (sofas, table, the skyline through the
   glass) with less ceiling; on phones the sculpture and table stay centred under the copy */
@media (max-width: 767px) {
    .rs-svh .vpa-hero-img {
        object-position: 50% 72% !important;
    }
}

/* Key Services, tighter: shorter photos, a clearer rule */
.vpa-ks__card {
    border-left-color: #c3cde3;
}

.vpa-ks__photo {
    padding-top: 18px;
}

.vpa-ks__photo img {
    aspect-ratio: 16 / 9;
}

.vpa-ks__grid {
    row-gap: 36px;
}

/* Key Services on phones: a compact row each, the photo as a small square beside the copy */
@media (max-width: 575px) {
    .vpa-ks__grid {
        gap: 22px;
    }

    .vpa-ks__card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 92px;
        column-gap: 16px;
        align-items: start;
        padding: 0 0 0 16px;
    }

    .vpa-ks__name,
    .vpa-ks__text,
    .vpa-ks__more {
        grid-column: 1;
    }

    .vpa-ks__name {
        font-size: 19px;
    }

    .vpa-ks__text {
        margin-top: 6px;
        font-size: 14px;
        line-height: 1.5;
    }

    .vpa-ks__more {
        margin-top: 8px;
        font-size: 14px;
    }

    .vpa-ks__photo {
        grid-column: 2;
        grid-row: 1 / 4;
        margin: 0;
        padding: 0;
    }

    .vpa-ks__photo img {
        aspect-ratio: 1 / 1;
    }
}

@media (max-width: 575px) {
    .vpa-ks__more-name {
        display: none;
    }
}

/* case study row: overflow-x: auto turns overflow-y to auto as well, and the smallest vertical
   overflow then latches the mouse wheel to the row, so the page stopped scrolling over the cards.
   Vertical overflow is cut off and a sideways overscroll stays inside the row. */
.vpa-cs__row {
    overflow-y: hidden;
    overscroll-behavior-x: contain;
}

/* ---------- report band, third pass (.vpa-rep, 2026-11-05): a moving brand-blue band (brandReef)
   instead of the photo and frosted glass. Copy and two buttons on the calm left; the report's book
   mockup stands on the folds to the right and rises a little above the band. Square corners. ---------- */
.vpa-rep {
    padding-top: clamp(72px, 7vw, 112px);
}

.vpa-rep__band {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 32px clamp(24px, 4vw, 64px);
    min-height: 360px;
    padding: clamp(36px, 4vw, 56px) clamp(28px, 4.4vw, 64px);
    background-color: #0a3fe0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
}

.vpa-rep__copy {
    position: relative;
    z-index: 1;
    max-width: 560px;
}

.vpa-rep__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .85);
}

.vpa-rep__eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: #fff;
}

.vpa-rep__eyebrow span {
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, .45);
}

.frv-page .vpa-rep__title {
    margin: 0 0 14px;
    font-size: clamp(24px, 2.3vw, 34px);
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -.01em;
    color: #fff;
}

.vpa-rep__name {
    margin: 0 0 26px;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .82);
}

.vpa-rep__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.frv-page .vpa-rep__btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 24px;
    border: 1px solid #fff;
    border-radius: 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.frv-page .vpa-rep__btn svg {
    width: 22px;
    height: 9px;
    transition: transform .3s ease;
}

.frv-page .vpa-rep__btn--solid {
    background: #fff;
    color: #0b2dbe;
}

.frv-page .vpa-rep__btn--line {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .7);
}

.frv-page .vpa-rep__btn--solid:hover,
.frv-page .vpa-rep__btn--solid:focus-visible {
    background: #e6eefc;
    color: #0b2dbe;
}

.frv-page .vpa-rep__btn--line:hover,
.frv-page .vpa-rep__btn--line:focus-visible {
    border-color: #fff;
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.frv-page .vpa-rep__btn:hover svg,
.frv-page .vpa-rep__btn:focus-visible svg {
    transform: translateX(4px);
}

/* the book stands on the folds and rises above the band's top edge */
.vpa-rep__book {
    position: relative;
    z-index: 1;
    display: block;
    align-self: end;
    margin: clamp(-120px, -8vw, -64px) 0 clamp(-56px, -4vw, -36px);
}

.vpa-rep__book img {
    display: block;
    width: 100%;
    max-width: 620px;
    height: auto;
    margin-left: auto;
    filter: drop-shadow(0 24px 36px rgba(4, 18, 90, .35));
}

@media (max-width: 991px) {
    .vpa-rep__band {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        padding-top: 0;
    }

    .vpa-rep__book {
        order: -1;
        align-self: auto;
        margin: -48px auto 0;
        max-width: 480px;
    }

    .vpa-rep__book img {
        margin: 0 auto;
    }
}

@media (max-width: 575px) {
    .vpa-rep__book {
        margin-top: -32px;
    }

    .frv-page .vpa-rep__btn {
        flex: 1 1 100%;
        justify-content: space-between;
    }
}

/* the book, placed absolutely so it really stands proud of the band: its foot hangs below the band
   and its top rises above it */
@media (min-width: 992px) {
    .vpa-rep__band {
        min-height: 380px;
    }

    .vpa-rep__book {
        position: absolute;
        right: clamp(16px, 3vw, 48px);
        bottom: -28px;
        width: min(46%, 640px);
        margin: 0;
    }

    .vpa-rep__book img {
        max-width: none;
    }
}

/* ---------- Case studies, formal cards (.vpa-cs, 2026-11-05): three whole cards to a view. Each has
   its photo in a 3:2 frame with the number on a solid blue tab, then a white panel with the service
   line, the title and a small fact table (sector, location, assessed value), and a "view" line at the
   foot. On hover the photo zooms in its frame, a blue rule draws across the top of the panel and the
   arrow slides on. Replaces the tall photo cards with the tinted glass panel. ---------- */
.vpa-cs .vpa-cs__row {
    align-items: stretch;
}

.vpa-cs .vpa-cs__item {
    display: flex;
    flex: 0 0 calc((100% - 32px) / 3);
}

.vpa-cs .vpa-cs__card {
    display: flex;
    flex-direction: column;
    width: 100%;
    aspect-ratio: auto;
    border: 1px solid #dde3ef;
    background: #fff;
    color: #0a1230;
    transition: border-color .3s ease, box-shadow .3s ease;
}

.vpa-cs .vpa-cs__card::before {
    display: none;
}

.vpa-cs .vpa-cs__media {
    position: relative;
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #0a1a5c;
}

.vpa-cs .vpa-cs__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s cubic-bezier(.22, 1, .36, 1);
}

.vpa-cs .vpa-cs__num {
    top: 0;
    left: 0;
    padding: 8px 12px;
    border: 0;
    background: #0b2dbe;
    color: #fff;
    font-size: 12px;
    line-height: 1;
}

.vpa-cs .vpa-cs__body {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 22px 24px 20px;
}

.vpa-cs .vpa-cs__body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #0b2dbe;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .5s cubic-bezier(.65, 0, .2, 1);
}

.vpa-cs .vpa-cs__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #0b2dbe;
}

.vpa-cs .vpa-cs__name {
    margin-top: 8px;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    color: #0a1230;
}

.vpa-cs .vpa-cs__facts {
    margin: 18px 0 0;
    border-top: 1px solid #e3e8f2;
}

.vpa-cs .vpa-cs__facts div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid #e3e8f2;
}

.vpa-cs .vpa-cs__facts dt {
    flex: 0 0 auto;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #6b7690;
}

.vpa-cs .vpa-cs__facts dd {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    text-align: right;
    color: #0a1230;
}

.vpa-cs .vpa-cs__facts .is-value dd {
    font-size: 17px;
    font-weight: 600;
    color: #0b2dbe;
}

.vpa-cs .vpa-cs__more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 18px;
    font-size: 14px;
    font-weight: 500;
    color: #0b2dbe;
}

.vpa-cs .vpa-cs__more svg {
    width: 18px;
    height: 18px;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}

.vpa-cs .vpa-cs__card:hover,
.vpa-cs .vpa-cs__card:focus-visible {
    border-color: #0b2dbe;
    box-shadow: 0 18px 36px -24px rgba(10, 18, 48, .45);
}

.vpa-cs .vpa-cs__card:hover .vpa-cs__media img,
.vpa-cs .vpa-cs__card:focus-visible .vpa-cs__media img {
    transform: scale(1.05);
}

.vpa-cs .vpa-cs__card:hover .vpa-cs__body::before,
.vpa-cs .vpa-cs__card:focus-visible .vpa-cs__body::before {
    transform: none;
}

.vpa-cs .vpa-cs__card:hover .vpa-cs__more svg,
.vpa-cs .vpa-cs__card:focus-visible .vpa-cs__more svg {
    transform: translateX(4px);
}

@media (max-width: 991px) {
    .vpa-cs .vpa-cs__item {
        flex-basis: calc((100% - 16px) / 2);
    }
}

@media (max-width: 575px) {
    .vpa-cs .vpa-cs__item {
        flex-basis: 85%;
    }

    .vpa-cs .vpa-cs__body {
        padding: 18px 18px 16px;
    }

    .vpa-cs .vpa-cs__name {
        font-size: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vpa-cs .vpa-cs__media img,
    .vpa-cs .vpa-cs__body::before,
    .vpa-cs .vpa-cs__more svg {
        transition: none;
    }
}

/* ---------- Key Services, ruled grid (.vpa-ks, 2026-11-05): the heading is just "Key Services", the
   paragraph beside it; the nine services sit in a hairline-ruled grid, three to a row. Each cell has
   its photo on top, then the number, the name, one line of copy at an easy line height and an
   "Explore" foot on a hairline, pinned to the bottom so the feet line up along each row. On hover the
   photo zooms in its frame, a blue rule draws across the top of the copy, the name turns blue and the
   arrow steps on. On phones each service is a compact row with a square photo. ---------- */
.frv-page .vpa-ks .vpa-ks__head {
    align-items: start;
    margin-bottom: clamp(28px, 3vw, 44px);
}

.frv-page .vpa-ks .vpa-ks__title {
    font-size: clamp(30px, 2.8vw, 42px);
    line-height: 1.15;
    letter-spacing: -.015em;
    text-transform: none;
}

.frv-page .vpa-ks .vpa-ks__lead {
    justify-self: end;
    font-size: 16px;
    line-height: 1.6;
}

.vpa-ks .vpa-ks__grid {
    gap: 1px;
    border: 1px solid #dde3ef;
    background: #dde3ef;
}

.vpa-ks .vpa-ks__item {
    background: #fff;
}

.vpa-ks .vpa-ks__card {
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 0;
    background: #fff;
}

.vpa-ks .vpa-ks__photo {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #e6eefc;
}

.vpa-ks .vpa-ks__photo img {
    aspect-ratio: 16 / 10;
    transition: transform .9s cubic-bezier(.22, 1, .36, 1);
}

.vpa-ks .vpa-ks__body {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 24px 26px 0;
}

.vpa-ks .vpa-ks__body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #0b2dbe;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .5s cubic-bezier(.65, 0, .2, 1);
}

.vpa-ks .vpa-ks__num {
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    color: #0b2dbe;
}

.vpa-ks .vpa-ks__name {
    font-size: clamp(19px, 1.45vw, 22px);
    line-height: 1.25;
}

.vpa-ks .vpa-ks__text {
    flex: 1 1 auto;
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.55;
    color: #5b6782;
}

.vpa-ks .vpa-ks__more {
    justify-content: space-between;
    margin: 22px -26px 0;
    padding: 16px 26px 18px;
    border-top: 1px solid #e6ebf5;
    font-size: 14.5px;
}

/* the service name stays in the link for screen readers only, so the foot reads "Explore" */
.vpa-ks .vpa-ks__more-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.vpa-ks .vpa-ks__card:hover .vpa-ks__photo img,
.vpa-ks .vpa-ks__card:focus-visible .vpa-ks__photo img {
    transform: scale(1.05);
}

.vpa-ks .vpa-ks__card:hover .vpa-ks__body::before,
.vpa-ks .vpa-ks__card:focus-visible .vpa-ks__body::before {
    transform: none;
}

.vpa-ks .vpa-ks__card:focus-visible {
    outline: 2px solid #0b2dbe;
    outline-offset: -2px;
}

@media (max-width: 991px) {
    .frv-page .vpa-ks .vpa-ks__lead {
        justify-self: start;
    }

    .vpa-ks .vpa-ks__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1px;
    }
}

@media (max-width: 575px) {
    .vpa-ks .vpa-ks__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1px;
    }

    .vpa-ks .vpa-ks__card {
        display: grid;
        grid-template-columns: 96px minmax(0, 1fr);
        align-items: stretch;
        padding: 0;
    }

    .vpa-ks .vpa-ks__photo {
        grid-column: 1;
        grid-row: 1;
    }

    .vpa-ks .vpa-ks__photo img {
        height: 100%;
        aspect-ratio: auto;
    }

    .vpa-ks .vpa-ks__body {
        grid-column: 2;
        grid-row: 1;
        padding: 16px 16px 0;
    }

    .vpa-ks .vpa-ks__num {
        margin-bottom: 6px;
    }

    .vpa-ks .vpa-ks__name {
        font-size: 18px;
    }

    .vpa-ks .vpa-ks__text {
        margin-top: 6px;
        font-size: 14px;
        line-height: 1.5;
    }

    .vpa-ks .vpa-ks__more {
        margin: 12px -16px 0;
        padding: 12px 16px 14px;
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vpa-ks .vpa-ks__photo img,
    .vpa-ks .vpa-ks__body::before {
        transition: none;
    }
}

/* ---------- report band, fourth pass (.vpa-rep, 2026-11-05): the book now sits inside the band (no
   longer hanging below it), centred on the right over a soft glow. A fine inner frame runs round the
   band. The copy leads with the report's own title, then its summary, a small facts row (coverage,
   published, prepared by) on hairlines, and the two buttons. On hover the book lifts a little. ---------- */
.vpa-rep {
    padding-top: clamp(56px, 5.5vw, 88px);
}

.vpa-rep .vpa-rep__band {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
    gap: 28px clamp(32px, 4vw, 72px);
    min-height: 0;
    padding: clamp(30px, 3vw, 44px) clamp(32px, 4.6vw, 72px);
    overflow: hidden;
    isolation: isolate;
}

.vpa-rep .vpa-rep__band::after {
    content: "";
    position: absolute;
    inset: 14px;
    z-index: 0;
    border: 1px solid rgba(255, 255, 255, .18);
    pointer-events: none;
}

.vpa-rep .vpa-rep__copy {
    max-width: 580px;
}

.vpa-rep .vpa-rep__eyebrow {
    margin-bottom: 14px;
}

.frv-page .vpa-rep .vpa-rep__title {
    margin: 0 0 10px;
    font-size: clamp(24px, 2.1vw, 32px);
    line-height: 1.15;
}

.vpa-rep .vpa-rep__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 18px;
    font-size: 15.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .86);
}

.vpa-rep .vpa-rep__facts {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    margin: 0 0 22px;
    border-top: 1px solid rgba(255, 255, 255, .28);
    border-bottom: 1px solid rgba(255, 255, 255, .28);
}

.vpa-rep .vpa-rep__facts div {
    padding: 9px 24px 9px 0;
}

.vpa-rep .vpa-rep__facts div + div {
    padding-left: 24px;
    border-left: 1px solid rgba(255, 255, 255, .28);
}

.vpa-rep .vpa-rep__facts dt {
    margin: 0 0 2px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
}

.vpa-rep .vpa-rep__facts dd {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    color: #fff;
}

.vpa-rep .vpa-rep__book {
    position: relative;
    inset: auto;
    z-index: 1;
    align-self: center;
    justify-self: center;
    width: 100%;
    max-width: 470px;
    margin: 0;
}

.frv-page .vpa-rep .vpa-rep__btn {
    padding: 12px 22px;
}

.vpa-rep .vpa-rep__book::before {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 2%;
    height: 22%;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(4, 18, 90, .45), rgba(4, 18, 90, 0));
    filter: blur(6px);
}

.vpa-rep .vpa-rep__book img {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    filter: drop-shadow(0 18px 28px rgba(4, 18, 90, .35));
    transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}

.vpa-rep .vpa-rep__band:hover .vpa-rep__book img {
    transform: translateY(-6px);
}

@media (max-width: 991px) {
    .vpa-rep .vpa-rep__band {
        grid-template-columns: minmax(0, 1fr);
        padding: 32px 32px 36px;
    }

    .vpa-rep .vpa-rep__book {
        order: -1;
        max-width: 360px;
    }
}

@media (max-width: 575px) {
    .vpa-rep .vpa-rep__band {
        padding: 26px 22px 30px;
    }

    .vpa-rep .vpa-rep__band::after {
        inset: 8px;
    }

    .vpa-rep .vpa-rep__facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .vpa-rep .vpa-rep__facts div,
    .vpa-rep .vpa-rep__facts div + div {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 0;
        border-left: 0;
    }

    .vpa-rep .vpa-rep__facts div + div {
        border-top: 1px solid rgba(255, 255, 255, .2);
    }

    .vpa-rep .vpa-rep__facts dt {
        margin: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vpa-rep .vpa-rep__book img {
        transition: none;
    }
}

/* ---------- Valuation team, balanced cards (.vpa-tm, 2026-11-05): white cards on a soft grey band,
   three to a row. Top of each card: the name and title, centred against a square portrait on the
   right. Foot: a hairline across the card with the department on the left (and "Profile" on the
   right when the person has a page), so every card has the same structure and height. On hover a
   blue line draws along the foot, the portrait zooms a little and a soft shadow lifts the card. ---------- */
.vpa-tm {
    background: #f2f4f8;
}

.vpa-tm__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px 48px;
    margin-bottom: clamp(28px, 3vw, 44px);
}

.vpa-tm__lead {
    max-width: 640px;
    margin: 12px 0 0;
    font-size: 16px;
    line-height: 1.6;
    color: #5b6782;
}

.vpa-tm__all {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #0b2dbe;
    color: #0b2dbe;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

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

.vpa-tm__all:hover,
.vpa-tm__all:focus-visible {
    color: #0b2dbe;
}

.vpa-tm__all:hover svg,
.vpa-tm__all:focus-visible svg {
    transform: translateX(4px);
}

.vpa-tm__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vpa-tm__item {
    display: flex;
    min-width: 0;
}

.vpa-tm__card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "info photo"
        "foot foot";
    align-items: center;
    column-gap: 24px;
    width: 100%;
    padding: 28px 28px 0;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: box-shadow .35s ease;
}

.vpa-tm__card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: #0b2dbe;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .5s cubic-bezier(.65, 0, .2, 1);
}

.vpa-tm__info {
    grid-area: info;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.vpa-tm__name {
    font-size: clamp(20px, 1.55vw, 24px);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -.015em;
    color: #0a1230;
    transition: color .3s ease;
}

.vpa-tm__title {
    margin-top: 10px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #0b2dbe;
}

.vpa-tm__photo {
    grid-area: photo;
    width: clamp(96px, 7.6vw, 116px);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #e4e8f0;
}

.vpa-tm__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;
    transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}

.vpa-tm__foot {
    grid-area: foot;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 56px;
    margin-top: 24px;
    padding: 14px 0 16px;
    border-top: 1px solid #e6ebf5;
}

.vpa-tm__dept {
    min-width: 0;
    font-size: 14.5px;
    line-height: 1.4;
    color: #5b6782;
}

.vpa-tm__more {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #0b2dbe;
}

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

.vpa-tm__card:hover,
.vpa-tm__card:focus-visible {
    box-shadow: 0 22px 44px -30px rgba(10, 18, 48, .45);
    color: inherit;
}

.vpa-tm__card:hover::after,
.vpa-tm__card:focus-visible::after {
    transform: none;
}

.vpa-tm__card:hover .vpa-tm__photo img,
.vpa-tm__card:focus-visible .vpa-tm__photo img {
    transform: scale(1.05);
}

a.vpa-tm__card:hover .vpa-tm__name,
a.vpa-tm__card:focus-visible .vpa-tm__name {
    color: #0b2dbe;
}

a.vpa-tm__card:hover .vpa-tm__more svg,
a.vpa-tm__card:focus-visible .vpa-tm__more svg {
    transform: translateX(4px);
}

.vpa-tm__card:focus-visible {
    outline: 2px solid #0b2dbe;
    outline-offset: 2px;
}

@media (max-width: 1199px) {
    .vpa-tm__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .vpa-tm__head {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 575px) {
    .vpa-tm__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .vpa-tm__card {
        column-gap: 16px;
        padding: 20px 20px 0;
    }

    .vpa-tm__name {
        font-size: 20px;
    }

    .vpa-tm__photo {
        width: 80px;
    }

    .vpa-tm__foot {
        min-height: 50px;
        margin-top: 18px;
        padding: 12px 0 14px;
    }

    .vpa-tm__dept {
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vpa-tm__card,
    .vpa-tm__card::after,
    .vpa-tm__photo img,
    .vpa-tm__more svg,
    .vpa-tm__all svg {
        transition: none;
    }
}

/* ---------- Case studies on a deep navy band (.vpa-csx, 2026-11-05): large photo cards in a row that
   runs out to the right edge of the screen so the next card peeks in. Each card carries a white panel
   on its lower left: a document icon, the service line and the assessed value on top, then the title
   and the place. On hover the photo zooms a little and a dark arrow square shows in the panel. Under
   the row, on the right: previous, one square dot per position, next. Replaces .vpa-cs. ---------- */
.vpa-csx {
    overflow: hidden;
    background: #06176e;
    color: #fff;
}

.vpa-csx__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 20px clamp(32px, 5vw, 80px);
    margin-bottom: clamp(32px, 3.4vw, 52px);
}

.vpa-csx__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
}

.vpa-csx__eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: #fff;
}

.frv-page .vpa-csx__title {
    margin: 0;
    font-family: inherit;
    font-size: clamp(32px, 3.2vw, 50px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: #fff;
}

.vpa-csx__side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    justify-self: end;
    max-width: 540px;
}

.vpa-csx__lead {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .78);
}

.vpa-csx__all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, .6);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: border-color .25s ease;
}

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

.vpa-csx__all:hover,
.vpa-csx__all:focus-visible {
    color: #fff;
    border-bottom-color: #fff;
}

.vpa-csx__all:hover svg,
.vpa-csx__all:focus-visible svg {
    transform: translateX(4px);
}

/* the row runs past the content edge to the right edge of the screen */
.vpa-csx__row {
    display: flex;
    gap: 20px;
    margin: 0 calc(50% - 50vw) 0 0;
    padding: 0 20px 0 0;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.vpa-csx__row::-webkit-scrollbar {
    display: none;
}

.vpa-csx__item {
    flex: 0 0 clamp(300px, 33vw, 520px);
    min-width: 0;
    scroll-snap-align: start;
}

.vpa-csx__card {
    position: relative;
    display: block;
    aspect-ratio: 10 / 7;
    overflow: hidden;
    background: #0a1a5c;
    color: #0a1230;
    text-decoration: none;
    contain: paint;
}

.vpa-csx__card > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s cubic-bezier(.22, 1, .36, 1);
}

.vpa-csx__panel {
    position: absolute;
    left: 20px;
    bottom: 20px;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    width: min(calc(100% - 40px), 400px);
    padding: 18px 20px 20px;
    background: #fff;
}

.vpa-csx__top {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.vpa-csx__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: #eef1f7;
    color: #0a1230;
}

.vpa-csx__icon svg {
    width: 20px;
    height: 20px;
}

.vpa-csx__label {
    min-width: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    color: #0a1230;
}

.vpa-csx__value {
    margin-left: auto;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    text-align: right;
    color: #0b2dbe;
    white-space: nowrap;
}

.vpa-csx__name {
    grid-column: 1;
    font-size: clamp(21px, 1.7vw, 26px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -.015em;
    color: #0a1230;
}

.vpa-csx__place {
    grid-column: 1;
    margin-top: 6px;
    font-size: 13.5px;
    line-height: 1.45;
    color: #5b6782;
}

.vpa-csx__go {
    grid-column: 2;
    grid-row: 2 / 4;
    align-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    background: #06176e;
    color: #fff;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .35s ease, transform .35s cubic-bezier(.22, 1, .36, 1), background-color .25s ease;
}

.vpa-csx__go svg {
    width: 20px;
    height: 20px;
}

.vpa-csx__card:hover > img,
.vpa-csx__card:focus-visible > img {
    transform: scale(1.05);
}

.vpa-csx__card:hover .vpa-csx__go,
.vpa-csx__card:focus-visible .vpa-csx__go {
    opacity: 1;
    transform: none;
}

.vpa-csx__card:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* touch screens have no hover: the arrow stays in view */
@media (hover: none) {
    .vpa-csx__go {
        opacity: 1;
        transform: none;
    }
}

.vpa-csx__pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    margin-top: clamp(28px, 3vw, 44px);
}

.vpa-csx__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease, opacity .25s ease;
}

.vpa-csx__btn svg {
    width: 18px;
    height: 18px;
}

.vpa-csx__btn:hover:not(:disabled),
.vpa-csx__btn:focus-visible {
    background: #fff;
    color: #06176e;
}

.vpa-csx__btn:disabled {
    opacity: .35;
    cursor: default;
}

.vpa-csx__dots {
    display: flex;
    align-items: center;
    gap: 14px;
}

.vpa-csx__dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, .45);
    cursor: pointer;
    transition: width .3s ease, height .3s ease, background-color .3s ease;
}

.vpa-csx__dot.is-on {
    width: 11px;
    height: 11px;
    background: #fff;
}

.vpa-csx__dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

@media (max-width: 991px) {
    .vpa-csx__head {
        grid-template-columns: minmax(0, 1fr);
    }

    .vpa-csx__side {
        justify-self: start;
    }

    .vpa-csx__item {
        flex-basis: clamp(300px, 58vw, 460px);
    }
}

@media (max-width: 575px) {
    .vpa-csx__row {
        gap: 12px;
    }

    .vpa-csx__item {
        flex-basis: 86vw;
    }

    .vpa-csx__card {
        aspect-ratio: 4 / 5;
    }

    .vpa-csx__panel {
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: auto;
        padding: 16px;
    }

    .vpa-csx__name {
        font-size: 20px;
    }

    .vpa-csx__go {
        width: 40px;
        height: 40px;
    }

    .vpa-csx__dots {
        gap: 10px;
    }

    .vpa-csx__pager {
        justify-content: space-between;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vpa-csx__card > img,
    .vpa-csx__go,
    .vpa-csx__dot,
    .vpa-csx__btn,
    .vpa-csx__all svg {
        transition: none;
    }
}

/* ---------- Valuation process, formal timeline (.vpa-proc, 2026-11-05, this page only): the four
   stages hang from one fine rule, each from a small square marker, with fine rules between them and
   no rounded white cards. Each stage: the number in a light large weight, the title, the line of copy.
   On hover the marker fills blue and a blue rule draws along the top of that stage. ---------- */
.vpa-proc .frv-process {
    grid-auto-rows: auto;
    gap: 0;
    margin-top: clamp(32px, 3.4vw, 52px);
    border-top: 1px solid #cdd5e4;
}

.vpa-proc .frv-process__card {
    --pl: 0px;
    position: relative;
    height: auto;
    padding: 34px clamp(20px, 2.4vw, 40px) 6px var(--pl);
    border-radius: 0;
    background: transparent;
}

.vpa-proc .frv-process__card + .frv-process__card {
    --pl: clamp(20px, 2.4vw, 40px);
    border-left: 1px solid #e0e5ef;
}

.vpa-proc .frv-process__card:last-child {
    padding-right: 0;
}

.vpa-proc .frv-process__card::before {
    content: "";
    position: absolute;
    top: -6px;
    left: var(--pl);
    width: 11px;
    height: 11px;
    border: 1px solid #0b2dbe;
    background: var(--frv-mist, #f5f6f9);
    transition: background-color .35s ease;
}

.vpa-proc .frv-process__card::after {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: #0b2dbe;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .6s cubic-bezier(.65, 0, .2, 1);
}

.vpa-proc .frv-process__num {
    font-size: clamp(30px, 2.4vw, 38px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -.03em;
    color: #0b2dbe;
}

.vpa-proc .frv-process__title {
    margin-top: 22px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.35;
    color: #0a1230;
}

.vpa-proc .frv-process__desc {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.65;
    color: #5b6782;
}

.vpa-proc .frv-process__p {
    font-size: 15.5px;
    line-height: 1.65;
}

.vpa-proc .frv-process__card:hover::before {
    background: #0b2dbe;
}

.vpa-proc .frv-process__card:hover::after {
    transform: none;
}

/* two stages to a row: each stage carries its own top rule */
@media (max-width: 1023px) {
    .vpa-proc .frv-process {
        row-gap: 32px;
        border-top: 0;
    }

    .vpa-proc .frv-process__card,
    .vpa-proc .frv-process__card + .frv-process__card {
        border-top: 1px solid #cdd5e4;
    }

    .vpa-proc .frv-process__card:nth-child(odd) {
        --pl: 0px;
        border-left: 0;
    }

    .vpa-proc .frv-process__card:nth-child(even) {
        padding-right: 0;
    }
}

@media (max-width: 639px) {
    .vpa-proc .frv-process {
        row-gap: 26px;
    }

    .vpa-proc .frv-process__card,
    .vpa-proc .frv-process__card + .frv-process__card {
        --pl: 0px;
        padding: 28px 0 0;
        border-left: 0;
    }

    .vpa-proc .frv-process__title {
        margin-top: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vpa-proc .frv-process__card::before,
    .vpa-proc .frv-process__card::after {
        transition: none;
    }
}

/* ---------- WHY RELIANT cards, upgrade (all service pages, 2026-11-05): the panels take the height
   of their content instead of a tall fixed one, so there is no empty lower half. The top row reads
   number, rule, then the card's icon in a square outline (where the page has icons; the hidden icon
   is shown again). The corner bars are quieter and brighten on hover; on hover the icon square also
   fills white and the white bar draws along the top edge. ---------- */
@media (min-width: 1024px) {
    .frv-panel--why .frv-why__card {
        min-height: clamp(260px, 19vw, 300px);
        padding: 30px 30px 36px;
    }
}

.frv-panel--why .frv-why__top {
    margin-bottom: 28px;
}

.frv-panel--why .frv-why__top::after {
    order: 1;
}

.frv-panel--why .frv-why__ico {
    display: flex;
    order: 2;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 0;
    color: #fff;
    transition: background-color .4s ease, color .4s ease, border-color .4s ease;
}

.frv-panel--why .frv-why__ico .frv-ic {
    width: 18px;
    height: 18px;
}

.frv-panel--why .frv-why__desc {
    color: rgba(255, 255, 255, .84);
}

.frv-panel--why .frv-why__card::before {
    width: min(46%, 150px);
    opacity: .55;
    transition: opacity .5s ease;
}

.frv-panel--why .frv-why__card:hover::before {
    opacity: 1;
}

.frv-panel--why .frv-why__card:hover .frv-why__ico {
    border-color: #fff;
    background: #fff;
    color: #0b2dbe;
}

@media (prefers-reduced-motion: reduce) {
    .frv-panel--why .frv-why__ico,
    .frv-panel--why .frv-why__card::before {
        transition: none;
    }
}

/* section headers, balanced (2026-11-05, all service pages): a heading and the paragraph beside it
   line up along their tops, instead of the paragraph hanging from the heading's last line */
@media (min-width: 1024px) {
    .frv-sechead--end {
        align-items: start;
    }
}

/* Case studies header, like Sector Expertise (2026-11-05): the heading with its paragraph under it on
   the left, the "All case studies" link on the right along the foot of the paragraph */
.vpa-csx .vpa-csx__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px 48px;
}

.vpa-csx__intro {
    max-width: 760px;
}

.frv-page .vpa-csx .vpa-csx__title {
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.015em;
}

.vpa-csx .vpa-csx__lead {
    margin-top: 14px;
    font-size: 16px;
    line-height: 1.65;
}

.vpa-csx .vpa-csx__all {
    flex: 0 0 auto;
}

@media (max-width: 767px) {
    .vpa-csx .vpa-csx__head {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Key Services, refined (2026-11-05): smaller photos, inset in each cell with white space round
   them (2:1, so each cell is shorter), the number and name set closer, and the "Explore" foot on its
   hairline across the cell. Hover as before: the photo eases in, the blue rule draws, the arrow steps. */
.vpa-ks .vpa-ks__card {
    padding: 14px 14px 0;
}

.vpa-ks .vpa-ks__photo {
    background: #eef2f8;
}

.vpa-ks .vpa-ks__photo img {
    aspect-ratio: 2 / 1;
}

.vpa-ks .vpa-ks__body {
    padding: 20px 12px 0;
}

.vpa-ks .vpa-ks__num {
    margin-bottom: 8px;
    font-size: 11.5px;
}

.vpa-ks .vpa-ks__name {
    font-size: clamp(18px, 1.35vw, 21px);
}

.vpa-ks .vpa-ks__text {
    margin-top: 8px;
    font-size: 14.5px;
}

.vpa-ks .vpa-ks__more {
    margin: 18px -26px 0;
    padding: 14px 26px 16px;
}

@media (max-width: 575px) {
    .vpa-ks .vpa-ks__card {
        padding: 0;
    }

    .vpa-ks .vpa-ks__body {
        padding: 16px 16px 0;
    }

    .vpa-ks .vpa-ks__photo img {
        aspect-ratio: auto;
    }

    .vpa-ks .vpa-ks__more {
        margin: 12px -16px 0;
        padding: 12px 16px 14px;
    }
}

/* ---------- expertise panel, refined (all service pages, 2026-11-05): the accreditation strip sets
   its icons in square outlines (like the logos' boxes, instead of pale circles) with firmer labels,
   and a second button in the panel is the white site button with a visible edge on the light panel,
   so the two buttons read as first and second choice. ---------- */
.frv-mcompact .frv-badges {
    padding-block: 22px;
}

.frv-mcompact .frv-badge__logo .frv-ic {
    width: 20px;
    height: 20px;
    padding: 9px;
    border: 1px solid #cdd6ea;
    border-radius: 0;
    background: #fff;
    color: #0b2dbe;
}

.frv-mcompact .frv-badge__logo img {
    max-height: 34px;
}

.frv-mcompact .frv-badge__txt {
    font-size: 14.5px;
    font-weight: 500;
    color: #0a1230;
}

body:not(.rs-home) .frv-exp .frv-actions .frv-btn--white:not(#rs-cta) {
    border-color: #c9d4f0 !important;
}

body:not(.rs-home) .frv-exp .frv-actions .frv-btn--white:not(#rs-cta):is(:hover, :focus-visible) {
    border-color: #0b2dbe !important;
}

/* Valuation team: larger portraits (2026-11-05), the name a touch smaller so it stays on one line */
.vpa-tm__photo {
    width: clamp(120px, 10vw, 150px);
}

.vpa-tm__name {
    font-size: clamp(19px, 1.45vw, 23px);
}

@media (max-width: 575px) {
    .vpa-tm__photo {
        width: 100px;
    }
}

/* Case studies band, lighter (2026-11-05): about a third less height. Less padding, a smaller
   heading, shorter cards (16:10, narrower) with a slimmer panel, and a smaller pager closer to the
   row, so the band no longer dominates the page. */
.frv-page .vpa-csx {
    padding-top: clamp(44px, 4.4vw, 64px);
    padding-bottom: clamp(40px, 4vw, 56px);
}

.vpa-csx .vpa-csx__head {
    margin-bottom: clamp(22px, 2.2vw, 32px);
}

.frv-page .vpa-csx .vpa-csx__title {
    font-size: clamp(26px, 2.4vw, 36px);
}

.vpa-csx .vpa-csx__lead {
    margin-top: 10px;
    font-size: 15px;
}

.vpa-csx__row {
    gap: 16px;
}

.vpa-csx__item {
    flex-basis: clamp(280px, 27vw, 430px);
}

.vpa-csx__card {
    aspect-ratio: 16 / 10;
}

.vpa-csx__panel {
    left: 14px;
    bottom: 14px;
    width: min(calc(100% - 28px), 340px);
    padding: 14px 16px 16px;
}

.vpa-csx__top {
    margin-bottom: 10px;
}

.vpa-csx__icon {
    width: 32px;
    height: 32px;
}

.vpa-csx__icon svg {
    width: 17px;
    height: 17px;
}

.vpa-csx__name {
    font-size: clamp(18px, 1.4vw, 22px);
}

.vpa-csx__place {
    margin-top: 4px;
    font-size: 13px;
}

.vpa-csx__go {
    width: 40px;
    height: 40px;
}

.vpa-csx__pager {
    gap: 14px;
    margin-top: clamp(18px, 2vw, 26px);
}

.vpa-csx__btn {
    width: 38px;
    height: 38px;
}

@media (max-width: 575px) {
    .vpa-csx__card {
        aspect-ratio: 4 / 4.4;
    }
}

/* ---------- Key Services as a formal index (.vpa-kx, 2026-11-05): replaces the photo-card grid. Left,
   the nine services as numbered rows on hairlines; the open row (pointed at, or the first) shows its
   line of copy, its arrow square fills blue and a blue rule draws under it. Right, one large photo
   that stays in view and crossfades to the open row's service, with a caption (03 / 09, name).
   Phones: no large photo; each row shows a small one and its line. ---------- */
.vpa-kx__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 16px clamp(32px, 5vw, 80px);
    margin-bottom: clamp(28px, 3vw, 44px);
}

.frv-page .vpa-kx__title {
    margin: 0;
    font-family: inherit;
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.015em;
    color: #0a1230;
}

.vpa-kx__lead {
    max-width: 540px;
    margin: 0;
    justify-self: end;
    font-size: 16px;
    line-height: 1.6;
    color: #5b6782;
}

.vpa-kx__body {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    align-items: start;
    gap: clamp(32px, 4.4vw, 72px);
}

.vpa-kx__list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #cdd5e4;
}

.vpa-kx__row {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 16px;
    padding: 17px 0;
    border-bottom: 1px solid #e3e8f2;
    color: #0a1230;
    text-decoration: none;
}

.vpa-kx__row::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: #0b2dbe;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .5s cubic-bezier(.65, 0, .2, 1);
}

.vpa-kx__num {
    align-self: start;
    padding-top: 5px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    color: #0b2dbe;
}

.vpa-kx__txt {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.vpa-kx__name {
    font-size: clamp(18px, 1.4vw, 21px);
    font-weight: 500;
    line-height: 1.3;
    transition: color .3s ease;
}

/* the line opens under the name of the open row */
.vpa-kx__line {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .45s cubic-bezier(.22, 1, .36, 1);
}

.vpa-kx__line > span {
    overflow: hidden;
    font-size: 14.5px;
    line-height: 1.55;
    color: #5b6782;
}

.vpa-kx__thumb {
    display: none;
}

.vpa-kx__go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid #cdd5e4;
    color: #0b2dbe;
    transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

.vpa-kx__go svg {
    width: 17px;
    height: 17px;
    transition: transform .3s ease;
}

.vpa-kx__row.is-on .vpa-kx__name {
    color: #0b2dbe;
}

.vpa-kx__row.is-on .vpa-kx__line {
    grid-template-rows: 1fr;
}

.vpa-kx__row.is-on .vpa-kx__line > span {
    padding-top: 6px;
}

.vpa-kx__row.is-on::after {
    transform: none;
}

.vpa-kx__row.is-on .vpa-kx__go {
    border-color: #0b2dbe;
    background: #0b2dbe;
    color: #fff;
}

.vpa-kx__row.is-on .vpa-kx__go svg {
    transform: translateX(2px);
}

.vpa-kx__row:focus-visible {
    outline: 2px solid #0b2dbe;
    outline-offset: 2px;
}

/* the large photo */
.vpa-kx__preview {
    position: sticky;
    top: 110px;
    aspect-ratio: 4 / 4.6;
    margin: 0;
    overflow: hidden;
    background: #e6eefc;
}

.vpa-kx__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity .6s ease, transform 1.1s cubic-bezier(.22, 1, .36, 1);
}

.vpa-kx__img.is-on {
    opacity: 1;
    transform: none;
}

.vpa-kx__cap {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 18px;
    background: #fff;
}

.vpa-kx__capnum {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    color: #0b2dbe;
}

.vpa-kx__capname {
    font-size: 16px;
    font-weight: 500;
    color: #0a1230;
}

@media (max-width: 991px) {
    .vpa-kx__head,
    .vpa-kx__body {
        grid-template-columns: minmax(0, 1fr);
    }

    .vpa-kx__lead {
        justify-self: start;
    }

    .vpa-kx__preview {
        display: none;
    }

    .vpa-kx__row {
        grid-template-columns: 36px minmax(0, 1fr) 88px;
        align-items: start;
    }

    .vpa-kx__line {
        grid-template-rows: 1fr;
    }

    .vpa-kx__line > span {
        padding-top: 4px;
    }

    .vpa-kx__thumb {
        display: block;
        aspect-ratio: 4 / 3;
        overflow: hidden;
    }

    .vpa-kx__thumb img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .vpa-kx__go {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vpa-kx__row::after,
    .vpa-kx__line,
    .vpa-kx__img,
    .vpa-kx__go,
    .vpa-kx__go svg {
        transition: none;
    }
}

/* Key Services index, balanced (2026-11-05): the header and the body share one grid, so the
   paragraph sits exactly over the photo; the photo runs the full height of the list; numbers sit
   on the names' first line; only the open row carries a filled arrow square, the others a quiet
   arrow; the open row's line reads a touch larger. */
.vpa-kx__head,
.vpa-kx__body {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    column-gap: clamp(36px, 4.4vw, 72px);
}

.vpa-kx__lead {
    justify-self: start;
    max-width: none;
}

.vpa-kx__body {
    align-items: stretch;
}

.vpa-kx__preview {
    position: relative;
    top: auto;
    aspect-ratio: auto;
    min-height: 460px;
    height: 100%;
}

.vpa-kx__row {
    grid-template-columns: 48px minmax(0, 1fr) 38px;
    align-items: start;
    padding: 20px 0;
}

.vpa-kx__num {
    padding-top: 7px;
}

.vpa-kx__name {
    font-size: clamp(18px, 1.35vw, 20px);
}

.vpa-kx__line > span {
    font-size: 15px;
}

.vpa-kx__go {
    border-color: transparent;
    color: #9aa4bb;
}

.vpa-kx__row:hover .vpa-kx__go {
    color: #0b2dbe;
}

.vpa-kx__cap {
    left: 0;
    bottom: 0;
    padding: 16px 22px;
}

@media (max-width: 991px) {
    .vpa-kx__head,
    .vpa-kx__body {
        grid-template-columns: minmax(0, 1fr);
    }

    .vpa-kx__row {
        grid-template-columns: 36px minmax(0, 1fr) 88px;
    }
}

/* ---------- report band turned into a Book a Valuation promotion (.vpa-rep__band--book, 2026-11-05):
   the same framed blue band and copy layout; on the right, the home page's animated booking (form,
   assessment, report) in a framed box in place of the report's book. ---------- */
.vpa-rep__flow {
    position: relative;
    z-index: 1;
    justify-self: end;
    width: 100%;
    max-width: 470px;
    aspect-ratio: 16 / 13;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 1.4em 3em rgba(3, 14, 80, .35);
}

@media (max-width: 991px) {
    .vpa-rep__flow {
        order: -1;
        justify-self: center;
        max-width: 420px;
    }
}

/* Book a Valuation promotion, light (2026-11-05): the band is a pale panel with dark copy and blue
   buttons, so the animated booking on the right is the only blue in it; no inner frame. */
.vpa-rep .vpa-rep__band--book {
    background: #f2f5fb;
    color: #0a1230;
}

.vpa-rep .vpa-rep__band--book::after {
    display: none;
}

.vpa-rep__band--book .vpa-rep__eyebrow {
    color: #0b2dbe;
}

.vpa-rep__band--book .vpa-rep__eyebrow::before {
    background: #0b2dbe;
}

.vpa-rep__band--book .vpa-rep__eyebrow span {
    border-left-color: rgba(11, 45, 190, .3);
}

.frv-page .vpa-rep .vpa-rep__band--book .vpa-rep__title {
    color: #0a1230;
}

.vpa-rep .vpa-rep__band--book .vpa-rep__desc {
    color: #4a5568;
}

.vpa-rep .vpa-rep__band--book .vpa-rep__facts {
    border-color: #d5dce8;
}

.vpa-rep .vpa-rep__band--book .vpa-rep__facts div + div {
    border-left-color: #d5dce8;
}

.vpa-rep .vpa-rep__band--book .vpa-rep__facts dt {
    color: #6b7690;
}

.vpa-rep .vpa-rep__band--book .vpa-rep__facts dd {
    color: #0a1230;
}

.frv-page .vpa-rep__band--book .vpa-rep__btn--solid {
    border-color: #0b2dbe;
    background: #0b2dbe;
    color: #fff;
}

.frv-page .vpa-rep__band--book .vpa-rep__btn--solid:hover,
.frv-page .vpa-rep__band--book .vpa-rep__btn--solid:focus-visible {
    border-color: #06176e;
    background: #06176e;
    color: #fff;
}

.frv-page .vpa-rep__band--book .vpa-rep__btn--line {
    border-color: #0b2dbe;
    color: #0b2dbe;
}

.frv-page .vpa-rep__band--book .vpa-rep__btn--line:hover,
.frv-page .vpa-rep__band--book .vpa-rep__btn--line:focus-visible {
    background: #0b2dbe;
    color: #fff;
}

.vpa-rep__band--book .vpa-rep__flow {
    box-shadow: 0 1.6em 3.2em -1.2em rgba(10, 18, 48, .35);
}

/* ---------- Key Services as a formal matrix (.vpa-mx, 2026-11-05): replaces the index with the
   large photo. A ruled grid of service cells (five across for ten services); each cell has its
   number at the top and, at the foot, the name, its line and "Explore". Pointing at a cell fills it
   with the service's photo under a navy veil and turns the type white. Shared by the Valuation &
   Advisory page and the service-page template (frv_block_index). ---------- */
.vpa-mx__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 16px clamp(32px, 5vw, 80px);
    margin-bottom: clamp(28px, 3vw, 44px);
}

.frv-page .vpa-mx__title {
    margin: 0;
    font-family: inherit;
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.015em;
    color: #0a1230;
}

.vpa-mx__lead {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #5b6782;
}

.vpa-mx__grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #dde3ef;
    border-left: 1px solid #dde3ef;
}

.vpa-mx__item {
    display: flex;
    border-right: 1px solid #dde3ef;
    border-bottom: 1px solid #dde3ef;
}

.vpa-mx__cell {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: clamp(230px, 18vw, 270px);
    padding: 24px 22px 20px;
    overflow: hidden;
    isolation: isolate;
    background: #fff;
    color: #0a1230;
    text-decoration: none;
}

.vpa-mx__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    transition: opacity .5s ease;
}

.vpa-mx__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.06);
    transition: transform 1.1s cubic-bezier(.22, 1, .36, 1);
}

.vpa-mx__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 23, 110, .45) 0%, rgba(6, 23, 110, .88) 100%);
}

.vpa-mx__num {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    color: #0b2dbe;
    transition: color .35s ease;
}

.vpa-mx__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    padding-top: 28px;
}

.vpa-mx__name {
    font-size: clamp(17px, 1.25vw, 19px);
    font-weight: 500;
    line-height: 1.3;
    transition: color .35s ease;
}

.vpa-mx__line {
    font-size: 13.5px;
    line-height: 1.5;
    color: #5b6782;
    transition: color .35s ease;
}

.vpa-mx__go {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #e6ebf5;
    font-size: 13.5px;
    font-weight: 500;
    color: #0b2dbe;
    transition: color .35s ease, border-color .35s ease;
}

.vpa-mx__go svg {
    width: 17px;
    height: 17px;
    transition: transform .35s ease;
}

.vpa-mx__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.vpa-mx__cell:hover .vpa-mx__bg,
.vpa-mx__cell:focus-visible .vpa-mx__bg {
    opacity: 1;
}

.vpa-mx__cell:hover .vpa-mx__bg img,
.vpa-mx__cell:focus-visible .vpa-mx__bg img {
    transform: none;
}

.vpa-mx__cell:hover :is(.vpa-mx__num, .vpa-mx__name, .vpa-mx__go),
.vpa-mx__cell:focus-visible :is(.vpa-mx__num, .vpa-mx__name, .vpa-mx__go) {
    color: #fff;
}

.vpa-mx__cell:hover .vpa-mx__line,
.vpa-mx__cell:focus-visible .vpa-mx__line {
    color: rgba(255, 255, 255, .85);
}

.vpa-mx__cell:hover .vpa-mx__go,
.vpa-mx__cell:focus-visible .vpa-mx__go {
    border-top-color: rgba(255, 255, 255, .3);
}

.vpa-mx__cell:hover .vpa-mx__go svg,
.vpa-mx__cell:focus-visible .vpa-mx__go svg {
    transform: translateX(4px);
}

.vpa-mx__cell:focus-visible {
    outline: 2px solid #0b2dbe;
    outline-offset: -2px;
}

@media (max-width: 1199px) {
    .vpa-mx__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .vpa-mx__head {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .vpa-mx__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vpa-mx__cell {
        min-height: 210px;
        padding: 18px 16px 16px;
    }
}

@media (max-width: 479px) {
    .vpa-mx__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .vpa-mx__cell {
        min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vpa-mx__bg,
    .vpa-mx__bg img,
    .vpa-mx__go svg {
        transition: none;
    }
}

/* ---------- leadership quote (.vpa-qt, 2026-11-05): a framed square portrait beside a large quote,
   the name in small blue capitals and the role under it ---------- */
.vpa-qt__fig {
    display: grid;
    grid-template-columns: clamp(150px, 15vw, 210px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(28px, 4vw, 64px);
    max-width: 1040px;
    margin: 0 auto;
}

.vpa-qt__photo {
    display: block;
    padding: 10px;
    border: 1px solid #e3e8f2;
    background: #fff;
    box-shadow: 0 18px 36px -28px rgba(10, 18, 48, .4);
}

.vpa-qt__photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 50% 20%;
}

.vpa-qt__text {
    margin: 0 0 22px;
}

.vpa-qt__text p {
    margin: 0;
    font-size: clamp(20px, 1.9vw, 28px);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -.012em;
    color: #0a1230;
}

.vpa-qt__by {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vpa-qt__name {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #0b2dbe;
}

.vpa-qt__role {
    font-size: 14px;
    color: #5b6782;
}

@media (max-width: 575px) {
    .vpa-qt__fig {
        grid-template-columns: 110px minmax(0, 1fr);
        gap: 20px;
        align-items: start;
    }

    .vpa-qt__photo {
        padding: 6px;
    }
}

/* Book a Valuation promotion, photo (2026-11-05): no animation; a villa photo fills the right of the
   band and the pale panel fades in from the left behind the copy, so the type stays fully legible */
.vpa-rep .vpa-rep__band--book {
    grid-template-columns: minmax(0, 1fr);
    min-height: clamp(340px, 30vw, 420px);
    align-items: center;
    background:
        linear-gradient(90deg, #f2f5fb 0%, #f2f5fb 40%, rgba(242, 245, 251, .82) 54%, rgba(242, 245, 251, 0) 72%),
        url("../images/home-page/sector-residential-villa.webp") right center / cover no-repeat;
}

.vpa-rep .vpa-rep__band--book .vpa-rep__copy {
    max-width: 560px;
}

@media (max-width: 991px) {
    .vpa-rep .vpa-rep__band--book {
        min-height: 0;
        background:
            linear-gradient(180deg, rgba(242, 245, 251, .9) 0%, rgba(242, 245, 251, .96) 100%),
            url("../images/home-page/sector-residential-villa.webp") center / cover no-repeat;
    }
}

/* Key Services matrix, with photos (2026-11-05): each cell shows its photo at the top, inset in the
   box; under it the number, name, line and "Explore". Hover: the photo eases in, the name turns blue,
   a blue rule draws across the top and the arrow steps on (the full-cell photo fill is retired). */
.vpa-mx .vpa-mx__cell {
    min-height: 0;
    padding: 12px 12px 18px;
}

.vpa-mx .vpa-mx__cell::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    height: 2px;
    background: #0b2dbe;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .5s cubic-bezier(.65, 0, .2, 1);
}

.vpa-mx .vpa-mx__bg {
    position: relative;
    inset: auto;
    z-index: 0;
    display: block;
    aspect-ratio: 16 / 10;
    margin-bottom: 16px;
    overflow: hidden;
    opacity: 1;
    background: #eef2f8;
}

.vpa-mx .vpa-mx__bg::after {
    display: none;
}

.vpa-mx .vpa-mx__bg img {
    display: block;
    transform: none;
}

.vpa-mx .vpa-mx__cell > :not(.vpa-mx__bg) {
    margin-left: 10px;
    margin-right: 10px;
}

.vpa-mx .vpa-mx__body {
    flex: 1 1 auto;
    margin-top: 8px;
    padding-top: 0;
}

.vpa-mx .vpa-mx__cell:hover::before,
.vpa-mx .vpa-mx__cell:focus-visible::before {
    transform: none;
}

.vpa-mx .vpa-mx__cell:hover .vpa-mx__bg img,
.vpa-mx .vpa-mx__cell:focus-visible .vpa-mx__bg img {
    transform: scale(1.05);
}

.vpa-mx .vpa-mx__cell:hover .vpa-mx__num,
.vpa-mx .vpa-mx__cell:focus-visible .vpa-mx__num,
.vpa-mx .vpa-mx__cell:hover .vpa-mx__go,
.vpa-mx .vpa-mx__cell:focus-visible .vpa-mx__go,
.vpa-mx .vpa-mx__cell:hover .vpa-mx__name,
.vpa-mx .vpa-mx__cell:focus-visible .vpa-mx__name {
    color: #0b2dbe;
}

.vpa-mx .vpa-mx__cell:hover .vpa-mx__line,
.vpa-mx .vpa-mx__cell:focus-visible .vpa-mx__line {
    color: #5b6782;
}

.vpa-mx .vpa-mx__cell:hover .vpa-mx__go,
.vpa-mx .vpa-mx__cell:focus-visible .vpa-mx__go {
    border-top-color: #e6ebf5;
}

@media (prefers-reduced-motion: reduce) {
    .vpa-mx .vpa-mx__cell::before {
        transition: none;
    }
}


/* ---------- Case study cards, glass panels (.vpa-csx, 2026-11-06): the panel over each photo is frosted
   glass with white type (a soft shade at the foot of the photo keeps it legible); pointing at a card
   turns the panel solid white with dark type and brings in the arrow square. ---------- */
.vpa-csx__card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(6, 15, 60, 0) 35%, rgba(6, 15, 60, .55) 100%);
    pointer-events: none;
    transition: opacity .4s ease;
}

.vpa-csx .vpa-csx__panel {
    border: 1px solid rgba(255, 255, 255, .36);
    background: rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
    transition: background-color .4s ease, border-color .4s ease, box-shadow .4s ease;
}

.vpa-csx .vpa-csx__icon {
    background: rgba(255, 255, 255, .18);
    color: #fff;
    transition: background-color .4s ease, color .4s ease;
}

.vpa-csx .vpa-csx__label,
.vpa-csx .vpa-csx__value,
.vpa-csx .vpa-csx__name {
    color: #fff;
    transition: color .4s ease;
}

.vpa-csx .vpa-csx__place {
    color: rgba(255, 255, 255, .8);
    transition: color .4s ease;
}

.vpa-csx .vpa-csx__card:hover .vpa-csx__panel,
.vpa-csx .vpa-csx__card:focus-visible .vpa-csx__panel {
    border-color: #fff;
    background: #fff;
    box-shadow: 0 18px 36px -22px rgba(4, 12, 50, .6);
}

.vpa-csx .vpa-csx__card:hover .vpa-csx__icon,
.vpa-csx .vpa-csx__card:focus-visible .vpa-csx__icon {
    background: #eef1f7;
    color: #0a1230;
}

.vpa-csx .vpa-csx__card:hover .vpa-csx__label,
.vpa-csx .vpa-csx__card:focus-visible .vpa-csx__label,
.vpa-csx .vpa-csx__card:hover .vpa-csx__name,
.vpa-csx .vpa-csx__card:focus-visible .vpa-csx__name {
    color: #0a1230;
}

.vpa-csx .vpa-csx__card:hover .vpa-csx__value,
.vpa-csx .vpa-csx__card:focus-visible .vpa-csx__value {
    color: #0b2dbe;
}

.vpa-csx .vpa-csx__card:hover .vpa-csx__place,
.vpa-csx .vpa-csx__card:focus-visible .vpa-csx__place {
    color: #5b6782;
}

.vpa-csx__card:hover::after,
.vpa-csx__card:focus-visible::after {
    opacity: .6;
}

/* without backdrop blur the glass keeps a darker tint so the white type still reads */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .vpa-csx .vpa-csx__panel {
        background: rgba(6, 15, 60, .6);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vpa-csx .vpa-csx__panel,
    .vpa-csx .vpa-csx__icon,
    .vpa-csx .vpa-csx__label,
    .vpa-csx .vpa-csx__value,
    .vpa-csx .vpa-csx__name,
    .vpa-csx .vpa-csx__place,
    .vpa-csx__card::after {
        transition: none;
    }
}

/* ---------- leadership quote, editorial panel (.vpa-qt, 2026-11-06): one pale panel; the portrait runs
   the full height on the left with no frame; on the right a large blue serif quote mark, the quote in a
   lighter weight, then a fine rule with the name and role and a "View profile" link. ---------- */
.vpa-qt .vpa-qt__fig {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    align-items: stretch;
    gap: 0;
    max-width: none;
    margin: 0;
    background: #f2f5fb;
}

.vpa-qt .vpa-qt__photo {
    position: relative;
    min-height: clamp(340px, 30vw, 440px);
    padding: 0;
    overflow: hidden;
    border: 0;
    background: #dfe6f2;
    box-shadow: none;
}

.vpa-qt .vpa-qt__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: 50% 18%;
}

.vpa-qt .vpa-qt__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(36px, 4.4vw, 72px) clamp(32px, 5vw, 88px);
}

.vpa-qt__mark {
    display: block;
    height: .5em;
    margin-bottom: 26px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 104px;
    line-height: 1;
    color: #0b2dbe;
}

.vpa-qt .vpa-qt__text {
    margin: 0;
}

.vpa-qt .vpa-qt__text p {
    font-size: clamp(21px, 2vw, 30px);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -.015em;
    color: #0a1230;
}

.vpa-qt .vpa-qt__by {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px 24px;
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid #d5dce8;
}

.vpa-qt__who {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vpa-qt__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 4px;
    border-bottom: 1px solid #0b2dbe;
    font-size: 14.5px;
    font-weight: 500;
    color: #0b2dbe;
    text-decoration: none;
}

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

.vpa-qt__link:hover,
.vpa-qt__link:focus-visible {
    color: #0b2dbe;
}

.vpa-qt__link:hover svg,
.vpa-qt__link:focus-visible svg {
    transform: translateX(4px);
}

@media (max-width: 767px) {
    .vpa-qt .vpa-qt__fig {
        grid-template-columns: minmax(0, 1fr);
    }

    .vpa-qt .vpa-qt__photo {
        min-height: 0;
        aspect-ratio: 4 / 3;
    }

    .vpa-qt .vpa-qt__body {
        padding: 28px 22px 30px;
    }

    .vpa-qt__mark {
        margin-bottom: 18px;
        font-size: 80px;
    }
}

/* ---------- Valuation team, one row of five portraits (.vpa-tp, 2026-11-06): each card is a tall portrait
   (4:5) over a white panel with the title in small blue capitals, the name, the department and a foot
   link on a hairline ("View profile", or "Meet the team" where there is no profile page). Hover: the
   portrait eases in, a blue rule draws along the foot, the name turns blue and the card lifts softly.
   Under 1200px the row scrolls sideways, one card snapping after another. ---------- */
.vpa-tp {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vpa-tp__item {
    display: flex;
    min-width: 0;
}

.vpa-tp__card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
    color: #0a1230;
    text-decoration: none;
    transition: box-shadow .35s ease;
}

.vpa-tp__card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: #0b2dbe;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .5s cubic-bezier(.65, 0, .2, 1);
}

.vpa-tp__photo {
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #e4e8f0;
}

.vpa-tp__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 22%;
    transition: transform .9s cubic-bezier(.22, 1, .36, 1);
}

.vpa-tp__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 18px 18px 0;
}

.vpa-tp__title {
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #0b2dbe;
}

.vpa-tp__name {
    margin-top: 8px;
    font-size: clamp(17px, 1.3vw, 20px);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -.01em;
    transition: color .3s ease;
}

.vpa-tp__dept {
    margin-top: 5px;
    font-size: 13.5px;
    line-height: 1.45;
    color: #5b6782;
}

.vpa-tp__more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: auto -18px 0;
    margin-top: 16px;
    padding: 13px 18px 15px;
    border-top: 1px solid #e6ebf5;
    font-size: 13.5px;
    font-weight: 500;
    color: #0b2dbe;
}

.vpa-tp__body .vpa-tp__dept {
    margin-bottom: auto;
}

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

.vpa-tp__card:hover,
.vpa-tp__card:focus-visible {
    box-shadow: 0 22px 44px -30px rgba(10, 18, 48, .45);
    color: #0a1230;
}

.vpa-tp__card:hover::after,
.vpa-tp__card:focus-visible::after {
    transform: none;
}

.vpa-tp__card:hover .vpa-tp__photo img,
.vpa-tp__card:focus-visible .vpa-tp__photo img {
    transform: scale(1.04);
}

.vpa-tp__card:hover .vpa-tp__name,
.vpa-tp__card:focus-visible .vpa-tp__name {
    color: #0b2dbe;
}

.vpa-tp__card:hover .vpa-tp__more svg,
.vpa-tp__card:focus-visible .vpa-tp__more svg {
    transform: translateX(4px);
}

.vpa-tp__card:focus-visible {
    outline: 2px solid #0b2dbe;
    outline-offset: 2px;
}

/* tablets and phones: still one row, scrolling sideways */
@media (max-width: 1199px) {
    .vpa-tp {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    .vpa-tp::-webkit-scrollbar {
        display: none;
    }

    .vpa-tp__item {
        flex: 0 0 clamp(220px, 30vw, 260px);
        scroll-snap-align: start;
    }
}

@media (max-width: 575px) {
    .vpa-tp__item {
        flex-basis: 70vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vpa-tp__card,
    .vpa-tp__card::after,
    .vpa-tp__photo img,
    .vpa-tp__more svg {
        transition: none;
    }
}

/* team row: names first so all five line up, the title under the name; the intro line runs wider */
.vpa-tp__name {
    order: 1;
    margin-top: 0;
}

.vpa-tp__title {
    order: 2;
    margin-top: 8px;
}

.vpa-tp__dept {
    order: 3;
}

.vpa-tp__more {
    order: 4;
}

.vpa-tm .vpa-tm__lead {
    max-width: 780px;
}

/* team row, a little smaller (2026-11-06): shorter portraits, tighter panel, slightly smaller type */
.vpa-tp__photo {
    aspect-ratio: 5 / 5.6;
}

.vpa-tp__body {
    padding: 15px 16px 0;
}

.vpa-tp__name {
    font-size: clamp(16px, 1.2vw, 18.5px);
}

.vpa-tp__title {
    margin-top: 6px;
    font-size: 10px;
    letter-spacing: .1em;
}

.vpa-tp__dept {
    font-size: 13px;
}

.vpa-tp__more {
    margin: auto -16px 0;
    margin-top: 14px;
    padding: 11px 16px 13px;
    font-size: 13px;
}

/* team row, smaller again (2026-11-06): square portraits, tighter panel and type */
.vpa-tp__photo {
    aspect-ratio: 1 / 1;
}

.vpa-tp__body {
    padding: 13px 14px 0;
}

.vpa-tp__name {
    font-size: clamp(15px, 1.1vw, 17px);
}

.vpa-tp__title {
    margin-top: 5px;
    font-size: 9.5px;
}

.vpa-tp__dept {
    margin-top: 4px;
    font-size: 12.5px;
}

.vpa-tp__more {
    margin: auto -14px 0;
    margin-top: 12px;
    padding: 10px 14px 11px;
    font-size: 12.5px;
}

.vpa-tp__more svg {
    width: 15px;
    height: 15px;
}

/* ---------- accreditations strip, clearer logos (2026-11-06): each logo sits on its own white tile at a
   larger, even size (so the small RERA mark and the wide RICS mark read equally), the label under it
   in firmer type. Used in the expertise panel on the service pages. ---------- */
.frv-mcompact .frv-badges {
    gap: 0;
    padding-block: 24px;
}

.frv-mcompact .frv-badge {
    gap: 12px;
}

.frv-mcompact .frv-badge__logo {
    justify-content: center;
    width: 100%;
    max-width: 168px;
    height: 72px;
    padding: 10px 16px;
    border: 1px solid #e3e8f2;
    background: #fff;
    box-shadow: 0 10px 22px -18px rgba(10, 18, 48, .35);
}

.frv-mcompact .frv-badge__logo img {
    width: auto;
    max-width: 100%;
    height: 100%;
    max-height: 50px;
    object-fit: contain;
    object-position: center;
}

.frv-mcompact .frv-badge__logo .frv-ic {
    border: 0;
    background: transparent;
    padding: 0;
    width: 30px;
    height: 30px;
}

.frv-mcompact .frv-badge__txt {
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.35;
    color: #0a1230;
}

@media (max-width: 639px) {
    .frv-mcompact .frv-badge__logo {
        height: 58px;
        padding: 8px 10px;
    }

    .frv-mcompact .frv-badge__logo img {
        max-height: 40px;
    }

    .frv-mcompact .frv-badge__txt {
        font-size: 12.5px;
    }
}

/* ---------- leadership quote, navy panel (2026-11-06): the quote side becomes a deep navy panel with a
   quiet texture (fine diagonal hairlines, a soft glow from the top right); a large light-blue quote
   mark, the quote in light white type, a fine white rule, the name in pale blue capitals, the role
   and a white "View profile" link. The portrait keeps the full height on the left. ---------- */
.vpa-qt .vpa-qt__fig {
    background-color: #06176e;
    background-image:
        radial-gradient(110% 90% at 100% 0%, rgba(80, 130, 255, .22) 0%, rgba(80, 130, 255, 0) 55%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .045) 0 1px, rgba(255, 255, 255, 0) 1px 16px);
    color: #fff;
}

.vpa-qt__mark {
    color: #7fa2ff;
}

.vpa-qt .vpa-qt__text p {
    font-weight: 300;
    color: #fff;
}

.vpa-qt .vpa-qt__by {
    border-top-color: rgba(255, 255, 255, .22);
}

.vpa-qt .vpa-qt__name {
    color: #a9c0ff;
}

.vpa-qt .vpa-qt__role {
    color: rgba(255, 255, 255, .74);
}

.vpa-qt .vpa-qt__link,
.vpa-qt .vpa-qt__link:hover,
.vpa-qt .vpa-qt__link:focus-visible {
    border-bottom-color: rgba(255, 255, 255, .6);
    color: #fff;
}

.vpa-qt .vpa-qt__link:hover,
.vpa-qt .vpa-qt__link:focus-visible {
    border-bottom-color: #fff;
}

.vpa-qt .vpa-qt__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(6, 23, 110, 0) 70%, rgba(6, 23, 110, .35) 100%);
    pointer-events: none;
}

@media (max-width: 767px) {
    .vpa-qt .vpa-qt__photo::after {
        background: linear-gradient(180deg, rgba(6, 23, 110, 0) 70%, rgba(6, 23, 110, .35) 100%);
    }
}

/* ---------- leadership quote, merged (2026-11-06): one navy block with the quote on the left and the
   portrait on the right; the photo's left edge dissolves into the navy through a soft gradient and a
   faint navy wash ties its colours to the block, so photo and panel read as one piece. On phones the
   photo sits on top and fades down into the navy. ---------- */
.vpa-qt .vpa-qt__fig {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    overflow: hidden;
}

.vpa-qt .vpa-qt__photo {
    order: 2;
    background: #06176e;
}

.vpa-qt .vpa-qt__photo img {
    object-position: 50% 16%;
}

.vpa-qt .vpa-qt__photo::after {
    background:
        linear-gradient(90deg, #06176e 0%, rgba(6, 23, 110, .82) 14%, rgba(6, 23, 110, .35) 34%, rgba(6, 23, 110, 0) 58%),
        linear-gradient(0deg, rgba(6, 23, 110, .28), rgba(6, 23, 110, .28));
}

.vpa-qt .vpa-qt__body {
    order: 1;
    position: relative;
    z-index: 1;
    padding-right: clamp(24px, 3vw, 48px);
}

@media (max-width: 767px) {
    .vpa-qt .vpa-qt__photo {
        order: 0;
    }

    .vpa-qt .vpa-qt__body {
        order: 1;
    }

    .vpa-qt .vpa-qt__photo::after {
        background:
            linear-gradient(180deg, rgba(6, 23, 110, 0) 45%, rgba(6, 23, 110, .6) 78%, #06176e 100%),
            linear-gradient(0deg, rgba(6, 23, 110, .2), rgba(6, 23, 110, .2));
    }
}

/* leadership quote, merged: phones stack the photo over the quote (after the two-column rule above) */
@media (max-width: 767px) {
    .vpa-qt .vpa-qt__fig {
        grid-template-columns: minmax(0, 1fr);
    }

    .vpa-qt .vpa-qt__photo {
        min-height: 0;
        aspect-ratio: 4 / 3.4;
    }

    .vpa-qt .vpa-qt__body {
        padding: 6px 22px 30px;
    }
}

/* leadership quote, clearer photo (2026-11-06): the portrait keeps its natural colours (no navy wash),
   only a narrow soft fade at its left edge merges it into the block; the photo column is a touch
   narrower and the panel taller, so more of the portrait shows */
.vpa-qt .vpa-qt__fig {
    grid-template-columns: minmax(0, 7.6fr) minmax(0, 4.4fr);
}

.vpa-qt .vpa-qt__photo {
    min-height: clamp(420px, 36vw, 540px);
}

.vpa-qt .vpa-qt__photo img {
    object-position: 50% 12%;
}

.vpa-qt .vpa-qt__photo::after {
    background: linear-gradient(90deg, #06176e 0%, rgba(6, 23, 110, .6) 7%, rgba(6, 23, 110, .18) 18%, rgba(6, 23, 110, 0) 30%);
}

@media (max-width: 767px) {
    .vpa-qt .vpa-qt__fig {
        grid-template-columns: minmax(0, 1fr);
    }

    .vpa-qt .vpa-qt__photo {
        min-height: 0;
        aspect-ratio: 4 / 4.6;
    }

    .vpa-qt .vpa-qt__photo img {
        object-position: 50% 14%;
    }

    .vpa-qt .vpa-qt__photo::after {
        background: linear-gradient(180deg, rgba(6, 23, 110, 0) 70%, rgba(6, 23, 110, .55) 88%, #06176e 100%);
    }
}

/* Book a Valuation band, skyline photo (2026-11-06): the copy sits on a solid pale panel; the right of the
   band shows Dubai's skyline at sunset over an infinity pool (the Burj Khalifa centred in it), its left
   edge fading softly into the panel. Phones: the photo runs across the top, fading down into the panel. */
.vpa-rep .vpa-rep__band--book {
    position: relative;
    overflow: hidden;
    background: #f2f5fb;
}

.vpa-rep .vpa-rep__band--book::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    width: 58%;
    background: url("../images/valuation-services/hospitality-leisure-dubai-skyline-pool.webp") 40% center / cover no-repeat;
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .6) 12%, #000 26%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .6) 12%, #000 26%);
    pointer-events: none;
}

.vpa-rep .vpa-rep__band--book .vpa-rep__copy {
    position: relative;
    z-index: 1;
}

@media (max-width: 991px) {
    .vpa-rep .vpa-rep__band--book {
        padding-top: 230px;
        background: #f2f5fb;
    }

    .vpa-rep .vpa-rep__band--book::before {
        left: 0;
        bottom: auto;
        width: 100%;
        height: 260px;
        background-position: 46% center;
        -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, rgba(0, 0, 0, 0) 100%);
        mask-image: linear-gradient(180deg, #000 0%, #000 60%, rgba(0, 0, 0, 0) 100%);
    }
}

/* Book a Valuation band: on phones the eyebrow drops its dash and sits on one line */
@media (max-width: 575px) {
    .vpa-rep__band--book .vpa-rep__eyebrow {
        gap: 10px;
        font-size: 10.5px;
        letter-spacing: .12em;
        white-space: nowrap;
    }

    .vpa-rep__band--book .vpa-rep__eyebrow::before {
        display: none;
    }

    .vpa-rep__band--book .vpa-rep__eyebrow span {
        padding-left: 10px;
    }
}

/* ---------- leadership quote, editorial (2026-11-06): a small "A word from..." eyebrow, an oversized faint
   quote mark set behind the text as a watermark, the quote in an elegant serif and the name in white ---------- */
.vpa-qt .vpa-qt__body {
    position: relative;
    isolation: isolate;
}

.vpa-qt .vpa-qt__mark {
    position: absolute;
    top: clamp(-6px, 1vw, 14px);
    left: clamp(14px, 2.6vw, 44px);
    z-index: -1;
    height: auto;
    margin: 0;
    font-size: clamp(200px, 20vw, 300px);
    line-height: 1;
    color: #fff;
    opacity: .07;
    pointer-events: none;
}

.vpa-qt__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 26px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #a9c0ff;
}

.vpa-qt__eyebrow::before {
    content: "";
    width: 32px;
    height: 1px;
    background: #a9c0ff;
}

.vpa-qt .vpa-qt__text p {
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    font-size: clamp(23px, 2.15vw, 32px);
    font-weight: 400;
    line-height: 1.42;
    letter-spacing: 0;
    color: #fff;
}

.vpa-qt .vpa-qt__name {
    font-size: 12.5px;
    color: #fff;
}

@media (max-width: 767px) {
    .vpa-qt .vpa-qt__mark {
        top: -4px;
        left: 10px;
        font-size: 180px;
    }

    .vpa-qt__eyebrow {
        margin: 6px 0 18px;
    }

    .vpa-qt .vpa-qt__text p {
        font-size: 21px;
    }
}

/* ---------- Book a Valuation band, full-bleed (2026-11-06): the skyline photo runs the whole band under a deep
   navy gradient (dark behind the copy, clearing to the sunset and the Burj on the right). White copy, the
   facts on fine white rules, a solid white and an outlined button; on the right a frosted glass card with
   the three booking steps and "Report from 4 hrs". Phones: the card drops under the copy. ---------- */
.vpa-rep .vpa-rep__band--hero {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr);
    align-items: center;
    gap: clamp(28px, 4vw, 72px);
    min-height: clamp(440px, 36vw, 520px);
    padding: clamp(40px, 4.4vw, 68px) clamp(28px, 4.6vw, 72px);
    background:
        linear-gradient(90deg, rgba(5, 16, 74, .94) 0%, rgba(5, 16, 74, .84) 34%, rgba(5, 16, 74, .38) 64%, rgba(5, 16, 74, .2) 100%),
        url("../images/valuation-services/hospitality-leisure-dubai-skyline-pool.webp") 62% center / cover no-repeat;
    color: #fff;
}

.vpa-rep .vpa-rep__band--hero::before,
.vpa-rep .vpa-rep__band--hero::after {
    display: none;
}

.vpa-rep__band--hero .vpa-rep__copy {
    position: relative;
    z-index: 1;
    max-width: 600px;
}

.vpa-rep__band--hero .vpa-rep__eyebrow {
    color: #a9c0ff;
}

.vpa-rep__band--hero .vpa-rep__eyebrow::before {
    background: #a9c0ff;
}

.vpa-rep__band--hero .vpa-rep__eyebrow span {
    border-left-color: rgba(169, 192, 255, .4);
    color: rgba(255, 255, 255, .8);
}

.frv-page .vpa-rep .vpa-rep__band--hero .vpa-rep__title {
    font-size: clamp(28px, 2.8vw, 44px);
    line-height: 1.12;
    color: #fff;
}

.vpa-rep .vpa-rep__band--hero .vpa-rep__desc {
    color: rgba(255, 255, 255, .84);
}

.vpa-rep .vpa-rep__band--hero .vpa-rep__facts {
    border-color: rgba(255, 255, 255, .24);
}

.vpa-rep .vpa-rep__band--hero .vpa-rep__facts div + div {
    border-left-color: rgba(255, 255, 255, .24);
}

.vpa-rep .vpa-rep__band--hero .vpa-rep__facts dt {
    color: rgba(255, 255, 255, .62);
}

.vpa-rep .vpa-rep__band--hero .vpa-rep__facts dd {
    color: #fff;
}

.frv-page .vpa-rep__band--hero .vpa-rep__btn--solid {
    border-color: #fff;
    background: #fff;
    color: #06176e;
}

.frv-page .vpa-rep__band--hero .vpa-rep__btn--solid:hover,
.frv-page .vpa-rep__band--hero .vpa-rep__btn--solid:focus-visible {
    border-color: #e6edff;
    background: #e6edff;
    color: #06176e;
}

.frv-page .vpa-rep__band--hero .vpa-rep__btn--line {
    border-color: rgba(255, 255, 255, .7);
    background: transparent;
    color: #fff;
}

.frv-page .vpa-rep__band--hero .vpa-rep__btn--line:hover,
.frv-page .vpa-rep__band--hero .vpa-rep__btn--line:focus-visible {
    border-color: #fff;
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

/* the steps card */
.vpa-bkx {
    position: relative;
    z-index: 1;
    justify-self: end;
    width: 100%;
    max-width: 400px;
    padding: 26px 26px 22px;
    border: 1px solid rgba(255, 255, 255, .32);
    background: rgba(255, 255, 255, .12);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 30px 60px -30px rgba(2, 8, 40, .6);
}

.vpa-bkx__head {
    margin: 0 0 14px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
}

.vpa-bkx__steps {
    margin: 0;
    padding: 0;
    list-style: none;
}

.vpa-bkx__steps li {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, .2);
}

.vpa-bkx__num {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, .5);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    color: #fff;
}

.vpa-bkx__txt {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 13.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .8);
}

.vpa-bkx__txt b {
    font-size: 15.5px;
    font-weight: 500;
    color: #fff;
}

.vpa-bkx__foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 4px 0 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .3);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}

.vpa-bkx__foot strong {
    font-size: 28px;
    font-weight: 500;
    letter-spacing: -.01em;
    text-transform: none;
    color: #fff;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .vpa-bkx {
        background: rgba(5, 16, 74, .7);
    }
}

@media (max-width: 991px) {
    .vpa-rep .vpa-rep__band--hero {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        padding: 36px 28px 40px;
        background:
            linear-gradient(180deg, rgba(5, 16, 74, .9) 0%, rgba(5, 16, 74, .82) 100%),
            url("../images/valuation-services/hospitality-leisure-dubai-skyline-pool.webp") 50% center / cover no-repeat;
    }

    .vpa-bkx {
        justify-self: stretch;
        max-width: none;
    }
}

@media (max-width: 575px) {
    .vpa-rep .vpa-rep__band--hero {
        padding: 30px 20px 32px;
    }

    .vpa-bkx {
        padding: 20px 18px 18px;
    }
}

/* full-bleed booking band: the description always shows in full */
.vpa-rep .vpa-rep__band--hero .vpa-rep__desc {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

/* ---------- leadership quote, editorial (.vpa-qx, 2026-11-06): calm white space; on the left a small blue
   label, the quote in large deep-navy serif with its opening mark hanging in the margin, then a short blue
   rule, the name in serif, the role and "View profile"; on the right the portrait in natural colour,
   tall, with a fine blue outline frame offset behind it and an optional credentials line under it.
   Replaces the navy panel (.vpa-qt). ---------- */
.vpa-qx {
    background: #fff;
}

.vpa-qx__fig {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4.6fr);
    align-items: center;
    gap: clamp(40px, 6vw, 110px);
    max-width: 1220px;
    margin: 0 auto;
}

.vpa-qx__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: clamp(22px, 2.2vw, 32px);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #0b2dbe;
}

.vpa-qx__eyebrow::before {
    content: "";
    width: 32px;
    height: 1px;
    background: #0b2dbe;
}

.vpa-qx__text {
    margin: 0;
}

.vpa-qx__text p {
    position: relative;
    margin: 0;
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    font-size: clamp(26px, 2.55vw, 40px);
    font-weight: 400;
    line-height: 1.32;
    letter-spacing: -.005em;
    color: #0a1230;
}

/* the opening mark hangs in the margin so the lines start flush */
.vpa-qx__mark {
    position: absolute;
    left: -.55em;
    top: -.02em;
    color: #0b2dbe;
}

.vpa-qx__by {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin-top: clamp(28px, 3vw, 44px);
}

.vpa-qx__rule {
    width: 48px;
    height: 1px;
    background: #0b2dbe;
}

.vpa-qx__who {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vpa-qx__name {
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    font-size: 21px;
    line-height: 1.2;
    color: #0a1230;
}

.vpa-qx__role {
    font-size: 13.5px;
    line-height: 1.4;
    color: #5b6782;
}

.vpa-qx__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 4px;
    border-bottom: 1px solid #0b2dbe;
    font-size: 14px;
    font-weight: 500;
    color: #0b2dbe;
    text-decoration: none;
    white-space: nowrap;
}

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

.vpa-qx__link:hover,
.vpa-qx__link:focus-visible {
    color: #0b2dbe;
}

.vpa-qx__link:hover svg,
.vpa-qx__link:focus-visible svg {
    transform: translateX(4px);
}

/* the portrait with its offset frame */
.vpa-qx__media {
    position: relative;
    padding: 0 18px 18px 0;
}

.vpa-qx__media::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 18px;
    right: 0;
    bottom: 0;
    border: 1px solid #0b2dbe;
    pointer-events: none;
}

.vpa-qx__photo {
    position: relative;
    z-index: 1;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #e9edf5;
    box-shadow: 0 30px 60px -36px rgba(10, 18, 48, .45);
}

.vpa-qx__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 14%;
}

.vpa-qx__creds {
    position: relative;
    margin: 28px 0 0;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #5b6782;
}

@media (max-width: 991px) {
    .vpa-qx__fig {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    .vpa-qx__media {
        order: -1;
        width: min(100%, 380px);
    }

    .vpa-qx__mark {
        position: static;
        margin-right: .06em;
    }
}

@media (max-width: 575px) {
    .vpa-qx__text p {
        font-size: 24px;
    }

    .vpa-qx__by {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .vpa-qx__link {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

/* the offset frame belongs to the photo only; the credentials line sits under it */
.vpa-qx__media {
    padding: 0;
}

.vpa-qx__media::before {
    display: none;
}

.vpa-qx__pic {
    position: relative;
    padding: 0 18px 18px 0;
}

.vpa-qx__pic::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 18px;
    right: 0;
    bottom: 0;
    border: 1px solid #0b2dbe;
    pointer-events: none;
}

.vpa-qx__creds {
    margin-top: 18px;
}

/* ---------- Book a Valuation band, pure image (2026-11-06): the skyline photo shows in its natural colours
   (only a whisper of shade on the left), the Burj Khalifa framed on the right; the copy, facts and buttons
   sit on one dark frosted-glass panel on the left. ---------- */
.vpa-rep .vpa-rep__band--hero {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    min-height: clamp(460px, 38vw, 560px);
    padding: clamp(32px, 3.6vw, 56px);
    background:
        linear-gradient(90deg, rgba(5, 16, 74, .3) 0%, rgba(5, 16, 74, .12) 40%, rgba(5, 16, 74, 0) 62%),
        url("../images/valuation-services/hospitality-leisure-dubai-skyline-pool.webp") 72% center / cover no-repeat;
}

.vpa-rep__band--hero .vpa-rep__copy {
    width: min(100%, 580px);
    max-width: none;
    padding: clamp(26px, 2.8vw, 40px);
    border: 1px solid rgba(255, 255, 255, .24);
    background: rgba(6, 18, 82, .46);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 30px 60px -30px rgba(2, 8, 40, .55);
}

.frv-page .vpa-rep .vpa-rep__band--hero .vpa-rep__title {
    font-size: clamp(26px, 2.5vw, 38px);
}

.vpa-rep .vpa-rep__band--hero .vpa-rep__actions {
    margin-top: 2px;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .vpa-rep__band--hero .vpa-rep__copy {
        background: rgba(6, 18, 82, .82);
    }
}

@media (max-width: 991px) {
    .vpa-rep .vpa-rep__band--hero {
        min-height: 0;
        padding: 200px 18px 18px;
        background:
            linear-gradient(180deg, rgba(5, 16, 74, 0) 30%, rgba(5, 16, 74, .2) 100%),
            url("../images/valuation-services/hospitality-leisure-dubai-skyline-pool.webp") 48% 30% / cover no-repeat;
    }

    .vpa-rep__band--hero .vpa-rep__copy {
        width: 100%;
    }
}

@media (max-width: 575px) {
    .vpa-rep .vpa-rep__band--hero {
        padding: 160px 12px 12px;
    }

    .vpa-rep__band--hero .vpa-rep__copy {
        padding: 22px 18px;
    }
}

/* pure-image band: scale the photo so the Burj Khalifa stands clear to the right of the panel and the
   wooden ceiling at the top of the photo is cropped away */
.vpa-rep .vpa-rep__band--hero {
    background-size: auto, auto 128%;
    background-position: 0 0, 8% 58%;
}

@media (max-width: 991px) {
    .vpa-rep .vpa-rep__band--hero {
        background-size: auto, auto 122%;
        background-position: 0 0, 46% 72%;
    }
}

/* Book a Valuation band, pure image framing (2026-11-06): desktop crops the wooden ceiling off the top of the
   photo and keeps the Burj Khalifa clear on the right. Phones and tablets show the photo as a clean strip
   on top (ceiling cropped, the Burj centred), fading into deep navy behind the glass panel. */
@media (min-width: 992px) {
    .vpa-rep .vpa-rep__band--hero {
        background-size: auto, auto 128%;
        background-position: 0 0, 8% 70%;
    }
}

@media (max-width: 991px) {
    .vpa-rep .vpa-rep__band--hero {
        padding: 300px 24px 24px;
        background:
            linear-gradient(180deg, rgba(8, 22, 92, 0) 0, rgba(8, 22, 92, 0) 250px, #08165c 400px),
            url("../images/valuation-services/hospitality-leisure-dubai-skyline-pool.webp") 50% -62px / auto 420px no-repeat,
            #08165c;
    }
}

@media (max-width: 575px) {
    .vpa-rep .vpa-rep__band--hero {
        padding: 220px 12px 12px;
        background:
            linear-gradient(180deg, rgba(8, 22, 92, 0) 0, rgba(8, 22, 92, 0) 190px, #08165c 320px),
            url("../images/valuation-services/hospitality-leisure-dubai-skyline-pool.webp") 49% -52px / auto 340px no-repeat,
            #08165c;
    }
}

/* ---------- leadership quote, compact (2026-11-06): a smaller portrait column, a shorter frame and a
   slightly smaller quote, with less space above and below, so the section is about a fifth lower. ---------- */
html body .vpa-qx {
    padding-block: clamp(48px, 4.4vw, 64px);
}

html body .vpa-qx__fig {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(36px, 5vw, 88px);
    max-width: 1140px;
}

html body .vpa-qx__eyebrow {
    margin-bottom: clamp(16px, 1.6vw, 24px);
}

html body .vpa-qx__text p {
    font-size: clamp(24px, 2.2vw, 34px);
    line-height: 1.3;
}

html body .vpa-qx__by {
    margin-top: clamp(22px, 2.2vw, 32px);
}

html body .vpa-qx__media {
    justify-self: end;
    width: 100%;
    max-width: 360px;
    padding: 0 14px 14px 0;
}

html body .vpa-qx__media::before {
    top: 14px;
    left: 14px;
}

html body .vpa-qx__photo {
    aspect-ratio: 5 / 5.6;
}

html body .vpa-qx__creds {
    margin-top: 20px;
}

@media (max-width: 991px) {
    html body .vpa-qx__fig {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }

    html body .vpa-qx__media {
        justify-self: start;
        max-width: 320px;
    }
}

@media (max-width: 575px) {
    html body .vpa-qx__text p {
        font-size: 22px;
    }
}

/* ---------- Book a Valuation band, compact (2026-11-06): about a quarter lower on desktop. A wider,
   tighter glass panel with the title on one line and the two buttons side by side; the photo is a
   pre-cropped version (no wooden ceiling, the Burj Khalifa at about 70% across) so it covers the band
   cleanly at any width. ---------- */
@media (min-width: 992px) {
    .vpa-rep .vpa-rep__band--hero {
        min-height: clamp(360px, 28vw, 420px);
        padding: clamp(24px, 2.4vw, 36px);
        background:
            linear-gradient(90deg, rgba(5, 16, 74, .26) 0%, rgba(5, 16, 74, .1) 40%, rgba(5, 16, 74, 0) 60%),
            url("../images/valuation-services/book-valuation-dubai-skyline-pool.webp") 50% 45% / cover no-repeat;
    }

    .vpa-rep__band--hero .vpa-rep__copy {
        width: min(100%, 620px);
        padding: clamp(22px, 2.2vw, 32px);
    }

    .frv-page .vpa-rep .vpa-rep__band--hero .vpa-rep__title {
        margin-bottom: 10px;
        font-size: clamp(24px, 2.05vw, 30px);
    }

    .vpa-rep .vpa-rep__band--hero .vpa-rep__desc {
        margin-bottom: 18px;
    }

    .vpa-rep .vpa-rep__band--hero .vpa-rep__facts {
        margin: 0 0 20px;
    }

    .vpa-rep .vpa-rep__band--hero .vpa-rep__facts div {
        padding-block: 10px;
    }

    .vpa-rep .vpa-rep__band--hero .vpa-rep__actions {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px;
    }

    .frv-page .vpa-rep__band--hero .vpa-rep__btn {
        padding: 12px 22px;
    }
}

/* Book band: the panel takes its full 620px so the two buttons sit side by side; the quote credentials stay on one line */
@media (min-width: 992px) {
    .vpa-rep .vpa-rep__band--hero .vpa-rep__copy {
        width: min(100%, 620px);
        max-width: none;
    }

    .frv-page .vpa-rep .vpa-rep__band--hero .vpa-rep__btn {
        padding: 12px 20px;
    }
}

html body .vpa-qx__creds {
    font-size: 11px;
    letter-spacing: .1em;
}

@media (min-width: 992px) {
    html body .vpa-qx__creds {
        font-size: 10.5px;
        letter-spacing: .08em;
        white-space: nowrap;
    }
}

/* ---------- Strategic Consultancy, feasibility study framework (.sc-fz, 2026-11-06): a small blue label
   and the heading ("Feasibility study" in blue); on the left the core question on a pale blue panel
   with a blue top edge, a short rule and the definition; on the right market, finance and risk as
   rows under a dark rule, each with its blue tag, title and line, divided by hairlines. ---------- */
html body .sc-fz {
    background: #fff;
}

html body .sc-fz__head {
    margin-bottom: clamp(28px, 3vw, 44px);
}

html body .sc-fz__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #0b2dbe;
}

html body .sc-fz__eyebrow::before {
    content: "";
    width: 32px;
    height: 1px;
    background: #0b2dbe;
}

html body .sc-fz__h {
    margin: 0;
}

html body .sc-fz__h span {
    color: #0b2dbe;
}

html body .sc-fz__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: stretch;
}

html body .sc-fz__core {
    padding: clamp(28px, 3vw, 44px);
    border-top: 2px solid #0b2dbe;
    background: #eef2fb;
}

html body .sc-fz__kicker {
    margin: 0 0 18px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #0b2dbe;
}

html body .sc-fz__q {
    margin: 0;
    font-size: clamp(21px, 1.8vw, 27px);
    font-weight: 500;
    line-height: 1.32;
    letter-spacing: -.01em;
    color: #0a1230;
}

html body .sc-fz__rule {
    display: block;
    width: 96px;
    height: 1px;
    margin: 26px 0;
    background: rgba(11, 45, 190, .45);
}

html body .sc-fz__p {
    margin: 0;
    font-size: 16px;
    line-height: 1.65;
    color: #4a5568;
}

html body .sc-fz__list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #0a1230;
}

html body .sc-fz__row {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 24px;
    padding: clamp(24px, 2.6vw, 36px) 0;
    border-bottom: 1px solid #d9e0ee;
}

html body .sc-fz__tag {
    padding-top: 5px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #0b2dbe;
}

html body .sc-fz__title {
    margin: 0 0 8px;
    font-size: clamp(20px, 1.6vw, 24px);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: #0a1230;
    transition: color .25s ease;
}

html body .sc-fz__row:hover .sc-fz__title {
    color: #0b2dbe;
}

html body .sc-fz__desc {
    max-width: 38em;
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #4a5568;
}

@media (max-width: 991px) {
    html body .sc-fz__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575px) {
    html body .sc-fz__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding: 22px 0;
    }

    html body .sc-fz__tag {
        padding-top: 0;
        font-size: 12px;
    }

    html body .sc-fz__p,
    html body .sc-fz__desc {
        font-size: 15px;
    }
}

/* ---------- Reliant Engagement Workflow (.vpa-wf, 2026-11-06; frv_block_workflow in frv-rich-blocks.php):
   on the left a small blue label, the heading and seven steps down a fine vertical rule, each with a
   line icon in a square (it fills blue on hover), a small number, the title and a line; on the right a
   sticky column with the team photo and the firm's statement in blue. Phones: one column, photo first
   under the heading. ---------- */
html body .vpa-wf {
    background: #fff;
}

html body .vpa-wf--mist {
    background: #f4f6fb;
}

html body .vpa-wf__grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(36px, 5vw, 96px);
    align-items: start;
}

html body .vpa-wf__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #0b2dbe;
}

html body .vpa-wf__eyebrow::before {
    content: "";
    width: 32px;
    height: 1px;
    background: #0b2dbe;
}

html body .vpa-wf__h {
    margin: 0;
}

html body .vpa-wf__p {
    max-width: 36em;
    margin: 16px 0 0;
    font-size: 16px;
    line-height: 1.65;
    color: #4a5568;
}

html body .vpa-wf__steps {
    position: relative;
    margin: clamp(28px, 3vw, 40px) 0 0;
    padding: 0;
    list-style: none;
}

/* the rule that joins the icon squares */
html body .vpa-wf__steps::before {
    content: "";
    position: absolute;
    top: 24px;
    bottom: 24px;
    left: 23.5px;
    width: 1px;
    background: #d5ddef;
}

html body .vpa-wf__step {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 22px;
    padding: 14px 0;
}

html body .vpa-wf__ico {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid #cdd6ea;
    background: #fff;
    color: #0b2dbe;
    transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

html body .vpa-wf--mist .vpa-wf__ico {
    background: #f4f6fb;
}

html body .vpa-wf__ico svg {
    width: 22px;
    height: 22px;
}

html body .vpa-wf__step:hover .vpa-wf__ico {
    border-color: #0b2dbe;
    background: #0b2dbe;
    color: #fff;
}

html body .vpa-wf__body {
    padding-bottom: 14px;
    border-bottom: 1px solid #e3e8f2;
}

html body .vpa-wf__step:last-child .vpa-wf__body {
    border-bottom: 0;
}

html body .vpa-wf__num {
    display: block;
    margin-bottom: 4px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .14em;
    color: #0b2dbe;
}

html body .vpa-wf__title {
    margin: 0 0 4px;
    font-size: clamp(18px, 1.4vw, 21px);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: #0a1230;
}

html body .vpa-wf__desc {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.6;
    color: #4a5568;
}

html body .vpa-wf__sticky {
    position: sticky;
    top: 120px;
}

html body .vpa-wf__fig {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 3.2;
    overflow: hidden;
    background: #e9edf5;
}

html body .vpa-wf__fig img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

html body .vpa-wf__statement {
    position: relative;
    margin: 28px 0 0;
    padding-left: 22px;
    border-left: 2px solid #0b2dbe;
    font-size: clamp(19px, 1.6vw, 24px);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.01em;
    color: #0b2dbe;
}

html body .vpa-wf__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

@media (max-width: 991px) {
    html body .vpa-wf__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    html body .vpa-wf__sticky {
        position: static;
    }
}

@media (max-width: 575px) {
    html body .vpa-wf__step {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 16px;
    }

    html body .vpa-wf__ico {
        width: 40px;
        height: 40px;
    }

    html body .vpa-wf__ico svg {
        width: 19px;
        height: 19px;
    }

    html body .vpa-wf__steps::before {
        left: 19.5px;
    }

    html body .vpa-wf__desc {
        font-size: 14.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body .vpa-wf__ico {
        transition: none;
    }
}

/* workflow: the joining rule runs from each icon square to the next, so it stops at the last step */
html body .vpa-wf__steps::before {
    display: none;
}

html body .vpa-wf__step {
    padding: 10px 0;
}

html body .vpa-wf__step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 58px;
    bottom: -10px;
    left: 23.5px;
    width: 1px;
    background: #d5ddef;
}

@media (max-width: 575px) {
    html body .vpa-wf__step:not(:last-child)::before {
        top: 50px;
        left: 19.5px;
    }
}

/* badge tile with artwork (the 49 years mark): the art fills more of the tile than a logo would */
html body .frv-mcompact .frv-badge__logo--art {
    padding: 6px 12px;
}

html body .frv-mcompact .frv-badge__logo--art img {
    max-height: 60px;
}

@media (max-width: 639px) {
    html body .frv-mcompact .frv-badge__logo--art img {
        max-height: 46px;
    }
}

/* ---------- Reliant Engagement Workflow v2 (.vpa-wfx, 2026-11-06; frv_block_workflow): a head row with the
   label, heading, the statement in blue on a rule and the buttons, beside the team photo with a small
   caption plate; under it one white rail holding four phase bars (pale to deep blue) over the seven steps
   set as columns on hairlines, joined by a line through the icon squares. Hover lifts a column and fills
   its icon. Tablets: the steps wrap four and three, without phases; phones: a single list. ---------- */
html body .vpa-wfx {
    background: #fff;
}

html body .vpa-wfx--mist {
    background: #f4f6fb;
}

html body .vpa-wfx__head {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: end;
    gap: clamp(32px, 5vw, 88px);
    margin-bottom: clamp(32px, 3.4vw, 52px);
}

html body .vpa-wfx__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #0b2dbe;
}

html body .vpa-wfx__eyebrow::before {
    content: "";
    width: 32px;
    height: 1px;
    background: #0b2dbe;
}

html body .vpa-wfx__h {
    margin: 0;
}

html body .vpa-wfx__p {
    max-width: 34em;
    margin: 14px 0 0;
    font-size: 16px;
    line-height: 1.65;
    color: #4a5568;
}

html body .vpa-wfx__statement {
    max-width: 30em;
    margin: 26px 0 0;
    padding-left: 22px;
    border-left: 2px solid #0b2dbe;
    font-size: clamp(18px, 1.5vw, 22px);
    font-weight: 500;
    line-height: 1.42;
    letter-spacing: -.01em;
    color: #0b2dbe;
}

html body .vpa-wfx__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

html body .vpa-wfx__fig {
    position: relative;
    margin: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #e9edf5;
}

html body .vpa-wfx__fig img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

html body .vpa-wfx__figcap {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 14px 20px;
    background: #fff;
    font-size: 13.5px;
    font-weight: 500;
    color: #0a1230;
}

html body .vpa-wfx__figcap b {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: #0b2dbe;
}

/* the rail */
html body .vpa-wfx__rail {
    border: 1px solid #e1e6f0;
    background: #fff;
    box-shadow: 0 30px 60px -48px rgba(10, 18, 48, .35);
}

html body .vpa-wfx__phases {
    display: grid;
    grid-template-columns: repeat(var(--wfx-n, 7), minmax(0, 1fr));
}

html body .vpa-wfx__phase {
    grid-column: span var(--span, 1);
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 14px 22px 12px;
    border-top: 3px solid #b9c8ff;
    background: #f7f9fe;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #0a1230;
}

html body .vpa-wfx__phase + .vpa-wfx__phase {
    border-left: 1px solid #e1e6f0;
}

html body .vpa-wfx__phase:nth-child(2) {
    border-top-color: #7d98f2;
}

html body .vpa-wfx__phase:nth-child(3) {
    border-top-color: #3a5fe0;
}

html body .vpa-wfx__phase:nth-child(4) {
    border-top-color: #0b2dbe;
}

html body .vpa-wfx__phase small {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .12em;
    color: #6b7690;
}

html body .vpa-wfx__steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--wfx-n, 7), minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #e1e6f0;
}

/* the line through the icon squares, first to last */
html body .vpa-wfx__steps::before {
    content: "";
    position: absolute;
    top: 52px;
    left: 46px;
    right: calc(100% / var(--wfx-n, 7) - 46px);
    height: 1px;
    background: #cdd6ea;
}

html body .vpa-wfx__step {
    position: relative;
    padding: 26px 22px 30px;
    transition: background-color .3s ease;
}

html body .vpa-wfx__step + .vpa-wfx__step {
    border-left: 1px solid #e1e6f0;
}

html body .vpa-wfx__ico {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 1px solid #cdd6ea;
    background: #fff;
    color: #0b2dbe;
    transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

html body .vpa-wfx__ico svg {
    width: 23px;
    height: 23px;
}

html body .vpa-wfx__num {
    display: block;
    margin: 22px 0 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    color: #0b2dbe;
}

html body .vpa-wfx__title {
    margin: 0 0 8px;
    font-size: clamp(16px, 1.2vw, 18px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: #0a1230;
}

html body .vpa-wfx__desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #4a5568;
}

html body .vpa-wfx__step:hover {
    background: #f7f9fe;
}

html body .vpa-wfx__step:hover .vpa-wfx__ico {
    border-color: #0b2dbe;
    background: #0b2dbe;
    color: #fff;
}

/* tablets: four then three, no phase bars or joining line */
@media (max-width: 1199px) {
    html body .vpa-wfx__phases,
    html body .vpa-wfx__steps::before {
        display: none;
    }

    html body .vpa-wfx__steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        border-top: 0;
    }

    html body .vpa-wfx__step + .vpa-wfx__step {
        border-left: 0;
    }

    html body .vpa-wfx__step:not(:nth-child(4n + 1)) {
        border-left: 1px solid #e1e6f0;
    }

    html body .vpa-wfx__step:nth-child(n + 5) {
        border-top: 1px solid #e1e6f0;
    }
}

@media (max-width: 991px) {
    html body .vpa-wfx__head {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    html body .vpa-wfx__steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html body .vpa-wfx__step:not(:nth-child(4n + 1)) {
        border-left: 0;
    }

    html body .vpa-wfx__step:nth-child(even) {
        border-left: 1px solid #e1e6f0;
    }

    html body .vpa-wfx__step:nth-child(n + 3) {
        border-top: 1px solid #e1e6f0;
    }
}

/* phones: one list, icon beside the copy */
@media (max-width: 575px) {
    html body .vpa-wfx__steps {
        grid-template-columns: minmax(0, 1fr);
    }

    html body .vpa-wfx__step {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        column-gap: 16px;
        padding: 20px 18px;
    }

    html body .vpa-wfx__step:nth-child(even) {
        border-left: 0;
    }

    html body .vpa-wfx__step + .vpa-wfx__step {
        border-top: 1px solid #e1e6f0;
    }

    html body .vpa-wfx__ico {
        grid-row: 1 / 4;
        width: 44px;
        height: 44px;
    }

    html body .vpa-wfx__num {
        margin-top: 0;
    }

    html body .vpa-wfx__figcap {
        padding: 10px 14px;
        font-size: 12.5px;
    }

    html body .vpa-wfx__figcap b {
        font-size: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body .vpa-wfx__step,
    html body .vpa-wfx__ico {
        transition: none;
    }
}

/* ---------- process / card grids, upgraded (2026-11-06): the separate rounded cards become one white
   panel divided by hairlines (the gap shows the line colour), with a soft shadow. Numbered steps get a
   bar along the top that deepens in blue from step to step, a bold number with a rule running to the
   edge, and a stronger title; hover tints the step and turns its rule blue. The Valuation & Advisory
   timeline (.vpa-proc) keeps its own design. ---------- */
html body section:not(.vpa-proc) .frv-process {
    gap: 1px;
    margin-top: clamp(28px, 3vw, 40px);
    border: 1px solid #e1e6f0;
    background: #e1e6f0;
    box-shadow: 0 30px 60px -48px rgba(10, 18, 48, .35);
}

html body section:not(.vpa-proc) .frv-process__card {
    position: relative;
    height: 100%;
    padding: 32px 28px 34px;
    border-radius: 0;
    background: #fff;
    transition: background-color .3s ease;
}

html body section:not(.vpa-proc) .frv-process__card:has(.frv-process__num)::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 3px;
    background: #b9c8ff;
}

html body section:not(.vpa-proc) .frv-process:not(.frv-process--3) .frv-process__card:nth-child(4n + 2)::before {
    background: #7d98f2;
}

html body section:not(.vpa-proc) .frv-process:not(.frv-process--3) .frv-process__card:nth-child(4n + 3)::before {
    background: #3a5fe0;
}

html body section:not(.vpa-proc) .frv-process:not(.frv-process--3) .frv-process__card:nth-child(4n + 4)::before {
    background: #0b2dbe;
}

html body section:not(.vpa-proc) .frv-process--3 .frv-process__card:nth-child(3n + 2)::before {
    background: #5d7cf0;
}

html body section:not(.vpa-proc) .frv-process--3 .frv-process__card:nth-child(3n + 3)::before {
    background: #0b2dbe;
}

html body section:not(.vpa-proc) .frv-process__num {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: clamp(34px, 2.8vw, 44px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.03em;
    color: #0b2dbe;
}

html body section:not(.vpa-proc) .frv-process__num::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #d5ddef;
    transition: background-color .3s ease;
}

html body section:not(.vpa-proc) .frv-process__title {
    margin-top: 22px;
    font-size: clamp(17px, 1.3vw, 19px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: #0a1230;
}

html body section:not(.vpa-proc) .frv-process__card:not(:has(.frv-process__num)) .frv-process__title {
    margin-top: 0;
}

html body section:not(.vpa-proc) .frv-process__desc {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.62;
    color: #4a5568;
}

html body section:not(.vpa-proc) .frv-process__card:hover {
    background: #f7f9fe;
}

html body section:not(.vpa-proc) .frv-process__card:hover .frv-process__num::after {
    background: #0b2dbe;
}

@media (max-width: 639px) {
    html body section:not(.vpa-proc) .frv-process__card {
        padding: 24px 20px 26px;
    }

    html body section:not(.vpa-proc) .frv-process__num {
        font-size: 32px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body section:not(.vpa-proc) .frv-process__card,
    html body section:not(.vpa-proc) .frv-process__num::after {
        transition: none;
    }
}

/* template pages' tabs (only /services/residential-property-valuation uses them): the copy is short, so
   the photo is lower and the copy sits centred beside it instead of leaving a gap under it */
@media (min-width: 1024px) {
    html body .frv-svc .frv-tabs__fig {
        height: 460px;
    }

    html body .frv-svc .frv-tabs__content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 460px;
    }
}

/* ---------- tighter rhythm between sections (2026-11-06): the theme's sections gave 80px above and
   below, so two white sections stood 160px apart; now 64px on desktop, 48px on tablets, 40px on
   phones, the same for every section of the service pages. ---------- */
html body .frv-page .frv-section {
    padding-block: 40px;
}

@media (min-width: 640px) {
    html body .frv-page .frv-section {
        padding-block: 48px;
    }
}

@media (min-width: 1024px) {
    html body .frv-page .frv-section {
        padding-block: 64px;
    }
}

/* workflow head (2026-11-06): the theme's heading row; the rail follows at the usual distance */
html body .vpa-wfx .vpa-wfx__head2 {
    margin-bottom: clamp(28px, 3vw, 40px);
}

html body .vpa-wfx .vpa-wfx__head2 .frv-why__p {
    margin: 0;
}

html body .vpa-wfx .vpa-wfx__head2 .vpa-wfx__actions {
    margin-top: 20px;
}

html body .vpa-wfx .vpa-wfx__head2 .frv-why__p {
    font-size: 16px;
    line-height: 1.65;
    color: #4a5568;
}

/* ---------- case studies, block cards (2026-11-06): the photo shows in full as its own block, and the
   details sit in a white block beneath it (service and value, name, place, arrow). ---------- */
html body .vpa-csx .vpa-csx__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    aspect-ratio: auto;
    background: #fff;
}

html body .vpa-csx .vpa-csx__card::after {
    display: none;
}

html body .vpa-csx .vpa-csx__card > img {
    position: relative;
    inset: auto;
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

html body .vpa-csx .vpa-csx__panel {
    position: relative;
    left: auto;
    bottom: auto;
    flex: 1 1 auto;
    width: 100%;
    margin: 0;
    padding: 18px 20px 20px;
    border: 0;
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    color: #0a1230;
}

html body .vpa-csx .vpa-csx__card:hover .vpa-csx__panel,
html body .vpa-csx .vpa-csx__card:focus-visible .vpa-csx__panel {
    background: #fff;
}

html body .vpa-csx .vpa-csx__label {
    color: #5b6782;
}

html body .vpa-csx .vpa-csx__value {
    color: #0b2dbe;
}

html body .vpa-csx .vpa-csx__name {
    color: #0a1230;
}

html body .vpa-csx .vpa-csx__place {
    color: #5b6782;
}

html body .vpa-csx .vpa-csx__icon {
    border-color: #d5ddef;
    background: #f4f6fb;
    color: #0b2dbe;
}

html body .vpa-csx .vpa-csx__go {
    border-color: #0b2dbe;
    background: #0b2dbe;
    color: #fff;
}

/* ---------- workflow v3 (2026-11-06): a deep navy band. The heading and statement in white; the four
   phases as quiet labels on a fine bracket; the seven stages along one continuous hairline, each
   marked by a small square, with a large light numeral, the title in white and a softer line. No
   boxes, no icon tiles. Hover fills the stage's marker and tints its title. Phones: a vertical line
   with the markers down the left. ---------- */
html body .vpa-wfx,
html body .vpa-wfx.vpa-wfx--mist {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(70% 90% at 100% 0%, rgba(61, 95, 224, .28) 0%, rgba(61, 95, 224, 0) 60%),
        #06124a;
    color: #fff;
}

html body .vpa-wfx .frv-display-md {
    color: #fff;
}

html body .vpa-wfx .vpa-wfx__head2 .frv-why__p {
    color: rgba(255, 255, 255, .74);
}

html body .vpa-wfx .vpa-wfx__rail {
    border: 0;
    background: none;
    box-shadow: none;
}

html body .vpa-wfx .vpa-wfx__phase,
html body .vpa-wfx .vpa-wfx__phase:nth-child(n) {
    padding: 0 22px 12px 0;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .22);
    background: none;
    font-size: 12px;
    letter-spacing: .14em;
    color: #fff;
}

html body .vpa-wfx .vpa-wfx__phase + .vpa-wfx__phase {
    border-left: 0;
    margin-left: 18px;
}

html body .vpa-wfx .vpa-wfx__phase small {
    color: rgba(255, 255, 255, .55);
}

html body .vpa-wfx .vpa-wfx__steps {
    border-top: 0;
    margin-top: 34px;
}

/* the one hairline every stage sits on */
html body .vpa-wfx .vpa-wfx__steps::before {
    top: 5px;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255, 255, 255, .28);
}

html body .vpa-wfx .vpa-wfx__step {
    padding: 0 22px 0 0;
    background: none;
}

html body .vpa-wfx .vpa-wfx__step + .vpa-wfx__step {
    border-left: 0;
}

html body .vpa-wfx .vpa-wfx__step:hover {
    background: none;
}

/* the marker: replaces the icon tile */
html body .vpa-wfx .vpa-wfx__ico {
    width: 11px;
    height: 11px;
    border: 1px solid #fff;
    background: #06124a;
    color: transparent;
}

html body .vpa-wfx .vpa-wfx__ico svg {
    display: none;
}

html body .vpa-wfx .vpa-wfx__step:hover .vpa-wfx__ico {
    border-color: #fff;
    background: #fff;
}

html body .vpa-wfx .vpa-wfx__num {
    margin: 26px 0 14px;
    font-size: clamp(36px, 3vw, 48px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -.02em;
    color: #fff;
}

html body .vpa-wfx .vpa-wfx__title {
    margin: 0 0 10px;
    font-size: clamp(16px, 1.15vw, 18px);
    font-weight: 500;
    color: #fff;
    transition: color .3s ease;
}

html body .vpa-wfx .vpa-wfx__step:hover .vpa-wfx__title {
    color: #b9c8ff;
}

html body .vpa-wfx .vpa-wfx__desc {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .66);
}

html body .vpa-wfx .vpa-wfx__actions .frv-btn {
    margin-top: 4px;
}

/* tablets: four then three across, the line hidden */
@media (max-width: 1199px) {
    html body .vpa-wfx .vpa-wfx__step:not(:nth-child(4n + 1)),
    html body .vpa-wfx .vpa-wfx__step:nth-child(n + 5) {
        border: 0;
    }

    html body .vpa-wfx .vpa-wfx__step {
        padding-bottom: 28px;
    }

    html body .vpa-wfx .vpa-wfx__step::after {
        content: "";
        position: absolute;
        top: 5px;
        left: 12px;
        right: 0;
        height: 1px;
        background: rgba(255, 255, 255, .22);
    }
}

/* phones: one vertical line down the left with the markers on it */
@media (max-width: 575px) {
    html body .vpa-wfx .vpa-wfx__steps {
        margin-top: 8px;
    }

    html body .vpa-wfx .vpa-wfx__step,
    html body .vpa-wfx .vpa-wfx__step + .vpa-wfx__step {
        display: block;
        padding: 0 0 26px 30px;
        border: 0;
    }

    html body .vpa-wfx .vpa-wfx__step::after {
        top: 12px;
        bottom: 0;
        left: 5px;
        right: auto;
        width: 1px;
        height: auto;
    }

    html body .vpa-wfx .vpa-wfx__step:last-child::after {
        display: none;
    }

    html body .vpa-wfx .vpa-wfx__ico {
        position: absolute;
        top: 2px;
        left: 0;
        width: 11px;
        height: 11px;
    }

    html body .vpa-wfx .vpa-wfx__num {
        margin: 0 0 8px;
        font-size: 30px;
    }
}

/* ---------- workflow v4 (2026-11-06): light and structured. The four phases are columns on one ruled
   panel (white on mist), each with a coloured top line that deepens from phase to phase, its label,
   name and stage range; inside, its stages stacked, each a plain line icon, number, title and line.
   Pointing at a stage tints it and redraws its icon. Phones: the phases stack. ---------- */
html body .vpa-wfx.vpa-wfx--v4,
html body .vpa-wfx.vpa-wfx--v4.vpa-wfx--mist {
    background: #f4f6fb;
    color: #0a1230;
}

html body .vpa-wfx--v4 .frv-display-md {
    color: #0a1230;
}

html body .vpa-wfx--v4 .vpa-wfx__head2 .frv-why__p {
    color: #4a5568;
}

html body .vpa-wf4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    padding: 0;
    border: 1px solid #e1e6f0;
    background: #e1e6f0;
    list-style: none;
}

html body .vpa-wf4__phase {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fff;
}

html body .vpa-wf4__phase::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 3px;
    background: #9fb3ff;
}

html body .vpa-wf4__phase:nth-child(2)::before { background: #6f8cf0; }
html body .vpa-wf4__phase:nth-child(3)::before { background: #3a5fe0; }
html body .vpa-wf4__phase:nth-child(4)::before { background: #0b2dbe; }

html body .vpa-wf4__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 2px 12px;
    padding: 24px 26px 18px;
    border-bottom: 1px solid #e1e6f0;
}

html body .vpa-wf4__k {
    grid-column: 1;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #6b7690;
}

html body .vpa-wf4__name {
    grid-column: 1;
    font-size: clamp(20px, 1.6vw, 24px);
    font-weight: 500;
    letter-spacing: -.015em;
    color: #0a1230;
}

html body .vpa-wf4__range {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    font-size: clamp(22px, 1.8vw, 28px);
    font-weight: 300;
    letter-spacing: -.02em;
    color: #9fb3ff;
}

html body .vpa-wf4__steps {
    margin: 0;
    padding: 0;
    list-style: none;
}

html body .vpa-wf4__step {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 16px;
    padding: 22px 26px 24px;
    transition: background-color .35s ease;
}

html body .vpa-wf4__step + .vpa-wf4__step {
    border-top: 1px solid #eef1f6;
}

html body .vpa-wf4__ico {
    color: #0b2dbe;
}

html body .vpa-wf4__ico svg {
    width: 28px;
    height: 28px;
}

html body .vpa-wf4__num {
    display: block;
    margin-bottom: 4px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .12em;
    color: #0b2dbe;
}

html body .vpa-wf4__title {
    margin: 0 0 6px;
    font-size: clamp(16px, 1.2vw, 18px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: #0a1230;
}

html body .vpa-wf4__desc {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: #4a5568;
}

html body .vpa-wf4__step:hover {
    background: #f6f8fe;
}

html body .vpa-wf4__step:hover .vpa-wf4__ico svg > * {
    animation: vpa-draw 1s cubic-bezier(.65, 0, .35, 1) both;
}

@keyframes vpa-draw {
    from {
        stroke-dasharray: 90;
        stroke-dashoffset: 90;
    }

    to {
        stroke-dasharray: 90;
        stroke-dashoffset: 0;
    }
}

@media (max-width: 1199px) {
    html body .vpa-wf4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 639px) {
    html body .vpa-wf4 {
        grid-template-columns: minmax(0, 1fr);
    }

    html body .vpa-wf4__head,
    html body .vpa-wf4__step {
        padding-left: 18px;
        padding-right: 18px;
    }
}

/* ---------- "why" cards on the pale panel (2026-11-06): no navy gradient or stripes. White cells on
   hairlines, a plain line icon top right, the number with a fine rule, dark title and text; pointing at
   a card tints it, draws a blue line along its top and redraws its icon. ---------- */
html body .frv-panel--why .frv-why {
    gap: 1px;
    border: 1px solid #e1e6f0;
    background: #e1e6f0;
}

html body .frv-panel--why .frv-why__card,
html body .frv-panel--why .frv-why__card:nth-child(n),
html body .frv-panel--why .frv-why__card:nth-child(n):hover {
    position: relative;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    color: #0a1230;
    transform: none;
}

html body .frv-panel--why .frv-why__card::before {
    display: none;
}

html body .frv-panel--why .frv-why__card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #0b2dbe;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

html body .frv-panel--why .frv-why__card:hover::after {
    transform: scaleX(1);
}

html body .frv-panel--why .frv-why__card:nth-child(n):hover {
    background: #f6f8fe;
}

html body .frv-panel--why .frv-why__top::after {
    background: #e1e6f0;
}

html body .frv-panel--why .frv-why__num,
html body .frv-panel--why .frv-why__card:hover .frv-why__num {
    color: #0b2dbe;
}

html body .frv-panel--why .frv-why__ico,
html body .frv-panel--why .frv-why__card:hover .frv-why__ico {
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    color: #0b2dbe;
}

html body .frv-panel--why .frv-why__ico svg {
    width: 30px;
    height: 30px;
    stroke-width: 1.3;
}

html body .frv-panel--why .frv-why__card:hover .frv-why__ico svg > * {
    animation: vpa-draw 1s cubic-bezier(.65, 0, .35, 1) both;
}

html body .frv-panel--why .frv-why__title {
    color: #0a1230;
}

html body .frv-panel--why .frv-why__desc {
    color: #4a5568;
}

html body .frv-panel--why .frv-why__line {
    display: none;
}

/* ---------- case studies: the details block is frosted glass on the navy band, turning white on hover
   (2026-11-06) ---------- */
html body .vpa-csx .vpa-csx__card {
    background: transparent;
}

html body .vpa-csx .vpa-csx__panel {
    border: 1px solid rgba(255, 255, 255, .22);
    border-top: 0;
    background: rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    color: #fff;
    transition: background-color .4s ease, border-color .4s ease;
}

html body .vpa-csx .vpa-csx__label,
html body .vpa-csx .vpa-csx__place {
    color: rgba(255, 255, 255, .72);
    transition: color .4s ease;
}

html body .vpa-csx .vpa-csx__value {
    color: #b9c8ff;
    transition: color .4s ease;
}

html body .vpa-csx .vpa-csx__name {
    color: #fff;
    transition: color .4s ease;
}

html body .vpa-csx .vpa-csx__icon {
    border-color: rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

html body .vpa-csx .vpa-csx__go {
    border-color: #fff;
    background: #fff;
    color: #0b2dbe;
}

html body .vpa-csx .vpa-csx__card:hover .vpa-csx__panel,
html body .vpa-csx .vpa-csx__card:focus-visible .vpa-csx__panel {
    border-color: #fff;
    background: #fff;
}

html body .vpa-csx .vpa-csx__card:hover .vpa-csx__name,
html body .vpa-csx .vpa-csx__card:focus-visible .vpa-csx__name {
    color: #0a1230;
}

html body .vpa-csx .vpa-csx__card:hover .vpa-csx__label,
html body .vpa-csx .vpa-csx__card:hover .vpa-csx__place {
    color: #5b6782;
}

html body .vpa-csx .vpa-csx__card:hover .vpa-csx__value {
    color: #0b2dbe;
}

html body .vpa-csx .vpa-csx__card:hover .vpa-csx__icon {
    border-color: #d5ddef;
    background: #f4f6fb;
    color: #0b2dbe;
}

html body .vpa-csx .vpa-csx__card:hover .vpa-csx__go {
    border-color: #0b2dbe;
    background: #0b2dbe;
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    html body .vpa-wf4__step:hover .vpa-wf4__ico svg > *,
    html body .frv-panel--why .frv-why__card:hover .frv-why__ico svg > * {
        animation: none;
    }
}

/* ---------- Who We Work With in one row (.vpa-mx--row, 2026-11-06): all six at once. Each cell is a
   tall photo edge to edge with its number on a small white tab, then the name, line and "Explore".
   Hover: the photo eases in, a blue rule draws across the top, the name turns blue. Tablets: three
   across with shorter photos; phones: two across. ---------- */
.vpa-mx--row .vpa-mx__cell {
    padding: 0 0 18px;
}

.vpa-mx--row .vpa-mx__bg {
    aspect-ratio: 4 / 5;
    margin-bottom: 18px;
}

.vpa-mx--row .vpa-mx__bg img {
    transition: transform 1.2s cubic-bezier(.22, 1, .36, 1);
}

.vpa-mx--row .vpa-mx__cell > :not(.vpa-mx__bg) {
    margin-left: 18px;
    margin-right: 18px;
}

.vpa-mx--row .vpa-mx__cell > .vpa-mx__num {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    margin: 0;
    padding: 5px 8px;
    background: #fff;
    font-size: 11.5px;
    line-height: 1;
}

.vpa-mx--row .vpa-mx__body {
    gap: 6px;
    margin-top: 0;
}

.vpa-mx--row .vpa-mx__name {
    font-size: clamp(16px, 1.15vw, 18px);
}

.vpa-mx--row .vpa-mx__line {
    font-size: 13.5px;
}

.vpa-mx--row .vpa-mx__go {
    margin-top: 14px;
    padding-top: 12px;
}

.vpa-mx--row .vpa-mx__cell:hover .vpa-mx__bg img,
.vpa-mx--row .vpa-mx__cell:focus-visible .vpa-mx__bg img {
    transform: scale(1.06);
}

@media (max-width: 1199px) {
    .vpa-mx--row .vpa-mx__bg {
        aspect-ratio: 16 / 11;
    }
}

@media (max-width: 767px) {
    .vpa-mx--row .vpa-mx__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vpa-mx--row .vpa-mx__cell {
        padding: 0 0 14px;
    }

    .vpa-mx--row .vpa-mx__bg {
        aspect-ratio: 1 / 1;
        margin-bottom: 12px;
    }

    .vpa-mx--row .vpa-mx__cell > :not(.vpa-mx__bg) {
        margin-left: 12px;
        margin-right: 12px;
    }

    .vpa-mx--row .vpa-mx__cell > .vpa-mx__num {
        top: 10px;
        left: 10px;
    }

    .vpa-mx--row .vpa-mx__line {
        font-size: 12.5px;
    }
}

/* ---------- Key Services on phones, v2 (2026-11-06; every 'index' block except the one-row variant):
   two photo tiles to a row, the photo filling the tile with a soft shade at its foot, the number at
   the top and the name in white at the foot; the line and "Explore" step aside (the tile is the link).
   About a quarter of the former length. ---------- */
@media (max-width: 575px) {
    .vpa-mx:not(.vpa-mx--row) .vpa-mx__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        border: 0;
    }

    .vpa-mx:not(.vpa-mx--row) .vpa-mx__item {
        border: 0;
    }

    .vpa-mx:not(.vpa-mx--row) .vpa-mx__cell {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        aspect-ratio: 4 / 5;
        min-height: 0;
        padding: 12px;
        overflow: hidden;
        border: 0;
        background: #0a1230;
    }

    .vpa-mx:not(.vpa-mx--row) .vpa-mx__bg {
        position: absolute;
        inset: 0;
        aspect-ratio: auto;
        margin: 0;
    }

    .vpa-mx:not(.vpa-mx--row) .vpa-mx__bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .vpa-mx:not(.vpa-mx--row) .vpa-mx__bg::after {
        content: "";
        position: absolute;
        inset: 0;
        display: block;
        background: linear-gradient(180deg, rgba(6, 15, 60, .42) 0%, rgba(6, 15, 60, 0) 26%, rgba(6, 15, 60, 0) 46%, rgba(6, 15, 60, .82) 100%);
    }

    .vpa-mx:not(.vpa-mx--row) .vpa-mx__cell > :not(.vpa-mx__bg) {
        position: relative;
        z-index: 1;
        margin: 0;
    }

    .vpa-mx:not(.vpa-mx--row) .vpa-mx__cell > .vpa-mx__num {
        position: absolute;
        top: 12px;
        left: 12px;
        font-size: 12px;
        color: #fff;
    }

    .vpa-mx:not(.vpa-mx--row) .vpa-mx__body {
        flex: 0 0 auto;
        margin: 0;
    }

    .vpa-mx:not(.vpa-mx--row) .vpa-mx__name,
    .vpa-mx:not(.vpa-mx--row) .vpa-mx__cell:hover .vpa-mx__name {
        font-size: 15px;
        line-height: 1.3;
        color: #fff;
    }

    .vpa-mx:not(.vpa-mx--row) .vpa-mx__line,
    .vpa-mx:not(.vpa-mx--row) .vpa-mx__go {
        display: none;
    }
}

/* ==========================================================================
   Process, v5 (2026-11-06): formal and minimal. No icons, boxes or tints:
   one hairline runs across the four phases with a short blue mark where
   each phase begins; "Phase 1" in plain small type over the phase name;
   each stage below is its number, title and line on a hairline. The
   phases share one column gap so the four columns line up with the head.
   ========================================================================== */
html body .vpa-wf4 {
    gap: 0 clamp(28px, 3.2vw, 48px);
    border: 0;
    border-top: 1px solid #d9e0ec;
    background: none;
}

html body .vpa-wf4__phase {
    background: none;
}

html body .vpa-wf4__phase::before,
html body .vpa-wf4__phase:nth-child(n)::before {
    top: -1px;
    right: auto;
    width: 44px;
    height: 2px;
    background: #0b2dbe;
}

html body .vpa-wf4__head {
    display: block;
    padding: 26px 0 16px;
    border: 0;
}

html body .vpa-wf4__k {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: #6b7690;
}

html body .vpa-wf4__name {
    display: block;
    font-size: clamp(21px, 1.7vw, 26px);
    line-height: 1.15;
}

html body .vpa-wf4__range,
html body .vpa-wf4__ico {
    display: none;
}

html body .vpa-wf4__step,
html body .vpa-wf4__step + .vpa-wf4__step {
    display: block;
    padding: 18px 0 20px;
    border-top: 1px solid #e6ebf3;
    background: none;
}

html body .vpa-wf4__step:hover {
    background: none;
}

html body .vpa-wf4__num {
    margin-bottom: 8px;
    font-size: 12.5px;
    letter-spacing: .04em;
}

html body .vpa-wf4__title {
    margin-bottom: 6px;
    font-size: 17px;
    font-weight: 500;
}

html body .vpa-wf4__desc {
    font-size: 14.5px;
    line-height: 1.55;
    color: #5b6478;
}

@media (max-width: 1199px) {
    html body .vpa-wf4 {
        row-gap: 12px;
    }
}

@media (max-width: 639px) {
    html body .vpa-wf4 {
        row-gap: 8px;
    }

    html body .vpa-wf4__head,
    html body .vpa-wf4__step,
    html body .vpa-wf4__step + .vpa-wf4__step {
        padding-right: 0;
        padding-left: 0;
    }

    html body .vpa-wf4__step,
    html body .vpa-wf4__step + .vpa-wf4__step {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 4px 10px;
        padding-top: 14px;
        padding-bottom: 16px;
    }

    html body .vpa-wf4__head {
        padding: 20px 0 12px;
    }

    html body .vpa-wf4__step > div {
        display: contents;
    }

    html body .vpa-wf4__num {
        grid-column: 1;
        grid-row: 1 / span 2;
        margin: 3px 0 0;
    }

    html body .vpa-wf4__title,
    html body .vpa-wf4__desc {
        grid-column: 2;
    }

    html body .vpa-wf4__title {
        font-size: 16px;
    }

    html body .vpa-wf4__desc {
        font-size: 14px;
    }

    html body .vpa-wf4__phase + .vpa-wf4__phase {
        border-top: 1px solid #d9e0ec;
    }
}

/* ---------- linked list items (2026-11-06): a card or row that now has its own page links on; the
   whole item is the target, the title takes a fine underline that turns blue on hover ---------- */
.frv-cardlist__item,
.frv-linelist__item {
    position: relative;
}

.frv-cardlist__link,
.frv-linelist__link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(11, 45, 190, .3);
    transition: color .25s ease, border-color .25s ease;
}

.frv-cardlist__link::after,
.frv-linelist__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.frv-cardlist__item:hover .frv-cardlist__link,
.frv-linelist__item:hover .frv-linelist__link,
.frv-cardlist__link:focus-visible,
.frv-linelist__link:focus-visible {
    color: #0b2dbe;
    border-bottom-color: #0b2dbe;
}

/* Strategic Consultancy: the feasibility framework's link on to its own page */
.sc-fz__more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding-bottom: 4px;
    border-bottom: 1px solid currentColor;
    font-size: 15px;
    font-weight: 500;
    color: #0b2dbe;
    text-decoration: none;
}

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

.sc-fz__more:hover svg,
.sc-fz__more:focus-visible svg {
    transform: translateX(3px);
}

/* ==========================================================================
   Process, v6 (2026-11-09): one timeline. On desktop the seven stages are
   seven equal columns; the four phases are a segmented bar across the top
   (each segment as wide as its stages, deepening in blue), and every stage
   has a numbered node on one continuous line. Phase rows and stage columns
   are subgrids, so nodes and titles line up across phases. Where supported,
   the bar and the line draw in as the section scrolls into view. Tablets:
   two columns of phases; phones: one; both as vertical timelines.
   ========================================================================== */
html body .vpa-wf4.vpa-wf4--line {
    --wf-gap: clamp(20px, 2.1vw, 34px);
    --wf-node: 40px;
    grid-template-columns: repeat(var(--wfx-n, 7), minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: 0 var(--wf-gap);
    border: 0;
    background: none;
}

html body .vpa-wf4--line .vpa-wf4__phase {
    grid-column: span var(--wf-span, 1);
    grid-row: span 2;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    background: none;
}

/* the phase's segment of the bar */
html body .vpa-wf4--line .vpa-wf4__phase::before,
html body .vpa-wf4--line .vpa-wf4__phase:nth-child(n)::before {
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    height: 3px;
    border-radius: 2px;
    background: #9fb3ff;
    transform-origin: 0 50%;
}

html body .vpa-wf4--line .vpa-wf4__phase:nth-child(2)::before { background: #6f8cf0; }
html body .vpa-wf4--line .vpa-wf4__phase:nth-child(3)::before { background: #3a5fe0; }
html body .vpa-wf4--line .vpa-wf4__phase:nth-child(4)::before { background: #0b2dbe; }

html body .vpa-wf4--line .vpa-wf4__head {
    grid-column: 1 / -1;
    display: block;
    padding: 22px 0 30px;
    border: 0;
}

html body .vpa-wf4--line .vpa-wf4__k {
    display: block;
    margin-bottom: 6px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #6b7690;
}

html body .vpa-wf4--line .vpa-wf4__name {
    display: block;
    font-size: clamp(22px, 1.75vw, 28px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -.015em;
    color: #0a1230;
}

html body .vpa-wf4--line .vpa-wf4__steps {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: start;
}

html body .vpa-wf4--line .vpa-wf4__step,
html body .vpa-wf4--line .vpa-wf4__step + .vpa-wf4__step {
    position: relative;
    display: block;
    padding: 0;
    border: 0;
    background: none;
}

/* the line from this node to the next one (across the column gap) */
html body .vpa-wf4--line .vpa-wf4__step::before {
    content: "";
    position: absolute;
    top: calc(var(--wf-node) / 2);
    left: calc(var(--wf-node) + 10px);
    right: calc(10px - var(--wf-gap));
    height: 1px;
    background: #c9d3ea;
    transform-origin: 0 50%;
}

html body .vpa-wf4--line .vpa-wf4__phase:last-child .vpa-wf4__step:last-child::before {
    display: none;
}

/* the node */
html body .vpa-wf4--line .vpa-wf4__num {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--wf-node);
    height: var(--wf-node);
    margin: 0 0 22px;
    border: 1px solid #c9d3ea;
    border-radius: 50%;
    background: #fff;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .02em;
    color: #0b2dbe;
    box-shadow: 0 8px 18px -12px rgba(11, 45, 190, .45);
    transition: background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;
}

html body .vpa-wf4--line .vpa-wf4__title {
    margin: 0 0 8px;
    font-size: clamp(16px, 1.15vw, 18px);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: #0a1230;
    transition: color .3s ease;
}

html body .vpa-wf4--line .vpa-wf4__desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #5b6478;
}

html body .vpa-wf4--line .vpa-wf4__step:hover .vpa-wf4__num {
    border-color: #0b2dbe;
    background: #0b2dbe;
    color: #fff;
    box-shadow: 0 10px 22px -10px rgba(11, 45, 190, .6);
}

html body .vpa-wf4--line .vpa-wf4__step:hover .vpa-wf4__title {
    color: #0b2dbe;
}

/* draw-in while scrolling, where the browser supports scroll-driven animation */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) and (min-width: 1200px) {
        html body .vpa-wf4--line {
            view-timeline-name: --vpa-wf6;
        }

        html body .vpa-wf4--line .vpa-wf4__phase::before {
            animation: vpa-wf6-grow linear both;
            animation-timeline: --vpa-wf6;
            animation-range: entry 15% cover 40%;
        }

        html body .vpa-wf4--line .vpa-wf4__step::before {
            animation: vpa-wf6-grow linear both;
            animation-timeline: --vpa-wf6;
            animation-range: entry calc(20% + var(--wf-i, 0) * 4%) entry calc(45% + var(--wf-i, 0) * 4%);
        }

        html body .vpa-wf4--line .vpa-wf4__num {
            animation: vpa-wf6-node linear both;
            animation-timeline: --vpa-wf6;
            animation-range: entry calc(15% + var(--wf-i, 0) * 4%) entry calc(35% + var(--wf-i, 0) * 4%);
        }
    }
}

@keyframes vpa-wf6-grow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes vpa-wf6-node {
    from { opacity: 0; transform: scale(.6); }
    to { opacity: 1; transform: scale(1); }
}

/* tablets and phones: vertical timelines, two phases per row on tablets */
@media (max-width: 1199px) {
    html body .vpa-wf4.vpa-wf4--line {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        gap: 36px clamp(28px, 4vw, 48px);
    }

    html body .vpa-wf4--line .vpa-wf4__phase {
        grid-column: auto;
        grid-row: auto;
        display: block;
    }

    html body .vpa-wf4--line .vpa-wf4__head {
        padding: 20px 0 22px;
    }

    html body .vpa-wf4--line .vpa-wf4__steps {
        display: block;
    }

    html body .vpa-wf4--line .vpa-wf4__step,
    html body .vpa-wf4--line .vpa-wf4__step + .vpa-wf4__step {
        display: grid;
        grid-template-columns: var(--wf-node) minmax(0, 1fr);
        column-gap: 18px;
        padding-bottom: 26px;
    }

    html body .vpa-wf4--line .vpa-wf4__step:last-child {
        padding-bottom: 0;
    }

    html body .vpa-wf4--line .vpa-wf4__step > div {
        display: contents;
    }

    html body .vpa-wf4--line .vpa-wf4__num {
        grid-column: 1;
        grid-row: 1 / span 2;
        margin: 0;
    }

    html body .vpa-wf4--line .vpa-wf4__title {
        grid-column: 2;
        margin: 0 0 6px;
        padding-top: calc((var(--wf-node) - 1.3em) / 2);
    }

    html body .vpa-wf4--line .vpa-wf4__desc {
        grid-column: 2;
    }

    /* the line runs down from each node to the next within a phase */
    html body .vpa-wf4--line .vpa-wf4__step::before {
        top: calc(var(--wf-node) + 6px);
        bottom: 6px;
        left: calc(var(--wf-node) / 2);
        right: auto;
        width: 1px;
        height: auto;
    }

    html body .vpa-wf4--line .vpa-wf4__step:last-child::before {
        display: none;
    }
}

@media (max-width: 767px) {
    html body .vpa-wf4.vpa-wf4--line {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 30px;
        --wf-node: 36px;
    }

    html body .vpa-wf4--line .vpa-wf4__phase + .vpa-wf4__phase {
        border-top: 0;
    }

    html body .vpa-wf4--line .vpa-wf4__title {
        font-size: 16px;
    }
}

/* ---------- Why Choose Us / Expertise panel, balanced (2026-11-10): the accreditations are three equal
   columns with one even gap and a hairline in the middle of each gap (they used to size to their labels,
   so the columns and the logo tiles came out three different widths); every logo sits on the same
   full-width tile and the labels are two words. The intro paragraph runs to the same right edge as the
   rules, and the buttons share the row as equal halves (stacking on narrow widths). ---------- */
.frv-exp .frv-exp__p {
    max-width: none;
}

.frv-mcompact .frv-exp .frv-badges {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    column-gap: 48px;
}

.frv-mcompact .frv-exp .frv-badge {
    position: relative;
    min-width: 0;
    padding-inline: 0;
    border-left: 0;
}

.frv-mcompact .frv-exp .frv-badge + .frv-badge::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -24px;
    width: 1px;
    background: var(--frv-line);
}

.frv-mcompact .frv-exp .frv-badge__logo {
    width: 100%;
    max-width: none;
    height: 76px;
}

.frv-mcompact .frv-exp .frv-badge__txt {
    text-wrap: balance;
}

.frv-exp .frv-actions .frv-btn {
    flex: 1 1 180px;
}

@media (max-width: 639px) {
    .frv-mcompact .frv-exp .frv-badges {
        column-gap: 24px;
    }

    .frv-mcompact .frv-exp .frv-badge + .frv-badge::before {
        left: -12px;
    }

    .frv-mcompact .frv-exp .frv-badge__logo {
        height: 58px;
    }
}

/* logos are cropped to their artwork (rics-badge.webp, ivsc-badge.webp) and fitted in one box, so the
   three marks read at the same visual size instead of growing with the tile */
.frv-mcompact .frv-exp .frv-badge__logo:not(.frv-badge__logo--art) img {
    height: 40px;
    max-height: none;
    max-width: min(100%, 132px);
}

/* small laptops: the panel's text column is narrow, so a tighter gap keeps the labels on one line */
@media (min-width: 1024px) and (max-width: 1279px) {
    .frv-mcompact .frv-exp .frv-badges {
        column-gap: 32px;
    }

    .frv-mcompact .frv-exp .frv-badge + .frv-badge::before {
        left: -16px;
    }

    .frv-mcompact .frv-exp .frv-badge__logo {
        padding-inline: 12px;
    }
}

@media (max-width: 639px) {
    .frv-mcompact .frv-exp .frv-badge__logo:not(.frv-badge__logo--art) img {
        height: 30px;
    }
}

/* the IVSC wordmark is bolder and has no small top line, so it is set a little smaller to match RICS and DLD */
.frv-mcompact .frv-exp .frv-badge__logo img[src*="ivsc-badge"] {
    height: 32px;
}

@media (max-width: 639px) {
    .frv-mcompact .frv-exp .frv-badge__logo img[src*="ivsc-badge"] {
        height: 24px;
    }
}