/* ==========================================================================
   Experion Saatori - Landing Page Overrides
   --------------------------------------------------------------------------
   Everything that used to sit in the inline <style> blocks of index.html now
   lives here. Load this LAST so it wins over style.css / responsive.css.

   Contents:
     01. Header / hero
     02. Header section menu (moved into the navbar)
     03. Enquiry form helpers
     04. Phone input (intl-tel-input)
     05. OTP step
     06. Sticky footer form
     07. Thank-you page
     08. Mobile refinements
     09. Fixed side CTAs (Brochure + Enquire Now)
     09b. Intrinsic image sizing
     10. Amenity zone images
     11. Floor plan cards
     12. Section reveal
     13. Location map link
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. Header / hero
   --------------------------------------------------------------------------
   The navbar is pinned to the top on every breakpoint. style.css had it as
   `position: absolute` inside a 90px-tall .header_wrap, so it scrolled away
   with the page; switching to `fixed` keeps it visible while .header_wrap
   still reserves the same 90px of space for it.
   -------------------------------------------------------------------------- */
.header_wrap {
    height: 90px;
}

/* Scoped as `.header_wrap .navbar` rather than plain `.navbar` so it always
   outranks style.css's `position: absolute`, whatever the load order.

   `transform: none` is the important part. The theme ships .nav-scroll (added
   by custom.js past 100px) as a slide-down bar: `top: -100px` plus
   `transform: translateY(100px)`, which nets to zero. Pinning `top: 0` while
   leaving that transform in place rendered the header 100px BELOW the top of
   the viewport, floating over the content. responsive.css already zeroes the
   transform below 992px - which is why mobile looked right and desktop did
   not. Zero it here for every width. */
.header_wrap .navbar,
.header_wrap .navbar.nav-scroll {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 999;
    transform: none;
    -webkit-transform: none;
    /* Opaque, so page content never shows through the bar while scrolling */
    background: #fff;
}

.header_wrap .navbar {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

/* custom.js adds .nav-scroll past 100px - just a deeper shadow */
.header_wrap .navbar.nav-scroll {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .1);
}

/* --------------------------------------------------------------------------
   Hero banner
   --------------------------------------------------------------------------
   style.css forces .header to min-height:100vh, which letterboxed the image
   on short/wide windows. The banner is a plain responsive image instead: it
   keeps its own aspect ratio (16:9 desktop, 2:3 mobile) and the header is
   exactly as tall as the picture.
   -------------------------------------------------------------------------- */
.header {
    min-height: 0;
    position: relative;
    overflow: hidden;
    /* Clear the fixed navbar, which is out of the flow */
    margin-top: 0;
}

.header picture {
    display: block;
    line-height: 0;
}

.header .banner {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* Desktop shows the artwork uncropped - it is a designed banner, so cropping
   it would cut off the composition. Only the tall 2:3 mobile crop is capped,
   because at tablet widths it would otherwise run past the viewport. */
@media (max-width: 992px) {
    .header .banner {
        max-height: calc(100vh - 90px);
        max-height: calc(100dvh - 90px);
        object-fit: cover;
        object-position: center;
    }
}

/* Anchor targets must clear the fixed bar when jumped to directly */
[id="overview"],
[id="walkthrough"],
[id="floor-plan"],
[id="gallery"],
[id="amenities"],
[id="location"] {
    scroll-margin-top: 95px;
}

/* --------------------------------------------------------------------------
   02. Header section menu
   --------------------------------------------------------------------------
   The in-page menu (Overview ... Downloads) used to be a standalone sticky
   bar below the hero. It now lives inside the navbar as plain text links,
   so the old sticky positioning, top margin and pill styling are all off.
   -------------------------------------------------------------------------- */
.navbar .menu_click {
    margin-top: 0;
    padding: 0;
    position: static;
    background: none;
    box-shadow: none;
    align-items: center;
    flex-wrap: wrap;
}

.navbar .menu_click li {
    list-style: none;
}

/* Plain, wide-tracked text links - no pill, no background */
.navbar .menu_click li a.nav-link {
    display: inline-block;
    padding: 8px 13px;
    background: none;
    color: #6f6f6f;
    font-size: 19px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    line-height: 1.2;
    transition: color .3s ease;
}

.navbar .menu_click li a.nav-link:hover,
.navbar .menu_click li a.nav-link.active {
    background: none;
    color: #b72228;
}

/* --------------------------------------------------------------------------
   Desktop nav must fit on one line.
   .menu ul is display:flex with no wrap in custom.css, so the links could
   overflow the container. Lay the row out explicitly and let them absorb
   the squeeze rather than spilling past the edge.
   -------------------------------------------------------------------------- */
@media (min-width: 993px) {
    .navbar .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 10px;
    }

    .navbar .logo-wrapper {
        flex: 0 0 auto;
        margin-right: 0;
    }

    .navbar .menu {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex: 1 1 auto;
        min-width: 0;
    }

    .navbar .menu_click {
        justify-content: flex-end;
        flex-wrap: nowrap;
    }

    .navbar .menu_click li {
        flex: 0 1 auto;
        min-width: 0;
    }

    .navbar .menu_click li a.nav-link {
        white-space: nowrap;
    }
}

/* Between 993px and 1400px there is not enough room for the full tracking,
   so tighten the links rather than let them spill past the edge. */
@media (min-width: 993px) and (max-width: 1399px) {
    .navbar .menu_click li a.nav-link {
        padding: 8px 8px;
        font-size: 16px;
        letter-spacing: .8px;
    }
}

/* Matches responsive.css's own breakpoint (max-width: 992px) so the drawer
   rules never disagree in the 1px gap between the two. */
@media (max-width: 992px) {
    /* The bar itself stays pinned and opaque on mobile too */
    .navbar {
        height: 90px;
        background: #fff;
    }

    /* Drawer sits directly under the fixed bar and scrolls on its own.
       Capped at 85vw so it never fills a 320px screen edge to edge. */
    .navbar .menu {
        width: min(300px, 85vw);
        top: 90px;
        height: calc(100vh - 90px);
        height: calc(100dvh - 90px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .navbar .menu_click {
        display: block;
        padding: 8px 0 24px;
    }

    .navbar .menu_click li {
        border-bottom: 1px solid #f0ece4;
    }

    /* Full-width rows. Keep the theme's 28px gutter - without it the labels
       sit flush against the edge of the drawer. */
    .navbar .menu_click li a.nav-link {
        display: block;
        padding: 14px 28px;
        letter-spacing: 1px;
        text-align: left;
    }

}

/* --------------------------------------------------------------------------
   03. Enquiry form helpers
   -------------------------------------------------------------------------- */

/* Honeypot - hidden from people, visible to naive bots */
.hp_field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
}

/* Inline status message under the submit button */
.form_status {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.4;
}

.form_status.is-error {
    color: #b72228;
}

.form_status.is-success {
    color: #2e7d32;
}

/* Field marked invalid by the client-side validator */
.enquire_form .is-invalid {
    border-bottom: 2px solid #b72228 !important;
}

.text-underline {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   04. Phone input (intl-tel-input v25)
   --------------------------------------------------------------------------
   The library wraps each .js-phone input in a .iti span that defaults to
   inline-block, which leaves the field narrower than Name and Email, so the
   wrapper and the input are both forced to fill the row.

   v25 draws the dropdown as .iti__dropdown-content containing a
   .iti__search-input and the .iti__country-list, and it sets the input's
   left padding itself when separateDialCode is on - so nothing here should
   hardcode that padding.
   -------------------------------------------------------------------------- */
.enquire_form .iti,
.sticky_form .iti {
    display: block !important;
    width: 100% !important;
}

.enquire_form .iti > input[type="tel"],
.sticky_form .iti > input[type="tel"] {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
}

/* The dropdown is appended to <body>, so it must clear the popup (z-index 999) */
.iti--container {
    z-index: 1300;
}

/* --- Dropdown panel ------------------------------------------------------ */
.iti__dropdown-content {
    border: 1px solid #e0dcd3;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

/* --- Search box ---------------------------------------------------------- */
.iti__search-input {
    padding-top: 11px;
    padding-bottom: 11px;
    border-bottom: 1px solid #ece7dd !important;
    font-size: 15px;
}

.iti__search-input:focus {
    outline: none;
}

/* --- Country rows -------------------------------------------------------- */
.iti__country-list {
    max-height: 220px;
    text-align: left;
}

.iti__country {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}

.iti__country-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.iti__dial-code {
    flex: 0 0 auto;
    margin-left: auto;
    color: #777;
}

.iti__selected-dial-code {
    font-size: 14px;
}



/* --------------------------------------------------------------------------
   05. OTP step
   --------------------------------------------------------------------------
   Shown inside the enquiry popup after a lead form validates, in place of
   the form. main.js toggles the [hidden] attribute on #otpStep.
   -------------------------------------------------------------------------- */
.otp_step[hidden] {
    display: none;
}

.otp_step {
    padding: 4px 0 2px;
    text-align: center;
}

/* Shield icon above the heading, drawn in CSS so there is no extra asset */
.otp_step .enquire_title {
    margin-bottom: 6px;
}

.otp_step .enquire_title::before {
    content: "\f3ed";           /* fa-shield-halved */
    display: block;
    margin: 0 auto 12px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #f3ede3;
    color: #aa8453;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 22px;
    line-height: 54px;
}

.otp_intro {
    margin: 0 auto 18px;
    max-width: 340px;
    color: #6c6c6c;
    font-size: 15px;
    line-height: 1.6;
}

.otp_intro strong {
    display: inline-block;
    color: #222;
    font-weight: 600;
    white-space: nowrap;
}

/* Demo-mode banner - disappears on its own once a real gateway is wired up */
.otp_demo {
    margin: 0 0 18px;
    padding: 10px 12px;
    border: 1px dashed #d9c4a3;
    border-radius: 6px;
    background: #fdf8f1;
    color: #8a6a3f;
    font-size: 13px;
    letter-spacing: .3px;
}

.otp_demo[hidden] {
    display: none;
}

/* --- The four digit boxes ------------------------------------------------ */
.otp_inputs {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-bottom: 6px;
}

.otp_inputs input {
    width: 58px;
    height: 66px;
    padding: 0;
    border: 1.5px solid #ddd6c9;
    border-radius: 10px;
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .04);
    color: #1c1c1c;
    font-family: 'Barlow Condensed', 'Barlow', Arial, sans-serif;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    transition: border-color .2s ease, box-shadow .2s ease, transform .12s ease;
}

.otp_inputs input:hover {
    border-color: #c9bda8;
}

.otp_inputs input:focus {
    border-color: #aa8453;
    box-shadow: 0 0 0 4px rgba(170, 132, 83, .16);
    outline: none;
    transform: translateY(-1px);
}

/* A filled box reads as "done" (class toggled by main.js - :placeholder-shown
   would always match here, since these inputs carry no placeholder) */
.otp_inputs input.is-filled {
    border-color: #aa8453;
    background: #fdfaf5;
}

.otp_error {
    min-height: 22px;
    margin: 8px 0 4px;
    color: #b72228;
    font-size: 13px;
    line-height: 1.4;
}

/* --- Verify button ------------------------------------------------------- */
.otp_step .butn-dark2 {
    min-width: 210px;
    margin-top: 4px;
    padding: 14px 30px;
    border: 0;
    border-radius: 6px;
    background: #aa8453;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .25s ease;
}

.otp_step .butn-dark2:hover:not(:disabled) {
    background: #967144;
}

.otp_step .butn-dark2:disabled {
    opacity: .6;
    cursor: default;
}

/* --- Resend / back links ------------------------------------------------- */
.otp_actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #ece7dd;
}

.otp_link {
    padding: 0 18px;
    border: 0;
    background: none;
    color: #aa8453;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}

.otp_link + .otp_link {
    border-left: 1px solid #e2dbcd;
}

.otp_link:hover:not(:disabled) {
    color: #7d5f36;
}

.otp_link:disabled {
    color: #9a9a9a;
    cursor: default;
    text-decoration: none;
}

@media (max-width: 480px) {
    .otp_step .enquire_title::before {
        width: 46px;
        height: 46px;
        font-size: 19px;
        line-height: 46px;
    }

    .otp_inputs {
        gap: 10px;
    }

    .otp_inputs input {
        width: 50px;
        height: 58px;
        font-size: 26px;
    }

    .otp_step .butn-dark2 {
        width: 100%;
        min-width: 0;
    }

    .otp_link {
        padding: 0 12px;
    }
}
/* --------------------------------------------------------------------------
   06. Sticky footer form
   --------------------------------------------------------------------------
   A single-row lead bar pinned to the bottom of the viewport, always
   visible on desktop. On mobile it collapses to one full-width button.
   -------------------------------------------------------------------------- */
.sticky_form_bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99;
    background: #1c1c1c;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, .18);
    transition: transform .35s ease;
}

.sticky_form_inner {
    padding: 14px 20px;
}

/* --- Toggle tab ----------------------------------------------------------
   Mobile only. On desktop the whole form is visible inline, so the tab has
   nothing to reveal - it just floated over the page (and collided with the
   old call button). The mobile block below turns it back on as the CTA.
   ------------------------------------------------------------------------- */
.sticky_form_toggle {
    display: none;
    position: absolute;
    right: 20px;
    bottom: 100%;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border: 0;
    border-radius: 6px 6px 0 0;
    background: #b72228;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    cursor: pointer;
}

/* --- Form row ------------------------------------------------------------ */
.sticky_form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    max-width: 1400px;
    margin: 0 auto;
}

.sticky_form_field {
    position: relative;
    flex: 1 1 160px;
    min-width: 160px;
}

/* The phone field carries the flag + dial code, so it needs more room */
.sticky_form_field_phone {
    flex: 1 1 230px;
    min-width: 230px;
}

.sticky_form input[type="text"],
.sticky_form input[type="email"],
.sticky_form input[type="tel"] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #3a3a3a;
    border-radius: 4px;
    background: #fff;
    color: #f8f9fa;
    font-size: 14px;
}

.sticky_form input.is-invalid {
    border: 1px solid #ff6b6b !important;
}

.sticky_form .popup_error_mgs {
    margin-top: 2px;
    color: #ff9b9b;
    font-size: 11px;
    line-height: 1.3;
}

/* --- Consent ------------------------------------------------------------- */
.sticky_form_consent {
    flex: 1 1 260px;
    min-width: 220px;
}

.sticky_form_consent label {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 0;
    color: #cfcfcf;
    font-size: 11px;
    line-height: 1.35;
    cursor: pointer;
}

.sticky_form_consent input {
    flex: 0 0 auto;
    margin-top: 2px;
}

.sticky_form_consent a {
    color: #e0b878;
}

/* --- Submit -------------------------------------------------------------- */
.sticky_form_submit {
    flex: 0 0 auto;
}

.sticky_form_submit .butn-dark2 {
    padding: 9px 28px;
    border: 0;
    border-radius: 4px;
    background: #b72228;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.sticky_form_submit .butn-dark2:disabled {
    opacity: .6;
    cursor: default;
}

.sticky_form_submit .form_status {
    color: #cfcfcf;
    font-size: 11px;
}

.sticky_form_submit .form_status.is-error {
    color: #ff9b9b;
}

@media (max-width: 991px) {
    .sticky_form_inner {
        padding: 12px 15px;
    }

    .sticky_form_field,
    .sticky_form_consent,
    .sticky_form_submit {
        flex-basis: 100%;
    }

    .sticky_form_submit .butn-dark2 {
        width: 100%;
    }

    .sticky_form_toggle {
        right: 15px;
    }
}

/* --------------------------------------------------------------------------
   07. Thank-you page
   --------------------------------------------------------------------------
   A single white card, centred on a soft beige page, capped with a gold
   rule. thank-you.php loads only fonts.css + this file, so everything the
   page needs (including the page background) is defined here.

   Sizing strategy: the wrapper owns the viewport height and the card is
   centred with `margin: auto` rather than `align-items: center`. Centring
   via margin still lets the card scroll into view IN FULL when it is taller
   than the screen - `align-items: center` would clip its top instead.
   -------------------------------------------------------------------------- */
.thankyou_page {
    margin: 0;
    background: #f5f2ec;
    color: #4a5a68;
    font-family: 'Barlow', 'Work Sans', Arial, sans-serif;
    /* The card is sized to fit the viewport, so the page itself never scrolls */
    overflow: hidden;
    -webkit-text-size-adjust: 100%;
}

/* border-box everywhere on this page, so a width:100% element never
   overflows its parent by the size of its own padding. Scoped to the
   thank-you body class, so the landing page keeps the theme's box model. */
.thankyou_page *,
.thankyou_page *::before,
.thankyou_page *::after {
    box-sizing: border-box;
}

.thankyou_wrap {
    display: flex;
    box-sizing: border-box;
    /* dvh tracks the collapsing browser chrome on mobile; vh is the fallback */
    height: 100vh;
    height: 100dvh;
    padding: 30px 20px;
    /* Any overflow scrolls inside here, not on the body */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.thankyou_card {
    box-sizing: border-box;
    width: 100%;
    max-width: 560px;
    /* auto on all four sides = centred both ways, but never clipped */
    margin: auto;
    padding: 55px 45px 45px;
    border-top: 7px solid #aa8453;
    background: #fff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .06);
    text-align: center;
}

/* --- Logo ---------------------------------------------------------------- */
.thankyou_logo {
    max-width: 175px;
    margin: 0 auto 30px;
}

.thankyou_logo img {
    display: block;
    width: 100%;
    height: auto;
}

/* --- Heading ------------------------------------------------------------- */
.thankyou_title {
    margin: 0 0 22px;
    color: #1c1c1c;
    font-family: 'Barlow Condensed', 'Barlow', Arial, sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* --- Body copy ----------------------------------------------------------- */
.thankyou_text {
    margin: 0 0 14px;
    font-size: 18px;
    line-height: 1.65;
}

/* The highlighted phrase inside the confirmation sentence */
.thankyou_text strong {
    color: #aa8453;
    font-weight: 600;
}

.thankyou_note {
    margin: 22px 0 0;
    font-size: 14px;
    line-height: 1.6;
    opacity: .85;
}

.thankyou_note a {
    color: #aa8453;
    font-weight: 600;
    text-decoration: none;
}

.thankyou_note a:hover {
    text-decoration: underline;
}

/* --- Button -------------------------------------------------------------- */
.thankyou_button {
    display: inline-block;
    /* Never wider than the card, whatever the padding or letter-spacing */
    max-width: 100%;
    margin-top: 32px;
    padding: 16px 42px;
    background: #b72228;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 2.5px;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .3s ease;
}

.thankyou_button:hover,
.thankyou_button:focus {
    background: #98181d;
    color: #fff;
    text-decoration: none;
}

/* --- Tablet -------------------------------------------------------------- */
@media (max-width: 767px) {
    .thankyou_wrap {
        padding: 26px 18px;
    }

    .thankyou_card {
        padding: 45px 34px 38px;
    }

    .thankyou_title {
        font-size: 36px;
    }

    .thankyou_text {
        font-size: 17px;
    }
}

/* --- Phone --------------------------------------------------------------- */
@media (max-width: 575px) {
    .thankyou_wrap {
        padding: 20px 14px;
    }

    .thankyou_card {
        padding: 36px 22px 32px;
        border-top-width: 5px;
    }

    .thankyou_logo {
        max-width: 145px;
        margin-bottom: 24px;
    }

    .thankyou_title {
        margin-bottom: 18px;
        font-size: 30px;
    }

    .thankyou_text {
        font-size: 16px;
        line-height: 1.6;
    }

    /* The line break in the copy is a desktop nicety - let it wrap naturally */
    .thankyou_text br {
        display: none;
    }

    .thankyou_note {
        margin-top: 18px;
        font-size: 13px;
    }

    .thankyou_button {
        /* Full width, and tall enough to be a comfortable tap target.
           border-box (set above) keeps the padding inside the 100%. */
        display: block;
        width: 100%;
        margin-top: 26px;
        padding: 16px 14px;
        font-size: 14px;
        letter-spacing: 1.6px;
        word-break: break-word;
    }
}

/* --- Small phones (360px and under) -------------------------------------- */
@media (max-width: 380px) {
    .thankyou_card {
        padding: 30px 16px 26px;
    }

    .thankyou_logo {
        max-width: 125px;
        margin-bottom: 20px;
    }

    .thankyou_title {
        font-size: 26px;
        letter-spacing: .5px;
    }

    .thankyou_text {
        font-size: 15px;
    }

    .thankyou_button {
        font-size: 14px;
        letter-spacing: 1.2px;
    }
}

/* --- Short viewports (landscape phones) ----------------------------------
   Height, not width, is the constraint here: tighten the vertical rhythm so
   the whole card still fits between the browser bars.
   ------------------------------------------------------------------------- */
@media (max-height: 620px) and (orientation: landscape) {
    .thankyou_wrap {
        padding: 16px;
    }

    .thankyou_card {
        padding: 26px 30px 24px;
    }

    .thankyou_logo {
        max-width: 120px;
        margin-bottom: 14px;
    }

    .thankyou_title {
        margin-bottom: 12px;
        font-size: 26px;
    }

    .thankyou_text {
        margin-bottom: 8px;
        font-size: 15px;
        line-height: 1.5;
    }

    .thankyou_button {
        margin-top: 16px;
        padding: 12px 30px;
    }
}

/* --------------------------------------------------------------------------
   08. Mobile refinements
   --------------------------------------------------------------------------
   On phones the page drops to a single call-to-action: the sticky bar
   becomes one full-width button that opens the centred popup, and the
   floating call icon is removed so nothing overlaps it.
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {

    /* --- Enquiry popup ----------------------------------------------------
       Centred, with its own scroll so a tall form never runs off-screen.
       ------------------------------------------------------------------- */
    .popup_module .popup_module_in {
        padding: 20px 0;
    }

    .popup_module .popup_container {
        width: 100%;
        max-width: calc(100% - 30px);
        max-height: calc(100vh - 40px);
        max-height: calc(100dvh - 40px);
        margin: auto;
        padding: 26px 20px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* --- Sticky bar is desktop-only ---------------------------------------
       On phones the inline form does not fit, and the full-width CTA that
       used to replace it duplicated the Enquire Now tab in the side rail
       while eating the bottom of every screen - so the whole bar goes.
       ------------------------------------------------------------------- */
    .sticky_form_bar {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   09. Fixed side CTAs (Brochure + Enquire Now)
   --------------------------------------------------------------------------
   The theme rotates the whole rail -90deg and nudges it with a negative
   margin. That only lines up for ONE tab: rotation happens about the box
   centre, so as the rail gets wider (a second tab) its centre moves and the
   tabs drift inward over the page and clip at the edge.

   `writing-mode` makes each tab a genuinely vertical box in normal flow, so
   the rail hugs the right edge exactly, whatever it contains.
   -------------------------------------------------------------------------- */
.fixed_button {
    position: fixed;
    top: 50%;
    right: 0;
    left: auto;
    margin: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    z-index: 99;
}

.fixed_button .portal_button_fixed {
    /* vertical-rl + 180deg = text reads bottom-to-top, like the theme's rotate */
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    width: auto;
    margin: 0;
    padding: 16px 9px;
    border-radius: 6px 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.4px;
    line-height: 1;
    white-space: nowrap;
}

/* Brochure sits above Enquire Now */
.fixed_button .portal_button_fixed.brochure {
    order: 1;
    background: #b72228;
}

.fixed_button .portal_button_fixed.other {
    order: 2;
}

.fixed_button .portal_button_fixed.brochure:hover {
    background: #98181d;
}

@media (max-width: 992px) {
    .fixed_button {
        gap: 4px;
    }

    .fixed_button .portal_button_fixed {
        padding: 13px 7px;
        font-size: 11px;
        letter-spacing: 1px;
    }
}

/* --------------------------------------------------------------------------
   09b. Intrinsic image sizing
   --------------------------------------------------------------------------
   Every image now carries width/height attributes so the browser reserves
   the right space BEFORE a lazy image arrives - without them a lazy <img>
   is zero-height until it loads, every section below sits at the wrong
   offset, and the menu's scroll-to-section lands in the wrong place.

   The attributes fix the aspect ratio, so CSS has to keep the height fluid
   or the pictures would render at their literal pixel height.
   -------------------------------------------------------------------------- */
.header .banner,
.page_wrapper img,
.clients-inside img,
.footer img,
.popup_container img {
    height: auto;
}

/* --------------------------------------------------------------------------
   10. Amenity zone images
   --------------------------------------------------------------------------
   The theme hid the <img> on desktop and painted the same file as a CSS
   background instead, so both copies downloaded on every device. The inline
   background is gone from index.php; this makes the single <img> fill the
   column the way the background used to.
   -------------------------------------------------------------------------- */
.img_left_bg {
    background-image: none !important;
}

.img_left_bg img {
    display: block !important;
    width: 100%;
    /* !important beats the fluid `height: auto` rule above */
    height: 100% !important;
    object-fit: cover;
    object-position: center;
}

.img_left_bg > .img {
    height: 100%;
}

/* --------------------------------------------------------------------------
   11. Floor plan cards
   --------------------------------------------------------------------------
   Each card is an <a> that opens the enquiry popup, so it needs to read as
   clickable rather than as static copy.
   -------------------------------------------------------------------------- */
a.unit_card {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease;
}

a.unit_card:hover,
a.unit_card:focus {
    color: inherit;
    text-decoration: none;
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
}

/* Scoped through .facilties .single-facility so it outranks the theme's
   `.facilties .single-facility span { font-size: 45px }`, which is meant for
   the icon and was blowing this label up to 45px gold text. */
.facilties .single-facility .unit_card_cta,
.unit_card_cta {
    display: inline-block;
    margin: 16px 0 0;
    padding: 9px 26px;
    border: 1px solid #b72228;
    border-radius: 4px;
    background: none;
    color: #b72228;
    font-family: 'Barlow', 'Work Sans', Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    transition: background .25s ease, color .25s ease;
}

a.unit_card:hover .unit_card_cta,
a.unit_card:focus .unit_card_cta {
    background: #b72228;
    color: #fff;
}

/* --------------------------------------------------------------------------
   12. Section reveal
   --------------------------------------------------------------------------
   style.css ships `.js .animate-box { opacity: 0 }` and relies on custom.js +
   Waypoints to add `.animated` and fade each block in, staggered 200ms PER
   ELEMENT. With 57 blocks on this page that is slow at best, and when the
   waypoint does not fire - a refresh that restores scroll position, a browser
   that never dispatches the expected scroll direction - the content stays
   invisible for good. That is the "sections load very slowly" report.

   Content must never depend on a scroll library to become visible, so the
   reveal is dropped altogether: every block renders immediately. The theme's
   animate.css classes are neutralised too, otherwise a late .animated would
   re-run the keyframes and flash a block that is already on screen.
   -------------------------------------------------------------------------- */
.js .animate-box,
.animate-box {
    opacity: 1;
}

/* Stop the theme's animate.css classes re-running late and flashing a block
   that is already on screen. */
.animate-box.animated,
.animate-box.item-animate {
    animation: none !important;
}

/* --------------------------------------------------------------------------
   13. Location map link
   --------------------------------------------------------------------------
   The map is a drawn illustration, not a live map, so it needs to announce
   that clicking it opens the real thing on Google Maps.
   -------------------------------------------------------------------------- */
.location_map_link {
    position: relative;
    display: block;
    overflow: hidden;
}

.location_map_link img {
    display: block;
    width: 100%;
    transition: transform .4s ease;
}

.location_map_link:hover img,
.location_map_link:focus-visible img {
    transform: scale(1.02);
}

.location_map_cta {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    border-radius: 4px;
    background: #b72228;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background .25s ease;
}

.location_map_link:hover .location_map_cta,
.location_map_link:focus-visible .location_map_cta {
    background: #98181d;
}

.location_map_cta i {
    font-size: 14px;
}

@media (max-width: 767px) {
    .location_map_cta {
        right: 10px;
        bottom: 10px;
        padding: 8px 13px;
        font-size: 11px;
        letter-spacing: .6px;
    }
}