/* ============================================================
   Urban Realities - Design System
   Cream ground, Fraunces display over Plus Jakarta Sans text, flat white cards.
   Loaded LAST so it wins over style.css / responsive.css / layout.css.
   ============================================================ */

/* Fraunces + Plus Jakarta Sans are linked from the layout <head>. They used to be
   an @import here, which the browser could not request until this file had downloaded. */

/* ---------- Tokens ---------- */
:root {
    --ur-cream: #FDFBF7;
    --ur-cream-2: #F6F2EA;
    --ur-espresso: #1C1917;
    --ur-ink: #2B2724;
    --ur-muted: #7A7269;
    --ur-hairline: rgba(28, 25, 23, .08);
    --ur-hairline-2: rgba(28, 25, 23, .05);
    --ur-sage: #6B7F6E;
    --ur-brand: #ff5a5f;
    --ur-brand-deep: #E14E52;

    /* Radii - deliberately restrained. Large containers get a soft corner,
       small controls stay close to square. Only true pills use 999px. */
    --ur-r-lg: 1rem;
    --ur-r-md: .75rem;
    --ur-r-sm: .5rem;
    --ur-bezel: .3rem;

    --ur-ease: cubic-bezier(.32, .72, 0, 1);
    --ur-ease-soft: cubic-bezier(.22, 1, .36, 1);

    --ur-shadow-ambient: 0 24px 60px -20px rgba(28, 25, 23, .12), 0 8px 20px -12px rgba(28, 25, 23, .08);
    --ur-shadow-lift: 0 20px 42px -20px rgba(28, 25, 23, .18), 0 6px 14px -8px rgba(28, 25, 23, .08);
    --ur-inner-hi: inset 0 1px 1px rgba(255, 255, 255, .9);
}

/* ---------- Base ---------- */
body,
.body,
p,
span,
li,
td,
th,
label,
input,
select,
textarea,
button,
.btn,
.main-title p,
.feat_property .details .tc_content p,
.bootstrap-select .filter-option {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

body {
    background-color: var(--ur-cream);
    color: var(--ur-ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Hand cursor on everything clickable. Browsers only give it to <a> WITH an href, and a
   lot of controls here are <a onclick>, role="button" spans or onclick divs (the navbar
   Sign in among them), so they showed the text arrow. Disabled controls say so instead. */
a,
button,
summary,
select,
label[for],
input[type="submit"],
input[type="button"],
input[type="checkbox"],
input[type="radio"],
.btn,
[role="button"],
[onclick]:not(input):not(textarea) {
    cursor: pointer;
}

button:disabled,
.btn:disabled,
.btn.disabled,
input:disabled,
select:disabled,
[aria-disabled="true"] {
    cursor: not-allowed;
}

h1,
h2,
h3,
h4,
h5,
.breadcrumb_title,
.main-title h2,
.fp_price {
    font-family: 'Fraunces', Georgia, serif;
    font-optical-sizing: auto;
    color: var(--ur-espresso);
    letter-spacing: -.015em;
}

h1,
h2,
.breadcrumb_title,
.main-title h2 {
    font-weight: 400;
    line-height: 1.06;
}

/* Macro typography */
.main-title h2 {
    font-size: clamp(2rem, 3.6vw, 3.25rem);
    margin-bottom: .35rem;
}

.main-title p {
    color: var(--ur-muted);
    font-size: 1rem;
}

.breadcrumb_title {
    font-size: clamp(2rem, 3.6vw, 3rem);
}

/* ---------- Film grain - retired: decoration only, and a fixed full-screen layer on every page ----------
.ur-grain {
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: .035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
*/

/* ---------- Macro whitespace ----------
   8vw put 123px above AND below every section at 1536, so each seam between two
   sections was ~245px of empty ground - the bands read as gaps rather than rhythm.
   Halved. Still generous, but a section boundary now costs ~122px, not a screenful. */
.our-listing,
.feature-property,
.property-city,
.our-testimonials,
.ur_postit,
.property-search {
    padding-top: clamp(2.5rem, 4vw, 4rem) !important;
    padding-bottom: clamp(2.5rem, 4vw, 4rem) !important;
}

/* ---------- Eyebrow tag ---------- */
.ur-eyebrow {
    display: inline-block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    color: var(--ur-muted);
    margin-bottom: .5rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ---------- Card enclosure: one white surface, hairline edge ----------
   The tray used to be a tinted bezel around a white plate - a card inside a card.
   Tray and plate are now the same white, so it reads as one surface with the
   photo inset. Hover changes the shadow only; nothing moves. */
.ur-shell {
    background: #fff;
    border: 1px solid rgba(28, 25, 23, .14);
    border-radius: var(--ur-r-lg);
    padding: var(--ur-bezel);
    transition: box-shadow .18s var(--ur-ease);
}

.ur-core {
    background: #fff;
    border-radius: calc(var(--ur-r-lg) - var(--ur-bezel));
    overflow: hidden;
}

.ur-shell:hover {
    box-shadow: var(--ur-shadow-lift);
}

/* ---------- Property cards ---------- */
.feat_property {
    background: #fff;
    border: 1px solid rgba(28, 25, 23, .14);
    border-radius: var(--ur-r-lg) !important;
    padding: var(--ur-bezel);
    box-shadow: none;
    transition: box-shadow .18s var(--ur-ease);
}

.feat_property:hover {
    box-shadow: var(--ur-shadow-lift);
}

.feat_property .thumb {
    border-radius: calc(var(--ur-r-lg) - var(--ur-bezel)) !important;
    overflow: hidden;
}

/* Listing cards: .feat_property's own tint composites to within ~2% of the
       .bgc-f7 section behind it, so the cards merged into the page. White gives
       them a real edge. .list is the horizontal listing card - the home rails are
       .home3 and set their own ground at page level, so they are untouched. */
.feat_property.list {
    background: #fff;
    /* the shared hairline is rgba(...,.05) and disappears against cream-2 -
           same .14 tone the home rail cards use, so the two read as one family */
    border: 1px solid rgba(28, 25, 23, .14);
}

.feat_property .details {
    background: transparent;
    border-radius: calc(var(--ur-r-lg) - var(--ur-bezel));
}

/* Photo zoom on hover - retired with the card lift
.feat_property .thumb img,
.feat_property .property-img {
    transition: transform .18s var(--ur-ease);
}

.feat_property:hover .thumb img {
    transform: scale(1.04);
}
*/

.fp_price {
    font-size: 1.5rem !important;
    font-weight: 500;
    color: var(--ur-espresso) !important;
}

.fp_price small {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--ur-muted);
    font-weight: 400;
}

/* ---------- Buttons ---------- */
.btn-thm,
.btn.btn-thm {
    background: var(--ur-espresso) !important;
    border: 0 !important;
    border-radius: var(--ur-r-sm) !important;
    padding: .85rem 1.6rem !important;
    font-weight: 500;
    letter-spacing: .01em;
    transition: background-color .18s var(--ur-ease);
}

/* style.css hovers .btn-thm to red text on a white ground. This overrode the
       background to brand red but not the colour, so the label went red-on-red and
       vanished - every primary button on the site. Keep the label white. */
.btn-thm:hover {
    background: var(--ur-brand-deep) !important;
    color: #fff !important;
}

.btn-light,
.btn.btn-light {
    background: transparent !important;
    border: 1px solid var(--ur-hairline) !important;
    border-radius: var(--ur-r-sm) !important;
    padding: .85rem 1.6rem !important;
    color: var(--ur-ink) !important;
    transition: border-color .18s var(--ur-ease), background-color .18s var(--ur-ease);
}

.btn-light:hover {
    border-color: var(--ur-espresso) !important;
    background: rgba(28, 25, 23, .03) !important;
}

/* Nested trailing icon: <a class="ur-cta"><span>Label</span><i class="ur-cta__ico">↗</i></a> */
.ur-cta {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    background: var(--ur-espresso);
    color: #fff !important;
    border-radius: var(--ur-r-sm);
    padding: .5rem .5rem .5rem 1.5rem;
    font-weight: 500;
    transition: background-color .18s var(--ur-ease);
}

.ur-cta:hover {
    background: var(--ur-brand-deep);
}

.ur-cta__ico {
    width: 2rem;
    height: 2rem;
    border-radius: calc(var(--ur-r-sm) - .15rem);
    background: rgba(255, 255, 255, .14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    font-size: .85rem;
    transition: background-color .18s var(--ur-ease);
}

.ur-cta:hover .ur-cta__ico {
    background: rgba(255, 255, 255, .22);
}

/* ---------- Inputs ---------- */
.form-control,
.bootstrap-select .dropdown-toggle,
.bootstrap-select>.dropdown-toggle.btn-light {
    border-radius: var(--ur-r-sm) !important;
    border: 1px solid var(--ur-hairline) !important;
    background: #fff !important;
    box-shadow: none !important;
    transition: border-color .18s var(--ur-ease), box-shadow .18s var(--ur-ease);
}

.form-control:focus,
.bootstrap-select .dropdown-toggle:focus {
    border-color: var(--ur-espresso) !important;
    box-shadow: 0 0 0 4px rgba(28, 25, 23, .06) !important;
    outline: 0 !important;
}

/* Open menu. bootstrap-select leaves the list at the inherited 16px while the
   closed toggle reads 13px, so the options jumped a size on open. Match the
   toggle and tighten the rows to suit the smaller text. */
.bootstrap-select .dropdown-menu {
    font-size: 13px;
}

.bootstrap-select .dropdown-menu li a,
.bootstrap-select .dropdown-menu .dropdown-item {
    padding: .32rem 1.1rem;
    font-size: 13px;
    line-height: 1.5;
}

.bootstrap-select .dropdown-menu li a .text,
.bootstrap-select .dropdown-menu .dropdown-item .text {
    font-size: 13px;
    line-height: 1.5;
}

/* Group headers inside a grouped select */
.bootstrap-select .dropdown-menu .dropdown-header {
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ---------- Filter panel as an enclosure ---------- */
.sidebar_listing_list {
    background: #fff !important;
    border: 1px solid rgba(28, 25, 23, .14);
    border-radius: var(--ur-r-lg) !important;
    padding: var(--ur-bezel) !important;
    box-shadow: none !important;
}

.sidebar_advanced_search_widget {
    background: #fff;
    border-radius: calc(var(--ur-r-lg) - var(--ur-bezel));
    padding: 1.5rem !important;
}

/* ---------- Scroll reveal - retired ----------
   It held 71 elements, the hero <h1> and search among them, at opacity 0 + blur
   until JS observed them: a late LCP, and a blank page if any script threw.
   Content now paints as it loads. The class stays in markup, inert.
.ur-reveal {
    opacity: 0;
    transform: translateY(2.5rem);
    filter: blur(6px);
    transition: opacity .18s var(--ur-ease-soft), transform .18s var(--ur-ease-soft), filter .18s var(--ur-ease-soft);
    will-change: transform, opacity;
}

   Settle on none, not translateY(0)/blur(0): an identity transform or filter
       still creates a stacking context, which trapped every positioned descendant
       of a revealed element - dropdown menus painted under the cards next to them.
       Both still animate, since none interpolates as the identity.
.ur-reveal.is-in {
    opacity: 1;
    transform: none;
    filter: none;
    will-change: auto;
}

.ur-reveal[data-d="1"] {
    transition-delay: .08s;
}

.ur-reveal[data-d="2"] {
    transition-delay: .16s;
}

.ur-reveal[data-d="3"] {
    transition-delay: .24s;
}

.ur-reveal[data-d="4"] {
    transition-delay: .32s;
}
*/

@media (prefers-reduced-motion: reduce) {
    /* Blanket guard - covers every hover transition and keyframe on the site,
       including the ones the per-component rules below never listed. */
    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }

    .ur-pg__act {
        transition: none;
    }

    .ur-lcard,
    .ur-lcard__title,
    .ur-lcard__media img {
        transition: none;
    }

    .ur-lcard:hover {
        transform: none;
    }

    .ur-lcard:hover .ur-lcard__media img {
        transform: none;
    }

    .ur-err__chips a {
        transition: none;
    }

    .ur-err__chips a:hover {
        transform: none;
    }
}

/* ---------- Section surfaces ---------- */
.bgc-f7 {
    background-color: var(--ur-cream-2) !important;
}

.bg-white {
    background-color: var(--ur-cream) !important;
}

/* ---------- Mobile ---------- */
@media only screen and (max-width: 767px) {
    :root {
        --ur-r-lg: .875rem;
        --ur-bezel: .25rem;
    }

    .our-listing,
    .feature-property,
    .property-city,
    .our-testimonials,
    .ur_postit,
    .property-search {
        padding-top: 2.25rem !important;
        padding-bottom: 2.25rem !important;
    }

    .ur-cta {
        padding-left: 1.15rem;
    }
}

/* Listing pages open with their own page-title block, so the macro 8vw top padding
   (123px at 1536) just pushed everything down. Cut it right back, but not to 0 -
   at 0 the eyebrow chip sits 2px under the fixed navbar. Keep padding-bottom.
   Must sit after the mobile group above to win at both breakpoints (equal
   specificity, so document order decides). */
.our-listing {
    padding-top: clamp(1.75rem, 3vw, 3rem) !important;
}

/* ============================================================
   Compact card scale
   The rails and cards read too large at wide viewports. This
   narrows the home rails and tightens the card type/padding
   everywhere. Loaded last, but partial <style> blocks sit in
   <body>, so sizing overrides need !important to win.
   ============================================================ */

/* Home rails: stop the carousel sprawling to 1600px */
.ur_cards_sec.maxw1600,
section.feature-property.maxw1600 {
    max-width: 1280px !important;
}

/* Card body: tighter padding */
.ur-rcard .tc_content,
.ur-pgcard .tc_content,
.feat_property .details .tc_content {
    padding: 1rem 1.15rem .3rem !important;
}

.ur-rcard .fp_footer,
.ur-pgcard .fp_footer,
.feat_property .details .fp_footer {
    padding: .55rem 1.15rem .9rem !important;
}

/* Price: was reading as a headline */
.ur_amount {
    font-size: clamp(1.05rem, 1.35vw, 1.3rem) !important;
}

.fp_price {
    font-size: 1.15rem !important;
}

.fp_price small,
.ur_per {
    font-size: 12px !important;
}

/* Title */
.ur-rcard .tc_content h4 a,
.ur-pgcard .tc_content h4 a,
.feat_property .tc_content h4 {
    font-size: clamp(.95rem, 1.15vw, 1.08rem) !important;
    line-height: 1.3 !important;
}

/* Photo: absolute, so it fills the tray column and never drives the row height -
   the details plate does. A fixed cap left a blank band under the image whenever
   the details ran taller. */
@media (min-width: 768px) {
    /* One card height whatever the listing filled in: a card with no specs row (no beds,
       baths or area) came out 179px against 217-220px for a full one. The details column
       is space-between, so a short card keeps its footer on the floor and the gap opens
       above it. min-height, not height - at 768-1199 a long title or price can still
       wrap to a taller card instead of being clipped. */
    .ur-plcard .feat_property.list {
        min-height: 220px;
    }

    .ur-plcard .feat_property.list .thumb {
        min-height: 168px;
    }

    .ur-plcard .feat_property.list .thumb .property-img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    /* The price block is absolute at the top-right of .tc_content. Reserve its
       column on the two lines that share its height - title and place, now the
       cards carry no kicker - so the specs row below keeps the full width. */
    .ur-plcard .tc_content h4,
    .ur-plcard .tc_content .ur_place {
        padding-right: 190px;
    }
}

/* 768-1199 the details plate is 350-400px wide, so a 190px price column left the
   title too little. The widest rent still fits 140px. */
@media (min-width: 768px) and (max-width: 1199.98px) {

    .ur-plcard .tc_content h4,
    .ur-plcard .tc_content .ur_place {
        padding-right: 150px;
    }

    .ur-plcard .feat_property.list .dtls_headr {
        width: 140px !important;
        right: 1.15rem !important;
    }
}

/* Specs / chips: quieter and tighter */
.ur_spec_v,
.ur_chip_v {
    font-size: .9rem !important;
}

.ur_sharing_chip {
    padding: 3px 9px !important;
    font-size: 11px !important;
}

.ur_transit_pill {
    padding: 5px 10px !important;
    font-size: 12px !important;
}

/* Avatar */
.feat_property .fp_footer .fp_meta img {
    width: 32px !important;
    height: 32px !important;
}

@media only screen and (max-width: 767px) {

    .ur-rcard .feat_property.list .thumb .property-img,
    .ur-pgcard .feat_property.list .thumb .property-img {
        min-height: 158px !important;
        max-height: none !important;
    }

    .ur-rcard .tc_content,
    .ur-pgcard .tc_content,
    .feat_property .details .tc_content {
        padding: .9rem 1rem .3rem !important;
    }

    /* The footer had no mobile counterpart, so it kept the desktop 1.15rem
       inline padding while .tc_content above dropped to 1rem - card body and
       footer then sat on different left edges once the theme switched the card
       to its stacked grid layout below 768px. */
    .ur-rcard .fp_footer,
    .ur-pgcard .fp_footer,
    .feat_property .details .fp_footer {
        padding: .5rem 1rem .9rem !important;
    }
}

/* ============================================================
   Home rails: equal-height cards
   Owl sizes item WIDTHS but never heights, so cards ended up
   ragged whenever a title wrapped, an image had a different
   aspect ratio, or a spec was missing. Flex the stage and pin
   every variable-height part.
   ============================================================ */

.feature_property_home3_slider .owl-stage {
    display: flex;
    align-items: stretch;
}

.feature_property_home3_slider .owl-item {
    display: flex;
    flex: 0 0 auto;
    /* keep owl's inline width as the base size */
    height: auto;
}

.feature_property_home3_slider .owl-item>.item {
    display: flex;
    width: 100%;
}

/* a rail with one card (Home/_PropertyRail) - no carousel, one card-width block */
.ur-rail-single>.item {
    display: flex;
    max-width: 340px;
}

/* ---- Home rail card ----
   Own class rather than the theme's .feat_property, which drags script.js
   hover handlers along with it. The whole card is one real link, so it is
   crawlable, tabbable and middle-clickable. Title leads, price and specs sit
   in a footer pinned to the bottom so the rail stays equal-height. */
.ur-lcard {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border: 1px solid rgba(28, 25, 23, .14);
    border-radius: var(--ur-r-lg);
    overflow: hidden;
    color: var(--ur-ink);
    text-decoration: none;
    transition: transform .18s var(--ur-ease), box-shadow .18s var(--ur-ease), border-color .18s var(--ur-ease);
}

.ur-lcard:hover,
.ur-lcard:focus-visible {
    color: var(--ur-ink);
    text-decoration: none;
    box-shadow: 0 14px 28px -14px rgba(255, 90, 95, .28), 0 10px 22px -12px rgba(28, 25, 23, .18);
    border-color: rgba(255, 90, 95, .45);
}

.ur-lcard:hover .ur-lcard__title {
    color: var(--ur-brand-deep);
}

.ur-lcard:focus-visible {
    outline: 2px solid var(--ur-espresso);
    outline-offset: 2px;
}

.ur-lcard__media {
    position: relative;
    flex: 0 0 auto;
    aspect-ratio: 16 / 10;
    background: var(--ur-cream-2);
    overflow: hidden;
}

.ur-lcard__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .18s var(--ur-ease-soft);
}

.ur-lcard:hover .ur-lcard__media img {
    transform: none;
}

.ur-lcard__noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 40px;
    color: var(--ur-muted);
    opacity: .45;
}

.ur-lcard__chips {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ur-lcard__chip {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--ur-brand);
    color: #fff;
    box-shadow: 0 6px 14px -8px rgba(255, 90, 95, .7);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.5;
}

.ur-lcard__chip--soft {
    background: rgba(255, 255, 255, .94);
    color: var(--ur-sage);
    box-shadow: none;
}

.ur-lcard__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 12px 14px 14px;
}

.ur-lcard__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 5px;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--ur-espresso);
    transition: color .18s var(--ur-ease);
}

/* .propertytitle carries the site's sans elsewhere - the rail title is display type */
.ur-lcard__title .propertytitle {
    font-family: inherit;
}

.ur-lcard__where {
    margin: 0;
    font-size: 13px;
    color: var(--ur-muted);
    text-transform: capitalize;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ur-lcard__where i {
    font-size: 12px;
    margin-right: 2px;
    color: var(--ur-brand);
}

.ur-lcard__foot {
    margin-top: auto;
}

/* Bottom scrim so the price reads white over any photo. FindHouse fades the whole
   image to .6 on a navy ground; that washes the picture out and drags a cool colour
   into a warm palette, so only the lower third is darkened and in espresso. */
.ur-lcard__scrim {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 58%;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(28, 25, 23, 0) 0%, rgba(28, 25, 23, .34) 46%, rgba(28, 25, 23, .78) 100%);
}

/* Price sits on the photo, bottom left, clear of the chips at top left */
.ur-lcard__price {
    position: absolute;
    left: 14px;
    bottom: 12px;
    z-index: 1;
    display: flex;
    align-items: baseline;
}

.ur-lcard__price strong {
    font-family: 'Fraunces', Georgia, serif;
    font-optical-sizing: auto;
    font-size: 21px;
    font-weight: 500;
    letter-spacing: -.01em;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
    text-shadow: 0 1px 12px rgba(28, 25, 23, .45);
}

.ur-lcard__price small {
    margin-left: 3px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, .8);
}

/* Specs as pills - same treatment as the sharing chips on the PG listing cards.
   One row only: the list is rendered even when empty so price rows line up
   across the rail, and anything that would wrap to a second row is clipped. */
.ur-lcard__specs {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    height: 24px;
    margin: 8px 0 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
}

/* "View details" - phones only (_RailCard). Desktop has the hover lift and title colour
   to show the card is a link; a phone has neither. */
.ur-lcard__cta {
    display: none;
}

@media only screen and (max-width: 767px) {
    .ur-lcard__cta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        min-height: 44px;
        margin-top: 12px;
        border-radius: var(--ur-r-sm);
        background: var(--ur-espresso);
        font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
        font-size: 14px;
        font-weight: 600;
        color: #fff;
    }

    .ur-lcard__cta i {
        font-style: normal;
    }
}

.ur-lcard__spec {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 .65rem;
    border-radius: 999px;
    background-color: var(--ur-cream-2);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ur-ink);
}

@media only screen and (max-width: 767px) {
    .ur-lcard__title {
        font-size: 17px;
    }

    .ur-lcard__body {
        padding: 14px 16px 16px;
    }
}

/* ============================================================
   Home rails: stop the hover shadow hitting the clip edge
   The theme sets .owl-stage-outer { overflow: visible } for this
   slider, so the clipper is .ovh (overflow:hidden) on the rail's
   container-fluid - a big hover shadow got sliced against it and
   drew a hard section boundary.
   1. Give the clip box vertical breathing room (padding out,
      margin back in, so layout does not move).
   2. Keep the card's own hover shadow tight enough to sit well
      inside that room.
   ============================================================ */

.ur_cards_sec>.container-fluid.ovh {
    padding-top: 30px;
    padding-bottom: 30px;
    margin-top: -30px;
    margin-bottom: -30px;
}

@media only screen and (max-width: 767px) {
    .ur_cards_sec>.container-fluid.ovh {
        padding-top: 20px;
        padding-bottom: 20px;
        margin-top: -20px;
        margin-bottom: -20px;
    }
}

/* ============================================================
   Home rails: carousel arrows
   The theme parks them at left/right -25px, i.e. OUTSIDE the
   carousel box - and .ovh on the rail container clips exactly
   there, so they were invisible at the section edges. Pull them
   inside and centre them on the 200px photo band so they sit
   over imagery rather than text.
   ============================================================ */

.feature_property_home3_slider.owl-carousel.owl-theme .owl-nav {
    margin: 0;
}

.feature_property_home3_slider.owl-carousel.owl-theme.owl-loaded .owl-prev,
.feature_property_home3_slider.owl-carousel.owl-theme.owl-loaded .owl-next {
    position: absolute;
    top: 105px;
    z-index: 6;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background-color: #fff !important;
    border: 1px solid var(--ur-hairline) !important;
    box-shadow: 0 8px 20px -8px rgba(28, 25, 23, .30) !important;
    color: var(--ur-espresso) !important;
    opacity: 1 !important;
    transform: translateY(-50%);
    transition: transform .18s var(--ur-ease), background-color .18s var(--ur-ease), box-shadow .18s var(--ur-ease), color .18s var(--ur-ease);
}

.feature_property_home3_slider.owl-carousel.owl-theme.owl-loaded .owl-prev {
    left: 12px !important;
    right: auto !important;
}

.feature_property_home3_slider.owl-carousel.owl-theme.owl-loaded .owl-next {
    right: 12px !important;
    left: auto !important;
}

.feature_property_home3_slider.owl-carousel.owl-theme.owl-loaded .owl-prev:hover,
.feature_property_home3_slider.owl-carousel.owl-theme.owl-loaded .owl-next:hover {
    background-color: var(--ur-espresso) !important;
    border-color: var(--ur-espresso) !important;
    color: #fff !important;
    box-shadow: 0 12px 26px -10px rgba(28, 25, 23, .45) !important;
}

.feature_property_home3_slider.owl-carousel.owl-theme.owl-loaded .owl-prev:active,
.feature_property_home3_slider.owl-carousel.owl-theme.owl-loaded .owl-next:active {
    transform: translateY(-50%);
}

/* owl greys out and disables the button at either end */
.feature_property_home3_slider.owl-carousel.owl-theme.owl-loaded .owl-prev.disabled,
.feature_property_home3_slider.owl-carousel.owl-theme.owl-loaded .owl-next.disabled {
    opacity: 0 !important;
    pointer-events: none;
}

.feature_property_home3_slider.owl-carousel.owl-theme.owl-loaded .owl-prev span,
.feature_property_home3_slider.owl-carousel.owl-theme.owl-loaded .owl-next span {
    display: inline-flex;
    line-height: 1;
    font-size: 15px;
}

@media only screen and (max-width: 767px) {

    .feature_property_home3_slider.owl-carousel.owl-theme.owl-loaded .owl-prev,
    .feature_property_home3_slider.owl-carousel.owl-theme.owl-loaded .owl-next {
        top: 95px;
        width: 38px !important;
        height: 38px !important;
    }

    .feature_property_home3_slider.owl-carousel.owl-theme.owl-loaded .owl-prev {
        left: 8px !important;
    }

    .feature_property_home3_slider.owl-carousel.owl-theme.owl-loaded .owl-next {
        right: 8px !important;
    }
}

/* ==========================================================================
   SCROLLBARS
   A 10px gutter with the thumb inset 2px by a transparent border and clipped to
   its content box, so it reads as a 6px rounded pill in the channel rather than
   a slab wedged against the edge.

   The thumb is the brand red, opaque on purpose, over a gutter tinted with the
   same red. The gutter sits outside the body box so it paints the ROOT
   background, never the section beside it - a translucent thumb looked fine
   over cream and then vanished into the cream band the gutter cuts down the
   dark hero. Opaque red on a blush channel reads the same the whole way down.

   The standard scrollbar-width / scrollbar-color pair is fenced behind a
   feature query on purpose: Chrome 121+ drops ::-webkit-scrollbar entirely for
   any scroller that sets them, which would throw away the pill above. Only
   engines with no WebKit pseudo-elements (Firefox) match the query, and both
   properties inherit, so declaring them on html covers nested scrollers too.
   ========================================================================== */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background-color: rgba(255, 90, 95, .12);
}

::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background-color: var(--ur-brand);
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--ur-brand-deep);
}

::-webkit-scrollbar-thumb:active {
    background-color: #c53f43;
}

::-webkit-scrollbar-corner {
    background-color: transparent;
}

::-webkit-scrollbar-button {
    display: none;
}

@supports not selector(::-webkit-scrollbar) {
    html {
        scrollbar-width: thin;
        scrollbar-color: var(--ur-brand) rgba(255, 90, 95, .12);
    }
}


/* ==========================================================================
   NEUTRALISE THE THEME'S body_overlay
   script.js binds .filter_open_btn and does $("body").addClass("body_overlay"),
   and style.css then applies to <body>:
       position: fixed;  transform: translate(0, 0);  width: 100%;
   Our Show Filter button still carries .filter_open_btn, so that fires alongside
   toggleFilters(). Both declarations are destructive here:
     - position:fixed on <body> takes the page out of flow, so it stops
       scrolling and the scrollbar disappears entirely.
     - transform on <body> makes it the containing block for every
       position:fixed descendant, so the filter sheet resolved bottom:0 against
       the full document height and landed thousands of pixels off-screen, and
       the mobile nav overlay did the same - it opened as an empty cream panel
       with its centred content far below the viewport.
   The theme only removes the class on .filter_closed_btn, which our redesigned
   sheet does not use, so it stuck until a reload. script.js is vendor and not
   ours to edit, so the class is defanged here instead - this works no matter
   when the theme adds it. Our own .ur-sheet-scrim does the dimming.
   ========================================================================== */

body.body_overlay {
    position: static;
    transform: none;
    width: auto;
}

body.body_overlay:before {
    content: none;
}

/* ==========================================================================
   MOBILE FILTER BUTTON
   style.css pins #main2 .filter_open_btn out of flow - position:absolute,
   right:0, top:5px, width:170px, height:50px - with the icon as a separate
   absolutely positioned 48px red block. #main2 is static and collapses to
   zero height, so the button resolved against a far-up positioned ancestor
   and painted straight over the page heading. Put it back in flow as a pill
   sized like the sort control it sits above.
   ========================================================================== */
@media only screen and (max-width: 991px) {

    /* The button now lives inside .ur-toolbar so it sits inline with Sort.
       Two equal halves; the results count is dropped here because the page meta
       line directly above already states it ("5 stays available"), and keeping
       it forced the row to wrap. Two-class selectors so these win over the
       per-page <style> blocks without editing all three listing views. */
    .ur-toolbar .ur-toolbar__count {
        display: none;
    }

    .ur-toolbar #main2.db-991 {
        display: block !important;
        flex: 1 1 0;
        min-width: 0;
        margin: 0;
    }

    .ur-toolbar .ur-toolbar__sort {
        flex: 1 1 0;
        min-width: 0;
        margin-left: 0;
        gap: 0;
    }

    /* No room for the label beside the pill, and it squeezed the select down
           to 53px - too narrow to read its own value. The select shows the
           active sort ("Newest"), so it carries the meaning on its own. */
    .ur-toolbar .ur-toolbar__label {
        display: none;
    }

    /* bootstrap-select ships its own high-specificity width rules, so grow
           it with flex instead of fighting that cascade. */
    .ur-toolbar .ur-toolbar__sort .bootstrap-select {
        flex: 1 1 auto;
        min-width: 0;
    }

    .ur-toolbar .ur-toolbar__sort .bootstrap-select>.dropdown-toggle {
        width: 100%;
    }

    /* Both controls fill their half and match heights, so the bar reads as one
       pair. Stretch rather than a hardcoded height, so the pill tracks whatever
       height the sort control resolves to. */
    .ur-toolbar #main2.db-991 {
        align-self: stretch;
    }

    .ur-toolbar #main2 .filter_open_btn {
        width: 100%;
        height: 100%;
    }

    #main2 {
        display: flex;
        margin: -.35rem 0 1.1rem;
    }

    #main2 .filter_open_btn {
        position: static;
        display: inline-flex;
        align-items: center;
        gap: .55rem;
        width: auto;
        height: auto;
        justify-content: center;
        padding: .72rem 1.1rem;
        border-radius: var(--ur-r-sm);
        background-color: var(--ur-espresso);
        box-shadow: none;
        overflow: visible;
        font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
        font-size: 11.5px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: .1em;
        text-transform: uppercase;
        text-align: left;
        color: #fff;
    }

    #open2.flaticon-filter-results-button:before,
    #open2.flaticon-close:before {
        position: static;
        width: auto;
        background-color: transparent;
        font-size: .95rem;
        line-height: 1;
    }
}


/* ==========================================================================
   AUTH SURFACES
   Login and register now live on their own routes (/Login, /Login/SignUp)
   rather than in a modal on every page, so these rules moved out of the
   _Login / _SignUp partials' inline <style> blocks and into the design
   system. Both pages share them.

   Shape: a cream tray holding a white plate - the double bezel used across
   the site - beside a dark editorial panel carrying the reason to sign up.
   ========================================================================== */

.ur-authpage {
    background: var(--ur-cream);
    padding: 3.5rem 0 4.5rem;
}

.ur-authpage__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
    gap: 2rem;
    align-items: start;
}

/* ---------- the form side: tray + plate ---------- */
.ur-authpage__card {
    background: var(--ur-cream-2);
    border: 1px solid var(--ur-hairline-2);
    border-radius: var(--ur-r-lg);
    padding: var(--ur-bezel);
    box-shadow: var(--ur-shadow-ambient);
}

.ur-authpage__plate {
    background: #fff;
    border-radius: calc(var(--ur-r-lg) - var(--ur-bezel));
    box-shadow: var(--ur-inner-hi);
    padding: clamp(1.5rem, 3.2vw, 2.6rem);
}

/* ---------- the editorial side ---------- */
.ur-authpage__aside {
    position: relative;
    overflow: hidden;
    background: var(--ur-espresso);
    border-radius: var(--ur-r-lg);
    padding: clamp(1.75rem, 3.2vw, 2.6rem);
    color: #fff;
}

/* one soft bloom rather than a gradient wash */
.ur-authpage__aside:before {
    content: "";
    position: absolute;
    top: -30%;
    right: -20%;
    width: 70%;
    padding-bottom: 70%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 90, 95, .22), transparent 68%);
    pointer-events: none;
}

.ur-authpage__aside>* {
    position: relative;
}

.ur-authpage__aside .ur-eyebrow {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .72);
}

.ur-authpage__asidetitle {
    font-family: 'Fraunces', Georgia, serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-size: clamp(1.5rem, 2.6vw, 2.05rem);
    line-height: 1.06;
    letter-spacing: -.03em;
    color: #fff;
    margin: .9rem 0 1.1rem;
}

.ur-authpage__asidesub {
    max-width: 44ch;
    margin: 0 0 1.75rem;
    font-size: .88rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, .62);
}

.ur-authpage__points {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ur-authpage__points li {
    display: flex;
    gap: .85rem;
    padding: .9rem 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: .87rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .8);
}

.ur-authpage__points li:last-child {
    padding-bottom: 0;
}

.ur-authpage__points b {
    display: block;
    margin-bottom: .15rem;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 600;
    color: #fff;
}

.ur-authpage__num {
    flex: 0 0 auto;
    padding-top: .12rem;
    font-family: 'Fraunces', Georgia, serif;
    font-size: .8rem;
    color: rgba(255, 255, 255, .38);
}

@media only screen and (max-width: 991px) {

    /* form first - it is the reason the page was opened */
    .ur-authpage__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }
}

@media only screen and (max-width: 767px) {
    .ur-authpage {
        padding: 2rem 0 3rem;
    }
}

/* ==========================================================================
   AUTH FORM
   Shared by both pages and deliberately container-agnostic: nothing here
   depends on being inside a modal or a page.
   ========================================================================== */

.ur-auth {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

/* the theme's own heading block is replaced by .ur-auth__head */
.ur-auth .heading {
    display: none !important;
}

.ur-auth__head {
    margin-bottom: 1.75rem;
}

.ur-auth .ur-eyebrow {
    margin-bottom: .85rem;
}

.ur-auth__title {
    font-family: 'Fraunces', Georgia, serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    line-height: 1.08;
    letter-spacing: -.02em;
    color: var(--ur-espresso);
    margin: 0 0 .5rem;
}

.ur-auth__sub {
    max-width: 52ch;
    margin: 0;
    color: var(--ur-muted);
    font-size: .85rem;
    line-height: 1.6;
}

.ur-auth .form-group {
    margin-bottom: 1.15rem;
}

.ur-auth__label {
    display: block;
    margin: 0 0 .5rem;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ur-muted);
}

/* two fields on one line, stacking on the narrowest phones */
.ur-auth__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1rem;
}

.ur-auth .form-control {
    height: auto;
    min-height: 3.35rem;
    margin-bottom: 0;
    padding: .95rem 1.1rem;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: .93rem;
    line-height: 1.4;
    color: var(--ur-ink);
    background: #fff !important;
    border: 1px solid var(--ur-hairline) !important;
    border-radius: var(--ur-r-sm) !important;
    box-shadow: var(--ur-inner-hi) !important;
    transition: border-color .18s var(--ur-ease), box-shadow .18s var(--ur-ease);
}

.ur-auth .form-control::placeholder {
    color: rgba(122, 114, 105, .6);
}

.ur-auth .form-control:focus {
    border-color: var(--ur-espresso) !important;
    box-shadow: 0 0 0 4px rgba(28, 25, 23, .06) !important;
    outline: 0 !important;
}

.ur-auth .position-relative .form-control {
    padding-right: 2.9rem;
}

/* ---------- bootstrap-select matched to the hairline inputs ---------- */
.ur-auth .bootstrap-select>.dropdown-toggle,
.ur-auth .bootstrap-select>.dropdown-toggle.btn-light {
    height: auto !important;
    min-height: 3.35rem;
    padding: .95rem 2.25rem .95rem 1.1rem !important;
    background: #fff !important;
    border: 1px solid var(--ur-hairline) !important;
    border-radius: var(--ur-r-sm) !important;
    box-shadow: var(--ur-inner-hi) !important;
    color: var(--ur-ink) !important;
    outline: 0 !important;
}

.ur-auth .bootstrap-select .filter-option-inner-inner {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: .93rem !important;
    line-height: 1.4 !important;
    color: var(--ur-ink) !important;
}

.ur-auth .bootstrap-select.show>.dropdown-toggle,
.ur-auth .bootstrap-select>.dropdown-toggle:focus {
    border-color: var(--ur-espresso) !important;
    box-shadow: 0 0 0 4px rgba(28, 25, 23, .06) !important;
}

.ur-auth .bootstrap-select .dropdown-menu {
    border: 1px solid var(--ur-hairline);
    border-radius: var(--ur-r-md);
    box-shadow: var(--ur-shadow-ambient);
    padding: .4rem;
    overflow: hidden;
}

.ur-auth .bootstrap-select .dropdown-menu li a {
    border-radius: var(--ur-r-sm);
    padding: .55rem .8rem;
    font-size: .88rem;
    color: var(--ur-ink);
}

.ur-auth .bootstrap-select .dropdown-menu li a:hover,
.ur-auth .bootstrap-select .dropdown-menu li a:focus,
.ur-auth .bootstrap-select .dropdown-menu li.selected a {
    background: rgba(28, 25, 23, .05);
    color: var(--ur-espresso);
}

/* ---------- password reveal: opacity only ---------- */
.ur-auth .password-toggle-icon {
    color: var(--ur-muted);
    font-size: .85rem;
    opacity: .4;
    transition: opacity .18s ease, color .18s ease;
}

.ur-auth .password-toggle-icon:hover {
    opacity: 1;
    color: var(--ur-espresso);
}

/* ---------- checkbox row ---------- */
.ur-auth .ui_kit_checkbox .custom-control-label {
    font-size: .8rem;
    color: var(--ur-muted);
    letter-spacing: .01em;
}

.ur-auth .ui_kit_checkbox .form-group {
    margin-bottom: 1.35rem;
}

.ur-auth--signup .ui_kit_checkbox .form-group {
    margin-bottom: 1.1rem;
}

.ur-auth .text-danger {
    font-size: .75rem;
    letter-spacing: .01em;
}

/* ---------- primary CTA: full-width pill with a nested arrow ---------- */
.ur-auth__submit.ur-cta {
    display: flex !important;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 3.35rem;
    height: auto !important;
    margin: .35rem 0 1.1rem !important;
    padding: .45rem .45rem .45rem 1.5rem !important;
    background: var(--ur-espresso) !important;
    border: 0 !important;
    border-radius: var(--ur-r-sm) !important;
    box-shadow: none !important;
    color: #fff !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: .95rem !important;
    font-weight: 500 !important;
    letter-spacing: .01em;
    text-align: left;
    transition: transform .18s var(--ur-ease), background-color .18s var(--ur-ease);
}

.ur-auth__submit.ur-cta:hover,
.ur-auth__submit.ur-cta:focus {
    background: var(--ur-brand) !important;
    border: 0 !important;
    color: #fff !important;
    transform: translateY(-1px);
}

.ur-auth__submit.ur-cta:active {
    transform: scale(.99);
}

.ur-auth__submit.ur-cta:disabled,
.ur-auth__submit.ur-cta[disabled] {
    opacity: .4;
    transform: none;
}

.ur-auth__submit.ur-cta .ur-cta__ico {
    flex: 0 0 auto;
    font-size: .95rem;
}

/* ---------- quiet inline links with a scaling underline ---------- */
.ur-auth__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
}

.ur-auth__link {
    position: relative;
    display: inline-block;
    color: var(--ur-muted) !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: .8rem !important;
    line-height: 1.5 !important;
    letter-spacing: .01em;
    text-decoration: none !important;
    cursor: pointer;
    transition: color .18s ease;
}

.ur-auth__link:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .18s var(--ur-ease);
}

.ur-auth__link:hover,
.ur-auth__link:focus {
    color: var(--ur-espresso) !important;
}

.ur-auth__link:hover:after,
.ur-auth__link:focus:after {
    transform: scaleX(1);
}

.ur-auth__switch {
    margin: 1.4rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ur-hairline-2);
    font-size: .8rem;
    color: var(--ur-muted);
}

.ur-auth__switch .ur-auth__link {
    color: var(--ur-espresso) !important;
    font-weight: 500;
}

/* Signup step 1 - list a property, or look for one (_SignUp) */
.ur-auth__intent {
    display: grid;
    gap: .75rem;
}

.ur-auth__choice {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 1rem 1.15rem;
    border: 1px solid rgba(28, 25, 23, .14);
    border-radius: var(--ur-r-md);
    background: #fff;
    text-align: left;
    color: var(--ur-ink);
    cursor: pointer;
    transition: border-color .18s var(--ur-ease), background-color .18s var(--ur-ease);
}

.ur-auth__choice:hover,
.ur-auth__choice:focus-visible {
    border-color: var(--ur-espresso);
    background: var(--ur-cream);
}

.ur-auth__choice b {
    display: block;
    font-size: .95rem;
    font-weight: 600;
    color: var(--ur-espresso);
}

.ur-auth__choice span {
    display: block;
    margin-top: .2rem;
    font-size: .8rem;
    color: var(--ur-muted);
}

/* the chosen path, with a way back */
.ur-auth__chosen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1.1rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--ur-hairline-2);
    font-size: .85rem;
    font-weight: 600;
    color: var(--ur-espresso);
}

.ur-auth__chosen .ur-auth__link {
    padding: 0;
    border: 0;
    background: none;
    font-size: .8rem;
    cursor: pointer;
}

/* owner / broker - radio tiles, the whole tile is the target */
.ur-auth__types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: .6rem;
}

.ur-auth__type {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 44px;
    margin: 0;
    padding: .65rem .9rem;
    border: 1px solid rgba(28, 25, 23, .14);
    border-radius: var(--ur-r-sm);
    background: #fff;
    font-size: .88rem;
    font-weight: 500;
    color: var(--ur-ink);
    cursor: pointer;
    transition: border-color .18s var(--ur-ease), background-color .18s var(--ur-ease);
}

.ur-auth__type input {
    margin: 0;
    accent-color: var(--ur-espresso);
}

.ur-auth__type:has(input:checked) {
    border-color: var(--ur-espresso);
    background: var(--ur-cream-2);
}

@media only screen and (max-width: 575px) {
    .ur-auth__row {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* ---------- Segmented control ----------
   Two or three mutually exclusive views on one page: the rental listings swap
   Residential / Commercial, the people directory swaps account type. Either an
   <a> pair (navigation) or a <button> pair (AJAX) - .is-on marks the open one. */
.ur-seg {
    display: inline-flex;
    gap: .3rem;
    padding: .3rem;
    border-radius: 999px;
    background: rgba(28, 25, 23, .05);
    border: 1px solid var(--ur-hairline-2);
}

.ur-seg__btn {
    border: 0;
    background: transparent;
    border-radius: 999px;
    padding: .6rem 1.35rem;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ur-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .18s var(--ur-ease), color .18s var(--ur-ease);
}

.ur-seg__btn:hover,
.ur-seg__btn:focus {
    color: var(--ur-espresso);
    text-decoration: none;
}

.ur-seg__btn.is-on {
    background: var(--ur-espresso);
    color: #fff;
    box-shadow: var(--ur-shadow-lift);
}

/* ---------- Section header ----------
   Heading block on the left, a toggle and/or view-all link on the right. Shared by the
   landing page rails and the similar-properties rail on a listing detail page. */
.ur_sec_head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem 2rem;
    flex-wrap: wrap;
}

.ur_sec_head_txt {
    max-width: 46rem;
}

.ur_sec_head_txt h2 {
    margin-bottom: .45rem;
}

.ur_sec_head_txt p {
    margin-bottom: 0;
    color: var(--ur-muted);
}

.ur_sec_head--center {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ur_viewall {
    flex: 0 0 auto;
    font-size: .9rem;
}

/* Quiet variant of .ur-cta - hairline pill on cream */
.ur-cta--quiet {
    background: transparent;
    color: var(--ur-ink) !important;
    border: 1px solid var(--ur-hairline);
    padding: .35rem .35rem .35rem 1.25rem;
}

.ur-cta--quiet .ur-cta__ico {
    width: 1.9rem;
    height: 1.9rem;
    background: var(--ur-espresso);
    color: #fff;
}

.ur-cta--quiet:hover {
    background: var(--ur-espresso);
    border-color: var(--ur-espresso);
    color: #fff !important;
}

.ur-cta--quiet:hover .ur-cta__ico {
    background: rgba(255, 255, 255, .20);
}

/* ---------- Lister badge ----------
   Sits inside the card's "Listed by" eyebrow. Owner is tinted so a direct listing
   reads at a glance; broker stays neutral. No badge at all when the lister's
   account type is unknown - see MstDropdwonController.GetAdvisorListerTypes. */
.ur_lister_tag {
    display: inline-block;
    margin-left: .4rem;
    padding: .12rem .45rem;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.4;
    text-transform: uppercase;
    vertical-align: baseline;
    background: rgba(28, 25, 23, .07);
    color: var(--ur-ink);
}

.ur_lister_tag--owner {
    background: rgba(107, 127, 110, .16);
    color: var(--ur-sage);
}

/* Listing pages park the pair in the dead column beside the page heading, sitting on
   the same baseline as the breadcrumb line. Below 992px the column stacks under the
   heading and the pair goes full width. */
.ur-page-aside {
    display: flex;
    justify-content: flex-end;
    padding-bottom: clamp(2rem, 4.5vw, 3.75rem);
}

@media only screen and (max-width: 991px) {
    .ur-page-aside {
        justify-content: flex-start;
        padding-bottom: 2rem;
    }
}

/* 44px touch targets, and the pair keeps its shape on a narrow phone */
@media only screen and (max-width: 767px) {
    .ur-seg {
        display: flex;
        width: 100%;
    }

    .ur-seg__btn {
        flex: 1 1 0;
        min-height: 44px;
        padding: .6rem .75rem;
        text-align: center;
    }
}

/* ==========================================================================
   PROPERTY DETAIL (the .ur-pg__ prefix is historical - these rules now serve
   the PG, rental and commercial pages alike)
   The head card leads with the money question; a PG then compares its rooms
   in the sharing table, a rental lists its facts and amenities.
   ========================================================================== */

/* ---------- Headline price ---------- */
.ur-pg__pricebar {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1.25rem 2.25rem;
    margin: 0 0 1.5rem;
    padding: 0 0 1.5rem;
    border-bottom: 1px solid var(--ur-hairline);
}

.ur-pg__pricefrom {
    display: block;
    margin-bottom: .3rem;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ur-muted);
}

.ur-pg__price {
    font-family: 'Fraunces', Georgia, serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--ur-brand-deep);
}

.ur-pg__price small {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: .9rem;
    font-weight: 400;
    color: var(--ur-muted);
}

.ur-pg__pricemeta {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-left: auto;
}

/* ---------- Status chips ---------- */
.ur-pg__chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .38rem .8rem;
    border-radius: 999px;
    border: 1px solid var(--ur-hairline);
    background: rgba(28, 25, 23, .03);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ur-muted);
    white-space: nowrap;
}

.ur-pg__chip--live {
    border-color: rgba(107, 127, 110, .35);
    background: rgba(107, 127, 110, .1);
    color: var(--ur-sage);
}

.ur-pg__chip--full {
    border-color: rgba(255, 90, 95, .3);
    background: rgba(255, 90, 95, .08);
    color: var(--ur-brand-deep);
}

.ur-pg__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* ---------- Head card ---------- */
.ur-pg__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .6rem;
}

.ur-pg__tags .ur-eyebrow {
    margin-bottom: 0;
    text-transform: capitalize;
    letter-spacing: .04em;
    font-size: 11px;
}

/* ---------- Report modal (SweetAlert2 body) ---------- */
.ur-report__lead {
    margin: 0 0 .75rem;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--ur-muted);
}

.swal2-textarea.ur-report__text {
    width: 100%;
    margin: 0;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: .95rem;
    border-radius: var(--ur-r-sm);
    resize: vertical;
}

/* ---------- Name-card actions: wishlist + share ----------
   Top-right of .ur-pg__head. The heart is the same #chkLike_<id> / .input-checkbox
   pair the listing cards use, so addInFavorite / markFavoriteHearts drive it. */
.ur-pg__head {
    position: relative;
}

.ur-pg__acts {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    display: flex;
    gap: .5rem;
    z-index: 1;
}

.ur-pg__head .ur-pg__tags,
.ur-pg__head .ur-pg__title {
    padding-right: 6.5rem;
}

.ur-pg__act {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--ur-hairline);
    border-radius: 999px;
    background: var(--ur-cream);
    color: var(--ur-espresso);
    font-size: .95rem;
    cursor: pointer;
    transition: transform .18s var(--ur-ease), background-color .18s var(--ur-ease), border-color .18s var(--ur-ease), color .18s var(--ur-ease);
}

.ur-pg__act:hover {
    background: var(--ur-espresso);
    border-color: var(--ur-espresso);
    color: var(--ur-cream);
}

.ur-pg__act .input-checkbox {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.ur-pg__act__ico {
    display: inline-flex;
}

.ur-pg__act__ico svg {
    display: block;
}

.ur-pg__act--wish .input-checkbox:checked~.ur-pg__act__ico svg path {
    fill: var(--ur-brand);
    stroke: var(--ur-brand);
}

.ur-pg__act--wish .input-checkbox:checked~.ur-pg__act__ico {
    color: var(--ur-brand);
}

.ur-pg__act--wish .input-checkbox:focus-visible~.ur-pg__act__ico {
    outline: 2px solid var(--ur-brand);
    outline-offset: 3px;
    border-radius: 999px;
}

@media only screen and (max-width: 767px) {
    .ur-pg__acts {
        top: 1rem;
        right: 1rem;
    }
}

.ur-pg__title {
    margin: 0 0 .4rem;
    font-family: 'Fraunces', Georgia, serif;
    font-optical-sizing: auto;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -.02em;
    color: var(--ur-espresso);
}

.ur-pg__addr {
    margin: 0 0 1.4rem;
    font-size: .9rem;
    color: var(--ur-muted);
}

.ur-pg__addr i {
    color: var(--ur-brand);
}

.ur-pg__price--sm {
    font-size: clamp(1.3rem, 2.2vw, 1.7rem);
    color: var(--ur-espresso);
}

/* ---------- Host plate ----------
   The lister, beside the gallery. A compact contact card on the same white plate
   as every other card on the page, sized to its content instead of stretched to
   the gallery, with one filled action: WhatsApp. Replaces the enquiry form for PGs. */
.ur-host {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.35rem 1.35rem 1.15rem;
    border-radius: var(--ur-r-lg);
    background: #fff;
    border: 1px solid var(--ur-hairline);
    color: var(--ur-muted);
    overflow: hidden;
    box-shadow: var(--ur-shadow-ambient);
}

.ur-host__eyebrow {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: .9rem;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ur-brand);
}

.ur-host__id {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: 1.1rem;
}

.ur-host__avatar {
    flex: 0 0 auto;
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid var(--ur-hairline);
    object-fit: cover;
}

.ur-host__name {
    margin: 0;
    font-family: 'Fraunces', Georgia, serif;
    font-optical-sizing: auto;
    font-size: 1.45rem;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--ur-espresso);
}

.ur-host__sub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
    margin: .3rem 0 0;
    font-size: .82rem;
    color: var(--ur-muted);
}

.ur-host__sub:empty {
    display: none;
}

/* Owner / Broker - same pair the listing cards use */
.ur-host__type {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.4;
    text-transform: uppercase;
    background: var(--ur-cream-2);
    color: var(--ur-espresso);
}

.ur-host__type--owner {
    background: rgba(107, 127, 110, .16);
    color: var(--ur-sage);
}

.ur-host__type--broker {
    background: rgba(255, 90, 95, .12);
    color: var(--ur-brand-deep);
}

/* trust line over a hairline, only when there is a number to reach */
.ur-host__note {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ur-hairline);
    font-size: .8rem;
    color: var(--ur-muted);
}

.ur-host__note i {
    font-size: 1rem;
    color: #25d366;
}

/* the one filled action - WhatsApp's own green, the one colour not from the tokens */
.ur-host__wa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 48px;
    padding: .7rem 1.2rem;
    border-radius: var(--ur-r-sm);
    background: #25d366;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: .9rem;
    font-weight: 600;
    color: #fff;
    box-shadow: 0 10px 24px -12px rgba(37, 211, 102, .8);
    transition: background-color .18s var(--ur-ease), transform .18s var(--ur-ease);
}

.ur-host__wa i {
    font-size: 1.2rem;
}

.ur-host__wa:hover {
    background: #1ebe5b;
    color: #fff;
    text-decoration: none;
}

.ur-host__actions {
    display: flex;
    justify-content: center;
    margin-top: .5rem;
}

/* quiet text link under the button */
.ur-host__link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 44px;
    padding: .5rem .75rem;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: .85rem;
    font-weight: 500;
    color: var(--ur-espresso);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--ur-hairline);
    transition: color .18s var(--ur-ease), text-decoration-color .18s var(--ur-ease);
}

.ur-host__link:hover {
    color: var(--ur-brand);
    text-decoration-color: currentColor;
}

@media only screen and (max-width: 991px) {
    .ur-host {
        margin-top: 1.25rem;
    }

    /* The lister card's margin was the only gap under the photos; it now follows the
       details, so the head card takes the same 20px. Tablets already get 8px from the
       column's mt-md-2, hence the smaller top-up there. */
    .ur-pg__head {
        margin-top: .75rem;
    }
}

@media only screen and (max-width: 767px) {
    .ur-pg__head {
        margin-top: 1.25rem;
    }
}

/* ---------- Colour through the sections ----------
   Section titles carry a brand bar, money is brand-deep, the "yes" answers are
   sage, the "no" answers stay quiet. Hooked on .ur-pg__sec / .ur-pg__head,
   which every detail page now carries. */
.ur-pg__sec h4,
.ur-pg__head h4 {
    position: relative;
    padding-left: .9rem;
    font-family: 'Fraunces', Georgia, serif;
    font-optical-sizing: auto;
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--ur-espresso);
}

.ur-pg__sec h4::before,
.ur-pg__head h4::before {
    content: "";
    position: absolute;
    left: 0;
    top: .15em;
    bottom: .15em;
    width: 3px;
    border-radius: 999px;
    background: var(--ur-brand);
}

.ur-pg__tags .ur-eyebrow:first-child {
    color: var(--ur-brand-deep);
    background: rgba(255, 90, 95, .1);
    border-color: rgba(255, 90, 95, .25);
}

/* ---------- Weight between the sections ----------
   Every section came out on the same theme plate with the same heading, so the
   card that decides the purchase read exactly like the one that is reference.
   Density and ground separate them: a promoted section gets a deeper plate, a
   larger heading and real air; a demoted one gives up the plate for the page's
   own ground and a hairline above it. No badge, no label, no extra word. */
.ur-pg__head,
.ur-pg__sec--key {
    padding: 1.9rem 2rem;
    border: 1px solid var(--ur-hairline);
    border-radius: var(--ur-r-lg);
    box-shadow: var(--ur-shadow-ambient);
}

.ur-pg__sec--key h4 {
    font-size: 1.45rem;
}

.ur-pg__sec--ref {
    padding: 1.2rem 0 0;
    border-top: 1px solid var(--ur-hairline);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.ur-pg__sec--ref h4 {
    font-size: 1.12rem;
}

.ur-pg__sec--ref h4::before {
    background: var(--ur-hairline);
}

/* the sections keep their ids, so a deep link still lands on one - this clears the
   fixed header in its untightened state. Was 160px while an in-page nav was pinned
   under the header; that nav is gone, so its 54px band comes off. */
.ur-pg__head,
.ur-pg__sec {
    scroll-margin-top: 120px;
}

/* ---------- Sharing table ----------
   A real table at every width: the whole point is comparing a row against the
   row above it, which card-per-room throws away. It scrolls inside its own
   wrapper rather than pushing the page sideways. */
/* position:relative is load-bearing: the sr-only span in the last <th> is
   absolutely positioned, so without a positioned wrapper its containing block is
   .application_statics outside the scroller. It then escaped the clip and gave the
   page 271px of horizontal scroll at 375px. */
.ur-pg__tablewrap {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--ur-hairline);
    border-radius: var(--ur-r-md);
    background: #fff;
}

.ur-pg__table {
    width: 100%;
    min-width: 680px;
    margin: 0;
    border-collapse: collapse;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.ur-pg__table th {
    padding: .85rem 1rem;
    border-bottom: 1px solid rgba(255, 90, 95, .18);
    background: rgba(255, 90, 95, .06);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ur-brand-deep);
    white-space: nowrap;
}

.ur-pg__table td {
    padding: 1rem;
    border-bottom: 1px solid var(--ur-hairline-2);
    font-size: .9rem;
    color: var(--ur-ink);
    vertical-align: middle;
}

.ur-pg__table tr:last-child td {
    border-bottom: 0;
}

.ur-pg__table tbody tr:hover td {
    background: var(--ur-cream);
}

.ur-pg__table tr.is-full td {
    opacity: .5;
}

/* Floor table has short columns - no need for the room table's minimum width */
.ur-pg__table--floors {
    min-width: 560px;
}

.ur-pg__cell-r {
    text-align: right;
}

.ur-pg__imgbtn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 34px;
    padding: 0 .85rem;
    border: 1px solid var(--ur-hairline);
    border-radius: var(--ur-r-sm);
    background: #fff;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--ur-espresso);
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .18s var(--ur-ease), color .18s var(--ur-ease);
}

.ur-pg__imgbtn i {
    font-size: 13px;
    color: var(--ur-brand);
}

.ur-pg__imgbtn:hover {
    border-color: rgba(255, 90, 95, .45);
    color: var(--ur-brand-deep);
}

.ur-pg__roomname {
    font-weight: 600;
    color: var(--ur-espresso);
}

/* Room amenities as pills under the room name - same badge as the home card specs */
.ur-pg__amen {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin: .45rem 0 0;
    padding: 0;
    list-style: none;
}

.ur-pg__amen li {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    height: 22px;
    padding: 0 .6rem;
    border-radius: 999px;
    background: var(--ur-cream-2);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ur-ink);
}

/* Property-level amenities: bigger, normal case, icon in brand */
.ur-pg__amen--lg {
    gap: .5rem;
    margin: 0;
}

.ur-pg__amen--lg li {
    gap: .45rem;
    height: 34px;
    padding: 0 .9rem;
    border: 1px solid var(--ur-hairline);
    background: #fff;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.ur-pg__amen--lg li span {
    font-size: 15px;
    color: var(--ur-brand);
}

.ur-pg__amen li .fa {
    font-size: 11px;
    color: var(--ur-brand);
}

.ur-pg__amen--lg li .fa {
    font-size: 15px;
}

/* The rows under "What's included" carry their icon on a round plate, so the chips
   directly above carry theirs the same way, one size down - plate, icon, label in
   both blocks. The chip plate is deliberately neutral cream: only the included rows
   let the plate colour mean something, and that is the difference worth seeing. */
.ur-pg__amen--lg li .fa,
.ur-pg__amen--lg li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ur-cream-2);
    font-size: 12px;
    line-height: 1;
    color: var(--ur-brand);
}

.ur-pg__amen--lg li:has(.fa) {
    padding-left: .4rem;
}

.ur-pg__rent {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.2rem;
    color: var(--ur-brand-deep);
    white-space: nowrap;
}

.ur-pg__beds {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
}

.ur-pg__bedbar {
    position: relative;
    width: 46px;
    height: 5px;
    border-radius: 999px;
    background: rgba(28, 25, 23, .1);
    overflow: hidden;
}

.ur-pg__bedbar i {
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
    border-radius: 999px;
    background: var(--ur-sage);
}

.ur-pg__bedbar.is-tight i {
    background: var(--ur-brand);
}

/* Phone: the 680px comparison table showed 268px of itself at 375 - the room name
   and half of Availability, with rent two swipes away. Each room becomes a card:
   name and rent on top, the rest as labelled rows, photos full width. Markup keeps
   explicit table roles, so screen readers still get a table. */
@media only screen and (max-width: 767px) {
    .ur-pg__tablewrap--rooms {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .ur-pg__tablewrap--rooms .ur-pg__table,
    .ur-pg__tablewrap--rooms tbody {
        display: block;
        min-width: 0;
    }

    /* each card row carries its own label - the header row stays for screen readers only */
    .ur-pg__tablewrap--rooms thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .ur-pg__tablewrap--rooms tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 1rem;
        margin-bottom: .75rem;
        padding: 1rem 1rem .85rem;
        border: 1px solid var(--ur-hairline);
        border-radius: var(--ur-r-md);
        background: #fff;
    }

    .ur-pg__tablewrap--rooms tbody tr:last-child {
        margin-bottom: 0;
    }

    .ur-pg__tablewrap--rooms .ur-pg__table td {
        display: block;
        padding: 0;
        border: 0;
    }

    /* background only - :hover outranks td[data-label], so anything else here
       would override the labelled rows' layout whenever a finger or cursor rests */
    .ur-pg__tablewrap--rooms .ur-pg__table tbody tr:hover td {
        background: transparent;
    }

    /* Top: the name cell spans the card so the amenity pills get the full width;
       the rent cell sits over its top-right corner, beside the name line only. The
       name reserves that corner. */
    .ur-pg__tablewrap--rooms .ur-pg__table td:first-child {
        grid-column: 1 / -1;
        grid-row: 1;
        padding-bottom: .85rem;
    }

    .ur-pg__tablewrap--rooms .ur-pg__table td.ur-pg__cell-rent {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        text-align: right;
        white-space: nowrap;
    }

    .ur-pg__tablewrap--rooms .ur-pg__roomname {
        display: block;
        padding-right: 7.5rem;
        font-size: 1rem;
        line-height: 1.6;
    }

    /* labelled rows */
    .ur-pg__tablewrap--rooms .ur-pg__table td[data-label] {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        min-height: 44px;
        border-top: 1px solid var(--ur-hairline-2);
        font-size: .9rem;
        text-align: right;
    }

    .ur-pg__tablewrap--rooms .ur-pg__table td[data-label]::before {
        content: attr(data-label);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--ur-muted);
    }

    .ur-pg__tablewrap--rooms .ur-pg__table td.ur-pg__cell-r {
        grid-column: 1 / -1;
        padding-top: .5rem;
    }

    .ur-pg__tablewrap--rooms .ur-pg__imgbtn {
        justify-content: center;
        width: 100%;
    }

    /* Full rooms: the 50% fade dropped text below readable contrast. The card goes
       cream and says Full in brand ink instead. */
    .ur-pg__tablewrap--rooms tbody tr.is-full {
        background: var(--ur-cream);
    }

    .ur-pg__tablewrap--rooms .ur-pg__table tr.is-full td {
        opacity: 1;
    }

    .ur-pg__tablewrap--rooms tr.is-full .ur-pg__rent {
        color: var(--ur-muted);
    }

    .ur-pg__tablewrap--rooms .ur-pg__full {
        font-weight: 600;
        color: var(--ur-brand-deep);
    }
}

/* Narrow phones: label + bar + "1 of 4 free" overflowed the card by ~30px at 330
   and only just fits at 360. The bar only restates the text beside it. */
@media only screen and (max-width: 370px) {
    .ur-pg__tablewrap--rooms .ur-pg__bedbar {
        display: none;
    }
}

/* ---------- Included / excluded ---------- */
.ur-pg__incl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ur-pg__incl li {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .9rem 1rem;
    border: 1px solid var(--ur-hairline);
    border-radius: var(--ur-r-sm);
    background: var(--ur-cream);
    font-size: .87rem;
    line-height: 1.5;
    color: var(--ur-ink);
}

.ur-pg__incl li:has(.ur-pg__mark--yes) {
    border-color: rgba(107, 127, 110, .35);
    background: rgba(107, 127, 110, .08);
}

/* Holds a category icon (cutlery / bolt / wrench / tint) rather than the bare
   check-or-cross it used to carry. The plate is the state: sage when included,
   quiet grey when not. 20px was sized for a text glyph and left an icon
   illegible, so it steps up to 28. */
.ur-pg__mark {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-top: .05rem;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

    .ur-pg__mark .fa {
        line-height: 1;
    }

.ur-pg__mark--yes {
    background: var(--ur-sage);
    color: #fff;
}

.ur-pg__mark--no {
    background: rgba(28, 25, 23, .07);
    color: var(--ur-muted);
}

.ur-pg__incl b {
    display: block;
    font-weight: 600;
    color: var(--ur-espresso);
}

.ur-pg__incl span {
    color: var(--ur-muted);
}

/* The plate is a span too, so the rule above was painting the white glyph on the
   sage plate muted-on-sage - the included rows read as empty circles. */
.ur-pg__incl .ur-pg__mark--yes {
    color: #fff;
}

/* ---------- Fact grid: house rules, tenancy ---------- */
/* Three fixed columns - auto-fit at 160px put five in a row and left the sixth house
   rule alone on a second. Each cell hangs 1px past the right and bottom so the edge
   cells' dividers slip under the clip instead of doubling the outer border. */
.ur-pg__facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    border: 1px solid var(--ur-hairline);
    border-radius: var(--ur-r-md);
    overflow: hidden;
    background: #fff;
}

.ur-pg__fact {
    margin: 0 -1px -1px 0;
    padding: 1.05rem 1.15rem;
    border-right: 1px solid var(--ur-hairline);
    border-bottom: 1px solid var(--ur-hairline);
}

/* sentence case - uppercase and tracked, the long labels wrapped to two lines and
   dropped their value out of line with the rest of the row */
.ur-pg__fact dt {
    margin: 0 0 .3rem;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
    color: var(--ur-brand-deep);
}

.ur-pg__fact dd {
    margin: 0;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--ur-espresso);
}

    /* yes / no rules lead with a tick or cross, sage and grey as in What's included */
    .ur-pg__fact dd .fa {
        margin-right: .45rem;
        font-size: .85em;
    }

.ur-pg__yes {
    color: var(--ur-sage);
}

.ur-pg__no {
    color: var(--ur-muted);
}

/* ---------- Distances ---------- */
/* Two columns across the card - a single half-width list left the other half empty */
.ur-pg__dist {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    column-gap: 2.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ur-pg__dist li {
    display: flex;
    align-items: baseline;
    gap: .85rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--ur-hairline-2);
    font-size: .88rem;
    color: var(--ur-ink);
}


.ur-pg__distkm {
    margin-left: auto;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1rem;
    color: var(--ur-brand-deep);
    white-space: nowrap;
}

/* ---------- Map ----------
   Closes the left column under Getting around. It used to be the pinned card in
   the right rail; the enquiry form has that job now. */
.ur-pg__map {
    width: 100%;
    height: 340px;
    border-radius: var(--ur-r-md);
    border: 1px solid var(--ur-hairline);
    z-index: 0;
}

.ur-pg__mapnote {
    margin: .85rem 0 0;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--ur-muted);
}

.ur-pg__mapnote i {
    color: var(--ur-brand);
}

@media (min-width: 992px) {
    .ur-pg__side {
        position: sticky;
        top: 96px;
    }

    /* No trailing margin on the card, so the pinned card's floor is the left
           column's bottom edge and it never hangs below it. */
    .ur-pg__side .ur-host {
        margin-bottom: 0;
    }

    /* the sidebar ad sits above in normal flow; this is the gap between the two */
    .ur-adside+.ur-pg__side {
        margin-top: 1.25rem;
    }
}

/* ---------- Enquiry card ----------
   The action, on the same plate as the lister card above the gallery so the two
   read as one family. This is the card that gets pinned in the rail: the map is
   reference and can scroll away, the way to make contact cannot.
   Inputs keep the theme's .sasw_list geometry (52px, a real touch target) and
   take the design system's face and hairline on top. */
.ur-host--enq .ur-host__name {
    margin-bottom: 1.1rem;
    font-size: 1.2rem;
}

.ur-host--enq .sasw_list {
    padding: 0;
    list-style: none;
}

.ur-host--enq .search_area .form-group {
    margin-bottom: .55rem;
}

.ur-host--enq .form-control {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: .88rem;
    border-color: var(--ur-hairline);
    border-radius: var(--ur-r-sm);
    color: var(--ur-ink);
}

.ur-host--enq textarea.form-control {
    padding: .6rem 1rem;
    line-height: 1.6;
}

.ur-host--enq .form-control:focus {
    border-color: var(--ur-brand);
    box-shadow: 0 0 0 3px rgba(255, 90, 95, .12);
}

.ur-host--enq .search_option_button .btn {
    min-height: 48px;
}

/* The sent state, carrying the server's own message - the toast is gone in two
   and a half seconds and the form it emptied would otherwise look untouched. */
.ur-enq__done {
    margin: 0 0 1rem;
    padding: .7rem .9rem;
    border: 1px solid rgba(107, 127, 110, .35);
    border-radius: var(--ur-r-sm);
    background: rgba(107, 127, 110, .1);
    font-size: .84rem;
    line-height: 1.5;
    color: var(--ur-sage);
}

/* the jump to the form, on the lister card beside the gallery */
.ur-host__cta {
    margin-top: .35rem;
}

/* ---------- Mobile action bar ----------
   Under 992px the price leaves with the head card and the enquiry card is the
   last thing on the page, so the bar keeps both within reach. Fixed, so the
   body owes it the height back - scoped with :has so no other page pays it. */
.ur-pg__bar {
    display: none;
}

@media only screen and (max-width: 991px) {
    .ur-pg__bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .55rem 1rem;
        padding-bottom: calc(.55rem + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--ur-hairline);
        background: #fff;
        box-shadow: 0 -14px 30px -22px rgba(28, 25, 23, .6);
    }

    .ur-pg__bar .ur-pg__pricefrom {
        margin-bottom: .1rem;
    }

    .ur-pg__bar .ur-pg__price {
        font-size: 1.3rem;
    }

    .ur-pg__bar__cta {
        flex: 0 0 auto;
        min-height: 44px;
        padding: .6rem 1.25rem !important;
        font-size: .88rem;
    }

    body:has(.ur-pg__bar) {
        padding-bottom: 74px;
    }

    /* the theme's back-to-top button is fixed at bottom:15px with z-index 99999,
       so it landed on top of the bar's own button. Lift it clear of the bar. */
    body:has(.ur-pg__bar) a.scrollToHome {
        bottom: 84px;
    }
}

/* ---------- Report link ---------- */
.ur-pg__report {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    margin: 1.25rem 0 2.25rem;
    padding: .9rem 1.1rem;
    border: 1px dashed var(--ur-hairline);
    border-radius: var(--ur-r-sm);
    font-size: .83rem;
    color: var(--ur-muted);
}

.ur-pg__report button {
    padding: 0;
    border: 0;
    background: none;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: .83rem;
    font-weight: 500;
    color: var(--ur-espresso);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

/* ---------- Demo banner ----------
   Deliberately loud. It disappears with the seed block in PG_Details.cshtml. */
.ur-pg__demo {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin-bottom: 1.25rem;
    padding: .7rem 1rem;
    border: 1px dashed var(--ur-brand);
    border-radius: var(--ur-r-sm);
    background: rgba(255, 90, 95, .05);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--ur-brand-deep);
}

@media only screen and (max-width: 767px) {
    .ur-pg__pricemeta {
        margin-left: 0;
    }

    .ur-pg__map {
        height: 240px;
    }

    .ur-pg__facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ur-pg__fact {
        padding: .9rem 1rem;
    }

    /* 14px wraps "Non-vegetarian food" in a two-column phone cell */
    .ur-pg__fact dt {
        font-size: 13px;
    }
}




/* ============================================================
   Error page (Home/Error)
   Typographic: a giant display-face code in brand red carries
   the page, the theme's cartoon illustration is gone. Copy is
   measured at 78ch; actions and quick links route straight back
   into the listings.
   ============================================================ */

.ur-err {
    background: var(--ur-cream);
    padding: clamp(3.5rem, 9vw, 7.5rem) 0 clamp(3.5rem, 8vw, 6.5rem);
}

.ur-err__box {
    max-width: 78ch;
    margin: 0 auto;
    text-align: center;
}

.ur-err__code {
    margin: .25rem 0 0;
    font-family: 'Fraunces', Georgia, serif;
    font-optical-sizing: auto;
    font-size: clamp(6rem, 22vw, 14rem);
    font-weight: 500;
    font-style: italic;
    letter-spacing: -.05em;
    line-height: .9;
    color: var(--ur-brand);
    text-shadow: 0 24px 60px rgba(255, 90, 95, .25);
}

.ur-err h1 {
    margin: .75rem 0 1rem;
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(1.6rem, 3.4vw, 2.6rem);
    font-weight: 500;
    line-height: 1.15;
    color: var(--ur-espresso);
}

.ur-err__lead {
    max-width: 52ch;
    margin: 0 auto;
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--ur-muted);
}

.ur-err__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
    margin-top: 2rem;
}

.ur-err__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-top: 2.25rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--ur-hairline);
}

.ur-err__chips a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .45rem 1.05rem;
    border: 1px solid var(--ur-hairline);
    border-radius: 999px;
    background: #fff;
    color: var(--ur-ink);
    font-size: .85rem;
    transition: transform .18s var(--ur-ease), border-color .18s var(--ur-ease), color .18s var(--ur-ease);
}

.ur-err__chips a:hover {
    color: var(--ur-brand-deep);
    border-color: rgba(255, 90, 95, .45);
}

@media only screen and (max-width: 767px) {
    .ur-err__actions .ur-cta {
        width: 100%;
        justify-content: space-between;
    }
}


/* ============================================================
   Range slider (listing filters)
   Two native <input type="range"> on one track. The inputs are
   transparent and click-through; only their thumbs take the
   pointer, so either handle can be grabbed wherever it sits.
   ============================================================ */

.ur-range {
    padding: .1rem 0 .2rem;
}

.ur-range__vals {
    display: flex;
    justify-content: space-between;
    margin-bottom: .55rem;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1rem;
    color: var(--ur-espresso);
}

.ur-range__track {
    position: relative;
    height: 22px;
    margin: 0 9px;
}

.ur-range__track::before {
    content: "";
    position: absolute;
    left: -9px;
    right: -9px;
    top: 50%;
    height: 4px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: rgba(28, 25, 23, .1);
}

.ur-range__fill {
    position: absolute;
    top: 50%;
    height: 4px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: var(--ur-brand);
    pointer-events: none;
}

.ur-range__track input[type="range"] {
    position: absolute;
    left: -9px;
    right: -9px;
    top: 0;
    width: calc(100% + 18px);
    height: 22px;
    margin: 0;
    padding: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
    outline: none;
}

.ur-range__track input[type="range"]::-webkit-slider-runnable-track {
    background: transparent;
    height: 22px;
}

.ur-range__track input[type="range"]::-moz-range-track {
    background: transparent;
    height: 22px;
}

.ur-range__track input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border-radius: 50%;
    border: 2px solid var(--ur-brand);
    background: #fff;
    box-shadow: 0 2px 6px rgba(28, 25, 23, .2);
    cursor: grab;
    pointer-events: auto;
}

.ur-range__track input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--ur-brand);
    background: #fff;
    box-shadow: 0 2px 6px rgba(28, 25, 23, .2);
    cursor: grab;
    pointer-events: auto;
}

.ur-range__track input[type="range"]:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px rgba(255, 90, 95, .25);
}

.ur-range__track input[type="range"]:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 4px rgba(255, 90, 95, .25);
}


/* ==========================================================================
   SPONSORED SLOTS
   One card component (_ListAdv) serves both placements - the in-list banner
   between property cards and the sidebar card - so an ad reads as a sibling
   of the listing cards rather than a foreign block. It rides the same
   .feat_property.list tray, so tray tint, hairline, radius and bezel all come
   from the card rules above and stay in step if those change.

   Sizing comes from the API's own Widht/Height as an inline aspect-ratio on
   the plate. That was the point of the redesign: the old slot forced every
   creative into a fixed height:250px box, which squashed anything that was
   not roughly 5:1, and reserved no space, so the list jumped as each ad
   loaded. The ratio box does both jobs at once.
   ========================================================================== */
/* the theme makes .feat_property.list a flex row for the photo|details card.
   an ad is a single plate, so it has to stay a block - as a flex item the link
   has no intrinsic width and collapses to 0. needs both classes in the selector
   to outrank .feat_property.list. */
.feat_property.list.ur-adcard {
    display: block;
    margin-bottom: 0;
}

.ur-adcard .ur-adcard__link {
    position: relative;
    display: block;
    text-decoration: none;
    /* contain the label's z-index, or it paints over the open mobile menu */
    isolation: isolate;
}

/* the inner plate: same inset radius the card photo uses */
.ur-adcard .ur-adcard__plate {
    display: block;
    overflow: hidden;
    border-radius: calc(var(--ur-r-lg) - var(--ur-bezel));
    background: var(--ur-cream-2);
    /* a portrait creative would otherwise run the full viewport height */
    max-height: 26rem;
}

.ur-adcard .banneradv-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .18s var(--ur-ease);
}

.ur-adcard:hover .banneradv-img {
    transform: none;
}

/* Disclosure. An ad sits in the same shell as a listing card, so it has to
       say what it is - this is the only thing telling the two apart. */
.ur-adcard .ur-adcard__label {
    position: absolute;
    top: .75rem;
    left: .75rem;
    z-index: 2;
    padding: .25rem .5rem;
    border-radius: 999px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: .625rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ur-cream);
    background: rgba(28, 25, 23, .62);
}

/* Landing page placement: an ad band between sections, aligned to .container so
   it sits on the same measure as the rails above and below it. Replaces a
   one-slide Bootstrap 5 carousel that never initialised on this Bootstrap 4 page. */
.ur-adband {
    padding: 1.875rem 0;
    /* The mobile nav panel is position:fixed at z-index 0, so it sits behind the page
       permanently - not just while open. Every other section sets its own ground and
       hides it; a transparent band let the menu items show through around the ad.
       Matches the body ground, so it reads as no band at all. */
    background: var(--ur-cream);
    position: relative;
}

/* Sidebar placement. The slot reuses the theme's sidebar wrapper markup, which is
   styled as the filter panel's enclosure: tray, white plate, 1.5rem of padding. An
   ad carries its own tray from _ListAdv, so that chrome nested a box in a box in a
   box and, on a phone where the column goes full width, ate ~48px of the measure. */
.ur-adside .sidebar_listing_list {
    background: transparent !important;
    border: 0;
    padding: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0;
}

.ur-adside .sidebar_advanced_search_widget {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0 !important;
}

.ur-adside .ur-adcard+.ur-adcard {
    margin-top: .75rem;
}

/* aspect-ratio carries the plate's 26rem height cap over to its width, so in any
   column wider than that (the ladder from 1500px up) the plate stopped short and
   sat in the left of a full-width tray. Cap the tray to the same 26rem and centre
   it, so the tray is the ad. Below 991px the 300px rule further down takes over. */
.ur-adside .ur-adcard {
    max-width: 26rem;
    margin-left: auto;
    margin-right: auto;
}

/* Directory placement: the ad takes one slot in the 3-up advisor grid, so the
   plate fills the tile height instead of following the creative's own ratio. */
.ur-adslot--tile .ur-adcard,
.ur-adslot--tile .ur-adcard .ur-adcard__link,
.ur-adslot--tile .ur-adcard .ur-adcard__plate {
    height: 100%;
}

.ur-adslot--tile .ur-adcard .ur-adcard__plate {
    aspect-ratio: auto !important;
    min-height: 15rem;
    max-height: none;
}

@media only screen and (max-width: 767px) {
    .ur-adcard .ur-adcard__plate {
        max-height: 18rem;
    }

    .ur-adcard .ur-adcard__label {
        top: .5rem;
        left: .5rem;
        font-size: .5625rem;
    }

}

/* The filter column is full width up to 991px (col-lg-4), so the sidebar ad sits in
   normal flow above the results on phones and on an iPad in portrait. */
@media only screen and (max-width: 991px) {

    /* give it the same rhythm as a card */
    .ur-adside {
        margin-bottom: 1.35rem;
    }

    /* A CardAd is authored square at 300px. Left alone the creative was upscaled
           to the full measure - blurry on a phone, and at 768-991 the 26rem plate cap
           left it sitting in the left half of a 690px tray next to a blank slab. Hold
           it at its native size and centre it. */
    .ur-adside .ur-adcard {
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
    }

    /* square creative, so the global plate cap would crop it - let it be square */
    .ur-adside .ur-adcard__plate {
        max-height: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .ur-adcard .banneradv-img,
    .ur-adcard:hover .banneradv-img {
        transition: none;
        transform: none;
    }
}

/* ==========================================================================
   LARGE SCREENS
   Bootstrap 4's container ladder ends at min-width:1200px -> 1170px, and
   nothing in the theme adds a tier above it. So a 1280px laptop and a 2560px
   monitor both render the same 1170px column: at 2038px that is 57% of the
   viewport with 434px of dead margin down each side, while the full-bleed
   bands behind it stretch edge to edge. Continue the ladder instead of going
   edge-to-edge, so the measure grows with the screen but still has margins.
   ========================================================================== */

@media (min-width: 1500px) {
    .container {
        max-width: 1360px;
    }

    /* Widening the container lengthens the text lines with it. These two pages
       are the only prose-heavy ones - About ran to 215 characters per line and
       the guide steps to 143. Cap the measure on big screens only, so the
       laptop and phone layouts are untouched. */
    .ur-ab-body p,
    .ur-ab-card p,
    .ur-gd-sec p,
    .ur-gd-steps li {
        max-width: 78ch;
    }

    .ur_cards_sec.maxw1600,
    section.feature-property.maxw1600 {
        max-width: 1360px !important;
    }
}

@media (min-width: 1800px) {
    .container {
        max-width: 1560px;
    }

    .ur_cards_sec.maxw1600,
    section.feature-property.maxw1600 {
        max-width: 1560px !important;
    }
}

@media (min-width: 2200px) {
    .container {
        max-width: 1760px;
    }

    .ur_cards_sec.maxw1600,
    section.feature-property.maxw1600 {
        max-width: 1760px !important;
    }
}

/* ==========================================================================
   PROPERTY LISTING CARD
   One block for the residential, commercial and PG list cards - .ur-plcard
   sits on all three wrappers alongside their own .ur-rcard/.ur-ccard/.ur-pgcard
   hook. Lived as a copy in each of the three partials until it drifted; PG
   keeps only its divergent rules, in its own partial.
   ========================================================================== */

.ur-plcard {
    display: block;
    margin-bottom: 1.35rem;
    cursor: default;
}

.ur-plcard .feat_property.list {
    align-items: stretch;
    overflow: hidden;
}

/* ---------- Photo ---------- */
.ur-plcard .feat_property.list .thumb {
    position: relative;
    margin: 0;
    overflow: hidden;
    background-color: var(--ur-cream-2);
    cursor: default;
}

.ur-plcard .feat_property.list .thumb::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(28, 25, 23, .34) 0%, rgba(28, 25, 23, 0) 28%, rgba(28, 25, 23, 0) 62%, rgba(28, 25, 23, .30) 100%);
}

.ur-plcard .feat_property.list .thumb .property-img {
    display: block;
    width: 100% !important;
    object-fit: cover;
}

.ur-plcard .feat_property .thumb .thmb_cntnt {
    z-index: 2;
    top: 14px;
    right: 14px;
    bottom: 0;
    left: 14px;
}

/* ---------- Glass tag chips ---------- */
.ur-plcard .feat_property .thumb .thmb_cntnt ul.tag {
    top: 0;
    left: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}

.ur-plcard .feat_property .thumb .thmb_cntnt ul.tag li,
.ur-plcard .feat_property .thumb .thmb_cntnt ul.tag li:first-child,
.ur-plcard .feat_property .thumb .thmb_cntnt ul.tag li:last-child {
    display: inline-block !important;
    width: auto;
    height: auto;
    margin: 0;
    line-height: 1;
    border-radius: 999px;
    background-color: transparent !important;
}

.ur-plcard .feat_property .thumb .thmb_cntnt ul.tag li a {
    display: inline-block;
    padding: .45rem .75rem;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 999px;
    background-color: rgba(28, 25, 23, .72);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
}

/* ---------- Shortlist heart ---------- */
.ur-plcard .feat_property .thumb .thmb_cntnt .icon {
    right: 0;
    bottom: 14px;
    display: flex;
}

.ur-plcard .feat_property .thumb .thmb_cntnt .icon li {
    width: 40px;
    height: 40px;
    margin: 0;
    line-height: 40px;
    opacity: 1;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 999px;
    background-color: rgba(28, 25, 23, .72);
    box-shadow: 0 4px 16px -7px rgba(28, 25, 23, .6);
    transition: transform .18s var(--ur-ease), background-color .18s var(--ur-ease);
}

.ur-plcard .feat_property .thumb .thmb_cntnt .icon li:hover {
    background-color: rgba(28, 25, 23, .9);
}

.ur-plcard .feat_property .thumb .thmb_cntnt .icon li:active {
    transform: none;
}

.ur-plcard .like-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.ur-plcard .like-card .checkmark {
    position: relative;
    top: auto;
    left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
}

.ur-plcard .like-card .checkmark svg {
    display: block;
    width: 21px;
    height: 21px;
}

/* ---------- Details plate ---------- */
.ur-plcard .feat_property.list .details .tc_content {
    position: relative;
    padding: 1.55rem 1.5rem .3rem;
}

/* Price as hero */
.ur-plcard .feat_property.list .dtls_headr {
    display: block;
    margin-bottom: 1rem;
}

.ur-plcard .feat_property.list .dtls_headr a.fp_price {
    position: static;
    right: auto;
    display: block;
    line-height: 1;
    text-decoration: none !important;
    cursor: default;
}

.ur-plcard .ur_amount {
    font-family: 'Fraunces', Georgia, serif;
    font-optical-sizing: auto;
    font-size: clamp(1.55rem, 2.1vw, 2rem);
    font-weight: 500;
    letter-spacing: -.025em;
    line-height: 1;
    color: var(--ur-espresso);
}

.ur-plcard .ur_per {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11px !important;
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--ur-muted);
}

.ur-plcard .ur_ondemand {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.3rem;
    font-weight: 400;
    letter-spacing: -.015em;
    color: var(--ur-espresso);
}

.ur-plcard .ur_deposit {
    display: block;
    margin: .5rem 0 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--ur-muted);
}

.ur-plcard .ur_deposit b {
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--ur-ink);
}

/* Kicker + title + place */
.ur-plcard .tc_content .ur_kicker {
    margin: 0 0 .6rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--ur-muted);
}

.ur-plcard .feat_property .details .tc_content h4 {
    margin: 0 0 .55rem;
    font-family: 'Fraunces', Georgia, serif;
    font-optical-sizing: auto;
    font-size: clamp(1.05rem, 1.5vw, 1.32rem);
    font-weight: 400;
    letter-spacing: -.018em;
    line-height: 1.28;
    color: var(--ur-espresso);
}

.ur-plcard .tc_content h4>a {
    position: relative;
    display: inline-block;
    max-width: 100%;
    color: var(--ur-espresso) !important;
    text-decoration: none !important;
}

.ur-plcard .tc_content h4>a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -.16em;
    left: 0;
    height: 1px;
    background-color: var(--ur-espresso);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .18s var(--ur-ease);
}

.ur-plcard .tc_content h4>a:hover::after,
.ur-plcard .feat_property.list:hover .tc_content h4>a::after {
    transform: scaleX(1);
}

.ur-plcard .tc_content h4>a .propertytitle {
    text-decoration: none !important;
}

.ur-plcard .tc_content .ur_place {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 1rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: .005em;
    line-height: 1.4;
    color: var(--ur-muted);
}

.ur-plcard .tc_content .ur_place .flaticon-placeholder {
    font-size: 11px;
    color: var(--ur-brand);
}

/* Specs */
.ur-plcard .tc_content .ur_specs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.6rem;
    margin: 0;
    padding: .9rem 0 .1rem;
    border-top: 1px solid var(--ur-hairline-2);
    list-style: none;
}

.ur-plcard .tc_content .ur_specs li {
    margin: 0;
    padding: 0;
}

.ur-plcard .ur_spec {
    display: inline-flex;
    align-items: baseline;
    gap: .4rem;
}

.ur-plcard .ur_spec_v {
    font-family: 'Fraunces', Georgia, serif;
    font-optical-sizing: auto;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -.01em;
    line-height: 1;
    color: var(--ur-espresso);
}

.ur-plcard .ur_spec_k {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--ur-muted);
}

/* ---------- Footer ---------- */
.ur-plcard .feat_property .details .fp_footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Never wrap - the name column flexes and clamps; avatar and CTA keep their size. */
    flex-wrap: nowrap;
    gap: .85rem 1rem;
    width: 100%;
    margin-top: .95rem;
    padding: 1rem 1.5rem 1.15rem;
    border-top: 1px solid var(--ur-hairline-2);
}

.ur-plcard .feat_property .details .fp_footer .fp_meta {
    display: flex;
    align-items: center;
    gap: .7rem;
    float: none;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.ur-plcard .feat_property .details .fp_footer .fp_meta li {
    margin: 0;
    vertical-align: middle;
    min-width: 0;
}

/* the avatar is a flex item too, and must not shrink */
.ur-plcard .feat_property .details .fp_footer .fp_meta li:first-child {
    flex: 0 0 auto;
}

.ur-plcard .feat_property .details .fp_footer>div {
    flex: 0 0 auto;
}

.ur-plcard .feat_property .details .fp_footer .fp_meta img {
    border: 1px solid var(--ur-hairline);
    box-shadow: var(--ur-inner-hi);
}

.ur-plcard .ur_lister_k {
    display: block;
    margin-bottom: .15rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--ur-muted);
}

.ur-plcard .companyName {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ur-espresso);
}

.ur-plcard .fp_pdate {
    float: none !important;
    margin: 0 !important;
}

.ur-plcard .ur-cta {
    gap: .55rem;
    padding: .4rem .4rem .4rem 1.15rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none !important;
    cursor: pointer;
}

.ur-plcard .ur-cta__ico {
    width: 1.75rem;
    height: 1.75rem;
    font-size: .8rem;
    letter-spacing: 0;
}

.ur-plcard .ur-cta:hover .ur-cta__ico {
    transform: none;
}

/* ---------- Transit rail ---------- */
.ur-plcard .ur_transit {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: .6rem 0 0;
    padding: 0 .4rem;
}

.ur-plcard .ur_transit_pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .42rem .85rem;
    border: 1px solid var(--ur-hairline);
    border-radius: 999px;
    background-color: rgba(255, 255, 255, .55);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--ur-muted);
    transition: transform .18s var(--ur-ease), border-color .18s var(--ur-ease);
}

.ur-plcard .ur_transit_pill:hover {
    border-color: rgba(28, 25, 23, .18);
}

.ur-plcard .ur_transit_pill .fa {
    font-size: 11px;
    font-weight: 400;
    opacity: .5;
}

.ur-plcard .ur_transit_pill b {
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--ur-espresso);
}

/* ---------- PG card (PropListings/_PGCard) ----------
   PG-only rules; everything else the card needs is .ur-plcard above. Lived in
   PropListings/_PG until the card also rendered on /Search/Index. */

.ur-pgcard .ur_from {
    display: block;
    margin-bottom: .35rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px !important;
    font-weight: 600;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--ur-muted);
}

/* ---------- Sharing chips ---------- */
.ur-pgcard .tc_content .ur_sharing_list {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    margin: 0;
    padding: .9rem 0 .1rem;
    border-top: 1px solid var(--ur-hairline-2);
    list-style: none;
}

    .ur-pgcard .tc_content .ur_sharing_list li {
        margin: 0;
        padding: 0;
    }

.ur-pgcard .ur_sharing_chip {
    display: inline-flex;
    align-items: baseline;
    gap: .45rem;
    margin: 0;
    padding: .42rem .8rem;
    border: 1px solid var(--ur-hairline);
    border-radius: 999px;
    background-color: #fff;
    transition: transform .18s var(--ur-ease), border-color .18s var(--ur-ease), box-shadow .18s var(--ur-ease);
}

    .ur-pgcard .ur_sharing_chip:hover {
        transform: none;
        border-color: rgba(28,25,23,.2);
        box-shadow: 0 8px 18px -12px rgba(28,25,23,.55);
    }

.ur-pgcard .ur_chip_k {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--ur-muted);
}

.ur-pgcard .ur_sharing_more {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--ur-muted);
}

@media (max-width: 767.98px) {
    .ur-pgcard .fp_price {
        font-size: 1.25rem !important;
    }
}

/* ---------- Horizontal layout (theme stacks the card below 768) ---------- */
@media (min-width: 768px) {
    .ur-plcard .feat_property.list {
        gap: .45rem;
    }

    .ur-plcard .feat_property.list .thumb {
        flex: 0 0 40%;
        width: 40%;
    }

    .ur-plcard .feat_property.list .thumb .property-img {
        height: 100%;
        min-height: 246px;
    }

    .ur-plcard .feat_property.list .details {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    .ur-plcard .feat_property.list .details .tc_content {
        padding-right: 200px;
    }

    .ur-plcard .feat_property.list .dtls_headr {
        position: absolute;
        top: 1.55rem;
        right: 1.5rem;
        width: 178px;
        margin-bottom: 0;
        text-align: right;
    }
}

/* Phone - most of the traffic. Photo-first card: the photo gets a real frame, the
   text below collapses to price / title / place / one chip row / one-line footer,
   and the whole card is the tap target. */
@media (max-width: 767.98px) {
    .ur-plcard .feat_property.list .thumb .property-img {
        height: auto !important;
        min-height: 0 !important;
        max-height: 320px !important;
        aspect-ratio: 16 / 10;
    }

    .ur-plcard .feat_property.list .details .tc_content {
        padding: .85rem .95rem 0 !important;
    }

    /* Price rides on the photo as a glass pill, bottom-left, level with the heart.
       Absolute against .tc_content, whose top edge is the photo's bottom edge. */
    .ur-plcard .feat_property.list .dtls_headr {
        margin: 0;
    }

    .ur-plcard .feat_property.list .dtls_headr a.fp_price {
        position: absolute;
        bottom: calc(100% + 14px);
        left: 14px;
        z-index: 2;
        display: inline-flex;
        align-items: baseline;
        max-width: calc(100% - 84px);
        padding: .625rem .9rem;
        border: 1px solid rgba(255, 255, 255, .26);
        border-radius: 999px;
        background-color: rgba(28, 25, 23, .72);
        pointer-events: none;
    }

    .ur-plcard .dtls_headr .ur_amount {
        font-size: 1.15rem !important;
        color: #fff;
    }

    .ur-plcard .dtls_headr .ur_ondemand {
        font-size: 1rem;
        color: #fff;
    }

    .ur-plcard .dtls_headr .ur_per,
    .ur-plcard.ur-pgcard .dtls_headr .ur_from {
        color: rgba(255, 255, 255, .78);
    }

    .ur-plcard.ur-pgcard .dtls_headr .ur_from {
        display: inline;
        margin: 0 .35rem 0 0;
    }

    .ur-plcard .feat_property .details .tc_content h4 {
        margin-bottom: .3rem;
        font-size: 1.1rem !important;
    }

    .ur-plcard .tc_content .ur_place {
        margin-bottom: .7rem;
    }

    /* Specs and sharing chips: no hairline of their own - the footer's separates */
    .ur-plcard .tc_content .ur_specs,
    .ur-plcard.ur-pgcard .tc_content .ur_sharing_list {
        gap: .4rem 1.1rem;
        padding: 0;
        border-top: 0;
    }

    .ur-plcard.ur-pgcard .tc_content .ur_sharing_list {
        gap: .4rem;
    }

    /* Footer: one line - avatar, name + Owner/Broker tag, CTA */
    .ur-plcard .feat_property .details .fp_footer {
        margin-top: .8rem;
        padding: .6rem .95rem .7rem !important;
        gap: .6rem;
    }

    .ur-plcard .feat_property .details .fp_footer .fp_meta {
        gap: .55rem;
    }

    .ur-plcard .feat_property .details .fp_footer .fp_meta li:last-child {
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-end;
        align-items: center;
        gap: .4rem;
    }

    /* "Listed by" stays in the markup for screen readers; the tag says it visually */
    .ur-plcard .ur_lister_k {
        flex: 0 0 auto;
        margin: 0;
        font-size: 0;
        line-height: 1;
    }

    .ur-plcard .ur_lister_k .ur_lister_tag {
        margin: 0;
        font-size: 10px;
    }

    .ur-plcard .companyName {
        min-width: 0;
        -webkit-line-clamp: 1;
        font-size: 13px;
    }

    /* The whole card opens the listing, so the CTA shrinks to its arrow - a 44px
       target; the label stays for screen readers */
    .ur-plcard .ur-cta {
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 999px;
    }

    .ur-plcard .ur-cta__ico,
    .ur-plcard .ur-cta:hover .ur-cta__ico {
        background: transparent;
        font-size: .95rem;
    }

    .ur-plcard .ur-cta > span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    /* Whole card is the tap target: the CTA's ::before stretches over the card.
       The positioned wrappers between it and .feat_property go static so the
       overlay anchors to the card, and the photo overlay passes taps through to
       it - only the shortlist heart stays above. The CTA keeps its href/onclick,
       so a guest still gets the login popup. .tc_content is a sibling of the
       footer, not an ancestor of the CTA, so it stays relative for the price pill. */
    .ur-plcard .feat_property.list .details,
    .ur-plcard .feat_property .details .fp_footer {
        position: static;
    }

    .ur-plcard .feat_property.list .ur-cta::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
    }

    /* the press scale would shrink the overlay to the button mid-tap */
    .ur-plcard .feat_property.list .ur-cta:active {
        transform: none !important;
    }

    .ur-plcard .feat_property .thumb .thmb_cntnt {
        pointer-events: none;
    }

    .ur-plcard .feat_property .thumb .thmb_cntnt .icon {
        z-index: 2;
        pointer-events: auto;
    }

    /* Transit distances are supporting detail - drop them on phones. */
    .ur-plcard .ur_transit {
        display: none;
    }
}

/* ==========================================================================
   BROKER CARD (Users/_card)
   The rentals list card turned to a person: the same shell as .feat_property.list
   (white, .14 hairline, 1rem radius, bezel padding, lift on hover), a logo tray,
   then who / where / how to reach them and Call | View listings. The tray sits
   beside the body from 768px and above it on phones, as the property photo does.
   ========================================================================== */
.ur-bcard-list {
    width: 100%;
}

.ur-bcard-col {
    margin-bottom: 1.35rem;
}

.ur-bcard {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    padding: var(--ur-bezel);
    background: #fff;
    border: 1px solid rgba(28, 25, 23, .14);
    border-radius: var(--ur-r-lg);
    transition: box-shadow .18s var(--ur-ease);
}

    .ur-bcard:hover {
        box-shadow: var(--ur-shadow-lift);
    }

.ur-bcard__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    border-radius: calc(var(--ur-r-lg) - var(--ur-bezel));
    background-color: var(--ur-muted);
}

    .ur-bcard__media img {
        width: 120px;
        height: 120px;
        border-radius: 999px;
        object-fit: cover;
        background-color: #fff;
        box-shadow: 0 0 0 4px var(--ur-cream);
    }

/* the rental card's photo tags */
.ur-bcard__tag {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: .45rem .75rem;
    border-radius: 999px;
    background-color: rgba(28, 25, 23, .72);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
}

.ur-bcard__body {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    min-width: 0;
    padding: 1.1rem 1.25rem 1rem;
}

/* sits at the left of the button row, pushing Call | View listings right */
.ur-bcard__city {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
    margin: 0 auto 0 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ur-muted);
}

    .ur-bcard__city .flaticon-placeholder {
        font-size: 11px;
        color: var(--ur-brand);
    }

.ur-bcard__name {
    margin: 0;
    font-family: 'Fraunces', Georgia, serif;
    font-optical-sizing: auto;
    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
    font-weight: 400;
    letter-spacing: -.018em;
    line-height: 1.28;
    color: var(--ur-espresso);
}

    .ur-bcard__name a {
        color: var(--ur-espresso) !important;
        text-decoration: none !important;
    }

        .ur-bcard__name a:hover {
            color: var(--ur-brand-deep) !important;
        }

.ur-bcard__person {
    margin: 0;
    font-size: 13.5px;
    color: var(--ur-muted);
}

.ur-bcard__contact {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.5rem;
    margin: .35rem 0 0;
    padding: 0;
    list-style: none;
}

    .ur-bcard__contact li {
        min-width: 0;
        max-width: 100%;
    }

    .ur-bcard__contact a {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        max-width: 100%;
        font-size: 13.5px;
        color: var(--ur-muted);
    }

        .ur-bcard__contact a b {
            font-weight: 600;
            color: var(--ur-ink);
        }

        /* a long address shortens rather than widening the card */
        .ur-bcard__contact a > span:last-child {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .ur-bcard__contact a:hover,
        .ur-bcard__contact a:hover b {
            color: var(--ur-brand-deep);
        }

        .ur-bcard__contact [class^="flaticon-"] {
            font-size: 12px;
        }

/* Call | View listings, pinned to the foot of the body like the rental card's footer */
.ur-bcard__acts {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .6rem;
    margin-top: auto;
    padding-top: .85rem;
    border-top: 1px solid var(--ur-hairline);
}

.ur-bcard__call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 44px;
    padding: 0 1.15rem;
    border: 1px solid rgba(28, 25, 23, .14);
    border-radius: var(--ur-r-sm);
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: var(--ur-ink) !important;
    transition: border-color .18s var(--ur-ease);
}

    .ur-bcard__call:hover {
        border-color: var(--ur-espresso);
    }

    .ur-bcard__call:focus-visible {
        outline: 2px solid var(--ur-espresso);
        outline-offset: 2px;
    }

.ur-bcard__go {
    min-height: 44px;
    padding: .35rem .35rem .35rem 1.15rem;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none !important;
}

    .ur-bcard__go .ur-cta__ico {
        width: 1.75rem;
        height: 1.75rem;
        font-size: .8rem;
        letter-spacing: 0;
    }

/* No Sort on this list, so the count keeps its place beside Refine on tablets and
   phones - the shared toolbar rules hide it there to make room for Sort. */
@media only screen and (max-width: 991px) {
    .ur-brokers .ur-toolbar p.ur-toolbar__count {
        display: block;
        flex: 1 1 auto;
        text-align: right;
    }

    .ur-brokers .ur-toolbar #main2.db-991 {
        flex: 0 0 auto;
    }
}

/* Phones: the tray goes on top as a cream band, the mockup's broker card */
@media only screen and (max-width: 767px) {
    .ur-bcard-col {
        margin-bottom: 12px;
    }

    .ur-bcard {
        grid-template-columns: minmax(0, 1fr);
    }

    .ur-bcard__media {
        min-height: 148px;
    }

        .ur-bcard__media img {
            width: 96px;
            height: 96px;
        }

    .ur-bcard__tag {
        top: 12px;
        left: 12px;
    }

    .ur-bcard__body {
        padding: .9rem .75rem .75rem;
    }

    .ur-bcard__name {
        font-size: 20px;
        line-height: 26px;
    }

    /* contacts stack, each a 44px row to tap */
    .ur-bcard__contact {
        flex-direction: column;
        gap: 0;
        margin-top: .15rem;
    }

        .ur-bcard__contact a {
            min-height: 44px;
            font-size: 14px;
        }

    /* the city takes its own line, then Call a third, View listings two - the
       mockup's pair; with no number View listings takes the row */
    .ur-bcard__acts {
        flex-wrap: wrap;
        padding-top: .75rem;
    }

    .ur-bcard__city {
        flex: 0 0 100%;
        margin: 0 0 .1rem;
    }

    .ur-bcard__call {
        flex: 1 1 0;
    }

    .ur-bcard__go {
        flex: 2 1 0;
        justify-content: center;
    }
}

/* ==========================================================================
   TACTILE FEEDBACK, ACCESSIBILITY FOCUS & SKELETON UTILITIES
   ========================================================================== */

/* ---------- Tactile Micro-Physics ---------- */
.ur-cta:active,
.btn-thm:active,
.ur_nl_btn:active,
.ur-seg__btn:active,
.ur-btn:active,
button.ur_nl_btn:active {
    transform: scale(.98) !important;
    transition: transform .1s var(--ur-ease);
}

/* ---------- Focus Ring Accessibility ----------
   Espresso, not brand: #ff5a5f is 2.95:1 on cream, under the 3:1 a focus
   indicator needs. Espresso is ~17:1 and reads on white cards too. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.ur-cta:focus-visible {
    outline: 2px solid var(--ur-espresso) !important;
    outline-offset: 2px !important;
}

/* ---------- Touch targets (phone) ----------
   Measured at 390px: footer links were 21px tall, socials 38-40px, hero chips 36px,
   the hero and sort dropdowns 22-40px, sheet/photo buttons 34px. Everything a thumb
   is meant to hit gets 44px. Inline links inside a sentence, breadcrumbs and card
   title text are left alone - the card's own CTA is the target there. */
@media only screen and (max-width: 767px) {
    .ur-footer__list > li > a,
    .ur_dir_meta > li > a,
    .ur_nl_chips a,
    .ur-back,
    .main-title .ur-cta,
    .ur_rail_tools .ur-cta,
    .ur-gal__all,
    .ur-pg__imgbtn,
    .ur-pg__report button,
    .ur-mobilenav__ghost,
    .search_option_button .btn {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* bootstrap-select positions its caret against a block button - height only.
       The hero's selects are left alone: that form sets min-height 0 on purpose and
       the whole labelled field is the control. */
    .candidate_revew_select .dropdown > .btn {
        min-height: 44px;
    }

    .ur-footer__social > li > a,
    .ur-ct-social > li > a,
    .ur-sheet-close,
    .custom-popup .custom-header .close,
    .mobile-menu .ur-burger,
    .mobile-menu .ur-mobilebar__user {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px;
        line-height: 44px;
    }
}

/* ---------- Skeleton Loading Utility ---------- */
.ur-skeleton {
    background: linear-gradient(90deg, rgba(28, 25, 23, .04) 25%, rgba(28, 25, 23, .09) 50%, rgba(28, 25, 23, .04) 75%);
    background-size: 200% 100%;
    animation: urShimmer 1.8s infinite ease-in-out;
    border-radius: var(--ur-r-sm);
}

@keyframes urShimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* ==========================================================================
   NOTIFICATIONS - SweetAlert2 v11
   Every alert, confirm and prompt on the site is a Swal.fire, and they are
   fired from ~58 places: the helpers at the top of sitejs/layout.js and
   paneljs/panellayout.js plus ~25 written inline in individual views.
   SweetAlert2 renders the same DOM and the same class names whoever opened
   it, so the whole family is dressed here rather than at the call sites.

   WHY THE RULES HANG OFF body: v11 exposes its own --swal2-* custom
   properties, declared on :root inside sweetalert2.min.css - which the
   layout loads AFTER this file, so a redeclaration on :root would lose on
   the tie. The .swal2-container is always appended to <body>, and on
   inheritance the nearer ancestor wins whatever the stylesheet order is.
   The element rules use a `body ` prefix for the same reason: v11 writes
   its own selectors as div:where(.swal2-container) ..., which :where()
   flattens to almost no specificity, so one class plus body clears it.
   ========================================================================== */

body {
    /* ---- shell ---- */
    --swal2-width: 30rem;
    --swal2-padding: 1.75rem 0;
    --swal2-background: var(--ur-cream);
    --swal2-color: var(--ur-ink);
    --swal2-border: 1px solid var(--ur-hairline);
    --swal2-border-radius: var(--ur-r-lg);
    --swal2-backdrop: rgba(28, 25, 23, .46);
    --swal2-backdrop-transition: background-color .4s var(--ur-ease);
    --swal2-container-padding: 1.25rem;
    --swal2-show-animation: urSwalRise .45s var(--ur-ease-soft);
    /* the hide animation stays SweetAlert2's own - it drives the teardown */

    /* ---- type blocks ---- */
    --swal2-title-padding: 0 1.75rem;
    --swal2-html-container-padding: .7rem 1.75rem 0;

    /* ---- icon: the 5em default ring reads as a mascot, not a mark ---- */
    --swal2-icon-zoom: .62;

    /* ---- actions: brand on confirm and the house slate on cancel, so a
       call site that passes no colours still lands inside the family ---- */
    --swal2-actions-margin: 1.6rem auto 0;
    --swal2-action-button-transition: transform .5s var(--ur-ease), background-color .5s var(--ur-ease), box-shadow .5s var(--ur-ease);
    --swal2-action-button-hover: var(--ur-espresso) 16%;
    --swal2-action-button-active: var(--ur-espresso) 24%;
    --swal2-confirm-button-background-color: var(--ur-brand);
    --swal2-confirm-button-border-radius: var(--ur-r-sm);
    --swal2-cancel-button-background-color: #3e4b66; /* the house cancelButtonColor */
    --swal2-cancel-button-border-radius: var(--ur-r-sm);
    --swal2-deny-button-background-color: var(--ur-brand-deep);
    --swal2-deny-button-border-radius: var(--ur-r-sm);

    /* ---- inputs: the same hairline plate as .ur-auth .form-control ---- */
    --swal2-input-border: 1px solid var(--ur-hairline);
    --swal2-input-border-radius: var(--ur-r-sm);
    --swal2-input-background: #fff;
    --swal2-input-box-shadow: var(--ur-inner-hi);
    --swal2-input-hover-box-shadow: var(--ur-inner-hi);
    --swal2-input-focus-border: 1px solid var(--ur-espresso);
    --swal2-input-focus-box-shadow: 0 0 0 4px rgba(28, 25, 23, .06);
    --swal2-input-transition: border-color .5s var(--ur-ease), box-shadow .5s var(--ur-ease);

    /* ---- the rest ---- */
    --swal2-validation-message-background: rgba(255, 90, 95, .08);
    --swal2-validation-message-color: var(--ur-brand-deep);
    --swal2-footer-border-color: var(--ur-hairline);
    --swal2-footer-color: var(--ur-muted);
    --swal2-timer-progress-bar-background: var(--ur-brand);
    --swal2-close-button-font-size: 1.75rem;
    --swal2-close-button-color: var(--ur-muted);
}

/* The page behind a dialog goes soft rather than simply dark. */
body .swal2-container.swal2-backdrop-show,
body .swal2-container.swal2-noanimation {
    background: rgba(28, 25, 23, .45);
}

/* A dialog taller than the viewport scrolls instead of being clipped - the
   change-password form with a phone keyboard up is the case that needs it. */
body .swal2-container {
    overflow-y: auto;
}

body .swal2-popup {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    box-shadow: var(--ur-shadow-ambient);
}

body .swal2-title {
    font-family: 'Fraunces', Georgia, serif;
    font-optical-sizing: auto;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.18;
    letter-spacing: -.015em;
    color: var(--ur-espresso);
}

body .swal2-html-container {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    font-size: .95rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--ur-muted);
}

/* ---------- Icon: recoloured onto the palette, sage for yes and brand for
     no. There is no amber in the system, so warning borrows the deep brand
     and the neutral marks go espresso / muted. ---------- */
body .swal2-icon {
    margin: .7rem auto 1.3rem;
    border-width: .22em;
}

body .swal2-icon.swal2-success {
    border-color: var(--ur-sage);
    color: var(--ur-sage);
}

body .swal2-icon.swal2-success [class^=swal2-success-line] {
    background-color: var(--ur-sage);
}

body .swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(107, 127, 110, .26);
}

body .swal2-icon.swal2-error {
    border-color: var(--ur-brand);
    color: var(--ur-brand);
}

body .swal2-icon.swal2-error [class^=swal2-x-mark-line] {
    background-color: var(--ur-brand);
}

body .swal2-icon.swal2-warning {
    border-color: var(--ur-brand-deep);
    color: var(--ur-brand-deep);
}

body .swal2-icon.swal2-info {
    border-color: var(--ur-espresso);
    color: var(--ur-espresso);
}

body .swal2-icon.swal2-question {
    border-color: var(--ur-muted);
    color: var(--ur-muted);
}

/* ---------- Actions: the site's pill buttons, same physics as .btn-thm ---------- */
body .swal2-actions {
    gap: .55rem;
    padding: 0 1.75rem;
}

body .swal2-popup .swal2-styled {
    min-height: 2.9rem;
    margin: 0;
    padding: .8rem 1.7rem;
    border-radius: var(--ur-r-sm);
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    font-size: .88rem;
    font-weight: 500;
    letter-spacing: .01em;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset;
}

body .swal2-popup .swal2-styled:hover {
    box-shadow: none;
}

/* One colour scheme for every dialog. Calls that pass their own confirmButtonColor
   (default blue, green/red Yes/No) set it inline, which beat the variables above -
   three schemes across the site. The house pair wins regardless. */
body .swal2-popup .swal2-styled.swal2-confirm {
    background-color: var(--ur-brand) !important;
    color: #fff !important;
}

body .swal2-popup .swal2-styled.swal2-cancel,
body .swal2-popup .swal2-styled.swal2-deny {
    background-color: #3e4b66 !important;
    color: #fff !important;
}

body .swal2-popup .swal2-loader {
    border-color: var(--ur-brand) transparent var(--ur-brand) transparent;
}

body .swal2-popup .swal2-close:hover {
    color: var(--ur-brand);
}

body .swal2-timer-progress-bar {
    height: 3px;
}

/* ---------- Inputs (the OTP and e-mail prompts in sitejs/layout.js) ---------- */
body .swal2-popup .swal2-input,
body .swal2-popup .swal2-file,
body .swal2-popup .swal2-textarea,
body .swal2-popup .swal2-select {
    width: auto;
    height: auto;
    min-height: 3.1rem;
    margin: 1rem 1.75rem 0;
    padding: .9rem 1.05rem;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    font-size: .95rem;
    color: var(--ur-ink);
}

body .swal2-popup .swal2-textarea {
    min-height: 6.5rem;
    line-height: 1.6;
}

body .swal2-popup .swal2-input::placeholder,
body .swal2-popup .swal2-textarea::placeholder {
    color: rgba(122, 114, 105, .6);
}

body .swal2-popup .swal2-validation-message {
    margin: 1rem 1.75rem 0;
    padding: .65rem .85rem;
    border-radius: var(--ur-r-sm);
    font-size: .85rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
}

body .swal2-popup .swal2-validation-message::before {
    width: 1.35em;
    min-width: 1.35em;
    height: 1.35em;
    margin: 0 .55em 0 0;
    background-color: var(--ur-brand);
    line-height: 1.35em;
}

/* ---------- Password dialogs ----------
   Shared by ChangePwd() and the last step of forgotPwd() in
   sitejs/layout.js, and by ChangePwd() in paneljs/panellayout.js - which is
   why the class keeps the public ur- prefix in both stylesheets. The eye
   toggles are the same <i> that togglePasswordVisibility() flips between
   fa-eye-slash and fa-eye. */
body .ur-swal-hint {
    margin: 0;
    font-size: .95rem;
    line-height: 1.6;
    color: var(--ur-muted);
}

body .ur-swal-pw {
    display: grid;
    gap: .6rem;
    margin-top: 1.1rem;
    text-align: left;
}

body .ur-swal-pw__field {
    position: relative;
}

/* !important because layout.css carries #newPassword / #confirmPassword rules
   of its own - an id beats any selector that can be written here, and the two
   ids exist nowhere but inside these dialogs. It left the first field a
   different height from the other two. */
body .swal2-popup .ur-swal-pw__input {
    display: block;
    width: 100%;
    margin: 0 !important;
    padding: .9rem 2.9rem .9rem 1.05rem !important;
}

body .ur-swal-pw__eye {
    position: absolute;
    top: 50%;
    right: .6rem;
    padding: .75rem;
    transform: translateY(-50%);
    font-size: .85rem;
    color: var(--ur-muted);
    opacity: .45;
    cursor: pointer;
    transition: opacity .18s var(--ur-ease), color .18s var(--ur-ease);
}

body .ur-swal-pw__eye:hover {
    opacity: 1;
    color: var(--ur-espresso);
}

@keyframes urSwalRise {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.985);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Phones: edge gutter, full-bleed dialog, 44px targets. The dialog stays
   30rem above this - a notification that keeps widening with the monitor
   stops reading as a notification. */
@media only screen and (max-width: 767px) {
    body {
        --swal2-width: 100%;
        --swal2-container-padding: 1rem;
        --swal2-padding: 1.5rem 0;
        --swal2-title-padding: 0 1.25rem;
        --swal2-html-container-padding: .6rem 1.25rem 0;
        --swal2-actions-margin: 1.4rem auto 0;
        --swal2-actions-width: 100%;
    }

    body .swal2-title {
        font-size: 1.3rem;
    }

    body .swal2-actions {
        padding: 0 1.25rem;
    }

    body .swal2-popup .swal2-styled {
        flex: 1 1 auto;
        min-height: 44px;
        padding: .8rem 1.1rem;
    }

    body .swal2-popup .swal2-close {
        width: 44px;
        height: 44px;
        margin-bottom: -44px;
    }

    /* 13px glyph + 2 x 1rem = a 45px tap target on the reveal icons */
    body .ur-swal-pw__eye {
        right: .35rem;
        padding: 1rem;
    }

    body .swal2-popup .swal2-input,
    body .swal2-popup .swal2-file,
    body .swal2-popup .swal2-textarea,
    body .swal2-popup .swal2-select,
    body .swal2-popup .swal2-validation-message {
        margin-left: 1.25rem;
        margin-right: 1.25rem;
    }
}

/* ---------- Loading scrim ----------
   swalshowLoading() / hideloader() toggle the theme's .preloader plate, and
   the theme's own scripts hide it on load. It shipped as opaque white with
   an animated GIF in the middle; same element, same two functions, but a
   cream scrim over the page and a CSS ring instead of the GIF. */
/* Hidden by default. The theme showed it on every page until window.load - every
   image, ad and CDN script - so pages sat behind a blank scrim. It now appears only
   while an action runs: swalshowLoading() / hideloader() set display inline. */
.preloader {
    display: none;
    background-color: rgba(253, 251, 247, .92);
    background-image: none;
}

.preloader::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 42px;
    height: 42px;
    margin: -21px 0 0 -21px;
    border: 2px solid var(--ur-hairline);
    border-top-color: var(--ur-brand);
    border-radius: 50%;
    animation: urSpin .9s linear infinite;
}

@keyframes urSpin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ur-skeleton {
        animation: none;
        background: rgba(28, 25, 23, .06);
    }

    /* The dialog rise and the button lift go; the loading ring keeps
       turning, because it is the only feedback a save has. */
    body {
        --swal2-show-animation: none;
        --swal2-backdrop-transition: none;
        --swal2-action-button-transition: background-color .2s;
    }

    body .swal2-popup .swal2-styled:hover,
    body .swal2-popup .swal2-styled:active {
        transform: none;
    }
}


/* ==========================================================================
   PHONE: MENU, REFINE / SORT SHEETS, POST-A-REQUIREMENT SHEET
   From the mobile mockups. Last in the file on purpose: several selectors only
   match the specificity of earlier phone rules (the MOBILE FILTER BUTTON block,
   the layout's inline overlay styles) and win by coming after them.
   ========================================================================== */

/* ---------- Phone menu (#urMobileNav in _Layout) ----------
   The mockup's menu: a top-aligned list of full-width rows under the bar - serif
   labels on 60px rows with a chevron and a hairline under each, Rentals as a quiet
   label over two indented children - and the two actions pinned to a tinted foot
   as full-width buttons. Before, the list was centred in the screen at 34-50px
   Fraunces with no row edges, so the targets were only as wide as each word, and
   "Post a requirement" was 12px uppercase text. The overlay's own rules live in the
   layout's inline <style>, which loads after this file, hence the #urMobileNav id
   on every selector. Links, order, labels and the open/close JS are unchanged. */
@media only screen and (max-width: 767px) {
    /* content starts under the 56px bar (layout.css) instead of floating mid-screen */
    #urMobileNav .ur-mobilenav__inner {
        justify-content: flex-start;
        align-items: stretch;
        padding: calc(56px + .75rem) 0 0;
    }

    #urMobileNav .ur-mobilenav__eyebrow {
        align-self: flex-start;
        margin: 0 1rem .5rem;
    }

    #urMobileNav .ur-mobilenav__list {
        margin: 0;
        padding: 0 1rem;
    }

    #urMobileNav .ur-mobilenav__link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        width: 100%;
        min-height: 60px;
        padding: 0;
        border-bottom: 1px solid var(--ur-hairline);
        font-size: 28px;
        font-weight: 400;
        line-height: 34px;
        letter-spacing: -.01em;
    }

        /* chevron: every row leads somewhere, and says so */
        #urMobileNav .ur-mobilenav__link::after {
            content: "";
            flex: 0 0 auto;
            width: 9px;
            height: 9px;
            margin-right: 6px;
            border-top: 1.5px solid currentColor;
            border-right: 1.5px solid currentColor;
            transform: rotate(45deg);
            opacity: .55;
        }

        #urMobileNav .ur-mobilenav__link:focus-visible {
            outline: 2px solid var(--ur-brand);
            outline-offset: 2px;
            border-radius: 2px;
        }

    /* Rentals: label, then its two children indented without their own rules;
       the group closes with the rule drawn on top of the row that follows it */
    #urMobileNav .ur-mobilenav__group {
        margin-bottom: 0 !important;
        padding: .9rem 0 .35rem;
    }

    #urMobileNav .ur-mobilenav__link--child {
        min-height: 52px;
        padding-left: 1rem;
        border-bottom: 0;
        font-size: 23px;
        line-height: 29px;
    }

    #urMobileNav .ur-mobilenav__item:has(> .ur-mobilenav__link--child) + .ur-mobilenav__item:not(:has(> .ur-mobilenav__link--child)) > .ur-mobilenav__link {
        margin-top: .35rem;
        border-top: 1px solid var(--ur-hairline);
    }

    /* ---------- Foot: the two actions as full-width buttons on a tinted band ---------- */
    #urMobileNav .ur-mobilenav__foot {
        align-items: stretch;
        gap: .625rem;
        margin-top: auto;
        padding: 1.25rem 1rem calc(1.75rem + env(safe-area-inset-bottom));
        background-color: var(--ur-cream-2);
    }

        #urMobileNav .ur-mobilenav__foot .ur-cta {
            justify-content: center;
            gap: .6rem;
            width: 100%;
            min-height: 48px;
            padding: 0 1.25rem;
            font-size: 15px;
            font-weight: 600;
        }

            #urMobileNav .ur-mobilenav__foot .ur-cta .ur-cta__ico {
                width: 1.6rem;
                height: 1.6rem;
            }

        /* was 12px uppercase muted text - the second action, not a footnote */
        #urMobileNav .ur-mobilenav__ghost {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 48px;
            border: 1px solid var(--ur-hairline);
            border-radius: var(--ur-r-sm);
            background-color: #fff;
            font-size: 15px;
            font-weight: 600;
            letter-spacing: 0;
            text-transform: none;
            color: var(--ur-espresso);
        }

            #urMobileNav .ur-mobilenav__ghost:focus-visible {
                outline: 2px solid var(--ur-brand);
                outline-offset: 2px;
            }

    /* The stagger in the layout stops at the fifth row, so Brokers and Contact (rows
       six and seven) arrived first. Continue it; the layout's reduced-motion guard
       already switches these transitions off. */
    #urMobileNav.is-open .ur-mobilenav__item:nth-child(6) {
        transition-delay: .42s;
    }

    #urMobileNav.is-open .ur-mobilenav__item:nth-child(7) {
        transition-delay: .48s;
    }

    #urMobileNav.is-open .ur-mobilenav__foot {
        transition-delay: .54s;
    }
}

/* ==========================================================================
   PHONE: LISTING TOOLBAR, REFINE SHEET, SORT SHEET
   PG_Listing, Properties/Index (rentals), Commercial_listing and Search/Index
   share one filter structure - #filterPanel with the .ur-sheet-* chrome, the
   .ur-toolbar with #main2 / #open2 and #ddlSortBy - so one block covers all four.
   Their per-page <style> blocks sit in <body> and load after this file, so the
   selectors here carry .our-listing (or an id) to out-rank them.
   Nothing here changes what a control does: the filter form, toggleFilters()
   / closeFilters(), applySort() and every name and id are untouched.
   ========================================================================== */
@media only screen and (max-width: 767px) {

    /* The account menu hangs out of the phone header (z-index 20, a stacking context
       that caps the menu's own 1000) over the sticky toolbar below (30), which drew
       Newest over Sign out. Lift the header only while the menu is open: the toolbar
       stays above it the rest of the time, for the Sort sheet's scrim. The selector
       matches the layout's inline #page rule that sets the 20. */
    #page .mobile-menu .header.stylehome1.ur-mobilebar:has(.dropdown-menu.show) {
        z-index: 31;
    }

    /* ---------- Toolbar: Refine | Sort, sticky ----------
       The mockup's bar. It rides the top of the screen while the list scrolls,
       so Refine and Sort are one tap away from anywhere in 30 cards. The phone
       header is in flow (position: relative), so top: 0 is the viewport edge.
       No backdrop-filter: it would make the bar the containing block for the
       fixed Sort sheet inside it. */
    .our-listing .ur-toolbar {
        position: sticky;
        top: 0;
        z-index: 30;
        flex-wrap: nowrap;
        gap: .5rem;
        margin: 0 0 1rem;
        padding: .6rem 16px;
        background-color: var(--ur-cream);
        border-bottom: 1px solid var(--ur-hairline);
    }

        /* while the Sort sheet is open the bar holds it, so the bar must sit above
           the header and the cards for the sheet and its scrim to cover them */
        .our-listing .ur-toolbar:has(.bootstrap-select.show) {
            z-index: 1046;
        }

    /* Refine and Sort take a half each - the two controls, and nothing between them */
    .ur-toolbar #main2.db-991 {
        flex: 1 1 0;
        min-width: 0;
        align-self: center;
    }

        /* Refine: the mockup's dark pill */
        .ur-toolbar #main2 .filter_open_btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            min-height: 44px;
            padding: 0 1rem;
            border-radius: var(--ur-r-sm);
            font-size: 14px;
            letter-spacing: 0;
            text-transform: none;
        }

    /* The count stays hidden here, as ur-design already had it below 992px: squeezed
       between the pills it wrapped to two lines and shrank both buttons, and the page
       head right above says the same thing ("2 spaces available"). */
    .ur-toolbar p.ur-toolbar__count {
        display: none;
    }

    .ur-toolbar .ur-toolbar__sort {
        flex: 1 1 0;
        min-width: 0;
    }

        /* bootstrap-select parks its label absolutely, so the pill needs a set width */
        .ur-toolbar .ur-toolbar__sort .bootstrap-select {
            width: 100% !important; /* the page styles set width: auto !important */
            min-width: 0 !important;
        }

            /* Sort: the mockup's light pill, with a sort glyph before the value */
            .our-listing .ur-toolbar__sort .bootstrap-select > .dropdown-toggle {
                height: 44px;
                padding: 0 2rem 0 2.25rem;
                border: 1px solid var(--ur-hairline);
                border-radius: 999px !important;
                background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B2724' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v16M3 16l4 4 4-4M17 20V4M13 8l4-4 4 4'/%3E%3C/svg%3E") no-repeat .85rem center / 16px 16px;
                font-size: 14px;
                font-weight: 600;
            }

                .our-listing .ur-toolbar__sort .bootstrap-select > .dropdown-toggle .filter-option {
                    padding-left: 2.25rem;
                    padding-right: 2rem;
                }

    /* ---------- Sort: bootstrap-select's own menu, drawn as a bottom sheet ----------
       The menu is the control - its items already carry the selection and fire
       applySort() through the select's change - so it is restyled in place rather
       than rebuilt. Popper writes position/transform/top/left inline, hence the
       !important. The ::before scrim is a real box on .bootstrap-select, so a tap on
       it lands on the control (Bootstrap closes the menu) instead of on the card
       underneath - a box-shadow scrim would have let the tap through. */
    .our-listing .ur-toolbar__sort .bootstrap-select.show::before {
        content: "";
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 999;
        background: rgba(28, 25, 23, .45);
    }

    .our-listing .ur-toolbar__sort .bootstrap-select > .dropdown-menu {
        position: fixed !important;
        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 1000;
        width: auto;
        min-width: 0 !important;
        max-height: 80vh !important;
        margin: 0;
        padding: 1.5rem 16px calc(1.25rem + env(safe-area-inset-bottom));
        overflow-y: auto;
        transform: none !important;
        border: 0;
        border-radius: 20px 20px 0 0;
        /* the handle, drawn rather than added as an element */
        background: var(--ur-cream) linear-gradient(#D6CFC4, #D6CFC4) no-repeat center 10px / 40px 4px;
        box-shadow: 0 -12px 40px rgba(28, 25, 23, .18);
    }

        .our-listing .ur-toolbar__sort .bootstrap-select > .dropdown-menu::before {
            content: "Sort by";
            display: block;
            padding: .25rem 0 .75rem;
            border-bottom: 1px solid var(--ur-hairline);
            font-family: 'Fraunces', Georgia, serif;
            font-size: 23px;
            font-weight: 400;
            line-height: 29px;
            color: var(--ur-espresso);
        }

        /* bootstrap-select sizes the inner list inline to fit a popover */
        .our-listing .ur-toolbar__sort .bootstrap-select > .dropdown-menu > .inner {
            max-height: none !important;
            min-height: 0 !important;
            overflow: visible !important;
        }

        .our-listing .ur-toolbar__sort .bootstrap-select .dropdown-menu li + li > .dropdown-item {
            border-top: 1px solid var(--ur-hairline);
        }

        /* rows: label left, radio dot right, 56px */
        .our-listing .ur-toolbar__sort .bootstrap-select .dropdown-menu .dropdown-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            min-height: 56px;
            padding: 0;
            background: transparent !important;
            font-size: 16px;
            color: var(--ur-ink) !important;
        }

            .our-listing .ur-toolbar__sort .bootstrap-select .dropdown-menu .dropdown-item .check-mark {
                display: none !important;
            }

            .our-listing .ur-toolbar__sort .bootstrap-select .dropdown-menu .dropdown-item::after {
                content: "";
                flex: 0 0 22px;
                width: 22px;
                height: 22px;
                border: 2px solid #B9B2A8;
                border-radius: 999px;
            }

        .our-listing .ur-toolbar__sort .bootstrap-select .dropdown-menu li.selected > .dropdown-item,
        .our-listing .ur-toolbar__sort .bootstrap-select .dropdown-menu .dropdown-item.selected {
            font-weight: 600;
            color: var(--ur-espresso) !important;
        }

            .our-listing .ur-toolbar__sort .bootstrap-select .dropdown-menu li.selected > .dropdown-item::after,
            .our-listing .ur-toolbar__sort .bootstrap-select .dropdown-menu .dropdown-item.selected::after {
                border: 7px solid var(--ur-espresso);
            }

    /* the page must not scroll behind the open sheet */
    body:has(.ur-toolbar__sort .bootstrap-select.show) {
        overflow: hidden;
    }

    /* ---------- Refine sheet ----------
       The sheet itself (fixed, 88vh, cream, grip, scrim, body lock) is already
       built in the page styles below 992px. Phones get the mockup's inside: the
       fields straight on the sheet rather than on a white card within it,
       14px labels, 48px fields, and Clear | Search pinned to the foot. */
    .our-listing #filterPanel {
        padding-bottom: 0;
    }

        .our-listing #filterPanel .sidebar_advanced_search_widget {
            padding: 0 !important;
            border: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
        }

        /* the close sits beside the title instead of above it */
        .our-listing #filterPanel .ur-sheet-close {
            top: .7rem;
            right: .5rem;
        }

        .our-listing #filterPanel .ur-filter-head {
            justify-content: flex-start;
            padding: .15rem 3.25rem .9rem 0;
        }

        .our-listing #filterPanel .ur-filter-head__title {
            padding-left: 0;
            font-size: 23px;
            font-weight: 400;
            line-height: 29px;
        }

            .our-listing #filterPanel .ur-filter-head__title::before {
                content: none;
            }

        .our-listing #filterPanel .ur-filter-head__count {
            background: var(--ur-cream-2);
            letter-spacing: 0;
            text-transform: none;
            color: var(--ur-muted);
        }

        .our-listing #filterPanel .sasw_list > li {
            padding: .7rem 0;
        }

        .our-listing #filterPanel .ur_filter_label {
            margin-bottom: .5rem;
            font-size: 14px;
            line-height: 20px;
            letter-spacing: 0;
            text-transform: none;
            color: var(--ur-espresso);
        }

        .our-listing #filterPanel .bootstrap-select > .dropdown-toggle,
        .our-listing #filterPanel .ur_rent_row .form-control {
            height: 48px;
            border: 1px solid var(--ur-hairline);
            border-radius: var(--ur-r-sm);
            background: #fff;
            font-size: 15px;
        }

            .our-listing #filterPanel .bootstrap-select .filter-option-inner-inner {
                font-size: 15px;
            }

        /* Clear | Search, pinned to the foot of the sheet while the fields scroll.
           The sheet's own bottom padding is zeroed above so bottom: 0 is its edge;
           the bar bleeds across the sheet's 1rem side padding. */
        .our-listing #filterPanel .ur-filter-actions {
            position: sticky;
            bottom: 0;
            z-index: 5; /* above bootstrap-select's relative/z-index 1 buttons */
            margin: .5rem -1rem 0;
            padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)) !important;
            border-top: 0 !important;
            background: #fff;
            box-shadow: 0 -8px 24px -8px rgba(28, 25, 23, .14);
        }

            .our-listing #filterPanel .search_option_button {
                gap: .75rem;
            }

                /* both are display: flex here, where text-align no longer centres the label */
                .our-listing #filterPanel .search_option_button .btn {
                    justify-content: center;
                    align-items: center;
                    height: 48px !important;
                    line-height: 46px !important;
                    font-size: 15px;
                }

                /* the mockup's order and weight: Clear first and narrower */
                .our-listing #filterPanel .search_option_button .btn-light {
                    order: -1;
                    flex: 1 1 0;
                }

                .our-listing #filterPanel .search_option_button .btn-thm {
                    flex: 2 1 0;
                }

    /* The grip bar sticks below the sheet's .55rem top padding, so scrolled fields
       showed in that strip above it, and through its 92% cream. Stick at the true top,
       opaque. */
    .our-listing #filterPanel .ur-sheet-bar {
        top: -.55rem;
        background-color: var(--ur-cream);
    }

    /* the theme's 30px under the list showed as a cream strip below Clear / Search
       once the sheet was scrolled to its end */
    .our-listing #filterPanel .sidebar_listing_list {
        margin-bottom: 0;
    }
}

/* ---------- Post a requirement explainer, phones (CommonElements/_PostReqExplainer) ----------
   A bottom sheet, as the mockup's popups are: pinned to the foot of the screen with
   a grab handle, the steps scrolling inside it and the Post / Sign in to post button
   held at the bottom of the sheet instead of below three paragraphs. A centred
   Bootstrap dialog with a .75rem margin read as a desktop modal squeezed onto a phone.
   CSS only - Bootstrap still opens and closes it (data-toggle / data-dismiss), and the
   slide is Bootstrap's own .modal.fade transform transition, which Bootstrap already
   switches off under prefers-reduced-motion. .modal.ur-postreq outranks the layout's
   inline max-width: 767px rules, which load after this file. */
@media only screen and (max-width: 767px) {
    .modal.ur-postreq .modal-dialog {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        max-width: none;
        margin: 0;
        transform: translateY(100%);
    }

    .modal.ur-postreq.show .modal-dialog {
        transform: none;
    }

    /* the body scrolls, the sheet never passes the top of the screen */
    .modal.ur-postreq .modal-content.ur-postreq__panel {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 2rem);
        max-height: calc(100dvh - 2rem);
        border-width: 1px 0 0;
        border-radius: var(--ur-r-lg) var(--ur-r-lg) 0 0;
        box-shadow: 0 -12px 32px -12px rgba(28, 25, 23, .22);
    }

        /* grab handle - decoration; the 44px close and a tap on the scrim close it */
        .modal.ur-postreq .modal-content.ur-postreq__panel::before {
            content: "";
            flex: 0 0 auto;
            align-self: center;
            width: 36px;
            height: 4px;
            margin-top: .6rem;
            border-radius: 999px;
            background-color: rgba(28, 25, 23, .18);
        }

    .modal.ur-postreq .ur-postreq__close {
        top: .5rem;
        right: .5rem;
    }

    .modal.ur-postreq .ur-postreq__body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1rem 1rem 0;
    }

    .modal.ur-postreq .ur-postreq__title {
        font-size: 1.45rem;
    }

    /* the action rides the bottom of the sheet while the steps scroll under it */
    .modal.ur-postreq .ur-postreq__foot {
        position: sticky;
        bottom: 0;
        margin: 0 -1rem;
        padding: .85rem 1rem calc(.85rem + env(safe-area-inset-bottom));
        background-color: var(--ur-cream);
        box-shadow: 0 -10px 20px -14px rgba(28, 25, 23, .22);
    }

        .modal.ur-postreq .ur-postreq__foot .ur-postreq__cta {
            width: 100%;
            min-height: 48px;
            justify-content: space-between;
        }

    /* the mockup's warm scrim instead of Bootstrap's 50% black, for this sheet only */
    body:has(#popMdlPostReq.show) .modal-backdrop.show {
        background-color: #1C1917;
        opacity: .48;
    }
}

/* ==========================================================================
   PHONE: LISTING CARDS (PropListings/_PGCard, _ResidentialCard, _CommercialCard)
   From the mobile mockups; after the PROPERTY LISTING CARD phone block, whose
   rules several of these override on order.
   ========================================================================== */

/* ---------- Listing cards, phones (PropListings/_PGCard, _ResidentialCard, _CommercialCard) ----------
   The mockup's card, top to bottom: a 16:9 photo carrying the type tags and the
   heart; then place, title, price, the sharing chips or a three-cell spec strip,
   the bus-stand / railway distances, and the lister row with a labelled View
   details button. The earlier phone pass floated the price on the photo as a glass
   pill and cut the CTA to an unlabelled arrow; both come back into the plate.
   The reorder is flex order only, so the partials keep their markup; the one
   addition is the phone-only .ur_near row (the .ur_transit pills below the card
   stay hidden here). The whole-card tap target - the CTA's ::before - is kept, and
   the heart stays above it. Later in the file than the PROPERTY LISTING CARD phone
   block, so equal selectors win on order; its !important declarations are
   restated with !important. */
@media only screen and (max-width: 767px) {
    /* ---------- Photo ---------- */
    .ur-plcard .feat_property.list .thumb .property-img {
        aspect-ratio: 16 / 9;
    }

    /* type tags: the mockup's 26px sentence-case chips, not 12px tracked capitals */
    .ur-plcard .feat_property .thumb .thmb_cntnt ul.tag li a {
        display: inline-flex;
        align-items: center;
        height: 26px;
        padding: 0 .65rem;
        letter-spacing: 0;
        text-transform: none;
    }

    /* the heart moves to the top-right corner (it sat level with the price pill,
       which has left the photo) and grows to a 44px target */
    .ur-plcard .feat_property .thumb .thmb_cntnt .icon {
        top: -6px;
        right: -6px;
        bottom: auto;
    }

        .ur-plcard .feat_property .thumb .thmb_cntnt .icon li {
            width: 44px;
            height: 44px;
            line-height: 44px;
        }

    /* ---------- Plate: place, title, price, chips / specs, distances ---------- */
    .ur-plcard .feat_property.list .details .tc_content {
        display: flex;
        flex-direction: column;
        gap: .6rem;
        padding: 1rem 1rem 0 !important;
    }

    .ur-plcard .tc_content .ur_place {
        order: 0;
        margin: 0;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .04em;
        line-height: 18px;
        text-transform: uppercase;
        color: var(--ur-muted);
    }

    /* the mockup's 17px sans title; the serif stays for the price */
    .ur-plcard .feat_property .details .tc_content h4 {
        order: 1;
        margin: 0;
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 17px !important;
        font-weight: 600;
        letter-spacing: 0;
        line-height: 23px;
    }

    .ur-plcard .feat_property.list .dtls_headr {
        order: 2;
        margin: 0;
    }

        /* back into the flow - it was absolute, on the photo, behind a glass pill */
        .ur-plcard .feat_property.list .dtls_headr a.fp_price {
            position: static;
            display: inline-flex;
            align-items: baseline;
            gap: .25rem;
            max-width: none;
            padding: 0;
            border: 0;
            border-radius: 0;
            background-color: transparent;
        }

    .ur-plcard .dtls_headr .ur_amount {
        font-size: 21px !important;
        font-weight: 600;
        line-height: 26px;
        color: var(--ur-espresso);
    }

    .ur-plcard .dtls_headr .ur_ondemand {
        font-size: 17px;
        color: var(--ur-espresso);
    }

    .ur-plcard .dtls_headr .ur_per,
    .ur-plcard.ur-pgcard .dtls_headr .ur_from {
        font-size: 13px !important;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;
        color: var(--ur-muted);
    }

    /* PG sharing options as the mockup's sage tags */
    .ur-plcard.ur-pgcard .tc_content .ur_sharing_list {
        order: 3;
        gap: .5rem;
    }

    .ur-pgcard .ur_sharing_chip {
        align-items: center;
        height: 26px;
        padding: 0 .65rem;
        border: 0;
        background-color: #EAF0EA;
    }

    /* #4A5B4D on the sage tint is ~6.4:1 */
    .ur-pgcard .ur_chip_k,
    .ur-pgcard .ur_sharing_more {
        letter-spacing: 0;
        text-transform: none;
        color: #4A5B4D;
    }

    /* Residential / commercial specs as a three-cell strip - value over label. The
       cell count follows the partial (a spec it has no value for is not rendered),
       so the columns are auto, not a fixed three. */
    .ur-plcard .tc_content .ur_specs {
        order: 3;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: 0;
        padding: 0;
        border: 1px solid var(--ur-hairline);
        border-radius: var(--ur-r-md);
    }

        .ur-plcard .tc_content .ur_specs li {
            min-width: 0;
            padding: .6rem .75rem;
            border-left: 1px solid var(--ur-hairline);
        }

            .ur-plcard .tc_content .ur_specs li:first-child {
                border-left: 0;
            }

    .ur-plcard .ur_spec {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .ur-plcard .ur_spec_v {
        overflow: hidden;
        max-width: 100%;
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 15px;
        font-weight: 700;
        line-height: 20px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ur-plcard .ur_spec_k {
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0;
        line-height: 16px;
        text-transform: none;
    }

    .ur-plcard .tc_content .ur_near {
        order: 4;
        display: flex;
        flex-wrap: wrap;
        gap: .35rem 1rem;
        margin: 0;
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 13px;
        line-height: 18px;
        color: var(--ur-muted);
    }

        .ur-plcard .ur_near > span {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
        }

        .ur-plcard .ur_near .fa {
            font-size: 12px;
        }

        .ur-plcard .ur_near b {
            font-weight: 600;
            color: var(--ur-ink);
        }

    /* ---------- Lister row: avatar, "Listed by · type" over the name, View details ---------- */
    .ur-plcard .feat_property .details .fp_footer {
        width: auto;
        margin: .9rem 1rem 0;
        padding: .75rem 0 1rem !important;
        gap: .65rem;
        border-top: 1px solid var(--ur-hairline);
    }

        .ur-plcard .feat_property .details .fp_footer .fp_meta li:last-child {
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            gap: .1rem;
            min-width: 0; /* lets a long firm name truncate instead of pushing View details */
        }

    /* at 360px "Listed by" broke onto two lines beside the tag; the name gives way instead */
    .ur-plcard .fp_footer .fp_meta {
        flex: 1 1 auto;
        min-width: 0;
    }

    .ur-plcard .ur_lister_k,
    .ur-plcard .ur-cta {
        white-space: nowrap;
    }

    .ur-plcard .ur-cta {
        flex: 0 0 auto;
    }

    .ur-plcard .companyName {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* "Listed by" was set to font-size 0 with the tag standing in for it */
    .ur-plcard .ur_lister_k {
        display: flex;
        align-items: center;
        gap: .35rem;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0;
        line-height: 16px;
        text-transform: none;
        color: var(--ur-muted);
    }

    .ur-plcard .companyName {
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
    }

    /* the label comes back - "View details" says what the tap does, a bare arrow
       did not. 44px tall; the ::before still spreads it over the whole card. */
    .ur-plcard .ur-cta {
        width: auto;
        height: 44px;
        padding: 0 1rem;
        border-radius: var(--ur-r-sm);
        font-size: 14px;
        letter-spacing: 0;
        text-transform: none;
    }

        .ur-plcard .ur-cta > span {
            position: static;
            width: auto;
            height: auto;
            overflow: visible;
            clip: auto;
        }

        .ur-plcard .ur-cta .ur-cta__ico {
            display: none;
        }
}

/* ==========================================================================
   PHONE: LISTING PAGE SHELLS (PG_Listing, Properties/Index, Commercial_listing,
   Search/Index) - heading block, Search tabs, rentals switch, ads, empty state.
   ========================================================================== */

/* ---------- Listing page shells, phones (PG_Listing, Properties/Index, Commercial_listing, Search/Index) ----------
   The mockups' page head and the rails around the cards. Each page repeats its head,
   empty-state and tab rules in an inline <style> that loads after this file, so every
   selector here carries .our-listing to out-rank them. Cards, the Refine / Sort toolbar
   and the filter sheet are styled elsewhere and are not touched here. */
@media only screen and (max-width: 767px) {
    /* ---------- Page head ----------
       The mockup's order: breadcrumb, eyebrow, title, count. The markup keeps the
       crumbs and the count on one uppercase line under a 38px title; the meta <p> is
       flattened (display: contents) so its pieces can be placed on the head's grid.
       The separator before the count goes, the count takes its own line. */
    .our-listing .ur-page-head {
        display: grid;
        grid-template-columns: repeat(3, auto) 1fr;
        justify-content: start;
        align-items: center;
        column-gap: 6px;
        padding: 0 0 12px;
    }

        .our-listing .ur-page-head .ur-eyebrow {
            grid-row: 2;
            grid-column: 1 / -1;
            justify-self: start;
            margin: 6px 0 10px;
            font-weight: 600;
            letter-spacing: .08em;
            color: #c53f43; /* the mockup's brand-deep eyebrow, darkened to pass 4.5:1 at 12px */
        }

        .our-listing .ur-page-head .breadcrumb_title {
            grid-row: 3;
            grid-column: 1 / -1;
            max-width: none;
            margin: 0 0 10px;
            font-size: 30px;
            font-weight: 400;
            line-height: 36px;
            letter-spacing: -.01em;
        }

            /* "All PGs & rentals" - the second noun in brand italic, as the mockup */
            .our-listing .ur-page-head .breadcrumb_title .ur-page-head__em {
                font-style: italic;
                color: var(--ur-brand);
            }

    /* the <p> stays in the DOM for its text; its children sit on the head's grid */
    .our-listing .ur-page-head .ur-page-meta {
        display: contents;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;
        color: var(--ur-muted);
    }

        .our-listing .ur-page-head .ur-page-meta > * {
            grid-row: 1;
        }

        /* Home: ink, and a 44px row to tap rather than an 18px word */
        .our-listing .ur-page-head .ur-page-meta a {
            display: inline-flex;
            align-items: center;
            min-height: 44px;
            font-weight: 600;
            color: var(--ur-ink);
        }

        .our-listing .ur-page-head .ur-page-meta__sep:has(+ .ur-page-meta__count) {
            display: none;
        }

        .our-listing .ur-page-head .ur-page-meta__count {
            grid-row: 4;
            grid-column: 1 / -1;
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            color: var(--ur-muted);
        }

    /* ---------- Residential / Commercial switch (Rentals, Commercial) ----------
       The open side raised in white on the switch's own tinted track (.ur-seg keeps its
       rgba .05 fill and hairline - a cream-2 track vanished into the cream page, so it
       no longer read as a toggle). Scoped to the listing head - the same .ur-seg is the
       directory's type switch. */
    .our-listing .ur-page-aside {
        margin-bottom: 16px;
    }

        .our-listing .ur-page-aside .ur-seg:not(.ur-search-tabs) {
            padding: 4px;
            gap: 4px;
        }

            .our-listing .ur-page-aside .ur-seg:not(.ur-search-tabs) .ur-seg__btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                min-height: 44px;
                font-size: 14px;
                color: var(--ur-muted);
            }

            .our-listing .ur-page-aside .ur-seg:not(.ur-search-tabs) .ur-seg__btn.is-on {
                background: #fff;
                color: var(--ur-espresso);
                box-shadow: 0 1px 3px rgba(28, 25, 23, .12);
            }

    /* ---------- Search: category tabs as chips ----------
       Four tabs in a segmented strip dropped their counts and scrolled sideways at 360.
       The mockup's wrapping chips keep every label and its count on screen - they take
       a second line instead of an edge. */
    .our-listing .ur-seg.ur-search-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
        padding: 0;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

        .our-listing .ur-search-tabs .ur-seg__btn {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            min-height: 44px;
            padding: 0 14px;
            border: 1px solid var(--ur-hairline);
            border-radius: 999px;
            background: #fff;
            box-shadow: none;
            font-size: 14px;
            color: var(--ur-ink);
        }

            .our-listing .ur-search-tabs .ur-seg__btn.is-on {
                border-color: var(--ur-espresso);
                background: var(--ur-espresso);
                color: var(--ur-cream);
            }

        .our-listing .ur-search-tabs .ur-seg__n {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 20px;
            height: 20px;
            margin: 0;
            padding: 0 6px;
            border-radius: 999px;
            background: var(--ur-cream-2);
            font-size: 12px;
            font-weight: 700;
            color: var(--ur-muted);
            opacity: 1;
        }

        .our-listing .ur-search-tabs .ur-seg__btn.is-on .ur-seg__n {
            background: var(--ur-cream);
            color: var(--ur-espresso);
        }

    /* The sidebar CardAd stays where the markup puts it, above the results. Moving it
       after the list (order: 2) buried it under every listing on a long results page. */

    /* in-list ad banners: the same 12px rhythm as the cards around them */
    .our-listing .adv-banner-container {
        margin-bottom: 12px !important; /* .mb10 */
    }

    /* ---------- Empty results ----------
       The mockup's empty card: tighter, and on the cards' gutter - the 15px margin
       stacked on the column's 15px and indented it past the toolbar. */
    .our-listing .ur_empty {
        margin: 0;
    }

    .our-listing .ur_empty__core {
        padding: 32px 20px;
    }

    .our-listing .ur_empty__art {
        max-width: 140px;
        margin-bottom: 1rem;
    }

    .our-listing .ur_empty h3 {
        margin-bottom: .5rem;
        font-size: 23px;
        line-height: 29px;
    }

    .our-listing .ur_empty p {
        font-size: 14px;
        line-height: 20px;
    }

    .our-listing .ur_empty__hint {
        margin: 1.5rem 0 .75rem;
    }

    .our-listing .ur_nearby a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 16px;
        font-size: 14px;
    }

    /* The switch / tab column keeps its desktop 32px padding under a 16px margin, so
       48px of cream sat between it and the Refine toolbar. */
    .our-listing .ur-page-aside {
        padding-bottom: 0;
    }
}

/* ==========================================================================
   PRICING (Views/Home/Pricing.cshtml, /pricing)
   Plans for owners and brokers: page head, the Owners / Brokers switch, three plan
   cards (Premium is the dark one) and a comparison table. Phones get every feature
   inside each card instead of the table. Everything is scoped to .ur-pricing.
   ========================================================================== */
/* The section's own 45px top padding plus a 3rem head and a 72px title put the plans
   a screen below the header. Tighter all round, and from 992px the head is one row:
   breadcrumb, title and intro on the left, the Owners / Brokers switch on the right. */
section.ur-pricing.our-listing {
    padding-top: 1.5rem;
}

.ur-pricing__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .5rem 0 1.75rem;
    text-align: center;
}

@media only screen and (min-width: 992px) {
    .ur-pricing__head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        column-gap: 2.5rem;
        text-align: left;
    }

        .ur-pricing__head .ur-pricing__crumbs {
            justify-content: flex-start;
        }

        .ur-pricing__head .ur-pricing__intro {
            margin: 0;
        }

        .ur-pricing__head .ur-pricing__switch {
            margin-top: 0;
        }
}

    .ur-pricing__head .ur-eyebrow {
        margin-bottom: 1rem;
    }

.ur-pricing__crumbs {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 .75rem;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #6F675F;
}

    .ur-pricing__crumbs a {
        color: #6F675F;
    }

        .ur-pricing__crumbs a:hover {
            color: var(--ur-espresso);
        }

.ur-pricing__sep {
    opacity: .4;
}

.ur-pricing__title {
    margin: 0 0 .75rem;
    font-family: 'Fraunces', Georgia, serif;
    font-optical-sizing: auto;
    font-size: clamp(2.25rem, 3.6vw, 3.25rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--ur-espresso);
}

    .ur-pricing__title em {
        font-style: italic;
        color: var(--ur-brand);
    }

.ur-pricing__intro {
    max-width: 60ch;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.6;
    color: #6F675F;
}

.ur-pricing__switch {
    margin-top: 1.75rem;
}

    /* .ur-seg's display: inline-flex beats the hidden attribute - without JS the switch
       would show and do nothing */
    .ur-pricing__switch[hidden] {
        display: none;
    }

    .ur-pricing__switch .ur-seg__btn {
        min-width: 8.5rem;
        min-height: 44px;
        font-size: 15px;
    }

/* ---------- Audiences ----------
   Without JS both show, each under its h2. With JS the switch shows one, and the h2
   stays for screen readers only - the switch already says whose plans these are. */
.ur-pricing__aud + .ur-pricing__aud {
    margin-top: 3rem;
}

.ur-pricing__audtitle {
    margin: 0 0 1.25rem;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 2rem;
    font-weight: 400;
    color: var(--ur-espresso);
}

.ur-pricing--js .ur-pricing__aud:not(.is-on) {
    display: none;
}

.ur-pricing--js .ur-pricing__aud + .ur-pricing__aud {
    margin-top: 0;
}

.ur-pricing--js .ur-pricing__audtitle {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- Plan cards ---------- */
.ur-pricing__plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}

.ur-pricing__plan {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 2rem;
    border: 1px solid rgba(28, 25, 23, .1);
    border-radius: var(--ur-r-lg);
    background: #fff;
}

.ur-pricing__plan--dark {
    border-color: var(--ur-espresso);
    background: var(--ur-espresso);
    box-shadow: 0 24px 48px -24px rgba(28, 25, 23, .45);
}

/* wraps the badge under the tag when a tablet card is too narrow for both */
.ur-pricing__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .4rem .75rem;
    min-height: 26px;
}

.ur-pricing__tag {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #C53F43;
}

/* espresso on brand holds 6:1 */
.ur-pricing__badge {
    padding: .3rem .7rem;
    border-radius: 999px;
    background: var(--ur-brand);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--ur-espresso);
    white-space: nowrap;
}

.ur-pricing__name {
    margin: 0;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 2.1rem;
    font-weight: 400;
    line-height: 1.15;
    color: var(--ur-espresso);
}

/* one period per card at a time; the switch toggles [hidden] */
.ur-pricing__price [hidden] {
    display: none;
}

.ur-pricing__amt {
    margin: 0;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 2.75rem;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--ur-espresso);
}

    .ur-pricing__amt small {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 15px;
        letter-spacing: 0;
        color: #6F675F;
    }

.ur-pricing__note {
    margin: .35rem 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: #4A5B4D;
}

/* the button closes the card on wide screens; phones move it up under the price */
.ur-pricing__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    order: 10;
    min-height: 48px;
    margin-top: auto;
    padding: 0 1.25rem;
    border-radius: var(--ur-r-sm);
    background: var(--ur-espresso);
    font-size: 15px;
    font-weight: 600;
    color: var(--ur-cream) !important;
    text-decoration: none;
}

    .ur-pricing__cta:hover,
    .ur-pricing__cta:focus {
        background: var(--ur-brand-deep);
        text-decoration: none;
    }

.ur-pricing__hl,
.ur-pricing__feats {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ur-pricing__hl {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(28, 25, 23, .1);
}

    .ur-pricing__hl li {
        display: flex;
        align-items: flex-start;
        gap: .6rem;
        font-size: 15px;
        line-height: 1.45;
        color: var(--ur-ink);
    }

        /* a highlight the plan does not have: a dash, muted - not a tick */
        .ur-pricing__hl li.is-off {
            color: #6F675F;
        }

            .ur-pricing__hl li.is-off svg {
                stroke: #6F675F;
            }

.ur-pricing svg {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    fill: none;
    stroke: #4A5B4D;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* the full list is for phones, where there is no table */
.ur-pricing__feats {
    display: none;
}

    .ur-pricing__feats li {
        display: flex;
        align-items: flex-start;
        gap: .65rem;
        padding: .7rem 0;
        border-top: 1px solid rgba(28, 25, 23, .1);
    }

        .ur-pricing__feats li.is-off svg {
            stroke: #6F675F;
        }

        .ur-pricing__feats li > span {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
        }

.ur-pricing__fk {
    font-size: 13px;
    line-height: 18px;
    color: #6F675F;
}

.ur-pricing__fv {
    font-size: 15px;
    line-height: 20px;
    font-weight: 600;
    color: var(--ur-espresso);
}

.ur-pricing__feats li.is-off .ur-pricing__fv {
    font-weight: 500;
    color: #6F675F;
}

/* dark card - #D8D2C9 and #FFB3B5 hold 4.5:1 on espresso */
.ur-pricing__plan--dark .ur-pricing__tag {
    color: #FFB3B5;
}

.ur-pricing__plan--dark .ur-pricing__name,
.ur-pricing__plan--dark .ur-pricing__amt,
.ur-pricing__plan--dark .ur-pricing__hl li,
.ur-pricing__plan--dark .ur-pricing__fv {
    color: var(--ur-cream);
}

.ur-pricing__plan--dark .ur-pricing__note {
    color: #A8C3AC;
}

.ur-pricing__plan--dark .ur-pricing__hl {
    border-top-color: rgba(253, 251, 247, .14);
}

.ur-pricing__plan--dark .ur-pricing__amt small,
.ur-pricing__plan--dark .ur-pricing__fk,
.ur-pricing__plan--dark .ur-pricing__feats li.is-off .ur-pricing__fv {
    color: #D8D2C9;
}

.ur-pricing__plan--dark svg {
    stroke: #A8C3AC;
}

.ur-pricing__plan--dark .ur-pricing__feats li {
    border-top-color: rgba(253, 251, 247, .14);
}

    .ur-pricing__plan--dark .ur-pricing__feats li.is-off svg {
        stroke: #D8D2C9;
    }

.ur-pricing__plan--dark .ur-pricing__cta {
    background: var(--ur-cream);
    color: var(--ur-espresso) !important;
}

    .ur-pricing__plan--dark .ur-pricing__cta:hover,
    .ur-pricing__plan--dark .ur-pricing__cta:focus {
        background: #fff;
    }

/* ---------- Comparison table ---------- */
.ur-pricing__compare {
    margin-top: 3.5rem;
}

.ur-pricing__comptitle {
    margin: 0 0 1.25rem;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 2rem;
    font-weight: 400;
    color: var(--ur-espresso);
}

.ur-pricing__compare .table-responsive {
    border: 1px solid rgba(28, 25, 23, .1);
    border-radius: var(--ur-r-lg);
    background: #fff;
}

.ur-pricing__table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.45;
}

    .ur-pricing__table th,
    .ur-pricing__table td {
        padding: 1rem 1.5rem;
        border-top: 1px solid rgba(28, 25, 23, .1);
        text-align: left;
        vertical-align: top;
    }

    .ur-pricing__table thead th {
        border-top: 0;
        border-bottom: 1px solid rgba(28, 25, 23, .16);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--ur-espresso);
    }

        .ur-pricing__table thead th:first-child {
            color: #6F675F;
        }

    .ur-pricing__table tbody th {
        width: 34%;
        font-weight: 400;
        color: #6F675F;
    }

    .ur-pricing__table td {
        font-weight: 600;
        color: var(--ur-espresso);
    }

        .ur-pricing__table td.is-off {
            font-weight: 400;
            color: #6F675F;
        }

    /* the table stays one white card - cream tints blended into the page. The Premium
       heading takes the card tag's red instead, tying it to the recommended plan. */
    .ur-pricing__table thead .is-premium {
        color: #C53F43;
    }

    /* plan columns share the width, so "Not included" no longer wraps under Basic */
    .ur-pricing__table thead th + th {
        width: 22%;
    }

    .ur-pricing__table td svg {
        display: block;
        width: 20px;
        height: 20px;
        margin: 0;
    }

    .ur-pricing__table td.is-off svg {
        stroke: #6F675F;
    }

/* ---------- Billing period switch ----------
   Centred over the cards. The open period is raised in white on the tinted track, so
   it does not read as a second copy of the espresso Owners / Brokers switch. */
.ur-pricing__billing {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    margin: 0 0 2rem;
}

    .ur-pricing__billing[hidden] {
        display: none;
    }

    .ur-pricing__billing .ur-pricing__switch {
        margin-top: 0;
    }

    .ur-pricing__billing .ur-seg__btn.is-on {
        background: #fff;
        color: var(--ur-espresso);
        box-shadow: 0 1px 2px rgba(28, 25, 23, .08), 0 6px 14px -8px rgba(28, 25, 23, .25);
    }

.ur-pricing__billnote {
    margin: 0;
    font-size: 13px;
    color: #6F675F;
}

/* the recommended plan stands a little proud of the other two */
@media only screen and (min-width: 992px) {
    .ur-pricing__plans {
        padding-top: .75rem;
    }

    .ur-pricing__plan--dark {
        transform: translateY(-.75rem);
    }
}

/* ---------- Questions band ---------- */
.ur-pricing__help {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 2rem;
    flex-wrap: wrap;
    margin-top: 3.5rem;
    padding: 2.25rem 2.5rem;
    border: 1px solid rgba(28, 25, 23, .1);
    border-radius: var(--ur-r-lg);
    background: #fff;
}

.ur-pricing__helptitle {
    margin: 0 0 .35rem;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--ur-espresso);
}

.ur-pricing__help p {
    margin: 0;
    color: #6F675F;
}

.ur-pricing__help .ur-cta {
    min-height: 48px;
}

/* ---------- Tablet: three cards still fit, with less padding ---------- */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .ur-pricing__plans {
        gap: 1rem;
    }

    .ur-pricing__plan {
        padding: 1.5rem 1.25rem;
    }

    .ur-pricing__name {
        font-size: 1.75rem;
    }

    .ur-pricing__amt {
        font-size: 2.25rem;
    }

    .ur-pricing__table th,
    .ur-pricing__table td {
        padding: .85rem 1rem;
    }
}

/* ---------- Phones ----------
   One card per plan with every feature in it, the button straight under the price,
   and no table (the cards already list everything). */
@media only screen and (max-width: 767px) {
    .ur-pricing__head {
        align-items: flex-start;
        text-align: left;
    }

    .ur-pricing__title {
        font-size: 2.25rem;
        line-height: 1.1;
    }

    .ur-pricing__intro {
        margin: 0;
        font-size: 15px;
    }

    .ur-pricing__switch {
        display: flex;
        width: 100%;
        margin-top: 1.25rem;
    }

        .ur-pricing__switch[hidden] {
            display: none;
        }

        .ur-pricing__switch .ur-seg__btn {
            flex: 1 1 0;
            min-width: 0;
            padding: .6rem .4rem;
        }

    .ur-pricing__billing {
        align-items: stretch;
        margin-bottom: 1.5rem;
    }

    .ur-pricing__billnote {
        text-align: center;
    }

    .ur-pricing__plans {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .ur-pricing__plan {
        gap: 1rem;
        padding: 1.25rem;
    }

    .ur-pricing__name {
        font-size: 1.65rem;
    }

    .ur-pricing__amt {
        font-size: 2.25rem;
    }

    .ur-pricing__cta {
        order: 0;
        margin-top: 0;
    }

    .ur-pricing__hl {
        display: none;
    }

    .ur-pricing__feats {
        display: block;
    }

    .ur-pricing__compare {
        display: none;
    }

    .ur-pricing__help {
        flex-direction: column;
        align-items: stretch;
        margin-top: 2.5rem;
        padding: 1.5rem 1.25rem;
    }

        .ur-pricing__help .ur-cta {
            justify-content: space-between;
        }

    /* Pricing is the eighth row of the phone menu; the stagger above stops at seven */
    #urMobileNav.is-open .ur-mobilenav__item:nth-child(8) {
        transition-delay: .54s;
    }

    #urMobileNav.is-open .ur-mobilenav__foot {
        transition-delay: .6s;
    }
}