/* Section 3 — Who We Are (markup: components/who-we-are/who-we-are.php) */

.who {
    display: grid;
    grid-template-columns: 45% 1fr;
    gap: 64px;
    align-items: center;
}

/* "Who We Are?" eyebrow — gold, Montserrat SemiBold 24 (larger than the global
   .eyebrow label), per Figma. Font/colour/weight inherit from base .eyebrow. */
.who .eyebrow {
    font-size: 24px;
    letter-spacing: normal;
    margin-bottom: 18px;
}

/* Heading — DM Serif Display Regular 40, navy-mid, per Figma. */
.who__title {
    font-family: var(--font-display);
    font-size: 40px;
    line-height: var(--lh-h2);
    font-weight: var(--weight-regular);
    color: var(--color-navy-mid);
    margin: 0 0 24px;
}

/* Body — Montserrat Regular 18, navy-mid, per Figma. */
.who__body p {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--weight-regular);
    line-height: var(--lh-body);
    color: var(--color-navy-mid);
    margin: 0 0 24px;
}
.who__body p:last-child {
    margin-bottom: 0;
}

/* Contain the right-edge bleed so the small vw/scrollbar overshoot can't create
   a horizontal scrollbar; this also lands the image flush to the right content
   edge. overflow-x: clip leaves vertical overflow untouched. */
.section:has(.who) {
    overflow-x: clip;
}

/* Full-bleed right: the media cell extends past the centered container to the
   viewport's right edge. The offset = distance from the container's content edge
   to the screen edge; max() keeps it correct once the viewport is narrower than
   --content-max (where that distance is just the side padding). */
.who__media {
    margin-right: calc(-1 * max(var(--side-padding), 50vw - (var(--content-max) / 2 - var(--side-padding))));
}
.who__media img {
    width: 100%;
    height: auto;
    /* Left corners rounded; right corners flush to the screen edge. */
    border-radius: var(--radius-card) 0 0 var(--radius-card);
    object-fit: cover;
}

/* Service pages (Intro & Guide): top-align the text with the image's top edge,
   and give the button room to breathe below the copy. */
.page-template-template-service .who {
    align-items: start;
}
.page-template-template-service .who__text .btn {
    margin-top: 40px;
}
/* Keep the image inside the container instead of bleeding to the screen edge. */
.page-template-template-service .who__media {
    margin-right: 0;
}
.page-template-template-service .who__media img {
    border-radius: var(--radius-card);
}

/* Residential Lending page: the collage is a self-contained, rounded image that
   sits centered in its column rather than bleeding to the screen's right edge. */
.page-template-template-residential-lending .who__media {
    margin-right: 0;
}
.page-template-template-residential-lending .who__media img {
    max-width: 560px;
    margin-inline: auto;
    border-radius: var(--radius-card);
}

@media (max-width: 1024px) {
    .who { grid-template-columns: 1fr; gap: 32px; }
    .who .eyebrow { font-size: 20px; }
    .who__title { font-size: 32px; }
    /* Stacked layout: image returns inside the container with all corners rounded. */
    .who__media { margin-right: 0; }
    .who__media img { border-radius: var(--radius-card); }
}