/* ============================================
   SECTION: Life at ANNA — Hero
   Full-height pink hero with a two-column grid so the
   photo stays centered in its column on wide screens
   (background-image heroes hug the right viewport edge).
   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.
   ============================================ */

/* 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: hidden;
    margin-top: -76px;            /* pull the hero up behind the sticky navbar */
    padding: 76px var(--section-side-padding) 0;
    background: var(--color-primary-light);   /* #ffebf0 */
    min-height: 800px;
}

.la-hero__inner {
    position: relative;
    z-index: 1;
    max-width: var(--container-max);
    margin-inline: auto;
    min-height: calc(800px - 76px);
    display: grid;
    grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
    align-items: center;
    gap: 48px;
}

/* ----- Copy (left) ----- */
.la-hero__content {
    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;
}

/* ----- Photo (right) — centered in the media column ----- */
.la-hero__media {
    justify-self: center;
}

.la-hero__photo {
    width: 100%;
    max-width: 650px;
    height: auto;
    display: block;
}

/* ----- Responsive: photo drops below the copy ----- */
@media (max-width: 1100px) {
    .la-hero {
        min-height: 0;
        padding: 76px var(--section-side-padding) 56px;
    }

    .la-hero__inner {
        min-height: 0;
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .la-hero__content {
        padding: 24px 0 0;
    }

    .la-hero__media {
        justify-self: center;
    }

    .la-hero__photo {
        max-width: 100%;
    }
}

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

/* ----- Phones -----
   Centred copy. The photo keeps its full-width size and position. */
@media (max-width: 600px) {
    .la-hero__content {
        align-items: center;
        text-align: center;
    }

    .la-hero__photo {
        max-width: 78%;
        margin-inline: auto;
    }
}