/* ===========================
   AVENTRIX REALTY
   BASE STYLES
=========================== */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
html{
    scroll-behavior:smooth;
    overflow-x:hidden;
}
body{
    font-family:'Poppins',sans-serif;
    background:#ffffff;
    color:#111;
    line-height:1.6;
    overflow-x:hidden;
    touch-action:pan-y;
}

.section-divider {
  display: block;
  width: 100vw;
  height: 2px;
  background-color: #D4AF37;
  margin: 80px 0;
  margin-left: calc(-50vw + 50%);
}


/* ===========================
   HEADER
=========================== */
.header{
    position: static;
    width: 100%;
    z-index: 10;
    background: #ffffff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* Slightly stronger shadow/blur once scrolled past the hero — the
   header itself is always solid white, this just adds a touch more
   depth once the page has been scrolled (toggled by script.js) */
.container.nav{
    width:95%;
    max-width:1400px;
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 0%;
}

.menu-toggle span{
    background:#111111;
}
.logo{
    margin-right:20px;
}

.logo img{
    height: 60px;
    width: auto;
}

nav{
    display:flex;
    gap:38px;
}

nav a{
    color:#1f2937;
    text-decoration:none;
    font-weight:600;
    font-size:15px;
    letter-spacing:1px;
}
nav a:hover{
    color:#0F3B2E;
}
/* ===========================
   HERO
=========================== */
.search-hero{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
}
.overlay{
    max-width:950px;
    padding:20px;
    color:#fff;
    transform:translateY(-40px);
}
.overlay h1{
    font-size:72px;
    font-weight:700;
    line-height:1.1;
    margin-bottom:20px;
    text-shadow:0 5px 20px rgba(0,0,0,.45);
}
.overlay p{
    font-size:24px;
    margin-bottom:40px;
    color: #f5f5f5;
}
/* ===========================
   SEARCH BOX
=========================== */
.search-box{
    display:flex;
    gap:30px;
    justify-content:center;
    flex-wrap:wrap;
    background: rgba(255,255,255,.95);
    padding:15px;
    border-radius:15px;
    box-shadow:0 20px 50px rgba(0,0,0,.25);
}

.search-box select{
    width:220px;
    padding:15px;
    border:1px solid #ddd;
    border-radius:8px;
    font-size:15px;
}

.search-box button{
    background:#0F3B2E;
    color:#fff;
    border:none;
    padding:15px 30px;
    border-radius:8px;
    cursor:pointer;
    font-size:15px;
    font-weight:600;
    transition:.3s;
}

.search-box button:hover{
    background:#0b433b;
}
/* ===========================
   FEATURED PROPERTIES
=========================== */

.featured{
    padding:90px 0 110px;
    background:#f8f9fb;
}

.container{
    max-width:1200px;
    margin:auto;
}

.featured h2{
    text-align:center;
    font-size:42px;
    margin-bottom:50px;
    color:#111;
}

.property-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:38px;
    align-items:stretch;
}

.property-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 12px 34px rgba(15,59,46,.08);
    transition:.4s cubic-bezier(.2,.8,.2,1);
    display:flex;
    flex-direction:column;
    height:100%;
}

.property-card:hover{
    transform:translateY(-10px);
    box-shadow:0 28px 55px rgba(15,59,46,.16);
}

/* Image area — fixed height (260px) on every card, never shrinks
   when the flex column below it grows taller. */
.property-image-wrap{
    position:relative;
    overflow:hidden;
    flex-shrink:0;
}

.property-card img{
    width:100%;
    height:260px;
    object-fit:cover;
    display:block;
    transition:transform .5s ease;
}

.property-card:hover img{
    transform:scale(1.06);
}

/* Badge — moved to top-right, always paired with text (never color alone) */
.property-badge{
    position:absolute;
    top:10px;
    left:10px;
    display:flex;
    align-items:center;
    padding:3px 9px;
    border-radius:6px;
    font-size:8px;
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
    background:#D4AF37;
    color:#0F3B2E;
    white-space:nowrap;
    box-shadow:0 2px 5px rgba(0,0,0,.12);
}

.badge-sale,
.badge-lease,
.badge-new,
.badge-sold{
    background:#D4AF37;
    color:#0F3B2E;
}

/* Content column — flexes to fill whatever space is left below the
   fixed-height image, so the footer (price/buttons) below can be
   pinned to the bottom of every card regardless of title/description
   length. */
.property-card .content{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
}

.property-location{
    display:flex;
    align-items:center;
    gap:6px;
    color:#D4AF37;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.6px;
    text-transform:uppercase;
    padding:20px 24px 0;
}

.property-card h3{
    padding:8px 24px 8px;
    font-size:22px;
    margin-bottom: 6px;
    font-weight:700;
    color:#111;
    line-height:1.3;
}

/* Description — reserves identical space on every card (3 lines at
   15px/1.6 line-height = 72px) regardless of text length, and
   truncates anything longer with an ellipsis. */
.property-card p{
    padding:0 24px;
    color:#666;
    font-size:15px;
    line-height:1.6;
    margin-bottom: 18px;
    height:72px;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    line-clamp:3;
    text-overflow:ellipsis;
}

.property-card h4{
    padding:0 24px 10px;
    color:#0F3B2E;
    font-size:14px;
}

/* Footer — always pinned to the bottom of the card via margin-top:auto
   on the flex column above, so Price / Call / WhatsApp / View Details
   line up identically across every card. Price + icon buttons share a
   top row; "View Details" spans the full width below them. */
.property-footer{
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:0 24px 26px;
    margin-top:auto;
}

.property-footer-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}

.property-price{
    font-size:20px;
    font-weight:800;
    color:#0F3B2E;
    line-height:1.2;
}

.view-details-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    width:100%;
    background:#0F3B2E;
    color:#fff;
    padding:11px 22px;
    border-radius:30px;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
    white-space:nowrap;
    transition:.3s;
    box-sizing:border-box;
}

.view-details-btn:hover{
    background:#145041;
    transform:translateY(-2px);
    box-shadow:0 10px 20px rgba(15,91,79,.3);
}

/* ---------------------------------------------
   PROPERTY CARD — Call / WhatsApp quick actions
   Icon-only, rounded-square buttons aligned with the price on
   the same row. No text labels — icon + aria-label/title only.
--------------------------------------------- */
.property-icon-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
}

.icon-action-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    flex-shrink:0;
    border-radius:12px;
    border:1.5px solid #0F3B2E;
    background:#fff;
    color:#0F3B2E;
    font-size:16px;
    text-decoration:none;
    transition:.3s;
    box-sizing:border-box;
}

.icon-action-btn:hover{
    background:#0F3B2E;
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 8px 18px rgba(15,59,46,.28);
}

.icon-action-btn:active{
    transform:translateY(0);
}

@media (max-width:480px){
    .icon-action-btn{
        width:40px;
        height:40px;
        font-size:15px;
    }
}

/* ===============================
   WHY AVENTRIX REALTY
================================= */

/* ===========================
   SHARED MINIMAL SECTION HEADING
   (used by Why Aventrix + Our Services)
=========================== */
.section-heading{
    text-align:center;
    max-width:600px;
    margin:0 auto 70px;
}

.section-eyebrow{
    display:inline-block;
    font-size:13px;
    letter-spacing:3px;
    text-transform:uppercase;
    color:#0F3B2E;
    font-weight:600;
    margin-bottom:16px;
}

.section-heading h2{
    font-family:"Cormorant Garamond", serif;
    font-size:38px;
    font-weight:600;
    color:#111827;
    letter-spacing:.3px;
    margin:0;
}

/* ===========================
   WHY CHOOSE AVENTRIX (minimal)
=========================== */
.why{
    padding:110px 8%;
    background:#ffffff;
}

.why-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
}

.why-item{
    text-align:center;
    padding:8px 34px;
    border-left:1px solid rgba(17,24,39,.08);
    transition:transform .45s cubic-bezier(.2,.8,.2,1);
}

.why-item:first-child{
    border-left:none;
}

.why-item:hover{
    transform:translateY(-6px);
}

.why-icon{
    width:46px;
    height:46px;
    margin:0 auto 24px;
    color:#0F3B2E;
    transition:color .35s ease, transform .4s cubic-bezier(.2,.8,.2,1);
}

.why-icon svg{
    width:100%;
    height:100%;
}

.why-item:hover .why-icon{
    color:#D4AF37;
    transform:translateY(-3px) scale(1.08);
}

.why-item h3{
    font-size:18px;
    font-weight:700;
    color:#111827;
    margin-bottom:6px;
    letter-spacing:.2px;
}

.why-item h3::after{
    content:"";
    display:block;
    width:0;
    height:1px;
    background:#D4AF37;
    margin:10px auto 14px;
    transition:width .4s ease;
}

.why-item:hover h3::after{
    width:34px;
}

.why-item p{
    font-size:14.5px;
    line-height:1.7;
    color:#6b7280;
    max-width:220px;
    margin:0 auto;
}

/* ===========================
   OUR SERVICES (minimal)
=========================== */
.services{
    padding:100px 8% 110px;
    background:#faf9f7;
}

.service-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
}

.service-item{
    text-align:center;
    padding:8px 28px;
    border-left:1px solid rgba(17,24,39,.08);
    transition:transform .4s ease;
}

.service-item:first-child{
    border-left:none;
}

.service-item:hover{
    transform:translateY(-6px);
}

.service-icon{
    width:44px;
    height:44px;
    margin:0 auto 22px;
    color:#0F3B2E;
    transition:color .35s ease, transform .35s ease;
}

.service-icon svg{
    width:100%;
    height:100%;
}

.service-item:hover .service-icon{
    color:#D4AF37;
    transform:translateY(-2px);
}

.service-item h3{
    font-size:18px;
    font-weight:700;
    color:#111827;
    margin-bottom:6px;
}

.service-item h3::after{
    content:"";
    display:block;
    width:0;
    height:1px;
    background:#D4AF37;
    margin:10px auto 14px;
    transition:width .4s ease;
}

.service-item:hover h3::after{
    width:34px;
}

.service-item p{
    font-size:14.5px;
    line-height:1.7;
    color:#6b7280;
    max-width:220px;
    margin:0 auto;
}

.footer{
    background:#0b0b0b;
    color:#999;
    text-align:center;
    padding:25px 0;
    font-size:15px;
    border-top:1px solid rgba(255,255,255,0.08);
}

.footer p{
    margin:0;
}
.whatsapp-btn{
    display:inline-block;
    background:#25D366;
    color:#fff;
    padding:15px 30px;
    border-radius:8px;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

/* ===========================
   PREMIUM FOOTER (homepage only)
   — original Aventrix design: clean solid depth,
     restrained gold accents, generous spacing —
=========================== */
.premium-footer{
    position:relative;
    overflow:hidden;
    background-color:#0B2A20;
    background-image:url('images/footer-bg.jpg');
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    color:rgba(255,255,255,.85);
    padding:112px 0 0;
}

.premium-footer::before{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:2px;
    background:linear-gradient(90deg, transparent 0%, #D4AF37 50%, transparent 100%);
    z-index:2;
}

.premium-footer::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(6,24,18,.88) 0%, rgba(6,24,18,.93) 60%, rgba(5,20,15,.97) 100%);
    z-index:1;
}

.premium-footer > *{
    position:relative;
    z-index:3;
}

.premium-footer-top{
    display:grid;
    grid-template-columns:1.5fr 0.9fr 0.9fr 1fr;
    gap:56px;
    padding-bottom:64px;
}

.pf-brand{
    padding-right:20px;
}

.pf-logo{
    font-family:"Cormorant Garamond", serif;
    font-size:25px;
    font-weight:600;
    letter-spacing:2px;
    color:#fff;
    margin-bottom:8px;
}

.pf-tagline{
    font-size:11.5px;
    font-weight:600;
    letter-spacing:2.5px;
    color:#D4AF37;
    text-transform:uppercase;
    margin-bottom:22px;
    opacity:.9;
}

.pf-desc{
    font-size:14px;
    line-height:1.85;
    color:rgba(255,255,255,.5);
    max-width:320px;
    margin-bottom:26px;
}

.pf-contact{
    display:flex;
    flex-direction:column;
    gap:9px;
    padding-top:18px;
    border-top:1px solid rgba(212,175,55,.18);
}

.pf-contact a{
    color:rgba(255,255,255,.8);
    text-decoration:none;
    font-size:14px;
    letter-spacing:.2px;
    transition:color .25s ease;
    width:fit-content;
}

.pf-contact a:hover{
    color:#D4AF37;
}

.pf-contact p{
    font-size:13px;
    color:rgba(255,255,255,.45);
    line-height:1.65;
    margin-top:2px;
    max-width:270px;
}

.pf-heading{
    font-size:11px;
    font-weight:700;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:#D4AF37;
    margin-bottom:22px;
    position:relative;
    padding-bottom:12px;
}

.pf-heading::after{
    content:"";
    position:absolute;
    left:0; bottom:0;
    width:24px;
    height:2px;
    background:rgba(212,175,55,.45);
}

.pf-links{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:0;
    margin:0;
}

.pf-links a{
    color:rgba(255,255,255,.55);
    text-decoration:none;
    font-size:14px;
    position:relative;
    transition:color .2s ease, padding-left .2s ease;
}

.pf-links a:hover{
    color:#D4AF37;
    padding-left:5px;
}

.pf-social{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.pf-social a{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border-radius:9px;
    border:1px solid rgba(212,175,55,.3);
    color:rgba(255,255,255,.7);
    text-decoration:none;
    transition:all .25s ease;
}

.pf-social a span{
    position:absolute;
    width:1px; height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
}

.pf-social a svg{
    width:16px;
    height:16px;
    flex-shrink:0;
    transition:transform .25s ease;
}

.pf-social a:hover{
    background:#D4AF37;
    border-color:#D4AF37;
    color:#0B2A20;
}

.pf-social a:hover svg{
    transform:scale(1.08);
}

.premium-footer-divider{
    height:1px;
    background:rgba(212,175,55,.14);
}

.premium-footer-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:14px;
    padding:24px 0;
}

.pf-copyright{
    font-size:12.5px;
    color:rgba(255,255,255,.4);
    letter-spacing:.3px;
    margin:0;
}

.pf-legal{
    display:flex;
    gap:26px;
}

.pf-legal a{
    color:rgba(255,255,255,.45);
    text-decoration:none;
    font-size:12.5px;
    transition:color .25s ease;
}

.footer-login-link{
    color:rgba(212,175,55,.55);
    text-decoration:none;
    font-size:12px;
    font-style:italic;
    letter-spacing:.3px;
    transition:color .25s ease;
    margin-left:18px;
}

p.copyright .footer-login-link{
    margin-left:10px;
    display:inline-block;
}

.footer-login-link:hover{
    color:#D4AF37;
}

.pf-legal a:hover{
    color:#D4AF37;
}

.whatsapp-btn:hover{
    background:#1da851;
}

/* ===========================
   TESTIMONIALS
=========================== */
.testimonials-section{
    padding:100px 8%;
    background:#faf9f7;
}

.testimonials-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px;
    margin-top:60px;
}

.testimonial-card{
    background:#fff;
    padding:40px 34px;
    border-radius:4px;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
    border-top:2px solid #D4AF37;
}

.testimonial-quote{
    font-family:"Cormorant Garamond", serif;
    font-size:18px;
    font-style:italic;
    line-height:1.8;
    color:#374151;
    margin-bottom:26px;
}

.testimonial-author{
    display:flex;
    flex-direction:column;
    gap:3px;
    border-top:1px solid rgba(17,24,39,.08);
    padding-top:16px;
}

.testimonial-name{
    font-weight:700;
    font-size:15px;
    color:#111827;
}

.testimonial-role{
    font-size:13px;
    color:#0F3B2E;
    letter-spacing:.3px;
}

.testimonials-note{
    text-align:center;
    font-size:12.5px;
    color:#9ca3af;
    margin-top:50px;
    font-style:italic;
}

/* ===========================
   QUICK ENQUIRY
=========================== */
.quick-enquiry-section{
    position:relative;
    overflow:hidden;
    background:#0F3B2E;
    color:#fff;
    padding:100px 8%;
}

.quick-enquiry-section::before{
    content:"";
    position:absolute;
    inset:-20px;
    background:url('images/quick-enquiry-bg.jpg') center/cover no-repeat;
    filter:blur(5px);
    transform:scale(1.02);
    z-index:0;
}

.quick-enquiry-section::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(15,59,46,.55);
    z-index:1;
}

.quick-enquiry-section > *{
    position:relative;
    z-index:2;
}

.quick-enquiry-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:start;
}

.quick-enquiry-info{
    background:rgba(15,23,42,.4);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    border:1px solid rgba(255,255,255,.16);
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
    padding:44px;
}

.quick-enquiry-info .eyebrow-light{
    color:#D4AF37;
}

.quick-enquiry-info h2{
    font-family:"Cormorant Garamond", serif;
    font-size:38px;
    font-weight:600;
    margin:16px 0 22px;
    max-width:420px;
}

.quick-enquiry-desc{
    font-size:16px;
    line-height:1.8;
    color:rgba(255,255,255,.75);
    max-width:420px;
    margin-bottom:50px;
}

.quick-enquiry-details{
    display:flex;
    flex-direction:column;
    gap:28px;
}

.qe-detail{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.qe-label{
    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#D4AF37;
    font-weight:600;
    margin-bottom:4px;
}

.qe-detail a{
    color:#fff;
    text-decoration:none;
    font-size:16px;
    transition:.25s;
}

.qe-detail a:hover{
    color:#D4AF37;
}

.qe-detail p{
    color:rgba(255,255,255,.85);
    font-size:15.5px;
    line-height:1.6;
    margin-bottom:8px;
}

.qe-detail .map-btn{
    display:inline-block;
    font-size:13px;
    text-decoration:underline;
    color:#D4AF37;
}

/* ---------------------------------------------
   MULTIPLE OFFICE LOCATIONS — Contact section
   One .qe-detail-office block per office (Head
   Office + any future branches). Layout matches
   the original single-office block exactly.
--------------------------------------------- */
.qe-detail-office{
    padding-bottom:22px;
    margin-bottom:22px;
    border-bottom:1px solid rgba(212,175,55,.18);
}

.qe-detail-office:last-child{
    padding-bottom:0;
    margin-bottom:0;
    border-bottom:none;
}

.qe-office-name{
    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#D4AF37;
    font-weight:600;
    margin-bottom:6px;
}

.qe-office-address{
    color:rgba(255,255,255,.85);
    font-size:15.5px;
    line-height:1.6;
    margin-bottom:8px;
}

.qe-office-links{
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
}

/* Get Directions — only rendered once an office has a verified
   Google Maps URL. Hidden entirely (not just empty) until then. Also
   used as a <button disabled> for branches with no Maps URL yet (see
   contact.html), so it needs a full browser-default reset to match
   the <a> version exactly. */
.get-directions-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    font-weight:600;
    text-decoration:underline;
    color:#D4AF37;
    background:none;
    border:none;
    padding:0;
    font-family:inherit;
    cursor:pointer;
}

.get-directions-btn:hover{
    color:#fff;
}

/* Disabled state — e.g. "Google Maps Location Coming Soon" for a
   branch whose Maps URL hasn't been added yet. Once a URL is added,
   swapping this back to a normal enabled link needs no layout change. */
.get-directions-btn:disabled{
    color:#9a9a9a;
    text-decoration:none;
    cursor:not-allowed;
    opacity:.85;
}

.get-directions-btn:disabled:hover{
    color:#9a9a9a;
}

/* Embedded Google Map — only rendered once maps_url is set on an
   office. No code change is needed later: the loader checks the
   field at render time and swaps this in automatically. */
.office-map-embed{
    margin-top:14px;
    border-radius:12px;
    overflow:hidden;
    border:1px solid rgba(212,175,55,.25);
}

.office-map-embed iframe{
    display:block;
    width:100%;
    height:220px;
    border:0;
}

/* "Coming Soon" placeholder — same footprint as a real embedded map
   (see .office-map-embed iframe above), so dropping in a real map
   later needs no layout change. */
.office-map-embed.office-map-placeholder{
    height:220px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:20px;
    background:#f7f5f0;
}

.office-map-embed.office-map-placeholder .office-locations-status{
    margin:0;
}

/* Business Hours rows (Contact page) */
.hours-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:12px 0;
    border-bottom:1px solid rgba(212,175,55,.15);
}

.hours-row:last-child{
    border-bottom:none;
    padding-bottom:0;
}

.hours-day{
    color:#666;
    font-size:14.5px;
}

.hours-time{
    color:#0F3B2E;
    font-weight:600;
    font-size:14.5px;
    text-align:right;
}

/* ---------------------------------------------
   MULTIPLE OFFICE LOCATIONS — Footer
   Each office is its own flex-column block, so name / address /
   "Phone:" label / each phone number / "Email:" label / email all
   stack on their own line automatically, with a small consistent
   gap between every line.
--------------------------------------------- */
.pf-office-block{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding-top:16px;
    margin-top:16px;
    border-top:1px solid rgba(212,175,55,.12);
}

.pf-office-block:first-child{
    padding-top:0;
    margin-top:0;
    border-top:none;
}

.pf-office-name{
    font-size:12px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:#D4AF37;
    font-weight:600;
    margin-bottom:2px;
}

.pf-office-label{
    font-size:11px;
    letter-spacing:1px;
    text-transform:uppercase;
    color:rgba(255,255,255,.5);
    font-weight:600;
    margin-top:8px;
}

/* Compact one-line branch reference — keeps the footer short instead
   of repeating the full Adyar Branch address/phone/email (that detail
   lives on the Office Locations section). */
.pf-branch-line{
    padding-top:14px;
    margin-top:14px;
    border-top:1px solid rgba(212,175,55,.12);
    font-size:13px;
    color:rgba(255,255,255,.65);
    max-width:270px;
}

.pf-branch-line .pf-office-label{
    display:inline;
    margin-top:0;
    margin-right:6px;
}

/* Neutral loading / empty / error status text shown while office
   data loads, or if it can't — never a hardcoded address. */
.office-locations-status{
    color:#888;
    font-size:14.5px;
    font-style:italic;
}

.pf-contact .office-locations-status{
    color:rgba(255,255,255,.55);
}

/* ---------------------------------------------
   DEDICATED "OUR OFFICE LOCATIONS" SECTION
   Full card per office (Head Office + branches), loaded entirely
   from the office_locations table by js/public-offices.js.
--------------------------------------------- */
.office-locations-section{
    background:#F9F8F4;
    padding:100px 8%;
    text-align:center;
}

.office-locations-heading{
    font-family:"Cormorant Garamond", serif;
    font-size:38px;
    font-weight:600;
    color:#111827;
    letter-spacing:.3px;
    margin:0 0 12px;
}

.office-locations-subtitle{
    max-width:560px;
    margin:0 auto 46px;
    color:#5b6472;
    font-size:16px;
    line-height:1.7;
}

.office-locations-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:32px;
    text-align:left;
    max-width:980px;
    margin:0 auto;
}

.office-locations-grid .office-locations-status{
    grid-column:1 / -1;
    text-align:center;
}

.office-card{
    background:#fff;
    border:1.5px solid #D4AF37;
    border-radius:16px;
    padding:30px 28px;
    box-shadow:0 10px 30px rgba(15,59,46,.07);
    position:relative;
}

.office-card-badge{
    display:inline-block;
    padding:3px 10px;
    border-radius:6px;
    background:#D4AF37;
    color:#0F3B2E;
    font-size:11px;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
    margin-bottom:14px;
}

.office-card-name{
    font-size:20px;
    font-weight:700;
    color:#111;
    margin:0 0 10px;
    line-height:1.3;
}

.office-card-address{
    color:#666;
    font-size:15px;
    line-height:1.65;
    margin-bottom:14px;
}

.office-card-phone{
    display:flex;
    align-items:center;
    gap:8px;
    color:#0F3B2E;
    font-weight:600;
    font-size:14.5px;
    text-decoration:none;
    margin-bottom:10px;
    width:fit-content;
}

.office-card-phone:hover{
    color:#D4AF37;
}

.office-card .qe-office-links{
    margin-bottom:0;
}

/* Fix: .map-btn already has a solid green background with white text
   by default — this override was incorrectly setting the text to the
   same dark green as the background, making it invisible. Text and
   icon stay white; background, size, padding, radius and position
   are untouched. */
.office-card .map-btn{
    color:#fff;
}

.office-card .map-btn i{
    color:#fff;
}

.office-card .get-directions-btn{
    color:#0F3B2E;
}

.office-card .get-directions-btn:hover{
    color:#D4AF37;
}

.office-card .get-directions-btn:disabled,
.office-card .get-directions-btn:disabled:hover{
    color:#9a9a9a;
}

.office-card-pending{
    margin-top:12px;
    margin-bottom:0;
}

/* Solid "View on Google Maps" button used on the Contact page office
   cards — explicit white text and icon for contrast on the green
   background. The disabled state (no Maps URL yet, e.g. Adyar
   Branch) keeps the same pill shape so it stays clearly visible
   rather than fading into plain text, and swaps to a live link with
   zero layout change once a URL is added. */
.office-map-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    box-sizing:border-box;
    margin-top:6px;
    background:#0F3B2E;
    color:#fff;
    padding:12px 20px;
    border:none;
    border-radius:30px;
    font-size:14px;
    font-weight:600;
    font-family:inherit;
    text-decoration:none;
    cursor:pointer;
    transition:.3s;
}

.office-map-btn i{
    color:#fff;
}

.office-map-btn:hover{
    background:#145041;
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 10px 20px rgba(15,59,46,.25);
}

.office-map-btn:disabled{
    background:#9a9a9a;
    color:#fff;
    cursor:not-allowed;
    opacity:.9;
}

.office-map-btn:disabled i{
    color:#fff;
}

.office-map-btn:disabled:hover{
    background:#9a9a9a;
    transform:none;
    box-shadow:none;
}


.quick-enquiry-form-wrap{
    background:rgba(15,23,42,.4);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    border:1px solid rgba(255,255,255,.16);
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
    padding:40px;
}

.qe-field{
    margin-bottom:30px;
    display:flex;
    flex-direction:column;
    gap:9px;
}

.qe-field label{
    font-size:12.5px;
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase;
    color:rgba(255,255,255,.9);
}

.qe-field input,
.qe-field textarea{
    background:rgba(255,255,255,.97);
    border:1.5px solid rgba(212,175,55,.35);
    border-radius:12px;
    padding:15px 18px;
    font-size:16px;
    font-family:inherit;
    color:#111827;
    outline:none;
    resize:vertical;
    transition:.25s;
}

.qe-field input::placeholder,
.qe-field textarea::placeholder{
    color:#9ca3af;
    font-size:15px;
}

.qe-field input:focus,
.qe-field textarea:focus{
    border-color:#0F3B2E;
    box-shadow:0 0 0 3px rgba(15,59,46,.18);
}

.qe-submit-btn{
    width:100%;
    background:#D4AF37;
    color:#07111F;
    border:none;
    padding:16px;
    border-radius:30px;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:.3s;
}

.qe-submit-btn:hover{
    background:#B8962E;
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(0,0,0,.25);
}

.quick-enquiry-form-wrap .success-message{
    text-align:center;
    padding:20px;
}

.quick-enquiry-form-wrap .success-message h3{
    color:#D4AF37;
    margin-bottom:10px;
}

.quick-enquiry-form-wrap .success-message p{
    color:rgba(255,255,255,.85);
    margin-bottom:6px;
}

/* =========================
   ABOUT SECTION
========================= */

.about{
    padding:100px 8%;
    background:#fff;
}

.about .section-title{
    text-align:center;
    margin-bottom:50px;
}

.about .section-title::after{
    content:"";
    display:block;
    width:140px;
    max-width:60%;
    height:2px;
    background:#D4AF37;
    margin:12px auto 0;
    border-radius:2px;
}

.about .section-title h2{
    font-family:"Cormorant Garamond", serif;
    font-size:30px;
    font-weight:600;
    letter-spacing:.3px;
    color:#111;
    max-width:none;
    margin:0 25px;
    text-transform:none;
}

.legacy-intro{
    font-size:17px;
    color:#6b7280;
    margin:22px auto 0;
    max-width:480px;
}

.legacy-subtitle{
    font-family:"Cormorant Garamond", serif;
    font-style:italic;
    font-size:20px;
    color:#D4AF37;
    max-width:none;
}

.about-content{
    max-width:800px;
    margin:0 auto;
}

.about-content p{
    font-size:18px;
    line-height:2;
    color:#555;
    margin-bottom:24px;
    text-align:justify;
}

.about-closing{
    text-align:center !important;
    font-size:22px;
    font-weight:600;
    color:#111;
    margin-top:60px;
}

/* Scoped to the homepage's About/Legacy section only (id="about"),
   so property.html's .about section is unaffected */
#about.about{
    padding:90px 8% 100px;
}

#about .about-content p{
    font-size:17px;
    line-height:1.9;
    text-align:left;
    color:#4b5563;
}

/* ===========================
   LEGACY TIMELINE
=========================== */
.legacy-timeline{
    max-width:820px;
    margin:100px auto 0;
    position:relative;
    padding-left:40px;
}

.legacy-item{
    position:relative;
    display:flex;
    gap:34px;
    margin-bottom:105px;
}

.legacy-item:not(:last-child)::after{
    content:"";
    position:absolute;
    left:-35px;
    top:6px;
    bottom:calc(-105px - 6px);
    width:1px;
    background:rgba(15,91,79,.18);
}

.legacy-item:nth-child(2){
    margin-bottom:130px;
}

.legacy-item:nth-child(2)::after{
    bottom:calc(-130px - 6px);
}

.legacy-item:last-child{
    margin-bottom:0;
}

.legacy-dot{
    position:absolute;
    left:-40px;
    top:6px;
    width:11px;
    height:11px;
    border-radius:50%;
    background:#0F3B2E;
    box-shadow:0 0 0 5px rgba(15,91,79,.12);
}

.legacy-dot::before{
    content:"";
    position:absolute;
    top:-6px;
    left:-6px;
    width:23px;
    height:23px;
    border-radius:50%;
    border:1px solid rgba(15,59,46,.35);
}

.legacy-year{
    position:absolute;
    left:-34.5px;
    top:-28px;
    transform:translateX(-50%);
    text-align:center;
    white-space:nowrap;
    font-family:"Cormorant Garamond", serif;
    font-size:15px;
    font-weight:700;
    letter-spacing:1.5px;
    color:#D4AF37;
    text-transform:uppercase;
}

.legacy-text h3{
    font-size:22px;
    font-weight:700;
    color:#111827;
    margin-bottom:14px;
    letter-spacing:.2px;
}

.legacy-text p{
    font-size:17px;
    line-height:2;
    color:#4b5563;
    max-width:640px;
}

/* ===== OUR LEADERSHIP ===== */

/* Leadership Section */

#leadership{
    padding:100px 20px;
    background:#ffffff;
    text-align:center;
}

#leadership h2{
    font-size:42px;
    margin-bottom:10px;
    color:#111;
}

#leadership p{
    color:#666;
}

.leadership-grid{
    display:flex;
    justify-content:center;
    gap:30px;
    margin-top:40px;
    flex-wrap:wrap;
}

.leader-card{
    width:340px;
    background:#fff;
    padding:30px;
    border-radius:15px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    text-align:center;
}

.leader-card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 40px rgba(0,0,0,.15);
}

.leader-card h3{
    font-size:26px;
    color:#0F3B2E;
    margin-bottom:8px;
}

.leader-card h4{
    font-size:18px;
    color:#777;
    margin-bottom:15px;
}

.leader-card p{
    line-height:1.8;
}
.leader-photo{
    width:150px;
    height:150px;
    border-radius:14px;
    object-fit:cover;
    margin-bottom:20px;
    border:4px solid #0F3B2E;
}
.whatsapp-float{
    position: fixed;
    bottom: 40px;
    right: 20px;
    width: 85px;
    height: 85px;
    z-index: 9999;
}

.whatsapp-float img{
    width:100%;
    height:100%;
    border-radius: 100%;
    transition: transform 0.3s;
}
.whatsapp-float:hover img{
    transform: scale(1.1);
}
/* ===========================
   BACK TO TOP — same circular
   floating style as WhatsApp,
   stacked directly above it
   with equal spacing
=========================== */
.back-to-top{
    position: fixed;
    bottom: 10px;
    right: 45px;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:lab(69.03% 27.33 65.19);
    color:#ffffff;
    font-size:28px;
    border:none;
    cursor:pointer;
    box-shadow:0 8px 22px rgba(0,0,0,.25);
    z-index:9999;
    opacity:0;
    visibility:hidden;
    transform:translateY(15px);
    transition: opacity 0.3s ease, visibility 0.3s ease,
                transform 0.3s ease, background-color 0.3s ease;
}

.back-to-top.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.back-to-top:hover{
    background:hwb(58 2% 30%);
    transform:translateY(-4px);
}

/* ===========================
   SECTION SCROLL INDICATOR
   One tiny, separate vertical dash per major homepage section —
   not a continuous bar. Mobile only (paired with .is-mobile, same
   pattern as the floating buttons). Sits vertically centred on the
   right edge, well clear of the WhatsApp / Back-to-top buttons
   which stay pinned to the bottom-right.
=========================== */
.section-scroll-indicator{
    display:none;
    position:fixed;
    top:46%;
    right:10px;
    transform:translateY(-50%);
    flex-direction:column;
    align-items:center;
    gap:5px;
    z-index:9997;
}

html.is-mobile .section-scroll-indicator{
    display:flex;
}

.ssi-segment{
    position:relative;
    display:block;
    width:2px;
    height:7px;
    border-radius:2px;
    background:rgba(255,255,255,0.55);
    box-shadow:0 0 0 1px rgba(0,0,0,0.18);
    transition:height 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.ssi-segment.active{
    height:11px;
    background:#D4AF37;
    box-shadow:0 0 0 1px rgba(15,59,46,0.35), 0 0 4px rgba(212,175,55,0.55);
}

/* Section-name tooltip — hidden by default, shown on hover (desktop)
   or briefly on tap (mobile, toggled via .show-tooltip in script.js).
   Appears to the left of its own segment; never shifts the segment. */
.ssi-tooltip{
    position:absolute;
    top:50%;
    right:100%;
    margin-right:8px;
    transform:translateY(-50%) translateX(4px);
    background:#0F3B2E;
    color:#ffffff;
    font-size:11px;
    font-weight:500;
    line-height:1;
    white-space:nowrap;
    padding:6px 10px;
    border-radius:5px;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.18s ease, transform 0.18s ease;
    box-shadow:0 4px 12px rgba(0,0,0,0.22);
}

.ssi-segment:hover .ssi-tooltip,
.ssi-segment.show-tooltip .ssi-tooltip{
    opacity:1;
    transform:translateY(-50%) translateX(0);
}
.contact-info a{
    color:#ffffff;
    text-decoration:none;
    transition:0.3s;
}

.contact-info a:hover{
    color:#0F3B2E;
}
.office-phone a{
    color:#ffffff;
    text-decoration:none;
    font-size:15px;
    font-weight:600;
    white-space:nowrap;
}

.office-phone a:hover{
    color:#0F3B2E;
}
.leader-card a{
    color:#0F3B2E;
    text-decoration:none;
    font-weight:600;
}

.leader-card a:hover{
    text-decoration:underline;
}
.map-btn{
    display:inline-block;
    margin-top:15px;
    padding:10px 20px;
    background:#0F3B2E;
    color:#fff;
    text-decoration:none;
    border-radius:6px;
    font-weight:600;
}

.map-btn:hover{
    background:#0b463d;
}
/* ===========================================================
   FULL PROPERTY DETAILS PAGE (property.html)
   Clean image gallery (nothing overlaid on it), then a persistent
   Back to Properties bar, title / location / price, structured
   specs, description, features, brokerage+RERA and a compact
   Call/WhatsApp CTA. All "pd-" prefixed so nothing here can
   collide with the Quick View's "qv-" classes.
=========================================================== */

/* --- Back to Properties bar (always visible, own strip above
   the gallery — never overlaid on the image) --- */
.pd-backbar{
    padding:16px 0;
    border-bottom:1px solid #f0f0f0;
}

.property-back-nav{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#0F3B2E;
    text-decoration:none;
    font-family:Poppins;
    font-weight:600;
    font-size:14px;
}

.property-back-nav:hover{
    text-decoration:underline;
}

/* --- Gallery --- */
.pd-gallery{
    position:relative;
    background:#0F3B2E;
}

.pd-gallery-track{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}

.pd-gallery-track::-webkit-scrollbar{
    display:none;
}

.pd-gallery-track img{
    flex:0 0 100%;
    width:100%;
    height:520px;
    object-fit:cover;
    scroll-snap-align:center;
    display:block;
}

.pd-gallery-dots{
    position:absolute;
    left:0;
    right:0;
    bottom:16px;
    display:flex;
    justify-content:center;
    gap:6px;
}

.pd-gallery-dots span{
    width:7px;
    height:7px;
    border-radius:50%;
    background:rgba(255,255,255,.5);
    transition:.25s;
}

.pd-gallery-dots span.active{
    background:#D4AF37;
    width:18px;
    border-radius:4px;
}

.pd-gallery-count{
    position:absolute;
    right:16px;
    bottom:16px;
    background:rgba(0,0,0,.5);
    color:#fff;
    font-size:12px;
    font-family:Poppins;
    font-weight:600;
    padding:4px 11px;
    border-radius:20px;
}

/* --- Title / location / price header (plain page content, not
   an overlay on the image) --- */
.pd-header{
    padding:26px 0 8px;
}

.pd-badge{
    display:inline-block;
    background:#D4AF37;
    color:#0F3B2E;
    font-family:Poppins;
    font-weight:700;
    font-size:11px;
    letter-spacing:.6px;
    text-transform:uppercase;
    padding:5px 13px;
    border-radius:6px;
    margin-bottom:12px;
}

.pd-header h1{
    font-family:'Cormorant Garamond',serif;
    font-size:44px;
    font-weight:600;
    color:#111;
    margin:0 0 8px;
    line-height:1.2;
}

.pd-location{
    font-family:Poppins;
    font-size:16px;
    color:#666;
    margin:0 0 16px;
}

.pd-price{
    font-family:Poppins;
    font-size:28px;
    font-weight:800;
    color:#0F3B2E;
}

/* --- Shared section heading style --- */
.pd-section-heading{
    font-family:Poppins;
    font-weight:700;
    font-size:13px;
    letter-spacing:1px;
    text-transform:uppercase;
    color:#0F3B2E;
    margin:0 0 18px;
    padding-bottom:12px;
    border-bottom:1px solid #eee;
}

.pd-specs,
.pd-description,
.pd-features,
.pd-trust{
    padding:26px 0;
    border-top:1px solid #f0f0f0;
}

/* --- Specifications grid — icon + label/value card, matching
   the reference layout's 2-column spec cards --- */
.pd-specs-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.pd-spec-card{
    display:flex;
    align-items:center;
    gap:12px;
    background:#f7f6f2;
    border:1px solid #eee;
    border-radius:14px;
    padding:14px;
}

.pd-spec-icon{
    flex-shrink:0;
    width:38px;
    height:38px;
    border-radius:10px;
    background:#fff;
    border:1px solid #e2e2e2;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#0F3B2E;
    font-size:15px;
}

.pd-spec-text{
    min-width:0;
}

.pd-spec-label{
    display:block;
    font-family:Poppins;
    font-weight:600;
    font-size:10.5px;
    letter-spacing:.4px;
    text-transform:uppercase;
    color:#888;
    margin-bottom:3px;
}

.pd-spec-value{
    display:block;
    font-family:Poppins;
    font-weight:700;
    font-size:15px;
    color:#0F3B2E;
    line-height:1.3;
}

@media (min-width:900px){
    .pd-specs-grid{
        grid-template-columns:repeat(3,1fr);
    }
}

/* --- Description --- */
.pd-desc-text{
    font-family:Poppins;
    font-size:16px;
    line-height:1.8;
    color:#444;
    margin:0;
    display:-webkit-box;
    -webkit-line-clamp:5;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.pd-desc-text.expanded{
    display:block;
    -webkit-line-clamp:unset;
    overflow:visible;
}

.pd-readmore{
    background:none;
    border:none;
    color:#0F3B2E;
    font-family:Poppins;
    font-weight:600;
    font-size:14px;
    padding:10px 0 0;
    cursor:pointer;
    text-decoration:underline;
}

/* --- Features — icon-topped grid, matching the reference layout --- */
.pd-features-list{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px 12px;
}

.pd-features-list li{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:8px;
}

.pd-feature-icon{
    width:44px;
    height:44px;
    border-radius:12px;
    background:#f7f6f2;
    border:1px solid #eee;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#0F3B2E;
    font-size:16px;
}

.pd-feature-label{
    font-family:Poppins;
    font-size:12.5px;
    font-weight:500;
    color:#333;
    line-height:1.35;
}

@media (min-width:900px){
    .pd-features-list{
        grid-template-columns:repeat(5,1fr);
    }
}

/* --- Brokerage / RERA — side-by-side trust cards --- */
.pd-trust-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.pd-trust-row.pd-trust-single{
    grid-template-columns:1fr;
}

.pd-trust-card{
    background:#f7f6f2;
    border:1px solid #eee;
    border-radius:14px;
    padding:16px;
}

.pd-trust-card .pd-section-heading{
    margin-bottom:8px;
    padding-bottom:0;
    border-bottom:none;
}

.pd-trust-card p{
    font-family:Poppins;
    font-size:14px;
    color:#444;
    margin:0;
}

.pd-rera-no{
    font-family:Poppins;
    font-weight:700;
    font-size:15px;
    color:#0F3B2E;
    margin:4px 0 0;
}

/* --- Contact CTA (normal page section, not an image overlay) —
   compact, side-by-side Call + WhatsApp, never full-width blocks --- */
.pd-contact-cta{
    padding:24px 0 50px;
}

.pd-contact-cta .container{
    display:flex;
    gap:12px;
}

.pd-call-btn,
.pd-whatsapp-btn{
    flex:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    height:48px;
    border-radius:30px;
    text-decoration:none;
    font-family:Poppins;
    font-weight:600;
    font-size:14.5px;
    box-sizing:border-box;
}

.pd-call-btn{
    background:#fff;
    color:#0F3B2E;
    border:1.5px solid #0F3B2E;
}

.pd-call-btn:hover{
    background:#f4f4f4;
}

.pd-whatsapp-btn{
    background:#25D366;
    color:#fff;
    border:1.5px solid #25D366;
}

.pd-whatsapp-btn:hover{
    background:#1ea952;
}

/* ===========================================================
   FULL PROPERTY DETAILS PAGE — MOBILE
=========================================================== */
html.is-mobile .pd-gallery-track img{
    height:280px;
}

html.is-mobile .pd-header{
    padding:20px 0 4px;
}

html.is-mobile .pd-header h1{
    font-size:26px;
    line-height:1.25;
}

html.is-mobile .pd-location{
    font-size:14px;
    margin-bottom:12px;
}

html.is-mobile .pd-price{
    font-size:22px;
}

html.is-mobile .pd-specs,
html.is-mobile .pd-description,
html.is-mobile .pd-features,
html.is-mobile .pd-trust{
    padding:20px 0;
}

.hero{
    min-height: 88vh;
    padding-top: 20px;
    padding-bottom: 50px;
    background: url("images/hero.jpg") center center/cover no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-video{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    min-width:100%;
    min-height:100%;
    width:auto;
    height:auto;
    object-fit:cover;
    z-index:0;
}

.hero-overlay{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background:linear-gradient(180deg, rgba(7,17,31,.32) 0%, rgba(7,17,31,.5) 65%, rgba(7,17,31,.62) 100%);

display:flex;

align-items:center;

z-index:1;

}

.hero-content{

width:90%;

max-width:1200px;

margin:auto;

color:#fff;

position:relative;

z-index:2;

}

.hero-tag{

display:inline-block;

letter-spacing:3px;

font-size:14px;

font-weight:600;

color:#D4AF37;

margin-bottom:25px;

text-transform:uppercase;

}

.hero h1{

font-family:"Cormorant Garamond", serif;

font-size:62px;

line-height:1.18;

font-weight:700;

letter-spacing:.3px;

max-width:750px;

margin-bottom:40px;
margin-top: -200px;

}

.hero-subheading{
    font-family:'Poppins',sans-serif;
    font-size:40px;
    font-weight:900 !important;
    letter-spacing:3px;
    text-transform:uppercase;
    color:#D4AF37;
    margin-bottom:100px;
}


.hero p{

font-size:19px;

line-height:1.85;

max-width:680px;

color:#E5E7EB;

margin-bottom:44px;

font-weight:300;

}

.hero-buttons{

display:flex;

gap:26px;

flex-wrap:wrap;

margin-bottom:10px;

}

.btn-primary{

background:#D4AF37;

color:#07111F;

padding:16px 36px;

border-radius:50px;

text-decoration:none;

font-weight:700;

transition:.3s;

}

.btn-primary:hover{

transform:translateY(-3px);

}

.btn-secondary{

border:2px solid #fff;

padding:16px 36px;

border-radius:50px;

text-decoration:none;

color:#fff;

font-weight:600;

transition:.3s;

}

.btn-secondary:hover{

background:#fff;

color:#07111F;

}

/* ===========================
   HERO PROPERTY SEARCH (glass)
=========================== */
.hero-wrapper{
    position:relative;
}

.hero-search-wrap{
    position:absolute;
    left:50%;
    bottom: 150px;
    transform:translateX(-50%);
    z-index:3;
    width:90%;
    max-width:1200px;
    margin:0;
}

.hero-search{
    position:relative;
    width:100%;
    background:rgba(255,255,255,0.14);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    backdrop-filter: blur(14px) saturate(130%);
    border:1px solid rgba(255,255,255,0.3);
    border-radius:20px;
    padding:26px;
    box-shadow:0 30px 70px rgba(0,0,0,0.22);
}

.property-search-form{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    gap:18px;
}

.search-field{
    flex:1 1 200px;
    display:flex;
    flex-direction:column;
    gap:7px;
}

.search-field label{
    font-size:12px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:#fff;
    opacity:.9;
    font-weight:600;
}

.search-field input,
.search-field select{
    padding:14px 16px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.35);
    background:rgba(255,255,255,.92);
    font-size:16px;
    color:#111827;
    font-family:inherit;
    outline:none;
    transition:.25s;
}

.search-field input:focus,
.search-field select:focus{
    border-color:#D4AF37;
    box-shadow:0 0 0 3px rgba(200,169,106,0.25);
}

.search-btn{
    background:#D4AF37;
    color:#07111F;
    border:none;
    padding:14px 30px;
    border-radius:12px;
    font-weight:700;
    font-size:15px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    white-space:nowrap;
    transition:.3s;
}

.search-btn:hover{
    background:#B8962E;
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(0,0,0,.2);
}

/* ===========================
   BUY / SELL / LEASE CARDS
=========================== */
.bsl-section{
    padding:90px 8%;
    background:#faf8f5;
}

.bsl-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px 28px;
    row-gap:32px;
}

.bsl-card{
    background:#fff;
    border-radius:18px;
    padding:42px 30px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
    border:1px solid rgba(0,0,0,.04);
    text-decoration:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    transition:.3s;
}

.bsl-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(0,0,0,.12);
}

.bsl-icon{
    width:68px;
    height:68px;
    border-radius:50%;
    background:linear-gradient(135deg,#0F3B2E,#0F3B2E);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:24px;
    margin-bottom:22px;
}

.bsl-card h3{
    font-size:22px;
    color:#111;
    margin-bottom:10px;
    font-weight:700;
}

.bsl-card p{
    color:#666;
    font-size:15px;
    line-height:1.6;
    margin:0;
}





nav a{
    position: relative;
}

nav a::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 0;
    height: 2px;
    background: #D4AF37;
    transition: 0.35s ease;
}

nav a:hover::after{
    width: 100%;
}
.hero-content{
    animation: fadeUp 1.2s ease;
}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(40px);
    }

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

}
.logo-text{
    display:flex;
    flex-direction:column;
    text-decoration:none;
    text-align:center;
    line-height:1;
}

.logo-main{
    font-family:"Cormorant Garamond", serif;
    font-size:30px;
    font-weight:500;
    letter-spacing:4px;
    color:#111111;
}

.logo-sub{
    margin-top:8px;
    font-family:"Poppins", sans-serif;
    font-size:15px;
    letter-spacing:8px;
    color:#0F3B2E;
}
/* Scoped to unclassed spans only — this predates the classed
   .property-location / .property-price / button-label spans used by
   the dynamic property cards, and must not override them. */
.property-card span:not([class]){
    display:block;
    padding:10px 24px 0;
    font-size:18px;
    font-weight:600;
    color:#111;
}
/* ===== FOOTER ===== */

.footer-logo h3{
    font-size:30px;
    font-weight:700;
    letter-spacing:2px;
    margin-bottom:10px;
}

.footer-contact p{
    margin:10px 0;
    font-size:16px;
    color:#ddd;
}

.footer-social{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    margin:20px 0;
}

.footer-social a{
    display:flex;
    justify-content:center;
    align-items:center;
    width:54px;
    height:54px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:50%;
    color:#D4AF37;
    text-decoration:none;
    font-size:26px;
    transition:.3s;
}

.footer-social a:hover{
    background:#D4AF37;
    color:#111;
    transform:translateY(-3px);
}
.footer-logo h3,
.footer-logo h3 a {
    color: #ffffff;
    text-decoration: none;
}

.footer-logo p,
.footer-logo p a {
    color: #dddddd;
    text-decoration: none;
}

.footer a {
    color: inherit;
    text-decoration: none;
}

.footer a:hover {
    color: #D4AF37;
    text-decoration: none;
}
/* ===== SANJAY PROFILE PAGE ===== */

.profile-page{
    background:#f5f5f5;
    min-height:100vh;
    padding:50px 20px 60px;
}

.profile-container{
    max-width:900px;
    margin:auto;
    background:#fff;
    padding:50px;
    border-radius:16px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    text-align:center;
}

.profile-photo{
    width:220px;
    height:220px;
    border-radius:50%;
    object-fit:cover;
    border:6px solid #c8a96a;
    margin-bottom:25px;
}

.profile-container h1{
    font-size:38px;
    margin-bottom:10px;
}

.profile-container h3{
    color:#c8a96a;
    margin-bottom:20px;
}

.profile-intro{
    max-width:700px;
    margin:auto;
    font-size:18px;
    line-height:1.8;
    color:#555;
}
.main-nav{
    display:flex;
    align-items:center;
    gap:26px;
    margin-left:32px;
}
.main-nav > .dropdown{
    display: inline-block;
}

.main-nav a{
    position:relative;
    color:#111827;
    text-decoration:none;
    font-family:Poppins;
    font-weight:400;
    font-size:13.5px;
    letter-spacing:.2px;
    padding:6px 0;
    transition:color .3s ease;
}

.main-nav a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:0;
    height:1.5px;
    background:#0F3B2E;
    transition:width .35s ease;
}

/* Small extra breathing room before Admin so it reads as a
   separate utility item, without a large disconnected gap.
   Desktop only — mobile keeps the normal full-width stacked rows. */
.main-nav a.main-nav-admin{
    margin-left:14px;
}

.main-nav a:hover{
    color:#0F3B2E;
}

.main-nav a:hover::after{
    width:100%;
}

.dropdown{
    position:relative;
    display: inline-block;
}

.dropdown-toggle{
    display:flex;
    align-items:center;
    gap:6px;
    color:inherit;
}
.dropdown-toggle i{
    color:inherit;
}
    .dropdown:hover .dropdown-content{
        display: block;
    }   
.dropdown-content{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    min-width:180px;
    background:#fff;
    border-radius:10px;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
    overflow:hidden;
    z-index:9999;
}

.dropdown-content a{
    display:block;
    padding:12px 18px;
    color:#222;
    text-decoration:none;
}

.dropdown-content a:hover{
    background:#f5f5f5;
    color:#C8A05A;
}
/* ==========================
   LIST WITH US - HERO
========================== */

.list-hero{

    background: 
    linear-gradient(rgba(5, 7, 21, 0.893),rgba(10, 20, 45, 0.80)),
    url("images/list-property-banner.jpg") center center/cover no-repeat;
    min-height:90vh;
    justify-content:center;
    display:flex;
    align-items:center;

    color:#fff;

    text-align:center;

}

.list-hero .container{

    max-width:900px;

    margin:auto;

}

.section-tag{

    display:inline-block;

    margin-bottom:20px;

    color:#d4af37;

    letter-spacing:3px;

    font-size:13px;

    font-weight:600;

}

.list-hero h1{

    font-size:54px;

    line-height:1.2;

    margin-bottom:20px;

}

.list-hero p{

    font-size:18px;

    line-height:1.8;

    color:#d6d6d6;

    margin-bottom:35px;

}

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

}

.primary-btn{

    background:#0F3B2E;

    color:#faf7f7;

    padding:16px 36px;

    border-radius:40px;

    text-decoration:none;

    font-weight:600;

}

/* ===========================
   HEADER PHONE LINK (homepage)
   Replaces the "Enquire Now" button with a
   minimal, premium tap-to-call element.
=========================== */
/* Visually hidden but still readable by screen readers —
   used for headings needed for structure but not the visual design */
.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

.nav-phone{
    display:flex;
    align-items:center;
    gap:10px;
    color:#0F3B2E;
    font-weight:600;
    font-size:15px;
    letter-spacing:.3px;
    text-decoration:none;
    padding:12px 8px;
    min-height:44px;
    border-bottom:1px solid transparent;
    transition:color .3s ease, border-color .3s ease, transform .3s ease;
}

.nav-phone i{
    font-size:14px;
    color:#D4AF37;
    transition:transform .3s ease;
}

.nav-phone:hover{
    color:#0F3B2E;
    border-bottom-color:#D4AF37;
    transform:translateY(-1px);
}

.nav-phone:hover i{
    transform:rotate(-8deg);
}

/* On very narrow phones, keep only the icon to save space */
@media (max-width:380px){
    .nav-phone-number{
        display:none;
    }
    .nav-phone{
        gap:0;
    }
}

.secondary-btn{

    border:2px solid #ffffff;

    color:#fff;

    padding:16px 36px;

    border-radius:40px;

    text-decoration:none;

    font-weight:600;

}
/* OWNER FORM */
.owner-form{
    padding:80px 0;
    background:#f8f9fb;
}

.owner-form p{

    text-align:center;

    color:#666;

    font-size:17px;

    line-height:1.8;

    margin-bottom:18px;

}
.confidential-note{
    text-align:center;
    font-size:15px;
    font-weight:500;
    color:#666;
    margin:25px 0 35px;
}

.owner-form .container{

    width:90%;

    max-width:1100px;

    margin:0 auto;

    background:#ffffff;

    padding:60px;

    border-radius:20px;

    box-shadow:0 20px 60px rgba(0,0,0,0.08);

}

.owner-form h2{

    font-size:38px;

    text-align:center;

    margin-bottom:10px;

}
.owner-form h2::after{

    content:"";
    display:block;
    width:80px;
    height:3px;
    background:#D4AF37;
    margin:15px auto 0;
    border-radius:20px;

}

.owner-form p{

    text-align:center;

    color:#666;

    margin-bottom:40px;

}
.owner-form input[type="file"]{
    font-size:13px;
    color:#666;
    margin-bottom:20px;
}

.form-grid{

    display:grid;

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

    gap:20px;

}

.form-grid input,
.form-grid select,
.owner-form textarea{

    width:100%;

    padding:15px;

    border:1px solid #ddd;

    border-radius:10px;

    font-size:16px;

}

.owner-form button{
    display: block;
    width: 180px;
    height: 50px;

    margin-top: 35px;
    margin-left: auto;
    margin-right: auto;

    padding: 0;
    line-height: 50px;

    background: #d4af37;
    color: #111;
    border: none;
    border-radius: 12px;

    font-size: 16px;
    font-weight: 600;
    cursor: pointer;

    transition: 0.3s;
}

.owner-form button:hover{
    background: #c89a2d;
}
.upload-label{
    display:block;
    font-size:14px;
    font-weight:500;
    color:#666;
    margin:12px 0 6px;
}
.form-group{
    display:flex;
    flex-direction:column;
}

.form-group label{
    font-size:14px;
    font-weight:600;
    color:#222;
    margin-bottom:8px;
}

.required{
    color:#e53935;
}
.back-btn:hover{
    background:#c79b23;
}
.submit-wrapper{
    display: flex;
    justify-content: center;
    margin-top: 30px;
}
.success-message{
    display: none;
    text-align: center;
    padding: 40px 20px;
}

.success-message.show{
    display: block;
}
.free-valuation-hero{
    background:
    linear-gradient(rgba(10,20,45,0.78), rgba(10,20,45,0.78)),
    url("images/valuation-bg.png") center center/cover no-repeat;

    min-height:90vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    position:relative;
}
/* ENQUIRY PAGE FIX */
.enquiry-form-section{
    padding-top:50px;
    padding-bottom:80px;
}

.enquiry-container{
    max-width:1200px;
    margin:0 auto;
    padding:40px 30px;
}

.enquiry-form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px;
}

.enquiry-form textarea{
    min-height:180px;
}

@media(max-width:768px){
    .enquiry-form{
        grid-template-columns:1fr;
    }

    .enquiry-form-section{
        padding-top:40px;
    }
}
.back-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:12px 20px;
    background:#d4af37;
    color:#111;
    text-decoration:none;
    border-radius:30px;
    font-weight:600;
    font-size:16px;
    white-space:nowrap;
    transition:0.3s;
}

.back-btn:hover{
    background:#f2d16b;
    transform:translateY(-2px);
}
/* =========================
   INSIGHTS PAGE
========================= */

.insight-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:24px;
    margin-top:40px;
}

.insight-card{
    background:#ffffff;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 8px 25px rgba(0,0,0,0.08);
    transition:0.3s;
}

.insight-card:hover{
    transform:translateY(-6px);
}

.insight-card img{
    width:100%;
    height:160px;
    object-fit:cover;
    display: block;
}

.insight-card .content{
    padding:20px;
}

.insight-card h3{
    margin-bottom:12px;
    font-size:22px;
}

.insight-card p{
    font-size:15px;
    line-height:1.7;
    margin-bottom:18px;
}

.insight-card a{
    color:#c89b3c;
    font-weight:600;
    text-decoration:none;
}
.page-nav{
    position:absolute;
    top:30px;
    left:40px;
    display:flex;
    gap: 15px;
    align-items: center;
    z-index:1000;
}

.page-nav .back-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 26px;
    background:#D4AF37;
    color:#000;
    text-decoration:none;
    border-radius:50px;
    font-weight:600;
}

.page-nav .back-btn:hover{
    background:#c79f2d;
}

/* ===========================
   PREMIUM MOBILE MENU
=========================== */
.menu-toggle{
    display: none;
    position: relative;
    z-index: 10002;
    width:44px;
    height:44px;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    gap:6px;
    background:none;
    border:none;
    cursor:pointer;
}

.menu-toggle span{
    display:block;
    width:28px;
    height:2px;
    background:#111;
    transition:all .3s ease;
    transform-origin:center;
}

.menu-toggle.active span:nth-child(1){
    transform:translateY(8px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2){
    opacity:0;
}

.menu-toggle.active span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
}
.menu-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    opacity:0;
    visibility:hidden;
    transition:.3s;
    z-index:9998;
}

.menu-overlay.active{
    opacity:1;
    visibility:visible;
} 
/* ==========================================
   MOBILE LAYOUT — applied via device
   detection (html.is-mobile class set by
   script.js), NOT by viewport width, so it
   stays active in landscape orientation too.
========================================== */
html.is-mobile .container.nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 16px;
}

html.is-mobile .logo-main{
    font-size:22px;
    letter-spacing:2px;
}

html.is-mobile .logo-sub{
    font-size:11px;
    letter-spacing:5px;
}

html.is-mobile .menu-toggle{
    display:flex;
}

html.is-mobile .nav-right{
    display:none;
}

html.is-mobile .hero{
    min-height: 820px;
    height:auto;
    padding:40px 16px 0;
}

html.is-mobile .hero-overlay{
    align-items:flex-start;
    padding-top:220px;
}

html.is-mobile .hero-buttons{
    flex-direction:column;
    gap:14px;
}

html.is-mobile .hero-content{
    margin:0 auto;
}

html.is-mobile .hero h1{
    font-size:34px;
    line-height:1.2;
}

html.is-mobile .hero p{
    font-size:16px;
    line-height:1.7;
}

html.is-mobile .btn-primary,
html.is-mobile .btn-secondary{
    width:100%;
    text-align:center;
}

html.is-mobile .property-grid,
html.is-mobile .why-grid,
html.is-mobile .service-grid,
html.is-mobile .contact-info,
html.is-mobile .leadership-grid,
html.is-mobile .bsl-grid{
    grid-template-columns:1fr;
    display:grid;
    gap:24px;
}

html.is-mobile .property-card{
    width:100%;
}

html.is-mobile .leader-card{
    width:100%;
    max-width:340px;
    margin:0 auto;
}

html.is-mobile .leader-photo{
    width:180px;
    height:180px;
}

html.is-mobile .featured{
    padding:45px 16px 55px;
}

html.is-mobile #leadership{
    padding:50px 16px;
}

html.is-mobile .why{
    padding:45px 16px;
}

html.is-mobile .services{
    padding:45px 16px 50px;
}

html.is-mobile .why-grid,
html.is-mobile .service-grid{
    gap:32px;
}

html.is-mobile .why-item,
html.is-mobile .service-item{
    border-left:none;
    padding:0;
}

html.is-mobile .why-item p,
html.is-mobile .service-item p{
    max-width:280px;
}

html.is-mobile .hero-search-wrap{
    position:absolute;
    left:50%;
    bottom:120px;
    transform:translateX(-50%);
    width:calc(100% - 32px);
    max-width:none;
    margin:0;
}

html.is-mobile .hero-search{
    padding:18px;
}

html.is-mobile .property-search-form{
    flex-direction:column;
    align-items:stretch;
    gap:14px;
}

html.is-mobile .search-field{
    flex:0 0 auto;
}

html.is-mobile .search-btn{
    width:100%;
}

html.is-mobile .bsl-section{
    padding:40px 16px 45px;
}

html.is-mobile .bsl-card{
    padding:26px 20px;
}

html.is-mobile #about.about{
    padding:50px 16px 55px;
}

html.is-mobile .about{
    padding:40px 16px;
}

html.is-mobile .about h2{
    font-size:26px;
}

html.is-mobile .about-content p{
    font-size:16px;
    text-align:left;
}

html.is-mobile .legacy-timeline{
    margin-top:45px;
    padding-left:30px;
}

html.is-mobile .legacy-item{
    margin-bottom:50px;
    gap:0;
}

html.is-mobile .legacy-item:not(:last-child)::after{
    left:-24.5px;
    bottom:calc(-50px - 6px);
}

html.is-mobile .legacy-item:nth-child(2){
    margin-bottom:65px;
}

html.is-mobile .legacy-item:nth-child(2)::after{
    bottom:calc(-65px - 6px);
}

html.is-mobile .legacy-dot{
    left:-30px;
}

html.is-mobile .legacy-year{
    left:-24.5px;
    top:-24px;
    transform:translateX(-50%);
    font-size:13px;
}

html.is-mobile .legacy-text h3{
    font-size:19px;
}

html.is-mobile .legacy-text p{
    font-size:15.5px;
}

html.is-mobile .testimonials-section{
    padding:45px 16px;
}

html.is-mobile .testimonials-grid{
    grid-template-columns:1fr;
    gap:20px;
    margin-top:26px;
}

html.is-mobile .quick-enquiry-section{
    padding:38px 16px;
}

html.is-mobile .quick-enquiry-grid{
    grid-template-columns:1fr;
    gap:36px;
}

html.is-mobile .quick-enquiry-info h2,
html.is-mobile .quick-enquiry-desc{
    max-width:100%;
}

html.is-mobile .quick-enquiry-form-wrap{
    padding:18px;
}

html.is-mobile .qe-field{
    margin-bottom:20px;
}

html.is-mobile .footer{
    padding:30px 16px;
}

html.is-mobile .premium-footer{
    padding:48px 16px 0;
    background-position:center top;
}

html.is-mobile .premium-footer-top{
    grid-template-columns:1fr;
    gap:32px;
    padding-bottom:28px;
}

html.is-mobile .pf-brand{
    padding-right:0;
}

html.is-mobile .pf-desc,
html.is-mobile .pf-contact p{
    max-width:100%;
}

html.is-mobile .qe-office-links{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
}

html.is-mobile .office-map-embed iframe{
    height:180px;
}

html.is-mobile .office-map-embed.office-map-placeholder{
    height:180px;
}

html.is-mobile .office-locations-section{
    padding:50px 16px;
}

html.is-mobile .office-locations-grid{
    grid-template-columns:1fr;
    gap:20px;
}

html.is-mobile .office-card{
    padding:24px 20px;
}

html.is-mobile .premium-footer-bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    padding:20px 16px;
}

html.is-mobile .pf-legal{
    gap:18px;
    flex-wrap:wrap;
}

html.is-mobile .whatsapp-float{
    width:52px;
    height:52px;
    bottom:20px;
    right:18px;
}

html.is-mobile .back-to-top{
    width:52px;
    height:52px;
    bottom:84px;
    right:18px;
    font-size:19px;
}

html.is-mobile .main-nav{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    width:76%;
    max-width:340px;
    height:100vh;
    height:100dvh;
    background:#ffffff;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    margin-left:0;
    padding:calc(28px + env(safe-area-inset-top,0px)) 0 calc(24px + env(safe-area-inset-bottom,0px));
    transform:translateX(100%);
    transition:transform .32s cubic-bezier(.4,0,.2,1);
    box-shadow:-10px 0 30px rgba(0,0,0,.15);
    border-left:3px solid #0F3B2E;
    z-index:10001;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
}

html.is-mobile .main-nav.active{
    transform:translateX(0);
}

html.is-mobile .dropdown{
    width:100%;
}

html.is-mobile .dropdown-toggle{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

html.is-mobile .dropdown-content{
    display:none;
    position:static;
    box-shadow:none;
    background:transparent;
    padding-left:15px;
}

html.is-mobile .dropdown.open .dropdown-content{
    display:block;
}

html.is-mobile .main-nav a{
    position:relative;
    width:100%;
    color:#111;
    padding:15px 28px;
    font-family:Poppins;
    font-weight:600;
    font-size:16px;
    letter-spacing:.2px;
    border-bottom:1px solid #f0f0f0;
    box-sizing:border-box;
    margin-left:0;
}

html.is-mobile .main-nav > a:first-child{
    border-top:1px solid #f0f0f0;
}

.mobile-menu-phone{
    display:none;
}

.mobile-menu-divider{
    display:none;
}

.mobile-menu-contact-label{
    display:none;
}

.mobile-menu-socials{
    display:none;
}

html.is-mobile .mobile-menu-divider{
    display:none;
}

html.is-mobile .mobile-menu-contact-label{
    display:block;
    width:100%;
    padding:22px 28px 8px;
    box-sizing:border-box;
    font-family:Poppins;
    font-weight:600;
    font-size:11px;
    letter-spacing:1.5px;
    color:#9a9a9a;
}

html.is-mobile .mobile-menu-phone{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    padding:10px 28px;
    box-sizing:border-box;
    font-family:Poppins;
    font-weight:500;
    font-size:15px;
    color:#111;
    text-decoration:none;
    text-align:left;
}

html.is-mobile .mobile-menu-socials{
    display:flex;
    justify-content:flex-start;
    align-items:center;
    gap:10px;
    width:100%;
    padding:14px 28px 0;
    box-sizing:border-box;
}

html.is-mobile .mobile-menu-socials a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    padding:0;
    border-radius:50%;
    background:#f5f5f5;
    color:#111;
    text-decoration:none;
}

html.is-mobile .mobile-menu-socials svg{
    width:17px;
    height:17px;
    stroke:#111;
    fill:none;
}

/* Keep the floating WhatsApp button from colliding with the open drawer */
html.is-mobile .whatsapp-float{
    transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
}

html.is-mobile body.mobile-menu-open .whatsapp-float{
    opacity:0;
    visibility:hidden;
    transform:scale(.8);
}

/* Fallback for the rare case JavaScript is disabled:
   still switch to mobile layout by width so the site
   isn't unusable, though it won't survive rotation. */
@media (max-width:768px){
    html:not(.is-mobile) .header{ background:#fff; }
    html:not(.is-mobile) .container.nav{ display:flex; justify-content:space-between; align-items:center; padding:15px 20px; }
    html:not(.is-mobile) .menu-toggle{ display:flex; }
    html:not(.is-mobile) .nav-right{ display:none; }
    html:not(.is-mobile) .hero{ min-height:85vh; padding:100px 20px 60px; }
    html:not(.is-mobile) .property-grid,
    html:not(.is-mobile) .why-grid,
    html:not(.is-mobile) .service-grid,
    html:not(.is-mobile) .contact-info,
    html:not(.is-mobile) .leadership-grid{ grid-template-columns:1fr; display:grid; }
    html:not(.is-mobile) .qe-office-links{ flex-direction:column; align-items:flex-start; gap:8px; }
    html:not(.is-mobile) .office-map-embed iframe{ height:180px; }
    html:not(.is-mobile) .office-map-embed.office-map-placeholder{ height:180px; }
    html:not(.is-mobile) .office-locations-grid{ grid-template-columns:1fr; gap:20px; }
    html:not(.is-mobile) .office-locations-section{ padding:50px 16px; }

    /* Floating buttons: match html.is-mobile sizing purely by viewport
       width too, so the two buttons stay an identical-size pair even
       when the mobile layout is reached via a narrow viewport alone
       (e.g. browser devtools responsive/mobile view) without the
       touch/UA signals that set the .is-mobile class. */
    html:not(.is-mobile) .whatsapp-float{
        width: 52px;
        height:px;
        bottom:20px;
        right:18px;
    }
    html:not(.is-mobile) .back-to-top{
        width:52px;
        height:52px;
        bottom: 80px;
        right:18px;
        font-size:19px;
    }
}

/* ==========================================================
   OUR REALTORS — PAGE, GRID CARDS, AND PROFILE PAGE
   Uses an auto-fit grid so adding new realtor objects to
   realtors-data.js automatically expands the layout — no
   CSS or HTML changes needed as the team grows.
========================================================== */

.realtors-page-intro{
    background:#fff;
    padding:60px 8% 60px;
    text-align:center;
}

.realtors-page-intro .section-eyebrow{
    display:block;
}

.realtors-page-intro h1{
    font-family:"Cormorant Garamond", serif;
    font-size:44px;
    font-weight:600;
    color:#111;
    margin:14px 0 20px;
}

.realtors-page-intro .realtors-subtitle{
    max-width:640px;
    margin:0 auto;
    font-size:17px;
    line-height:1.8;
    color:#5b6472;
}

.realtors-section{
    background:#fff;
    padding:20px 8% 130px;
}

.realtors-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
    gap:40px;
    max-width:1200px;
    margin:0 auto;
}

.realtor-card{
    background:#fff;
    border:1px solid rgba(15,59,46,.08);
    border-radius:20px;
    padding:44px 32px;
    text-align:center;
    box-shadow:0 10px 30px rgba(15,59,46,.06);
    transition:.4s cubic-bezier(.2,.8,.2,1);
}

.realtor-card:hover{
    transform:translateY(-10px);
    box-shadow:0 26px 55px rgba(15,59,46,.14);
}

.realtor-photo{
    width:130px;
    height:130px;
    border-radius:50%;
    object-fit:cover;
    margin:0 auto 24px;
    border:4px solid #0F3B2E;
    display:block;
}

.realtor-card h3{
    font-size:21px;
    font-weight:700;
    color:#111827;
    margin-bottom:6px;
}

.realtor-designation{
    display:block;
    font-size:13px;
    font-weight:600;
    letter-spacing:.6px;
    text-transform:uppercase;
    color:#D4AF37;
    margin-bottom:18px;
}

.realtor-intro{
    font-size:15px;
    line-height:1.75;
    color:#6b7280;
    margin-bottom:26px;
    min-height:66px;
}

.realtor-view-btn{
    display:inline-block;
    background:#0F3B2E;
    color:#fff;
    padding:12px 30px;
    border-radius:30px;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
    transition:.3s;
}

.realtor-view-btn:hover{
    background:#0a2b21;
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(15,59,46,.3);
}

/* ===== INDIVIDUAL REALTOR PROFILE PAGE ===== */
.realtor-profile-section{
    background:#fff;
    padding:60px 8% 120px;
}

.realtor-profile-grid{
    max-width:1100px;
    margin:0 auto;
    display:grid;
    grid-template-columns:340px 1fr;
    gap:70px;
    align-items:start;
}

.realtor-profile-photo-wrap{
    text-align:center;
}

.realtor-profile-photo{
    width:100%;
    max-width:320px;
    aspect-ratio:1/1;
    border-radius:50%;
    object-fit:cover;
    border:6px solid #0F3B2E;
    box-shadow:0 20px 45px rgba(15,59,46,.15);
}

.realtor-profile-info .section-eyebrow{
    color:#D4AF37;
}

.realtor-profile-info h1{
    font-family:"Cormorant Garamond", serif;
    font-size:38px;
    font-weight:600;
    color:#111;
    margin:10px 0 6px;
}

.realtor-profile-designation{
    display:block;
    font-size:15px;
    font-weight:600;
    color:#0F3B2E;
    margin-bottom:26px;
}

.realtor-profile-about{
    font-size:16.5px;
    line-height:1.9;
    color:#4b5563;
    margin-bottom:40px;
    max-width:620px;
}

.rp-detail-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:30px 40px;
    margin-bottom:40px;
}

.rp-detail-block h4{
    font-size:12.5px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    color:#D4AF37;
    margin-bottom:10px;
}

.rp-detail-block p{
    font-size:15.5px;
    color:#374151;
    line-height:1.7;
}

.rp-tag-list{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.rp-tag{
    display:inline-block;
    background:rgba(15,59,46,.06);
    color:#0F3B2E;
    font-size:13px;
    font-weight:600;
    padding:6px 14px;
    border-radius:20px;
}

.rp-contact-row{
    display:flex;
    flex-wrap:wrap;
    gap:24px;
    padding-top:24px;
    border-top:1px solid rgba(17,24,39,.08);
}

.rp-contact-row a{
    color:#0F3B2E;
    text-decoration:none;
    font-size:15px;
    font-weight:600;
    transition:color .25s ease;
}

.rp-contact-row a:hover{
    color:#D4AF37;
}

.profile-rera{
    margin-top:14px;
    font-family:Poppins;
    font-size:14px;
    color:#555;
}

.profile-rera strong{
    color:#0F3B2E;
}

.realtor-not-found{
    text-align:center;
    padding:60px 20px;
    font-size:18px;
    color:#6b7280;
}

/* ===== MOBILE ===== */
html.is-mobile .realtors-page-intro{
    padding:100px 16px 40px;
}

html.is-mobile .realtors-page-intro h1{
    font-size:30px;
}

html.is-mobile .realtors-section{
    padding:10px 16px 80px;
}

html.is-mobile .realtors-grid{
    grid-template-columns:1fr;
    gap:30px;
}

html.is-mobile .realtor-profile-section{
    padding:100px 16px 80px;
}

html.is-mobile .realtor-profile-grid{
    grid-template-columns:1fr;
    gap:40px;
    text-align:center;
}

html.is-mobile .realtor-profile-photo-wrap{
    max-width:260px;
    margin:0 auto;
}

html.is-mobile .realtor-profile-about{
    max-width:100%;
}

html.is-mobile .rp-detail-grid{
    grid-template-columns:1fr;
    text-align:left;
}

html.is-mobile .rp-tag-list{
    justify-content:flex-start;
}

html.is-mobile .rp-contact-row{
    flex-direction:column;
    gap:14px;
    text-align:left;
}

/* ==========================================================
   WHY INVEST IN CHENNAI
========================================================== */
.invest-section{
    background:#faf9f7;
    padding:100px 8%;
}

.invest-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:36px;
    max-width:1200px;
    margin:60px auto 0;
}

.invest-card{
    background:#fff;
    border-radius:16px;
    padding:38px 30px;
    box-shadow:0 10px 28px rgba(15,59,46,.06);
    transition:.4s cubic-bezier(.2,.8,.2,1);
    border:1px solid rgba(15,59,46,.06);
}

.invest-card:hover{
    transform:translateY(-8px);
    box-shadow:0 22px 45px rgba(15,59,46,.12);
}

.invest-icon{
    width:42px;
    height:42px;
    color:#0F3B2E;
    margin-bottom:20px;
    transition:color .3s ease;
}

.invest-icon svg{
    width:100%;
    height:100%;
}

.invest-card:hover .invest-icon{
    color:#D4AF37;
}

.invest-card h3{
    font-size:19px;
    font-weight:700;
    color:#111827;
    margin-bottom:10px;
}

.invest-card p{
    font-size:15px;
    line-height:1.7;
    color:#6b7280;
    margin:0;
}

/* ==========================================================
   PROPERTY CATEGORIES
========================================================== */
.categories-section{
    background:#fff;
    padding:100px 8%;
}

.categories-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:26px;
    max-width:1200px;
    margin:60px auto 0;
}

.category-card{
    position:relative;
    display:flex;
    align-items:flex-end;
    height:260px;
    border-radius:18px;
    overflow:hidden;
    background-size:cover;
    background-position:center;
    text-decoration:none;
    box-shadow:0 14px 34px rgba(0,0,0,.12);
    transition:.4s cubic-bezier(.2,.8,.2,1);
}

.category-card:hover{
    transform:translateY(-8px);
    box-shadow:0 26px 50px rgba(0,0,0,.2);
}

.category-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(15,59,46,0) 40%, rgba(15,59,46,.75) 100%);
    transition:.4s ease;
}

.category-card:hover .category-overlay{
    background:linear-gradient(180deg, rgba(15,59,46,.1) 30%, rgba(15,59,46,.85) 100%);
}

.category-label{
    position:relative;
    z-index:1;
    padding:24px;
    color:#fff;
    font-size:20px;
    font-weight:700;
    letter-spacing:.3px;
}

/* ==========================================================
   FEATURED LOCATIONS
========================================================== */
.locations-section{
    background:#faf9f7;
    padding:100px 8%;
}

.locations-grid{
    display:flex;
    flex-direction:column;
    gap:18px;
    max-width:900px;
    margin:60px auto 0;
}

.location-category{
    display:flex;
    flex-direction:column;
    padding-bottom:18px;
}

.location-category:not(:last-child){
    border-bottom:1px solid rgba(15,23,42,.08);
}

.location-card-btn{
    position:relative;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    height:190px;
    border-radius:20px;
    overflow:hidden;
    background-size:cover;
    background-position:center;
    border:none;
    padding:0;
    cursor:pointer;
    box-shadow:0 10px 26px rgba(0,0,0,.1);
    transition:.35s cubic-bezier(.2,.8,.2,1);
    width:100%;
    text-align:left;
    font-family:inherit;
}

.location-card-btn:hover{
    transform:translateY(-6px) scale(1.01);
    box-shadow:0 20px 40px rgba(0,0,0,.18);
}

.location-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(15,23,42,0) 40%, rgba(15,23,42,.8) 100%);
    transition:.3s ease;
}

.location-card-btn[aria-expanded="true"] .location-overlay{
    background:linear-gradient(180deg, rgba(15,23,42,.15) 0%, rgba(15,23,42,.85) 100%);
}

.location-name{
    position:relative;
    z-index:1;
    padding:18px 20px;
    color:#fff;
    font-size:17px;
    font-weight:700;
}

.location-toggle-btn{
    position:relative;
    z-index:1;
    flex-shrink:0;
    width:34px;
    height:34px;
    margin:0 20px 18px 0;
    border-radius:50%;
    background:rgba(255,255,255,.18);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:14px;
    transition:.3s ease;
}

.location-card-btn[aria-expanded="true"] .location-toggle-btn{
    background:#D4AF37;
    color:#0F3B2E;
}

/* Expandable area row — premium dark glass per unified spec */
.location-areas-row{
    max-height:0;
    overflow:hidden;
    transition:max-height .25s cubic-bezier(.2,.8,.2,1), margin-top .25s ease;
    margin-top:0;
}

.location-category.open .location-areas-row{
    max-height:72px;
    margin-top:12px;
}

.location-areas-track{
    display:flex;
    gap:10px;
    touch-action:pan-x;
    overflow-x:auto;
    padding:12px 14px;
    background:rgba(15,23,42,.4);
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.14);
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
}

.location-areas-track::-webkit-scrollbar{
    height:5px;
}

.location-areas-track::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.25);
    border-radius:10px;
}

.location-chip{
    flex:0 0 auto;
    white-space:nowrap;
    padding:9px 18px;
    border-radius:30px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.18);
    color:#fff;
    font-size:13.5px;
    font-weight:600;
    text-decoration:none;
    transition:.25s ease;
}

.location-chip:hover{
    background:#D4AF37;
    border-color:#D4AF37;
    color:#0F3B2E;
    transform:translateY(-2px);
}

/* ==========================================================
   WHY GRID — 6-ITEM VARIANT (3 columns x 2 rows)
========================================================== */
.why-grid-6{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:50px 20px;
}

.why-grid-6 .why-item{
    border-left:none;
}

/* ==========================================================
   FAQ ACCORDION
========================================================== */
.faq-section{
    position:relative;
    overflow:hidden;
    background:#0F3B2E;
    padding:100px 8%;
}

.faq-section::before{
    content:"";
    position:absolute;
    inset:-20px;
    background:url('images/faq-bg.jpg') center/cover no-repeat;
    filter:blur(4px);
    transform:scale(1.02);
    z-index:0;
}

.faq-section::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(15,59,46,.83);
    z-index:1;
}

.faq-section .container{
    position:relative;
    z-index:2;
}

.faq-section .section-eyebrow{
    color:#D4AF37;
}

.faq-section .section-heading h2{
    color:#fff;
}

.faq-list{
    max-width:820px;
    margin:60px auto 0;
    display:flex;
    flex-direction:column;
    gap:16px;
}

.faq-item{
    border-bottom:none;
    background:rgba(15,23,42,.4);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    will-change: backdrop-filter;
    border:1px solid rgba(255,255,255,.16);
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
    transition:.3s ease;
}

.faq-item:hover{
    background:rgba(15,23,42,.5);
    border-color:rgba(212,175,55,.4);
    transform:translateY(-2px);
}

.faq-question{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    background:none;
    border:none;
    text-align:left;
    padding:22px 26px;
    font-size:16.5px;
    font-weight:600;
    color:#fff;
    cursor:pointer;
    font-family:inherit;
}

.faq-icon{
    flex-shrink:0;
    color:#D4AF37;
    font-size:15px;
    transition:transform .35s ease;
}

.faq-question[aria-expanded="true"] .faq-icon{
    transform:rotate(135deg);
}

.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .4s ease, padding .4s ease;
    padding:0 26px;
}

.faq-item.open .faq-answer{
    padding:0 26px 24px;
}

.faq-answer p{
    font-size:15.5px;
    line-height:1.8;
    color:rgba(255,255,255,.78);
    margin:0;
}

/* ==========================================================
   CALL TO ACTION
========================================================== */
.cta-section{
    background:
        linear-gradient(rgba(15,59,46,0.65), rgba(15,59,46,0.65)),
        url("images/chennai-marina.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    padding:100px 8%;
    text-align:center;
}

.cta-section h2{
    font-family:"Cormorant Garamond", serif;
    font-size:40px;
    font-weight:600;
    color:#fff;
    max-width:640px;
    margin:0 auto 20px;
}

.cta-section p{
    font-size:16.5px;
    line-height:1.8;
    color:rgba(255,255,255,.75);
    max-width:560px;
    margin:0 auto 40px;
}

.cta-buttons{
    display:flex;
    justify-content:center;
    gap:24px;
    flex-wrap:wrap;
}

.cta-btn-secondary{
    border-color:rgba(255,255,255,.5);
}

/* ==========================================================
   MOBILE — ALL NEW SECTIONS
========================================================== */
html.is-mobile .invest-section,
html.is-mobile .categories-section,
html.is-mobile .locations-section,
html.is-mobile .faq-section,
html.is-mobile .cta-section{
    padding:45px 16px;
}

html.is-mobile .invest-grid,
html.is-mobile .categories-grid,
html.is-mobile .why-grid-6{
    grid-template-columns:1fr;
    gap:20px;
    margin-top:26px;
}

html.is-mobile .locations-grid{
    margin-top:26px;
}

html.is-mobile .cta-section h2{
    font-size:28px;
}

html.is-mobile .cta-buttons{
    flex-direction:column;
    align-items:stretch;
}

/* ==========================================================
   TABLET — bring 3-col grids down to 2 columns
========================================================== */
@media (min-width:769px) and (max-width:1024px){
    .bsl-grid,
    .invest-grid,
    .categories-grid,
    .why-grid-6{
        grid-template-columns:repeat(2, 1fr) !important;
    }
    .property-grid,
    .testimonials-grid{
        grid-template-columns:repeat(2, 1fr) !important;
    }
}

/* ===========================
   PROPERTY SHARE BUTTON
=========================== */
.property-share-btn{
    position:absolute;
    top:10px;
    right:10px;
    width:32px;
    height:32px;
    border-radius:50%;
    background:rgba(255,255,255,.92);
    border:none;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#0F3B2E;
    font-size:13px;
    cursor:pointer;
    box-shadow:0 3px 10px rgba(0,0,0,.18);
    transition:.25s ease;
    z-index:2;
}

.property-share-btn:hover{
    background:#0F3B2E;
    color:#fff;
    transform:scale(1.1);
}

.share-toast{
    position:fixed;
    bottom:30px;
    left:50%;
    transform:translateX(-50%) translateY(20px);
    background:#0F3B2E;
    color:#fff;
    padding:12px 24px;
    border-radius:30px;
    font-size:14px;
    font-weight:600;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease, transform .3s ease;
    z-index:9999;
}

.share-toast.show{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}

/* ===========================
   ACTIVE NAV LINK
=========================== */
.main-nav a.active{
    color:#0F3B2E;
}

/* ===========================
   FEATURED LOCATIONS — LANDSCAPE PHONE
   Keep the single-column vertical list, just with a shorter
   card height so scrolling through 6 cards on a short landscape
   screen doesn't take excessive vertical space.
=========================== */
@media (orientation:landscape) and (max-height:550px){
    html.is-mobile .location-card-btn{
        height:110px;
    }

    html.is-mobile .location-name{
        font-size:14px;
        padding:12px 14px;
    }

    html.is-mobile .location-category.open .location-areas-row{
        max-height:64px;
    }
}

/* ===========================================================
   PROPERTY QUICK VIEW OVERLAY
   Opened by tapping/clicking a property card. Full detail info
   lives here; property.html is untouched. See js/public-properties.js
   for the logic — this is markup-agnostic styling only.
=========================================================== */

/* Desktop hover affordance on the card image — a restrained
   "Quick View" pill, shown only on real hover-capable pointers
   so it never appears (or gets relied on) for touch. */
@media (hover:hover) and (pointer:fine){
    .property-card{ position:relative; }
    .qv-hover-cta{
        position:absolute;
        left:50%;
        bottom:18px;
        transform:translate(-50%,10px);
        opacity:0;
        visibility:hidden;
        transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
        background:rgba(255,255,255,.96);
        color:#0F3B2E;
        font-family:Poppins;
        font-weight:600;
        font-size:13px;
        letter-spacing:.3px;
        padding:10px 22px;
        border-radius:30px;
        box-shadow:0 10px 24px rgba(0,0,0,.22);
        border:none;
        cursor:pointer;
        z-index:2;
    }
    .property-card:hover .qv-hover-cta{
        opacity:1;
        visibility:visible;
        transform:translate(-50%,0);
    }
}

.qv-overlay{
    position:fixed;
    inset:0;
    z-index:10050;
    display:none;
}

.qv-overlay.active{
    display:block;
}

.qv-backdrop{
    position:absolute;
    inset:0;
    background:rgba(10,20,17,.55);
    opacity:0;
    transition:opacity .3s ease;
}

.qv-overlay.active .qv-backdrop{
    opacity:1;
}

.qv-sheet{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    max-height:94vh;
    max-height:94dvh;
    background:#fff;
    border-radius:22px 22px 0 0;
    box-shadow:0 -20px 50px rgba(0,0,0,.3);
    display:flex;
    flex-direction:column;
    transform:translateY(100%);
    transition:transform .36s cubic-bezier(.4,0,.2,1);
    overflow:hidden;
}

.qv-overlay.active .qv-sheet{
    transform:translateY(0);
}

.qv-close{
    position:absolute;
    top:14px;
    right:14px;
    z-index:3;
    width:38px;
    height:38px;
    border-radius:50%;
    border:none;
    background:rgba(0,0,0,.45);
    color:#fff;
    font-size:20px;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}

.qv-gallery{
    position:relative;
    flex-shrink:0;
    background:#0F3B2E;
}

.qv-gallery-track{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}

.qv-gallery-track::-webkit-scrollbar{
    display:none;
}

.qv-gallery-track img{
    flex:0 0 100%;
    width:100%;
    height:260px;
    object-fit:cover;
    scroll-snap-align:center;
    display:block;
}

.qv-gallery-dots{
    position:absolute;
    left:0;
    right:0;
    bottom:12px;
    display:flex;
    justify-content:center;
    gap:6px;
}

.qv-gallery-dots span{
    width:6px;
    height:6px;
    border-radius:50%;
    background:rgba(255,255,255,.5);
    transition:.25s;
}

.qv-gallery-dots span.active{
    background:#D4AF37;
    width:16px;
    border-radius:4px;
}

.qv-gallery-count{
    position:absolute;
    right:12px;
    bottom:12px;
    background:rgba(0,0,0,.5);
    color:#fff;
    font-size:11px;
    font-family:Poppins;
    font-weight:600;
    padding:3px 9px;
    border-radius:20px;
}

.qv-body{
    overflow-y:auto;
    padding:22px 22px 8px;
    -webkit-overflow-scrolling:touch;
}

.qv-badge{
    display:inline-block;
    background:#D4AF37;
    color:#0F3B2E;
    font-family:Poppins;
    font-weight:700;
    font-size:10px;
    letter-spacing:.6px;
    text-transform:uppercase;
    padding:4px 11px;
    border-radius:6px;
    margin-bottom:10px;
}

.qv-title{
    font-family:'Cormorant Garamond',serif;
    font-size:26px;
    font-weight:600;
    color:#111;
    margin:0 0 6px;
    line-height:1.25;
}

.qv-location{
    font-family:Poppins;
    font-size:14px;
    color:#666;
    margin:0 0 14px;
}

.qv-price{
    font-family:Poppins;
    font-size:22px;
    font-weight:800;
    color:#0F3B2E;
    margin-bottom:18px;
}

.qv-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin-bottom:22px;
}

.qv-stat{
    background:#f7f6f2;
    border:1px solid #eee;
    border-radius:12px;
    text-align:center;
    padding:12px 6px;
}

.qv-stat .qv-stat-value{
    display:block;
    font-family:Poppins;
    font-weight:700;
    font-size:16px;
    color:#0F3B2E;
}

.qv-stat .qv-stat-label{
    display:block;
    font-family:Poppins;
    font-size:11px;
    color:#777;
    margin-top:2px;
}

.qv-section{
    margin-bottom:22px;
}

.qv-section h3{
    font-family:Poppins;
    font-weight:700;
    font-size:12px;
    letter-spacing:.8px;
    text-transform:uppercase;
    color:#0F3B2E;
    margin:0 0 10px;
    padding-bottom:8px;
    border-bottom:1px solid #eee;
}

.qv-desc{
    font-family:Poppins;
    font-size:14.5px;
    line-height:1.7;
    color:#444;
    margin:0;
    display:-webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.qv-desc.expanded{
    display:block;
    -webkit-line-clamp:unset;
    overflow:visible;
}

.qv-readmore{
    background:none;
    border:none;
    color:#0F3B2E;
    font-family:Poppins;
    font-weight:600;
    font-size:13px;
    padding:8px 0 0;
    cursor:pointer;
    text-decoration:underline;
}

.qv-features ul{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 14px;
}

.qv-features li{
    font-family:Poppins;
    font-size:13.5px;
    color:#333;
    display:flex;
    align-items:flex-start;
    gap:8px;
    line-height:1.4;
}

.qv-features li::before{
    content:"\2713";
    color:#D4AF37;
    font-weight:700;
    flex-shrink:0;
}

.qv-brokerage p,
.qv-rera p{
    font-family:Poppins;
    font-size:13.5px;
    color:#444;
    margin:0 0 4px;
}

.qv-rera .qv-rera-authority{
    color:#777;
    font-size:12.5px;
}

.qv-rera .qv-rera-no strong{
    color:#0F3B2E;
}

.qv-actions{
    flex-shrink:0;
    display:flex;
    gap:10px;
    padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px));
    border-top:1px solid #eee;
    background:#fff;
}

.qv-actions a{
    flex:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    text-decoration:none;
    font-family:Poppins;
    font-weight:600;
    font-size:13.5px;
    border-radius:30px;
    padding:0 10px;
    height:48px;
    white-space:nowrap;
    box-sizing:border-box;
}

.qv-call,
.qv-whatsapp{
    border:1.5px solid #0F3B2E;
    color:#0F3B2E;
    background:#fff;
}

.qv-whatsapp{
    border-color:#25D366;
    background:#25D366;
    color:#fff;
}

/* Body-scroll lock while the Quick View is open (mirrors the
   mobile-menu lock technique so iOS never rubber-bands behind it) */
body.qv-open{
    position:fixed;
    left:0;
    right:0;
    width:100%;
}

/* --- Desktop: centered modal instead of a bottom sheet --- */
@media (min-width:769px){
    .qv-sheet{
        left:50%;
        top:50%;
        bottom:auto;
        transform:translate(-50%,-46%);
        width:92%;
        max-width:460px;
        max-height:88vh;
        border-radius:20px;
        opacity:0;
        transition:transform .3s ease, opacity .3s ease;
    }
    .qv-overlay.active .qv-sheet{
        transform:translate(-50%,-50%);
        opacity:1;
    }
    .qv-gallery-track img{
        height:280px;
    }
}

/* ===========================
   BROKERAGE & FEES PAGE
   Reuses existing brand tokens only (#0F3B2E green, #D4AF37 gold,
   #f7f6f2 card fill from .pd-trust-card) — no new colors introduced.
=========================== */
.brokerage-content{
    max-width:900px;
    margin:auto;
    padding:80px 0 40px;
}

.brokerage-content .section-heading{
    text-align:left;
    max-width:none;
    margin:0 0 30px;
}

.brokerage-fee-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-bottom:60px;
}

.brokerage-fee-card{
    background:#f7f6f2;
    border:1px solid #eee;
    border-radius:14px;
    padding:24px;
}

.brokerage-fee-card h3{
    font-family:Poppins;
    font-size:15px;
    font-weight:700;
    color:#0F3B2E;
    margin:0 0 10px;
}

.brokerage-fee-card p{
    font-family:Poppins;
    font-size:14px;
    line-height:1.7;
    color:#555;
    margin:0;
}

.brokerage-text-block{
    margin-bottom:44px;
}

.brokerage-text-block h2{
    font-family:"Cormorant Garamond", serif;
    font-size:28px;
    font-weight:600;
    color:#111827;
    margin:0 0 14px;
}

.brokerage-text-block p{
    font-family:Poppins;
    font-size:15px;
    line-height:1.85;
    color:#555;
    margin:0 0 12px;
}

.brokerage-note{
    background:#f7f6f2;
    border-left:3px solid #D4AF37;
    border-radius:8px;
    padding:28px 30px;
}

.brokerage-note h2{
    font-family:"Cormorant Garamond", serif;
    font-size:24px;
    font-weight:600;
    color:#0F3B2E;
    margin:0 0 14px;
}

.brokerage-note p{
    font-family:Poppins;
    font-size:14px;
    line-height:1.8;
    color:#555;
    margin:0 0 12px;
}

.brokerage-note p:last-child{
    margin-bottom:0;
}

@media (max-width:768px){
    .brokerage-fee-grid{
        grid-template-columns:1fr;
    }
    .brokerage-content{
        padding:50px 0 30px;
    }
}

/* Subtle brokerage/fees disclosure on the property detail page,
   placed under the price — small, muted, doesn't disturb layout. */
.pd-brokerage-disclosure{
    font-family:Poppins;
    font-size:12px;
    color:#888;
    margin-top:8px;
}

.pd-brokerage-disclosure a{
    color:#0F3B2E;
    font-weight:600;
    text-decoration:none;
}

.pd-brokerage-disclosure a:hover{
    text-decoration:underline;
}