/*
 * Small-screen corrections that apply on top of the other frontend stylesheets.
 * Loaded last (see includes/styles.blade.php), so plain selectors win without !important
 * unless the original rule is inline or already !important.
 */

/* The highlighted service is drawn in the theme's primary colour, which is a mid grey that
   disappears on the black services panel at every width. */
.rightsideofServices .servicesNameContainer .activee,
.servicesNameContainer .serviceName a.activee {
    color: #ffffff;
    font-weight: 700;
}

@media (max-width: 767.98px) {
    /* style.css justifies every paragraph; in a phone-width column that leaves rivers of
       white space between words (hero copy, About us, service descriptions). */
    p,
    .pageinfo,
    .form-control {
        text-align: start !important;
    }

    /* The footer logo is white artwork on a transparent PNG. The old mobile rule put a white
       box behind it (hiding everything but the flag mark) and let the inline height:100%
       stretch it into a square. */
    .footer-logo-col .footer-logo-img-wrapper {
        width: 60% !important;
        height: auto !important;
        min-height: 0 !important;
        margin-top: 1rem !important;
    }
    .footer-logo-col .footer-logo-img-wrapper img {
        background-color: transparent !important;
        object-fit: contain !important;
        height: auto !important;
        max-height: 90px;
    }

    /* Footer contact line: keep the number readable on the dark band. */
    .footer-logo-col .thumb-content a,
    .footer-logo-col .thumb-content span {
        color: #e6e6e6;
    }
}

/* ---------------------------------------------------------------------------------------
   Mobile navigation (below the navbar's lg breakpoint): the collapsed menu becomes a panel
   that slides in from the right over a dimmed page, instead of pushing the page down, and
   the Projects menu is an accordion with full-height rows.
   --------------------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .navbar-collapse {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(88vw, 380px);
        background: #ffffff;
        z-index: 1060;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 68px 18px 32px 16px;
        box-shadow: -8px 0 24px rgba(0, 0, 0, .18);
        transform: translateX(105%);
        transition: transform .28s ease;
        display: block !important;   /* Bootstrap's collapse hides it; the transform does that here */
        height: auto !important;
    }
    .navbar-collapse.show {
        transform: translateX(0);
    }
    .navbar-collapse.collapsing {
        transition: transform .28s ease;
    }

    .mnav-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .45);
        z-index: 1055;
        opacity: 0;
        pointer-events: none;
        transition: opacity .28s ease;
    }
    body.mnav-open .mnav-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
    body.mnav-open {
        overflow: hidden;
    }

    .mnav-close {
        position: absolute;
        top: 14px;
        right: 14px;
        width: 42px;
        height: 42px;
        border: 0;
        border-radius: 50%;
        background: #f1f1f1;
        color: #111;
        font-size: 26px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Top-level rows (Projects, Developers, Multimedia, More) */
    .navbar-collapse .navbar-nav > .nav-item {
        margin: 0 !important;
        border-bottom: 1px solid #ececec;
    }
    .navbar-collapse .navbar-nav {
        width: 100%;
    }
    .navbar-collapse .navbar-nav > .nav-item > .nav-link {
        padding: 14px 10px 14px 6px;
        font-size: 17px;
        font-weight: 600;
        color: #111;
        justify-content: space-between;
    }
    .navbar-collapse .navbar-nav > .nav-item > .nav-link svg {
        transition: transform .2s ease;
    }
    .navbar-collapse .navbar-nav > .nav-item > .nav-link[aria-expanded="true"] svg {
        transform: rotate(180deg);
    }
    .navbar-collapse .navbar-nav .dropdown-menu {
        position: static;
        float: none;
        width: 100%;
        margin: 0 0 8px;
        padding: 0 0 0 4px;
        border: 0;
        box-shadow: none;
        background: transparent;
    }
    .navbar-collapse .navbar-nav .dropdown-menu .dropdown-item {
        padding: 11px 10px;
        white-space: normal;
    }

    /* Projects accordion */
    .mnav-list,
    .mnav-sub {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .mnav-row {
        display: flex;
        align-items: center;
        min-height: 48px;
        border-bottom: 1px solid #f0f0f0;
    }
    .mnav-row > a {
        flex: 1 1 auto;
        padding: 12px 10px;
        color: #111;
        font-size: 16px;
        text-decoration: none;
    }
    .mnav-toggle {
        flex: 0 0 48px;
        height: 48px;
        border: 0;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #111;
    }
    .mnav-toggle svg {
        transform: rotate(90deg);   /* the symbol points right; closed = pointing down */
        transition: transform .2s ease;
    }
    .mnav-item.mnav-open > .mnav-row > .mnav-toggle svg {
        transform: rotate(-90deg);
    }
    .mnav-item.mnav-open > .mnav-row > a {
        font-weight: 700;
    }
    .mnav-sub {
        display: none;
        margin-left: 10px;
        padding-left: 10px;
        border-left: 2px solid #e6e6e6;
    }
    .mnav-item.mnav-open > .mnav-sub {
        display: block;
    }
    .mnav-link {
        display: block;
        padding: 11px 10px;
        font-size: 15px;
        color: #333;
        text-decoration: none;
        border-bottom: 1px solid #f4f4f4;
    }
    .mnav-more {
        font-weight: 700;
        color: #111;
    }

    /* Developers list inside the panel */
    .navbar-collapse .developers-scrollable {
        max-height: 50vh;
    }
    .navbar-collapse .developers-scrollable li a {
        padding: 10px 10px;
    }
}

/* ---------------------------------------------------------------------------------------
   Nothing on a phone should scroll sideways.

   Every page could be panned about 350px to the right, and the cause was the same on all of
   them: elements parked off the right edge on purpose. The navigation panel above sits at
   translateX(105%) while it is closed, and Google's reCAPTCHA badge hides itself the same
   way. Both are position: fixed, so no container can clip them -- but a phone treats an
   overflowing page as a wider page. It widens the layout viewport to fit, and everything
   sized against the viewport grows with it: `position: fixed` panels, and .modal, which is
   fixed and 100% wide. That is why the brochure form was wider than the screen and would
   only show one edge at a time; the form itself was never too big.

   Clipping the horizontal overflow at the viewport keeps the layout viewport at the width
   of the screen. Vertical scrolling is untouched, and the panels still slide in, because a
   transform is painted, not scrolled to.
   --------------------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    html,
    body {
        overflow-x: hidden;
    }
}

/* ---------------------------------------------------------------------------------------
   Dialogs (brochure, floor plan, payment plan, enquiry) on a phone.
   --------------------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    /* style.css takes the padding off .modal-body, and the .row inside carries Bootstrap's
       gutters as negative margins. With no padding to absorb them the row hangs over both
       edges of the sheet, which is what put a scrollbar inside the dialog. */
    .modal .modal-body > .row,
    .modal .modal-body > form > .row {
        margin-left: 0;
        margin-right: 0;
    }

    /* The sheet is full-bleed at this width, so let the rounded corners actually cut. */
    .modal .modal-content {
        overflow: hidden;
    }

    /* The phone row is a flex line holding the country select, the number and the error
       message. The number carried .w-100, which asks for the full width of the line on top
       of the select beside it, and the error message was competing for the same line. */
    .country-select-wrapper {
        flex-wrap: wrap;
    }

    .country-select-wrapper > input.mobile {
        flex: 1 1 140px;
        width: auto;
        min-width: 0;
    }

    .country-select-wrapper > .mobileError,
    .country-select-wrapper > .numberError {
        flex: 1 0 100%;
    }

    /* Roomier fields, and no zoom-on-focus: iOS enlarges the page for anything under 16px. */
    .modal .form-control,
    .modal .form-select {
        font-size: 16px;
    }

    /* The gallery dialog is sized for a desktop column. */
    .ImageModal > .modal-dialog {
        max-width: calc(100% - 1.5rem);
    }
}

/* ---------------------------------------------------------------------------------------
   Listings.
   --------------------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    /* Five unit-type tabs do not fit on one line, and the row they sit in scrolls without
       saying so, so "Villas" and "Others" were simply not there. Let them wrap instead. */
    .featuredProjectContainer .nav-tabs {
        flex-wrap: wrap;
        row-gap: 4px;
    }

    /* Ten page numbers and both arrows on one line: the last pages sat off the end of a
       strip with no scrollbar. */
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 6px;
    }

    .pagination .page-link {
        padding: 6px 11px;
        font-size: 14px;
    }
}

/* ---------------------------------------------------------------------------------------
   Forms and controls on a phone.
   --------------------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    /* iOS zooms the page in whenever a field with text smaller than 16px takes focus, and it
       does not zoom back out afterwards. Every field on the site was 14px (0.75rem and friends
       resolve against a 14px root), so tapping a name box left the visitor on a magnified page
       that now scrolled sideways, on every form: search, enquiry, brochure, contact, careers. */
    input,
    select,
    textarea,
    .form-control,
    .form-select {
        /* !important because several pages style their own fields with a class, which outranks
           a bare element selector however late this sheet loads. */
        font-size: 16px !important;
    }

    /* Room to actually hit things. Most buttons came out 34px tall and pagination numbers were
       26px wide. The top bar is left alone: it is 36px tall by design. */
    .btn,
    .navbar-toggler,
    .page-link,
    .mm-pill {
        min-height: 40px;
    }

    .page-link {
        min-width: 36px;
    }

    .topbarContainer .btn,
    .topbarContainer .dropdown-toggle {
        min-height: 0;
    }

    input.form-control,
    select.form-control,
    .form-select {
        min-height: 42px;
    }

    /* A "Show More" that is 18px tall and has no padding around it. */
    .pre-footer-link.load-more-btn {
        display: inline-block;
        padding: 8px 0;
    }

    /* 0.75rem against a 14px root is 10.5px -- too small for the result count sitting on top
       of a community photograph. */
    .cardUpperResult,
    .location-text {
        font-size: 12px;
    }
}

/* ---------------------------------------------------------------------------------------
   The project page on a phone.
   --------------------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    /* The six headline facts -- bedrooms, type, handover, area, down payment, service
       charges -- are a three-column table held at 577px by `white-space: nowrap`, inside a
       354px scroller. A phone showed the first fact, half of the second, and no sign that
       the other four existed. Laid out as a grid they all fit, two across. */
    #tableResponsive {
        overflow-x: clip;
    }

    #tableResponsive > .table {
        display: block;
        width: 100%;
        margin: 0;
    }

    #tableResponsive > .table > tbody {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    /* The rows exist to group cells for the desktop table; here the six cells are one grid. */
    #tableResponsive > .table > tbody > tr {
        display: contents;
    }

    #tableResponsive > .table > tbody > tr > td {
        display: block;
        width: auto;
        min-width: 0;
    }

    #tableResponsive .projectType {
        padding: 0.7rem 0.55rem;
        align-items: flex-start;
    }

    #tableResponsive .projectType > img {
        width: 26px;
        flex: 0 0 26px;
    }

    #tableResponsive .rightcontainer {
        margin-left: 0.55rem;
        min-width: 0;
        white-space: normal;
    }

    #tableResponsive .rightcontainer > p,
    #tableResponsive .rightcontainer > span {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    #tableResponsive .rightcontainer > span {
        font-size: 0.95rem;
    }

    /* The hero card is positioned over the photograph and its container has no height of its
       own, so nothing stops it covering what follows -- and at this width it is as wide and
       nearly as tall as the photo, which leaves a frosted panel where the building should be.
       Below the photo it is a card, the photo is a photo, and neither can land on the other.
       The pre-launch hero is left alone: it is white text on a dark gradient by design. */
    /* .page-project only: the homepage slider and rent-and-sale use these same two class
       names. Forcing .heroImage to 210px while its img stays height:auto made the homepage
       slide overflow its own anchor, and taking .imageOnImage out of its overlay turned the
       slider caption into a white block. */
    .page-project .heroImage {
        height: 210px !important;
    }

    .page-project .imageOnImage:not(.imageOnImage--pre-launch) {
        position: static !important;
        width: auto !important;
        max-width: none !important;
        margin: 0.75rem 0 0 !important;
        padding: 1.15rem !important;
        background: #ffffff !important;
        backdrop-filter: none !important;
        border-color: #e9e9e9 !important;
    }

    /* 55px of floating button at bottom: 76px sits in the middle of the reading area and
       covered the Overview heading. In the corner it covers a corner. */
    .fixed-button {
        bottom: 14px !important;
        right: 10px !important;
        padding: 9px 14px !important;
        font-size: 12px !important;
    }

    .fixed-button .fixed-button-icon {
        width: 22px !important;
        height: 22px !important;
    }

    /* Nine-column tables (floor plans, unit lists) become one card per row. The labels come
       from the column headings, copied onto the cells by includes/scripts.

       Stacking them as nine full-width label/value lines made each unit 445px tall, so the
       ten units on a page of the developer's Unit Type List came to 5066px -- five screens
       of one table. The floor plan now runs down the left and the facts sit beside it in
       tight lines, which is the same information in roughly a third of the height. */
    .table-responsive:has(> .table-stacked) {
        overflow-x: visible;
    }

    .table-stacked {
        display: block;
        width: 100%;
    }

    .table-stacked > thead {
        display: none;
    }

    .table-stacked > tbody {
        display: block;
        width: 100%;
    }

    .table-stacked > tbody > tr {
        display: grid;
        /* the plan reads as a plan at about a third of the card, not a fifth */
        grid-template-columns: 35% minmax(0, 1fr);
        column-gap: 12px;
        align-items: start;
        width: 100%;
        margin-bottom: 10px;
        padding: 10px;
        border: 1px solid #e4e4e4;
        border-radius: 12px;
        background: #ffffff;
    }

    /* A fixed label column lines the values up with each other; right-aligning the value
       within it takes the detail block all the way to the card's edge, so neither a
       channel down the middle nor a strip of nothing on the right is left over. */
    .table-stacked > tbody > tr > td {
        display: grid;
        grid-template-columns: 84px minmax(0, 1fr);
        column-gap: 6px;
        align-items: baseline;
        grid-column: 2;
        width: auto;
        min-height: 0;
        padding: 2px 0;
        border: 0;
        font-size: 0.82rem;
        line-height: 1.35;
        text-align: right;
    }

    .table-stacked > tbody > tr > td::before {
        content: attr(data-label);
        color: #8a8a8a;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.01em;
        line-height: 1.45;
        text-align: left;
    }

    /* the heading would otherwise sit above blank space */
    .table-stacked > tbody > tr > td[data-blank] {
        display: none;
    }

    /* The first cell is the floor plan. It takes the left column for the card's full height
       and opens the full-size plan in the lightbox when tapped. */
    .table-stacked > tbody > tr > td:first-child {
        display: block;
        grid-column: 1;
        /* `1 / -1` counts to the end of the EXPLICIT grid, and these rows have none -- it
           resolved to a single row and the thumbnail never filled the card. */
        grid-row: 1 / span 99;
        padding: 0;
    }

    .table-stacked > tbody > tr > td:first-child::before {
        content: none;
    }

    .table-stacked > tbody > tr > td:first-child {
        align-self: stretch;
    }

    .table-stacked > tbody > tr > td:first-child img {
        width: 100%;
        height: 100%;
        min-height: 86px;
        /* a floor plan cropped is a floor plan you cannot read */
        object-fit: contain;
        background: #f6f6f7;
        border-radius: 8px;
    }

    /* In the unit list the project's name is the card's title, so it leads and drops its
       heading. `order` is honoured by grid auto-placement, which keeps the rest of the
       cells in their own order underneath. */
    #unitsview-gallery .table-stacked > tbody > tr > td:nth-child(3) {
        order: -1;
        display: block;
        margin-bottom: 2px;
        font-size: 0.95rem;
        font-weight: 700;
        text-align: left;
    }

    #unitsview-gallery .table-stacked > tbody > tr > td:nth-child(3)::before {
        content: none;
    }

    /* A cell with no heading above it is an action, not a fact. */
    .table-stacked > tbody > tr > td:not([data-label]) {
        display: block;
        padding-top: 4px;
        text-align: center;
    }

    .table-stacked > tbody > tr > td:not([data-label])::before {
        content: none;
    }

    /* The expanded floor plan is a row of its own with a single spanning cell; it is not a
       card and must not be squeezed into the 76px column. */
    .table-stacked > tbody > tr > td[colspan] {
        display: block;
        grid-column: 1 / -1;
        grid-row: auto;
        padding: 4px 0 0;
    }

    .table-stacked > tbody > tr > td[colspan]::before {
        content: none;
    }

    .table-stacked > tbody > tr > td[colspan] img {
        width: 100% !important;
        height: auto !important;
        border-radius: 8px;
    }

    /* Ten units is still ten cards. Bounding the list keeps the section to about a screen
       however many rows a developer has, with the pager immediately under it. */
    #unitsview-gallery .table-responsive {
        max-height: 68vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-right: 2px;
    }
}

/* ---------------------------------------------------------------------------------------
   Project page on a phone, second pass: rhythm, sections, and the layouts themselves.

   The page measured 13,474px tall at 375px with ~2,300px of pure white: fifty desktop-sized
   spacer divs, a hidden-but-still-spaced section nav, payment cards stacked 157px apiece,
   a floor-plan section rendering its unit table twice over, and an inquiry section whose
   fixed 555px height pushed its own submit button onto the footer.

   NOTE ON ORDER: project.css is pushed and therefore loads AFTER this sheet, so every
   override of a project.css rule here carries !important on purpose.
   --------------------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    /* -- rhythm ------------------------------------------------------------------ */
    .sp-lg { height: 18px; }
    .sp-md { height: 12px; }
    .sp-sm { height: 10px; }
    .sp-xs { height: 4px; }

    /* The facts column carried an inline translateY(20px): a visual shove layout never
       accounts for. */
    .projectSection { transform: none !important; }

    /* The spacer pair that introduces the section nav (see below), and the 80px lead-in
       the Overview section opens with. */
    .height-80.d-none.d-lg-block + .height-20 { height: 0; }
    #overview .height-80 { height: 20px; }

    /* min-height:320px sits inline on the Overview row for the desktop two-column layout;
       on one column it is only trapped air. */
    #overview .row[style*="min-height"] { min-height: 0 !important; }

    /* Long marketing copy is justified site-wide; in a 350px column that leaves rivers. */
    .project-copy, .project-copy p, .project-copy li, .pageinfo {
        text-align: start !important;
    }

    /* -- the section nav becomes a sticky pill bar (it was display:none on phones,
          leaving its spacer behind) ------------------------------------------------ */
    main.scroll-containers-148 { overflow-x: clip; }   /* clip keeps the page unscrollable
                                                          sideways without creating a scroll
                                                          container, which would kill sticky */
    /* The bar stays dark, because every one of its icons is white or near-white artwork
       (#ffffff / #CCCED0) drawn for a dark bar. The first pass gave it a white background
       and #333 pills, which is how the labels became unreadable. */
    .page-project .navoverview {
        display: block !important;
        z-index: 1020;
        margin: 0;
        padding: 7px 4px;
        background: var(--black-background-color, #171617);
        border-radius: 12px;
    }
    /* pinned by the page's affix script; sticky cannot work here (the wrapper is only as
       tall as the nav) */
    .page-project .navoverview.is-affixed {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        margin: 0;
        padding: 7px 10px;
        border-radius: 0;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    }
    .page-project .navoverview .nav-pills {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .page-project .navoverview .nav-pills::-webkit-scrollbar { display: none; }
    .page-project .navoverview .nav-pills .nav-item { margin: 0 !important; }
    .page-project .navoverview .nav-pills .nav-link {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        white-space: nowrap;
        padding: 8px 15px;
        font-size: 13px;
        font-weight: 500;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 999px;
        color: rgba(255, 255, 255, 0.82);
    }
    .page-project .navoverview .nav-pills .nav-link img {
        width: 17px;
        height: 17px;
        object-fit: contain;
        flex: 0 0 17px;
    }
    .page-project .navoverview .nav-pills .nav-link.active {
        background: #ffffff;
        color: #111111;
        border-color: #ffffff;
        font-weight: 600;
    }
    /* the artwork is light, so on the white active pill it has to be inverted to stay visible */
    .page-project .navoverview .nav-pills .nav-link.active img {
        filter: brightness(0);
    }
    /* Watch Video sat next to a full-width brochure button as bare text, and its hover rule
       (written for the dark hero it used to live on) set color:#fff !important -- white text
       on the white card. It becomes the brochure button's outlined twin. */
    .page-project .pre-launch-video {
        display: inline-flex !important;
        width: 100%;
        justify-content: center;
        gap: 10px;
        margin-top: 10px;
        padding: 11px 16px;
        border: 1.5px solid rgba(15, 20, 32, 0.18);
        border-radius: 10px;
        background: #ffffff;
        color: #16181c !important;
    }
    .page-project .pre-launch-video:hover,
    .page-project .pre-launch-video:focus {
        color: #16181c !important;
        background: #f6f7f9;
        border-color: rgba(15, 20, 32, 0.3);
    }
    .page-project .pre-launch-video__play {
        width: 30px !important;
        height: 30px !important;
        flex: 0 0 30px !important;
        border: 1px solid rgba(15, 20, 32, 0.22) !important;
        background: rgba(15, 20, 32, 0.05) !important;
        color: #16181c;
    }
    .page-project .pre-launch-video:hover .pre-launch-video__play {
        background: rgba(15, 20, 32, 0.1) !important;
    }
    .page-project .pre-launch-video__text { color: #16181c !important; }
    .page-project .pre-launch-video__text strong { color: #16181c !important; font-size: 0.95rem; }
    .page-project .pre-launch-video__text small { color: rgba(22, 24, 28, 0.6) !important; }

    /* Sections come to rest at the top of the screen rather than straddling it. CSS
       scroll-snap was tried first and is too weak here: proximity would not pull across the
       ~220px gaps these sections leave, and mandatory traps a reader inside any section
       taller than the screen. The page settles it in script instead -- see the blade. */

    /* anchors must land below the sticky bar */
    #overview, #gallery, #neighborhood, #payment_plan, #floor_plan, #unit_type,
    #master_plan, #location, .amenities-wrapper {
        scroll-margin-top: 64px;
    }

    /* -- hero facts grid: one clean set of separators ---------------------------- */
    /* Every cell carried the desktop table's border fragments; with tr{display:contents}
       they paint as broken slivers. Zero them and draw the grid's own lines. */
    #tableResponsive > .table > tbody { position: relative; }
    #tableResponsive > .table > tbody::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 10px;
        bottom: 10px;
        width: 1px;
        background: #ececec;
    }
    #tableResponsive > .table > tbody > tr > td {
        border: 0 !important;
        border-bottom: 1px solid #f1f1f1 !important;
    }
    #tableResponsive > .table > tbody > tr:last-child > td:nth-child(n+2) {
        border-bottom: 0 !important;
    }

    /* The brochure button's decorative tail hangs 37px past its right edge, and the label
       wrapper reserves 80px it does not use. */
    .btnMock { display: none !important; }
    .nameAndIcon { margin-right: 0 !important; }

    /* "Pre Launch / Exclusive Opportunity" is one nowrap row 379px wide on a 375px screen,
       so the second half was cut off at the edge. */
    .page-project .pre-launch-flag {
        display: flex !important;
        flex-wrap: wrap;
        max-width: 100%;
    }
    .page-project .pre-launch-flag__note {
        font-size: 11px;
        letter-spacing: 0.04em;
    }

    /* -- payment methods: four words do not need 628px --------------------------- */
    .paymentMethodContainer .row > [class*="col-"] {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .paymentMethodsContainer {
        padding: 0.85rem 0.5rem !important;
        margin-bottom: 10px !important;
        border-radius: 12px;
    }
    .paymentMethodsContainer > i { font-size: 1.4rem !important; }
    .paymentMethodsContainer > p {
        padding-top: 0.5rem !important;
        font-size: 0.95rem !important;
    }

    /* -- payment plan steps: two across, no stray verticals ----------------------- */
    #payment_plan .h1font62 { font-size: 1.9rem !important; }
    #payment_plan .rightborder {
        border-left: 0 !important;
        border-right: 0 !important;
    }
    #payment_plan .paymentplanContainer > [class*="col-"] {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 12px;
    }

    /* -- floor plans -------------------------------------------------------------- */
    /* The plan itself leads; the picker follows as a compact strip. */
    #grid_view_list { display: flex; flex-direction: column; }
    #grid_view_list > .floorImgcontainer { order: 1; }
    #grid_view_list > .floorSideImg { order: 2; }
    #grid_view_list > .DuplexContainer { order: 3; height: auto !important; }

    /* the picker: a horizontal row of real thumbnails instead of a 500px grey well */
    #floor_plan .floorSideImg { background: transparent !important; padding: 0 !important; }
    #floor_plan .unitType { background: transparent !important; height: auto !important; padding: 0 !important; }
    #floor_plan .floorSideImg .tab-content > .tab-pane > div {
        max-height: none !important;
        overflow-y: visible !important;
        overflow-x: auto;
        display: flex !important;
        flex-direction: row !important;
        gap: 10px;
        padding: 6px 2px 10px;
        scrollbar-width: none;
    }
    #floor_plan .floorSideImg .tab-content > .tab-pane > div::-webkit-scrollbar { display: none; }
    #floor_plan .floorunit {
        flex: 0 0 auto !important;
        width: 116px !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 4px;
        margin: 0 !important;
        padding: 8px 6px !important;
        border: 1px solid #e6e6e6 !important;
        border-radius: 10px;
        background: #fff !important;
    }
    #floor_plan .floorunit img {
        width: 96px !important;
        height: 72px !important;
        object-fit: contain;
        background: #fafafa;
    }
    #floor_plan .floorunit p, #floor_plan .floorunit span {
        font-size: 12px !important;
        margin: 0 !important;
        text-align: center !important;
        white-space: normal !important;
    }

    /* The full unit table repeats everything the picker already shows; on a phone it was
       ~2,500px of stacked cards. It waits behind a button (see the blade's toggle). */
    #tabular_list { display: none; }
    #tabular_list.mob-open { display: flex; }
    .units-toggle {
        display: block;
        width: 100%;
        margin: 6px 0 4px;
        padding: 12px;
        border: 1px solid #dcdcdc;
        border-radius: 10px;
        background: #fff;
        font-weight: 600;
        font-size: 15px;
    }
    /* inside a stacked unit card, this page's own name and emirate repeat on every row */
    #tabular_list td[data-label="Project Name"],
    #tabular_list td[data-label="Location"] { display: none; }

    /* -- neighborhood + amenities -------------------------------------------------- */
    #neighborhood .swp-prev, #neighborhood .swp-next { display: none !important; }
    #neighborhood .caurosalContainer {
        height: auto !important;
        min-height: 88px;
        margin-bottom: 8px !important;
    }
    #neighborhood .nav-tabs { row-gap: 4px; }
    .amenities-wrapper .amenitiescontainer { margin-bottom: 8px !important; }

    /* -- master plan + media ------------------------------------------------------- */
    #master_plan { margin-top: 20px !important; }
    #master_plan .mt-5 { margin-top: 1rem !important; }
    #master_plan a[style*="height"] { height: auto !important; }
    #master_plan img { max-height: 340px; object-fit: contain; }
    .page-project .virtual-tour-img { height: 180px !important; }
    .page-project .py-10 { padding-top: 2rem !important; padding-bottom: 1rem !important; }
    .cutImageContianer1 { display: none !important; }

    /* -- similar projects + inquiry + the footer seam ------------------------------ */
    .similarswiper.py-5 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }

    /* The section is height:555px in project.css at every breakpoint; the phone form is
       taller than that, which is how Submit Request ended up printed over the footer. */
    .overLayAndSubmit {
        height: auto !important;
        margin-top: 20px !important;
        padding: 24px 0 32px !important;
        background: var(--black-background-color, #1c1c1c) !important;
    }
    .overlaysubmit, .submitworker { display: none !important; }
    .inquiryForm { margin: 0 auto !important; }
    .inputContainer1 > form > input,
    .inputContainer1 input.form-control { height: 52px !important; }

    /* -- the floating brochure button gives way to a real action bar --------------- */
    .page-project .fixed-button { display: none !important; }
    .mcta-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        display: flex;
        gap: 10px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        background: #ffffff;
        border-top: 1px solid #e8e8e8;
        box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.07);
    }
    .mcta-bar a, .mcta-bar button {
        flex: 1 1 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 46px;
        border-radius: 12px;
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
        border: 0;
    }
    .mcta-bar .mcta-primary { background: var(--black-background-color, #111); color: #fff; }
    .mcta-bar .mcta-whatsapp { background: #e9f9ef; color: #128c4b; border: 1px solid #bfe8cd; }
    body.has-mcta { padding-bottom: 74px !important; }   /* an inline body{padding:0!important} exists */
}

@media (min-width: 768px) {
    .mcta-bar { display: none; }
    .units-toggle { display: none; }
}

/* ---------------------------------------------------------------------------------------
   Round three: the brochure button's dead half, the breadcrumb band, the phone row that
   split in two, and the footer everywhere.
   --------------------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    /* The hero brochure button is 224px inside a 354px card, so a third of the row is empty
       next to it. Nothing is meant to sit there on a phone. */
    .page-project .downloadContainer { display: block !important; }
    .page-project .downloadContainer > div,
    .page-project .downloadContainer form { width: 100%; }
    .page-project .downloadContainer .downloaddboucher {
        width: 100%;
        justify-content: center;
    }

    /* Breadcrumb: two 13px spacer divs and a 62px band for one line of text, then another
       28px before the photograph. */
    .breadcrumbs-height { min-height: 0 !important; }
    .breadcrumbs-height div[style*="height: 13px"] { height: 4px !important; }
    .breadcrumbs-height .breadcrumb { margin-bottom: 0 !important; }
    .page-project .heroImage { margin-top: 0 !important; }
    /* and the 28px the hero's own container adds on top of that */
    .page-project .heroContainer { margin-top: 8px !important; }

    /*
       The country flag and the number belong on one line, the error message under them.
       `nowrap` was the wrong way to get that and it broke the field: with no wrapping the
       error's `flex-basis: 100%` cannot drop to its own line, so all three fight over one
       row -- 72px + the input + 100% inside 310px -- and the input, the only one that can
       give, ended up 30px wide. Too small to type a digit into, which is how it was
       reported.

       `wrap` is safe now that the input's width is `auto`: its basis is its content, so it
       stays beside the flag, and only the error wraps. (The basis was the reason for
       `nowrap` in the first place -- the input carries Bootstrap's .w-100 -- and the
       `width: auto !important` two lines down had already dealt with that.)
    */
    .country-select-wrapper { flex-wrap: wrap !important; }
    .country-select-wrapper > input,
    .country-select-wrapper > input.form-control {
        /*
         * Basis nought, not auto. With `auto` the basis is the input's own intrinsic width --
         * about 212px for a 20-character field with p-3 padding -- and a wrapping row decides
         * which line an item goes on from its basis, before any shrinking. 65 + 10 + 212 is
         * within a few pixels of the 291px row on the home page's inquiry form, so the input
         * tipped onto a line of its own, full width, under the flag. At nought it can never
         * force a wrap and simply takes what is left.
         */
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
    }
    .country-select-wrapper > .country-dropdown-container,
    .country-select-wrapper > .select2 { flex: 0 0 auto !important; }
    /* the error message is not a third column */
    .country-select-wrapper > .mobileError,
    .country-select-wrapper > .numberError {
        flex: 1 0 100% !important;
        order: 9;
        margin-top: .35rem;
    }
    /* empty, it still held a line under every one of these rows */
    .country-select-wrapper > .mobileError:empty,
    .country-select-wrapper > .numberError:empty { display: none !important; }
}

/* ---------------------------------------------------------------------------------------
   The footer, on every page.

   722px on a phone for four short link columns, a logo, four social icons, a phone number
   and a copyright line -- with 41px, 87px and 82px of empty band inside it, a right-aligned
   copyright that wrapped against the edge, and 20px under every widget.
   --------------------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    /* 14px of side gutter: without it the headings sit against the screen edge, because
       the footer's own container carries p-0. */
    footer .main-footer { padding: 18px 14px 8px !important; }
    /* headings read from the left, so the links under them should too */
    footer .main-footer .widget ul li,
    footer .main-footer .widget ul li a { text-align: left !important; }
    footer .main-footer .widget { margin-bottom: 10px !important; }
    footer .main-footer .widget .widget-title,
    footer .main-footer .widget h4 { margin-bottom: 8px !important; font-size: 15px !important; }
    footer .main-footer .widget ul li { margin-bottom: 2px !important; line-height: 1.5; }
    footer .main-footer .widget ul li a { font-size: 13.5px !important; }

    /* the logo / social band: centred, and without the height it reserved for a desktop row */
    footer .footerWidth {
        padding: 0 !important;
        margin: 0 !important;
    }
    footer .footer-logo-col {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 10px 0 !important;
    }
    footer .footer-logo-col .widget { margin: 0 !important; }
    footer .footer-logo-col .widget > div:not(.footer-logo-img-wrapper) { width: auto !important; padding: 0 !important; }
    /* Scoped to the logo column on purpose: every link column in this footer -- Company,
       Developers, Explore, New Projects -- is also a ul.thumbnail-widget, and laying those
       out as a flex row collapses each column into a line of colliding links. Only the
       contact line inside .footer-logo-col is meant to read horizontally. */
    footer .footer-logo-col .thumbnail-widget {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 14px;
        margin: 0 !important;
        padding: 0 !important;
    }
    footer .footer-logo-col .thumbnail-widget li { margin: 0 !important; }
    footer .main-footer .widget ul.thumbnail-widget { display: block; }

    /* contact line reads as one centred row rather than a right-aligned column */
    /* .thumb-content wraps every footer link, not just the contact line -- centring it
       unscoped pushed all four columns of links into the middle of their column. */
    footer .footer-logo-col .thumb-content {
        text-align: center !important;
        font-size: 13.5px;
    }

    /* the copyright was right-aligned, so it wrapped against the screen edge */
    .footer-copyright { padding: 0 !important; }
    .footer-copyright hr { margin: 6px 0 !important; }
    .footer-copyright .text-end { text-align: center !important; }
    .footer-copyright .py-3 { padding-top: 8px !important; padding-bottom: 10px !important; }
    .footer-copyright .col-md-12 { font-size: 12.5px !important; line-height: 1.5; }
}

/* ---------------------------------------------------------------------------------------
   Google's reCAPTCHA badge.

   It is fixed to the bottom-right of every page and covered the footer's copyright line,
   and the action bar on the project page. Google permits hiding it -- but only if the
   attribution it carries is shown somewhere in the flow instead, which the footer now
   does (see includes/footer.blade.php). Hidden without that line, this would break
   Google's terms of service, so the two belong together.
   --------------------------------------------------------------------------------------- */
.grecaptcha-badge {
    visibility: hidden;
}

.recaptcha-terms {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.55);
}

.recaptcha-terms a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: underline;
}

@media (max-width: 767.98px) {
    .recaptcha-terms {
        font-size: 11px;
        text-align: center;
    }
}

@media (max-width: 767.98px) {
    /* 457 developer cards share one row, and a flex row is as tall as its tallest child --
       one developer's name wrapped to four lines and held every view of the slider at
       220px while the cards in it are 130px. Two lines is enough of a name. */
    .developer-container p {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* pb-5 reserves 42px under the slider for a pagination row it does not have */
    .developerswiper {
        padding-bottom: 14px !important;
    }
}

/* ---------------------------------------------------------------------------------------
   The homepage slider on a phone.

   The caption was a white frosted panel 371x363 sitting inside a 375x600 slide -- it covered
   the photograph almost entirely, so the slide read as a washed-out grey card with a sliver
   of building above and below it. Dark glass anchored to the bottom instead: the photograph
   is the slide, and the caption sits on it.
   --------------------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .myProjectSlider .swiper-slide {
        border-radius: 16px;
        overflow: hidden;
    }

    /* home.css pins both the anchor and the img to min-height:600px below 992px, so the
       height alone is ignored. */
    .myProjectSlider .heroImage {
        display: block;
        height: 470px;
        min-height: 470px;
    }

    .myProjectSlider .heroImage img {
        height: 100% !important;
        min-height: 0 !important;
        object-fit: cover;
    }

    /* a scrim so white text holds up over a bright photograph */
    .myProjectSlider .swiper-slide::after {
        content: '';
        position: absolute;
        inset: auto 0 0 0;
        height: 62%;
        background: linear-gradient(to top, rgba(8, 11, 18, 0.72), rgba(8, 11, 18, 0));
        pointer-events: none;
    }

    .myProjectSlider .swiper-slide > .container {
        position: absolute;
        inset: auto 0 0 0;
        z-index: 2;
        /* the search panel is pulled up over the hero and carries z-index 99, so the caption
           has to clear it rather than sit under it */
        padding: 0 10px 42px;
    }

    .myProjectSlider .imageOnImage {
        position: static !important;
        width: auto !important;
        max-width: none !important;
        padding: 14px !important;
        border-radius: 16px;
        background: rgba(12, 15, 22, 0.52) !important;
        backdrop-filter: blur(18px) saturate(140%);
        -webkit-backdrop-filter: blur(18px) saturate(140%);
        border: 1px solid rgba(255, 255, 255, 0.16) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
        color: #ffffff !important;
    }

    /* everything inside reads light */
    .myProjectSlider .imageOnImage .paraTitle,
    .myProjectSlider .imageOnImage .paraTitle a,
    .myProjectSlider .imageOnImage .price,
    .myProjectSlider .imageOnImage .price span,
    .myProjectSlider .imageOnImage .currency,
    .myProjectSlider .imageOnImage .currency-symbol span {
        color: #ffffff !important;
    }

    .myProjectSlider .imageOnImage .paraTitle { font-size: 1.55rem !important; line-height: 1.15; }

    .myProjectSlider .imageOnImage .pageinfo,
    .myProjectSlider .imageOnImage .startingAndPrice {
        color: rgba(255, 255, 255, 0.72) !important;
    }

    /* two lines of blurb is a caption; more is an article */
    .myProjectSlider .imageOnImage .pageinfo {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 10px !important;
        font-size: 0.9rem !important;
        line-height: 1.4;
    }

    /* the divider is an inline border-bottom:2px solid black */
    .myProjectSlider .imageOnImage div[style*="border-bottom"] {
        border-bottom-color: rgba(255, 255, 255, 0.22) !important;
        border-bottom-width: 1px !important;
    }

    /* the stat icons are dark artwork */
    .myProjectSlider .imageOnImage .iconAndPriceContainer img { filter: invert(1) brightness(1.6); }
    .myProjectSlider .imageOnImage .priceAndProjects { margin-top: 12px !important; gap: 10px; }
    .myProjectSlider .imageOnImage .iconAndPriceContainer { margin-top: 0 !important; }
    .myProjectSlider .imageOnImage .price { font-size: 1.05rem !important; margin-bottom: 0 !important; }
    .myProjectSlider .imageOnImage .startingAndPrice { font-size: 0.78rem !important; }

    /* the brochure button takes the width; its decorative tail is desktop furniture */
    .myProjectSlider .imageOnImage .downloadContainer { margin-top: 12px !important; gap: 10px; align-items: center; }
    .myProjectSlider .imageOnImage .downloadContainer > div { flex: 1 1 auto; }
    .myProjectSlider .imageOnImage .downloaddboucher {
        width: 100%;
        justify-content: center;
        padding: 12px 14px !important;
    }
    .myProjectSlider .imageOnImage .btnMock { display: none !important; }
    .myProjectSlider .imageOnImage .nameAndIcon { margin-right: 0 !important; }

    /* the play button becomes a light circle on the glass */
    .myProjectSlider .imageOnImage .downloadContainer > a { flex: 0 0 auto; }
    .myProjectSlider .imageOnImage .downloadContainer > a img,
    .myProjectSlider .imageOnImage .downloadContainer > a svg { filter: brightness(0) invert(1); }

    /* the project number and licence line is reference, not a caption */
    .myProjectSlider .imageOnImage .propertyAndLicense { display: none !important; }

    /*
       The pre-launch badge, on a phone.

       Desktop puts the gold chip and the note side by side inside one rounded pill, which
       reads well at 600px. At 355px the two come to 347px inside a 329px pill, so they wrap
       -- the chip on one line, the note on the next, and a wide empty crescent of glass to
       the right of the chip. It looked like a button that had failed to load.

       The pill is what does not fit, so on a phone there is no pill: the chip stands on its
       own and the note is a line of text under it.
    */
    .myProjectSlider .imageOnImage .pre-launch-flag {
        display: block !important;
        width: -moz-fit-content;
        width: fit-content;
        background: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin-bottom: 8px;
    }

    .myProjectSlider .imageOnImage .pre-launch-flag__stage {
        display: inline-flex !important;
        padding: 6px 13px !important;
        font-size: .6875rem !important;
        letter-spacing: .09em;
        white-space: nowrap;
    }

    .myProjectSlider .imageOnImage .pre-launch-flag__note {
        display: block !important;
        padding: 6px 2px 0 !important;
        font-size: .625rem !important;
        letter-spacing: .07em;
        white-space: nowrap;
        color: rgba(255, 255, 255, 0.78) !important;
    }

    /* dots sit on the photograph */
    .myProjectSlider .swiper-pagination-bullet {
        background: rgba(255, 255, 255, 0.55);
        opacity: 1;
    }
    .myProjectSlider .swiper-pagination-bullet-active { background: #ffffff; }
}

/* ---------------------------------------------------------------------------------------
   The image lightbox (Magnific Popup) on a phone.
   --------------------------------------------------------------------------------------- */
/* magnific-popup.min.css loads after this sheet, so its defaults win on equal specificity --
   hence !important throughout this block. */
@media (max-width: 767.98px) {
    .mfp-bg { opacity: 0.94 !important; background: #08090c !important; }

    .mfp-arrow {
        width: 46px !important;
        height: 46px !important;
        margin-top: -23px !important;
        padding: 0 !important;
        opacity: 1 !important;
        background: rgba(255, 255, 255, 0.14) !important;
        border-radius: 50% !important;
        -webkit-tap-highlight-color: transparent;
    }
    .mfp-arrow::before { display: none !important; }
    .mfp-arrow::after {
        content: '' !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: 11px !important;
        height: 11px !important;
        margin: 0 !important;
        border: 0 !important;
        border-top: 2px solid #fff !important;
        border-right: 2px solid #fff !important;
        opacity: 1 !important;
    }
    .mfp-arrow-left  { left: 10px !important; }
    .mfp-arrow-right { right: 10px !important; }
    .mfp-arrow-left::after  { transform: translate(-30%, -50%) rotate(-135deg) !important; }
    .mfp-arrow-right::after { transform: translate(-70%, -50%) rotate(45deg) !important; }

    /* Magnific's image markup always contains an empty <div class="mfp-close"> inside
       .mfp-figure, filled only when closeBtnInside is on -- it is off here, so that div
       stays empty. Painting every .mfp-close turned it into a grey disc floating over the
       photograph. Only the real button is a button. */
    button.mfp-close {
        width: 44px !important;
        height: 44px !important;
        line-height: 42px !important;
        padding: 0 !important;
        font-size: 30px !important;
        opacity: 1 !important;
        color: #fff !important;
        background: rgba(255, 255, 255, 0.14) !important;
        border-radius: 50% !important;
        right: 10px !important;
        top: 10px !important;
    }

    .mfp-counter {
        right: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        top: 14px !important;
        padding: 4px 12px !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.14) !important;
        font-size: 13px !important;
        color: #fff !important;
    }

    .mfp-img { padding: 64px 0 48px !important; }
    .mfp-figure figcaption { text-align: center !important; }
}

/* ---------------------------------------------------------------------------------------
   The footer's logo / social / contact block.

   It is one flex row -- [logo] [Get Connected + icons + phone/email] -- which on a phone
   put the wordmark alongside the icons with the contact lines hanging off to the left. As
   a centred column it reads as three things in order.
   --------------------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    footer .footer-logo-col .widget.no-box {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        width: 100%;
    }

    /* The wrapper carries an inline 200x60 and the img object-fit: cover, which crops a
       wordmark. Keep the box's shape and let the logo fit inside it. */
    footer .footer-logo-col .footer-logo-img-wrapper {
        /* the upload is a 500x500 square with the wordmark small inside it, so a short box
           contains the whole square and leaves the letters tiny */
        width: 190px !important;
        height: 84px !important;
        margin: 0 !important;
        display: flex;
        justify-content: center;
    }
    footer .footer-logo-col .footer-logo-img-wrapper img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    footer .footer-logo-col .widget.no-box > div:last-child {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    /* "Get Connected:" */
    footer .footer-logo-col .widget.no-box > div:last-child > ul:first-child {
        margin: 0 !important;
        font-size: 13px;
        color: rgba(255, 255, 255, 0.7);
    }

    footer .social-footer2 {
        display: flex !important;
        justify-content: center;
        gap: 18px;
        margin: 0 !important;
        padding: 0 !important;
    }
    footer .social-footer2 li { margin: 0 !important; }
    footer .social-footer2 img { width: 22px; height: 22px; }

    /* phone / WhatsApp / email on one centred line */
    /* the theme positions this list absolutely, which is why it landed on top of
       "Get Connected:" once the block became a column */
    footer .footer-logo-col .thumbnail-widget {
        position: static !important;
        width: 100%;
        justify-content: center;
        align-items: center;
        row-gap: 4px;
    }
    footer .footer-logo-col .thumbnail-widget li { display: inline-flex; align-items: center; }
    footer .footer-logo-col .thumbnail-widget img { width: 16px; height: 16px; }
}

/* Set while an image lightbox is open. Magnific locks <html>, but this sheet gives <body>
   overflow-x: hidden below 992px, which makes the body its own scroll container -- so the
   page went on scrolling behind the picture. */
body.mfp-lock {
    overflow: hidden !important;
}

/* ---------------------------------------------------------------------------------------
   Round four.
   --------------------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    /* The play control is an inline SVG already drawn for a dark background: a dashed white
       ring, a solid white disc and a coloured triangle. Filtering it white turned the whole
       thing into a white blob. Leave the artwork alone and just darken the triangle so it
       reads against the disc. */
    .myProjectSlider .imageOnImage .downloadContainer > a svg { filter: none !important; }
    .myProjectSlider .imageOnImage .downloadContainer > a svg path { fill: #16181c !important; }
    .myProjectSlider .imageOnImage .downloadContainer > a { width: 46px; }
    .myProjectSlider .imageOnImage .downloadContainer > a svg { width: 46px; height: 46px; }

    /* Same overflow the project hero had: one nowrap row wider than the screen. */
    .myProjectSlider .pre-launch-flag {
        display: flex !important;
        flex-wrap: wrap;
        max-width: 100%;
        margin-bottom: 8px;
    }
    .myProjectSlider .pre-launch-flag__note { font-size: 11px; letter-spacing: 0.04em; }

    /* Shorter hero, so the search panel and the list/map toggle are reachable on the first
       screen rather than a scroll away. */
    .myProjectSlider .heroImage {
        height: 400px;
        min-height: 400px;
    }
    .myProjectSlider .imageOnImage { padding: 12px !important; }
    .myProjectSlider .imageOnImage .paraTitle { font-size: 1.4rem !important; }
    .myProjectSlider .imageOnImage .pageinfo {
        -webkit-line-clamp: 2;
        margin-bottom: 8px !important;
        font-size: 0.85rem !important;
    }
    .myProjectSlider .imageOnImage .priceAndProjects { margin-top: 9px !important; }
    .myProjectSlider .imageOnImage .downloadContainer { margin-top: 10px !important; }
    .myProjectSlider .imageOnImage .downloaddboucher { padding: 10px 12px !important; }

    /* Homepage rhythm: five 80px spacers, one of 110px and one of 40px, all inline so no
       stylesheet could reach them without matching the attribute. */

    /* The footer logo file is a 500x500 canvas, but the wordmark inside it is only
       450x149 -- 171px of transparency above it and 180px below. object-fit: contain
       therefore fits the empty square, not the letters: in the old 210x110 box the
       wordmark came out 99x33. Give the wrapper the wordmark's own shape, oversize the
       image so the wordmark spans the full width, and clip the empty bands away.
       Positioned rather than flex-centred: the wrapper's own flex centring leaves an
       overflowing child at the top, which showed 80px of pure transparency. */
    footer .footer-logo-col .footer-logo-img-wrapper {
        /* 240 of ink plus 4px of air each side, so the outer letters do not touch */
        width: 248px !important;
        height: 90px !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden;
        position: relative;
    }
    /* The logo links home now. On a phone the image is positioned rather than laid out, so
       an inline anchor around it would collapse to nothing -- give the anchor the wrapper's
       box instead and let the image keep its offsets, which now resolve against an
       identical rectangle. */
    footer .footer-logo-col .footer-logo-img-wrapper .footer-logo-link {
        position: absolute;
        inset: 0;
        display: block;
    }

    footer .footer-logo-col .footer-logo-img-wrapper img {
        position: absolute;
        left: 50%;
        top: 50%;
        /* 240 / (450/500) = 267: the square scaled until its wordmark is 240px wide */
        width: 267px !important;
        height: 267px !important;
        max-width: none !important;
        /* an earlier rule in this sheet caps the logo at 90px, which would contain the
           square at 90x90 and leave the wordmark smaller than it started */
        max-height: none !important;
        /* the ink sits at 49% of the square's height, not 50% */
        transform: translate(-50%, -49%);
        object-fit: contain !important;
    }
}

/* Magnific draws a grey placeholder behind the image with `.mfp-figure:after`, anchored at
   top:40px/bottom:40px to match its own default .mfp-img padding. This sheet changes that
   padding, so the placeholder no longer lines up and a grey band showed above and below the
   photograph -- which reads as a second, duplicated image behind it. The backdrop is nearly
   opaque now, so the placeholder has nothing left to do. */
.mfp-figure::after { display: none !important; }

@media (max-width: 767.98px) {
    /* home.css gives this 5rem on every side -- 70px of empty column above and below the
       services list, and the pair of them is most of the 154px band under it. */
    .rightSidefService { padding: 22px 16px !important; }

    /* the two spacers written without a space after the colon */

    /* section headings on the homepage carry desktop-sized breathing room */
    .blogsContainer { padding-top: 10px !important; }
    .titleAndMore { margin-top: 0 !important; }
}

/* ---------------------------------------------------------------------------------------
   The pre-footer on a phone.

   Four columns of eight project links, stacked, came to 1336px on a 375x812 screen --
   a screen and a half of nothing but links, and 17% of the whole homepage. Each column
   becomes a row that opens on tap; the links stay in the markup and the Show More button
   keeps its place directly after its own list.
   --------------------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .pre-footer {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    /* The row carries Bootstrap's -10.5px gutter margin, which cancels the container's
       padding; zeroing the column's padding on top of that left every row flush against
       the screen edge. Inset the container by 14px instead, the same as .main-footer, so
       the pre-footer and the footer line up. */
    .pre-footer > .container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    .pre-footer > .container > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .pre-footer-col {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 0 !important;
        border-bottom: 1px solid #ececec;
    }

    .pre-footer-col .pre-footer-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 48px;
        margin: 0 !important;
        font-size: 1rem !important;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .pre-footer-col .pre-footer-title::after {
        content: '';
        flex: 0 0 auto;
        width: 9px;
        height: 9px;
        margin-right: 6px;
        border-right: 2px solid #111;
        border-bottom: 2px solid #111;
        transform: translateY(-3px) rotate(45deg);
        transition: transform .2s ease;
    }
    .pre-footer-col.is-open .pre-footer-title::after {
        transform: translateY(2px) rotate(-135deg);
    }

    .pre-footer-col .pre-footer-list,
    .pre-footer-col > .mt-3 { display: none; }
    .pre-footer-col.is-open .pre-footer-list { display: block; }
    .pre-footer-col.is-open > .mt-3 {
        display: block;
        margin-top: 0 !important;
        padding-bottom: 14px;
    }

    .pre-footer-col .pre-footer-list li { margin-bottom: 0 !important; }
    .pre-footer-col .pre-footer-list li a {
        display: block;
        padding: 9px 2px;
        font-size: 14px;
    }
}

/* ---------------------------------------------------------------------------------------
   Homepage dead bands, round two.

   After the inline spacers were shrunk, 14 gaps of 40px or more still ran to 1032px on a
   375px screen -- 15% of the page. The remainder is section padding, not spacers, so each
   rule below names the container a measurement pointed at. None of it is page-scoped: every one of these
   class names lives in allcommunity.css, which the state, community, developer and
   service pages all load, and the same spacing was wanted on all of them.
   --------------------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    /* spacer variants the earlier attribute selectors missed: a space after the colon, and
       a 30px size that never appeared in the first sweep */

    /* Featured projects: 42px is reserved under the slides for a pagination row that also
       carries mt-4 */
    .featuredSwiper { padding-bottom: 12px !important; }
    .featuredSwiper .swiper-pagination.mt-4 { margin-top: 8px !important; }

    /* Your Property Goals */
    .propertyGoalsContainer {
        padding-top: 10px !important;
        padding-bottom: 6px !important;
    }

    /* Services: 56px of padding under the list, then 14 + 22 above the column beside it */
    .rightsideofServices { padding-bottom: 16px !important; }
    .rightSidefService {
        padding: 16px !important;
        margin-top: 4px !important;
    }

    /* Explore Further in Our Blogs */
    .Explorefurther {
        margin-top: 6px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    /* About us */
    .aboutUsContainer { padding-top: 10px !important; }

    /* Developer cards carry 36px top and bottom, and another 36px spacer inside each one */
    .developer-container.developer-card {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    /* Submit an Inquiry: an empty div with margin-top 56px sits between the terms line and
       the Submit button */
    .submitAQuery .col-md-6 { padding-top: 10px !important; }
    .submitAQuery form.query-input > div:empty { margin-top: 10px !important; }
}

/* Round three: boxes taller than what is in them. */
@media (max-width: 767.98px) {
    .Explorefurther {
        justify-content: flex-start !important;
        gap: 6px;
    }

    /* padding: 4rem on a 375px screen is 64px on every side of the services panel */
    .rightsideofServices { padding: 20px !important; }

    .aboutUsContainer {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    /* the state tabs sit under an inline margin-top: 30px */
    .container[style*="margin-top: 30px"] { margin-top: 8px !important; }

    .submitAQuery .col-md-6 {
        padding-top: 10px !important;
        padding-bottom: 8px !important;
    }
}

/* ---------------------------------------------------------------------------------------
   Decorative spacers, site-wide.

   The theme separates its sections with empty divs carrying an inline pixel height, and
   with .height-N helper classes. On a phone that is most of what makes these pages long:
   measured at 375px, the state page carried 2509px of dead band, the community page 2784px,
   the developer directory 2395px and a developer's own page 2284px -- nearly all of it
   these spacers.

   `:empty` is not optional here. Divs carrying the same inline heights but holding real
   content are functional: the top bar is `height: 36px`, a "View More" button sits in a
   `height: 40px` wrapper, the reCAPTCHA badge and the footer logo box are `height: 60px`,
   and the swiper arrows are `height: 30px`. Position-fixed overlays are excluded for the
   same reason -- two of them are full-screen loading masks.
   --------------------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    div:empty[style*="height:20px"]:not([style*="fixed"]),
    div:empty[style*="height: 20px"]:not([style*="fixed"]) { height: 10px !important; }
    div:empty[style*="height:30px"]:not([style*="fixed"]),
    div:empty[style*="height: 30px"]:not([style*="fixed"]) { height: 12px !important; }
    div:empty[style*="height:36px"]:not([style*="fixed"]),
    div:empty[style*="height: 36px"]:not([style*="fixed"]) { height: 14px !important; }
    div:empty[style*="height:40px"]:not([style*="fixed"]),
    div:empty[style*="height: 40px"]:not([style*="fixed"]) { height: 16px !important; }
    div:empty[style*="height:50px"]:not([style*="fixed"]),
    div:empty[style*="height: 50px"]:not([style*="fixed"]) { height: 16px !important; }
    div:empty[style*="height:60px"]:not([style*="fixed"]),
    div:empty[style*="height: 60px"]:not([style*="fixed"]) { height: 18px !important; }
    div:empty[style*="height:70px"]:not([style*="fixed"]),
    div:empty[style*="height: 70px"]:not([style*="fixed"]) { height: 20px !important; }
    div:empty[style*="height:80px"]:not([style*="fixed"]),
    div:empty[style*="height: 80px"]:not([style*="fixed"]) { height: 22px !important; }
    div:empty[style*="height:100px"]:not([style*="fixed"]),
    div:empty[style*="height: 100px"]:not([style*="fixed"]) { height: 24px !important; }
    div:empty[style*="height:110px"]:not([style*="fixed"]),
    div:empty[style*="height: 110px"]:not([style*="fixed"]) { height: 26px !important; }
    div:empty[style*="height:120px"]:not([style*="fixed"]),
    div:empty[style*="height: 120px"]:not([style*="fixed"]) { height: 28px !important; }
    .height-20 { height: 10px !important; }
    .height-30 { height: 12px !important; }
    .height-40 { height: 16px !important; }
    .height-60 { height: 18px !important; }
    .height-80 { height: 24px !important; }
    .height-110 { height: 26px !important; }

    /* the smallest text on the site; 10.5px in a project card's result line */
    .cardUpperResult { font-size: 12px !important; }
}

/* Round four: spacers that carry a class name, and the developer card's pinned height. */
@media (max-width: 767.98px) {
    /* Empty divs again, but named rather than styled inline: .heightSubmitInquery sits
       above the enquiry form on the developer pages, .heightOfGallery and .giveHeight
       between sections on the home, project and rent-and-sale pages. */
    .heightSubmitInquery { height: 22px !important; }
    .heightOfGallery { height: 22px !important; }
    .giveHeight { height: 20px !important; }

    /* style.css pins .developer-container at exactly 214px, min and max, around a 70px
       logo, a spacer and one line of text -- about 130px of content. That is 84px of air
       in every card, and the directory shows two dozen of them. Letting the box size to
       its contents also stops a long developer name being clipped by the max-height. */
    .developer-container {
        /* 214px held about 130px of content. 148 is two lines of name, which is what the
           clamp allows, so every card in the row is the same height. */
        min-height: 148px !important;
        max-height: none !important;
    }
}

/* ---------------------------------------------------------------------------------------
   "Explore Further in Our Blogs".

   The card holds a heading and one link -- 44px of text -- inside a box pinned at 200px,
   so three quarters of it is empty. home.css states that height with !important and loads
   after this sheet, so an equally specific rule here loses on order; the class is repeated
   to outweigh it. The breakpoint matches home.css's own 992px so tablets get it too.
   --------------------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .Explorefurther.Explorefurther {
        height: auto !important;
        min-height: 0 !important;
    }
}

/* ---------------------------------------------------------------------------------------
   "Your Property Goals" -- the stepper card on the homepage.

   Four things made it feel unfinished on a phone:

   - .cardformContainer is pinned min-height AND max-height 450px. Step one needs 328px, so
     the card ended in an empty strip; a longer step would be cut off instead.
   - .btn-Container is a 144px box with its own scrollbar, holding ten options at 42px. A
     scroller inside a scrolling page is awkward to use and hid most of the choices.
   - #nextprevious is absolutely positioned at the card's bottom-right, so on a short step
     the buttons floated away from the content they belong to.
   - The field labels are gray-shade-7 on a light card, which reads as disabled.
   --------------------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .cardformContainer {
        min-height: 0 !important;
        max-height: none !important;
        padding: 18px 14px !important;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12) !important;
    }

    .cardformContainer .formTitle {
        margin-bottom: 4px;
        font-size: 1.1rem;
    }

    .cardformContainer .labelForInput {
        margin: 14px 0 8px !important;
        color: #3c3c3c !important;
        font-size: 0.875rem !important;
        font-weight: 500 !important;
    }

    /* let every choice be visible, and line the two columns up with each other */
    .cardformContainer .btn-Container,
    .cardformContainer .scrollable-btns,
    .cardformContainer .tab .row[style*="overflow-y"] {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .cardformContainer .btn-Container {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px !important;
        padding: 10px !important;
    }

    .cardformContainer .btn-Container > * {
        width: 100% !important;
        margin: 0 !important;
    }

    .cardformContainer .ImageAndWords {
        width: 100% !important;
        justify-content: center;
        padding: 0.55rem 0.5rem !important;
    }

    .cardformContainer .tagTitle {
        margin-left: 0.4rem;
        font-size: 0.875rem;
    }

    /* the step buttons belong under the step, at a size a thumb can hit */
    #nextprevious {
        position: static !important;
        right: auto !important;
        bottom: auto !important;
        margin-top: 18px;
    }

    #nextprevious > div {
        float: none !important;
        display: flex;
        gap: 10px;
    }

    #nextprevious .btn {
        float: none !important;
        flex: 1 1 0;
        margin: 0 !important;
        min-height: 46px;
        border-radius: 10px;
        font-weight: 600;
    }
}

/* ---------------------------------------------------------------------------------------
   The footer's legal line.

   The reCAPTCHA attribution sat in a block under the copyright, so the foot of every page
   ended in two lines where one does. They share a row now: attribution left, copyright
   right, wrapping to two centred lines only when there is genuinely no room.
   --------------------------------------------------------------------------------------- */
.footer-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 18px;
}

.footer-legal .recaptcha-terms { margin: 0; }

/* style.css carries a bare `span { color: var(--black-font-color) }`, so wrapping the
   copyright in a span handed it dark text on the dark footer -- as a loose text node it had
   simply inherited white from .text-white. An element selector beats inheritance, so the
   colour has to be stated. */
.footer-legal__copy {
    color: #ffffff;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .footer-legal {
        justify-content: center;
        text-align: center;
    }

    .footer-legal__copy { white-space: normal; }
}

/* ---------------------------------------------------------------------------------------
   Community cards with no photograph.

   143 of the 195 communities in the rail have no picture. The card used to render
   `asset('')` -- the site root -- so the browser fetched the homepage HTML as an image and
   drew a broken box, once per card.

   The stand-in is drawn here rather than served as a file: /public/assets/img is kept out
   of git on purpose, so a file put there never reaches the server. The element carries a
   transparent pixel and this paints it, which costs no request and cannot 404. The same
   class is applied by an onerror handler when a record points at a file that has gone.
   --------------------------------------------------------------------------------------- */
.dabiImage--placeholder {
    /* The card prints its name in white over the picture. A pale tile made that name
       invisible, so the stand-in is a mid tone and the rail stays readable throughout. */
    background-color: #5f646c;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='%238c929b'%3E%3Crect x='18' y='54' width='34' height='48' rx='3'/%3E%3Crect x='62' y='32' width='40' height='70' rx='3'/%3E%3Crect x='27' y='64' width='7' height='7' rx='1'/%3E%3Crect x='38' y='64' width='7' height='7' rx='1'/%3E%3Crect x='27' y='78' width='7' height='7' rx='1'/%3E%3Crect x='38' y='78' width='7' height='7' rx='1'/%3E%3Crect x='71' y='44' width='7' height='7' rx='1'/%3E%3Crect x='85' y='44' width='7' height='7' rx='1'/%3E%3Crect x='71' y='60' width='7' height='7' rx='1'/%3E%3Crect x='85' y='60' width='7' height='7' rx='1'/%3E%3Crect x='71' y='76' width='7' height='7' rx='1'/%3E%3Crect x='85' y='76' width='7' height='7' rx='1'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center 42%;
    background-size: 44%;
}

/* ---------------------------------------------------------------------------------------
   The country picker beside a mobile number.

   select2 sizes itself from the original <select>, which has no width of its own inside a
   flex row -- so the picker collapsed. Measured: 29px wide and 18px tall against a 51px
   input on the service pages, and 52px against a 64px input on list-property. Either way
   the flag was clipped and the two boxes did not line up.

   A fixed width for the picker, and stretch so both take the row's height whatever padding
   the input happens to carry.
   --------------------------------------------------------------------------------------- */
.country-select-wrapper {
    align-items: stretch !important;
}

.country-select-wrapper > .country-dropdown-container {
    flex: 0 0 72px;
    display: flex;
}

.country-select-wrapper .select2-container {
    width: 72px !important;
    height: auto !important;
    display: flex;
}

/* The bordered box select2 draws was 59x46 inside a 72x64 picker beside a 64px input, so
   it read as a short, narrow box floating next to the field. It fills the picker now and
   takes the same corner radius as the input beside it. */
.country-select-wrapper .select2-container .select2-selection--single {
    display: flex;
    align-items: center;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 8px !important;
}

.country-select-wrapper .select2-container .select2-selection__rendered {
    line-height: 1.2 !important;
    padding-left: 8px;
}

.country-select-wrapper .select2-container .select2-selection__arrow {
    top: 50% !important;
    transform: translateY(-50%);
}

/* the bare <select>, on the forms select2 has not been applied to */
.country-select-wrapper > .country-dropdown-container > select {
    width: 72px;
    height: auto;
    min-height: 46px;
}

/* ---------------------------------------------------------------------------------------
   The same decorative spacers, on a desktop.

   They were only shrunk below 768px, so a wide screen still carried the full bands: the
   Dubai state page had 160px between the community rail and what follows and 128px further
   down, all of it empty. These are gentler cuts than the phone's -- a desktop can afford
   air, just not this much. The 36px spacer inside a developer card is left alone: that card
   is pinned to 214px above 768px and moving its contents would unbalance it.
   --------------------------------------------------------------------------------------- */
@media (min-width: 768px) {
    div:empty[style*="height:110px"]:not([style*="fixed"]),
    div:empty[style*="height: 110px"]:not([style*="fixed"]) { height: 40px !important; }
    div:empty[style*="height:100px"]:not([style*="fixed"]),
    div:empty[style*="height: 100px"]:not([style*="fixed"]) { height: 36px !important; }
    div:empty[style*="height:80px"]:not([style*="fixed"]),
    div:empty[style*="height: 80px"]:not([style*="fixed"]) { height: 36px !important; }
    div:empty[style*="height:70px"]:not([style*="fixed"]),
    div:empty[style*="height: 70px"]:not([style*="fixed"]) { height: 30px !important; }
    div:empty[style*="height:60px"]:not([style*="fixed"]),
    div:empty[style*="height: 60px"]:not([style*="fixed"]) { height: 28px !important; }
    div:empty[style*="height:50px"]:not([style*="fixed"]),
    div:empty[style*="height: 50px"]:not([style*="fixed"]) { height: 24px !important; }
    div:empty[style*="height:40px"]:not([style*="fixed"]),
    div:empty[style*="height: 40px"]:not([style*="fixed"]) { height: 20px !important; }
    div:empty[style*="height:30px"]:not([style*="fixed"]),
    div:empty[style*="height: 30px"]:not([style*="fixed"]) { height: 14px !important; }
    div:empty[style*="height:20px"]:not([style*="fixed"]),
    div:empty[style*="height: 20px"]:not([style*="fixed"]) { height: 10px !important; }
    .height-20 { height: 10px !important; }
    .height-30 { height: 14px !important; }
    .height-40 { height: 20px !important; }
    .height-60 { height: 28px !important; }
    .height-80 { height: 36px !important; }
    .height-110 { height: 40px !important; }
}

/* ---------------------------------------------------------------------------------------
   Community cards: the hovered one, and names that run to the edge.

   The card lifts and scales to 1.14 on hover, so it reaches over its neighbours -- but it
   had no stacking order, so the card after it painted on top and that card's name appeared
   inside the enlarged one. Hence "Dubai Harbour" with a stray "Creek..." beside it.

   The name is absolutely positioned with 18px of padding on the left and none on the right,
   so a long name ran to the very edge of the card. Two lines is the most it takes now.
   --------------------------------------------------------------------------------------- */
.swiper-slide-hover:hover {
    position: relative;
    z-index: 3;
}

.comunityName {
    padding-right: 18px !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------------------------------------------------------------------------------------
   The dialling code and the number are one field.

   select2 draws its own box with its own border -- rgb(170,170,170) against the form's
   rgb(206,212,218) -- so the picker read as a darker, separate control sitting 10px away
   from the number. They are joined now, share the form's border, and only the outer
   corners are rounded.
   --------------------------------------------------------------------------------------- */
.country-select-wrapper {
    gap: 0 !important;
}

/*
 * select2 wraps its box in a <span class="selection"> -- that span, not the box, is the
 * flex item of .select2-container. Stretching the box therefore did nothing: the span
 * stayed at its content width of 58px inside the 72px picker and left a 14px strip of
 * nothing between the flag and the number. Both have to fill.
 */
.country-select-wrapper .select2-container > .selection {
    flex: 1 1 auto;
    display: flex;
    min-width: 0;
}

.country-select-wrapper .select2-container .select2-selection--single {
    border: 1px solid #ced4da !important;
    background: #fff;
    flex: 1 1 auto;
}

[dir="ltr"] .country-select-wrapper .select2-container .select2-selection--single,
.country-select-wrapper .select2-container .select2-selection--single {
    border-right: 0 !important;
    border-radius: 8px 0 0 8px !important;
}

[dir="ltr"] .country-select-wrapper > input[name="number"],
.country-select-wrapper > input[name="number"] {
    border-radius: 0 8px 8px 0 !important;
}

[dir="rtl"] .country-select-wrapper .select2-container .select2-selection--single {
    border-right: 1px solid #ced4da !important;
    border-left: 0 !important;
    border-radius: 0 8px 8px 0 !important;
}

[dir="rtl"] .country-select-wrapper > input[name="number"] {
    border-radius: 8px 0 0 8px !important;
}

/* ---------------------------------------------------------------------------------------
   style.css justifies every paragraph, and a community card's name is a <p>. On two lines
   that stretched the words apart -- "Jumeirah    Village / Circle (JVC)". Phones were
   already covered; this is the same correction for everything above 768px.
   --------------------------------------------------------------------------------------- */
.comunityName {
    text-align: start !important;
}

/* ---------------------------------------------------------------------------------------
   Clearing the fixed header.

   `main` was pushed down by a flat 130px (155px below 1200px), but the header is not a
   flat height: it is the topbar, the menu, and -- on every page that fills the breadcrumbs
   section -- a 45px breadcrumb bar, all inside the same fixed #sidebar. Measured:

                       header      old padding
     >= 1200px, crumbs   158px        130px     -> 28px of the page hidden behind it
     770-1199, crumbs    175px        155px     -> 20px hidden
     >= 1200px, none     113px        130px     -> 17px of dead air
     770-1199, none      130px        155px     -> 25px of dead air

   The hidden band is why "Home" sat across the <h1> on /list-property: the heading is the
   first thing in that page, with no spacer to absorb the shortfall. Pages that open with a
   spacer hid the same fault.

   Below 770px the header is in the flow (style.css, max-width: 769px) and the offset is 0,
   so nothing here applies there. Blog detail never gets .header-offset -- its #sidebar is
   not fixed either.

   Re-measured 2026-09-22, after the logo was given a box (header.css) -- 153/108 above
   1200px, unchanged below it. These are now only what a visitor without JavaScript gets:
   `--ua-header-h` is read off #sidebar by a script in layouts/app.blade.php once the page
   has loaded, and a ResizeObserver keeps it true, so a number typed here can no longer
   quietly stop matching the header.

   The script waits for `load` on purpose. Before the logo is decoded the menu bar can be
   short, and a measurement taken then puts the header over the top of the page -- the
   opposite and worse fault. Until then these numbers hold.
   --------------------------------------------------------------------------------------- */
@media (min-width: 769.02px) and (max-width: 1199.98px) {
    main.header-offset { padding-top: var(--ua-header-h, 130px) !important; }
    main.header-offset.header-offset--crumbs { padding-top: var(--ua-header-h, 175px) !important; }
}

@media (min-width: 1200px) {
    main.header-offset { padding-top: var(--ua-header-h, 108px) !important; }
    main.header-offset.header-offset--crumbs { padding-top: var(--ua-header-h, 153px) !important; }
}

/* ---------------------------------------------------- the tailored PDF, on a phone

   `.fixed-button` -- the "PDF Brochure" pill -- is hidden below 768px, and the bar at the
   foot of the screen now opens the developer's own brochure, which is what somebody
   tapping "Brochure" is asking for. That left the tailored builder with no way in on a
   phone, so it gets a chip in the corner of the hero: findable, and visibly the smaller
   of the two offers. */

@media (max-width: 767.98px) {
    .hero-pdfchip {
        position: absolute;
        right: 10px;
        bottom: 10px;
        z-index: 3;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 12px;
        border: 0;
        border-radius: 999px;
        background: rgba(17, 17, 17, .72);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        color: #fff;
        font-size: .75rem;
        font-weight: 600;
        line-height: 1;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
    }

    .hero-pdfchip i { font-size: .8125rem; }
    .hero-pdfchip:active { background: rgba(17, 17, 17, .9); }
}

@media (min-width: 768px) {
    .hero-pdfchip { display: none; }
}

/* ------------------------------------------------ floor plans, in the order they are read

   On a phone the three columns came out as: choose a unit type, then the explanation, then
   the drawing. So the answer to "which one did I just tap?" was a screen and a half below
   the thing tapped, with a paragraph of prose in between.

   The drawing goes directly under the chooser, where a tap can be checked without scrolling,
   and the explanation follows it. Desktop is untouched -- the three sit side by side there
   and the question does not arise. */

@media (max-width: 767.98px) {
    /* Bootstrap's order-* utilities carry !important, so these have to as well. */
    .floorSideImg { order: 1 !important; }
    .floorImgcontainer { order: 2 !important; }
    .DuplexContainer { order: 3 !important; }

    .floorImgcontainer { margin-top: .5rem; }
    .DuplexContainer { margin-top: 1rem; }
}

/* --------------------------------------- "I am looking for", inside one screen

   Eleven options laid out in full come to 417px, and the whole panel to 698px before the
   heading above it -- so the section could not be seen at once on a phone and the Find
   button was always somewhere below the fold. The list scrolls instead, at a height that
   shows five and a half options: enough that it reads as a list with more in it, and short
   enough that the rest of the panel fits. */

@media (max-width: 767.98px) {
    .propertyGoalsContainer .tab {
        max-height: 196px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-right: 4px;

        /* the last row fades rather than being cut, which is what says "there is more" */
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
        mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
    }

    /* A visible track, or a mask alone can read as the list simply ending. */
    .propertyGoalsContainer .tab::-webkit-scrollbar { width: 4px; }

    .propertyGoalsContainer .tab::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, .22);
        border-radius: 999px;
    }

    /* Nothing to fade once the reader has reached the end. */
    .propertyGoalsContainer .tab.is-scrolled-end {
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* A card in a slider is a link, and a slow drag across one starts the browser's own
   link-drag instead of moving the row. */
@media (max-width: 767.98px) {
    .developerswiper .swiper-slide a,
    .developerswiper .swiper-slide img {
        -webkit-user-drag: none;
        user-select: none;
    }
}


/* ------------------------------------ the dialling-code picker, lined up with the field

   Why the selectors are this long.

   select2.min.css is loaded three times AFTER this file, plus its bootstrap-5 theme and a
   couple of dozen inline <style> blocks. Its own rules are
   `.select2-container--default .select2-selection--single` and
   `...--single .select2-selection__arrow` -- the same specificity as the obvious fix and
   later in the cascade, so the obvious fix loses. That is why the picker stayed 50px beside
   a 54px number field, its bottom edge short of the field's, with select2's arrow pinned at
   `top: 1px` and a fixed 26px height so it sat near the top of a box it was not drawn for.

   Naming the picker's own wrapper as well puts these above select2's, and !important settles
   the rest. Not inside a media query: the picker is beside the number at every width. */

.country-select-wrapper .country-dropdown-container {
    align-items: stretch;
}

.country-select-wrapper .country-dropdown-container .select2-container,
.country-select-wrapper .country-dropdown-container .select2-container > .selection,
.country-select-wrapper .country-dropdown-container .select2-container--default .select2-selection--single {
    height: 100% !important;
    min-height: 0 !important;
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
}

.country-select-wrapper .country-dropdown-container .select2-container--default .select2-selection--single .select2-selection__rendered {
    display: flex !important;
    align-items: center;
    height: 100%;
    line-height: 1.2 !important;
    /* room for the arrow, so a long code never runs under it */
    padding-right: 20px;
}

.country-select-wrapper .country-dropdown-container .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0 !important;
    bottom: 0 !important;
    right: 4px !important;
    height: auto !important;
    display: flex !important;
    align-items: center;
    transform: none !important;
}