/* ===========================================================
   UNIMARK GROUP PALETTE — DESIGN TOKENS
   (colors extracted directly from the Unimark Group logo)
   Master Orange:    #f27921  (primary brand color — CTAs, links, accents, navbar highlights)
   Orange Dark:      #d6660f  (hover state for orange elements)
   Ash Grey:         #828a8a  (secondary brand color — replaces old navy for dark sections)
   Ash Grey Dark:    #5c6363  (deeper structural tone — footer base / footer-bottom strip)
   Text Grey:        #6c7270  (body copy / muted text, warmed slightly toward ash)
   Light Grey:        #f5f4f2  (section backgrounds — warm off-white, not blue-tinted)
   Border Grey:       #e4e2df
   Display font: Playfair Display (serif headings)
   Body font:    Nunito Sans (sans-serif body/UI)

   Design tokens below (radius/shadow/motion/gradient) drive the "modern" layer —
   softer elevation, rounded surfaces, consistent motion — without introducing any
   colors outside the palette above.
=========================================================== */

:root {
  --navy: #828a8a;       /* ash grey now drives "dark section" role previously held by navy */
  --navy-dark: #5c6363;  /* deeper ash for footer-bottom strip */
  --sky: #f27921;        /* master orange now drives links/buttons/accents previously sky blue */
  --orange: #f27921;     /* CTA orange = same master orange, single consistent brand color */
  --orange-dark: #d6660f;
  --text-grey: #6c7270;
  --light-grey: #f5f4f2;
  --border-grey: #e4e2df;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-xs: 0 2px 8px rgba(31, 41, 41, 0.06);
  --shadow-sm: 0 8px 24px rgba(31, 41, 41, 0.08);
  --shadow-md: 0 16px 40px rgba(31, 41, 41, 0.12);
  --shadow-lg: 0 28px 60px rgba(31, 41, 41, 0.18);
  --shadow-glow: 0 12px 28px rgba(242, 121, 33, 0.3);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 0.3s var(--ease);

  --gradient-orange: linear-gradient(135deg, #f4893c 0%, #f27921 45%, #d6660f 100%);
  --gradient-dark: linear-gradient(135deg, #6a7272 0%, #5c6363 55%, #454b4b 100%);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Nunito Sans', sans-serif;
  color: #333;
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
  color: #1f2d3d;
  margin: 0;
}

a {
  text-decoration: none;
  transition: 0.25s var(--ease);
}

p { margin: 0; }

img { max-width: 100%; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Generic photo placeholder look */
.hero-photo-placeholder,
.fp-photo-placeholder,
.welcome-photo-placeholder,
.property-photo-placeholder,
.lifestyle-photo-placeholder,
.city-photo-placeholder,
.agent-photo-placeholder {
  background: repeating-linear-gradient(45deg, #e9e7e3, #e9e7e3 10px, #f2f0ec 10px, #f2f0ec 20px);
  color: var(--text-grey);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.85rem;
  border: 1px dashed var(--border-grey);
  transition: transform 0.5s var(--ease);
}

/* ===================== TOPBAR ===================== */
.topbar {
  background: var(--light-grey);
  border-bottom: 1px solid var(--border-grey);
  padding: 10px 0;
  font-size: 0.82rem;
  color: var(--text-grey);
}
.topbar-item { margin-right: 28px; }
.topbar-item i { color: var(--sky); margin-right: 6px; }
.topbar-right a {
  color: var(--text-grey);
  margin-left: 14px;
  font-size: 0.85rem;
  display: inline-block;
}
.topbar-right a:hover { color: var(--sky); transform: translateY(-1px); }

/* ===================== NAVBAR ===================== */
.main-navbar {
  background: var(--gradient-orange);
  padding: 14px 0;
  position: sticky;
  top: 0;
  z-index: 1030;
  transition: padding 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.navbar-brand {
  color: #fff;
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
}
.brand-logo-img {
  height: 58px;
  width: auto;
  object-fit: contain;
  transition: height 0.3s var(--ease);
}

/* Shrunk state — applied via JS once the page is scrolled past the topbar,
   removed again on scroll back to top. Every navbar element scales down
   together so the bar reads as "the same navbar, just compact". */
.main-navbar.navbar-scrolled {
  padding: 6px 0;
  box-shadow: 0 8px 24px rgba(20, 20, 20, 0.18);
}
.navbar-scrolled .brand-logo-img { height: 40px; }
.navbar-scrolled .main-menu .nav-link { padding: 8px 12px; font-size: 0.85rem; }
.navbar-scrolled .utility-menu .nav-link { padding: 6px 10px; font-size: 0.8rem; }
.navbar-scrolled .btn-cta-orange,
.navbar-scrolled .btn-whatsapp { height: 36px; min-width: 120px; font-size: 0.8rem; }
.brand-icon { color: #fff; margin-right: 8px; font-size: 1.4rem; }

.main-menu .nav-link {
  color: rgba(255,255,255,0.88);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 10px 16px;
  position: relative;
}
.main-menu .nav-link::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s var(--ease);
}
.main-menu .nav-link.active,
.main-menu .nav-link:hover { color: #fff; }
.main-menu .nav-link.active::after,
.main-menu .nav-link:hover::after { transform: scaleX(1); }

.utility-menu .nav-link {
  color: rgba(255,255,255,0.88);
  font-size: 0.88rem;
  padding: 8px 12px;
}
.utility-menu .nav-link:hover { color: #fff; }
.fav-count {
  background: rgba(255,255,255,0.18);
  border-radius: 50%;
  padding: 1px 7px;
  font-size: 0.75rem;
  margin-left: 4px;
}

.btn-cta-orange,
.btn-whatsapp {
  min-width: 140px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 20px;
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  font-weight: 700;
  box-sizing: border-box;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}

.btn-cta-orange {
  background: #ffffff;
  color: var(--orange) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
.btn-cta-orange:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.18); }

.btn-whatsapp {
  background: #25d366;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(37,211,102,0.35);
}
.btn-whatsapp:hover { background: #1ebe5b; color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(37,211,102,0.4); }

/* ===================== LEAD FORM MODAL ===================== */
.lead-modal-content { border: none; border-radius: var(--radius-lg); overflow: visible; position: relative; box-shadow: var(--shadow-lg); }
.lead-modal-close {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 20;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: #fff;
  background-size: 0.7em;
  opacity: 1;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.lead-modal-close:hover { background-color: #fff; transform: rotate(90deg) scale(1.05); box-shadow: var(--shadow-md); }
@media (max-width: 575.98px) {
  .lead-modal-close { top: 10px; right: 10px; }
}
.lead-modal-title { font-size: 1.5rem; margin-bottom: 6px; color: var(--orange); }
.lead-modal-subtitle { color: var(--text-grey); font-size: 0.9rem; margin-bottom: 24px; }
.lead-modal-note { color: var(--text-grey); font-size: 0.78rem; }
.lead-modal-note i { color: var(--sky); margin-right: 4px; }
.lead-input {
  background: var(--light-grey);
  border: 1px solid var(--border-grey);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}
.lead-input:focus {
  border-color: var(--sky);
  box-shadow: 0 0 0 4px rgba(242,121,33,0.15);
  background: #fff;
}
.btn-lead-submit {
  background: var(--gradient-orange);
  color: #fff;
  font-weight: 700;
  padding: 13px;
  border-radius: var(--radius-pill);
  font-size: 1rem;
  border: none;
  box-shadow: var(--shadow-glow);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn-lead-submit:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(242,121,33,0.38); color: #fff; }
.btn-lead-submit:disabled { opacity: 0.75; transform: none; }

/* ===================== PROJECT / BUSINESS DETAIL PAGES ===================== */
.detail-hero {
  position: relative;
  height: 380px;
  background-size: cover;
  background-position: center;
}
.detail-hero-overlay {
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding-bottom: 36px;
  background: linear-gradient(180deg, rgba(20,24,24,0.25) 0%, rgba(15,18,18,0.82) 100%);
}
.detail-breadcrumb { font-size: 0.82rem; margin-bottom: 14px; }
.detail-breadcrumb a { color: rgba(255,255,255,0.75); }
.detail-breadcrumb a:hover { color: #fff; }
.detail-breadcrumb span:not(.sep) { color: #fff; font-weight: 600; }
.detail-breadcrumb .sep { color: rgba(255,255,255,0.5); margin: 0 8px; }
.detail-hero-title { color: #fff; font-size: 2.4rem; margin-bottom: 16px; }
.detail-hero-meta { display: flex; flex-wrap: wrap; gap: 10px; }
.detail-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.16);
  color: #fff;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 600;
  backdrop-filter: blur(6px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.18);
}
.detail-hero-badge i { color: var(--orange); }
.detail-badge-ongoing { background: var(--gradient-orange); border-color: transparent; }
.detail-badge-ongoing i { color: #fff; }
.detail-badge-upcoming { background: var(--navy); border-color: transparent; }
.detail-badge-completed { background: #2e9e5b; border-color: transparent; }

.detail-section-title {
  font-size: 1.5rem;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--orange);
  display: inline-block;
  position: relative;
}
.detail-description { color: var(--text-grey); line-height: 1.8; }
.detail-description p { margin-bottom: 1rem; }

.detail-highlight-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--light-grey);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #1f2d3d;
  height: 100%;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}
.detail-highlight-chip:hover {
  background: #fff;
  box-shadow: var(--shadow-sm);
  transform: translateY(-3px);
}
.detail-highlight-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gradient-orange);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  box-shadow: 0 6px 14px rgba(242,121,33,0.3);
}

.detail-specs-table { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-xs); }
.detail-specs-table thead { background: var(--gradient-dark); color: #fff; }
.detail-specs-table th, .detail-specs-table td { padding: 14px 16px; vertical-align: middle; }
.detail-specs-table tbody tr:nth-child(even) { background: var(--light-grey); }
.detail-specs-table tbody tr { transition: background 0.2s var(--ease); }
.detail-specs-table tbody tr:hover { background: rgba(242,121,33,0.07); }

.booking-sidebar {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 28px;
  position: sticky;
  top: 20px;
  border: 1px solid rgba(228,226,223,0.6);
}
.booking-sidebar-title { font-size: 1.2rem; margin-bottom: 4px; }
.booking-sidebar-subtitle { color: var(--text-grey); font-size: 0.85rem; margin-bottom: 18px; }
.booking-trust-list {
  list-style: none;
  padding: 14px 16px;
  margin: 0 0 22px;
  background: rgba(46,158,91,0.08);
  border-radius: var(--radius-md);
}
.booking-trust-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: #1f2d3d;
  padding: 4px 0;
}
.booking-trust-list i { color: #2e9e5b; }
.booking-sidebar .lead-modal-note { text-align: left; }

.dropdown-menu {
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 8px;
}
.dropdown-item { font-size: 0.9rem; padding: 9px 16px; border-radius: var(--radius-sm); transition: background 0.2s var(--ease), color 0.2s var(--ease); }
.dropdown-item:hover { background: rgba(242,121,33,0.1); color: var(--sky); }

/* ===================== HERO ===================== */
.hero-section { position: relative; }

.hero-photo-placeholder {
  height: 560px;
  width: 100%;
  font-size: 1.4rem;
  /* When replacing the placeholder div with a real photo, use either:
     1) <img class="hero-photo" src="..."> with the rule below, or
     2) background-image here with background-size: cover; background-position: center;
     Recommended export size for the photo: 1920px wide x 900-1000px tall (JPG/WebP) */
  background-size: cover;
  background-position: center;
}
.hero-photo {
  width: 100%;
  height: 560px;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hero-arrow {
  width: 44px;
  height: 44px;
  background: var(--gradient-orange);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  opacity: 0.95;
  box-shadow: var(--shadow-glow);
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.hero-arrow:hover { transform: scale(1.08); opacity: 1; }
.carousel-control-prev, .carousel-control-next { width: 6%; opacity: 1; }
.carousel-control-prev { justify-content: flex-start; padding-left: 24px; }
.carousel-control-next { justify-content: flex-end; padding-right: 24px; }

/* Floating property card */
.floating-property-card {
  position: absolute;
  top: 90px;
  left: 6%;
  width: 320px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 5;
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.floating-property-card:hover { transform: translateY(-6px); box-shadow: 0 34px 70px rgba(0,0,0,0.22); }
.fp-photo-placeholder { height: 130px; font-size: 0.85rem; transition: transform 0.5s var(--ease); }
.floating-property-card:hover .fp-photo-placeholder { transform: scale(1.06); }
.fp-body { padding: 18px 20px; }
.fp-body h5 { font-size: 1.05rem; margin-bottom: 6px; }
.fp-address { font-size: 0.8rem; color: var(--text-grey); margin-bottom: 10px; }
.fp-address i { color: var(--sky); margin-right: 4px; }
.fp-price { font-size: 1.25rem; font-weight: 800; color: #1f2d3d; margin-bottom: 10px; }
.fp-sqft { font-size: 0.8rem; color: var(--text-grey); font-weight: 600; margin-left: 6px; }
.fp-meta { display: flex; gap: 16px; font-size: 0.82rem; color: var(--text-grey); margin-bottom: 8px; }
.fp-meta i { color: var(--sky); margin-right: 4px; }
.fp-type { font-size: 0.72rem; color: var(--text-grey); font-weight: 700; letter-spacing: 0.5px; margin-bottom: 14px; }
.btn-details {
  background: var(--gradient-orange);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 8px 24px;
  border-radius: var(--radius-pill);
  display: inline-block;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  box-shadow: 0 8px 18px rgba(242,121,33,0.25);
}
.btn-details:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 24px rgba(242,121,33,0.35); }

/* Search bar */
.search-bar-wrap {
  position: relative;
  margin-top: -32px;
  z-index: 6;
}
.search-bar {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  padding: 8px 10px;
  flex-wrap: wrap;
  border: 1px solid rgba(228,226,223,0.6);
}
.search-field {
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.search-field.grow { flex: 1 1 220px; }
.search-field.divider { border-left: 1px solid var(--border-grey); }
.search-field i { color: var(--sky); }
.search-field input {
  border: none;
  outline: none;
  font-size: 0.9rem;
  width: 100%;
  background: transparent;
}
.form-select-plain {
  border: none;
  outline: none;
  font-size: 0.9rem;
  color: #444;
  background: transparent;
}
.btn-clear {
  border: none;
  background: transparent;
  color: var(--sky);
  font-weight: 700;
  font-size: 0.88rem;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  transition: background 0.25s var(--ease);
}
.btn-clear:hover { background: rgba(242,121,33,0.08); }
.btn-go {
  background: var(--gradient-orange);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 11px 28px;
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 18px rgba(242,121,33,0.25);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn-go:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 24px rgba(242,121,33,0.35); }

/* ===================== SECTION HEADINGS ===================== */
.section-heading h2 { font-size: 2.1rem; margin-bottom: 10px; }
.section-heading p { color: var(--text-grey); font-size: 0.95rem; }
.section-heading-row .section-heading { margin-bottom: 0; }

.slider-nav .btn-outline-nav {
  border: 1px solid var(--sky);
  color: var(--sky);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 7px 20px;
  border-radius: var(--radius-pill);
  margin-left: 8px;
  background: #fff;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.slider-nav .btn-outline-nav:hover { background: var(--gradient-orange); color: #fff; border-color: transparent; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(242,121,33,0.25); }

/* ===================== WELCOME SECTION ===================== */
.welcome-section { background: var(--light-grey); padding: 90px 0; }
.welcome-photo-placeholder { height: 220px; border-radius: var(--radius-md); margin-bottom: 24px; }

.welcome-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 26px 26px 30px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
  border: 1px solid rgba(228,226,223,0.5);
}
.welcome-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}
.welcome-card-photo {
  width: 100%;
  height: 220px;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 24px;
}
.welcome-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--ease); }
.welcome-card:hover .welcome-card-photo img { transform: scale(1.08); }
.welcome-card h4 { font-size: 1.3rem; margin-bottom: 14px; }
.welcome-card-desc {
  color: var(--text-grey);
  font-size: 0.9rem;
  height: 4.5em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.welcome-card-desc p { margin: 0; }
.welcome-read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 18px;
  color: var(--orange);
  font-weight: 700;
  font-size: 0.85rem;
  transition: gap 0.25s var(--ease), color 0.25s var(--ease);
}
.welcome-read-more:hover { color: var(--orange-dark); gap: 10px; }

/* ===================== MANAGEMENT BODY / TEAM ===================== */
.featured-leader-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.featured-leader-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.featured-leader-signoff {
  margin-top: 26px;
  padding-left: 18px;
  border-left: 3px solid var(--orange);
}
.featured-leader-name { font-family: 'Playfair Display', serif; font-size: 1.2rem; font-weight: 700; color: #1f2d3d; }
.featured-leader-role { color: var(--text-grey); font-size: 0.88rem; }

.team-card {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(228,226,223,0.5);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
  height: 100%;
}
.team-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.team-photo { width: 100%; aspect-ratio: 4 / 5; overflow: hidden; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--ease); }
.team-card:hover .team-photo img { transform: scale(1.08); }
.team-body { padding: 16px 14px; text-align: center; }
.team-name { font-weight: 700; color: #1f2d3d; font-size: 0.95rem; margin-bottom: 2px; }
.team-role { color: var(--orange); font-size: 0.78rem; font-weight: 600; }

/* ===================== FEATURED / FOR-SALE PROPERTY CARDS ===================== */
.featured-section, .for-sale-section { padding: 90px 0; }
.for-sale-section { background: var(--light-grey); }

.property-card {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
  border: 1px solid rgba(228,226,223,0.5);
}
.property-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}
.property-photo-placeholder {
  height: 220px;
  position: relative;
  font-size: 0.85rem;
  overflow: hidden;
}
.property-photo-placeholder.photo-tall { height: 260px; }
.property-card:hover .property-photo-placeholder { transform: scale(1.06); }

.badge-featured {
  position: absolute;
  top: 14px;
  left: 14px;
  background: #4fb567;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.5px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.badge-status {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(31,45,61,0.85);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.5px;
}
.badge-hot {
  position: absolute;
  top: 48px;
  right: 14px;
  background: #e23636;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 10px rgba(226,54,54,0.35);
}
.price-overlay {
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: rgba(20,20,20,0.6);
  backdrop-filter: blur(4px);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  padding: 7px 16px;
  border-radius: var(--radius-md);
}
.price-overlay small { font-weight: 600; font-size: 0.72rem; display: block; opacity: 0.85; }

.card-arrow-prev, .card-arrow-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.92);
  color: #1f2d3d;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  box-shadow: var(--shadow-xs);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease);
}
.property-photo-placeholder:hover .card-arrow-prev,
.property-photo-placeholder:hover .card-arrow-next { opacity: 1; }
.card-arrow-prev:hover, .card-arrow-next:hover { background: var(--orange); color: #fff; }
.card-arrow-prev { left: 12px; }
.card-arrow-next { right: 12px; }

.property-body { padding: 22px 24px; }
.property-body h5 { font-size: 1.1rem; margin-bottom: 6px; }
.prop-address { font-size: 0.82rem; color: var(--text-grey); margin-bottom: 8px; }
.prop-address i { color: var(--sky); margin-right: 4px; }
.prop-type { font-size: 0.72rem; font-weight: 700; color: var(--sky); letter-spacing: 0.5px; margin-bottom: 14px; }
.prop-meta { display: flex; gap: 18px; font-size: 0.85rem; color: #444; margin-bottom: 10px; flex-wrap: wrap; }
.prop-meta i { color: var(--sky); margin-right: 4px; }
.prop-meta small { color: var(--text-grey); margin-left: 2px; }
.property-body hr { border-color: var(--border-grey); margin: 14px 0; }
.prop-agent { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; font-weight: 600; }
.agent-avatar-placeholder {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--light-grey);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--orange);
  font-size: 0.8rem;
}
.agent-avatar-placeholder img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }

.prop-share { display: flex; gap: 6px; }
.prop-share-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--light-grey);
  color: var(--text-grey);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.prop-share-icon:hover { background: var(--orange); color: #fff; transform: translateY(-2px); }

/* ===================== WHY HOUZEZ / INQUIRY FORM ===================== */
.why-section {
  background: var(--gradient-dark);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.why-bg-pattern {
  position: absolute;
  left: 0; top: 0;
  width: 45%;
  height: 100%;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 2px, transparent 2px, transparent 14px);
  opacity: 0.6;
}
.why-title { color: #fff; font-size: 1.9rem; max-width: 460px; position: relative; z-index: 2; }
.why-point { position: relative; z-index: 2; }
.why-number { color: rgba(255,255,255,0.35); font-family: 'Playfair Display', serif; font-size: 1.5rem; }
.why-point h5 { color: #fff; font-size: 1.05rem; margin: 10px 0 14px; }
.why-divider { border-color: var(--orange); opacity: 0.6; width: 40px; margin: 0 0 14px; }
.why-point p { color: rgba(255,255,255,0.68); font-size: 0.85rem; }

.inquiry-form-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 38px 40px;
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 2;
}
.inquiry-form-card h4 { font-size: 1.35rem; margin-bottom: 8px; }
.inquiry-form-card > p { font-size: 0.85rem; margin-bottom: 24px; }
.inquiry-form-card .form-label { font-size: 0.85rem; font-weight: 700; color: #1f2d3d; margin-bottom: 6px; }
.inquiry-form-card .form-control,
.inquiry-form-card .form-select {
  border: 1px solid var(--border-grey);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 0.88rem;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.inquiry-form-card .form-control:focus,
.inquiry-form-card .form-select:focus {
  border-color: var(--sky);
  box-shadow: 0 0 0 4px rgba(242,121,33,0.15);
}
.btn-submit {
  background: var(--gradient-orange);
  color: #fff;
  font-weight: 700;
  padding: 13px;
  border-radius: var(--radius-pill);
  font-size: 0.95rem;
  box-shadow: var(--shadow-glow);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn-submit:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 34px rgba(242,121,33,0.38); }

/* ===================== LIFESTYLES / CITIES ===================== */
.lifestyles-section, .cities-section { padding: 90px 0; }

.lifestyle-card, .city-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.lifestyle-card:hover, .city-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.lifestyle-photo-placeholder { height: 100%; font-size: 0.85rem; }
.lifestyle-tall .lifestyle-photo-placeholder { height: 280px; }
.lifestyle-short .lifestyle-photo-placeholder { height: 150px; }
.city-photo-placeholder { height: 220px; font-size: 0.85rem; transition: transform 0.5s var(--ease); }
.city-card:hover .city-photo-placeholder,
.lifestyle-card:hover .lifestyle-photo-placeholder { transform: scale(1.08); }

/* Single-row horizontal scroller for the "Explore Projects" gallery —
   cards never wrap to a second row; Prev/Next buttons + JS auto-scroll move it instead. */
.project-gallery-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 18px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  padding: 4px 4px 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.project-gallery-row::-webkit-scrollbar { display: none; }
.city-card-wrap {
  flex: 0 0 auto;
  width: 260px;
  scroll-snap-align: start;
}
.city-card-wrap .city-card { height: 100%; }

.lifestyle-overlay, .city-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15,20,20,0.82) 0%, rgba(15,20,20,0) 58%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px 20px;
  color: #fff;
  pointer-events: none;
}
.lifestyle-overlay h5, .city-overlay h5 { color: #fff; font-size: 1.15rem; margin-bottom: 4px; }
.lifestyle-overlay span, .city-overlay span { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.5px; opacity: 0.9; }

.lifestyle-card::after, .city-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(242,121,33,0);
  transition: background 0.35s var(--ease);
}
.lifestyle-card:hover::after, .city-card:hover::after {
  background: rgba(242,121,33,0.14);
}

/* Project gallery lightbox (homepage "Explore Projects" popup) — every photo,
   regardless of its uploaded dimensions, is letterboxed into the same frame. */
.project-gallery-carousel .project-gallery-img {
  max-height: 65vh;
  width: 100%;
  object-fit: contain;
  background: #10161c;
}

.btn-solid-orange {
  background: var(--gradient-orange);
  color: #fff !important;
  border: none;
  font-weight: 700;
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 18px rgba(242,121,33,0.25);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn-solid-orange:hover { color: #fff !important; transform: translateY(-2px); box-shadow: 0 12px 24px rgba(242,121,33,0.35); }

/* ===================== AGENTS / GET IN TOUCH ===================== */
.agents-section { background: var(--light-grey); padding: 90px 0; }
.agent-photo-placeholder {
  width: 100px; height: 100px;
  border-radius: 50%;
  margin: 0 auto 18px;
  font-size: 0.65rem;
  border-width: 2px;
  box-shadow: var(--shadow-xs);
}
.agent-name { color: var(--sky); font-weight: 700; margin-bottom: 4px; }
.agent-role { font-size: 0.8rem; color: #444; margin-bottom: 12px; }
.agent-bio { font-size: 0.82rem; color: var(--text-grey); margin-bottom: 12px; }
.view-profile-link { color: var(--sky); font-size: 0.85rem; font-weight: 700; }
.view-profile-link:hover { color: var(--navy); }

/* ===================== PARTNERS STRIP ===================== */
.partners-section { padding: 50px 0; border-top: 1px solid var(--border-grey); }
.logo-placeholder {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aab4bd;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 1px;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: filter 0.3s var(--ease), opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.logo-placeholder:hover { filter: grayscale(0%); opacity: 1; transform: translateY(-2px); }

/* Every partner logo sits centered in a fixed-height frame and scales up to fill it
   based on ITS OWN shape (object-fit:contain + max-height, no forced width) — a tall
   narrow mark and a wide flat mark both end up reading as "the same size" on the page,
   and neither is ever stretched or squashed. */
.partner-logo-frame {
  height: 92px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.partner-logo-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: filter 0.3s var(--ease), opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.partner-logo-img:hover { filter: grayscale(0%); opacity: 1; transform: translateY(-2px) scale(1.05); }

/* More than 6 partners — the strip becomes a passive horizontally-scrolling marquee
   (driven by JS scrolling back and forth) instead of a static grid. */
.partners-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 50px;
  overflow-x: auto;
  padding: 4px 4px 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.partners-row::-webkit-scrollbar { display: none; }
.partner-item { flex: 0 0 auto; width: 170px; }

/* ===================== CONTACT PAGE ===================== */
.contact-details-title { font-size: 1.4rem; margin-bottom: 24px; }
.contact-details-list { display: flex; flex-direction: column; gap: 22px; }
.contact-detail-item { display: flex; align-items: flex-start; gap: 14px; }
.contact-detail-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--gradient-orange);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 14px rgba(242,121,33,0.3);
  font-size: 0.9rem;
}
.contact-detail-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-grey);
  margin-bottom: 2px;
}
.contact-detail-item > div > span:last-child {
  display: block;
  color: #1f2d3d;
  font-weight: 600;
  font-size: 0.95rem;
}

/* Full-bleed — deliberately sits outside .container so it spans the whole viewport width. */
.contact-map-section { width: 100%; height: 450px; }
.contact-map-section iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ===================== FOOTER ===================== */
.site-footer { background: var(--gradient-dark); color: rgba(255,255,255,0.72); }
.footer-main { padding: 80px 0 50px; }
.footer-heading { color: #fff; font-size: 1rem; font-weight: 700; margin-bottom: 22px; text-transform: uppercase; letter-spacing: 0.5px; font-family: 'Nunito Sans', sans-serif; }
.footer-links, .footer-contact { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 12px; }
.footer-links a {
  color: rgba(255,255,255,0.72);
  font-size: 0.88rem;
}
.footer-links a i { color: var(--sky); font-size: 0.7rem; margin-right: 8px; }
.footer-links a:hover { color: #fff; }
.footer-contact li { font-size: 0.88rem; margin-bottom: 14px; display: flex; gap: 10px; align-items: flex-start; }
.footer-contact i { color: var(--sky); margin-top: 3px; }

.footer-bottom {
  background: rgba(0,0,0,0.15);
  padding: 30px 0;
}
.footer-social { margin-bottom: 22px; }
.footer-social a {
  color: rgba(255,255,255,0.7);
  font-size: 0.82rem;
  margin: 0 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.footer-social a i { margin-right: 0; }
.footer-social a:hover { color: #fff; background: rgba(242,121,33,0.25); transform: translateY(-2px); }
.footer-logo {
  font-family: 'Playfair Display', serif;
  color: #fff;
  font-size: 1.3rem;
  margin-bottom: 14px;
}
.footer-logo i { color: var(--sky); margin-right: 6px; }
.footer-copy { font-size: 0.78rem; color: rgba(255,255,255,0.5); margin: 0; }

.scroll-top-btn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--gradient-orange);
  color: #fff;
  border: none;
  font-size: 1rem;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-glow);
  z-index: 999;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.scroll-top-btn.show { display: flex; }
.scroll-top-btn:hover { transform: translateY(-4px) scale(1.05); box-shadow: 0 16px 32px rgba(242,121,33,0.4); }

/* ===========================================================
   RESPONSIVE BREAKPOINTS
=========================================================== */

/* Tablet */
@media (max-width: 991.98px) {
  .hero-photo-placeholder { height: 460px; }
  .hero-photo { height: 460px; }
  .floating-property-card { width: 280px; top: 60px; left: 4%; }
  .why-bg-pattern { display: none; }
  .why-title { max-width: 100%; }
  .inquiry-form-card { margin-top: 50px; }
  .main-menu .nav-link, .utility-menu .nav-link { color: #fff; }
  .main-navbar { background: var(--gradient-orange); box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
  .navbar-brand { color: #fff; }
  .brand-logo-img { height: 46px; }
  .utility-menu { width: 100%; gap: 10px; }
  .btn-cta-orange, .btn-whatsapp { width: 100%; margin-top: 10px; margin-left: 0 !important; }
  .detail-hero { height: 300px; }
  .detail-hero-title { font-size: 1.8rem; }
  .booking-sidebar { position: static; margin-top: 30px; }
  .city-card-wrap { width: 220px; }
  .city-photo-placeholder { height: 190px; }
  .inquiry-form-card { padding: 30px 28px; }
}

/* Mobile */
@media (max-width: 767.98px) {
  .topbar { display: none; }
  .hero-photo-placeholder { height: 360px; font-size: 1rem; }
  .hero-photo { height: 360px; }
  .floating-property-card { position: static; width: 100%; margin: 20px auto 0; box-shadow: var(--shadow-sm); }
  .search-bar-wrap { margin-top: 20px; position: static; }
  .search-bar { flex-direction: column; align-items: stretch; border-radius: var(--radius-md); }
  .search-field.divider { border-left: none; border-top: 1px solid var(--border-grey); }
  .btn-clear, .btn-go { width: 100%; margin-top: 8px; }
  .section-heading h2 { font-size: 1.6rem; }
  .why-section { padding: 60px 0; }
  .inquiry-form-card { padding: 26px 22px; margin-top: 40px; }
  .welcome-section, .featured-section, .for-sale-section,
  .lifestyles-section, .cities-section, .agents-section { padding: 60px 0; }
  .section-heading-row { flex-direction: column; align-items: flex-start !important; gap: 14px; }
  .slider-nav { margin-top: 10px; }
  .scroll-top-btn { bottom: 16px; right: 16px; width: 42px; height: 42px; }
  .detail-hero { height: 260px; }
  .detail-hero-title { font-size: 1.5rem; margin-bottom: 12px; }
  .detail-hero-badge { font-size: 0.75rem; padding: 6px 12px; }
  .booking-sidebar { padding: 22px; border-radius: var(--radius-md); }
  .welcome-card, .property-card { border-radius: var(--radius-md); }
  .city-card-wrap { width: 200px; }
  .contact-map-section { height: 320px; }
}

/* Small phones */
@media (max-width: 420px) {
  .detail-hero-title { font-size: 1.3rem; }
  .city-card-wrap { width: 180px; }
  .city-photo-placeholder { height: 160px; }
}