@layer pages {
    /* dark hero: rotating background, copy + stats, overlapping search box */
    .nur-hero {
        --nur-hero-overlap: 3rem;
        position: relative;
        display: flow-root;
        padding-block: var(--nur-space-6) 0;
        background: var(--nur-navy-900);
        color: #fff;
    }

    .nur-hero__bg {
        position: absolute;
        inset: 0;
        overflow: hidden;
    }

    .nur-hero__layer {
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity 0.9s var(--nur-ease);
    }

    .nur-hero__layer.is-active {
        opacity: 1;
    }

    .nur-hero__media {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .nur-hero__bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(6, 16, 38, 0.78) 0%, rgba(6, 16, 38, 0.62) 55%, rgba(6, 16, 38, 0.9) 100%);
    }

    .nur-hero__inner {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--nur-space-5);
        padding-bottom: var(--nur-space-6);
    }

    .nur-hero__main {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--nur-space-4);
        justify-items: start;
    }

    .nur-hero__pill {
        display: inline-flex;
        align-items: center;
        gap: var(--nur-space-2);
        padding: 6px 14px;
        border: 1px solid rgba(227, 194, 122, 0.45);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        color: var(--nur-gold-300);
        font-size: var(--nur-text-xs);
        font-weight: 700;
    }

    .nur-hero__pill::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--nur-gold-500);
    }

    /* copy blocks share one grid cell and cross-fade with the background */
    .nur-hero__copy {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .nur-hero__text {
        grid-area: 1 / 1;
        display: grid;
        gap: var(--nur-space-3);
        align-content: start;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.7s var(--nur-ease), visibility 0.7s;
    }

    .nur-hero__text.is-active {
        opacity: 1;
        visibility: visible;
    }

    .nur-hero h1,
    .nur-hero__title {
        max-width: 20ch;
        color: #fff;
        font-family: var(--nur-font-display);
        font-weight: 800;
        font-size: clamp(1.9rem, 1.3rem + 3vw, 3.5rem);
        line-height: 1.1;
    }

    .nur-hero h1::after,
    .nur-hero__title::after {
        content: "";
        display: block;
        width: 44px;
        height: 3px;
        margin-top: var(--nur-space-3);
        border-radius: 2px;
        background: var(--nur-gold-500);
    }

    .nur-hero__lead {
        max-width: 50ch;
        color: rgba(255, 255, 255, 0.88);
        font-size: var(--nur-text-md);
    }

    .nur-hero__actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--nur-space-2);
        width: 100%;
    }

    .nur-hero__actions .nur-btn {
        min-height: 48px;
        white-space: normal;
        text-align: center;
    }

    .nur-hero__trust {
        display: flex;
        flex-wrap: wrap;
        gap: var(--nur-space-2) var(--nur-space-4);
        font-size: var(--nur-text-sm);
        font-weight: 600;
    }

    .nur-hero__trust li {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .nur-hero__trust svg {
        width: 20px;
        height: 20px;
        color: var(--nur-gold-300);
    }

    .nur-hero__dots {
        display: flex;
        margin-left: -3px;
    }

    .nur-hero__dot {
        position: relative;
        width: 32px;
        height: 24px;
        border: 0;
        background: none;
        padding: 0;
    }

    .nur-hero__dot::before {
        content: "";
        position: absolute;
        inset: 10px 3px;
        border-radius: 2px;
        background: rgba(255, 255, 255, 0.4);
        transition: background 0.2s;
    }

    .nur-hero__dot.is-active::before {
        background: var(--nur-gold-500);
    }

    .nur-hero__stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--nur-space-2);
    }

    .nur-hero__stats li {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
        align-content: center;
        padding: var(--nur-space-3);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: var(--nur-radius);
        background: rgba(255, 255, 255, 0.08);
    }

    .nur-hero__stats strong {
        font-size: var(--nur-text-xl);
        font-weight: 800;
        line-height: 1;
    }

    .nur-hero__stats span {
        color: rgba(255, 255, 255, 0.78);
        font-size: 0.6875rem;
        line-height: 1.3;
    }

    /* search card straddles the hero's bottom edge */
    .nur-hero__searchwrap {
        position: relative;
        z-index: 2;
        /* the card hangs over the hero's bottom edge; the hero itself adds no height for it */
        margin-bottom: calc(var(--nur-hero-overlap) * -1);
    }

    .nur-search {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--nur-space-3);
        padding: var(--nur-space-4);
        border-radius: var(--nur-radius-lg);
        background: var(--nur-surface);
        color: var(--nur-ink);
        box-shadow: 0 18px 44px rgba(10, 31, 71, 0.22);
    }

    .nur-search__title {
        display: flex;
        align-items: center;
        gap: var(--nur-space-2);
        color: var(--nur-primary-strong);
        font-size: var(--nur-text-sm);
        font-weight: 700;
    }

    .nur-search__title svg {
        width: 20px;
        height: 20px;
        color: var(--nur-gold-600);
    }

    .nur-search__fields {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--nur-space-2);
    }

    .nur-search__field {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .nur-search__field span {
        color: var(--nur-ink-soft);
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .nur-search__popular {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--nur-space-2);
        color: var(--nur-ink-soft);
        font-size: var(--nur-text-xs);
        font-weight: 600;
    }

    .nur-search__popular .nur-chip--static {
        cursor: pointer;
    }

    .nur-search__submit {
        min-height: 52px;
    }

    @media (min-width: 768px) {
        .nur-hero {
            padding-block: var(--nur-space-8) 0;
        }

        .nur-hero__actions {
            display: flex;
            flex-wrap: wrap;
            width: auto;
        }

        .nur-hero__actions .nur-btn {
            white-space: nowrap;
        }
    }

    @media (min-width: 1024px) {
        .nur-hero__inner {
            grid-template-columns: minmax(0, 1fr) 260px;
            align-items: start;
            gap: var(--nur-space-7);
        }

        .nur-hero__stats {
            grid-template-columns: 1fr;
            gap: var(--nur-space-3);
        }

        .nur-hero__stats li {
            padding: var(--nur-space-4);
        }

        .nur-hero__stats strong {
            font-size: var(--nur-text-2xl);
        }

        .nur-hero__stats span {
            font-size: var(--nur-text-xs);
        }

        .nur-search__fields {
            grid-template-columns: 1.4fr 1fr 1fr auto;
            align-items: end;
        }

        .nur-search__submit {
            padding-inline: var(--nur-space-7);
        }
    }

    /* overlapping "what are you looking for" tiles */
    .nur-quick {
        position: relative;
        z-index: 2;
        margin-top: calc(var(--nur-space-7) + var(--nur-space-2));
    }

    .nur-quick__grid {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: var(--nur-space-3);
    }

    .nur-quick__item {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: var(--nur-space-2);
        padding: var(--nur-space-3) var(--nur-space-2);
        border: 1px solid var(--nur-line);
        border-radius: var(--nur-radius);
        background: var(--nur-surface);
        box-shadow: var(--nur-shadow);
        font-weight: 700;
        font-size: var(--nur-text-sm);
        text-align: center;
    }

    .nur-quick__item svg {
        width: 30px;
        height: 30px;
        color: var(--nur-gold-600);
    }

    .nur-trust {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--nur-space-3);
    }

    .nur-trust__item {
        display: flex;
        align-items: center;
        gap: var(--nur-space-3);
        padding: var(--nur-space-3) var(--nur-space-4);
        border-radius: var(--nur-radius);
        background: var(--nur-surface);
        border: 1px solid var(--nur-line);
        font-weight: 600;
    }

    .nur-trust__item svg {
        width: 28px;
        height: 28px;
        flex: none;
        color: var(--nur-green-700);
    }

    .nur-reviews-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--nur-space-4);
        margin-bottom: var(--nur-space-5);
    }

    .nur-reviews-score {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--nur-space-4);
    }

    .nur-reviews-score__logo {
        display: grid;
        place-items: center;
        padding: var(--nur-space-2) var(--nur-space-3);
        border-radius: var(--nur-radius-sm);
        background: #fff;
    }

    .nur-reviews-score__logo img {
        width: auto;
        max-width: 150px;
    }

    .nur-reviews-score__value {
        display: grid;
        grid-template-columns: auto auto;
        align-items: center;
        gap: 0 var(--nur-space-2);
    }

    .nur-reviews-score__value strong {
        grid-row: 1 / 3;
        font-size: 2.5rem;
        font-weight: 800;
        line-height: 1;
    }

    .nur-reviews-score__value small {
        color: rgba(255, 255, 255, 0.75);
        font-size: var(--nur-text-xs);
    }

    .nur-reviews-more {
        display: flex;
        justify-content: center;
        margin-top: var(--nur-space-5);
    }

    .nur-review__link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        align-self: end;
        color: var(--nur-primary);
        font-size: var(--nur-text-sm);
        font-weight: 700;
    }

    .nur-review__link:hover {
        text-decoration: underline;
    }

    .nur-review__link svg {
        width: 16px;
        height: 16px;
    }

    .nur-visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    @media (min-width: 768px) {
        .nur-reviews-head {
            grid-template-columns: 1fr auto;
            align-items: end;
        }
    }

    .nur-review {
        /* containing block for the visually-hidden link label, so it is clipped by the rail instead of widening the page */
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--nur-space-3);
        padding: var(--nur-space-5);
        border-radius: var(--nur-radius);
        background: var(--nur-surface);
        color: var(--nur-ink);
    }

    .nur-review__stars {
        color: var(--nur-gold-500);
        letter-spacing: 2px;
    }

    .nur-review__who {
        display: flex;
        align-items: center;
        gap: var(--nur-space-3);
        font-size: var(--nur-text-sm);
    }

    .nur-review__who img {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        object-fit: cover;
    }

    .nur-home-months {
        margin-bottom: var(--nur-space-5);
    }

    .nur-review__text {
        margin: 0;
    }

    @media (min-width: 768px) {
        .nur-quick__grid {
            gap: var(--nur-space-5);
        }

        .nur-quick__item {
            padding-block: var(--nur-space-4);
        }

        .nur-trust {
            grid-template-columns: repeat(3, 1fr);
        }
    }
}