/* ─────────────────────────────────────────────────────────────
   Home hero
   The same language as a project hero — full bleed from y=0, type
   set low-left, slow drift — but taller, because this one is the
   front door and has to hold the page on its own.
   ───────────────────────────────────────────────────────────── */

.jm-home-hero {
    position: relative;
    /* dvh so the hero still fills the screen once a phone's URL bar
       collapses; the vh fallback is for browsers without dvh. */
    min-height: 88vh;
    min-height: 88dvh;
    max-height: 1000px;
    display: flex;
    align-items: flex-end;
    background: var(--primary-dark);
    overflow: hidden;
}

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

.jm-home-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* A very slow drift — long and small enough to register as depth
       rather than as movement. */
    animation: jm-home-kenburns 30s var(--ease) forwards;
}

@keyframes jm-home-kenburns {
    from { transform: scale(1.12); }
    to   { transform: scale(1.0); }
}

/* Two gradients rather than one. The vertical pass keeps the top clean
   behind the translucent header and darkens towards the foot; the
   horizontal pass shades only the left third, where the type block sits,
   so white type stays legible over a bright picture without dimming the
   photograph as a whole. A single flat scrim heavy enough to carry the
   type would have closed the whole image down. */
.jm-home-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right,
            rgba(14, 24, 29, 0.62) 0%,
            rgba(14, 24, 29, 0.34) 34%,
            rgba(14, 24, 29, 0) 62%),
        linear-gradient(to bottom,
            rgba(18, 28, 33, 0.26) 0%,
            rgba(18, 28, 33, 0.08) 30%,
            rgba(18, 28, 33, 0.42) 74%,
            rgba(18, 28, 33, 0.78) 100%);
}

/* On a phone the type spans the full width, so the side shading has
   nothing to shade — carry the weight vertically instead. */
@media (max-width: 760px) {
    .jm-home-hero::after {
        background:
            linear-gradient(to bottom,
                rgba(18, 28, 33, 0.30) 0%,
                rgba(18, 28, 33, 0.12) 26%,
                rgba(18, 28, 33, 0.58) 66%,
                rgba(18, 28, 33, 0.86) 100%);
    }
}

.jm-home-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-top: clamp(96px, 16vw, 180px);
    padding-bottom: clamp(52px, 8vw, 104px);
}

/* ─── Type ─────────────────────────────────────────────────── */

/* Larger and lighter than the shared display size. The front door carries
   one line of type and nothing else competing with it, so it can be set at
   a scale that would be shouting anywhere else on the site. */
.jm-home-hero__title {
    margin: 0;
    color: #fff;
    font-size: clamp(2.5rem, 1.55rem + 4.3vw, 5.25rem);
    font-weight: 300;
    line-height: 0.98;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    max-width: 14ch;
}

/* Widely tracked and small against the title — v1 set this line in a spaced
   typewriter face and the spacing is the part that gave it its character. */
.jm-home-hero__lede {
    margin: clamp(18px, 2.2vw, 28px) 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.24em;
    text-transform: uppercase;
    max-width: 40ch;
}

.jm-home-hero__cta {
    margin-top: clamp(26px, 3.5vw, 40px);
}

/* Entrance: each line arrives after the one above it. */
.jm-home-hero__title,
.jm-home-hero__lede,
.jm-home-hero__cta {
    animation: jm-home-rise 0.9s var(--ease) both;
}

.jm-home-hero__title { animation-delay: 0.12s; }
.jm-home-hero__lede  { animation-delay: 0.28s; }
.jm-home-hero__cta   { animation-delay: 0.44s; }

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

/* ─── Scroll cue ───────────────────────────────────────────── */

.jm-home-hero__scroll {
    position: absolute;
    right: clamp(20px, 4vw, 48px);
    bottom: clamp(28px, 5vw, 56px);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    color: rgba(255, 255, 255, 0.82);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    writing-mode: vertical-rl;
    animation: jm-home-rise 0.9s var(--ease) 0.7s both;
}

.jm-home-hero__scroll svg {
    animation: jm-home-scroll-hint 2.6s var(--ease) infinite;
}

@keyframes jm-home-scroll-hint {
    0%, 100% { opacity: 0.55; transform: translateY(0); }
    50%      { opacity: 1;    transform: translateY(5px); }
}

.jm-home-hero__scroll:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

/* The cue competes with the CTA for the same corner on a phone, and a
   thumb is already a scroll gesture — drop it. */
@media (max-width: 700px) {
    .jm-home-hero__scroll { display: none; }
}

/* A wide crop leaves the type stranded in a letterbox on a phone, so the
   hero takes the whole screen. dvh rather than vh so it still fills once
   the URL bar collapses instead of overshooting by the bar's height. */
@media (max-width: 760px) {
    .jm-home-hero {
        min-height: 100vh;
        min-height: 100dvh;
        max-height: none;
    }

    /* A landscape photograph cover-cropped into a portrait window fits
       the height exactly and overflows only horizontally — so the crop
       is chosen on the X axis, and object-position's Y does nothing at
       all here.

       Dead centre lands on the wedge of empty sky between the two towers.
       Moving the slice right puts the near tower through the frame with
       the sky falling away beside it, which is the shot. Zooming in would
       have worked too, but a 1920px-wide source cropped to a phone is
       already being magnified about three times — any further scale and
       it turns to mush. */
    .jm-home-hero__img { object-position: 60% center; }
}

@media (max-width: 600px) {
    .jm-home-hero__title { max-width: 11ch; }
}