/* Staging hero — new homepage top section
   Uses licensed ABC Monument Grotesk Regular / Medium (declared in fonts/style-staging.css) */

/* ============================================================
   Floorplan modal — mirror #Form_Modal styling so the Download
   Floorplan modal looks identical to the Enquire Now modal.
   responsive.css only styles #Form_Modal by ID; #Floorplan_Modal
   needs its own copy of the same rules at every breakpoint.
   ============================================================ */
#Floorplan_Modal {
    padding: 0 0;
    background-color: #634232;
    background-color: rgba(99, 66, 50, 0.95);
    background-image: url('../img/egg-shell.png');
    background-repeat: repeat;
}
#register-floorplan .grid-x {
    max-width: min(90vw, 600px);
}

@media screen and (min-width: 40em) {
    #Floorplan_Modal {
        z-index: 99;
    }
    #register-floorplan .grid-x {
        max-width: min(92vw, 2220px);
    }
    #register-floorplan .cell {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media screen and (min-width: 64em) {
    /* original #Form_Modal at 64em+ has the egg-shell bg-image commented
       out — mirror that so the brown shows solid on desktop */
    #Floorplan_Modal {
        background-image: none;
    }
}

.staging-hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    background: #2b211a;
}

.staging-hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('../img/render1.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.staging-hero-bg::after {
    /* subtle dark scrim so the overlay text stays legible */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(20, 14, 8, 0.25) 0%,
        rgba(20, 14, 8, 0.15) 35%,
        rgba(20, 14, 8, 0.45) 100%
    );
}

.staging-hero-overlay {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 90px 24px 60px;
    color: #ffffff;
    text-align: center;
    font-family: "ABC Monument Grotesk Regular", "ABC Monument Grotesk Trial Regular", sans-serif;
}

/* Award badge — clickable link to PropertyGuru article */
.staging-hero-award {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #ffffff;
    margin-bottom: 48px;
    transition: opacity 0.25s ease;
}

.staging-hero-award:hover {
    opacity: 0.82;
    color: #ffffff;
    text-decoration: none;
}

.staging-hero-award-logo {
    width: 44px;
    height: 44px;
    margin-bottom: 12px;
    object-fit: contain;
    display: block;
}

.staging-hero-award-title {
    font-family: "ABC Monument Grotesk Medium", "ABC Monument Grotesk Trial Medium", sans-serif;
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.staging-hero-award-sub {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.85;
}

/* Status line */
.staging-hero-status {
    margin-bottom: 28px;
}

.staging-hero-status p {
    font-family: "ABC Monument Grotesk Medium", "ABC Monument Grotesk Trial Medium", sans-serif;
    font-size: 28px;
    line-height: 1.35;
    margin: 0;
    font-style: italic;
    letter-spacing: 0.01em;
}

/* Pitch lines */
.staging-hero-pitch p,
.staging-hero-contact p {
    font-size: 15px;
    line-height: 1.85;
    margin: 0;
    letter-spacing: 0.02em;
}

.staging-hero-pitch {
    margin-bottom: 24px;
    max-width: 560px;
}

.staging-hero-contact {
    margin-bottom: 44px;
}

/* CTA button */
.staging-hero-cta {
    display: inline-block;
    padding: 16px 48px;
    background: #ffffff;
    color: #2b211a;
    font-family: "ABC Monument Grotesk Medium", "ABC Monument Grotesk Trial Medium", sans-serif;
    font-size: 13px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
    border: 1px solid #ffffff;
}

.staging-hero-cta:hover {
    background: transparent;
    color: #ffffff;
}

/* Tablet */
@media (max-width: 1024px) {
    .staging-hero-status p { font-size: 24px; }
    .staging-hero-pitch p,
    .staging-hero-contact p { font-size: 14px; }
}

/* Nav background:
     - default (at top of hero): fully transparent so the hero stays clean
     - once user has scrolled past the hero (body.scrolled set by our JS) OR
       Headroom has pinned the nav (.slideDown class), fade in a semi-transparent
       Dusty Pink bar so cream logo + links stay readable over content sections
   Only background-color transitions (transform stays pinned to avoid the
   half-stuck slide animation we saw earlier). */

.staging-page #navigation,
.staging-page .headroom,
.staging-page .headroom--not-top,
.staging-page .headroom--bottom,
.staging-page .slideUp,
.staging-page .slideDown {
    background-color: transparent !important;
    background: transparent !important;
    -webkit-transition: background-color 0.4s ease-out !important;
    -moz-transition: background-color 0.4s ease-out !important;
    -o-transition: background-color 0.4s ease-out !important;
    transition: background-color 0.4s ease-out !important;
}

.staging-page.scrolled #navigation,
.staging-page.scrolled .headroom,
.staging-page.scrolled .slideDown,
.staging-page .slideDown {
    background-color: rgba(234, 231, 222, 0.92) !important;
    background: rgba(234, 231, 222, 0.92) !important;
}

/* Headroom.js slides #navigation in/out with transform: translateY(-100% ↔ 0)
   over a 0.5s transition. On the staging hero this transition can get caught
   mid-flight (especially with quick scroll direction changes) and leaves the
   nav stuck halfway visible. Pin the nav permanently at translateY(0) and
   disable the transition so it's always fully shown — never a half state. */
.staging-page #navigation,
.staging-page .headroom,
.staging-page .slideUp,
.staging-page .slideDown,
.staging-page .headroom--pinned,
.staging-page .headroom--unpinned {
    -webkit-transform: translateY(0) !important;
    -moz-transform: translateY(0) !important;
    -ms-transform: translateY(0) !important;
    -o-transform: translateY(0) !important;
    transform: translateY(0) !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

/* With the new light off-white nav background, original .scrolled rules already
   colour the logo + nav links in dark dusty pink (#7c5b4b), which contrasts
   well against the bar — no colour override needed. */

/* Enquire Now button uses original site's .fixed_register / .register_fixed_row styles
   (defined in css/responsive.css). Visibility is driven by the original CSS rule
   `.scrolled .register_fixed_row { bottom: 0 }` — our staging script (in staging.html)
   simply toggles body.scrolled when the user has scrolled past the hero.

   Override: original CSS has transition-delay: 6s on .scrolled .register_fixed_row,
   which makes the button wait 6 seconds before sliding up. We zero it out for
   staging so the button slides in immediately. */
.staging-page .register_fixed_row,
.staging-page.scrolled .register_fixed_row {
    -webkit-transition-delay: 0s !important;
    -moz-transition-delay: 0s !important;
    -o-transition-delay: 0s !important;
    transition-delay: 0s !important;
}

/* Mobile */
@media (max-width: 640px) {
    .staging-hero-overlay {
        padding: 80px 20px 50px;
    }
    .staging-hero-award { margin-bottom: 36px; }
    .staging-hero-award-title { font-size: 13px; }
    .staging-hero-award-sub { font-size: 10px; }
    .staging-hero-status p { font-size: 20px; }
    .staging-hero-pitch p,
    .staging-hero-contact p { font-size: 13px; line-height: 1.7; }
    .staging-hero-cta { padding: 14px 36px; font-size: 12px; }
}

/* ============================================================
   Section 2 — Residences
   Three cards on warm taupe-brown band; collapses to a single
   column on small screens.
   ============================================================ */
.staging-residences {
    background-color: #7c5b4b;
    background-image: url('../img/egg-shell.png');
    background-repeat: repeat;
    padding: 42px 40px 70px;
    position: relative;
    font-family: "ABC Monument Grotesk Regular",
                 "ABC Monument Grotesk Trial Regular", sans-serif;
}

.staging-residences-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding-bottom: 56px;
}

.staging-residences-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.staging-residence {
    background-color: #7c5b4b;
    background-image: url('../img/egg-shell.png');
    background-repeat: repeat;
    color: #f1e9da;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.staging-residence-img {
    width: 100%;
    overflow: hidden;
    background: #2b211a;
}

.staging-residence-img img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* G.01 — push the crop window downward to show the lower part of the photo */
.staging-residence--g01 .staging-residence-img img {
    object-position: center 95%;
}

.staging-residence-body {
    padding: 30px 30px 32px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.staging-residence-head {
    margin-bottom: 18px;
}

/* Residence name with divider line beneath it, inset 8px from card edges */
.staging-residence-name {
    margin: 0 0 12px;
    padding-bottom: 12px;
    position: relative;
}
.staging-residence-name::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.32);
}

/* Tagline + specs on the left, price aligned to the right */
.staging-residence-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}
.staging-residence-meta-text {
    flex: 1 1 auto;
    min-width: 0;
}

.staging-residence-name {
    font-family: "ABC Monument Grotesk Medium",
                 "ABC Monument Grotesk Trial Medium", sans-serif;
    font-size: 20px;
    margin: 0 0 4px;
    color: #f4ede2;
    letter-spacing: 0.01em;
}

.staging-residence-tagline {
    font-family: "ABC Monument Grotesk Regular",
                 "ABC Monument Grotesk Trial Regular", sans-serif;
    font-size: 12px;
    margin: 0 0 6px;
    color: rgba(244, 237, 226, 0.80);
    line-height: 1.4;
    text-transform: none;
    font-weight: 400;
}

.staging-residence-specs {
    font-size: 11px;
    color: rgba(244, 237, 226, 0.75);
    letter-spacing: 0.05em;
}

.staging-residence-price {
    font-family: "ABC Monument Grotesk Medium",
                 "ABC Monument Grotesk Trial Medium", sans-serif;
    font-size: 14px;
    color: #f4ede2;
    white-space: nowrap;
    margin-top: 2px;
}

.staging-residence-copy {
    font-size: 13px;
    line-height: 1.65;
    color: #ede4d2;
    margin-bottom: 12px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.32);
}
.staging-residence-copy p {
    margin: 0 0 12px;
}
.staging-residence-copy p:last-child {
    margin-bottom: 0;
}
.staging-residence-more {
    display: none;
}
.staging-residence.is-expanded .staging-residence-more {
    display: block;
    margin-top: 12px;
}

.staging-residence-readmore {
    background: none;
    border: none;
    padding: 0;
    margin: 4px 0 24px;
    text-align: left;
    font-family: inherit;
    font-size: 13px;
    color: #f4ede2;
    text-decoration: underline;
    cursor: pointer;
    align-self: flex-start;
}
.staging-residence-readmore:hover { opacity: 0.7; }

/* Neutral cream rectangle on the brown card. Clicking opens the
   standard Enquire (Form_Modal) via data-open.
   Explicit :focus/:active states pinned to the default so the button
   never flashes during Foundation modal open/close. */
.staging-residence-download,
.staging-residence-download:focus,
.staging-residence-download:active,
.staging-residence-download:focus-visible {
    margin-top: auto;
    align-self: stretch;
    display: block;
    width: 100%;
    text-align: center;
    background: #f4ede2;
    color: #2b211a;
    border: 1px solid #f4ede2;
    padding: 16px 20px;
    font-family: "ABC Monument Grotesk Medium",
                 "ABC Monument Grotesk Trial Medium", sans-serif;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    outline: none;
    box-shadow: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.staging-residence-download:hover {
    background: transparent;
    color: #f4ede2;
    border-color: #f4ede2;
    text-decoration: none;
}

/* Closing tagline strip below the cards.
   Same egg-shell texture as the cards section so the brown palette
   continues, but visually separated by the white divider line
   (border-bottom on .staging-residences + border-top here). */
.staging-residences-tagline {
    background-color: #7c5b4b;
    background-image: url('../img/egg-shell.png');
    background-repeat: repeat;
    border-top: 1px solid #ffffff;
    padding: 60px 40px;
    text-align: center;
    margin-top: 0;
}
.staging-residences-tagline p {
    max-width: 880px;
    margin: 0 auto;
    font-family: "ABC Monument Grotesk Medium",
                 "ABC Monument Grotesk Trial Medium", sans-serif;
    font-size: 19px;
    line-height: 1.55;
    color: #f4ede2;
    letter-spacing: 0.005em;
}

/* Tablet */
@media (max-width: 1024px) {
    .staging-residences { padding: 36px 24px 60px; }
    .staging-residences-inner { padding-bottom: 44px; }
    .staging-residences-grid { gap: 10px; }
    .staging-residence-img img { height: 230px; }
    .staging-residence-body { padding: 24px 24px 28px; }
    .staging-residence-name { font-size: 18px; }
    .staging-residences-tagline p { font-size: 17px; }
}

/* Mobile — stack vertically */
@media (max-width: 760px) {
    .staging-residences { padding: 32px 18px 50px; }
    .staging-residences-inner { padding-bottom: 36px; }
    .staging-residences-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .staging-residence-img img { height: 240px; }
    .staging-residence-body { padding: 24px 22px 26px; }
    .staging-residences-tagline { padding: 44px 24px; }
    .staging-residences-tagline p { font-size: 16px; line-height: 1.5; }
}

/* ============================================================
   Floorplan modal — download (thanks) state
   ============================================================ */
.staging-floorplan-modal .staging-floorplan-residence {
    color: #7c5b4a;
    font-family: "ABC Monument Grotesk Medium",
                 "ABC Monument Grotesk Trial Medium", sans-serif;
}
.staging-floorplan-thanks-sub {
    font-size: 14px;
    color: #5a4a3f;
    margin: 6px 0 18px;
    line-height: 1.55;
}
.staging-floorplan-downloads {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
    max-width: 380px;
}
.staging-floorplan-dl-btn {
    display: block;
    background: #2b211a;
    color: #ffffff !important;
    text-decoration: none;
    padding: 18px 24px;
    font-family: "ABC Monument Grotesk Medium",
                 "ABC Monument Grotesk Trial Medium", sans-serif;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-align: center;
    border: 1px solid #2b211a;
    transition: background 0.25s ease, color 0.25s ease;
}
.staging-floorplan-dl-btn:hover {
    background: #7c5b4a;
    border-color: #7c5b4a;
    color: #ffffff !important;
    text-decoration: none;
}
.staging-floorplan-dl-btn-alt {
    background: transparent;
    color: #2b211a !important;
}
.staging-floorplan-dl-btn-alt:hover {
    background: #2b211a;
    color: #ffffff !important;
}