/* ============================================
   SECTION: Life at ANNA — Hero
   Full-height pink hero with the photo as a right-anchored
   background. The section is pulled up behind the navbar and
   the navbar is made transparent on this page, so the header
   blends into the pink hero and the photo crosses the menu.
   ============================================ */

/* Blend the menu into the hero on this page only; it turns solid
   white once the hero scrolls out of view (body.nav-solid, set by JS) */
.page-la .navbar {
    background-color: transparent;
    box-shadow: none;
    border-bottom: none;
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.page-la.nav-solid .navbar {
    background-color: var(--color-white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.la-hero {
    position: relative;
    overflow: clip;
    margin-top: -76px;            /* pull the hero up behind the sticky navbar */
    padding-top: 76px;            /* keep the copy clear of the navbar */
    min-height: 800px;
    max-height: 800px;
    background: var(--color-primary-light)   /* #ffebf0 */
        url("../../../images/life-at-anna/life-at-anna__open-roles.7659c55acc2e.png") no-repeat right bottom / auto 100%;
}

.la-hero__inner {
    position: relative;
    z-index: 1;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--section-side-padding);
    min-height: calc(800px - 76px);
    display: flex;
    align-items: center;
}

/* ----- Copy (left) ----- */
.la-hero__content {
    max-width: 520px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 48px 0;
}

.la-hero__heading {
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    font-weight: var(--font-weight-normal);
    line-height: 58px;
    letter-spacing: -2px;
    color: var(--color-text-heading);
    margin: 0;
}

.la-hero__heading .accent-script {
    font-size: var(--text-5xl);
    line-height: 58px;
    letter-spacing: -0.03em;
    color: var(--color-primary);     /* pink accent */
}

.la-hero__lede {
    max-width: 520px;
    font-size: var(--text-md);
    font-weight: var(--font-weight-medium);
    line-height: 28px;
    color: var(--color-text-heading);
    margin: 0;
}

.la-hero__actions {
    display: flex;
    gap: 13px;
    flex-wrap: wrap;
}

/* ----- Responsive: photo drops below the copy ----- */
@media (max-width: 900px) {
    .la-hero {
        min-height: 0;
        background-position: center bottom;
        background-size: 100% auto;
        padding-bottom: 90vw;
    }
    .la-hero__inner {
        min-height: 0;
        display: block;
    }
    .la-hero__content {
        max-width: none;
        padding: 24px 0;
    }
}

@media (max-width: 768px) {
    .la-hero__heading,
    .la-hero__heading .accent-script {
        font-size: var(--text-3xl);
        line-height: 1.15;
    }
}

/* ----- Phones -----
   Centred copy over a smaller, centred photo. The 800px cap is a desktop
   device — stacked, the copy plus the photo band exceeds it and the bottom
   of the photo gets clipped, so it is lifted here.
   78% width → the image stands 72vw tall, which is what the band reserves. */
@media (max-width: 600px) {
    .la-hero {
        max-height: none;
        background-size: 78% auto;
        padding-bottom: 72vw;
    }

    .la-hero__content {
        align-items: center;
        text-align: center;
    }
}