/* ============================================================
   THE PEARL EDITION — Partner / Property / Invest pages
   ------------------------------------------------------------
   These three pages reproduce the editorial section design used
   on the reference site. The colour/type tokens and the shared
   section helpers are scoped under `.ceylon` so they never touch
   the rest of the site's chrome (ticker, nav, footer), which keep
   using the global tokens from styles.css. The page-specific
   classes (.re-hero, .why-section, .listing-card, …) live inline
   in each page's <style> block and inherit these variables because
   their markup is wrapped in a single `.ceylon` container.
   ============================================================ */

.ceylon {
  --dark: #0e0c0a;
  --dark-2: #151210;
  --cream: #f5f0e8;
  --off-white: #faf8f4;
  --white: #ffffff;
  --gold: #c9a86c;
  --gold-light: #e0bf80;
  --text-dark: #1a1612;
  --text-mid: #4a4540;
  --text-light: #8a8580;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Montserrat', 'Inter', system-ui, sans-serif;
  font-family: var(--font-serif);
  color: var(--text-dark);
}
.ceylon a { color: inherit; text-decoration: none; }

/* Shared section helpers (mirrors the reference ceylon.css) */
.ceylon .section-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; gap: 24px; }
.ceylon .section-title-dark { font-size: 44px; font-weight: 300; font-style: italic; color: #f0ebe3; line-height: 1.1; }
.ceylon .section-title-light { font-size: 44px; font-weight: 300; font-style: italic; color: var(--text-dark); line-height: 1.1; }
.ceylon .section-link-gold { font-family: var(--font-sans); font-size: 10px; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); border-bottom: 0.5px solid var(--gold); padding-bottom: 2px; transition: opacity 0.3s; white-space: nowrap; }
.ceylon .section-link-gold:hover { opacity: 0.6; }
.ceylon .divider-gold { width: 48px; height: 1px; background: var(--gold); margin: 24px 0; }
.ceylon .btn-dark { display: inline-block; font-family: var(--font-sans); font-size: 10px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; background: var(--gold); color: var(--dark); padding: 14px 32px; border: none; cursor: pointer; transition: background 0.3s; }
.ceylon .btn-dark:hover { background: var(--gold-light); }
.ceylon .btn-dark[disabled] { opacity: 0.6; cursor: default; }
.ceylon .section-link-gold,
.ceylon .section-link-gold:hover {
  text-decoration: none;
  border-bottom-color: transparent;
}

@media (max-width: 680px) {
  .ceylon .section-header { flex-direction: column; align-items: flex-start; gap: 14px; }
  .ceylon .section-title-dark, .ceylon .section-title-light { font-size: 32px; }
}

/* WhatsApp floating button (used on these three pages) */
.wa-float { position: fixed; right: 24px; bottom: 24px; z-index: 9999; display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: #25D366; box-shadow: 0 6px 22px rgba(0,0,0,0.28); transition: transform .25s ease, box-shadow .25s ease; }
.wa-float:hover { transform: scale(1.08); box-shadow: 0 10px 30px rgba(37,211,102,0.45); }
.wa-float svg { width: 32px; height: 32px; fill: #fff; }
@media (max-width: 768px) { .wa-float { right: 18px; bottom: 18px; width: 52px; height: 52px; } .wa-float svg { width: 28px; height: 28px; } }
/* Keep the WhatsApp button clear of the fixed mobile bottom navigation bar. */
@media (max-width: 600px) { .wa-float { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }