/* =========================================================
   COLOR SYSTEM — Main Black #111111 + Champagne Gold + Ivory
   ========================================================= */
        :root {
            /* MAIN dark color — black, used for every dark background */
            --navy: #111111;
            --navy-2: #1C1C1C;
            /* slightly lighter surface on dark bg */
            --navy-3: #2A2A2A;
            /* hover state */
            --black: #111111;
            --black-2: #1C1C1C;
            --gold: #C6A15B;
            --gold-dk: #A8843F;
            --gold-lt: #E3C88E;
            --gold-soft: #F6EEDC;
            --ivory: #FAF7F1;
            --stone: #F1ECE2;
            --text: #4A4A4A;
            --muted: #8C8C8C;
            --line: #E7E0D2;
            --wa: #25D366;
            --ff-display: 'Cormorant Garamond', Georgia, serif;
            --ff-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
            --r-xl: 28px;
            --r-lg: 20px;
            --r-md: 14px;
            --r-sm: 10px;
            --shadow: 0 24px 50px -28px rgba(12, 12, 12, .45);
            --shadow-sm: 0 10px 30px -18px rgba(12, 12, 12, .35);
        }

        * {
            box-sizing: border-box;
              margin: 0;
  padding: 0;
        }

        html,
body {
  width: 100%;
  overflow-x: clip;
}
        html {
            scroll-behavior: smooth;
            scroll-padding-top: 78px
        }

        body {
            font-family: var(--ff-body);
            color: var(--text);
            background: var(--ivory);
            font-size: 16px;
            line-height: 1.65;
            overflow-x: hidden
        }

        

        h1,
        h2,
        h3,
        h4,
        h5 {
            font-family: var(--ff-display);
            color: var(--navy);
            font-weight: 600;
            line-height: 1.15
        }

        a {
            text-decoration: none
        }

        img {
            max-width: 100%
        }

        :focus-visible {
            outline: 3px solid var(--gold-lt);
            outline-offset: 3px
        }

        /* Section scaffolding */
        .sec {
            padding: 100px 0
        }

        .sec-stone {
            background: var(--stone)
        }

        .sec-navy {
            background: var(--navy);
            color: #BDBDBD
        }

        .sec-navy h2,
        .sec-navy h3,
        .sec-navy h4 {
            color: #fff
        }

        .sec-head {
            max-width: 680px;
            margin: 0 auto 54px;
            text-align: center
        }

        .sec-head h2 {
            font-size: clamp(2.1rem, 3.8vw, 3.1rem);
            margin-bottom: 12px
        }

        .sec-head p {
            margin: 0;
            font-size: 1.05rem
        }

        .tag {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-size: 1rem;
            font-weight: 600;
            color: var(--gold-dk);
            margin-bottom: 12px
        }

        .tag::before,
        .tag::after {
            content: "";
            width: 22px;
            height: 1.5px;
            background: currentColor;
            opacity: .7
        }

        .sec-navy .tag,
        .loc-sec .tag {
            color: var(--gold-lt)
        }

        .tag.left::before {
            display: none
        }

        /* Buttons */
        .btn-gold {
            background: linear-gradient(135deg, var(--gold-lt), var(--gold) 55%, var(--gold-dk));
            color: var(--navy);
            border: 0;
            border-radius: 50px;
            padding: 13px 28px;
            font-weight: 700;
            transition: transform .25s, box-shadow .25s
        }

        .btn-gold:hover {
            color: var(--navy);
            transform: translateY(-2px);
            box-shadow: 0 12px 26px -10px rgba(198, 161, 91, .8)
        }

        .btn-ghost {
            border: 1.5px solid rgba(255, 255, 255, .5);
            color: #fff;
            border-radius: 50px;
            padding: 12px 26px;
            font-weight: 600;
            background: rgba(255, 255, 255, .04);
            transition: .25s
        }

        .btn-ghost:hover {
            background: #fff;
            color: var(--navy)
        }

        .btn-navy {
            background: var(--navy);
            color: #fff;
            border-radius: 50px;
            padding: 12px 26px;
            font-weight: 600;
            border: 0;
            transition: .25s
        }

        .btn-navy:hover {
            background: var(--navy-3);
            color: #fff
        }

        /* ================= BRAND / LOGO =================
   Put your logo file at the path used in the <img> tags
   (images/logo-white.png for header, images/logo-footer.png for footer).
   If the image loads, it replaces the text logo automatically.
   If it is missing, the text logo is shown instead. */
        .brand {
            display: inline-flex;
            align-items: center
        }

        .brand-logo {
            display: none;
            height: 62px;
            width: auto;
            object-fit: contain
        }

        .brand.has-logo .brand-logo {
            display: block
        }

        .brand.has-logo .brand-text {
            display: none
        }

        .brand-text {
            display: flex;
            flex-direction: column;
            line-height: 1
        }

        .brand-text b {
            font-family: var(--ff-body);
            font-weight: 700;
            letter-spacing: .34em;
            color: #fff;
            font-size: 1rem
        }

        .brand-text span {
            font-family: var(--ff-display);
            color: var(--gold-lt);
            font-size: 1.5rem;
            font-weight: 600;
            margin-top: 2px
        }

        .nav-main.scrolled .brand-logo {
            height: 62px
        }

        footer .brand-logo {
            height: 83px
        }

        footer .brand-text b {
            font-size: 1.2rem
        }

        footer .brand-text span {
            font-size: 1.8rem
        }

        @media(max-width:575px) {
            .brand-logo {
                height: 62px
            }
        }

        /* Numbers: clean sans-serif instead of the serif display font */
        .price-card strong,
        .stat b,
        .m-price strong,
        .lp-stats b,
        .life-fig b,
        .trail b,
        .loc-km b {
            font-family: var(--ff-body) !important;
            font-weight: 700;
            letter-spacing: -.01em
        }

        .stat b {
            font-size: 1.6rem
        }

        .price-card strong {
            font-size: 1.8rem
        }

        .m-price strong {
            font-size: 1.5rem
        }

        .lp-stats b {
            font-size: 1.9rem
        }

        .life-fig b {
            font-size: 1.6rem
        }

        .trail b {
            font-size: 1.5rem
        }

        /* ================= NAVBAR ================= */
        .nav-main {
            position: fixed;
            inset: 0 0 auto 0;
            z-index: 1030;
            padding: 18px 0;
            transition: background .3s, padding .3s, box-shadow .3s
        }

        .nav-main.scrolled {
            background: rgba(12, 12, 12, .95);
            backdrop-filter: blur(12px);
            padding: 10px 0;
            box-shadow: 0 10px 30px rgba(0, 0, 0, .2)
        }

        .nav-links {
            display: flex;
            gap: 4px;
            list-style: none;
            margin: 0;
            padding: 0
        }

        .nav-links a {
            color: rgba(255, 255, 255, .85);
            font-weight: 500;
            font-size: .95rem;
            padding: 8px 14px;
            border-radius: 50px;
            transition: .2s
        }

        .nav-links a:hover,
        .nav-links a.active {
            color: var(--navy);
            background: var(--gold-lt)
        }

        .nav-call {
            color: #fff;
            font-weight: 600;
            font-size: .92rem;
            display: flex;
            align-items: center;
            gap: 8px
        }

        .nav-call i {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, .3);
            display: grid;
            place-items: center;
            color: var(--gold-lt)
        }

        .burger {
            display: none;
            width: 46px;
            height: 46px;
            border-radius: 12px;
            background: rgba(255, 255, 255, .1);
            border: 1px solid rgba(255, 255, 255, .2);
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 5px
        }

        .burger span {
            width: 20px;
            height: 2px;
            background: #fff;
            border-radius: 2px
        }

        .burger span:nth-child(2) {
            width: 14px;
            margin-left: 6px;
            background: var(--gold-lt)
        }

        @media(max-width:991px) {
            .nav-main {
                background: rgba(12, 12, 12, .94);
                backdrop-filter: blur(12px);
                padding: 10px 0
            }

            .nav-links,
            .nav-desk {
                display: none !important
            }

            .burger {
                display: flex
            }
        }

        /* Mobile offcanvas menu */
        .m-menu {
            background: var(--navy);
            color: #fff;
            width: min(88vw, 380px) !important;
            border-left: 1px solid rgba(198, 161, 91, .25)
        }

        .m-menu .offcanvas-header {
            padding: 22px 24px;
            border-bottom: 1px solid rgba(255, 255, 255, .08);
            justify-content: space-between;
        }

        .m-close {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .08);
            border: 0;
            color: #fff;
            font-size: 1.2rem
        }

        .m-menu .offcanvas-body {
            padding: 18px 24px 28px;
            display: flex;
            flex-direction: column
        }

        .m-links {
            list-style: none;
            padding: 0;
            margin: 0 0 24px
        }

        .m-links a {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 14px 4px;
            color: #E6E6E6;
            font-weight: 500;
            font-size: 1.05rem;
            border-bottom: 1px solid rgba(255, 255, 255, .07)
        }

        .m-links a i:first-child {
            width: 38px;
            height: 38px;
            border-radius: 10px;
            background: rgba(198, 161, 91, .14);
            color: var(--gold-lt);
            display: grid;
            place-items: center
        }

        .m-links a .bi-chevron-right {
            margin-left: auto;
            font-size: .8rem;
            color: var(--muted)
        }

        .m-links a:hover {
            color: var(--gold-lt)
        }

        .m-price {
            background: linear-gradient(135deg, var(--navy-2), var(--navy-3));
            border: 1px solid rgba(198, 161, 91, .3);
            border-radius: var(--r-md);
            padding: 16px 18px;
            margin-bottom: 16px
        }

        .m-price small {
            color: #ABABAB
        }

        .m-price strong {
            display: block;
            font-family: var(--ff-display);
            font-size: 1.7rem;
            color: var(--gold-lt)
        }

        .m-actions a {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px;
            border-radius: 50px;
            font-weight: 600;
            font-size: .92rem
        }

        .m-actions .call {
            background: rgba(255, 255, 255, .08);
            color: #fff
        }

        .m-actions .wa {
            background: var(--wa);
            color: #fff
        }

        /* ================= HERO ================= */
        .hero {
            position: relative;
            min-height: 100vh;
            display: flex;
            align-items: center;
            padding: 140px 0 80px;
            color: #fff;
            overflow: hidden;
            background: var(--navy) url('../assets/images/banner.webp') center/cover no-repeat
        }

        .hero::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(100deg, rgba(12, 12, 12, .8) 0%, rgba(12, 12, 12, .7) 48%, rgba(12, 12, 12, .35) 100%)
        }

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

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(227, 200, 142, .12);
            border: 1px solid rgba(227, 200, 142, .4);
            color: var(--gold-lt);
            padding: 7px 16px;
            border-radius: 50px;
            font-size: .88rem;
            font-weight: 500;
            margin-bottom: 22px
        }

        .hero h1 {
            color: #fff;
            font-size: clamp(3rem, 7vw, 5.8rem);
            line-height: .95;
            margin-bottom: 16px
        }

        .hero h1 small {
            display: block;
            font-family: var(--ff-body);
            font-size: 27px;
            font-weight: 600;
            letter-spacing: .4em;
            color: var(--gold-lt);
            margin-bottom: 12px
        }

        .hero .tagline {
            font-family: var(--ff-display);
            font-style: italic;
            font-size: clamp(1.4rem, 2.4vw, 1.9rem);
            color: #EFE9DD;
            margin-bottom: 10px
        }

        .hero .loc {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #BDBDBD;
            margin-bottom: 16px
        }

        .hero .loc i {
            color: var(--gold-lt)
        }

        .hero .lead-txt {
            max-width: 560px;
            color: #CFCFCF;
            margin-bottom: 26px
        }

        .price-card {
            display: inline-flex;
            align-items: center;
            gap: 20px;
            background: rgba(255, 255, 255, .07);
            border: 1px solid rgba(227, 200, 142, .3);
            border-radius: var(--r-md);
            padding: 14px 22px;
            backdrop-filter: blur(6px);
            margin-bottom: 26px;
            flex-wrap: wrap
        }

        .price-card .cfg {
            font-weight: 600;
            color: #fff;
            line-height: 1.35
        }

        .price-card .divider {
            width: 1px;
            height: 40px;
            background: rgba(255, 255, 255, .25)
        }

        .price-card small {
            display: block;
            color: #ABABAB;
            font-size: .8rem
        }

        .price-card strong {
            font-family: var(--ff-display);
            font-size: 2.1rem;
            color: var(--gold-lt);
            line-height: 1
        }

        .stats {
            max-width: 580px;
            margin-bottom: 30px
        }

        .stat {
            padding: 14px 8px;
            text-align: center;
            background: rgba(255, 255, 255, .05);
            border: 1px solid rgba(255, 255, 255, .1);
            border-radius: var(--r-sm);
            height: 100%
        }

        .stat b {
            display: block;
            font-family: var(--ff-display);
            font-size: 1.9rem;
            color: #fff;
            line-height: 1.05
        }

        .stat span {
            font-size: .8rem;
            color: #ABABAB
        }

        @media(max-width:575px) {
            .hero {
                padding-top: 110px
            }
        }

        /* Form card (shared) */
        .form-card {
            background: #fff;
            border-radius: var(--r-lg);
            padding: 32px 30px;
            box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5);
            color: var(--text);
            position: relative;
            overflow: hidden
        }

        .form-card::before {
            content: "";
            position: absolute;
            inset: 0 0 auto 0;
            height: 5px;
            background: linear-gradient(90deg, var(--gold-lt), var(--gold), var(--gold-dk))
        }

        .form-card h3 {
            font-size: 1.9rem;
            margin-bottom: 4px
        }

        .form-card .sub {
            font-size: .93rem;
            margin-bottom: 20px
        }

        .f-label {
            font-size: .82rem;
            font-weight: 600;
            color: var(--navy);
            margin-bottom: 6px;
            display: block
        }

        .f-label em {
            color: #C0392B;
            font-style: normal
        }

        .f-group {
            position: relative;
            margin-bottom: 9px
        }

        .f-group i {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--gold-dk)
        }

        .f-group .form-control {
            height: 50px;
            border-radius: var(--r-sm);
            border: 1.5px solid var(--line);
            padding-left: 46px;
            font-size: .95rem;
            background: var(--ivory)
        }

        .f-group .form-control:focus {
            border-color: var(--gold);
            box-shadow: 0 0 0 4px rgba(198, 161, 91, .15);
            background: #fff
        }

        .f-err {
            visibility: hidden;
            font-size: .78rem;
            color: #C0392B;
            min-height: 18px;
            margin-bottom: 6px
        }

        .f-group.invalid .form-control {
            border-color: #C0392B
        }

        .f-group.invalid+.f-err {
            visibility: visible
        }

        .secure {
            font-size: .82rem;
            text-align: center;
            margin: 14px 0 0;
            color: var(--muted)
        }

        .form-success {
            display: none;
            text-align: center;
            padding: 24px 0
        }

        .form-success i {
            font-size: 3.2rem;
            color: var(--gold)
        }

        .form-success h4 {
            margin: 10px 0 6px;
            font-size: 1.8rem
        }

        /* ================= RESIDENCES ================= */
        .filter-bar {
            display: flex;
            justify-content: center;
            gap: 8px;
            flex-wrap: wrap;
            margin-bottom: 40px
        }

        .filter-bar button {
            border: 1.5px solid var(--line);
            background: #fff;
            color: var(--navy);
            border-radius: 50px;
            padding: 9px 22px;
            font-weight: 600;
            font-size: .92rem;
            transition: .2s
        }

        .filter-bar button.active,
        .filter-bar button:hover {
            background: var(--navy);
            border-color: var(--navy);
            color: #fff
        }

        .res-card {
            background: #fff;
            border-radius: var(--r-lg);
            overflow: hidden;
            height: 100%;
            display: flex;
            flex-direction: column;
            box-shadow: var(--shadow-sm);
            transition: transform .3s, box-shadow .3s
        }

        .res-card:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow)
        }

        .res-img {
            position: relative;
            aspect-ratio: 4/3;
            overflow: hidden;
            background: linear-gradient(135deg, var(--navy-2), var(--navy-3))
        }

        .res-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .6s
        }

        .res-card:hover .res-img img {
            transform: scale(1.07)
        }

 
.res-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(12, 12, 12, .85) 100%
  );
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
}

        .res-size {
            position: absolute;
            left: 14px;
            bottom: 12px;
            z-index: 2;
            color: #fff;
            font-weight: 600;
            font-size: .9rem;
            display: flex;
            align-items: center;
            gap: 6px
        }

        .res-size i {
            color: var(--gold-lt)
        }

        .res-chip {
            position: absolute;
            top: 14px;
            left: 14px;
            z-index: 2;
            background: var(--gold);
            color: var(--navy);
            font-weight: 700;
            font-size: .75rem;
            padding: 5px 12px;
            border-radius: 50px
        }

        .res-body {
            padding: 20px 22px 22px;
            display: flex;
            flex-direction: column;
            flex: 1
        }

        .res-body h3 {
            font-size: 1.65rem;
            margin-bottom: 0
        }

        .res-body .type {
            font-size: .88rem;
            color: var(--muted);
            margin-bottom: 14px
        }

        .res-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            border-top: 1px solid var(--line);
            margin-bottom: 16px;
            font-size: .9rem
        }

        .res-row strong {
            color: var(--gold-dk)
        }

        .res-body .dl {
            margin-top: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
          background: var(--gold);
            color: var(--navy);
            border-radius: 50px;
            padding: 11px 18px;
            font-weight: 600;
            font-size: .9rem;
            border: 0;
            width: 100%;
            transition: background .25s, color .25s
        }

        .res-body .dl:hover {
         background: var(--navy);
             color: #fff;
        }

        /* Two-part CTA (Master Plan + Pricing) */
        .cta-card {
            position: relative;
            border-radius: var(--r-xl);
            overflow: hidden;
            min-height: 300px;
            height: 100%;
            padding: 38px 36px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            isolation: isolate;
            color: #fff
        }

        .cta-card>img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -2;
            transition: transform .9s
        }

        .cta-card:hover>img {
            transform: scale(1.05)
        }

        .cta-card::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1
        }

        .cta-master::after {
            background: linear-gradient(160deg, rgba(7, 13, 22, .35) 0%, rgba(7, 13, 22, .92) 70%)
        }

        .cta-price::after {
            background: linear-gradient(160deg, rgba(168, 132, 63, .35) 0%, rgba(12, 12, 12, .94) 70%)
        }

        .cta-card .ic {
            width: 56px;
            height: 56px;
            border-radius: 16px;
            background: rgba(227, 200, 142, .18);
            border: 1px solid rgba(227, 200, 142, .45);
            color: var(--gold-lt);
            display: grid;
            place-items: center;
            font-size: 1.5rem;
            margin-bottom: auto
        }

        .cta-card h3 {
            color: #fff;
            font-size: clamp(1.9rem, 3vw, 2.5rem);
            margin: 28px 0 6px
        }

        .cta-card p {
            color: #DDDDDD;
            margin-bottom: 22px;
            max-width: 420px
        }

        /* ================= GALLERY ================= */
        .gal-intro {
            background: var(--navy);
            border-radius: var(--r-xl);
            padding: 40px 32px;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            color: #BDBDBD;
            position: relative;
            overflow: hidden
        }

        .gal-intro::after {
            content: "\F3E5";
            font-family: 'bootstrap-icons';
            position: absolute;
            right: -20px;
            bottom: -40px;
            font-size: 9rem;
            color: rgba(227, 200, 142, .07)
        }

        .gal-intro h3 {
            font-size: 2.4rem;
            color: #fff;
            margin-bottom: 12px
        }

        .gal-intro p {
            margin-bottom: 24px
        }

        .marquee {
            overflow: hidden;
            mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent)
        }

        .marquee-track {
            display: flex;
            gap: 18px;
            width: max-content;
            animation: scroll 45s linear infinite
        }

        .marquee:hover .marquee-track {
            animation-play-state: paused
        }

        .g-item {
            width: 300px;
            height: 380px;
            border-radius: var(--r-lg);
            overflow: hidden;
            position: relative;
            flex-shrink: 0;
            background: var(--navy-2);
            margin: 0
        }

        .g-item:nth-child(even) {
            height: 330px;
            margin-top: 50px
        }

        .g-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .6s
        }

        .g-item:hover img {
            transform: scale(1.06)
        }

        .g-item figcaption {
            position: absolute;
            left: 14px;
            bottom: 14px;
            background: rgba(12, 12, 12, .8);
            color: #fff;
            font-size: .85rem;
            padding: 6px 14px;
            border-radius: 50px
        }

        @keyframes scroll {
            to {
                transform: translateX(-50%)
            }
        }

        @media(max-width:991px) {
            .g-item {
                width: 230px;
                height: 290px
            }

            .g-item:nth-child(even) {
                height: 250px;
                margin-top: 40px
            }
        }

        /* ================= LIFESTYLE ================= */
        .life-intro {
            position: sticky;
            top: 110px
        }

        .life-intro h2 {
            font-size: clamp(2.4rem, 4vw, 3.3rem);
            margin-bottom: 4px
        }

        .life-sub {
            font-family: var(--ff-display);
            font-style: italic;
            font-size: clamp(1.3rem, 2vw, 1.65rem);
            color: var(--gold-dk);
            margin-bottom: 16px;
            line-height: 1.3
        }

        .life-photo {
            position: relative;
            border-radius: var(--r-xl);
            overflow: hidden;
            aspect-ratio: 4/3;
            margin: 26px 0;
            background: var(--navy-2)
        }

        .life-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover
        }

        .life-photo::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 40%, rgba(12, 12, 12, .85))
        }

        .lp-stats {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 2
        }

        .lp-stats .col-6 {
            padding: 16px 20px;
            color: #fff
        }

        .lp-stats .col-6+.col-6 {
            border-left: 1px solid rgba(255, 255, 255, .2)
        }

        .lp-stats b {
            display: block;
            font-family: var(--ff-display);
            font-size: 2.2rem;
            line-height: 1;
            color: var(--gold-lt)
        }

        .lp-stats span {
            font-size: .85rem;
            color: #DDDDDD
        }

        .life-card {
            position: relative;
            border-radius: var(--r-xl);
            overflow: hidden;
            background: var(--navy-2);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 28px;
            isolation: isolate;
            min-height: 280px;
            height: 100%
        }

        .life-card>img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -2;
            transition: transform .9s ease
        }

        .life-card::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
            background: linear-gradient(180deg, rgba(12, 12, 12, .05) 20%, rgba(12, 12, 12, .55) 55%, rgba(12, 12, 12, .95))
        }

        .life-card:hover>img {
            transform: scale(1.06)
        }

        .life-card.tall {
            min-height: 578px
        }

        .life-fig {
            position: absolute;
            top: 22px;
            left: 22px;
            background: rgba(12, 12, 12, .5);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(227, 200, 142, .4);
            border-radius: 14px;
            padding: 10px 16px
        }

        .life-fig b {
            display: block;
            font-family: var(--ff-display);
            font-size: 1.9rem;
            color: var(--gold-lt);
            line-height: 1
        }

        .life-fig small {
            font-size: .76rem;
            color: #E6E6E6
        }

        .life-card h3 {
            color: #fff;
            font-size: 2.1rem;
            margin-bottom: 6px
        }

        .life-card.tall h3 {
            font-size: 2.6rem
        }

        .life-card p {
            margin: 0;
            color: #DDDDDD;
            font-size: .95rem;
            max-width: 440px
        }

        .life-wide {
            border-radius: var(--r-xl);
            overflow: hidden;
            background: var(--navy);
            color: #BDBDBD
        }

        .life-wide .half {
            padding: 28px 30px;
            height: 100%
        }

        .life-wide h3 {
            color: #fff;
            font-size: 1.75rem;
            margin-bottom: 16px
        }

        @media(min-width:768px) {
            .life-wide .col-md-6+.col-md-6 .half {
                border-left: 1px solid rgba(255, 255, 255, .08)
            }
        }

        @media(max-width:767px) {
            .life-wide .col-md-6+.col-md-6 .half {
                border-top: 1px solid rgba(255, 255, 255, .08)
            }
        }

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

        .chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 255, 255, .06);
            border: 1px solid rgba(227, 200, 142, .25);
            color: #E6E6E6;
            padding: 9px 15px;
            border-radius: 50px;
            font-size: .9rem
        }

        .chip i {
            color: var(--gold-lt)
        }

        .trail {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 10px 0;
            border-bottom: 1px dashed rgba(255, 255, 255, .12)
        }

        .trail:last-child {
            border-bottom: 0
        }

        .trail b {
            font-family: var(--ff-display);
            font-size: 1.8rem;
            color: var(--gold-lt);
            min-width: 92px;
            line-height: 1
        }

        .trail b small {
            font-size: .95rem
        }

        .trail-bar {
            flex: 1;
            height: 6px;
            border-radius: 6px;
            background: rgba(255, 255, 255, .08);
            overflow: hidden
        }

        .trail-bar span {
            display: block;
            height: 100%;
            background: linear-gradient(90deg, var(--gold-lt), var(--gold))
        }

        .trail em {
            font-style: normal;
            font-size: .86rem;
            min-width: 132px;
            text-align: right
        }

        @media(max-width:991px) {
            .life-intro {
                position: static
            }
        }

        @media(max-width:767px) {
            .life-card.tall {
                min-height: 400px
            }
        }

        @media(max-width:575px) {
            .trail {
                flex-wrap: wrap
            }

            .trail em {
                text-align: left;
                min-width: 0
            }

            .trail-bar {
                flex-basis: 100%;
                order: 3
            }
        }

        /* ================= AMENITIES ================= */
        .am-tabs {
            display: flex;
            justify-content: center;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 40px
        }

        .am-tab {
            display: flex;
            align-items: center;
            gap: 10px;
            background: rgba(255, 255, 255, .05);
            border: 1px solid rgba(255, 255, 255, .12);
            color: #DDDDDD;
            border-radius: 50px;
            padding: 10px 22px 10px 10px;
            font-weight: 600;
            transition: .25s
        }

        .am-tab i {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(227, 200, 142, .15);
            color: var(--gold-lt);
            display: grid;
            place-items: center
        }

        .am-tab.active,
        .am-tab:hover {
            background: var(--gold);
            border-color: var(--gold);
            color: var(--navy)
        }

        .am-tab.active i,
        .am-tab:hover i {
            background: var(--navy);
            color: var(--gold-lt)
        }

        .am-photo {
            position: relative;
            border-radius: var(--r-xl);
            overflow: hidden;
            min-height: 440px;
            height: 100%;
            background: var(--navy-2)
        }

        .am-photo img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover
        }

        .am-photo::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 55%, rgba(12, 12, 12, .85))
        }

        .am-photo .cap {
            position: absolute;
            left: 28px;
            bottom: 24px;
            z-index: 2
        }

        .am-photo .cap h3 {
            font-size: 2.3rem;
            margin: 0
        }

        .am-photo .cap span {
            color: var(--gold-lt);
            font-size: .92rem
        }

        .am-tile {
            background: rgba(255, 255, 255, .04);
            border: 1px solid rgba(255, 255, 255, .1);
            border-radius: var(--r-md);
            padding: 22px 18px;
            height: 100%;
            transition: border-color .25s, transform .25s
        }

        .am-tile:hover {
            border-color: rgba(227, 200, 142, .5);
            transform: translateY(-3px)
        }

        .am-tile i {
            font-size: 1.6rem;
            color: var(--gold-lt);
            display: block;
            margin-bottom: 10px
        }

        .am-tile span {
            color: #fff;
            font-weight: 600;
            font-size: .98rem
        }

        .am-tile.wide {
            display: flex;
            align-items: center;
            gap: 14px
        }

        .am-tile.wide i {
            margin: 0
        }

        .fade-swap {
            animation: fadeIn .45s ease
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(8px)
            }

            to {
                opacity: 1;
                transform: none
            }
        }

        @media(max-width:991px) {
            .am-photo {
                min-height: 300px
            }
        }

        /* ================= LOCATION (light) ================= */
        .loc-tabs {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px;
            margin-bottom: 32px
        }

        .loc-tab {
            display: flex;
            align-items: center;
            gap: 8px;
            background: #fff;
            border: 1.5px solid var(--line);
            color: var(--navy);
            border-radius: 50px;
            padding: 10px 20px;
            font-weight: 600;
            font-size: .93rem;
            transition: .2s
        }

        .loc-tab i {
            color: var(--gold-dk)
        }

        .loc-tab:hover {
            border-color: var(--gold)
        }

        .loc-tab.active {
            background: var(--navy);
            border-color: var(--navy);
            color: #fff
        }

        .loc-tab.active i {
            color: var(--gold-lt)
        }

        .map-card {
            border-radius: var(--r-xl);
            overflow: hidden;
            height: 100%;
            min-height: 540px;
            background: #fff;
            padding: 8px;
            box-shadow: var(--shadow-sm)
        }

        .map-card iframe {
            display: block;
            width: 100%;
            height: 100%;
            min-height: 524px;
            border: 0;
            border-radius: calc(var(--r-xl) - 8px)
        }

        .loc-panel {
            background: #fff;
            border-radius: var(--r-xl);
            box-shadow: var(--shadow-sm);
            height: 100%;
            display: flex;
            flex-direction: column;
            overflow: hidden
        }

        .loc-head {
            padding: 24px 26px 18px;
            display: flex;
            align-items: center;
            gap: 14px;
            border-bottom: 1px solid var(--line)
        }

        .loc-head .ic {
            width: 48px;
            height: 48px;
            border-radius: 14px;
            background: var(--gold-soft);
            color: var(--gold-dk);
            display: grid;
            place-items: center;
            font-size: 1.3rem;
            flex-shrink: 0
        }

        .loc-head h3 {
            font-size: 1.75rem;
            margin: 0;
            line-height: 1.1
        }

        .loc-head small {
            color: var(--muted);
            font-size: .85rem
        }

        .loc-items {
            list-style: none;
            margin: 0;
            padding: 6px 26px;
            flex: 1
        }

        .loc-row {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 14px 0
        }

        .loc-row+.loc-row {
            border-top: 1px dashed var(--line)
        }

        .loc-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--gold);
            flex-shrink: 0
        }

        .loc-name {
            flex: 1;
            color: var(--navy);
            font-weight: 500;
            font-size: .95rem;
            line-height: 1.4
        }

        .loc-km {
            flex-shrink: 0;
            font-family: var(--ff-body);
            font-weight: 700;
            font-size: .85rem;
            color: var(--navy);
            background: var(--gold-soft);
            border-radius: 50px;
            padding: 5px 12px;
            white-space: nowrap
        }

        .loc-foot {
            padding: 18px 26px;
            border-top: 1px solid var(--line)
        }

        @media(max-width:991px) {
            .map-card {
                min-height: 400px
            }

            .map-card iframe {
                min-height: 384px
            }
        }

        /* ================= CONNECTIVITY ================= */
        .conn-card {
            background: #fff;
            border-radius: var(--r-lg);
            overflow: hidden;
            height: 100%;
            box-shadow: var(--shadow-sm);
            display: flex;
            flex-direction: column;
            transition: transform .3s
        }

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

        .conn-img {
            position: relative;
            aspect-ratio: 16/11;
            overflow: hidden;
            background: linear-gradient(135deg, var(--navy-2), var(--navy-3))
        }

        .conn-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .6s
        }

        .conn-card:hover .conn-img img {
            transform: scale(1.07)
        }

        .conn-img::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(12, 12, 12, .1), rgba(12, 12, 12, .55))
        }

        .conn-time {
            position: absolute;
            right: 14px;
            top: 14px;
            z-index: 2;
            background: var(--gold);
            color: var(--navy);
            font-size: .8rem;
            font-weight: 700;
            padding: 6px 12px;
            border-radius: 50px;
            display: flex;
            align-items: center;
            gap: 6px
        }

        .conn-body {
            padding: 22px 22px 24px
        }

        .conn-body h3 {
            font-size: 1.5rem;
            margin-bottom: 8px
        }

        .conn-body p {
            margin: 0;
            font-size: .94rem
        }

        /* ================= FAQ ================= */
        .faq .accordion-item {
            border: 1px solid var(--line);
            border-radius: var(--r-md) !important;
            margin-bottom: 14px;
            overflow: hidden;
            background: #fff
        }

        .faq .accordion-button {
            font-weight: 600;
            color: var(--navy);
            padding: 20px 22px;
            background: #fff;
            box-shadow: none;
            font-size: 1rem;
            gap: 12px
        }

        .faq .accordion-button:not(.collapsed) {
            color: var(--gold-dk);
            background: #fff
        }

        .faq .accordion-button::after {
            background-image: none;
            content: "\F64D";
            font-family: 'bootstrap-icons';
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--gold-soft);
            color: var(--gold-dk);
            display: grid;
            place-items: center;
            font-size: 1rem;
            transform: none;
            flex-shrink: 0
        }

        .faq .accordion-button:not(.collapsed)::after {
            content: "\F63B";
            background: var(--navy);
            color: var(--gold-lt)
        }

        .faq .accordion-body {
            padding: 0 22px 20px;
            font-size: .96rem
        }

        /* ================= FINAL CTA ================= */
        .final {
            position: relative;
            padding: 100px 0;
            color: #fff;
            background: var(--navy) url('../assets/images/cta-bg.webp') center/cover
        }

        .final::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(12, 12, 12, .77) 0%, rgba(12, 12, 12, .68) 60%, rgba(12, 12, 12, .52))
        }

        .final .container {
            position: relative
        }

        .final h2 {
            color: #fff;
            font-size: clamp(2.2rem, 4.4vw, 3.4rem);
            margin-bottom: 8px
        }

        .final .sub {
            font-family: var(--ff-display);
            font-style: italic;
            font-size: 1.5rem;
            color: var(--gold-lt);
            margin-bottom: 26px
        }

        .receive-item {
            display: flex;
            align-items: center;
            gap: 12px;
            color: #E6E6E6;
            background: rgba(255, 255, 255, .05);
            border: 1px solid rgba(255, 255, 255, .1);
            border-radius: var(--r-sm);
            padding: 12px 14px;
            height: 100%
        }

        .receive-item i {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: var(--gold);
            color: var(--navy);
            display: grid;
            place-items: center;
            font-size: .85rem;
            flex-shrink: 0
        }

        /* ================= FOOTER ================= */
        footer {
            background: var(--navy);
            color: #9A9A9A;
            padding: 64px 0 0;
            font-size: .92rem
        }

        footer h4 {
            color: #fff;
            font-size: 1.35rem;
            margin-bottom: 16px
        }

        footer a {
            color: #9A9A9A
        }

        footer a:hover {
            color: var(--gold-lt)
        }

        .f-contact p {
            display: flex;
            gap: 12px;
            margin-bottom: 12px
        }

        .f-contact i {
            color: var(--gold-lt);
            margin-top: 2px
        }

        .f-links {
            list-style: none;
            padding: 0;
            margin: 0;
            /*columns: 2*/
        }

        .f-links li {
            margin-bottom: 10px
        }

        .disclaimer {
            border-top: 1px solid rgba(255, 255, 255, .07);
            margin-top: 44px;
            padding: 22px 0;
            font-size: .8rem;
            color: #7A7A7A
        }

        .copy {
            border-top: 1px solid rgba(255, 255, 255, .07);
            padding: 18px 0 90px;
            font-size: .82rem;
            text-align: center
        }

        @media(min-width:992px) {
            .copy {
                padding-bottom: 18px
            }
        }

        /* ================= DESKTOP WHATSAPP WIDGET ================= */
        .wa-widget {
            position: fixed;
            left: 24px;
            bottom: 24px;
            z-index: 1045
        }

        .wa-fab {
            display: flex;
            align-items: center;
            gap: 0;
            background: var(--wa);
            color: #fff;
            border: 0;
            border-radius: 50px;
            padding: 6px;
            box-shadow: 0 14px 30px -10px rgba(37, 211, 102, .7);
            transition: gap .3s, padding .3s;
            position: relative
        }

        .wa-fab .ic {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .18);
            display: grid;
            place-items: center;
            font-size: 1.6rem;
            position: relative
        }

        .wa-fab .ic::after {
            content: "";
            position: absolute;
            inset: -6px;
            border-radius: 50%;
            border: 2px solid var(--wa);
            animation: pulse 2s ease-out infinite
        }

        @keyframes pulse {
            from {
                transform: scale(.9);
                opacity: 1
            }

            to {
                transform: scale(1.35);
                opacity: 0
            }
        }

        .wa-fab .txt {
            max-width: 0;
            overflow: hidden;
            white-space: nowrap;
            font-weight: 600;
            text-align: left;
            transition: max-width .35s
        }

        .wa-fab .txt small {
            display: block;
            font-size: .72rem;
            font-weight: 500;
            opacity: .9
        }

        .wa-fab:hover,
        .wa-widget.open .wa-fab {
            gap: 12px;
            padding-right: 22px
        }

        .wa-fab:hover .txt,
        .wa-widget.open .wa-fab .txt {
            max-width: 200px
        }

        .wa-dot {
            position: absolute;
            top: 4px;
            left: 44px;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: #FF4D4F;
            border: 2px solid #fff
        }

        .wa-card {
            position: absolute;
            left: 0;
            bottom: 78px;
            width: 320px;
            background: #fff;
            border-radius: var(--r-lg);
            overflow: hidden;
            box-shadow: 0 30px 60px -20px rgba(12, 12, 12, .55);
            opacity: 0;
            transform: translateY(12px) scale(.97);
            transform-origin: bottom left;
            pointer-events: none;
            transition: .28s
        }

        .wa-widget.open .wa-card {
            opacity: 1;
            transform: none;
            pointer-events: auto
        }

        .wa-head {
            background: #075E54;
            color: #fff;
            padding: 16px 18px;
            display: flex;
            align-items: center;
            gap: 12px
        }

        .wa-av {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: var(--gold);
            color: var(--navy);
            display: grid;
            place-items: center;
            font-family: var(--ff-display);
            font-weight: 700;
            font-size: 1.2rem;
            position: relative
        }

        .wa-av::after {
            content: "";
            position: absolute;
            right: 0;
            bottom: 2px;
            width: 11px;
            height: 11px;
            border-radius: 50%;
            background: var(--wa);
            border: 2px solid #075E54
        }

        .wa-head b {
            display: block;
            font-size: .98rem
        }

        .wa-head small {
            opacity: .85;
            font-size: .78rem
        }

        .wa-head button {
            margin-left: auto;
            background: none;
            border: 0;
            color: #fff;
            font-size: 1.1rem
        }

        .wa-chat {
            padding: 18px;
            background: #ECE5DD
        }

        .wa-bubble {
            background: #fff;
            border-radius: 0 12px 12px 12px;
            padding: 12px 14px;
            font-size: .9rem;
            color: #303030;
            max-width: 92%;
            box-shadow: 0 1px 1px rgba(0, 0, 0, .08)
        }

        .wa-bubble small {
            display: block;
            text-align: right;
            color: #999;
            font-size: .7rem;
            margin-top: 4px
        }

        .wa-quick {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 14px 18px 18px
        }

        .wa-quick a {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border: 1px solid var(--line);
            border-radius: 50px;
            padding: 9px 16px;
            color: var(--navy);
            font-size: .88rem;
            font-weight: 500;
            transition: .2s
        }

        .wa-quick a:hover {
            border-color: var(--wa);
            color: #075E54;
            background: #F1FBF4
        }

        .wa-quick .go {
            background: var(--wa);
            color: #fff;
            border-color: var(--wa);
            justify-content: center;
            gap: 8px;
            font-weight: 600
        }

        .wa-quick .go:hover {
            background: #1EBE5A;
            color: #fff
        }

        .float-enq {
            position: fixed;
            right: 24px;
            bottom: 24px;
            z-index: 1040
        }

        /* Mobile bottom bar */
        .mobile-bar {
            display: none
        }

        @media(max-width:991px) {

            .wa-widget,
            .float-enq {
                display: none
            }

            .mobile-bar {
                display: flex;
                position: fixed;
                inset: auto 0 0 0;
                z-index: 1040;
                background: var(--navy);
                border-top: 1px solid rgba(227, 200, 142, .2)
            }

            .mobile-bar>* {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 2px;
                padding: 10px 0;
                color: #fff;
                font-size: .78rem;
                font-weight: 600;
                background: none;
                border: 0
            }

            .mobile-bar i {
                font-size: 1.2rem;
                color: var(--gold-lt)
            }

            .mobile-bar .wa i {
                color: var(--wa)
            }

            .mobile-bar .hl {
                flex: 1.3;
                background: var(--gold);
                color: var(--navy)
            }

            .mobile-bar .hl i {
                color: var(--navy)
            }
        }

        /* Modal */
        .modal-content {
            border: 0;
            border-radius: var(--r-lg);
            overflow: hidden
        }

        .modal-body {
            padding: 0
        }

        .modal .form-card {
            box-shadow: none;
            border-radius: 0
        }

        .modal .btn-close {
            position: absolute;
            right: 18px;
            top: 20px;
            z-index: 5
        }

        /* Hero entrance */
        .hero-anim>* {
            opacity: 0;
            transform: translateY(18px);
            animation: rise .8s ease forwards
        }

        .hero-anim>*:nth-child(2) {
            animation-delay: .1s
        }

        .hero-anim>*:nth-child(3) {
            animation-delay: .2s
        }

        .hero-anim>*:nth-child(4) {
            animation-delay: .3s
        }

        .hero-anim>*:nth-child(5) {
            animation-delay: .4s
        }

        .hero-anim>*:nth-child(6) {
            animation-delay: .5s
        }

        .hero-anim>*:nth-child(7) {
            animation-delay: .6s
        }

        .hero-anim>*:nth-child(8) {
            animation-delay: .7s
        }

        @keyframes rise {
            to {
                opacity: 1;
                transform: none
            }
        }

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

            *,
            *::before,
            *::after {
                animation: none !important;
                transition: none !important
            }

            .hero-anim>* {
                opacity: 1;
                transform: none
            }
        }