/* =============================================================
   cards.css — All card components, grids, listing, FAQ, CTA,
   testimonials, project detail, gallery, attractions, amenities,
   floorplans, contact-detail, page-home card variants
   ============================================================= */

/* ----- Section Backgrounds ----- */
.cities-section,
.gallery-section--surface,
.attractions-section--surface,
.floorplans-section--surface,
.contact-details--surface {
    background: var(--color-surface);
}

/* ----- Card Grids ----- */
.city-grid,
.properties-grid,
.blog-grid,
.testimonials-grid,
.listing-grid,
.amenities-grid,
.contact-details__grid {
    display: grid;
    gap: 22px;
}

/* ----- Card Base Styles ----- */
.city-card,
.property-card,
.blog-card,
.testimonial-card,
.project-card,
.amenity-card,
.contact-detail-card,
.gallery-card,
.floorplan-card,
.project-map-card,
.contact-form-card {
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-white);
    box-shadow: var(--shadow-soft);
}

.city-card {
    position: relative;
    min-height: 320px;
}

.city-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.city-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(3, 38, 79, 0.12), rgba(3, 38, 79, 0.78));
}

.city-card__content {
    position: absolute;
    inset: auto 24px 24px;
    color: var(--color-white);
}

.city-card__content h3 {
    margin: 0 0 6px;
    font-size: 28px;
}

.city-card__content p {
    margin: 0 0 16px;
}

/* ----- CTA Section ----- */
.cta-section__inner {
    position: relative;
    display: grid;
    gap: 20px;
    align-items: center;
    padding: 40px 28px;
    border-radius: var(--radius-lg);
    background: var(--color-navy);
}

.cta-section--tight {
    padding-top: 0;
}

.cta-section h2 {
    color: var(--color-white);
}

.cta-section__arrow {
    width: 46px;
}

/* ----- Property Card ----- */
.property-card__gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.property-card__gallery img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.property-card__body,
.blog-card__body,
.project-card__body,
.contact-detail-card,
.amenity-card {
    padding: 22px;
}

.property-card__body h3,
.blog-card__body h3,
.project-card__body h3 {
    margin: 0 0 10px;
    color: var(--color-ink);
    font-size: 24px;
}

.property-card__address,
.project-card__location {
    margin: 0 0 10px;
}

.property-card__price,
.project-card__price {
    margin: 0 0 16px;
    color: var(--color-gold);
    font-size: 24px;
    font-weight: 700;
}

.property-card__meta,
.project-card__features {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    color: var(--color-navy);
    font-weight: 600;
}

.property-card .button,
.project-card .button {
    margin-top: 18px;
}

.blog-card img,
.project-card__media img,
.gallery-card img,
.floorplan-card img {
    width: 100%;
    object-fit: cover;
}

.blog-card img,
.project-card__media img {
    aspect-ratio: 16 / 11;
}

/* ----- Quote Section ----- */
.quote-section {
    padding: 70px 0;
    background: var(--color-navy);
    text-align: center;
}

.quote-section h2 {
    color: var(--color-white);
}

/* ----- Contact Section ----- */
.contact-section {
    background: var(--color-surface);
}

.contact-list {
    display: grid;
    gap: 12px;
    padding: 0;
    margin: 24px 0 0;
    list-style: none;
}

.contact-list a,
.contact-detail-card a {
    color: var(--color-navy);
}

.contact-form-card {
    padding: 24px;
    background: var(--color-navy);
}

.contact-form-card__grid {
    display: grid;
    gap: 14px;
}

/* ----- Listing Filters ----- */
.listing-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 34px;
}

.listing-filter,
.unit-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-white);
    box-shadow: 0 10px 28px rgba(3, 38, 79, 0.04);
}

.listing-filter.is-active,
.unit-type.is-active {
    border-color: var(--color-gold);
    background: var(--color-navy);
    color: var(--color-white);
}

.project-card__features {
    margin-bottom: 12px;
}

/* ----- Testimonial Card ----- */
.testimonial-card {
    position: relative;
    padding: 28px 24px 80px;
}

.testimonial-card__quote {
    margin: 0 0 24px;
    color: var(--color-text);
}

.testimonial-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.testimonial-card__footer h3 {
    margin: 0;
    font-size: 22px;
}

.testimonial-card__footer p {
    margin: 4px 0 0;
}

.testimonial-card__icon {
    width: 35px;
}

.testimonial-card__avatar {
    position: absolute;
    left: 24px;
    bottom: 20px;
    width: 57px;
    height: 57px;
    border-radius: 50%;
    object-fit: cover;
}

/* ----- FAQ ----- */
.faq-list {
    display: grid;
    gap: 14px;
    margin: 24px 0 28px;
}

.faq-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-white);
    box-shadow: var(--shadow-card);
}

.faq-item summary {
    padding: 18px 20px;
    list-style: none;
    cursor: pointer;
    font-weight: 600;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item p {
    margin: 0;
    padding: 0 20px 20px;
}

/* ----- Project Overview ----- */
.project-overview__grid {
    align-items: start;
}

.project-map-card {
    padding: 24px;
}

.project-map-card iframe {
    height: 320px;
    border-radius: 12px;
}

/* ----- Gallery ----- */
.gallery-grid {
    display: grid;
    gap: 18px;
}

.gallery-card,
.floorplan-card {
    overflow: hidden;
}

.gallery-card img,
.floorplan-card img {
    aspect-ratio: 4 / 3;
}

/* ----- Attractions ----- */
.attractions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.attraction-card {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 20px;
    border-radius: var(--radius-md);
    background: var(--color-white);
    box-shadow: var(--shadow-card);
}

.attraction-card img {
    max-height: 74px;
    width: auto;
}

/* ----- Amenities ----- */
.amenity-card {
    display: grid;
    gap: 14px;
    min-height: 100%;
    text-align: center;
}

.amenity-card__icon {
    display: inline-flex;
    width: 52px;
    height: 52px;
    margin: 0 auto;
    border-radius: 50%;
    background: rgba(227, 135, 10, 0.12);
}

/* ----- Floorplans ----- */
.floorplans-layout {
    align-items: start;
}

.unit-types-list {
    display: grid;
    gap: 12px;
}

.unit-type {
    justify-content: flex-start;
    border-radius: 16px;
}

.floorplans-grid {
    display: grid;
    gap: 18px;
}

/* ----- Contact Detail Card ----- */
.contact-detail-card {
    min-height: 100%;
}

.contact-detail-card__title {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-gold);
}

.contact-detail-card p,
.contact-detail-card a {
    margin: 0;
    font-size: 18px;
    line-height: 1.7;
}

/* ----- Grid Responsive ----- */
@media (min-width: 768px) {
    .hero-section__grid,
    .about-section__grid,
    .contact-section__grid,
    .faq-section__grid,
    .project-overview__grid {
        grid-template-columns: minmax(0, 1fr) minmax(340px, 0.92fr);
    }

    .stats-grid,
    .city-grid,
    .properties-grid,
    .blog-grid,
    .site-footer__grid,
    .testimonials-grid,
    .listing-grid,
    .amenities-grid,
    .contact-details__grid,
    .floorplans-grid,
    .gallery-grid--interiors {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contact-form-card__grid,
    .gallery-grid--exteriors {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .attractions-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .about-section__grid,
    .project-overview__grid,
    .faq-section__grid {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
    }

    .stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 46px;
    }

    .city-grid,
    .testimonials-grid,
    .contact-details__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .properties-grid,
    .blog-grid,
    .site-footer__grid,
    .listing-grid,
    .amenities-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cta-section__inner {
        grid-template-columns: 1fr auto auto;
        padding: 52px 58px;
    }

    .gallery-grid--interiors {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .gallery-grid--exteriors {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .attractions-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .floorplans-layout {
        grid-template-columns: 280px minmax(0, 1fr);
    }

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

/* ----- Page-Home Card Variants ----- */
.page-home .home-about__panel {
    backdrop-filter: blur(0px);
}

.page-home .stats-grid--premium {
    gap: 14px;
    margin-top: 0;
}

.page-home .stat-card--premium {
    padding: 22px 20px;
    border: 1px solid rgba(3, 38, 79, 0.08);
    border-bottom: 1px solid rgba(3, 38, 79, 0.08);
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff, #f9fbfd);
    box-shadow: 0 18px 40px rgba(3, 38, 79, 0.05);
}

.page-home .stat-card--premium strong {
    margin-top: 8px;
    font-size: clamp(44px, 8vw, 68px);
    font-weight: 400;
}

.page-home .stat-card__label {
    display: block;
    color: #7a8795;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.page-home .cities-section--premium {
    position: relative;
    background:
        linear-gradient(180deg, #eef3f8 0%, #f7f9fb 100%);
}

.page-home .home-section-intro--centered {
    justify-items: center;
    text-align: center;
}

.page-home .city-grid--premium {
    gap: 18px;
}

.page-home .city-card--premium {
    min-height: clamp(360px, 48vw, 520px);
    border-radius: 28px;
}

.page-home .city-card--premium img {
    filter: saturate(1.02) contrast(1.04);
}

.page-home .city-card__content--premium {
    inset: auto 28px 28px;
    max-width: 320px;
}

.page-home .city-card__eyebrow {
    display: inline-flex;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.page-home .city-card__content--premium h3 {
    font-size: clamp(30px, 3vw, 40px);
}

.page-home .cta-section--premium {
    padding-top: 36px;
    padding-bottom: 36px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
}

.page-home .cta-section__inner--premium {
    gap: 18px;
    overflow: clip;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    background:
        radial-gradient(circle at top right, rgba(227, 135, 10, 0.24), transparent 30%),
        linear-gradient(135deg, #031f41 0%, #0b325f 100%);
    box-shadow: 0 26px 60px rgba(3, 38, 79, 0.22);
}

.page-home .cta-section__copy {
    display: grid;
    gap: 12px;
}

.page-home .cta-section__copy .section-kicker {
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.72);
}

.page-home .properties-section--premium {
    background: linear-gradient(180deg, #fbfcfd 0%, #ffffff 100%);
}

.page-home .properties-grid--premium {
    gap: 20px;
}

.page-home .property-card--premium {
    border: 1px solid rgba(3, 38, 79, 0.08);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(3, 38, 79, 0.08);
}

.page-home .property-card__gallery--premium {
    grid-template-columns: 1.15fr 0.85fr;
    min-height: 280px;
}

.page-home .property-card__gallery--premium img {
    aspect-ratio: unset;
    height: 100%;
}

.page-home .property-card__body--premium {
    display: grid;
    gap: 14px;
    padding: 24px;
}

.page-home .property-card__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.page-home .property-card__tag {
    display: inline-flex;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(227, 135, 10, 0.12);
    color: var(--color-gold);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.page-home .property-card__body--premium h3 {
    font-size: clamp(24px, 2.2vw, 30px);
}

.page-home .property-card__price {
    margin: 0;
    font-size: 18px;
}

.page-home .property-card__meta--premium {
    gap: 10px;
}

.page-home .property-card__meta--premium span {
    padding: 8px 12px;
    border-radius: 999px;
    background: #f4f7fa;
    color: #4a5c70;
    font-size: 13px;
    font-weight: 600;
}

.page-home .blog-section--premium {
    background:
        radial-gradient(circle at top right, rgba(3, 38, 79, 0.05), transparent 24%),
        #ffffff;
}

.page-home .blog-grid--premium {
    gap: 20px;
}

.page-home .blog-card--premium {
    border: 1px solid rgba(3, 38, 79, 0.08);
    border-radius: 28px;
    box-shadow: 0 24px 55px rgba(3, 38, 79, 0.07);
}

.page-home .blog-card--premium img {
    aspect-ratio: 16 / 12;
}

.page-home .blog-card__body--premium {
    display: grid;
    gap: 10px;
}

.page-home .blog-card__eyebrow {
    color: var(--color-gold);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.page-home .quote-section--premium {
    position: relative;
    padding: 0;
    background: linear-gradient(135deg, #071f39 0%, #03264f 50%, #081828 100%);
    overflow: hidden;
}

/* Wave dividers */
.page-home .quote-section__wave {
    display: block;
    line-height: 0;
    overflow: hidden;
}

.page-home .quote-section__wave svg {
    width: 100%;
    height: 72px;
    display: block;
}

.page-home .quote-section__wave--top svg {
    /* pulls color from the section above */
    fill: none;
}

/* Inner layout */
.page-home .quote-section__inner--premium {
    position: relative;
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 20px;
    padding: clamp(52px, 7vw, 88px) 0;
    z-index: 1;
}

/* Big decorative quote mark */
.page-home .quote-section__big-quote {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(180px, 20vw, 280px);
    line-height: 1;
    color: rgba(255, 255, 255, 0.03);
    font-family: Georgia, serif;
    pointer-events: none;
    user-select: none;
}

/* Content block */
.page-home .quote-section__content {
    display: grid;
    gap: 18px;
    justify-items: center;
}

.page-home .quote-section__mark {
    color: rgba(255, 255, 255, 0.38);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.42em;
    text-transform: uppercase;
}

.page-home .quote-section__inner--premium h2 {
    margin: 0;
    max-width: 820px;
    color: #ffffff;
    font-size: clamp(1.9rem, 4vw, 3.4rem);
    line-height: 1.12;
    letter-spacing: -0.03em;
}

.page-home .quote-section__gold {
    color: #e3870a;
    background: linear-gradient(90deg, #e3870a, #f5b942);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Gold divider line */
.page-home .quote-section__divider {
    width: 56px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #c97a08, #f5b942);
}

.page-home .quote-section__sub {
    margin: 0;
    color: rgba(255, 255, 255, 0.45);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* Dots decoration */
.page-home .quote-section__dots {
    position: absolute;
    right: clamp(20px, 5vw, 80px);
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    pointer-events: none;
}

.page-home .quote-section__dots span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
}

/* Radial glow */
.page-home .quote-section--premium::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(227, 135, 10, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

@media (max-width: 767.98px) {
    .page-home .quote-section__dots {
        display: none;
    }

    .page-home .quote-section__wave svg {
        height: 48px;
    }
}

.page-home .contact-section--premium {
    background: linear-gradient(180deg, #f7f9fb 0%, #eef3f8 100%);
}

.page-home .contact-section__grid--premium {
    gap: 20px;
    align-items: start;
}

.page-home .contact-section__content--premium {
    display: grid;
    gap: 18px;
}

.page-home .contact-section__content--premium > p {
    margin: 0;
    font-size: 18px;
    line-height: 1.9;
}

.page-home .contact-pills {
    display: grid;
    gap: 12px;
}

.page-home .contact-pill {
    display: grid;
    gap: 4px;
    padding: 16px 18px;
    border: 1px solid rgba(3, 38, 79, 0.08);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 20px 50px rgba(3, 38, 79, 0.05);
}

.page-home .contact-pill strong {
    color: var(--color-ink);
    font-size: 15px;
}

.page-home .contact-pill span {
    color: #667483;
    font-size: 14px;
}

.page-home .contact-form-card--premium {
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 28px;
    background: linear-gradient(180deg, #08264a, #03264f);
    box-shadow: 0 30px 70px rgba(3, 38, 79, 0.18);
}

.page-home .contact-form-card--premium input,
.page-home .contact-form-card--premium textarea {
    min-height: 52px;
    border-radius: 14px;
    padding: 14px 16px;
}

.page-home .contact-form-card--premium textarea {
    min-height: 140px;
}

.page-home .hero-highlight-pill,
.page-home .contact-pill,
.page-home .stat-card--premium,
.page-home .property-card--premium,
.page-home .blog-card--premium,
.page-home .city-card--premium,
.page-home .cta-section__inner--premium,
.page-home .home-about__panel {
    backdrop-filter: blur(0px);
}

.page-home .hero-highlight-pill:hover,
.page-home .contact-pill:hover,
.page-home .stat-card--premium:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 46px rgba(3, 38, 79, 0.1);
}

@media (min-width: 768px) {
    .page-home .home-section-intro--split {
        grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
        align-items: end;
    }

    .page-home .stats-grid--premium {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .page-home .city-grid--premium,
    .page-home .properties-grid--premium,
    .page-home .contact-pills {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-home .blog-grid--premium {
        grid-template-columns: 1.2fr 1fr;
    }

    .page-home .blog-card--featured {
        grid-row: span 2;
    }

    .page-home .blog-card--featured img {
        aspect-ratio: 4 / 4.2;
    }
}

@media (min-width: 1024px) {
    .page-home .city-grid--premium {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-home .properties-grid--premium {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .page-home .blog-grid--premium {
        grid-template-columns: 1.15fr 1fr 1fr;
    }

    .page-home .blog-card--featured {
        grid-row: auto;
    }

    .page-home .blog-card--featured img {
        aspect-ratio: 16 / 12;
    }

    .page-home .contact-section__grid--premium {
        grid-template-columns: minmax(0, 0.9fr) minmax(420px, 0.86fr);
    }

    .page-home .contact-pills {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .page-home .hero-form-card--premium {
        border-radius: 24px;
    }

    .page-home .city-card--premium,
    .page-home .property-card--premium,
    .page-home .blog-card--premium,
    .page-home .contact-form-card--premium {
        border-radius: 24px;
    }

    .page-home .city-card--premium {
        min-height: 320px;
    }

    .page-home .city-card__content--premium {
        inset: auto 20px 20px;
    }

    .page-home .cta-section__inner--premium {
        padding: 28px 20px;
        border-radius: 24px;
    }

    .cta-section__arrow {
        display: none;
    }

    .page-home .property-card__gallery--premium {
        grid-template-columns: 1fr 1fr;
        min-height: 220px;
    }

    .page-home .property-card__body--premium,
    .page-home .blog-card__body--premium,
    .page-home .contact-form-card--premium {
        padding: 20px;
    }

    .page-home .property-card__topline {
        align-items: flex-start;
        flex-direction: column;
    }

    .page-home .contact-section__content--premium > p {
        font-size: 16px;
    }

    .page-home .contact-pill {
        border-radius: 18px;
    }

    .page-home .quote-section__inner--premium h2 {
        font-size: clamp(28px, 8vw, 40px);
    }

    .page-home .stats-grid--premium {
        gap: 12px;
    }

    .page-home .stat-card--premium {
        padding: 18px;
        border-radius: 18px;
    }
}

/* ----- Decision-Focused Cities Section ----- */
.page-home .cities-section--premium {
    padding-top: 110px;
    padding-bottom: 110px;
    background: linear-gradient(180deg, #eef3f8 0%, #f8fafc 100%);
}

.page-home .home-section-intro--destination {
    margin-bottom: 34px;
}

.page-home .city-grid--decision {
    gap: 28px;
}

.page-home .city-card--decision {
    min-height: clamp(420px, 50vw, 560px);
    overflow: hidden;
}

.page-home .city-card__link {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
}

.page-home .city-card--decision img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 320ms ease;
}

.page-home .city-card--decision .city-card__overlay {
    background: linear-gradient(180deg, rgba(4, 18, 39, 0.16) 0%, rgba(4, 18, 39, 0.9) 100%);
    transition: background 260ms ease;
}

.page-home .city-card__content--decision {
    inset: auto 28px 28px;
    max-width: 360px;
    display: grid;
    gap: 12px;
}

.page-home .city-card__badge {
    display: inline-flex;
    width: fit-content;
    padding: 7px 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
}

.page-home .city-card__content--decision .city-card__eyebrow {
    margin-bottom: -2px;
    color: rgba(255, 255, 255, 0.72);
}

.page-home .city-card__content--decision h3 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1.02;
}

.page-home .city-card__decision-copy {
    margin: 0;
    color: rgba(255, 255, 255, 0.84);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.75;
}

.page-home .city-card__cta-button {
    width: fit-content;
    min-height: 48px;
    margin-top: 4px;
    padding-inline: 18px;
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.08);
    transition: transform 220ms ease, background-color 220ms ease, border-color 220ms ease, color 220ms ease;
}

.page-home .city-card--decision:hover {
    transform: translateY(-12px);
    box-shadow: 0 34px 80px rgba(3, 38, 79, 0.22);
}

.page-home .city-card--decision:hover img {
    transform: scale(1.08);
}

.page-home .city-card--decision:hover .city-card__overlay {
    background: linear-gradient(180deg, rgba(4, 18, 39, 0.22) 0%, rgba(4, 18, 39, 0.96) 100%);
}

.page-home .city-card--decision:hover .city-card__cta-button {
    border-color: rgba(255, 255, 255, 0.88);
    background: rgba(255, 255, 255, 0.16);
    transform: translateY(-2px);
}

.page-home .cities-section--premium {
    padding-top: 118px;
    padding-bottom: 118px;
    background:
        radial-gradient(circle at top center, rgba(227, 135, 10, 0.08), transparent 26%),
        linear-gradient(180deg, #eef3f8 0%, #f8fafc 100%);
}

.page-home .home-section-intro--destination {
    margin-bottom: 40px;
}

.page-home .city-grid--decision {
    gap: 32px;
}

.page-home .city-card--decision {
    min-height: clamp(430px, 50vw, 560px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    box-shadow: 0 28px 60px rgba(3, 38, 79, 0.16);
    background: #0d223d;
}

.page-home .city-card--decision,
.page-home .city-card--decision img,
.page-home .city-card--decision .city-card__overlay,
.page-home .city-card--decision .city-card__cta-button {
    transition: none !important;
}

.page-home .city-card--decision:hover,
.page-home .city-card--decision:hover img,
.page-home .city-card--decision:hover .city-card__cta-button {
    transform: none !important;
}

.page-home .city-card__link {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
}

.page-home .city-card--decision img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-home .city-card--decision .city-card__overlay {
    background: linear-gradient(180deg, rgba(4, 18, 39, 0.14) 0%, rgba(4, 18, 39, 0.88) 62%, rgba(4, 18, 39, 0.98) 100%);
}

.page-home .city-card--abu-dhabi .city-card__overlay {
    background:
        linear-gradient(180deg, rgba(6, 22, 46, 0.08) 0%, rgba(6, 22, 46, 0.74) 56%, rgba(6, 22, 46, 0.96) 100%),
        linear-gradient(180deg, rgba(227, 135, 10, 0.08) 0%, rgba(227, 135, 10, 0) 38%);
}

.page-home .city-card--dubai .city-card__overlay {
    background:
        linear-gradient(180deg, rgba(2, 12, 28, 0.12) 0%, rgba(2, 12, 28, 0.82) 56%, rgba(2, 12, 28, 0.98) 100%),
        linear-gradient(180deg, rgba(21, 93, 171, 0.16) 0%, rgba(21, 93, 171, 0) 40%);
}

.page-home .city-card__content--decision {
    inset: auto 30px 30px;
    max-width: 370px;
    display: grid;
    gap: 13px;
}

.page-home .city-card__badge {
    display: inline-flex;
    width: fit-content;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
}

.page-home .city-card--abu-dhabi .city-card__badge {
    background: rgba(227, 135, 10, 0.16);
    color: #ffe2b8;
}

.page-home .city-card--dubai .city-card__badge {
    background: rgba(85, 145, 212, 0.16);
    color: #dcebff;
}

.page-home .city-card__content--decision .city-card__eyebrow {
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.page-home .city-card__content--decision h3 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(2.1rem, 3vw, 3.15rem);
    line-height: 1;
    letter-spacing: -0.04em;
}

.page-home .city-card__decision-copy {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin: 0;
}

.page-home .city-card__decision-copy span {
    position: relative;
    color: rgba(255, 255, 255, 0.86);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
}

.page-home .city-card__decision-copy span + span {
    padding-left: 14px;
}

.page-home .city-card__decision-copy span + span::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    transform: translateY(-50%);
}

.page-home .city-card__cta-button {
    width: fit-content;
    min-height: 50px;
    margin-top: 6px;
    padding-inline: 20px;
    border-radius: 14px;
    box-shadow: 0 14px 28px rgba(227, 135, 10, 0.18);
}

.page-home .city-card--dubai .city-card__cta-button {
    background: linear-gradient(180deg, #0f57a0, #0a427a);
    box-shadow: 0 14px 28px rgba(12, 75, 138, 0.2);
}

.page-home .city-card__cta-button,
.page-home .city-card--dubai .city-card__cta-button,
.page-home .city-card--abu-dhabi .city-card__cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 22px;
    border: 0;
    border-radius: 15px;
    background: linear-gradient(180deg, #eba63a 0%, #db8d12 100%);
    color: #ffffff;
    box-shadow: 0 14px 30px rgba(227, 135, 10, 0.22);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
}

.page-home .city-card__cta-button:hover,
.page-home .city-card--dubai .city-card__cta-button:hover,
.page-home .city-card--abu-dhabi .city-card__cta-button:hover {
    background: linear-gradient(180deg, #f0ad45 0%, #e09316 100%);
    color: #ffffff;
    box-shadow: 0 16px 34px rgba(227, 135, 10, 0.24);
}

@media (max-width: 767.98px) {
    .page-home .cities-section--premium {
        padding-top: 94px;
        padding-bottom: 94px;
    }

    .page-home .city-grid--decision {
        gap: 22px;
    }

    .page-home .city-card--decision {
        min-height: 390px;
        border-radius: 24px;
    }

    .page-home .city-card__content--decision {
        inset: auto 22px 22px;
        max-width: none;
    }
}

/* ----- Sales Properties Section ----- */
.page-home .properties-section--premium {
    padding-top: 82px;
    background: linear-gradient(180deg, #fbfcfd 0%, #ffffff 100%);
}

.page-home .home-section-intro--sales {
    align-items: end;
    margin-bottom: 24px;
}

.page-home .properties-grid--sales {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.page-home .property-card--sales {
    display: grid;
    grid-template-rows: 260px 1fr;
    overflow: hidden;
    border: 1px solid rgba(3, 38, 79, 0.08);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 22px 56px rgba(3, 38, 79, 0.08);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.page-home .property-card--sales:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 30px 68px rgba(3, 38, 79, 0.14);
}

.page-home .property-card__media--sales {
    position: relative;
    overflow: hidden;
}

.page-home .property-card__media--sales img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.page-home .property-card__media--sales::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 56%;
    background: linear-gradient(180deg, rgba(3, 38, 79, 0) 0%, rgba(3, 38, 79, 0.38) 100%);
    pointer-events: none;
}

.page-home .property-card__offer-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 1;
    display: inline-flex;
    padding: 9px 13px;
    border-radius: 999px;
    background: rgba(227, 135, 10, 0.94);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: 0 12px 24px rgba(227, 135, 10, 0.22);
}

.page-home .property-card__body--sales {
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 24px;
}

.page-home .property-card__body--sales h3 {
    margin: 0;
    color: var(--color-ink);
    font-size: clamp(1.35rem, 1.6vw, 1.72rem);
    line-height: 1.28;
}

.page-home .property-card__specs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.page-home .property-card__specs span {
    display: inline-flex;
    padding: 8px 10px;
    border-radius: 999px;
    background: #f4f7fb;
    color: #4c5e72;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.page-home .property-card__price--sales {
    margin: 0;
    color: var(--color-navy);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.5;
}

.page-home .property-card__payment-plan {
    margin: 0;
    color: #637487;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.65;
}

.page-home .property-card__cta {
    margin-top: 4px;
    min-height: 50px;
    justify-content: center;
    border-radius: 15px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

@media (max-width: 1279.98px) {
    .page-home .properties-grid--sales {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .page-home .properties-section--premium {
        padding-top: 72px;
    }

    .page-home .properties-grid--sales {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .page-home .property-card--sales {
        grid-template-rows: 230px 1fr;
        border-radius: 24px;
    }

    .page-home .property-card__body--sales {
        padding: 20px;
    }
}

/* ----- Refined Sales Cards Polish ----- */
.page-home .home-section-intro--sales {
    margin-bottom: 18px;
}

.page-home .home-section-intro--sales .section-heading {
    max-width: 700px;
    margin-bottom: 0;
}

.page-home .home-section-intro--sales h2 {
    max-width: 13.5ch;
    line-height: 1.04;
    letter-spacing: -0.035em;
}

.page-home .home-section-intro--sales .home-section-intro__support {
    max-width: 33rem;
    color: #728195;
    font-size: 15px;
    line-height: 1.8;
}

.page-home .properties-grid--sales {
    gap: 22px;
}

.page-home .property-card--sales {
    border-radius: 20px;
    box-shadow:
        0 10px 24px rgba(3, 38, 79, 0.05),
        0 24px 60px rgba(3, 38, 79, 0.08);
    will-change: transform, box-shadow;
}

.page-home .property-card--sales.reveal-on-scroll {
    opacity: 0;
    transform: translateY(18px);
}

body.is-loaded.page-home .properties-grid--sales .property-card--sales.reveal-on-scroll {
    animation: sales-card-enter 720ms var(--ease-smooth) forwards;
    animation-delay: var(--sales-card-delay, 0ms);
}

body.is-loaded.page-home .properties-grid--sales .property-card--sales.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: none;
}

@keyframes sales-card-enter {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.page-home .property-card--sales:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow:
        0 18px 36px rgba(3, 38, 79, 0.08),
        0 32px 72px rgba(3, 38, 79, 0.14);
}

.page-home .property-card__media--sales img {
    transform: scale(1);
    transition: transform 260ms ease;
}

.page-home .property-card--sales:hover .property-card__media--sales img {
    transform: scale(1.05);
}

.page-home .property-card__offer-badge {
    background: linear-gradient(180deg, #f0aa40 0%, #dd8d11 100%);
    box-shadow: 0 12px 22px rgba(227, 135, 10, 0.24);
}

.page-home .property-card__body--sales {
    gap: 16px;
    padding: 26px;
}

.page-home .property-card__specs {
    gap: 8px 10px;
}

.page-home .property-card__price--sales {
    font-size: 1.12rem;
    line-height: 1.45;
}

.page-home .property-card__payment-plan {
    color: #6f7f91;
    font-size: 13px;
    line-height: 1.7;
}

.page-home .property-card__cta {
    width: 100%;
    min-height: 54px;
    margin-top: 2px;
    box-shadow: 0 14px 28px rgba(227, 135, 10, 0.18);
    transition: background-color 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.page-home .property-card__cta:hover {
    filter: brightness(1.03);
    box-shadow: 0 16px 34px rgba(227, 135, 10, 0.22);
}

@media (prefers-reduced-motion: reduce) {
    body.is-loaded.page-home .properties-grid--sales .property-card--sales.reveal-on-scroll {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .page-home .property-card--sales,
    .page-home .property-card__media--sales img,
    .page-home .property-card__cta {
        transition: none;
    }
}

/* ----- Final Tighten Pass for Sales Section ----- */
.page-home .properties-section--premium {
    padding-top: 68px;
}

.page-home .home-section-intro--sales {
    align-items: start;
    column-gap: 28px;
    margin-bottom: 14px;
}

.page-home .home-section-intro--sales .section-heading {
    max-width: 560px;
}

.page-home .home-section-intro--sales h2 {
    max-width: 12.5ch;
    font-size: clamp(2rem, 3.3vw, 2.8rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.page-home .home-section-intro--sales .home-section-intro__support {
    max-width: 28rem;
    margin-top: 2px;
    color: #7b8795;
    font-size: 14px;
    line-height: 1.72;
}

.page-home .properties-grid--sales {
    gap: 18px;
}

.page-home .property-card--sales {
    grid-template-rows: 220px 1fr;
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(3, 38, 79, 0.06), 0 18px 40px rgba(3, 38, 79, 0.05);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.page-home .property-card--sales.reveal-on-scroll,
body.is-loaded.page-home .properties-grid--sales .property-card--sales.reveal-on-scroll,
body.is-loaded.page-home .properties-grid--sales .property-card--sales.reveal-on-scroll.is-visible {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

.page-home .property-card--sales:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(3, 38, 79, 0.08), 0 22px 46px rgba(3, 38, 79, 0.08);
}

.page-home .property-card__media--sales {
    min-height: 220px;
}

.page-home .property-card__media--sales img,
.page-home .property-card--sales:hover .property-card__media--sales img {
    transform: none;
}

.page-home .property-card__offer-badge {
    top: 14px;
    left: 14px;
    padding: 7px 10px;
    font-size: 10px;
    letter-spacing: 0.1em;
    box-shadow: 0 8px 18px rgba(227, 135, 10, 0.18);
}

.page-home .property-card__body--sales {
    gap: 11px;
    padding: 18px;
}

.page-home .property-card__body--sales h3 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    min-height: 2.7em;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.34;
}

.page-home .property-card__specs {
    gap: 6px;
}

.page-home .property-card__specs span {
    padding: 6px 9px;
    font-size: 11px;
    font-weight: 600;
    color: #5d6d7f;
}

.page-home .property-card__price--sales {
    font-size: 1rem;
    line-height: 1.4;
}

.page-home .property-card__payment-plan {
    font-size: 12px;
    line-height: 1.55;
    color: #7a8795;
}

.page-home .property-card__cta {
    min-height: 44px;
    margin-top: 2px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: 0 10px 20px rgba(227, 135, 10, 0.14);
}

.page-home .property-card__cta:hover {
    filter: brightness(1.02);
    box-shadow: 0 12px 22px rgba(227, 135, 10, 0.16);
}

.page-home .home-section-intro--sales {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    align-items: start;
    gap: 18px 28px;
    margin-bottom: 10px;
}

.page-home .home-section-intro--sales .home-section-intro__copy,
.page-home .home-section-intro--sales .section-heading {
    max-width: none;
}

.page-home .home-section-intro--sales h2 {
    max-width: 18ch;
    font-size: clamp(1.85rem, 2.8vw, 2.65rem);
    line-height: 1.04;
    margin: 0;
}

.page-home .home-section-intro--sales .home-section-intro__support {
    max-width: 24rem;
    justify-self: start;
    align-self: start;
    margin: 6px 0 0;
    font-size: 13.5px;
    line-height: 1.68;
}

.page-home .properties-grid--sales {
    gap: 16px;
}

.page-home .property-card--sales {
    grid-template-rows: 196px 1fr;
    border-radius: 16px;
}

.page-home .property-card__media--sales {
    min-height: 196px;
}

.page-home .property-card__offer-badge {
    top: 12px;
    left: 12px;
    padding: 6px 9px;
    font-size: 9.5px;
}

.page-home .property-card__body--sales {
    gap: 9px;
    padding: 16px;
}

.page-home .property-card__body--sales h3 {
    min-height: 2.5em;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.28;
}

.page-home .property-card__specs span {
    padding: 5px 8px;
    font-size: 10.5px;
}

.page-home .property-card__price--sales {
    font-size: 0.95rem;
    line-height: 1.35;
}

.page-home .property-card__payment-plan {
    font-size: 11.5px;
    line-height: 1.5;
}

.page-home .property-card__cta {
    min-height: 40px;
    border-radius: 10px;
    font-size: 12.5px;
}

@media (max-width: 1279.98px) {
    .page-home .home-section-intro--sales {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .page-home .home-section-intro--sales .home-section-intro__support {
        max-width: 32rem;
        margin-top: 0;
    }

    .page-home .properties-grid--sales {
        gap: 18px;
    }

    .page-home .home-section-intro--sales h2 {
        max-width: 13.5ch;
    }
}

@media (max-width: 767.98px) {
    .page-home .properties-section--premium {
        padding-top: 60px;
    }

    .page-home .home-section-intro--sales {
        margin-bottom: 12px;
    }

    .page-home .home-section-intro--sales h2 {
        max-width: 100%;
        font-size: clamp(1.8rem, 7vw, 2.35rem);
    }

    .page-home .home-section-intro--sales .home-section-intro__support {
        max-width: 100%;
        font-size: 13px;
    }

    .page-home .property-card--sales {
        grid-template-rows: 210px 1fr;
        border-radius: 16px;
    }

    .page-home .property-card__body--sales {
        padding: 16px;
    }
}

/* ----- Editorial Blog Section Refinement ----- */
.page-home .blog-section--premium {
    padding-top: 78px;
}

.page-home .blog-section--premium .home-section-intro--split {
    align-items: start;
    gap: 18px 28px;
    margin-bottom: 18px;
}

.page-home .blog-section--premium .section-heading {
    max-width: 620px;
    margin-bottom: 0;
}

.page-home .blog-section--premium h2 {
    max-width: 13ch;
    font-size: clamp(2rem, 3.2vw, 2.85rem);
    line-height: 1.06;
    letter-spacing: -0.03em;
}

.page-home .blog-section--premium .home-section-intro__support {
    max-width: 28rem;
    color: #7a8795;
    font-size: 14px;
    line-height: 1.72;
}

.page-home .blog-grid--premium {
    gap: 18px;
}

.page-home .blog-card--premium {
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 12px 28px rgba(3, 38, 79, 0.06), 0 22px 48px rgba(3, 38, 79, 0.05);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.page-home .blog-card--premium:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(3, 38, 79, 0.08), 0 24px 52px rgba(3, 38, 79, 0.08);
}

.page-home .blog-card--premium img {
    width: 100%;
    height: 240px;
    aspect-ratio: auto;
    object-fit: cover;
}

.page-home .blog-card__body--premium {
    gap: 8px;
    padding: 18px 18px 16px;
}

.page-home .blog-card__eyebrow {
    color: rgba(227, 135, 10, 0.82);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.page-home .blog-card__body--premium h3 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    min-height: 2.55em;
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.34;
}

.page-home .blog-card__body--premium p {
    margin: 0;
    color: #7d8897;
    font-size: 12.5px;
    line-height: 1.55;
}

.page-home .blog-section--premium .home-section-intro--split {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
    align-items: start;
    gap: 12px 32px;
    margin-bottom: 20px;
}

.page-home .blog-section--premium .section-heading {
    max-width: 720px;
}

.page-home .blog-section--premium .section-kicker {
    margin-bottom: 8px;
    font-size: 12px;
    letter-spacing: 0.1em;
}

.page-home .blog-section--premium h2 {
    max-width: 16ch;
    font-size: clamp(1.85rem, 3vw, 2.7rem);
    line-height: 1.04;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.page-home .blog-section--premium .home-section-intro__support {
    max-width: 25rem;
    margin: 4px 0 0;
    color: #7b8795;
    font-size: 13.5px;
    line-height: 1.68;
    justify-self: start;
}

@media (max-width: 1023.98px) {
    .page-home .blog-section--premium .home-section-intro--split {
        margin-bottom: 16px;
    }

    .page-home .blog-section--premium .home-section-intro__support {
        max-width: 100%;
    }

    .page-home .blog-section--premium .home-section-intro--split {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .page-home .blog-section--premium h2 {
        max-width: 100%;
    }

    .page-home .blog-section--premium .home-section-intro__support {
        max-width: 100%;
        margin-top: 0;
    }
}

@media (max-width: 767.98px) {
    .page-home .blog-section--premium {
        padding-top: 68px;
    }

    .page-home .blog-card--premium img {
        height: 220px;
    }

    .page-home .blog-card__body--premium {
        padding: 16px 16px 14px;
    }
}

/* ----- Home Blog Section — Overlay Style ----- */
.page-home .home-blog__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
}

.page-home .home-blog__header h2 {
    margin: 6px 0 0;
    font-size: clamp(1.75rem, 2.8vw, 2.4rem);
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.page-home .home-blog__see-all {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 12px;
    font-size: 13.5px;
    white-space: nowrap;
}

/* Grid: large card left, two small right */
.page-home .home-blog__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1fr;
    gap: 16px;
    align-items: stretch;
}

/* Card base — overlay style */
.page-home .home-blog__card--overlay {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    min-height: 340px;
    cursor: pointer;
}

.page-home .home-blog__card--large {
    min-height: 420px;
    grid-row: span 1;
}

.page-home .home-blog__card--overlay a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

/* Image fills card */
.page-home .home-blog__card--overlay img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.55s ease;
}

.page-home .home-blog__card--overlay:hover img {
    transform: scale(1.06);
}

/* Dark gradient overlay */
.page-home .home-blog__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(4, 12, 26, 0.08) 0%,
        rgba(4, 12, 26, 0.18) 35%,
        rgba(4, 12, 26, 0.72) 70%,
        rgba(4, 12, 26, 0.92) 100%
    );
    transition: opacity 0.3s ease;
}

.page-home .home-blog__card--overlay:hover .home-blog__overlay {
    opacity: 0.88;
}

/* Text content at bottom */
.page-home .home-blog__overlay-body {
    position: absolute;
    inset: auto 0 0;
    display: grid;
    gap: 8px;
    padding: 22px 22px 24px;
}

/* Category badge */
.page-home .home-blog__category {
    display: inline-flex;
    align-self: start;
    width: fit-content;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(227, 135, 10, 0.22);
    border: 1px solid rgba(227, 135, 10, 0.4);
    color: #f5b942;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.page-home .home-blog__overlay-body h3 {
    margin: 0;
    color: #ffffff;
    font-size: 1.05rem;
    line-height: 1.35;
    letter-spacing: -0.01em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.page-home .home-blog__card--large .home-blog__overlay-body h3 {
    font-size: 1.3rem;
    -webkit-line-clamp: 3;
}

.page-home .home-blog__meta {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* Hover lift */
.page-home .home-blog__card--overlay {
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    box-shadow: 0 8px 24px rgba(3, 38, 79, 0.14), 0 20px 48px rgba(3, 38, 79, 0.1);
}

.page-home .home-blog__card--overlay:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 32px rgba(3, 38, 79, 0.18), 0 30px 60px rgba(3, 38, 79, 0.14);
}

@media (max-width: 900px) {
    .page-home .home-blog__grid {
        grid-template-columns: 1fr 1fr;
    }

    .page-home .home-blog__card--large {
        grid-column: span 2;
        min-height: 360px;
    }
}

@media (max-width: 600px) {
    .page-home .home-blog__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-home .home-blog__grid {
        grid-template-columns: 1fr;
    }

    .page-home .home-blog__card--large {
        grid-column: span 1;
        min-height: 300px;
    }

    .page-home .home-blog__card--overlay {
        min-height: 260px;
    }
}

/* ----- Blog Page ----- */
.page-blog .blog-page__hero {
    padding: clamp(110px, 14vw, 160px) 0 clamp(48px, 6vw, 72px);
    background: linear-gradient(160deg, #03264f 0%, #061e3c 100%);
    text-align: center;
    margin-top: calc(-1 * var(--header-h));
}

.page-blog .blog-page__hero-inner {
    display: grid;
    gap: 16px;
    justify-items: center;
}

.page-blog .blog-page__hero .section-kicker {
    color: #e3a84a;
}

.page-blog .blog-page__hero h1 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(2.2rem, 4.5vw, 3.6rem);
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.page-blog .blog-page__hero h1 span {
    color: #e3870a;
}

.page-blog .blog-page__hero-sub {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
    line-height: 1.7;
    max-width: 36rem;
}

/* Posts grid */
.page-blog .blog-page__body {
    background: #f4f6fa;
}

.page-blog .blog-page__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

/* Card */
.page-blog .blog-page__card {
    border-radius: 20px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(3, 38, 79, 0.07);
    box-shadow: 0 4px 12px rgba(3, 38, 79, 0.05), 0 14px 30px rgba(3, 38, 79, 0.04);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.page-blog .blog-page__card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(3, 38, 79, 0.08), 0 24px 50px rgba(3, 38, 79, 0.08);
}

.page-blog .blog-page__card--featured {
    grid-column: span 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.page-blog .blog-page__card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
}

.page-blog .blog-page__card--featured .blog-page__card-link {
    flex-direction: row;
}

.page-blog .blog-page__img-wrap {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.page-blog .blog-page__card:not(.blog-page__card--featured) .blog-page__img-wrap {
    height: 210px;
}

.page-blog .blog-page__card--featured .blog-page__img-wrap {
    flex: 0 0 50%;
    height: auto;
    min-height: 320px;
}

.page-blog .blog-page__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.page-blog .blog-page__card:hover .blog-page__img-wrap img {
    transform: scale(1.04);
}

.page-blog .blog-page__category {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(6, 14, 28, 0.7);
    backdrop-filter: blur(8px);
    color: #e3a84a;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.page-blog .blog-page__card-body {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 20px 22px 24px;
    flex: 1;
}

.page-blog .blog-page__card--featured .blog-page__card-body {
    padding: 32px 36px;
    gap: 14px;
    align-content: center;
}

.page-blog .blog-page__card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #8c9aab;
    font-size: 12px;
    font-weight: 600;
}

.page-blog .blog-page__dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #b0bec9;
    flex-shrink: 0;
}

.page-blog .blog-page__card-title {
    margin: 0;
    color: var(--color-ink);
    font-size: 1.1rem;
    line-height: 1.35;
    letter-spacing: -0.02em;
}

.page-blog .blog-page__card--featured .blog-page__card-title {
    font-size: clamp(1.1rem, 1.6vw, 1.35rem);
    word-break: normal;
    overflow-wrap: break-word;
    line-height: 1.55;
}

.page-blog .blog-page__card-excerpt {
    margin: 0;
    color: #64758a;
    font-size: 14px;
    line-height: 1.75;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.page-blog .blog-page__read-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    color: #e3870a;
    font-size: 13.5px;
    font-weight: 700;
}

@media (max-width: 1023.98px) {
    .page-blog .blog-page__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-blog .blog-page__card--featured {
        grid-column: span 2;
        grid-template-columns: 1fr;
    }

    .page-blog .blog-page__card--featured .blog-page__card-link {
        flex-direction: column;
    }

    .page-blog .blog-page__card--featured .blog-page__img-wrap {
        height: 260px;
    }
}

@media (max-width: 639.98px) {
    .page-blog .blog-page__grid {
        grid-template-columns: 1fr;
    }

    .page-blog .blog-page__card--featured {
        grid-column: span 1;
    }
}

/* ----- Premium Contact Section Refinement ----- */
.page-home .contact-section--premium {
    position: relative;
    padding-top: 80px;
    padding-bottom: 88px;
    background: linear-gradient(160deg, #03264f 0%, #061e3c 60%, #04152a 100%);
    overflow: clip;
}

/* Decorative background glow */
.page-home .contact-section--premium::before {
    content: '';
    position: absolute;
    top: -100px;
    left: -100px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(227, 135, 10, 0.12), transparent 65%);
    pointer-events: none;
}

.page-home .contact-section--premium::after {
    content: '';
    position: absolute;
    bottom: -120px;
    right: -80px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.04), transparent 65%);
    pointer-events: none;
}

/* Override kicker + heading for dark bg */
.page-home .contact-section--premium .section-kicker {
    color: #e3a84a;
}

.page-home .contact-section--premium h2 {
    color: #ffffff;
    font-size: clamp(2rem, 3.2vw, 2.9rem);
    line-height: 1.06;
    letter-spacing: -0.03em;
}

.page-home .contact-section--premium .home-section-intro--split {
    align-items: start;
    gap: 12px 28px;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.page-home .contact-section--premium .section-heading {
    max-width: 520px;
    margin-bottom: 0;
}

.page-home .contact-section--premium .home-section-intro__support {
    max-width: 26rem;
    margin: 4px 0 0;
    color: rgba(255, 255, 255, 0.52);
    font-size: 14px;
    line-height: 1.7;
}

/* Grid */
.page-home .contact-section__grid--premium {
    position: relative;
    z-index: 1;
    grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
    gap: 28px;
    align-items: start;
}

.page-home .contact-section__content--premium {
    gap: 20px;
}

.page-home .contact-section__content--premium > p {
    margin: 0;
    font-size: 16.5px;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.65);
}

/* Pills grid */
.page-home .contact-pills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

/* Individual pill */
.page-home .contact-pill {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
}

.page-home .contact-pill:hover {
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(227, 135, 10, 0.4);
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.2);
}

/* Pill icon circle */
.page-home .contact-pill__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
    transition: background 0.2s ease;
}

.page-home .contact-pill:hover .contact-pill__icon {
    background: rgba(227, 135, 10, 0.22);
    color: #f5b942;
}

.page-home .contact-pill__icon--call {
    background: rgba(227, 135, 10, 0.15);
    color: #f5b942;
}

.page-home .contact-pill__icon--facebook {
    background: rgba(66, 103, 178, 0.2);
    color: #7e9de0;
}

.page-home .contact-pill__icon--instagram {
    background: rgba(193, 53, 132, 0.18);
    color: #e87bb0;
}

.page-home .contact-pill__icon--tiktok {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

/* Pill text */
.page-home .contact-pill__text {
    display: grid;
    gap: 2px;
}

.page-home .contact-pill strong {
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}

.page-home .contact-pill span {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
}

/* ── Form card ── */
.page-home .contact-form-card--premium {
    position: relative;
    padding: 28px;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.15),
        0 24px 56px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

/* Gold top bar on form */
.page-home .contact-form-card--premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #c97a08, #e3870a, #f5b942, #e3870a);
}

.page-home .contact-form-card__grid--premium {
    gap: 12px;
}

.page-home .contact-form-card--premium input,
.page-home .contact-form-card--premium textarea {
    width: 100%;
    min-height: 52px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.07);
    padding: 0 16px;
    color: #ffffff;
    font-size: 14px;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.page-home .contact-form-card--premium textarea {
    min-height: 140px;
    padding: 14px 16px;
    resize: vertical;
}

.page-home .contact-form-card--premium input::placeholder,
.page-home .contact-form-card--premium textarea::placeholder {
    color: rgba(255, 255, 255, 0.38);
    font-size: 13.5px;
}

.page-home .contact-form-card--premium input:focus,
.page-home .contact-form-card--premium textarea:focus {
    border-color: rgba(227, 135, 10, 0.5);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 4px rgba(227, 135, 10, 0.1);
    outline: none;
}

.page-home .contact-form-card--premium button {
    width: 100%;
    min-height: 52px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow:
        0 4px 12px rgba(227, 135, 10, 0.2),
        0 16px 36px rgba(227, 135, 10, 0.16);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.page-home .contact-form-card--premium button:hover {
    transform: translateY(-2px);
    box-shadow:
        0 6px 16px rgba(227, 135, 10, 0.28),
        0 22px 44px rgba(227, 135, 10, 0.18);
}

@media (max-width: 1023.98px) {
    .page-home .contact-section__grid--premium {
        grid-template-columns: 1fr;
    }

    .page-home .contact-section--premium .home-section-intro__support {
        max-width: 100%;
    }
}

@media (max-width: 767.98px) {
    .page-home .contact-section--premium {
        padding-top: 60px;
        padding-bottom: 68px;
    }

    .page-home .contact-pills {
        grid-template-columns: 1fr;
    }

    .page-home .contact-form-card--premium {
        padding: 20px;
        border-radius: 22px;
    }

    .page-home .contact-form-card--premium textarea {
        min-height: 120px;
    }
}

/* =============================================================
   Listing Page — Project Card Refinement
   ============================================================= */

/* Grid: 3 cols desktop → 2 tablet → 1 mobile */
.listing-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 8px;
}

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

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

/* Card shell */
.listing-grid .project-card {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(3, 38, 79, 0.07), 0 1px 3px rgba(3, 38, 79, 0.05);
    transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 260ms cubic-bezier(0.16, 1, 0.3, 1);
    background: #ffffff;
    border: 1px solid rgba(3, 38, 79, 0.06);
}

.listing-grid .project-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(3, 38, 79, 0.12), 0 2px 8px rgba(3, 38, 79, 0.06);
}

/* Image area */
.listing-grid .project-card__media {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.listing-grid .project-card__media img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.listing-grid .project-card:hover .project-card__media img {
    transform: scale(1.04);
}

/* Badge inside image */
.project-card__badge {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--color-gold);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Badge color variants */
.project-card[data-location*="ready"] .project-card__badge,
.project-card__badge--ready   { background: #16a34a; }
.project-card__badge--luxury  { background: var(--color-navy); }
.project-card__badge--new     { background: #7c3aed; }

/* Body */
.listing-grid .project-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 18px 18px 20px;
    gap: 0;
}

/* Location */
.listing-grid .project-card__location {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 6px;
    color: rgba(3, 38, 79, 0.55);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.listing-grid .project-card__location svg {
    flex-shrink: 0;
    color: var(--color-gold);
}

/* Title */
.listing-grid .project-card__body h3 {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-navy);
    letter-spacing: -0.01em;
}

/* Bed tags */
.listing-grid .project-card__features {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0 0 12px;
}

.listing-grid .project-card__features span {
    padding: 3px 9px;
    border-radius: 6px;
    background: rgba(3, 38, 79, 0.06);
    color: var(--color-navy);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Price */
.listing-grid .project-card__price {
    margin: 0 0 14px;
    font-size: 17px;
    font-weight: 700;
    color: var(--color-gold);
    letter-spacing: -0.01em;
}

/* CTA button */
.listing-grid .project-card .button {
    align-self: flex-start;
    margin-top: auto;
    padding: 10px 20px;
    font-size: 13px;
    border-radius: 10px;
}

/* Page hero for listing */
.page-hero__sub {
    margin: 12px 0 0;
    max-width: 52ch;
    color: rgba(255, 255, 255, 0.82);
    font-size: 16px;
    line-height: 1.65;
}

/* ─────────────────────────────────────────────────────────────
   PROPERTY CARDS — Home page "For Sale" section
   ───────────────────────────────────────────────────────────── */

.prop-section__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 36px;
    flex-wrap: wrap;
}

.prop-section__header .section-heading {
    margin-bottom: 0;
}

.prop-section__see-all {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px;
    border: 2px solid var(--color-navy);
    border-radius: 12px;
    color: var(--color-navy);
    font-size: 13.5px;
    font-weight: 700;
    background: transparent;
    text-decoration: none;
    transition: background .2s, color .2s;
    white-space: nowrap;
    margin-bottom: 6px;
}

.prop-section__see-all:hover {
    background: var(--color-navy);
    color: #fff;
}

/* Grid */
.prop-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Card */
.prop-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #e6edf7;
    box-shadow: 0 4px 16px rgba(3,38,79,.06);
    display: flex;
    flex-direction: column;
    transition: transform .3s ease, box-shadow .3s ease;
}

.prop-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(3,38,79,.13);
}

/* Media */
.prop-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #dde4f0;
}

.prop-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

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

/* Badge */
.prop-card__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 6px;
    color: #fff;
}

.prop-card__badge--hot  { background: #e53e3e; }
.prop-card__badge--off  { background: var(--color-gold); }

/* Body */
.prop-card__body {
    padding: 18px 18px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
}

/* Location */
.prop-card__location {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #8a94a6;
    letter-spacing: .03em;
    text-transform: uppercase;
    margin: 0;
}

.prop-card__location svg {
    color: var(--color-gold);
    flex-shrink: 0;
}

/* Title */
.prop-card__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-navy);
    margin: 0;
    line-height: 1.35;
}

/* Specs */
.prop-card__specs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.prop-card__specs span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    background: #f0f4f9;
    padding: 4px 10px;
    border-radius: 20px;
}

.prop-card__specs svg {
    color: var(--color-navy);
    opacity: .6;
}

/* Divider */
.prop-card__divider {
    height: 1px;
    background: #eef0f5;
    margin: 4px 0;
}

/* Footer */
.prop-card__footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
}

.prop-card__price-label {
    font-size: 11px;
    color: #8a94a6;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0 0 2px;
}

.prop-card__price {
    font-size: 18px;
    font-weight: 800;
    color: var(--color-navy);
    margin: 0 0 3px;
    line-height: 1;
}

.prop-card__payment {
    font-size: 11.5px;
    color: #8a94a6;
    margin: 0;
}

/* CTA button — compact */
.prop-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--color-navy);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 10px;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .2s, transform .2s;
}

.prop-card__cta:hover {
    background: var(--color-gold);
    transform: translateX(2px);
}

/* Responsive */
@media (max-width: 1024px) {
    .prop-cards-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .prop-cards-grid { grid-template-columns: 1fr; }
}



/* =============================================================
   Lead Popup  (.lpop)  — v2 Premium
   ============================================================= */
.lpop{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:20px}
.lpop[hidden]{display:none}
.lpop__backdrop{position:absolute;inset:0;background:rgba(2,18,40,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .4s ease}
.lpop__card{position:relative;display:grid;grid-template-columns:42% 1fr;width:min(100%,860px);max-height:calc(100vh - 40px);background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 40px 100px rgba(2,18,40,.45);transform:translateY(32px) scale(.96);opacity:0;transition:transform .42s cubic-bezier(.22,1,.36,1),opacity .38s ease}
.lpop.is-open .lpop__backdrop{opacity:1}
.lpop.is-open .lpop__card{transform:translateY(0) scale(1);opacity:1}

/* ── Media (left) ── */
.lpop__media{position:relative;overflow:hidden;min-height:0}
.lpop__media>img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform 6s ease}
.lpop.is-open .lpop__media>img{transform:scale(1.05)}
.lpop__media-overlay{position:absolute;inset:0;background:linear-gradient(170deg,rgba(3,38,79,.15) 0%,rgba(3,38,79,.55) 50%,rgba(3,38,79,.92) 100%)}

/* top logo */
.lpop__media-top{position:absolute;top:20px;left:20px;z-index:3}
.lpop__media-logo{height:28px;object-fit:contain;filter:brightness(0) invert(1);opacity:.9}

/* bottom content */
.lpop__media-body{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:24px 22px}
.lpop__media-badge{display:inline-flex;align-items:center;gap:5px;background:var(--color-gold);color:#fff;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;padding:4px 12px;border-radius:99px;margin-bottom:10px}
.lpop__media-headline{font-size:1.15rem;font-weight:800;color:#fff;line-height:1.3;margin:0 0 5px}
.lpop__media-tagline{color:rgba(255,255,255,.7);font-size:.8rem;font-weight:500;margin:0 0 18px}

/* stats strip */
.lpop__stats{display:flex;align-items:center;gap:0;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:12px;overflow:hidden;backdrop-filter:blur(4px)}
.lpop__stat{flex:1;padding:10px 0;text-align:center}
.lpop__stat-num{display:block;font-size:1.05rem;font-weight:800;color:#fff;line-height:1}
.lpop__stat-lbl{display:block;font-size:.62rem;color:rgba(255,255,255,.65);text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
.lpop__stat-divider{width:1px;background:rgba(255,255,255,.2);align-self:stretch}

/* ── Body (right) ── */
.lpop__body{position:relative;display:flex;flex-direction:column;background:#fff;overflow-y:auto}
.lpop__form-wrap{padding:32px 30px;flex:1;display:flex;flex-direction:column}
.lpop__close{position:absolute;top:16px;right:16px;z-index:10;width:34px;height:34px;border-radius:50%;background:#f1f5f9;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#64748b;transition:background .15s,color .15s,transform .15s}
.lpop__close:hover{background:#e2e8f0;color:#0f172a;transform:rotate(90deg)}

/* eyebrow + title */
.lpop__eyebrow{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--color-gold);margin-bottom:6px;display:flex;align-items:center;gap:6px}
.lpop__eyebrow::before{content:'';display:block;width:18px;height:2px;background:var(--color-gold);border-radius:2px}
.lpop__title{font-size:1.2rem;font-weight:800;color:var(--color-navy);line-height:1.25;margin:0 0 10px}
.lpop__divider{width:36px;height:3px;background:linear-gradient(90deg,var(--color-gold),#f5b942);border-radius:2px;margin-bottom:10px}
.lpop__sub{font-size:.82rem;color:#64748b;line-height:1.6;margin:0 0 18px}

/* form */
.lpop__form{display:flex;flex-direction:column;gap:11px;flex:1}
.lpop__field{display:flex;flex-direction:column;gap:4px}
.lpop__field label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#475569;display:flex;align-items:center;gap:5px}
.lpop__field label svg{opacity:.6}
.lpop__field input,.lpop__field select{padding:10px 13px;border:1.5px solid #e2e8f0;border-radius:9px;font-size:.875rem;color:#0f172a;background:#fafbfc;outline:none;font-family:inherit;transition:border-color .2s,box-shadow .2s,background .2s;width:100%;box-sizing:border-box}
.lpop__field input:focus,.lpop__field select:focus{border-color:var(--color-navy);box-shadow:0 0 0 3px rgba(3,38,79,.08);background:#fff}
.lpop__field input::placeholder{color:#94a3b8}

/* phone */
.lpop__phone-wrap{display:flex;align-items:stretch;border:1.5px solid #e2e8f0;border-radius:9px;overflow:hidden;background:#fafbfc;transition:border-color .2s,box-shadow .2s}
.lpop__phone-wrap:focus-within{border-color:var(--color-navy);box-shadow:0 0 0 3px rgba(3,38,79,.08);background:#fff}
.lpop__prefix{padding:10px 12px;background:#f1f5f9;font-size:.82rem;font-weight:700;color:var(--color-navy);border-right:1.5px solid #e2e8f0;white-space:nowrap;display:flex;align-items:center;gap:4px}
.lpop__phone-wrap input{border:none !important;box-shadow:none !important;border-radius:0 !important;background:transparent !important;flex:1;min-width:0}

/* select */
.lpop__select-wrap{position:relative}
.lpop__select-wrap::after{content:'';pointer-events:none;position:absolute;right:13px;top:50%;margin-top:-4px;width:7px;height:7px;border-right:1.8px solid #94a3b8;border-bottom:1.8px solid #94a3b8;transform:rotate(45deg)}
.lpop__select-wrap select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:36px;cursor:pointer}

/* submit */
.lpop__submit{display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,#e3870a 0%,#f5a623 100%);color:#fff;border:none;border-radius:10px;padding:13px 20px;font-size:.9rem;font-weight:800;cursor:pointer;font-family:inherit;margin-top:4px;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,filter .2s;box-shadow:0 6px 20px rgba(227,135,10,.35);letter-spacing:.01em}
.lpop__submit:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(227,135,10,.45);filter:brightness(1.05)}
.lpop__submit svg{transition:transform .2s}
.lpop__submit:hover svg{transform:translateX(3px)}

/* disclaimer */
.lpop__disclaimer{font-size:.68rem;color:#94a3b8;text-align:center;margin:8px 0 0;display:flex;align-items:center;justify-content:center;gap:4px}

/* success */
.lpop__success{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px 0;gap:14px;animation:lpopFadeUp .4s ease both}
.lpop__success[hidden]{display:none}
.lpop__success-icon{width:68px;height:68px;border-radius:50%;background:linear-gradient(135deg,#16a34a,#15803d);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 10px 30px rgba(22,163,74,.35)}
.lpop__success h3{font-size:1.3rem;font-weight:800;color:var(--color-navy);margin:0}
.lpop__success p{font-size:.875rem;color:#64748b;margin:0;line-height:1.6}
.lpop__success-contact{display:flex;gap:10px;margin-top:4px}
.lpop__success-contact a{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:600;color:var(--color-navy);text-decoration:none;padding:7px 14px;border:1.5px solid #e2e8f0;border-radius:8px;transition:border-color .15s,background .15s}
.lpop__success-contact a svg{width:16px;height:16px;flex:0 0 auto}
.lpop__success-contact a:first-child svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.lpop__success-contact a:last-child svg{color:#25d366;fill:currentColor}
.lpop__success-contact a:hover{border-color:var(--color-navy);background:#f8fafc}

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

/* ── Responsive ── */
@media(max-width:767px){
  .lpop__card{grid-template-columns:1fr;grid-template-rows:auto 1fr;border-radius:18px;max-height:92vh}
  .lpop__media{aspect-ratio:3 / 4;min-height:0}
  .lpop__form-wrap{padding:22px 20px}
}
@media(max-width:479px){
  .lpop{padding:8px}
  .lpop__card{grid-template-rows:auto 1fr;max-height:96vh}
  .lpop__form-wrap{padding:18px 16px}
}

/* ══════════════════════════════════════════════════════════════════════════
   BLOG ARTICLE PAGE  (.page-blog-article)
══════════════════════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────────────────── */
.page-blog-article .ba-hero {
    background: linear-gradient(160deg, #03264f 0%, #061e3c 100%);
    padding: clamp(110px, 14vw, 160px) 0 clamp(48px, 6vw, 72px);
    margin-top: calc(-1 * var(--header-h));
}

.page-blog-article .ba-hero__inner {
    display: grid;
    gap: 18px;
    justify-items: start;
    max-width: 820px;
}

.page-blog-article .ba-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

.page-blog-article .ba-breadcrumb a {
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    transition: color .18s;
}

.page-blog-article .ba-breadcrumb a:hover {
    color: #e3a84a;
}

.page-blog-article .ba-breadcrumb svg {
    opacity: .5;
}

.page-blog-article .ba-category {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(201, 169, 110, 0.18);
    border: 1px solid rgba(201, 169, 110, 0.35);
    color: #e3a84a;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.page-blog-article .ba-hero__title {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    line-height: 1.55;
    letter-spacing: 0;
    font-weight: 700;
    direction: rtl;
    text-align: right;
}

.page-blog-article .ba-hero__lead {
    margin: 0;
    color: rgba(255, 255, 255, 0.65);
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    line-height: 1.7;
    max-width: 680px;
}

.page-blog-article .ba-hero__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    width: 100%;
}

.page-blog-article .ba-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .83rem;
    color: rgba(255, 255, 255, 0.5);
}

.page-blog-article .ba-meta-sep {
    color: rgba(255, 255, 255, 0.25);
    font-size: .9rem;
}

/* ── Layout ───────────────────────────────────────────────────────────── */
.page-blog-article .ba-body {
    background: #f4f6fa;
}

.page-blog-article .ba-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 36px;
    align-items: start;
}

/* ── Main content ─────────────────────────────────────────────────────── */
.page-blog-article .ba-content {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid rgba(3, 38, 79, 0.07);
    box-shadow: 0 4px 14px rgba(3, 38, 79, 0.05);
    overflow: hidden;
}

.page-blog-article .ba-featured-img {
    width: 100%;
    aspect-ratio: 16 / 7;
    overflow: hidden;
}

.page-blog-article .ba-featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.page-blog-article .ba-prose {
    padding: 40px 48px;
}

.page-blog-article .ba-prose p,
.page-blog-article .ba-prose .about-para,
.page-blog-article .ba-prose .blog-para {
    margin: 0 0 1.6em;
    font-size: 1.08rem;
    line-height: 2.1;
    color: #2d3748;
    text-align: justify;
    direction: rtl;
    unicode-bidi: embed;
}

.page-blog-article .ba-prose p:last-child,
.page-blog-article .ba-prose .about-para:last-child,
.page-blog-article .ba-prose .blog-para:last-child {
    margin-bottom: 0;
}

.page-blog-article .ba-prose .about-subheading {
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--color-navy);
    margin: 2em 0 0.6em;
    padding-right: 14px;
    padding-left: 0;
    border-right: 3px solid var(--color-gold);
    border-left: none;
    line-height: 1.4;
    direction: rtl;
    text-align: right;
}

.page-blog-article .ba-prose .about-subheading:first-child {
    margin-top: 0;
}

/* Arabic blog headings */
.page-blog-article .ba-prose .blog-heading {
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--color-navy);
    margin: 2em 0 0.6em;
    padding-right: 14px;
    border-right: 3px solid var(--color-gold);
    line-height: 1.4;
    direction: rtl;
    text-align: right;
}

.page-blog-article .ba-prose .blog-heading:first-child {
    margin-top: 0;
}

.page-blog-article .ba-article-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 48px;
    border-top: 1px solid rgba(3, 38, 79, 0.08);
    background: #fafbfd;
}

.page-blog-article .ba-tag {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 999px;
    background: rgba(3, 38, 79, 0.06);
    color: #03264f;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.page-blog-article .ba-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .85rem;
    font-weight: 600;
    color: #c9a96e;
    text-decoration: none;
    transition: color .18s, gap .18s;
}

.page-blog-article .ba-back-link:hover {
    color: #a8863c;
    gap: 10px;
}

/* ── Sidebar ──────────────────────────────────────────────────────────── */
.page-blog-article .ba-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 100px;
}

.page-blog-article .ba-sidebar-card {
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid rgba(3, 38, 79, 0.07);
    box-shadow: 0 4px 14px rgba(3, 38, 79, 0.05);
    padding: 28px 24px;
}

.page-blog-article .ba-sidebar-card--cta {
    background: linear-gradient(145deg, #03264f 0%, #061e3c 100%);
    border-color: transparent;
}

.page-blog-article .ba-sidebar-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(201, 169, 110, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e3a84a;
    margin-bottom: 16px;
}

.page-blog-article .ba-sidebar-card__title {
    margin: 0 0 10px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    color: #ffffff;
}

.page-blog-article .ba-sidebar-card__body {
    margin: 0 0 20px;
    font-size: .875rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.6);
}

.page-blog-article .ba-sidebar-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    border-radius: 999px;
    background: #c9a96e;
    color: #ffffff;
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s, gap .2s;
}

.page-blog-article .ba-sidebar-card__btn:hover {
    background: #a8863c;
    gap: 10px;
}

/* Related articles */
.page-blog-article .ba-sidebar-related__title {
    margin: 0 0 16px;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #03264f;
}

.page-blog-article .ba-related-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.page-blog-article .ba-related-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.page-blog-article .ba-related-item:not(:last-child) {
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(3, 38, 79, 0.07);
}

.page-blog-article .ba-related-thumb {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    display: block;
}

.page-blog-article .ba-related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}

.page-blog-article .ba-related-thumb:hover img {
    transform: scale(1.06);
}

.page-blog-article .ba-related-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.page-blog-article .ba-related-cat {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #c9a96e;
}

.page-blog-article .ba-related-link {
    font-size: .85rem;
    font-weight: 600;
    color: #03264f;
    text-decoration: none;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .18s;
}

.page-blog-article .ba-related-link:hover {
    color: #c9a96e;
}

.page-blog-article .ba-related-read {
    font-size: .72rem;
    color: #9ca3af;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1023.98px) {
    .page-blog-article .ba-layout {
        grid-template-columns: 1fr;
    }

    .page-blog-article .ba-sidebar {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .page-blog-article .ba-prose {
        padding: 28px 24px;
    }

    .page-blog-article .ba-article-footer {
        padding: 16px 24px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .page-blog-article .ba-hero__title {
        font-size: clamp(1.4rem, 5.5vw, 1.9rem);
        line-height: 1.6;
    }
}

@media (max-width: 479.98px) {
    .page-blog-article .ba-prose {
        padding: 22px 18px;
    }

    .page-blog-article .ba-article-footer {
        padding: 14px 18px;
    }
}