/* ============================================================
   staging4.css — overrides layered on top of staging.css.
   Scoped to body.staging4-page so the existing staging.html
   (which lacks this class) is unaffected.

   Source of truth for changes: 网站修改意见20260605.docx
   ============================================================ */

/* ---------- 0. Overall font bump (slight, audience skews older) -------- */
.staging4-page {
    font-size: 17px;
    /* Apply the egg-shell texture to the body itself so any section
       without its own background (the strip below .video_row, gaps
       around #design rows, etc.) keeps the same textured brown look
       instead of falling back to the flat #7c5b4b body color from
       responsive.css. Scoped to .staging4-page so other pages are
       unaffected. */
    background-image: url('../img/egg-shell.png');
    background-repeat: repeat;
    /* Clip horizontal overflow caused by the 100vw breakout on
       .video_row — on viewports with a vertical scrollbar, 100vw
       includes the scrollbar width, otherwise the page would gain a
       harmless horizontal scrollbar of a few px. */
    overflow-x: hidden;
}
html:has(body.staging4-page) {
    overflow-x: hidden;
}


/* ---------- 1. Hero — keep staging's render1.jpg, show sky AND ground --- */
/* Background image inherits from staging.css (render1.jpg). Crop position
   sits between the very top and the centre so both the sky and the
   building/ground are visible in the same frame. */
.staging4-page .staging-hero-bg {
    background-position: center 30%;
}

/* Make the hero taller than a viewport so more of the photo's vertical
   span is revealed (with background-size: cover, a taller container
   shows more of the image height before the sides start cropping). */
.staging4-page .staging-hero,
.staging4-page .staging-hero-overlay {
    min-height: 120vh;
}

/* PropertyGuru sticker is a round badge — bigger, no caption text below */
.staging4-page .staging-hero-award {
    margin-bottom: 36px;
}
.staging4-page .staging-hero-award-logo {
    width: 118px;
    height: 118px;
    margin-bottom: 0;
}
/* Award title + sub removed from markup; hide just in case */
.staging4-page .staging-hero-award-title,
.staging4-page .staging-hero-award-sub {
    display: none;
}

/* Bump overlay text sizes across the hero */
.staging4-page .staging-hero-overlay {
    padding-top: 70px;
}
.staging4-page .staging-hero-status p {
    font-size: 36px;
    line-height: 1.3;
}
.staging4-page .staging-hero-pitch {
    margin-bottom: 32px;
    max-width: 700px;
}
.staging4-page .staging-hero-pitch p,
.staging4-page .staging-hero-contact p {
    font-size: 19px;
    line-height: 1.85;
}
.staging4-page .staging-hero-contact {
    margin-bottom: 52px;
}
.staging4-page .staging-hero-cta {
    padding: 18px 56px;
    font-size: 15px;
    letter-spacing: 0.22em;
}

@media (max-width: 1024px) {
    .staging4-page .staging-hero-award-logo { width: 100px; height: 100px; }
    .staging4-page .staging-hero-status p { font-size: 30px; }
    .staging4-page .staging-hero-pitch p,
    .staging4-page .staging-hero-contact p { font-size: 17px; }
}

@media (max-width: 640px) {
    .staging4-page .staging-hero-award-logo { width: 78px; height: 78px; }
    .staging4-page .staging-hero-overlay { padding: 80px 20px 50px; }
    .staging4-page .staging-hero-status p { font-size: 24px; }
    .staging4-page .staging-hero-pitch p,
    .staging4-page .staging-hero-contact p { font-size: 15px; line-height: 1.7; }
    .staging4-page .staging-hero-cta { padding: 16px 40px; font-size: 13px; }
}


/* ---------- 2 + 3. Residence cards: fill viewport + font weight ------- */
.staging4-page .staging-residences {
    padding-left: 24px;
    padding-right: 24px;
}
.staging4-page .staging-residences-inner {
    max-width: 1500px;
}

.staging4-page .staging-residence-img img {
    height: 320px;
}

.staging4-page .staging-residence-body {
    padding: 34px 32px 36px;
}

/* Header block — name + tagline + specs + price use the Medium face
   at its natural weight, no synthetic-bold strokes. Visibly heavier
   than the Regular description below, without looking inflated. */
.staging4-page .staging-residence-name,
.staging4-page .staging-residence-tagline,
.staging4-page .staging-residence-specs,
.staging4-page .staging-residence-price {
    font-family: "ABC Monument Grotesk Medium",
                 "ABC Monument Grotesk Trial Medium", sans-serif;
    font-weight: 500;
    color: #f4ede2;
}
.staging4-page .staging-residence-name {
    font-size: 28px;
    letter-spacing: 0.01em;
}
.staging4-page .staging-residence-tagline {
    font-size: 17px;
    line-height: 1.35;
}
.staging4-page .staging-residence-specs {
    font-size: 15px;
    letter-spacing: 0.04em;
}
.staging4-page .staging-residence-price {
    font-size: 19px;
}

/* Description copy — explicitly Regular face, so it reads visibly
   thinner than the Medium header block above it. */
.staging4-page .staging-residence-copy,
.staging4-page .staging-residence-copy p,
.staging4-page .staging-residence-more,
.staging4-page .staging-residence-more p {
    font-family: "ABC Monument Grotesk Regular",
                 "ABC Monument Grotesk Trial Regular", sans-serif;
    font-weight: 400;
}
.staging4-page .staging-residence-copy {
    font-size: 15px;
    line-height: 1.7;
}

/* Read More also nudged up */
.staging4-page .staging-residence-readmore {
    font-size: 14px;
}

/* Download Floorplan — dark brown background instead of cream */
.staging4-page .staging-residence-download,
.staging4-page .staging-residence-download:focus,
.staging4-page .staging-residence-download:active,
.staging4-page .staging-residence-download:focus-visible {
    background: #634232;
    color: #e5e1d4;
    border: 1px solid #634232;
    font-size: 13px;
    letter-spacing: 0.2em;
    padding: 18px 22px;
}
.staging4-page .staging-residence-download:hover {
    background: transparent;
    color: #e5e1d4;
    border-color: #e5e1d4;
}

/* Tablet */
@media (max-width: 1024px) {
    .staging4-page .staging-residence-img img { height: 260px; }
    .staging4-page .staging-residence-name { font-size: 24px; }
    .staging4-page .staging-residence-tagline { font-size: 16px; }
    .staging4-page .staging-residence-specs { font-size: 14px; }
    .staging4-page .staging-residence-price { font-size: 17px; }
    .staging4-page .staging-residence-copy { font-size: 14px; }
}

/* Mobile */
@media (max-width: 760px) {
    .staging4-page .staging-residence-img img { height: 250px; }
    .staging4-page .staging-residence-name { font-size: 22px; }
    .staging4-page .staging-residence-tagline { font-size: 15px; }
    .staging4-page .staging-residence-specs { font-size: 13px; }
    .staging4-page .staging-residence-price { font-size: 16px; }
    .staging4-page .staging-residence-copy { font-size: 14.5px; }
}


/* ---------- 5b. Tagline "From an acclaimed collaboration…" enlarge ----- */
.staging4-page .staging-residences-tagline p {
    font-size: 24px;
    line-height: 1.5;
    max-width: 980px;
}
@media (max-width: 760px) {
    .staging4-page .staging-residences-tagline p { font-size: 19px; }
}


/* ---------- 4. Video row — brown + egg-shell texture background -------- */
/* Aerial video block standalone between residences and #design — give it
   the same dusty-pink + egg-shell pattern used by the rest of the
   brown sections. Foundation .grid-x is constrained by parent container,
   so break out to full viewport width via 100vw + negative side margins
   so the texture reaches the screen edges on wide monitors. */
.staging4-page .video_row {
    position: relative;
    box-sizing: border-box;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    max-width: none !important;
    background-color: #7c5b4b;
    background-image: url('../img/egg-shell.png');
    background-repeat: repeat;
    padding: 56px 24px;
}


/* ---------- 6 + 7. Quote blocks: tighter together, more space above --- */
/* Instruction 7 — kill the white page-background strip between quote
   blocks: zero the bottom margin so they butt against one another. */
.staging4-page .quote_wrap.mb,
.staging4-page .quote_wrap {
    margin-bottom: 0 !important;
}

/* Instruction 6 — extra breathing room between the Sustainability
   section (end of #design body) and the first quote block. */
.staging4-page .sustain_row {
    margin-bottom: 60px !important;
}
.staging4-page .quote_wrap1 {
    margin-top: 24px !important;
}


/* ====================================================================
   v2 revisions (网站修改意见 v2 20260615.docx) — appended overrides.
   Each block is keyed to a numbered instruction in that document.
   ==================================================================== */

/* ---------- v2.1 — Top SCULPT logo + nav links move up, equal gaps ----
   Make the top inset equal to the side inset so the nav sits tight
   against the upper-left/upper-right corners. */
.staging4-page #navigation,
.staging4-page .top_nav_wrap {
    padding-top: 18px !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
}
.staging4-page .top_nav_row {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.staging4-page .top_nav_row .left_col,
.staging4-page .top_nav_row .right_col {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.staging4-page .top_nav_logo {
    display: block;
}
@media (max-width: 1024px) {
    .staging4-page #navigation,
    .staging4-page .top_nav_wrap {
        padding-top: 14px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* ---------- v2.1c — INITIAL state only: SCULPT closer to top edge ----
   When body still has .unscrolled (the user is at the very top of the
   page, before any scroll), tighten the nav's top padding so the
   SCULPT logo hugs the upper edge. Once the user scrolls, .scrolled
   replaces .unscrolled and these rules stop applying — the
   collapsed/headroom-pinned nav state from v2.1 above takes over
   without modification. */
.staging4-page.unscrolled #navigation,
.staging4-page.unscrolled .top_nav_wrap {
    padding-top: 0 !important;
}
.staging4-page.unscrolled .top_nav_logo {
    /* nudge SCULPT a touch above the wrapper edge so it sits closer to
       the absolute top of the viewport in the initial state */
    margin-top: -4px;
}
@media (max-width: 1024px) {
    .staging4-page.unscrolled #navigation,
    .staging4-page.unscrolled .top_nav_wrap {
        padding-top: 0 !important;
    }
    .staging4-page.unscrolled .top_nav_logo { margin-top: -2px; }
}


/* ---------- v2.2 — PropertyGuru badge bigger, lift the hero text -----
   Enlarge the round Property Guru sticker and pull the overlay text
   block up toward it so the whole block reads higher in the frame. */
.staging4-page .staging-hero-award-logo {
    width: 230px;
    height: 230px;
}
.staging4-page .staging-hero-award {
    margin-bottom: 20px;     /* was 36px — pull status closer to badge */
}
.staging4-page .staging-hero-status {
    margin-bottom: 16px;     /* was 28px in staging.css */
}
.staging4-page .staging-hero-pitch {
    margin-bottom: 18px;     /* was 32px */
}
.staging4-page .staging-hero-contact {
    margin-bottom: 28px;     /* was 52px */
}
.staging4-page .staging-hero-overlay {
    /* v2.2d — push the badge further down so its top edge sits clearly
       below the initial-state nav (some viewports rendered SCULPT taller
       than the 180px buffer covered). */
    padding-top: 220px;
    justify-content: flex-start;
}
@media (max-width: 1024px) {
    .staging4-page .staging-hero-overlay { padding-top: 165px; }
}
@media (max-width: 640px) {
    .staging4-page .staging-hero-overlay { padding-top: 125px; }
}
@media (max-width: 1024px) {
    .staging4-page .staging-hero-award-logo { width: 190px; height: 190px; }
}
@media (max-width: 640px) {
    .staging4-page .staging-hero-award-logo { width: 140px; height: 140px; }
}


/* ---------- v2.3 — Drop italics on Construction Underway / Move in 2026 */
/* staging.css declares .staging-hero-status p { font-style: italic } */
.staging4-page .staging-hero-status p {
    font-style: normal !important;
}


/* ---------- v2.4 — 3 residence cards larger, side gutter matches the
                     full-width photos that follow further down --------- */
/* The galleries inside #design (render7, render2, etc.) sit edge-to-edge
   in the viewport. Push the cards section's inner container to full
   width too and reduce its side padding so the card block matches the
   later photo blocks rather than being constrained at 1500px wide. */
.staging4-page .staging-residences {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.staging4-page .staging-residences-inner {
    max-width: none !important;
    padding-left: 14px;
    padding-right: 14px;
}
.staging4-page .staging-residences-grid {
    gap: 14px;
}
/* Make the card image area + body breathe a bit more now that the cards
   themselves got wider on big screens. */
.staging4-page .staging-residence-img img {
    height: 360px;
}
.staging4-page .staging-residence-body {
    padding: 38px 36px 40px;
}
@media (max-width: 1024px) {
    .staging4-page .staging-residence-img img { height: 290px; }
    .staging4-page .staging-residences-inner { padding-left: 10px; padding-right: 10px; }
    .staging4-page .staging-residences-grid { gap: 10px; }
}
@media (max-width: 760px) {
    .staging4-page .staging-residence-img img { height: 260px; }
    .staging4-page .staging-residences-inner { padding-left: 12px; padding-right: 12px; }
}


/* ---------- v2.5 — Remove the long white horizontal line ------------- */
/* staging.css adds border-top:1px solid #fff on .staging-residences-tagline
   creating a visible cream→brown divider strip. v2 wants it gone. */
.staging4-page .staging-residences-tagline {
    border-top: 0 !important;
}


/* ---------- v2.6 — Enlarge the "From an acclaimed…" tagline ---------- */
.staging4-page .staging-residences-tagline p {
    font-size: 30px;
    line-height: 1.45;
    max-width: 1100px;
}
@media (max-width: 1024px) {
    .staging4-page .staging-residences-tagline p { font-size: 25px; }
}
@media (max-width: 760px) {
    .staging4-page .staging-residences-tagline p { font-size: 20px; }
}


/* ====================================================================
   v4 revisions (v4.docx 20260617) — appended overrides.
   ==================================================================== */

/* ---------- v4.1 — Hero text moves down, gap below PropertyGuru badge ---
   Earlier (v2.2) we tightened .staging-hero-award margin-bottom to 20px
   so the status block sat closer to the badge. v4 wants the OPPOSITE —
   clear vertical air between badge and the floating overlay text block
   below. Add margin-bottom on the award and a top buffer on the
   following status block. */
.staging4-page .staging-hero-award {
    margin-bottom: 90px !important;
}
.staging4-page .staging-hero-status {
    margin-bottom: 24px;
}
@media (max-width: 1024px) {
    .staging4-page .staging-hero-award { margin-bottom: 70px !important; }
}
@media (max-width: 640px) {
    .staging4-page .staging-hero-award { margin-bottom: 50px !important; }
}


/* ---------- v4.2 — Bigger gap between cards + larger side margins ---- */
/* In v2.4 we had inner padding 14px and gap 14px. v4 wants both bigger:
   more breathing space against the viewport edge AND between cards. */
.staging4-page .staging-residences-inner {
    padding-left: 56px;
    padding-right: 56px;
}
.staging4-page .staging-residences-grid {
    gap: 36px;
}
@media (max-width: 1024px) {
    .staging4-page .staging-residences-inner { padding-left: 32px; padding-right: 32px; }
    .staging4-page .staging-residences-grid { gap: 24px; }
}
@media (max-width: 760px) {
    .staging4-page .staging-residences-inner { padding-left: 20px; padding-right: 20px; }
    .staging4-page .staging-residences-grid { gap: 18px; }
}


/* ---------- v4.3 — Use v4 Artboards; show full image, no cropping ----
   staging.css fixes .staging-residence-img img to a 280px height with
   object-fit:cover, and v2.4 enlarged that to 360px. For v4 the
   instruction is "show the entire image, no crop, scale proportionally"
   — let the image render at its natural aspect ratio sized to the
   card width.  G.01's special object-position rule no longer applies
   since the image is no longer cropped. */
.staging4-page .staging-residence-img {
    background: transparent;
    overflow: visible;
}
.staging4-page .staging-residence-img img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block;
}
.staging4-page .staging-residence--g01 .staging-residence-img img {
    object-position: center center !important;
}


/* ---------- v4.4 — Remove empty cream band above footer --------------
   The empty cream strip is from .subsection's cream bg + padding.
   - #design.subsection has padding-bottom 20px → 20px cream tail at
     the end of the design section.
   - #footer.subsection adds another padding-top (0 from #footer's own
     rule) but inside it .footer_copy_row has padding-top 20px,
     stacking more cream space before "Call Nabila..." appears.
   Zero all of them and add only a small breathing pad before the text. */

/* (1) Pull the cream tail off the bottom of #design */
.staging4-page #design.subsection,
.staging4-page section#design {
    padding-bottom: 0 !important;
}

/* (2) #footer — zero its top padding/margin; hide the empty top rows */
.staging4-page #footer,
.staging4-page section#footer,
.staging4-page section#footer.subsection {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.staging4-page #footer .footer_nav_row,
.staging4-page #footer .footer_hr_row {
    display: none !important;
}

/* (3) footer_copy_row — keep a small 18px lead-in before the text */
.staging4-page #footer .footer_copy_row {
    padding-top: 18px !important;
    margin-top: 0 !important;
}
/* Only the FIRST element in each footer cell needs margin-top:0
   (so the cream area doesn't grow above "Call Nabila..." or
   "Enquire Now"). h6 — the disclaimer line — keeps its natural
   margin-top so the gap between "Enquire Now" and the disclaimer
   text reads the same as before v4.4. */
.staging4-page #footer .footer_copy_row h4,
.staging4-page #footer .footer_copy_row h5 {
    margin-top: 0 !important;
}

/* (4) Make sure quote_wrap3 doesn't carry margin-bottom into footer */
.staging4-page .quote_wrap3 {
    margin-bottom: 0 !important;
}


/* ---------- v4.5 — Mobile: kill the 1-2px gap at the bottom of the
                     fixed Enquire Now button ------------------------------
   On phones the visible-state .register_fixed_row sits at bottom:0 but
   renders 1-2px above the viewport edge (sub-pixel / Safari UI-chrome
   quirks). Overshoot bottom by 3px in the scrolled (visible) state so
   the brown bar always touches the screen edge; the button has no
   bottom border-radius or border so the extra pixels just hide below
   the viewport, no content is cropped. */
@media (max-width: 760px) {
    .staging4-page.scrolled .register_fixed_row {
        bottom: -3px !important;
    }
}