/* ─────────────────────────────────────────────────────────────
   Page hero — shared by the inner pages
   ───────────────────────────────────────────────────────────── */

/* Sized so the fabric seam below lands at the bottom of the first screen
   rather than somewhere in the middle of it: the band's foot sits at
   100dvh − --seam-reveal, leaving just enough of the next plate showing
   to say there is more below. Derived from the seam's own variables so
   changing the band's height or overlap keeps this correct.
   The vh line is the fallback for browsers without dvh. */
.jm-page-hero {
    position: relative;
    min-height: calc(100vh  - var(--seam-height) + var(--seam-overlap) - var(--seam-reveal));
    min-height: calc(100dvh - var(--seam-height) + var(--seam-overlap) - var(--seam-reveal));
    display: flex;
    align-items: flex-end;
    background: var(--primary-dark);
    overflow: hidden;
}

/* Half height, for the pages whose job is the thing below the photograph.
   A form the visitor arrived to fill in should be near the fold, not a
   screen and a half down — the picture is an establishing shot there, not
   the content. Still tall enough to carry the title and the seam. */
.jm-page-hero--short {
    min-height: clamp(340px, 48vh, 470px);
}

.jm-page-hero--short .jm-page-hero__inner {
    padding-top: clamp(96px, 12vw, 130px);
}

/* ─── Roomy ────────────────────────────────────────────────────
   For a hero whose photograph is the SUBJECT rather than a
   backdrop — the office on the contact page.

   `cover` fills the box, so how much of a picture you see is set
   entirely by the mismatch between its shape and the box's. A 3:2
   photograph in a full-height phone window (about 0.48:1) keeps
   its height and loses two thirds of its WIDTH. The only lever is
   the box: a shorter hero is a wider-shaped hero, and shows more
   of the scene. Measured at 390px — 100dvh shows 33% of the
   picture's width, 72dvh shows 44%.

   Desktop is left alone: the box there is already wider than the
   photograph, 84% of its height is on screen, and making the hero
   shorter would start cutting that down instead.              */
@media (max-width: 760px) {
    .jm-page-hero--roomy {
        min-height: 72vh;
        min-height: 72dvh;
    }

    .jm-page-hero--roomy .jm-page-hero__inner {
        padding-top: clamp(90px, 14vw, 130px);
    }
}

.jm-page-hero__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.jm-page-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Above centre: a wide hero crop out of a landscape photograph takes a
       band from the middle and throws away the sky, which is usually the
       half that makes the picture. */
    object-position: center 34%;
    animation: jm-page-hero-kenburns 30s var(--ease) forwards;
}

@keyframes jm-page-hero-kenburns {
    from { transform: scale(1.10); }
    to   { transform: scale(1.0); }
}

/* Two passes: the horizontal one shades only the side the type sits on, the
   vertical one keeps the top clean behind the glass header and weights the
   foot. A single scrim heavy enough to carry the type closes the whole
   photograph down. */
.jm-page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right,
            rgba(14, 24, 29, 0.60) 0%,
            rgba(14, 24, 29, 0.32) 34%,
            rgba(14, 24, 29, 0) 62%),
        linear-gradient(to bottom,
            rgba(18, 28, 33, 0.26) 0%,
            rgba(18, 28, 33, 0.08) 32%,
            rgba(18, 28, 33, 0.44) 74%,
            rgba(18, 28, 33, 0.80) 100%);
}

@media (max-width: 760px) {
    .jm-page-hero::after {
        background:
            linear-gradient(to bottom,
                rgba(18, 28, 33, 0.32) 0%,
                rgba(18, 28, 33, 0.14) 28%,
                rgba(18, 28, 33, 0.58) 68%,
                rgba(18, 28, 33, 0.86) 100%);
    }
}

.jm-page-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-top: clamp(96px, 14vw, 160px);
    /* Enough clearance that the seam panel, which is pulled up over the
       bottom of this photograph, never crowds the standfirst. */
    padding-bottom: clamp(58px, 6.5vw, 82px);
}

.jm-page-hero__title {
    margin: 0;
    color: #fff;
    font-size: var(--fs-display);
    font-weight: 300;
    line-height: 1.04;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    max-width: 18ch;
}

.jm-page-hero__lede {
    margin: clamp(16px, 2vw, 24px) 0 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: clamp(0.9375rem, 0.88rem + 0.3vw, 1.125rem);
    font-weight: 300;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    max-width: 44ch;
}

.jm-page-hero__title,
.jm-page-hero__lede {
    animation: jm-page-hero-rise 0.9s var(--ease) both;
}

.jm-page-hero__title { animation-delay: 0.10s; }
.jm-page-hero__lede  { animation-delay: 0.26s; }

@keyframes jm-page-hero-rise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}