/* ==========================================================================
   Pumarth Serenity — landing page redesign (scoped to .serenity-page only)
   Loaded ONLY on is_page(24). No global styles are modified.
   ========================================================================== */

.serenity-page {
    --ser-ink: #14161a;
    --ser-ink-soft: #4a4f57;
    --ser-cream: #f8f4ee;
    --ser-sand: #efe6d9;
    --ser-gold: #c2963d;
    --ser-gold-dark: #85621e; /* was #a67c2b (3.8:1 on white); 5.6:1 white, 5.1:1 cream, 4.5:1 sand */
    --ser-line: rgba(20, 22, 26, 0.10);
    --ser-shadow: 0 24px 60px -30px rgba(20, 22, 26, 0.35);
    --ser-radius: 16px;
    font-family: "Jost", "Be Vietnam Pro", sans-serif;
    color: var(--ser-ink-soft);
    background: #fff;
    overflow-x: hidden;
}

.serenity-page *,
.serenity-page *::before,
.serenity-page *::after {
    box-sizing: border-box;
}

.serenity-page p {
    font-family: "Jost", sans-serif;
    font-size: 16.5px;
    line-height: 1.85;
    color: var(--ser-ink-soft);
}

.serenity-page h1,
.serenity-page h2,
.serenity-page h3,
.serenity-page h4,
.serenity-page .inner-head,
.serenity-page .ser-title {
    font-family: "Playfair Display", Georgia, serif;
    color: var(--ser-ink);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.01em;
}

/* ---------- shared bits ---------- */
.serenity-page .ser-section {
    padding: 80px 0;
    position: relative;
}

.serenity-page .ser-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: "Jost", sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ser-gold-dark);
    margin-bottom: 18px;
}

.serenity-page .ser-eyebrow::before {
    content: "";
    width: 34px;
    height: 1px;
    background: var(--ser-gold);
    display: inline-block;
}

.serenity-page .ser-eyebrow.light {
    color: rgba(255, 255, 255, 0.85);
}

.serenity-page .ser-eyebrow.light::before {
    background: rgba(255, 255, 255, 0.6);
}

.serenity-page .ser-title,
.serenity-page .inner-head {
    font-size: 44px !important;
    line-height: 1.15 !important;
    margin: 0 0 22px;
}

.serenity-page .ser-head.center {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 46px;
}

.serenity-page .ser-head.center .ser-eyebrow {
    justify-content: center;
}

.serenity-page .ser-sub {
    font-size: 17px;
    color: var(--ser-ink-soft);
    max-width: 620px;
    margin: 0 auto;
}

.serenity-page .ser-lead {
    font-size: 19px;
    line-height: 1.7;
    color: var(--ser-ink);
    font-weight: 400;
    margin-bottom: 20px;
}

/* ---------- buttons ---------- */
.serenity-page .ser-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 32px;
    border-radius: 50px;
    font-family: "Jost", sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    line-height: 1;
}

.serenity-page .ser-btn-gold {
    background: var(--ser-gold);
    color: #fff;
}

.serenity-page .ser-btn-gold:hover {
    background: var(--ser-gold-dark);
    color: #fff;
    transform: translateY(-2px);
}

.serenity-page .ser-btn-ghost {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
    backdrop-filter: blur(4px);
}

.serenity-page .ser-btn-ghost:hover {
    background: #fff;
    color: var(--ser-ink);
}

.serenity-page .ser-btn-outline-light {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.6);
    color: #fff;
}

.serenity-page .ser-btn-outline-light:hover {
    background: #fff;
    color: var(--ser-ink);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.serenity-page .ser-hero {
    position: relative;
}

.serenity-page .ser-hero-swiper,
.serenity-page .ser-hero-swiper .swiper-wrapper,
.serenity-page .ser-hero-swiper .swiper-slide {
    height: 100vh;
    min-height: 640px;
}

.serenity-page .ser-hero-slide {
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
}

.serenity-page .ser-hero-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 12, 15, 0.78) 0%, rgba(10, 12, 15, 0.45) 48%, rgba(10, 12, 15, 0.15) 100%);
}

.serenity-page .ser-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
    padding: 120px 40px 90px;
}

.serenity-page .ser-hero-title {
    color: #fff;
    font-size: 64px;
    line-height: 1.08;
    font-weight: 600;
    margin: 0 0 22px;
    text-shadow: 0 6px 40px rgba(0, 0, 0, 0.35);
    max-width: 760px;
}

.serenity-page .ser-hero-sub {
    color: rgba(255, 255, 255, 0.88);
    font-size: 19px;
    max-width: 540px;
    margin-bottom: 34px;
}

.serenity-page .ser-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.serenity-page .ser-hero-nav {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.serenity-page .ser-hero-nav:hover {
    background: var(--ser-gold);
    border-color: var(--ser-gold);
}

.serenity-page .ser-hero-nav::after {
    display: none;
}

.serenity-page .ser-hero-nav span,
.serenity-page .ser-plan-nav span,
.serenity-page + .footer-style-two .scroll-top-arrow span {
    font-family: Arial, sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
}

.serenity-page .ser-hero-pagination .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.5;
}

.serenity-page .ser-hero-pagination .swiper-pagination-bullet-active {
    background: var(--ser-gold);
    opacity: 1;
}

/* ==========================================================================
   STATS BAR
   ========================================================================== */
.serenity-page .ser-stats {
    position: relative;
    z-index: 5;
    margin-top: 0;
    padding: 0;
}

.serenity-page .ser-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--ser-line);
    border-radius: var(--ser-radius);
    overflow: hidden;
    box-shadow: var(--ser-shadow);
}

.serenity-page .ser-stat {
    background: #fff;
    padding: 38px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.serenity-page .ser-stat-num {
    font-family: "Playfair Display", serif;
    font-size: 34px;
    font-weight: 600;
    color: var(--ser-ink);
    line-height: 1;
}

.serenity-page .ser-stat-label {
    font-size: 12.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ser-gold-dark);
}

/* ==========================================================================
   OVERVIEW / DISCOVER
   ========================================================================== */
.serenity-page .ser-overview {
    padding-top: 88px;
}

.serenity-page .ser-discover {
    background: var(--ser-cream);
}

.serenity-page .ser-media {
    position: relative;
    border-radius: var(--ser-radius);
    overflow: hidden;
    box-shadow: var(--ser-shadow);
}

.serenity-page .ser-media > img {
    width: 100%;
    display: block;
    height: 520px;
    object-fit: cover;
}

.serenity-page .ser-media-badge {
    position: absolute;
    left: 26px;
    bottom: 26px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    padding: 16px 22px;
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.5);
}

.serenity-page .ser-media-badge img {
    width: 150px;
    height: auto;
}

.serenity-page .ser-highlights {
    list-style: none;
    padding: 0;
    margin: 26px 0 0;
    display: grid;
    gap: 14px;
}

.serenity-page .ser-highlights li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-family: "Jost", sans-serif;
    font-size: 16.5px;
    color: var(--ser-ink);
}

.serenity-page .ser-highlights li i {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ser-gold);
    color: #fff;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 3px;
}

/* ==========================================================================
   FLOOR PLANS
   ========================================================================== */
.serenity-page .ser-floorplans {
    background: var(--ser-ink);
}

.serenity-page .ser-floorplans .ser-title,
.serenity-page .ser-floorplans .ser-sub {
    color: #fff;
}

.serenity-page .ser-floorplans .ser-sub {
    color: rgba(255, 255, 255, 0.7);
}

.serenity-page .ser-floorplans .ser-eyebrow {
    color: var(--ser-gold);
}

.serenity-page .ser-plan-swiper {
    padding: 0 10px 20px;
}

.serenity-page .ser-plan-slide {
    padding: 0 14px;
    height: auto;
}

.serenity-page .ser-plan-card {
    background: #fff;
    border-radius: var(--ser-radius);
    overflow: hidden;
    box-shadow: 0 30px 60px -35px rgba(0, 0, 0, 0.6);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.serenity-page .ser-plan-img {
    position: relative;
    overflow: hidden;
    background: var(--ser-cream);
}

.serenity-page .ser-plan-img img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.serenity-page .ser-plan-card:hover .ser-plan-img img {
    transform: scale(1.05);
}

.serenity-page .ser-plan-zoom {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    color: var(--ser-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

.serenity-page .ser-plan-zoom:hover {
    background: var(--ser-gold);
    color: #fff;
}

.serenity-page .ser-plan-meta {
    padding: 24px 26px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--ser-line);
}

.serenity-page .ser-plan-type {
    font-family: "Jost", sans-serif;
    font-weight: 500;
    font-size: 17px;
    color: var(--ser-ink);
}

.serenity-page .ser-plan-area {
    font-size: 14px;
    color: var(--ser-gold-dark);
    white-space: nowrap;
}

.serenity-page .ser-plan-nav {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--ser-gold);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.serenity-page .ser-plan-nav:hover {
    background: #fff;
    color: var(--ser-ink);
}

.serenity-page .ser-plan-nav::after {
    display: none;
}

/* ==========================================================================
   WALK THROUGH + ENQUIRE
   ========================================================================== */
.serenity-page .ser-enquire {
    background: var(--ser-cream);
}

.serenity-page .ser-form-card {
    background: #fff;
    border-radius: var(--ser-radius);
    padding: 46px 42px;
    box-shadow: var(--ser-shadow);
}

.serenity-page .ser-form-card .ser-title {
    font-size: 34px !important;
    margin-bottom: 12px;
}

.serenity-page .ser-form-card .ser-sub {
    margin: 0 0 8px;
    text-align: left;
}

.serenity-page .form-alt {
    margin-top: 18px;
}

.serenity-page .form-alt .form-group {
    margin-bottom: 16px;
}

.serenity-page .form-alt input.wpcf7-form-control,
.serenity-page .form-alt textarea.wpcf7-form-control,
.serenity-page .form-alt select.wpcf7-form-control {
    width: 100%;
    padding: 15px 18px;
    border: 1px solid var(--ser-line);
    border-radius: 10px;
    background: var(--ser-cream);
    font-family: "Jost", sans-serif;
    font-size: 15px;
    color: var(--ser-ink);
    transition: all 0.25s ease;
}

.serenity-page .form-alt input.wpcf7-form-control:focus,
.serenity-page .form-alt textarea.wpcf7-form-control:focus,
.serenity-page .form-alt select.wpcf7-form-control:focus {
    outline: none;
    border-color: var(--ser-gold);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(194, 150, 61, 0.12);
}

.serenity-page .form-alt select.wpcf7-form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23c2963d' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 12px 8px;
    padding-right: 46px;
    cursor: pointer;
}

.serenity-page .form-alt input.wpcf7-submit {
    background: var(--ser-gold) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 50px !important;
    padding: 16px 30px !important;
    font-family: "Jost", sans-serif;
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.serenity-page .form-alt input.wpcf7-submit:hover {
    background: var(--ser-gold-dark) !important;
}

.serenity-page .form-alt .wpcf7-response-output {
    border-radius: 10px;
    font-size: 14px;
}

/* ==========================================================================
   GALLERY (keeps Isotope + Magnific markup intact)
   ========================================================================== */
.serenity-page .ser-gallery {
    background: #fff;
    padding: 80px 0;
}

.serenity-page .ser-gallery .ser-gallery-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 0 0 46px !important;
    margin: 0 !important;
    list-style: none;
    border: 0 !important;
}

.serenity-page .ser-gallery .ser-gallery-filter > li {
    margin: 0 !important;
}

.serenity-page .ser-gallery .ser-gallery-filter > li > a {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 50px;
    border: 1px solid var(--ser-line);
    color: var(--ser-ink-soft) !important;
    font-family: "Jost", sans-serif;
    font-size: 12.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.25s ease;
}

.serenity-page .ser-gallery .ser-gallery-filter > li.active > a,
.serenity-page .ser-gallery .ser-gallery-filter > li > a:hover {
    background: var(--ser-gold);
    border-color: var(--ser-gold);
    color: #fff !important;
}

.serenity-page .ser-gallery .portfolio-box {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 22px 44px -30px rgba(20, 22, 26, 0.5);
}

.serenity-page .ser-gallery .portfolio-image {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
}

.serenity-page .ser-gallery .portfolio-image img {
    width: 100%;
    height: 290px;
    object-fit: cover;
    display: block;
    transition: transform 0.7s ease;
}

.serenity-page .ser-gallery .grid-item:hover .portfolio-image img {
    transform: scale(1.07);
}

.serenity-page .ser-gallery .portfolio-hover {
    position: absolute;
    inset: 0;
    opacity: 0;
    background: linear-gradient(180deg, rgba(20, 22, 26, 0) 30%, rgba(20, 22, 26, 0.72) 100%);
    transition: opacity 0.4s ease;
}

.serenity-page .ser-gallery .grid-item:hover .portfolio-hover {
    opacity: 1;
}

.serenity-page .ser-gallery .portfolio-icon a {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #fff !important;
    color: var(--ser-ink) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.serenity-page .ser-gallery .portfolio-icon a:hover {
    background: var(--ser-gold) !important;
    color: #fff !important;
}

.serenity-page .ser-gallery .grid-item {
    padding: 12px;
}

/* ==========================================================================
   AMENITIES
   ========================================================================== */
.serenity-page .ser-amenities {
    background: var(--ser-cream);
}

.serenity-page .ser-amenity-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 22px;
}

.serenity-page .ser-amenity {
    background: #fff;
    border: 1px solid var(--ser-line);
    border-radius: 14px;
    padding: 34px 18px;
    text-align: center;
    transition: all 0.35s ease;
}

.serenity-page .ser-amenity:hover {
    transform: translateY(-6px);
    box-shadow: var(--ser-shadow);
    border-color: transparent;
}

.serenity-page .ser-amenity-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--ser-sand);
    color: var(--ser-gold-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: all 0.35s ease;
}

.serenity-page .ser-amenity:hover .ser-amenity-icon {
    background: var(--ser-gold);
    color: #fff;
}

.serenity-page .ser-amenity p {
    margin: 0;
    font-size: 15.5px;
    color: var(--ser-ink);
    font-weight: 500;
}

/* ==========================================================================
   LOCATION
   ========================================================================== */
.serenity-page .ser-location {
    background: #fff;
}

.serenity-page .ser-map {
    border-radius: var(--ser-radius);
    overflow: hidden;
    box-shadow: var(--ser-shadow);
    line-height: 0;
}

.serenity-page .ser-map iframe {
    display: block;
    width: 100%;
    filter: grayscale(0.25) contrast(1.02);
}

/* ==========================================================================
   CTA
   ========================================================================== */
.serenity-page .ser-cta {
    background: linear-gradient(120deg, var(--ser-gold) 0%, #a67c2b 100%);
    padding: 74px 0;
}

.serenity-page .ser-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.serenity-page .ser-cta-text h2 {
    color: #fff;
    font-size: 42px;
    margin: 0 0 12px;
}

.serenity-page .ser-cta-text p {
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    max-width: 560px;
}

.serenity-page .ser-cta-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.serenity-page .ser-cta .ser-btn-gold {
    background: var(--ser-ink);
    color: #fff;
}

.serenity-page .ser-cta .ser-btn-gold:hover {
    background: #000;
}

/* smooth anchor scrolling, offset for fixed header */
.serenity-page #enquire,
.serenity-page #gallery,
.serenity-page #about {
    scroll-margin-top: 90px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1199px) {
    .serenity-page .ser-hero-title {
        font-size: 54px;
    }

    .serenity-page .ser-amenity-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 991px) {
    .serenity-page .ser-section {
        padding: 64px 0;
    }

    .serenity-page .ser-overview {
        padding-top: 72px;
    }

    .serenity-page .ser-hero-title {
        font-size: 44px;
    }

    .serenity-page .ser-hero-inner {
        padding: 110px 28px 80px;
    }

    .serenity-page .ser-stats {
        margin-top: 0;
    }

    .serenity-page .ser-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .serenity-page .ser-title,
    .serenity-page .inner-head {
        font-size: 36px !important;
    }

    .serenity-page .ser-media > img {
        height: 420px;
    }

    .serenity-page .ser-amenity-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .serenity-page .ser-cta-inner {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 767px) {
    /* Centre hero copy in the slide; the header already sits above the hero. */
    .serenity-page .ser-hero-slide {
        align-items: center;
    }

    .serenity-page .ser-section {
        padding: 52px 0;
    }

    .serenity-page .ser-overview {
        padding-top: 62px;
    }

    .serenity-page .ser-hero-title {
        font-size: 34px;
    }

    .serenity-page .ser-hero-sub {
        font-size: 17px;
    }

    .serenity-page .ser-hero-inner {
        padding: clamp(150px, 21vh, 190px) 20px 70px;
    }

    .serenity-page .ser-hero-nav {
        display: none;
    }

    .serenity-page .ser-title,
    .serenity-page .inner-head {
        font-size: 30px !important;
    }

    .serenity-page .ser-lead {
        font-size: 17px;
    }

    .serenity-page .ser-media > img {
        height: 300px;
    }

    .serenity-page .ser-form-card {
        padding: 34px 24px;
    }

    .serenity-page .ser-amenity-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .serenity-page .ser-amenity {
        padding: 26px 12px;
    }

    .serenity-page .ser-gallery .portfolio-image img {
        height: 220px;
    }

    .serenity-page .ser-cta-text h2 {
        font-size: 30px;
    }

    .serenity-page .ser-stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .serenity-page .ser-stat {
        padding: 26px 16px;
    }

    .serenity-page .ser-stat-num {
        font-size: 26px;
    }
}

@media (max-width: 479px) {
    .serenity-page .ser-hero-title {
        font-size: 29px;
    }

    .serenity-page .ser-amenity-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ==========================================================================
   VISUAL ENHANCEMENTS
   ========================================================================== */

/* ---------- hero: vignette, bottom fade, scroll cue ---------- */
.serenity-page .ser-hero {
    overflow: hidden;
}

.serenity-page .ser-hero-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(130% 110% at 68% 18%, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.42) 100%);
    z-index: 1;
    pointer-events: none;
}

.serenity-page .ser-hero-inner {
    animation: serHeroIn 1s ease both;
}

@keyframes serHeroIn {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.serenity-page .ser-hero-title {
    letter-spacing: -0.015em;
}

.serenity-page .ser-hero-sub {
    font-weight: 300;
    letter-spacing: 0.01em;
}

.serenity-page .ser-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 96px;
    transform: translateX(-50%);
    z-index: 5;
    width: 26px;
    height: 44px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px;
}

.serenity-page .ser-scroll-cue::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 9px;
    width: 4px;
    height: 8px;
    margin-left: -2px;
    border-radius: 4px;
    background: var(--ser-gold);
    animation: serScroll 1.8s ease-in-out infinite;
}

@keyframes serScroll {
    0% {
        opacity: 0;
        transform: translateY(0);
    }

    40% {
        opacity: 1;
    }

    80% {
        opacity: 0;
        transform: translateY(16px);
    }

    100% {
        opacity: 0;
    }
}

/* ---------- eyebrow: animated gold rule ---------- */
.serenity-page .ser-eyebrow::before {
    transition: width 0.45s ease;
}

.serenity-page .ser-head:hover .ser-eyebrow::before,
.serenity-page .ser-section:hover .ser-eyebrow::before {
    width: 52px;
}

/* ---------- centered head: gold divider ---------- */
.serenity-page .ser-head.center .ser-title::after {
    content: "";
    display: block;
    width: 66px;
    height: 2px;
    background: var(--ser-gold);
    margin: 24px auto 0;
}

.serenity-page .ser-head.center .ser-eyebrow {
    margin-bottom: 20px;
}

/* ---------- stats: icons + hover ---------- */
.serenity-page .ser-stat {
    position: relative;
    transition: background 0.35s ease, transform 0.35s ease;
}

.serenity-page .ser-stat::before {
    font-family: "FontAwesome";
    font-size: 20px;
    color: var(--ser-gold);
    margin-bottom: 14px;
    transition: transform 0.35s ease;
}

.serenity-page .ser-stat:nth-child(1)::before {
    content: "\f0c0";
}

.serenity-page .ser-stat:nth-child(2)::before {
    content: "\f015";
}

.serenity-page .ser-stat:nth-child(3)::before {
    content: "\f1ad";
}

.serenity-page .ser-stat:nth-child(4)::before {
    content: "\f19c";
}

.serenity-page .ser-stat:hover {
    background: var(--ser-cream);
}

.serenity-page .ser-stat:hover::before {
    transform: translateY(-3px);
}

/* ---------- media: offset gold frame + zoom ---------- */
.serenity-page .ser-media > img {
    transition: transform 0.9s ease;
}

.serenity-page .ser-media:hover > img {
    transform: scale(1.05);
}

.serenity-page .ser-overview .row,
.serenity-page .ser-discover .row {
    align-items: stretch;
}

.serenity-page .ser-media-col {
    display: flex;
}

.serenity-page .ser-media-col .ser-media {
    width: 100%;
    min-height: 460px;
}

.serenity-page .ser-media-col .ser-media > img {
    height: 100%;
    min-height: 460px;
    border-radius: var(--ser-radius);
}

/* ---------- discover watermark ---------- */
.serenity-page .ser-discover {
    overflow: hidden;
}

.serenity-page .ser-discover::before {
    content: "Serenity";
    position: absolute;
    right: -30px;
    top: 30px;
    font-family: "Playfair Display", serif;
    font-size: 190px;
    font-weight: 700;
    font-style: italic;
    color: rgba(194, 150, 61, 0.06);
    line-height: 1;
    pointer-events: none;
    white-space: nowrap;
}

/* ---------- plan cards: gold accent ---------- */
.serenity-page .ser-plan-card {
    position: relative;
}

.serenity-page .ser-plan-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--ser-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s ease;
    z-index: 3;
}

.serenity-page .ser-plan-card:hover::before {
    transform: scaleX(1);
}

/* ---------- amenities: gold reveal + ring ---------- */
.serenity-page .ser-amenity {
    position: relative;
    overflow: hidden;
}

.serenity-page .ser-amenity::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 62%;
    height: 3px;
    background: var(--ser-gold);
    transform: translateX(-50%) scaleX(0);
    transition: transform 0.4s ease;
}

.serenity-page .ser-amenity:hover::after {
    transform: translateX(-50%) scaleX(1);
}

.serenity-page .ser-amenity:hover .ser-amenity-icon {
    box-shadow: 0 0 0 6px rgba(194, 150, 61, 0.15);
    transform: translateY(-2px);
}

/* ---------- buttons: sheen ---------- */
.serenity-page .ser-btn {
    position: relative;
    overflow: hidden;
}

.serenity-page .ser-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -130%;
    width: 55%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg);
    transition: left 0.65s ease;
}

.serenity-page .ser-btn:hover::after {
    left: 140%;
}

/* ---------- CTA: decorative pattern ---------- */
.serenity-page .ser-cta {
    position: relative;
    overflow: hidden;
}

.serenity-page .ser-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 20%, rgba(255, 255, 255, 0.16) 0, transparent 32%),
        radial-gradient(circle at 88% 90%, rgba(0, 0, 0, 0.12) 0, transparent 38%);
    pointer-events: none;
}

.serenity-page .ser-cta-inner {
    position: relative;
    z-index: 2;
}

.serenity-page .ser-cta-text h2 {
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.18);
}

/* ---------- gallery: refined filter + gold edge ---------- */
.serenity-page .ser-gallery .grid-item .portfolio-box {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.serenity-page .ser-gallery .grid-item:hover .portfolio-box {
    transform: translateY(-6px);
    box-shadow: 0 34px 60px -30px rgba(20, 22, 26, 0.55);
}

.serenity-page .ser-gallery .ser-gallery-filter > li > a {
    position: relative;
}

/* ---------- responsive tweaks for enhancements ---------- */
@media (max-width: 991px) {
    .serenity-page .ser-discover::before {
        font-size: 120px;
        top: 10px;
    }

    .serenity-page .ser-media-col .ser-media,
    .serenity-page .ser-media-col .ser-media > img {
        min-height: 340px;
    }

    .serenity-page .ser-scroll-cue {
        bottom: 70px;
    }
}

@media (max-width: 767px) {
    .serenity-page .ser-discover::before {
        font-size: 84px;
    }

    .serenity-page .ser-scroll-cue {
        display: none;
    }

    .serenity-page .ser-stat::before {
        font-size: 17px;
        margin-bottom: 10px;
    }
}

/* ==========================================================================
   CONVERSION FIXES (audit items 01–07)
   ========================================================================== */

/* ---------- 01: hero price chip ---------- */
.serenity-page .ser-hero-price {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    color: #fff;
    font-size: 15px;
    letter-spacing: 0.04em;
    margin: 0 0 26px;
    padding: 10px 22px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(4px);
}

.serenity-page .ser-hero-price strong {
    font-family: "Playfair Display", serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--ser-gold);
}

/* ---------- 03: stats icons (updated labels) ---------- */
.serenity-page .ser-stat:nth-child(1)::before { content: "\f0c0"; }
.serenity-page .ser-stat:nth-child(2)::before { content: "\f058"; }
.serenity-page .ser-stat:nth-child(3)::before { content: "\f1ad"; }
.serenity-page .ser-stat:nth-child(4)::before { content: "\f0a3"; }

/* ---------- 04: ready-to-move urgency band ---------- */
.serenity-page .ser-ready {
    position: relative;
    overflow: hidden;
    padding: 54px 0;
    background: linear-gradient(120deg, var(--ser-gold) 0%, #a67c2b 100%);
}

.serenity-page .ser-ready::after {
    content: "20";
    position: absolute;
    right: 4%;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Playfair Display", serif;
    font-size: 240px;
    font-weight: 700;
    line-height: 1;
    color: rgba(255, 255, 255, 0.10);
    pointer-events: none;
}

.serenity-page .ser-ready-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
    flex-wrap: wrap;
}

.serenity-page .ser-ready-text h2 {
    color: #fff;
    font-size: 40px;
    margin: 0 0 12px;
    max-width: 660px;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.16);
}

.serenity-page .ser-ready-text p {
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
    max-width: 620px;
}

.serenity-page .ser-ready-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.serenity-page .ser-ready .ser-btn-gold {
    background: var(--ser-ink);
    color: #fff;
}

.serenity-page .ser-ready .ser-btn-gold:hover {
    background: #000;
}

/* ---------- 01/02: floor-plan price + status + badge ---------- */
.serenity-page .ser-plan-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 12px;
}

.serenity-page .ser-plan-price {
    width: 100%;
    font-family: "Playfair Display", serif;
    font-size: 23px;
    font-weight: 600;
    color: var(--ser-ink);
    margin-top: 6px;
}

.serenity-page .ser-plan-status {
    display: inline-block;
    margin-top: 4px;
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 13px;
    border-radius: 30px;
    background: var(--ser-sand);
    color: var(--ser-gold-dark);
}

.serenity-page .ser-plan-status.ready {
    background: rgba(46, 125, 50, 0.12);
    color: #2e7d32;
}

.serenity-page .ser-plan-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    background: var(--ser-gold);
    color: #fff;
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 7px 15px;
    border-radius: 30px;
    box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.55);
}

/* ---------- 05: sticky CTA bar + WhatsApp ---------- */
.serenity-page .ser-sticky-bar {
    display: none;
}

/* ---------- 07: remove exit routes (this stylesheet loads only on page 24) ---------- */
.header-with-topbar .navbar-collapse,
.header-with-topbar .navbar-toggler {
    display: none !important;
}

.footer-style-two .links-column {
    display: none !important;
}

/* keep Quick Links hidden, but show the Follow Us (social) column */
.footer-style-two .links-column:nth-child(2) {
    display: block !important;
}

/* ---------- Footer: Follow Us social buttons ---------- */
.footer-style-two .links-column:nth-child(2) {
    float: none;
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
}

.footer-style-two .links-column:nth-child(2) .links-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 2px;
}

.footer-style-two .links-column:nth-child(2) .links-list li {
    margin: 0 !important;
}

.footer-style-two .links-column:nth-child(2) .links-list li a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 20px;
    border: 1px solid rgba(194, 150, 61, 0.5);
    border-radius: 999px;
    font-size: 15px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #ffffff;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.footer-style-two .links-column:nth-child(2) .links-list li a::before {
    font-family: FontAwesome;
    font-size: 15px;
    line-height: 1;
}

.footer-style-two .links-column:nth-child(2) .links-list li:nth-child(1) a::before {
    content: "\f09a";
}

.footer-style-two .links-column:nth-child(2) .links-list li:nth-child(2) a::before {
    content: "\f16d";
}

.footer-style-two .links-column:nth-child(2) .links-list li a:hover {
    background-color: var(--ser-gold);
    border-color: var(--ser-gold);
    color: var(--ser-ink);
    transform: translateY(-2px);
}

/* ---------- responsive: conversion elements ---------- */
@media (max-width: 991px) {
    .serenity-page .ser-ready-text h2 {
        font-size: 32px;
    }

    .serenity-page .ser-ready::after {
        font-size: 170px;
    }
}

@media (max-width: 767px) {
    .serenity-page .ser-sticky-bar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
        background: #fff;
        box-shadow: 0 -6px 24px -10px rgba(0, 0, 0, 0.35);
    }

    .serenity-page .ser-sticky-btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 15px 8px;
        font-family: "Jost", sans-serif;
        font-size: 12.5px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        text-decoration: none;
        font-weight: 500;
    }

    .serenity-page .ser-sticky-primary {
        background: var(--ser-gold);
        color: #fff;
    }

    .serenity-page .ser-sticky-call {
        background: var(--ser-ink);
        color: #fff;
    }

    .serenity-page .ser-ready {
        padding: 48px 0;
    }

    .serenity-page .ser-ready-text h2 {
        font-size: 26px;
    }

    .serenity-page .ser-ready-inner {
        gap: 22px;
    }

    .serenity-page .ser-ready::after {
        font-size: 120px;
        right: -10px;
    }

    .serenity-page .ser-hero-price strong {
        font-size: 20px;
    }

    /* keep fixed sticky bar from covering the footer */
    .footer-style-two {
        padding-bottom: 62px;
    }
}

/* ==========================================================================
   HERO HIGHLIGHTS
   ========================================================================== */
.serenity-page .ser-hl {
    color: var(--ser-gold);
    font-weight: 600;
    white-space: nowrap;
}

.serenity-page .ser-hero-price {
    background: rgba(194, 150, 61, 0.18);
    border-color: rgba(194, 150, 61, 0.55);
}

.serenity-page .ser-hero-price strong {
    font-size: 27px;
    text-shadow: 0 2px 18px rgba(194, 150, 61, 0.35);
}

/* ==========================================================================
   ENQUIRY MODAL
   ========================================================================== */
.serenity-page .ser-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
}

.serenity-page .ser-modal.is-open {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.serenity-page .ser-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 12, 15, 0.68);
    backdrop-filter: blur(3px);
}

.serenity-page .ser-modal-dialog {
    position: relative;
    z-index: 2;
    width: min(480px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: #fff;
    border-radius: var(--ser-radius);
    padding: 42px 38px 34px;
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.65);
    animation: serModalIn 0.3s ease both;
}

@keyframes serModalIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.serenity-page .ser-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: var(--ser-cream);
    color: var(--ser-ink);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.serenity-page .ser-modal-close:hover {
    background: var(--ser-gold);
    color: #fff;
}

.serenity-page .ser-modal-title {
    font-family: "Playfair Display", serif;
    font-size: 30px;
    font-weight: 600;
    color: var(--ser-ink);
    margin: 0 0 8px;
    line-height: 1.15;
}

.serenity-page .ser-modal-sub {
    margin: 0 0 6px;
    font-size: 15px;
}

body.ser-modal-open {
    overflow: hidden;
}

/* ==========================================================================
   PERSISTENT ENQUIRY BUTTON
   ========================================================================== */
.serenity-page .ser-enquire-float {
    position: fixed;
    right: 24px;
    bottom: 26px;
    z-index: 9997;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 26px;
    border: 0;
    border-radius: 50px;
    background: var(--ser-gold);
    color: #fff;
    font-family: "Jost", sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 16px 36px -12px rgba(194, 150, 61, 0.8);
    animation: serPulse 2.8s ease-in-out infinite;
    transition: transform 0.3s ease, background 0.3s ease;
}

.serenity-page .ser-enquire-float i {
    font-size: 16px;
}

.serenity-page .ser-enquire-float:hover {
    background: var(--ser-gold-dark);
    transform: translateY(-2px);
    animation: none;
}

@keyframes serPulse {
    0%,
    100% {
        box-shadow: 0 16px 36px -12px rgba(194, 150, 61, 0.8);
    }

    50% {
        box-shadow: 0 18px 44px -6px rgba(194, 150, 61, 1);
    }
}

@media (max-width: 767px) {
    .serenity-page .ser-enquire-float {
        right: 16px;
        bottom: 76px;
        padding: 13px 20px;
        font-size: 12.5px;
    }
}

/* Keep the hero's intended line breaks when the theme hides br on phones. */
.serenity-page .ser-title-line {
    display: block;
}

.serenity-page .ser-hero-price {
    background: rgba(20, 22, 26, 0.76);
    border-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: none;
}

.serenity-page .ser-hero-price strong {
    color: #f4ce78;
    text-shadow: none;
}

.serenity-page .ser-whatsapp-float {
    position: fixed;
    left: 24px;
    bottom: 26px;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #28b847;
    color: #fff;
    font-size: 30px;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.serenity-page .ser-whatsapp-float:hover,
.serenity-page .ser-whatsapp-float:focus-visible {
    background: #208f38;
    color: #fff;
}

.serenity-page .ser-whatsapp-float svg {
    width: 34px;
    height: 34px;
    fill: currentColor;
}

@media (max-width: 767px) {
    .serenity-page .ser-enquire-float {
        display: none;
    }

    .serenity-page .ser-whatsapp-float {
        left: 16px;
        bottom: calc(73px + env(safe-area-inset-bottom));
        width: 54px;
        height: 54px;
        font-size: 28px;
    }

    .serenity-page .ser-sticky-bar {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .serenity-page .ser-hero-title {
        font-size: clamp(27px, 7.4vw, 34px);
        line-height: 1.15;
    }

    .serenity-page .ser-hero-price {
        max-width: 100%;
        flex-wrap: wrap;
        gap: 4px 8px;
    }

    .serenity-page .ser-hero-price strong {
        font-size: 23px;
    }

    .serenity-page .ser-hero-actions a[href^="tel:"] {
        display: none;
    }
}

@media (max-width: 360px) {
    .serenity-page .ser-hero-inner {
        padding-bottom: 50px;
    }

    .serenity-page .ser-hero-actions {
        gap: 8px;
    }

    .serenity-page .ser-hero-actions .ser-btn {
        padding: 13px 16px;
        font-size: 11.5px;
    }

    .serenity-page .ser-whatsapp-float {
        left: auto;
        right: 16px;
    }
}

/* Mobile hero: keep the message readable and balanced across phone heights. */
@media (max-width: 767px) {
    .serenity-page .ser-hero-swiper,
    .serenity-page .ser-hero-swiper .swiper-wrapper,
    .serenity-page .ser-hero-swiper .swiper-slide {
        height: 100svh;
        min-height: 640px;
    }

    .serenity-page .ser-hero-slide {
        background-position: center top;
    }

    .serenity-page .ser-hero-scrim {
        background: linear-gradient(180deg, rgba(8, 13, 19, 0.75) 0%, rgba(8, 13, 19, 0.7) 58%, rgba(8, 13, 19, 0.38) 100%);
    }

    .serenity-page .ser-hero-inner {
        padding: clamp(140px, 18svh, 160px) 20px 78px;
    }

    .serenity-page .ser-hero .ser-eyebrow.light {
        display: block;
        max-width: 100%;
        margin-bottom: 12px;
        color: #fff;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.45;
        letter-spacing: 0.12em;
    }

    .serenity-page .ser-hero .ser-eyebrow.light::before {
        display: none;
    }

    .serenity-page .ser-hero-title {
        margin-bottom: 15px;
        font-size: clamp(29px, 8vw, 34px);
        line-height: 1.13;
        text-shadow: 0 2px 16px rgba(0, 0, 0, 0.75);
    }

    .serenity-page .ser-hero-sub {
        max-width: 100%;
        margin-bottom: 20px;
        color: #f7f5f1;
        font-size: 15.5px;
        font-weight: 400;
        line-height: 1.55;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
    }

    .serenity-page .ser-hero .ser-hl {
        color: #ffe0a0;
    }

    .serenity-page .ser-hero-price {
        margin-bottom: 18px;
        padding: 8px 15px;
        font-size: 13.5px;
    }

    .serenity-page .ser-hero-price strong {
        font-size: 21px;
    }

    .serenity-page .ser-hero-actions {
        gap: 9px;
    }

    .serenity-page .ser-hero-actions .ser-btn {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        padding: 13px 19px;
        font-size: 12px;
    }

    .serenity-page .ser-hero-actions .ser-btn-gold {
        background: #d6ae58;
        color: #17191c;
    }

    .serenity-page .ser-hero-actions .ser-btn-ghost {
        background: rgba(10, 15, 22, 0.42);
        border-color: rgba(255, 255, 255, 0.75);
    }
}

@media (max-width: 360px) {
    .serenity-page .ser-hero-inner {
        padding-bottom: 68px;
    }
}

/* ========================================================================== 
   ON-DEMAND GALLERY EXPLORER
   ========================================================================== */
.serenity-page .ser-gallery-explorer { background: var(--ser-cream); }
.serenity-page .ser-gallery-categories {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-bottom: 28px;
}
.serenity-page .ser-gallery-category {
    appearance: none;
    border: 1px solid var(--ser-line);
    background: #fff;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    color: var(--ser-ink);
    cursor: pointer;
    text-align: left;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.serenity-page .ser-gallery-category:hover,
.serenity-page .ser-gallery-category.is-active {
    border-color: var(--ser-gold);
    box-shadow: 0 14px 30px -20px rgba(20, 22, 26, .7);
    transform: translateY(-2px);
}
.serenity-page .ser-gallery-category img { display: block; width: 100%; height: 130px; object-fit: cover; }
.serenity-page .ser-gallery-category span { display: block; padding: 12px 13px; font-family: "Jost", sans-serif; font-size: 14px; font-weight: 600; }
.serenity-page .ser-gallery-viewer { overflow: hidden; border-radius: var(--ser-radius); background: var(--ser-ink); box-shadow: var(--ser-shadow); }
.serenity-page .ser-gallery-feature { display: block; width: 100%; height: min(57vw, 610px); object-fit: cover; }
.serenity-page .ser-gallery-viewer-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 20px; color: #fff; }
.serenity-page .ser-gallery-label { display: block; font-family: "Playfair Display", Georgia, serif; font-size: 22px; }
.serenity-page .ser-gallery-count { display: block; margin-top: 2px; color: rgba(255,255,255,.68); font: 13px "Jost", sans-serif; }
.serenity-page .ser-gallery-controls { display: flex; gap: 8px; }
.serenity-page .ser-gallery-controls button { width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; background: transparent; color: #fff; font-size: 21px; cursor: pointer; }
.serenity-page .ser-gallery-controls button:hover { background: var(--ser-gold); border-color: var(--ser-gold); }

/* Mobile-only visual refinement. */
@media (max-width: 767px) {
    /* sticky-bar clearance lives on .footer-style-two only - a second 62px here
       rendered as a white band between the CTA band and the footer. */
    .serenity-page .ser-hero-inner { padding: calc(82px + env(safe-area-inset-top)) 20px 82px; }
    .serenity-page .ser-hero-slide { background-position: 58% center; }
    .serenity-page .ser-hero-title { font-size: clamp(28px, 7.7vw, 33px); line-height: 1.1; margin-bottom: 13px; }
    .serenity-page .ser-hero-sub { font-size: 15px; line-height: 1.5; margin-bottom: 17px; }
    .serenity-page .ser-hero-price { margin-bottom: 15px; }
    .serenity-page .ser-hero-actions .ser-btn { min-height: 46px; }
    .serenity-page .ser-scroll-cue { display: none; }
    .serenity-page .ser-section { padding: 42px 0; }
    .serenity-page .ser-overview { padding-top: 46px; }
    .serenity-page .ser-title, .serenity-page .inner-head { font-size: 29px !important; }
    .serenity-page p { font-size: 16px; line-height: 1.7; }
    .serenity-page .ser-media > img { height: 260px; }
    .serenity-page .ser-gallery-categories { display: flex; overflow-x: auto; gap: 10px; margin-right: -20px; padding: 2px 20px 12px 0; scrollbar-width: none; }
    .serenity-page .ser-gallery-categories::-webkit-scrollbar { display: none; }
    .serenity-page .ser-gallery-category { flex: 0 0 132px; }
    .serenity-page .ser-gallery-category img { height: 92px; }
    .serenity-page .ser-gallery-category span { padding: 9px 10px; font-size: 12px; }
    .serenity-page .ser-gallery-feature { height: 290px; }
    .serenity-page .ser-gallery-viewer-bar { padding: 14px 15px; }
    .serenity-page .ser-gallery-label { font-size: 20px; }
}

/* ========================================================================== 
   FINAL VISUAL POLISH — Serenity only
   ========================================================================== */
.serenity-page .ser-hero-inner { max-width: 1120px; }
.serenity-page .ser-hero-title { max-width: 680px; }
.serenity-page .ser-hero-sub { max-width: 490px; }
.serenity-page .ser-hero-price {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 9px;
    border-radius: 999px;
    padding: 10px 17px;
    background: rgba(15, 18, 22, .62);
    border: 1px solid rgba(255, 255, 255, .48);
}
.serenity-page .ser-hero-actions .ser-btn-gold { box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .9); }
.serenity-page .ser-plan-card { border: 1px solid rgba(255,255,255,.16); }
.serenity-page .ser-plan-meta { align-items: flex-start; flex-wrap: wrap; }
.serenity-page .ser-plan-type { flex: 1 1 56%; }
.serenity-page .ser-plan-price { color: var(--ser-gold-dark); font-weight: 600; }
.serenity-page .ser-plan-status { margin-left: auto; }
.serenity-page .ser-gallery-explorer .ser-head { margin-bottom: 30px; }
.serenity-page .ser-gallery-categories { padding-bottom: 2px; }
.serenity-page .ser-gallery-category { border-radius: 14px; }
.serenity-page .ser-gallery-category span { letter-spacing: .01em; }
.serenity-page .ser-gallery-viewer { border: 1px solid rgba(20,22,26,.12); }
.serenity-page .ser-gallery-feature { transition: opacity .25s ease; }

@media (max-width: 767px) {
    .serenity-page .ser-hero-swiper,
    .serenity-page .ser-hero-swiper .swiper-wrapper,
    .serenity-page .ser-hero-swiper .swiper-slide { min-height: 680px; }
    .serenity-page .ser-hero-slide { background-position: 56% center; }
    .serenity-page .ser-hero-scrim {
        background: linear-gradient(180deg, rgba(8,13,19,.78) 0%, rgba(8,13,19,.63) 51%, rgba(8,13,19,.3) 100%);
    }
    .serenity-page .ser-hero-inner { padding: calc(28px + env(safe-area-inset-top)) 20px 40px; }
    .serenity-page .ser-hero-title { max-width: 340px; letter-spacing: -.02em; }
    .serenity-page .ser-hero-sub { max-width: 345px; }
    .serenity-page .ser-hero-price { padding: 9px 15px; }
    .serenity-page .ser-hero-price strong { font-size: 20px; }
    .serenity-page .ser-hero-actions { gap: 10px; }
    .serenity-page .ser-hero-actions .ser-btn { border-radius: 12px; padding: 13px 18px; }
    .serenity-page .ser-plan-swiper { padding: 0 0 18px; }
    .serenity-page .ser-plan-slide { padding: 0 4px; }
    .serenity-page .ser-plan-img img { height: 250px; object-fit: contain; background: #fff; }
    .serenity-page .ser-plan-meta { padding: 19px 18px; gap: 8px; }
    .serenity-page .ser-plan-type { font-size: 16px; }
    .serenity-page .ser-gallery-explorer .container { padding-left: 20px; padding-right: 20px; }
    .serenity-page .ser-gallery-categories { margin-right: -20px; padding-right: 20px; }
    .serenity-page .ser-gallery-category { flex-basis: 118px; }
    .serenity-page .ser-gallery-category img { height: 82px; }
    .serenity-page .ser-gallery-feature { height: 270px; object-position: center; }
    .serenity-page .ser-gallery-viewer-bar { min-height: 70px; }
    .serenity-page .ser-gallery-controls button { width: 42px; height: 42px; }
}

/* Mobile spacing adjustments requested after review. */
@media (max-width: 767px) {
    .serenity-page .ser-hero-swiper,
    .serenity-page .ser-hero-swiper .swiper-wrapper,
    .serenity-page .ser-hero-swiper .swiper-slide {
        height: clamp(620px, 76svh, 700px) !important;
        min-height: 0 !important;
    }

    .serenity-page .ser-stats-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1px;
        border-radius: 12px;
    }

    .serenity-page .ser-stat {
        min-width: 0;
        padding: 14px 3px 13px;
        gap: 6px;
    }

    .serenity-page .ser-stat::before {
        font-size: 14px;
        margin-bottom: 1px;
    }

    .serenity-page .ser-stat-num { font-size: clamp(18px, 5.3vw, 22px); }
    .serenity-page .ser-stat-label {
        font-size: clamp(9.5px, 2.7vw, 11px);
        line-height: 1.25;
        letter-spacing: .03em;
        overflow-wrap: anywhere;
    }

    .serenity-page .ser-gallery-explorer { padding-top: 40px; padding-bottom: 40px; }
    .serenity-page .ser-gallery-explorer .ser-head { margin-bottom: 20px; }
    .serenity-page .ser-gallery-explorer .ser-head .ser-title { margin-bottom: 12px; }
    .serenity-page .ser-gallery-explorer .ser-sub { font-size: 14px; line-height: 1.5; }
    .serenity-page .ser-gallery-categories { gap: 8px; margin-bottom: 16px; }
    .serenity-page .ser-gallery-category {
        flex-basis: 104px;
        border-radius: 11px;
        position: relative;
    }
    .serenity-page .ser-gallery-category img { height: 72px; }
    .serenity-page .ser-gallery-category span { padding: 8px 8px 9px; font-size: 11px; }
    .serenity-page .ser-gallery-category.is-active { box-shadow: 0 0 0 1px var(--ser-gold); }
    .serenity-page .ser-gallery-viewer { border-radius: 14px; box-shadow: 0 14px 34px -24px rgba(20,22,26,.65); }
    .serenity-page .ser-gallery-feature { height: 250px; }
    .serenity-page .ser-gallery-viewer-bar { padding: 12px 13px; }
}

/* Section headings: remove decorative rules and keep a consistent centered alignment. */
.serenity-page .ser-eyebrow::before,
.serenity-page .ser-head .ser-title::after {
    content: none !important;
    display: none !important;
}

.serenity-page .ser-head,
.serenity-page .ser-head.center {
    text-align: center;
}

.serenity-page .ser-head .ser-eyebrow {
    justify-content: center;
    gap: 0;
}

/* Keep the anchored gallery heading clear of the fixed header. */
.serenity-page #gallery {
    scroll-margin-top: 130px;
}

@media (max-width: 767px) {
    .serenity-page #gallery {
        scroll-margin-top: 92px;
    }
}

/* Desktop gallery: keep the full photo visible beside a clear category index. */
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
    .serenity-page .ser-gallery-explorer .container {
        display: grid;
        grid-template-columns: minmax(215px, 250px) minmax(0, 1fr);
        column-gap: 28px;
        align-items: start;
    }

    .serenity-page .ser-gallery-explorer .ser-head {
        grid-column: 1 / -1;
        margin-bottom: 26px;
    }

    .serenity-page .ser-gallery-explorer .ser-gallery-categories {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 0;
    }

    .serenity-page .ser-gallery-explorer .ser-gallery-category {
        display: grid;
        grid-template-columns: 104px minmax(0, 1fr);
        align-items: center;
        min-height: 76px;
        border-radius: 12px;
    }

    .serenity-page .ser-gallery-explorer .ser-gallery-category img {
        height: 76px;
    }

    .serenity-page .ser-gallery-explorer .ser-gallery-category span {
        padding: 12px;
    }

    .serenity-page .ser-gallery-explorer .ser-gallery-viewer {
        min-width: 0;
    }

    .serenity-page .ser-gallery-explorer .ser-gallery-feature {
        width: 100%;
        height: min(36vw, 440px);
        object-fit: contain;
        background: #e8e5df;
    }
}

/* Desktop gallery restores the full Serenity photo grid; mobile stays on-demand. */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .serenity-page .ser-gallery .ser-gallery-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .serenity-page .ser-gallery .ser-gallery-grid > .grid-sizer {
        display: none !important;
    }

    .serenity-page .ser-gallery .ser-gallery-grid > .grid-item {
        position: relative !important;
        inset: auto !important;
        width: auto !important;
        margin: 0 !important;
        transform: none !important;
    }
}

@media (min-width: 1400px) and (hover: hover) and (pointer: fine) {
    .serenity-page .ser-gallery .ser-gallery-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.serenity-page .ser-gallery-anchor {
    display: block;
    height: 0;
}

.serenity-page .ser-gallery-desktop {
    display: none;
}

@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .serenity-page .ser-gallery-desktop {
        display: block;
    }

    .serenity-page .ser-gallery-explorer {
        display: none;
    }
}

/* ==========================================================================
   MOBILE ALIGNMENT & SPACING PASS — 2026-09-21
   Appended last so it wins over the earlier patch layers. Every rule is
   scoped to a mobile/tablet media query; desktop rendering is untouched.
   ========================================================================== */

/* ---------- 01: opaque header ----------
   The theme's .navbar is fixed with background rgba(0,0,0,.35), so body copy
   was legible straight through the logo bar while scrolling. Nav links and the
   hamburger are hidden on this page (see "07: remove exit routes" above), so
   the bar is logo-only and never gains a solid scrolled state of its own.
   This stylesheet loads only on page 24, so the bare .navbar selector is safe. */
@media (max-width: 991px) {
    .navbar.header-light {
        background: rgba(20, 22, 26, 0.94) !important;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07);
    }
}

/* Tablet + phone: the plan swiper drops to one slide per view at 768px, so the
   absolutely-centred arrows sit on top of the card here too. And iPadOS zooms
   on sub-16px fields exactly like iOS does. */
@media (max-width: 991px) {

    /* ---------- 03: floor-plan arrows below the card ----------
       Both arrows were absolutely centred over the slide, covering the plan
       image and the "2 BHK Row House" title. Park them in a centred row inside
       the swiper's own bottom padding, clear of the card. */
    .serenity-page .ser-plan-swiper {
        padding: 0 0 80px;
    }

    .serenity-page .ser-plan-nav {
        top: auto !important;
        bottom: 10px !important;
        margin: 0 !important;
        transform: none !important;
    }

    .serenity-page .ser-plan-prev {
        left: 50% !important;
        right: auto !important;
        margin-left: -60px !important;
    }

    .serenity-page .ser-plan-next {
        left: 50% !important;
        right: auto !important;
        margin-left: 8px !important;
    }

    /* ---------- 05: no iOS zoom-on-focus ----------
       iOS Safari zooms the viewport whenever a focused field is under 16px.
       Trim the padding so the fields don't get taller in the process. */
    .serenity-page .form-alt input.wpcf7-form-control,
    .serenity-page .form-alt textarea.wpcf7-form-control,
    .serenity-page .form-alt select.wpcf7-form-control {
        font-size: 16px;
        padding: 13px 16px;
    }

    .serenity-page .form-alt select.wpcf7-form-control {
        padding-right: 44px;
    }
}

@media (max-width: 767px) {

    /* ---------- 02: stacked buttons line up ----------
       These rows are `display:flex; flex-wrap:wrap`, so wrapped buttons kept
       their intrinsic widths (219px next to 178px) and hugged the left edge
       underneath centred copy. Stack them full-width instead. */
    .serenity-page .ser-hero-actions,
    .serenity-page .ser-ready-actions,
    .serenity-page .ser-cta-actions {
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 12px;
        width: 100%;
    }

    .serenity-page .ser-hero-actions .ser-btn,
    .serenity-page .ser-ready-actions .ser-btn,
    .serenity-page .ser-cta-actions .ser-btn {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        min-height: 48px;
    }

    /* ---------- 04: WhatsApp float off the text column ----------
       Bottom-left put it on top of left-aligned body copy in every section.
       Overrides the inline critical CSS in page.php, which prints at wp_head
       priority 1 — i.e. before this stylesheet. */
    .serenity-page .ser-whatsapp-float {
        left: auto;
        right: 12px;
        bottom: calc(68px + env(safe-area-inset-bottom));
        width: 46px;
        height: 46px;
        box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.45);
    }

    .serenity-page .ser-whatsapp-float svg {
        width: 27px;
        height: 27px;
    }

    /* ---------- 06: stats strip breathes ----------
       Labels were computing to 8px. They now sit at 9.5–11px, so give the
       cells a little more room rather than letting the type crowd. */
    .serenity-page .ser-stat {
        padding: 13px 5px 13px;
        gap: 5px;
    }

    /* ---------- 07: gallery strip reads as scrollable ---------- */
    .serenity-page .ser-gallery-categories {
        scroll-snap-type: x mandatory;
        scroll-padding-left: 20px;
        -webkit-mask-image: linear-gradient(to right, #000 88%, rgba(0, 0, 0, 0.15) 100%);
        mask-image: linear-gradient(to right, #000 88%, rgba(0, 0, 0, 0.15) 100%);
    }

    .serenity-page .ser-gallery-category {
        scroll-snap-align: start;
    }

    /* ---------- 08: micro-label comfort ---------- */
    .serenity-page .ser-eyebrow {
        font-size: 12px;
    }

    .serenity-page .ser-plan-status {
        font-size: 12px;
    }
}

/* ==========================================================================
   DESKTOP FLOOR-PLAN ALIGNMENT + GALLERY RENDER COST — 2026-09-22
   Appended last so it wins over the earlier patch layers.
   ========================================================================== */

@media (min-width: 768px) {

    /* ---------- A1: plan meta on a fixed grid ----------
       .ser-plan-meta was a wrapping flex row, so a two-line title
       ("3 BHK Row House (Large)") pushed its price and status badge one line
       box (27px) lower than the neighbouring cards. An explicit grid pins each
       piece to its own row, and reserving two lines for the title keeps those
       rows at the same height whether the title wraps or not. */
    .serenity-page .ser-plan-meta {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: baseline;
        row-gap: 6px;
        column-gap: 12px;
    }

    /* One line box measures 27px at font-size 17px (~1.59 line-height). */
    .serenity-page .ser-plan-type {
        grid-area: 1 / 1;
        min-height: 3.2em;
    }

    .serenity-page .ser-plan-area {
        grid-area: 1 / 2;
        justify-self: end;
    }

    .serenity-page .ser-plan-price {
        grid-area: 2 / 1 / auto / -1;
        width: auto;
        margin-top: 0;
    }

    .serenity-page .ser-plan-status {
        grid-area: 3 / 1 / auto / -1;
        justify-self: end;
        margin-left: 0;
        margin-top: 0;
    }
}

/* ---------- A2: desktop carousel arrows below the cards ----------
   The arrows were centred on the track's edges, sitting on top of the outer
   cards. They cannot simply be pushed outside it: at 1280px the 1140px
   container leaves only 70px of margin, less than the 52px arrow plus a gap,
   so a negative offset hangs off-screen. Insetting the track instead exposed
   loop-clone slivers in the gutter (overflow clips at the padding edge, not
   the content edge). So use the same centred row below the track that phones
   and tablets already use - guaranteed clear at every width. */
@media (min-width: 992px) {
    .serenity-page .ser-plan-swiper {
        padding: 0 10px 84px;
    }

    .serenity-page .ser-plan-nav {
        top: auto !important;
        bottom: 14px !important;
        margin: 0 !important;
        transform: none !important;
    }

    .serenity-page .ser-plan-prev {
        left: 50% !important;
        right: auto !important;
        margin-left: -62px !important;
    }

    .serenity-page .ser-plan-next {
        left: 50% !important;
        right: auto !important;
        margin-left: 10px !important;
    }
}


@media (min-width: 768px) {

    /* ---------- B2: skip rendering offscreen tiles ----------
       42 tiles in one grid; the browser can skip layout and paint for the ones
       outside the viewport. Intrinsic size = 290px image + 2x12px padding. */
    .serenity-page .ser-gallery .grid-item {
        content-visibility: auto;
        contain-intrinsic-size: 248px 314px;
    }
}

/* ---------- B3: filter state ----------
   Replaces Isotope's filtering (see the inline script after the gallery).
   Isotope's masonry pass was discarded by the CSS-grid rules above, and it
   blocked on imagesLoaded for all 42 images before doing so. */
.serenity-page .ser-gallery .grid-item.is-filtered-out {
    display: none;
}

/* ==========================================================================
   VISUAL PASS — gallery grid + mobile amenities — 2026-09-22
   ========================================================================== */

/* ---------- G1: gallery reads as one composition ----------
   .grid-item carried 12px padding on top of the grid's 18px gap, so images sat
   42px apart and read as scattered cards. Gutter is now the gap alone. */
@media (min-width: 768px) {
    .serenity-page .ser-gallery .grid-item {
        padding: 0;
    }

    .serenity-page .ser-gallery .ser-gallery-grid {
        gap: 14px;
    }

    /* Source photos are 3:2; a 4:3 tile crops lightly and gives the grid a
       steadier landscape rhythm than the near-square 290px box it replaces. */
    .serenity-page .ser-gallery .portfolio-image img {
        height: auto;
        aspect-ratio: 4 / 3;
    }

    /* Tiles are shorter now that the padding is gone - keep the placeholder
       for offscreen tiles in step with the real height. */
    .serenity-page .ser-gallery .grid-item {
        contain-intrinsic-size: 274px 206px;
    }

    /* Tight gutters make the old drop shadow muddy the gaps. */
    .serenity-page .ser-gallery .portfolio-box {
        box-shadow: 0 10px 26px -20px rgba(20, 22, 26, 0.45);
    }
}

/* ---------- G2: all ten filter tabs on one row ----------
   Eight fitted, two dropped to a centred orphan row. */
@media (min-width: 768px) {
    .serenity-page .ser-gallery .ser-gallery-filter {
        gap: 6px;
        padding-bottom: 38px !important;
    }

    /* Ten tabs needed 1354px in a 1250px row at 1280px wide. Trimming the
       type and the pill padding closes that without a second orphan row. */
    .serenity-page .ser-gallery .ser-gallery-filter > li > a {
        padding: 8px 11px;
        font-size: 10.5px;
        letter-spacing: 0.04em;
    }
}

/* ---------- M1: amenities in one screen ----------
   Ten cards at 187px tall made the section 1203px - well past a 844px phone
   once the 67px header and 57px sticky bar are accounted for. Compact the
   card so the whole section lands inside a single frame. */
@media (max-width: 767px) {
    .serenity-page .ser-amenities {
        padding: 26px 0;
    }

    .serenity-page .ser-amenities .ser-head {
        margin-bottom: 18px;
    }

    .serenity-page .ser-amenities .ser-title {
        font-size: 26px !important;
        margin-bottom: 6px;
    }

    .serenity-page .ser-amenities .ser-sub {
        font-size: 13.5px;
        line-height: 1.45;
        margin-bottom: 0;
    }

    .serenity-page .ser-amenity-grid {
        gap: 10px;
    }

    .serenity-page .ser-amenity {
        padding: 12px 8px;
        border-radius: 12px;
    }

    .serenity-page .ser-amenity-icon {
        width: 36px;
        height: 36px;
        margin-bottom: 6px;
    }

    .serenity-page .ser-amenity-icon i {
        font-size: 15px;
    }

    .serenity-page .ser-amenity p {
        font-size: 12.5px;
        line-height: 1.3;
        margin: 0;
    }
}

/* Narrow desktops get a smaller container (1170px at 1200px wide), so the tab
   row needs a little more trimming to stay on one line. Below ~1100px it
   wraps regardless - that degrades to a balanced two-row block, not the
   8-plus-2 orphan the original produced. */
@media (min-width: 992px) and (max-width: 1279px) {
    .serenity-page .ser-gallery .ser-gallery-filter > li > a {
        padding: 8px 8px;
        font-size: 10px;
    }
}

/* ==========================================================================
   PERFORMANCE + ACCESSIBILITY + SITE-VISIT PROMPT — 2026-09-22
   ========================================================================== */

/* ---------- P1: hero image as an <img> ----------
   Was a CSS background-image. As a real <img fetchpriority="high"> with a
   srcset the browser discovers it from the HTML immediately, picks a size
   that fits the viewport, and the preload/.avif mismatch disappears. */
.serenity-page .ser-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    pointer-events: none;
}

@media (max-width: 767px) {
    /* Mirrors the background-position the slide used on phones. */
    .serenity-page .ser-hero-img {
        object-position: 56% center;
    }
}

/* serenity-critical.css (live-only, from an earlier round) still paints the
   1920px hero as an !important background-image on the slide, so the slide
   div fetched the full-size .avif alongside the <img> and stayed the LCP
   element. This file loads after it; a later !important wins. */
.serenity-page .ser-hero-slide,
.serenity-page .ser-hero-slide:first-child,
.serenity-page .ser-hero-slide-primary {
    background-image: none !important;
}

/* ---------- A11y: contrast ----------
   Placeholder text inherited a browser grey that fell short on the cream
   field background. */
/* Ink on gold is the page's own primary-button convention (.ser-btn-gold)
   and clears 6.6:1; white on gold was 2.7:1. */
@media (max-width: 767px) {
    .serenity-page .ser-sticky-primary {
        color: var(--ser-ink);
    }
}

.serenity-page .form-alt input.wpcf7-submit {
    color: var(--ser-ink) !important;
}

/* Floor-plan card badges: white on gold was 2.7:1; the green status was
   4.4:1 on its tint. Ink on gold is 6.7:1, the deeper green 5.6:1. */
.serenity-page .ser-plan-badge {
    color: var(--ser-ink);
}

.serenity-page .ser-plan-status.ready {
    color: #276a2b;
}

.serenity-page .form-alt input.wpcf7-form-control::placeholder,
.serenity-page .form-alt textarea.wpcf7-form-control::placeholder {
    color: var(--ser-ink-soft);
    opacity: 1;
}

/* ---------- Site-visit prompt (phones only) ----------
   A compact bottom sheet above the sticky bar, never full-screen. Shown once
   per session after 50% scroll or 30s; opens the existing enquiry modal. */
.serenity-page .ser-visit-prompt {
    display: none;
}

@media (max-width: 767px) {
    .serenity-page .ser-visit-prompt {
        display: block;
        position: fixed;
        left: 16px;
        right: 16px;
        bottom: calc(57px + 12px + env(safe-area-inset-bottom));
        z-index: 9999;
        padding: 18px 18px 14px;
        background: var(--ser-cream);
        border: 1px solid rgba(20, 22, 26, 0.08);
        border-radius: 16px;
        box-shadow: 0 18px 44px -18px rgba(20, 22, 26, 0.45);
        transform: translateY(calc(100% + 90px));
        opacity: 0;
        transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
    }

    .serenity-page .ser-visit-prompt[hidden] {
        display: none;
    }

    .serenity-page .ser-visit-prompt.is-visible {
        transform: translateY(0);
        opacity: 1;
    }

    .serenity-page .ser-visit-prompt .ser-eyebrow {
        margin-bottom: 8px;
        font-size: 11px;
    }

    .serenity-page .ser-visit-title {
        font-family: "Playfair Display", Georgia, serif;
        font-size: 19px;
        line-height: 1.25;
        font-weight: 600;
        color: var(--ser-ink);
        margin: 0 28px 14px 0;
    }

    .serenity-page .ser-visit-cta {
        display: flex;
        width: 100%;
        justify-content: center;
        min-height: 46px;
    }

    .serenity-page .ser-visit-later {
        display: block;
        width: 100%;
        margin-top: 4px;
        padding: 10px;
        background: none;
        border: 0;
        font-family: "Jost", sans-serif;
        font-size: 13px;
        color: var(--ser-ink-soft);
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .serenity-page .ser-visit-close {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 40px;
        height: 40px;
        background: none;
        border: 0;
        font-size: 26px;
        line-height: 1;
        color: var(--ser-ink-soft);
    }

    /* The sheet takes the WhatsApp float's corner while it is up. */
    .serenity-page .ser-visit-prompt.is-visible ~ .ser-whatsapp-float {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }
}

@media (prefers-reduced-motion: reduce) {
    .serenity-page .ser-visit-prompt {
        transition: none;
    }
}

/* ==========================================================================
   ENQUIRE SECTION — standalone form card — 2026-09-23
   The walkthrough video was removed; the form was the right-hand column of a
   7/5 split, so on its own it needs to read as a deliberate centred panel
   rather than a stray card. Heading is centred, fields stay full width.
   ========================================================================== */
.serenity-page .ser-enquire-inner {
    max-width: 640px;
    margin: 0 auto;
}

.serenity-page .ser-enquire .ser-form-card {
    text-align: center;
}

.serenity-page .ser-enquire .ser-form-card .ser-sub {
    text-align: center;
    margin: 0 auto;
}

/* CF7's submit row carries a trailing margin and an always-present spinner,
   which left a dead band under the button now that nothing follows it. */
.serenity-page .ser-enquire .form-alt .form-group:last-child {
    margin-bottom: 0;
    position: relative;
}

.serenity-page .ser-enquire .form-alt .wpcf7-spinner {
    position: absolute;
    left: 50%;
    bottom: -26px;
    margin: 0;
    transform: translateX(-50%);
}

.serenity-page .ser-enquire .ser-form-card .form-alt {
    text-align: left;
    margin-top: 26px;
}

@media (max-width: 767px) {
    .serenity-page .ser-enquire {
        padding-top: 46px;
        padding-bottom: 46px;
    }
}