/* Hero — full-screen dark opening. */

.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

.hero__bg {
    position: absolute;
    inset: 0;
    background-color: #111111;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: transform;
}

/* Desktop: fit the full width of the photo (less zoom on the subject);
   the dark stage color fills any slack, never a repeat. */
@media (min-width: 1000px) {
    .hero__bg {
        background-size: 100% auto;
    }
}

.hero__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(17,17,17,0.55), rgba(17,17,17,0.25) 45%, rgba(17,17,17,0.65));
}

.hero__content { position: relative; z-index: 2; }

.hero__headline {
    font-size: calc(var(--fs-hero) * 0.6);
    font-weight: 300;
    letter-spacing: 0.5em;
    text-indent: 0.5em; /* optically center the tracked text */
    color: var(--text-inverse);
}

.hero__word {
    margin: 1.25rem 0 0;
    font-family: var(--font-display);
    font-size: clamp(0.75rem, 1.2vw, 0.9375rem);
    font-weight: 300;
    letter-spacing: 0.85em;
    text-indent: 0.85em; /* optically center the tracked text */
    text-transform: uppercase;
    color: rgba(250, 250, 250, 0.75);
}

.hero__scroll {
    position: absolute;
    bottom: 2.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    color: var(--text-inverse-secondary);
}

.hero__scroll-line {
    width: 1px;
    height: 3rem;
    background: linear-gradient(to bottom, transparent, var(--gold));
    animation: rh-scroll-pulse 2.2s ease-in-out infinite;
}

.hero__scroll-text {
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}

@keyframes rh-scroll-pulse {
    0%, 100% { transform: scaleY(0.6); opacity: 0.5; }
    50%      { transform: scaleY(1);   opacity: 1; }
}

/* Mobile: name larger, seated in the lower quarter of the frame */
@media (max-width: 700px) {
    .hero {
        align-items: flex-end;
        justify-content: center;
    }

    .hero__content {
        padding-bottom: 21svh;
    }

    .hero__headline {
        font-size: 1.75rem;
        letter-spacing: 0.4em;
        text-indent: 0.4em;
    }

    .hero__word {
        font-size: 0.875rem;
        margin-top: 1rem;
    }
}