/*
 * Residents — first desktop screen, matched to the supplied Figma measurements.
 * Base Figma frame: 1920px wide.
 * Main hero artwork: 1920 × 1080.
 * Bottom investment strip: 90px.
 * Content frame: 1840px with 40px side insets.
 *
 * Only the first screen is overridden here. Mobile stays on the existing
 * project styles. Values below 1920px follow the same Figma proportions;
 * at 1920px and wider the supplied component dimensions are exact.
 */
@media (min-width: 761px) {
    .residents-hero {
        --rh-pad: min(40px, 2.083333vw);
        --rh-main-h: min(1080px, 56.25vw);
        --rh-bottom-h: min(90px, 4.6875vw);

        --rh-header-top: min(24px, 1.25vw);
        --rh-header-h: min(42px, 2.1875vw);
        --rh-breadcrumb-top: min(122px, 6.354167vw);
        --rh-breadcrumb-h: min(24px, 1.25vw);
        --rh-title-top: min(210px, 10.9375vw);
        --rh-title-h: min(160px, 8.333333vw);
        --rh-title-size: min(100px, 5.208333vw);
        --rh-title-line: min(80px, 4.166667vw);
        --rh-subtitle-top: min(370px, 19.270833vw);
        --rh-subtitle-w: min(651px, 33.90625vw);
        --rh-subtitle-h: min(72px, 3.75vw);
        --rh-subtitle-size: min(20px, 1.041667vw);
        --rh-subtitle-line: min(24px, 1.25vw);
        --rh-buttons-top: min(538px, 28.020833vw);

        position: relative !important;
        width: 100% !important;
        height: calc(var(--rh-main-h) + var(--rh-bottom-h)) !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* Figma artwork ends exactly where the 90px black investment strip starts. */
    .residents-hero__media {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        width: 100% !important;
        height: var(--rh-main-h) !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        overflow: hidden !important;
    }

    .residents-hero__media img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        min-height: 100% !important;
        margin: 0 !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    /* Defeat legacy global image caps (the old site CSS limited this image to 900px).
       Figma main artwork is 1080px high at the 1920px desktop base. */
    body.residents-page-body .residents-page > .residents-hero > .residents-hero__media {
        height: var(--rh-main-h) !important;
        max-height: none !important;
        min-height: var(--rh-main-h) !important;
    }

    body.residents-page-body .residents-page > .residents-hero > .residents-hero__media > img {
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        max-height: none !important;
    }

    /* Header frame from Figma: y=24, h=42, x=40..1880.
       Do not redefine the proven shared header component internals here. */
    .residents-hero__header {
        position: absolute !important;
        top: var(--rh-header-top) !important;
        right: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        z-index: 30 !important;
        width: 100% !important;
        height: var(--rh-header-h) !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    .residents-hero__header .site-header__frame {
        width: calc(100% - (2 * var(--rh-pad))) !important;
        max-width: 1840px !important;
        height: var(--rh-header-h) !important;
        min-height: var(--rh-header-h) !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .residents-hero__header .site-header__navigation {
        height: var(--rh-header-h) !important;
        min-height: var(--rh-header-h) !important;
        margin-right: auto !important;
        margin-left: auto !important;
        transform: none !important;
    }

    /* Main Figma coordinate surface: 1920 wide, 1080 high. */
    .residents-hero__inner {
        position: absolute !important;
        top: 0 !important;
        left: 50% !important;
        z-index: 10 !important;
        display: block !important;
        width: min(100%, 1920px) !important;
        max-width: 1920px !important;
        height: var(--rh-main-h) !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        transform: translateX(-50%) !important;
        pointer-events: none !important;
    }

    .residents-hero__breadcrumbs,
    .residents-hero__title,
    .residents-hero__subtitle,
    .residents-hero__buttons {
        pointer-events: auto !important;
    }

    /* Header bottom: 66. Breadcrumb top: +56 => 122. */
    .residents-hero__breadcrumbs {
        position: absolute !important;
        top: var(--rh-breadcrumb-top) !important;
        left: var(--rh-pad) !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: max-content !important;
        height: var(--rh-breadcrumb-h) !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        font-family: "Manrope", sans-serif !important;
        font-size: min(14px, .729167vw) !important;
        font-weight: 500 !important;
        line-height: var(--rh-breadcrumb-h) !important;
        white-space: nowrap !important;
    }

    .residents-hero__breadcrumbs .site-breadcrumb-arrow {
        display: block !important;
        width: 12px !important;
        height: 12px !important;
        min-width: 12px !important;
        flex: 0 0 12px !important;
        margin: 0 !important;
    }

    /* Breadcrumb bottom: 146. +64 => title y=210. */
    .residents-hero__title {
        position: absolute !important;
        top: var(--rh-title-top) !important;
        right: var(--rh-pad) !important;
        left: var(--rh-pad) !important;
        width: auto !important;
        max-width: none !important;
        height: var(--rh-title-h) !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        font-family: "RoadRadio", sans-serif !important;
        font-size: var(--rh-title-size) !important;
        font-weight: 700 !important;
        line-height: var(--rh-title-line) !important;
        letter-spacing: .002em !important;
        text-transform: uppercase !important;
        white-space: pre-line !important;
    }

    /* Subtitle is the next Figma layer immediately after the 160px title. */
    .residents-hero__subtitle {
        position: absolute !important;
        top: var(--rh-subtitle-top) !important;
        left: var(--rh-pad) !important;
        width: var(--rh-subtitle-w) !important;
        max-width: var(--rh-subtitle-w) !important;
        height: var(--rh-subtitle-h) !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        font-family: "Manrope", sans-serif !important;
        font-size: var(--rh-subtitle-size) !important;
        font-weight: 500 !important;
        line-height: var(--rh-subtitle-line) !important;
    }

    /* Subtitle bottom: 442. +96 => buttons y=538. */
    .residents-hero__buttons {
        position: absolute !important;
        top: var(--rh-buttons-top) !important;
        left: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 20px !important;
        width: max-content !important;
        max-width: calc(100% - (2 * var(--rh-pad))) !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translateX(-50%) !important;
    }

    /* The buttons in the supplied Figma are Hug components.
       Keep the exact approved internal geometry; do not add a second width. */
    .residents-hero__button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        width: max-content !important;
        min-width: 0 !important;
        height: 90px !important;
        min-height: 90px !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 36px 80px !important;
        box-sizing: border-box !important;
        font-family: "RoadRadio", sans-serif !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 18px !important;
        letter-spacing: .01em !important;
        white-space: nowrap !important;
    }

    .residents-hero__button img {
        display: block !important;
        width: 13.5px !important;
        height: 12.5px !important;
        min-width: 13.5px !important;
        flex: 0 0 13.5px !important;
        margin: 0 !important;
        object-fit: contain !important;
    }

    /* Figma: hero image ends at y=1080; black CTA strip is y=1080..1170. */
    .residents-hero__bottom {
        position: absolute !important;
        top: var(--rh-main-h) !important;
        right: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        z-index: 20 !important;
        width: 100% !important;
        height: var(--rh-bottom-h) !important;
        min-height: var(--rh-bottom-h) !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        background: #1f1f1f !important;
    }

    .residents-hero__bottom-inner {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 1920px !important;
        height: 100% !important;
        margin: 0 auto !important;
        padding: 0 var(--rh-pad) !important;
        box-sizing: border-box !important;
    }

    .residents-hero__bottom-inner p,
    .residents-hero__bottom-inner a {
        margin: 0 !important;
    }

    /* Figma — bottom investment CTA strip, exact 1920 desktop geometry.
       Confirmed measurements from the supplied screenshots:
       1920×90, 40px side insets, 1056px left copy, 320px right copy,
       10px copy-to-arrow gap, 13.5px arrow, 18/18 RoadRadio. */
    .residents-hero__bottom {
        height: 90px !important;
        min-height: 90px !important;
        max-height: 90px !important;
        background: #1f1f1f !important;
    }

    .residents-hero__bottom-inner {
        width: 100% !important;
        max-width: 1920px !important;
        height: 90px !important;
        min-height: 90px !important;
        margin: 0 auto !important;
        padding: 0 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0 !important;
        box-sizing: border-box !important;
    }

    .residents-hero__bottom-inner > p {
        flex: 0 0 1056px !important;
        width: 1056px !important;
        max-width: 1056px !important;
        height: 18px !important;
        margin: 0 !important;
        padding: 0 !important;
        font-family: "RoadRadio", sans-serif !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        line-height: 18px !important;
        letter-spacing: .02em !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    .residents-hero__bottom-inner > a {
        flex: 0 0 343.5px !important;
        width: 343.5px !important;
        max-width: 343.5px !important;
        height: 18px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        font-family: "RoadRadio", sans-serif !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        line-height: 18px !important;
        letter-spacing: .02em !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    .residents-hero__bottom-inner > a > span {
        flex: 0 0 320px !important;
        width: 320px !important;
        max-width: 320px !important;
        height: 18px !important;
        line-height: 18px !important;
        white-space: nowrap !important;
    }

    .residents-hero__bottom-inner > a > img {
        display: block !important;
        flex: 0 0 13.5px !important;
        width: 13.5px !important;
        min-width: 13.5px !important;
        height: 13.5px !important;
        margin: 0 !important;
        object-fit: contain !important;
    }

}