/* ==========================================================================
   rs-page.css, shared layout for content pages on the new UI
   The People / Careers / Contact pages and the service pages (.frv-) are the
   reference: "Helvetica Neue" / Inter, section titles 500 / 1.2 / #0a1230,
   body copy 400 / 1.75 / #5b6478, brand blue #092db6 → #0b2dbe gradient,
   8px corners, #e6e9f2 hairlines, the home page's section rhythm (half of
   its 112px block gap above and below every section: 56px desktop, 44px
   tablet, 32px phone), deep-blue glass abstracts in the heroes and banners.

   Usage: set $body_class = 'rsp-page' (plus any page class) before
   includes/common-header.php, link this sheet in $meta_tags, and give the
   header <div class="page-header-section rsp-hero" style="background-image:
   url('assets/images/page-heroes/....webp')">. Every rule is scoped under
   .rsp-page or prefixed .rsp-* so it never collides with bundle.css.
   ========================================================================== */

.rsp-page {
    --rsp-ink: #0a1230;
    --rsp-ink-2: #14193f;
    --rsp-body: #5b6478;
    --rsp-muted: #64748b;
    --rsp-blue: #092db6;
    --rsp-blue-700: #0a27a3;
    --rsp-blue-50: #eef2ff;
    --rsp-line: #e6e9f2;
    --rsp-mist: #f5f6f9;
    --rsp-card: #f2f3f7;
    --rsp-gradient: linear-gradient(150deg, #0e3fa8 0%, #1436d8 48%, #0b2dbe 100%);
    --rsp-ease: cubic-bezier(.2, .65, .2, 1);
    /* home page block gap (rs-sections.css --rs-gap); each section takes half */
    --rsp-gap: 112px;
}

@media (max-width: 1199px) {
    .rsp-page {
        --rsp-gap: 88px;
    }
}

@media (max-width: 767px) {
    .rsp-page {
        --rsp-gap: 64px;
    }
}

/* ═══════════ 1. Header: blue glass abstract ═══════════ */
.page-header-section.rsp-hero {
    padding-top: 200px;
    background-color: #0a2fb0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: normal;
}

/* heading block, hairline and breadcrumb sit closer together than the legacy hero */
.rsp-hero .page-header-heading {
    margin-bottom: 24px;
}

.rsp-hero ul.breadcrumb {
    padding: 36px 0;
}

.page-header-section.rsp-hero::after {
    bottom: 100px;
}

.rsp-hero .container {
    position: relative;
    z-index: 2;
}

.rsp-hero .page-header-heading h1,
.rsp-hero .page-header-heading h1.rs-page-h1 {
    font-size: 48px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-bottom: 14px;
    color: #fff;
}

.rsp-hero .page-header-heading p {
    max-width: 520px;
    font-size: 16px;
    line-height: 1.65;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, .92);
}

/* ═══════════ 2. Sections + type ═══════════ */
.rsp-page .rsp-section {
    padding-top: calc(var(--rsp-gap) / 2);
    padding-bottom: calc(var(--rsp-gap) / 2);
}

.rsp-page .rsp-section--mist {
    background: var(--rsp-mist);
}

.rsp-page .rsp-section--rule {
    border-top: 1px solid var(--rsp-line);
}

.rsp-page .rsp-section--flush-top {
    padding-top: 0;
}

.rsp-page .rsp-eyebrow {
    display: block;
    margin: 0 0 18px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--rsp-blue);
}

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

.rsp-page .rsp-title {
    margin: 0;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--rsp-ink);
    text-wrap: balance;
}

.rsp-page .rsp-title--sm {
    font-size: 24px;
}

.rsp-page .rsp-title span,
.rsp-page .rsp-title strong {
    color: inherit;
    font-weight: inherit;
}

.rsp-page .rsp-text,
.rsp-page .rsp-copy p {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: -0.01em;
    color: var(--rsp-body);
}

.rsp-page .rsp-copy p+p,
.rsp-page .rsp-copy p+ul,
.rsp-page .rsp-copy ul+p {
    margin-top: 18px;
}

.rsp-page .rsp-copy a,
.rsp-page .rsp-text a,
.rsp-page .rsp-prose a {
    color: var(--rsp-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rsp-page .rsp-lead {
    margin: 0;
    font-size: 18px;
    line-height: 1.6;
    letter-spacing: -0.01em;
    color: var(--rsp-ink);
}

@media (min-width: 768px) {
    .rsp-page .rsp-title {
        font-size: clamp(28px, 2.95vw, 42px);
    }

    .rsp-page .rsp-title--sm {
        font-size: clamp(22px, 2vw, 28px);
    }
}

/* section head: title left, supporting copy right */
.rsp-page .rsp-head {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 24px 72px;
    align-items: end;
    margin-bottom: 40px;
}

.rsp-page .rsp-head--stack {
    grid-template-columns: minmax(0, 1fr);
    max-width: 760px;
    gap: 18px;
}

.rsp-page .rsp-head--center {
    grid-template-columns: minmax(0, 1fr);
    max-width: 760px;
    gap: 18px;
    margin-inline: auto;
    text-align: center;
}

.rsp-page .rsp-head .rsp-eyebrow {
    margin-bottom: 14px;
}

/* ═══════════ 3. Intro: title | ruled copy ═══════════ */
.rsp-page .rsp-intro {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr);
    gap: 40px 72px;
    align-items: start;
}

.rsp-page .rsp-intro__copy {
    padding-left: 36px;
    border-left: 1px solid var(--rsp-line);
}

/* ═══════════ 4. Split: photo | copy ═══════════ */
.rsp-page .rsp-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px 72px;
    align-items: center;
}

.rsp-page .rsp-split--reverse>.rsp-split__media {
    order: 2;
}

.rsp-page .rsp-split__media {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: var(--rsp-card);
    aspect-ratio: 4 / 3;
}

.rsp-page .rsp-split__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rsp-page .rsp-split__body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.rsp-page .rsp-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 2.1 / 1;
    object-fit: cover;
    border-radius: 8px;
}

/* ═══════════ 5. Cards ═══════════ */
.rsp-page .rsp-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

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

.rsp-page .rsp-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rsp-page .rsp-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    padding: 28px 26px;
    background: #fff;
    border: 1px solid var(--rsp-line);
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}

.rsp-page .rsp-card--mist {
    background: var(--rsp-card);
    border-color: transparent;
}

.rsp-page a.rsp-card:hover,
.rsp-page .rsp-card--lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(9, 45, 182, .10);
    color: inherit;
    text-decoration: none;
}

.rsp-page .rsp-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: var(--rsp-blue-50);
    color: var(--rsp-blue);
    flex: 0 0 auto;
}

.rsp-page .rsp-card__icon svg,
.rsp-page .rsp-card__icon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.rsp-page .rsp-card__num {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--rsp-blue);
}

.rsp-page .rsp-card__title {
    margin: 0;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--rsp-ink-2);
}

.rsp-page .rsp-card__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    letter-spacing: -0.01em;
    color: var(--rsp-body);
}

.rsp-page .rsp-card__link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--rsp-blue);
}

/* photo card (image on top) */
.rsp-page .rsp-card--photo {
    padding: 12px 12px 24px;
}

.rsp-page .rsp-card__photo {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border-radius: 8px;
    background: var(--rsp-card);
}

.rsp-page .rsp-card__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.rsp-page .rsp-card--photo:hover .rsp-card__photo img {
    transform: scale(1.04);
}

.rsp-page .rsp-card--photo .rsp-card__title,
.rsp-page .rsp-card--photo .rsp-card__text,
.rsp-page .rsp-card--photo .rsp-card__meta,
.rsp-page .rsp-card--photo .rsp-card__link {
    padding-inline: 12px;
}

.rsp-page .rsp-card__meta {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--rsp-muted);
}

/* blue gradient card (statement / highlight) */
.rsp-page .rsp-card--blue {
    position: relative;
    overflow: hidden;
    border: 0;
    background: var(--rsp-gradient);
    color: #fff;
}

.rsp-page .rsp-card--blue::before {
    content: "";
    position: absolute;
    top: -90px;
    right: -90px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(150, 190, 255, .28) 0%, rgba(255, 255, 255, 0) 68%);
    pointer-events: none;
}

.rsp-page .rsp-card--blue>* {
    position: relative;
    z-index: 1;
}

.rsp-page .rsp-card--blue .rsp-card__title,
.rsp-page .rsp-card--blue .rsp-card__text,
.rsp-page .rsp-card--blue .rsp-card__link {
    color: #fff;
}

.rsp-page .rsp-card--blue .rsp-card__text {
    color: rgba(255, 255, 255, .86);
}

.rsp-page .rsp-card--blue .rsp-card__icon {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

/* ═══════════ 6. Line list (two-column ruled items) ═══════════ */
.rsp-page .rsp-lines {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 48px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rsp-page .rsp-lines--1 {
    grid-template-columns: minmax(0, 1fr);
}

.rsp-page .rsp-lines li {
    padding: 20px 0;
    border-top: 1px solid var(--rsp-line);
}

.rsp-page .rsp-lines__title {
    display: block;
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--rsp-ink-2);
}

.rsp-page .rsp-lines__text {
    display: block;
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--rsp-body);
}

/* check list */
.rsp-page .rsp-checks {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rsp-page .rsp-checks--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 32px;
}

.rsp-page .rsp-checks li {
    position: relative;
    padding-left: 30px;
    font-size: 16px;
    line-height: 1.75;
    letter-spacing: -0.01em;
    color: var(--rsp-body);
}

.rsp-page .rsp-checks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--rsp-blue-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23092db6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat;
}

.rsp-page .rsp-checks li strong {
    font-weight: 500;
    color: var(--rsp-ink-2);
}

/* ═══════════ 7. Steps (process) ═══════════ */
.rsp-page .rsp-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: rsp-step;
}

.rsp-page .rsp-steps--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rsp-page .rsp-steps--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.rsp-page .rsp-steps>li {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 26px 24px;
    background: #fff;
    border: 1px solid var(--rsp-line);
    border-radius: 8px;
    counter-increment: rsp-step;
}

.rsp-page .rsp-steps>li::before {
    content: counter(rsp-step, decimal-leading-zero);
    margin-bottom: 14px;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--rsp-blue);
}

/* ═══════════ 8. Stats ═══════════ */
.rsp-page .rsp-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.rsp-page .rsp-stat {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 26px 28px;
    background: var(--rsp-card);
    border-radius: 8px;
}

.rsp-page .rsp-stat__num {
    font-size: 38px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.04em;
    color: var(--rsp-ink-2);
    white-space: nowrap;
}

.rsp-page .rsp-stat__label {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--rsp-muted);
}

/* ═══════════ 9. Banner: blue glass panel ═══════════ */
.rsp-page .rsp-banner {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px 48px;
    align-items: end;
    padding: 64px;
    border-radius: 8px;
    background: #0a2fb0 url("../images/page-heroes/banner_abstract_brand_sweep.webp?v=20261105") center / cover no-repeat;
    color: #fff;
}

.rsp-page .rsp-banner--plain {
    background: var(--rsp-gradient);
}

.rsp-page .rsp-banner__title {
    margin: 0 0 18px;
    max-width: 560px;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #fff;
}

.rsp-page .rsp-banner__text {
    margin: 0;
    max-width: 520px;
    font-size: 16px;
    line-height: 1.65;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, .92);
}

.rsp-page .rsp-banner .rsp-actions {
    margin-top: 0;
}

@media (min-width: 768px) {
    .rsp-page .rsp-banner__title {
        font-size: clamp(30px, 3vw, 43px);
    }
}

/* ═══════════ 10. Buttons ═══════════ */
.rsp-page .rsp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.rsp-page .rsp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 22px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}

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

.rsp-page .rsp-btn svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

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

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

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

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

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

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

.rsp-page .rsp-btn--ghost {
    border-color: rgba(255, 255, 255, .45);
    background: transparent;
    color: #fff;
}

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

/* ═══════════ 11. Quote ═══════════ */
.rsp-page .rsp-quote {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 40px 44px;
    border-radius: 8px;
    background: var(--rsp-gradient);
    color: #fff;
}

.rsp-page .rsp-quote::before {
    content: "";
    position: absolute;
    top: -90px;
    right: -90px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(150, 190, 255, .28) 0%, rgba(255, 255, 255, 0) 68%);
    pointer-events: none;
}

.rsp-page .rsp-quote p {
    position: relative;
    margin: 0;
    font-size: clamp(20px, 1.75vw, 25px);
    line-height: 1.45;
    letter-spacing: -0.01em;
    color: #fff;
}

.rsp-page .rsp-quote cite {
    position: relative;
    display: block;
    margin-top: 22px;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
}

/* ═══════════ 12. Prose (policies, long reads) ═══════════ */
.rsp-page .rsp-prose-wrap {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: 40px 72px;
    align-items: start;
}

.rsp-page .rsp-toc {
    position: sticky;
    top: 120px;
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0 0 0 18px;
    list-style: none;
    border-left: 1px solid var(--rsp-line);
}

.rsp-page .rsp-toc a {
    display: block;
    padding: 6px 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--rsp-body);
    text-decoration: none;
}

.rsp-page .rsp-toc a:hover {
    color: var(--rsp-blue);
}

.rsp-page .rsp-prose {
    max-width: 820px;
    font-size: 16px;
    line-height: 1.75;
    letter-spacing: -0.01em;
    color: var(--rsp-body);
}

.rsp-page .rsp-prose> :first-child {
    margin-top: 0;
}

.rsp-page .rsp-prose h2 {
    margin: 44px 0 14px;
    padding-top: 28px;
    border-top: 1px solid var(--rsp-line);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--rsp-ink);
    scroll-margin-top: 120px;
}

.rsp-page .rsp-prose> h2:first-child {
    padding-top: 0;
    border-top: 0;
}

.rsp-page .rsp-prose h3 {
    margin: 28px 0 10px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--rsp-ink-2);
}

.rsp-page .rsp-prose p {
    margin: 0 0 16px;
}

.rsp-page .rsp-prose ul,
.rsp-page .rsp-prose ol {
    margin: 0 0 18px;
    padding-left: 22px;
}

.rsp-page .rsp-prose ul {
    list-style: disc;
}

.rsp-page .rsp-prose ol {
    list-style: decimal;
}

.rsp-page .rsp-prose li {
    margin-bottom: 8px;
    padding-left: 4px;
}

.rsp-page .rsp-prose li::marker {
    color: var(--rsp-blue);
}

.rsp-page .rsp-prose strong {
    font-weight: 500;
    color: var(--rsp-ink-2);
}

.rsp-page .rsp-prose__updated {
    display: inline-block;
    margin-bottom: 24px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--rsp-muted);
}

/* ═══════════ 13. Profile (leader / chairman) ═══════════ */
.rsp-page .rsp-profile {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 40px 72px;
    align-items: start;
}

.rsp-page .rsp-profile__photo {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: #e9ecf5;
    aspect-ratio: 5 / 6;
}

.rsp-page .rsp-profile__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.rsp-page .rsp-profile__card {
    position: sticky;
    top: 120px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rsp-page .rsp-profile__name {
    margin: 0;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--rsp-ink-2);
}

.rsp-page .rsp-profile__role {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--rsp-body);
}

.rsp-page .rsp-profile__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.rsp-page .rsp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rsp-page .rsp-chips li {
    padding: 8px 14px;
    border: 1px solid var(--rsp-line);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--rsp-ink-2);
    background: #fff;
}

/* person card (same as People) */
.rsp-page .rsp-person {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 12px 22px;
    background: #fff;
    border: 1px solid var(--rsp-line);
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .3s ease, transform .3s ease;
}

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

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

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

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

.rsp-page .rsp-person__name {
    display: block;
    margin-top: 16px;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--rsp-ink-2);
}

.rsp-page .rsp-person__role {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--rsp-body);
}

/* ═══════════ 14. Form panel (sidebar / apply / enquiry) ═══════════ */
.rsp-page .rsp-panel {
    padding: 32px;
    background: #fff;
    border: 1px solid var(--rsp-line);
    border-radius: 8px;
}

.rsp-page .rsp-panel--mist {
    background: var(--rsp-mist);
    border-color: transparent;
}

.rsp-page .rsp-panel :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]), select, textarea) {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--rsp-line);
    border-radius: 8px;
    background: #fff;
    font-size: 15px;
    color: var(--rsp-ink);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.rsp-page .rsp-panel :is(input, select, textarea):focus {
    outline: 0;
    border-color: var(--rsp-blue);
    box-shadow: 0 0 0 3px rgba(9, 45, 182, .12);
}

.rsp-page .rsp-panel label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--rsp-ink-2);
}

/* ═══════════ 15. Centred message (404 / thank-you) ═══════════ */
.rsp-page .rsp-message {
    max-width: 640px;
    margin: 0 auto;
    padding: 48px 40px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--rsp-line);
    border-radius: 8px;
}

.rsp-page .rsp-message__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 22px;
    border-radius: 50%;
    background: var(--rsp-blue-50);
    color: var(--rsp-blue);
}

.rsp-page .rsp-message .rsp-actions {
    justify-content: center;
}

/* ═══════════ 16. FAQ (shared two-column script in common-footer.php) ═══════════ */
.rsp-page .rsp-faq {
    padding-top: 0;
    padding-bottom: 0;
}

.rsp-page .rsp-faq .rs-faq-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

.rsp-page .rsp-faq .rs-faq-section>.rs-faq-grid {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.rsp-page .rsp-faq .rs-faq-heading {
    font-size: clamp(30px, 3.05vw, 44px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--rsp-ink);
}

/* ═══════════ Tablet ═══════════ */
@media (max-width: 1199px) {

    .rsp-page .rsp-grid--4,
    .rsp-page .rsp-stats,
    .rsp-page .rsp-steps,
    .rsp-page .rsp-steps--5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rsp-page .rsp-banner {
        padding: 52px 44px;
    }
}

@media (max-width: 991px) {
    .page-header-section.rsp-hero {
        padding-top: 160px;
        background-position: 70% center;
    }

    .rsp-page .rsp-head,
    .rsp-page .rsp-intro,
    .rsp-page .rsp-split,
    .rsp-page .rsp-profile,
    .rsp-page .rsp-prose-wrap,
    .rsp-page .rsp-banner {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .rsp-page .rsp-split--reverse>.rsp-split__media {
        order: 0;
    }

    .rsp-page .rsp-intro__copy {
        padding-left: 0;
        border-left: 0;
    }

    .rsp-page .rsp-grid,
    .rsp-page .rsp-steps--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rsp-page .rsp-toc,
    .rsp-page .rsp-profile__card {
        position: static;
    }

    .rsp-page .rsp-toc {
        display: none;
    }

    .rsp-page .rsp-profile__photo {
        max-width: 420px;
    }
}

/* ═══════════ Mobile ═══════════ */
@media (max-width: 767px) {
    .rsp-hero .page-header-heading h1,
    .rsp-hero .page-header-heading h1.rs-page-h1 {
        font-size: 30px !important;
        line-height: 1.2 !important;
    }

    .rsp-hero .page-header-heading p {
        font-size: 15px;
    }
    .page-header-section.rsp-hero {
        background-position: 68% center;
    }

    .rsp-page .rsp-banner {
        padding: 36px 24px;
    }

    .rsp-page .rsp-grid,
    .rsp-page .rsp-grid--2,
    .rsp-page .rsp-steps,
    .rsp-page .rsp-steps--3,
    .rsp-page .rsp-steps--5,
    .rsp-page .rsp-lines,
    .rsp-page .rsp-checks--2 {
        grid-template-columns: minmax(0, 1fr);
    }

    .rsp-page .rsp-grid--4,
    .rsp-page .rsp-stats {
        gap: 12px;
    }

    .rsp-page .rsp-card {
        padding: 22px 20px;
    }

    .rsp-page .rsp-stat {
        padding: 20px;
    }

    .rsp-page .rsp-stat__num {
        font-size: 28px;
    }

    .rsp-page .rsp-quote {
        padding: 28px 24px;
    }

    .rsp-page .rsp-panel,
    .rsp-page .rsp-message {
        padding: 24px 20px;
    }
}

@media (max-width: 575px) {

    .rsp-page .rsp-grid--4,
    .rsp-page .rsp-stats {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   Leader message card (people pages): blue panel with the message on the left,
   portrait on the right, logo and name underneath.
   Markup: includes/leader-card.php
   ========================================================================== */
.rsp-page .rsq {
    --rsq-radius: 20px;
}

.rsp-page .rsq-panel {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 560px;
    border-radius: var(--rsq-radius);
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(120, 160, 255, .30) 0%, rgba(120, 160, 255, 0) 55%),
        linear-gradient(180deg, #0a2cae 0%, #092db6 58%, #3e66dc 100%);
    color: #fff;
}

.rsp-page .rsq-mark {
    position: absolute;
    z-index: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 340px;
    font-weight: 700;
    line-height: 1;
    color: rgba(255, 255, 255, .16);
    pointer-events: none;
    user-select: none;
}

.rsp-page .rsq-mark--open {
    top: 4px;
    left: 28px;
}

.rsp-page .rsq-mark--close {
    right: 46%;
    bottom: -150px;
}

.rsp-page .rsq-text {
    position: relative;
    z-index: 1;
    width: 62%;
    padding: 72px 24px 72px 80px;
}

.rsp-page .rsq-title {
    margin: 0 0 24px;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #fff;
    text-wrap: balance;
}

.rsp-page .rsq-text p {
    margin: 0 0 18px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, .92);
}

.rsp-page .rsq-text p:last-child {
    margin-bottom: 0;
}

.rsp-page .rsq-text p.rsq-lead {
    font-size: 18px;
    line-height: 1.6;
    font-weight: 400;
    color: #fff;
}

.rsp-page .rsq-photo {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 42%;
    margin: 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%);
    mask-image: linear-gradient(to right, transparent 0%, #000 34%);
}

.rsp-page .rsq-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 12%;
}

@media (min-width: 768px) {
    .rsp-page .rsq-title {
        font-size: clamp(26px, 2.2vw, 32px);
    }
}

/* logo left, role and name right, on white above the panel */
.rsp-page .rsq-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 40px;
    padding: 0 4px 32px;
}

.rsp-page .rsq-logo {
    display: block;
    width: 168px;
    height: auto;
}

.rsp-page .rsq-id {
    text-align: right;
}

.rsp-page .rsq-id__role {
    display: block;
    margin: 8px 0 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: -0.01em;
    color: var(--rsp-body);
}

.rsp-page .rsq-id__name {
    display: block;
    margin: 0;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--rsp-ink);
}

@media (min-width: 768px) {
    .rsp-page .rsq-id__name {
        font-size: clamp(22px, 2vw, 28px);
    }
}

@media (max-width: 1199px) {
    .rsp-page .rsq-text {
        width: 64%;
        padding: 56px 16px 56px 56px;
    }

    .rsp-page .rsq-mark {
        font-size: 280px;
    }
}

@media (max-width: 991px) {
    .rsp-page .rsq-panel {
        display: block;
        min-height: 0;
    }

    .rsp-page .rsq-text {
        width: auto;
        padding: 56px 32px 24px;
    }

    .rsp-page .rsq-mark {
        font-size: 220px;
    }

    .rsp-page .rsq-mark--open {
        left: 14px;
    }

    .rsp-page .rsq-mark--close {
        display: none;
    }

    .rsp-page .rsq-photo {
        position: relative;
        width: 100%;
        height: 380px;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%);
        mask-image: linear-gradient(to bottom, transparent 0%, #000 30%);
    }

    .rsp-page .rsq-photo img {
        object-position: 50% 10%;
    }
}

@media (max-width: 575px) {
    .rsp-page .rsq-text {
        padding: 48px 22px 12px;
    }

    .rsp-page .rsq-mark {
        font-size: 170px;
    }

    .rsp-page .rsq-photo {
        height: 320px;
    }

    .rsp-page .rsq-foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .rsp-page .rsq-id {
        text-align: left;
    }

    .rsp-page .rsq-logo {
        width: 140px;
    }
}

/* ==========================================================================
   Phones: the home page's mobile type (titles 28 / 1.15, copy 14.5 / 1.75)
   ========================================================================== */
@media (max-width: 767px) {
    .rsp-hero .page-header-heading h1,
    .rsp-hero .page-header-heading h1.rs-page-h1 {
        font-size: 28px !important;
        line-height: 1.15 !important;
    }

    .rsp-page .rsp-title,
    .rsp-page .rsq-title {
        font-size: 28px;
        line-height: 1.15;
    }

    .rsp-page .rsp-text,
    .rsp-page .rsp-copy p,
    .rsp-page .rsp-checks li,
    .rsp-page .rsq-text p,
    .rsp-page .rsq-id__role {
        font-size: 14.5px;
        line-height: 1.75;
    }

    .rsp-page .rsp-lead,
    .rsp-page .rsq-text p.rsq-lead {
        font-size: 16px;
        line-height: 1.6;
    }

    .rsp-page .rsq-id__name {
        font-size: 22px;
    }

    .rsp-page .rsq-foot {
        padding-bottom: 24px;
    }

    .rsp-page .rsq-logo {
        width: 120px;
    }
}

/* leader card quote marks, drawn here rather than written into the page */
.rsq-mark--open::before {
    content: "C";
}

.rsq-mark--close::before {
    content: "D";
}