/* ============================================================
   LEHAR RESORTS — Karachi's Dream Island
   Design tokens
   ============================================================ */
:root{
  --deep:     #1B3F4A;   /* Main Slate Blue */
  --deep-2:   #25515E;   /* Medium Slate Blue */
  --accent:   #C3932A;   /* Elegant Gold */
  --accent-2: #D4A949;   /* Lighter Gold */
  --sand:     #EFEBE4;   /* Soft Sand */
  --ink:      #1A2428;   /* Charcoal Text */
  --paper:    #FDFDFD;   /* Main White Background */
  --light-bg: #F4F6F6;   /* Light Section bg */
  --line:     rgba(27,63,74,0.12);
  --hud-bg:   rgba(27,63,74,0.88);

  --display:  'DM Serif Display', Georgia, serif;
  --body:     'DM Sans', -apple-system, sans-serif;
  --mono:     'Space Mono', 'Courier New', monospace;

  --stop-vh: 68;
}
@media (max-width: 760px){
  :root{ --stop-vh: 52; }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:auto; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-weight:500;
  letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font-family:inherit; }

.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--deep-2);
  display:flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{
  content:'';
  width:18px; height:1px;
  background:var(--accent);
  display:inline-block;
}

/* ============================================================
   NAV (Redesigned Minimalist)
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  transition: background 0.3s ease, border-bottom 0.3s ease, padding 0.3s ease, transform 0.3s ease;
  background: transparent;
  border-bottom: 1px solid transparent;
  transform: translateY(0);
}
.nav.is-hidden {
  transform: translateY(-100%);
}
.nav.is-solid {
  background: rgba(253,253,253,0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px clamp(24px, 5vw, 64px);
  transition: padding 0.3s ease;
  max-width: 1600px; margin: 0 auto;
}
.nav.is-solid .nav__inner { padding-top: 16px; padding-bottom: 16px; }

.nav__brand a { display: flex; align-items: center; }
.nav__logo { height: 48px; width: auto; display: block; transition: opacity 0.2s; }
.nav__logo:hover { opacity: 0.7; }

.nav__menu {
  display: flex; align-items: center; gap: clamp(20px, 4vw, 40px);
}
.nav__links { display: flex; align-items: center; gap: clamp(20px, 3vw, 36px); }
.nav__links a {
  font-family: var(--body); font-size: 13.5px; font-weight: 500;
  letter-spacing: 0.05em; color: var(--ink); text-transform: uppercase;
  text-decoration: none; position: relative; opacity: 0.6;
  transition: opacity 0.2s ease;
}
.nav__links a:hover, .nav__links a.is-active { opacity: 1; }
.nav__links a::after {
  content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px;
  background: var(--accent); transition: width 0.3s ease;
}
.nav__links a.is-active::after { width: 100%; }


.nav__toggle { display: none; }

/* ── Mobile Nav — Fullscreen Overlay ── */
@media (max-width: 900px) {

  /* Nav bar itself stays on top of the white overlay */
  .nav__inner {
    padding: 18px 24px;
    position: relative;
    z-index: 62;
  }
  .nav.is-solid .nav__inner { padding: 14px 24px; }
  /* FINAL FIX:
     Step 1 — Remove nav's transform when menu opens → kills the stacking context
     Step 2 — nav__menu uses position:fixed so it covers the REAL full viewport */
  .nav.is-menu-open {
    transform: none !important;
    background: #ffffff !important;
    border-bottom: none !important;
  }

  /* Hamburger Button */
  .nav__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    margin-right: -10px;
    z-index: 70;
    position: relative;
  }
  .nav__toggle-line {
    width: 24px;
    height: 1.5px;
    background: var(--ink);
    display: block;
    border-radius: 2px;
    transform-origin: center;
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1),
                opacity 0.3s ease,
                background 0.3s ease;
  }

  /* Hamburger → X morph */
  .nav.is-menu-open .nav__toggle-line:first-child {
    transform: translateY(6.5px) rotate(45deg);
    background: var(--deep);
  }
  .nav.is-menu-open .nav__toggle-line:last-child {
    transform: translateY(-6.5px) rotate(-45deg);
    background: var(--deep);
  }

  /* Fullscreen white overlay — position:fixed, true viewport fill */
  .nav__menu {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 59;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 32px;

    /* Closed state */
    opacity: 0;
    pointer-events: none;
    transform: translateY(-20px) scale(0.97);
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Open state */
  .nav.is-menu-open .nav__menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  /* Links layout — centered column */
  .nav__links {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    text-align: center;
    width: 100%;
  }

  /* Each nav link */
  .nav__links a {
    font-family: var(--display);
    font-size: clamp(32px, 9vw, 48px);
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--deep);
    text-transform: none;
    text-decoration: none;
    opacity: 0.3;
    padding: 14px 0;
    width: 100%;
    border-bottom: 1px solid rgba(27, 63, 74, 0.08);
    position: relative;
    transition: opacity 0.25s ease,
                color 0.25s ease,
                transform 0.25s ease,
                letter-spacing 0.25s ease;

    /* stagger slide-in when menu opens */
    transform: translateY(16px);
    animation: none;
  }
  .nav__links a:first-child { border-top: 1px solid rgba(27, 63, 74, 0.08); }

  /* Staggered entrance — each link slides in */
  .nav.is-menu-open .nav__links a {
    transform: translateY(0);
  }
  .nav.is-menu-open .nav__links a:nth-child(1) { transition-delay: 0.08s; opacity: 0.35; }
  .nav.is-menu-open .nav__links a:nth-child(2) { transition-delay: 0.14s; opacity: 0.35; }
  .nav.is-menu-open .nav__links a:nth-child(3) { transition-delay: 0.20s; opacity: 0.35; }
  .nav.is-menu-open .nav__links a:nth-child(4) { transition-delay: 0.26s; opacity: 0.35; }

  /* Hover & active state */
  .nav__links a:hover,
  .nav__links a.is-active {
    opacity: 1;
    color: var(--accent);
    letter-spacing: 0.01em;
  }
  .nav__links a::after { display: none; }

  /* Subtle footer text inside menu */
  .nav__menu::after {
    content: 'JKM GLOBAL RESORTS';
    position: absolute;
    bottom: 48px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    color: rgba(27, 63, 74, 0.25);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.4s ease 0.3s;
  }
  .nav.is-menu-open .nav__menu::after {
    opacity: 1;
  }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding:100px clamp(18px,6vw,64px) 40px;
  background:var(--paper);
}
.hero__container{
  position:relative; width:100%; height:calc(100vh - 140px);
  border-radius:4px; overflow:hidden;
  display:flex; align-items:flex-end;
}
.hero__slides{
  position:absolute; inset:0; z-index:1;
}
.hero__bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0;
  transition:opacity 1.2s ease;
}
video.hero__bg {
  object-fit: contain;
  background: #060e12;
}
.hero__bg.is-active{
  opacity:1;
}
.hero__overlay{
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(to top, rgba(13,59,51,0.95) 0%, rgba(13,59,51,0.4) 40%, rgba(0,0,0,0) 100%);
}
.hero__content{
  position:relative; z-index:3; padding:clamp(20px,5vw,60px);
  width:100%;
}
.hero__content h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(36px, 5vw, 68px); line-height:1.1;
  color:#fff; margin:0 0 16px;
}
.hero__content p.lead{
  font-size:clamp(15px,1.4vw,18px); max-width:640px;
  line-height:1.5; color:rgba(255,255,255,0.9); margin:0 0 40px;
}
.hero__actions{
  display:flex; align-items:center; gap:30px; flex-wrap:wrap;
}
.btn-white{
  background:#fff; color:var(--deep); border:none;
  padding:14px 28px; font-size:15px; font-weight:600;
  cursor:pointer; transition:transform .2s ease;
}
.btn-white:hover { transform: translateY(-2px); }
.hero__rating{
  display:flex; flex-direction:column; gap:4px; color:#fff;
}
.stars{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:18px; }
.star-icon{ color:#FFD700; font-size:16px; letter-spacing:2px; }
.rating-text{ font-size:13px; opacity:0.9; }

.hero__slider{
  position:absolute; bottom:clamp(20px,5vw,60px); right:clamp(20px,5vw,60px);
  z-index:3; display:flex; gap:12px;
}
.hero__thumb{
  width:64px; height:80px; border:2px solid transparent;
  padding:0; cursor:pointer; overflow:hidden; transition:all 0.3s;
  background:rgba(255,255,255,0.2);
  position:relative;
}
.hero__thumb img{ width:100%; height:100%; object-fit:cover; opacity:0.7; transition:opacity 0.3s; }
.hero__thumb.is-active{ border-color:#fff; transform:scale(1.05); }
.hero__thumb.is-active img{ opacity:1; }
.hero__thumb:hover img{ opacity:1; }
.hero__thumb-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 22px; height: 22px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px;
  z-index: 3;
  backdrop-filter: blur(4px);
}


/* HERO — iPad / Tablet responsive */
@media (max-width: 1024px) and (min-width: 761px){
  .hero{ padding: 110px 24px 40px; min-height: 100svh; }
  .hero__container{ height: calc(100svh - 130px); align-items: flex-start; }
  .hero__content{ padding: 40px 36px; max-width: 560px; }
  .hero__content h1{ font-size: clamp(34px, 4.5vw, 52px); margin-bottom: 14px; }
  .hero__content p.lead{ font-size: 15px; margin-bottom: 24px; max-width: 480px; }
  .hero__slider{ bottom: 24px; right: 24px; gap: 10px; }
  .hero__thumb{ width: 56px; height: 72px; }
}

/* HERO — mobile responsive */
@media (max-width: 760px){
  .hero{ padding: 115px 16px 24px; min-height: 100svh; }
  .hero__container{ height: calc(100svh - 145px); border-radius: 8px; align-items: flex-end; }
  .hero__content{ padding: 20px 16px 90px; }
  .hero__content h1{ font-size: clamp(26px, 8vw, 38px); line-height: 1.15; margin-bottom: 12px; }
  .hero__content p.lead{ font-size: 13.5px; line-height: 1.5; margin-bottom: 20px; }
  .hero__actions{ gap: 14px; }
  .btn-white{ padding: 12px 20px; font-size: 13.5px; }
  .hero__slider{ bottom: 12px; right: 12px; gap: 6px; }
  .hero__thumb{ width: 44px; height: 56px; }
}

/* Global scroll-reveal */
.js-reveal{ opacity:0; transform:translateY(28px); }

/* ============================================================
   MASTER PLAN SECTION — Premium Redesign
   ============================================================ */
/* ============================================================
   MASTER PLAN SECTION — Ultra-Premium Redesign
   ============================================================ */
.mp-section {
  background: var(--paper);
  padding: clamp(60px, 8vw, 120px) 0;
  position: relative;
  overflow: hidden;
}

/* ── Intro Header ── */
.mp-intro {
  text-align: center;
  padding: 0 clamp(24px, 6vw, 80px) clamp(30px, 4vw, 50px);
}
.mp-intro__eyebrow {
  justify-content: center;
  margin-bottom: 18px;
}
.mp-intro__title {
  font-family: var(--display);
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 400;
  line-height: 1.08;
  color: var(--deep);
  margin: 0 0 20px;
  letter-spacing: -0.02em;
}
.mp-intro__title em {
  font-style: italic;
  color: var(--accent);
}
.mp-intro__desc {
  font-size: clamp(15px, 1.5vw, 17px);
  color: rgba(26,36,40,0.65);
  max-width: 56ch;
  margin: 0 auto 40px;
  line-height: 1.7;
}
/* ── Stats Summary Bar — Minimal Premium Responsive ── */
/* ============================================================
   MASTER PLAN — EXECUTIVE STATS CARDS SHOWCASE
   ============================================================ */
.mp-stats-wrapper {
  width: 100%;
  max-width: 1380px;
  margin: 32px auto 0;
  padding: 0 16px;
  position: relative;
  z-index: 5;
}

/* ============================================================
   REDESIGNED MINIMALIST HERO METRICS & INFRASTRUCTURE SHOWCASE
   ============================================================ */

.mp-stats-wrapper {
  width: 100%;
  max-width: 1320px;
  margin: 36px auto 0;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: relative;
  z-index: 5;
}

/* 1. TOP 3 HERO METRIC CARDS */
.mp-hero-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}

.mp-metric-card {
  background: #ffffff;
  border: 1px solid rgba(27, 63, 74, 0.08);
  border-radius: 16px;
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 20px rgba(27, 63, 74, 0.03);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  text-align: left;
}

.mp-metric-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
  box-shadow: 0 16px 36px -8px rgba(27, 63, 74, 0.1);
}

.mp-metric-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.mp-metric-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(27, 63, 74, 0.04);
  border: 1px solid rgba(27, 63, 74, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--deep);
  transition: all 0.35s ease;
}

.mp-metric-card:hover .mp-metric-card__icon {
  background: var(--deep);
  color: var(--accent);
  border-color: var(--deep);
  transform: scale(1.05);
}

.mcard__svg {
  transition: transform 0.35s ease;
}

/* SVG Hover Animations */
.beach-wave-1 { animation: creekWaveFlow 3.2s infinite ease-in-out; }
.beach-wave-2 { animation: creekWaveFlow 3.2s infinite ease-in-out 0.4s; }
.access-road-path { animation: roadDashTravel 2s infinite linear; }
.road-center-dash { animation: roadDashTravel 1.4s infinite linear; }

.mp-metric-card__heading {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--deep);
  margin: 0;
  line-height: 1.3;
  background: rgba(27, 63, 74, 0.06);
  padding: 6px 12px;
  border-radius: 6px;
  border-left: 3px solid var(--accent);
}

.mp-metric-card__val-wrap {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.mp-metric-card__val {
  font-family: var(--display);
  font-size: clamp(26px, 2.2vw, 36px);
  font-weight: 400;
  color: var(--deep);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.mp-metric-card__unit {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.1em;
}

.mp-metric-card__meta {
  border-top: 1px solid rgba(27, 63, 74, 0.1);
  padding-top: 12px;
  margin-top: 4px;
}

.mp-metric-card__sub {
  font-family: var(--body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--deep);
  letter-spacing: 0.01em;
}

/* 2. HIGHLIGHTED PROJECT STATUS BANNER */
.mp-status-banner {
  background: linear-gradient(135deg, #0f2b33 0%, #1B3F4A 100%);
  border: 1.5px solid rgba(195, 147, 42, 0.45);
  border-radius: 16px;
  padding: 22px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 14px 35px rgba(15, 43, 51, 0.25);
  gap: 16px;
  position: relative;
  overflow: hidden;
}

.mp-status-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -20%;
  width: 50%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
  transform: rotate(25deg);
  pointer-events: none;
}

.mp-status-banner__left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.mp-status-banner__pulse {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
  animation: statusPulse 2s infinite;
  flex-shrink: 0;
}

@keyframes statusPulse {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.mp-status-banner__title {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 400;
  color: #ffffff;
  letter-spacing: 0.02em;
}

.mp-status-banner__subtitle {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
  text-transform: uppercase;
  margin-top: 2px;
}

.mp-status-banner__badges {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.mp-status-tag {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  white-space: nowrap;
}

.mp-status-tag--active {
  background: rgba(34, 197, 94, 0.2);
  border-color: rgba(34, 197, 94, 0.5);
  color: #4ade80;
}

/* 3. INFRASTRUCTURE & ADVANTAGES GRID */
.mp-advantages-sec {
  text-align: left;
  margin-top: 8px;
}

.mp-advantages-title {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--deep);
  margin: 0 0 20px;
  opacity: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.mp-advantages-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 16px;
  background: var(--accent);
  border-radius: 2px;
}

.mp-advantages-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.mp-adv-card {
  background: #ffffff;
  border: 1px solid rgba(27, 63, 74, 0.12);
  border-radius: 14px;
  padding: 20px 18px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: all 0.3s ease;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03);
}

.mp-adv-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 12px 28px -6px rgba(27, 63, 74, 0.09);
}

.mp-adv-card:nth-last-child(1) {
  grid-column: span 2;
}

.mp-adv-card__icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(27, 63, 74, 0.04);
  border: 1px solid rgba(27, 63, 74, 0.09);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--deep);
  flex-shrink: 0;
  transition: all 0.3s ease;
  margin-top: 1px;
}

.mp-adv-card:hover .mp-adv-card__icon {
  background: var(--deep);
  color: var(--accent);
  border-color: var(--deep);
  transform: scale(1.05);
}

.adv-icon-svg {
  transition: transform 0.3s ease;
}

.mp-adv-card__content {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mp-adv-card__title {
  font-family: var(--body);
  font-size: 15px;
  font-weight: 700;
  color: #000000;
  margin: 0;
  line-height: 1.25;
}

.mp-adv-card__desc {
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.45;
  color: #000000;
  font-weight: 700;
  margin: 0;
}

/* RESPONSIVE BREAKPOINTS */
@media (max-width: 1024px) {
  .mp-advantages-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .mp-adv-card:nth-last-child(1) {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .mp-hero-cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .mp-status-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 20px;
  }

  .mp-advantages-grid {
    grid-template-columns: 1fr;
  }

  .mp-adv-card:nth-last-child(1) {
    grid-column: span 1;
  }
}

/* ── View Switcher Tabs ── */
.mp-tabs {
  display: flex;
  justify-content: center;
  gap: 14px;
  padding: 0 clamp(24px, 6vw, 80px);
  margin: 40px 0 28px;
}
@media (max-width: 600px) {
  .mp-tabs { flex-direction: column; }
}
.mp-tab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 32px;
  border-radius: 100px;
  background: #fff;
  border: 1px solid var(--line);
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  color: var(--deep);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 4px 16px rgba(0,0,0,0.03);
}
.mp-tab-btn:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.mp-tab-btn.is-active {
  background: var(--deep);
  color: #fff;
  border-color: var(--deep);
  box-shadow: 0 12px 30px -6px rgba(27,63,74,0.35);
}
.mp-tab-btn .tab-icon {
  font-size: 17px;
}

/* ── Interactive Map View Container ── */
.mp-view__wrap {
  padding: 0 clamp(20px, 5vw, 60px) clamp(30px, 4vw, 50px);
}
.mp-view__frame {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 35px 90px -25px rgba(27,63,74,0.22), 0 4px 24px rgba(0,0,0,0.05);
  background: var(--deep);
}
.mp-map-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #ffffff;
}
@media (max-width: 768px) {
  .mp-map-stage { aspect-ratio: 4 / 3; }
}
.mp-map-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ── Interactive Map Pins ── */
.mp-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  cursor: pointer;
  z-index: 10;
}
.mp-pin__core {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--pin-color, var(--accent));
  border: 2px solid #fff;
  box-shadow: 0 0 12px rgba(0,0,0,0.4);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mp-pin__pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--pin-color, var(--accent));
  animation: pinPulse 2s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}
@keyframes pinPulse {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2.2); opacity: 0; }
}
.mp-pin.is-hovered .mp-pin__core,
.mp-pin.is-active .mp-pin__core {
  transform: scale(1.6);
  background: var(--accent);
  box-shadow: 0 0 20px var(--accent);
}

/* Tooltip on pin hover */
.mp-pin__tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-10px) scale(0.9);
  opacity: 0;
  pointer-events: none;
  background: rgba(27,63,74,0.92);
  border: 1px solid rgba(195,147,42,0.4);
  backdrop-filter: blur(10px);
  padding: 8px 12px;
  border-radius: 8px;
  white-space: nowrap;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}
.mp-pin__tooltip strong {
  font-family: var(--body);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.mp-pin__tooltip small {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--accent-2);
}
.mp-pin:hover .mp-pin__tooltip,
.mp-pin.is-hovered .mp-pin__tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(-14px) scale(1);
}

/* Map Badge */
.mp-map__badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(27, 63, 74, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  padding: 10px 18px;
  border-radius: 50px;
  color: rgba(255,255,255,0.9);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  z-index: 12;
}
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00FF88;
  box-shadow: 0 0 10px #00FF88;
}

/* Hide map badge on mobile & small screens */
@media (max-width: 768px) {
  .mp-map__badge {
    display: none !important;
  }
}

/* ── Filter Chips & Carousel Nav Controls ── */
.mp-filter-container {
  padding: 0 clamp(20px, 5vw, 60px);
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.mp-filter-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.chip {
  padding: 9px 20px;
  border-radius: 100px;
  background: #fff;
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(26,36,40,0.65);
  cursor: pointer;
  transition: all 0.25s ease;
}
.chip:hover, .chip.is-active {
  background: var(--deep);
  color: #fff;
  border-color: var(--deep);
  box-shadow: 0 4px 12px rgba(27,63,74,0.2);
}

/* Carousel Prev/Next Buttons */
.mp-carousel-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mp-carousel-arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--deep);
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.mp-carousel-arrow:hover {
  background: var(--deep);
  color: #fff;
  border-color: var(--deep);
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(27,63,74,0.25);
}

/* ── Enhanced Automatic & Manual Carousel Track ── */
.mp-carousel-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.mp-carousel-track {
  display: flex;
  gap: 22px;
  padding: 10px clamp(20px, 5vw, 60px) 36px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.mp-carousel-track::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.mp-card-item {
  flex: 0 0 320px;
  width: 320px;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 26px;
  position: relative;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.3s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,0.02);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media (max-width: 480px) {
  .mp-card-item {
    flex: 0 0 280px;
    width: 280px;
    padding: 20px 20px;
  }
}
.mp-card-item:hover, .mp-card-item.is-hovered {
  transform: translateY(-5px);
  border-color: var(--accent);
  box-shadow: 0 20px 40px -10px rgba(27,63,74,0.14);
}
.mp-card-item__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.kind-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}
.item-index {
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(26,36,40,0.35);
}
.item-title {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 400;
  color: var(--deep);
  margin: 0 0 12px;
  line-height: 1.15;
}
.item-acres {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 14px;
}
.item-acres strong {
  font-family: var(--display);
  font-size: 36px;
  color: var(--ink);
  line-height: 1;
}
.item-acres span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(26,36,40,0.45);
}
.item-desc {
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(26,36,40,0.65);
  margin: 0 0 20px;
}
.item-footer {
  border-top: 1px solid rgba(27,63,74,0.08);
  padding-top: 16px;
}
.inspect-link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--deep);
  font-weight: 700;
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;
}
.mp-card-item:hover .inspect-link {
  color: var(--accent);
  transform: translateX(4px);
}

/* ── Popup Detail Modal ── */
.mp-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(13,35,42,0.75);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.mp-modal-content {
  background: #fff;
  border-radius: 20px;
  max-width: 520px;
  width: 100%;
  overflow: hidden;
  position: relative;
  box-shadow: 0 40px 100px rgba(0,0,0,0.4);
  animation: slideUp 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.mp-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(0,0,0,0.06);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s;
  z-index: 10;
}
.mp-modal-close:hover {
  background: rgba(0,0,0,0.12);
}
.mp-modal-header {
  padding: 32px 32px 20px;
  border-top: 5px solid var(--accent);
  background: var(--light-bg);
}
.mp-modal-kind {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 6px;
}
.mp-modal-title {
  font-family: var(--display);
  font-size: 32px;
  color: var(--deep);
  margin: 0 0 10px;
}
.mp-modal-acres {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.acres-num {
  font-family: var(--display);
  font-size: 38px;
  color: var(--ink);
  line-height: 1;
}
.acres-unit {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(26,36,40,0.5);
}
.mp-modal-body {
  padding: 24px 32px 32px;
}
.mp-modal-desc {
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(26,36,40,0.75);
  margin: 0 0 24px;
}
.mp-modal-highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 28px;
}
.hl-box {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 14px 16px;
  border-radius: 10px;
}
.hl-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(26,36,40,0.5);
  display: block;
  margin-bottom: 4px;
}
.hl-val {
  font-size: 13px;
  color: var(--deep);
  font-weight: 600;
}
.mp-modal-btn {
  width: 100%;
  padding: 16px;
  border-radius: 12px;
  background: var(--deep);
  color: #fff;
  border: none;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.2s ease;
}
.mp-modal-btn:hover {
  background: var(--accent);
  color: #1a1a1a;
}

/* ============================================================
   EXPERIENCE OFFERS SECTION
   ============================================================ */
.offers-section{
  position: relative;
  padding: 100px clamp(24px,6vw,80px);
  background: #000;
  overflow: hidden;
}
.offers-section__bg-img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1; opacity: 0.85;
}
.offers-section__bg-overlay{
  position: absolute; inset: 0; z-index: 2;
  background: rgba(27, 63, 74, 0.75); /* Dark slate blue overlay */
}
.offers-section__inner{
  position: relative; z-index: 3;
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
  align-items: center; max-width: 1200px; margin: 0 auto;
}
@media (max-width:900px){
  .offers-section__inner{ grid-template-columns:1fr; gap:40px; }
}
.offers-section__img-wrap{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  aspect-ratio:4/4.5;
  background:rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 30px 60px rgba(0,0,0,0.4);
}
.offers-section__img{
  width:100%; height:100%; object-fit:cover;
  transition:opacity 0.4s ease;
}
.offers-section__img-caption{
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(transparent, rgba(27,63,74,0.95));
  padding:30px 20px 20px;
  color:#fff;
}
.offers-section__img-caption p{ margin:0; font-size:14px; line-height:1.5; color: rgba(255,255,255,0.9); }

.offers-eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--accent); margin:0 0 28px;
  text-align:left;
}
.offers-list{
  list-style:none; margin:0; padding:0;
  border-top:1px solid rgba(255,255,255,0.15);
}
.offers-list__item{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 8px;
  border-bottom:1px solid rgba(255,255,255,0.15);
  cursor:pointer;
  transition:all 0.25s ease;
}
.offers-list__label{
  font-family:var(--display);
  font-size:clamp(24px,3vw,40px);
  font-weight:400;
  line-height:0.95;
  color:rgba(255,255,255,0.4);
  transition:color 0.25s ease, font-weight 0.25s ease, transform 0.25s ease;
  letter-spacing:-0.01em;
}
.offers-list__arrow{
  font-size:20px; color:transparent;
  transition:color 0.25s ease, transform 0.25s ease;
}
.offers-list__item.is-active .offers-list__label,
.offers-list__item:hover .offers-list__label{
  color:#fff;
  font-style:italic;
  transform: translateX(10px);
}
.offers-list__item.is-active .offers-list__arrow,
.offers-list__item:hover .offers-list__arrow{
  color:var(--accent);
  transform: translateX(-5px);
}

/* ============================================================
   FEATURED SERVICES SECTION — horizontal scroll
   ============================================================ */
.services-section{
  padding: 80px 0;
  background:#fff;
  overflow:hidden;
}
.services-section__head{
  padding: 0 clamp(24px,6vw,80px);
  margin-bottom:44px;
}
.services-section__head h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(28px,4vw,46px);
  color:var(--deep); margin:10px 0 0;
}
.services-marquee{
  position:relative;
  overflow:hidden;
  width:100%;
  padding: 0 0 20px;
}
.services-marquee::before,
.services-marquee::after{
  content:'';
  position:absolute;
  top:0; bottom:0;
  width:80px;
  z-index:2;
  pointer-events:none;
}
.services-marquee::before{
  left:0;
  background:linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0));
}
.services-marquee::after{
  right:0;
  background:linear-gradient(270deg, rgba(255,255,255,1), rgba(255,255,255,0));
}
.services-track{
  display:flex;
  gap:24px;
  width:max-content;
  padding: 0 clamp(24px,6vw,80px);
  will-change:transform;
}
.services-track--auto{
  animation: services-scroll 28s linear infinite;
}
.services-track--auto:hover{ animation-play-state: paused; }
@keyframes services-scroll {
  0% { transform: translate3d(0,0,0); }
  100% { transform: translate3d(calc(-50% - 12px),0,0); }
}
.services-card{
  flex:0 0 320px;
  border-radius:16px; overflow:hidden;
  background:#fff; border:1px solid var(--line);
  transition:transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
}
.services-card:hover{
  transform: translateY(-4px);
  box-shadow:0 18px 36px -12px rgba(13,59,51,0.22);
}
.services-card__media{ aspect-ratio:4/3; overflow:hidden; }
.services-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform 0.6s ease; }
.services-card:hover .services-card__media img{ transform:scale(1.03); }
.services-card__body{ padding:20px; }
.services-card__body h3{
  font-family:var(--display); font-size:28px; line-height:0.95; font-weight:600;
  color:var(--deep); margin:0 0 10px;
  letter-spacing:-0.02em;
}
.services-card__body p{ font-size:14px; line-height:1.65; color:rgba(26,26,26,0.68); margin:0; }
.services-card__actions{ display:none; }
.btn-outline-dark, .btn-solid-green{ display:none; }

/* ============================================================
   LUXURY CTA SECTION
   ============================================================ */
.luxury-cta{
  position:relative; min-height:560px;
  display:flex; align-items:center; justify-content:flex-end;
  padding: 80px clamp(24px,6vw,80px);
  overflow:hidden;
}
.luxury-cta__bg-wrap{
  position:absolute; inset:0; z-index:1;
}
.luxury-cta__bg{
  width:100%; height:100%; object-fit:cover;
}
.luxury-cta__overlay{
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(to right, rgba(0,80,70,0.1) 0%, rgba(0,60,50,0.7) 50%, rgba(0,40,35,0.88) 100%);
}
.luxury-cta__content{
  position:relative; z-index:3;
  width:min(440px,90vw);
  color:#fff;
}
.luxury-cta__content h2{
  font-family:var(--display); font-size:clamp(28px,3.5vw,48px);
  font-weight:400; line-height:1.15; margin:0 0 36px;
  color:#fff;
}
.luxury-cta__content h2 em{ font-style:italic; color:#FFD700; }
.luxury-cta__form{
  display:flex; flex-direction:column; gap:12px;
}
.luxury-cta__form input{
  width:100%; padding:14px 16px; border:none; border-radius:4px;
  font-size:14px; background:rgba(255,255,255,0.12);
  color:#fff; outline:none; border:1px solid rgba(255,255,255,0.2);
  font-family:var(--body); backdrop-filter:blur(4px);
  transition:border-color 0.2s;
}
.luxury-cta__form input::placeholder{ color:rgba(255,255,255,0.6); }
.luxury-cta__form input:focus{ border-color:rgba(255,255,255,0.6); }
.luxury-cta__btn{
  padding:15px; background:var(--accent); color:#1a1a1a;
  border:none; font-size:15px; font-weight:700; cursor:pointer;
  border-radius:4px; font-family:var(--body);
  transition:background 0.2s ease;
  letter-spacing:0.03em;
}
.luxury-cta__btn:hover{ background:var(--accent-2); }
.luxury-cta__disclaimer{
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.55;
  color: #ffffff;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  padding: 9px 14px;
  margin: 8px 0 0;
  text-align: center;
  letter-spacing: 0.01em;
  backdrop-filter: blur(4px);
}
.luxury-cta__disclaimer strong { color: var(--accent); }

@media (max-width:760px){
  .luxury-cta{ justify-content:center; }
  .luxury-cta__overlay{
    background:rgba(0,40,35,0.75);
  }
}

/* ============================================================
   FOOTER — White / Cream
   ============================================================ */
.footer{
  background: #faf9f7;
  color: rgba(26, 36, 40, 0.65);
  padding:80px clamp(24px,5vw,64px) 40px;
  border-top: 1px solid rgba(27, 63, 74, 0.1);
}
.footer__top{
  display:grid; grid-template-columns: 2fr 1fr 1fr; gap:40px;
  padding-bottom:60px; border-bottom:1px solid rgba(27, 63, 74, 0.1); margin-bottom:30px;
}
@media (max-width:760px){
  .footer__top{ grid-template-columns: 1fr; }
}
.footer__brand{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.footer__logo{ display:block; max-width:180px; height:auto; }
.footer__brand h2{ font-family:var(--display); font-size:32px; color:var(--deep); margin:0; font-weight:600; }
.footer__brand p{ max-width:34ch; font-size:15px; line-height:1.6; margin:0; color: rgba(26, 36, 40, 0.6); }
.footer__links, .footer__contact{ display:flex; flex-direction:column; gap:12px; }
.footer__contact p { font-family:var(--display); font-size:18px; color:var(--deep); margin:0 0 4px; }
.footer__links a, .footer__contact a { color: rgba(26,36,40,0.6); text-decoration:none; transition:color 0.2s; font-size:14px; }
.footer__links a:hover, .footer__contact a:hover { color: var(--deep); }
.footer__bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; font-size:13px; color: rgba(26,36,40,0.45); }
.footer__socials{ display:flex; gap:20px; }
.footer__socials a{ color: rgba(26,36,40,0.5); text-decoration:none; transition:color 0.2s; }
.footer__socials a:hover{ color: var(--deep); }

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .pin__ring{ animation:none; }
}

/* ── Responsive: Offers section ── */
@media (max-width:760px){
  .offers-section{ padding:60px 20px; }
  .offers-section__img-wrap{ aspect-ratio:3/2.5; }
  .offers-list__label{ font-size:clamp(20px,7vw,28px); }
  .offers-list__item{ padding:16px 4px; }
}

/* ── Responsive: Services section ── */
@media (max-width:760px){
  .services-section{ padding:60px 0; }
  .services-section__head{ padding:0 20px; margin-bottom:28px; }
  .services-card{ flex:0 0 280px; }
  .services-track{ padding:0 20px; gap:16px; }
  .services-marquee::before,
  .services-marquee::after{ width:40px; }
}

/* ============================================================
   GLOBAL BOOKING SYSTEM & MODALS (LUXURY RESORT RESIDENTIAL)
   ============================================================ */

.booking-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 24, 30, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.3s ease;
}

.booking-modal-card {
  background: #ffffff;
  border-radius: 20px;
  max-width: 580px;
  width: 100%;
  padding: 36px 32px 32px;
  position: relative;
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(195, 147, 42, 0.3);
  animation: slideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 90vh;
  overflow-y: auto;
}

.booking-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(27, 63, 74, 0.06);
  border: none;
  font-size: 16px;
  color: var(--deep);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

.booking-modal-close:hover {
  background: var(--deep);
  color: #fff;
}

.booking-modal-header {
  text-align: left;
  margin-bottom: 24px;
}

.booking-modal-header h3 {
  font-family: var(--display);
  font-size: 30px;
  color: var(--deep);
  margin: 4px 0 6px;
}

.booking-modal-header p {
  font-size: 13.5px;
  color: rgba(26, 36, 40, 0.65);
  margin: 0;
}

/* Form inputs & grid */
.booking-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--deep);
}

.booking-form input:not(.phone-number-input),
.booking-form select:not(.country-code-select),
.booking-form textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid rgba(27, 63, 74, 0.16);
  border-radius: 8px;
  font-family: var(--body);
  font-size: 14px;
  color: var(--ink);
  background: #faf9f7;
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.booking-form input:not(.phone-number-input):focus,
.booking-form select:not(.country-code-select):focus,
.booking-form textarea:focus {
  border-color: var(--accent);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(195, 147, 42, 0.15);
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 580px) {
  .form-grid-2 {
    grid-template-columns: 1fr;
  }
}

.property-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%231B3F4A%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 14px top 50%;
  background-size: 10px auto;
  appearance: none;
}

.booking-submit-btn {
  width: 100%;
  padding: 15px;
  border-radius: 8px;
  background: var(--deep);
  color: #ffffff;
  border: none;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 6px;
}

.booking-submit-btn:hover {
  background: var(--accent);
  color: #1a1a1a;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(195, 147, 42, 0.4);
}

.booking-disclaimer {
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.55;
  color: #ffffff;
  background: var(--deep);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 8px 0 0;
  text-align: center;
  letter-spacing: 0.01em;
}

.booking-disclaimer strong {
  color: var(--accent);
}

/* Phone input — country code + number side by side */
.phone-input-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid rgba(27, 63, 74, 0.18);
  border-radius: 8px;
  overflow: hidden;
  background: #faf9f7;
  transition: border-color 0.25s, box-shadow 0.25s, background-color 0.25s;
  width: 100%;
}

.phone-input-wrap:focus-within {
  border-color: var(--accent);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(195, 147, 42, 0.15);
}

.country-code-select {
  flex-shrink: 0;
  width: 135px;
  border: none;
  border-right: 1px solid rgba(27, 63, 74, 0.15);
  border-radius: 0;
  background: transparent;
  font-family: var(--body);
  font-size: 13.5px;
  padding: 13px 26px 13px 12px;
  color: #1A2428 !important;
  cursor: pointer;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'12' height%3D'12'%3E%3Cpath fill%3D'%231B3F4A' d%3D'M6 8L1 3h10z'%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px;
}

.country-code-select option {
  background: #ffffff;
  color: #1A2428;
  padding: 6px 10px;
}

.country-code-select--cta {
  background-color: transparent;
  color: #ffffff !important;
  border-right-color: rgba(255, 255, 255, 0.2);
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'12' height%3D'12'%3E%3Cpath fill%3D'%23ffffff' d%3D'M6 8L1 3h10z'%2F%3E%3C%2Fsvg%3E");
}

.country-code-select--cta option {
  background: #1B3F4A;
  color: #ffffff;
}

/* Luxury CTA Dark Glassmorphism Phone Input Container */
.phone-input-wrap--cta {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(4px);
  border-radius: 4px;
}

.phone-input-wrap--cta:focus-within {
  border-color: rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1) !important;
}

.phone-input-wrap--cta .phone-number-input {
  color: #ffffff !important;
}

.phone-input-wrap--cta .phone-number-input::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

.input-error-wrap {
  border-color: #e53e3e !important;
  background: #fff5f5 !important;
}

.phone-number-input {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: 100% !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  outline: none !important;
  padding: 13px 15px !important;
  font-family: var(--body);
  font-size: 14px;
  color: #1A2428 !important;
  box-shadow: none !important;
  height: 46px !important;
  box-sizing: border-box !important;
}

.phone-number-input::placeholder {
  color: rgba(26, 36, 40, 0.45);
}

@media (max-width: 480px) {
  .country-code-select {
    width: 115px;
    font-size: 12.5px;
    padding-right: 20px;
  }
}

/* Validation states */
.input-error {
  border-color: #e53e3e !important;
  background: #fff5f5 !important;
}

.field-error {
  display: block;
  font-size: 10.5px;
  color: #e53e3e;
  font-weight: 600;
  margin-top: 3px;
  letter-spacing: 0.02em;
}

/* Optional label tag */
.optional-tag {
  font-size: 9px;
  font-weight: 400;
  color: rgba(26, 36, 40, 0.4);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 3px;
}

/* Send error banner */
.send-error-banner {
  background: #fff5f5;
  border: 1px solid #fed7d7;
  color: #e53e3e;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  padding: 10px 14px;
  text-align: center;
}

/* CTA section inline field wrappers */
.cta-field-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cta-field-wrap--full {
  flex: 1 1 100%;
  width: 100%;
}

.cta-field-error {
  font-size: 10.5px;
  color: #ffb3b3;
  font-weight: 600;
  margin-top: 2px;
}

.cta-send-error {
  background: rgba(229, 62, 62, 0.15);
  border: 1px solid rgba(229, 62, 62, 0.4);
  color: #ffb3b3;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  padding: 10px 14px;
  text-align: center;
  width: 100%;
}

/* Disabled submit state */
.booking-submit-btn:disabled,
.luxury-cta__btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none !important;
}



/* Success Modal */
.booking-success-card {
  background: #ffffff;
  border-radius: 20px;
  max-width: 480px;
  width: 100%;
  padding: 40px 32px;
  text-align: center;
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.45);
  border: 2px solid var(--accent);
  animation: slideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.success-icon-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  box-shadow: 0 10px 25px rgba(195, 147, 42, 0.35);
}

.booking-success-card h3 {
  font-family: var(--display);
  font-size: 28px;
  color: var(--deep);
  margin: 0 0 10px;
}

.booking-success-card p {
  font-size: 14px;
  color: rgba(26, 36, 40, 0.7);
  line-height: 1.6;
  margin: 0 0 12px;
}

.success-property-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--deep);
  background: rgba(27, 63, 74, 0.08);
  padding: 6px 14px;
  border-radius: 6px;
  margin: 6px 0 16px;
  border: 1px solid rgba(27, 63, 74, 0.12);
}

.success-close-btn {
  width: 100%;
  padding: 14px;
  border-radius: 8px;
  background: var(--deep);
  color: #fff;
  border: none;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.25s;
}

.success-close-btn:hover {
  background: var(--accent);
  color: #1a1a1a;
}

/* Nav CTA Button */
.nav__cta-btn {
  padding: 10px 20px;
  border-radius: 100px;
  background: var(--accent);
  color: #1a1a1a;
  border: none;
  font-family: var(--body);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-left: 8px;
  box-shadow: 0 4px 14px rgba(195, 147, 42, 0.25);
}

.nav__cta-btn:hover {
  background: var(--deep);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(27, 63, 74, 0.3);
}

/* Landing Page Luxury CTA Container Updates */
.luxury-cta__container {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
}

@media (max-width: 990px) {
  .luxury-cta__container {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

.luxury-cta__desc {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 12px;
}

.cta-form-row {
  display: flex;
  gap: 12px;
  width: 100%;
}

@media (max-width: 600px) {
  .cta-form-row {
    flex-direction: column;
    gap: 12px;
  }
}

.cta-select {
  width: 100%;
  padding: 14px 16px;
  border-radius: 4px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  outline: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-family: var(--body);
  backdrop-filter: blur(8px);
  cursor: pointer;
}

.cta-select option {
  background: #1B3F4A;
  color: #ffffff;
}

.luxury-cta__form textarea {
  width: 100%;
  padding: 12px 16px;
  border-radius: 4px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  outline: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-family: var(--body);
  backdrop-filter: blur(4px);
  resize: vertical;
}

.luxury-cta__form textarea::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.eyebrow-light {
  color: var(--accent) !important;
}

/* ── Responsive: Nav CTA ── */
@media (max-width:480px){
  .nav{ padding:16px 18px; }
  .nav__brand b{ font-size:18px; }
  .nav__cta-btn{ padding:8px 14px !important; font-size:12.5px; }
}