/* ─────────────────────────────────────────────────────────────
   Mission — full-bleed photograph, postcard laid over it
   ───────────────────────────────────────────────────────────── */

.jm-home-mission {
    position: relative;
    background: var(--bg-white);
    /* No top padding: the seam panel above carries the transition from the
       hero, and it has to lie across both photographs to do that. */
    padding-bottom: clamp(30px, 3.6vw, 58px);
}

/* Edge to edge, square, unframed. The picture is the subject; putting it
   in a mount would make the mount the subject. */
.jm-home-mission__media {
    position: relative;
    /* The floor is set for phones: at 48vw a 390px screen gives 187px, and
       once the card overlaps it there is barely any photograph left. */
    height: clamp(370px, 48vw, 620px);
    overflow: hidden;
    background: var(--primary-dark);
}

.jm-home-mission__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%;
    border-radius: 0;
}

/* The card is pulled up over the photograph's lower edge and left hanging
   past it onto the page — the overlap is what makes the two read as one
   composition rather than a picture with a caption under it. */
.jm-home-mission__overlay {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    margin-top: clamp(-190px, -17vw, -110px);
    /* The panel gutter rather than the container's wider default, so the
       card lines up with the panels further down the page — on a phone the
       two were inset by different amounts. */
    padding-inline: clamp(12px, 2.4vw, 28px);
}

.jm-home-mission__card {
    width: 100%;
    max-width: 560px;
    flex: 0 1 560px;
}


.jm-home-mission__title {
    margin: 0;
    font-size: var(--fs-h2);
    font-weight: 300;
    line-height: 1.24;
    letter-spacing: 0.01em;
    color: var(--text-primary);
}

.jm-home-mission__rule {
    margin: clamp(18px, 2.2vw, 26px) auto clamp(20px, 2.4vw, 28px);
}

.jm-home-mission__text {
    margin: 0 auto;
    max-width: 44ch;
    color: var(--text-secondary);
    font-size: var(--fs-body);
    line-height: 1.85;
}

.jm-home-mission__cta {
    margin-top: clamp(24px, 3vw, 34px);
}

/* On a phone the card cannot hang off to one side, so it centres and the
   overlap shortens — a deep overlap on a 300px-tall photo would bury it. */
@media (max-width: 860px) {
    .jm-home-mission__overlay {
        justify-content: center;
        margin-top: clamp(-120px, -16vw, -72px);
    }

    .jm-home-mission__card {
        max-width: none;
        flex: 1 1 auto;
    }

}