/* Royala 18 microsite: page content styles. Scoped under .r18 so it never affects the shared layout (header, footer, widgets). */
.r18{
    --navy: #172554;
    --deep: #082f40;
    --gold: #e9b936;
    --ivory: #f7f5f0;
    --ink: #172554;
    --muted: #667085;
    --line: #e8e2d7;
    --serif: 'Playfair Display', Georgia, serif;
    --sans: 'DM Sans', Arial, sans-serif;
}

.r18 *{ box-sizing: border-box; }
html:has(.r18){ scroll-behavior: smooth; }
.r18{
    margin: 0;
    color: var(--ink);
    font: 16px/1.65 var(--sans);
}
.r18 a{ color: inherit; text-decoration: none; }
.r18 img{ max-width: 100%; display: block; }

.r18 .container{
    width: min(1200px, 92%);
    margin: auto;
}

.r18 .eyebrow{
    color: #b88716;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    margin: 0 0 13px;
}

.r18 h2{
    font: 600 clamp(29px, 3.4vw, 42px)/1.18 var(--serif);
    margin: 0 0 12px;
    letter-spacing: -.5px;
}

.r18 .intro{
    color: var(--muted);
    max-width: 760px;
    margin: 0;
}

.r18 section.content{ padding: 68px 0; }

/* PROJECT OVERVIEW */

.r18 .project-overview{
    padding: 68px 0 72px !important;
    background: #fff;
}

.r18 .overview-grid{
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: 58px;
    align-items: center;
}

.r18 .overview-copy h1{
    font: 600 clamp(44px, 5.3vw, 68px)/1.08 var(--serif);
    letter-spacing: -1.5px;
    margin: 0 0 16px;
    color: var(--navy);
}

.r18 .overview-copy h1 em{
    font-style: normal;
    color: var(--gold);
}

.r18 .overview-lead{
    font-size: 19px;
    line-height: 1.55;
    color: #34405d;
    font-weight: 500;
    max-width: 610px;
    margin: 0 0 14px;
}

.r18 .overview-description{
    font-size: 14px;
    line-height: 1.8;
    color: var(--muted);
    max-width: 610px;
    margin: 0;
}

.r18 .overview-visual{
    position: relative;
    min-width: 0;
}

.r18 .overview-visual:before{
    content: "";
    position: absolute;
    inset: 18px -18px -18px 18px;
    background: var(--ivory);
}

.r18 .overview-visual .photo{
    position: relative;
    width: 100%;
    height: 440px;
    object-fit: cover;
    box-shadow: 0 18px 45px #17255418;
}

.r18 .visual-caption{
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(245px, 58%);
    padding: 18px 20px;
    background: var(--navy);
    color: white;
    display: grid;
    gap: 5px;
}

.r18 .visual-caption span{
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--gold);
    font-weight: 700;
}

.r18 .visual-caption strong{
    font: 500 17px/1.35 var(--serif);
}

/* PROJECT STATISTICS */

.r18 .stats{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 24px 0 20px;
}

.r18 .stat{
    min-height: 83px;
    padding: 13px 15px;
    border: 1px solid var(--line);
    background: var(--ivory);
}

.r18 .stat strong{
    display: block;
    font: 600 24px/1.2 var(--serif);
    color: var(--navy);
    margin-bottom: 5px;
}

.r18 .stat span{
    font-size: 10px;
    line-height: 1.3;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* BUTTONS */

.r18 .actions{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.r18 .btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 11px 19px;
    background: var(--navy);
    color: white;
    border: 1px solid var(--navy);
    font-size: 13px;
    font-weight: 700;
    border-radius: 2px;
    transition: .2s;
}

.r18 .btn:hover{
    transform: translateY(-2px);
    background: #24366f;
}

.r18 .btn.btn-light{
    background: white;
    color: var(--navy);
    border-color: var(--line);
}

.r18 .btn.btn-light:hover{
    background: var(--ivory);
}

.r18 .btn.gold,.r18 .btn.btn-gold{
    background: var(--gold);
    border-color: var(--gold);
    color: var(--navy);
}

.r18 .disclaimer{
    font-size: 11px;
    color: #788195;
    line-height: 1.6;
    margin: 15px 0 0;
}

/* A CLOSER LOOK */

.r18 .ivory{ background: var(--ivory); }

.r18 .gallery{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 25px;
}

.r18 .gallery img{
    width: 100%;
    height: 235px;
    object-fit: cover;
    transition: transform .35s;
}

.r18 .gallery img:hover{
    transform: scale(1.015);
}

/* PROJECT HIGHLIGHTS */

.r18 .highlights-section{ background: #fff; }

.r18 .features{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 27px;
}

.r18 .feature-card{
    min-height: 190px;
    padding: 21px 19px;
    background: var(--ivory);
    border: 1px solid #ece5d8;
    transition: transform .22s, box-shadow .22s, border-color .22s;
}

.r18 .feature-card:hover{
    transform: translateY(-4px);
    border-color: #e5c15e;
    box-shadow: 0 14px 30px #1725540d;
}

.r18 .feature-icon{
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    margin-bottom: 15px;
    background: white;
    border: 1px solid #ead9a8;
    border-radius: 10px;
    color: #b88716;
    font-size: 25px;
}

.r18 .feature-card h3{
    font: 600 18px/1.3 var(--serif);
    margin: 0 0 7px;
    color: var(--navy);
}

.r18 .feature-card p{
    font-size: 12px;
    line-height: 1.6;
    color: var(--muted);
    margin: 0;
}

/* HOME TO BELONG */

.r18 .home-belong{
    background: var(--navy);
    color: white;
}

.r18 .home-belong .eyebrow{ color: var(--gold); }
.r18 .home-belong h2{ color: white; max-width: 520px; }
.r18 .home-belong .intro{
    color: #d9e0ef;
    max-width: 520px;
}

.r18 .split{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 52px;
    align-items: center;
}

.r18 .home-belong .photo{
    width: 100%;
    height: 365px;
    object-fit: contain;
    background: white;
    padding: 8px;
    box-shadow: 0 16px 42px #0002;
}

/* CLOSING CTA */

.r18 .cta{
    background: var(--ivory);
    color: var(--navy);
    padding: 38px 0;
    border-top: 1px solid var(--line);
}

.r18 .cta .row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.r18 .cta h2{
    font-size: clamp(24px, 3vw, 34px);
    margin: 0 0 6px;
}

.r18 .cta p{
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

/* EXISTING FLOOR PLAN / SPECIFICATION STYLES */

.r18 .photo{
    width: 100%;
    height: 440px;
    object-fit: cover;
    box-shadow: 0 16px 42px #17255418;
}

.r18 .plans{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-top: 30px;
}

.r18 .plan{
    border: 1px solid var(--line);
    background: white;
    box-shadow: 0 12px 35px #17255412;
}

.r18 .plan img{
    width: 100%;
    height: 410px;
    object-fit: contain;
    background: var(--deep);
    padding: 12px;
}

.r18 .plan .pad{ padding: 22px; }

.r18 .plan h3{
    font: 600 23px var(--serif);
    margin: 0 0 12px;
}

.r18 .specs{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-top: 28px;
}

.r18 .specs ul{
    padding-left: 20px;
    color: var(--muted);
}

.r18 .specs li{ padding: 4px 0; }

.r18 .mapgrid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: center;
}

.r18 .mapgrid img{
    width: 100%;
    height: 380px;
    object-fit: contain;
    background: var(--deep);
    padding: 10px;
}

.r18 .dist{ list-style: none; padding: 0; }

.r18 .dist li{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    padding: 9px 0;
}

/* RESPONSIVE */

@media(max-width:1000px){
    .r18 .overview-grid{ gap: 34px; }
    .r18 .features{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media(max-width:700px){
    .r18 section.content{ padding: 52px 0; }

    .r18 .project-overview{
        padding: 48px 0 55px !important;
    }

    .r18 .overview-grid,.r18 .split,.r18 .mapgrid{
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .r18 .overview-copy h1{ font-size: 48px; }
    .r18 .overview-lead{ font-size: 17px; }

    .r18 .overview-visual .photo{ height: 320px; }

    .r18 .overview-visual:before{
        inset: 12px -8px -10px 10px;
    }

    .r18 .stats{ gap: 7px; }

    .r18 .stat{
        padding: 11px 9px;
        min-height: 76px;
    }

    .r18 .stat strong{ font-size: 20px; }

    .r18 .stat span{
        font-size: 9px;
        letter-spacing: .5px;
    }

    .r18 .features{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .r18 .feature-card{
        min-height: 180px;
        padding: 16px 13px;
    }

    .r18 .feature-card h3{ font-size: 16px; }

    .r18 .gallery{
        grid-template-columns: repeat(2, 1fr);
        gap: 9px;
    }

    .r18 .gallery img{ height: 175px; }
    .r18 .home-belong .photo{ height: 280px; }

    .r18 .plans,.r18 .specs{ grid-template-columns: 1fr; }

    .r18 .plan img{ height: 340px; }

    .r18 .cta .row{
        align-items: flex-start;
        flex-direction: column;
    }
}

@media(max-width:380px){
    .r18 .features{ grid-template-columns: 1fr; }
    .r18 .stats{ grid-template-columns: 1fr 1fr; }
    .r18 .stat:last-child{ grid-column: 1 / -1; }
}





/* =========================================
   ROYALA 18 - FINAL DESIGN REFINEMENTS
========================================= */

/* Gold enquiry buttons */
.r18 .btn.btn-gold,.r18 .btn.gold{
    background: var(--gold);
    border-color: var(--gold);
    color: var(--navy);
}

.r18 .btn.btn-gold:hover,.r18 .btn.gold:hover{
    background: #dca91f;
    border-color: #dca91f;
    color: var(--navy);
}

/* Project highlight cards: icon and content in one row */
.r18 .features .feature-card{
    min-height: 145px;
    padding: 23px 20px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.r18 .features .feature-icon{
    flex: 0 0 43px;
    width: 43px;
    height: 43px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #ead9a8;
    border-radius: 10px;
    color: #b88716;
}

.r18 .features .feature-icon svg{
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.r18 .feature-content{
    flex: 1;
    min-width: 0;
}

.r18 .feature-content h3{
    margin: 1px 0 7px;
    font-size: 17px;
    line-height: 1.35;
}

.r18 .feature-content p{
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
}

/* Closing enquiry CTA */
.r18 .cta .row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.r18 .cta .row > div{
    flex: 1;
}

.r18 .cta .btn{
    flex: 0 0 auto;
    min-height: 60px;
    padding: 17px 32px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 3px;
}

/* Responsive refinements */
@media (max-width: 1000px){
    .r18 .features{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px){
    .r18 .features .feature-card{
        min-height: 125px;
        padding: 17px 13px;
        gap: 11px;
    }

    .r18 .features .feature-icon{
        flex-basis: 38px;
        width: 38px;
        height: 38px;
    }

    .r18 .features .feature-icon svg{
        width: 21px;
        height: 21px;
    }

    .r18 .feature-content h3{
        font-size: 15px;
    }

    .r18 .feature-content p{
        font-size: 11px;
    }

    .r18 .cta .row{
        align-items: center;
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .r18 .cta .btn{
        width: 100%;
        min-height: 58px;
        padding: 16px 24px;
    }
}





/* =========================================
   ROYALA 18 - FLOOR PLANS PAGE REDESIGN
========================================= */

.r18.floor-page{
    background: #fff;
}

/* Page introduction */
.r18 .floor-hero{
    padding: 58px 0 48px;
    background: var(--ivory);
    border-bottom: 1px solid var(--line);
}

.r18 .floor-hero .eyebrow{
    margin-bottom: 10px;
}

.r18 .floor-hero h1{
    font: 600 clamp(38px, 4.5vw, 54px)/1.1 var(--serif);
    color: var(--navy);
    margin: 0 0 12px;
}

.r18 .floor-hero h1 em{
    color: var(--gold);
    font-style: normal;
}

.r18 .floor-hero > .container > p:last-child{
    color: var(--muted);
    max-width: 650px;
    margin: 0;
    font-size: 15px;
}

/* Section heading */
.r18 .floor-layout-section{
    padding: 65px 0 55px;
}

.r18 .floor-section-heading{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 25px;
    margin-bottom: 30px;
}

.r18 .floor-section-heading h2{
    max-width: 700px;
    margin-bottom: 10px;
}

.r18 .floor-section-heading .intro{
    max-width: 680px;
    font-size: 14px;
}

.r18 .floor-count{
    flex-shrink: 0;
    padding: 10px 14px;
    border: 1px solid var(--line);
    color: #9a741e;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

/* Card collection */
.r18 .floor-plan-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px;
}

.r18 .floor-plan-card{
    min-width: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 8px 28px rgba(23, 37, 84, .055);
    transition: transform .25s ease, box-shadow .25s ease;
}

.r18 .floor-plan-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 16px 35px rgba(23, 37, 84, .11);
}

/* Large plan image area */
.r18 .floor-plan-image{
    position: relative;
    height: 350px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f3f0e9;
}

.r18 .floor-plan-image img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform .35s ease;
}

.r18 .floor-plan-card:hover .floor-plan-image img{
    transform: scale(1.025);
}

.r18 .floor-plan-number{
    position: absolute;
    top: 15px;
    left: 16px;
    z-index: 1;
    color: var(--navy);
    background: #fff;
    border: 1px solid var(--line);
    padding: 6px 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}

/* Card information */
.r18 .floor-plan-details{
    padding: 23px 25px 25px;
}

.r18 .floor-plan-title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.r18 .floor-type{
    display: block;
    color: #a77b19;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.7px;
    margin-bottom: 5px;
}

.r18 .floor-plan-title h3{
    font: 600 25px/1.2 var(--serif);
    color: var(--navy);
    margin: 0;
}

.r18 .floor-badge{
    flex-shrink: 0;
    padding: 8px 13px;
    color: var(--navy);
    background: var(--ivory);
    border: 1px solid var(--line);
    font-size: 11px;
    font-weight: 700;
}

/* Area information */
.r18 .floor-area-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 25px;
    padding-top: 12px;
}

.r18 .floor-area-grid > div{
    padding: 12px 0;
    border-bottom: 1px solid #f0ede7;
}

.r18 .floor-area-grid > div:nth-last-child(-n+2){
    border-bottom: 0;
}

.r18 .floor-area-grid span{
    display: block;
    color: var(--muted);
    font-size: 11px;
    margin-bottom: 4px;
}

.r18 .floor-area-grid strong{
    display: block;
    color: var(--navy);
    font-size: 17px;
    font-weight: 700;
}

.r18 .floor-area-grid small{
    font-size: 10px;
    font-weight: 500;
    color: var(--muted);
}

.r18 .floor-disclaimer{
    margin: 25px 0 0;
    color: #788195;
    font-size: 11px;
    line-height: 1.7;
}

/* Bottom enquiry section */
.r18 .floor-cta{
    padding: 45px 0;
}

.r18 .floor-cta .row{
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}

.r18 .floor-cta .row > div{
    flex: 1;
}

.r18 .floor-cta .eyebrow{
    margin-bottom: 8px;
}

.r18 .floor-cta h2{
    margin-bottom: 7px;
}

.r18 .floor-cta .btn{
    flex-shrink: 0;
    min-height: 58px;
    padding: 17px 30px;
    font-size: 14px;
}

/* Tablet */
@media (max-width: 900px){
    .r18 .floor-plan-grid{
        gap: 18px;
    }

    .r18 .floor-plan-image{
        height: 290px;
        padding: 15px;
    }

    .r18 .floor-plan-details{
        padding: 20px;
    }

    .r18 .floor-area-grid{
        gap: 0 15px;
    }
}

/* Mobile */
@media (max-width: 700px){
    .r18 .floor-hero{
        padding: 42px 0 35px;
    }

    .r18 .floor-layout-section{
        padding: 45px 0;
    }

    .r18 .floor-section-heading{
        display: block;
        margin-bottom: 23px;
    }

    .r18 .floor-count{
        display: inline-block;
        margin-top: 17px;
    }

    .r18 .floor-plan-grid{
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .r18 .floor-plan-image{
        height: 300px;
        padding: 17px;
    }

    .r18 .floor-plan-details{
        padding: 20px;
    }

    .r18 .floor-plan-title h3{
        font-size: 23px;
    }

    .r18 .floor-area-grid{
        gap: 0 20px;
    }

    .r18 .floor-cta .row{
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        gap: 20px;
    }

    .r18 .floor-cta .btn{
        width: 100%;
        min-height: 56px;
    }
}

@media (max-width: 380px){
    .r18 .floor-plan-image{
        height: 245px;
    }

    .r18 .floor-plan-details{
        padding: 16px;
    }

    .r18 .floor-area-grid{
        gap: 0 12px;
    }
}





/* FLOOR PLAN GRID: TWO COLUMNS, TWO ROWS */
.r18 .floor-plan-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

/* Remove image numbering */
.r18 .floor-plan-number{
    display: none !important;
}

/* Large floor-plan image */
.r18 .floor-plan-image{
    height: 340px;
    padding: 18px;
    background: #f3f0e9;
}

/* Card details */
.r18 .floor-plan-details{
    padding: 22px 24px;
}

.r18 .floor-plan-title h3{
    color: var(--navy);
    font-size: 24px;
    font-weight: 700;
}

.r18 .floor-type{
    color: #b88716;
    font-weight: 700;
}

.r18 .floor-badge{
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
}

/* ALL FOUR AREA DETAILS IN ONE ROW */
.r18 .floor-area-grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding-top: 15px;
}

.r18 .floor-area-grid > div{
    padding: 10px 0;
    border-bottom: none;
    border-right: 1px solid var(--line);
}

.r18 .floor-area-grid > div:last-child{
    border-right: none;
}

.r18 .floor-area-grid span{
    color: #98701e;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.r18 .floor-area-grid strong{
    color: var(--navy);
    font-size: 17px;
    font-weight: 700;
    white-space: nowrap;
}

.r18 .floor-area-grid small{
    color: #667085;
    font-size: 10px;
    font-weight: 600;
}

/* TABLET */
@media (max-width: 900px){
    .r18 .floor-plan-grid{
        gap: 16px;
    }

    .r18 .floor-plan-image{
        height: 280px;
    }

    .r18 .floor-plan-details{
        padding: 18px;
    }

    .r18 .floor-area-grid{
        gap: 7px;
    }

    .r18 .floor-area-grid span{
        font-size: 9px;
    }

    .r18 .floor-area-grid strong{
        font-size: 14px;
    }
}

/* MOBILE */
@media (max-width: 600px){
    .r18 .floor-plan-grid{
        grid-template-columns: 1fr;
    }

    .r18 .floor-plan-image{
        height: 300px;
    }

    .r18 .floor-area-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 15px;
    }

    .r18 .floor-area-grid > div{
        border-right: none;
        border-bottom: 1px solid var(--line);
    }
}

/* The shared navbar hides "Enquire Now" at <=1200px; the microsite menu repeats it there (see Royala18Controller). */
.site-nav .site-nav-enquire{display:none}
@media(max-width:1200px){.site-nav .site-nav-enquire{display:block}}

/* The shared site.css also styles some generic class names this content uses (.intro, .split p, .stats div).
   Undo only those leaked properties. :where() keeps the specificity equal to site.css (this file loads later),
   so the microsite's own .r18 rules above still take precedence. */
.r18 :where(.intro){text-align:start}
.r18 :where(.split) p{line-height:inherit}
.r18 :where(.stats) div{display:block;gap:normal}

/* =====================================================================
   Homepage – phones only (<=640px). Desktop and tablet are unaffected.
   Reorders with CSS only: the text wrappers become display:contents so
   their children and the image can be ordered as one column.
   ===================================================================== */
@media (max-width: 640px) {
    /* 24px side gutters keep content clear of the shared 21px "Contact Us" tab on the right edge */
    .r18.home-page .container{width:calc(100% - 48px)}

    /* Hero: heading, lead, building image, stats (3 in one row), buttons (one row), RERA note */
    .r18 .overview-grid{display:flex;flex-direction:column;align-items:stretch;gap:0}
    .r18 .overview-copy{display:contents}
    .r18 .overview-copy > .eyebrow{order:1}
    .r18 .overview-copy > h1{order:2;font-size:44px}
    .r18 .overview-lead{order:3;margin-bottom:22px}
    .r18 .overview-description{display:none}
    .r18 .overview-visual{order:4;margin:0 8px 30px 0}
    .r18 .overview-visual .photo{height:280px}
    .r18 .overview-copy > .stats{order:5;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:0}
    /* Buttons below the stats. The gold button gets the wider column (55%) so "Enquire about Royala 18" stays on one line. */
    .r18 .overview-copy > .actions{order:6;display:grid;grid-template-columns:minmax(0,9fr) minmax(0,11fr);align-items:stretch;gap:8px;margin-top:12px}
    .r18 .overview-copy > .actions .btn{min-width:0;min-height:48px;padding:10px 12px;font-size:12.5px;line-height:1.25;text-align:center;white-space:nowrap}
    .r18 .stat,.r18 .stat:last-child{grid-column:auto;min-width:0;min-height:0;padding:11px 8px}
    .r18 .stat strong{font-size:18px;line-height:1.15;overflow-wrap:anywhere}
    .r18 .stat span{display:block;font-size:8.5px;letter-spacing:.4px;overflow-wrap:anywhere}
    .r18 .overview-copy > .disclaimer{order:7;margin-top:14px}

    /* Compact 2-column icon cards, equal heights. Shared by the homepage highlights (.features)
       and the specifications amenities (.amenity-grid); the amenity selectors are one class more
       specific so they win over specifications.css, which loads after this file. */
    .r18 .features,.r18.spec-page .amenity-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:9px;margin-top:22px}
    .r18 .features .feature-card,.r18 .amenity-grid .amenity-card{display:flex;min-height:0;min-width:0;flex-direction:column;align-items:flex-start;gap:10px;padding:14px 12px}
    .r18 .features .feature-icon,.r18 .amenity-grid .amenity-icon{flex:0 0 auto;width:36px;height:36px;margin:0}
    .r18 .features .feature-icon svg,.r18 .amenity-grid .amenity-icon svg{width:20px;height:20px}
    .r18 .feature-content h3,.r18 .amenity-grid .amenity-card h3{margin:0;font-size:15px;line-height:1.3;overflow-wrap:anywhere;hyphens:auto}
    .r18 .feature-content p{display:none}

    /* Home to belong: label, heading, floor-plan image, paragraph, button */
    .r18 .home-belong .split{display:flex;flex-direction:column;align-items:stretch;gap:0}
    .r18 .home-belong .split > div{display:contents}
    .r18 .home-belong .eyebrow{order:1}
    .r18 .home-belong h2{order:2}
    .r18 .home-belong .photo{order:3;height:240px;margin:8px 0 20px}
    .r18 .home-belong .intro{order:4}
    .r18 .home-belong .actions{order:5;margin-top:18px}
}

/* =====================================================================
   Floor-plan cards – phones only (<=640px). Desktop and tablet are unaffected.
   Same markup for all four flats: navy image panel, title row with BHK pill,
   and the four area metrics in one row with gold icons (CSS masks, no extra markup).
   ===================================================================== */
@media (max-width: 640px) {
    /* Same 24px gutters as the homepage: keeps cards clear of the shared "Contact Us" tab on the right edge */
    .r18.floor-page .container{width:calc(100% - 48px)}
    .r18 .floor-plan-grid{grid-template-columns:minmax(0,1fr);gap:22px}
    .r18 .floor-plan-card{border:1px solid #ece6da;border-radius:18px;box-shadow:0 12px 32px rgba(23,37,84,.10)}
    .r18 .floor-plan-card:hover{transform:none}

    .r18 .floor-plan-image{height:auto;aspect-ratio:4/3;margin:10px 10px 0;padding:12px;border-radius:12px;background:var(--navy)}
    .r18 .floor-plan-image img{border-radius:6px}
    .r18 .floor-plan-card:hover .floor-plan-image img{transform:none}

    .r18 .floor-plan-details{padding:16px 14px 14px}
    .r18 .floor-plan-title{align-items:center;gap:10px;padding-bottom:14px}
    .r18 .floor-plan-title > div{min-width:0}
    .r18 .floor-type{margin-bottom:4px;font-size:10px;letter-spacing:1.6px}
    .r18 .floor-plan-title h3{font-size:22px;line-height:1.2}
    .r18 .floor-badge{padding:7px 13px;border-radius:999px;font-size:11px;letter-spacing:.5px;white-space:nowrap}

    .r18 .floor-area-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:14px;padding:12px 2px;border-radius:12px;background:var(--ivory)}
    .r18 .floor-area-grid > div{display:flex;flex-direction:column;align-items:center;min-width:0;padding:0 4px;border-bottom:0;border-right:1px solid #e3d9c4;text-align:center}
    .r18 .floor-area-grid > div:last-child{border-right:0}
    .r18 .floor-area-grid > div::before{content:"";width:18px;height:18px;margin-bottom:6px;background:#b88716;-webkit-mask:var(--r18-icon) center/contain no-repeat;mask:var(--r18-icon) center/contain no-repeat}
    .r18 .floor-area-grid > div:nth-child(1){--r18-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/%3E%3Crect x='8.5' y='8.5' width='7' height='7' rx='1'/%3E%3C/svg%3E")}
    .r18 .floor-area-grid > div:nth-child(2){--r18-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10h18M3 20h18M6 10v10M10 10v10M14 10v10M18 10v10M8 10V5h8v5'/%3E%3C/svg%3E")}
    .r18 .floor-area-grid > div:nth-child(3){--r18-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V6l8-3v18M12 9l8 3v9M2 21h20M7.5 8h1.5M7.5 12h1.5M7.5 16h1.5M15 15h2M15 18h2'/%3E%3C/svg%3E")}
    .r18 .floor-area-grid > div:nth-child(4){--r18-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 9 4.5-9 4.5-9-4.5L12 3ZM3 12l9 4.5 9-4.5M3 16.5 12 21l9-4.5'/%3E%3C/svg%3E")}
    .r18 .floor-area-grid span{min-height:2.5em;margin-bottom:5px;color:#5f6878;font-size:9.5px;font-weight:600;line-height:1.25;white-space:normal;text-wrap:balance;display:flex;align-items:center;justify-content:center}
    .r18 .floor-area-grid strong{color:var(--navy);font-size:16px;line-height:1.15;font-weight:800;white-space:nowrap}
    .r18 .floor-area-grid small{display:block;margin-top:2px;font-size:9px;font-weight:600;color:#7a8191}
}