/* Nargoon Towers Detail Page Styles */

.header:not(.is-scrolled) {
    background: rgba(245, 242, 234, .40) !important;
}

body.nargoon-detail-page {
    overflow-x: clip;
    overflow-y: visible;
}

body.nargoon-detail-page .PostContent,
body.nargoon-detail-page article {
    overflow: visible;
}

.cursor {
    width: 20px;
    height: 20px;
    border: 1px solid #c9a961;
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.2s, background 0.2s;
    mix-blend-mode: difference;
}

.cursor.hover {
    transform: scale(2);
    background: rgba(201, 169, 97, 0.1);
}

.section-label {
    font-size: 0.875rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: #c9a961;
    font-weight: 500;
}

.section-number {
    font-size: 0.8rem;
    letter-spacing: 0.3em;
    color: #c9a961;
    font-weight: 500;
    margin-bottom: 1rem;
    display: block;
}

/* ===== NAVIGATION SECTION - STICKY ===== */
.nav-section {
    position: sticky;
    top: var(--nargoon-header-height, 76px);
    left: 0;
    right: 0;
    z-index: 100;
    background: #ffffff;
    border-bottom: 1px solid #e5e5e5;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-section.scrolled {
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
    border-bottom-color: transparent;
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem 5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    flex-wrap: wrap;
}

.nav-section.scrolled .nav-container {
    padding: 1rem 5vw;
    gap: 2rem;
}

.nav-link-item {
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    position: relative;
    color: #666;
    opacity: 0.8;
    transition: all 0.3s ease;
    font-weight: 400;
    padding: 0.5rem 0;
}

.nav-link-item:hover {
    color: #c9a961;
    opacity: 1;
}

.nav-link-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 2px;
    background: #c9a961;
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-link-item:hover::after {
    width: 100%;
}

.nav-section.scrolled .nav-link-item {
    font-size: 0.85rem;
}

/* Hero */
.hero {
    height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.1);
    filter: brightness(0.55) contrast(1.15);
}

.hero-bg-fallback {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.1);
    filter: brightness(0.5);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.25) 100%);
}

.hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    color: white;
    max-width: 1000px;
    padding: 0 2rem;
}

.hero-subtitle {
    font-size: 0.8rem;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    margin-bottom: 2.5rem;
    opacity: 0;
    transform: translateY(30px);
    font-weight: 300;
}

.hero-title {
    font-size: clamp(3rem, 9vw, 6rem);
    font-weight: 900;
    line-height: 1.3;
    margin-bottom: 2rem;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.7);
}

.hero-title-line {
    display: block;
    overflow: hidden;
}

.hero-title-line span {
    display: block;
    transform: translateY(100%);
    opacity: 0;
}

.hero-tagline {
    font-size: clamp(0.95rem, 1.5vw, 1.1rem);
    font-weight: 300;
    line-height: 2.2;
    color: rgba(255, 255, 255, 0.95);
    max-width: 750px;
    margin: 0 auto;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transform: translateY(30px);
}

.progress-ring {
    position: absolute;
    top: 8rem;
    right: 5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    color: white;
    z-index: 20;
}

.progress-ring__circle {
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

.scroll-indicator {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    opacity: 0;
    z-index: 20;
}

.scroll-arrow {
    width: 1px;
    height: 50px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), transparent);
    position: relative;
    overflow: hidden;
}

.scroll-arrow::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: white;
    animation: scrollDown 2s ease-in-out infinite;
}

@keyframes scrollDown {

    0%,
    100% {
        transform: translateY(-100%);
    }

    50% {
        transform: translateY(100%);
    }
}

.identity-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 5vw;
    background: #fff;
    overflow: hidden;
}

.identity-content {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.identity-number {
    font-size: 0.8rem;
    letter-spacing: 0.3em;
    color: #c9a961;
    font-weight: 500;
    margin-bottom: 2rem;
    display: block;
    opacity: 0;
    transform: translateY(30px);
}

.identity-label {
    font-size: 1rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: #c9a961;
    font-weight: 500;
    margin-bottom: 3rem;
    display: block;
    opacity: 0;
    transform: translateY(30px);
}

.identity-title {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 300;
    line-height: 1.4;
    margin-bottom: 2.5rem;
    opacity: 0;
    transform: translateY(30px);
}

.identity-description {
    font-size: 1.125rem;
    line-height: 2.4;
    color: #666;
    font-weight: 300;
    max-width: 800px;
    margin: 0 auto 4rem;
    opacity: 0;
    transform: translateY(30px);
}

.identity-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
    margin-top: 5rem;
    padding-top: 4rem;
    border-top: 1px solid #e5e5e5;
}

.identity-stat {
    opacity: 0;
    transform: translateY(30px);
}

.identity-stat-number {
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 100;
    color: #c9a961;
    line-height: 1;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.identity-stat-label {
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #999;
    font-weight: 400;
}

.gallery-section {
    padding: 6rem 5vw;
    background: #fff;
}

.gallery-header {
    text-align: center;
    margin-bottom: 5rem;
}

.gallery-title {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 300;
    margin-bottom: 1rem;
}

.gallery-subtitle {
    color: #666;
    font-size: 1.125rem;
    font-weight: 300;
    max-width: 700px;
    margin: 0 auto;
}

.gallery-filters {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 4rem;
    flex-wrap: wrap;
}

.gallery-filter-btn {
    padding: 12px 28px;
    background: transparent;
    border: 1px solid #e5e5e5;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #666;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 50px;
    letter-spacing: 0.05em;
}

.gallery-filter-btn:hover {
    border-color: #c9a961;
    color: #c9a961;
    transform: translateY(-2px);
}

.gallery-filter-btn.active {
    background: #c9a961;
    border-color: #c9a961;
    color: white;
    box-shadow: 0 10px 30px rgba(201, 169, 97, 0.3);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    cursor: pointer;
    aspect-ratio: 4/3;
    opacity: 0;
    transform: translateY(30px);
}

.gallery-item.show {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-item.hide {
    display: none;
}

.gallery-item.hidden-item {
    display: none;
}

.gallery-item.hidden-item.show {
    display: block;
    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    display: flex;
    align-items: flex-end;
    padding: 2rem;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-category {
    color: #c9a961;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.gallery-item-title {
    color: white;
    font-size: 1.25rem;
    font-weight: 400;
}

/* ===== CINEMATIC LIGHTBOX ===== */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.98);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.lightbox.active {
    display: flex;
    opacity: 1;
}

.lightbox-stage {
    position: relative;
    max-width: 90vw;
    max-height: 85vh;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.lightbox-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform, opacity, filter;
}

.lightbox-slide img,
.lightbox-slide video {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.8);
    transition: transform 0.3s ease;
}

.lightbox-slide video {
    background: #000;
}

.ken-burns img {
    animation: kenBurns 20s ease-in-out infinite alternate;
}

@keyframes kenBurns {
    0% {
        transform: scale(1) translate(0, 0);
    }

    100% {
        transform: scale(1.15) translate(-2%, -2%);
    }
}

.lightbox-slide.zoomed {
    cursor: zoom-out;
}

.lightbox-slide.zoomed img {
    max-width: none;
    max-height: none;
    width: auto;
    height: auto;
    transform: scale(2);
    cursor: zoom-out;
}

.lightbox-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    width: 50px;
    height: 50px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    font-size: 1.5rem;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    z-index: 10;
}

.lightbox-close:hover {
    background: #c9a961;
    border-color: #c9a961;
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 10px 30px rgba(201, 169, 97, 0.4);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    font-size: 1.25rem;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    z-index: 10;
    user-select: none;
}

.lightbox-nav:hover {
    background: #c9a961;
    border-color: #c9a961;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 10px 30px rgba(201, 169, 97, 0.4);
}

.lightbox-prev {
    left: 2rem;
}

.lightbox-next {
    right: 2rem;
}

.lightbox-caption {
    position: absolute;
    bottom: 8rem;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    text-align: center;
    font-size: 1.125rem;
    font-weight: 300;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    padding: 1rem 2rem;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    white-space: nowrap;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.5s ease 0.3s;
}

.lightbox.active .lightbox-caption {
    opacity: 1;
}

.lightbox-counter {
    position: absolute;
    top: 2rem;
    left: 2rem;
    color: white;
    font-size: 0.875rem;
    letter-spacing: 0.2em;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 10;
    opacity: 0;
    transition: opacity 0.5s ease 0.2s;
}

.lightbox.active .lightbox-counter {
    opacity: 1;
}

.lightbox-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 10;
}

.lightbox-progress-bar {
    height: 100%;
    background: #c9a961;
    width: 0%;
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.lightbox-thumbnails {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.75rem;
    max-width: 80vw;
    overflow-x: auto;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 10;
    opacity: 0;
    transition: opacity 0.5s ease 0.4s;
    scrollbar-width: none;
}

.lightbox-thumbnails::-webkit-scrollbar {
    display: none;
}

.lightbox.active .lightbox-thumbnails {
    opacity: 1;
}

.lightbox-thumb {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    flex-shrink: 0;
    opacity: 0.5;
}

.lightbox-thumb:hover {
    opacity: 0.8;
    transform: scale(1.1);
}

.lightbox-thumb.active {
    border-color: #c9a961;
    opacity: 1;
    transform: scale(1.15);
}

.lightbox-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lightbox-autoplay {
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 45px;
    height: 45px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    z-index: 10;
}

.lightbox-autoplay:hover {
    background: #c9a961;
    border-color: #c9a961;
    transform: translateX(-50%) scale(1.1);
}

.lightbox-autoplay.playing {
    background: #c9a961;
    border-color: #c9a961;
}

.section {
    padding: 6rem 5vw;
    position: relative;
}

.section-header {
    margin-bottom: 6rem;
    text-align: center;
}

.grid-asymmetric {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 6rem;
    align-items: center;
}

.image-reveal {
    position: relative;
    overflow: hidden;
    height: 90vh;
    border-radius: 4px;
}

.image-reveal img,
.image-reveal iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translateY(-10%) scale(1.1);
    transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.image-reveal:hover img {
    transform: translateY(0) scale(1);
}

.stats-editorial {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 5rem;
    padding-top: 4rem;
    border-top: 1px solid #e5e5e5;
}

.stat-editorial .stat-number {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 100;
    color: #c9a961;
    line-height: 1;
    margin-bottom: 1rem;
}

.stat-editorial .stat-label {
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #999;
    font-weight: 400;
}

.unit-filters {
    display: flex;
    gap: 1rem;
    margin-bottom: 4rem;
    flex-wrap: wrap;
    justify-content: center;
}

.filter-btn {
    padding: 1rem 2.5rem;
    background: transparent;
    border: 1px solid #e5e5e5;
    font-family: inherit;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.filter-btn:hover {
    border-color: #c9a961;
    transform: translateY(-2px);
}

.filter-btn.active {
    background: #c9a961;
    border-color: #c9a961;
    color: white;
}

.units-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: #e5e5e5;
    border: 1px solid #e5e5e5;
}

.unit-card {
    background: white;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    height: 600px;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.unit-card.hidden-item {
    display: none;
}

.unit-card.hidden-item.show {
    display: block;
    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.unit-card .unit-image-wrapper {
    position: relative;
    width: 100%;
    height: 70%;
    overflow: hidden;
}

.unit-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.unit-card:hover .unit-image {
    transform: scale(1.05);
}

.unit-expand-icon {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1a1a;
    font-size: 0.9rem;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 5;
    pointer-events: none;
}

.unit-card:hover .unit-expand-icon {
    opacity: 1;
    transform: scale(1);
}

.unit-info {
    padding: 2.5rem;
}

.unit-type {
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #c9a961;
    margin-bottom: 1rem;
    font-weight: 500;
}

.unit-title {
    font-size: 1.75rem;
    font-weight: 300;
    margin-bottom: 1rem;
}

.unit-specs {
    display: flex;
    gap: 2rem;
    font-size: 0.9375rem;
    color: #999;
    font-weight: 300;
}

.videos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.video-item {
    position: relative;
    background: #fff;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid #f0f0f0;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.video-item.hidden-item {
    display: none;
}

.video-item.hidden-item.show {
    display: block;
    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.video-poster-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
}

.video-poster-container video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    pointer-events: none;
}

.video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 55px;
    height: 55px;
    background: rgba(201, 169, 97, 0.85);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.video-play-icon i {
    margin-right: -3px;
}

.video-item:hover .video-play-icon {
    transform: translate(-50%, -50%) scale(1.15);
    background: rgba(201, 169, 97, 1);
    box-shadow: 0 10px 30px rgba(201, 169, 97, 0.5);
}

.video-meta {
    padding: 1.5rem;
}

.video-number {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    color: #c9a961;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.video-title {
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.video-desc {
    font-size: 0.85rem;
    color: #999;
    font-weight: 300;
    line-height: 1.8;
}

/* ===== FACILITIES GRID (Modular & Elegant) ===== */
.facilities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.facility-card {
    background: white;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #e5e5e5;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 1;
    transform: translateY(0);
}

.facility-card.hide {
    display: none;
}

.facility-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border-color: #c9a961;
}

.facility-image {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.facility-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.facility-card:hover .facility-image img {
    transform: scale(1.1);
}

.facility-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.facility-card:hover .facility-overlay {
    opacity: 1;
}

.facility-content {
    padding: 2rem;
    text-align: center;
}

.facility-icon {
    font-size: 1.75rem;
    color: #c9a961;
    margin-bottom: 1rem;
    transition: transform 0.4s ease;
}

.facility-card:hover .facility-icon {
    transform: scale(1.15) rotate(5deg);
}

.facility-content h3 {
    font-size: 1.15rem;
    font-weight: 400;
    color: #1a1a1a;
    margin-bottom: 0.75rem;
}

.facility-content p {
    font-size: 0.9rem;
    color: #888;
    line-height: 1.8;
    font-weight: 300;
    margin: 0;
}

@media (max-width: 1024px) {
    .facilities-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.accordion {
    border-top: 1px solid #e5e5e5;
}

.accordion-item {
    border-bottom: 1px solid #e5e5e5;
    padding: 0 15px;
}

.accordion-header {
    padding: 2.5rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.4s;
}

.accordion-header:hover {
    padding-right: 1rem;
}

.accordion-header h3 {
    font-size: 1.5rem;
    font-weight: 300;
}

.accordion-icon {
    width: 50px;
    height: 50px;
    border: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.accordion-item.active .accordion-icon {
    background: #c9a961;
    border-color: #c9a961;
    color: white;
    transform: rotate(45deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.accordion-item.active .accordion-content {
    max-height: 1000px;
}

.accordion-body {
    padding-bottom: 2.5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
}

.spec-category h4 {
    font-size: 0.875rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.spec-category ul {
    list-style: none;
}

.spec-category li {
    font-size: 1rem;
    line-height: 2.2;
    color: #333;
    font-weight: 300;
    position: relative;
    padding-right: 1.5rem;
}

.spec-category li::before {
    content: '—';
    position: absolute;
    right: 0;
    color: #c9a961;
}

.magazine-section {
    background: #faf9f7;
}

.magazine-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: center;
}

.magazine-visual {
    position: relative;
    height: 500px;
    overflow: hidden;
    border-radius: 4px;
}

.magazine-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.magazine-visual:hover img {
    transform: scale(1.05);
}

.magazine-content h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 300;
    line-height: 1.3;
    margin-bottom: 2rem;
}

.magazine-content p {
    font-size: 1.125rem;
    line-height: 2.2;
    color: #666;
    font-weight: 300;
    margin-bottom: 3rem;
}

.magazine-topics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.magazine-topic {
    padding: 1.5rem;
    border: 1px solid #e5e5e5;
    background: #fff;
    transition: all 0.4s;
    cursor: pointer;
}

.magazine-topic:hover {
    border-color: #c9a961;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.magazine-topic h4 {
    font-size: 0.95rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.magazine-topic p {
    font-size: 0.8rem;
    color: #999;
    font-weight: 300;
    margin: 0;
}

.magazine-cta {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 3rem;
    border: 1px solid #1a1a1a;
    color: #1a1a1a;
    font-size: 0.875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.magazine-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #c9a961;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -1;
}

.magazine-cta:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

.magazine-cta:hover {
    color: #fff;
    border-color: #c9a961;
}

.contact-section {
    padding: 5rem 5vw;
    background: #1a1a1a;
    color: white;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
}

.contact-label {
    font-size: 0.875rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #c9a961;
    margin-bottom: 2rem;
}

.contact-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 100;
    line-height: 1.4;
    margin-bottom: 3rem;
}

.form-minimal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.form-group {
    position: relative;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group input,
.form-group textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #333;
    padding: 1.5rem 0;
    color: white;
    font-family: inherit;
    font-size: 1.125rem;
    font-weight: 300;
    transition: border-color 0.4s;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-bottom-color: #c9a961;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #666;
}

.form-group textarea {
    resize: none;
    min-height: 100px;
}

.submit-btn {
    margin-top: 3rem;
    padding: 1.5rem 4rem;
    background: transparent;
    border: 1px solid #c9a961;
    color: #c9a961;
    font-family: inherit;
    font-size: 0.875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #c9a961;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -1;
}

.submit-btn:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

.submit-btn:hover {
    color: #1a1a1a;
}

.footer {
    padding: 3rem 5vw;
    background: #0f0f0f;
    color: #666;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
}

.footer-links {
    display: flex;
    gap: 3rem;
}

.footer-links a {
    color: #666;
    text-decoration: none;
    transition: color 0.3s;
    letter-spacing: 0.05em;
}

.footer-links a:hover {
    color: #c9a961;
}

.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2.5rem;
    border: 1px solid #1a1a1a;
    color: #1a1a1a;
    background: transparent;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    cursor: pointer;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.load-more-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #c9a961;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -1;
}

.load-more-btn:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

.load-more-btn:hover {
    color: white;
    border-color: #c9a961;
}

.load-more-btn .btn-icon {
    transition: transform 0.4s ease;
}

.load-more-btn.expanded .btn-icon {
    transform: rotate(180deg);
}

/* ===== LOCATION SECTION - ARCHITECTURAL MAP ===== */
.location-section {
    padding: 6rem 5vw;
    background: #faf9f7;
    position: relative;
    overflow: hidden;
}

.location-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, #c9a961, transparent);
}

.location-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, #c9a961, transparent);
}

.location-compact {
    max-width: 1200px;
    margin: 0 auto;
}

.location-map-wrapper {
    position: relative;
    height: 480px;
    margin-bottom: 2rem;
    perspective: 1000px;
}

.location-frame {
    position: relative;
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    border: 1px solid #e5e5e5;
    overflow: hidden;
    border-radius: 4px;
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(201, 169, 97, 0.1);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.location-frame:hover {
    box-shadow:
        0 35px 80px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(201, 169, 97, 0.3);
}

/* Corner Accents - Architectural */
.loc-corner {
    position: absolute;
    width: 24px;
    height: 24px;
    z-index: 10;
}

.loc-corner::before,
.loc-corner::after {
    content: '';
    position: absolute;
    background: #c9a961;
    transition: all 0.4s ease;
}

.location-frame:hover .loc-corner::before,
.location-frame:hover .loc-corner::after {
    background: #fff;
}

.loc-tl {
    top: 15px;
    left: 15px;
}

.loc-tl::before {
    top: 0;
    left: 0;
    width: 24px;
    height: 1px;
}

.loc-tl::after {
    top: 0;
    left: 0;
    width: 1px;
    height: 24px;
}

.loc-tr {
    top: 15px;
    right: 15px;
}

.loc-tr::before {
    top: 0;
    right: 0;
    width: 24px;
    height: 1px;
}

.loc-tr::after {
    top: 0;
    right: 0;
    width: 1px;
    height: 24px;
}

.loc-bl {
    bottom: 15px;
    left: 15px;
}

.loc-bl::before {
    bottom: 0;
    left: 0;
    width: 24px;
    height: 1px;
}

.loc-bl::after {
    bottom: 0;
    left: 0;
    width: 1px;
    height: 24px;
}

.loc-br {
    bottom: 15px;
    right: 15px;
}

.loc-br::before {
    bottom: 0;
    right: 0;
    width: 24px;
    height: 1px;
}

.loc-br::after {
    bottom: 0;
    right: 0;
    width: 1px;
    height: 24px;
}

/* Compass */
.loc-compass {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(201, 169, 97, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(26, 26, 26, 0.8);
    backdrop-filter: blur(10px);
    z-index: 10;
    font-size: 0.7rem;
    font-weight: 600;
    color: #c9a961;
    letter-spacing: 0.1em;
}

.loc-compass::before {
    content: '';
    position: absolute;
    top: 6px;
    width: 1px;
    height: 8px;
    background: #c9a961;
}

.loc-compass::after {
    content: '';
    position: absolute;
    bottom: 6px;
    width: 1px;
    height: 4px;
    background: rgba(201, 169, 97, 0.4);
}

/* Grid Overlay */
.loc-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(201, 169, 97, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 169, 97, 0.06) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
    z-index: 5;
}

/* Vignette Effect */
.loc-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.5) 100%);
    pointer-events: none;
    z-index: 6;
}

/* Map */
.loc-map {
    position: absolute;
    inset: 0;
}

.loc-map iframe {
    width: 100%;
    height: 100%;
    filter: saturate(0.3) brightness(0.85) contrast(1.1);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.location-frame:hover .loc-map iframe {
    transform: scale(1.05);
    filter: saturate(0.5) brightness(0.9) contrast(1.1);
}

/* Main Marker - Project Location */
.loc-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 10;
    pointer-events: none;
}

.loc-marker-main .marker-core {
    width: 16px;
    height: 16px;
    background: #c9a961;
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(201, 169, 97, 0.3), 0 4px 15px rgba(201, 169, 97, 0.6);
    position: relative;
    z-index: 2;
    animation: markerPulse 2s ease-in-out infinite;
}

@keyframes markerPulse {

    0%,
    100% {
        box-shadow: 0 0 0 4px rgba(201, 169, 97, 0.3), 0 4px 15px rgba(201, 169, 97, 0.6);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(201, 169, 97, 0.2), 0 4px 20px rgba(201, 169, 97, 0.8);
    }
}

.loc-marker-main .marker-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border: 2px solid #c9a961;
    border-radius: 50%;
    animation: locPulse 2.5s ease-out infinite;
}

.loc-marker-main .marker-ring.delay {
    animation-delay: 1s;
}

@keyframes locPulse {
    0% {
        width: 16px;
        height: 16px;
        opacity: 0.8;
    }

    100% {
        width: 70px;
        height: 70px;
        opacity: 0;
    }
}

/* Hotspots */
.loc-hotspot {
    cursor: pointer;
    pointer-events: auto;
}

.loc-hotspot .hotspot-dot {
    width: 12px;
    height: 12px;
    background: white;
    border: 2px solid #c9a961;
    border-radius: 50%;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.loc-hotspot:hover .hotspot-dot {
    transform: scale(1.8);
    background: #c9a961;
    box-shadow: 0 0 0 6px rgba(201, 169, 97, 0.3), 0 4px 15px rgba(201, 169, 97, 0.5);
}

.loc-hotspot::after {
    content: attr(data-info);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    background: rgba(26, 26, 26, 0.95);
    color: white;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(201, 169, 97, 0.3);
}

.loc-hotspot:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-14px);
}

/* Connection Lines SVG */
.loc-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 7;
}

.loc-lines svg {
    width: 100%;
    height: 100%;
}

.loc-lines line {
    stroke: #c9a961;
    stroke-width: 1;
    stroke-dasharray: 4 4;
    opacity: 0.4;
    animation: dashMove 20s linear infinite;
}

@keyframes dashMove {
    to {
        stroke-dashoffset: -100;
    }
}

/* Scale */
.loc-scale {
    position: absolute;
    bottom: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(26, 26, 26, 0.85);
    padding: 6px 12px;
    border-radius: 3px;
    z-index: 10;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(201, 169, 97, 0.3);
    backdrop-filter: blur(10px);
}

.scale-bar {
    width: 30px;
    height: 2px;
    background: #c9a961;
    position: relative;
}

.scale-bar::before,
.scale-bar::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 6px;
    background: #c9a961;
    top: -2px;
}

.scale-bar::before {
    left: 0;
}

.scale-bar::after {
    right: 0;
}

/* Coordinates */
.loc-coords {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: rgba(26, 26, 26, 0.85);
    padding: 6px 14px;
    border-radius: 3px;
    font-size: 0.7rem;
    color: #c9a961;
    letter-spacing: 0.15em;
    border: 1px solid rgba(201, 169, 97, 0.3);
    z-index: 10;
    font-family: 'Vazirmatn', monospace;
    backdrop-filter: blur(10px);
}

/* Access Strip */
.access-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    border: 1px solid #e5e5e5;
    padding: 1.5rem 2.5rem;
    border-radius: 4px;
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.access-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
}

.access-item:hover {
    transform: translateY(-2px);
}

.access-icon {
    width: 40px;
    height: 40px;
    background: #faf9f7;
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c9a961;
    font-size: 0.9rem;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}

.access-item:hover .access-icon {
    background: #c9a961;
    color: white;
    border-color: #c9a961;
    transform: rotate(360deg);
}

.access-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.access-name {
    font-size: 0.85rem;
    font-weight: 400;
    color: #1a1a1a;
}

.access-time {
    font-size: 0.75rem;
    color: #999;
    font-weight: 300;
}

.access-divider {
    width: 1px;
    height: 30px;
    background: #e5e5e5;
    flex-shrink: 0;
}

/* Address Line */
.address-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.25rem;
    background: white;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    color: #666;
    font-size: 0.9rem;
    font-weight: 300;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.address-line i {
    color: #c9a961;
    font-size: 1rem;
}

@media (max-width: 1024px) {

    .grid-asymmetric,
    .magazine-grid {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    .image-reveal,
    .magazine-visual {
        height: 60vh;
        order: -1;
    }

    .units-grid,
    .videos-grid,
    .facilities-grid {
        grid-template-columns: 1fr;
    }

    .stats-editorial,
    .identity-stats {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .accordion-body,
    .magazine-topics {
        grid-template-columns: 1fr 1fr;
    }

    .contact-grid,
    .form-minimal {
        grid-template-columns: 1fr;
    }

    .section {
        padding: 4rem 5vw;
    }

    .location-section {
        padding: 4rem 5vw;
    }

    .nav-container {
        gap: 1.5rem;
    }

    .nav-link-item {
        font-size: 0.8rem;
    }

    .cursor {
        display: none;
    }

    .lightbox-nav {
        width: 50px;
        height: 50px;
        font-size: 1rem;
    }

    .lightbox-prev {
        left: 1rem;
    }

    .lightbox-next {
        right: 1rem;
    }
}

@media (max-width: 768px) {

    .stats-editorial,
    .accordion-body,
    .magazine-topics,
    .identity-stats {
        grid-template-columns: 1fr;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .gallery-filters {
        gap: 0.5rem;
    }

    .gallery-filter-btn {
        padding: 10px 20px;
        font-size: 12px;
    }

    .lightbox-nav {
        display: none;
    }

    .lightbox-caption {
        font-size: 0.9rem;
        padding: 0.75rem 1.25rem;
        white-space: normal;
        max-width: 80%;
        text-align: center;
        bottom: 6rem;
    }

    .lightbox-thumbnails {
        bottom: 1rem;
    }

    .nav-container {
        gap: 1rem;
        padding: 1rem 5vw;
    }

    .nav-link-item {
        font-size: 0.75rem;
    }

    .location-map-wrapper {
        height: 320px;
    }

    .access-strip {
        flex-wrap: wrap;
        gap: 1rem;
        padding: 1rem;
    }

    .access-divider {
        display: none;
    }

    .access-item {
        flex: 0 0 45%;
    }
}

.story-chapter {
    max-width: 860px;
    margin: 0 auto 4.5rem;
    padding: 0 1.25rem;
    text-align: center;
    position: relative;
    z-index: 2;
}

.story-kicker {
    display: inline-block;
    margin-bottom: 1rem;
    color: #c9a961;
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.story-chapter h3 {
    margin: 0 0 1rem;
    color: #1a1a1a;
    font-size: clamp(1.9rem, 3.2vw, 3rem);
    font-weight: 300;
    line-height: 1.55;
}

.story-chapter p {
    max-width: 760px;
    margin: 0 auto;
    color: #6f6f6f;
    font-size: 1.02rem;
    font-weight: 300;
    line-height: 2.15;
}

.story-hero-note {
    margin-top: 1.6rem;
    color: #c9a961;
    font-size: .76rem;
    font-weight: 400;
    letter-spacing: .18em;
    opacity: .95;
}

/* If animation/CDN libraries are unavailable, content must remain visible. */
html.nargoon-no-gsap .hero-subtitle,
html.nargoon-no-gsap .hero-title-line span,
html.nargoon-no-gsap .hero-tagline,
html.nargoon-no-gsap .scroll-indicator,
html.nargoon-no-gsap .identity-number,
html.nargoon-no-gsap .identity-label,
html.nargoon-no-gsap .identity-title,
html.nargoon-no-gsap .identity-description,
html.nargoon-no-gsap .identity-stat,
html.nargoon-no-gsap .reveal,
html.nargoon-no-gsap .lifestyle-luxury-card {
    opacity: 1 !important;
    transform: none !important;
}

html.nargoon-no-gsap .gallery-item:not(.hidden-item):not(.hide) {
    opacity: 1 !important;
    transform: none !important;
}

.leading-loose {
    line-height: 2;
}

@media (max-width: 768px) {
    .story-chapter {
        margin-bottom: 3rem;
    }

    .story-chapter p {
        font-size: .95rem;
    }

    .story-hero-note {
        font-size: .68rem;
        letter-spacing: .1em;
    }
}

.catalogue-inline-wrap {
    text-align: center;
    margin-top: 2rem;
}

.catalogue-inline-link {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    padding: 1rem 1.8rem;
    border: 1px solid #c9a961;
    color: #1a1a1a;
    background: transparent;
    text-decoration: none;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 400;
    transition: all .35s ease;
}

.catalogue-inline-link i {
    color: #c9a961;
    transition: transform .35s ease;
}

.catalogue-inline-link:hover {
    background: #c9a961;
    color: #fff;
}

.catalogue-inline-link:hover i {
    color: #fff;
    transform: translateX(-3px);
}

/* --- Dark Minimal Luxury Contact Styles --- */
.dark-minimal-contact {
    background: linear-gradient(180deg, #0a0a0a 0%, #111111 100%);
    padding: 120px 40px;
    direction: rtl;
    text-align: center;
    font-family: 'Vazirmatn', 'IRANSans', sans-serif;
    position: relative;
    overflow: hidden;
}

/* Subtle background pattern */
.dark-minimal-contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(201, 169, 97, 0.03) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(201, 169, 97, 0.02) 0%, transparent 40%);
    pointer-events: none;
}

.dark-minimal-contact .container {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Header */
.contact-header {
    margin-bottom: 80px;
    animation: fadeInDown 0.8s ease-out;
}

.contact-label {
    display: block;
    font-size: 11px;
    letter-spacing: 6px;
    color: #c9a961;
    margin-bottom: 24px;
    font-weight: 500;
}

.contact-title {
    font-size: 32px;
    font-weight: 300;
    color: #ffffff;
    margin: 0 0 16px 0;
    letter-spacing: 0;
    line-height: 1.4;
}

.contact-desc {
    font-size: 16px;
    color: #888888;
    margin: 0;
    line-height: 1.8;
    font-weight: 300;
}

/* Contact Methods Grid */
.contact-methods {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 60px;
}

/* Individual Method - Glass Card */
.contact-method {
    padding: 50px 40px;
    text-decoration: none;
    color: inherit;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
    animation: fadeInUp 0.8s ease-out backwards;
}

.contact-method:nth-child(1) {
    animation-delay: 0.1s;
}

.contact-method:nth-child(2) {
    animation-delay: 0.2s;
}

.contact-method:nth-child(3) {
    animation-delay: 0.3s;
}

/* Subtle top border accent */
.contact-method::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.4), transparent);
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* Hover Effect - Minimal & Luxurious */
.contact-method:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(201, 169, 97, 0.3);
    transform: translateY(-6px);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(201, 169, 97, 0.1);
}

.contact-method:hover::before {
    opacity: 1;
}

/* WhatsApp Specific */
.whatsapp:hover {
    border-color: rgba(0, 79, 32, 0.4);
    background: rgba(0, 79, 32, 0.05);
}

.method-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.method-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c9a961;
    transition: all 0.4s ease;
}

.contact-method:hover .method-icon {
    color: #c9a961;
    transform: scale(1.1);
}

.whatsapp .method-icon {
    color: #4a7c59;
}

.whatsapp:hover .method-icon {
    color: #5a9c69;
    transform: scale(1.1);
}

.method-label {
    font-size: 11px;
    letter-spacing: 2px;
    color: #666666;
    font-weight: 500;
    transition: color 0.4s ease;
}

.contact-method:hover .method-label {
    color: #c9a961;
}

.whatsapp:hover .method-label {
    color: #5a9c69;
}

.method-value {
    font-size: 20px;
    font-weight: 400;
    color: #ffffff;
    margin: 0;
    letter-spacing: 0.5px;
    transition: color 0.4s ease;
}

.contact-method:hover .method-value {
    color: #ffffff;
}

.whatsapp .method-value {
    color: #4a7c59;
}

.whatsapp:hover .method-value {
    color: #6ab879;
}

.method-sub {
    font-size: 13px;
    color: #666666;
    font-weight: 300;
    transition: color 0.4s ease;
}

.contact-method:hover .method-sub {
    color: #888888;
}

/* Footer Info */
.contact-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    animation: fadeIn 1s ease-out 0.5s backwards;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.info-label {
    font-size: 12px;
    color: #666666;
    font-weight: 400;
}

.info-value {
    font-size: 14px;
    color: #999999;
    font-weight: 400;
    letter-spacing: 0.5px;
}

.info-divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 40px;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .dark-minimal-contact {
        padding: 80px 20px;
    }

    .contact-methods {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .contact-method {
        padding: 40px 24px;
    }

    .contact-info {
        flex-direction: column;
        gap: 16px;
    }

    .info-divider {
        display: none;
    }

    .contact-title {
        font-size: 26px;
    }
}


/* --- Vision Section Styles --- */
.vision-section {
    background-color: #ffffff;
    padding: 80px 40px;
    direction: rtl;
    font-family: "Vazirmatn", "IRANSans", sans-serif;
}

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

/* Header */
.vision-header {
    margin-bottom: 40px;
}

.vision-label {
    display: block;
    font-size: 11px;
    letter-spacing: 4px;
    color: #c9a961;
    margin-bottom: 12px;
    font-weight: 500;
}

.vision-title {
    font-size: 28px;
    font-weight: 300;
    color: #1a1a1a;
    margin: 0;
}

/* Content Wrapper */
.vision-content-wrapper {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 40px;
    align-items: start;
}

/* Right Info Box */
.vision-info-box {
    background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    padding: 24px;
    position: sticky;
    top: 100px;
}

.project-description {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e8e8e8;
}

.description-title {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 12px 0;
}

.description-text {
    font-size: 13px;
    color: #666666;
    line-height: 1.8;
    margin: 0;
    text-align: justify;
}

.quick-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

/* VISION ONLY: two desktop rows of project facts; no other sections affected. */
.vision-section .quick-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.vision-section .quick-stat {
    min-width: 0;
    padding: 12px 4px;
    text-align: center;
}
.vision-section .qs-number {
    font-size: clamp(15px, 1.35vw, 22px);
    line-height: 1.5;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.vision-section .qs-number--place {
    font-size: clamp(14px, 1.2vw, 19px);
}
.vision-section .qs-label {
    line-height: 1.5;
    font-size: 10px;
}

.quick-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #f0f0f0;
}

.qs-number {
    font-size: 24px;
    font-weight: 300;
    color: #c9a961;
    margin-bottom: 4px;
}

.qs-label {
    font-size: 11px;
    color: #888888;
    font-weight: 400;
}

/* Left Main Content */
.vision-main {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Narrative List */
.narrative-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.narrative-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.narrative-num {
    font-size: 14px;
    color: #c9a961;
    font-weight: 600;
    flex-shrink: 0;
    width: 30px;
}

.narrative-text h4 {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 6px 0;
}

.narrative-text p {
    font-size: 13px;
    color: #666666;
    line-height: 1.7;
    margin: 0;
}

.flow-chart {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.flow-chart span {
    font-size: 12px;
    color: #c9a961;
    font-weight: 500;
}

.flow-chart .arrow {
    color: #999999;
    font-size: 14px;
}

/* ============================================ */
/* GALLERY CONTAINER - Image Only */
/* ============================================ */
.gallery-container {
    position: relative;
    width: 100%;
    height: 450px;
    border-radius: 12px;
    overflow: hidden;
    background: #0a0a0a;
    cursor: pointer;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

/* Animated Border Glow */
.border-glow {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #c9a961, transparent, #c9a961, transparent);
    background-size: 400% 400%;
    border-radius: 14px;
    z-index: 1;
    animation: borderGlow 8s ease infinite;
    opacity: 0.3;
}

@keyframes borderGlow {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* Floating Particles */
.particles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(201, 169, 97, 0.5);
    border-radius: 50%;
    animation: float 15s infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateY(-450px) translateX(100px);
        opacity: 0;
    }
}

/* Vignette Effect */
.vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 4;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.3) 100%);
}

/* Gallery Stage */
.gallery-stage {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.gallery-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.gallery-image.active {
    opacity: 1;
}

.gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 10s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gallery-image.active img {
    transform: scale(1.08);
}

/* Large Stage Number */
.stage-number {
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 80px;
    font-weight: 200;
    color: rgba(255, 255, 255, 0.95);
    z-index: 10;
    letter-spacing: -3px;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    transition: all 0.8s ease;
    font-family: "Georgia", serif;
}

/* Navigation Arrows */
.gallery-nav {
    position: absolute;
    top: 50%;
    right: 20px;
    left: 20px;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    z-index: 10;
    pointer-events: none;
}

.nav-arrow {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    pointer-events: auto;
}

.nav-arrow:hover {
    background: rgba(201, 169, 97, 0.4);
    border-color: #c9a961;
    transform: scale(1.15);
    box-shadow: 0 4px 20px rgba(201, 169, 97, 0.4);
}

.nav-arrow:active {
    transform: scale(0.95);
}

/* ============================================ */
/* CAPTION BELOW IMAGE (Gallery Style) */
/* ============================================ */
.gallery-caption {
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 20px 24px;
    margin-top: -1px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.caption-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.caption-right {
    flex: 1;
}

.caption-stage {
    display: block;
    font-size: 11px;
    letter-spacing: 3px;
    color: #c9a961;
    margin-bottom: 8px;
    font-weight: 600;
    text-transform: uppercase;
}

.caption-title {
    font-size: 24px;
    font-weight: 400;
    color: #1a1a1a;
    margin: 0 0 6px 0;
    letter-spacing: 0.5px;
    transition: all 0.6s ease;
}

.caption-subtitle {
    font-size: 13px;
    color: #888888;
    margin: 0;
    font-weight: 300;
    letter-spacing: 1px;
}

.caption-left {
    display: flex;
    align-items: center;
}

.caption-dots {
    display: flex;
    gap: 10px;
}

.caption-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e8e8e8;
    cursor: pointer;
    transition: all 0.3s ease;
}

.caption-dot.active {
    background: #c9a961;
    transform: scale(1.3);
    box-shadow: 0 0 10px rgba(201, 169, 97, 0.4);
}

.caption-dot:hover {
    background: rgba(201, 169, 97, 0.5);
}

/* Progress Bar */
.caption-progress {
    width: 100%;
}

.progress-bar {
    width: 100%;
    height: 2px;
    background: #f0f0f0;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #c9a961, #c9a961);
    transition: width 0.6s ease;
    width: 33.33%;
    box-shadow: 0 0 8px rgba(201, 169, 97, 0.4);
}

.progress-timer {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    background: rgba(201, 169, 97, 0.2);
    width: 0%;
    animation: timerProgress 6s linear infinite;
}

@keyframes timerProgress {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

/* Responsive */
@media (max-width: 992px) {
    .vision-content-wrapper {
        grid-template-columns: 1fr;
    }

    .vision-info-box {
        position: static;
        order: 2;
    }

    .vision-main {
        order: 1;
    }
}

@media (max-width: 768px) {
    .vision-section {
        padding: 40px 20px;
    }

    .quick-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .vision-section .quick-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vision-title {
        font-size: 24px;
    }

    .gallery-container {
        height: 320px;
    }

    .stage-number {
        font-size: 56px;
        top: 20px;
        right: 20px;
    }

    .caption-title {
        font-size: 20px;
    }

    .caption-main {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .caption-left {
        align-self: flex-end;
    }

    .gallery-nav {
        right: 10px;
        left: 10px;
    }

    .nav-arrow {
        width: 44px;
        height: 44px;
    }
}


/* Lifestyle Styles */

.nargoon-lifestyle-luxury {
	padding: 150px 0;
	background: #ffffff;
	font-family: inherit;
	direction: rtl;
	overflow: hidden;
	position: relative;
}

/* افکت گرین لوکس روی کل سکشن */
.nargoon-lifestyle-luxury::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.02"/%3E%3C/svg%3E");
	pointer-events: none;
	z-index: 0;
}

.lifestyle-luxury-header {
	text-align: center;
	margin-bottom: 120px;
	padding: 0 40px;
	position: relative;
	z-index: 1;
}

/* خط طلایی انیمیشنی بالای هدر */
.lifestyle-luxury-header::before {
	content: "";
	display: block;
	width: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, #c9a961, transparent);
	margin: 0 auto 40px;
	animation: lineExpand 2s ease-out forwards;
	animation-delay: 0.3s;
}

@keyframes lineExpand {
	to {
		width: 120px;
	}
}

.lifestyle-luxury-header h2 {
	font-size: 2.8rem;
	font-weight: 300;
	color: #1a1a1a;
	margin-bottom: 30px;
	letter-spacing: 4px;
	opacity: 0;
	transform: translateY(30px);
	animation: fadeUp 1s ease-out forwards;
	animation-delay: 0.5s;
}

.lifestyle-luxury-header h2 span {
	color: #c9a961;
	font-weight: 600;
	position: relative;
}

/* افکت درخشش روی کلمه طلایی */
.lifestyle-luxury-header h2 span::after {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	animation: shimmer 3s ease-in-out infinite;
	animation-delay: 1.5s;
}

@keyframes shimmer {

	0%,
	100% {
		left: -100%;
	}

	50% {
		left: 100%;
	}
}

.lifestyle-luxury-header p {
	font-size: 1.15rem;
	color: #666;
	line-height: 2.2;
	max-width: 700px;
	margin: 0 auto;
	font-weight: 300;
	opacity: 0;
	transform: translateY(20px);
	animation: fadeUp 1s ease-out forwards;
	animation-delay: 0.8s;
}

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

.lifestyle-luxury-container {
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 20px;
	position: relative;
	z-index: 1;
}

.lifestyle-luxury-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}

.lifestyle-luxury-card {
	position: relative;
	height: 650px;
	overflow: hidden;
	cursor: pointer;
	opacity: 0;
	transform: translateY(60px);
	transition: opacity 1s ease, transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.lifestyle-luxury-card.revealed {
	opacity: 1;
	transform: translateY(0);
}

.lifestyle-luxury-card:nth-child(2) {
	transition-delay: 0.2s;
}

.lifestyle-luxury-card:nth-child(3) {
	transition-delay: 0.4s;
}

/* قاب طلایی ظریف دور کارت */
.lifestyle-luxury-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid rgba(201, 169, 97, 0);
	border-radius: 2px;
	z-index: 10;
	transition: border-color 0.6s ease;
	pointer-events: none;
}

.lifestyle-luxury-card:hover::before {
	border-color: rgba(201, 169, 97, 0.4);
}

.lifestyle-luxury-image-wrapper {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.lifestyle-luxury-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: transform;
}

.lifestyle-luxury-card:hover .lifestyle-luxury-image {
	transform: scale(1.08);
}

/* افکت parallax با حرکت موس */
.lifestyle-luxury-card[data-parallax] .lifestyle-luxury-image {
	transition: transform 0.3s ease-out;
}

.lifestyle-luxury-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom,
			rgba(0, 0, 0, 0.05) 0%,
			rgba(0, 0, 0, 0.25) 50%,
			rgba(0, 0, 0, 0.8) 100%);
	transition: all 0.8s ease;
}

.lifestyle-luxury-card:hover .lifestyle-luxury-overlay {
	background: linear-gradient(to bottom,
			rgba(0, 0, 0, 0.1) 0%,
			rgba(0, 0, 0, 0.35) 50%,
			rgba(0, 0, 0, 0.9) 100%);
}

/* خط طلایی متحرک پایین کارت */
.lifestyle-luxury-accent {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, #c9a961, transparent);
	transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	z-index: 5;
}

.lifestyle-luxury-card:hover .lifestyle-luxury-accent {
	width: 100%;
}

.lifestyle-luxury-content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 50px 35px;
	color: #ffffff;
	z-index: 3;
}

.lifestyle-luxury-time {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 0.8rem;
	color: #c9a961;
	margin-bottom: 20px;
	letter-spacing: 3px;
	text-transform: uppercase;
	font-weight: 600;
	opacity: 0;
	transform: translateX(20px);
	transition: all 0.6s ease 0.1s;
}

.lifestyle-luxury-card:hover .lifestyle-luxury-time {
	opacity: 1;
	transform: translateX(0);
}

.lifestyle-luxury-time::before {
	content: "";
	width: 30px;
	height: 1px;
	background: #c9a961;
}

.lifestyle-luxury-title {
	font-size: 2rem;
	font-weight: 300;
	margin-bottom: 15px;
	letter-spacing: 2px;
	line-height: 1.4;
	transition: transform 0.6s ease;
}

.lifestyle-luxury-card:hover .lifestyle-luxury-title {
	transform: translateY(-5px);
}

.lifestyle-luxury-title strong {
	font-weight: 600;
	display: block;
	margin-top: 12px;
	color: #ffffff;
}

.lifestyle-luxury-desc {
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.9);
	line-height: 2;
	margin-bottom: 30px;
	opacity: 0;
	transform: translateY(15px);
	transition: all 0.6s ease 0.2s;
}

.lifestyle-luxury-card:hover .lifestyle-luxury-desc {
	opacity: 1;
	transform: translateY(0);
}

.lifestyle-luxury-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	opacity: 0;
	transform: translateY(15px);
	transition: all 0.6s ease 0.3s;
}

.lifestyle-luxury-card:hover .lifestyle-luxury-tags {
	opacity: 1;
	transform: translateY(0);
}

.lifestyle-luxury-tag {
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: #ffffff;
	padding: 8px 20px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 1px;
	transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	position: relative;
	overflow: hidden;
}

/* افکت shine روی تگ‌ها */
.lifestyle-luxury-tag::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.3), transparent);
	transition: left 0.6s ease;
}

.lifestyle-luxury-tag:hover::before {
	left: 100%;
}

.lifestyle-luxury-tag:hover {
	background: rgba(201, 169, 97, 0.15);
	border-color: #c9a961;
	color: #c9a961;
	transform: translateY(-2px);
}

/* شماره بزرگ پس‌زمینه */
.lifestyle-luxury-number {
	position: absolute;
	top: 30px;
	right: 30px;
	font-size: 8rem;
	font-weight: 100;
	color: rgba(255, 255, 255, 0.08);
	line-height: 1;
	z-index: 2;
	transition: all 0.6s ease;
	font-family: "Georgia", serif;
}

.lifestyle-luxury-card:hover .lifestyle-luxury-number {
	color: rgba(201, 169, 97, 0.15);
	transform: scale(1.1);
}

@media (max-width: 1200px) {
	.lifestyle-luxury-row {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.lifestyle-luxury-card {
		height: 550px;
	}

	.lifestyle-luxury-desc,
	.lifestyle-luxury-tags,
	.lifestyle-luxury-time {
		opacity: 1;
		transform: translateY(0) translateX(0);
	}

	.lifestyle-luxury-card {
		opacity: 1;
		transform: translateY(0);
	}
}


/* Units Style */

.floor-status-premium {
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 12px;
	padding: 3rem;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

.floor-status-header-premium {
	text-align: center;
	margin-bottom: 2.5rem;
}

.floor-status-header-premium h3 {
	font-size: 1.75rem;
	font-weight: 300;
	color: #1a1a1a;
	margin-bottom: 0.5rem;
	letter-spacing: 1px;
}

.floor-status-header-premium p {
	color: #666;
	font-size: 0.95rem;
}

.floor-stats-premium {
	display: flex;
	justify-content: center;
	gap: 2rem;
	margin-bottom: 2.5rem;
	flex-wrap: wrap;
}

.floor-stat-premium {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 2rem;
	background: #fafafa;
	border-radius: 8px;
	border: 1px solid #e5e5e5;
}

.floor-stat-premium .stat-icon {
	font-size: 1.5rem;
	color: #c9a961;
}

.floor-stat-premium .stat-number {
	font-size: 1.75rem;
	font-weight: 600;
	color: #1a1a1a;
}

.floor-stat-premium .stat-label {
	font-size: 0.8rem;
	color: #666;
	font-weight: 500;
}

.floor-tabs-premium {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 0.75rem;
	margin-bottom: 2.5rem;
	padding: 2rem;
	background: #fafafa;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
}

.floor-tab-premium {
	padding: 1rem;
	background: #fff;
	border: 1.5px solid #d5d5d5;
	border-radius: 6px;
	cursor: pointer;
	font-family: "Vazirmatn", sans-serif;
	font-size: 0.95rem;
	font-weight: 500;
	color: #333;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	text-align: center;
}

.floor-tab-premium:hover {
	border-color: #c9a961;
	color: #c9a961;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(201, 169, 97, 0.15);
}

.floor-tab-premium.active {
	background: #c9a961;
	border-color: #c9a961;
	color: #fff;
	box-shadow: 0 4px 15px rgba(201, 169, 97, 0.3);
}

.floor-tab-premium.sold {
	opacity: 0.85;
	cursor: not-allowed;
	background: #f5f5f5;
	border-color: #e5e5e5;
	color: #666;
}

.units-premium-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}

.unit-premium-card {
	background: #fff;
	border: 2px solid #e5e5e5;
	border-radius: 8px;
	padding: 1.75rem;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

.unit-premium-card::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 4px;
	height: 100%;
	background: linear-gradient(to bottom, #c9a961, #c9a961);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 0.4s ease;
}

.unit-premium-card:hover {
	border-color: #c9a961;
	box-shadow: 0 8px 25px rgba(201, 169, 97, 0.15);
	transform: translateY(-3px);
}

.unit-premium-card:hover::before {
	transform: scaleY(1);
}

.unit-premium-card.sold {
	opacity: 0.65;
	background: linear-gradient(135deg, #f9f9f9 0%, #f5f5f5 100%);
}

.unit-premium-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.25rem;
	padding-bottom: 1rem;
	border-bottom: 2px solid #f0f0f0;
}

.unit-premium-id {
	font-size: 1.25rem;
	font-weight: 600;
	color: #1a1a1a;
	letter-spacing: 0.5px;
}

.status-badge-premium {
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.5rem 1.25rem;
	border-radius: 50px;
	letter-spacing: 0.5px;
}

.status-badge-premium.available {
	background: linear-gradient(135deg, rgba(201, 169, 97, 0.15) 0%, rgba(201, 169, 97, 0.1) 100%);
	color: #c9a961;
	border: 1.5px solid rgba(201, 169, 97, 0.4);
}

.status-badge-premium.sold {
	background: #f0f0f0;
	color: #666;
	border: 1.5px solid #e5e5e5;
}

.unit-premium-specs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

.spec-premium-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem;
	background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
	border-radius: 6px;
	border: 1px solid #f0f0f0;
}

.spec-premium-icon {
	font-size: 1.1rem;
	color: #c9a961;
	width: 24px;
	text-align: center;
}

.spec-premium-info {
	display: flex;
	flex-direction: column;
}

.spec-premium-label {
	font-size: 0.7rem;
	color: #666;
	line-height: 1;
	font-weight: 500;
	margin-bottom: 2px;
}

.spec-premium-value {
	font-size: 0.95rem;
	color: #1a1a1a;
	font-weight: 600;
	line-height: 1.2;
}

.unit-premium-cta {
	margin-top: 1.25rem;
	text-align: center;
}

.unit-premium-btn {
	display: block;
	width: 100%;
	padding: 0.75rem;
	background: linear-gradient(135deg, #c9a961 0%, #c9a961 100%);
	color: #fff;
	border: none;
	border-radius: 6px;
	font-family: "Vazirmatn", sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	text-decoration: none;
	box-shadow: 0 4px 15px rgba(201, 169, 97, 0.3);
}

.unit-premium-btn:hover {
	background: linear-gradient(135deg, #c9a961 0%, #c9a961 100%);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(201, 169, 97, 0.4);
}

.unit-premium-btn.sold {
	background: linear-gradient(135deg, #e5e5e5 0%, #d5d5d5 100%);
	color: #999;
	cursor: not-allowed;
	box-shadow: none;
}

.unit-premium-btn.sold:hover {
	transform: none;
}

@media (max-width: 768px) {
	.floor-status-premium {
		padding: 2rem 1.5rem;
	}

	.floor-tabs-premium {
		grid-template-columns: repeat(4, 1fr);
	}

	.units-premium-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}


/* Articles Styles */

.nargoon-articles-final {
	padding: 100px 0;
	background: #fafafa;
	font-family: inherit;
	direction: rtl;
}

.articles-header {
	text-align: center;
	margin-bottom: 50px;
	padding: 0 20px;
}

.articles-header h2 {
	font-size: 2rem;
	font-weight: 300;
	color: #1a1a1a;
	margin-bottom: 10px;
	letter-spacing: 2px;
}

.articles-header h2 span {
	color: #c9a961;
	font-weight: 600;
}

.articles-header p {
	font-size: 0.95rem;
	color: #888;
	max-width: 500px;
	margin: 0 auto;
}

.articles-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 20px;
}

.articles-slider {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding: 10px 0 30px;
}

.articles-slider::-webkit-scrollbar {
	display: none;
}

.article-card {
	flex: 0 0 calc(25% - 18px);
	min-width: 280px;
	scroll-snap-align: start;
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, 0.04);
	cursor: pointer;
	transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.article-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 15px 35px rgba(201, 169, 97, 0.1);
	border-color: rgba(201, 169, 97, 0.2);
}

.article-image-wrapper {
	position: relative;
	height: 180px;
	overflow: hidden;
}

.article-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.article-card:hover .article-image {
	transform: scale(1.05);
}

.article-shine {
	position: absolute;
	top: 0;
	left: -100%;
	width: 50%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	transform: skewX(-20deg);
	z-index: 2;
	pointer-events: none;
	transition: left 0.6s ease;
}

.article-card:hover .article-shine {
	left: 150%;
}

.article-accent {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 3px;
	background: linear-gradient(90deg, #c9a961, #c9a961, #c9a961);
	transition: width 0.5s ease;
	z-index: 3;
	box-shadow: 0 0 10px rgba(201, 169, 97, 0.5);
}

.article-card:hover .article-accent {
	width: 100%;
}

.article-content {
	padding: 20px;
}

.article-category {
	font-size: 0.7rem;
	color: #c9a961;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 10px;
}

.article-title {
	font-size: 1.05rem;
	font-weight: 600;
	color: #1a1a1a;
	line-height: 1.5;
	margin-bottom: 10px;
	transition: color 0.3s ease;
}

.article-card:hover .article-title {
	color: #c9a961;
}

.article-excerpt {
	font-size: 0.8rem;
	color: #888;
	line-height: 1.6;
	margin-bottom: 15px;
}

.article-meta {
	font-size: 0.75rem;
	color: #aaa;
	border-top: 1px solid rgba(0, 0, 0, 0.05);
	padding-top: 12px;
	display: flex;
	justify-content: space-between;
}

.articles-nav {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 30px;
}

.nav-button {
	width: 44px;
	height: 44px;
	border: 1px solid rgba(201, 169, 97, 0.3);
	background: transparent;
	color: #c9a961;
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	font-size: 1.1rem;
}

.nav-button::before {
	content: "";
	position: absolute;
	inset: 0;
	background: #c9a961;
	transform: scale(0);
	transition: transform 0.3s ease;
	border-radius: 50%;
	z-index: 0;
}

.nav-button:hover::before {
	transform: scale(1);
}

.nav-button:hover {
	color: #fff;
	border-color: #c9a961;
}

.nav-button span {
	position: relative;
	z-index: 1;
}

@media (max-width: 1024px) {
	.article-card {
		flex: 0 0 calc(50% - 12px);
	}
}

@media (max-width: 600px) {
	.article-card {
		flex: 0 0 85%;
	}
}


/* ===== PROJECT GALLERY PAGINATION - SCOPED ===== */
#gallery .gallery-pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

#gallery #galleryLoadMoreBtn[hidden],
#gallery #galleryLoadLessBtn[hidden] {
    display: none !important;
}

#galleryGrid .gallery-item.gallery-managed-visible {
    display: block !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

#galleryGrid .gallery-item.gallery-managed-hidden {
    display: none !important;
}

#galleryGrid .gallery-item.gallery-managed-visible.gallery-just-revealed {
    animation: galleryManagedReveal 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes galleryManagedReveal {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ===== LIGHTBOX CONTROLS FIX ===== */
.lightbox-close {
    z-index: 30 !important;
    display: flex !important;
}

.lightbox-nav {
    z-index: 30 !important;
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.lightbox-prev {
    left: 2rem !important;
}

.lightbox-next {
    right: 2rem !important;
}

.lightbox-autoplay {
    z-index: 30 !important;
}


/* ===== PROJECT LIGHTBOX CONTROLS FINAL ===== */
#lightbox .lightbox-close,
#lightbox .lightbox-nav {
    z-index: 10050 !important;
}

#lightbox #lightbox-autoplay {
    display: none !important;
}


/* ===== BOOTSTRAP LIGHTBOX ICONS FINAL ===== */
#lightbox .lightbox-close,
#lightbox .lightbox-nav {
    display:flex !important;
    align-items:center;
    justify-content:center;
    z-index:10050 !important;
}

#lightbox .lightbox-close i,
#lightbox .lightbox-nav i {
    display:block;
    font-size:1.35rem;
    line-height:1;
    color:#fff;
    pointer-events:none;
}

#lightbox .lightbox-close:hover i,
#lightbox .lightbox-nav:hover i {
    color:#fff;
}


/* ==========================================================================
   NARGOON TOWERS DETAIL — GOLD COLOR NORMALIZATION / V1
   Scope: color values only.
   All legacy yellow/gold accent families are normalized to #c9a961.
   Layout, typography, spacing, motion, responsive behavior and JS are unchanged.
   ========================================================================== */


/* ==========================================================================
   NARGOON TOWERS DETAIL — UNIFIED EDITORIAL TABS / V2
   Scope: gallery filters, unit filters, floor tabs only.
   Visual/interaction language matches the Visual Story page:
   transparent text tabs + active gold underline + restrained hover.
   ========================================================================== */
:root {
    --nargoon-detail-tab-gold: #c9a961;
    --nargoon-detail-tab-ink: #171717;
    --nargoon-detail-tab-muted: #8b877f;
    --nargoon-detail-tab-line: rgba(23, 23, 23, .12);
    --nargoon-detail-tab-ease: cubic-bezier(.16, 1, .3, 1);
}

/* One shared toolbar language for every filter/tab group. */
.gallery-filters,
.unit-filters,
.floor-tabs-premium {
    align-items: center;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--nargoon-detail-tab-line);
    border-bottom: 1px solid var(--nargoon-detail-tab-line);
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(.15rem, .8vw, .65rem);
    justify-content: center;
    margin-bottom: clamp(2.2rem, 4vw, 3.5rem);
    padding: 1.1rem 0;
}

/* Shared tab anatomy — no pills, no boxed buttons. */
.gallery-filter-btn,
.filter-btn,
.floor-tab-premium {
    appearance: none;
    -webkit-appearance: none;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--nargoon-detail-tab-muted) !important;
    cursor: pointer;
    font-family: 'Vazirmatn', sans-serif;
    font-size: .78rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.5;
    margin: 0;
    min-width: 0;
    padding: .75rem .72rem !important;
    position: relative;
    text-align: center;
    transform: none !important;
    transition:
        color .3s ease,
        font-weight .3s ease !important;
    white-space: nowrap;
}

/* The same cinematic underline used on Visual Story tabs. */
.gallery-filter-btn::after,
.filter-btn::after,
.floor-tab-premium::after {
    background: var(--nargoon-detail-tab-gold);
    bottom: .15rem;
    content: '';
    height: 1px;
    position: absolute;
    right: .72rem;
    transition: width .4s var(--nargoon-detail-tab-ease);
    width: 0;
}

/* Hover stays editorial/minimal; no lift, fill or pill treatment. */
.gallery-filter-btn:hover,
.filter-btn:hover,
.floor-tab-premium:hover {
    color: var(--nargoon-detail-tab-ink) !important;
    transform: none !important;
}

/* Active state = darker text + animated gold underline. */
.gallery-filter-btn.active,
.filter-btn.active,
.floor-tab-premium.active {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--nargoon-detail-tab-ink) !important;
    font-weight: 600;
    box-shadow: none !important;
}

.gallery-filter-btn.active::after,
.filter-btn.active::after,
.floor-tab-premium.active::after {
    width: calc(100% - 1.44rem);
}

/* Disabled/sold floor tabs remain visibly unavailable, without breaking
   the shared tab system. */
.floor-tab-premium.sold {
    background: transparent !important;
    border: 0 !important;
    color: #aaa !important;
    cursor: not-allowed;
    opacity: .62;
}

.floor-tab-premium.sold::after {
    display: none;
}

.floor-tab-premium.sold:hover {
    color: #aaa !important;
}

/* Responsive: preserve the same interaction, allow horizontal scrolling
   instead of changing the visual language. */
@media (max-width: 900px) {
    .gallery-filters,
    .unit-filters,
    .floor-tabs-premium {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .gallery-filters::-webkit-scrollbar,
    .unit-filters::-webkit-scrollbar,
    .floor-tabs-premium::-webkit-scrollbar {
        display: none;
    }

    .gallery-filter-btn,
    .filter-btn,
    .floor-tab-premium {
        flex: 0 0 auto;
        font-size: .75rem;
        padding: .7rem .65rem !important;
    }

    .gallery-filter-btn::after,
    .filter-btn::after,
    .floor-tab-premium::after {
        right: .65rem;
    }

    .gallery-filter-btn.active::after,
    .filter-btn.active::after,
    .floor-tab-premium.active::after {
        width: calc(100% - 1.3rem);
    }
}


/* LOCATION V16 — enhancement only; core map sizing is inline in the HTML */
#location .ngdt-hard-map > div:first-child > svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}
#location .ngdt-hard-map > div:first-child > svg > rect:first-child {
    fill: transparent !important;
}
#location .ngdt-hard-map > div:first-child > svg path {
    vector-effect: non-scaling-stroke;
}
#location .ngdt-hard-map [data-loc-route]:hover > span:first-child {
    background: #c9a961 !important;
    transform: scale(1.25);
}
@media (max-width: 520px) {
    #location .ngdt-hard-map {
        width: min(340px, calc(100vw - 28px)) !important;
        height: min(300px, 78vw) !important;
        min-height: 250px !important;
    }
}


/* ==========================================================================
   NARGOON TOWERS DETAIL — LOCATION / V21
   Base map: V19 (V16 map with on-map route/distance overlays removed).
   Critical desktop design is also inline in HTML to survive stale CSS cache.
   ========================================================================== */

#location .ngdt-location-v21 .ngdt-hard-map {
    flex: 0 0 auto;
}

#location .ngdt-access-card__item:hover {
    background: rgba(201,169,97,.035);
}

/* Responsive only — desktop styling is already hard-bound inline. */
@media (max-width: 900px) {
    #location .ngdt-location-v21__layout {
        width: min(680px, calc(100% - 32px)) !important;
        grid-template-columns: 1fr !important;
        gap: 22px !important;
    }

    #location .ngdt-access-card {
        padding: 20px !important;
    }

    #location .ngdt-access-card__list {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
    }

    #location .ngdt-access-card__item {
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        text-align: center !important;
        border-bottom: 0 !important;
        border-left: 1px solid rgba(23,23,23,.07) !important;
        padding: 12px 6px !important;
    }

    #location .ngdt-access-card__item:last-child {
        border-left: 0 !important;
    }

    #location .ngdt-access-card__item > div:last-child {
        flex-direction: column !important;
        align-items: center !important;
        gap: 2px !important;
    }
}

@media (max-width: 600px) {
    #location .ngdt-location-v21__layout {
        width: calc(100% - 20px) !important;
    }

    #location .ngdt-access-card__list {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    #location .ngdt-access-card__item {
        border-left: 0 !important;
        border-bottom: 1px solid rgba(23,23,23,.07) !important;
    }
}


/* ===== PROJECT GALLERY ROW CONTROLS + DEFERRED IMAGES - SCOPED ===== */
#gallery .gallery-pagination-controls {
    margin-top: 2.25rem;
}

#gallery .gallery-pagination-controls .load-more-btn {
    min-width: 158px;
}

#gallery .gallery-load-less-btn {
    opacity: .78;
}

#gallery .gallery-load-less-btn:hover {
    opacity: 1;
}

/* No broken-image flash before JS hydrates a visible card. */
#galleryGrid .gallery-item img:not([src]) {
    visibility: hidden;
}

#galleryGrid .gallery-item.gallery-managed-visible img[src] {
    visibility: visible;
}


/* ==========================================================================
   PROJECT GALLERY V27 — robust 2-row first paint + per-tab deferred loading
   ========================================================================== */

/* The first two rows are rendered visibly even before JS finishes booting. */
#galleryGrid .gallery-item.show:not(.gallery-managed-hidden) {
    opacity: 1;
    transform: translateY(0);
}

/* Deferred cards have no src until their row/tab becomes visible. */
#galleryGrid .gallery-item.hidden-item:not(.gallery-managed-visible) {
    display: none;
}

/* Prevent a blank/broken image placeholder before deferred hydration. */
#galleryGrid .gallery-item img[data-src]:not([src]) {
    visibility: hidden;
}

#galleryGrid .gallery-item.gallery-managed-visible img[src],
#galleryGrid .gallery-item.show img[src] {
    visibility: visible;
}

/* ==========================================================================
   PERFORMANCE V29 — visual-neutral optimizations
   ========================================================================== */

/* Isolate gallery card paint/layout work without changing dimensions or appearance. */
#galleryGrid .gallery-item {
    contain: layout paint style;
}

/* Avoid expensive offscreen paint work for gallery items that are intentionally hidden. */
#galleryGrid .gallery-item.hidden-item:not(.gallery-managed-visible) {
    content-visibility: hidden;
}

/* ===== PROJECT FILM V34 — match Gallery load-button hover ===== */
#film .load-more-btn {
    isolation: isolate;
}

#film .load-more-btn::before {
    z-index: 0;
}

#film .load-more-btn .btn-text,
#film .load-more-btn .btn-icon {
    position: relative;
    z-index: 1;
}


/* ===== AVAILABLE UNITS — FILTER + ROW CONTROLS (SCOPED) ===== */
#units .units-pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2.25rem;
}

#units .units-pagination-controls .load-more-btn {
    min-width: 158px;
    isolation: isolate;
}

#units .units-pagination-controls .load-more-btn::before {
    z-index: 0;
}

#units .units-pagination-controls .btn-text,
#units .units-pagination-controls .btn-icon {
    position: relative;
    z-index: 1;
}

#units .units-load-less-btn {
    opacity: .78;
}

#units .units-load-less-btn:hover {
    opacity: 1;
}

#units #unitsLoadMoreBtn[hidden],
#units #unitsLoadLessBtn[hidden] {
    display: none !important;
}

#unitsGrid .unit-card.hidden-item {
    display: none;
}

#unitsGrid .unit-card.hidden-item.show {
    display: block;
    opacity: 1;
    transform: none;
}


/* ===== AVAILABLE UNITS V38 — hard scoped filtering + exact Gallery controls ===== */
#unitsGrid .unit-card.units-managed-hidden {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#unitsGrid .unit-card.units-managed-visible {
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
}

/* Use the exact Gallery pagination behavior/spacing for Units. */
#units .gallery-pagination-controls.units-pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2.25rem;
}

#units .gallery-pagination-controls.units-pagination-controls .load-more-btn {
    min-width: 158px;
    isolation: isolate;
}

#units .gallery-pagination-controls.units-pagination-controls .load-more-btn::before {
    z-index: 0;
}

#units .gallery-pagination-controls.units-pagination-controls .btn-text,
#units .gallery-pagination-controls.units-pagination-controls .btn-icon {
    position: relative;
    z-index: 1;
}

#units .gallery-load-less-btn.units-load-less-btn {
    opacity: .78;
}

#units .gallery-load-less-btn.units-load-less-btn:hover {
    opacity: 1;
}

#units #unitsLoadMoreBtn[hidden],
#units #unitsLoadLessBtn[hidden] {
    display: none !important;
}


/* =========================================================
   09 / ARTICLES — Journal card treatment
   Header/content remain unchanged; only cards/slider/nav.
   ========================================================= */

#articles .articles-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 20px;
	overflow: hidden;
}

#articles .articles-slider {
	--articles-gap: 32px;
	display: flex;
	flex-direction: row-reverse;
	direction: ltr;
	gap: var(--articles-gap);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding: 28px 0 18px;
	counter-reset: nargoon-article;
	overscroll-behavior-inline: contain;
}

#articles .articles-slider::-webkit-scrollbar {
	display: none;
}

#articles .article-card {
	counter-increment: nargoon-article;
	position: relative;
	flex: 0 0 calc((100% - (var(--articles-gap) * 2)) / 3);
	min-width: 0;
	direction: rtl;
	scroll-snap-align: start;
	background: transparent;
	border: 0;
	border-radius: 0;
	overflow: visible;
	cursor: pointer;
	padding-top: 28px;
	box-shadow: none;
	transform: none;
	transition: transform .45s cubic-bezier(.22,.61,.36,1);
}

#articles .article-card::before {
	content: counter(nargoon-article, decimal-leading-zero);
	position: absolute;
	top: 0;
	right: 0;
	color: #c9a961;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .16em;
	line-height: 1;
	direction: ltr;
}

#articles .article-card:hover {
	transform: translateY(-3px);
	box-shadow: none;
	border-color: transparent;
}

#articles .article-image-wrapper {
	position: relative;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #eee9df;
}

#articles .article-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: transform .75s cubic-bezier(.22,.61,.36,1), filter .75s ease;
}

#articles .article-card:hover .article-image {
	transform: scale(1.025);
}

#articles .article-shine {
	display: none;
}

#articles .article-accent {
	position: absolute;
	right: 0;
	left: auto;
	bottom: 0;
	width: 0;
	height: 2px;
	background: #c9a961;
	box-shadow: none;
	transition: width .5s cubic-bezier(.22,.61,.36,1);
	z-index: 3;
}

#articles .article-card:hover .article-accent {
	width: 100%;
}

#articles .article-content {
	position: static;
	padding: 22px 0 0;
}

#articles .article-category {
	position: absolute;
	top: 42px;
	right: 14px;
	z-index: 4;
	margin: 0;
	padding: 8px 12px 7px;
	background: rgba(250, 248, 243, .95);
	color: #b58e43;
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

#articles .article-title {
	margin: 0 0 12px;
	color: #1d2420;
	font-size: clamp(18px, 1.35vw, 23px);
	font-weight: 500;
	line-height: 1.75;
	letter-spacing: -.025em;
	transition: color .3s ease;
}

#articles .article-card:hover .article-title {
	color: #1d2420;
}

#articles .article-excerpt {
	margin: 0 0 18px;
	color: #7c7c77;
	font-size: 13px;
	font-weight: 300;
	line-height: 2;
	min-height: 52px;
}

#articles .article-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 0;
	padding: 15px 0 0;
	border-top: 1px solid rgba(31, 36, 33, .14);
	color: #9b978e;
	font-size: 11px;
	line-height: 1.5;
}

#articles .articles-nav {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 10px;
	margin-top: 30px;
	direction: rtl;
}

#articles .nav-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid rgba(31, 36, 33, .22);
	border-radius: 0;
	background: transparent;
	color: #26312c;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	overflow: hidden;
	transition: border-color .3s ease, color .3s ease, background-color .3s ease, opacity .3s ease;
}

#articles .nav-button::before {
	display: none;
}

#articles .nav-button span {
	position: relative;
	z-index: 1;
}

#articles .nav-button:hover:not(:disabled) {
	border-color: #c9a961;
	background: #c9a961;
	color: #fff;
}

#articles .nav-button:disabled {
	opacity: .28;
	cursor: default;
}

@media (max-width: 980px) {
	#articles .articles-slider {
		--articles-gap: 24px;
	}

	#articles .article-card {
		flex-basis: calc((100% - var(--articles-gap)) / 2);
	}
}

@media (max-width: 640px) {
	#articles .articles-container {
		padding: 0 18px;
	}

	#articles .articles-slider {
		--articles-gap: 18px;
		padding-top: 26px;
	}

	#articles .article-card {
		flex-basis: 100%;
	}

	#articles .article-title {
		font-size: 19px;
	}

	#articles .articles-nav {
		margin-top: 22px;
	}
}



/* V46 — Articles slider movement fix (scoped) */
#articles .articles-container {
    overflow: hidden;
}
#articles .articles-slider {
    overflow: visible;
    scroll-behavior: auto;
    scroll-snap-type: none;
    will-change: transform;
    transition: transform .62s cubic-bezier(.22,.61,.36,1);
}


/* =========================================================
   GLOBAL NAVIGATION — Nargoon Frosted Glass
   Visual-only override. No DOM / JS changes.
   ========================================================= */

/* Main site header */
body.nargoon-detail-page .header,
body.nargoon-detail-page .header:not(.is-scrolled),
body.nargoon-detail-page .header.is-scrolled {
    position: fixed;
    z-index: 1200 !important;
    background: rgba(247, 245, 240, 0.68) !important;
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    backdrop-filter: blur(18px) saturate(145%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.38);
    box-shadow: 0 8px 28px rgba(24, 31, 28, 0.055);
    isolation: isolate;
}

/* Project section navigation */
body.nargoon-detail-page .nav-section,
body.nargoon-detail-page .nav-section.scrolled {
    z-index: 1100 !important;
    background: rgba(247, 245, 240, 0.64) !important;
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    backdrop-filter: blur(18px) saturate(145%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.34);
    box-shadow: 0 8px 28px rgba(24, 31, 28, 0.045);
    isolation: isolate;
}

/* Keep links crisp above the glass layer */
body.nargoon-detail-page .header > *,
body.nargoon-detail-page .nav-section > * {
    position: relative;
    z-index: 1;
}

/* Lightboxes/modal layers must remain above all navigation */
body.nargoon-detail-page .lightbox {
    z-index: 10000 !important;
}

/* Slightly stronger glass on narrow screens for readability */
@media (max-width: 768px) {
    body.nargoon-detail-page .header,
    body.nargoon-detail-page .header:not(.is-scrolled),
    body.nargoon-detail-page .header.is-scrolled,
    body.nargoon-detail-page .nav-section,
    body.nargoon-detail-page .nav-section.scrolled {
        background: rgba(247, 245, 240, 0.78) !important;
        -webkit-backdrop-filter: blur(16px) saturate(140%);
        backdrop-filter: blur(16px) saturate(140%);
    }
}


/* =========================================================
   GLOBAL NAVIGATION — Only navbar title ("نارگون کیش") white
   Other navigation links remain unchanged.
   ========================================================= */

body.nargoon-detail-page .header a[href="/"],
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/"],
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com"] {
    color: #fff !important;
}

/* =========================================================
   GLOBAL NAVIGATION — Main titles in Nargoon green
   Only the six main navbar links are affected.
   ========================================================= */

body.nargoon-detail-page .header a[href="/"],
body.nargoon-detail-page .header a[href="/projects"],
body.nargoon-detail-page .header a[href="/gallery"],
body.nargoon-detail-page .header a[href="/blog"],
body.nargoon-detail-page .header a[href="/island-rhythm"],
body.nargoon-detail-page .header a[href="/news"],
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/"],
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/projects"],
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/gallery"],
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/blog"],
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/island-rhythm"],
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/news"] {
    color: #163D32 !important;
    opacity: 1 !important;
    font-weight: 600 !important;
    text-shadow: none !important;
}

body.nargoon-detail-page .header a[href="/"]:hover,
body.nargoon-detail-page .header a[href="/projects"]:hover,
body.nargoon-detail-page .header a[href="/gallery"]:hover,
body.nargoon-detail-page .header a[href="/blog"]:hover,
body.nargoon-detail-page .header a[href="/island-rhythm"]:hover,
body.nargoon-detail-page .header a[href="/news"]:hover,
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/"]:hover,
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/projects"]:hover,
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/gallery"]:hover,
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/blog"]:hover,
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/island-rhythm"]:hover,
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/news"]:hover {
    color: #c9a961 !important;
    opacity: 1 !important;
}

/* =========================================================
   GLOBAL NAVIGATION — Clear weight states
   Normal: 500 / Hover + Selected: 700
   Brand green stays unchanged in every state.
   ========================================================= */

body.nargoon-detail-page .header a[href="/"],
body.nargoon-detail-page .header a[href="/projects"],
body.nargoon-detail-page .header a[href="/gallery"],
body.nargoon-detail-page .header a[href="/blog"],
body.nargoon-detail-page .header a[href="/island-rhythm"],
body.nargoon-detail-page .header a[href="/news"],
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/"],
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/projects"],
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/gallery"],
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/blog"],
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/island-rhythm"],
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/news"] {
    color: #163D32 !important;
    opacity: 1 !important;
    font-weight: 500 !important;
    text-shadow: none !important;
    transition:
        font-weight .18s ease,
        opacity .18s ease,
        transform .18s ease !important;
}

body.nargoon-detail-page .header a[href="/"]:hover,
body.nargoon-detail-page .header a[href="/projects"]:hover,
body.nargoon-detail-page .header a[href="/gallery"]:hover,
body.nargoon-detail-page .header a[href="/blog"]:hover,
body.nargoon-detail-page .header a[href="/island-rhythm"]:hover,
body.nargoon-detail-page .header a[href="/news"]:hover,
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/"]:hover,
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/projects"]:hover,
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/gallery"]:hover,
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/blog"]:hover,
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/island-rhythm"]:hover,
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/news"]:hover,
body.nargoon-detail-page .header a[href="/"]:focus-visible,
body.nargoon-detail-page .header a[href="/projects"]:focus-visible,
body.nargoon-detail-page .header a[href="/gallery"]:focus-visible,
body.nargoon-detail-page .header a[href="/blog"]:focus-visible,
body.nargoon-detail-page .header a[href="/island-rhythm"]:focus-visible,
body.nargoon-detail-page .header a[href="/news"]:focus-visible,
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/"]:focus-visible,
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/projects"]:focus-visible,
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/gallery"]:focus-visible,
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/blog"]:focus-visible,
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/island-rhythm"]:focus-visible,
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/news"]:focus-visible,
body.nargoon-detail-page .header a[href="/"].active,
body.nargoon-detail-page .header a[href="/projects"].active,
body.nargoon-detail-page .header a[href="/gallery"].active,
body.nargoon-detail-page .header a[href="/blog"].active,
body.nargoon-detail-page .header a[href="/island-rhythm"].active,
body.nargoon-detail-page .header a[href="/news"].active,
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/"].active,
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/projects"].active,
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/gallery"].active,
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/blog"].active,
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/island-rhythm"].active,
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/news"].active,
body.nargoon-detail-page .header a[href="/"][aria-current="page"],
body.nargoon-detail-page .header a[href="/projects"][aria-current="page"],
body.nargoon-detail-page .header a[href="/gallery"][aria-current="page"],
body.nargoon-detail-page .header a[href="/blog"][aria-current="page"],
body.nargoon-detail-page .header a[href="/island-rhythm"][aria-current="page"],
body.nargoon-detail-page .header a[href="/news"][aria-current="page"],
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/"][aria-current="page"],
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/projects"][aria-current="page"],
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/gallery"][aria-current="page"],
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/blog"][aria-current="page"],
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/island-rhythm"][aria-current="page"],
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/news"][aria-current="page"] {
    color: #163D32 !important;
    opacity: 1 !important;
    font-weight: 700 !important;
}

/* Keep the state change visually obvious without changing color. */
body.nargoon-detail-page .header a[href="/"]:hover,
body.nargoon-detail-page .header a[href="/projects"]:hover,
body.nargoon-detail-page .header a[href="/gallery"]:hover,
body.nargoon-detail-page .header a[href="/blog"]:hover,
body.nargoon-detail-page .header a[href="/island-rhythm"]:hover,
body.nargoon-detail-page .header a[href="/news"]:hover,
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/"]:hover,
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/projects"]:hover,
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/gallery"]:hover,
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/blog"]:hover,
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/island-rhythm"]:hover,
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/news"]:hover,
body.nargoon-detail-page .header a[href="/"]:focus-visible,
body.nargoon-detail-page .header a[href="/projects"]:focus-visible,
body.nargoon-detail-page .header a[href="/gallery"]:focus-visible,
body.nargoon-detail-page .header a[href="/blog"]:focus-visible,
body.nargoon-detail-page .header a[href="/island-rhythm"]:focus-visible,
body.nargoon-detail-page .header a[href="/news"]:focus-visible,
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/"]:focus-visible,
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/projects"]:focus-visible,
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/gallery"]:focus-visible,
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/blog"]:focus-visible,
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/island-rhythm"]:focus-visible,
body.nargoon-detail-page .header a[href="http://nargoon.sabzehi.com/news"]:focus-visible {
    transform: translateY(-1px);
}


/* =========================================================
   V57 — VISION SECTION
   Balanced columns + reliable gallery controls
   Scoped only to #vision
   ========================================================= */

#vision .vision-content-wrapper {
    align-items: stretch;
}

#vision .vision-info-box {
    align-self: stretch;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

#vision .vision-info-box .narrative-list {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e8e8e8;
}

#vision .vision-main {
    height: 100%;
}

#vision .gallery-container {
    position: relative;
}

#vision .border-glow,
#vision .particles-container,
#vision .vignette,
#vision .gallery-stage,
#vision .stage-number {
    pointer-events: none;
}

#vision .gallery-nav {
    z-index: 40;
    pointer-events: none;
}

#vision .gallery-nav .nav-arrow {
    position: relative;
    z-index: 41;
    pointer-events: auto !important;
    touch-action: manipulation;
}

#vision .gallery-nav .nav-arrow svg {
    pointer-events: none;
}

#vision .caption-dot {
    border: 0;
    padding: 0;
}

@media (max-width: 992px) {
    #vision .vision-info-box {
        height: auto;
    }
}


/* =========================================================
   V58 — VISION SECTION
   Tighter vertical alignment + divider between columns
   Scoped only to #vision
   ========================================================= */

@media (min-width: 993px) {
    #vision .vision-content-wrapper {
        position: relative;
        gap: 40px;
        align-items: stretch;
    }

    /* Thin divider exactly between the two desktop columns */
    #vision .vision-content-wrapper::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc(350px + 20px);
        width: 1px;
        background: rgba(22, 61, 50, 0.14);
        pointer-events: none;
        z-index: 1;
    }

    #vision .vision-main,
    #vision .vision-info-box {
        min-height: 100%;
    }

    /* Pull the image/caption composition tighter while keeping
       the two columns aligned at both top and bottom. */
    #vision .vision-main {
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto;
        gap: 14px;
        align-self: stretch;
    }

    #vision .gallery-container {
        height: auto;
        min-height: 450px;
        align-self: stretch;
    }

    #vision .gallery-caption {
        margin-top: 0;
        min-height: 124px;
        box-sizing: border-box;
    }

    #vision .vision-info-box {
        align-self: stretch;
    }
}

/* Divider is removed automatically when columns stack */
@media (max-width: 992px) {
    #vision .vision-content-wrapper::after {
        content: none;
    }
}


/* ===== PROJECT GALLERY V39 — AVAILABLE UNITS VISUAL LANGUAGE, 3-COLUMN GRID ===== */
/* Scoped to #gallery only. Content, filters, pagination logic and lightbox remain unchanged. */
#gallery .gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: #e5e5e5;
    border: 1px solid #e5e5e5;
}

#gallery .gallery-item,
#galleryGrid .gallery-item.gallery-managed-visible {
    display: flex !important;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    aspect-ratio: auto;
    min-width: 0;
    min-height: 0;
    border-radius: 0;
    background: #fff;
    cursor: pointer;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

#gallery .gallery-item > img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    flex: 0 0 auto;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

#gallery .gallery-item:hover > img {
    transform: scale(1.05);
}

#gallery .gallery-overlay {
    position: relative;
    inset: auto;
    flex: 1 1 auto;
    display: flex;
    align-items: flex-start;
    padding: 2rem;
    background: #fff;
    opacity: 1;
    transition: none;
}

#gallery .gallery-overlay > div {
    width: 100%;
    min-width: 0;
}

#gallery .gallery-item:hover .gallery-overlay {
    opacity: 1;
}

#gallery .gallery-category {
    margin-bottom: 1rem;
    color: #c9a961;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
}

#gallery .gallery-item-title {
    margin: 0;
    color: #1a1a1a;
    font-size: clamp(1.25rem, 1.55vw, 1.5rem);
    font-weight: 300;
    line-height: 1.55;
}

@media (max-width: 1024px) {
    #gallery .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

    #gallery .gallery-overlay {
        padding: 1.5rem;
    }

    #gallery .gallery-item-title {
        font-size: 1.25rem;
    }
}
/* ===== END PROJECT GALLERY V39 ===== */

/* ===== PROJECT FILM V42 — AVAILABLE UNITS VISUAL LANGUAGE + 3-COLUMN GRID ===== */
/* Scoped only to #film. Film content, lightbox and controls remain unchanged. */
#film .videos-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: #e5e5e5;
    border: 1px solid #e5e5e5;
}

#film .video-item,
#film .video-item.hidden-item.show {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #fff;
    cursor: pointer;
    transition: all .6s cubic-bezier(.16, 1, .3, 1);
}

#film .video-poster-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
}

#film .video-poster-container video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(.16, 1, .3, 1);
}

#film .video-item:hover {
    transform: none;
    box-shadow: none;
}

#film .video-item:hover .video-poster-container video {
    transform: scale(1.05);
}

#film .video-meta {
    padding: 2.5rem;
    background: #fff;
}

#film .video-number {
    margin-bottom: 1rem;
    color: #c9a961;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .25em;
    text-transform: uppercase;
}

#film .video-title {
    margin-bottom: 1rem;
    color: #1a1a1a;
    font-size: clamp(1.35rem, 1.7vw, 1.75rem);
    font-weight: 300;
    line-height: 1.45;
}

#film .video-desc {
    margin: 0;
    color: #999;
    font-size: .9375rem;
    font-weight: 300;
    line-height: 1.9;
}

@media (max-width: 1024px) {
    #film .videos-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #film .video-meta {
        padding: 2rem;
    }
}

@media (max-width: 768px) {
    #film .videos-grid {
        grid-template-columns: 1fr;
    }

    #film .video-meta {
        padding: 1.5rem;
    }

    #film .video-title {
        font-size: 1.35rem;
    }
}
/* ===== END PROJECT FILM V42 ===== */

/* ===== GLOBAL MORE / LESS BUTTONS — REVERSED FILL DIRECTION ===== */
.load-more-btn {
    isolation: isolate;
}

.load-more-btn::before {
    transform-origin: left;
}

.load-more-btn:hover::before,
.load-more-btn:focus-visible::before {
    transform: scaleX(1);
    transform-origin: right;
}

.load-more-btn .btn-text,
.load-more-btn .btn-icon {
    position: relative;
    z-index: 1;
}

/* ===== CATALOGUE CTA — SAME REVERSED FILL EFFECT ===== */
.catalogue-inline-link {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: transparent;
    transition: color .6s cubic-bezier(0.16, 1, 0.3, 1),
                border-color .6s cubic-bezier(0.16, 1, 0.3, 1);
}

.catalogue-inline-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #c9a961;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .6s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 0;
}

.catalogue-inline-link > span,
.catalogue-inline-link > i {
    position: relative;
    z-index: 1;
}

.catalogue-inline-link:hover,
.catalogue-inline-link:focus-visible {
    background: transparent;
    color: #fff;
    border-color: #c9a961;
}

.catalogue-inline-link:hover::before,
.catalogue-inline-link:focus-visible::before {
    transform: scaleX(1);
    transform-origin: right;
}

.catalogue-inline-link:hover i,
.catalogue-inline-link:focus-visible i {
    color: #fff;
}


/* ===== PROJECT FILM — outlined play control ===== */
#film .video-play-icon {
    background: rgba(18, 24, 21, 0.28);
    border: 1px solid rgba(207, 172, 103, 0.82);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#film .video-play-icon i {
    display: none;
}

#film .video-play-icon::before {
    content: "";
    width: 19px;
    height: 22px;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath d='M3.5 2.8 20.8 14 3.5 25.2Z' fill='none' stroke='%23CFAC67' stroke-width='2.1' stroke-linejoin='round'/%3E%3C/svg%3E");
    transform: translateX(1px);
}

#film .video-item:hover .video-play-icon {
    background: rgba(18, 24, 21, 0.42);
    border-color: #CFAC67;
    box-shadow: 0 10px 34px rgba(207, 172, 103, 0.28);
}


/* =========================================================
   VISION — LIGHTWEIGHT AUTOPLAY
   Removes decorative motion; keeps only slide crossfade,
   autoplay progress and manual previous/next controls.
   Scoped only to #vision.
   ========================================================= */
#vision .border-glow,
#vision .particles-container,
#vision .vignette {
    display: none !important;
}

#vision .gallery-image {
    transition: opacity .9s cubic-bezier(.22, 1, .36, 1);
}

#vision .gallery-image img,
#vision .gallery-image.active img {
    transform: none !important;
    transition: none !important;
}

#vision .stage-number,
#vision .caption-title,
#vision .caption-dot,
#vision .progress-fill {
    box-shadow: none;
}

#vision .stage-number {
    transition: none;
}

#vision .caption-dot {
    transition: background-color .2s ease;
}

#vision .caption-dot.active {
    transform: none;
}

#vision .progress-timer {
    animation-duration: 4s;
}

/* FLOOR AVAILABILITY — independent section; existing component styles preserved. */
#floorAvailability { scroll-margin-top: calc(var(--nargoon-header-height, 76px) + 24px); }
#floorAvailability #floorStatusView { max-width: 1200px; margin-inline: auto; padding-inline: 40px; }
@media (max-width: 768px) {
  #floorAvailability #floorStatusView { padding-inline: 0; }
}

/* SECTION 07: same editorial tabs as 05 / INTERIOR EXPERIENCE */
#units .ng-type-tabs.gallery-filters{
  max-width:1320px;margin:clamp(20px,3vw,38px) auto clamp(28px,4vw,52px);
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:clamp(.15rem,.8vw,.65rem);padding:1.1rem 0;
  border:0;border-top:1px solid var(--nargoon-detail-tab-line,rgba(23,23,23,.12));
  border-bottom:1px solid var(--nargoon-detail-tab-line,rgba(23,23,23,.12));
  background:transparent;
}
#units .ng-type-tabs [data-ng-type-tab]{
  appearance:none;position:relative;min-width:0;margin:0;
  border:0!important;border-radius:0!important;box-shadow:none!important;
  background:transparent!important;color:var(--nargoon-detail-tab-muted,#8b877f)!important;
  font-family:'Vazirmatn',sans-serif;font-size:.78rem;font-weight:400;
  padding:.75rem .72rem!important;cursor:pointer;white-space:nowrap;
  transition:color .3s ease, font-weight .3s ease!important;transform:none!important;
}
#units .ng-type-tabs [data-ng-type-tab]::after{
  content:'';position:absolute;right:.72rem;bottom:.15rem;height:1px;width:0;
  background:var(--nargoon-detail-tab-gold,#c9a961);
  transition:width .4s cubic-bezier(.16,1,.3,1);
}
#units .ng-type-tabs [data-ng-type-tab]:hover,
#units .ng-type-tabs [data-ng-type-tab].active,
#units .ng-type-tabs [data-ng-type-tab][aria-selected=true]{
  color:var(--nargoon-detail-tab-ink,#171717)!important;background:transparent!important;
  border:0!important;box-shadow:none!important;
}
#units .ng-type-tabs [data-ng-type-tab].active,
#units .ng-type-tabs [data-ng-type-tab][aria-selected=true]{font-weight:600}
#units .ng-type-tabs [data-ng-type-tab].active::after,
#units .ng-type-tabs [data-ng-type-tab][aria-selected=true]::after{width:calc(100% - 1.44rem)}
#units .ng-type-tabs [data-ng-type-tab]:focus-visible{outline:2px solid #c9a961;outline-offset:3px}
@media(max-width:900px){
  #units .ng-type-tabs.gallery-filters{flex-wrap:nowrap;justify-content:flex-start;
    overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #units .ng-type-tabs.gallery-filters::-webkit-scrollbar{display:none}
  #units .ng-type-tabs [data-ng-type-tab]{flex:0 0 auto;padding:.7rem .65rem!important;font-size:.75rem}
  #units .ng-type-tabs [data-ng-type-tab]::after{right:.65rem}
  #units .ng-type-tabs [data-ng-type-tab].active::after,
  #units .ng-type-tabs [data-ng-type-tab][aria-selected=true]::after{width:calc(100% - 1.3rem)}
}
#units .ng-type-panel{max-width:1320px;margin:0 auto;direction:rtl}
#units .ng-type-panel[hidden]{display:none!important}
#units .ng-type-panel-head{display:flex;align-items:end;justify-content:space-between;gap:15px;margin-bottom:26px}
#units .ng-type-panel-head h3{font-size:clamp(25px,2.8vw,38px);font-weight:400;color:var(--nargoon-detail-tab-ink,#171717)}
#units .ng-type-panel-head p{color:#777;font-size:14px}
#units .ng-type-media-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:22px;align-items:stretch}
#units .ng-type-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#units .ng-type-media{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:180px;padding:12px;background:#f7f6f2;border:1px solid #e5e2d8;color:#776e5e;cursor:default;overflow:hidden}
#units .ng-type-plan{min-height:450px;background:#fff}
#units .ng-type-media.has-image{cursor:zoom-in}
#units .ng-type-media img{width:100%;height:100%;max-height:520px;object-fit:contain;display:block}
#units .ng-type-media img[hidden]{display:none!important}
#units .ng-type-empty{text-align:center;font-size:14px;line-height:2}
#units .ng-type-media-label{position:absolute;right:12px;bottom:12px;background:rgba(255,255,255,.92);color:#171717;padding:5px 11px;font-size:12px;pointer-events:none}
#units .ng-type-help{margin-top:20px;color:#777;font-size:13px;line-height:2}
.ng-type-dialog{border:0;padding:54px 18px 25px;max-width:min(1100px,94vw);max-height:94vh;background:#faf9f6;position:fixed;inset:0;margin:auto}
.ng-type-dialog::backdrop{background:rgba(0,0,0,.87)}
.ng-type-dialog img{display:block;max-width:100%;max-height:70vh;object-fit:contain;margin:auto}
.ng-type-dialog-controls{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:15px;color:#171717}
.ng-type-dialog button{border:1px solid #c9a961;background:transparent;padding:8px 14px;cursor:pointer;color:#171717}
.ng-type-dialog [data-ng-lightbox-close]{position:absolute;top:10px;left:12px}
@media(max-width:800px){#units .ng-type-media-layout{grid-template-columns:1fr}#units .ng-type-plan{min-height:300px}#units .ng-type-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* SECTION 07 — premium typology slider (scoped, no global resets) */
#units .ng-type-slider-nav{max-width:1320px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;gap:clamp(22px,5vw,70px);direction:rtl}
#units .ng-type-slider-heading{text-align:center;min-width:160px}
#units .ng-type-slider-heading h3{font-size:clamp(24px,3.1vw,40px);font-weight:400;color:#1d1d1d;margin:5px 0}
#units .ng-type-slider-counter{font-size:12px;letter-spacing:.22em;color:#9b855a;font-variant-numeric:tabular-nums}
#units .ng-type-slider-arrow{width:48px;height:48px;border-radius:50%;border:1px solid #dbd3c0;background:transparent;color:#282828;display:grid;place-items:center;cursor:pointer;font-size:25px;transition:background .2s,border-color .2s}
#units .ng-type-slider-arrow:hover{background:#f5f2ea;border-color:#c9a961}
#units .ng-type-slider-arrow:focus-visible{outline:2px solid #c9a961;outline-offset:3px}
#units .ng-type-slider-progress{height:1px;background:#e5e0d6;max-width:1320px;margin:0 auto 38px;direction:ltr}
#units .ng-type-slider-progress span{display:block;background:#c9a961;height:100%;width:12.5%;transition:width .3s ease}
#units .ng-type-showcase{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:18px;max-width:1320px;margin:0 auto 16px;direction:rtl}
#units .ng-type-feature,#units .ng-type-primary-plan{height:clamp(290px,36vw,475px);min-height:0;overflow:hidden;background:#f8f7f4}
#units .ng-type-feature{position:relative;border:1px solid #e5e2d8}
#units .ng-type-feature .ng-type-media{width:100%;height:100%;border:0;min-height:0}
#units .ng-type-feature-video{display:block;width:100%;height:100%;object-fit:contain;background:#171c19}
#units .ng-type-feature-video[hidden],#units .ng-type-feature-image[hidden]{display:none!important}
#units .ng-type-primary-plan img,#units .ng-type-feature img{height:100%;max-height:none;object-fit:contain}
#units .ng-type-photo-row{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
#units .ng-type-photo-row .ng-type-media{min-height:0;aspect-ratio:4/3}
#units .ng-type-photo-row .ng-type-media img{height:100%;object-fit:cover}
#units .ng-type-panel-head{max-width:1320px;margin:0 auto 23px}
#units .ng-type-panel-head h3{color:#202020!important}
#units .ng-type-panel[hidden]{display:none!important}
#units .ng-type-media[hidden]{display:none!important}
@media(max-width:750px){#units .ng-type-showcase{grid-template-columns:1fr}#units .ng-type-feature,#units .ng-type-primary-plan{height:auto;min-height:260px;aspect-ratio:16/10}#units .ng-type-photo-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}#units .ng-type-slider-arrow{width:42px;height:42px}#units .ng-type-panel-head{display:block}#units .ng-type-panel-head p{margin-top:7px}}

/* SECTION 07: match the editorial filter tabs used by section 05. */
#units .ng-type-tabs.gallery-filters{margin-top:clamp(12px,2vw,28px);margin-bottom:clamp(25px,3vw,44px);}
#units .ng-type-tabs [data-ng-type-tab]{font-family:inherit;font-size:clamp(12px,1vw,15px);}
#units .ng-type-tabs [data-ng-type-tab].active::after{height:2px;}
#units .ng-type-panel-head{margin-top:0;}

/* ===== PROJECT DETAIL SECTION NAV: precise fixed-under-header behavior ===== */
body.nargoon-detail-page #mainNav.nav-section {
    position: relative; /* fixed behavior activated only when it reaches the header */
    top: auto;
    width: 100%;
    z-index: 1100;
}
body.nargoon-detail-page #mainNav.nav-section.ng-nav-pinned {
    position: fixed !important;
    top: var(--ng-project-header-height, 76px) !important;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    z-index: 1100 !important;
}
body.nargoon-detail-page .ng-project-nav-anchor {
    height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    pointer-events: none;
}
@media (max-width: 768px) {
    body.nargoon-detail-page #mainNav .nav-container {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    body.nargoon-detail-page #mainNav .nav-container::-webkit-scrollbar { display: none; }
    body.nargoon-detail-page #mainNav .nav-link-item { white-space: nowrap; flex-shrink: 0; }
}


/* ===== PROJECT NAV: COMPACT SINGLE-LINE / ACCESSIBLE SCROLL-SPY ===== */
body.nargoon-detail-page #mainNav.nav-section {
  background: #f8f6f0;
  border-bottom: 1px solid rgba(110,96,74,.14);
  box-shadow: none;
}
body.nargoon-detail-page #mainNav.nav-section.ng-nav-pinned {
  background: rgba(248,246,240,.98);
  box-shadow: 0 6px 18px rgba(34,43,39,.055);
}
body.nargoon-detail-page #mainNav .nav-container,
body.nargoon-detail-page #mainNav.scrolled .nav-container {
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap !important;
  align-items: stretch;
  justify-content: safe center;
  max-width: 1440px;
  min-height: 52px;
  height: 52px;
  gap: clamp(13px,1.75vw,28px);
  padding: 0 22px;
  margin: 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
body.nargoon-detail-page #mainNav .nav-container::-webkit-scrollbar { display: none; }
body.nargoon-detail-page #mainNav .nav-link-item,
body.nargoon-detail-page #mainNav.scrolled .nav-link-item {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  white-space: nowrap;
  align-items: center;
  justify-content: center;
  padding: 0 1px;
  margin: 0;
  min-height: 52px;
  line-height: 1.3;
  opacity: 1;
  font-size: clamp(11px,.83vw,13px);
  font-weight: 400;
  color: #77756d;
  transition: color .2s ease;
}
body.nargoon-detail-page #mainNav .nav-link-item::after {
  bottom: 0;
  height: 2px;
  transition: width .2s ease;
}
body.nargoon-detail-page #mainNav .nav-link-item.is-active {
  font-weight: 600;
  color: #243b33;
}
body.nargoon-detail-page #mainNav .nav-link-item.is-active::after {width: 100%;}
body.nargoon-detail-page #mainNav .nav-link-item:focus-visible {
  outline: 2px solid #c9a961;
  outline-offset: -4px;
}
@media (max-width:1100px) {
 body.nargoon-detail-page #mainNav .nav-container,
 body.nargoon-detail-page #mainNav.scrolled .nav-container {
   justify-content: flex-start;
   gap: 22px;
   padding-inline: 20px;
 }
}
@media (max-width:600px) {
 body.nargoon-detail-page #mainNav .nav-container,
 body.nargoon-detail-page #mainNav.scrolled .nav-container {height:48px; min-height:48px; gap:19px; padding-inline:16px;}
 body.nargoon-detail-page #mainNav .nav-link-item,
 body.nargoon-detail-page #mainNav.scrolled .nav-link-item {min-height:48px; font-size:12px;}
}
@media (prefers-reduced-motion:reduce) {
 body.nargoon-detail-page #mainNav * {transition-duration:0s!important;}
}


/* =============================================================
   SECTION 08 / FLOOR AVAILABILITY — MOBILE LAYOUT FIX
   Scoped to #floorAvailability; does not affect other sections.
   ============================================================= */
#floorAvailability, #floorAvailability * { box-sizing: border-box; }
#floorAvailability #floorStatusView,
#floorAvailability .floor-status-premium,
#floorAvailability .units-premium-grid,
#floorAvailability .unit-premium-card { min-width: 0; max-width: 100%; }
#floorAvailability .units-premium-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#floorAvailability .unit-premium-header { gap: 10px; }
#floorAvailability .unit-premium-id { overflow-wrap: anywhere; }
#floorAvailability .status-badge-premium { flex: 0 0 auto; white-space: nowrap; }
#floorAvailability .unit-premium-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#floorAvailability .spec-premium-item { min-width: 0; }
#floorAvailability .spec-premium-info { min-width: 0; }
@media (max-width: 1100px) {
  #floorAvailability .units-premium-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  #floorAvailability .floor-status-premium { padding: 24px; }
  #floorAvailability #floorStatusView { padding-inline: 16px; }
}
@media (max-width: 680px) {
  #floorAvailability { padding-inline: 14px; }
  #floorAvailability #floorStatusView { padding-inline: 0; width: 100%; }
  #floorAvailability .floor-status-premium { padding: 18px 14px; border-radius: 8px; }
  #floorAvailability .floor-status-header-premium { margin-bottom: 20px; }
  #floorAvailability .floor-status-header-premium h3 { font-size: 1.25rem; }
  #floorAvailability .floor-stats-premium { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-bottom: 20px; }
  #floorAvailability .floor-stat-premium { display: flex; flex-direction: column; text-align: center; justify-content: center; gap: 5px; min-width: 0; padding: 12px 4px; }
  #floorAvailability .floor-stat-premium .stat-icon { font-size: 1.1rem; }
  #floorAvailability .floor-stat-premium .stat-number { font-size: 1.35rem; display: block; }
  #floorAvailability .floor-stat-premium .stat-label { font-size: .68rem; line-height: 1.6; }
  #floorAvailability .floor-tabs-premium { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 10px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; width: 100%; max-width: 100%; padding: 8px 0; margin-bottom: 20px; }
  #floorAvailability .floor-tabs-premium::-webkit-scrollbar { display: none; }
  #floorAvailability .floor-tab-premium { flex: 0 0 auto; white-space: nowrap; }
  #floorAvailability .units-premium-grid { grid-template-columns: minmax(0,1fr); gap: 14px; }
  #floorAvailability .unit-premium-card { width: 100%; padding: 18px 15px; }
  #floorAvailability .unit-premium-header { align-items: center; gap: 8px; margin-bottom: 14px; padding-bottom: 12px; }
  #floorAvailability .unit-premium-id { font-size: 1.1rem; min-width: 0; }
  #floorAvailability .status-badge-premium { font-size: .71rem; padding: 7px 10px; }
  #floorAvailability .unit-premium-specs { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  #floorAvailability .spec-premium-item { padding: 10px 7px; gap: 7px; }
  #floorAvailability .spec-premium-icon { font-size: 1rem; flex: 0 0 20px; width: 20px; }
  #floorAvailability .spec-premium-label { font-size: .67rem; line-height: 1.4; }
  #floorAvailability .spec-premium-value { font-size: .84rem; line-height: 1.35; overflow-wrap: anywhere; }
  #floorAvailability .unit-premium-cta { margin-top: 14px; }
}
@media (max-width: 360px) {
  #floorAvailability { padding-inline: 10px; }
  #floorAvailability .floor-status-premium { padding-inline: 10px; }
  #floorAvailability .floor-stat-premium .stat-label { font-size: .62rem; }
  #floorAvailability .unit-premium-card { padding: 14px 11px; }
  #floorAvailability .status-badge-premium { padding: 6px 8px; font-size: .67rem; }
}


/* ===== NARGOON PROJECT NAV — DARK ONLY WHILE PINNED =====
   No layout/height/scroll/JS changes. Keeps cream appearance in normal flow. */
body.nargoon-detail-page #mainNav.nav-section.ng-nav-pinned,
body.nargoon-detail-page #mainNav.nav-section.ng-nav-pinned.scrolled {
  background: #181818;
  border-bottom-color: rgba(255,255,255,.12);
  box-shadow: 0 6px 18px rgba(0,0,0,.16);
}
body.nargoon-detail-page #mainNav.ng-nav-pinned .nav-link-item,
body.nargoon-detail-page #mainNav.ng-nav-pinned.scrolled .nav-link-item {
  color: #dedede;
}
body.nargoon-detail-page #mainNav.ng-nav-pinned .nav-link-item:hover,
body.nargoon-detail-page #mainNav.ng-nav-pinned.scrolled .nav-link-item:hover,
body.nargoon-detail-page #mainNav.ng-nav-pinned .nav-link-item.is-active,
body.nargoon-detail-page #mainNav.ng-nav-pinned.scrolled .nav-link-item.is-active {
  color: #fff;
}
body.nargoon-detail-page #mainNav.ng-nav-pinned .nav-link-item.is-active::after,
body.nargoon-detail-page #mainNav.ng-nav-pinned.scrolled .nav-link-item.is-active::after {
  background: #cfac67;
  width: 100%;
}

/* FIX: pinned project navigation overrides earlier cream !important glass styles. */
body.nargoon-detail-page #mainNav.nav-section.ng-nav-pinned,
body.nargoon-detail-page #mainNav.nav-section.ng-nav-pinned.scrolled {
  background: #181818 !important;
  background-color: #181818 !important;
  border-bottom-color: rgba(255,255,255,.13) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.16);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.nargoon-detail-page #mainNav.nav-section.ng-nav-pinned .nav-link-item,
body.nargoon-detail-page #mainNav.nav-section.ng-nav-pinned.scrolled .nav-link-item {color:#dedede !important;}
body.nargoon-detail-page #mainNav.nav-section.ng-nav-pinned .nav-link-item:hover,
body.nargoon-detail-page #mainNav.nav-section.ng-nav-pinned .nav-link-item.is-active {color:#fff !important;}
body.nargoon-detail-page #mainNav.nav-section.ng-nav-pinned .nav-link-item.is-active::after {background:#cfac67 !important;}
@media (max-width:768px) {
  body.nargoon-detail-page #mainNav.nav-section.ng-nav-pinned,
  body.nargoon-detail-page #mainNav.nav-section.ng-nav-pinned.scrolled {background:#181818 !important;background-color:#181818 !important;}
}


/* =============================================================
   PROJECT NAV UX: compact main header on small screens, while
   preserving the pinned project nav and nonsticky section tabs.
   Scoped to the Towers detail page only.
   ============================================================= */
@media (max-width:768px) {
  body.nargoon-detail-page .header {
    box-sizing: border-box;
    transition: padding .2s ease, min-height .2s ease !important;
  }
  body.nargoon-detail-page.ng-mobile-header-compact .header {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    min-height: 0 !important;
  }
  body.nargoon-detail-page.ng-mobile-header-compact .header .brand .nargoon-header-logo {
    width: 49px !important;
    height: 31px !important;
    transition: width .2s ease, height .2s ease;
  }
  body.nargoon-detail-page.ng-mobile-header-compact .header .nav-toggle {
    width: 38px !important;
    height: 38px !important;
  }
  body.nargoon-detail-page #mainNav .nav-container,
  body.nargoon-detail-page #mainNav.scrolled .nav-container {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
}
/* Local filters remain in normal document flow (never a third sticky bar). */
body.nargoon-detail-page #units .ng-type-tabs,
body.nargoon-detail-page #facilities .gallery-filters,
body.nargoon-detail-page #floorAvailability .floor-tabs-premium {
  position: static !important;
  top: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  body.nargoon-detail-page .header,
  body.nargoon-detail-page .header .nargoon-header-logo {transition: none !important;}
}

/* Nargoon UX compact pass — scoped, additive refinements (2026-10) */
body.nargoon-detail-page #facilities .ng-facilities-more-wrap,
body.nargoon-detail-page #floorAvailability .ng-floor-more-wrap {text-align:center; margin:24px auto 0;}
body.nargoon-detail-page #facilities .ng-content-more,
body.nargoon-detail-page #floorAvailability .ng-content-more {font:inherit; font-size:14px; border:1px solid #cfac67; background:transparent; color:#205043; padding:12px 28px; cursor:pointer; transition:background .2s,color .2s;}
body.nargoon-detail-page #facilities .ng-content-more:hover,
body.nargoon-detail-page #floorAvailability .ng-content-more:hover {background:#205043;color:#fff;}
body.nargoon-detail-page #facilities [hidden],
body.nargoon-detail-page #floorAvailability [hidden],
body.nargoon-detail-page #units .ng-type-photo-row[hidden],
body.nargoon-detail-page #units .ng-type-photo[hidden] {display:none !important;}
body.nargoon-detail-page #units .ng-type-photo-row:not([hidden]) {margin-top:16px;}
@media(max-width:767px) {
 body.nargoon-detail-page #facilities .ng-facilities-more-wrap,
 body.nargoon-detail-page #floorAvailability .ng-floor-more-wrap {margin-top:18px;}
 body.nargoon-detail-page #facilities .ng-content-more,
 body.nargoon-detail-page #floorAvailability .ng-content-more {width:min(100%,300px);min-height:44px;}
 body.nargoon-detail-page #facilities.section,
 body.nargoon-detail-page #floorAvailability.section,
 body.nargoon-detail-page #units.section {padding-top:clamp(48px,8vw,68px);padding-bottom:clamp(48px,8vw,68px);}
 body.nargoon-detail-page #facilities .section-header,
 body.nargoon-detail-page #floorAvailability .section-header,
 body.nargoon-detail-page #units .section-header {margin-bottom:28px;}
 body.nargoon-detail-page #units .ng-type-showcase {margin-top:12px;}
}

/* 08 / FLOOR AVAILABILITY: match the site's gold sliding hover buttons. */
body.nargoon-detail-page #floorAvailability .ng-content-more {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: transparent;
  border: 1px solid #c9a961;
  color: #1a1a1a;
  transition: color .6s cubic-bezier(.16,1,.3,1), border-color .6s cubic-bezier(.16,1,.3,1);
}
body.nargoon-detail-page #floorAvailability .ng-content-more::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #c9a961;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
  z-index: -1;
}
body.nargoon-detail-page #floorAvailability .ng-content-more:hover,
body.nargoon-detail-page #floorAvailability .ng-content-more:focus-visible {
  background: transparent;
  color: #fff;
  border-color: #c9a961;
}
body.nargoon-detail-page #floorAvailability .ng-content-more:hover::before,
body.nargoon-detail-page #floorAvailability .ng-content-more:focus-visible::before {
  transform: scaleX(1);
  transform-origin: right;
}
@media (prefers-reduced-motion: reduce) {
  body.nargoon-detail-page #floorAvailability .ng-content-more::before {transition: none;}
}


/* Nargoon 05 / INTERIOR EXPERIENCE — compact facility cards and matching site button. */
body.nargoon-detail-page #facilities .facility-content { padding: 1.35rem 1.5rem 1.45rem; }
body.nargoon-detail-page #facilities .facility-icon { margin-bottom: .6rem; }
body.nargoon-detail-page #facilities .facility-content h3 { margin-bottom: .3rem; }
body.nargoon-detail-page #facilities .facility-floor { margin-top: .4rem !important; line-height: 1.55; }

/* The "show more / less" control is generated by existing JS — keep its ID and events. */
body.nargoon-detail-page #facilities #ngFacilitiesMore {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: transparent !important;
  color: #1a1a1a !important;
  border: 1px solid #c9a961 !important;
  transition: color .6s cubic-bezier(.16,1,.3,1), border-color .6s cubic-bezier(.16,1,.3,1);
}
body.nargoon-detail-page #facilities #ngFacilitiesMore::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #c9a961;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
body.nargoon-detail-page #facilities #ngFacilitiesMore:is(:hover,:focus-visible) {
  background: transparent !important;
  color: #fff !important;
  border-color: #c9a961 !important;
}
body.nargoon-detail-page #facilities #ngFacilitiesMore:is(:hover,:focus-visible)::before {
  transform: scaleX(1);
  transform-origin: right;
}
@media (prefers-reduced-motion: reduce) {
  body.nargoon-detail-page #facilities #ngFacilitiesMore::before { transition: none; }
}


/* ===== FINAL: PROJECT NAV LIGHT CREAM WHILE PINNED (NARGOON) =====
   Color-only override: keep exact sticky, scroll-spy and responsive behavior. */
body.nargoon-detail-page #mainNav.nav-section.ng-nav-pinned,
body.nargoon-detail-page #mainNav.nav-section.ng-nav-pinned.scrolled {
  background: #eeeae2 !important;
  background-color: #eeeae2 !important;
  border-bottom: 1px solid rgba(207,172,103,.6) !important;
  box-shadow: 0 5px 16px rgba(37,34,28,.07) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.nargoon-detail-page #mainNav.nav-section.ng-nav-pinned .nav-link-item,
body.nargoon-detail-page #mainNav.nav-section.ng-nav-pinned.scrolled .nav-link-item {
  color: #66615a !important;
}
body.nargoon-detail-page #mainNav.nav-section.ng-nav-pinned .nav-link-item:hover,
body.nargoon-detail-page #mainNav.nav-section.ng-nav-pinned.scrolled .nav-link-item:hover,
body.nargoon-detail-page #mainNav.nav-section.ng-nav-pinned .nav-link-item.is-active,
body.nargoon-detail-page #mainNav.nav-section.ng-nav-pinned.scrolled .nav-link-item.is-active {
  color: #181818 !important;
}
body.nargoon-detail-page #mainNav.nav-section.ng-nav-pinned .nav-link-item.is-active::after,
body.nargoon-detail-page #mainNav.nav-section.ng-nav-pinned.scrolled .nav-link-item.is-active::after {
  background: #cfac67 !important;
}

/* ===== NARGOON / smaller pinned project navigation only =====
   Normal in-flow navigation retains its previous dimensions. */
body.nargoon-detail-page #mainNav.nav-section.ng-nav-pinned .nav-container,
body.nargoon-detail-page #mainNav.nav-section.ng-nav-pinned.scrolled .nav-container {
  height: 44px !important;
  min-height: 44px !important;
}
body.nargoon-detail-page #mainNav.nav-section.ng-nav-pinned .nav-link-item,
body.nargoon-detail-page #mainNav.nav-section.ng-nav-pinned.scrolled .nav-link-item {
  min-height: 44px !important;
}
@media (max-width: 600px) {
  body.nargoon-detail-page #mainNav.nav-section.ng-nav-pinned .nav-container,
  body.nargoon-detail-page #mainNav.nav-section.ng-nav-pinned.scrolled .nav-container {
    height: 44px !important;
    min-height: 44px !important;
  }
  body.nargoon-detail-page #mainNav.nav-section.ng-nav-pinned .nav-link-item,
  body.nargoon-detail-page #mainNav.nav-section.ng-nav-pinned.scrolled .nav-link-item {
    min-height: 44px !important;
  }
}

/* NARGOON HERO: keep the eyebrow clear of the persistent global header.
   Scoped to the project detail hero; no changes to navbar/sticky offsets. */
body.nargoon-detail-page .hero .hero-content {
    transform: translateY(52px);
}
@media (max-width: 767px) {
    body.nargoon-detail-page .hero .hero-content {
        transform: translateY(34px);
    }
}


/* ===== NARGOON: Architectural Drawing Index / replaces project nav ===== */
body.nargoon-detail-page.ng-architecture-enabled #mainNav { display:none !important; }
body.nargoon-detail-page .ng-architecture-index {
  position:fixed; z-index:1050; left:24px;
  top:calc(var(--ng-project-header-height, 80px) + 16px);
  width:max-content; max-width:min(330px, calc(100vw - 32px));
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(-8px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
  font-family:inherit; direction:rtl;
}
body.nargoon-detail-page .ng-architecture-index.is-visible {
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
}
body.nargoon-detail-page .ng-architecture-trigger {
  display:flex; align-items:center; gap:14px; justify-content:space-between;
  border:0; border-bottom:1px solid #cfac67; padding:8px 2px;
  background:rgba(250,249,246,.96); color:#181818;
  font-size:13px; font-weight:500; letter-spacing:0; cursor:pointer;
  box-shadow:0 4px 12px rgba(24,24,24,.04); white-space:nowrap;
}
body.nargoon-detail-page .ng-architecture-trigger:hover {color:#181818; border-color:#b99658;}
body.nargoon-detail-page .ng-architecture-trigger:focus-visible,
body.nargoon-detail-page .ng-architecture-item:focus-visible {outline:2px solid #cfac67;outline-offset:3px;}
body.nargoon-detail-page .ng-architecture-sign {font-size:20px; line-height:1; color:#a98b53; font-weight:300;}
body.nargoon-detail-page .ng-architecture-panel {
  position:absolute; left:0; top:calc(100% + 8px);
  width:310px; max-width:calc(100vw - 32px); max-height:min(65vh,500px);
  overflow-y:auto; overscroll-behavior:contain;
  background:#f8f6f1; border:1px solid #e1d9ca;
  box-shadow:0 18px 48px rgba(25,25,20,.14); padding:14px;
}
body.nargoon-detail-page .ng-architecture-panel[hidden] {display:none!important;}
body.nargoon-detail-page .ng-architecture-heading {
  text-align:right; font-size:11px; letter-spacing:.08em;
  color:#998051; padding:6px 8px 12px; border-bottom:1px solid #e1d9ca;
  margin-bottom:5px;
}
body.nargoon-detail-page .ng-architecture-item {
  width:100%; display:flex; gap:12px; align-items:center; text-align:right;
  border:0; background:transparent; color:#3c3934;
  padding:10px 9px; font-size:13px; line-height:1.45;
  text-decoration:none; cursor:pointer; transition:background .18s ease, color .18s ease;
}
body.nargoon-detail-page .ng-architecture-item:hover,
body.nargoon-detail-page .ng-architecture-item.is-active {background:#ede7db; color:#181818;}
body.nargoon-detail-page .ng-architecture-item-number {color:#ae8d54; font-size:11px; min-width:22px; direction:ltr;}
body.nargoon-detail-page .ng-architecture-catalogue {border-top:1px solid #e1d9ca;margin-top:5px;padding-top:13px;}
@media (max-width:767px) {
 body.nargoon-detail-page .ng-architecture-index {
  top:auto; bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  left:12px; max-width:calc(100vw - 24px);
 }
 body.nargoon-detail-page .ng-architecture-trigger {
  border:1px solid #ddcfb4; border-bottom:2px solid #cfac67;
  border-radius:4px; padding:10px 12px; background:#f8f6f1;
  box-shadow:0 6px 22px rgba(0,0,0,.12); min-height:44px;
 }
 body.nargoon-detail-page .ng-architecture-panel {top:auto;bottom:calc(100% + 8px);max-height:60vh;}
}
@media (prefers-reduced-motion:reduce) {
 body.nargoon-detail-page .ng-architecture-index,
 body.nargoon-detail-page .ng-architecture-item {transition:none;}
}


/* ============================================================
   NARGOON / RESPONSIVE AUDIT — 2026-10-11
   Scope: project details only. The 90% Hero ring never overlaps
   the main title, eyebrow or tagline on small screens.
   Keeps existing CMS/JS interactions and page navigation intact.
   ============================================================ */
body.nargoon-detail-page .hero,
body.nargoon-detail-page .hero-content,
body.nargoon-detail-page .section { box-sizing:border-box; }
body.nargoon-detail-page .hero-content { min-width:0; }
body.nargoon-detail-page .hero-subtitle { overflow-wrap:anywhere; }
body.nargoon-detail-page .hero-title,
body.nargoon-detail-page .hero-tagline { overflow-wrap:break-word; }
body.nargoon-detail-page .section img,
body.nargoon-detail-page .section video,
body.nargoon-detail-page .section iframe { max-width:100%; }

/* At laptop widths avoid the progress ring occupying the title zone. */
@media (min-width: 769px) and (max-width: 1199px) {
  body.nargoon-detail-page .hero .hero-content {
    max-width:min(780px, 84vw);
    padding-inline:28px;
    transform:translateY(25px);
  }
  body.nargoon-detail-page .hero .hero-title {
    font-size:clamp(3rem, 7vw, 5rem);
  }
  body.nargoon-detail-page .hero .progress-ring {
    top:auto; bottom:clamp(20px, 4vh, 48px);
    right:clamp(16px, 3vw, 44px);
    transform:scale(.82);
    transform-origin:right bottom;
  }
  body.nargoon-detail-page .hero .hero-tagline {max-width:630px;}
}

/* On narrow layouts the ring becomes a normal element beneath the
   hero copy, so overlap cannot occur even with wrapped Persian text. */
@media (max-width:768px) {
  body.nargoon-detail-page .hero {
    height:auto !important;
    min-height:100svh;
    padding:calc(var(--nargoon-header-height, 76px) + 28px) 16px 30px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:clamp(16px, 3vh, 26px);
  }
  body.nargoon-detail-page .hero .hero-content {
    order:1; width:100%; max-width:650px;
    padding:0 4px;
    transform:none !important;
    flex:0 0 auto;
  }
  body.nargoon-detail-page .hero .hero-subtitle {
    font-size:clamp(.58rem,2.2vw,.74rem);
    letter-spacing:clamp(.08em,.6vw,.22em);
    margin-bottom:clamp(14px,3vh,24px);
    line-height:1.8;
  }
  body.nargoon-detail-page .hero .hero-title {
    font-size:clamp(2.5rem,11vw,4.4rem);
    line-height:1.25;
    margin-bottom:clamp(12px,2.8vh,23px);
  }
  body.nargoon-detail-page .hero .hero-tagline {
    font-size:clamp(.84rem,3.35vw,1rem);
    line-height:1.9;
    max-width:540px;
    margin-inline:auto;
  }
  body.nargoon-detail-page .hero .progress-ring {
    position:relative !important;
    order:2;
    top:auto !important; right:auto !important;
    bottom:auto !important; left:auto !important;
    flex:0 0 auto;
    align-self:center;
    gap:6px;
    transform:scale(.78);
    transform-origin:center center;
    margin:0;
    z-index:20;
  }
  body.nargoon-detail-page .hero .scroll-indicator {
    display:none;
  }
  body.nargoon-detail-page .section {padding:clamp(42px,9vw,70px) 5vw;}
  body.nargoon-detail-page .section-header {margin-bottom:clamp(26px,7vw,48px);}
  body.nargoon-detail-page .section .text-5xl {font-size:clamp(1.75rem,7vw,2.65rem);line-height:1.4;}
  body.nargoon-detail-page .gallery-filters {max-width:100%;}
  body.nargoon-detail-page #gallery .gallery-grid,
  body.nargoon-detail-page #film .videos-grid {grid-template-columns:minmax(0,1fr);}
  body.nargoon-detail-page #floorAvailability .units-premium-grid {grid-template-columns:minmax(0,1fr);}
  body.nargoon-detail-page #floorAvailability .floor-stats-premium {gap:10px;}
  body.nargoon-detail-page #floorAvailability .floor-stat-premium {min-width:0;padding:12px;}
  body.nargoon-detail-page #units .ng-type-showcase {grid-template-columns:minmax(0,1fr);}
  body.nargoon-detail-page #units .ng-type-feature,
  body.nargoon-detail-page #units .ng-type-primary-plan {max-width:100%;min-width:0;}
  body.nargoon-detail-page .ng-architecture-index {max-width:calc(100vw - 24px);}
}
@media (max-width:420px) {
  body.nargoon-detail-page .hero {padding-inline:14px; gap:10px;}
  body.nargoon-detail-page .hero .hero-title {font-size:clamp(2.25rem,11.5vw,3.25rem);}
  body.nargoon-detail-page .hero .progress-ring {transform:scale(.7);margin-block:-10px;}
  body.nargoon-detail-page #floorAvailability .unit-premium-card {padding:clamp(12px,4vw,18px);}
  body.nargoon-detail-page #floorAvailability .floor-status-premium {min-width:0;}
  body.nargoon-detail-page .section {padding-inline:16px;}
}
@media (max-width:350px) {
  body.nargoon-detail-page .hero .hero-subtitle {letter-spacing:.06em;font-size:.57rem;}
  body.nargoon-detail-page .hero .hero-title {font-size:2.2rem;}
  body.nargoon-detail-page .hero .progress-ring {transform:scale(.64);}
}


/* ============================================================
   LOCATION 01 — MOBILE LAYOUT REPAIR (scoped, final override)
   Inline desktop columns must not persist at phone widths.
   ============================================================ */
@media (max-width: 900px) {
  body.nargoon-detail-page #location .ngdt-location-v21__layout {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: min(680px, calc(100% - 24px)) !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    gap: 22px !important;
  }
  body.nargoon-detail-page #location .ngdt-location-v21__layout > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
    grid-column: auto !important;
    box-sizing: border-box !important;
  }
  body.nargoon-detail-page #location .ngdt-hard-map,
  body.nargoon-detail-page #location .ngdt-location-v21 .ngdt-hard-map {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    box-sizing: border-box !important;
    margin-inline: auto !important;
  }
  body.nargoon-detail-page #location .ngdt-access-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  body.nargoon-detail-page #location .ngdt-access-card__list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }
  body.nargoon-detail-page #location .ngdt-access-card__item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    justify-items: stretch !important;
    gap: 12px !important;
    padding: 13px 0 !important;
    text-align: right !important;
    border-left: 0 !important;
    border-bottom: 1px solid rgba(23,23,23,.08) !important;
    min-width: 0 !important;
  }
  body.nargoon-detail-page #location .ngdt-access-card__item > * {
    min-width: 0 !important;
  }
  body.nargoon-detail-page #location .ngdt-access-card__item > div:last-child {
    flex-wrap: wrap !important;
    min-width: 0 !important;
  }
}
@media (max-width: 600px) {
  body.nargoon-detail-page #location {
    overflow-x: clip;
  }
  body.nargoon-detail-page #location .ngdt-location-v21__layout {
    width: 100% !important;
    padding-inline: 0 !important;
    gap: 16px !important;
  }
  body.nargoon-detail-page #location .ngdt-access-card {
    padding: 18px 14px !important;
  }
  body.nargoon-detail-page #location .ngdt-hard-map,
  body.nargoon-detail-page #location .ngdt-location-v21 .ngdt-hard-map {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1.18 / 1 !important;
    overflow: hidden !important;
  }
  body.nargoon-detail-page #location .ngdt-hard-map > div:first-child {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
  }
  body.nargoon-detail-page #location .ngdt-access-card__item {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }
  body.nargoon-detail-page #location .ngdt-access-card__item > div:last-child {
    align-items: flex-start !important;
    gap: 4px !important;
  }
  body.nargoon-detail-page #location .ngdt-access-card__item:last-child {
    border-bottom: none !important;
  }
}


/* ============================================================
   LOCATION / 01 — CSS-ONLY RESPONSIVE FIX (2026-10-11)
   Targets supplied .ngdt-location-v21 markup without requiring
   the wrapper to be inside #location. Overrides inline non-important
   grid and aside sizing; map inline !important dimensions stay intact.
   ============================================================ */
@media screen and (max-width: 900px) {
  body.nargoon-detail-page .location-map-wrapper.ngdt-location-v21,
  .location-map-wrapper.ngdt-location-v21 {
    display: block !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  body.nargoon-detail-page .ngdt-location-v21__layout,
  .location-map-wrapper.ngdt-location-v21 .ngdt-location-v21__layout {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    grid-template-columns: none !important;
    width: min(680px, calc(100% - 24px)) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin-inline: auto !important;
    gap: 20px !important;
    direction: rtl !important;
    box-sizing: border-box !important;
  }
  body.nargoon-detail-page .ngdt-location-v21__layout > .ngdt-location-v21__map,
  .location-map-wrapper.ngdt-location-v21 .ngdt-location-v21__layout > .ngdt-location-v21__map {
    display: flex !important;
    flex: none !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Existing inline !important map width is 88vw, which fits mobile.
     The actual bug was the two-column parent, not the map's width. */
  body.nargoon-detail-page .ngdt-location-v21__layout .ngdt-hard-map,
  .location-map-wrapper.ngdt-location-v21 .ngdt-hard-map {
    flex-shrink: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  body.nargoon-detail-page .ngdt-location-v21__layout > aside,
  .location-map-wrapper.ngdt-location-v21 .ngdt-location-v21__layout > aside {
    display: flex !important;
    flex-direction: column !important;
    flex: none !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 18px clamp(12px, 3vw, 22px) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
}
@media screen and (max-width: 600px) {
  body.nargoon-detail-page .ngdt-location-v21__layout,
  .location-map-wrapper.ngdt-location-v21 .ngdt-location-v21__layout {
    width: 100% !important;
    gap: 12px !important;
  }
  /* Label boxes inside map were designed for a 560px drawing.
     On phones display the exact map markers and accessible names,
     while full readable destination names stay in the access list. */
  .location-map-wrapper.ngdt-location-v21 .ngdt-hard-map > button > span:last-child,
  .location-map-wrapper.ngdt-location-v21 .ngdt-hard-map > div[style*="left:24%"] > span:last-child {
    display: none !important;
  }
  .location-map-wrapper.ngdt-location-v21 .ngdt-hard-map > div[style*="bottom:14px"] {
    bottom: 8px !important;
  }
  .location-map-wrapper.ngdt-location-v21 .ngdt-hard-map > div[style*="bottom:14px"][style*="left:16px"] {
    left: 8px !important;
    max-width: 64% !important;
    font-size: 8px !important;
    letter-spacing: 0 !important;
    line-height: 1.5 !important;
  }
  .location-map-wrapper.ngdt-location-v21 .ngdt-hard-map > div[style*="bottom:14px"][style*="right:16px"] {
    right: 8px !important;
  }
  .location-map-wrapper.ngdt-location-v21 .ngdt-location-v21__layout > aside {
    padding: 14px 12px !important;
  }
  .location-map-wrapper.ngdt-location-v21 .ngdt-location-v21__layout > aside > div:last-child > div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 76px !important;
    gap: 8px !important;
    align-items: center !important;
    min-width: 0 !important;
  }
  .location-map-wrapper.ngdt-location-v21 .ngdt-location-v21__layout > aside > div:last-child > div > div {
    min-width: 0 !important;
  }
  .location-map-wrapper.ngdt-location-v21 .ngdt-location-v21__layout > aside > div:last-child > div > div > div:first-child {
    flex-wrap: wrap !important;
    column-gap: 10px !important;
    row-gap: 3px !important;
  }
}

/* LOCATION / 01 — comfortable mobile side spacing; keep all HTML unchanged */
@media screen and (max-width: 600px) {
  body.nargoon-detail-page .location-map-wrapper.ngdt-location-v21 .ngdt-location-v21__layout,
  .location-map-wrapper.ngdt-location-v21 .ngdt-location-v21__layout {
    width: calc(100% - 32px) !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }
  body.nargoon-detail-page .location-map-wrapper.ngdt-location-v21 .ngdt-location-v21__layout > aside,
  .location-map-wrapper.ngdt-location-v21 .ngdt-location-v21__layout > aside {
    padding: 18px 18px !important;
  }
}
@media screen and (max-width: 380px) {
  .location-map-wrapper.ngdt-location-v21 .ngdt-location-v21__layout {
    width: calc(100% - 24px) !important;
  }
  .location-map-wrapper.ngdt-location-v21 .ngdt-location-v21__layout > aside {
    padding-inline: 14px !important;
  }
}


/* 2026-10-11 — Consistent header-to-tab spacing: desktop 56px / mobile 32px.
   Scoped to tabbed sections; storytelling sections keep their original rhythm. */
@media (min-width: 768px) {
  body.nargoon-detail-page #facilities .section-header,
  body.nargoon-detail-page #gallery .section-header,
  body.nargoon-detail-page #units .section-header,
  body.nargoon-detail-page #floorAvailability .section-header {
    margin-bottom: 56px !important;
  }
}
@media (max-width: 767px) {
  body.nargoon-detail-page #facilities .section-header,
  body.nargoon-detail-page #gallery .section-header,
  body.nargoon-detail-page #units .section-header,
  body.nargoon-detail-page #floorAvailability .section-header {
    margin-bottom: 32px !important;
  }
}
/* Prevent additive spacing from tab bars themselves. */
body.nargoon-detail-page #facilities .gallery-filters,
body.nargoon-detail-page #gallery .gallery-filters,
body.nargoon-detail-page #units .ng-type-tabs.gallery-filters,
body.nargoon-detail-page #floorAvailability .floor-tabs-premium {
  margin-top: 0 !important;
}

/* 07 / AVAILABLE UNITS — white canvas behind architectural plan images.
   Scoped to the image panels; do not change the warm page section or other cards. */
body.nargoon-detail-page #units .ng-type-showcase .ng-type-feature,
body.nargoon-detail-page #units .ng-type-showcase .ng-type-primary-plan,
body.nargoon-detail-page #units .ng-type-showcase .ng-type-feature-image,
body.nargoon-detail-page #units .ng-type-showcase .ng-type-media,
body.nargoon-detail-page #units .ng-type-showcase .ng-type-feature img,
body.nargoon-detail-page #units .ng-type-showcase .ng-type-primary-plan img {
  background-color: #fff !important;
}


/* 07 / AVAILABLE UNITS — plans details link INSIDE existing tab bar.
   Desktop: keep tabs + link visually centered as a single group.
   Mobile: one horizontal scrollable strip instead of a forced extra row. */
body.nargoon-detail-page #units .ng-type-tabs.gallery-filters {
  display:flex !important; align-items:center !important; justify-content:center !important;
  flex-wrap:nowrap !important; gap:clamp(3px,.65vw,12px) !important;
  box-sizing:border-box; max-width:100%;
}
body.nargoon-detail-page #units .ng-type-tabs .ng-plans-detail-inline {
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  flex:0 0 auto;white-space:nowrap;position:relative;
  padding:10px 14px;margin-inline-start:12px;
  font:500 13px/1.6 inherit;color:#205043;
  border-inline-start:1px solid rgba(201,169,97,.55);
  cursor:default; opacity:.83; pointer-events:none;
}
body.nargoon-detail-page #units .ng-type-tabs .ng-plans-detail-inline i {
  color:#c9a961;font-size:12px;
}
@media (max-width: 1100px) {
  body.nargoon-detail-page #units .ng-type-tabs.gallery-filters {
    justify-content:flex-start !important;overflow-x:auto !important;overflow-y:hidden !important;
    flex-wrap:nowrap !important;scrollbar-width:thin;overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch; padding-inline:12px !important;
  }
  body.nargoon-detail-page #units .ng-type-tabs [data-ng-type-tab] {flex:0 0 auto;}
  body.nargoon-detail-page #units .ng-type-tabs .ng-plans-detail-inline {
    margin-inline-start:4px;padding:9px 13px;font-size:12px;
  }
}
@media (max-width: 600px) {
  body.nargoon-detail-page #units .ng-type-tabs.gallery-filters {
    gap:4px !important;max-width:100%;
  }
  body.nargoon-detail-page #units .catalogue-inline-wrap {
    flex-direction:column !important;align-items:stretch !important;gap:12px !important;
  }
  body.nargoon-detail-page #units .catalogue-inline-wrap > * {
    box-sizing:border-box;max-width:100%;width:100%;justify-content:center;text-align:center;
  }
}


/* FLOOR 08 / Compact verified availability (October 1405) */
body.nargoon-detail-page #floorAvailability .floor-status-premium {padding:clamp(18px,3vw,30px); border-radius:14px;}
body.nargoon-detail-page #floorAvailability .floor-stats-premium {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0 auto 16px;max-width:940px;background:#faf9f6;border:1px solid #eee8dd;border-radius:8px;overflow:hidden;}
body.nargoon-detail-page #floorAvailability .floor-stat-premium {display:flex;flex-direction:row;align-items:center;justify-content:center;text-align:right;gap:12px;margin:0;padding:11px 15px;border:0;border-left:1px solid #e7e1d5;border-radius:0;background:transparent;min-width:0;box-shadow:none;}
body.nargoon-detail-page #floorAvailability .floor-stat-premium:last-child{border-left:0;}
body.nargoon-detail-page #floorAvailability .floor-stat-premium .stat-icon {font-size:1.18rem;color:#cfac67;}
body.nargoon-detail-page #floorAvailability .floor-stat-premium .stat-number {display:block;font-size:1.3rem;font-weight:650;color:#205043;line-height:1.25;}
body.nargoon-detail-page #floorAvailability .floor-stat-premium .stat-label{font-size:.72rem;line-height:1.5;color:#666;margin-top:2px;}
body.nargoon-detail-page #floorAvailability .ng-floor-building-choices {display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 8px;}
body.nargoon-detail-page #floorAvailability .ng-floor-caption {font-size:.77rem;color:#888;margin-left:5px;}
body.nargoon-detail-page #floorAvailability .ng-floor-building,body.nargoon-detail-page #floorAvailability .floor-tab-premium {border:0;background:transparent;box-shadow:none;border-radius:0;color:#6d706a;font:inherit;font-size:.84rem;padding:9px 13px;white-space:nowrap;transition:color .2s,border-color .2s;cursor:pointer;}
body.nargoon-detail-page #floorAvailability .ng-floor-building.active,body.nargoon-detail-page #floorAvailability .floor-tab-premium.active {color:#205043;font-weight:700;border-bottom:2px solid #cfac67;background:transparent;box-shadow:none;}
body.nargoon-detail-page #floorAvailability .ng-floor-building:hover,body.nargoon-detail-page #floorAvailability .floor-tab-premium:hover {color:#205043;transform:none;box-shadow:none;}
body.nargoon-detail-page #floorAvailability .floor-tabs-premium {display:flex!important;flex-wrap:wrap!important;justify-content:center!important;align-items:center!important;gap:6px!important;width:100%;max-width:100%;padding:6px 0 12px!important;margin:0 0 18px!important;border:0;border-bottom:1px solid #eee;background:transparent;overflow:visible!important;}
body.nargoon-detail-page #floorAvailability .units-premium-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
body.nargoon-detail-page #floorAvailability .ng-floor-compact-card{padding:15px 16px!important;min-width:0;border:1px solid #e7e5df;border-radius:9px;background:white;box-shadow:none;transform:none;}
body.nargoon-detail-page #floorAvailability .ng-floor-compact-card .unit-premium-header {display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 0 10px;padding:0 0 8px;border-bottom:1px solid #f0eee9;}
body.nargoon-detail-page #floorAvailability .ng-floor-compact-card .unit-premium-id{font-size:1rem;direction:ltr;unicode-bidi:isolate;color:#205043;}
body.nargoon-detail-page #floorAvailability .ng-floor-status-note{font-size:.68rem;color:#85734f;white-space:nowrap;}
body.nargoon-detail-page #floorAvailability .ng-floor-compact-details{display:flex;flex-wrap:wrap;gap:6px 13px;font-size:.74rem;color:#555;line-height:1.7;}
body.nargoon-detail-page #floorAvailability .ng-floor-compact-details span:not(:last-child)::after{content:'·';margin-right:10px;color:#b8ab93;}
body.nargoon-detail-page #floorAvailability .ng-floor-pricing{margin:10px 0 7px;display:flex;align-items:center;justify-content:space-between;gap:8px;}
body.nargoon-detail-page #floorAvailability .ng-floor-pay-controls{display:inline-flex;align-items:center;background:#f7f5f0;border-radius:7px;padding:3px;gap:2px;flex-shrink:0;}
body.nargoon-detail-page #floorAvailability .ng-floor-pay-controls button{border:0;background:transparent;color:#777;font:inherit;font-size:.76rem;padding:5px 9px;border-radius:5px;cursor:pointer;}
body.nargoon-detail-page #floorAvailability .ng-floor-pay-controls button.active{background:#205043;color:#fff;}
body.nargoon-detail-page #floorAvailability .ng-floor-price{display:flex;gap:5px;align-items:baseline;white-space:nowrap;color:#205043;}
body.nargoon-detail-page #floorAvailability .ng-floor-price b{font-size:clamp(.86rem,1.15vw,1.05rem);font-weight:700;font-variant-numeric:tabular-nums;}
body.nargoon-detail-page #floorAvailability .ng-floor-price small{font-size:.68rem;color:#666;}
body.nargoon-detail-page #floorAvailability .ng-floor-pay-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;}
body.nargoon-detail-page #floorAvailability .ng-floor-conditions-link,body.nargoon-detail-page #floorAvailability .ng-floor-consult{font:inherit;font-size:.73rem;color:#205043;text-decoration:none;background:none;border:0;cursor:pointer;padding:4px 0;}
body.nargoon-detail-page #floorAvailability .ng-floor-consult{color:#9d7b3d;}
body.nargoon-detail-page #floorAvailability .ng-floor-source-note{font-size:.74rem;color:#7b7467;text-align:center;margin:14px 0 0;}
body.nargoon-detail-page #floorAvailability .ng-floor-terms-dialog{border:1px solid #e5d9c5;border-radius:12px;padding:26px;max-width:min(540px,calc(100vw - 32px));width:100%;box-shadow:0 20px 65px #0003;direction:rtl;color:#205043;}
body.nargoon-detail-page #floorAvailability .ng-floor-terms-dialog::backdrop{background:rgba(10,25,20,.48);}
body.nargoon-detail-page #floorAvailability .ng-floor-terms-dialog h3{font-size:1.13rem;font-weight:700;margin:0 0 16px;}
body.nargoon-detail-page #floorAvailability .ng-floor-terms-dialog p{line-height:2;font-size:.91rem;margin:0 0 12px;}
body.nargoon-detail-page #floorAvailability .ng-floor-terms-dialog .ng-floor-terms-caution{font-size:.74rem;color:#7b7467;}
body.nargoon-detail-page #floorAvailability .ng-floor-dialog-close{position:absolute;left:14px;top:8px;font-size:1.6rem;border:0;background:transparent;cursor:pointer;}
@media(max-width:900px){body.nargoon-detail-page #floorAvailability .units-premium-grid{grid-template-columns:minmax(0,1fr)!important;}body.nargoon-detail-page #floorAvailability .floor-tabs-premium{flex-wrap:nowrap!important;justify-content:flex-start!important;overflow-x:auto!important;scrollbar-width:none;padding:5px 3px 12px!important;}body.nargoon-detail-page #floorAvailability .floor-stat-premium{padding:10px 7px;gap:6px;}body.nargoon-detail-page #floorAvailability .floor-stat-premium .stat-icon{display:none;}}
@media(max-width:540px){body.nargoon-detail-page #floorAvailability .floor-status-premium{padding:15px 12px;}body.nargoon-detail-page #floorAvailability .floor-stat-premium{flex-direction:column;text-align:center;padding:8px 4px;}body.nargoon-detail-page #floorAvailability .floor-stat-premium .stat-number{font-size:1.1rem;}body.nargoon-detail-page #floorAvailability .floor-stat-premium .stat-label{font-size:.6rem;}body.nargoon-detail-page #floorAvailability .ng-floor-compact-card{padding:13px 11px!important;}body.nargoon-detail-page #floorAvailability .ng-floor-compact-details{font-size:.69rem;gap:4px 9px;}body.nargoon-detail-page #floorAvailability .ng-floor-pricing{flex-wrap:wrap;}body.nargoon-detail-page #floorAvailability .ng-floor-price{min-width:0;white-space:normal;}body.nargoon-detail-page #floorAvailability .ng-floor-price b{font-size:.91rem;overflow-wrap:anywhere;}}

body.nargoon-detail-page #floorAvailability .ng-floor-show-more{display:block;margin:15px auto 2px;border:1px solid #cfac67;color:#205043;background:transparent;padding:10px 22px;font:inherit;font-size:.81rem;cursor:pointer;border-radius:5px;transition:background .2s,color .2s;}
body.nargoon-detail-page #floorAvailability .ng-floor-show-more:hover{background:#205043;color:#fff;}
body.nargoon-detail-page #floorAvailability .ng-floor-show-more[hidden]{display:none;}


/* Floor 08 — retain original independent white/gold cards, compact spacing. */
body.nargoon-detail-page #floorAvailability .floor-status-premium{padding:clamp(16px,2.1vw,24px)!important;background:#fff;}
body.nargoon-detail-page #floorAvailability .floor-stats-premium{display:flex!important;justify-content:center!important;flex-wrap:wrap!important;gap:clamp(8px,1.4vw,18px)!important;max-width:none!important;margin:0 auto 16px!important;background:none!important;border:0!important;border-radius:0!important;overflow:visible!important;}
body.nargoon-detail-page #floorAvailability .floor-stat-premium{display:flex!important;flex:0 1 205px;align-items:center!important;justify-content:center!important;flex-direction:row!important;text-align:right!important;gap:9px!important;padding:10px 12px!important;background:#fafafa!important;border:1px solid #e5e5e5!important;border-radius:8px!important;box-shadow:none!important;}
body.nargoon-detail-page #floorAvailability .floor-stat-premium .stat-icon{display:inline-block!important;font-size:1.25rem!important;color:#c9a961!important;}
body.nargoon-detail-page #floorAvailability .floor-stat-premium .stat-number{font-size:1.35rem!important;color:#222!important;font-weight:600!important;}
body.nargoon-detail-page #floorAvailability .floor-stat-premium .stat-label{font-size:.73rem!important;color:#666!important;}
/* Tower tabs and floor tabs are part of the same centered horizontal strip */
body.nargoon-detail-page #floorAvailability .ng-floor-unified-filters{display:flex;justify-content:center;align-items:center;gap:clamp(10px,1.5vw,22px);width:100%;max-width:100%;margin:0 0 15px;padding:5px 0 10px;border-bottom:1px solid #eaeaea;box-sizing:border-box;}
body.nargoon-detail-page #floorAvailability .ng-floor-building-choices{display:flex!important;flex:0 0 auto;align-items:center;gap:3px!important;margin:0!important;padding:0 11px 0 0!important;border-right:1px solid #ddd;white-space:nowrap;}
body.nargoon-detail-page #floorAvailability .ng-floor-caption{font-size:.71rem;white-space:nowrap;}
body.nargoon-detail-page #floorAvailability .floor-tabs-premium{display:flex!important;flex:0 1 auto;flex-wrap:nowrap!important;justify-content:center!important;align-items:center;gap:3px!important;margin:0!important;padding:0!important;border:0!important;overflow:visible!important;width:auto!important;min-width:0;}
body.nargoon-detail-page #floorAvailability .ng-floor-building,body.nargoon-detail-page #floorAvailability .floor-tab-premium{font-size:.79rem!important;padding:7px 9px!important;line-height:1.5;}
body.nargoon-detail-page #floorAvailability .ng-floor-building.active,body.nargoon-detail-page #floorAvailability .floor-tab-premium.active{color:#a88743!important;border-bottom-color:#c9a961!important;}
body.nargoon-detail-page #floorAvailability .ng-floor-compact-card{padding:12px 14px!important;border:1px solid #e5e5e5!important;border-radius:8px!important;}
body.nargoon-detail-page #floorAvailability .ng-floor-compact-card .unit-premium-id{color:#242424!important;}
body.nargoon-detail-page #floorAvailability .ng-floor-pay-controls button.active{background:#c9a961!important;color:#fff!important;}
body.nargoon-detail-page #floorAvailability .ng-floor-price{color:#242424!important;}
body.nargoon-detail-page #floorAvailability .ng-floor-conditions-link{color:#a08042!important;}
body.nargoon-detail-page #floorAvailability .ng-floor-compact-card .unit-premium-header{margin-bottom:6px;padding-bottom:6px;}
body.nargoon-detail-page #floorAvailability .ng-floor-pricing{margin:7px 0 4px;}
@media(max-width:1100px){body.nargoon-detail-page #floorAvailability .ng-floor-unified-filters{justify-content:flex-start;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#cfac67 transparent;-webkit-overflow-scrolling:touch;}body.nargoon-detail-page #floorAvailability .floor-tabs-premium{justify-content:flex-start!important;overflow:visible!important;flex:0 0 auto;}body.nargoon-detail-page #floorAvailability .ng-floor-building-choices{flex:0 0 auto;}}
@media(max-width:640px){body.nargoon-detail-page #floorAvailability .floor-stats-premium{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px!important;}body.nargoon-detail-page #floorAvailability .floor-stat-premium{min-width:0;padding:7px 3px!important;flex-direction:column!important;text-align:center!important;gap:3px!important;}body.nargoon-detail-page #floorAvailability .floor-stat-premium .stat-icon{font-size:.98rem!important;}body.nargoon-detail-page #floorAvailability .floor-stat-premium .stat-number{font-size:1.05rem!important;}body.nargoon-detail-page #floorAvailability .floor-stat-premium .stat-label{font-size:.6rem!important;}body.nargoon-detail-page #floorAvailability .floor-status-premium{padding:13px 10px!important;}}

/* Floor 08 — restore portrait-style cards without touching verified pricing logic. */
@media (min-width: 1101px) {
  body.nargoon-detail-page #floorAvailability .units-premium-grid {
    display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:14px!important;
  }
  body.nargoon-detail-page #floorAvailability .ng-floor-compact-card {
    min-height:205px; display:flex; flex-direction:column; justify-content:space-between;
  }
  body.nargoon-detail-page #floorAvailability .ng-floor-pricing {
    flex-wrap:wrap; gap:8px;
  }
  body.nargoon-detail-page #floorAvailability .ng-floor-price {white-space:normal;}
  body.nargoon-detail-page #floorAvailability .ng-floor-price b {overflow-wrap:anywhere;}
}
@media (min-width: 701px) and (max-width: 1100px) {
  body.nargoon-detail-page #floorAvailability .units-premium-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:700px) {
  body.nargoon-detail-page #floorAvailability .units-premium-grid {
    grid-template-columns:minmax(0,1fr)!important;
  }
}

/* FLOOR 08 — refined original portrait card style; full-width icon specification strip. */
body.nargoon-detail-page #floorAvailability .ng-floor-compact-card {
  padding:18px 17px!important;
  min-height:253px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  gap:10px!important;
  border:1px solid #e6e3dc!important;
  background:#fff!important;
  border-radius:9px!important;
}
body.nargoon-detail-page #floorAvailability .ng-floor-compact-card .unit-premium-header{margin:0!important;padding-bottom:11px!important;}
body.nargoon-detail-page #floorAvailability .ng-floor-compact-details{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  width:100%!important;
  align-content:start;
  gap:8px 9px!important;
  line-height:1.55!important;
  font-size:.75rem!important;
  padding:13px 11px!important;
  background:#faf9f6!important;
  border:1px solid #efece4!important;
  border-radius:7px!important;
  box-sizing:border-box!important;
}
body.nargoon-detail-page #floorAvailability .ng-floor-compact-details span{
  display:flex!important;align-items:center;justify-content:flex-start;
  gap:8px;white-space:nowrap;min-width:0;letter-spacing:0;
}
body.nargoon-detail-page #floorAvailability .ng-floor-compact-details span::after{content:none!important;display:none!important;}
body.nargoon-detail-page #floorAvailability .ng-floor-compact-details span i{
  color:#c9a961!important;font-size:.87rem;width:17px;text-align:center;flex:none;
}
body.nargoon-detail-page #floorAvailability .ng-floor-pricing{margin:4px 0 0!important;min-height:35px;}
body.nargoon-detail-page #floorAvailability .ng-floor-pay-foot{margin-top:auto!important;padding-top:5px;flex-wrap:wrap;}
body.nargoon-detail-page #floorAvailability .ng-floor-show-more.load-more-btn {
  display:flex;align-items:center;justify-content:center;gap:12px;
  width:max-content;max-width:calc(100% - 20px);min-height:44px;
  position:relative;isolation:isolate;overflow:hidden;
  margin:21px auto 7px!important;padding:12px 23px!important;
  background:transparent!important;color:#205043!important;
  border:1px solid #c9a961!important;border-radius:4px!important;
  font:inherit;font-size:.85rem!important;transition:color .25s ease!important;
}
body.nargoon-detail-page #floorAvailability .ng-floor-show-more.load-more-btn::before{
  content:'';position:absolute;inset:0;background:#c9a961;
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease;z-index:-1;
}
body.nargoon-detail-page #floorAvailability .ng-floor-show-more.load-more-btn:hover,
body.nargoon-detail-page #floorAvailability .ng-floor-show-more.load-more-btn:focus-visible{color:#fff!important;background:transparent!important;}
body.nargoon-detail-page #floorAvailability .ng-floor-show-more.load-more-btn:hover::before,
body.nargoon-detail-page #floorAvailability .ng-floor-show-more.load-more-btn:focus-visible::before{transform:scaleX(1);transform-origin:right;}
body.nargoon-detail-page #floorAvailability .ng-floor-show-more.load-more-btn[hidden]{display:none!important;}
body.nargoon-detail-page #floorAvailability .ng-floor-show-more.load-more-btn .btn-icon{font-size:.75rem;transition:transform .2s;}
@media(max-width:700px){
 body.nargoon-detail-page #floorAvailability .ng-floor-compact-card{min-height:235px!important;padding:15px 13px!important;}
 body.nargoon-detail-page #floorAvailability .ng-floor-compact-details{padding:11px 9px!important;font-size:.72rem!important;gap:8px 6px!important;}
}
@media(max-width:340px){body.nargoon-detail-page #floorAvailability .ng-floor-compact-details{grid-template-columns:1fr!important;}}

/* Floor 08 — original upright cards with bold, readable specifications. */
body.nargoon-detail-page #floorAvailability .ng-floor-compact-card .unit-premium-id{font-weight:800!important;font-size:1.1rem!important;}
body.nargoon-detail-page #floorAvailability .ng-floor-compact-details span{font-weight:700!important;color:#373b37!important;}
body.nargoon-detail-page #floorAvailability .ng-floor-compact-card .ng-floor-price b{font-weight:800!important;}
body.nargoon-detail-page #floorAvailability .ng-floor-compact-card .ng-floor-pay-controls button{font-weight:700!important;}
body.nargoon-detail-page #floorAvailability .ng-floor-compact-card .ng-floor-consult{font-weight:700!important;}
@media(max-width:400px){body.nargoon-detail-page #floorAvailability .ng-floor-compact-details{grid-template-columns:minmax(0,1fr)!important;}body.nargoon-detail-page #floorAvailability .ng-floor-compact-details span{white-space:normal;}}

/* Floor 08 — breathable original vertical sales cards, spacing only (2026-10-11). */
body.nargoon-detail-page #floorAvailability .ng-floor-compact-card {
  gap:15px!important;
  padding:23px 21px!important;
  min-height:290px!important;
}
body.nargoon-detail-page #floorAvailability .ng-floor-compact-card .unit-premium-header {
  padding-bottom:15px!important;
}
body.nargoon-detail-page #floorAvailability .ng-floor-compact-details {
  padding:17px 14px!important;
  row-gap:12px!important;
  column-gap:12px!important;
  line-height:1.75!important;
}
body.nargoon-detail-page #floorAvailability .ng-floor-pricing {
  margin:6px 0 3px!important;
  min-height:40px!important;
  row-gap:11px!important;
}
body.nargoon-detail-page #floorAvailability .ng-floor-pay-foot {
  padding-top:10px!important;
  row-gap:12px!important;
}
@media(max-width:700px){
  body.nargoon-detail-page #floorAvailability .ng-floor-compact-card {
    gap:13px!important;
    padding:18px 15px!important;
    min-height:275px!important;
  }
  body.nargoon-detail-page #floorAvailability .ng-floor-compact-details {
    padding:14px 11px!important;
    row-gap:11px!important;
    column-gap:9px!important;
  }
}


/* FLOOR 08 — remove tinted inner specifications panel; lighter labels, more air. */
body.nargoon-detail-page #floorAvailability .ng-floor-compact-card {
  min-height:315px!important;
  gap:18px!important;
}
body.nargoon-detail-page #floorAvailability .ng-floor-compact-details {
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:16px 3px!important;
  row-gap:17px!important;
  column-gap:12px!important;
  line-height:1.7!important;
}
body.nargoon-detail-page #floorAvailability .ng-floor-compact-details span {
  font-weight:400!important;
  color:#555650!important;
}
body.nargoon-detail-page #floorAvailability .ng-floor-compact-details span i {
  color:#c9a961!important;
}
@media(max-width:700px){
 body.nargoon-detail-page #floorAvailability .ng-floor-compact-card{min-height:300px!important;gap:15px!important;}
 body.nargoon-detail-page #floorAvailability .ng-floor-compact-details{padding:13px 2px!important;row-gap:15px!important;}
}

/* 07: two architectural plans always visible; user-click video is a separate gallery tile. */
body.nargoon-detail-page #units .ng-type-photo-row > .ng-type-video-tile {
 position:relative; min-width:0; height:auto!important; min-height:0!important;
 aspect-ratio:4/3; border:1px solid #e5e2d8; overflow:hidden; background:#f8f7f4;
}
body.nargoon-detail-page #units .ng-type-photo-row .ng-type-video-tile .ng-type-feature-image,
body.nargoon-detail-page #units .ng-type-photo-row .ng-type-video-tile video {
 width:100%!important; height:100%!important; min-height:0!important;
 object-fit:cover; position:absolute; inset:0;
}
body.nargoon-detail-page #units .ng-type-video-tile .ng-type-feature-image img {width:100%;height:100%;object-fit:cover;}
body.nargoon-detail-page #units .ng-type-video-tile .ng-type-feature-image {cursor:pointer;}
body.nargoon-detail-page #units .ng-type-video-tile .ng-type-feature-image::after {
 content:'\25B6';position:absolute;inset:0;display:grid;place-items:center;
 font-size:28px;color:white;text-shadow:0 1px 12px #000;
 pointer-events:none;
}
body.nargoon-detail-page #units .ng-type-video-tile .ng-type-feature-image[hidden] {display:none!important;}
body.nargoon-detail-page #units .ng-type-video-error {position:absolute;bottom:4px;left:5px;right:5px;background:#fff;padding:7px;font-size:12px;z-index:3;text-align:center}

/* Section 07: video uses the same full-screen lightbox as images. */
.ng-type-dialog .ng-type-dialog-video {display:block;width:min(100%,1040px);max-width:100%;max-height:76vh;aspect-ratio:16 / 9;object-fit:contain;background:#111;margin:auto;}
.ng-type-dialog .ng-type-dialog-video[hidden],.ng-type-dialog img[hidden],.ng-type-dialog .ng-type-dialog-controls[hidden],.ng-type-dialog .ng-type-dialog-video-status[hidden]{display:none!important;}
.ng-type-dialog .ng-type-dialog-video-status{text-align:center;color:#8b2929;margin:10px 0;}
@media(max-width:650px){.ng-type-dialog{max-width:96vw;padding:50px 8px 14px;}.ng-type-dialog .ng-type-dialog-video{max-height:72vh;}}


/* NARGOON 2026-10-11 | Unified 1200px content width, scoped to details page.
   Full-bleed section backgrounds and hero remain full width. */
body.nargoon-detail-page{--ng-detail-content-width:1200px;}
body.nargoon-detail-page .section:not(.hero){
  box-sizing:border-box;
  padding-inline:max(20px,calc((100% - var(--ng-detail-content-width))/2))!important;
}
body.nargoon-detail-page .section:not(.hero) > :not(.lightbox):not(dialog){max-width:var(--ng-detail-content-width);margin-inline:auto;min-width:0;box-sizing:border-box;}
/* The section headers retain their centered typography. */
body.nargoon-detail-page .section:not(.hero) > .section-header {width:100%;}
/* Sections built outside .section use independent internal wrappers. */
body.nargoon-detail-page .lifestyle-luxury-container,
body.nargoon-detail-page #articles .articles-container,
body.nargoon-detail-page .articles-container,
body.nargoon-detail-page .vision-section > .container,
body.nargoon-detail-page .identity-content {
 max-width:var(--ng-detail-content-width)!important;
 box-sizing:border-box;
}
body.nargoon-detail-page .lifestyle-luxury-header {
 max-width:var(--ng-detail-content-width); margin-inline:auto;
 box-sizing:border-box;
}
body.nargoon-detail-page #floorAvailability #floorStatusView {max-width:var(--ng-detail-content-width)!important;}
/* Fixed navigation and full-screen media must not be constrained as content. */
body.nargoon-detail-page #mainNav .nav-container {max-width:var(--ng-detail-content-width)!important;}
@media(max-width:900px){
 body.nargoon-detail-page .section:not(.hero){padding-inline:20px!important;}
 body.nargoon-detail-page .lifestyle-luxury-container,
 body.nargoon-detail-page #articles .articles-container,
 body.nargoon-detail-page .articles-container{padding-inline:20px!important;}
 body.nargoon-detail-page .lifestyle-luxury-header{padding-inline:20px!important;}
}
@media(max-width:480px){
 body.nargoon-detail-page .section:not(.hero){padding-inline:16px!important;}
 body.nargoon-detail-page .lifestyle-luxury-container,
 body.nargoon-detail-page #articles .articles-container,
 body.nargoon-detail-page .articles-container{padding-inline:16px!important;}
 body.nargoon-detail-page .lifestyle-luxury-header{padding-inline:16px!important;}
 body.nargoon-detail-page .section:not(.hero) > :not(.lightbox):not(dialog){max-width:100%;}
}


/* NARGOON responsive content width | 1200 / 1320 / 1440 / 1600
   Width steps use CSS viewport width, not physical display resolution.
   Shared variable keeps independent section wrappers and navigation aligned.
   Backgrounds, full-bleed hero and lightboxes are intentionally unaffected. */
@media (min-width: 1920px) {
 body.nargoon-detail-page { --ng-detail-content-width:1320px; }
}
@media (min-width: 2560px) {
 body.nargoon-detail-page { --ng-detail-content-width:1440px; }
}
@media (min-width: 3840px) {
 body.nargoon-detail-page { --ng-detail-content-width:1600px; }
}
/* Keep a reasonable breathing room when viewport is close to container width. */
@media (min-width: 901px) {
 body.nargoon-detail-page .section:not(.hero) {
  padding-inline:max(32px, calc((100% - var(--ng-detail-content-width)) / 2))!important;
 }
}
/* Older fixed 1200px wrapper rules must follow the responsive variable too. */
body.nargoon-detail-page .lifestyle-luxury-container,
body.nargoon-detail-page .lifestyle-luxury-header,
body.nargoon-detail-page #articles .articles-container,
body.nargoon-detail-page .articles-container,
body.nargoon-detail-page .vision-section > .container,
body.nargoon-detail-page .identity-content,
body.nargoon-detail-page #mainNav .nav-container,
body.nargoon-detail-page #floorAvailability #floorStatusView {
 max-width:var(--ng-detail-content-width)!important;
 margin-inline:auto;
 box-sizing:border-box;
}
@media (min-width: 1440px) {
 body.nargoon-detail-page .lifestyle-luxury-container,
 body.nargoon-detail-page .lifestyle-luxury-header,
 body.nargoon-detail-page #articles .articles-container,
 body.nargoon-detail-page .articles-container,
 body.nargoon-detail-page .vision-section > .container,
 body.nargoon-detail-page .identity-content,
 body.nargoon-detail-page #mainNav .nav-container,
 body.nargoon-detail-page #floorAvailability #floorStatusView {
  width:min(100%, var(--ng-detail-content-width));
  max-width:var(--ng-detail-content-width)!important;
 }
}


/* === NARGOON / AUDITED RESPONSIVE CONTAINERS / 2026-10-11 ===
   Applies to the detail page only. Full-bleed section backgrounds remain intact.
   Breakpoints reference CSS viewport width (browser zoom and OS scaling apply). */
body.nargoon-detail-page {
  --ng-detail-content-width: 1200px;
  --ng-detail-side-gap: 32px;
}
@media (min-width:1920px) { body.nargoon-detail-page { --ng-detail-content-width:1320px; } }
@media (min-width:2560px) { body.nargoon-detail-page { --ng-detail-content-width:1440px; } }
@media (min-width:3840px) { body.nargoon-detail-page { --ng-detail-content-width:1600px; } }
@media (max-width:1023px) { body.nargoon-detail-page { --ng-detail-side-gap:24px; } }
@media (max-width:767px) { body.nargoon-detail-page { --ng-detail-side-gap:20px; } }
@media (max-width:479px) { body.nargoon-detail-page { --ng-detail-side-gap:16px; } }

/* Ordinary content columns share one centered width. Avoid global .container or
   .section-child rules that can inadvertently constrain media, dialogs, maps. */
body.nargoon-detail-page .section:not(.hero) {
  padding-inline:max(var(--ng-detail-side-gap),calc((100% - var(--ng-detail-content-width)) / 2))!important;
}
body.nargoon-detail-page .section:not(.hero) > :not(.lightbox):not(dialog) {
  max-width:min(100%, var(--ng-detail-content-width))!important;
  box-sizing:border-box;
}
body.nargoon-detail-page .location-compact,
body.nargoon-detail-page .identity-content,
body.nargoon-detail-page .vision-section > .container,
body.nargoon-detail-page .vision-section .container,
body.nargoon-detail-page .lifestyle-luxury-container,
body.nargoon-detail-page .lifestyle-luxury-header,
body.nargoon-detail-page .articles-container,
body.nargoon-detail-page #articles .articles-container,
body.nargoon-detail-page #floorAvailability #floorStatusView,
body.nargoon-detail-page #units .ng-type-panel,
body.nargoon-detail-page #units .ng-type-slider-nav,
body.nargoon-detail-page #units .ng-type-slider-progress,
body.nargoon-detail-page #units .ng-type-showcase,
body.nargoon-detail-page #units .ng-type-photo-row,
body.nargoon-detail-page #units .ng-type-panel-head,
body.nargoon-detail-page #mainNav .nav-container,
body.nargoon-detail-page #mainNav.scrolled .nav-container {
  width:100%;
  max-width:min(100%,var(--ng-detail-content-width))!important;
  margin-inline:auto;
  box-sizing:border-box;
}
/* Content in special full-width sections retains an inner centered column. */
body.nargoon-detail-page .gallery-section > .gallery-header,
body.nargoon-detail-page .gallery-section > .gallery-filters,
body.nargoon-detail-page .gallery-section > .gallery-grid {
  max-width:min(100%,var(--ng-detail-content-width))!important;
  margin-inline:auto;
  box-sizing:border-box;
}
/* The gallery's own vertical separation must not be lost on centering. */
body.nargoon-detail-page .gallery-section > .gallery-header { margin-bottom:5rem; }
body.nargoon-detail-page .gallery-section > .gallery-filters { margin-bottom:4rem; }
/* Sections outside .section need side breathing room at small viewports. */
@media (max-width:1023px) {
  body.nargoon-detail-page .gallery-section,
  body.nargoon-detail-page .identity-section,
  body.nargoon-detail-page .vision-section {
    padding-inline:var(--ng-detail-side-gap)!important;
  }
  body.nargoon-detail-page #units .ng-type-showcase,
  body.nargoon-detail-page #units .ng-type-photo-row { min-width:0; }
}
/* Avoid portrait-phone horizontal overflow from the photo tiles and columns. */
@media (max-width:767px) {
  body.nargoon-detail-page #units .ng-type-showcase { grid-template-columns:minmax(0,1fr)!important; }
  body.nargoon-detail-page #units .ng-type-photo-row { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  body.nargoon-detail-page #units .ng-type-showcase > *,
  body.nargoon-detail-page #units .ng-type-photo-row > * { min-width:0; }
}
@media (max-width:479px) {
  body.nargoon-detail-page #units .ng-type-photo-row {gap:10px;}
}

/* 2026-10-11 — Final HTML-based width consistency pass.
   Keep content aligned; do not clip intentional media / moving carousels. */
body.nargoon-detail-page #contact > .container,
body.nargoon-detail-page #articles > .articles-header {
  box-sizing:border-box;
  max-width:var(--ng-detail-content-width)!important;
  margin-inline:auto!important;
}
@media (max-width:1439px){
 body.nargoon-detail-page #lifestyle > .lifestyle-luxury-container,
 body.nargoon-detail-page #lifestyle > .lifestyle-luxury-header,
 body.nargoon-detail-page #articles > .articles-container,
 body.nargoon-detail-page #articles > .articles-header,
 body.nargoon-detail-page #contact > .container {
   box-sizing:border-box!important;
   width:calc(100% - 64px)!important;
   max-width:var(--ng-detail-content-width)!important;
   margin-inline:auto!important;
 }
}
@media (max-width:1023px){
 body.nargoon-detail-page #lifestyle > .lifestyle-luxury-container,
 body.nargoon-detail-page #lifestyle > .lifestyle-luxury-header,
 body.nargoon-detail-page #articles > .articles-container,
 body.nargoon-detail-page #articles > .articles-header,
 body.nargoon-detail-page #contact > .container {width:calc(100% - 48px)!important;}
}
@media (max-width:600px){
 body.nargoon-detail-page #lifestyle > .lifestyle-luxury-container,
 body.nargoon-detail-page #lifestyle > .lifestyle-luxury-header,
 body.nargoon-detail-page #articles > .articles-container,
 body.nargoon-detail-page #articles > .articles-header,
 body.nargoon-detail-page #contact > .container {width:calc(100% - 32px)!important;}
}
/* On 1440+ let the four negotiated max-width steps control the content. */
@media (min-width:1440px){
 body.nargoon-detail-page #contact > .container,
 body.nargoon-detail-page #articles > .articles-header {
   width:min(100%,var(--ng-detail-content-width))!important;
 }
}

/* FILM 04: true WebM thumbnails; no separate poster images needed. */
#videoLightbox #video-lightbox-thumbnails .lightbox-thumb {
    position: relative;
    display: block;
    padding: 0;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    overflow: hidden;
    background: #242424;
}
#videoLightbox #video-lightbox-thumbnails .ng-film-thumb-video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    border: 0;
}
#videoLightbox #video-lightbox-thumbnails .lightbox-thumb.active {
    border-color: #c9a961;
}
@media(max-width: 600px) {
    #videoLightbox #video-lightbox-thumbnails .lightbox-thumb { width: 46px; height: 46px; }
}

/* FILM 04: captured WebM frames in round thumbnails (no external posters). */
#videoLightbox #video-lightbox-thumbnails .lightbox-thumb {
    display:flex; align-items:center; justify-content:center; isolation:isolate;
    background:#242424; position:relative; overflow:hidden;
}
#videoLightbox #video-lightbox-thumbnails .ng-film-thumb-frame {
    display:block; position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; border-radius:50%; pointer-events:none;
}
#videoLightbox #video-lightbox-thumbnails .ng-film-thumb-fallback {
    color:#fff; font:600 13px/1 sans-serif; letter-spacing:.08em;
    opacity:.9; position:relative; pointer-events:none;
}

/* =============================================================
   SECTION 08 FILTER VISIBILITY — preserve film preview CSS.
   Apply last to prevent later CSS versions from resurrecting
   mobile selectors on desktop.
   ============================================================= */
body.nargoon-detail-page #floorAvailability #ngFloorMobileFilters,
body.nargoon-detail-page #floorAvailability .ng-floor-mobile-filters {
  display: none !important;
}
@media (max-width: 768px) {
  body.nargoon-detail-page #floorAvailability #ngFloorUnifiedFilters,
  body.nargoon-detail-page #floorAvailability .ng-floor-unified-filters {
    display: none !important;
  }
  body.nargoon-detail-page #floorAvailability #ngFloorMobileFilters,
  body.nargoon-detail-page #floorAvailability .ng-floor-mobile-filters {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    margin: 0 0 18px;
    direction: rtl;
  }
  body.nargoon-detail-page #floorAvailability #ngFloorMobileFilters .ng-floor-mobile-field {
    display: flex;
    flex: 1 1 155px;
    max-width: 280px;
    min-width: 0;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    color: #205043;
  }
  body.nargoon-detail-page #floorAvailability #ngFloorMobileFilters select {
    width: 100%;
    min-width: 0;
    padding: 9px 8px;
    border: 1px solid #ddd8cb;
    border-radius: 5px;
    background: #fff;
    color: #205043;
    font: inherit;
  }
  body.nargoon-detail-page #floorAvailability #ngFloorMobileFilters .ng-floor-mobile-field > i { display: none; }
}

/* Section 02: Hide the large image stage number; keep the DOM node for slider JS. */
#vision .gallery-container .stage-number {
    display: none !important;
}


/* Unit plan overview: right-to-left order = specifications, primary plan, secondary plan.
   Scoped to #units; all existing media and JS behavior are preserved. */
body.nargoon-detail-page #units .ng-type-showcase.ng-type-overview {
  display: grid !important;
  grid-template-columns: minmax(205px, .78fr) minmax(0, 1.12fr) minmax(0, 1fr) !important;
  direction: rtl;
  align-items: stretch;
  gap: 14px;
  width: 100%;
  max-width: min(100%, var(--ng-detail-content-width)) !important;
  margin: 0 auto 14px;
  box-sizing: border-box;
}
body.nargoon-detail-page #units .ng-type-overview > .ng-type-specs,
body.nargoon-detail-page #units .ng-type-overview > .ng-type-primary-plan,
body.nargoon-detail-page #units .ng-type-overview > .ng-type-feature {
  height: clamp(300px, 32vw, 430px) !important;
  min-height: 0 !important;
  min-width: 0 !important;
  box-sizing: border-box;
  background: #fff !important;
}
body.nargoon-detail-page #units .ng-type-overview > .ng-type-primary-plan,
body.nargoon-detail-page #units .ng-type-overview > .ng-type-feature,
body.nargoon-detail-page #units .ng-type-overview > .ng-type-feature .ng-type-feature-image {
  background-color: #fff !important;
}
body.nargoon-detail-page #units .ng-type-overview > .ng-type-primary-plan,
body.nargoon-detail-page #units .ng-type-overview > .ng-type-feature .ng-type-feature-image {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e6e1d7;
}
body.nargoon-detail-page #units .ng-type-overview > .ng-type-primary-plan img,
body.nargoon-detail-page #units .ng-type-overview > .ng-type-feature .ng-type-feature-image img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  background: #fff !important;
}
body.nargoon-detail-page #units .ng-type-overview > .ng-type-feature {
  position: relative;
  overflow: hidden;
  border: 1px solid #e6e1d7;
}
body.nargoon-detail-page #units .ng-type-overview > .ng-type-feature .ng-type-feature-image {
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: 0;
  border: 0;
}
body.nargoon-detail-page #units .ng-type-specs {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  padding: clamp(13px, 1.25vw, 20px);
  border: 1px solid #e5e0d5;
  background: #fff !important;
  color: #173d32;
  box-sizing: border-box;
}
body.nargoon-detail-page #units .ng-type-specs__eyebrow {
  color: #9b855a;
  font-size: 9px;
  letter-spacing: .08em;
  line-height: 1.6;
  margin-bottom: 5px;
}
body.nargoon-detail-page #units .ng-type-specs__title {
  margin: 0;
  color: #173d32;
  font-size: clamp(18px, 1.55vw, 25px);
  font-weight: 500;
  line-height: 1.45;
}
body.nargoon-detail-page #units .ng-type-specs__english {
  color: #9b855a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10px;
  line-height: 1.6;
  margin: 2px 0 10px;
}
body.nargoon-detail-page #units .ng-type-specs__area {
  padding: 9px 0;
  border-top: 1px solid #e4dfd3;
  border-bottom: 1px solid #e4dfd3;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 6px;
}
body.nargoon-detail-page #units .ng-type-specs__area span {
  flex: 0 0 100%;
  color: #77766e;
  font-size: 10px;
}
body.nargoon-detail-page #units .ng-type-specs__area strong {
  font-size: clamp(23px, 2vw, 31px);
  line-height: 1.2;
  font-weight: 500;
  color: #173d32;
  font-variant-numeric: tabular-nums;
}
body.nargoon-detail-page #units .ng-type-specs__area small {
  color: #77766e;
  font-size: 10px;
}
body.nargoon-detail-page #units .ng-type-specs__list {
  margin: 3px 0 0;
  padding: 0;
}
body.nargoon-detail-page #units .ng-type-specs__list > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 0;
  border-bottom: 1px solid #ece8df;
}
body.nargoon-detail-page #units .ng-type-specs__list dt {
  color: #77766e;
  font-size: 10px;
  line-height: 1.6;
}
body.nargoon-detail-page #units .ng-type-specs__list dd {
  margin: 0;
  color: #173d32;
  font-size: 10px;
  line-height: 1.6;
  font-weight: 600;
  text-align: left;
}
body.nargoon-detail-page #units .ng-type-specs__location {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
body.nargoon-detail-page #units .ng-type-specs__location span {
  color: #77766e;
  font-size: 9px;
}
body.nargoon-detail-page #units .ng-type-specs__location strong {
  color: #173d32;
  font-size: 10px;
  font-weight: 600;
}
body.nargoon-detail-page #units .ng-type-specs__pending {
  border-top: 1px solid #e4dfd3;
  margin-top: 12px;
  padding-top: 12px;
  color: #77766e;
  font-size: 12px;
  line-height: 1.9;
}
@media (max-width: 1000px) {
  body.nargoon-detail-page #units .ng-type-showcase.ng-type-overview {
    grid-template-columns: minmax(175px, .8fr) minmax(0, 1.05fr) minmax(0, .95fr) !important;
    gap: 9px;
  }
  body.nargoon-detail-page #units .ng-type-specs { padding: 10px; }
  body.nargoon-detail-page #units .ng-type-specs__list > div { padding: 4px 0; }
  body.nargoon-detail-page #units .ng-type-specs__list dt,
  body.nargoon-detail-page #units .ng-type-specs__list dd { font-size: 9px; }
}
@media (max-width: 760px) {
  body.nargoon-detail-page #units .ng-type-showcase.ng-type-overview {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px;
  }
  body.nargoon-detail-page #units .ng-type-overview > .ng-type-specs {
    order: 0;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible;
    padding: 18px;
  }
  body.nargoon-detail-page #units .ng-type-overview > .ng-type-primary-plan {
    order: 1;
    height: auto !important;
    aspect-ratio: 16 / 10;
  }
  body.nargoon-detail-page #units .ng-type-overview > .ng-type-feature {
    order: 2;
    height: auto !important;
    aspect-ratio: 16 / 10;
  }
  body.nargoon-detail-page #units .ng-type-overview > .ng-type-feature .ng-type-feature-image {
    height: 100%;
  }
}


/* Readability refinement for all unit-specification tabs; scoped to #units only. */
body.nargoon-detail-page #units .ng-type-specs__list dt,
body.nargoon-detail-page #units .ng-type-specs__list dd {
  font-size: 12px;
  line-height: 1.75;
}
body.nargoon-detail-page #units .ng-type-specs__location span {
  font-size: 11px;
  line-height: 1.7;
}
body.nargoon-detail-page #units .ng-type-specs__location strong {
  font-size: 12px;
  line-height: 1.75;
}
body.nargoon-detail-page #units .ng-type-specs__area span {
  font-size: 11px;
}
body.nargoon-detail-page #units .ng-type-specs__area small {
  font-size: 11px;
}
@media (max-width: 1000px) {
  body.nargoon-detail-page #units .ng-type-specs__list dt,
  body.nargoon-detail-page #units .ng-type-specs__list dd {
    font-size: 11px;
  }
  body.nargoon-detail-page #units .ng-type-specs__location span {
    font-size: 10.5px;
  }
  body.nargoon-detail-page #units .ng-type-specs__location strong {
    font-size: 11px;
  }
}
@media (max-width: 760px) {
  body.nargoon-detail-page #units .ng-type-specs__list dt,
  body.nargoon-detail-page #units .ng-type-specs__list dd {
    font-size: 12px;
  }
  body.nargoon-detail-page #units .ng-type-specs__location span,
  body.nargoon-detail-page #units .ng-type-specs__location strong {
    font-size: 12px;
  }
}

/* =========================================================
   PROJECT BACKGROUND — 2026-10-28 HOTFIX
   Fixes:
   1) use page background instead of isolated solid section background
   2) right-align all content
   3) reduce excessive vertical height and make desktop layout denser
   ========================================================= */
body.nargoon-detail-page #project-background {
  background: transparent !important;
  padding: clamp(34px, 4.5vw, 56px) 0 clamp(22px, 3vw, 34px) !important;
}
body.nargoon-detail-page #project-background .project-background-container {
  max-width: var(--ng-detail-content-width, 1180px) !important;
  margin-inline: auto !important;
  padding-inline: clamp(16px, 2.4vw, 28px) !important;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px 22px;
}
body.nargoon-detail-page #project-background .project-background-header {
  grid-column: 1 / -1;
  max-width: none !important;
  margin: 0 0 8px !important;
  text-align: right !important;
}
body.nargoon-detail-page #project-background .pb-kicker {
  display: block !important;
  margin-bottom: 8px !important;
  font-size: 12px !important;
  letter-spacing: .22em !important;
}
body.nargoon-detail-page #project-background .project-background-header h2 {
  font-size: clamp(28px, 3vw, 44px) !important;
  line-height: 1.45 !important;
  text-align: right !important;
}
body.nargoon-detail-page #project-background .pb-intro {
  grid-column: 1 / -1;
  max-width: none !important;
  margin: 0 !important;
  padding: 20px 22px !important;
  background: rgba(255,255,255,.42) !important;
  border: 1px solid rgba(201,169,97,.22) !important;
}
body.nargoon-detail-page #project-background .pb-block {
  grid-column: span 6;
  margin-top: 0 !important;
  padding: 20px 22px !important;
  min-height: 100%;
  background: rgba(255,255,255,.62) !important;
  border-color: rgba(41,41,35,.08) !important;
}
body.nargoon-detail-page #project-background p,
body.nargoon-detail-page #project-background .pb-list li,
body.nargoon-detail-page #project-background .pb-block h3 {
  text-align: right !important;
}
body.nargoon-detail-page #project-background p {
  font-size: 15px !important;
  line-height: 2.05 !important;
}
body.nargoon-detail-page #project-background .pb-block h3 {
  margin-bottom: 14px !important;
  line-height: 1.55 !important;
}
body.nargoon-detail-page #project-background .pb-block h3::before {
  top: 7px !important;
  height: 20px !important;
}
body.nargoon-detail-page #project-background .pb-list li {
  padding: 10px 20px 10px 0 !important;
  line-height: 1.95 !important;
}
body.nargoon-detail-page #project-background .pb-list li::before {
  top: 20px !important;
}
body.nargoon-detail-page #project-background .pb-values {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 18px !important;
}
body.nargoon-detail-page #project-background .pb-values li {
  padding-block: 10px !important;
}
body.nargoon-detail-page #project-background .pb-values li::before {
  top: 20px !important;
}
@media (max-width: 980px) {
  body.nargoon-detail-page #project-background .pb-block,
  body.nargoon-detail-page #project-background .pb-intro {
    grid-column: 1 / -1;
  }
}
@media (max-width: 600px) {
  body.nargoon-detail-page #project-background {
    padding: 28px 0 18px !important;
  }
  body.nargoon-detail-page #project-background .project-background-container {
    padding-inline: 14px !important;
    gap: 12px !important;
  }
  body.nargoon-detail-page #project-background .project-background-header h2 {
    font-size: 24px !important;
    line-height: 1.5 !important;
  }
  body.nargoon-detail-page #project-background .pb-intro,
  body.nargoon-detail-page #project-background .pb-block {
    padding: 16px 16px !important;
  }
  body.nargoon-detail-page #project-background p {
    font-size: 13px !important;
    line-height: 2 !important;
  }
  body.nargoon-detail-page #project-background .pb-list li,
  body.nargoon-detail-page #project-background .pb-values li {
    padding: 9px 18px 9px 0 !important;
  }
  body.nargoon-detail-page #project-background .pb-values {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   PROJECT BACKGROUND — COMPACT / PAGE-BACKGROUND MATCH
   Follow-up refinement based on the live-page screenshots.
   Scoped only to #project-background; no page-wide changes.
   ========================================================= */
#project-background {
  background: transparent !important;
  background-color: transparent !important;
  padding: clamp(26px, 3.2vw, 42px) 0 clamp(20px, 2.4vw, 30px) !important;
  margin: 0 !important;
  color: inherit;
}

#project-background,
#project-background * {
  box-sizing: border-box;
}

#project-background .project-background-container {
  width: min(100% - 40px, 1280px) !important;
  max-width: 1280px !important;
  margin-inline: auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: start !important;
  gap: 22px 42px !important;
}

#project-background .project-background-header {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 0 14px !important;
  text-align: right !important;
  border-bottom: 1px solid rgba(201, 169, 97, .42) !important;
}

#project-background .pb-kicker {
  display: block !important;
  margin: 0 0 6px !important;
  color: #b99850 !important;
  font-size: 10px !important;
  line-height: 1.5 !important;
  letter-spacing: .18em !important;
  text-align: right !important;
}

#project-background .project-background-header h2 {
  margin: 0 !important;
  font-size: clamp(23px, 2.3vw, 32px) !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
  text-align: right !important;
}

#project-background .pb-intro {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: start !important;
  gap: 10px 34px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 0 18px !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#project-background .pb-block {
  display: block !important;
  align-self: start !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 2px 0 16px !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(39, 58, 49, .12) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#project-background .pb-block h3 {
  position: relative !important;
  margin: 0 0 8px !important;
  padding: 0 13px 0 0 !important;
  color: inherit !important;
  font-size: clamp(19px, 1.8vw, 25px) !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  text-align: right !important;
}

#project-background .pb-block h3::before {
  content: "" !important;
  position: absolute !important;
  top: 7px !important;
  right: 0 !important;
  left: auto !important;
  width: 3px !important;
  height: 17px !important;
  background: #c9a961 !important;
  border-radius: 2px !important;
}

#project-background p {
  margin: 0 0 8px !important;
  color: inherit !important;
  font-size: 14px !important;
  line-height: 1.9 !important;
  text-align: right !important;
}

#project-background p:last-child {
  margin-bottom: 0 !important;
}

#project-background .pb-list {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#project-background .pb-list li {
  position: relative !important;
  margin: 0 !important;
  padding: 4px 16px 4px 0 !important;
  color: inherit !important;
  font-size: 13px !important;
  line-height: 1.8 !important;
  text-align: right !important;
}

#project-background .pb-list li::before {
  content: "" !important;
  position: absolute !important;
  top: 13px !important;
  right: 2px !important;
  left: auto !important;
  width: 4px !important;
  height: 4px !important;
  background: #c9a961 !important;
  border-radius: 50% !important;
}

#project-background .pb-values {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 14px !important;
}

#project-background .pb-values li {
  padding-block: 4px !important;
}

@media (max-width: 760px) {
  #project-background {
    padding: 24px 0 18px !important;
  }

  #project-background .project-background-container {
    width: calc(100% - 32px) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  #project-background .project-background-header {
    padding-bottom: 10px !important;
  }

  #project-background .project-background-header h2 {
    font-size: 23px !important;
  }

  #project-background .pb-intro {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding-bottom: 8px !important;
  }

  #project-background .pb-block {
    padding-bottom: 12px !important;
  }

  #project-background .pb-block h3 {
    font-size: 20px !important;
  }

  #project-background p {
    font-size: 13px !important;
    line-height: 1.85 !important;
  }

  #project-background .pb-list li {
    font-size: 12.5px !important;
    line-height: 1.8 !important;
  }
}


/* PROJECT BACKGROUND — white section + full-width intro alignment (2026-10-28)
   Explicitly scoped to this section. The intro panel stretches to the same
   content width as the lower project-background blocks. */
body.nargoon-detail-page #project-background {
  background: #fff !important;
  background-color: #fff !important;
}
body.nargoon-detail-page #project-background .project-background-container {
  width: 90% !important;
  max-width: none !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}
body.nargoon-detail-page #project-background .pb-intro {
  grid-column: 1 / -1 !important;
  justify-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  background: #fff !important;
  background-color: #fff !important;
}
@media (max-width: 760px) {
  body.nargoon-detail-page #project-background .project-background-container {
    width: calc(100% - 32px) !important;
    max-width: none !important;
  }
}


/* PROJECT BACKGROUND — INTRO WIDTH ALIGNMENT + RESPONSIVE GRID (v5)
   Only affects #project-background. The two-column intro panel now spans
   the same full content row as the lower project-background section layout.
   The content itself remains two columns on wide screens and stacks on mobile. */
#project-background .project-background-container {
  width: min(calc(100% - 64px), 1440px) !important;
  max-width: 1440px !important;
  margin-inline: auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  align-items: start !important;
  gap: 22px 24px !important;
}

#project-background .project-background-header {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
}

#project-background .pb-intro {
  grid-column: 1 / -1 !important;
  justify-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px 34px !important;
  margin-inline: 0 !important;
}

#project-background .pb-block {
  grid-column: span 6 !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 980px) {
  #project-background .project-background-container {
    width: calc(100% - 40px) !important;
    max-width: none !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 20px !important;
  }

  #project-background .pb-intro {
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 22px !important;
  }

  #project-background .pb-block {
    grid-column: span 1 !important;
  }
}

@media (max-width: 680px) {
  #project-background .project-background-container {
    width: calc(100% - 32px) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  #project-background .project-background-header,
  #project-background .pb-intro,
  #project-background .pb-block {
    grid-column: 1 / -1 !important;
  }

  #project-background .pb-intro {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 16px !important;
  }
}


/* PROJECT GALLERY FILTER CLICK TARGET — fail-safe stacking/pointer handling */
body.nargoon-detail-page #gallery .gallery-filters {
    position: relative !important;
    z-index: 50 !important;
    pointer-events: auto !important;
}
body.nargoon-detail-page #gallery .gallery-filter-btn {
    position: relative !important;
    z-index: 51 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

.ng-project-plans{direction:rtl}
.ng-project-plans .ng-project-plans__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.5vw,24px);max-width:1320px;margin:clamp(24px,4vw,48px) auto 0}
.ng-project-plans .ng-project-plans__card{display:flex;min-width:0;flex-direction:column;padding:0;overflow:hidden;border:1px solid rgba(201,169,97,.22);border-radius:4px;background:#fff;box-shadow:0 6px 22px rgba(28,25,20,.06);color:#292722;cursor:zoom-in;font:inherit;text-align:center;transition:box-shadow .45s ease,transform .45s cubic-bezier(.16,1,.3,1)}
.ng-project-plans .ng-project-plans__card:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(28,25,20,.13)}
.ng-project-plans .ng-project-plans__image{position:relative;display:block;overflow:hidden;aspect-ratio:4/3;background:#f7f6f2}
.ng-project-plans .ng-project-plans__image img{display:block;box-sizing:border-box;width:100%;height:100%;padding:8px;object-fit:contain;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.ng-project-plans .ng-project-plans__card:hover img{transform:scale(1.04)}
.ng-project-plans .ng-project-plans__overlay{position:absolute;inset:0;display:flex;align-items:flex-end;padding:1rem;background:linear-gradient(to top,rgba(0,0,0,.62),transparent 65%);color:#fff;font-size:.8rem;opacity:0;transition:opacity .35s ease}
.ng-project-plans .ng-project-plans__card:hover .ng-project-plans__overlay,.ng-project-plans .ng-project-plans__card:focus-visible .ng-project-plans__overlay{opacity:1}
.ng-project-plans .ng-project-plans__caption{display:block;padding:12px 8px 14px;font-size:clamp(.78rem,1vw,.95rem);line-height:1.8}
.ng-project-plans .ng-project-plans__card:focus-visible,.ng-project-plans .ng-project-plans__close:focus-visible{outline:2px solid #c9a961;outline-offset:3px}
.ng-project-plans .ng-project-plans__preview{position:fixed;inset:0;box-sizing:border-box;width:min(1100px,94vw);max-width:94vw;max-height:94vh;margin:auto;padding:clamp(20px,3vw,36px);border:0;border-radius:4px;background:#fff;color:#292722;box-shadow:0 24px 80px rgba(0,0,0,.24)}
.ng-project-plans .ng-project-plans__preview[open]{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:12px}
.ng-project-plans .ng-project-plans__preview::backdrop{background:rgba(0,0,0,.82)}
.ng-project-plans .ng-project-plans__preview-image{display:block;width:100%;height:min(76vh,820px);max-width:100%;object-fit:contain;background:#fff}
.ng-project-plans .ng-project-plans__preview-caption{margin:0;font-size:clamp(.9rem,1.3vw,1.05rem);line-height:1.8;text-align:center}
.ng-project-plans .ng-project-plans__close{position:absolute;inset-block-start:10px;inset-inline-end:10px;display:grid;width:38px;height:38px;place-items:center;border:1px solid rgba(201,169,97,.55);border-radius:50%;background:#fff;color:#292722;font-size:1.5rem;line-height:1;cursor:pointer}
@media(min-width:768px){.ng-project-plans .ng-project-plans__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1100px){.ng-project-plans .ng-project-plans__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:600px){.ng-project-plans .ng-project-plans__preview{width:96vw;max-width:96vw;padding:48px 12px 14px}.ng-project-plans .ng-project-plans__preview-image{height:min(72vh,640px)}}
@media(prefers-reduced-motion:reduce){.ng-project-plans .ng-project-plans__card,.ng-project-plans .ng-project-plans__image img,.ng-project-plans .ng-project-plans__overlay{transition:none}.ng-project-plans .ng-project-plans__card:hover{transform:none}}


/* =========================================================
   NARGOON FINANCE CENTER — LIFESTYLE MOBILE READABILITY FIX
   Scoped only to #lifestyle; desktop styling and page scripts
   remain unchanged.
   ========================================================= */
@media (max-width: 767px) {
  body.nargoon-detail-page #lifestyle.nargoon-lifestyle-luxury {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  body.nargoon-detail-page #lifestyle .lifestyle-luxury-header {
    margin-bottom: 42px !important;
    padding-inline: 18px !important;
  }

  body.nargoon-detail-page #lifestyle .lifestyle-luxury-header h2 {
    font-size: clamp(23px, 6vw, 29px) !important;
    line-height: 1.7 !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere;
  }

  body.nargoon-detail-page #lifestyle .lifestyle-luxury-header p {
    font-size: 14px !important;
    line-height: 2.1 !important;
  }

  body.nargoon-detail-page #lifestyle .lifestyle-luxury-container {
    width: calc(100% - 32px) !important;
    padding-inline: 0 !important;
  }

  body.nargoon-detail-page #lifestyle .lifestyle-luxury-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
  }

  body.nargoon-detail-page #lifestyle .lifestyle-luxury-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    height: auto !important;
    min-height: 700px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body.nargoon-detail-page #lifestyle .lifestyle-luxury-image-wrapper,
  body.nargoon-detail-page #lifestyle .lifestyle-luxury-overlay {
    position: absolute !important;
    inset: 0 !important;
  }

  body.nargoon-detail-page #lifestyle .lifestyle-luxury-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  body.nargoon-detail-page #lifestyle .lifestyle-luxury-overlay {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, .08) 0%,
      rgba(0, 0, 0, .28) 34%,
      rgba(0, 0, 0, .88) 100%
    ) !important;
  }

  body.nargoon-detail-page #lifestyle .lifestyle-luxury-content {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 28px 20px 26px !important;
    margin-top: auto !important;
    overflow-wrap: anywhere;
    z-index: 3 !important;
  }

  body.nargoon-detail-page #lifestyle .lifestyle-luxury-time {
    display: inline-flex !important;
    max-width: 100% !important;
    margin: 0 0 14px !important;
    font-size: 12px !important;
    line-height: 1.8 !important;
    letter-spacing: 0 !important;
    opacity: 1 !important;
    transform: none !important;
  }

  body.nargoon-detail-page #lifestyle .lifestyle-luxury-time::before {
    flex: 0 0 18px !important;
    width: 18px !important;
  }

  body.nargoon-detail-page #lifestyle .lifestyle-luxury-title {
    margin: 0 0 14px !important;
    font-size: clamp(21px, 5.6vw, 25px) !important;
    line-height: 1.7 !important;
    letter-spacing: 0 !important;
    transform: none !important;
  }

  body.nargoon-detail-page #lifestyle .lifestyle-luxury-title strong {
    margin-top: 4px !important;
    line-height: 1.7 !important;
  }

  body.nargoon-detail-page #lifestyle .lifestyle-luxury-desc {
    margin: 0 0 18px !important;
    font-size: 14px !important;
    line-height: 2.05 !important;
    opacity: 1 !important;
    transform: none !important;
  }

  body.nargoon-detail-page #lifestyle .lifestyle-luxury-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    opacity: 1 !important;
    transform: none !important;
  }

  body.nargoon-detail-page #lifestyle .lifestyle-luxury-tag {
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
    line-height: 1.8 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  body.nargoon-detail-page #lifestyle .lifestyle-luxury-number {
    top: 20px !important;
    right: 20px !important;
    font-size: 5rem !important;
  }

  body.nargoon-detail-page #lifestyle .lifestyle-luxury-card:hover .lifestyle-luxury-title {
    transform: none !important;
  }
}

@media (max-width: 360px) {
  body.nargoon-detail-page #lifestyle .lifestyle-luxury-content {
    padding-inline: 17px !important;
  }

  body.nargoon-detail-page #lifestyle .lifestyle-luxury-title {
    font-size: 21px !important;
  }

  body.nargoon-detail-page #lifestyle .lifestyle-luxury-desc {
    font-size: 13px !important;
  }
}
/* ===== END LIFESTYLE MOBILE READABILITY FIX ===== */