/* =====================================================================
   Sakura landing page styles (both versions of the page).
   Moved here from the <style> blocks in the head of index.php on 12-11-2026,
   in the same order, so the browser can cache them. Loaded after style.css,
   Bootstrap and Swiper, exactly where the inline styles used to be.
   ===================================================================== */

        main section .home_loan .home_loan_logos{
            gap: 20px;
            justify-content: center;
            padding: 20px 0;
        }
        main section .home_loan .home_loan_logos div{
            width: 20%;
        }
        main section .home_loan .home_loan_logos img {
            max-width: 100%;
        }

.home_loan_logos_mobile { display: none; }

/* header .hero_section .hero_section_text .hero_section_hone .hero_butterfly{
    bottom:26% !important;
} */
main section .location .sukoon_prime .sukoon_prime_details .sukoon_map img{
    width: 97% !important;
    margin-left: auto !important;
    margin: 0;
    border-radius:15px;
}
main section .location .sukoon_prime .sukoon_prime_details .sukoon_map{
    padding:0 !important;
}
    @media (width <= 1440px) {
        .brochure_button {
            top: 60.5%;
        }
    }
      @media (width <= 1400px) {
        main section .genesis .genesis_text{
            padding:0.1rem 0rem;
        }
    }
    @media (width <= 1300px) {
        .brochure_button {
            top: 62.5%;
        }
    }
    @media (width <= 1200px) {
        header .navbar .collapse .navbar-nav .nav-item .nav-link{
            font-size: 12px;
        }
        header .navbar .nav-link-end img {
            width: 12px;
        }
    }
    @media (width <= 992px) {
        header .navbar .collapse .navbar-nav .nav-item .nav-link{
            font-size: 10px;
            padding: 0rem 0.5rem;
        }
        header .navbar .nav-link-end img {
            width: 10px;
        }
        main section .home_loan .home_loan_logos div {
            width: 30%;
        }

    }
    @media only screen and (max-width: 767px) {
    header .navbar{
        padding-bottom: 0;
        margin-bottom: 0;
    }
    header .navbar .collapse .navbar-nav .nav-item:nth-child(7), header .navbar .collapse .navbar-nav .nav-item:last-child{
        margin-bottom: 0;
    }
    header .navbar .nav-link-end{
        display: none;
    }
    header .navbar .collapse .navbar-nav .nav-item .nav-link{
        font-size: 12px;
        padding: 0rem 0.9rem;
    }
    .brochure_button {
        top: 58.5%;
    }
    main section .offer_sukoon .offer_sukoon_image{
        padding: 10px;
    }
    main section .offer_sukoon .offer_sukoon_image img{
        width: 100%;
    }
}

@media (max-width: 576px) {
    main section .home_loan .home_loan_logos { display: none; }
    .home_loan_logos_mobile { display: block;  background: #fff; padding: 20px; border-radius: 10px;}
    .home_loan_logos_mobile .swiper-slide {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .home_loan_logos_mobile .swiper-slide img {
        max-height: 60px;
        width: auto;
        object-fit: contain;
    }
    main section .home_loan{
        padding: 0;
    }

}
@media (max-width: 450px) {
    .home_loan_logos_mobile .swiper-slide img {
        max-height: 50px;
    }
}
@media (max-width: 420px) {
    .home_loan_logos_mobile .swiper-slide img {
        max-height: 45px;
    }
}
@media (max-width: 360px) {
    .home_loan_logos_mobile .swiper-slide img {
        max-height: 60px;
    }
}

/* =====================================================================
   RESPONSIVE LAYER  (loads after style.css + bootstrap)
   Desktop design is untouched; rules below target <=1199px only,
   except a few global safety rules.
   ===================================================================== */

/* ---------- Global safety ---------- */
html, body { max-width: 100%; height: auto; }
/* overflow-x:hidden on html/body turns body into its own scroller on
   mobile, which makes page scrolling stick. clip hides sideways overflow
   without doing that. */
html, body { overflow-x: clip; overflow-y: visible; }
@supports not (overflow: clip) {
    html, body { overflow-x: visible; }
    header, main, footer { overflow-x: hidden; }
}
img, video, svg { max-width: 100%; }
.top_header img, .top_strip img { height: auto; }

/* ---------- HERO / TOP BANNER (all sizes) ---------- */
.hero_section { position: relative; overflow: hidden; }
.hero_section_image .swiper-slide img { display: block; width: 100%; }
#hero-logo { width: clamp(110px, 10vw + 40px, 165px); height: auto; }
.hero_logo_row { display: flex; align-items: center; gap: 12px; }
.hero_butterfly { width: clamp(28px, 3vw, 48px); height: auto; }
#hero-title { font-size: clamp(26px, 2.4vw + 16px, 42px); line-height: 1.2; }
.hero_section_image {
    --swiper-pagination-color: #fff;
    --swiper-pagination-bullet-inactive-color: #fff;
    --swiper-pagination-bullet-inactive-opacity: .55;
}

/* ---------- Tablet & below ---------- */
@media (max-width: 991.98px) {

    /* Hero: fixed frame so slides with different image ratios don't jump */
    .hero_section_image { aspect-ratio: 4 / 3; max-height: 82svh; }
    .hero_section_image .swiper-wrapper,
    .hero_section_image .swiper-slide { height: 100%; }
    .hero_section_image .swiper-slide img {
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    header .hero_section .hero_section_text {
        position: absolute;
        top: auto; left: 0; right: 0; bottom: 0;
        width: auto; max-width: none;
        transform: none;
        margin: 0;
        z-index: 2;
        display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
        padding: 90px 32px 48px;
        text-align: left;
        pointer-events: none;          /* keep slider swipe/bullets usable */
    }
    .hero_section_hone, .hero_section_pera { width: 100%; max-width: 560px; margin: 0; padding: 0; }
    #hero-title { margin: 10px 0 0; }
    #hero-desc { margin: 0; font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.9); }
    .hero_section_image .swiper-pagination { bottom: 16px !important; }

    /* Section headings */
    main section h2 { font-size: clamp(26px, 3vw + 12px, 36px); line-height: 1.25; }
    main section .eyebrow { font-size: 14px; }

    /* Genesis: slider on top, features below */
    #genesis .genesis { display: flex; flex-direction: column; gap: 24px; }
    #genesis .genesis_image, #genesis .genesis_text { width: 100%; max-width: 100%; flex: none; margin: 0; }
    #genesis .genesis_image img { width: 100%; height: auto; display: block; }
    #genesis .genesis_text_main ul {
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px; margin: 0; padding: 0; list-style: none;
    }
    #genesis .genesis_text_main li {
        display: flex; flex-direction: column; align-items: center;
        text-align: center; gap: 8px; margin: 0; width: auto;
    }
    #genesis .genesis_text_main li h6 { margin: 0; font-size: 15px; }
    #genesis .butterfly { width: 56px; height: auto; }

    /* Amenities cards */
    #lifestyle .detail-grid {
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
    }
    #lifestyle .detail-card { width: auto; margin: 0; }
    #lifestyle .detail-card img { max-height: 56px; width: auto; }
    #lifestyle .branch { max-width: 35%; height: auto; }

    /* Lifestyle gallery: pair every image with its text */
    #gallery .best_moments {
        position: relative;
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 16px; row-gap: 12px;
    }
    #gallery .best_moments > .eyebrow,
    #gallery .best_moments > h2 { grid-column: 1 / -1; order: 0; }
    #gallery .best_moments > .butterfly { position: absolute; top: 0; right: 0; width: 48px; height: auto; }
    #gallery .best_moments_images, #gallery .best_moments_text,
    #gallery .best_moments_images ul, #gallery .best_moments_text ul { display: contents; }
    #gallery .best_moments_images li, #gallery .best_moments_text li { list-style: none; width: auto; margin: 0; }
    #gallery .best_moments_images li img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
    #gallery .best_moments_text li { margin-bottom: 16px; }
    #gallery .best_moments_text li h3 { font-size: 20px; }
    #gallery .best_moments_text li p { margin-bottom: 4px; }
    /* order: img1 img2 / txt1 txt2 / img3 img4 / txt3 txt4 */
    #gallery .best_moments_images li:nth-child(1) { order: 1; }
    #gallery .best_moments_images li:nth-child(2) { order: 2; }
    #gallery .best_moments_text   li:nth-child(1) { order: 3; }
    #gallery .best_moments_text   li:nth-child(2) { order: 4; }
    #gallery .best_moments_images li:nth-child(3) { order: 5; }
    #gallery .best_moments_images li:nth-child(4) { order: 6; }
    #gallery .best_moments_text   li:nth-child(3) { order: 7; }
    #gallery .best_moments_text   li:nth-child(4) { order: 8; }

    /* Location */
    #location .sukoon_prime { position: relative; display: flex; flex-direction: column; gap: 24px; }
    #location .sukoon_prime_details_left { width: 100%; max-width: 100%; }
    #location .sukoon_prime .butterfly { width: 48px; height: auto; }
    #location .sukoon_prime_details { display: flex; flex-direction: column-reverse; gap: 28px; width: 100%; }
    #location .sukoon_prime_details_right, #location .sukoon_map { width: 100%; max-width: 100%; }
    #location .sukoon_map img { width: 100%; height: auto; display: block; }
    #location .sukoon_prime_details_right_main {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px;
    }
    #location .sukoon_prime_details_right_main_left { display: contents; }
    #location .sukoon_prime_details_right_main_left_div {
        display: flex; align-items: flex-start; gap: 12px; width: auto; margin: 0;
    }
    #location .sukoon_prime_details_right_main_left_div img { width: 36px; flex: 0 0 36px; height: auto; }
    #location .sukoon_prime_details_right_main_left_div ul { margin: 0; padding: 0; }
    #location .sukoon_prime_details_right_main_left_div li { font-size: 14px; line-height: 1.5; }

    /* About / portfolio flip cards */
    #aboutus .portfolio { position: relative; }
    #aboutus .portfolio .butterfly { width: 48px; height: auto; }
    #aboutus .portfolio_card {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
    }
    #aboutus .p_card { width: auto; max-width: none; margin: 0; }
    #aboutus .p_card_back p { font-size: 14px; line-height: 1.55; }
}

/* ---------- Tablet nav (768–991): keep links on one line ---------- */
@media (min-width: 768px) and (max-width: 991.98px) {
    header .navbar .collapse .navbar-nav .nav-item .nav-link { font-size: 11px; padding: 0 .45rem; letter-spacing: 0; }
    header .navbar .navbar-brand img { max-width: 110px; height: auto; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767.98px) {

    /* Full-bleed banner on phones */
    header > .container { padding-left: 0; padding-right: 0; max-width: 100%; }
    header .navbar > .container-fluid { padding-left: 16px; padding-right: 16px; }
    .hero_section, .hero_section_image { border-radius: 0; }
    .top_strip img { width: 100%; display: block; }

    /* Sticky bottom CTA bar instead of side buttons */
    body { padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
    body .enquire_button, body .brochure_button {
        position: fixed; top: auto; bottom: 0; right: auto;
        width: 50%; height: calc(52px + env(safe-area-inset-bottom, 0px));
        padding: 0 8px env(safe-area-inset-bottom, 0px);
        margin: 0; border-radius: 0;
        transform: none; rotate: none; writing-mode: horizontal-tb;
        font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
        z-index: 1000;
    }
    body .enquire_button { left: 0; }
    body .brochure_button { left: 50%; border-left: 1px solid rgba(255,255,255,.35); }

    /* Forms become a sheet above the CTA bar */
    body .enquire_form, body .brochure_form {
        display: block;
        position: fixed; top: auto; left: 12px; right: 12px;
        bottom: calc(64px + env(safe-area-inset-bottom, 0px));
        width: auto; max-width: none;
        max-height: calc(100svh - 96px); overflow-y: auto;
        padding: 44px 16px 16px; border-radius: 12px;
        box-shadow: 0 12px 40px rgba(0,0,0,.25);
        transform: translateY(16px); opacity: 0; visibility: hidden; pointer-events: none;
        transition: transform .25s ease, opacity .25s ease, visibility 0s linear .25s;
        z-index: 1001;
    }
    body .enquire_form.show, body .brochure_form.show {
        transform: none; opacity: 1; visibility: visible; pointer-events: auto;
        transition: transform .25s ease, opacity .25s ease;
    }
    body .enquire_form .close_button, body .brochure_form .close_bbutton {
        position: absolute; top: 6px; right: 10px; left: auto; transform: none;
    }
    body .enquire_form input, body .brochure_form input {
        width: 100%; font-size: 16px; /* 16px stops iOS zoom on focus */
    }

    /* Hero */
    .hero_section_image { aspect-ratio: 4 / 5; max-height: 78svh; }
    header .hero_section .hero_section_text { padding: 80px 20px 44px; }
    #hero-title br { display: none; }
    #hero-desc { font-size: 15px; }

    /* Text */
    main section h2 { font-size: clamp(24px, 5vw + 8px, 30px); }
    main section p { font-size: 15px; line-height: 1.6; }
    .about_section br, .portfolio p br { display: none; }

    /* Genesis */
    #genesis .genesis_text_main ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #genesis .genesis_text_main li:last-child { grid-column: 1 / -1; }
    #genesis .swiper-button-next, #genesis .swiper-button-prev { transform: scale(.7); }

    /* Highlight */
    #highlight .highlight_boxs { display: flex; gap: 0; align-items: stretch; }
    #highlight .highlight_boxs > div {
        flex: 1 1 0; width: auto; margin: 0;
        padding: 12px 10px; display: flex; align-items: center; justify-content: center; text-align: center;
    }
    #highlight .highlight_boxs h3 { font-size: clamp(16px, 4vw, 22px); }

    /* Amenities */
    #lifestyle .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    #lifestyle .detail-card { padding: 16px 12px; }
    #lifestyle .detail-card img { max-height: 44px; }
    #lifestyle .detail-card h3 { font-size: 15px; line-height: 1.3; }
    #lifestyle .detail-card p { font-size: 13px; line-height: 1.45; }
    #lifestyle .branch { max-width: 28%; }

    /* Disclaimer */
    .disclaimer_text p { font-size: 12px; line-height: 1.6; }
}

/* ---------- Small phones ---------- */
@media (max-width: 575.98px) {
    /* Gallery: image then its text, one per row */
    #gallery .best_moments { grid-template-columns: 1fr; }
    #gallery .best_moments_images li:nth-child(1) { order: 1; }
    #gallery .best_moments_text   li:nth-child(1) { order: 2; }
    #gallery .best_moments_images li:nth-child(2) { order: 3; }
    #gallery .best_moments_text   li:nth-child(2) { order: 4; }
    #gallery .best_moments_images li:nth-child(3) { order: 5; }
    #gallery .best_moments_text   li:nth-child(3) { order: 6; }
    #gallery .best_moments_images li:nth-child(4) { order: 7; }
    #gallery .best_moments_text   li:nth-child(4) { order: 8; }
    #gallery .best_moments_images li img { aspect-ratio: 16 / 10; }

    #location .sukoon_prime_details_right_main { grid-template-columns: 1fr; gap: 20px; }

    #aboutus .portfolio_card { grid-template-columns: 1fr; }

    #lifestyle .branch, #gallery .best_moments > .butterfly, #location .sukoon_prime .butterfly, #aboutus .portfolio .butterfly, footer .footer_pera img{
        display:none;
    }
    #genesis .genesis_text_main li h6{
        font-size:16px;
    }
}

@media (max-width: 380px) {
    body .enquire_button, body .brochure_button { font-size: 12px; letter-spacing: 0; }
    .g-recaptcha { transform: scale(.88); transform-origin: 0 0; }
    #lifestyle .detail-grid { gap: 10px; }
}

/* =====================================================================
   ROUND 2/3 FIXES (matched to style.css)
   ===================================================================== */

/* 5) style.css sets touch-action:none on the hero slider, which blocks
   vertical page scrolling when a swipe starts on the banner. pan-y lets
   the page scroll up/down while Swiper still handles left/right. */
header .hero_section .hero_section_image { touch-action: pan-y !important; }

@media (max-width: 991.98px) {
    /* 1) Amenities matrix: style.css draws the lines with borders, so the
       grid must have no gap or the lines break at every crossing */
    #lifestyle .detail-grid { gap: 0 !important; margin: 0 0 32px !important; }
    #lifestyle .detail-card { padding: 22px 14px !important; }

    /* Hero image: style.css fixes it at 350px tall on mobile; fill the frame instead */
    header .hero_section .hero_section_image .swiper-wrapper .swiper-slide img { height: 100% !important; }

    /* 3) Richer lifestyle: images full width and centred */
    #gallery .best_moments_images li {
        width: 100% !important; max-width: 100% !important; justify-self: stretch;
        float: none !important; padding: 0 !important; margin: 0 !important;
        display: flex; justify-content: center;
    }
    #gallery .best_moments_images li img {
        width: 100% !important; max-width: 100% !important;
        margin: 0 auto !important; float: none !important;
    }
    #gallery .best_moments_text li { text-align: center; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
}

@media (max-width: 767.98px) {
    #lifestyle .detail-card { padding: 18px 12px !important; }
    #lifestyle .detail-card img { height: 44px !important; margin-bottom: 14px !important; }

    /* 6) No background box around the hero */
    header .hero_section,
    header .hero_section .hero_section_image {
        background: none !important; box-shadow: none !important; border: 0 !important;
        border-radius: 0 !important; padding: 0 !important; margin: 0 !important; width: 100% !important;
    }
    header .hero_section::before, header .hero_section::after { content: none !important; }
    header .hero_section_image .swiper-slide,
    header .hero_section_image .swiper-slide img { border-radius: 0 !important; margin: 0 !important; }

    /* 2) Banner butterfly: style.css puts it at right:-30px (off-screen).
       Place it beside the logo; its flutter animation keeps working. */
    header .hero_section .hero_section_text .hero_section_hone .hero_butterfly {
        position: static !important; display: block !important;
        width: 38px !important; max-width: 38px !important; height: auto !important; margin: 0 !important;
        top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    }

    /* Hero text: reset style.css mobile spacing so it sits neatly on the image */
    header .hero_section .hero_section_text .hero_section_hone {
        padding: 0 !important; margin: 0 !important; width: 100%;
    }
    header .hero_section .hero_section_text .hero_section_hone #hero-logo {
        width: 120px !important; max-width: 120px !important; margin: 0 !important;
    }
    header .hero_section .hero_section_text .hero_section_hone h1 {
        font-size: clamp(24px, 6.4vw, 32px) !important; margin: 12px 0 0 !important;
    }
    header .hero_section .hero_section_text .hero_section_pera {
        margin: 14px 0 0 !important; padding: 12px 0 0 18px !important;
        border-top-left-radius: 26px;
    }
    header .hero_section .hero_section_text .hero_section_pera p {
        font-size: 14px !important; letter-spacing: 1px; line-height: 1.5; margin: 0;
    }

    /* 4) Smaller phone tab (was 70px tall), above the CTA bar */
    body .phone-img {
        width: 36px !important; height: 44px !important; padding: 0 !important;
        right: 0 !important; left: auto !important; top: auto !important;
        bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
        border-radius: 8px 0 0 8px !important; z-index: 999 !important;
    }
    body .phone-img img { width: 18px !important; height: 18px !important; }
}

/* =====================================================================
   ROUND 4
   ===================================================================== */
@media (max-width: 991.98px) {
    /* Slide 2: keep the flower (right side of the photo) in frame */
    header .hero_section .hero_section_image .swiper-slide img.hero-img--flower { object-position: 75% center; }

    /* Lifestyle: heading sits with its points, not with the image above */
    #gallery .best_moments_text li { margin-top: 10px !important; margin-bottom: 28px !important; }
    main section .best_moments .best_moments_text ul li h3 { margin: 0 0 8px !important; }
}

@media (max-width: 767.98px) {
    /* No gap between the RERA strip and the banner */
    .top_strip { margin-bottom: 0 !important; }
    header .navbar { margin-bottom: 0 !important; }

    header .hero_section .hero_section_image .swiper-slide img.hero-img--flower { object-position: 92% center; }

    /* Banner butterfly perched on the right end of the curved line
       ([UPDATE 12-11-2026] superseded: the butterfly now follows the last word of the heading, see blocks I and J) */
    header .hero_section .hero_section_text .hero_section_hone { position: relative; }
    header .hero_section .hero_section_text .hero_section_hone .hero_butterfly {
        position: absolute !important;
        right: 6px !important; bottom: -12px !important; top: auto !important; left: auto !important;
        width: 34px !important; max-width: 34px !important;
    }
}

/* =====================================================================
   ROUND 5
   ===================================================================== */
@media (max-width: 991.98px) {
    /* Banners: most photos have their subject on the right, so frame
       toward the right instead of the centre (flower slide set below) */
    header .hero_section .hero_section_image .swiper-slide img { object-position: 65% center; }
    header .hero_section .hero_section_image .swiper-slide img.hero-img--flower { object-position: 80% center; }
}

@media (max-width: 767.98px) {
    header .hero_section .hero_section_image .swiper-slide img { object-position: 75% center; }
    header .hero_section .hero_section_image .swiper-slide img.hero-img--flower { object-position: 92% center; }

    /* Site plan: style.css sets overflow:hidden + no padding on #project,
       which clips the box's bottom edge/shadow. Give it room instead. */
    #project { overflow: visible !important;}
    main section .offer_sukoon .offer_sukoon_image {
        padding: 30px 25px !important; border-radius: 14px;
        box-shadow: rgba(0, 0, 0, 0.18) 0 4px 12px;
    }
    main section .offer_sukoon .offer_sukoon_image img { width: 100% !important; height: auto; }
}

@media (prefers-reduced-motion: reduce) {
    body .enquire_form, body .brochure_form { transition: none; }
}

/* =====================================================================
   SAKURA LP UPDATES
   ===================================================================== */

/* 1) Location: map on the left, text on the right (desktop) */
@media (min-width: 992px) {
    main section .location .sukoon_prime .sukoon_prime_details { flex-direction: row-reverse; }
    main section .location .sukoon_prime .sukoon_prime_details .sukoon_map img {
        margin-left: 0 !important;
        margin-right: auto !important;
    }
}

/* 2) Hero: no dark overlay on the banners (removed on request) */
header .hero_section .hero_section_image .swiper-wrapper .overlay-slide::after {
    content: none !important;
    background: none !important;
}
header .hero_section .hero_section_image .swiper-wrapper .overlay-slide::before {
    content: none !important;
    background: none !important;
}
@media (max-width: 991.98px) {
    header .hero_section .hero_section_image .swiper-wrapper .overlay-slide::before { content: none !important; }
    header .hero_section .hero_section_text { background: none !important; }
}

/* Hero heading: heavier weight so it reads clearly on the photo */
header .hero_section .hero_section_text .hero_section_hone h1#hero-title { font-weight: 600; }

/* 3) Portfolio: project name below the image, flip on hover unchanged */
main section .portfolio .portfolio_card { align-items: flex-start; }
#aboutus .portfolio_card .p_card {
    height: auto;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    box-shadow: none;
    border-radius: 0;
}
#aboutus .portfolio_card .p_card .p_card_inner {
    height: 200px;
    flex: 0 0 auto;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
#aboutus .portfolio_card .p_card h6 {
    margin: 16px 0 0;
    color: var(--enquirebuttoncolor);
    text-align: center;
}
@media (max-width: 991.98px) { #aboutus .portfolio_card .p_card .p_card_inner { height: 280px; } }
@media (max-width: 575.98px) {
    #aboutus .portfolio_card .p_card .p_card_inner { height: 250px; }
    #aboutus .portfolio_card .p_card h6 { margin-top: 12px; }
}

/* 4) + 5) Shared card for the two new sections */
main section .construction_update,
main section .bank_partner {
    width: 100%;
    background-color: #faf6f1;
    padding: 2.5rem 20px 3rem;
    border-radius: 20px;
    position: relative;
}
main section .construction_update h2,
main section .bank_partner h2 {
    color: var(--enquirebuttoncolor);
    margin-bottom: 0;
}
main section .construction_update h2 { font-weight: 400; text-align: center; }
main section .bank_partner h2 { text-align: center; margin-bottom: 2rem; }
@media (min-width: 992px) {
    main section .construction_update h2,
    main section .bank_partner h2 { font-size: var(--h2fontsize); }
}

/* 4) Banking partner marquee */
.bank_marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.bank_track {
    display: flex;
    width: max-content;
    animation: bankMarquee 45s linear infinite;
}
.bank_marquee:hover .bank_track { animation-play-state: paused; }
.bank_set {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 70px;
    padding-right: 70px;
}
.bank_set img {
    flex: 0 0 auto;
    height: 58px;
    width: auto;
    max-width: none;
    display: block;
}
@keyframes bankMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* 5) Construction update */
.construction_update .cu_head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 2rem;
    text-align: center;
}
.construction_update .cu_filters { display: flex; justify-content: center; gap: 12px; }
.construction_update .cu_filters select {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    min-width: 180px;
    padding: 8px 34px 8px 14px;
    border: 0;
    border-radius: 6px;
    background-color: var(--enquirebuttoncolor);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23fff'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    color: #fff;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
}
.construction_update .cu_filters select option { color: #000; background: #fff; }
.construction_update .cu_filters select:focus-visible { outline: 2px solid #d66d7b; outline-offset: 2px; }
.construction_update .cu-swiper {
    max-width: 800px;
    margin: 0 auto;
    border-radius: 15px;
    overflow: hidden;
}
.construction_update .const_img { display: block; }
.construction_update .const_img img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 15px;
}
.construction_update .cu-nav-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 25px;
}
.construction_update .cu-nav {
    width: 55px;
    height: 55px;
    padding-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1.5px solid var(--enquirebuttoncolor);
    border-radius: 50%;
    color: var(--enquirebuttoncolor);
    font-size: 26px;
    cursor: pointer;
    transition: background-color .3s ease, color .3s ease;
}
.construction_update .cu-nav:hover { background-color: var(--enquirebuttoncolor); color: #fff; }
/* only one image: no arrows */
.construction_update.cu-single .cu-nav-row,
#cuLightbox.cu-single .cu-lb-nav { display: none; }

/* Construction lightbox */
#cuLightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,.92);
    align-items: center;
    justify-content: center;
}
#cuLightbox.show { display: flex; }
#cuLightbox img { max-width: 90vw; max-height: 85vh; border-radius: 8px; }
#cuLightbox .cu-lb-close {
    position: fixed; top: 18px; right: 22px;
    color: #fff; font-size: 32px; background: none; border: none; cursor: pointer;
}
#cuLightbox .cu-lb-nav {
    position: fixed; top: 50%; transform: translateY(-50%);
    width: 70px; height: 70px; border: none; border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    color: #fff; font-size: 30px; background: rgba(255,255,255,.15); cursor: pointer;
}
#cuLightbox .cu-lb-nav:hover { background: var(--enquirebuttoncolor); }
#cuLightbox .cu-lb-prev { left: 14px; }
#cuLightbox .cu-lb-next { right: 14px; }

@media (max-width: 767.98px) {
    .construction_update .cu_filters { width: 100%; max-width: 420px; }
    .construction_update .cu_filters select { flex: 1 1 0; min-width: 0; font-size: 16px; }
    .construction_update .cu_head { margin-bottom: 1.5rem; }
    .construction_update .cu-nav { width: 48px; height: 48px; font-size: 22px; }
    .bank_set { gap: 44px; padding-right: 44px; }
    .bank_set img { height: 42px; }
    main section .bank_partner h2 { margin-bottom: 1.5rem; }
}
@media (max-width: 575.98px) {
    main section .construction_update,
    main section .bank_partner { padding: 2rem 14px 2.25rem; }
    #cuLightbox .cu-lb-nav { width: 44px; height: 44px; font-size: 20px; }
}

/* =====================================================================
   GARDEN PLAN (replaces Site Plan)
   ===================================================================== */
main section .offer_sukoon.garden_plan h2 { text-align: center; }
main section .offer_sukoon.garden_plan h2 em { font-style: italic; }
.garden_plan .offer_sukoon_image { padding: 30px 30px 36px; }
.garden_plan .garden_map { position: relative; max-width: 820px; margin: 0 auto 36px; cursor: zoom-in; }
.garden_plan .garden_map img { display: block; width: 100%; height: auto; margin: 0 auto; }
.garden_plan .garden_map_hint {
    position: absolute; right: 8px; bottom: 8px;
    padding: 4px 10px; border-radius: 20px;
    background: rgba(0,0,0,.55); color: #fff;
    font: 12px/1.4 'Hanken Grotesk', sans-serif; pointer-events: none;
}
.garden_plan .amenities-section {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px 28px; text-align: left;
}
.garden_plan .amenity-item { margin: 0; padding: 0; min-width: 0; }
.garden_plan .amenity-item .number {
    display: block; width: 44px; padding-bottom: 6px; margin-bottom: 8px;
        position: relative;
   color: var(--enquirebuttoncolor); font: 500 13px/1.2 'Hanken Grotesk', sans-serif;
}
.garden_plan .amenity-item .number::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0%;
    width: 120px;
    height: 1px;
    background: var(--enquirebuttoncolor);
}
.garden_plan .amenity-item h4 {
    margin: 0; color: #333;
    font: 400 15px/1.35 'Hanken Grotesk', sans-serif;
    overflow-wrap: anywhere;
}
@media (max-width: 991.98px)  { .garden_plan .amenities-section { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 20px; } }
@media (max-width: 767.98px) {
    .garden_plan .offer_sukoon_image { padding: 16px 14px 22px !important; }
    .garden_plan .garden_map { margin-bottom: 24px; }
    .garden_plan .amenities-section { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
    .garden_plan .amenity-item h4 { font-size: 13px; }
}
@media (max-width: 479.98px) { .garden_plan .amenities-section { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (hover: hover) and (min-width: 768px) { .garden_plan .garden_map_hint { display: none; } }
@media (prefers-reduced-motion: reduce) {
    .bank_marquee { overflow-x: auto; }
    .bank_track { animation: none; }
}

/* =====================================================================
   SAKURA LP UPDATES (Nov 2026) – scoped to this page's section IDs
   ===================================================================== */

/* ---------- 5) Location: map full width, white box below ---------- */
#location .sukoon_prime .sukoon_prime_details .sukoon_map { width: 100% !important; padding: 0 !important; }
#location .sukoon_prime .sukoon_prime_details .sukoon_map img {
    /* whole map visible in one screen; no clipping of the map's own rounded frame */
    width: auto !important; max-width: 100% !important; height: auto;
    max-height: calc(100vh - 140px); max-height: calc(100svh - 140px);
    object-fit: contain; margin: 0 auto !important; display: block;
    border-radius: 0 !important; overflow: visible;
}
@media (min-width: 992px) {
    #location .sukoon_prime .sukoon_prime_details {
        flex-direction: column !important; flex-wrap: nowrap; align-items: stretch; gap: 28px;
    }
    #location .sukoon_prime .sukoon_prime_details .sukoon_map { order: -1; }
    #location .sukoon_prime .sukoon_prime_details .sukoon_prime_details_right { width: 100% !important; padding: 2rem 2rem; }
    #location .sukoon_prime .sukoon_prime_details .sukoon_prime_details_right .sukoon_prime_details_right_main {
        display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px;
    }
    #location .sukoon_prime .sukoon_prime_details .sukoon_prime_details_right .sukoon_prime_details_right_main .sukoon_prime_details_right_main_left { display: contents; }
    #location .sukoon_prime .sukoon_prime_details .sukoon_prime_details_right .sukoon_prime_details_right_main .sukoon_prime_details_right_main_left .sukoon_prime_details_right_main_left_div { width: auto; justify-content: flex-start; }
    #location .sukoon_prime .sukoon_prime_details .sukoon_prime_details_right .sukoon_prime_details_right_main .sukoon_prime_details_right_main_left .sukoon_prime_details_right_main_left_div ul { margin-bottom: 0; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    #location .sukoon_prime .sukoon_prime_details .sukoon_prime_details_right .sukoon_prime_details_right_main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 6) Portfolio of Success: brochure page 28 layout ---------- */
#aboutus .pf_board {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 2.5rem; text-align: left;
    border-radius: 16px; overflow: hidden;
    border: 1px solid rgba(92, 36, 56, .12);
}
#aboutus .pf_cream { background-color: #f3ece3; }
#aboutus .pf_white { background-color: #ffffff; }

#aboutus .pf_head { padding: 40px 40px 4px; }
#aboutus .pf_head h2 {
    margin: 0; padding: 0; display: block; text-align: left;
    font-size: var(--h2fontsize); font-weight: 400; color: var(--enquirebuttoncolor);
}
#aboutus .pf_head h2::after {
    content: ""; position: static; transform: none; display: block;
    width: 90px; height: 1px; margin-top: 14px; background: var(--enquirebuttoncolor);
}
#aboutus .pf_head.pf_right { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; }
#aboutus .pf_head p {
    max-width: 470px; margin: 4px 0 0; text-align: right;
    font-size: 14px; line-height: 1.6; color: var(--enquirebuttoncolor);
}
#aboutus .pf_head.pf_right::after {
    content: ""; display: block; width: 90px; height: 1px; margin-top: 14px; background: var(--enquirebuttoncolor);
}

#aboutus .pf_item { display: flex; flex-direction: column; padding: 26px 40px 40px; min-width: 0; }
#aboutus .pf_logo { display: flex; align-items: flex-end; height: 64px; margin: 0 0 18px; }
#aboutus .pf_right .pf_logo { justify-content: flex-end; }
#aboutus .pf_logo img { height: 40px; width: auto; max-width: 100%; display: block; }
#aboutus .pf_logo img[src*="sukoon"] { height: 64px; }
#aboutus .pf_logo img[src*="pardos-okas-enclave"] { height: 34px; }

#aboutus .pf_media {
    position: relative; width: 100%; aspect-ratio: 2.2 / 1;
    overflow: hidden; border-radius: 4px; background: #e6ddd2; outline: none;
}
#aboutus .pf_media > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
#aboutus .pf_overlay {
    position: absolute; inset: 0; padding: 20px 28px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    background: rgba(92, 36, 56, .9); opacity: 0; visibility: hidden;
    transition: opacity .35s ease, visibility 0s linear .35s;
}
#aboutus .pf_overlay p { margin: 0; color: #fff; font-size: 14px; line-height: 1.55; text-align: center; }
#aboutus .pf_overlay a {
    color: #fff; font: 600 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .12em; text-transform: uppercase;
    text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.7); padding-bottom: 4px;
}
#aboutus .pf_media:hover .pf_overlay,
#aboutus .pf_media:focus-within .pf_overlay { opacity: 1; visibility: visible; transition: opacity .35s ease; }
#aboutus .pf_media:hover > img { transform: scale(1.04); }

#aboutus .pf_facts {
    display: flex; align-items: center; margin: 16px 0 0; padding: 0; list-style: none;
    color: var(--enquirebuttoncolor); font: 400 14px/1.35 'Hanken Grotesk', sans-serif;
}
#aboutus .pf_facts li { flex: 1 1 auto; text-align: center; padding: 0 10px; }
#aboutus .pf_facts li + li { border-left: 1px solid var(--enquirebuttoncolor); }
#aboutus .pf_facts li:first-child { text-align: left; padding-left: 0; }
#aboutus .pf_facts li:last-child { text-align: right; padding-right: 0; }

@media (min-width: 1400px) { #aboutus .pf_facts li { white-space: nowrap; } }
@media (max-width: 1399.98px) {
    /* equal columns so long details wrap evenly inside their own slot */
    #aboutus .pf_facts li { flex: 1 1 0; min-width: 0; text-align: center !important; padding: 0 8px !important; }
}
@media (max-width: 1199.98px) {
    #aboutus .pf_head { padding: 32px 30px 4px; }
    #aboutus .pf_item { padding: 22px 30px 32px; }
    #aboutus .pf_facts { font-size: 13px; }
}
@media (max-width: 991.98px) {
    #aboutus .pf_head h2 { font-size: clamp(26px, 3vw + 12px, 36px); }
    #aboutus .pf_head { padding: 28px 22px 4px; }
    #aboutus .pf_item { padding: 20px 22px 28px; }
    #aboutus .pf_logo { height: 52px; margin-bottom: 14px; }
    #aboutus .pf_logo img { height: 32px; }
    #aboutus .pf_logo img[src*="sukoon"] { height: 52px; }
    #aboutus .pf_logo img[src*="pardos-okas-enclave"] { height: 28px; }
    #aboutus .pf_overlay { padding: 14px 18px; gap: 8px; }
    #aboutus .pf_overlay p { font-size: 13px; line-height: 1.5; }
}
@media (max-width: 767.98px) {
    #aboutus .pf_board { grid-template-columns: 1fr; border: 0; border-radius: 14px; margin-top: 1.5rem; }
    #aboutus .pf_head { background: transparent; padding: 0 0 14px; text-align: center; align-items: center !important; }
    #aboutus .pf_head h2 { text-align: center; font-size: clamp(24px, 5vw + 8px, 30px); }
    #aboutus .pf_head h2::after { margin: 12px auto 0; width: 70px; }
    #aboutus .pf_head.pf_right { padding-bottom: 22px; }
    #aboutus .pf_head p { text-align: center; max-width: none; margin: 0; }
    #aboutus .pf_head.pf_right::after { display: none; }
    /* keep cream / white alternating once the cards stack */
    #aboutus .pf_item:nth-child(3), #aboutus .pf_item:nth-child(5) { background-color: #f3ece3; }
    #aboutus .pf_item:nth-child(4), #aboutus .pf_item:nth-child(6) { background-color: #ffffff; }
    #aboutus .pf_item:nth-child(3) { border-radius: 14px 14px 0 0; }
    #aboutus .pf_item:nth-child(6) { border-radius: 0 0 14px 14px; }
    #aboutus .pf_item { padding: 22px 18px 26px; }
    #aboutus .pf_logo, #aboutus .pf_right .pf_logo { justify-content: center; }
    #aboutus .pf_media { aspect-ratio: 16 / 9; }
}
@media (max-width: 575.98px) {
    #aboutus .pf_facts { font-size: 12px; line-height: 1.4; margin-top: 12px; }
    #aboutus .pf_overlay p { font-size: 12.5px; }
    #aboutus .pf_logo { height: 46px; }
    #aboutus .pf_logo img { height: 28px; }
    #aboutus .pf_logo img[src*="sukoon"] { height: 46px; }
    #aboutus .pf_logo img[src*="pardos-okas-enclave"] { height: 24px; }
}

/* ---------- 7) Floor plans slider ("It's in our nature to let life grow.")
   Uses its own skfp- class names so older .floor_plans rules in style.css
   cannot reach it; layout-critical properties are locked with !important. ---------- */
#floorplans .skfp {
    --skfp-ink: var(--enquirebuttoncolor, #1f1f1f);
    width: 100%; box-sizing: border-box; background-color: #f7efef;
    padding: 3rem 40px 3.25rem; border-radius: 20px; text-align: left;
}
#floorplans .skfp *, #floorplans .skfp *::before, #floorplans .skfp *::after { box-sizing: border-box; }
#floorplans .skfp-head {
    display: flex !important; flex-direction: row !important; align-items: flex-start; justify-content: space-between;
    gap: 24px; margin: 0 0 2.25rem;
}
#floorplans .skfp-head h2 {
    margin: 0 !important; padding: 0; text-align: left !important; color: var(--skfp-ink);
    font-weight: 400; text-transform: uppercase; line-height: 1.15; letter-spacing: .01em;
    font-size: clamp(24px, 3.4vw, 44px);
}
#floorplans .skfp-nav-row { display: flex !important; gap: 12px; flex: 0 0 auto; }
#floorplans .skfp-nav {
    position: static !important; margin: 0 !important;
    width: 96px; height: 96px; padding: 0 0 4px;
    display: flex !important; align-items: center; justify-content: center;
    background: transparent; border: 1px solid var(--skfp-ink); border-radius: 50% !important;
    color: var(--skfp-ink); font-size: 26px; line-height: 1; cursor: pointer;
    transition: background-color .3s ease, color .3s ease, opacity .3s ease;
}
#floorplans .skfp-nav::after { content: none !important; display: none !important; }
#floorplans .skfp-nav:hover, #floorplans .skfp-nav:focus-visible { background-color: var(--skfp-ink); color: #fff; outline: none; }
#floorplans .skfp-nav.swiper-button-disabled { opacity: .35; cursor: default; pointer-events: none; background: transparent; color: var(--skfp-ink); }

/* Slider track: always one row */
#floorplans .skfp-swiper { position: relative; width: 100% !important; overflow: hidden !important; touch-action: pan-y; margin: 0; }
#floorplans .skfp-swiper .swiper-wrapper {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    width: 100%; height: auto !important; margin: 0 !important; padding: 0 !important;
}
#floorplans .skfp-swiper .swiper-slide {
    flex-shrink: 0 !important; height: auto !important; margin-top: 0; margin-bottom: 0;
    float: none !important; display: block !important;
    width: calc((100% - 60px) / 3); margin-right: 30px; /* pre-init layout, Swiper overrides */
}
#floorplans .skfp-swiper.swiper-initialized .swiper-slide { margin-right: 0; }
#floorplans .skfp-card { display: flex; flex-direction: column; height: 100%; margin: 0; }
#floorplans .skfp-thumb {
    width: 100%; aspect-ratio: 4 / 3; padding: 26px; margin: 0;
    display: flex; align-items: center; justify-content: center;
    background: #fff; overflow: hidden; border-radius: 0;
}
#floorplans .skfp-thumb img {
    display: block !important; width: 100% !important; height: 100% !important; max-width: 100% !important;
    object-fit: contain !important; margin: 0 !important; border-radius: 0;
    -webkit-user-drag: none; user-select: none; -webkit-user-select: none; pointer-events: none;
}
#floorplans .skfp-caption {
    margin: 22px 0 0 !important; padding: 0; text-align: left !important; color: var(--skfp-ink);
    font: 400 16px/1.4 'Playfair Display', serif; text-transform: uppercase; letter-spacing: .02em;
}
/* [UPDATE 12-11-2026 v5] unit layout captions in bold: tower and type, then the configuration on its own line */
#floorplans .skfp-caption { font-weight: 600 !important; }
#floorplans .skfp-caption .skfp-config { display: block; margin-top: 2px; font-size: .9em; font-weight: 600; text-transform: none; letter-spacing: 0; }
/* unit layout plans open in the zoom popup on click */
#floorplans .skfp-thumb { cursor: zoom-in; }

@media (max-width: 1199.98px) {
    #floorplans .skfp-nav { width: 80px; height: 80px; font-size: 24px; }
    #floorplans .skfp-thumb { padding: 20px; }
}
@media (max-width: 991.98px) {
    #floorplans .skfp { padding: 2.5rem 28px 2.75rem; }
    #floorplans .skfp-head { align-items: center; margin-bottom: 1.75rem; }
    #floorplans .skfp-nav { width: 64px; height: 64px; font-size: 22px; }
    #floorplans .skfp-caption { font-size: 15px; margin-top: 16px !important; }
    #floorplans .skfp-swiper .swiper-slide { width: calc((100% - 22px) / 2); margin-right: 22px; }
}
@media (max-width: 767.98px) {
    #floorplans .skfp { padding: 2rem 18px 2.25rem; }
    #floorplans .skfp-head { gap: 14px; }
    #floorplans .skfp-head h2 br { display: none; }
    #floorplans .skfp-nav { width: 48px; height: 48px; font-size: 20px; }
    #floorplans .skfp-nav-row { gap: 8px; }
    #floorplans .skfp-thumb { padding: 14px; }
    #floorplans .skfp-caption { font-size: 14px; margin-top: 12px !important; }
}
@media (max-width: 575.98px) {
    #floorplans .skfp { padding: 1.75rem 14px 2rem; }
    #floorplans .skfp-head { margin-bottom: 1.25rem; }
    #floorplans .skfp-nav { width: 42px; height: 42px; font-size: 18px; }
    #floorplans .skfp-thumb { padding: 10px; }
    #floorplans .skfp-swiper .swiper-slide { width: 88%; margin-right: 14px; }
}
    /* ---------- 8) Location: nearby-places box under the map is hidden for now ---------- */
#location .sukoon_prime_details_right[hidden] { display: none !important; }

/* ---------- 9) Genesis features on mobile/tablet: 4 items in an even grid
   (4 across on tablets, 2 x 2 on phones) instead of 3 + 1 / 2 + 1 + 1 ---------- */
@media (max-width: 991.98px) {
    #genesis .genesis_text_main ul {
        display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 18px 14px !important; align-items: start;
    }
    #genesis .genesis_text_main li,
    #genesis .genesis_text_main li:last-child {
        grid-column: auto !important; width: auto !important; margin: 0 !important;
        display: flex !important; flex-direction: column; align-items: center; justify-content: flex-start;
        text-align: center; gap: 8px;
    }
    #genesis .genesis_text_main li > span { display: flex; align-items: center; justify-content: center; height: 40px; }
    #genesis .genesis_text_main li > span svg { width: 36px; height: 36px; }
}
@media (max-width: 767.98px) {
    /* Clean 2 x 2 matrix: equal cells, icons on one line, thin grid lines between cells */
    #genesis .genesis_text_main ul {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-rows: 1fr; gap: 0 !important; align-items: stretch !important;
    }
    #genesis .genesis_text_main li,
    #genesis .genesis_text_main li:last-child {
        justify-content: flex-start !important; align-items: center !important;
        height: auto !important; min-height: 0 !important;
        padding: 18px 10px !important; gap: 10px !important;
        border: 0 !important; border-radius: 0 !important;
    }
    #genesis .genesis_text_main li::before,
    #genesis .genesis_text_main li::after { content: none !important; display: none !important; }
    #genesis .genesis_text_main li:nth-child(odd)  { border-right: 1px solid rgba(255, 255, 255, .22) !important; }
    #genesis .genesis_text_main li:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .22) !important; }
    #genesis .genesis_text_main li > span { height: 36px; margin: 0 !important; padding: 0 !important; }
    #genesis .genesis_text_main li > span svg { width: 32px; height: 32px; }
    #genesis .genesis_text_main li h6 { margin: 0 !important; padding: 0 !important; border: 0 !important; line-height: 1.35; }
}

/* ---------- 10) Footer: butterfly sits above the address on small screens, never on top of it ---------- */
@media (max-width: 991.98px) {
    footer .footer_pera {
        display: flex !important; flex-direction: column; align-items: center; justify-content: center;
        gap: 10px; text-align: center; position: relative;
    }
    footer .footer_pera img {
        display: block !important; position: static !important; transform: none !important;
        width: 44px !important; height: auto !important; margin: 0 auto !important;
        top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    }
    footer .footer_pera p { margin: 0 !important; padding: 0 !important; text-align: center !important; }
}
@media (max-width: 575.98px) {
    footer .footer_pera p br { display: none; }
}
/* ---------- 11) [UPDATE 11-11-2026] Banner logo "cloud" removed on request
   (replaced by the left-side tint in the "sakura-updates-11nov" block below) ---------- */

/* ---------- A) RERA details as text (replaces the RERA image) ---------- */
.rera_info {
    color: #fff; text-align: right;   /* [UPDATE 11-11-2026 r2] right aligned */
    font-family: 'Hanken Grotesk', sans-serif; line-height: 1.4;
}
.rera_info .rera_title {
    display: block; margin: 0 0 2px;
    font-size: 15px; font-weight: 500;   /* [UPDATE 11-11-2026 r3] smaller */ letter-spacing: .04em; text-transform: uppercase;
}
.rera_info p { margin: 0; font-size: 12.5px; }   /* [UPDATE 11-11-2026 r3] smaller */
.rera_info .nw { white-space: nowrap; }
.rera_info a { color: #fff; text-decoration: none; }
.rera_info a:hover { text-decoration: underline; }
/* mobile strip above the banner */
.top_strip .rera_info { width: 100%; padding: 12px 0 0 19px; }
@media (max-width: 767.98px) {
    .rera_info .rera_title { font-size: 14px; }
    .rera_info p { font-size: 11.5px; }
}
@media (max-width: 380px) {
    .rera_info p { font-size: 11px; }
}

/* ---------- B) Banner: soft tint on the left so the logo and text read on every photo ---------- */
header .hero_section .hero_section_image::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(to right,
        rgba(38, 12, 22, .62) 0%,
        rgba(38, 12, 22, .46) 28%,
        rgba(38, 12, 22, .20) 48%,
        rgba(38, 12, 22, 0) 66%);
}
header .hero_section .hero_section_image .swiper-pagination { z-index: 3; }
/* [UPDATE 11-11-2026 r2] logo kept in its original colours (white version removed on request) */

/* ---------- C) Banner: logo and text moved up; gap above the logo = gap on its left ---------- */
@media (min-width: 992px) {
    header .hero_section .hero_section_text {
        top: 2.8rem;                       /* top edge of the banner photo */
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
    }
    /* left gap of the logo = 2% of the banner + 2rem, so the same value on top
       (3.85% here = 2% of the banner, because % margins use this box's width) */
    header .hero_section .hero_section_text .hero_section_hone { margin-top: calc(3.85% + 2rem) !important; }
}
@media (max-width: 991.98px) {
    /* text stays at the bottom on tablets/phones; lifted a little and the tint runs from the bottom-left
       ([UPDATE 12-11-2026] superseded by block J) */
    header .hero_section .hero_section_text { padding-bottom: 72px !important; }
    header .hero_section .hero_section_image::after {
        background:
            linear-gradient(to top, rgba(38, 12, 22, .62) 0%, rgba(38, 12, 22, .38) 40%, rgba(38, 12, 22, 0) 72%),
            linear-gradient(to right, rgba(38, 12, 22, .25) 0%, rgba(38, 12, 22, 0) 60%);
    }
}
@media (max-width: 767.98px) {
    header .hero_section .hero_section_text { padding-bottom: 60px !important; }
    header .hero_section .hero_section_image .swiper-pagination { bottom: 22px !important; }
}

/* ---------- D) Location: "Sector 90, Gurugram" in bold + map legend ---------- */
#location .sukoon_prime_details_left .eyebrow { font-weight: 700; font-size: 15px; }
/* [UPDATE 11-11-2026 r10] map legend styles removed: the new map image has its own legend */

/* ---------- E) Portfolio of Success: brochure layout (logo, text, details | photo) ---------- */
#aboutus .pf_board .pf_cream { background-color: #fcecec; }
#aboutus .pf_board .pf_head.pf_left { background-color: #fcecec; }
#aboutus .pf_card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 28px; align-items: start; }
#aboutus .pf_card .pf_logo { justify-content: flex-start !important; margin-bottom: 16px; }
#aboutus .pf_card .pf_desc {
    margin: 0 0 14px; text-align: left;
    font-size: 14px; line-height: 1.6; color: var(--enquirebuttoncolor);
}
#aboutus .pf_card .pf_details { margin: 0 0 12px; padding: 0; list-style: none; }
#aboutus .pf_card .pf_details li {
    margin: 0; font: 400 13.5px/1.6 'Hanken Grotesk', sans-serif; color: var(--enquirebuttoncolor);
}
#aboutus .pf_card .pf_details li.pf_gap { margin-top: 10px; }
#aboutus .pf_card .pf_details li strong { font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
#aboutus .pf_card .pf_link {
    display: inline-block; margin-top: 6px; padding-bottom: 3px;
    color: var(--enquirebuttoncolor); font: 600 12px/1 'Hanken Grotesk', sans-serif;
    letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
    border-bottom: 1px solid var(--enquirebuttoncolor);
}
#aboutus .pf_card .pf_photo { width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; background: #e6ddd2; }
#aboutus .pf_card .pf_photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
#aboutus .pf_card:hover .pf_photo img { transform: scale(1.03); }
@media (max-width: 1199.98px) {
    /* half-width cards are too narrow for two columns: photo goes under the text */
    #aboutus .pf_card { grid-template-columns: 1fr; gap: 18px; }
    #aboutus .pf_card .pf_photo { aspect-ratio: 4 / 3; }
}
@media (max-width: 767.98px) {
    /* stacked cards keep alternating pink / white; heading row has no background */
    #aboutus .pf_board .pf_head, #aboutus .pf_board .pf_head.pf_left { background-color: transparent; }
    #aboutus .pf_board .pf_item:nth-child(3), #aboutus .pf_board .pf_item:nth-child(5) { background-color: #fcecec; }
    #aboutus .pf_board .pf_item:nth-child(4), #aboutus .pf_board .pf_item:nth-child(6) { background-color: #ffffff; }
    #aboutus .pf_card .pf_logo { justify-content: center !important; }
    #aboutus .pf_card .pf_desc { text-align: center; }
    #aboutus .pf_card .pf_details li { text-align: center; }
    #aboutus .pf_card .pf_info { text-align: center; }
}

/* ---------- F) [UPDATE 11-11-2026 r8] Portfolio cards (replaces the r4 version).
   Desktop: text column is exactly as tall as the main photo, extra text scrolls inside it,
   "Visit Website" stays visible at the bottom, "Life at" photos sit in a row under the card.
   All four cards end up the same size. Any photo opens in a popup slider (#pfLightbox). ---------- */
#aboutus .pf_card { grid-template-columns: 1fr; column-gap: 28px; row-gap: 16px; align-items: stretch; }   /* phones: one column */
#aboutus .pf_card .pf_info { display: flex; flex-direction: column; min-width: 0; }
#aboutus .pf_card .pf_scroll {
    flex: 1 1 auto; min-height: 0;
    scrollbar-width: thin; scrollbar-color: rgba(92, 36, 56, .45) transparent; overscroll-behavior: contain;
}
#aboutus .pf_card .pf_scroll::-webkit-scrollbar { width: 4px; }
#aboutus .pf_card .pf_scroll::-webkit-scrollbar-thumb { background: rgba(92, 36, 56, .45); border-radius: 4px; }
/* soft fade at the bottom while more text is hidden (class set by the script near </body>) */
#aboutus .pf_card .pf_scroll.pf_more {
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
}
#aboutus .pf_card .pf_link { flex: 0 0 auto; align-self: flex-start; margin-top: 14px; }
#aboutus .pf_card .pf_photo img, #aboutus .pf_card .pf_thumbs img { cursor: zoom-in; }
#aboutus .pf_life_row { grid-column: 1 / -1; min-width: 0; }
#aboutus .pf_life {
    margin: 0 0 8px; text-align: left;
    font: italic 400 16px/1.2 'Playfair Display', serif; color: var(--enquirebuttoncolor);
}
#aboutus .pf_thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
#aboutus .pf_thumbs img { width: 100%; height: 110px; object-fit: cover; display: block; border-radius: 3px; transition: opacity .2s ease; }
#aboutus .pf_thumbs img:hover { opacity: .85; }
@media (min-width: 768px) {
    /* tablets and desktops: text | photo side by side */
    #aboutus .pf_card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
    #aboutus .pf_card .pf_photo { aspect-ratio: 4 / 5; }
    /* height:0 + min-height:100% = the text column takes the photo's height, never more */
    #aboutus .pf_card .pf_info { height: 0; min-height: 100%; }
    #aboutus .pf_card .pf_scroll { overflow-y: auto; padding-right: 12px; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    #aboutus .pf_card { column-gap: 18px; }
    #aboutus .pf_thumbs img { height: 90px; }
}
@media (max-width: 767.98px) {
    #aboutus .pf_card .pf_link { align-self: center; }
    #aboutus .pf_life { text-align: center; }
    #aboutus .pf_thumbs img { height: 80px; }
}

/* Portfolio popup slider */
#pfLightbox {
    display: none; position: fixed; inset: 0; z-index: 9999;
    background: rgba(0, 0, 0, .92); align-items: center; justify-content: center; flex-direction: column;
}
#pfLightbox.show { display: flex; }
#pfLightbox img {
    width: min(90vw, 760px); max-height: 80vh; object-fit: contain; border-radius: 8px;
}
#pfLightbox .pf-lb-cap { margin-top: 12px; color: rgba(255, 255, 255, .75); font: 400 13px/1.4 'Hanken Grotesk', sans-serif; text-align: center; }
#pfLightbox .pf-lb-close {
    position: fixed; top: 18px; right: 22px; color: #fff; font-size: 32px; background: none; border: none; cursor: pointer;
}
#pfLightbox .pf-lb-nav {
    position: fixed; top: 50%; transform: translateY(-50%);
    width: 70px; height: 70px; border: none; border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    color: #fff; font-size: 30px; background: rgba(255, 255, 255, .15); cursor: pointer;
}
#pfLightbox .pf-lb-nav:hover { background: var(--enquirebuttoncolor); }
#pfLightbox .pf-lb-prev { left: 14px; }
#pfLightbox .pf-lb-next { right: 14px; }
@media (max-width: 575.98px) { #pfLightbox .pf-lb-nav { width: 44px; height: 44px; font-size: 20px; } }

/* [UPDATE 11-11-2026 r10] site plan uses the full column width
   (an older offer-section rule, ".offer_sukoon_image img { width: 75% }", was shrinking it) */
main section .garden_plan .garden_map img { width: 100% !important; }

/* ---------- H) [UPDATE 11-11-2026 r8] Site plan: map on the left, points 1-31 on the right (desktop) ---------- */
@media (min-width: 992px) {
    /* [UPDATE 12-11-2026 v2] the plan + legend grid now lives inside slide 1 of the carousel */
    .garden_plan .gp_slide--legend .gp_slide_body {
        display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);   /* [UPDATE 11-11-2026 r10] site plan bigger (was 1.25fr) */
        gap: 32px; align-items: center;
    }
    .garden_plan .gp_layout .garden_map { max-width: none; margin: 0; }
    .garden_plan .gp_layout .amenities-section {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(16, auto); grid-auto-flow: column;   /* 1-16 in the first column, 17-31 in the second */
        gap: 0 28px;
    }
    .garden_plan .gp_layout .amenity-item {
        display: flex; align-items: baseline; gap: 10px;
        padding: 5px 0; border-bottom: 1px solid rgba(92, 36, 56, .18);
    }
    .garden_plan .gp_layout .amenity-item .number { width: 26px; flex: 0 0 26px; padding: 0; margin: 0; font-weight: 600; }
    .garden_plan .gp_layout .amenity-item .number::after { display: none; }
    .garden_plan .gp_layout .amenity-item h4 { font-size: 13.5px; }
    .garden_plan .gp_layout .amenities-section { gap: 0 20px; }
    .garden_plan .gp_layout .amenity-item { padding: 4px 0; gap: 8px; }
    .garden_plan .gp_layout .amenity-item .number { width: 22px; flex-basis: 22px; }
}

/* [UPDATE 12-11-2026] site plan carousel: heading above each plan, caption below it (as in the brochure) */
.garden_plan .gp_carousel { min-width: 0; }
.garden_plan .gp_swiper { overflow: hidden; }
.garden_plan .gp_slide { padding-bottom: 4px; height: auto; display: flex; flex-direction: column; }   /* [UPDATE 12-11-2026 r2] all slides as tall as the tallest */
/* [UPDATE 12-11-2026 v2] each plan is a figure: image with its caption at the bottom-left */
.garden_plan .gp_slide_body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.garden_plan .gp_figure { margin: 0; width: 100%; }
.garden_plan .gp_figure img { display: block; width: 100%; height: auto; }
.garden_plan .gp_figure .gp_caption { padding-top: 14px; }
/* slide 2 (combined plan, no legend): centred and as large as the slide allows; on desktop fitHeight()
   in the script below caps its size so both slides stay the same height (nothing moves on slide change) */
.garden_plan .gp_slide--full .gp_figure { margin: 0 auto; }
/* one legend per screen size: beside the plan on desktop, below the carousel on phones/tablets */
.garden_plan .gp_legend--mobile { display: none; }
@media (max-width: 991.98px) {
    .garden_plan .gp_legend--desktop { display: none; }
    .garden_plan .gp_legend--mobile { display: block; margin-top: 8px; }
    /* same compact list as on desktop: number and name on one line, 1-16 in the first column, 17-31 in the second */
    .garden_plan .gp_legend--mobile .amenities-section {
        display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(16, auto); grid-auto-flow: column;
        gap: 0 16px; margin: 0; padding: 0;
    }
    .garden_plan .gp_legend--mobile .amenity-item {
        display: flex !important; align-items: baseline; gap: 6px; width: auto !important;
        margin: 0 !important; padding: 5px 0 !important; border-bottom: 1px solid rgba(92, 36, 56, .18) !important;
    }
    .garden_plan .gp_legend--mobile .amenity-item .number {
        width: 22px; flex: 0 0 22px; margin: 0 !important; padding: 0 !important; border: 0 !important;
        font-weight: 600; font-size: 12.5px;
    }
    .garden_plan .gp_legend--mobile .amenity-item .number::after { display: none; }
    .garden_plan .gp_legend--mobile .amenity-item h4 { margin: 0 !important; font-size: 12.5px; line-height: 1.3; }
}
main section .offer_sukoon.garden_plan .gp_slide_title {
    margin: 0 0 22px; text-align: left; color: #bc596d;
    font-family: 'Playfair Display', serif; font-weight: 400;
    font-size: clamp(24px, 1.6vw + 14px, 38px); line-height: 1.2;
}
main section .offer_sukoon.garden_plan .gp_slide_title em { font-style: italic; }
.garden_plan .gp_carousel .garden_map { max-width: none; margin: 0; }
.garden_plan .gp_caption { margin-bottom: 0; text-align: left; line-height: 1.25; }
.garden_plan .gp_caption_title {
    display: block; color: #bc596d;
    font: italic 400 clamp(20px, 1vw + 14px, 28px)/1.2 'Playfair Display', serif;
}
.garden_plan .gp_caption_sub {
    display: block; margin-top: 4px; color: #5f5355;
    font: 400 13px/1.3 'Hanken Grotesk', sans-serif; letter-spacing: .08em; text-transform: uppercase;
}
.garden_plan .gp_nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.garden_plan .gp_nav button {
    width: 40px; height: 40px; border-radius: 50%; padding: 0; cursor: pointer;
    border: 1px solid var(--enquirebuttoncolor); background: transparent; color: var(--enquirebuttoncolor);
    font-size: 18px; line-height: 1; transition: background .2s, color .2s;
}
.garden_plan .gp_nav button:hover { background: var(--enquirebuttoncolor); color: #fff; }
.garden_plan .gp_dots { position: static; width: auto !important; display: flex; gap: 6px; }
.garden_plan .gp_dots .swiper-pagination-bullet { margin: 0 !important; background: var(--enquirebuttoncolor); opacity: .35; }
.garden_plan .gp_dots .swiper-pagination-bullet-active { opacity: 1; }
@media (max-width: 767.98px) {
    main section .offer_sukoon.garden_plan .gp_slide_title { font-size: 22px; margin-bottom: 14px; }
    .garden_plan .gp_nav { margin: 14px 0 24px; }
}

/* [UPDATE 12-11-2026] "Legend" heading above the site plan points */
.garden_plan .gp_legend_title {
    margin: 0 0 14px; padding-bottom: 8px; text-align: left;
    color: var(--enquirebuttoncolor);
    font: 600 20px/1.2 'Hanken Grotesk', sans-serif; text-transform: uppercase; letter-spacing: 1.5px;
    border-bottom: 1px solid var(--enquirebuttoncolor);
}
@media (max-width: 991.98px) { .garden_plan .gp_legend_title { font-size: 18px; margin-bottom: 18px; } }

/* ---------- G) [UPDATE 11-11-2026 r6] Banner: soft light wash from the left (as in the brochure pages),
   red logo in its own colours, heading in brand maroon. Replaces the tint/layers of B and r5. ---------- */
header .hero_section .hero_section_image::after {
    background: linear-gradient(to right,
        rgba(255, 250, 248, .88) 0%,
        rgba(255, 250, 248, .80) 24%,
        rgba(255, 250, 248, .45) 40%,
        rgba(255, 250, 248, .12) 52%,
        rgba(255, 250, 248, 0) 60%);
}
header .hero_section .hero_section_text,
header .hero_section .hero_section_text .hero_section_hone h1,
header .hero_section .hero_section_text .hero_section_pera p { color: var(--enquirebuttoncolor) !important; }
header .hero_section .hero_section_text .hero_section_pera { border-top-color: var(--enquirebuttoncolor) !important; }
/* butterfly is a white image: tint it maroon so it shows on the light wash */
header .hero_section .hero_section_text .hero_butterfly { filter: brightness(0) saturate(100%) invert(17%) sepia(26%) saturate(2400%) hue-rotate(305deg) brightness(92%); }
header .hero_section .hero_section_image { --swiper-pagination-color: var(--enquirebuttoncolor); --swiper-pagination-bullet-inactive-color: var(--enquirebuttoncolor); }
header .hero_section .hero_section_image .swiper-pagination .swiper-pagination-bullet { background-color: var(--enquirebuttoncolor) !important; }
/* [UPDATE 11-11-2026 r9] banner line under the heading: start it at the photo's left edge, not outside it.
   The text box starts 2% of the banner from the frame edge, the photo starts 2rem in;
   3.85% of the text box (52% wide) = 2% of the banner. */
@media (min-width: 993px) {
    header .hero_section .hero_section_text .hero_section_pera {
        width: auto !important;
        margin-left: calc(2rem - 3.85% + 2px) !important;   /* +2px avoids a 1px overhang from rounding */
    }
}
@media (min-width: 992px) and (max-width: 992.98px) {
    /* at exactly 992px style.css changes the frame padding to 1rem and the text box starts at the frame edge */
    header .hero_section .hero_section_text .hero_section_pera { width: auto !important; margin-left: 1rem !important; }
}
/* [UPDATE 11-11-2026 r7] logo and heading show as soon as the banner appears
   (style.css kept them hidden until the slider script had loaded) */
header .hero_section .hero_section_text { opacity: 1 !important; transition: none !important; }
@media (max-width: 991.98px) {
    /* tablets/phones: text sits at the bottom, so the wash rises from the bottom
       ([UPDATE 12-11-2026] superseded by block J) */
    header .hero_section .hero_section_image::after {
        background: linear-gradient(to top,
            rgba(255, 250, 248, .92) 0%,
            rgba(255, 250, 248, .85) 50%,
            rgba(255, 250, 248, .40) 66%,
            rgba(255, 250, 248, 0) 80%);
    }
}
@media (max-width: 767.98px) {
    header .hero_section .hero_section_image::after {
        background: linear-gradient(to top,
            rgba(255, 250, 248, .93) 0%,
            rgba(255, 250, 248, .86) 44%,
            rgba(255, 250, 248, .45) 62%,
            rgba(255, 250, 248, 0) 78%);
    }
}

/* ---------- I) [UPDATE 12-11-2026] Banner: butterfly after the last word, shorter line (tablet/phone layout: see block J) ---------- */
/* butterfly sits right after the last word of the heading (all screen sizes) */
header .hero_section .hero_section_text .hero_section_hone h1 .hero_lastword { white-space: nowrap; }
header .hero_section .hero_section_text .hero_section_hone h1 .hero_butterfly {
    position: relative !important; display: inline-block !important;
    top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
    width: .7em !important; max-width: none !important; height: auto !important;   /* [UPDATE 12-11-2026 r3] smaller (was 1.1em) */
    margin: 0 0 0 .25em !important; vertical-align: .05em;
    /* [UPDATE 12-11-2026 r3] flaps in place on every screen size, so it never flies over the text */
    transform-origin: 50% 70%;
    animation: heroButterflyFlap 1.6s ease-in-out infinite !important;
}
/* the line under the heading: its width is set by fitHeroLine() to end with the longest line of the heading */
header .hero_section .hero_section_text .hero_section_pera { box-sizing: border-box; max-width: none; }

/* ---------- J) [UPDATE 12-11-2026 r2] Banner on tablets/phones (client feedback):
   logo at the top, heading and line at the bottom, photo kept clear in the middle.
   Instead of one big wash, the logo gets its own soft backdrop and only the bottom of the photo is lightened behind the text. ---------- */
@media (max-width: 991.98px) {
    /* the text box covers the whole banner: logo row at the top, heading and line pushed to the bottom */
    header .hero_section .hero_section_text {
        top: 0 !important; bottom: 0 !important;
        display: flex !important; flex-direction: column !important;
        justify-content: flex-start !important; align-items: flex-start !important;
        gap: 0 !important;
        padding: 34px 24px 56px !important;   /* [UPDATE 12-11-2026 r4] logo a little lower (was 18px); bottom padding leaves room for the slider dots */
    }
    header .hero_section .hero_section_text .hero_section_hone { display: contents !important; }
    header .hero_section .hero_section_text .hero_logo_row { margin-bottom: auto !important; }
    header .hero_section .hero_section_text .hero_section_hone h1#hero-title { margin: 0 !important; }
    header .hero_section .hero_section_text .hero_section_pera { margin-top: 12px !important; }

    /* [UPDATE 12-11-2026 r3] soft white fog behind the logo (replaces the round white disc): no hard edge, fades into the photo */
    header .hero_section .hero_section_text .hero_logo_row { position: relative; isolation: isolate; }
    header .hero_section .hero_section_text .hero_logo_row::before {
        content: ""; position: absolute; z-index: -1; pointer-events: none;
        top: -40px; right: -56px; bottom: -36px; left: -44px;
        background:
            radial-gradient(ellipse 50% 46% at 48% 50%, rgba(255, 250, 248, .82) 0%, rgba(255, 250, 248, .55) 45%, rgba(255, 250, 248, 0) 100%),
            radial-gradient(ellipse 34% 30% at 26% 36%, rgba(255, 250, 248, .45) 0%, rgba(255, 250, 248, 0) 100%),
            radial-gradient(ellipse 36% 32% at 74% 64%, rgba(255, 250, 248, .40) 0%, rgba(255, 250, 248, 0) 100%);
        filter: blur(10px);
    }

    /* no wash over the photo except a light band at the bottom, behind the heading and line */
    header .hero_section .hero_section_image::after {
        background: linear-gradient(to top,
            rgba(255, 250, 248, .90) 0%,
            rgba(255, 250, 248, .80) 24%,
            rgba(255, 250, 248, .40) 38%,
            rgba(255, 250, 248, 0) 52%) !important;
    }

    /* smaller butterfly (it flaps in place, see block I) */
    header .hero_section .hero_section_text .hero_section_hone h1 .hero_butterfly {
        width: .72em !important; margin-left: .2em !important;
    }
}
@media (max-width: 767.98px) {
    header .hero_section .hero_section_text { padding: 30px 18px 52px !important; }   /* [UPDATE 12-11-2026 r4] logo a little lower (was 14px) */
    header .hero_section .hero_section_text .hero_section_hone #hero-logo { width: 104px !important; max-width: 104px !important; }
    header .hero_section .hero_section_text .hero_section_hone h1 .hero_butterfly { width: .65em !important; }
}
/* [UPDATE 12-11-2026 r5] heading and line moved up from the bottom, so on a phone they are in view together with the logo
   without scrolling; a soft fog behind them (like the logo's) keeps them readable while the photo stays clear */
@media (max-width: 991.98px) {
    header .hero_section .hero_section_text .hero_section_pera {
        margin-bottom: calc(75vw * .14) !important;                  /* fallback for older browsers */
        margin-bottom: calc(min(75vw, 82svh) * .14) !important;      /* [UPDATE 12-11-2026 r6] about 14% of the banner height on tablets (was 22%) */
    }
    header .hero_section .hero_section_text .hero_section_hone h1#hero-title { position: relative; isolation: isolate; }
    header .hero_section .hero_section_text .hero_section_hone h1#hero-title::before {
        content: ""; position: absolute; z-index: -1; pointer-events: none;
        top: -26px; right: -34px; bottom: -48px; left: -30px;          /* bottom reaches past the line under the heading */
        background: radial-gradient(ellipse 52% 50% at 46% 52%, rgba(255, 250, 248, .85) 0%, rgba(255, 250, 248, .6) 50%, rgba(255, 250, 248, 0) 100%);
        filter: blur(10px);
    }
    /* the bottom band of the photo is no longer needed behind the text: only a light touch for the slider dots */
    header .hero_section .hero_section_image::after {
        background: linear-gradient(to top, rgba(255, 250, 248, .55) 0%, rgba(255, 250, 248, 0) 16%) !important;
    }
}
@media (max-width: 767.98px) {
    header .hero_section .hero_section_text .hero_section_pera {
        margin-bottom: calc(125vw * .06) !important;                 /* fallback for older browsers */
        margin-bottom: calc(min(125vw, 78svh) * .06) !important;     /* [UPDATE 12-11-2026 v7] heading closer to the slider dots on phones (was 18%) */
    }
}

/* ---------- K) [UPDATE 12-11-2026 v2] New banners ---------- */
/* desktop: one fixed frame for every slide, so the banner never changes height */
@media (min-width: 992px) {
    header .hero_section .hero_section_image .swiper-slide img {
        aspect-ratio: 1167 / 574; height: auto !important; object-fit: cover; object-position: center;   /* [v3] same height as the earlier banners (was 6405 / 4101, taller) */
    }
    /* text-on-image version: keep the bottom of the photo in the frame, so the printed heading and the
       "Where Life Blooms" signature are never cut by the wider frame (only plain photo is trimmed at the top) */
    header .hero_section.hero--text-version .hero_section_image .swiper-slide[data-baked="1"] img { object-position: center bottom; }
    /* heading on the right half for photos whose empty side is the right (see setHeroLayout) */
    header .hero_section.hero--right .hero_section_text {
        transform: translateX(34.615%) !important; -webkit-transform: translateX(34.615%) !important;   /* 44% of the banner = 84.615% of the 52%-wide text box */
    }
    header .hero_section.hero--right .hero_section_image::after {
        background: linear-gradient(to left,
            rgba(255, 250, 248, .88) 0%,
            rgba(255, 250, 248, .80) 24%,
            rgba(255, 250, 248, .45) 40%,
            rgba(255, 250, 248, .12) 52%,
            rgba(255, 250, 248, 0) 60%) !important;
    }
    /* soft fog behind the logo, so it reads on every photo whichever side the heading is on */
    header .hero_section .hero_section_text .hero_logo_row { position: relative; isolation: isolate; }
    header .hero_section .hero_section_text .hero_logo_row::before {
        content: ""; position: absolute; z-index: -1; pointer-events: none;
        top: -48px; bottom: -44px; left: -52px; width: calc(clamp(110px, 10vw + 40px, 165px) + 110px);
        background:
            radial-gradient(ellipse 50% 46% at 48% 50%, rgba(255, 250, 248, .82) 0%, rgba(255, 250, 248, .55) 45%, rgba(255, 250, 248, 0) 100%),
            radial-gradient(ellipse 34% 30% at 26% 36%, rgba(255, 250, 248, .45) 0%, rgba(255, 250, 248, 0) 100%),
            radial-gradient(ellipse 36% 32% at 74% 64%, rgba(255, 250, 248, .40) 0%, rgba(255, 250, 248, 0) 100%);
        filter: blur(12px);
    }
}
/* phones/tablets: each photo is cropped around its subject (set per slide with --hero-pos) */
@media (max-width: 991.98px) {
    header .hero_section .hero_section_image .swiper-slide img[class*="hero-pos-"] { object-position: var(--hero-pos) center !important; }
}
/* text-on-image version only (index-text-banners.php, class hero--text-version on the banner):
   phones use a square frame (the 4:5 frame would cut the printed text) and a smaller logo;
   tablets show the centre of the photo, where the printed text always fits */
@media (max-width: 767.98px) {
    header .hero_section.hero--text-version .hero_section_image { aspect-ratio: 1 / 1 !important; }
    header .hero_section.hero--text-version .hero_section_text { padding-top: 16px !important; }
    header .hero_section.hero--text-version .hero_section_text .hero_section_hone #hero-logo { width: 84px !important; max-width: 84px !important; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    header .hero_section.hero--text-version .hero_section_image .swiper-slide[data-baked="1"] img[class*="hero-pos-"] { object-position: 50% center !important; }
}
/* slides whose image already carries the heading (text-on-image version): no HTML heading, line or wash */
header .hero_section.hero--baked .hero_section_text .hero_section_hone h1#hero-title,
header .hero_section.hero--baked .hero_section_text .hero_section_pera { visibility: hidden !important; }
header .hero_section.hero--baked .hero_section_image::after { background: none !important; }

@keyframes heroButterflyFlap {
    0%, 100% { transform: rotate(-6deg) scaleX(1); }
    50%      { transform: rotate(4deg) scaleX(.78); }
}
@media (prefers-reduced-motion: reduce) {
    header .hero_section .hero_section_text .hero_section_hone h1 .hero_butterfly { animation: none !important; }
}

/* [UPDATE 12-11-2026 r3] mobile menu opens above the banner (the banner logo was showing on top of the menu):
   the banner keeps its own layers to itself, and the navbar and its menu sit above it */
header .hero_section { position: relative; z-index: 0; }
header .navbar { z-index: 1040; }
header .navbar #collapsibleNavbar { z-index: 1041; }

/* [UPDATE 12-11-2026 r4] phone menu: opens right where the maroon header strip ends (joined, square top corners),
   and no empty space after "About Us" (the phone number item is hidden on phones) */
@media (max-width: 767.98px) {
    header .navbar > .container-fluid { position: relative; }
    header .navbar #collapsibleNavbar {
        position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important;
        width: auto !important; margin: 0 !important;
        border-top-left-radius: 0 !important; border-top-right-radius: 0 !important;
    }
    /* [UPDATE 12-11-2026 r5] no extra space under "About Us": the menu ends one item-gap below it */
    header .navbar #collapsibleNavbar { height: auto !important; min-height: 0 !important; padding-bottom: 0 !important; }
    /* [UPDATE 13-11-2026] square top corners (the menu is joined to the maroon strip), rounded bottom corners,
       and the same space under the last item as between the items */
    header .navbar #collapsibleNavbar .navbar-nav {
        margin-bottom: 0 !important; padding-bottom: 18px !important;
        border-top-left-radius: 0 !important; border-top-right-radius: 0 !important;
        border-bottom-left-radius: 20px !important; border-bottom-right-radius: 20px !important;
    }
    header .navbar #collapsibleNavbar .navbar-nav .nav-item:nth-last-child(2) { margin-bottom: 0 !important; padding-bottom: 0 !important; }
    header .navbar #collapsibleNavbar .navbar-nav .nav-item-phone { display: none !important; }
}

/* [UPDATE 12-11-2026 r6] stacking order, lowest to highest:
   banner (0) < phone button and mobile CTA bar (1000) < header and its menu (1040-1041)
   < side buttons and enquiry/brochure forms (1050-1060) < lightboxes (9999).
   The forms used to sit under the header on desktop, and the phone button over the forms on phones. */
body .phone-img { z-index: 1000 !important; }
body .enquire_button, body .brochure_button { z-index: 1050 !important; }
body .enquire_form, body .brochure_form { z-index: 1060 !important; }
@media (max-width: 767.98px) {
    body .enquire_button, body .brochure_button { z-index: 1000 !important; }   /* bottom CTA bar on phones */
}

/* =====================================================================
   Moved out of index.php on 12-11-2026: the map popup <style> block from the
   location section and every inline style="" attribute, now as classes.
   ===================================================================== */
/* map popup (location section) */
    .sukoon_map img {
        cursor: pointer;
    }

    /* Popup */
    .map-popup {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 9999;
        background: rgba(0, 0, 0, 0.85);
        align-items: center;
        justify-content: center;
    }

    /* Close button */
    .close-map {
        position: absolute;
        top: 20px;
        right: 30px;
        color: #fff;
        font-size: 40px;
        cursor: pointer;
        z-index: 10;
    }

    /* Image area */
    .map-zoom-wrapper {
        width: 90%;
        height: 85vh;
        overflow: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Popup image */
    #popupMap {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        transition: transform 0.3s ease;
    }

    /* Zoom buttons */
    .zoom-controls {
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 10px;
    }

    .zoom-controls button {
        width: 45px;
        height: 45px;
        border: 0;
        border-radius: 50%;
        background: #fff;
        color: #111;
        font-size: 25px;
        cursor: pointer;
    }

/* banner heading and its (empty) description line: fonts (the slider script also sets them) */
#hero-title { font-family: 'Playfair Display', serif; }
#hero-desc  { font-family: 'Hanken Grotesk', sans-serif; }

/* sections hidden for now (home loans) */
.section-hidden { display: none !important; }

/* banner: where each photo is cropped on phones/tablets (used with the rule "img[class*=hero-pos-]") */
.hero-pos-31 { --hero-pos: 31%; }
.hero-pos-33 { --hero-pos: 33%; }
.hero-pos-62 { --hero-pos: 62%; }
.hero-pos-67 { --hero-pos: 67%; }
.hero-pos-68 { --hero-pos: 68%; }
.hero-pos-75 { --hero-pos: 75%; }
.hero-pos-85 { --hero-pos: 85%; }
.hero-pos-95 { --hero-pos: 95%; }
.hero-pos-100 { --hero-pos: 100%; }

/* [UPDATE 12-11-2026 v4] location map: the legend is printed at the very left edge of the image,
   so give the map some inner space on all sides (the image background is transparent) */
#location .sukoon_map #mapImage {
    box-sizing: border-box; width: 100%; height: auto;
    padding: clamp(12px, 2vw, 28px);
}

/* [UPDATE 12-11-2026 v5] zoom popup: the unit layout plans and the location map have transparent
   backgrounds, so the enlarged image sits on white to stay readable over the dark overlay */
.map-popup #popupMap { background: #fff; padding: 10px; box-sizing: border-box; border-radius: 8px; }

/* [UPDATE 12-11-2026 v6] RERA block in bold: "RERA Number", the registration number and date, and the
   Haryana RERA link (header on desktop, top strip on phones) */
.rera_info .rera_bold, p.rera_no, p.rera_no .nw, p.rera_link, p.rera_link a { font-weight: 700 !important; }

/* [UPDATE 12-11-2026] disclaimer: the client's text has four paragraphs, keep a little space between them */
.disclaimer .disclaimer_text p { margin-bottom: 10px; }
.disclaimer .disclaimer_text p:last-child { margin-bottom: 0; }

/* [UPDATE 12-11-2026 v7] site plan carousel: headings on one line and captions in the same maroon as the
   other section headings (captions no longer in italics, left aligned) */
main section .offer_sukoon.garden_plan .gp_slide_title { color: var(--enquirebuttoncolor); text-align: center; }   /* [v8] centred */
.garden_plan .gp_caption { text-align: left; }
/* [v8] smaller captions under the plans, still left aligned */
.garden_plan .gp_caption_title { font-style: normal; color: var(--enquirebuttoncolor); font-size: 18px; line-height: 1.25; }
.garden_plan .gp_caption_sub { color: var(--enquirebuttoncolor); font-size: 12px; margin-top: 2px; }
@media (max-width: 767.98px) {
    .garden_plan .gp_caption_title { font-size: 16px; }
    .garden_plan .gp_caption_sub { font-size: 11px; }
}

/* [UPDATE 12-11-2026 v7] zoom popup as a slider for the unit layouts: plan name above, arrows at the sides */
.map-popup .map-popup-caption,
.map-popup .map-popup-nav { display: none; }
.map-popup.is-gallery .map-popup-caption {
    display: block; position: absolute; top: 22px; left: 70px; right: 70px; z-index: 10;
    text-align: center; color: #fff; pointer-events: none;
    font: 600 20px/1.3 'Playfair Display', serif; text-transform: uppercase; letter-spacing: .03em;
}
.map-popup.is-gallery .map-popup-caption strong { font-weight: 600; }
.map-popup.is-gallery .map-popup-caption span {
    display: block; margin-top: 4px; text-transform: none; letter-spacing: 0;
    font: 600 15px/1.3 'Hanken Grotesk', sans-serif; color: rgba(255, 255, 255, .85);
}
.map-popup.is-gallery .map-popup-nav {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
    width: 56px; height: 56px; border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(255, 255, 255, .18); color: #fff; font-size: 24px; line-height: 1;
    transition: background .2s;
}
.map-popup.is-gallery .map-popup-nav:hover { background: var(--enquirebuttoncolor); }
.map-popup.is-gallery .map-popup-prev { left: 14px; }
.map-popup.is-gallery .map-popup-next { right: 14px; }
.map-popup.is-gallery .map-zoom-wrapper { height: 72vh; margin-top: 40px; }
@media (max-width: 767.98px) {
    .map-popup.is-gallery .map-popup-caption { top: 18px; left: 16px; right: 56px; text-align: left; font-size: 16px; }
    .map-popup.is-gallery .map-popup-caption span { font-size: 13px; }
    .map-popup.is-gallery .map-popup-nav { width: 42px; height: 42px; font-size: 18px; top: auto; bottom: 30px; transform: none; }
    .map-popup.is-gallery .map-popup-prev { left: 16px; }
    .map-popup.is-gallery .map-popup-next { right: 16px; }
}

/* [UPDATE 12-11-2026] distances below the location map: three columns on desktop, one under the other on phones */
#location .nearby_places {
    display: grid; grid-template-columns: 1fr 1.35fr 1fr; gap: 24px 36px;
    margin: 28px 0 0; padding: 0 clamp(12px, 2vw, 28px); text-align: left;
}
#location .nearby_places .nearby_title {
    display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
    font: 400 15px/1.3 'Playfair Display', serif; letter-spacing: .06em; text-transform: uppercase;
    color: var(--enquirebuttoncolor);
}
/* the icons sit inside .sukoon_map, so the map image rules (full width, padding, zoom cursor) are undone here */
#location .sukoon_map .nearby_places .nearby_title img {
    width: 18px !important; height: 18px !important; max-width: none !important; padding: 0 !important; margin: 0 !important;
    object-fit: contain; flex: 0 0 18px; cursor: default; border-radius: 0; box-shadow: none;
}
#location .nearby_places ul { margin: 0; padding: 0; list-style: none; }
#location .nearby_places li {
    margin: 0 0 6px; padding: 0; list-style: none;
    font: 400 14px/1.45 'Hanken Grotesk', sans-serif; color: #5f4b50;
}
#location .nearby_places li em { font-style: italic; color: #c15c6f; white-space: nowrap; }
@media (max-width: 991.98px) {
    #location .nearby_places { grid-template-columns: 1fr 1fr; }
    #location .nearby_places .nearby_col:nth-child(2) { grid-column: 2; }
}
@media (max-width: 767.98px) {
    #location .nearby_places { grid-template-columns: 1fr; gap: 20px; margin-top: 20px; padding: 0 4px; }
    #location .nearby_places .nearby_col:nth-child(2) { grid-column: auto; }
    #location .nearby_places li { font-size: 13.5px; }
}

/* [UPDATE 13-11-2026] "Download EOI Form" menu item: download icon before the text */
header .navbar .nav-link.nav-link-eoi { display: flex; align-items: center; gap: 6px; line-height: 1; }
header .navbar .nav-link.nav-link-eoi svg { width: 13px; height: 13px; flex: 0 0 13px; margin-top: -1px; }

/* [UPDATE 13-11-2026 v2] the EOI menu item stands out: a Sakura pink pill with a soft pulse
   (same pulse as the EOI button on sakura.php); it stops on hover and for visitors who prefer less motion */
header .navbar .collapse .navbar-nav .nav-item .nav-link.nav-link-eoi {
    color: #fff; background: #b04468; border: 0; border-radius: 999px;
    padding: 7px 14px; margin: -7px 0 -7px 10px;
    animation: eoiPulse 1.8s ease-in-out infinite;
    transition: background-color .2s ease;
}
header .navbar .collapse .navbar-nav .nav-item .nav-link.nav-link-eoi:hover,
header .navbar .collapse .navbar-nav .nav-item .nav-link.nav-link-eoi:focus-visible { background: #5c2438; color: #fff; animation: none; }
@keyframes eoiPulse {
    0%, 100% { background-color: #b04468; box-shadow: 0 0 0 0 rgba(176, 68, 104, .55); }
    50%      { background-color: #c45a7d; box-shadow: 0 0 0 7px rgba(176, 68, 104, 0); }
}
@media (max-width: 767.98px) {
    /* phone menu: the pill sits on its own row, as wide as its text */
    header .navbar .collapse .navbar-nav .nav-item .nav-link.nav-link-eoi { display: inline-flex; margin: 4px 0 0 6px; }
}
@media (prefers-reduced-motion: reduce) {
    header .navbar .collapse .navbar-nav .nav-item .nav-link.nav-link-eoi { animation: none; }
}