:root {
     --gold: #C5A55A;
     --gold-light: #D4BC7C;
     --gold-dark: #A8893D;
     --burgundy: #8B1A2B;
     --burgundy-dark: #6E1422;
     --navy: #1A1F2E;
     --navy-light: #2A3042;
     --cream: #FAF8F5;
     --cream-dark: #F0EDE7;
     --sand: #E8DFD0;
     --charcoal: #2C2C2C;
     --text-primary: #0F1420;
     --text-secondary: #3D414C;
     --text-light: #6B6E78;
     --white: #FFFFFF;
     --border: rgba(197, 165, 90, 0.22);
     --border-soft: rgba(26, 31, 46, 0.08);
     --shadow-soft: 0 4px 30px rgba(26, 31, 46, 0.06);
     --shadow-med: 0 8px 40px rgba(26, 31, 46, 0.1);
     --shadow-lg: 0 20px 60px rgba(26, 31, 46, 0.16);
     --transition: cubic-bezier(0.4, 0, 0.2, 1);
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
.disabled {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
    display:none!important
}
 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: 'Nunito Sans', sans-serif;
     font-weight: 400;
     color: var(--text-primary);
     background: var(--cream);
     line-height: 1.7;
     overflow-x: hidden;
     -webkit-font-smoothing: antialiased;
 }

 body.villa-popup-open {
     overflow: hidden;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-family: 'Cormorant Garamond', serif;
     font-weight: 400;
     line-height: 1.2;
 }

 img {
     max-width: 100%;
     display: block;
 }

 a {
     color: inherit;
 }

 /* ===== HEADER ===== */
 .header {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 1000;
     background: rgba(255, 255, 255, 0.96);
     backdrop-filter: blur(10px);
     border-bottom: 1px solid var(--border-soft);
     padding: 0 60px;
     transition: box-shadow 0.4s var(--transition);
 }

 .header.scrolled {
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
 }

 .header-inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 88px;
     max-width: 1480px;
     margin: 0 auto;
 }

 .logo {
     display: flex;
     align-items: center;
     gap: 22px;
     text-decoration: none;
     flex-shrink: 0;
 }

 /* ===== TYPESET CHRISTIE'S LOGO ===== */
 .logo-christies {
     display: inline-flex;
     flex-direction: column;
     align-items: center;
     gap: 0;
     line-height: 1;
     color: var(--burgundy);
     text-decoration: none;
 }

 .logo-christies-mark {
     font-family: 'Cormorant Garamond', serif;
     font-weight: 700;
     font-size: 34px;
     letter-spacing: 1.5px;
     color: inherit;
     line-height: 0.95;
 }

 /* Stack: subline + rule line up to the same width */
 .logo-christies-stack {
     display: flex;
     flex-direction: column;
     align-items: stretch;
     gap: 3px;
     margin-top: 2px;
     width: max-content;
 }

 .logo-christies-sub {
     font-family: 'Nunito Sans', sans-serif;
     font-weight: 600;
     font-size: 8.5px;
     letter-spacing: 1.4px;
     text-transform: uppercase;
     color: inherit;
     white-space: nowrap;
     text-align: center;
 }

 .logo-christies-rule {
     display: flex;
     align-items: center;
     gap: 6px;
     width: 100%;
     justify-content: center;
 }

 .logo-christies-rule::before,
 .logo-christies-rule::after {
     content: '';
     flex: 1;
     height: 1px;
     background: currentColor;
     opacity: 0.85;
 }

 .logo-christies-singapore {
     font-family: 'Nunito Sans', sans-serif;
     font-weight: 600;
     font-size: 8px;
     letter-spacing: 1.6px;
     text-transform: uppercase;
     color: inherit;
     white-space: nowrap;
     padding: 0 4px;
 }

 /* ===== TYPESET SAMARA LOMBOK LOGO ===== */
 .logo-samara {
     display: inline-flex;
     flex-direction: column;
     align-items: center;
     gap: 2px;
     line-height: 1;
     color: #4a5d3a;
     /* dark olive green from the brand mark */
     text-decoration: none;
 }

 .logo-samara-mark {
     font-family: 'Cormorant Garamond', serif;
     font-weight: 500;
     font-size: 26px;
     letter-spacing: 6px;
     color: inherit;
     padding-left: 6px;
     /* visually centers wide letterspacing */
 }

 .logo-samara-sub {
     font-family: 'Nunito Sans', sans-serif;
     font-weight: 500;
     font-size: 8px;
     letter-spacing: 4px;
     text-transform: uppercase;
     color: inherit;
     padding-left: 4px;
 }

 .logo-divider-pipe {
     display: inline-block;
     width: 1px;
     height: 42px;
     background: var(--border-soft);
 }

 .logo-main {
     font-family: 'Cormorant Garamond', serif;
     font-weight: 600;
     font-size: 26px;
     letter-spacing: 2px;
     color: var(--burgundy);
     line-height: 1.1;
 }

 .logo-sub {
     font-size: 8.5px;
     letter-spacing: 2.2px;
     text-transform: uppercase;
     color: var(--burgundy);
     font-weight: 600;
     line-height: 1.3;
 }

 .logo-divider {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 9px;
     letter-spacing: 2.5px;
     color: #666;
     font-weight: 500;
     margin-top: 3px;
 }

 .logo-dash {
     display: inline-block;
     width: 24px;
     height: 1px;
     background: #999;
 }

 .nav-links {
     display: flex;
     align-items: center;
     gap: 28px;
     list-style: none;
 }

 .nav-links a {
     font-size: 13px;
     letter-spacing: 0.3px;
     text-decoration: none;
     color: var(--text-primary);
     font-weight: 500;
     transition: color 0.3s var(--transition);
     position: relative;
    padding-top: 7px; padding-bottom: 7px;
 }

 .nav-links a:hover {
     color: var(--burgundy);
 }

 .nav-links a::after {
     content: '';
     position: absolute;
     bottom: -2px;
     left: 0;
     width: 0;
     height: 1px;
     background: var(--burgundy);
     transition: width 0.3s var(--transition);
 }

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

 .nav-cta {
     padding: 10px 26px;
     border: 1px solid var(--text-primary);
     font-size: 10px;
     letter-spacing: 2.5px;
     text-transform: uppercase;
     font-weight: 700;
     color: var(--text-primary) !important;
     transition: all 0.3s var(--transition);
     text-decoration: none;
 }

 .nav-cta:hover {
     background: var(--burgundy);
     border-color: var(--burgundy);
     color: var(--white) !important;
 }

 .menu-toggle {
     display: none;
     flex-direction: column;
     gap: 5px;
     cursor: pointer;
     padding: 10px;
     z-index: 1001;
 }

 .menu-toggle span {
     width: 24px;
     height: 1.5px;
     background: var(--text-primary);
     transition: all 0.3s var(--transition);
 }

 /* ===== HERO ===== */
 .hero {
     position: relative;
     height: 100vh;
     min-height: 720px;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     overflow: hidden;
     background: #0a1420;
 }

 .hero-video {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     z-index: 0;
 }

 .hero-poster {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     z-index: 0;
     animation: heroKenBurns 28s ease-in-out infinite alternate;
 }

 @keyframes heroKenBurns {
     0% {
         transform: scale(1.05) translate(0, 0);
     }

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

 .hero-overlay {
     position: absolute;
     inset: 0;
     z-index: 1;
     background: linear-gradient(180deg, rgba(10, 15, 25, 0.45) 0%, rgba(10, 15, 25, 0.25) 35%, rgba(10, 15, 25, 0.7) 100%);
     pointer-events: none;
 }

 .hero-grain {
     position: absolute;
     inset: 0;
     z-index: 1;
     background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
     pointer-events: none;
 }

 .hero-placeholder-tag {
     position: absolute;
     top: 110px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 3;
     font-size: 9px;
     letter-spacing: 3px;
     text-transform: uppercase;
     color: rgba(255, 255, 255, 0.55);
     font-weight: 600;
     padding: 6px 14px;
     border: 1px dashed rgba(255, 255, 255, 0.3);
     border-radius: 2px;
 }

 .hero-content {
     position: relative;
     z-index: 2;
     max-width: 1000px;
     padding: 0 40px;
     animation: fadeUp 1.4s var(--transition) both;
 }

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

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

 .hero-logo {
     margin-bottom: 36px;
     display: inline-flex;
     flex-direction: column;
     align-items: center;
     gap: 6px;
     color: var(--white);
     line-height: 1;
     text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
 }

 .hero-samara-mark {
     font-family: 'Cormorant Garamond', serif;
     font-weight: 500;
     font-size: clamp(38px, 4.4vw, 60px);
     letter-spacing: 14px;
     color: inherit;
     padding-left: 14px;
 }

 .hero-samara-sub {
     font-family: 'Nunito Sans', sans-serif;
     font-weight: 500;
     font-size: clamp(11px, 0.95vw, 13px);
     letter-spacing: 7px;
     text-transform: uppercase;
     color: inherit;
     padding-left: 7px;
 }

 .hero-eyebrow {
     font-size: 11px;
     letter-spacing: 4px;
     text-transform: uppercase;
     color: #fff;
     font-weight: 700;
     margin-bottom: 28px;
     display: inline-block;
     padding: 9px 22px;
     background: rgba(255, 255, 255, 0.13);
     border: 1px solid rgba(255, 255, 255, 0.28);
     backdrop-filter: blur(10px);
 }

 .hero h1 {
     font-size: clamp(40px, 5.6vw, 80px);
     color: var(--white);
     font-weight: 300;
     margin-bottom: 32px;
     letter-spacing: -0.5px;
     text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
 }

 .hero h1 em {
     font-style: italic;
     color: var(--gold-light);
     font-weight: 300;
 }

 .hero-tagline {
     font-family: 'Cormorant Garamond', serif;
     font-style: italic;
     font-size: clamp(18px, 1.6vw, 22px);
     color: rgba(255, 255, 255, 0.95);
     max-width: 720px;
     margin: 0 auto 44px;
     line-height: 1.5;
     font-weight: 400;
     text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
 }

 .hero-actions {
     display: flex;
     gap: 16px;
     justify-content: center;
     flex-wrap: wrap;
 }

 .btn {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 15px 36px;
     font-family: 'Nunito Sans', sans-serif;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 2.5px;
     text-transform: uppercase;
     text-decoration: none;
     cursor: pointer;
     border: none;
     transition: all 0.35s var(--transition);
 }

 .btn-primary {
     background: var(--gold);
     color: var(--navy);
 }

 .btn-primary:hover {
     background: var(--gold-dark);
     transform: translateY(-2px);
     box-shadow: 0 8px 30px rgba(197, 165, 90, 0.4);
 }

 .btn-outline {
     background: transparent;
     color: var(--white);
     border: 1px solid rgba(255, 255, 255, 0.4);
 }

 .btn-outline:hover {
     border-color: var(--gold);
     color: var(--gold);
     background: rgba(255, 255, 255, 0.05);
 }

 .btn-dark {
     background: var(--navy);
     color: var(--white);
 }

 .btn-dark:hover {
     background: var(--burgundy);
     transform: translateY(-2px);
     box-shadow: var(--shadow-med);
 }

 .btn-ghost {
     background: transparent;
     color: var(--navy);
     border: 1px solid var(--navy);
 }

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

 .scroll-indicator {
     position: absolute;
     bottom: 36px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 2;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 8px;
     animation: float 3s ease-in-out infinite;
 }

 @keyframes float {

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

     50% {
         transform: translateX(-50%) translateY(8px);
     }
 }

 .scroll-indicator span {
     font-size: 9px;
     letter-spacing: 3px;
     text-transform: uppercase;
     color: rgba(255, 255, 255, 0.65);
     font-weight: 600;
 }

 .scroll-line {
     width: 1px;
     height: 40px;
     background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55), transparent);
 }

 /* ===== SECTION SYSTEM ===== */
 .section {
     padding: 120px 60px;
 }

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

 .section-wide {
     max-width: 1480px;
     margin: 0 auto;
 }

 .section-eyebrow {
     font-size: 10px;
     letter-spacing: 4px;
     text-transform: uppercase;
     color: var(--gold-dark);
     font-weight: 700;
     margin-bottom: 18px;
 }

 .section-title {
     font-size: clamp(30px, 3.6vw, 52px);
     color: var(--text-primary);
     margin-bottom: 26px;
     font-weight: 300;
 }

 .section-title em {
     font-style: italic;
     color: var(--burgundy);
     font-weight: 300;
 }

 .section-description {
     font-size: 16.5px;
     color: var(--text-secondary);
     max-width: 720px;
     line-height: 1.85;
     font-weight: 400;
 }

 .section-description+.section-description {
     margin-top: 18px;
 }

 .section-dark {
     background: var(--navy);
     color: var(--white);
 }

 .section-dark .section-title {
     color: var(--white);
 }

 .section-dark .section-title em {
     color: var(--gold-light);
 }

 .section-dark .section-description {
     color: rgba(255, 255, 255, 0.78);
 }

 .section-dark .section-eyebrow {
     color: var(--gold);
 }

 .section-cream {
     background: var(--cream-dark);
 }

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

 .section-header-center .section-description {
     margin-left: auto;
     margin-right: auto;
 }

 .gold-rule {
     width: 48px;
     height: 1px;
     background: var(--gold);
     margin: 0 0 22px 0;
 }

 .section-header-center .gold-rule {
     margin: 0 auto 22px;
 }

 /* ===== TAGLINE BAND ===== */
 .tagline-band {
     background: var(--cream);
     padding: 80px 60px;
     text-align: center;
     border-top: 1px solid var(--border);
     border-bottom: 1px solid var(--border);
 }

 .tagline-band-inner {
     max-width: 900px;
     margin: 0 auto;
 }

 .tagline-location {
     font-size: 11px;
     letter-spacing: 5px;
     text-transform: uppercase;
     color: var(--gold-dark);
     font-weight: 700;
     margin-bottom: 18px;
 }

 .tagline-quote {
     font-family: 'Cormorant Garamond', serif;
     font-style: italic;
     font-size: clamp(24px, 3vw, 38px);
     color: var(--navy);
     line-height: 1.4;
     font-weight: 400;
     margin-bottom: 14px;
 }

 .tagline-quote::before,
 .tagline-quote::after {
     content: '"';
     color: var(--gold);
     font-weight: 600;
 }

 .tagline-sub {
     font-family: 'Cormorant Garamond', serif;
     font-style: italic;
     font-size: clamp(15px, 1.4vw, 18px);
     color: var(--text-secondary);
 }

 /* ===== STATS BAND ===== */
 .stats-band {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     background: var(--navy);
 }

 .stat {
     padding: 56px 32px;
     text-align: center;
     border-right: 1px solid rgba(255, 255, 255, 0.08);
     color: var(--white);
 }

 .stat:last-child {
     border-right: none;
 }

 .stat-num {
     font-family: 'Cormorant Garamond', serif;
     font-size: clamp(36px, 4vw, 56px);
     color: var(--gold-light);
     font-weight: 400;
     line-height: 1;
     margin-bottom: 10px;
 }

 .stat-label {
     font-size: 11px;
     letter-spacing: 2.5px;
     text-transform: uppercase;
     color: rgba(255, 255, 255, 0.78);
     font-weight: 600;
 }

 /* ===== REASONS TO INVEST (V2) ===== */
 .reasons-section {
     background: var(--cream);
     padding: 120px 60px;
 }

 .reasons-inner {
     max-width: 1200px;
     margin: 0 auto;
 }

 .reasons-section .section-title {
     font-family: 'Cormorant Garamond', serif;
     font-style: italic;
     font-weight: 400;
     color: var(--navy);
 }

 .reasons-section .section-title em {
     color: var(--navy);
 }

 .reasons-grid {
     display: flex;
     flex-direction: column;
     gap: 28px;
     margin-top: 56px;
 }

 .reasons-row {
     display: grid;
     gap: 28px;
 }

 .reasons-row-top {
     grid-template-columns: repeat(3, 1fr);
 }

 .reasons-row-bottom {
     grid-template-columns: repeat(2, 1fr);
     max-width: calc(66.666% - 9.333px);
     /* width of 2 cards + 1 gap from a 3-col grid */
     margin: 0 auto;
 }

 .reason-card {
     background: var(--white);
     border: 1px solid var(--border);
     padding: 38px 32px;
     text-align: center;
     transition: all 0.4s var(--transition);
 }

 .reason-card:hover {
     transform: translateY(-4px);
     box-shadow: var(--shadow-med);
     border-color: var(--gold);
 }

 .reason-card h4 {
     font-family: 'Cormorant Garamond', serif;
     font-size: 22px;
     color: var(--navy);
     margin-bottom: 18px;
     font-weight: 500;
 }

 .reason-card p {
     font-size: 14.5px;
     color: var(--text-secondary);
     line-height: 1.7;
 }

 /* ===== LOMBOK MAPS (TWO STACKED) ===== */
 .lombok-maps {
     display: flex;
     flex-direction: column;
     gap: 28px;
     width: 100%;
 }

 .lombok-map-fig {
     margin: 0;
     background: var(--cream);
     padding: 18px 18px 14px;
     border: 1px solid var(--border);
     transition: box-shadow 0.4s var(--transition);
 }

 .lombok-map-fig:hover {
     box-shadow: var(--shadow-soft);
 }

 .lombok-map-fig img {
     width: 100%;
     height: auto;
     display: block;
 }

 .lombok-map-fig figcaption {
     margin-top: 14px;
     padding-top: 12px;
     border-top: 1px solid var(--border);
     font-family: 'Cormorant Garamond', serif;
     font-style: italic;
     font-size: 14px;
     color: var(--text-secondary);
     text-align: center;
     letter-spacing: 0.3px;
 }

 /* ===== INVESTMENT HIGHLIGHTS (V2 BULLETED LIST) ===== */
 .investment-section {
     background: var(--cream-dark);
 }

 .section-header-left {
     text-align: left;
     margin-bottom: 56px;
     max-width: 900px;
 }

 .section-header-left .section-title {
     font-size: clamp(28px, 3.2vw, 44px);
     line-height: 1.25;
     margin-bottom: 0;
 }

 .investment-list {
     list-style: none;
     padding: 0;
     margin: 0 0 56px 0;
     column-count: 2;
     column-gap: 56px;
     max-width: 1100px;
 }

 .investment-list li {
     position: relative;
     padding: 18px 0 18px 36px;
     font-size: 15.5px;
     line-height: 1.65;
     color: var(--text-secondary);
     border-bottom: 1px solid var(--border);
     break-inside: avoid;
     page-break-inside: avoid;
 }

 .investment-list li::before {
     content: '';
     position: absolute;
     left: 0;
     top: 28px;
     width: 18px;
     height: 1px;
     background: var(--gold);
 }

 .investment-list li strong {
     color: var(--text-primary);
     font-weight: 600;
     display: inline;
 }

 .investment-cta {
     text-align: left;
     max-width: 1100px;
 }

 /* ===== OPPORTUNITY (legacy 12-ICON GRID — kept for fallback only) ===== */
 .opportunity-section {
     background: var(--cream-dark);
 }

 .opp-icon-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 56px 48px;
     margin-bottom: 64px;
 }

 .opp-icon-cell {
     text-align: center;
     transition: transform 0.4s var(--transition);
 }

 .opp-icon-cell:hover {
     transform: translateY(-4px);
 }

 .opp-icon {
     width: 72px;
     height: 72px;
     margin: 0 auto 22px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--gold-dark);
     transition: color 0.3s var(--transition);
 }

 .opp-icon-cell:hover .opp-icon {
     color: var(--burgundy);
 }

 .opp-icon svg {
     width: 100%;
     height: 100%;
     fill: none;
     stroke: currentColor;
     stroke-width: 1.5;
     stroke-linecap: round;
     stroke-linejoin: round;
 }

 .opp-icon-cell h4 {
     font-family: 'Cormorant Garamond', serif;
     font-size: 18px;
     font-weight: 500;
     color: var(--text-primary);
     line-height: 1.35;
     max-width: 220px;
     margin: 0 auto;
 }

 /* ===== OPPORTUNITY GRID (legacy 9-card — kept for reference) ===== */
 .opportunity-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 28px;
     margin-bottom: 56px;
 }

 .opp-card {
     background: var(--white);
     padding: 38px 30px;
     border: 1px solid var(--border);
     transition: all 0.4s var(--transition);
     position: relative;
 }

 .opp-card:hover {
     transform: translateY(-4px);
     box-shadow: var(--shadow-med);
     border-color: var(--gold);
 }

 .opp-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 40px;
     height: 2px;
     background: var(--gold);
 }

 .opp-num {
     font-family: 'Cormorant Garamond', serif;
     font-style: italic;
     font-size: 32px;
     color: var(--gold);
     font-weight: 400;
     margin-bottom: 14px;
     display: block;
     line-height: 1;
 }

 .opp-card h4 {
     font-size: 22px;
     margin-bottom: 12px;
     font-weight: 500;
     color: var(--navy);
 }

 .opp-card p {
     font-size: 14.5px;
     color: var(--text-secondary);
     line-height: 1.75;
     font-weight: 400;
 }

 .opp-card-feature {
     background: var(--navy);
     color: var(--white);
 }

 .opp-card-feature h4 {
     color: var(--white);
 }

 .opp-card-feature p {
     color: rgba(255, 255, 255, 0.78);
 }

 .opp-card-feature .opp-num {
     color: var(--gold-light);
 }

 .opp-card-feature::before {
     background: var(--gold-light);
 }

 .opportunity-cta {
     text-align: center;
 }

 /* ===== INTRO / WHY GRID ===== */
 .intro-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 100px;
     align-items: center;
 }

 .intro-image-wrap {
     position: relative;
 }

 .intro-image {
     aspect-ratio: 4/5;
     width: 100%;
     overflow: hidden;
     position: relative;
 }

 .intro-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.8s var(--transition);
 }

 .intro-image:hover img {
     transform: scale(1.04);
 }

 .intro-image-stamp {
     position: absolute;
     bottom: -32px;
     right: -32px;
     background: var(--gold);
     color: var(--navy);
     padding: 28px 36px;
     z-index: 3;
     box-shadow: var(--shadow-lg);
     max-width: 250px;
 }

 .intro-image-stamp.stamp-burgundy {
     background: var(--burgundy);
     color: var(--white);
 }

 .intro-image-stamp .stamp-num {
     font-family: 'Cormorant Garamond', serif;
     font-size: 44px;
     font-weight: 500;
     line-height: 1;
     margin-bottom: 4px;
 }

 .intro-image-stamp .stamp-label {
     font-size: 10px;
     letter-spacing: 2.5px;
     text-transform: uppercase;
     font-weight: 700;
 }

 .intro-flip {
     direction: rtl;
 }

 .intro-flip>* {
     direction: ltr;
 }

 /* ===== PROPERTY OVERVIEW MAP ===== */
 /* ===== OWNERSHIP SECTION (PROPERTY OVERVIEW + TWO PATHS) ===== */
 .ownership-section {
     padding: 0;
 }

 .map-section-inner {
     background: var(--navy);
     color: var(--white);
     padding: 0;
 }

 .map-section {
     background: var(--navy);
     padding: 0;
     color: var(--white);
 }

 .map-header {
     text-align: center;
     padding: 110px 60px 60px;
     max-width: 900px;
     margin: 0 auto;
 }

 .map-header .section-title {
     color: var(--white);
 }

 .map-header .section-title em {
     color: var(--gold-light);
 }

 .map-header .section-description {
     color: rgba(255, 255, 255, 0.78);
     margin: 0 auto;
 }

 .map-header .section-eyebrow {
     color: var(--gold);
 }

 .map-image-wrap {
     width: 100%;
     background: #000;
     overflow: hidden;
     position: relative;
 }

 .map-image-wrap img {
     width: 100%;
     display: block;
 }

 .map-zones {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     background: var(--navy);
     border-top: 1px solid rgba(255, 255, 255, 0.08);
 }

 .map-zone {
     padding: 56px 40px;
     border-right: 1px solid rgba(255, 255, 255, 0.08);
     text-align: center;
 }

 .map-zone:last-child {
     border-right: none;
 }

 .map-zone-num {
     font-family: 'Cormorant Garamond', serif;
     font-style: italic;
     font-size: 18px;
     color: var(--gold-light);
     margin-bottom: 6px;
 }

 .map-zone h4 {
     font-size: 28px;
     color: var(--white);
     margin-bottom: 14px;
     font-weight: 400;
 }

 .map-zone p {
     font-size: 14px;
     color: rgba(255, 255, 255, 0.78);
     line-height: 1.7;
 }

 /* ===== ROTATING VIEWS GALLERY ===== */
 .views-gallery {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 4px;
     margin-top: 64px;
 }

 .view-tile {
     position: relative;
     aspect-ratio: 3/4;
     overflow: hidden;
     background: var(--cream-dark);
 }

 /* Carousel container fills the tile image area */
 .view-carousel {
     position: absolute;
     inset: 0;
     z-index: 1;
 }

 .view-carousel-track {
     position: absolute;
     inset: 0;
 }

 .view-carousel-img {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.7s ease, transform 8s ease;
     transform: scale(1.0);
 }

 .view-carousel-img.is-active {
     opacity: 1;
     visibility: visible;
     transform: scale(1.04);
     /* gentle Ken Burns while visible */
 }

 /* Hover scale on whole carousel — disabled because it conflicts with Ken Burns */
 .view-tile:hover .view-carousel-img.is-active {
     transform: scale(1.06);
 }

 /* Arrow buttons */
 .view-carousel-arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 44px;
     height: 44px;
     background: rgba(255, 255, 255, 0.18);
     border: 1px solid rgba(255, 255, 255, 0.4);
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
     color: var(--white);
     border-radius: 50%;
     cursor: pointer;
     z-index: 5;
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     transition: opacity 0.3s var(--transition), background 0.3s var(--transition), transform 0.3s var(--transition);
 }

 .view-tile:hover .view-carousel-arrow,
 .view-tile:focus-within .view-carousel-arrow {
     opacity: 1;
 }

 .view-carousel-arrow:hover {
     background: var(--white);
     color: var(--navy);
     transform: translateY(-50%) scale(1.08);
 }

.view-carousel-arrow img {
    width: 18px;
    height: 18px;
}

 .view-carousel-prev {
     left: 14px;
 }

 .view-carousel-next {
     right: 14px;
 }

 /* Dots — sit inside the text overlay below the description */
 .view-carousel-dots {
     display: flex;
     gap: 8px;
     margin-top: 18px;
     z-index: 6;
 }

 .view-carousel-dot {
     width: 22px;
     height: 2px;
     background: rgba(255, 255, 255, 0.4);
     border: none;
     padding: 0;
     cursor: pointer;
     transition: background 0.3s var(--transition), width 0.3s var(--transition);
 }

 .view-carousel-dot:hover {
     background: rgba(255, 255, 255, 0.7);
 }

 .view-carousel-dot.is-active {
     background: var(--gold-light);
     width: 32px;
 }

 .view-tile-content {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: 4;
     color: var(--white);
     padding: 32px 28px 30px;
     text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
 }

 .view-tile-num {
     font-family: 'Cormorant Garamond', serif;
     font-style: italic;
     font-size: 14px;
     color: var(--gold-light);
     margin-bottom: 6px;
 }

 .view-tile-name {
     font-family: 'Cormorant Garamond', serif;
     font-size: 32px;
     font-weight: 400;
     margin-bottom: 12px;
     line-height: 1.1;
 }

 .view-tile-desc {
     font-size: 13px;
     line-height: 1.6;
     color: rgba(255, 255, 255, 0.92);
     max-width: 320px;
 }

 .view-tile-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(180deg, transparent 35%, rgba(15, 20, 32, 0.4) 60%, rgba(15, 20, 32, 0.85) 100%);
     z-index: 3;
 }

 /* ===== STANDALONE AERIAL MASTERPLAN ===== */
 .aerial-section {
     background: var(--navy);
     padding: 0;
 }

 .aerial-image-wrap {
     width: 100%;
     line-height: 0;
 }

 .aerial-image-wrap img {
     width: 100%;
     height: auto;
     display: block;
 }

 /* ===== LIFESTYLE / F&B BAND ===== */
 .lifestyle-section {
     background: var(--cream);
     padding: 120px 60px;
 }

 .lifestyle-grid {
     max-width: 1480px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1.05fr 1fr 1fr;
     gap: 24px;
 }

 .lifestyle-tile {
     position: relative;
     overflow: hidden;
     min-height: 480px;
 }

 .lifestyle-tile.tile-tall {
     grid-row: span 2;
     min-height: 600px;
 }

 .lifestyle-tile img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     position: absolute;
     inset: 0;
     transition: transform 0.8s var(--transition);
 }

 .lifestyle-tile:hover img {
     transform: scale(1.05);
 }

 .lifestyle-tile-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(180deg, transparent 50%, rgba(15, 20, 32, 0.75) 100%);
     z-index: 2;
 }

 .lifestyle-tile-content {
     position: absolute;
     bottom: 32px;
     left: 32px;
     right: 32px;
     z-index: 3;
     color: var(--white);
 }

 .lifestyle-tile-eyebrow {
     font-size: 9px;
     letter-spacing: 3px;
     text-transform: uppercase;
     color: var(--gold-light);
     font-weight: 700;
     margin-bottom: 8px;
 }

 .lifestyle-tile-title {
     font-family: 'Cormorant Garamond', serif;
     font-size: 26px;
     font-weight: 400;
     margin-bottom: 6px;
 }

 .lifestyle-tile-sub {
     font-size: 13px;
     color: rgba(255, 255, 255, 0.88);
     line-height: 1.6;
     font-weight: 400;
 }

 /* ===== WELLNESS BAND ===== */
 .wellness-section {
     background: var(--navy);
     color: var(--white);
     padding: 0;
     overflow: hidden;
 }

 .wellness-grid {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     gap: 0;
     align-items: stretch;
     min-height: 720px;
 }

 .wellness-image {
     position: relative;
     overflow: hidden;
     background: #000;
 }

 .wellness-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 1s var(--transition);
 }

 .wellness-image:hover img {
     transform: scale(1.04);
 }

 .wellness-text {
     padding: 100px 56px;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .wellness-text .section-eyebrow {
     color: var(--gold);
 }

 .wellness-text h2 {
     font-size: clamp(34px, 3.4vw, 48px);
     color: var(--white);
     font-weight: 300;
     margin-bottom: 24px;
     line-height: 1.15;
 }

 .wellness-text h2 em {
     font-style: italic;
     color: var(--gold-light);
 }

 .wellness-text p {
     font-size: 16px;
     color: rgba(255, 255, 255, 0.78);
     line-height: 1.85;
     margin-bottom: 16px;
 }

 .wellness-quote {
     margin-top: 28px;
     padding-top: 28px;
     border-top: 1px solid rgba(255, 255, 255, 0.15);
     font-family: 'Cormorant Garamond', serif;
     font-style: italic;
     font-size: 19px;
     color: var(--gold-light);
     line-height: 1.5;
 }

 /* ===== SUSTAINABILITY SECTION ===== */
 .sustainability-section {
     background: var(--cream);
     padding: 120px 60px;
 }

 .sustain-header {
     max-width: 1200px;
     margin: 0 auto 64px;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 80px;
     align-items: end;
 }

 .sustain-header-left {
     max-width: 540px;
 }

 .sustain-header-right {
     font-family: 'Cormorant Garamond', serif;
     font-style: italic;
     font-size: clamp(20px, 1.8vw, 26px);
     color: var(--text-secondary);
     line-height: 1.5;
     padding-left: 32px;
     border-left: 2px solid var(--gold);
 }

 .sustain-grid {
     max-width: 1480px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1.3fr 1fr 1fr;
     grid-template-rows: 1fr 1fr;
     gap: 16px;
     min-height: 640px;
 }

 .sustain-tile {
     position: relative;
     overflow: hidden;
     background: var(--cream-dark);
 }

 .sustain-tile.tile-feature {
     grid-row: span 2;
 }

 .sustain-tile img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.8s var(--transition);
     position: absolute;
     inset: 0;
 }

 .sustain-tile:hover img {
     transform: scale(1.04);
 }

 .sustain-tile-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(180deg, transparent 50%, rgba(15, 20, 32, 0.78) 100%);
     z-index: 2;
 }

 .sustain-tile-content {
     position: absolute;
     bottom: 28px;
     left: 28px;
     right: 28px;
     z-index: 3;
     color: var(--white);
 }

 .sustain-tile-eyebrow {
     font-size: 9px;
     letter-spacing: 3px;
     text-transform: uppercase;
     color: var(--gold-light);
     font-weight: 700;
     margin-bottom: 6px;
 }

 .sustain-tile-title {
     font-family: 'Cormorant Garamond', serif;
     font-size: 24px;
     font-weight: 400;
     margin-bottom: 4px;
 }

 .sustain-tile.tile-feature .sustain-tile-title {
     font-size: 32px;
 }

 .sustain-tile-sub {
     font-size: 13px;
     color: rgba(255, 255, 255, 0.85);
     line-height: 1.55;
 }


 .ownership-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 28px;
     margin-top: 56px;
 }

 .own-card {
     background: var(--white);
     border: 1px solid var(--border);
     padding: 48px 44px;
     position: relative;
     transition: all 0.4s var(--transition);
 }

 .own-card:hover {
     border-color: var(--gold);
     box-shadow: var(--shadow-med);
     transform: translateY(-4px);
 }

 .own-card-tag {
     display: inline-block;
     font-size: 10px;
     letter-spacing: 3px;
     text-transform: uppercase;
     color: var(--gold-dark);
     font-weight: 700;
     margin-bottom: 16px;
 }

 .own-card h3 {
     font-size: 32px;
     color: var(--navy);
     margin-bottom: 16px;
     font-weight: 400;
 }

 .own-card-detail {
     font-size: 15px;
     color: var(--text-secondary);
     line-height: 1.75;
     margin-bottom: 28px;
 }

 .own-card-price {
     padding-top: 24px;
     border-top: 1px solid var(--border);
     display: flex;
     align-items: baseline;
     justify-content: space-between;
     margin-bottom: 28px;
 }

 .own-card-price-label {
     font-size: 10px;
     letter-spacing: 2.5px;
     text-transform: uppercase;
     color: var(--text-light);
     font-weight: 700;
 }

 .own-card-price-value {
     font-family: 'Cormorant Garamond', serif;
     font-size: 28px;
     color: var(--burgundy);
     font-weight: 500;
 }

 /* ===== VILLA SHOWCASE ===== */
 .villa {
     margin-bottom: 100px;
 }

 .villa:last-of-type {
     margin-bottom: 0;
 }

 .villa-grid {
     display: grid;
     grid-template-columns: 1.15fr 1fr;
     gap: 80px;
     align-items: center;
 }

 .villa-grid-flip {
     grid-template-columns: 1fr 1.15fr;
 }

 .villa-image {
     position: relative;
     aspect-ratio: 4/3;
     overflow: hidden;
 }

 .villa-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.8s var(--transition);
 }

 .villa-image:hover img {
     transform: scale(1.04);
 }

 /* Villa carousel — for villa interior/exterior galleries */
 .villa-image[data-villa-carousel] {
     /* container styles already inherited */
 }

 .villa-carousel-track {
     position: absolute;
     inset: 0;
 }

 .villa-carousel-img {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.7s ease, transform 8s ease;
     transform: scale(1.0);
 }

 .villa-carousel-img.is-active {
     opacity: 1;
     visibility: visible;
     cursor: zoom-in;
     transform: scale(1.03);
 }

 .villa-image[data-villa-carousel]:hover .villa-carousel-img.is-active {
     transform: scale(1.05);
 }

 .villa-carousel-arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 44px;
     height: 44px;
     background: rgba(255, 255, 255, 0.85);
     border: 1px solid rgba(255, 255, 255, 0.6);
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
     color: var(--navy);
     border-radius: 50%;
     cursor: pointer;
     z-index: 5;
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     transition: opacity 0.3s var(--transition), background 0.3s var(--transition), transform 0.3s var(--transition);
 }

 .villa-image[data-villa-carousel]:hover .villa-carousel-arrow,
 .villa-image[data-villa-carousel]:focus-within .villa-carousel-arrow {
     opacity: 1;
 }

 .villa-carousel-arrow:hover {
     background: var(--burgundy);
     color: var(--white);
     transform: translateY(-50%) scale(1.08);
 }

.villa-carousel-arrow img {
    width: 18px;
    height: 18px;
}

.villa-carousel-arrow:hover img {
    filter: brightness(0) invert(1);
}

 .villa-carousel-prev {
     left: 16px;
 }

 .villa-carousel-next {
     right: 16px;
 }

 .villa-carousel-counter {
     position: absolute;
     bottom: 18px;
     right: 18px;
     z-index: 4;
     background: rgba(255, 255, 255, 0.92);
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
     padding: 6px 14px;
     font-family: 'Cormorant Garamond', serif;
     font-size: 14px;
     color: var(--navy);
     letter-spacing: 0.5px;
     border: 1px solid rgba(212, 188, 124, 0.5);
     display: inline-flex;
     align-items: center;
     gap: 6px;
 }

 .villa-carousel-cur {
     font-style: italic;
     color: var(--burgundy);
     font-weight: 500;
     min-width: 10px;
     text-align: right;
 }

 .villa-carousel-sep {
     color: var(--gold-dark);
     opacity: 0.7;
 }

 .villa-carousel-total {
     color: var(--text-secondary);
 }

 .villa-popup {
     position: fixed;
     inset: 0;
     z-index: 2000;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 72px 88px;
     background: rgba(15, 20, 32, 0.9);
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
     transition: opacity 0.25s var(--transition), visibility 0.25s var(--transition);
 }

 .villa-popup.is-open {
     opacity: 1;
     visibility: visible;
     pointer-events: auto;
 }

 .villa-popup-image {
     width: auto;
     height: auto;
     max-width: min(92vw, 1200px);
     max-height: 84vh;
     object-fit: contain;
     box-shadow: 0 28px 80px rgba(0, 0, 0, 0.38);
 }

 .villa-popup-close,
 .villa-popup-nav {
     position: absolute;
     width: 46px;
     height: 46px;
     border: 1px solid rgba(255, 255, 255, 0.45);
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.92);
     color: var(--navy);
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background 0.25s var(--transition), transform 0.25s var(--transition), color 0.25s var(--transition);
 }

 .villa-popup-close {
     top: 22px;
     right: 24px;
     font-size: 30px;
     line-height: 1;
     font-family: Arial, sans-serif;
 }

 .villa-popup-nav {
     top: 50%;
     transform: translateY(-50%);
 }

 .villa-popup-prev {
     left: 24px;
 }

 .villa-popup-next {
     right: 24px;
 }

 .villa-popup-nav img {
     width: 18px;
     height: 18px;
 }

 .villa-popup-close:hover,
 .villa-popup-nav:hover {
     background: var(--burgundy);
     color: var(--white);
 }

 .villa-popup-close:hover {
     transform: scale(1.08);
 }

 .villa-popup-nav:hover {
     transform: translateY(-50%) scale(1.08);
 }

 .villa-popup-nav:hover img {
     filter: brightness(0) invert(1);
 }

 .villa-image-tag {
     position: absolute;
     top: 24px;
     left: 24px;
     z-index: 3;
     background: var(--white);
     padding: 9px 16px;
     font-size: 10px;
     letter-spacing: 2.5px;
     text-transform: uppercase;
     color: var(--burgundy);
     font-weight: 700;
     border: 1px solid var(--gold);
 }

 .villa-content .section-eyebrow {
     margin-bottom: 14px;
 }

 .villa-name {
     font-size: clamp(36px, 3.5vw, 52px);
     color: var(--navy);
     margin-bottom: 8px;
     font-weight: 300;
 }

 .villa-name em {
     font-style: italic;
     color: var(--burgundy);
 }

 .villa-config {
     font-family: 'Cormorant Garamond', serif;
     font-style: italic;
     font-size: 18px;
     color: var(--gold-dark);
     margin-bottom: 24px;
 }

 .villa-description {
     font-size: 16px;
     color: var(--text-secondary);
     line-height: 1.85;
     margin-bottom: 32px;
     font-weight: 400;
 }

 .villa-actions {
     display: flex;
     flex-wrap: wrap;
     gap: 14px;
 }

 .villa-link {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 13px 22px;
     font-size: 11px;
     letter-spacing: 2px;
     text-transform: uppercase;
     font-weight: 700;
     color: var(--navy);
     background: var(--cream-dark);
     border: 1px solid transparent;
     text-decoration: none;
     transition: all 0.3s var(--transition);
 }

 .villa-link:hover {
     background: var(--white);
     border-color: var(--gold);
     color: var(--burgundy);
 }

 .villa-link-icon {
     width: 14px;
     height: 14px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     color: var(--gold-dark);
 }

 /* ===== LEGAL CARDS ===== */
 .legal-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 32px;
     margin-top: 64px;
 }

 .legal-card {
     background: rgba(255, 255, 255, 0.04);
     border: 1px solid rgba(255, 255, 255, 0.1);
     padding: 38px 32px;
     transition: all 0.4s var(--transition);
 }

 .legal-card:hover {
     background: rgba(255, 255, 255, 0.07);
     border-color: var(--gold);
     transform: translateY(-4px);
 }

 .legal-card-num {
     font-family: 'Cormorant Garamond', serif;
     font-style: italic;
     font-size: 56px;
     color: var(--gold);
     line-height: 1;
     margin-bottom: 16px;
     font-weight: 300;
     display: block;
 }

 .legal-card h4 {
     font-size: 22px;
     color: var(--white);
     margin-bottom: 14px;
     font-weight: 400;
 }

 .legal-card p {
     font-size: 14.5px;
     color: rgba(255, 255, 255, 0.78);
     line-height: 1.75;
     font-weight: 400;
 }

 /* ===== HOW TO GET STARTED — STEP TIMELINE ===== */
 .steps-section {
     position: relative;
     padding: 130px 60px;
     overflow: hidden;
     background: var(--navy);
     color: var(--white);
 }

 .steps-bg {
     position: absolute;
     inset: 0;
     z-index: 0;
     overflow: hidden;
 }

 .steps-bg img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transform: scale(1.05);
 }

 .steps-bg::after {
     content: '';
     position: absolute;
     inset: 0;
     background:
         linear-gradient(180deg, rgba(15, 20, 32, 0.78) 0%, rgba(15, 20, 32, 0.65) 50%, rgba(15, 20, 32, 0.85) 100%);
 }

 .steps-inner {
     position: relative;
     z-index: 2;
     max-width: 1340px;
     margin: 0 auto;
 }

 .steps-header {
     text-align: center;
     margin-bottom: 80px;
 }

 .steps-eyebrow {
     font-size: 11px;
     letter-spacing: 5px;
     text-transform: uppercase;
     color: var(--gold-light);
     font-weight: 700;
     margin-bottom: 18px;
 }

 .steps-title {
     font-size: clamp(32px, 4vw, 54px);
     color: var(--white);
     font-weight: 300;
     line-height: 1.15;
     letter-spacing: -0.5px;
 }

 .steps-title em {
     font-style: italic;
     color: var(--gold-light);
 }

 .steps-track {
     position: relative;
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 32px;
     margin-bottom: 60px;
 }

 /* The horizontal connecting line, animated draw on reveal */
 .steps-line {
     position: absolute;
     top: 28px;
     left: 10%;
     right: 10%;
     height: 1px;
     background: linear-gradient(90deg, transparent 0%, rgba(212, 188, 124, 0.55) 8%, rgba(212, 188, 124, 0.55) 92%, transparent 100%);
     transform: scaleX(0);
     transform-origin: left center;
     transition: transform 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.2s;
     z-index: 1;
 }

 .steps-section.is-visible .steps-line {
     transform: scaleX(1);
 }

 .step {
     position: relative;
     z-index: 2;
     text-align: center;
     opacity: 0;
     transform: translateY(20px);
     transition: opacity 0.7s var(--transition), transform 0.7s var(--transition);
 }

 .steps-section.is-visible .step {
     opacity: 1;
     transform: translateY(0);
 }

 .steps-section.is-visible .step:nth-child(2) {
     transition-delay: 0.6s;
 }

 .steps-section.is-visible .step:nth-child(3) {
     transition-delay: 0.85s;
 }

 .steps-section.is-visible .step:nth-child(4) {
     transition-delay: 1.1s;
 }

 .steps-section.is-visible .step:nth-child(5) {
     transition-delay: 1.35s;
 }

 .steps-section.is-visible .step:nth-child(6) {
     transition-delay: 1.6s;
 }

 .step-icon {
     width: 56px;
     height: 56px;
     margin: 0 auto 22px;
     background: var(--white);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--gold-dark);
     box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
     border: 2px solid rgba(212, 188, 124, 0.25);
     transition: all 0.4s var(--transition);
     position: relative;
 }

.step-icon img {
    width: 26px;
    height: 26px;
}

 .step:hover .step-icon {
     transform: scale(1.08);
     border-color: var(--gold-light);
     box-shadow: 0 8px 28px rgba(212, 188, 124, 0.4);
 }

 .step-num {
     font-family: 'Cormorant Garamond', serif;
     font-style: italic;
     font-size: 24px;
     color: var(--gold-light);
     font-weight: 400;
     margin-bottom: 6px;
     line-height: 1;
 }

 .step-title {
     font-family: 'Cormorant Garamond', serif;
     font-size: 26px;
     color: var(--white);
     font-weight: 400;
     margin-bottom: 14px;
     line-height: 1.2;
 }

 .step-desc {
     font-size: 13.5px;
     color: rgba(255, 255, 255, 0.78);
     line-height: 1.65;
     max-width: 200px;
     margin: 0 auto;
     font-weight: 400;
 }

 .steps-cta {
     text-align: center;
     opacity: 0;
     transform: translateY(20px);
     transition: opacity 0.7s var(--transition) 1.85s, transform 0.7s var(--transition) 1.85s;
 }

 .steps-section.is-visible .steps-cta {
     opacity: 1;
     transform: translateY(0);
 }

 .steps-cta .btn {
     background: var(--white);
     color: var(--navy);
     padding: 16px 40px;
 }

 .steps-cta .btn:hover {
     background: var(--gold);
     color: var(--navy);
     transform: translateY(-2px);
     box-shadow: 0 10px 30px rgba(212, 188, 124, 0.4);
 }


 .cta-section {
     padding: 140px 60px;
     background: var(--cream);
     position: relative;
     overflow: hidden;
 }

 .cta-section::before {
     content: '';
     position: absolute;
     top: -100px;
     right: -100px;
     width: 400px;
     height: 400px;
     border: 1px solid var(--gold);
     border-radius: 50%;
     opacity: 0.18;
 }

 .cta-section::after {
     content: '';
     position: absolute;
     bottom: -150px;
     left: -100px;
     width: 500px;
     height: 500px;
     border: 1px solid var(--gold);
     border-radius: 50%;
     opacity: 0.12;
 }

 .cta-grid {
     max-width: 1100px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1fr 1.1fr;
     gap: 80px;
     align-items: start;
     position: relative;
     z-index: 2;
 }

 .cta-form {
     background: var(--white);
     padding: 56px 48px;
     border: 1px solid var(--border);
     box-shadow: var(--shadow-soft);
 }

 .cta-form h3 {
     font-size: 28px;
     color: var(--navy);
     margin-bottom: 8px;
     font-weight: 400;
 }

 .cta-form-sub {
     font-size: 14px;
     color: var(--text-secondary);
     margin-bottom: 32px;
 }

 .form-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 16px;
     margin-bottom: 16px;
 }

 .form-field {
     display: flex;
     flex-direction: column;
     margin-bottom: 16px;
 }

 .form-field label {
     font-size: 10px;
     letter-spacing: 2px;
     text-transform: uppercase;
     color: var(--text-secondary);
     font-weight: 700;
     margin-bottom: 6px;
 }

 .form-field input,
 .form-field select,
 .form-field textarea {
     padding: 12px 14px;
     border: 1px solid var(--border);
     background: var(--cream);
     font-family: 'Nunito Sans', sans-serif;
     font-size: 14px;
     color: var(--text-primary);
     transition: border-color 0.3s var(--transition);
 }

 .form-field input:focus,
 .form-field select:focus,
 .form-field textarea:focus {
     outline: none;
     border-color: var(--gold);
     background: var(--white);
 }

 .form-field textarea {
     resize: vertical;
     min-height: 90px;
 }

 .cta-form .btn {
     width: 100%;
     justify-content: center;
     margin-top: 8px;
 }

 .contact-detail-card {
     margin-top: 36px;
     padding: 28px;
     background: rgba(255, 255, 255, 0.65);
     border: 1px solid var(--border);
 }

 .contact-detail-eyebrow {
     font-size: 10px;
     letter-spacing: 2.5px;
     text-transform: uppercase;
     color: var(--gold-dark);
     font-weight: 700;
     margin-bottom: 10px;
 }

 .contact-detail-title {
     font-family: 'Cormorant Garamond', serif;
     font-size: 22px;
     color: var(--navy);
     margin-bottom: 14px;
 }

 .contact-detail-list {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .contact-detail-list li {
     font-size: 14px;
     color: var(--text-secondary);
     display: flex;
     gap: 10px;
     align-items: flex-start;
 }

 .contact-detail-list .icon {
     color: var(--gold-dark);
     flex-shrink: 0;
     width: 16px;
     margin-top: 2px;
 }

 /* ===== FOOTER (CHRISTIE'S SINGAPORE PATTERN) ===== */
 .footer {
     background: var(--cream);
     color: var(--text-primary);
     border-top: 1px solid var(--border-soft);
 }

 .footer-main {
     max-width: 1480px;
     margin: 0 auto;
     padding: 90px 60px 70px;
     display: grid;
     grid-template-columns: 1.4fr 1.1fr 0.7fr 1fr;
     gap: 60px;
     align-items: start;
 }

 .footer-heading {
     font-family: 'Nunito Sans', sans-serif;
     font-size: 18px;
     letter-spacing: 5px;
     text-transform: uppercase;
     color: var(--text-primary);
     font-weight: 500;
     margin-bottom: 32px;
 }

 /* Stay Informed (email subscribe) */
 .footer-subscribe {
     width: 100%;
     max-width: 420px;
 }

 .footer-sub-row {
     display: flex;
     align-items: center;
     border-bottom: 1px solid var(--burgundy);
     padding: 16px 0 10px;
     gap: 12px;
 }

 .footer-subscribe input[type="email"] {
     flex: 1;
     border: none;
     background: transparent;
     font-family: 'Nunito Sans', sans-serif;
     font-size: 14px;
     color: var(--text-primary);
     padding: 0;
     outline: none;
 }

 .footer-subscribe input[type="email"]::placeholder {
     color: var(--text-light);
     font-style: italic;
 }

 .footer-subscribe button {
     background: transparent;
     border: none;
     color: var(--burgundy);
     cursor: pointer;
     padding: 4px 6px;
     transition: transform 0.3s var(--transition);
 }

 .footer-subscribe button:hover {
     transform: translateX(4px);
 }

.footer-subscribe button svg,
.footer-subscribe button img {
    width: 22px;
    height: 22px;
}

 .footer-sub-msg {
     font-size: 12.5px;
     color: var(--gold-dark);
     margin-top: 10px;
     font-style: italic;
     min-height: 16px;
 }

 /* Contact list */
 .footer-contact-list {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 16px;
     padding-top: 6px;
 }

 .footer-contact-list li {
     display: flex;
     align-items: flex-start;
     gap: 14px;
     font-size: 14px;
     color: var(--text-secondary);
     line-height: 1.55;
 }

 .footer-contact-icon {
     flex-shrink: 0;
     width: 28px;
     height: 28px;
     border-radius: 50%;
     background: var(--text-primary);
     color: var(--white);
     display: flex;
     align-items: center;
     justify-content: center;
 }

.footer-contact-icon img {
    width: 14px;
    height: 14px;
}

 .footer-contact-list a {
     color: var(--text-secondary);
     text-decoration: none;
     transition: color 0.3s var(--transition);
 }

 .footer-contact-list a:hover {
     color: var(--burgundy);
 }

 /* Follow Us social */
 .footer-social {
     display: flex;
     gap: 12px;
     padding-top: 6px;
 }

 .footer-social a {
     width: 32px;
     height: 32px;
     border-radius: 50%;
     background: var(--text-primary);
     color: var(--white);
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background 0.3s var(--transition), transform 0.3s var(--transition);
 }

 .footer-social a:hover {
     background: var(--burgundy);
     transform: translateY(-2px);
 }

.footer-social img {
    width: 16px;
    height: 16px;
}

 /* Christie's logo column (typeset, larger for footer prominence) */
 .footer-col-logo {
     display: flex;
     justify-content: flex-end;
     align-items: flex-start;
 }

 .footer-logo-christies {
     display: inline-flex;
     flex-direction: column;
     align-items: center;
     gap: 0;
     color: var(--burgundy);
     line-height: 1;
 }

 .footer-logo-mark {
     font-family: 'Cormorant Garamond', serif;
     font-weight: 700;
     font-size: 64px;
     letter-spacing: 3px;
     color: inherit;
     line-height: 0.95;
 }

 /* Stack: subline + rule line up to the same width */
 .footer-logo-stack {
     display: flex;
     flex-direction: column;
     align-items: stretch;
     gap: 4px;
     margin-top: 2px;
     width: max-content;
 }

 .footer-logo-sub {
     font-family: 'Nunito Sans', sans-serif;
     font-weight: 600;
     font-size: 12.5px;
     letter-spacing: 2.6px;
     text-transform: uppercase;
     color: inherit;
     white-space: nowrap;
     text-align: center;
 }

 .footer-logo-rule {
     display: flex;
     align-items: center;
     gap: 10px;
     width: 100%;
     justify-content: center;
 }

 .footer-logo-rule::before,
 .footer-logo-rule::after {
     content: '';
     flex: 1;
     height: 1px;
     background: currentColor;
     opacity: 0.85;
 }

 .footer-logo-singapore {
     font-family: 'Nunito Sans', sans-serif;
     font-weight: 600;
     font-size: 11px;
     letter-spacing: 2.8px;
     text-transform: uppercase;
     color: inherit;
     white-space: nowrap;
     padding: 0 6px;
 }

 /* License + Disclaimer */
 .footer-license,
 .footer-disclaimer {
     max-width: 1480px;
     margin: 0 auto;
     padding: 0 60px;
     text-align: center;
 }

 .footer-license p {
     font-size: 13px;
     color: var(--text-secondary);
     line-height: 1.6;
     padding-bottom: 24px;
 }

 .footer-disclaimer {
     padding-bottom: 50px;
 }

 .footer-disclaimer p {
     font-size: 12.5px;
     color: var(--text-light);
     line-height: 1.7;
     max-width: 1100px;
     margin: 0 auto;
 }

 /* Bottom bar */
 .footer-bottom {
     border-top: 1px solid var(--border-soft);
     padding: 24px 60px;
     max-width: 1480px;
     margin: 0 auto;
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
     gap: 16px;
     font-size: 12px;
     color: var(--text-light);
 }

 .footer-bottom-links {
     display: flex;
     gap: 24px;
     flex-wrap: wrap;
 }

 .footer-bottom-links a {
     color: var(--text-light);
     text-decoration: none;
     transition: color 0.3s var(--transition);
 }

 .footer-bottom-links a:hover {
     color: var(--burgundy);
 }

 /* ===== FLOATING CONTACT BUTTONS ===== */
 .floating-contacts {
     position: fixed;
     bottom: 24px;
     right: 24px;
     z-index: 999;
     display: flex;
     flex-direction: column;
     gap: 12px;
 }

 .float-btn {
     display: flex;
     align-items: center;
     justify-content: flex-start;
     gap: 0;
     width: 56px;
     height: 56px;
     border-radius: 28px;
     color: var(--white);
     text-decoration: none;
     box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
     overflow: hidden;
     transition: width 0.4s var(--transition), gap 0.4s var(--transition), padding 0.4s var(--transition), box-shadow 0.4s var(--transition);
     padding: 0 16px;
     white-space: nowrap;
 }

.float-btn img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

 .float-btn-label {
     font-size: 13px;
     font-weight: 700;
     letter-spacing: 0.5px;
     opacity: 0;
     max-width: 0;
     overflow: hidden;
     transition: opacity 0.3s var(--transition), max-width 0.4s var(--transition);
 }

 .float-btn:hover {
     width: auto;
     gap: 10px;
     box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
 }

 .float-btn:hover .float-btn-label {
     opacity: 1;
     max-width: 200px;
 }

 .float-btn-whatsapp {
     background: #25D366;
 }

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

 .float-btn-phone {
     background: var(--burgundy);
 }

 .float-btn-phone:hover {
     background: var(--burgundy-dark);
 }


 /* ===== ANIMATIONS ===== */
 .reveal {
     opacity: 0;
     transform: translateY(28px);
     transition: opacity 0.8s var(--transition), transform 0.8s var(--transition);
 }

 .reveal.is-visible {
     opacity: 1;
     transform: translateY(0);
    
 }
#why-lombok .reveal.is-visible{ max-width:1000px;  margin-left:auto;margin-right:auto;}

 /* ===== RESPONSIVE ===== */
 @media (max-width: 1100px) {
     .lifestyle-grid {
         grid-template-columns: 1fr 1fr;
     }

     .lifestyle-tile.tile-tall {
         grid-row: auto;
     }

     .wellness-grid {
         grid-template-columns: 1fr 1fr;
         min-height: auto;
     }

     .wellness-image:nth-child(3) {
         display: none;
     }

     .sustain-header {
         grid-template-columns: 1fr;
         gap: 32px;
     }

     .sustain-header-right {
         padding-left: 24px;
     }

     .sustain-grid {
         grid-template-columns: 1fr 1fr;
         grid-template-rows: auto;
         min-height: auto;
     }

     .sustain-tile.tile-feature {
         grid-row: span 2;
         min-height: 560px;
     }

     /* Steps: collapse to 2-column grid, hide horizontal line */
     .steps-track {
         grid-template-columns: repeat(2, 1fr);
         gap: 56px 32px;
     }

     .steps-line {
         display: none;
     }

     .step-desc {
         max-width: 280px;
     }
 }

 @media (max-width: 1024px) {
     .header {
         padding: 0 32px;
     }

     .section,
     .cta-section,
     .lifestyle-section,
     .sustainability-section,
     .steps-section {
         padding: 90px 32px;
     }

     .tagline-band {
         padding: 70px 32px;
     }

     .footer {
         padding: 70px 32px 30px;
     }

     .map-header {
         padding: 90px 32px 50px;
     }

     .wellness-text {
         padding: 70px 32px;
     }

     .intro-grid,
     .villa-grid,
     .villa-grid-flip {
         grid-template-columns: 1fr;
         gap: 56px;
         direction: ltr;
     }

     .opportunity-grid,
     .legal-grid,
     .views-gallery,
     .map-zones {
         grid-template-columns: repeat(2, 1fr);
     }

     .opp-icon-grid {
         grid-template-columns: repeat(3, 1fr);
         gap: 48px 32px;
     }

     .investment-list {
         column-count: 1;
     }

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

     .reasons-row-bottom {
         grid-template-columns: repeat(2, 1fr);
         max-width: 100%;
     }

     .reasons-section {
         padding: 90px 32px;
     }

     .map-zone:nth-child(2) {
         border-right: none;
     }

     .map-zone:nth-child(1),
     .map-zone:nth-child(2) {
         border-bottom: 1px solid rgba(255, 255, 255, 0.08);
     }

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

     .stat:nth-child(2) {
         border-right: none;
     }

     .stat:nth-child(1),
     .stat:nth-child(2) {
         border-bottom: 1px solid rgba(255, 255, 255, 0.08);
     }

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

     .cta-grid {
         grid-template-columns: 1fr;
         gap: 48px;
     }

     .footer-grid {
         grid-template-columns: 1fr 1fr;
         gap: 40px;
         padding: 56px 32px 40px;
     }

     .footer-main {
         grid-template-columns: 1fr 1fr;
         gap: 48px 40px;
         padding: 70px 32px 56px;
     }

     .footer-col-logo {
         justify-content: flex-start;
     }

     .footer-license,
     .footer-disclaimer {
         padding-left: 32px;
         padding-right: 32px;
     }

     .nav-links {
         display: none;
     }

     .menu-toggle {
         display: flex;
     }

     .header-inner {
         height: 72px;
     }

     .logo {
         gap: 16px;
     }

     .logo-christies-mark {
         font-size: 24px;
         letter-spacing: 1.1px;
     }

     .logo-christies-sub {
         font-size: 6.5px;
         letter-spacing: 1px;
     }

     .logo-christies-singapore {
         font-size: 6.5px;
         letter-spacing: 1.3px;
     }

     .logo-samara-mark {
         font-size: 21px;
         letter-spacing: 5px;
     }

     .logo-samara-sub {
         font-size: 7px;
         letter-spacing: 3.5px;
     }

     .logo-divider-pipe {
         height: 36px;
     }

     .footer-logo-mark {
         font-size: 50px;
         letter-spacing: 2.4px;
     }

     .footer-logo-sub {
         font-size: 10.5px;
         letter-spacing: 2.2px;
     }

     .footer-logo-singapore {
         font-size: 9.5px;
         letter-spacing: 2.4px;
     }

     .intro-image-stamp {
         right: 0;
         bottom: -20px;
         padding: 22px 28px;
     }
 }

 @media (max-width: 640px) {
     .header {
         padding: 0 20px;
     }

     .section,
     .cta-section,
     .lifestyle-section,
     .sustainability-section,
     .steps-section {
         padding: 70px 20px;
     }

     .tagline-band {
         padding: 56px 20px;
     }

     .footer {
         padding: 56px 20px 24px;
     }

     .map-header {
         padding: 70px 20px 40px;
     }

     .wellness-text {
         padding: 56px 20px;
     }

     .opportunity-grid,
     .legal-grid,
     .views-gallery,
     .footer-grid,
     .map-zones,
     .lifestyle-grid {
         grid-template-columns: 1fr;
     }

     .view-carousel-arrow {
         opacity: 1;
         width: 38px;
         height: 38px;
     }

     .view-carousel-prev {
         left: 10px;
     }

     .view-carousel-next {
         right: 10px;
     }

     .villa-carousel-arrow {
         opacity: 1;
         width: 38px;
         height: 38px;
     }

     .villa-carousel-prev {
         left: 10px;
     }

     .villa-carousel-next {
         right: 10px;
     }

     .villa-carousel-counter {
         bottom: 12px;
         right: 12px;
         padding: 5px 11px;
         font-size: 13px;
     }

     .villa-popup {
         padding: 70px 16px;
     }

     .villa-popup-image {
         max-width: 100%;
         max-height: 78vh;
     }

     .villa-popup-close,
     .villa-popup-nav {
         width: 40px;
         height: 40px;
     }

     .villa-popup-close {
         top: 16px;
         right: 16px;
         font-size: 26px;
     }

     .villa-popup-prev {
         left: 12px;
     }

     .villa-popup-next {
         right: 12px;
     }

     .reasons-row-top,
     .reasons-row-bottom {
         grid-template-columns: 1fr;
         max-width: 100%;
     }

     .reasons-section {
         padding: 70px 20px;
     }

     .footer-main {
         grid-template-columns: 1fr;
         gap: 40px;
         padding: 56px 20px 40px;
     }

     .footer-license,
     .footer-disclaimer,
     .footer-bottom {
         padding-left: 20px;
         padding-right: 20px;
     }

     .floating-contacts {
         bottom: 16px;
         right: 16px;
         gap: 10px;
     }

     .float-btn {
         width: 50px;
         height: 50px;
     }

     .float-btn img {
         width: 22px;
         height: 22px;
     }

     .opp-icon-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 40px 24px;
     }

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

     .wellness-image:nth-child(3) {
         display: block;
     }

     .wellness-image {
         min-height: 360px;
     }

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

     .sustain-tile {
         min-height: 280px;
     }

     .sustain-tile.tile-feature {
         min-height: 360px;
         grid-row: auto;
     }

     .map-zone,
     .stat {
         border-right: none !important;
         border-bottom: 1px solid rgba(255, 255, 255, 0.08);
     }

     .map-zone:last-child,
     .stat:last-child {
         border-bottom: none;
     }

     .stats-band {
         grid-template-columns: 1fr;
     }

     .form-row {
         grid-template-columns: 1fr;
     }

     .cta-form {
         padding: 36px 24px;
     }

     .hero h1 {
         font-size: 38px;
     }

     .hero-eyebrow {
         font-size: 9px;
         padding: 6px 14px;
         letter-spacing: 3px;
     }

     .hero-actions {
         flex-direction: column;
         width: 100%;
     }

     .hero-actions .btn {
         width: 100%;
         justify-content: center;
     }

     .villa-image-tag {
         top: 14px;
         left: 14px;
     }

     .intro-image-stamp {
         position: static;
         margin-top: 16px;
         max-width: 100%;
     }

     .lifestyle-tile {
         min-height: 320px;
     }

     .logo {
         gap: 12px;
     }

     .logo-christies-mark {
         font-size: 19px;
         letter-spacing: 0.9px;
     }

     .logo-christies-sub {
         font-size: 5.5px;
         letter-spacing: 0.8px;
     }

     .logo-christies-singapore {
         font-size: 5.5px;
         letter-spacing: 1.1px;
     }

     .logo-samara-mark {
         font-size: 17px;
         letter-spacing: 4px;
     }

     .logo-samara-sub {
         font-size: 6px;
         letter-spacing: 2.8px;
     }

     .logo-divider-pipe {
         height: 30px;
     }

     .steps-track {
         grid-template-columns: 1fr;
         gap: 44px;
     }

     .step-desc {
         max-width: none;
     }
      .section-header-center { margin-bottom:30px; }
 }