/* ==========================================================================
   ATHENA HEIGHTS — CUSTOM OVERRIDE STYLES
   Loaded after bootstrap.min.css and the Realar template (style.css).

   Layout, spacing and display are handled with Bootstrap utilities in the
   HTML. This file only holds component styling and template overrides.
   Breakpoints follow Bootstrap 5: 991.98px (lg), 767.98px (md), 575.98px (sm).

   Contents
   1.  Root variables & global
   2.  Header
   3.  Mega menu (hamburger overlay)
   4.  Breadcrumb
   5.  Home — shared section styles
   6.  Home — intro / stats
   7.  Home — flagship developments
   8.  Home — property management slider
   9.  Home — latest news
   10. Home — explore CTA banner
   11. Home — FAQ
   12. Home — driven by excellence
   13. Testimonials
   14. About — intro, leadership & executive team
   15. About — legacy stats
   16. About — milestone timeline
   17. About — our commitment
   18. About — sustainability slider
   19. Properties page
   20. Property details page
   21. Media Centre & news article
   22. Contact page
   23. Careers page
   24. Property management page
   25. Template section overrides (#team-sec, #about-sec, #testi-sec)
   26. Footer
   27. Global responsive safety rules
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. ROOT VARIABLES & GLOBAL
   -------------------------------------------------------------------------- */
/* Helvetica-style titles on every OS (Nimbus Sans), same as the Asia Siyaka site */
@font-face{
    font-family:'Nimbus Sans';
    src:url('../fonts/NimbusSans-Regular.woff2') format('woff2');
    font-weight:400;
    font-style:normal;
    font-display:swap;
}
@font-face{
    font-family:'Nimbus Sans';
    src:url('../fonts/NimbusSans-Bold.woff2') format('woff2');
    font-weight:700;
    font-style:normal;
    font-display:swap;
}
:root{
    --title-font:'Nimbus Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
    --body-font:'Jost','Futura','Helvetica Neue',Helvetica,Arial,sans-serif;
    --jk-teal:#8ac0cb;
    --jk-navy:#1a2149;
    --jk-gray:#8B8B8B;
    --jk-gold:#c9a24a;
}
body,
p,
a,
li,
span,
input,
textarea,
button{
    font-family:var(--body-font);
}
/* Plain paragraphs: 17px (template default is 16px) */
p,
.accordion-body{
    font-size:17px;
}
h1,h2,h3,h4,h5,h6,
.sec-title,
.box-title,
.hero-title,
.testi-card_name,
.team-desig,
.widget_title{
    font-family:var(--title-font);
}

/* One soft divider colour for the Bootstrap border utilities (.border, .border-bottom ...) */
.border,
.border-top,
.border-bottom,
.border-start,
.border-end{
    border-color:#E8E8E8!important;
}

/* Anchor links (#faq, #leasing ...) stop below the 92px sticky header */
html{
    scroll-padding-top:110px;
}

/* Prevents horizontal scroll without breaking position:sticky */
body{
    overflow-x:clip;
}

/* Pages that still use <body class="bg-light"> */
body.bg-light{
    background-color:var(--white-color)!important;
}

/* Template extras not used in this design */
.preloader,
.cursor-follower,
.slider-drag-cursor{
    display:none!important;
}

.reveal-up{
    opacity:0;
    transform:translateY(40px);
    transition:opacity .8s ease, transform .8s ease;
}
.reveal-up.in-view{
    opacity:1;
    transform:translateY(0);
}


/* --------------------------------------------------------------------------
   2. HEADER
   -------------------------------------------------------------------------- */
.header-default{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    z-index:99;
    background:transparent;
}
.header-default .menu-area{
    display:flex;
    align-items:center;
    min-height:32px;
    padding-top:0;
    padding-bottom:0;
}
.header-default .main-menu>ul>li>a{
    color:#fff;
}
.header-default .main-menu .sub-menu li a{
    color:var(--title-color);
}
.header-default .header-button .th-btn{
    min-width:auto;
    padding:12px 20px;
    font-size:14px;
}

/* Logos */
.mobile-logo img,
.about-logo img{
    width:auto;
    height:auto;
    max-width:170px;
}
.header-logo{
    margin-left:96px;
}
.header-logo .logo-default{
    max-width:200px!important;
    margin-top:-42px;
}
.header-logo .logo-sticky{
    display:none;
    width:auto;
    height:auto;
    max-width:320px!important;
    max-height:180px!important;
}
.sticky-wrapper.sticky .header-logo .logo-default{
    display:none;
}
.sticky-wrapper.sticky .header-logo .logo-sticky{
    display:inline-block;
}
.sticky-wrapper.sticky .header-logo{
    margin-left:78px!important;
}

/* Non-sticky layout: menu left, logo centre, button right */
.sticky-wrapper:not(.sticky) .menu-area .row{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center;
    width:100%;
}
.sticky-wrapper:not(.sticky) .menu-area .row>.col-auto:nth-child(1){
    order:2;
    flex:0 0 auto;
    margin:0 auto;
}
.sticky-wrapper:not(.sticky) .menu-area .row>.col-auto:nth-child(2){
    order:1;
    flex:1 1 0;
    display:flex!important;
    justify-content:flex-start;
}
.sticky-wrapper:not(.sticky) .menu-area .row>.col-auto:nth-child(3){
    order:3;
    flex:1 1 0;
    display:flex!important;
    justify-content:flex-end;
}
.sticky-wrapper:not(.sticky) .header-logo{
    margin-left:0;
}

/* Sticky bar */
.sticky-wrapper.sticky .menu-area{
    display:flex;
    align-items:center;
    height:92px;
    min-height:92px;
    max-height:92px;
    padding-top:0;
    padding-bottom:0;
}
/* Clip the sticky logo's transparent padding here, not on .menu-area,
   so the nav dropdowns can open below the bar */
.sticky-wrapper.sticky .header-logo{
    display:flex;
    align-items:center;
    height:92px;
    overflow:hidden;
}
/* Smaller than the 92px bar so the logo gets space above and below */
.sticky-wrapper.sticky .header-logo .logo-sticky{
    max-height:150px!important;
}
.sticky-wrapper.sticky .menu-area .row{
    position:relative;
    flex:1 1 auto;
    width:100%;
    justify-content:flex-start!important;
}
/* Keep the nav and button pinned to the right, however many menu items there are */
.sticky-wrapper.sticky .menu-area .row>.col-auto:nth-child(2){
    margin-left:auto;
}

/* Hamburger */
.jkp-header-left{
    display:flex!important;
    align-items:center;
    margin-left:60px;
}
.jkp-header-hamburger{
    display:inline-flex!important;
    flex-direction:column;
    justify-content:space-between;
    width:24px;
    height:18px;
    margin-right:36px;
    padding:0!important;
    border:none!important;
    background:none!important;
    cursor:pointer;
}
.jkp-header-hamburger .line{
    display:block!important;
    width:100%!important;
    height:2px!important;
    border-radius:0;
    background:var(--white-color)!important;
}
.sticky-wrapper.sticky .jkp-header-hamburger{
    position:absolute!important;
    top:50%!important;
    left:24px!important;
    z-index:5;
    width:30px!important;
    margin:0!important;
    transform:translateY(-50%)!important;
}

/* Extra nav items appear only in the sticky bar */
.main-menu>ul>li.nav-extra{
    display:none;
    opacity:0;
    transition:opacity .3s ease;
}
.sticky-wrapper.sticky .main-menu>ul>li.nav-extra{
    display:inline-block;
    opacity:1;
}

@media (max-width:991.98px){
    .header-default .menu-area{
        min-height:72px!important;
        padding-top:12px!important;
        padding-bottom:12px!important;
        overflow:visible!important;
    }
    .sticky-wrapper,
    .sticky-wrapper .menu-area,
    .sticky-wrapper .container,
    .sticky-wrapper .row,
    .sticky-wrapper .col-auto,
    .sticky-wrapper .header-logo{
        overflow:visible!important;
    }

    /* Non-sticky: logo centred absolutely, with room above it */
    .sticky-wrapper:not(.sticky) .menu-area .row{
        position:relative;
        min-height:120px;
        overflow:visible;
    }
    .sticky-wrapper:not(.sticky) .header-logo{
        padding-top:0!important;
        padding-bottom:0!important;
    }
    .sticky-wrapper:not(.sticky) .menu-area .row>.col-auto:nth-child(1){
        position:absolute!important;
        top:50%!important;
        left:50%!important;
        order:0!important;
        margin:0!important;
        transform:translate(-50%,-50%)!important;
    }
    .sticky-wrapper:not(.sticky) .header-logo .logo-default{
        max-width:130px!important;
        margin-top:0!important;
    }

    /* Sticky: logo centred, transparent padding of the image is clipped */
    .sticky-wrapper.sticky .menu-area .row{
        flex:1 1 auto;
    }
    .sticky-wrapper.sticky .menu-area .row>.col-auto:nth-child(1){
        position:absolute!important;
        top:50%!important;
        left:50%!important;
        z-index:4;
        margin:0!important;
        transform:translate(-50%,-50%)!important;
    }
    .sticky-wrapper.sticky .menu-area .header-logo{
        margin-left:0!important;
    }
    .sticky-wrapper.sticky .header-logo .logo-sticky{
        width:auto!important;
        height:115px!important;
        max-width:none!important;
        max-height:none!important;
    }
}
@media (max-width:575.98px){
    .sticky-wrapper.sticky .header-logo .logo-sticky{
        height:100px!important;
    }
}


/* --------------------------------------------------------------------------
   3. MEGA MENU (hamburger overlay, shared by every page)
   -------------------------------------------------------------------------- */
.th-menu-wrapper .th-menu-area{
    top:-100%;
    left:0!important;
    width:100%!important;
    max-width:100%!important;
    border-right:none!important;
    transition:all ease .6s!important;
}
.th-menu-wrapper.th-body-visible .th-menu-area{
    top:0!important;
}
.th-menu-wrapper .th-menu-area.jkp-mega-menu{
    display:flex;
    flex-direction:column;
    height:100vh;
    height:100dvh;
    max-height:100dvh;
    margin:0;
    padding:0!important;
    overflow-y:auto;
    text-align:left;
    background:var(--white-color);
}

/* Top bar */
.jkp-mega-topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 50px;
    border-bottom:1px solid #eee;
}
.jkp-mega-close{
    position:static!important;
    border:none;
    background:transparent;
    font-size:20px;
    color:var(--jk-navy);
    cursor:pointer;
}
.jkp-mega-logo{
    margin:0;
    padding:0!important;
    background:none!important;
    text-align:left!important;
}
.jkp-mega-logo img{
    width:auto;
    height:auto;
    max-width:300px;
    max-height:120px;
    object-fit:contain;
}
.jkp-mega-cta{
    padding:14px 28px;
    border:none;
    border-radius:50px;
    font-size:13px;
    background:var(--jk-navy)!important;
    color:var(--white-color)!important;
}
.jkp-mega-cta:hover{
    background:var(--jk-teal)!important;
    color:var(--jk-navy)!important;
}

/* Body: link columns + featured property */
.jkp-mega-body{
    display:flex;
    flex-wrap:wrap;
    flex:0 0 auto;
    align-items:flex-start;
    gap:50px;
    padding:30px 60px;
}
.jkp-mega-columns{
    flex:1 1 600px;
}
.jkp-mega-col-title{
    display:block;
    margin-bottom:18px;
    font-size:14px;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
    color:var(--jk-navy);
}
.jkp-mega-col ul{
    margin:0;
    padding:0;
    list-style:none;
}
.jkp-mega-col ul li{
    margin-bottom:12px;
}
.jkp-mega-col ul li a{
    font-size:16px;
    font-weight:400;
    text-transform:capitalize;
    color:#3a3f5c;
}
.jkp-mega-col ul li a:hover{
    color:var(--jk-teal);
}

/* Featured property slider */
.jkp-mega-feature{
    flex:0 0 640px;
    max-width:640px;
}
.jkp-mega-feature-slider{
    position:relative;
    margin-bottom:16px;
}
/* Swiper autoHeight measures before web fonts load and clips the CTA row */
#megaFeatureSlider .swiper-wrapper{
    height:auto!important;
}
.jkp-mega-feature-img{
    position:relative;
    display:block;
    overflow:hidden;
    border-radius:10px;
}
.jkp-mega-feature-img::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:55%;
    background:linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0));
    pointer-events:none;
}
.jkp-mega-feature-img img{
    display:block;
    width:100%;
    height:340px;
    object-fit:cover;
}
.jkp-mega-feature-badge{
    position:absolute;
    top:16px;
    left:16px;
    padding:6px 14px;
    border-radius:50px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
    background:#fff;
    color:var(--jk-navy);
}
.jkp-mega-feature-title{
    position:absolute;
    left:22px;
    bottom:16px;
    z-index:1;
    font-family:var(--title-font);
    font-size:22px;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
    color:var(--white-color);
}
.jkp-mega-feature-nav{
    position:absolute;
    top:50%;
    left:-52px;
    right:-52px;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    transform:translateY(-50%);
    pointer-events:none;
}
.jkp-mega-feature-nav button{
    width:auto;
    height:auto;
    border:none;
    background:none;
    line-height:1;
    font-size:26px!important;
    color:var(--jk-navy)!important;
    opacity:1!important;
    cursor:pointer;
    pointer-events:auto;
}
.jkp-mega-feature-nav button:hover{
    color:var(--jk-teal)!important;
}
.jkp-mega-feature-nav button i{
    font-size:inherit!important;
    color:inherit!important;
}
.jkp-mega-feature-info{
    margin-top:16px;
}
.jkp-mega-feature-label{
    display:block;
    margin-bottom:6px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
    color:var(--jk-gray);
}
.jkp-mega-feature-price{
    margin-bottom:12px;
    font-family:var(--title-font);
    font-size:20px;
    font-weight:700;
    color:var(--jk-navy);
}
.jkp-mega-feature-price span{
    margin-left:6px;
    font-size:12px;
    font-weight:600;
    text-transform:uppercase;
    color:var(--jk-gray);
}
.jkp-mega-feature-desc{
    margin-bottom:12px;
    font-size:14px;
    line-height:1.6em;
    color:var(--body-color);
}
.jkp-mega-feature-ctas{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:24px;
}
.jkp-mega-feature-ctas .th-btn.style-border{
    padding:13px 26px;
    border-radius:50px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.6px;
    text-transform:uppercase;
    background:var(--jk-navy)!important;
    border-color:var(--jk-navy)!important;
    color:#fff!important;
}
.jkp-mega-feature-ctas .th-btn.style-border:hover{
    background:var(--jk-teal)!important;
    border-color:var(--jk-teal)!important;
    color:var(--jk-navy)!important;
}
.jkp-mega-feature-ctas .jkp-flagship-link{
    padding-bottom:3px;
}

/* Social icons */
.jkp-mega-social{
    display:flex;
    gap:14px;
    padding:16px 50px;
}
.jkp-mega-social a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border:1px solid #d9dbe3;
    border-radius:50%;
    background:transparent;
    color:var(--jk-navy);
}
.jkp-mega-social a:hover{
    background:var(--jk-navy);
    border-color:var(--jk-navy);
    color:#fff;
}

@media (min-width:992px){
    .jkp-mega-topbar{
        padding:16px 60px;
    }
    .jkp-mega-logo img{
        max-height:70px;
    }
    .jkp-mega-body{
        padding:36px 60px 32px;
    }
    .jkp-mega-feature-img img{
        height:36vh;
        min-height:220px;
        max-height:360px;
    }
    .jkp-mega-feature-info{
        margin-top:18px;
    }
    .jkp-mega-feature-price{
        margin-bottom:10px;
        font-size:24px;
    }
    .jkp-mega-feature-desc{
        margin-bottom:18px;
        font-size:15px;
    }
    .jkp-mega-social{
        padding:0 60px 32px;
    }
}
/* Wide screens: social icons sit beside the CTA row, under the link columns */
@media (min-width:1400px){
    .jkp-mega-social{
        margin-top:-80px;
    }
}
@media (max-width:767.98px){
    .jkp-mega-topbar{
        padding:14px 20px;
    }
    .jkp-mega-logo img{
        max-width:240px;
        max-height:44px;
    }
    .jkp-mega-cta{
        padding:10px 16px;
        font-size:11px;
        white-space:nowrap;
    }
    .jkp-mega-body{
        flex-direction:column;
        gap:24px;
        padding:22px 20px 24px;
    }
    .jkp-mega-columns{
        align-self:stretch;
        flex:0 0 auto;
        --bs-gutter-y:20px;
    }
    .jkp-mega-col-title{
        margin-bottom:12px;
        font-size:13px;
    }
    .jkp-mega-col ul li{
        margin-bottom:10px;
    }
    .jkp-mega-col ul li a{
        font-size:15px;
    }
    .jkp-mega-feature{
        flex:0 0 auto;
        width:100%;
        max-width:100%;
    }
    .jkp-mega-feature-slider{
        margin-bottom:0;
    }
    .jkp-mega-feature-img img{
        height:180px;
    }
    .jkp-mega-feature-title{
        left:16px;
        font-size:18px;
    }
    .jkp-mega-feature-nav{
        top:90px;
        left:8px;
        right:8px;
    }
    .jkp-mega-feature-nav button{
        display:flex;
        align-items:center;
        justify-content:center;
        width:36px;
        height:36px;
        border-radius:50%;
        font-size:18px!important;
        background:rgba(255,255,255,.85)!important;
    }
    .jkp-mega-feature-info{
        margin-top:14px;
    }
    .jkp-mega-feature-price{
        font-size:18px;
    }
    .jkp-mega-feature-desc{
        display:none;
    }
    .jkp-mega-feature-ctas{
        gap:18px;
    }
    .jkp-mega-feature-ctas .th-btn.style-border{
        padding:11px 20px;
        font-size:11px;
    }
    .jkp-mega-social{
        justify-content:center;
        gap:12px;
        position:sticky;
        bottom:0;
        z-index:3;
        margin-top:auto;
        padding:18px 20px calc(18px + env(safe-area-inset-bottom));
        border-top:1px solid #eee;
        background:var(--white-color);
    }
    .jkp-mega-social a{
        width:40px;
        height:40px;
    }
}


/* --------------------------------------------------------------------------
   4. BREADCRUMB
   -------------------------------------------------------------------------- */
.breadcumb-wrapper{
    display:flex;
    align-items:center;
    min-height:100vh;
}
.breadcumb-wrapper:after{
    opacity:.6;
}
.breadcumb-title,
.breadcumb-menu,
.breadcumb-menu li,
.breadcumb-menu a{
    text-shadow:0 2px 12px rgba(0,0,0,.55);
}
@media (max-width:991.98px){
    .breadcumb-wrapper{
        min-height:60vh;
    }
}
@media (max-width:767.98px){
    .breadcumb-title{
        font-size:32px;
    }
}
@media (max-width:575.98px){
    .breadcumb-wrapper{
        min-height:45vh;
    }
    .breadcumb-title{
        font-size:26px;
    }
}


/* --------------------------------------------------------------------------
   5. HOME — SHARED SECTION STYLES
   Layout, flex, spacing, positioning, uppercase and bold text are Bootstrap
   utilities in index.html. These classes only hold the brand look.
   -------------------------------------------------------------------------- */
:root{
    --home-sec-space:50px;
}
.jkp-home-sec{
    padding-top:var(--home-sec-space);
    padding-bottom:var(--home-sec-space);
    background:var(--white-color);
}

/* Small uppercase label above a title */
.jkp-label{
    font-size:13px;
    font-weight:700;
    letter-spacing:1.5px;
    color:var(--jk-gray);
}
.jkp-label-sm{
    font-size:12px;
    letter-spacing:.5px;
}

/* Section titles */
.jkp-title{
    font-family:var(--title-font);
    font-size:40px;
    font-weight:700;
    line-height:1.2;
    color:var(--jk-navy);
}
.jkp-title-xl{
    font-size:40px;
    line-height:1.2;
}

/* Body copy, stat numbers and small meta text */
.jkp-copy{
    font-size:17px;
    line-height:1.8em;
    color:var(--body-color);
}
.jkp-stat-num{
    font-family:var(--title-font);
    font-size:34px;
    font-weight:700;
    line-height:1.2;
    color:var(--jk-navy);
}
.jkp-meta{
    font-size:13px;
    font-weight:600;
    letter-spacing:.4px;
    color:var(--jk-gray);
}

/* Navy pill button (white version for dark backgrounds) */
.jkp-btn-pill{
    padding:16px 32px;
    border:none;
    font-size:14px;
    font-weight:700;
    letter-spacing:.5px;
    background:var(--jk-navy);
    color:var(--white-color)!important;
}
.jkp-btn-pill:hover{
    background:var(--jk-teal);
    color:var(--jk-navy)!important;
}
.jkp-btn-pill-light{
    background:var(--white-color);
    color:var(--jk-navy)!important;
}

/* Slider controls: round arrows + progress line (featured properties, news) */
.jkp-scroll-arrow{
    width:48px;
    height:48px;
    border:1px solid rgba(28,45,55,.25);
    background:transparent;
    color:var(--title-color);
    cursor:pointer;
    transition:.3s;
}
.jkp-scroll-arrow:hover{
    border-color:var(--theme-color);
    background:var(--theme-color);
    color:var(--white-color);
}
.jkp-scroll-progress{
    height:2px;
    background:rgba(28,45,55,.15);
}
.jkp-scroll-progress span{
    width:15%;
    background:var(--title-color);
    transition:.3s;
}

@media (max-width:991.98px){
    :root{
        --home-sec-space:40px;
    }
    .jkp-title,
    .jkp-title-xl{
        font-size:32px;
    }
}
@media (max-width:767.98px){
    .jkp-title,
    .jkp-title-xl{
        font-size:28px;
    }
}


/* --------------------------------------------------------------------------
   6. HOME — INTRO / STATS (jkp-intro-*)
   -------------------------------------------------------------------------- */
.jkp-intro-copy{
    max-width:560px;
}


/* --------------------------------------------------------------------------
   7. HOME — FLAGSHIP DEVELOPMENTS (jkp-flagship-*)
   -------------------------------------------------------------------------- */
.jkp-flagship-sec{
    background-color:var(--smoke-color4);
}
.jkp-flagship-copy{
    max-width:760px;
}
.jkp-flagship-img img{
    height:420px;
    object-fit:cover;
    transition:.4s;
}
.jkp-flagship-card:hover .jkp-flagship-img img{
    transform:scale(1.04);
}
.jkp-flagship-img::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 45%);
}
.jkp-flagship-badges,
.jkp-flagship-title{
    z-index:2;
}
.jkp-flagship-badge{
    padding:8px 18px;
    font-size:12px;
    letter-spacing:.4px;
}
.jkp-flagship-badge-dark{
    background:var(--jk-navy);
    color:var(--white-color);
}
.jkp-flagship-badge-light{
    background:var(--white-color);
    color:var(--jk-navy);
}
.jkp-flagship-title{
    font-size:22px;
    text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.jkp-flagship-price{
    font-family:var(--title-font);
    font-size:26px;
    font-weight:700;
    color:var(--jk-navy);
}
.jkp-flagship-desc{
    font-size:16px;
    line-height:1.75em;
    color:var(--body-color);
}
.jkp-flagship-sec .th-btn.style-border{
    border-color:var(--jk-navy)!important;
    color:var(--jk-navy)!important;
}
.jkp-flagship-sec .th-btn.style-border.th-btn-icon:after{
    background-image:none!important;
    -webkit-mask-image:url(../img/icon/arrow-right.svg)!important;
    mask-image:url(../img/icon/arrow-right.svg)!important;
    -webkit-mask-size:100% 100%!important;
    mask-size:100% 100%!important;
    -webkit-mask-repeat:no-repeat!important;
    mask-repeat:no-repeat!important;
    background-color:var(--jk-navy)!important;
    -webkit-filter:none!important;
    filter:none!important;
}
.jkp-flagship-sec .th-btn.style-border:hover{
    background:var(--jk-navy)!important;
    color:var(--white-color)!important;
}
.jkp-flagship-sec .th-btn.style-border:hover.th-btn-icon:after{
    background-color:var(--white-color)!important;
    -webkit-filter:none!important;
    filter:none!important;
}
/* Underlined text link (also used in the mega menu on every page) */
.jkp-flagship-link{
    padding-bottom:2px;
    border-bottom:1px solid var(--jk-navy);
    font-size:14px;
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
    color:var(--jk-navy);
}
.jkp-flagship-link:hover{
    border-color:var(--jk-teal);
    color:var(--jk-teal);
}
@media (max-width:767.98px){
    .jkp-flagship-img img{
        height:260px;
    }
}


/* --------------------------------------------------------------------------
   8. HOME — PROPERTY MANAGEMENT SLIDER (jkp-pm-*)
   Text left / slider right from lg up, stacked below (flex-column flex-lg-row).
   -------------------------------------------------------------------------- */
.jkp-pm-row{
    min-height:640px;
}
.jkp-pm-text{
    padding:60px 30px;
    background:var(--white-color);
}
.jkp-pm-media{
    min-height:420px;
}
.jkp-pm-media .swiper-wrapper{
    height:100%;
}
.jkp-pm-slide{
    background-size:cover;
    background-position:center;
}
.jkp-pm-slide::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 45%);
}
.jkp-pm-slide-content{
    left:90px;
    right:90px;
    bottom:50px;
    z-index:2;
    max-width:460px;
}
.jkp-pm-slide-title{
    font-family:var(--title-font);
    font-size:24px;
    text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.jkp-pm-slide-link{
    padding-bottom:2px;
    border-bottom:1px solid var(--white-color);
    font-size:14px;
    letter-spacing:.4px;
}
.jkp-pm-slide-link:hover{
    border-color:var(--jk-teal);
    color:var(--jk-teal)!important;
}
.jkp-pm-nav{
    z-index:3;
    padding:0 45px;
    pointer-events:none;
}
.jkp-pm-arrow{
    border:none;
    background:transparent;
    font-size:20px;
    text-shadow:0 2px 8px rgba(0,0,0,.5);
    color:var(--white-color);
    cursor:pointer;
    pointer-events:auto;
    transition:.3s;
}
.jkp-pm-arrow:hover{
    color:var(--jk-teal);
}
@media (min-width:992px){
    .jkp-pm-text{
        flex:0 0 55%;
        max-width:55%;
        padding:80px 90px 80px 140px;
    }
    .jkp-pm-media{
        min-height:640px;
    }
}
@media (max-width:575.98px){
    .jkp-pm-text{
        padding:50px 24px;
    }
    .jkp-pm-slide-content{
        left:24px;
        right:24px;
        bottom:32px;
    }
}


/* --------------------------------------------------------------------------
   9. HOME — LATEST NEWS (jkp-news-*)
   -------------------------------------------------------------------------- */
.jkp-news-img img{
    height:220px;
    object-fit:cover;
    transition:transform .4s ease;
}
.jkp-news-card:hover .jkp-news-img img{
    transform:scale(1.06);
}
.jkp-news-title{
    min-height:56px;
    font-size:20px;
    line-height:1.4;
}
.jkp-news-title a{
    color:var(--jk-navy);
}
.jkp-news-link{
    font-size:14px;
    font-weight:600;
    letter-spacing:.5px;
    text-decoration:underline;
    text-underline-offset:4px;
    color:var(--jk-navy);
}


/* --------------------------------------------------------------------------
   10. HOME — EXPLORE CTA BANNER (jkp-cta-*)
   -------------------------------------------------------------------------- */
.jkp-cta-sec{
    margin-top:var(--home-sec-space);
    padding:90px 0;
    background-size:cover;
    background-position:center;
}
/* ::after so the ::before layer is free for the parallax photo */
.jkp-cta-sec::after{
    content:'';
    position:absolute;
    inset:0;
    background:rgba(15,20,45,.55);
}
.jkp-cta-inner{
    z-index:1;
    max-width:980px;
}
.jkp-cta-title{
    font-size:32px;
    line-height:1.4;
}
@media (max-width:767.98px){
    .jkp-cta-title{
        font-size:24px;
    }
}


/* --------------------------------------------------------------------------
   11. HOME — FAQ (jkp-faq-*)
   Native <details>/<summary>, so no JavaScript is needed.
   -------------------------------------------------------------------------- */
.jkp-faq-q{
    padding-right:30px;
    list-style:none;
    font-size:17px;
    font-weight:600;
    color:var(--jk-navy);
    cursor:pointer;
}
.jkp-faq-q::-webkit-details-marker{
    display:none;
}
.jkp-faq-q::after{
    content:'+';
    position:absolute;
    top:0;
    right:0;
    font-size:22px;
    font-weight:400;
    color:var(--jk-navy);
}
.jkp-faq-item[open] .jkp-faq-q::after{
    content:'\2212';
}
.jkp-faq-a{
    font-size:16px;
    line-height:1.8em;
    color:var(--body-color);
}


/* --------------------------------------------------------------------------
   12. HOME — DRIVEN BY EXCELLENCE (jkp-excellence-*)
   -------------------------------------------------------------------------- */
.jkp-excellence-img{
    min-height:420px;
}
.jkp-excellence-img img{
    object-fit:cover;
}
.jkp-excellence-img2 img{
    height:280px;
    object-fit:cover;
}
.jkp-excellence-stats{
    padding:30px 40px;
    background:rgba(15,20,45,.75);
}
.jkp-excellence-stat{
    border-bottom:1px solid rgba(255,255,255,.2);
}
.jkp-excellence-stat:last-child{
    padding-bottom:0!important;
    border-bottom:none;
}
.jkp-excellence-stat .jkp-stat-num{
    font-size:30px;
}
.jkp-excellence-stat .jkp-meta{
    color:rgba(255,255,255,.75);
}
@media (max-width:991.98px){
    .jkp-excellence-img img{
        height:400px!important;
    }
}


/* --------------------------------------------------------------------------
   13. TESTIMONIALS — COMPACT CARD
   -------------------------------------------------------------------------- */
.testi-card.style2{
    margin-left:-180px!important;
    padding:14px!important;
}
.testi-card.style2 .testi-card_text{
    margin-top:6px!important;
    padding-bottom:10px!important;
    font-size:12px!important;
    line-height:1.5em!important;
}
.testi-card.style2 .testi-card_profile{
    padding-top:10px!important;
}
.testi-card.style2 .avatar img{
    width:36px!important;
    height:36px!important;
}
.testi-card.style2 .testi-card_name{
    margin-bottom:1px!important;
    font-size:14px!important;
}
.testi-card.style2 .testi-card_desig{
    font-size:11px!important;
}
.testi-card.style2 .testi-card_profile .quote-icon img{
    width:22px!important;
}
.testi-grid_review i{
    font-size:12px!important;
}


/* --------------------------------------------------------------------------
   14. ABOUT — INTRO, LEADERSHIP & EXECUTIVE TEAM
   Section spacing (.jkp-home-sec), display, margins, borders, uppercase and
   bold text are Bootstrap utilities in about.html. Only the brand look is here.
   -------------------------------------------------------------------------- */
.jkp-leadership-title{
    font-size:14px;
    font-weight:600;
    letter-spacing:.4px;
    color:var(--body-color);
}
.jkp-exec-img img{
    height:320px;
    object-fit:cover;
    object-position:top center;
    transition:transform .4s ease;
}
.jkp-exec-card:hover .jkp-exec-img img{
    transform:scale(1.08);
}
.jkp-exec-name{
    font-size:17px;
    color:var(--title-color);
}
.jkp-exec-role{
    font-size:12px;
    font-weight:600;
    letter-spacing:.3px;
    line-height:1.5em;
    color:var(--body-color);
}

@media (max-width:767.98px){
    .jkp-about-intro-title{
        font-size:26px!important;
    }
    .jkp-leadership-name{
        font-size:24px!important;
    }
    .jkp-leadership-bio{
        font-size:15px;
    }
    .jkp-exec-name{
        font-size:16px;
    }
}


/* --------------------------------------------------------------------------
   15. ABOUT — LEGACY STATS (jkp-legacy-*)
   Number and label reuse .jkp-stat-num / .jkp-meta from section 5.
   -------------------------------------------------------------------------- */
.jkp-legacy-stat-num{
    font-size:28px;
}
.jkp-legacy-stat-label{
    color:var(--body-color);
}
@media (max-width:767.98px){
    .jkp-legacy-heading{
        font-size:26px;
    }
    .jkp-legacy-stat-num{
        font-size:22px;
    }
}


/* --------------------------------------------------------------------------
   16. ABOUT — MILESTONE TIMELINE (pinned scroll, jkp-timeline-*)
   Position, flex layout, round shapes and text utilities are Bootstrap
   classes in about.html. Opacity, transform and card colour are set by the
   timeline script, so they stay here. dvh keeps the pin correct when the
   mobile address bar shows/hides.
   -------------------------------------------------------------------------- */
.jkp-timeline-bg-pin{
    z-index:0;
    height:100vh;
    height:100dvh;
    background:#000;
}
.jkp-timeline-bg{
    background-size:cover;
    background-position:center;
    opacity:0;
    transition:opacity 1s ease;
}
.jkp-timeline-bg.active{
    opacity:1;
}
.jkp-timeline-overlay{
    z-index:1;
    background:rgba(10,15,35,.5);
}
.jkp-timeline-watermark{
    right:60px;
    bottom:60px;
    z-index:2;
    max-width:420px;
    font-family:var(--title-font);
    font-size:44px;
    letter-spacing:1px;
    line-height:1.2;
    color:rgba(255,255,255,.12);
    pointer-events:none;
}
.jkp-timeline-rows{
    z-index:2;
    overflow-x:clip;
    margin-top:-100vh;
    margin-top:-100dvh;
}
.jkp-timeline-row{
    gap:64px;
    max-width:1140px;
    height:65vh;
    padding:0 32px;
    opacity:0;
}
.jkp-timeline-rail{
    padding-left:6px;
}
.jkp-timeline-rail-line{
    left:0;
    width:1px;
    background:rgba(255,255,255,.2);
}
.jkp-timeline-dot{
    width:9px;
    height:9px;
    margin-left:-4.5px;
    margin-right:20px;
    background:rgba(255,255,255,.45);
    transition:background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.jkp-timeline-row.active .jkp-timeline-dot{
    background:#fff;
    box-shadow:0 0 0 3px rgba(255,255,255,.25);
    transform:scale(1.3);
}
.jkp-timeline-rail-year{
    font-family:var(--title-font);
    font-size:34px;
    letter-spacing:.5px;
    color:rgba(255,255,255,.4);
    transition:color .3s ease;
}
.jkp-timeline-row.active .jkp-timeline-rail-year{
    color:#fff;
}
.jkp-timeline-card{
    flex:1 1 auto;
    max-width:460px;
    padding:32px 36px;
    background:#fff;
    box-shadow:0 20px 45px rgba(0,0,0,.18);
    will-change:transform, background-color;
}
.jkp-timeline-year{
    font-family:var(--title-font);
    font-size:13px;
    letter-spacing:1px;
    color:var(--jk-teal);
}
.jkp-timeline-title{
    margin-bottom:12px;
    font-size:21px;
    line-height:1.3;
    color:var(--jk-navy);
}
.jkp-timeline-text{
    font-size:14.5px;
    line-height:1.7em;
    color:var(--body-color);
}

/* Skip section buttons (hidden below md via d-none d-md-block) */
.jkp-timeline-skip-wrap{
    z-index:5;
    height:100vh;
    height:100dvh;
    margin-top:-100vh;
    margin-top:-100dvh;
    pointer-events:none;
}
.jkp-timeline-skip{
    right:40px;
    pointer-events:auto;
}
.jkp-timeline-skip-btn{
    width:38px;
    height:38px;
    background:rgba(255,255,255,.12);
    font-size:13px;
    color:#fff;
    cursor:pointer;
    transition:.3s;
}
.jkp-timeline-skip-btn:hover{
    background:rgba(255,255,255,.25);
}
.jkp-timeline-skip-label{
    writing-mode:vertical-rl;
    font-size:12px;
    font-weight:600;
    letter-spacing:2px;
    color:#fff;
}

/* Desktop: first milestone is always visible */
@media (min-width:992px){
    .jkp-timeline-row:first-child{
        opacity:1!important;
    }
    .jkp-timeline-row:first-child .jkp-timeline-card{
        background:#fff!important;
        transform:none!important;
    }
}
/* Mobile/tablet: year rail on the left, one milestone per screen */
@media (max-width:991.98px){
    .jkp-timeline-rows{
        padding:20vh 0;
        padding:20svh 0;
    }
    .jkp-timeline-row{
        gap:16px;
        height:60vh;
        height:60svh;
        padding:0 16px;
    }
    .jkp-timeline-rail{
        flex:0 0 90px;
        flex-direction:row-reverse;
        width:90px;
        padding-left:0;
    }
    .jkp-timeline-rail-line{
        left:auto;
        right:4px;
    }
    .jkp-timeline-dot{
        margin:0 0 0 10px;
    }
    .jkp-timeline-rail-year{
        font-size:24px;
    }
    .jkp-timeline-card{
        flex:1 1 0;
        min-width:0;
        max-width:none;
        padding:22px 20px;
    }
    .jkp-timeline-watermark{
        display:none;
    }
}
@media (max-width:575.98px){
    .jkp-timeline-title{
        font-size:18px;
    }
    .jkp-timeline-text{
        font-size:14px;
        text-align:left;
    }
}


/* --------------------------------------------------------------------------
   17. ABOUT — OUR COMMITMENT (jkp-commitment-*)
   Heading and copy reuse .jkp-title / .jkp-copy (site title scale); item flex layout, padding
   and dividers are Bootstrap utilities in about.html.
   -------------------------------------------------------------------------- */
.jkp-commitment-copy{
    max-width:460px;
}
.jkp-commitment-list{
    max-width:420px;
}
.jkp-commitment-icon{
    width:44px;
    color:var(--jk-navy);
}
.jkp-commitment-text{
    max-width:300px;
    font-size:17px;
    line-height:1.4em;
    color:var(--jk-navy);
}
@media (max-width:991.98px){
    .jkp-commitment-copy{
        max-width:100%;
    }
}
@media (max-width:767.98px){
    .jkp-commitment-list{
        max-width:100%;
    }
}


/* --------------------------------------------------------------------------
   18. ABOUT — SUSTAINABILITY SLIDER (jkp-sustain-*)
   Heading and copy reuse .jkp-title / .jkp-copy; positioning, flex centring
   and the round arrow shape are Bootstrap utilities in about.html.
   -------------------------------------------------------------------------- */
.jkp-sustain-content{
    max-width:640px;
}
.jkp-sustain-slider-wrap{
    max-width:1400px;
    padding:0 70px;
}
.jkp-sustain-slide-img img{
    height:340px;
    object-fit:cover;
}
.jkp-sustain-slide-cap{
    font-family:var(--title-font);
    text-align:left;
    font-size:16px;
    line-height:1.4;
    color:var(--jk-navy);
}
.jkp-sustain-arrow{
    top:170px;
    z-index:3;
    width:44px;
    height:44px;
    cursor:pointer;
}
@media (max-width:991.98px){
    .jkp-sustain-slider-wrap{
        padding:0 50px;
    }
    .jkp-sustain-arrow{
        top:140px;
        width:38px;
        height:38px;
    }
    .jkp-sustain-slide-img img{
        height:260px;
    }
}
/* Arrows are hidden below md (d-none d-md-flex), so no side padding needed */
@media (max-width:767.98px){
    .jkp-sustain-slider-wrap{
        padding:0 16px;
    }
    .jkp-sustain-slide-img img{
        height:220px;
    }
}

/* About — justified body copy */
.jkp-about-intro-sec p,
.jkp-legacy-copy,
.jkp-sustain-copy{
    text-align:justify;
    text-align-last:center;
}
.jkp-leadership-bio,
.jkp-commitment-copy,
.jkp-timeline-text{
    text-align:justify;
}


/* --------------------------------------------------------------------------
   19. PROPERTIES PAGE (property.html — jkp-card, jkp-mini, jkp-slider)
   Intro reuses .jkp-label / .jkp-title / .jkp-lead; buttons and links reuse
   .jkp-btn-pill / .jkp-flagship-link. Position, flex layout, pill shapes,
   uppercase and bold text are Bootstrap utilities in property.html.
   -------------------------------------------------------------------------- */
/* Floor plan tabs on the property details page */
.property-tab .nav-link{
    border-radius:0!important;
}
.tab-content{
    background-color:var(--smoke-color4)!important;
}

/* Intro */
.jkp-intro{
    max-width:760px;
}
.jkp-lead{
    margin-bottom:0;
    font-size:17px;
    line-height:1.8em;
    color:var(--body-color);
    text-align:justify;
    text-align-last:center;
}

/* Large property card (title over the image, open body) */
.jkp-properties > .container{
    max-width:1200px;
}
.jkp-card{
    --jkp-img-h:380px;
}
.jkp-card-img{
    min-width:0;
    height:var(--jkp-img-h);
}
.jkp-card-img::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 45%);
    pointer-events:none;
}
.jkp-card-img img{
    object-fit:cover;
    transition:transform .6s ease;
}
.jkp-card:hover .jkp-card-img img{
    transform:scale(1.04);
}
.jkp-badges{
    top:24px;
    left:28px;
    z-index:2;
}
.jkp-badge{
    padding:6px 14px;
    font-size:10px;
    letter-spacing:.4px;
    line-height:1.4;
}
.jkp-badge-dark{
    background:var(--jk-navy);
    color:var(--white-color);
}
.jkp-badge-light{
    background:var(--white-color);
    color:var(--jk-navy);
}
.jkp-card-body{
    padding:30px 28px 0;
}
/* Title sits on the bottom of the image, whatever its line count */
.jkp-card-title{
    top:var(--jkp-img-h);
    left:28px;
    right:28px;
    z-index:2;
    font-size:22px;
    letter-spacing:.3px;
    line-height:1.2;
    text-shadow:0 2px 12px rgba(0,0,0,.45);
    transform:translateY(calc(-100% - 24px));
}
.jkp-card-title a,
.jkp-card-title a:hover{
    color:var(--white-color);
}
.jkp-price-row{
    gap:2px 8px;
    margin-bottom:18px;
}
.jkp-price-row .jkp-price-label:first-child{
    flex-basis:100%;
}
.jkp-price-label{
    font-size:12px;
    font-weight:500;
    letter-spacing:.3px;
    color:#3a3f5c;
}
.jkp-price{
    font-family:var(--title-font);
    font-size:30px;
    font-weight:600;
    line-height:1.2;
    color:var(--jk-navy);
}
.jkp-card-text{
    max-width:520px;
    margin-bottom:24px;
    font-size:16px;
    line-height:1.8em;
    color:var(--body-color);
}

/* Sub-section heading (Past Projects, Property Management) */
.jkp-section-head{
    margin-top:var(--home-sec-space);
}
.jkp-section-head h3{
    margin:0;
    font-size:13px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--jk-navy);
}
.jkp-past-slider .jkp-mini-body p{
    display:-webkit-box;
    -webkit-line-clamp:5;
    -webkit-box-orient:vertical;
    overflow:hidden;
    text-overflow:ellipsis;
}
/* Small slider card */
.jkp-mini-img{
    min-width:0;
}
.jkp-mini-img::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 55%);
}
.jkp-mini-img img{
    height:220px;
    object-fit:cover;
    transition:.4s;
}
.jkp-mini-card:hover .jkp-mini-img img{
    transform:scale(1.05);
}
.jkp-mini-img .jkp-badge{
    position:absolute;
    top:14px;
    left:14px;
    z-index:1;
}
.jkp-mini-title{
    left:18px;
    right:18px;
    bottom:14px;
    z-index:1;
    font-size:17px;
    text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.jkp-mini-body p{
    margin-bottom:14px;
    font-size:16px;
    line-height:1.7em;
    color:var(--body-color);
}
.jkp-mgmt-slider .jkp-mini-body p{
    display:-webkit-box;
    -webkit-line-clamp:5;
    -webkit-box-orient:vertical;
    overflow:hidden;
    text-overflow:ellipsis;
}
/* Slider wrapper with side arrows (the template's .slider-arrow is reset here) */
.jkp-slider-wrap{
    padding:0 60px;
}
.jkp-slider-wrap.jkp-slider-noarrow{
    padding:0;
}
.jkp-slider-wrap .swiper{
    padding-bottom:4px;
    overflow:hidden;
}
.jkp-slider-wrap .jkp-slider-arrow{
    top:180px!important;
    z-index:5;
    width:48px!important;
    height:48px!important;
    margin:0!important;
    border:1px solid #E8E8E8;
    line-height:48px!important;
    background:var(--white-color);
    color:var(--jk-navy);
    transition:.3s;
}
.jkp-slider-wrap .jkp-slider-arrow:hover{
    border-color:var(--jk-navy);
    background:var(--jk-navy);
    color:var(--white-color);
}
.jkp-slider-wrap .jkp-slider-prev{
    left:0!important;
    right:auto!important;
}
.jkp-slider-wrap .jkp-slider-next{
    left:auto!important;
    right:0!important;
}

@media (max-width:1199.98px){
    .jkp-card{
        --jkp-img-h:340px;
    }
    .jkp-price{
        font-size:26px;
    }
}
@media (max-width:991.98px){
    .jkp-card{
        --jkp-img-h:280px;
    }
    .jkp-badges{
        top:20px;
        left:24px;
    }
    .jkp-card-body{
        padding:28px 24px 0;
    }
    .jkp-card-title{
        left:24px;
        right:24px;
        font-size:19px;
        transform:translateY(calc(-100% - 20px));
    }
    .jkp-price{
        font-size:24px;
    }
}
@media (max-width:767.98px){
    .jkp-card{
        --jkp-img-h:320px;
    }
}
/* Phones: slider arrows move below the cards */
@media (max-width:575.98px){
    .jkp-slider-wrap{
        padding:0 0 60px;
    }
    .jkp-slider-wrap.jkp-slider-noarrow{
        padding:0;
    }
    .jkp-slider-wrap .jkp-slider-arrow{
        top:auto!important;
        bottom:0!important;
    }
    .jkp-slider-wrap .jkp-slider-prev{
        left:calc(50% - 56px)!important;
        right:auto!important;
    }
    .jkp-slider-wrap .jkp-slider-next{
        left:auto!important;
        right:calc(50% - 56px)!important;
    }
    .jkp-card{
        --jkp-img-h:260px;
    }
    .jkp-badges{
        top:16px;
        left:16px;
        gap:6px!important;
    }
    .jkp-badge{
        padding:5px 12px;
    }
    .jkp-card-body{
        padding:22px 4px 0;
    }
    .jkp-card-title{
        left:16px;
        right:16px;
        font-size:18px;
        transform:translateY(calc(-100% - 16px));
    }
    .jkp-price{
        font-size:22px;
    }
    .jkp-mini-img img{
        height:180px;
    }
    .jkp-mini-title{
        font-size:15px;
    }
}


/* --------------------------------------------------------------------------
   20. PROPERTY DETAILS PAGE (property-details.html — jkp-pd-*, jkp-qf-*, map)
   Position, flex layout, round shapes, borders, uppercase and bold text are
   Bootstrap utilities in property-details.html. Map pins, popups and landmark
   cards are built by landmark-map.js and keep their own styles here.
   -------------------------------------------------------------------------- */

/* Hero */
.jkp-pd-hero{
    min-height:100vh;
    min-height:100svh;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}
.jkp-pd-hero-overlay{
    background:linear-gradient(180deg, rgba(26,33,73,.35) 0%, rgba(26,33,73,.55) 55%, rgba(26,33,73,.85) 100%);
}
.jkp-pd-hero .container{
    z-index:2;
}
/* Secondary button under the hero title */
.jkp-pd-hero-pill{
    z-index:2;
    padding:12px 26px;
    border:1px solid rgba(255,255,255,.5);
    font-size:12px;
    letter-spacing:.6px;
    background:rgba(255,255,255,.15);
    color:var(--white-color);
}
.jkp-pd-hero-pill:hover{
    border-color:var(--jk-teal);
    background:var(--jk-teal);
    color:var(--jk-navy);
}
.jkp-pd-hero-title{
    z-index:2;
    max-width:820px;
    font-family:var(--title-font);
    font-size:46px;
    line-height:1.25;
    color:var(--white-color);
}
.jkp-pd-hero-title span{
    color:var(--jk-teal);
}
.jkp-pd-hero-footer{
    z-index:2;
    padding:26px 40px;
}
.jkp-pd-hero-tag-name{
    letter-spacing:.5px;
    line-height:1.3;
}
.jkp-pd-hero-tag-sub{
    font-size:13px;
    color:var(--jk-teal);
}
.jkp-pd-hero-call span{
    font-size:12px;
    color:rgba(255,255,255,.75);
}
.jkp-pd-hero-call a{
    font-size:18px;
    color:var(--white-color);
}
.jkp-pd-hero-call a:hover{
    color:var(--jk-teal);
}

/* Sticky enquiry bar */
.jkp-sticky-cta{
    z-index:999;
    padding:16px;
    opacity:0;
    transform:translateY(130%);
    transition:transform .35s ease, opacity .35s ease;
    pointer-events:none;
}
.jkp-sticky-cta.jkp-sticky-cta-visible{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}
.jkp-sticky-cta-inner{
    gap:20px;
    max-width:1100px;
    padding:8px;
    background:#EDEDE8;
    box-shadow:0 12px 30px rgba(26,33,73,.25);
}
.jkp-sticky-cta-badge{
    padding:10px 16px;
    font-size:11px;
    line-height:1.3;
    background:var(--jk-navy);
    color:var(--white-color);
}
.jkp-sticky-cta-text{
    font-size:15px;
    letter-spacing:.3px;
    color:var(--jk-navy);
}

/* Content section — same spacing as the other pages (--home-sec-space) */

/* Full-width intro (quick facts, why band, split banner) */
.jkp-pd-intro .jkp-why-band,
.jkp-pd-intro .jkp-split-banner{
    margin-bottom:0;
}

/* Quick facts: title tile + 3 x 2 facts grid */
.jkp-quickfacts{
    display:grid;
    grid-template-columns:minmax(220px,300px) repeat(3,1fr);
    background:#F5F5F3;
}
.jkp-qf-tile{
    grid-row:span 2;
    min-height:300px;
    padding:32px;
    background:var(--jk-navy);
}
.jkp-qf-tile-name,
.jkp-qf-tile-sub{
    color:var(--white-color);
}
.jkp-qf-tile-name{
    font-family:var(--title-font);
    font-size:24px;
    letter-spacing:.5px;
    line-height:1.2;
}
.jkp-qf-tile-sub{
    font-size:12px;
    letter-spacing:1px;
    color:var(--jk-teal);
}
.jkp-quickfacts-item{
    gap:10px;
    padding:36px 48px;
}
.jkp-qf-label{
    font-size:12px;
    font-weight:600;
    letter-spacing:.6px;
    line-height:1.4;
    color:var(--jk-gray);
}
.jkp-qf-label i{
    margin-right:6px;
    color:var(--jk-teal);
}
.jkp-qf-value{
    font-family:var(--title-font);
    font-size:20px;
    line-height:1.3;
    color:var(--jk-navy);
}
.jkp-qf-price .jkp-qf-value{
    font-size:30px;
}
@media (max-width:1199.98px){
    .jkp-quickfacts-item{
        padding:28px;
    }
    .jkp-qf-value{
        font-size:17px;
    }
    .jkp-qf-price .jkp-qf-value{
        font-size:24px;
    }
}
@media (max-width:991.98px){
    .jkp-quickfacts{
        grid-template-columns:repeat(2,1fr);
    }
    .jkp-qf-tile{
        grid-column:1 / -1;
        grid-row:auto;
        min-height:150px;
    }
    .jkp-quickfacts-item{
        padding:22px 20px;
    }
    /* Tablet / phone: 2 x 3 grid lines */
    .jkp-quickfacts-item{
        border-left:0;
    }
    .jkp-quickfacts-item:nth-child(odd){
        border-left:1px solid #E2E2DE;
    }
    .jkp-quickfacts-item:nth-child(n+4){
        border-top:1px solid #E2E2DE;
    }
}
@media (max-width:575.98px){
    .jkp-qf-price .jkp-qf-value{
        font-size:20px;
    }
}

/* "Why go anywhere" band and split banner */
.jkp-why-band{
    margin-bottom:40px;
    padding:70px 20px;
    background:var(--jk-teal);
}
.jkp-why-band h2{
    margin-bottom:18px;
    font-family:var(--title-font);
    font-size:32px;
    color:var(--jk-navy);
}
.jkp-why-band p{
    max-width:720px;
    margin:0 auto 26px;
    color:var(--jk-navy);
    opacity:.85;
}
.jkp-why-band-btns .style-white{
    border:1px solid var(--jk-navy);
    background:transparent;
    color:var(--jk-navy);
}
.jkp-split-banner{
    min-height:640px;
    margin-bottom:40px;
}
.jkp-split-banner .jkp-split-text{
    padding:80px 90px;
}
@media (max-width:1199.98px){
    .jkp-split-banner{
        min-height:520px;
    }
    .jkp-split-banner .jkp-split-text{
        padding:60px 50px;
    }
}
@media (max-width:767.98px){
    .jkp-split-banner{
        min-height:0;
    }
}
.jkp-split-img{
    flex:1 1 45%;
    min-height:320px;
    background-size:cover;
    background-position:center;
}
.jkp-split-text{
    flex:1 1 55%;
    padding:50px 60px;
    background:linear-gradient(135deg, #8a744c, #6b5738);
}
.jkp-split-text h2{
    margin-bottom:18px;
    font-family:var(--title-font);
    font-size:28px;
    line-height:1.3;
    color:var(--white-color);
}
.jkp-split-text p{
    color:rgba(255,255,255,.85);
}

/* Amenities list with hover image */
.jkp-amenities-split{
    margin-bottom:20px;
}
.jkp-amenities-list{
    flex:1 1 45%;
    padding:30px;
}
.jkp-amenities-feature-icon{
    width:44px;
    height:44px;
    font-size:18px;
    background:var(--jk-navy);
    color:var(--jk-teal);
}
.jkp-amenities-feature h4{
    font-size:16px;
    color:var(--jk-navy);
}
.jkp-amenities-feature p{
    font-size:14px;
    color:var(--body-color);
}
.jkp-amenities-list li{
    gap:12px;
    padding:10px 0;
    border-bottom:1px dashed #e2e2e2;
    font-size:14px;
    font-weight:600;
    color:var(--jk-navy);
    cursor:pointer;
    transition:padding-left .25s ease, color .25s ease;
}
.jkp-amenities-list li:hover,
.jkp-amenities-list li.jkp-amenity-active{
    padding-left:8px;
    color:var(--jk-teal);
}
.jkp-amenities-list li i{
    width:18px;
    text-align:center;
    color:var(--jk-teal);
}
.jkp-amenities-photo{
    flex:1 1 55%;
    min-height:340px;
    background-size:cover;
    background-position:center;
    transition:opacity .25s ease;
}
/* Phones: photo on top, full-width list below */
@media (max-width:767.98px){
    .jkp-amenities-list,
    .jkp-amenities-photo{
        flex-basis:100%;
    }
    .jkp-amenities-photo{
        order:-1;
        min-height:240px;
    }
    .jkp-amenities-list{
        padding:20px;
    }
    .jkp-amenities-feature p{
        text-align:left;
    }
}

/* Floor plans */
.jkp-floorplan-frame{
    height:520px;
    padding:40px;
}
.jkp-floorplan-frame img{
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}

/* Gallery slider (controls bar under the image) */
.jkp-gallery-slider-wrap{
    margin-bottom:20px;
}
.jkp-gallery-slide{
    height:640px;
}
.jkp-gallery-slide img{
    object-fit:cover;
}
.jkp-gallery-controls{
    gap:28px;
    margin-top:28px;
}
.jkp-gallery-arrow{
    font-size:28px;
    line-height:1;
    color:#555;
    cursor:pointer;
    transition:color .2s ease;
}
.jkp-gallery-arrow:hover{
    color:var(--jk-navy);
}
.jkp-gallery-progress{
    height:1px;
    background:#E2E2E2;
}
.jkp-gallery-progress span{
    position:absolute;
    top:0;
    left:0;
    width:0;
    height:1px;
    background:#555;
    transition:width .4s ease;
}
@media (max-width:575.98px){
    .jkp-gallery-controls{
        gap:16px;
        margin-top:20px;
    }
}

/* Landmark map — "At The Heart of Colombo" (built by landmark-map.js) */
.jkp-map{
    margin-bottom:16px;
    background:#F4F4F1;
}
.jkp-map-canvas{
    z-index:1;
    width:100%;
    height:520px;
    background:#F4F4F1;
    font-family:var(--body-font);
}

/* Full screen (native API, plus a CSS fallback for iPhone Safari) */
.jkp-map:fullscreen{
    border:none;
}
.jkp-map:fullscreen .jkp-map-canvas{
    height:100%;
}
.jkp-map.is-fullscreen{
    position:fixed;
    inset:0;
    z-index:10000;
    margin:0;
    border:none;
}
.jkp-map.is-fullscreen .jkp-map-canvas{
    height:100%;
}
.jkp-map-lock,
.jkp-map-lock body{
    overflow:hidden;
}

/* Controls: rounded white buttons */
.jkp-map .leaflet-top.leaflet-left,
.jkp-map .leaflet-top.leaflet-right{
    margin:14px;
}
.jkp-map .leaflet-top .leaflet-control{
    margin:0 0 10px;
}
.jkp-map .leaflet-bar{
    overflow:hidden;
    border:none;
    border-radius:8px;
    box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.jkp-map .leaflet-bar a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border-bottom:1px solid #EEE;
    border-radius:0!important;
    font:500 20px/1 var(--body-font);
    background:var(--white-color);
    color:#333;
    transition:background .2s ease, color .2s ease;
}
.jkp-map .leaflet-bar a:last-child{
    border-bottom:none;
}
.jkp-map .leaflet-bar a:hover{
    background:#F3F3F3;
    color:var(--jk-navy);
}
.jkp-map .leaflet-bar a.leaflet-disabled{
    background:var(--white-color);
    color:#C8C8C8;
}
.jkp-map-recenter a,
.jkp-map-fullscreen a{
    font-size:15px!important;
}
.jkp-map-toggle{
    display:flex;
    padding:3px;
    border-radius:8px;
    background:var(--white-color);
    box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.jkp-map-toggle button{
    padding:7px 16px;
    border:none;
    border-radius:6px;
    font-size:13px;
    font-weight:500;
    background:transparent;
    color:#444;
    cursor:pointer;
    transition:background .2s ease, color .2s ease;
}
.jkp-map-toggle button.is-active{
    background:var(--jk-navy);
    color:var(--white-color);
}
.jkp-map .leaflet-control-scale-line{
    border:2px solid #333;
    border-top:none;
    font-size:10px;
    background:rgba(255,255,255,.7);
    color:#333;
}
.jkp-map .leaflet-control-attribution{
    padding:2px 8px;
    border-radius:6px 0 0 0;
    font-size:10px;
    background:rgba(255,255,255,.85);
    color:#555;
}
.jkp-map .leaflet-control-attribution a{
    color:#2F6FED;
}

/* Pins: teardrop marker, white inner circle with icon, name label below */
.jkp-pin{
    position:relative;
}
.jkp-pin-wrap{
    position:absolute;
    inset:0;
}
.jkp-pin-shape{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:visible;
    filter:drop-shadow(0 3px 3px rgba(0,0,0,.3));
    transform-origin:50% 100%;
    transition:transform .25s ease;
}
.jkp-pin i{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    font-size:10px;
    line-height:28px;
    text-align:center;
    color:var(--pin-color, var(--jk-navy));
    transform-origin:50% 143%;
    transition:transform .25s ease;
    pointer-events:none;
}
.jkp-pin-label{
    position:absolute;
    top:calc(100% + 2px);
    left:50%;
    font-size:12px;
    font-weight:700;
    line-height:1.2;
    white-space:nowrap;
    color:#222;
    text-shadow:0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
    transform:translateX(-50%);
    pointer-events:none;
    transition:color .25s ease;
}
.jkp-pin-landmark .jkp-pin-label{
    opacity:0;
    transition:opacity .2s ease, color .25s ease;
}
.jkp-map-labels .jkp-pin-landmark .jkp-pin-label,
.jkp-pin-landmark:hover .jkp-pin-label,
.jkp-pin-landmark.is-active .jkp-pin-label{
    opacity:1;
}
.jkp-pin-landmark:hover .jkp-pin-shape,
.jkp-pin-landmark.is-active .jkp-pin-shape,
.jkp-pin-landmark:hover i,
.jkp-pin-landmark.is-active i{
    transform:scale(1.25);
}
.jkp-pin-landmark.is-active .jkp-pin-label{
    color:var(--pin-color);
}

/* Property pin: larger navy pin, gold icon, navy name tag */
.jkp-pin-property i{
    font-size:14px;
    line-height:40px;
    color:var(--jk-gold);
}
.jkp-pin-property .jkp-pin-shape circle{
    fill:var(--jk-navy);
    stroke:var(--jk-gold);
    stroke-width:1.2;
}
.jkp-pin-property .jkp-pin-label{
    top:calc(100% + 6px);
    padding:5px 10px;
    border-radius:4px;
    font-size:10px;
    letter-spacing:1.2px;
    text-transform:uppercase;
    text-shadow:none;
    background:var(--jk-navy);
    color:var(--white-color);
    box-shadow:0 3px 8px rgba(26,33,73,.3);
}

/* Popups */
.jkp-popup .leaflet-popup-content-wrapper{
    padding:0;
    border-radius:8px;
    box-shadow:0 10px 30px rgba(26,33,73,.18);
}
.jkp-popup .leaflet-popup-content{
    display:flex;
    flex-direction:column;
    gap:4px;
    margin:0;
    padding:16px 20px;
    font-family:var(--body-font);
}
.jkp-popup .leaflet-popup-tip{
    box-shadow:none;
}
.jkp-popup-eyebrow{
    font-size:10px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:var(--jk-gray);
}
.jkp-popup-title{
    font-family:var(--title-font);
    font-size:15px;
    font-weight:700;
    line-height:1.3;
    color:var(--jk-navy);
}
.jkp-popup-meta{
    font-size:12px;
    color:var(--body-color);
}
.jkp-popup-meta b{
    color:var(--jk-navy);
}

/* Landmark cards (photo shows on hover / when selected) */
.jkp-landmark-cards{
    display:flex;
    flex-wrap:wrap;
    gap:2px;
    margin-bottom:20px;
}
.jkp-landmark-card{
    position:relative;
    flex:1 1 0;
    min-width:190px;
    min-height:150px;
    padding:20px 18px 18px;
    overflow:hidden;
    background:#F4F4F1;
    cursor:pointer;
    transition:.25s;
}
.jkp-landmark-card:focus-visible{
    outline:2px solid var(--jk-teal);
    outline-offset:2px;
}
.jkp-landmark-card:hover,
.jkp-landmark-card.jkp-card-active{
    transform:translateY(-3px);
}
.jkp-landmark-card-img{
    position:absolute;
    inset:0;
    z-index:0;
    opacity:0;
    transition:opacity .3s ease;
}
.jkp-landmark-card-img::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(26,33,73,.2) 0%, rgba(26,33,73,.8) 100%);
}
.jkp-landmark-card-img img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}
.jkp-landmark-card-pin{
    position:absolute;
    top:14px;
    right:14px;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    border:1px solid var(--jk-navy);
    border-radius:50%;
    background:transparent;
    transition:border-color .3s ease;
}
.jkp-landmark-card-pin i{
    font-size:13px;
    color:var(--jk-navy);
    transition:color .3s ease;
}
.jkp-landmark-card-body{
    position:relative;
    z-index:1;
    padding-top:38px;
}
.jkp-landmark-card-title{
    margin-bottom:10px;
    font-size:13px;
    font-weight:700;
    line-height:1.3;
    text-transform:uppercase;
    color:var(--jk-navy);
    transition:color .3s ease;
}
.jkp-landmark-card-time{
    margin-bottom:0;
    font-size:22px;
    font-weight:700;
    color:var(--jk-navy);
    transition:color .3s ease;
}
.jkp-landmark-card-time span{
    margin-left:6px;
    font-size:11px;
    font-weight:600;
    text-transform:uppercase;
    color:var(--jk-gray);
    transition:color .3s ease;
}
/* Hover / active card: show photo, switch text to white */
.jkp-landmark-card:hover .jkp-landmark-card-img,
.jkp-landmark-card.jkp-card-active .jkp-landmark-card-img{
    opacity:1;
}
.jkp-landmark-card:hover .jkp-landmark-card-pin,
.jkp-landmark-card.jkp-card-active .jkp-landmark-card-pin{
    border-color:var(--white-color);
    background:rgba(255,255,255,.15);
}
.jkp-landmark-card:hover .jkp-landmark-card-pin i,
.jkp-landmark-card.jkp-card-active .jkp-landmark-card-pin i,
.jkp-landmark-card:hover .jkp-landmark-card-title,
.jkp-landmark-card.jkp-card-active .jkp-landmark-card-title,
.jkp-landmark-card:hover .jkp-landmark-card-time,
.jkp-landmark-card.jkp-card-active .jkp-landmark-card-time{
    color:var(--white-color);
}
.jkp-landmark-card:hover .jkp-landmark-card-time span,
.jkp-landmark-card.jkp-card-active .jkp-landmark-card-time span{
    color:rgba(255,255,255,.8);
}

@media (max-width:991.98px){
    .jkp-map-canvas{
        height:440px;
    }
}
@media (max-width:575.98px){
    .jkp-map-canvas{
        height:360px;
    }
    .jkp-map .leaflet-top.leaflet-left,
    .jkp-map .leaflet-top.leaflet-right{
        margin:10px;
    }
    .jkp-map-toggle button{
        padding:8px 12px;
        font-size:12px;
    }
    .jkp-map .leaflet-bar a{
        width:34px;
        height:34px;
    }
}

/* FAQ accordion + call card */
.jkp-faq-row{
    margin-top:10px;
}
.jkp-faq .accordion-item{
    margin-bottom:10px;
    border:1px solid #E8E8E8;
    border-radius:0;
}
.jkp-faq .accordion-button{
    border-radius:0!important;
    font-weight:700;
    color:var(--jk-navy);
    box-shadow:none!important;
}
.jkp-faq .accordion-button:not(.collapsed){
    background:var(--jk-navy);
    color:var(--white-color);
}
.jkp-faq-cta{
    min-height:380px;
    background-size:cover;
    background-position:center;
}
.jkp-faq-cta-overlay{
    background:linear-gradient(180deg, rgba(26,33,73,.2) 0%, rgba(26,33,73,.88) 100%);
}
.jkp-faq-cta-content{
    z-index:2;
    padding:30px;
}
.jkp-faq-cta-content h4{
    margin-bottom:10px;
    font-family:var(--title-font);
    font-size:20px;
    color:var(--white-color);
}
.jkp-faq-cta-content p{
    margin-bottom:16px;
    font-size:14px;
    color:rgba(255,255,255,.8);
}
.jkp-faq-cta-phone{
    font-size:17px;
    color:var(--white-color);
}
.jkp-faq-cta-phone i{
    color:var(--jk-teal);
}
.jkp-faq-cta-phone:hover{
    color:var(--jk-teal);
}

/* Scroll parallax images (assets/js/jkp-parallax.js)
   The photo is drawn 40% taller than the box at the top and bottom and moves
   slower than the page. Background-image boxes use a ::before copy of the image;
   boxes with an <img> move the image itself. */
.jkp-parallax{
    position:relative;
    overflow:hidden;
    background-color:#E4E4E0;
}
.jkp-parallax[style*="background-image"]{
    background-size:0 0!important;
    background-repeat:no-repeat;
}
.jkp-parallax[style*="background-image"]::before,
.jkp-parallax > img{
    position:absolute;
    left:0;
    top:-40%;
    width:100%;
    height:180%;
    opacity:0;
    transform:translate3d(0, var(--plx-y, 0px), 0) scale(var(--plx-s, 1));
    transition:opacity 1.2s ease;
    will-change:transform;
    backface-visibility:hidden;
}
.jkp-parallax[style*="background-image"]::before{
    content:"";
    background-image:inherit;
    background-size:cover;
    background-position:center;
}
.jkp-parallax > img{
    object-fit:cover;
}
.jkp-parallax.is-revealed[style*="background-image"]::before,
.jkp-parallax.is-revealed > img{
    opacity:1;
}
@media (prefers-reduced-motion:reduce){
    .jkp-parallax[style*="background-image"]::before,
    .jkp-parallax > img{
        transition:none;
    }
}

/* Scroll reveal */
.jkp-reveal{
    opacity:0;
    transform:translateY(45px);
    transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
    will-change:opacity, transform;
}
.jkp-reveal.jkp-reveal-visible{
    opacity:1;
    transform:translateY(0);
}
@media (prefers-reduced-motion:reduce){
    .jkp-reveal{
        opacity:1;
        transform:none;
        transition:none;
    }
}

@media (max-width:767.98px){
    .jkp-pd-hero{
        min-height:70vh;
        min-height:70svh;
        padding-top:130px;
        padding-bottom:230px;
    }
    .jkp-pd-hero-pill{
        padding:10px 20px;
        font-size:11px;
    }
    .jkp-pd-hero-title{
        font-size:28px;
    }
    .jkp-pd-hero-footer{
        padding:18px 16px;
    }
    .jkp-sticky-cta{
        padding:12px;
    }
    .jkp-sticky-cta-badge{
        padding:8px 12px;
        font-size:10px;
    }
    .jkp-split-img,
    .jkp-split-text{
        flex-basis:100%;
    }
    .jkp-why-band{
        padding:50px 20px;
    }
    .jkp-why-band h2{
        font-size:24px;
    }
    .jkp-split-text{
        padding:30px 24px;
    }
    .jkp-split-text h2{
        font-size:22px;
    }
    .jkp-amenities-list{
        padding:22px;
    }
    .jkp-amenities-photo{
        min-height:220px;
    }
    .jkp-floorplan-frame{
        height:340px;
        padding:20px;
    }
}
@media (max-width:575.98px){
    .jkp-gallery-slide{
        height:340px;
    }
}


/* --------------------------------------------------------------------------
   21. MEDIA CENTRE (blog.html — jkp-media-*, blog-details.html — jkp-article-*)
   Story cards reuse .jkp-news-* (section 9); layout, gaps and the pill shape
   are Bootstrap utilities in blog.html.
   -------------------------------------------------------------------------- */
.jkp-media-intro{
    max-width:720px;
}

/* Featured story */
.jkp-media-feature-img{
    min-height:320px;
}
.jkp-media-feature-img img{
    min-height:320px;
    object-fit:cover;
    transition:transform .4s ease;
}
.jkp-media-feature:hover .jkp-media-feature-img img{
    transform:scale(1.04);
}
.jkp-media-feature-body{
    background:var(--smoke-color4);
}
.jkp-media-feature-title{
    font-size:28px;
    line-height:1.3;
}
.jkp-media-feature-title a{
    color:var(--jk-navy);
}

/* Outline buttons: media filter pills, article share buttons, about slider arrows */
.jkp-media-filter,
.jkp-share-link,
.jkp-sustain-arrow{
    border:1px solid rgba(26,33,73,.25);
    background:transparent;
    color:var(--jk-navy);
    transition:.3s;
}
.jkp-media-filter:hover,
.jkp-media-filter.active,
.jkp-share-link:hover,
.jkp-share-link.is-copied,
.jkp-sustain-arrow:hover{
    border-color:var(--jk-navy);
    background:var(--jk-navy);
    color:var(--white-color);
}
.jkp-media-filter{
    padding:10px 22px;
    font-size:12px;
    letter-spacing:.5px;
}

/* Light copy on dark backgrounds: CTA band + article enquiry panel */
.jkp-cta-copy{
    max-width:620px;
    font-size:16px;
    line-height:1.8em;
    color:rgba(255,255,255,.85);
}
@media (max-width:767.98px){
    .jkp-media-feature-title{
        font-size:22px;
    }
}

/* News article (blog-details.html — jkp-article-*) */
.jkp-article-hero-title{
    font-size:44px;
    line-height:1.25;
}
.jkp-article{
    max-width:860px;
}
.jkp-share-link{
    width:38px;
    height:38px;
    font-size:14px;
}
.jkp-article-lead{
    font-size:19px;
    line-height:1.75em;
    color:var(--jk-navy);
}
.jkp-article-subtitle{
    font-size:22px;
    font-weight:700;
    letter-spacing:.3px;
    color:var(--jk-navy);
}
.jkp-article-quote{
    padding:8px 0 8px 28px;
    border-left:3px solid var(--jk-teal);
}
.jkp-article-quote p{
    font-size:20px;
    line-height:1.65em;
    text-align:left;
    color:var(--jk-navy);
}
.jkp-article-figure img{
    height:300px;
    object-fit:cover;
}
.jkp-article-caption{
    font-size:13px;
    color:var(--jk-gray);
}
/* Vertical dividers between the facts from tablet up */
@media (min-width:768px){
    .jkp-article-facts > .col + .col{
        border-left:1px solid #E8E8E8;
    }
}
.jkp-article-fact-num{
    font-size:22px;
}
@media (max-width:991.98px){
    .jkp-article-hero-title{
        font-size:34px;
    }
}
@media (max-width:767.98px){
    .jkp-article-hero-title{
        font-size:26px;
    }
    .jkp-article-lead{
        font-size:18px;
    }
    .jkp-article-quote p{
        font-size:18px;
    }
    .jkp-article-subtitle{
        font-size:20px;
    }
    .jkp-article-figure img{
        height:240px;
    }
}


/* Article enquiry panel: property summary (navy) + callback form (white) */
.jkp-enquiry{
    background:var(--jk-navy);
}
.jkp-enquiry-label{
    color:var(--jk-teal);
}
/* Underline-only fields (overrides the template's grey input boxes) */
.jkp-enquiry-input{
    height:44px;
    padding:0;
    border:0;
    border-bottom:1px solid rgba(26,33,73,.25);
    border-radius:0;
    background:transparent;
    font-size:16px;
    color:var(--jk-navy);
}
.jkp-enquiry-input:focus{
    border-color:var(--jk-navy);
    background:transparent;
}
textarea.jkp-enquiry-input{
    height:auto;
    min-height:96px;
    padding-top:10px;
    resize:vertical;
}
.was-validated .jkp-enquiry-input:invalid{
    border-color:#c0392b;
}


/* --------------------------------------------------------------------------
   22. CONTACT PAGE (contact.html — jkp-contact-*, jkp-form-*)
   Details box on the left, enquiry form on the right. Layout, spacing and
   the input group / checkbox are Bootstrap.
   -------------------------------------------------------------------------- */
.jkp-contact-box{
    background:var(--jk-navy);
}
.jkp-contact-box .jkp-contact-box-row{
    border-color:rgba(255,255,255,.2)!important;
}
.jkp-contact-icon{
    width:20px;
    padding-top:3px;
    font-size:18px;
    color:var(--jk-teal);
}
.jkp-contact-box-title{
    font-size:14px;
    letter-spacing:.5px;
}
.jkp-contact-box .jkp-contact-box-title{
    color:var(--white-color);
}
.jkp-contact-box-text,
.jkp-contact-box-text a{
    font-size:15px;
    line-height:1.6;
    color:rgba(255,255,255,.85);
}
.jkp-contact-box-text a:hover{
    color:var(--jk-teal);
}
.jkp-contact-map{
    z-index:0; /* keeps Leaflet panes (z-index 400+) under the sticky header */
    min-height:200px;
    background:#F4F4F1;
}
/* Stacked layout: the map no longer stretches to the form, so give it a fixed size */
@media (max-width:991.98px){
    .jkp-contact-map{
        min-height:280px;
    }
}

/* Form: light grey filled fields (overrides the template's input styles) */
.jkp-form-label{
    font-size:15px;
    font-weight:600;
    color:var(--jk-navy);
}
.jkp-form-input{
    height:48px;
    padding:0 16px;
    border:1px solid #DDDDDD;
    border-radius:0!important;
    background-color:#EFEFEF;
    font-size:16px;
    color:var(--jk-navy);
}
.jkp-form-input:focus{
    border-color:var(--jk-navy);
    background-color:#EFEFEF;
    box-shadow:none;
}
textarea.jkp-form-input{
    height:auto;
    padding:12px 16px;
    resize:vertical;
}
.jkp-form-prefix{
    width:auto;
    font-size:15px;
}
.jkp-form-note:empty{
    display:none;
}
.was-validated .jkp-form-input:invalid{
    border-color:#c0392b;
}
.jkp-form-note{
    font-size:14px;
    line-height:1.7;
    text-align:left;
    color:var(--body-color);
}


/* --------------------------------------------------------------------------
   23. CAREERS PAGE (careers.html — jkp-careers-*, jkp-benefit-*, jkp-job-*, jkp-step-*)
   Grids, spacing and the filter pills (.jkp-media-filter) are shared or
   Bootstrap; the form reuses .jkp-form-* (section 22).
   -------------------------------------------------------------------------- */
.jkp-careers-alt{
    background-color:var(--smoke-color4);
}
.jkp-careers-img img{
    height:480px;
    object-fit:cover;
}
/* Phones: keep the whole team in view under the title */
@media (max-width:767.98px){
    .jkp-careers-hero{
        background-position:18% center;
    }
}

/* Benefits grid and hiring steps */
.jkp-benefit-num{
    font-size:13px;
    letter-spacing:1px;
    color:var(--jk-teal);
}
.jkp-benefit-icon{
    font-size:30px;
    color:var(--jk-navy);
}
.jkp-benefit-title{
    font-size:17px;
    letter-spacing:.3px;
    color:var(--jk-navy);
}
.jkp-benefit-text{
    font-size:16px;
    line-height:1.75em;
    text-align:left;
}
.jkp-step-num{
    width:56px;
    height:56px;
    background:var(--jk-navy);
    font-size:18px;
    color:var(--white-color);
}
/* Line linking the step circles on desktop */
@media (min-width:992px){
    .jkp-step:not(:last-child)::after{
        content:'';
        position:absolute;
        top:28px;
        left:calc(56px + 3rem);
        right:1.5rem;
        border-top:1px solid rgba(26,33,73,.2);
    }
}

/* Open positions (native <details>, so no JavaScript is needed to expand) */
.jkp-job-head{
    list-style:none;
    cursor:pointer;
}
.jkp-job-head::-webkit-details-marker{
    display:none;
}
.jkp-job-title{
    font-family:var(--title-font);
    font-size:20px;
    color:var(--jk-navy);
    transition:color .3s;
}
.jkp-job-head:hover .jkp-job-title{
    color:var(--jk-teal);
}
.jkp-job-meta{
    font-size:15px;
    color:var(--body-color);
}
.jkp-job-meta i{
    color:var(--jk-teal);
}
.jkp-job-toggle{
    width:38px;
    height:38px;
    border:1px solid rgba(26,33,73,.25);
    font-size:13px;
    color:var(--jk-navy);
    transition:.3s;
}
.jkp-job-toggle i{
    transition:transform .3s;
}
.jkp-job[open] .jkp-job-toggle{
    background:var(--jk-navy);
    border-color:var(--jk-navy);
    color:var(--white-color);
}
.jkp-job[open] .jkp-job-toggle i{
    transform:rotate(45deg);
}
.jkp-job-sub{
    font-size:13px;
    letter-spacing:.5px;
    color:var(--jk-navy);
}
.jkp-job-list li{
    margin-bottom:6px;
    font-size:16px;
    line-height:1.6;
    color:var(--body-color);
}
.jkp-careers-mail{
    color:var(--jk-navy);
    text-decoration:underline;
}

/* CV upload: navy "Choose File" button inside the grey field */
input[type=file].jkp-form-input{
    padding:0;
    line-height:46px;
}
input[type=file].jkp-form-input::-webkit-file-upload-button{
    height:46px;
    margin:0 16px 0 0;
    padding:0 20px;
    border:0;
    background:var(--jk-navy);
    color:var(--white-color);
}
input[type=file].jkp-form-input::file-selector-button{
    height:46px;
    margin:0 16px 0 0;
    padding:0 20px;
    border:0;
    background:var(--jk-navy);
    color:var(--white-color);
}
@media (max-width:767.98px){
    .jkp-careers-img img{
        height:300px;
    }
    .jkp-job-title{
        font-size:18px;
    }
}


/* --------------------------------------------------------------------------
   24. PROPERTY MANAGEMENT PAGE (property-management.html — jkp-pm-*)
   Reuses .jkp-benefit-* (section 23), .jkp-faq-* (section 11), .jkp-form-*
   (section 22) and .jkp-media-filter pills (section 21).
   -------------------------------------------------------------------------- */
.jkp-pm-alt{
    background-color:var(--smoke-color4);
}

/* Highlights grid */
.jkp-pm-stat{
    font-family:var(--title-font);
    font-size:40px;
    line-height:1;
    color:var(--jk-navy);
}
.jkp-pm-stat-label{
    font-size:13px;
    letter-spacing:.5px;
    color:var(--body-color);
}

/* Service rows */
.jkp-pm-service-img{
    min-height:300px;
}
.jkp-pm-service-img img{
    min-height:300px;
    object-fit:cover;
}
.jkp-pm-service-img.jkp-parallax > img{
    top:-12%;
    height:124%!important;
    min-height:0;
}
.jkp-pm-service-title{
    font-size:24px;
    color:var(--jk-navy);
}
.jkp-pm-list li{
    font-size:16px;
    line-height:1.6;
    color:var(--body-color);
}
.jkp-pm-list i{
    padding-top:4px;
    font-size:13px;
    color:var(--jk-teal);
}

/* Community cards: title over the photo */
.jkp-pm-community img{
    height:380px;
    object-fit:cover;
    transition:transform .4s ease;
}
.jkp-pm-community:hover img{
    transform:scale(1.04);
}
.jkp-pm-community-body{
    background:linear-gradient(to top, rgba(10,14,35,.85), rgba(10,14,35,0));
}
.jkp-pm-community-title{
    font-size:18px;
    line-height:1.35;
}
.jkp-pm-community-meta{
    font-size:14px;
    color:rgba(255,255,255,.8);
}

/* How it works: white cards with a teal top line */
.jkp-pm-step{
    border-top:3px solid var(--jk-teal);
    transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.jkp-pm-step:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(26,33,73,.12);
    border-top-color:var(--jk-navy);
}
.jkp-pm-step-num{
    font-family:var(--title-font);
    font-size:34px;
    line-height:1;
    color:rgba(26,33,73,.2);
    transition:color .35s ease;
}
.jkp-pm-step:hover .jkp-pm-step-num{
    color:var(--jk-teal);
}

/* Service pills in the enquiry form (Bootstrap .btn-check) */
.btn-check:checked + .jkp-media-filter{
    border-color:var(--jk-navy);
    background:var(--jk-navy);
    color:var(--white-color);
}
.btn-check:focus-visible + .jkp-media-filter{
    outline:2px solid var(--jk-teal);
    outline-offset:2px;
}
/* Override the template's custom checkbox box (input ~ label:before) */
.jkp-pm-pills .jkp-media-filter{
    display:inline-block;
    margin-bottom:0;
    padding:10px 22px;
    cursor:pointer;
}
.jkp-pm-pills .jkp-media-filter::before{
    display:none;
}
.jkp-pm-faq-col{
    position:sticky;
    top:112px;
    align-self:flex-start;
}
@media (max-width:991.98px){
    .jkp-pm-faq-col{
        position:static;
        top:auto;
    }
}
@media (max-width:767.98px){
    .jkp-pm-stat{
        font-size:32px;
    }
    .jkp-pm-service-title{
        font-size:20px;
    }
    .jkp-pm-community img{
        height:300px;
    }
}


/* --------------------------------------------------------------------------
   25. TEMPLATE SECTION OVERRIDES (#team-sec, #about-sec, #testi-sec)
   -------------------------------------------------------------------------- */
#team-sec{
    background:var(--smoke-color4)!important;
    scroll-margin-top:92px; /* sticky header height, for the "Our Team" menu link */
}
#team-sec .sec-title{
    color:var(--title-color)!important;
}
#team-sec p.text-light{
    color:var(--body-color)!important;
}
#team-sec .sec-bg-shape2-3{
    display:none!important;
}
#team-sec .swiper-slide{
    padding:0 12px;
}
#team-sec .team-card.style3{
    border-radius:0;
}
#team-sec .team-card.style3 .img-wrap:after{
    display:none;
}
#team-sec .team-card.style3 .team-img img{
    width:100%;
    height:380px;
    border-radius:0;
    object-fit:cover;
}
#team-sec .team-card.style3 .team-card-content{
    padding:20px 4px 0;
    background:transparent!important;
}
#team-sec .team-card.style3 .box-title a{
    font-size:20px;
    font-weight:600;
    color:var(--title-color)!important;
}
#team-sec .team-card.style3 .team-desig{
    font-size:14px;
    color:var(--body-color)!important;
}
#about-sec{
    background:var(--white-color)!important;
}
#about-sec .img-box3 .img1{
    overflow:hidden;
    border-radius:0!important;
}
#about-sec .img-box3 .img1 img{
    display:block;
    width:100%;
    height:auto;
    border-radius:0!important;
}
#testi-sec{
    background:var(--smoke-color4)!important;
}


/* --------------------------------------------------------------------------
   26. FOOTER (jkp-footer-*)
   Own markup, so no template footer-widget styles are involved.
   -------------------------------------------------------------------------- */
.jkp-footer.footer-wrapper{
    padding:80px 0 0!important;
    background-color:#000!important;
}
.jkp-footer-main{
    padding-bottom:56px;
}

/* Brand column */
.jkp-footer-brand{
    display:flex;
    align-items:center;
    justify-content:center;
    max-width:280px;
    height:100px;
    margin:-10px 0 10px;
    overflow:hidden;
}
.jkp-footer-brand img{
    display:block;
    width:auto;
    max-width:none;
    height:165px;
}
.jkp-footer-tagline{
    max-width:280px;
    margin-bottom:24px;
    text-align:left;
    font-size:15px;
    line-height:1.7;
    color:rgba(255,255,255,.6);
}
.jkp-footer-social{
    display:flex;
    gap:10px;
}
.jkp-footer-social a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:50%;
    font-size:14px;
    color:var(--white-color);
    transition:.3s;
}
.jkp-footer-social a:hover{
    border-color:var(--jk-gold);
    background:var(--jk-gold);
    color:#000;
}

/* Link columns */
.jkp-footer-title{
    margin-bottom:22px;
    font-family:var(--title-font);
    font-size:13px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--jk-gold);
}
.jkp-footer-links,
.jkp-footer-contact{
    margin:0;
    padding:0;
    list-style:none;
}
.jkp-footer-links-2col{
    columns:2;
    column-gap:48px;
}
.jkp-footer-links-2col li{
    break-inside:avoid;
}
.jkp-footer-links li{
    margin-bottom:10px;
    line-height:1.6;
}
.jkp-footer-links a,
.jkp-footer-contact a{
    font-size:15px;
    color:rgba(255,255,255,.7);
    transition:color .2s ease;
}
.jkp-footer-links a:hover,
.jkp-footer-contact a:hover{
    color:var(--white-color);
}

/* Contact list */
.jkp-footer-contact li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-bottom:16px;
    font-size:14px;
    line-height:1.7;
    color:rgba(255,255,255,.7);
}
.jkp-footer-contact i{
    flex:0 0 14px;
    margin-top:5px;
    font-size:13px;
    color:var(--jk-gold);
}
.jkp-footer-contact a{
    overflow-wrap:anywhere;
}

/* Bottom bar */
.jkp-footer-bottom{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px 24px;
    text-align:center;
    padding:22px 0;
    border-top:1px solid rgba(255,255,255,.12);
}
.jkp-footer-bottom p{
    margin:0;
    font-size:13px;
    color:rgba(255,255,255,.5);
}
.jkp-footer-bottom a{
    color:inherit;
    transition:color .2s ease;
}
.jkp-footer-bottom a:hover{
    color:var(--jk-gold);
}

/* Brand column takes a full row below xl, so centre its content */
@media (max-width:1199.98px){
    .jkp-footer-brand,
    .jkp-footer-tagline{
        margin-left:auto;
        margin-right:auto;
    }
    .jkp-footer-tagline{
        text-align:center;
    }
    .jkp-footer-social{
        justify-content:center;
    }
}
@media (max-width:991.98px){
    .jkp-footer.footer-wrapper{
        padding-top:60px!important;
    }
    .jkp-footer-main{
        padding-bottom:40px;
    }
}
@media (max-width:767.98px){
    .jkp-footer-bottom{
        flex-direction:column;
        align-items:center;
        text-align:center;
    }
}
/* Phones: equal breathing room on both sides of the footer */
@media (max-width:575.98px){
    .jkp-footer > .container{
        padding-left:24px;
        padding-right:24px;
    }
}


/* --------------------------------------------------------------------------
   27. GLOBAL RESPONSIVE SAFETY RULES
   -------------------------------------------------------------------------- */
/* Long words wrap only when they would overflow */
h1,h2,h3,h4,h5,h6,p{
    overflow-wrap:break-word;
}

/* Phones: more breathing room on both sides of every page */
@media (max-width:575.98px){
    .container{
        padding-left:24px;
        padding-right:24px;
    }
}

/* Justify body paragraphs, except inside centred containers.
   :where() keeps specificity at 0 so any class-level alignment still wins. */
:where(p:not(
    [class*="text-center"] p,
    .jkp-cta-inner p,
    .jkp-why-band p,
    .jkp-footer-bottom p,
    .jkp-about-stat p
)){
    text-align:justify;
}
@media (max-width:575.98px){
    :where(p){
        hyphens:auto;
    }
}

/* GSAP word/char split on .sec-title does not reflow on narrow phones */
@media (max-width:767.98px){
    .sec-title,
    .sec-title *,
    .jkp-legacy-stat-num,
    .jkp-legacy-stat-label,
    .jkp-intro-stat-num,
    .jkp-flagship-price,
    .jkp-exec-role{
        max-width:100%!important;
        white-space:normal!important;
        overflow-wrap:break-word!important;
    }
    .jkp-legacy-stats .col-6,
    .jkp-about-stat-row .col-6{
        overflow:visible;
    }
}