/* ── Hero ────────────────────────────────────────────────────
   Figma: desktop 1397:12062, mobile 1397:11807.
   ─────────────────────────────────────────────────────────── */

.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 730px;
    padding: 0 var(--pad-x);
    background: var(--color-beamwood);
    color: var(--color-on-dark);
    overflow: hidden;
}

.hero__media,
.hero__media::after {
    position: absolute;
    inset: 0;
}

/* Darkens the left, where the words are. */
.hero__media::after {
    content: "";
    background: linear-gradient(117.69deg, rgba(0, 0, 0, 0.7) 21.99%, rgba(0, 0, 0, 0) 66.45%);
}

.hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__image--mobile {
    display: none;
}

.hero__inner {
    position: relative;
    width: 100%;
    max-width: var(--site-max-w);
    margin: 0 auto;
}

.hero__content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 792px;
}

.hero__tagline {
    font-family: var(--font-heading);
    font-size: 22px;
    font-style: italic;
    line-height: 1.2;
    color: #FFFFFF;
}

.hero__words {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.hero__title {
    font-size: 132px;
    font-weight: 300;
    line-height: 0.95;
    letter-spacing: -3.3px;
}

.hero__title em {
    font-style: normal;
    color: var(--color-candle-wax);
}

.hero__text {
    max-width: 566px;
    font-size: 16px;
    line-height: 1.65;
    letter-spacing: 0.08px;
}


/* Tablet and mobile — 1024px and below (Figma mobile frame) */
@media (max-width: 1024px) {
    .hero {
        min-height: 558px;
    }

    .hero__media::after {
        background: linear-gradient(89.72deg, rgba(0, 0, 0, 0.7) 15.1%, rgba(0, 0, 0, 0) 107.1%);
    }

    .hero__content {
        gap: 20px;
        max-width: 360px;
    }

    .hero__tagline {
        font-size: 18px;
        line-height: 1.3;
    }

    /* The heading's lines are set by the field; they run a touch wide, as in Figma. */
    .hero__title {
        font-size: 48px;
        line-height: 1;
        letter-spacing: -0.72px;
        white-space: nowrap;
    }

    .hero__text {
        line-height: 1.55;
        letter-spacing: 0.04px;
    }
}

@media (max-width: 767px) {
    .hero__image--mobile {
        display: block;
    }

    .hero__image--desktop {
        display: none;
    }
}


/* ── Page style (Stay and the other inside pages) ────────────
   Figma: desktop 1366:66491, mobile 1366:66242.
   ─────────────────────────────────────────────────────────── */
.hero--page {
    min-height: 551px;
    padding: var(--pad-y) var(--pad-x);
}

/* Burgundy over the words, fading out by three quarters across. Figma's
   CSS export drops the minus on the first stop (-14.53%), which draws a
   hard line; these are the stops read from the Figma fill itself. */
.hero--page .hero__media::after {
    background: linear-gradient(90.32deg, rgba(81, 7, 17, 0.82) -14.53%, rgba(20, 13, 12, 0.82) 11.17%, rgba(81, 7, 17, 0) 76.54%);
}

.hero--page .hero__content,
.hero--page .hero__words {
    gap: 28px;
}

.hero--page .hero__content {
    max-width: 760px;
}

.hero--page .hero__title {
    font-size: 100px;
    letter-spacing: -2.5px;
}

.hero--page .hero__text {
    max-width: none;
}

@media (max-width: 1024px) {
    .hero--page {
        min-height: 393px;
    }

    .hero--page .hero__content {
        gap: 12px;
    }

    .hero--page .hero__words {
        gap: 16px;
    }

    .hero--page .hero__title {
        font-size: 48px;
        letter-spacing: -0.72px;
    }
}