/*==========================================================
SOLACE JAFFNA V2
Luxury Residence Website

Author : OpenAI
Version: 2.0
==========================================================*/



/*==========================================================
ROOT VARIABLES
==========================================================*/

:root{

    /* Brand */

    --primary:#C6A66B;
    --primary-light:#E0C28A;
    --primary-dark:#9A7A42;

    /* Background */

    --black:#050505;
    --black-soft:#0D0D0D;
    --black-card:#151515;

    /* Text */

    --white:#FFFFFF;
    --text:#E7E7E7;
    --muted:#9E9E9E;

    /* Borders */

    --border:rgba(255,255,255,.08);

    /* Layout */

    --container:1320px;

    --section-space:160px;

    --radius-sm:12px;
    --radius:20px;
    --radius-lg:36px;

    /* Shadows */

    --shadow-lg:
        0 40px 120px rgba(0,0,0,.45);

    --shadow-card:
        0 15px 40px rgba(0,0,0,.18);

    /* Typography */

    --font-heading:
        "Cormorant Garamond",
        serif;

    --font-body:
        "Inter",
        sans-serif;

    /* Animation */

    --transition:
        .45s cubic-bezier(.22,.61,.36,1);

}



/*==========================================================
RESET
==========================================================*/

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--black);

    color:var(--text);

    font-family:var(--font-body);

    font-size:16px;

    line-height:1.7;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}

img{

    display:block;

    width:100%;

    height:auto;

}

a{

    color:inherit;

    text-decoration:none;

}

button,
input,
textarea,
select{

    font:inherit;

}

button{

    cursor:pointer;

}

ul{

    list-style:none;

}



/*==========================================================
SELECTION
==========================================================*/

::selection{

    background:var(--primary);

    color:#000;

}



/*==========================================================
SCROLLBAR
==========================================================*/

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#0b0b0b;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-light);

}



/*==========================================================
LAYOUT
==========================================================*/

.container{

    width:min(92%,var(--container));

    margin-inline:auto;

}

.section{

    padding:var(--section-space) 0;

    position:relative;

}

.section-heading{

    margin-bottom:80px;

}

.section-heading.center{

    text-align:center;

}

.section-tag{

    display:inline-block;

    margin-bottom:20px;

    color:var(--primary);

    font-size:.75rem;

    letter-spacing:.4em;

    text-transform:uppercase;

}

.section-heading h2{

    font-family:var(--font-heading);

    font-weight:500;

    font-size:clamp(3rem,7vw,6rem);

    line-height:1;

    color:var(--white);

}

.section-heading h2 span{

    color:var(--primary);

}

.section-heading p{

    margin-top:24px;

    max-width:720px;

    color:var(--muted);

    font-size:1.1rem;

}



/*==========================================================
TYPOGRAPHY
==========================================================*/

h1,
h2,
h3,
h4{

    font-family:var(--font-heading);

    font-weight:500;

}

h3{

    font-size:2rem;

}

p{

    color:var(--muted);

}

.lead{

    font-size:1.45rem;

    color:var(--white);

    line-height:1.7;

}



/*==========================================================
BUTTONS
==========================================================*/

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 36px;

    border-radius:999px;

    background:var(--primary);

    color:#111;

    font-weight:600;

    transition:var(--transition);

}

.btn-primary:hover{

    transform:translateY(-4px);

    background:var(--primary-light);

}

.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 36px;

    border-radius:999px;

    border:1px solid var(--border);

    color:var(--white);

    backdrop-filter:blur(20px);

    transition:var(--transition);

}

.btn-secondary:hover{

    border-color:var(--primary);

    color:var(--primary);

    transform:translateY(-4px);

}

/*==========================================================
LOADER
==========================================================*/

.loader{

    position:fixed;
    inset:0;

    background:var(--black);

    display:flex;
    align-items:center;
    justify-content:center;

    z-index:9999;

    transition:opacity .8s ease,
               visibility .8s ease;

}

.loader.hide{

    opacity:0;
    visibility:hidden;

}

.loader-logo{

    width:170px;

}

.loader-logo img{

    width:100%;
    animation:loaderPulse 2s infinite;

}

.loader-progress{

    position:absolute;

    bottom:80px;

    width:220px;
    height:2px;

    background:rgba(255,255,255,.08);

    overflow:hidden;

}

.loader-progress span{

    display:block;

    width:0%;
    height:100%;

    background:var(--primary);

}



/*==========================================================
CUSTOM CURSOR
==========================================================*/

.cursor{

    position:fixed;

    left:0;
    top:0;

    width:40px;
    height:40px;

    margin-left:-20px;
    margin-top:-20px;

    pointer-events:none;

    z-index:99999;

    opacity:0;

    transition:
        transform .25s ease,
        opacity .25s ease;

}

.cursor.active{

    opacity:1;

}

.cursor-dot{

    width:100%;
    height:100%;

    border:1px solid var(--primary);

    border-radius:50%;

    transition:var(--transition);

}

.cursor.hover .cursor-dot{

    transform:scale(1.8);

    background:rgba(198,166,107,.15);

}



/*==========================================================
HEADER
==========================================================*/

.header{

    position:fixed;

    top:0;
    left:0;
    width:100%;

    z-index:1000;

    padding:26px 0;

    transition:var(--transition);

}

.header.scrolled{

    padding:16px 0;

    background:rgba(5,5,5,.72);

    backdrop-filter:blur(20px);

    border-bottom:1px solid rgba(255,255,255,.05);

}

.header .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.logo{

    display:flex;

    align-items:center;

}

.logo img{

    width:150px;

    transition:var(--transition);

}

.header.scrolled .logo img{

    width:125px;

}



/*==========================================================
NAVIGATION
==========================================================*/

.navigation ul{

    display:flex;

    align-items:center;

    gap:42px;

}

.navigation a{

    position:relative;

    font-size:.9rem;

    color:var(--white);

    letter-spacing:.08em;

    transition:var(--transition);

}

.navigation a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;

    height:1px;

    background:var(--primary);

    transition:var(--transition);

}

.navigation a:hover{

    color:var(--primary);

}

.navigation a:hover::after{

    width:100%;

}



/*==========================================================
MOBILE TOGGLE
==========================================================*/

.mobile-toggle{

    display:none;

    width:48px;
    height:48px;

    border:none;

    background:none;

    flex-direction:column;

    justify-content:center;

    gap:6px;

}

.mobile-toggle span{

    width:26px;

    height:2px;

    background:var(--white);

    transition:var(--transition);

}



/*==========================================================
MOBILE MENU
==========================================================*/

.mobile-menu{

    position:fixed;

    inset:0;

    background:#080808;

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    visibility:hidden;

    transition:var(--transition);

    z-index:999;

}

.mobile-menu.active{

    opacity:1;

    visibility:visible;

}

.mobile-menu nav{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:28px;

}

.mobile-menu a{

    font-family:var(--font-heading);

    font-size:2.5rem;

    color:var(--white);

}



/*==========================================================
HERO
==========================================================*/

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

}

.hero-image{

    position:absolute;

    inset:0;

    z-index:0;

}

.hero-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transform:scale(1.08);

}

.hero-overlay{

    position:absolute;

    inset:0;

    z-index:1;

    background:
        linear-gradient(
            90deg,
            rgba(5,5,5,.82) 0%,
            rgba(5,5,5,.55) 35%,
            rgba(5,5,5,.25) 100%
        );

}

.hero .container{

    position:relative;

    z-index:5;

}

.hero-content{

    max-width:720px;

}

.hero-label{

    color:var(--primary);

    letter-spacing:.45em;

    text-transform:uppercase;

    font-size:.75rem;

    margin-bottom:30px;

}

.hero h1{

    font-size:clamp(4rem,9vw,8rem);

    line-height:.95;

    color:white;

    margin-bottom:30px;

}

.hero h1 span{

    display:block;

    color:var(--primary);

}

.hero-description{

    max-width:620px;

    font-size:1.2rem;

    margin-bottom:50px;

    color:#dddddd;

}

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}



/*==========================================================
SCROLL INDICATOR
==========================================================*/

.scroll-indicator{

    position:absolute;

    bottom:40px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

    color:white;

    font-size:.75rem;

    letter-spacing:.3em;

    text-transform:uppercase;

    z-index:20;

}

.scroll-indicator span{

    width:1px;

    height:70px;

    background:rgba(255,255,255,.35);

    position:relative;

    overflow:hidden;

}

.scroll-indicator span::after{

    content:"";

    position:absolute;

    top:-100%;

    left:0;

    width:100%;

    height:100%;

    background:var(--primary);

    animation:scrollLine 2s infinite;

}



/*==========================================================
ANIMATIONS
==========================================================*/

@keyframes loaderPulse{

    0%,100%{

        transform:scale(1);

        opacity:1;

    }

    50%{

        transform:scale(.96);

        opacity:.65;

    }

}

@keyframes scrollLine{

    from{

        top:-100%;

    }

    to{

        top:100%;

    }

}

/*==========================================================
STORY
==========================================================*/

.story{

    background:#0b0b0b;

}

.story-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:100px;

    align-items:center;

}

.story-left{

    position:sticky;

    top:140px;

}

.story-right{

    display:flex;

    flex-direction:column;

    gap:30px;

}

.story-right p{

    font-size:1.15rem;

    line-height:2;

    color:#BDBDBD;

}



/*==========================================================
STATISTICS
==========================================================*/

.statistics{

    padding:120px 0;

    background:linear-gradient(
        180deg,
        #0b0b0b,
        #101010
    );

}

.stats-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.stat-card{

    background:rgba(255,255,255,.02);

    border:1px solid var(--border);

    border-radius:24px;

    padding:50px 35px;

    transition:var(--transition);

    backdrop-filter:blur(10px);

}

.stat-card:hover{

    transform:translateY(-12px);

    border-color:rgba(198,166,107,.35);

    background:rgba(198,166,107,.05);

}

.stat-number{

    display:block;

    font-family:var(--font-heading);

    font-size:4rem;

    color:var(--primary);

    margin-bottom:20px;

    line-height:1;

}

.stat-card h3{

    color:white;

    margin-bottom:15px;

}

.stat-card p{

    color:var(--muted);

}



/*==========================================================
LIFESTYLE
==========================================================*/

.lifestyle{

    background:#080808;

}

.lifestyle-grid{

    display:grid;

    grid-template-columns:repeat(12,1fr);

    gap:28px;

}

.lifestyle-card{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    min-height:420px;

    grid-column:span 4;

    box-shadow:var(--shadow-card);

    cursor:pointer;

}

.lifestyle-card.large{

    grid-column:span 8;

    min-height:600px;

}

.lifestyle-card.wide{

    grid-column:span 8;

}

.lifestyle-card img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform 1s ease;

}

.lifestyle-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        180deg,

        rgba(0,0,0,.1),

        rgba(0,0,0,.75)

    );

    z-index:1;

}

.lifestyle-card:hover img{

    transform:scale(1.08);

}

.card-content{

    position:absolute;

    left:40px;

    right:40px;

    bottom:40px;

    z-index:2;

}

.card-content span{

    display:inline-block;

    margin-bottom:15px;

    color:var(--primary);

    letter-spacing:.3em;

    text-transform:uppercase;

    font-size:.75rem;

}

.card-content h3{

    color:white;

    font-size:2.4rem;

    margin-bottom:18px;

}

.card-content p{

    color:#E0E0E0;

    max-width:460px;

}



/*==========================================================
QUOTE
==========================================================*/

.quote{

    padding:180px 0;

    background:#050505;

    text-align:center;

}

.quote blockquote{

    max-width:900px;

    margin:auto;

    font-family:var(--font-heading);

    font-size:clamp(2.5rem,5vw,5rem);

    line-height:1.2;

    color:white;

}

.quote blockquote::before{

    content:"“";

    color:var(--primary);

}

.quote blockquote::after{

    content:"”";

    color:var(--primary);

}



/*==========================================================
BUILDING
==========================================================*/

.building{

    background:#0d0d0d;

}

.building-layout{

    display:grid;

    grid-template-columns:280px 1fr;

    gap:70px;

}

.building-sidebar{

    display:flex;

    flex-direction:column;

    gap:14px;

    position:sticky;

    top:130px;

}

.floor-button{

    padding:18px 22px;

    text-align:left;

    border-radius:14px;

    background:transparent;

    border:1px solid var(--border);

    color:#BBB;

    transition:var(--transition);

}

.floor-button:hover{

    color:white;

    border-color:var(--primary);

}

.floor-button.active{

    background:var(--primary);

    color:#111;

    border-color:var(--primary);

}

.building-stage{

    background:#111;

    border-radius:30px;

    padding:60px;

    border:1px solid var(--border);

}

.building-image{

    margin-bottom:40px;

}

.building-image img{

    border-radius:20px;

}

.building-information h3{

    color:white;

    font-size:2.5rem;

    margin-bottom:20px;

}

.building-information p{

    max-width:700px;

}



/*==========================================================
RESIDENCES
==========================================================*/

.residences{

    background:#080808;

}

.residence-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}

.residence-card{

    overflow:hidden;

    background:#101010;

    border-radius:26px;

    border:1px solid var(--border);

    transition:var(--transition);

}

.residence-card:hover{

    transform:translateY(-10px);

    border-color:rgba(198,166,107,.35);

}

.residence-image{

    overflow:hidden;

    height:320px;

}

.residence-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1s;

}

.residence-card:hover img{

    transform:scale(1.08);

}

.residence-content{

    padding:35px;

}

.residence-content h3{

    color:white;

    margin:18px 0;

}

.residence-content ul{

    display:flex;

    flex-direction:column;

    gap:10px;

    color:#BBB;

}

.status{

    display:inline-flex;

    align-items:center;

    padding:8px 18px;

    border-radius:999px;

    font-size:.75rem;

    letter-spacing:.12em;

    text-transform:uppercase;

    font-weight:600;

}

.status.available{

    background:#16351E;

    color:#8BE38E;

}

.status.limited{

    background:#433317;

    color:#F6C86A;

}

.status.sold{

    background:#3A1717;

    color:#F06B6B;

}

.view-all{

    text-align:center;

    margin-top:70px;

}



/*==========================================================
AVAILABILITY
==========================================================*/

.availability{

    padding:150px 0;

    background:#0D0D0D;

}

.availability-table{

    border:1px solid var(--border);

    border-radius:24px;

    overflow:hidden;

}

.availability-header,

.availability-row{

    display:grid;

    grid-template-columns:
        1.2fr
        1fr
        1fr
        1fr;

}

.availability-header{

    background:#151515;

    color:white;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.15em;

    font-size:.8rem;

}

.availability-header span,

.availability-row span{

    padding:24px 30px;

}

.availability-row{

    border-top:1px solid var(--border);

    transition:var(--transition);

}

.availability-row:hover{

    background:rgba(198,166,107,.04);

}

.green{

    color:#78D67C;

    font-weight:600;

}

.orange{

    color:#F0C264;

    font-weight:600;

}

.red{

    color:#F07474;

    font-weight:600;

}

/*==========================================================
FINANCE
==========================================================*/

.finance{

    background:#080808;

}

.finance-grid{

    display:grid;

    grid-template-columns:1fr 500px;

    gap:80px;

    align-items:center;

}

.finance-content p{

    margin:35px 0;

    max-width:620px;

}

.finance-card{

    background:linear-gradient(
        135deg,
        #151515,
        #0D0D0D
    );

    border:1px solid rgba(198,166,107,.20);

    border-radius:30px;

    padding:50px;

    box-shadow:var(--shadow-lg);

}

.finance-card h3{

    color:white;

    margin-bottom:40px;

    font-size:2rem;

}

.finance-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px 0;

    border-bottom:1px solid rgba(255,255,255,.06);

}

.finance-item:last-child{

    border:none;

}

.finance-item strong{

    color:var(--primary);

}



/*==========================================================
GALLERY
==========================================================*/

.gallery{

    background:#050505;

}

.gallery-grid{

    columns:3 340px;

    column-gap:28px;

}

.gallery-item{

    margin-bottom:28px;

    break-inside:avoid;

    overflow:hidden;

    border-radius:28px;

    position:relative;

    cursor:pointer;

}

.gallery-item img{

    transition:1s;

}

.gallery-item:hover img{

    transform:scale(1.08);

}

.gallery-item::after{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.18);

    opacity:0;

    transition:.4s;

}

.gallery-item:hover::after{

    opacity:1;

}



/*==========================================================
LOCATION
==========================================================*/

.location{

    background:#0D0D0D;

}

.location-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.location-list{

    display:grid;

    gap:18px;

    margin-top:45px;

}

.location-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px 0;

    border-bottom:1px solid rgba(255,255,255,.06);

}

.location-item strong{

    color:var(--primary);

    font-size:1.1rem;

}

.location-map{

    overflow:hidden;

    border-radius:30px;

    box-shadow:var(--shadow-lg);

}

.location-map img{

    transition:1s;

}

.location-map:hover img{

    transform:scale(1.05);

}



/*==========================================================
TESTIMONIALS
==========================================================*/

.testimonials{

    background:#090909;

}

.testimonial-slider{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}

.testimonial-card{

    background:#131313;

    padding:45px;

    border-radius:26px;

    border:1px solid var(--border);

    transition:var(--transition);

}

.testimonial-card:hover{

    transform:translateY(-10px);

    border-color:rgba(198,166,107,.25);

}

.stars{

    color:#FFD76B;

    font-size:1.2rem;

    margin-bottom:25px;

}

.testimonial-card p{

    color:#DDD;

    margin-bottom:30px;

    line-height:2;

}

.testimonial-card h4{

    color:var(--primary);

}



/*==========================================================
FAQ
==========================================================*/

.faq{

    background:#050505;

}

.faq-list{

    display:grid;

    gap:22px;

}

.faq details{

    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    padding:24px 30px;

    background:#111;

    transition:.4s;

}

.faq details[open]{

    border-color:rgba(198,166,107,.25);

}

.faq summary{

    cursor:pointer;

    color:white;

    font-weight:600;

    list-style:none;

}

.faq summary::-webkit-details-marker{

    display:none;

}

.faq p{

    margin-top:18px;

}



/*==========================================================
CONTACT
==========================================================*/

.contact{

    background:#0B0B0B;

}

.contact-grid{

    display:grid;

    grid-template-columns:1fr 520px;

    gap:80px;

    align-items:start;

}

.contact-info{

    display:grid;

    gap:30px;

    margin-top:50px;

}

.contact-info small{

    display:block;

    margin-bottom:6px;

    color:var(--muted);

    letter-spacing:.15em;

    text-transform:uppercase;

}

.contact-info strong{

    color:white;

    font-size:1.35rem;

}

.contact-form{

    background:#121212;

    border-radius:28px;

    padding:45px;

    border:1px solid var(--border);

}

.contact-form form{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.contact-form input,

.contact-form select,

.contact-form textarea{

    background:#1A1A1A;

    border:1px solid rgba(255,255,255,.08);

    border-radius:16px;

    padding:18px 22px;

    color:white;

    transition:.3s;

}

.contact-form input:focus,

.contact-form select:focus,

.contact-form textarea:focus{

    outline:none;

    border-color:var(--primary);

    background:#202020;

}

.contact-form textarea{

    resize:vertical;

    min-height:160px;

}



/*==========================================================
BOTTOM CTA
==========================================================*/

.bottom-cta{

    padding:160px 0;

    background:linear-gradient(
        180deg,
        #080808,
        #050505
    );

    text-align:center;

}

.bottom-cta h2{

    font-size:clamp(3rem,7vw,6rem);

    color:white;

    margin-bottom:40px;

}



/*==========================================================
FOOTER
==========================================================*/

.footer{

    background:#030303;

    border-top:1px solid rgba(255,255,255,.05);

    padding:90px 0 30px;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:70px;

    margin-bottom:70px;

}

.footer-brand img{

    width:160px;

    margin-bottom:25px;

}

.footer-brand p{

    max-width:420px;

}

.footer-links h4{

    color:white;

    margin-bottom:25px;

}

.footer-links{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.footer-links a{

    color:#BDBDBD;

    transition:.3s;

}

.footer-links a:hover{

    color:var(--primary);

}

.footer-bottom{

    padding-top:30px;

    border-top:1px solid rgba(255,255,255,.05);

    text-align:center;

    color:#777;

}



/*==========================================================
REVEAL ANIMATION HELPERS
==========================================================*/

.fade-up{

    opacity:0;

    transform:translateY(60px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.fade-up.show{

    opacity:1;

    transform:none;

}

.fade{

    opacity:0;

    transition:opacity .8s ease;

}

.fade.show{

    opacity:1;

}



/*==========================================================
IMAGE HOVER
==========================================================*/

img{

    backface-visibility:hidden;

    transform:translateZ(0);

}

.card-hover{

    transition:transform .45s ease,
               box-shadow .45s ease;

}

.card-hover:hover{

    transform:translateY(-8px);

    box-shadow:0 35px 70px rgba(0,0,0,.28);

}

/*==========================================================
TABLET
==========================================================*/

@media (max-width:1200px){

    :root{

        --section-space:130px;

    }

    .stats-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .finance-grid{

        grid-template-columns:1fr;

    }

    .location-grid{

        grid-template-columns:1fr;

    }

    .contact-grid{

        grid-template-columns:1fr;

    }

    .footer-grid{

        grid-template-columns:1fr 1fr;

    }

}



/*==========================================================
LAPTOP
==========================================================*/

@media (max-width:992px){

    .navigation{

        display:none;

    }

    .mobile-toggle{

        display:flex;

    }

    .header .btn-primary{

        display:none;

    }

    .story-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    .story-left{

        position:relative;

        top:auto;

    }

    .building-layout{

        grid-template-columns:1fr;

    }

    .building-sidebar{

        position:relative;

        top:auto;

        flex-direction:row;

        overflow:auto;

        padding-bottom:10px;

    }

    .floor-button{

        white-space:nowrap;

    }

    .residence-grid{

        grid-template-columns:1fr;

    }

    .testimonial-slider{

        grid-template-columns:1fr;

    }

}



/*==========================================================
TABLET PORTRAIT
==========================================================*/

@media (max-width:768px){

    :root{

        --section-space:110px;

    }

    .section-heading{

        margin-bottom:60px;

    }

    .hero{

        text-align:center;

    }

    .hero-content{

        margin:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-description{

        margin-inline:auto;

    }

    .stats-grid{

        grid-template-columns:1fr;

    }

    .lifestyle-grid{

        display:flex;

        flex-direction:column;

    }

    .lifestyle-card,

    .lifestyle-card.large,

    .lifestyle-card.wide{

        min-height:380px;

    }

    .availability-header{

        display:none;

    }

    .availability-row{

        grid-template-columns:1fr;

        gap:5px;

        padding:25px;

    }

    .availability-row span{

        padding:3px 0;

    }

    .gallery-grid{

        columns:2;

    }

    .footer-grid{

        grid-template-columns:1fr;

    }

}



/*==========================================================
MOBILE
==========================================================*/

@media (max-width:576px){

    :root{

        --section-space:90px;

    }

    body{

        font-size:15px;

    }

    .container{

        width:min(94%,1320px);

    }

    .hero{

        min-height:100svh;

    }

    .hero h1{

        font-size:3.2rem;

    }

    .hero-description{

        font-size:1rem;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .hero-buttons a{

        width:100%;

    }

    .card-content{

        left:25px;

        right:25px;

        bottom:25px;

    }

    .card-content h3{

        font-size:1.8rem;

    }

    .building-stage{

        padding:25px;

    }

    .contact-form{

        padding:30px;

    }

    .gallery-grid{

        columns:1;

    }

    .bottom-cta h2{

        font-size:2.7rem;

    }

}



/*==========================================================
SMALL MOBILE
==========================================================*/

@media (max-width:390px){

    .hero h1{

        font-size:2.7rem;

    }

    .section-heading h2{

        font-size:2.6rem;

    }

    .stat-number{

        font-size:3rem;

    }

}



/*==========================================================
UTILITY CLASSES
==========================================================*/

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.mt-1{

    margin-top:10px;

}

.mt-2{

    margin-top:20px;

}

.mt-3{

    margin-top:30px;

}

.mt-4{

    margin-top:40px;

}

.mt-5{

    margin-top:50px;

}

.mb-1{

    margin-bottom:10px;

}

.mb-2{

    margin-bottom:20px;

}

.mb-3{

    margin-bottom:30px;

}

.mb-4{

    margin-bottom:40px;

}

.mb-5{

    margin-bottom:50px;

}

.hide{

    display:none;

}

.w-100{

    width:100%;

}



/*==========================================================
REDUCED MOTION
==========================================================*/

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}



/*==========================================================
PRINT
==========================================================*/

@media print{

    body{

        background:white;

        color:black;

    }

    .header,

    .mobile-menu,

    .loader,

    .cursor,

    .bottom-cta,

    .scroll-indicator{

        display:none !important;

    }

}

/*==========================================================
PREMIUM INTERACTIONS
==========================================================*/

.scroll-progress{

    position:fixed;

    left:0;
    top:0;

    width:0;

    height:3px;

    background:var(--primary);

    z-index:99999;

}

.scroll-top{

    position:fixed;

    right:30px;

    bottom:30px;

    width:56px;

    height:56px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:#111;

    cursor:pointer;

    opacity:0;

    transform:translateY(20px);

    transition:.35s;

    z-index:500;

}

.scroll-top.show{

    opacity:1;

    transform:none;

}

.lightbox{

    position:fixed;

    inset:0;

    display:none;

    align-items:center;

    justify-content:center;

    background:rgba(0,0,0,.92);

    z-index:10000;

}

.lightbox.active{

    display:flex;

}

.lightbox img{

    max-width:90vw;

    max-height:85vh;

    border-radius:18px;

}

.lightbox-close,
.lightbox-prev,
.lightbox-next{

    position:absolute;

    border:none;

    background:rgba(255,255,255,.08);

    color:white;

    width:60px;

    height:60px;

    border-radius:50%;

    cursor:pointer;

    font-size:1.5rem;

}

.lightbox-close{

    top:40px;

    right:40px;

}

.lightbox-prev{

    left:40px;

}

.lightbox-next{

    right:40px;

}

/*==========================================================
RESIDENCE CONFIGURATOR  (Crafted For Modern Living)
Rewritten: single source of truth — no duplicate/conflicting
rules for .floor-viewer / .hotspot / .unit0X
==========================================================*/

.res-configurator{
    margin-top:60px;
}

/* ---- Floor selector (2ND / 3RD) ---- */

.floor-selector{
    display:inline-flex;
    gap:8px;
    padding:6px;
    margin:0 auto 50px;
    border-radius:999px;
    background:#111;
    border:1px solid var(--border);
}

.floor-selector button{
    border:none;
    cursor:pointer;
    padding:12px 30px;
    border-radius:999px;
    background:transparent;
    color:#9a9a9a;
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;
    transition:.35s;
}

.floor-selector button:hover{
    color:#fff;
}

.floor-selector button.active{
    color:#111;
    background:var(--primary);
}

/* Center the selector under the heading */
.res-configurator > .floor-selector{
    display:flex;
    width:fit-content;
}

/* ---- Two-column layout ---- */

.config-grid{
    display:grid;
    grid-template-columns:1.1fr 1.25fr 0.75fr;
    grid-template-areas:"plan preview details";
    gap:30px;
    align-items:stretch;
}

/* Flatten the wrappers so plan / preview / details sit in one row */
.config-left,
.config-right{
    display:contents;
}

.config-left .floor-viewer{ grid-area:plan; }
.preview-card{ grid-area:preview; }
.details-card{ grid-area:details; }

/* ---- Floor plan viewer + hotspots ---- */

.floor-viewer{
    position:relative;
    border-radius:26px;
    overflow:hidden;
    background:#fff;
    line-height:0;
}

/* Inline SVG floor plan */
.floor-svg{
    width:100%;
    height:auto;
    display:block;
}

/* The image + hotspots are grouped so the subtle hover
   parallax scales them together and stays aligned. */
#floorImage{
    transform-box:fill-box;
    transform-origin:center;
    transition:transform .4s ease;
    will-change:transform;
}

/* Each unit is an SVG group: polygon region + number marker */
.hotspot{
    cursor:pointer;
}

.hotspot polygon{
    fill:transparent;
    stroke:transparent;
    stroke-width:3;
    stroke-linejoin:round;
    transition:.3s;
}

.hotspot circle{
    fill:#111;
    stroke:var(--primary);
    stroke-width:2.5;
    transition:.3s;
}

.hotspot text{
    fill:#fff;
    font-family:"Inter",sans-serif;
    font-size:30px;
    font-weight:700;
    text-anchor:middle;
    dominant-baseline:central;
    pointer-events:none;
    transition:.3s;
}

/* Availability state per selected floor (persistent, before hover/active) */
.hotspot.available polygon{
    fill:rgba(139,227,142,.10);
    stroke:rgba(139,227,142,.35);
}
.hotspot.available circle{
    fill:#111;
    stroke:#8BE38E;
}

.hotspot.sold polygon{
    fill:rgba(240,107,107,.14);
    stroke:rgba(240,107,107,.40);
}
.hotspot.sold circle{
    fill:#2a1414;
    stroke:#F06B6B;
}
.hotspot.sold text{
    fill:#F06B6B;
}

.hotspot:hover polygon{
    fill:rgba(198,166,107,.25);
    stroke:var(--primary);
}

.hotspot:hover circle{
    fill:var(--primary);
    stroke:var(--primary);
}

.hotspot:hover text{
    fill:#111;
}

.hotspot.active polygon{
    fill:rgba(198,166,107,.40);
    stroke:var(--primary);
    stroke-width:4;
}

.hotspot.active circle{
    fill:var(--primary);
    stroke:var(--primary);
}

.hotspot.active text{
    fill:#111;
}

/* ---- Right column: preview + details ---- */

.preview-card{
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border-radius:26px;
    background:#111;
    border:1px solid var(--border);
}

.preview-tabs{
    display:flex;
    gap:4px;
    padding:10px;
    border-bottom:1px solid var(--border);
}

.preview-tabs button{
    flex:1;
    border:none;
    cursor:pointer;
    padding:12px;
    border-radius:12px;
    background:transparent;
    color:#9a9a9a;
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
    transition:.3s;
}

.preview-tabs button:hover{
    color:#fff;
}

.preview-tabs button.active{
    background:#1c1c1c;
    color:var(--primary);
}

.preview-image{
    flex:1 1 auto;
    min-height:300px;
    overflow:hidden;
    background:#0d0d0d;
}

.preview-image img{
    width:100%;
    height:75%;
    object-fit:cover;
    transition:.5s;
}

.details-card{
    display:flex;
    flex-direction:column;
    padding:30px;
    border-radius:26px;
    background:#111;
    border:1px solid var(--border);
}

.details-card .section-tag{
    color:var(--primary);
}

.details-card h2{
    color:#fff;
    margin-top:10px;
    font-size:1.9rem;
}

.spec-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    margin:26px 0;
}

.spec-grid div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 16px;
    background:#171717;
    border-radius:12px;
}

.spec-grid small{
    color:#888;
    font-size:.66rem;
    letter-spacing:.15em;
    text-transform:uppercase;
}

.spec-grid strong{
    color:#fff;
    font-size:1.05rem;
    text-align:right;
}

/* Status colour states */
.spec-grid strong.available{ color:#8BE38E; }
.spec-grid strong.reserved{ color:#F6C86A; }
.spec-grid strong.sold{ color:#F06B6B; }

.details-card .btn-primary{
    width:100%;
    justify-content:center;
    margin-top:auto;
}

/* Muted CTA when the selected residence is sold */
.details-card .btn-primary.is-sold{
    background:#1c1c1c;
    color:var(--primary);
    border:1px solid var(--border);
}

/*==========================================================
BROCHURE
==========================================================*/

.brochure{
    background:#080808;
}

.brochure-card{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:50px;
    align-items:center;
    padding:60px;
    border-radius:30px;
    background:linear-gradient(135deg,#121212 0%,#0d0d0d 100%);
    border:1px solid var(--border);
}

.brochure-content .section-tag{
    color:var(--primary);
}

.brochure-content h2{
    color:#fff;
    margin:16px 0 22px;
}

.brochure-content h2 span{
    color:var(--primary);
    font-style:italic;
}

.brochure-content p{
    color:#bbb;
    max-width:46ch;
    margin-bottom:36px;
}

.brochure-actions{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
}

.brochure-visual{
    display:flex;
    justify-content:center;
}

/* Simple document "cover" tile (no image asset required) */
.brochure-doc{
    position:relative;
    width:230px;
    aspect-ratio:3/4;
    border-radius:18px;
    background:
        radial-gradient(circle at 30% 20%,rgba(198,166,107,.18),transparent 60%),
        #101010;
    border:1px solid rgba(198,166,107,.25);
    box-shadow:0 30px 60px rgba(0,0,0,.45);
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:28px;
    transition:var(--transition);
}

.brochure-doc:hover{
    transform:translateY(-8px) rotate(-1deg);
    border-color:rgba(198,166,107,.5);
}

.brochure-doc-tag{
    position:absolute;
    top:22px;
    left:28px;
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.18em;
    color:#111;
    background:var(--primary);
    padding:5px 12px;
    border-radius:999px;
}

.brochure-doc strong{
    display:block;
    color:#fff;
    font-size:1.35rem;
    font-family:"Cormorant Garamond",serif;
}

.brochure-doc small{
    color:#999;
    letter-spacing:.12em;
    text-transform:uppercase;
    font-size:.7rem;
    margin-top:6px;
}

@media(max-width:900px){

    .brochure-card{
        grid-template-columns:1fr;
        gap:40px;
        padding:40px 28px;
    }

    .brochure-visual{
        order:-1;
    }
}

/* ---- Responsive ---- */

/* Tablet: plan on the left spanning two rows, preview above details */
@media(max-width:1080px){

    .config-grid{
        grid-template-columns:minmax(220px,300px) 1fr;
        grid-template-areas:
            "plan preview"
            "plan details";
        gap:28px;
    }
}

@media(max-width:900px){

    .config-grid{
        grid-template-columns:1fr;
        grid-template-areas:
            "plan"
            "preview"
            "details";
        gap:26px;
    }

    /* Constrain the plan so it doesn't dominate on phones */
    .config-left .floor-viewer{
        max-width:440px;
        margin:0 auto;
        width:100%;
    }

    .floor-selector{
        margin-bottom:35px;
    }

    /* Enlarge markers a touch on small screens for tap targets */
    .hotspot text{
        font-size:36px;
    }

    .hotspot circle{
        stroke-width:3;
    }
}