/* ==========================================================================
   BE REAL ESTATE — listing and detail pages
   Depends on be.css tokens. Logical properties throughout.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page head
   -------------------------------------------------------------------------- */
.be-page-head {
    background: var(--be-brand-50);
    border-block-end: 1px solid var(--be-brand-100);
    padding-block: var(--be-8);
}
.be-page-head__title { font-size: var(--be-text-3xl); margin-block-end: var(--be-2); }
.be-page-head__sub { color: var(--be-muted); margin: 0; max-inline-size: 70ch; }

/* --------------------------------------------------------------------------
   Results toolbar
   -------------------------------------------------------------------------- */
.be-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--be-4);
    flex-wrap: wrap;
    padding-block: var(--be-5);
    border-block-end: 1px solid var(--be-line);
    margin-block-end: var(--be-6);
}
.be-toolbar__count { font-size: var(--be-text-base); color: var(--be-muted); }
.be-toolbar__count b { color: var(--be-ink); font-weight: 700; }
.be-toolbar__controls { display: flex; align-items: center; gap: var(--be-2); flex-wrap: wrap; }
.be-toolbar__sort { min-inline-size: 200px; }

.be-view-toggle { display: inline-flex; border: 1px solid var(--be-line); border-radius: var(--be-r-sm); overflow: hidden; }
.be-view-toggle a {
    inline-size: 38px;
    block-size: 38px;
    display: grid;
    place-items: center;
    color: var(--be-muted);
    background: #fff;
}
.be-view-toggle a + a { border-inline-start: 1px solid var(--be-line); }
.be-view-toggle a.is-active { background: var(--be-brand-50); color: var(--be-brand); }
.be-view-toggle svg { inline-size: 17px; block-size: 17px; }

/* Applied filters */
.be-applied { display: flex; align-items: center; gap: var(--be-2); flex-wrap: wrap; margin-block-end: var(--be-5); }
.be-applied__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--be-2);
    padding: 0.3125rem var(--be-3);
    background: var(--be-brand-50);
    border: 1px solid var(--be-brand-100);
    border-radius: var(--be-r-pill);
    font-size: var(--be-text-sm);
    font-weight: 600;
    color: var(--be-navy);
}
.be-applied__chip:hover { background: var(--be-brand-100); color: var(--be-navy); }
.be-applied__chip svg { inline-size: 13px; block-size: 13px; }

/* --------------------------------------------------------------------------
   Sidebar + results
   -------------------------------------------------------------------------- */
.be-listing { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--be-8); align-items: start; }
@media (max-width: 991px) { .be-listing { grid-template-columns: minmax(0, 1fr); gap: var(--be-5); } }

.be-filters-panel {
    position: sticky;
    inset-block-start: calc(var(--be-header-h) + var(--be-4));
    background: #fff;
    border: 1px solid var(--be-line);
    border-radius: var(--be-r-lg);
    padding: var(--be-5);
    max-block-size: calc(100dvh - var(--be-header-h) - var(--be-8));
    overflow-y: auto;
}
.be-filters-panel__group + .be-filters-panel__group {
    margin-block-start: var(--be-5);
    padding-block-start: var(--be-5);
    border-block-start: 1px solid var(--be-line);
}
.be-filters-panel__title { font-size: var(--be-text-sm); font-weight: 700; margin-block-end: var(--be-3); }
.be-range { display: grid; grid-template-columns: 1fr 1fr; gap: var(--be-2); }

/* List variant of the property card */
.be-card--list .be-card__media { inline-size: 300px; flex: none; aspect-ratio: 4 / 3; }.be-card--list .be-card__body { padding: var(--be-5) var(--be-6); }
@media (max-width: 767px) {
    .be-card--list { flex-direction: column; }
    .be-card--list .be-card__media { inline-size: 100%; aspect-ratio: 16 / 10; }
}

/* --------------------------------------------------------------------------
   Detail layout
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) { .be-detail { grid-template-columns: minmax(0, 1fr); } }

.be-gallery__main { aspect-ratio: 4 / 3; background: var(--be-canvas); display: block; }
.be-gallery__side { display: grid; grid-template-rows: 1fr 1fr; gap: var(--be-2); }
.be-gallery__side > a { position: relative; background: var(--be-canvas); overflow: hidden; display: block; }
.be-gallery img { inline-size: 100%; block-size: 100%; object-fit: cover; }
@media (max-width: 767px) {
    .be-gallery { grid-template-columns: minmax(0, 1fr); }
    .be-gallery__side { display: none; }
}

.be-detail__head { padding-block: var(--be-6); }
.be-detail__badges { display: flex; gap: var(--be-2); flex-wrap: wrap; margin-block-end: var(--be-4); }

/* Facts wrap to their own width instead of being forced into four equal
   columns. A compound that publishes only its unit count was getting one
   figure stretched across a full-width tinted panel, which read as an error
   rather than as a fact. */
.be-specs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--be-4) var(--be-8);
    padding: var(--be-4) var(--be-5);
    background: var(--be-brand-50);
    border: 1px solid var(--be-brand-100);
    border-radius: var(--be-r-md);
}
.be-specs > * { flex: 0 1 auto; min-inline-size: 96px; }
@media (max-width: 767px) { .be-specs { gap: var(--be-3) var(--be-6); } }
.be-spec { display: flex; flex-direction: column; gap: var(--be-1); }
.be-spec dt { font-size: var(--be-text-xs); color: var(--be-muted); font-weight: 600; }
.be-spec dd { margin: 0; font-size: var(--be-text-md); font-weight: 700; color: var(--be-ink); }

.be-block { padding-block: var(--be-8); border-block-start: 1px solid var(--be-line); }
.be-block:first-of-type { border-block-start: 0; }
.be-block__title { font-size: var(--be-text-xl); margin-block-end: var(--be-5); }

.be-prose { color: var(--be-ink); line-height: var(--be-leading-normal); }
.be-prose p { margin-block-end: var(--be-4); }
.be-prose img { border-radius: var(--be-r); margin-block: var(--be-4); max-inline-size: 100%; }
.be-prose h2, .be-prose h3 { margin-block: var(--be-6) var(--be-3); }
.be-prose ul, .be-prose ol { list-style: disc; padding-inline-start: var(--be-6); margin-block-end: var(--be-4); }
.be-prose ol { list-style: decimal; }
.be-prose li { margin-block-end: var(--be-2); }
.be-prose table { inline-size: 100%; border-collapse: collapse; margin-block-end: var(--be-4); }
.be-prose td, .be-prose th { padding: var(--be-2) var(--be-3); border: 1px solid var(--be-line); text-align: start; }

@media (max-width: 575px) { .be-facts { grid-template-columns: minmax(0, 1fr); } }

.be-amenities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--be-3); }
@media (max-width: 767px) { .be-amenities { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.be-amenity { display: flex; align-items: center; gap: var(--be-2); font-size: var(--be-text-base); }
.be-amenity svg { inline-size: 18px; block-size: 18px; color: var(--be-success); flex: none; }

/* Sticky contact rail */
.be-aside { position: sticky; inset-block-start: calc(var(--be-header-h) + var(--be-4)); display: grid; gap: var(--be-4); }
@media (max-width: 1199px) { .be-aside { position: static; } }
.be-panel { background: #fff; border: 1px solid var(--be-line); border-radius: var(--be-r-lg); padding: var(--be-5); }
.be-panel--accent { background: var(--be-brand-50); border-color: var(--be-brand-100); }
.be-panel__title { font-size: var(--be-text-md); font-weight: 700; margin-block-end: var(--be-4); }

.be-map { block-size: 340px; border-radius: var(--be-r-lg); overflow: hidden; border: 1px solid var(--be-line); }
.be-map iframe { inline-size: 100%; block-size: 100%; border: 0; }

/* --------------------------------------------------------------------------
   Developer / area hero
   -------------------------------------------------------------------------- */
.be-entity-hero {
    position: relative;
    background: linear-gradient(160deg, var(--be-navy), var(--be-brand));
    color: #fff;
    padding-block: var(--be-12);
    overflow: hidden;
}
.be-entity-hero__cover { position: absolute; inset: 0; opacity: 0.2; }
.be-entity-hero__cover img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.be-entity-hero__inner { position: relative; z-index: 2; display: flex; align-items: center; gap: var(--be-6); flex-wrap: wrap; }
.be-entity-hero__logo {
    inline-size: 96px;
    block-size: 96px;
    background: #fff;
    border-radius: var(--be-r-lg);
    display: grid;
    place-items: center;
    padding: var(--be-3);
    flex: none;
}
.be-entity-hero__logo img { max-inline-size: 100%; max-block-size: 100%; object-fit: contain; }
.be-entity-hero__logo span { font-size: var(--be-text-3xl); font-weight: 800; color: var(--be-navy); }
.be-entity-hero h1 { color: #fff; font-size: var(--be-text-3xl); margin-block-end: var(--be-2); }
.be-entity-hero__meta { display: flex; gap: var(--be-8); flex-wrap: wrap; color: rgba(255, 255, 255, 0.82); font-size: var(--be-text-sm); }
.be-entity-hero__meta b { color: #fff; display: block; font-size: var(--be-text-xl); font-weight: 800; line-height: 1.3; }
.be-entity-hero__lead { color: rgba(255, 255, 255, 0.86); max-inline-size: 60ch; margin-block: var(--be-3) 0; }

/* Alphabet filter */
.be-alpha { display: flex; flex-wrap: wrap; gap: var(--be-1); }
.be-alpha a {
    min-inline-size: 34px;
    block-size: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--be-line);
    border-radius: var(--be-r-sm);
    font-size: var(--be-text-sm);
    font-weight: 700;
    color: var(--be-ink);
    background: #fff;
}
.be-alpha a:hover, .be-alpha a.is-active { background: var(--be-brand); border-color: var(--be-brand); color: #fff; }

/* --------------------------------------------------------------------------
   Trust band - the one full-bleed dark section on the page
   --------------------------------------------------------------------------
   Deep navy rather than the brand bronze: bronze is the action colour, and a
   band this large in bronze would out-shout every button on the page.
   -------------------------------------------------------------------------- */
.be-band {
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0, 87, 184, 0.22), transparent 70%),
        var(--be-navy);
    color: #fff;
    padding-block: var(--be-16);
    text-align: center;
    margin-block: var(--be-16);
}
.be-band__eyebrow {
    display: inline-block;
    padding: var(--be-1) var(--be-4);
    border-radius: var(--be-r-pill);
    background: rgba(127, 179, 240, 0.16);
    border: 1px solid rgba(127, 179, 240, 0.30);
    color: var(--be-gold);
    font-size: var(--be-text-sm);
    font-weight: 700;
    margin: 0 0 var(--be-5);
}
.be-band__title { color: #fff; font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800; margin: 0 0 var(--be-2); }
.be-band__lead { color: rgba(255, 255, 255, 0.7); margin: 0 auto var(--be-10); max-inline-size: 56ch; }

.be-band__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--be-4);
}
.be-band__stat {
    padding: var(--be-6) var(--be-4);
    border-radius: var(--be-r-lg);
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.09);
}
.be-band__value { font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 800; color: var(--be-gold); line-height: 1.1; }
.be-band__label { font-size: var(--be-text-sm); color: rgba(255, 255, 255, 0.72); margin-block-start: var(--be-1); }

@media (max-width: 767px) {
    .be-band__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .be-band { padding-block: var(--be-12); margin-block: var(--be-12); }
}

/* --------------------------------------------------------------------------
   How it works - photo cards with a numbered badge
   -------------------------------------------------------------------------- */
.be-step {
    position: relative;
    display: block;
    border-radius: var(--be-r-lg);
    overflow: hidden;
    min-block-size: 300px;
    background: var(--be-navy);
    color: #fff;
    isolation: isolate;
}
.be-step img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.be-step:hover img { transform: scale(1.06); }
.be-step::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.15) 0%, rgba(15, 23, 42, 0.5) 45%, rgba(15, 23, 42, 0.9) 100%);
}.be-step__num {
    font-size: var(--be-text-xs);
    font-weight: 800;
    color: #fff;
    line-height: 1;
    position: absolute;
    inset-block-start: var(--be-5);
    inset-inline-end: var(--be-5);
    padding: 3px var(--be-3);
    border-radius: var(--be-r-pill);
    background: var(--be-brand);
}
.be-step__body {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    display: flex;
    flex-direction: column;
    gap: var(--be-2);
    padding: var(--be-6);
}.be-step__title { font-size: var(--be-text-lg); font-weight: 700; color: #fff; }.be-step__text { color: rgba(255, 255, 255, 0.82); margin: 0; font-size: var(--be-text-sm); }
.be-step__cta { display: inline-flex; align-items: center; gap: 5px; font-size: var(--be-text-sm); font-weight: 700; color: var(--be-gold); margin-block-start: var(--be-1); }

/* --------------------------------------------------------------------------
   Why choose - icon, title, one line
   -------------------------------------------------------------------------- */
.be-benefit { display: flex; flex-direction: column; gap: var(--be-2); }.be-benefit__icon {
    inline-size: 44px;
    block-size: 44px;
    display: grid;
    place-items: center;
    border-radius: var(--be-r-md);
    background: var(--be-brand-50);
    color: var(--be-brand);
    margin-block-end: var(--be-1);
}.be-benefit__title { font-size: var(--be-text-md); font-weight: 700; color: var(--be-navy); margin: 0; }.be-benefit__text { color: var(--be-muted); margin: 0; font-size: var(--be-text-sm); line-height: var(--be-leading-snug); }

/* ==========================================================================
   Detail pages - property and compound
   ========================================================================== */

/* Gallery: one hero frame plus a four-up mosaic. Below 768px it collapses to
   the hero alone with a count button, because four thumbnails on a phone are
   too small to tell apart. */
.be-gallery {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: repeat(2, 1fr);
    gap: var(--be-2);
    block-size: clamp(280px, 42vw, 460px);
    border-radius: var(--be-r-lg);
    overflow: hidden;
}
/* The five-up mosaic is the maximum, not the assumption. With fewer frames the
   grid narrows to match, so a compound with one photo shows one full-width
   photo instead of one third of a row and two empty columns. */
.be-gallery[data-count="1"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr; }
.be-gallery[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr; }
.be-gallery[data-count="3"] { grid-template-columns: 2fr 1fr; }
.be-gallery[data-count="4"] { grid-template-columns: 2fr 1fr 1fr; }

/* Only the five-up and three-up layouts have a second row for the lead frame
   to span. */
.be-gallery[data-count="1"] .be-gallery__item:first-child,
.be-gallery[data-count="2"] .be-gallery__item:first-child { grid-row: auto; }

.be-gallery__item { position: relative; display: block; overflow: hidden; background: var(--be-line-soft); }
.be-gallery__item:first-child { grid-row: span 2; }
.be-gallery__item img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1); }
.be-gallery__item:hover img { transform: scale(1.04); }

.be-gallery__more {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(15, 23, 42, 0.55);
    color: #fff;
    font-weight: 700;
    font-size: var(--be-text-md);
    place-content: center;
    gap: var(--be-1);
    justify-items: center;
}
.be-gallery__badge {
    position: absolute;
    inset-block-start: var(--be-4);
    inset-inline-end: var(--be-4);
    z-index: 3;
}
@media (max-width: 767px) {
    .be-gallery { grid-template-columns: 1fr; grid-template-rows: 1fr; block-size: 260px; }
    .be-gallery__item:not(:first-child) { display: none; }
    .be-gallery__item:nth-child(2) { display: block; position: absolute; inset: auto var(--be-4) var(--be-4) auto; inline-size: 96px; block-size: 40px; border-radius: var(--be-r-sm); }
}

/* Signal strip: three neutral facts about the listing's activity. */
.be-signals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--be-line);
    border-radius: var(--be-r-md);
    background: var(--be-surface);
    margin-block-start: var(--be-4);
    overflow: hidden;
}
.be-signals__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--be-2);
    padding: var(--be-3) var(--be-4);
    font-size: var(--be-text-sm);
    color: var(--be-ink-soft);
    text-align: center;
}
.be-signals__item + .be-signals__item { border-inline-start: 1px solid var(--be-line); }
.be-signals__item .be-icon { color: var(--be-brand); flex: none; }
.be-signals__item b { color: var(--be-navy); }
@media (max-width: 767px) {
    .be-signals { grid-template-columns: minmax(0, 1fr); }
    .be-signals__item + .be-signals__item { border-inline-start: 0; border-block-start: 1px solid var(--be-line); }
}

/* Two-column detail shell: content leads, the contact rail follows and sticks. */
.be-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--be-8);
    align-items: start;
}
@media (max-width: 991px) {
    .be-detail { grid-template-columns: minmax(0, 1fr); }
}

.be-detail__rail { position: sticky; inset-block-start: calc(var(--be-header-h) + var(--be-4)); display: grid; gap: var(--be-4); }
@media (max-width: 991px) { .be-detail__rail { position: static; } }

.be-detail__heading {
    display: flex;
    align-items: center;
    gap: var(--be-2);
    font-size: var(--be-text-xl);
    font-weight: 800;
    color: var(--be-navy);
    margin: 0 0 var(--be-1);
}
.be-detail__heading .be-icon { color: var(--be-brand); }
.be-detail__sub { color: var(--be-muted); font-size: var(--be-text-sm); margin: 0 0 var(--be-4); }.be-detail__title { font-size: clamp(1.25rem, 2.4vw, 1.75rem); margin-block-end: var(--be-2); font-weight: 800; color: var(--be-navy); margin: 0 0 var(--be-3); line-height: 1.35; }

.be-detail__pricerow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--be-5);
    padding-block: var(--be-4);
    border-block: 1px solid var(--be-line);
    margin-block-end: var(--be-6);
}.be-detail__price { font-size: clamp(1.35rem, 2.6vw, 1.875rem); font-weight: 800; color: var(--be-navy); line-height: 1.2; }
.be-detail__price small { font-size: var(--be-text-md); font-weight: 600; color: var(--be-muted); }
.be-detail__spec { display: inline-flex; align-items: center; gap: var(--be-2); color: var(--be-ink-soft); font-size: var(--be-text-base); }
.be-detail__spec .be-icon { color: var(--be-brand-400); }
.be-detail__spec b { font-weight: 700; color: var(--be-navy); }

/* Fact table: label on the inline start, value on the end, zebra striped. */
.be-facts { inline-size: 100%; border: 1px solid var(--be-line); border-radius: var(--be-r-md); overflow: hidden; margin-block-end: var(--be-8); }
.be-facts__row { display: grid; grid-template-columns: minmax(120px, 0.4fr) minmax(0, 1fr); }
.be-facts__row:nth-child(odd) { background: var(--be-canvas); }
.be-facts__row dt { padding: var(--be-3) var(--be-4); color: var(--be-muted); font-size: var(--be-text-sm); margin: 0; }
.be-facts__row dd { padding: var(--be-3) var(--be-4); margin: 0; color: var(--be-navy); font-weight: 600; text-align: end; }
.be-facts__row dd a { color: var(--be-brand); }
.be-facts__row dd a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Payment calculator
   --------------------------------------------------------------------------
   One card split into a controls column and a navy summary panel. The panel is
   a grid cell rather than a padded box sitting inside one, so it fills its half
   of the card corner to corner and the two halves read as a single object.

   What was wrong before: a broken selector list — `.be-calc__controls,`
   followed by a blank line — swallowed the rule that gave both columns their
   card shell. That left `.be-calc__results` holding a border-colour with no
   border-width and no padding, so the results were bare text on a beige
   rectangle. The same two properties were then redeclared 700 lines further
   down, which is the pattern that has broken this stylesheet before.
   -------------------------------------------------------------------------- */
.be-calc { margin-block-end: var(--be-8); }

.be-calc__card {
    border: 1px solid var(--be-line);
    border-radius: var(--be-r-lg);
    background: var(--be-surface);
    box-shadow: var(--be-shadow-sm);
    overflow: hidden;
}

/* Head — title, and the unit price the figures below are a proportion of. */
.be-calc__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--be-4);
    flex-wrap: wrap;
    padding: var(--be-5) var(--be-6);
    border-block-end: 1px solid var(--be-line);
    background: var(--be-canvas);
}
.be-calc__title {
    display: flex;
    align-items: center;
    gap: var(--be-2);
    margin: 0;
    font-size: var(--be-text-2xl);
    font-weight: 800;
    line-height: var(--be-leading-tight);
    color: var(--be-navy);
}
.be-calc__title .be-icon { flex: none; color: var(--be-brand); }
.be-calc__sub { margin: var(--be-1) 0 0; font-size: var(--be-text-sm); color: var(--be-muted); }

.be-calc__anchor { margin: 0; text-align: end; line-height: var(--be-leading-tight); }
.be-calc__anchor span { display: block; font-size: var(--be-text-xs); color: var(--be-muted); }
.be-calc__anchor b { font-size: var(--be-text-lg); font-weight: 800; color: var(--be-brand); }

/* Body */
.be-calc__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
    align-items: stretch;
}
@media (max-width: 860px) {
    .be-calc__grid { grid-template-columns: minmax(0, 1fr); }
}

.be-calc__controls {
    display: grid;
    gap: var(--be-6);
    align-content: start;
    padding: var(--be-6);
}

/* One of these is a fieldset; min-inline-size:0 defeats the fieldset's
   built-in min-content floor, which otherwise stops the grid shrinking. */
.be-calc__field { min-inline-size: 0; margin: 0; padding: 0; border: 0; }

.be-calc__label {
    display: block;
    margin: 0 0 var(--be-3);
    padding: 0;
    font-size: var(--be-text-sm);
    font-weight: 700;
    color: var(--be-navy);
}
.be-calc__labelrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--be-3);
    flex-wrap: wrap;
    margin-block-end: var(--be-3);
}
.be-calc__labelrow .be-calc__label { margin: 0; }

/* Amount / percentage switch: the same navy shell as the buy-rent selector, so
   the two mode controls on the site read as the same kind of thing. */
.be-calc .be-seg {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: var(--be-r-pill);
    background: var(--be-navy);
}
.be-calc .be-seg__btn {
    appearance: none;
    border: 0;
    cursor: pointer;
    padding: 3px var(--be-4);
    border-radius: var(--be-r-pill);
    background: transparent;
    color: rgba(255, 255, 255, 0.72);
    font: inherit;
    font-size: var(--be-text-xs);
    font-weight: 700;
    transition: background var(--be-transition), color var(--be-transition);
}
.be-calc .be-seg__btn:hover { color: #fff; }
.be-calc .be-seg__btn.is-active { background: #fff; color: var(--be-navy); }

/* Currency sits in its own affix rather than floating over the field, so the
   figure can never collide with it however long it grows. */
.be-calc__input {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--be-line);
    border-radius: var(--be-r-sm);
    background: var(--be-surface);
    overflow: hidden;
    transition: border-color var(--be-transition), box-shadow var(--be-transition);
}
.be-calc__input:focus-within { border-color: var(--be-brand); box-shadow: var(--be-ring); }

.be-calc__unit {
    display: inline-flex;
    align-items: center;
    flex: none;
    padding-inline: var(--be-4);
    background: var(--be-canvas);
    border-inline-end: 1px solid var(--be-line);
    color: var(--be-muted);
    font-size: var(--be-text-sm);
    font-weight: 700;
    pointer-events: none;
}
.be-calc__input input {
    flex: 1;
    min-inline-size: 0;
    padding: var(--be-3) var(--be-4);
    font: inherit;
    font-size: var(--be-text-2xl);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--be-navy);
    border: 0;
    background: none;
    outline: none;
    text-align: start;
}

/* The field carries dir="ltr" so a long figure is never reordered by the bidi
   algorithm. Logical alignment then resolves against the *input's* own
   direction rather than the page's, so on an Arabic page `start` pinned the
   number to the far left while the currency affix sat at the right, with the
   width of the field between them. `end` puts the two back together. */
[dir="rtl"] .be-calc__input input { text-align: end; }

/* accent-color rather than a hand-built track: browsers flip a range input
   under `direction: rtl`, and a physical-direction gradient would fill it from
   the wrong end in Arabic. */
.be-calc__range {
    inline-size: 100%;
    block-size: 6px;
    margin-block-start: var(--be-4);
    accent-color: var(--be-brand);
    cursor: pointer;
}
.be-calc__bounds {
    display: flex;
    justify-content: space-between;
    margin-block-start: var(--be-2);
    font-size: var(--be-text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--be-muted);
}

/* Deposit shortcuts */
.be-calc__presets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--be-2);
    margin-block-start: var(--be-4);
}
.be-calc__preset {
    appearance: none;
    cursor: pointer;
    padding: var(--be-2) var(--be-4);
    border: 1px solid var(--be-line);
    border-radius: var(--be-r-pill);
    background: var(--be-surface);
    color: var(--be-ink-soft);
    font: inherit;
    font-size: var(--be-text-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: background var(--be-transition), border-color var(--be-transition), color var(--be-transition);
}
.be-calc__preset:hover {
    border-color: var(--be-brand-300);
    background: var(--be-brand-50);
    color: var(--be-brand-700);
}
.be-calc__preset.is-active {
    border-color: var(--be-brand);
    background: var(--be-brand);
    color: #fff;
}

/* Term chooser — eleven options shown at once, because seeing the range is the
   point of the control. Native radios keep arrow-key navigation and the
   checked state without script. */
.be-calc__termgrid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--be-2);
}
@media (max-width: 1180px) { .be-calc__termgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 400px) { .be-calc__termgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.be-calc__term { position: relative; display: block; }
.be-calc__term input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.be-calc__term span {
    display: block;
    padding: var(--be-2) var(--be-1);
    text-align: center;
    border: 1px solid var(--be-line);
    border-radius: var(--be-r-sm);
    background: var(--be-surface);
    pointer-events: none;
    transition: background var(--be-transition), border-color var(--be-transition);
}
.be-calc__term b {
    display: block;
    font-size: var(--be-text-md);
    font-weight: 800;
    line-height: 1.2;
    color: var(--be-navy);
}
.be-calc__term em {
    display: block;
    font-style: normal;
    font-size: 10px;
    line-height: 1.4;
    color: var(--be-muted);
}
.be-calc__term input:hover + span { border-color: var(--be-brand-300); background: var(--be-brand-50); }
.be-calc__term input:focus-visible + span { border-color: var(--be-brand); box-shadow: var(--be-ring); }
.be-calc__term input:checked + span { border-color: var(--be-navy); background: var(--be-navy); }
.be-calc__term input:checked + span b { color: #fff; }
.be-calc__term input:checked + span em { color: rgba(255, 255, 255, 0.7); }

/* --------------------------------------------------------------------------
   Summary panel
   -------------------------------------------------------------------------- */
.be-calc__panel {
    display: flex;
    flex-direction: column;
    padding: var(--be-6);
    background: var(--be-navy);
    color: #fff;
    border-inline-start: 1px solid var(--be-navy-800);
}
@media (max-width: 860px) {
    .be-calc__panel { border-inline-start: 0; border-block-start: 1px solid var(--be-navy-800); }
}

.be-calc__panel-label { margin: 0; font-size: var(--be-text-sm); font-weight: 700; color: rgba(255, 255, 255, 0.62); }
.be-calc__hero {
    margin: var(--be-1) 0 0;
    font-size: var(--be-text-3xl);
    font-weight: 800;
    line-height: 1.15;
    color: var(--be-gold);
}
.be-calc__hero-meta { margin: var(--be-1) 0 0; font-size: var(--be-text-xs); color: rgba(255, 255, 255, 0.55); }

.be-calc__rows {
    display: grid;
    gap: var(--be-3);
    margin: var(--be-5) 0 0;
    padding-block-start: var(--be-4);
    border-block-start: 1px solid rgba(255, 255, 255, 0.14);
}
.be-calc__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--be-3); }
.be-calc__row dt { margin: 0; font-size: var(--be-text-sm); color: rgba(255, 255, 255, 0.62); }
.be-calc__row dd { margin: 0; font-size: var(--be-text-md); font-weight: 700; color: #fff; }
.be-calc__row--total { padding-block-start: var(--be-3); border-block-start: 1px dashed rgba(255, 255, 255, 0.16); }
.be-calc__row--total dt { color: rgba(255, 255, 255, 0.8); font-weight: 600; }
.be-calc__row--total dd { color: var(--be-gold); }

/* The split bar is the part of the panel read at a glance: how much of the
   price the deposit actually covers, which the figures above only imply. */
.be-calc__split {
    display: flex;
    block-size: 8px;
    margin-block-start: var(--be-5);
    border-radius: var(--be-r-pill);
    background: rgba(255, 255, 255, 0.16);
    overflow: hidden;
}
.be-calc__split-fill {
    display: block;
    inline-size: var(--be-share, 10%);
    background: var(--be-gold);
    border-radius: var(--be-r-pill);
    transition: inline-size var(--be-transition);
}
.be-calc__legend {
    display: flex;
    justify-content: space-between;
    gap: var(--be-3);
    margin-block-start: var(--be-2);
    font-size: var(--be-text-xs);
    color: rgba(255, 255, 255, 0.6);
}
.be-calc__legend-item { display: inline-flex; align-items: center; gap: var(--be-1); }
.be-calc__legend-item::before {
    content: '';
    flex: none;
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
}
.be-calc__legend-item--down::before { background: var(--be-gold); }
.be-calc__legend-item--rest::before { background: rgba(255, 255, 255, 0.28); }
.be-calc__legend b { font-weight: 700; color: #fff; }

/* `margin-block-start: auto` in the flex column pins the disclaimer to the
   bottom of the panel however tall the controls beside it grow. */
.be-calc__note {
    display: flex;
    gap: var(--be-2);
    margin: auto 0 0;
    padding-block-start: var(--be-5);
    font-size: var(--be-text-xs);
    line-height: var(--be-leading-snug);
    color: rgba(255, 255, 255, 0.5);
}
.be-calc__note .be-icon { flex: none; margin-block-start: 2px; }


/* Small segmented control, reused by the calculator's unit switch. */
.be-seg--sm { padding: 2px; }
.be-seg--sm .be-seg__btn { padding: 4px var(--be-3); font-size: var(--be-text-xs); }

/* --------------------------------------------------------------------------
   Agent / contact rail
   -------------------------------------------------------------------------- */
.be-agent {
    padding: var(--be-5);
    border: 1px solid var(--be-line);
    border-radius: var(--be-r-lg);
    background: var(--be-surface);
}
.be-agent__head { display: flex; align-items: center; gap: var(--be-3); }.be-agent__avatar {
    inline-size: 46px;
    block-size: 46px;
    border-radius: var(--be-r-pill);
    object-fit: cover;
    flex: none;
    background: var(--be-brand);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
}.be-agent__name { font-weight: 700; font-size: var(--be-text-md); color: var(--be-navy); margin: 0; }.be-agent__role { font-size: var(--be-text-sm); color: var(--be-muted); margin: 0; }
.be-agent__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--be-3);
    margin-block: var(--be-4);
    padding-block: var(--be-4);
    border-block: 1px solid var(--be-line);
    text-align: center;
}
.be-agent__stats b { display: block; font-size: var(--be-text-lg); font-weight: 800; color: var(--be-navy); }
.be-agent__stats span { font-size: var(--be-text-xs); color: var(--be-muted); }
.be-agent__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--be-2); margin-block-start: var(--be-3); }
.be-agent__actions--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* WhatsApp keeps its own colour: it is a recognised channel, not our brand. */
.be-btn--whatsapp { --_bg: #22a45d; --_bd: #22a45d; --_fg: #fff; }
.be-btn--whatsapp:hover { --_bg: #1c8b4e; --_bd: #1c8b4e; color: #fff; }

/* Sticky contact bar on small screens, where the rail has moved below. */
.be-stickybar {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 90;
    display: none;
    gap: var(--be-2);
    padding: var(--be-3) var(--be-4);
    background: var(--be-surface);
    border-block-start: 1px solid var(--be-line);
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.1);
}
.be-stickybar .be-btn { flex: 1; }
@media (max-width: 991px) {
    .be-stickybar { display: flex; }
    body.be-has-sticky { padding-block-end: 76px; }
}

/* Floor plans: a plain scrollable frame; the drawing carries the detail. */
.be-plans {
    border: 1px solid var(--be-line);
    border-radius: var(--be-r-md);
    background: var(--be-canvas);
    padding: var(--be-4);
    overflow-x: auto;
    margin-block-end: var(--be-8);
}
.be-plans img { max-inline-size: 100%; block-size: auto; display: block; margin-inline: auto; border-radius: var(--be-r-sm); }

/* FAQ accordion, native disclosure so it works before any script runs. */
.be-faq { display: grid; gap: var(--be-2); margin-block-end: var(--be-8); }
.be-faq__item { border: 1px solid var(--be-line); border-radius: var(--be-r-sm); background: var(--be-surface); }
.be-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--be-3);
    padding: var(--be-4);
    font-weight: 700;
    color: var(--be-navy);
    cursor: pointer;
    list-style: none;
}
.be-faq__item summary::-webkit-details-marker { display: none; }
.be-faq__item summary::after { content: '+'; color: var(--be-brand); font-size: var(--be-text-lg); font-weight: 800; }
.be-faq__item[open] summary::after { content: '\2212'; }
.be-faq__body { padding: 0 var(--be-4) var(--be-4); color: var(--be-ink-soft); font-size: var(--be-text-base); }
.be-faq__body p { margin: 0 0 var(--be-2); }

/* ==========================================================================
   Index page banner
   ==========================================================================
   Warm cream rather than the navy used by the trust band: an index page opens
   the journey and should feel light, while the trust band is a full stop.
   ========================================================================== */
.be-pagehero {
    background:
        radial-gradient(ellipse 70% 100% at 50% 0%, var(--be-brand-50), transparent 72%),
        linear-gradient(180deg, #fdf9f5 0%, var(--be-canvas) 100%);
    padding-block: var(--be-12) var(--be-10);
    text-align: center;
    border-block-end: 1px solid var(--be-line);
}

.be-breadcrumb--center { justify-content: center; margin-block-end: var(--be-5); }

.be-pagehero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--be-2);
    padding: var(--be-1) var(--be-4);
    border-radius: var(--be-r-pill);
    background: var(--be-surface);
    border: 1px solid var(--be-brand-100);
    color: var(--be-brand);
    font-size: var(--be-text-sm);
    font-weight: 700;
    margin: 0 0 var(--be-4);
}

.be-pagehero__title {
    font-size: clamp(1.75rem, 3.6vw, 2.75rem);
    font-weight: 800;
    color: var(--be-navy);
    line-height: 1.25;
    margin: 0 0 var(--be-3);
}
.be-pagehero__title span { display: block; color: var(--be-brand); }

.be-pagehero__sub {
    color: var(--be-muted);
    font-size: var(--be-text-lg);
    max-inline-size: 62ch;
    margin: 0 auto;
}

.be-pagehero__stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--be-3);
    margin-block-start: var(--be-8);
}

.be-chipstat {
    display: inline-flex;
    align-items: center;
    gap: var(--be-3);
    padding: var(--be-3) var(--be-5);
    border-radius: var(--be-r-md);
    background: var(--be-surface);
    border: 1px solid var(--be-line);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.be-chipstat__icon {
    inline-size: 32px;
    block-size: 32px;
    display: grid;
    place-items: center;
    border-radius: var(--be-r-sm);
    background: var(--be-brand-50);
    color: var(--be-brand);
    flex: none;
}
.be-chipstat b { display: block; font-size: var(--be-text-lg); font-weight: 800; color: var(--be-navy); line-height: 1.15; }
.be-chipstat small { font-size: var(--be-text-xs); color: var(--be-muted); }

@media (max-width: 767px) {
    .be-pagehero { padding-block: var(--be-8) var(--be-6); }
    .be-pagehero__stats { gap: var(--be-2); }
    .be-chipstat { padding: var(--be-2) var(--be-3); }
}

/* --------------------------------------------------------------------------
   Chip row - browse by area
   -------------------------------------------------------------------------- */
.be-chiprow { padding-block: var(--be-5); text-align: center; }
.be-chiprow__label { font-size: var(--be-text-sm); color: var(--be-muted); margin: 0 0 var(--be-3); }
.be-chiprow__track {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: var(--be-2);
    overflow-x: auto;
    padding-block-end: var(--be-2);
    scrollbar-width: none;
}
.be-chiprow__track::-webkit-scrollbar { display: none; }.be-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--be-2);
    padding: var(--be-2) var(--be-4);
    font-size: var(--be-text-sm);
    font-weight: 600;
    color: var(--be-ink-soft);
    background: var(--be-surface);
    border: 1px solid var(--be-line);
    border-radius: var(--be-r-pill);
    transition: border-color var(--be-transition), color var(--be-transition), background var(--be-transition);
    white-space: nowrap;
    flex: none;
}.be-chip:hover { border-color: var(--be-brand-100); color: var(--be-brand); background: var(--be-brand-50); }
.be-chip.is-active { background: var(--be-brand); border-color: var(--be-brand); color: #fff; }
.be-chip__count {
    padding: 1px 7px;
    border-radius: var(--be-r-pill);
    background: var(--be-brand-50);
    color: var(--be-brand);
    font-size: var(--be-text-xs);
    font-weight: 700;
}
.be-chip.is-active .be-chip__count { background: rgba(255, 255, 255, 0.22); color: #fff; }

@media (max-width: 767px) {
    .be-chiprow__track { justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   Filter bar - one sticky row above the results
   -------------------------------------------------------------------------- */
.be-filterbar {
    position: sticky;
    inset-block-start: var(--be-header-h);
    z-index: 20;
    background: var(--be-surface);
    border-block-end: 1px solid var(--be-line);
    padding-block: var(--be-3);
}
.be-filterbar__inner { display: flex; align-items: center; gap: var(--be-3); }
.be-filterbar .be-searchbar { flex: 1; min-inline-size: 0; }

@media (max-width: 767px) {
    .be-filterbar { position: static; }
    .be-filterbar__inner { flex-wrap: wrap; }
    .be-filterbar .be-searchbar { inline-size: 100%; flex: none; }
}

/* Results header: count on one side, sort/layout on the other. */
.be-results {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--be-4);
    flex-wrap: wrap;
    margin-block-end: var(--be-6);
}
.be-results__title { font-size: var(--be-text-xl); font-weight: 800; color: var(--be-navy); margin: 0; }
.be-results__count { font-size: var(--be-text-sm); color: var(--be-muted); margin: var(--be-1) 0 0; }
.be-results__count b { color: var(--be-brand); font-weight: 700; }

/* When the page prints its own result count, the toolbar keeps only its
   controls and stops claiming the full row width. */
.be-toolbar--bare { border: 0; padding: 0; background: none; justify-content: flex-end; }

/* ==========================================================================
   Lead capture - add property, contact
   ========================================================================== */

/* A dark, compact banner rather than the cream index hero: this page is a
   task, not a browse, and the form should start as high as possible. */
.be-listhero {
    background: linear-gradient(180deg, var(--be-navy-900) 0%, var(--be-navy) 100%);
    color: #fff;
    padding-block: var(--be-10);
    text-align: center;
}
.be-listhero__title { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800; color: #fff; margin: 0 0 var(--be-2); }
.be-listhero__title span { color: var(--be-gold); }
.be-listhero__sub { color: rgba(255, 255, 255, 0.75); margin: 0; }.be-container--narrow { max-width: 880px; max-inline-size: 880px; }

.be-formcard {
    background: var(--be-surface);
    border: 1px solid var(--be-line);
    border-radius: var(--be-r-lg);
    overflow: hidden;
    box-shadow: 0 18px 40px -24px rgba(15, 23, 42, 0.28);
    margin-block-start: calc(var(--be-8) * -1);
    position: relative;
    z-index: 2;
}
.be-formcard__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--be-4);
    padding: var(--be-5) var(--be-6);
    background: var(--be-navy);
    color: #fff;
}
.be-formcard__head .be-icon { color: var(--be-gold); flex: none; }
.be-formcard__title { font-size: var(--be-text-lg); font-weight: 700; color: #fff; margin: 0; }
.be-formcard__note { font-size: var(--be-text-sm); color: rgba(255, 255, 255, 0.7); margin: 2px 0 0; }
.be-formcard__body { padding: var(--be-6); display: grid; gap: var(--be-5); }

.be-formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--be-4); }
.be-field--full { grid-column: 1 / -1; }
@media (max-width: 575px) { .be-formgrid { grid-template-columns: minmax(0, 1fr); } }

.be-label b { color: var(--be-danger); }
.be-label small { color: var(--be-muted); font-weight: 400; }

/* Country code sits inside the field rather than beside it, so the two never
   drift apart when the label wraps. */
.be-phone { display: flex; align-items: stretch; }
.be-phone__code {
    display: inline-flex;
    align-items: center;
    padding-inline: var(--be-3);
    border: 1px solid var(--be-line);
    border-inline-end: 0;
    border-start-start-radius: var(--be-r-sm);
    border-end-start-radius: var(--be-r-sm);
    background: var(--be-canvas);
    color: var(--be-muted);
    font-weight: 700;
    font-size: var(--be-text-sm);
    flex: none;
}
.be-phone .be-input {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    flex: 1;
    min-inline-size: 0;
}

/* Radio group rendered as two large targets. The input stays in the DOM and
   focusable - the visible box is the label, so keyboard and screen reader
   behaviour is the browser's own. */
.be-choice { border: 0; padding: 0; margin: 0; }
.be-choice__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--be-3); margin-block-start: var(--be-2); }
.be-choice__item { position: relative; display: block; }
.be-choice__item input {
    position: absolute;
    inset: 0;
    opacity: 0;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    cursor: pointer;
}
.be-choice__item span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--be-2);
    padding: var(--be-4);
    border: 1px solid var(--be-line);
    border-radius: var(--be-r-sm);
    font-weight: 600;
    color: var(--be-ink-soft);
    transition: border-color var(--be-transition), background var(--be-transition), color var(--be-transition);
}
.be-choice__item input:checked + span { border-color: var(--be-brand); background: var(--be-brand-50); color: var(--be-brand); }
.be-choice__item input:focus-visible + span { outline: 2px solid var(--be-brand); outline-offset: 2px; }
.be-choice__item span .be-icon { color: var(--be-brand); }
@media (max-width: 575px) { .be-choice__grid { grid-template-columns: minmax(0, 1fr); } }

/* Inline status messages. */
.be-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--be-2);
    padding: var(--be-3) var(--be-4);
    border-radius: var(--be-r-sm);
    font-size: var(--be-text-base);
    border: 1px solid transparent;
}
.be-alert .be-icon { flex: none; margin-block-start: 2px; }
.be-alert--success { background: var(--be-success-soft); border-color: #a6f4c5; color: var(--be-success); }
.be-alert--error { background: var(--be-danger-soft); border-color: #fecdca; color: var(--be-danger); }

/* --------------------------------------------------------------------------
   How-it-works steps (no photography, unlike the homepage variant)
   -------------------------------------------------------------------------- */
.be-howstep {
    position: relative;
    padding: var(--be-6);
    border: 1px solid var(--be-line);
    border-radius: var(--be-r-lg);
    background: var(--be-surface);
}
.be-howstep__icon {
    inline-size: 46px;
    block-size: 46px;
    display: grid;
    place-items: center;
    border-radius: var(--be-r-md);
    background: var(--be-brand-50);
    color: var(--be-brand);
    margin-block-end: var(--be-4);
}
.be-howstep__num {
    position: absolute;
    inset-block-start: var(--be-5);
    inset-inline-end: var(--be-5);
    font-size: var(--be-text-2xl);
    font-weight: 800;
    color: var(--be-line);
    line-height: 1;
}
.be-howstep__title { font-size: var(--be-text-md); font-weight: 700; color: var(--be-navy); margin: 0 0 var(--be-2); }
.be-howstep__text { font-size: var(--be-text-sm); color: var(--be-muted); margin: 0; line-height: var(--be-leading-snug); }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.be-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--be-8); align-items: start; }
@media (max-width: 991px) { .be-contact { grid-template-columns: minmax(0, 1fr); } }

.be-contactlist { display: grid; gap: var(--be-3); }
.be-contactitem {
    display: flex;
    align-items: flex-start;
    gap: var(--be-4);
    padding: var(--be-4);
    border: 1px solid var(--be-line);
    border-radius: var(--be-r-md);
    background: var(--be-surface);
}
.be-contactitem__icon {
    inline-size: 40px; block-size: 40px; flex: none;
    display: grid; place-items: center;
    border-radius: var(--be-r-sm);
    background: var(--be-brand-50);
    color: var(--be-brand);
}
.be-contactitem__label { font-size: var(--be-text-sm); color: var(--be-muted); margin: 0; }
.be-contactitem__value { font-weight: 700; color: var(--be-navy); margin: 2px 0 0; }
.be-contactitem__value a { color: inherit; }
.be-contactitem__value a:hover { color: var(--be-brand); }

/* The shared arrow glyph points to the inline start; the "next" control
   mirrors it, which keeps one icon serving both directions in both scripts. */
.be-rail__flip { display: inline-flex; transform: scaleX(-1); }

/* --------------------------------------------------------------------------
   Compound asset tiles - brochure, master plan, map
   --------------------------------------------------------------------------
   Rendered only for assets the compound actually has, so the row is three
   tiles on a well-documented development and one on a thin listing. Sizing is
   intrinsic rather than a fixed grid for exactly that reason.
   -------------------------------------------------------------------------- */
.be-assets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--be-3);
    margin-block: var(--be-5) var(--be-8);
}

.be-asset {
    display: inline-flex;
    align-items: center;
    gap: var(--be-3);
    flex: 1 1 220px;
    padding: var(--be-4);
    border: 1px solid var(--be-line);
    border-radius: var(--be-r-md);
    background: var(--be-surface);
    color: var(--be-ink);
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: border-color var(--be-transition), box-shadow var(--be-transition), transform var(--be-transition);
}
.be-asset:hover {
    border-color: var(--be-brand-100);
    box-shadow: 0 10px 24px -16px rgba(15, 23, 42, 0.3);
    transform: translateY(-1px);
    color: var(--be-ink);
}
.be-asset:active { transform: translateY(0); }
.be-asset .be-icon { flex: none; color: var(--be-brand); }
.be-asset span { display: grid; gap: 2px; min-inline-size: 0; }
.be-asset b { font-size: var(--be-text-sm); font-weight: 700; color: var(--be-navy); }
.be-asset small { font-size: var(--be-text-xs); color: var(--be-muted); }

/* The brochure is the one action here that captures a lead, so it is the one
   that carries colour. */
.be-asset--brochure { border-color: var(--be-brand-100); background: var(--be-brand-50); }
.be-asset--brochure:hover { border-color: var(--be-brand); background: var(--be-brand-100); }

/* --------------------------------------------------------------------------
   Two entry prices side by side
   -------------------------------------------------------------------------- */
.be-pricepair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--be-line);
    border-radius: var(--be-r-md);
    overflow: hidden;
    margin-block-start: var(--be-4);
}
.be-pricepair__cell { padding: var(--be-4); min-inline-size: 0; }
.be-pricepair__cell + .be-pricepair__cell { border-inline-start: 1px solid var(--be-line); }
.be-pricepair dt { font-size: var(--be-text-xs); color: var(--be-muted); margin: 0 0 var(--be-1); }
.be-pricepair dd {
    margin: 0;
    font-size: var(--be-text-lg);
    font-weight: 800;
    color: var(--be-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.be-dialog__lead { color: var(--be-muted); font-size: var(--be-text-base); margin: 0 0 var(--be-4); }

@media (max-width: 575px) {
    .be-pricepair { grid-template-columns: minmax(0, 1fr); }
    .be-pricepair__cell + .be-pricepair__cell { border-inline-start: 0; border-block-start: 1px solid var(--be-line); }
}

/* ==========================================================================
   Botble form compatibility
   ==========================================================================
   Sign-in, registration, password reset, the account dashboard and every
   plugin-rendered form are built by Botble's form builder, which emits
   Bootstrap class names. This theme drops Bootstrap on the public site, so
   those pages arrived completely unstyled - a raw stack of native inputs.

   Rewriting six shipped views would fork them; styling the classes they emit
   fixes all of them at once, and keeps working for any plugin form added
   later. Scoped under body.be so the admin is untouched.
   ========================================================================== */

body.be .form-control,
body.be .form-select,
body.be textarea.form-control {
    inline-size: 100%;
    padding: 0.6875rem var(--be-4);
    font-family: inherit;
    font-size: var(--be-text-base);
    line-height: 1.5;
    color: var(--be-ink);
    background-color: var(--be-surface);
    border: 1px solid var(--be-line);
    border-radius: var(--be-r-sm);
    transition: border-color var(--be-transition), box-shadow var(--be-transition);
    appearance: none;
}
body.be .form-control:focus,
body.be .form-select:focus {
    outline: none;
    border-color: var(--be-brand);
    box-shadow: var(--be-ring);
}
body.be .form-control::placeholder { color: var(--be-navy-400); }
body.be .form-control[disabled],
body.be .form-control[readonly] { background: var(--be-canvas); color: var(--be-muted); }

body.be .form-label {
    display: block;
    margin-block-end: var(--be-2);
    font-size: var(--be-text-sm);
    font-weight: 600;
    color: var(--be-ink);
}

/* Botble puts the field icon in an absolutely positioned span and pads the
   input with .ps-5. That padding is a Bootstrap utility we do not ship, so
   without it the placeholder sat underneath the icon. */
body.be .position-relative { position: relative; }
body.be .auth-input-icon,
body.be .input-group-text {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: var(--be-3);
    transform: translateY(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    color: var(--be-navy-400);
    pointer-events: none;
    background: none;
    border: 0;
    padding: 0;
}
body.be .form-control.ps-5,
body.be .form-select.ps-5 { padding-inline-start: 2.75rem; }

body.be .form-check { display: flex; align-items: center; gap: var(--be-2); margin-block: var(--be-2); padding-inline: 0; }
body.be .form-check-input {
    inline-size: 18px;
    block-size: 18px;
    margin: 0;
    accent-color: var(--be-brand);
    flex: none;
}

/* The plugin's front-auth.css lays this out the Bootstrap way:
 *
 *     body[dir=rtl] .form-check          { padding-right: 1.5em }
 *     body[dir=rtl] .form-check .form-check-input { float: right; margin-right: -1.5em }
 *
 * an indent on the wrapper plus a negative margin pulling the box back into
 * it. Here .form-check is a flex row, so the float is ignored but the negative
 * margin still applies — which slid the checkbox 20px into the word beside it,
 * and is why "تذكرني" had a box sitting on its first letter.
 *
 * Both selectors below match that file's own specificity (0,2,1 and 0,3,1) and
 * win on order, since be-pages.css loads after it.
 */
body.be .form-check .form-check-input { float: none; margin: 0; }
body.be .form-check-label { font-size: var(--be-text-base); color: var(--be-ink); cursor: pointer; }

body.be .invalid-feedback,
body.be .text-danger { display: block; margin-block-start: var(--be-1); font-size: var(--be-text-sm); color: var(--be-danger); }
body.be .form-control.is-invalid { border-color: var(--be-danger); }
body.be .form-text { font-size: var(--be-text-sm); color: var(--be-muted); margin-block-start: var(--be-1); }

/* Buttons the form builder emits. Mapped onto the same shape as .be-btn so a
   generated submit is indistinguishable from an authored one. */
body.be .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--be-2);
    padding: 0.5rem var(--be-5);
    font-family: inherit;
    font-size: var(--be-text-base);
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid transparent;
    border-radius: 9px;
    cursor: pointer;
    transition: background var(--be-transition), border-color var(--be-transition), color var(--be-transition);
}
body.be .btn-primary {
    background: var(--be-brand);
    border-color: var(--be-brand);
    color: #fff;
}
body.be .btn-primary:hover { background: var(--be-brand-700); border-color: var(--be-brand-700); color: #fff; }
body.be .btn-secondary,
body.be .btn-outline-primary {
    background: var(--be-surface);
    border-color: var(--be-line);
    color: var(--be-ink);
}
body.be .btn-secondary:hover,
body.be .btn-outline-primary:hover { border-color: var(--be-brand); color: var(--be-brand); background: var(--be-brand-50); }
body.be .w-100 { inline-size: 100%; }

/* The minimum Bootstrap layout the shipped views rely on. Only the pieces the
   public account pages use - not a Bootstrap reimplementation. */
body.be .row { display: flex; flex-wrap: wrap; margin-inline: calc(var(--be-3) * -1); }
body.be .row > * { padding-inline: var(--be-3); inline-size: 100%; }
body.be .col-md-6 { inline-size: 100%; }
body.be .col-md-12 { inline-size: 100%; }

/* .col-6 is width-independent in Bootstrap, unlike the .col-md-* above. The
   sign-in form pairs "remember me" with "forgot password" in two of these, so
   without it the two stacked instead of sitting on one line. `g-0` is the
   zero-gutter modifier and has to cancel the row's negative margin. */
body.be .col-6 { inline-size: 50%; }
body.be .col-4 { inline-size: 33.3333%; }
body.be .col-8 { inline-size: 66.6667%; }
body.be .row.g-0 { margin-inline: 0; }
body.be .row.g-0 > * { padding-inline: 0; }
body.be .text-end { text-align: end; }
@media (min-width: 768px) {
    body.be .col-md-6 { inline-size: 50%; }
    body.be .col-md-4 { inline-size: 33.3333%; }
    body.be .col-md-8 { inline-size: 66.6667%; }
    body.be .col-lg-4 { inline-size: 33.3333%; }
    body.be .col-lg-8 { inline-size: 66.6667%; }
}

body.be .mb-0 { margin-block-end: 0; }
body.be .mb-1 { margin-block-end: var(--be-1); }
body.be .mb-2 { margin-block-end: var(--be-2); }
body.be .mb-3 { margin-block-end: var(--be-4); }
body.be .mb-4 { margin-block-end: var(--be-5); }
body.be .mt-3 { margin-block-start: var(--be-4); }
body.be .mt-4 { margin-block-start: var(--be-5); }
body.be .d-flex { display: flex; }
body.be .align-items-center { align-items: center; }
body.be .justify-content-between { justify-content: space-between; }
body.be .text-center { text-align: center; }
body.be .text-decoration-underline { text-decoration: underline; }

/* --------------------------------------------------------------------------
   The account pages themselves
   --------------------------------------------------------------------------
   Botble renders these as bare form panels with a heading and description
   attribute. Give them the same card the rest of the site uses.
   -------------------------------------------------------------------------- */
body.be .js-base-form,
body.be form[id^="botble-real-estate-forms-fronts-auth"] {
    max-inline-size: 520px;
    margin-inline: auto;
    padding: var(--be-8);
    background: var(--be-surface);
    border: 1px solid var(--be-line);
    border-radius: var(--be-r-lg);
    box-shadow: 0 18px 40px -28px rgba(15, 23, 42, 0.3);
}
body.be .js-base-form > .mb-3 { margin-block-end: var(--be-4); }

/* ==========================================================================
   Account auth screens
   ==========================================================================
   Sign in, register, forgot and reset. The theme owns the layout here
   (views/real-estate/account/auth/*) because the shipped views wrap the form
   in a Bootstrap grid this theme does not ship: `.container > .row >
   .col-xl-6` all resolved to nothing, so the form was clamped and centred by
   the compatibility layer while the card header - which sits outside the form
   element - ran the full width of the page. Hence the split alignment and the
   empty band beside it.
   ========================================================================== */
body.be .be-auth { padding-block: var(--be-10) var(--be-16); }

body.be .be-auth__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--be-8);
    align-items: start;
}
@media (max-width: 900px) {
    body.be .be-auth__grid { grid-template-columns: minmax(0, 1fr); gap: var(--be-6); }
    /* Form first on a phone: the panel is context, not the task. */
    body.be .be-auth__aside { order: 2; }
    body.be .be-auth__main { order: 1; }
}

/* The panel */
body.be .be-auth__aside {
    padding: var(--be-8);
    border-radius: var(--be-r-lg);
    background: var(--be-navy);
    color: #fff;
}
body.be .be-auth__aside-title {
    margin: 0;
    font-size: var(--be-text-2xl);
    font-weight: 800;
    line-height: var(--be-leading-tight);
    color: #fff;
}
body.be .be-auth__aside-lead {
    margin: var(--be-3) 0 0;
    font-size: var(--be-text-base);
    line-height: var(--be-leading-snug);
    color: rgba(255, 255, 255, 0.66);
}

body.be .be-auth__points {
    display: grid;
    gap: var(--be-4);
    margin: var(--be-6) 0 0;
    padding: 0;
    list-style: none;
}
body.be .be-auth__points li { display: flex; align-items: flex-start; gap: var(--be-3); }
body.be .be-auth__point-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    inline-size: 34px;
    block-size: 34px;
    border-radius: 10px;
    background: rgba(127, 179, 240, 0.16);
    color: var(--be-gold);
}
body.be .be-auth__points b {
    display: block;
    font-size: var(--be-text-base);
    font-weight: 700;
    color: #fff;
}
body.be .be-auth__points em {
    display: block;
    margin-block-start: 2px;
    font-style: normal;
    font-size: var(--be-text-sm);
    line-height: var(--be-leading-snug);
    color: rgba(255, 255, 255, 0.6);
}

body.be .be-auth__aside-note {
    display: flex;
    gap: var(--be-2);
    margin: var(--be-6) 0 0;
    padding-block-start: var(--be-5);
    border-block-start: 1px solid rgba(255, 255, 255, 0.14);
    font-size: var(--be-text-xs);
    line-height: var(--be-leading-snug);
    color: rgba(255, 255, 255, 0.5);
}
body.be .be-auth__aside-note .be-icon { flex: none; margin-block-start: 2px; }

/* --------------------------------------------------------------------------
   The card the form builder emits
   --------------------------------------------------------------------------
   With the plugin's wrapper turned off, `.card` is the outermost node the
   template still renders, so it becomes the panel. These override the earlier
   compatibility rule that clamped the form to 520px and centred it - inside a
   real column that clamp is what pulled the fields away from their heading.
   -------------------------------------------------------------------------- */
body.be .be-auth .card {
    border: 1px solid var(--be-line);
    border-radius: var(--be-r-lg);
    background: var(--be-surface);
    box-shadow: var(--be-shadow-sm);
    overflow: hidden;
}
body.be .be-auth .card-header {
    padding: var(--be-6) var(--be-6) 0;
    background: none;
    border: 0;
}
body.be .be-auth .card-body { padding: var(--be-6); }

body.be .be-auth .card-header h3 {
    margin: 0;
    font-size: var(--be-text-2xl);
    font-weight: 800;
    color: var(--be-navy);
}
body.be .be-auth .card-header p {
    margin: var(--be-2) 0 0;
    font-size: var(--be-text-sm);
    line-height: var(--be-leading-snug);
    color: var(--be-muted);
}
/* The icon tile the template puts beside the heading. */
body.be .be-auth .card-header .bg-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    border-radius: 12px;
    background: var(--be-brand-50);
    color: var(--be-brand);
}
body.be .be-auth .card-header .text-primary { color: var(--be-brand); }

/* Elsewhere the bare form IS the panel, so the compatibility layer gives it a
   card. Inside .be-auth the surrounding .card already is one, and both drawing
   a border nested a white box inside a white box. */
body.be .be-auth form {
    max-inline-size: none;
    margin-inline: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
body.be .be-auth .btn { inline-size: 100%; padding-block: 0.625rem; }
body.be .be-auth .alert {
    padding: var(--be-3) var(--be-4);
    margin-block-end: var(--be-4);
    border-radius: var(--be-r-sm);
    font-size: var(--be-text-sm);
}
body.be .be-auth .alert-danger { background: var(--be-danger-soft); color: var(--be-danger); }
body.be .be-auth .alert-success { background: var(--be-success-soft); color: var(--be-success); }
body.be .be-auth .alert-warning { background: var(--be-warning-soft); color: var(--be-warning); }

/* The "no account yet?" line the form appends. */
body.be .be-auth .card-body a { color: var(--be-brand); font-weight: 600; }
body.be .be-auth .card-body a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Header account controls
   -------------------------------------------------------------------------- */
.be-header__register {
    font-size: var(--be-text-sm);
    font-weight: 700;
    color: var(--be-navy);
    white-space: nowrap;
}
.be-header__register:hover { color: var(--be-brand); }

/* The header width budget, stated in one place because these steps only make
   sense together.

   The bar holds a logo, eight nav items and five actions, and they do not all
   fit a 1232px container at once. The cheapest thing to give up is a label
   whose icon already says the same word: the sign-in label alone costs 114px,
   more than a whole nav item. Below 1100px the drawer and the tab bar carry
   these controls anyway.

   Both collapsed links keep an aria-label in partials/header.blade.php, so an
   icon-only control still announces itself. */
@media (max-width: 1499px) {
    .be-header__signin span { display: none; }
    .be-header__signin { padding-inline: var(--be-3); }
}
@media (max-width: 1399px) {
    .be-header__register { display: none; }
}

/* ==========================================================================
   Blog
   ==========================================================================
   The theme shipped no blog views at all, so the view finder fell through to
   the Homzen theme's — Bootstrap markup plus Homzen's own `flat-*` classes,
   neither of which this theme ships. The listing rendered as an unstyled
   column of placeholder images with an unstyled sidebar beside it.

   These styles cover the theme's own views (views/loop, post, category, tag)
   and the widget markup Botble emits into the sidebar, which the theme does
   not control.
   ========================================================================== */
.be-blog { display: block; }

.be-blog__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--be-8);
    align-items: start;
}
.be-blog__layout--full { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 991px) {
    .be-blog__layout { grid-template-columns: minmax(0, 1fr); gap: var(--be-6); }
}

/* Two columns, not one long stack.

   Eight full-width rows in a column roughly 1,250px wide gave each article a
   260px picture, one line of standfirst and about 900px of nothing — the
   articles read as thin because the layout was thin, not because the writing
   was. Paired tiles fill the measure and let the picture carry its share. */
.be-blog__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--be-5);
    align-items: start;
}

/* --------------------------------------------------------------------------
   Article card
   --------------------------------------------------------------------------
   Horizontal rather than a tile: Arabic headlines run long, and a wide measure
   holds them to two lines instead of five.
   -------------------------------------------------------------------------- */
.be-postcard {
    /* The containing block for the title link's .be-stretch overlay. Without
       it the overlay resolved against the nearest positioned ancestor - the
       section - so the card body and the "Read more" affordance were dead and
       only the title text itself was clickable. */
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--be-4);
    padding: var(--be-4);
    border: 1px solid var(--be-line);
    border-radius: var(--be-r-lg);
    background: var(--be-surface);
    transition: border-color var(--be-transition), box-shadow var(--be-transition);
}
.be-postcard:hover { border-color: var(--be-brand-100); box-shadow: var(--be-shadow); }
@media (max-width: 680px) {
    .be-postcard { gap: var(--be-3); }
}

.be-postcard__media {
    display: block;
    overflow: hidden;
    border-radius: var(--be-r);
    background: var(--be-canvas);
    /* Wider than 4:3 now that it spans the card: a tall picture over a short
       block of text made the tile top-heavy. */
    aspect-ratio: 16 / 10;
}
.be-postcard__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--be-transition);
}
.be-postcard:hover .be-postcard__media img { transform: scale(1.03); }

.be-postcard__body { display: flex; flex-direction: column; gap: var(--be-2); padding-block: var(--be-2); }

.be-postcard__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--be-2) var(--be-3);
    font-size: var(--be-text-xs);
    color: var(--be-muted);
}
.be-postcard__cat {
    /* Above the title's stretch overlay, so the category chip keeps its own
       destination instead of being swallowed by the card link. */
    position: relative;
    z-index: 2;
    padding: 2px var(--be-3);
    border-radius: var(--be-r-pill);
    background: var(--be-brand-50);
    color: var(--be-brand-700);
    font-weight: 700;
}
.be-postcard__cat:hover { background: var(--be-brand-100); }
.be-postcard__author { font-weight: 600; color: var(--be-ink-soft); }

.be-postcard__title {
    margin: 0;
    font-size: var(--be-text-2xl);
    font-weight: 800;
    line-height: var(--be-leading-tight);
}
.be-postcard__title a { color: var(--be-navy); }
.be-postcard__title a:hover { color: var(--be-brand); }

.be-postcard__excerpt {
    margin: 0;
    font-size: var(--be-text-base);
    line-height: var(--be-leading-snug);
    color: var(--be-muted);
}

.be-postcard__more {
    display: inline-flex;
    align-items: center;
    gap: var(--be-1);
    margin-block-start: auto;
    padding-block-start: var(--be-2);
    font-size: var(--be-text-sm);
    font-weight: 700;
    color: var(--be-brand);
}
/* The shared arrow glyph is authored pointing physically left, which is
   already forward in Arabic - it is English that needs the flip. This rule
   used to mirror it under [dir="rtl"], so the "Read more" arrow on every
   Arabic card pointed backwards, at the text it came from. */
[dir="ltr"] .be-postcard__more .be-icon { transform: scaleX(-1); }

/* The whole card is one target, so the decorative link reacts to a hover
   anywhere on it rather than only over its own 90px. */
.be-postcard:hover .be-postcard__more { color: var(--be-brand-700); }

/* --------------------------------------------------------------------------
   Single article
   -------------------------------------------------------------------------- */
.be-post__head { padding-block: var(--be-8) var(--be-5); }
.be-post__cat {
    display: inline-block;
    margin-block: var(--be-4) var(--be-3);
    padding: 3px var(--be-4);
    border-radius: var(--be-r-pill);
    background: var(--be-brand-50);
    color: var(--be-brand-700);
    font-size: var(--be-text-xs);
    font-weight: 700;
}
.be-post__title {
    margin: 0;
    font-size: var(--be-text-3xl);
    font-weight: 800;
    line-height: var(--be-leading-tight);
    color: var(--be-navy);
}
.be-post__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--be-2) var(--be-5);
    margin-block-start: var(--be-4);
    font-size: var(--be-text-sm);
    color: var(--be-muted);
}
.be-post__author { display: inline-flex; align-items: center; gap: var(--be-2); font-weight: 600; color: var(--be-ink-soft); }
.be-post__author img { inline-size: 32px; block-size: 32px; border-radius: 50%; object-fit: cover; }

.be-post__hero {
    margin: 0 0 var(--be-8);
    overflow: hidden;
    border-radius: var(--be-r-lg);
    background: var(--be-canvas);
}
.be-post__hero img { inline-size: 100%; block-size: auto; display: block; }

/* Article body. The editor emits plain HTML, so the type scale has to be set
   here rather than on classes the writer would have to remember. */
.be-post__content { font-size: var(--be-text-md); line-height: var(--be-leading-normal); color: var(--be-ink-soft); }
.be-post__content > * + * { margin-block-start: var(--be-5); }
.be-post__content h2,
.be-post__content h3,
.be-post__content h4 {
    margin-block: var(--be-8) var(--be-3);
    font-weight: 800;
    line-height: var(--be-leading-tight);
    color: var(--be-navy);
}
.be-post__content h2 { font-size: var(--be-text-2xl); }
.be-post__content h3 { font-size: var(--be-text-xl); }
.be-post__content h4 { font-size: var(--be-text-lg); }
.be-post__content a { color: var(--be-brand); text-decoration: underline; text-underline-offset: 3px; }
.be-post__content img { max-inline-size: 100%; block-size: auto; border-radius: var(--be-r); }
.be-post__content ul,
.be-post__content ol { padding-inline-start: var(--be-6); }
.be-post__content li + li { margin-block-start: var(--be-2); }
.be-post__content blockquote {
    margin-inline: 0;
    padding: var(--be-4) var(--be-5);
    border-inline-start: 3px solid var(--be-brand);
    border-radius: var(--be-r-sm);
    background: var(--be-brand-50);
    color: var(--be-ink);
}
.be-post__content table { inline-size: 100%; border-collapse: collapse; }
.be-post__content th,
.be-post__content td { padding: var(--be-3); border: 1px solid var(--be-line); text-align: start; }

.be-post__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--be-4);
    margin-block: var(--be-8);
    padding-block: var(--be-5);
    border-block: 1px solid var(--be-line);
}
.be-post__tags,
.be-post__share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--be-2); }
.be-post__foot-label { font-size: var(--be-text-sm); font-weight: 700; color: var(--be-navy); }
.be-post__share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 36px;
    block-size: 36px;
    border: 1px solid var(--be-line);
    border-radius: 50%;
    color: var(--be-ink-soft);
    transition: border-color var(--be-transition), background var(--be-transition), color var(--be-transition);
}
.be-post__share-btn:hover { border-color: var(--be-brand); background: var(--be-brand-50); color: var(--be-brand); }
.be-post__share-btn svg { inline-size: 17px; block-size: 17px; }

/* --------------------------------------------------------------------------
   Sidebar widgets
   --------------------------------------------------------------------------
   The theme now supplies its own widget templates (widgets/blog-*), so these
   style real theme classes rather than reaching into the Homzen markup the
   renderer used to fall through to.
   -------------------------------------------------------------------------- */
.be-blog__side { display: grid; gap: var(--be-5); position: sticky; top: calc(var(--be-header-h) + var(--be-4)); }
@media (max-width: 991px) { .be-blog__side { position: static; } }

.be-widget {
    padding: var(--be-5);
    border: 1px solid var(--be-line);
    border-radius: var(--be-r-lg);
    background: var(--be-surface);
}
.be-widget__title {
    margin: 0 0 var(--be-4);
    font-size: var(--be-text-md);
    font-weight: 800;
    color: var(--be-navy);
}
.be-widget__list { display: grid; gap: var(--be-3); margin: 0; padding: 0; list-style: none; }

/* Search */
.be-widget__form { display: flex; gap: var(--be-2); }
.be-widget__form input {
    flex: 1;
    min-inline-size: 0;
    padding: 0.5rem var(--be-3);
    font: inherit;
    font-size: var(--be-text-sm);
    color: var(--be-ink);
    border: 1px solid var(--be-line);
    border-radius: var(--be-r-sm);
    background: var(--be-surface);
}
.be-widget__form input:focus { outline: none; border-color: var(--be-brand); box-shadow: var(--be-ring); }
.be-widget__form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    inline-size: 40px;
    padding: 0;
    cursor: pointer;
    border: 0;
    border-radius: var(--be-r-sm);
    background: var(--be-brand);
    color: #fff;
    transition: background var(--be-transition);
}
.be-widget__form button:hover { background: var(--be-brand-700); }

/* Recent posts */
.be-widget__post { display: flex; align-items: flex-start; gap: var(--be-3); }
.be-widget__post img {
    flex: none;
    inline-size: 56px;
    block-size: 56px;
    object-fit: cover;
    border-radius: var(--be-r-sm);
    background: var(--be-canvas);
}
.be-widget__post time { display: block; font-size: var(--be-text-xs); color: var(--be-muted); }
.be-widget__post b {
    display: block;
    margin-block-start: 2px;
    font-size: var(--be-text-sm);
    font-weight: 600;
    line-height: var(--be-leading-snug);
    color: var(--be-ink);
}
.be-widget__post:hover b { color: var(--be-brand); }

/* Categories */
.be-widget__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--be-3);
    font-size: var(--be-text-sm);
    color: var(--be-ink-soft);
}
.be-widget__row:hover { color: var(--be-brand); }
.be-widget__row .be-num { color: var(--be-muted); font-size: var(--be-text-xs); }

/* Tags */
.be-widget__tags { display: flex; flex-wrap: wrap; gap: var(--be-2); }

/* --------------------------------------------------------------------------
   Saved properties
   -------------------------------------------------------------------------- */
.be-favs__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--be-3);
    flex-wrap: wrap;
    margin-block-end: var(--be-5);
    padding-block-end: var(--be-4);
    border-block-end: 1px solid var(--be-line);
}
.be-favs__count { margin: 0; font-size: var(--be-text-sm); font-weight: 600; color: var(--be-ink-soft); }

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */
.be-404 { padding-block: var(--be-16) var(--be-20); text-align: center; }
.be-404__code {
    margin: 0;
    font-size: clamp(72px, 14vw, 140px);
    font-weight: 800;
    line-height: 1;
    color: var(--be-brand-100);
    font-variant-numeric: tabular-nums;
}
.be-404__title {
    margin: var(--be-2) 0 0;
    font-size: var(--be-text-3xl);
    font-weight: 800;
    color: var(--be-navy);
}
.be-404__text {
    max-inline-size: 52ch;
    margin: var(--be-3) auto 0;
    font-size: var(--be-text-md);
    line-height: var(--be-leading-snug);
    color: var(--be-muted);
}
.be-404__search { max-inline-size: 560px; margin: var(--be-8) auto 0; }

.be-404__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--be-3);
    margin-block: var(--be-8);
}
.be-404__link {
    display: inline-flex;
    align-items: center;
    gap: var(--be-2);
    padding: var(--be-3) var(--be-5);
    border: 1px solid var(--be-line);
    border-radius: var(--be-r-pill);
    background: var(--be-surface);
    font-size: var(--be-text-sm);
    font-weight: 600;
    color: var(--be-ink);
    transition: border-color var(--be-transition), background var(--be-transition), color var(--be-transition);
}
.be-404__link:hover { border-color: var(--be-brand); background: var(--be-brand-50); color: var(--be-brand-700); }
.be-404__link .be-icon { color: var(--be-brand); }

/* --------------------------------------------------------------------------
   Footer logo
   --------------------------------------------------------------------------
   The uploaded mark is navy-and-blue on an opaque white background, not a
   transparent PNG. On the navy footer that renders as a bare white rectangle
   with the logo floating in it, which reads as a rendering fault.

   Until a light-on-transparent version is uploaded (Theme options -> Logo
   light), presenting it as a deliberate white plate is the honest treatment:
   padded, rounded, and sized so the mark is legible rather than cramped.
   -------------------------------------------------------------------------- */
.be-footer .be-logo img {
    padding: var(--be-3) var(--be-4);
    border-radius: var(--be-r);
    background: #fff;
    block-size: auto;
    max-inline-size: 190px;
}

/* --------------------------------------------------------------------------
   Screen headers on a phone
   --------------------------------------------------------------------------
   The app bar already names the screen and offers the way back, so the page
   hero repeating both is the clearest remaining tell that this is a web page:
   a breadcrumb, then the same title again at 36px, then a paragraph — a full
   screen of chrome before the first listing.

   An app opens on its content. The title and breadcrumb go; the counters stay,
   because those are information rather than navigation.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .be-pagehero__title,
    .be-pagehero__sub,
    .be-pagehero .be-breadcrumb,
    .be-page-head__title,
    .be-page-head .be-breadcrumb,
    .be-post__head .be-breadcrumb,
    .be-breadcrumb { display: none; }

    /* The whole banner goes on a phone.
       Measured on the properties screen it pushed the first listing 700px
       down: an eyebrow pill, three counter cards and a paragraph, none of
       which the app bar and the results header ("8,026 عقار") do not already
       say. An app opens on its content; this is the block that stopped it. */
    .be-pagehero,
    .be-page-head { display: none; }

    /* A detail screen keeps its own title — that one is the content, not a
       repeat of the bar, which shows a truncated version. */
    .be-post__title,
    .be-detail__title { display: block; }
}

/* --------------------------------------------------------------------------
   Home screen on a phone
   --------------------------------------------------------------------------
   The desktop hero is a 560px marketing band: headline, paragraph, four
   counter pills and a compound slideshow. On a phone that stacked to 2,888px
   before the first real content — three full screens of scrolling to reach a
   listing.

   An app home opens on the thing you came to do. The headline and the search
   panel stay; the paragraph, counters and slideshow controls go, because none
   of them is a task.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .be-hero {
        min-block-size: 0;
        padding-block: var(--be-8) var(--be-6);
    }

    .be-hero__lead,
    .be-hero__stats,
    .be-hero__feature,
    .be-hero__dots { display: none; }

    .be-hero__title { font-size: var(--be-text-3xl); margin-block-end: var(--be-5); }

    /* One backdrop, not a cross-fading stack: on a phone the slideshow is
       decoration that costs several full-size images before first paint. */
    .be-hero__slide:not(.is-active) { display: none; }
}

/* ==========================================================================
   Phone scale
   ==========================================================================
   The reason the phone still read as a website: the design had a phone
   *layout* but no phone *scale*. Type, spacing and component sizes were the
   desktop values at 390px, so the home screen came to 20,066px — twenty-four
   screens of scrolling — with 22px section headings, a paragraph under each
   one and 60px of air between them.

   Everything downstream is expressed in these tokens, so re-scaling them here
   moves the whole design at once rather than patching component by component.
   ========================================================================== */
@media (max-width: 767px) {
    :root {
        /* Cairo's x-height runs small, so this is a restrained step down: body
           lands at 14px, not the 12-13px a Latin UI would take. */
        --be-text-xs: 0.6875rem;   /* 11 */
        --be-text-sm: 0.8125rem;   /* 13 */
        --be-text-base: 0.875rem;  /* 14 */
        --be-text-md: 0.9375rem;   /* 15 */
        --be-text-lg: 1rem;        /* 16 */
        --be-text-xl: 1.0625rem;   /* 17 */
        --be-text-2xl: 1.1875rem;  /* 19 */
        --be-text-3xl: 1.375rem;   /* 22 */
        --be-text-4xl: 1.625rem;   /* 26 */

        --be-leading-normal: 1.6;

        /* Section rhythm. The large end of the space scale is what produced
           the dead bands between sections. */
        --be-6: 1rem;
        --be-8: 1.25rem;
        --be-10: 1.5rem;
        --be-12: 1.75rem;
        --be-16: 2rem;
        --be-20: 2.25rem;
        --be-24: 2.5rem;

        --be-gutter: 1rem;
    }

    /* The Arabic bump is a desktop reading-comfort rule; at phone size it just
       made everything larger again. */
    html[lang^="ar"] body.be { font-size: 0.9375rem; line-height: 1.65; }

    .be-section { padding-block: var(--be-8); }
    .be-section--tight { padding-block: var(--be-6); }

    /* ----------------------------------------------------------------------
       Section headers
       ----------------------------------------------------------------------
       One compact row — title and "all" on the same line, the way a section
       header reads in an app. Stacking them into a column and adding a
       descriptive paragraph is a marketing pattern, and it cost roughly 140px
       per section across nine sections.
       ---------------------------------------------------------------------- */
    .be-section-head {
        flex-direction: row;
        align-items: center;
        gap: var(--be-3);
        margin-block-end: var(--be-4);
    }
    .be-section-head__sub,
    .be-section-head__eyebrow { display: none; }
    .be-section-head__title { font-size: var(--be-text-lg); }
    .be-section-head__link { font-size: var(--be-text-sm); white-space: nowrap; }

    /* ----------------------------------------------------------------------
       Home-page tile rows become rails
       ----------------------------------------------------------------------
       Twenty-five types in a two-column grid of 220px cards is a screen and a
       half of tiles before the next section. As a swipeable strip they cost
       one row and stay browsable.

       Opt-in via .be-grid--rail, and that matters: the first version targeted
       .be-grid--6 and .be-grid--4 directly, which are also the grids the
       developers, areas, agents and area pages use for their *main content*.
       It turned the developers index — 24 cards, three pages of them — into a
       single horizontal strip, and the whole page collapsed to 799px. A
       section rail and a results grid are different things and must not share
       a selector.
       ---------------------------------------------------------------------- */
    .be-grid--rail {
        display: flex;
        gap: var(--be-2);
        overflow-x: auto;
        scroll-snap-type: inline mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        /* Bleed to the screen edges: a rail that stops inside the gutter looks
           like it has run out rather than continuing. */
        margin-inline: calc(var(--be-gutter) * -1);
        padding-inline: var(--be-gutter);
    }
    .be-grid--rail::-webkit-scrollbar { display: none; }
    .be-grid--rail > * { flex: 0 0 auto; scroll-snap-align: start; }

    .be-type {
        inline-size: 96px;
        padding: var(--be-3) var(--be-2);
        gap: var(--be-2);
    }
    .be-type__icon { inline-size: 36px; block-size: 36px; }
    .be-type__icon svg { inline-size: 19px; block-size: 19px; }
}

@media (max-width: 767px) {
    /* The whole card is already a tap target — the title carries a stretched
       anchor across it. A "view details" link inside it is a web affordance
       for something that has none of the ambiguity on a phone. */
    .be-card__more { display: none; }

    /* Signals read as one line of small meta under the price, not three
       bordered rows. */
    .be-signals {
        display: flex;
        flex-wrap: wrap;
        gap: var(--be-2) var(--be-4);
        margin-block: var(--be-3) 0;
        padding: 0;
        border: 0;
        background: none;
        font-size: var(--be-text-xs);
    }
    .be-signals__item { border: 0; padding: 0; }
}

/* Share confirmation.
   The button copies the link where Web Share is unavailable, and a copy that
   gives no feedback is indistinguishable from a button that does nothing —
   which is what these were before they had a handler at all. */
.be-card__tool.is-shared,
.be-btn.is-shared {
    background: var(--be-success-soft);
    border-color: var(--be-success);
    color: var(--be-success);
}
.be-card__tool.is-shared::after,
.be-btn.is-shared::after {
    content: '\2713';
    font-weight: 800;
}
.be-card__tool.is-shared .be-icon,
.be-btn.is-shared .be-icon { display: none; }

@media (max-width: 767px) {
    /* Area tiles: two up, landscape.
       .be-tile is a 3:4 portrait, which at full phone width is a 520px card.
       Twenty-five areas stacked one per row came to 9,566px — eleven screens
       of scrolling to read a list of twenty-five place names. Two up with a
       landscape crop is a quarter of that and still legible.

       Scoped to .be-grid--tiles rather than .be-grid--4, because that class is
       also the similar-properties grid, and a property card at 180px wide is
       not usable. */
    .be-grid--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--be-3); }
    .be-grid--tiles .be-tile { aspect-ratio: 4 / 3; }
    .be-grid--tiles .be-tile__title { font-size: var(--be-text-base); }
}

/* --------------------------------------------------------------------------
   The home screen opens on content
   --------------------------------------------------------------------------
   Two blocks go on a phone: the hero band (a headline over a photograph) and
   the search card (tabs, a buy/rent switch, three selects, an advanced link
   and a submit). Together they were a screen and a half of marketing and form
   before the first listing.

   Both are replaced by one search pill under the app bar, which opens the
   search sheet that already exists. Nothing is lost — the full form is intact
   on desktop and reachable here through the sheet.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* Only the search PANEL goes, not the hero.

       This rule used to hide .be-hero as well, which contradicted the
       breakpoint directly above it: the 991px block compacts the hero down to
       its headline and says in as many words that "the headline and the search
       panel stay". Below 768px the headline went too, so a phone opened on a
       search pill and then a category rail with nothing anywhere saying what
       this site is - no brand statement, no featured compound, nothing. Two
       adjacent breakpoints disagreeing about the same element is what made the
       phone home screen feel like a different page from the desktop one.

       The search PANEL is genuinely replaced by .be-appsearch under the app
       bar, so that part of the original decision stands. */
    .be-searchwrap { display: none; }

    .be-appsearch {
        position: sticky;
        inset-block-start: calc(52px + env(safe-area-inset-top));
        z-index: 79;
        display: flex;
        align-items: center;
        gap: var(--be-2);
        padding: var(--be-3) var(--be-gutter);
        background: var(--be-surface);
        border-block-end: 1px solid var(--be-line);
    }

    .be-appsearch__field {
        flex: 1;
        min-inline-size: 0;
        display: inline-flex;
        align-items: center;
        gap: var(--be-2);
        min-block-size: 42px;
        padding-inline: var(--be-4);
        border: 1px solid var(--be-line);
        border-radius: var(--be-r-pill);
        background: var(--be-canvas);
        color: var(--be-muted);
        font: inherit;
        font-size: var(--be-text-sm);
        text-align: start;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .be-appsearch__field span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .be-appsearch__field .be-icon { flex: none; color: var(--be-brand); }
    .be-appsearch__field:active { background: var(--be-brand-50); }

    .be-appsearch__filter {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        inline-size: 42px;
        block-size: 42px;
        border: 1px solid var(--be-line);
        border-radius: var(--be-r-pill);
        background: var(--be-surface);
        color: var(--be-navy);
    }
    .be-appsearch__filter:active { background: var(--be-line-soft); }
}

/* Above the phone breakpoint the pill is not shown — the desktop header and
   the hero search card are the search entry points there.

   This has to be a min-width query, not a bare rule. Written bare and placed
   after the block above, it has the same specificity and comes later, so it
   won CSS's tie-break at *every* width and the pill was display:none on the
   phone too — present in the DOM, and invisible. */
@media (min-width: 768px) {
    .be-appsearch { display: none; }
}

@media (max-width: 767px) {
    /* The consent banner is fixed to the bottom of the viewport, which is
       exactly where the tab bar lives — so on a first visit it sat on top of
       the navigation. Lift it clear so both are usable while the choice is
       still pending.

       `.site-notice` is the banner. `.cookie-consent-modal` is the separate
       "customise" dialog, which is hidden until asked for and measures zero —
       targeting that one changed nothing. */
    .site-notice {
        inset-block-end: calc(62px + env(safe-area-inset-bottom)) !important;
    }
}

/* ==========================================================================
   Static pages
   ==========================================================================
   About, Services, Privacy, Cookies. The theme shipped without a page
   template, so these had no styling of any kind — two of them rendered as a
   blank screen while the footer linked to them.

   The measure and heading sizes match the article page on purpose: a policy
   and a blog post are the same typographic problem, and one shared column
   width means long-form text reads identically wherever it appears.
   ========================================================================== */
.be-page__head { padding-block: var(--be-8) var(--be-5); }

.be-page__title {
    margin: 0;
    font-size: var(--be-text-3xl);
    font-weight: 800;
    line-height: var(--be-leading-tight);
    color: var(--be-navy);
}

.be-page__lead {
    margin-block: var(--be-3) 0;
    font-size: var(--be-text-lg);
    line-height: var(--be-leading-normal);
    color: var(--be-ink-soft);
}

.be-page__content {
    padding-block-end: var(--be-10);
    font-size: var(--be-text-md);
    color: var(--be-ink-soft);
}

.be-page__content h2,
.be-page__content h3 {
    font-weight: 800;
    color: var(--be-navy);
}

/* Long policy pages are mostly lists; give them room to breathe without
   inheriting the tighter rhythm the marketing sections use. */
.be-page__content li { margin-block-end: var(--be-2); }
.be-page__content li::marker { color: var(--be-brand); }

.be-page__content a {
    color: var(--be-brand);
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 767px) {
    .be-page__head { padding-block: var(--be-5) var(--be-4); }
    .be-page__title { font-size: var(--be-text-2xl); }
    .be-page__lead { font-size: var(--be-text-md); }
    .be-page__content { padding-block-end: var(--be-8); }
}

/* Type chips carry a glyph
   --------------------------------------------------------------------------
   The "browse by property type" row on the listing and compound pages was
   text-only, while the identical row on the home screen already had icons —
   so the same control looked like two different things depending on where you
   met it.

   The chip is already an inline-flex row with a gap, so the glyph needs no
   layout of its own; it only needs a size and the colour of its chip. Strokes
   inherit currentColor, which means the icon turns white on the active chip
   with no extra rule. A category that carries an uploaded icon renders an
   <img> instead, so that is constrained to the same box. */
/* The glyph is the same tinted rounded tile the home screen's type grid
   uses, shrunk to sit inline. That grid is where a visitor meets these types
   first, so carrying the shape across means the row on the listing page reads
   as the same control rather than as a different one that happens to share
   the labels — just laid out side by side and smaller. */
.be-chip__icon {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 26px;
    block-size: 26px;
    margin-inline-start: -6px;
    border-radius: 8px;
    background: var(--be-brand-50);
    color: var(--be-brand);
    transition: background var(--be-transition), color var(--be-transition);
}

.be-chip__icon svg,
.be-chip__icon img {
    inline-size: 18px;
    block-size: 18px;
    display: block;
}

.be-chip__icon img {
    object-fit: contain;
    border-radius: 3px;
}

/* On the active chip the tile inverts, so the icon stays legible against the
   brand-filled background instead of disappearing into it. */
.be-chip.is-active .be-chip__icon { background: rgba(255, 255, 255, 0.22); color: #fff; }
.be-chip:hover .be-chip__icon { background: #fff; }

/* A little more breathing room now that the chip carries a tile. */
.be-chip--icon { padding-inline-start: var(--be-2); }

/* The developer's name is a destination, wherever it appears
   --------------------------------------------------------------------------
   It was plain text on the compound card, on the compound page's byline, in
   the compound's contact block and in the home-screen spotlight — four places
   where the obvious thing to click did nothing. The name in the breadcrumb
   was already a link, which made the rest read as an oversight rather than a
   decision.

   .be-card__dev additionally has to clear the card's stretched-link overlay
   (.be-stretch::after sits at z-index 1 across the whole card), or the card
   swallows the click and takes you to the compound instead. */
.be-devlink,
.be-card__dev {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--be-brand-100);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--be-transition), text-decoration-color var(--be-transition);
}

.be-devlink:hover,
.be-card__dev:hover {
    color: var(--be-brand);
    text-decoration-color: var(--be-brand);
}

.be-card__dev {
    position: relative;
    z-index: 2;
}

/* ==========================================================================
   Photo lightbox
   ==========================================================================
   Replaces target="_blank" on the gallery tiles, which sent a visitor to a
   bare JPEG on a white page and made them use the back button to see a second
   photograph.
   ========================================================================== */

/* Images past the fifth are in the DOM for the lightbox to page through, but
   the mosaic only has room for five. */
.be-gallery__item--hidden { display: none; }

.be-lightbox {
    position: fixed;
    inset: 0;
    /* Above the cookie-consent plugin's banner, which ships with
       z-index: 99999. A modal that something else is drawn on top of is not a
       modal, and on a first visit the banner sat squarely over the photo. */
    z-index: 100000;
    display: grid;
    place-items: center;
    padding: var(--be-6);
    background: rgba(5, 19, 47, 0.92);
    backdrop-filter: blur(6px);
}

.be-lightbox[hidden] { display: none; }

/* The page must not scroll behind the overlay. */
body.be-lightbox-open { overflow: hidden; }

.be-lightbox__stage {
    margin: 0;
    max-inline-size: min(1200px, 100%);
    max-block-size: 100%;
    display: grid;
    place-items: center;
}

.be-lightbox__stage img {
    max-inline-size: 100%;
    max-block-size: calc(100vh - var(--be-16));
    inline-size: auto;
    block-size: auto;
    border-radius: var(--be-r);
    box-shadow: var(--be-shadow-lg);
}

.be-lightbox__close,
.be-lightbox__nav {
    position: absolute;
    z-index: 2;
    inline-size: 44px;
    block-size: 44px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    cursor: pointer;
    transition: background var(--be-transition);
}

.be-lightbox__close:hover,
.be-lightbox__nav:hover { background: rgba(255, 255, 255, 0.28); }

.be-lightbox__close { inset-block-start: var(--be-5); inset-inline-end: var(--be-5); }

/* Drawn in CSS so the control needs no icon markup from the script. */
.be-lightbox__close::before,
.be-lightbox__close::after {
    content: '';
    position: absolute;
    inline-size: 18px;
    block-size: 2px;
    background: currentColor;
    border-radius: 2px;
}
.be-lightbox__close::before { transform: rotate(45deg); }
.be-lightbox__close::after { transform: rotate(-45deg); }

.be-lightbox__nav { inset-block-start: 50%; transform: translateY(-50%); }
.be-lightbox__nav--prev { inset-inline-start: var(--be-5); }
.be-lightbox__nav--next { inset-inline-end: var(--be-5); }
.be-lightbox__nav[hidden] { display: none; }

/* A chevron built from two borders of a square, rotated.

   The borders have to be *physical* (border-left / border-top), not logical.
   A logical border flips to the other side under [dir=rtl] while the rotate()
   angle does not, so the two disagree and the glyph ends up pointing up and
   down instead of along the axis — which is exactly what the first version of
   this did on the Arabic page.

   The angles are then stated per direction, because "previous" is a
   left-pointing arrow in English and a right-pointing one in Arabic. */
.be-lightbox__nav::before {
    content: '';
    width: 13px;
    height: 13px;
    border-left: 2px solid currentColor;
    border-top: 2px solid currentColor;
}

.be-lightbox__nav--prev::before { transform: rotate(-45deg); margin-left: 5px; }
.be-lightbox__nav--next::before { transform: rotate(135deg); margin-right: 5px; }

[dir="rtl"] .be-lightbox__nav--prev::before { transform: rotate(135deg); margin: 0 0 0 5px; }
[dir="rtl"] .be-lightbox__nav--next::before { transform: rotate(-45deg); margin: 0 5px 0 0; }

.be-lightbox__count {
    position: absolute;
    inset-block-end: var(--be-5);
    margin: 0;
    padding: var(--be-1) var(--be-4);
    border-radius: var(--be-r-pill);
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: var(--be-text-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
    .be-lightbox { padding: var(--be-3); }
    .be-lightbox__close { inset-block-start: var(--be-3); inset-inline-end: var(--be-3); }
    .be-lightbox__nav { inline-size: 40px; block-size: 40px; }
    .be-lightbox__nav--prev { inset-inline-start: var(--be-2); }
    .be-lightbox__nav--next { inset-inline-end: var(--be-2); }
    .be-lightbox__stage img { max-block-size: calc(100vh - var(--be-20)); }
}


/* Monthly instalment, directly under the asking price
   --------------------------------------------------------------------------
   The calculator sits far down the property page, so the figure an Egyptian
   buyer actually decides on was several screens from the price it belongs
   beside. The value is written by the calculator through
   data-be-calc-mirror, so the two always agree. */
.be-payline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--be-4);
    flex-wrap: wrap;
    margin-block: var(--be-4) 0;
    padding: var(--be-3) var(--be-4);
    border: 1px solid var(--be-brand-100);
    border-radius: var(--be-r);
    background: var(--be-brand-50);
}

.be-payline__figure {
    display: flex;
    align-items: baseline;
    gap: var(--be-2);
    flex-wrap: wrap;
    min-inline-size: 0;
}

.be-payline__label { font-size: var(--be-text-sm); color: var(--be-ink-soft); }

.be-payline__value {
    font-size: var(--be-text-xl);
    font-weight: 800;
    color: var(--be-navy);
}

.be-payline__note { font-size: var(--be-text-xs); color: var(--be-muted); }

@media (max-width: 767px) {
    .be-payline { padding: var(--be-3); }
    .be-payline__figure { flex: 1; }
    .be-payline .be-btn { inline-size: 100%; justify-content: center; }
}

/* Native date and time inputs stay left-to-right
   --------------------------------------------------------------------------
   The browser draws its own dd/mm/yyyy placeholder inside these controls. On
   an RTL page it inherits the page direction and lays those segments out
   right-to-left, so "يوم/شهر/سنة" came out as "ةنس/رهش/موي" — the words
   reversed character by character, which reads as gibberish.

   A date is a structured LTR value regardless of the surrounding script: the
   day box is always first and the year box last, and the calendar picker the
   browser opens is laid out that way too. Forcing the direction on the
   control keeps the segments in the order the picker expects, while
   text-align keeps the field itself sitting with the rest of the RTL form.

   Applies to controls rendered by plugin form builders as well as the
   theme's own, which is why it is a bare element selector. */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
    direction: ltr;
}

[dir="rtl"] input[type="date"],
[dir="rtl"] input[type="time"],
[dir="rtl"] input[type="datetime-local"],
[dir="rtl"] input[type="month"],
[dir="rtl"] input[type="week"] {
    text-align: right;
}

/* The picker button sits on the inline-end edge in both directions. */
[dir="rtl"] input[type="date"]::-webkit-calendar-picker-indicator,
[dir="rtl"] input[type="time"]::-webkit-calendar-picker-indicator,
[dir="rtl"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    margin-inline-start: 0;
    margin-inline-end: auto;
}

/* Payment plans
   --------------------------------------------------------------------------
   Sits above the calculator: the common deposit levels at a glance, with the
   slider underneath for anything else. The published plan is visually the
   primary one — the alternatives are arithmetic and say so. */
.be-plans-grid {
    display: grid;
    /* 170px, not 210px: at 210 the fourth plan wrapped onto a second row on
       its own and left a hole beside it, which is what the reference this was
       modelled on does too. Four fit across the main column at this minimum
       and still collapse cleanly on the way down. */
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--be-3);
    margin-block-end: var(--be-4);
}

.be-plan {
    padding: var(--be-4);
    border: 1px solid var(--be-line);
    border-radius: var(--be-r);
    background: var(--be-surface);
    transition: border-color var(--be-transition), box-shadow var(--be-transition);
}

.be-plan:hover { border-color: var(--be-brand-100); box-shadow: var(--be-shadow-sm); }

/* The developer's own terms, not a calculation. */
.be-plan--published {
    border-color: var(--be-brand);
    box-shadow: 0 0 0 1px var(--be-brand);
}

.be-plan__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--be-2);
    margin-block-end: var(--be-3);
    padding-block-end: var(--be-3);
    border-block-end: 1px solid var(--be-line-soft);
}

.be-plan__share {
    font-size: var(--be-text-2xl);
    font-weight: 800;
    color: var(--be-navy);
    line-height: 1;
}

.be-plan__tag {
    padding: 2px var(--be-2);
    border-radius: var(--be-r-pill);
    font-size: var(--be-text-xs);
    font-weight: 700;
    background: var(--be-line-soft);
    color: var(--be-muted);
}

.be-plan--published .be-plan__tag { background: var(--be-brand-50); color: var(--be-brand); }

.be-plan__rows { margin: 0; display: grid; gap: var(--be-2); }
.be-plan__rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--be-3); }
.be-plan__rows dt { font-size: var(--be-text-sm); color: var(--be-muted); }
.be-plan__rows dd { margin: 0; font-size: var(--be-text-sm); font-weight: 700; color: var(--be-ink); text-align: end; }

.be-plan__monthly { color: var(--be-brand); }
.be-plan__times { font-weight: 600; color: var(--be-muted); font-size: var(--be-text-xs); }

.be-plans-note {
    margin-block: 0 var(--be-4);
    font-size: var(--be-text-xs);
    line-height: var(--be-leading-snug);
    color: var(--be-muted);
}

@media (max-width: 767px) {
    .be-plans-grid { grid-template-columns: 1fr; gap: var(--be-3); }
    .be-plan { padding: var(--be-3); }
}

/* One colour per badge meaning
   --------------------------------------------------------------------------
   Every badge on a card was one of two fills — dark or brand — so "إعادة بيع",
   "إيجار" and "من المطور" were visually the same thing and had to be read
   before they said anything. Colour is the fastest channel a card has; giving
   each state its own means the row can be scanned rather than read.

   All five sit on a photograph, so each is a solid fill with white text and a
   blur behind it rather than a tint, and each was chosen to clear 4.5:1
   against white. */
.be-badge--primary-market { background: rgba(0, 87, 184, 0.92); color: #fff; backdrop-filter: blur(4px); }
.be-badge--resale        { background: rgba(10, 32, 80, 0.86); color: #fff; backdrop-filter: blur(4px); }
.be-badge--rent          { background: rgba(181, 71, 8, 0.92); color: #fff; backdrop-filter: blur(4px); }
.be-badge--instalments   { background: rgba(6, 118, 71, 0.92); color: #fff; backdrop-filter: blur(4px); }
.be-badge--launch        { background: rgba(107, 33, 168, 0.92); color: #fff; backdrop-filter: blur(4px); }
.be-badge--units         { background: rgba(23, 32, 51, 0.78); color: #fff; backdrop-filter: blur(4px); }

/* Annual rent cost */
.be-rent {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--be-5);
    padding: var(--be-5);
    border: 1px solid var(--be-line);
    border-radius: var(--be-r-lg);
    background: var(--be-surface);
}

.be-rent__legend { font-size: var(--be-text-sm); font-weight: 700; color: var(--be-navy); margin-block-end: var(--be-2); padding: 0; }
.be-rent__terms { border: 0; padding: 0; margin: 0; }
.be-rent__note { margin-block: var(--be-3) 0; font-size: var(--be-text-xs); color: var(--be-muted); line-height: var(--be-leading-snug); }

.be-rent__out { margin: 0; display: grid; gap: var(--be-2); align-content: start; }
.be-rent__out > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--be-3);
    padding: var(--be-2) var(--be-3);
    border-radius: var(--be-r-sm);
    background: var(--be-canvas);
}
.be-rent__out dt { font-size: var(--be-text-sm); color: var(--be-muted); }
.be-rent__out dd { margin: 0; font-weight: 700; color: var(--be-ink); }

/* The figure the tenant came for. */
.be-rent__total { background: var(--be-brand-50) !important; }
.be-rent__total dt { color: var(--be-navy); font-weight: 700; }
.be-rent__total dd { color: var(--be-brand); font-size: var(--be-text-lg); font-weight: 800; }

@media (max-width: 767px) {
    .be-rent { grid-template-columns: 1fr; gap: var(--be-4); padding: var(--be-4); }
}


/* The related-articles rail keeps the horizontal form — it sits in a narrow
   column where a stacked tile would be far too tall. */
.be-related .be-postcard {
    grid-template-columns: 132px minmax(0, 1fr);
    gap: var(--be-4);
}
.be-related .be-postcard__media { aspect-ratio: 1 / 1; }