:root {
  /* ============================================================
     Z-INDEX SCALE — single source of truth. The critical enforced
     value is --z-map: Leaflet maps are contained at the bottom so
     their internal pane/control z-indexes (200-1000) can never paint
     above the nav dropdown. Existing nav/overlay z-indexes already
     sit above this map ceiling.
     ============================================================ */
  --z-map: 1;               /* Leaflet maps (contained, see .leaflet-container) */
  --z-content: 10;
  --z-floating-pills: 100;  /* Ask Mario pill, back-to-top — above map */
  --z-nav: 100;             /* top nav bar */
  --z-nav-dropdown: 110;    /* nav dropdown panels — above nav + map */
  --z-hamburger: 1300;      /* mobile drawer / sheet */
  --z-modal: 12000;         /* quiz / lightbox modals */
  --z-language-sheet: 13000;/* language picker — topmost */
}
/* THE FIX: contain every Leaflet map in its own stacking context (isolation)
   pinned to the low --z-map ceiling, so nav dropdowns, the Ask Mario pill and
   the back-to-top all sit above the map. Applies site-wide via this shared CSS. */
.leaflet-container { position: relative; z-index: var(--z-map); isolation: isolate; }

:root {
  /* ============================================================
     SEMANTIC TEXT TOKENS — contrast-safe (WCAG AA on the intended bg).
     Use these for text instead of hardcoded pale colors so dark->light
     conversions never strand cream text on light (or dark on dark) again.
     ============================================================ */
  /* On LIGHT / cream sections (the default Asia/Phuket surface) */
  --text-primary:   #1A1A1A;             /* headings + key copy        ~16:1 */
  --text-secondary: rgba(26,26,26,0.74); /* body, subtitles, ledes     ~6:1  */
  --text-tertiary:  rgba(26,26,26,0.62); /* captions, metadata, footer ~4.6:1*/
  --text-accent:    #E07856;             /* brand coral accent words         */
}
/* On DARK sections (.mario card, .end-band teal-navy, dark image bands) */
.on-dark-surface, .end-band, [data-surface="dark"] {
  --text-primary:   #F5F0E8;
  --text-secondary: rgba(245,240,232,0.78);
  --text-tertiary:  rgba(245,240,232,0.55);
  --text-accent:    #E07856;
}

/* ============================================================
   NAV-PILL DROPDOWNS — shared across all CGC pages
   Depends on .nav-pill already being defined per-page.
   Just layers dropdown behaviour on top.
============================================================ */

.nav-pill .nav-item { position: relative; display: inline-flex; align-items: center; }
.nav-pill .nav-item > a { display: inline-flex; align-items: center; gap: 6px; }

.nav-pill .nav-item.has-dropdown > a::after {
  content: '';
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  opacity: 0.55;
  transition: transform 0.25s ease, opacity 0.2s ease;
  margin-left: 4px;
}
.nav-pill .nav-item.has-dropdown:hover > a::after,
.nav-pill .nav-item.has-dropdown:focus-within > a::after {
  opacity: 0.95;
  transform: rotate(225deg) translate(-1px, -1px);
}

.nav-pill .dropdown-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  margin-top: 10px;
  min-width: 220px;
  padding: 6px;
  background: rgba(20,20,20,0.78);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
  box-shadow: 0 28px 56px -16px rgba(0,0,0,0.55);
  z-index: 110;
}
.nav-pill .dropdown-panel::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -14px;
  height: 14px;
}
.nav-pill .nav-item.has-dropdown:hover .dropdown-panel,
.nav-pill .nav-item.has-dropdown:focus-within .dropdown-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s;
}

.nav-pill .dropdown-panel a {
  display: block;
  padding: 10px 16px;
  border-radius: 10px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.nav-pill .dropdown-panel a:hover {
  background: rgba(224,120,86,0.22);
  color: #fff;
}
.nav-pill .dropdown-panel a[aria-current="page"] {
  color: #fff;
  background: rgba(224,120,86,0.32);
}
.nav-pill .dropdown-panel a:first-child {
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  margin-bottom: 2px;
  padding-bottom: 12px;
}

@media (max-width: 880px) {
  .nav-pill .dropdown-panel { display: none; }
}

/* ============================================================
   UNIFY TOP NAV ACROSS EVERY PAGE AT EVERY SCREEN WIDTH
   Different pages were authored at different times with their own
   inline nav CSS. This block forces a single canonical nav style on
   all of them so the experience is identical whether the user is on
   /, /properties, /communities/jvc, /developers/emaar, or /schools.
============================================================ */

/* The nav bar itself */
.top-nav {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 100 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 22px clamp(24px, 4vw, 60px) !important;
  background: transparent !important;
  pointer-events: none !important;
  gap: 12px !important;
}
.top-nav > * { pointer-events: auto !important; }

/* Brand — always a glass pill on the left */
.nav-brand {
  display: inline-flex !important;
  align-items: center !important;
  padding: 10px 18px !important;
  background: rgba(20,20,20,0.55) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 999px !important;
  color: #F5EDE0 !important;
  font-family: 'Instrument Sans', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  flex-shrink: 0;
}
.nav-brand .brand-lockup {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font: inherit !important;
  letter-spacing: inherit !important;
}
.nav-brand .slash { color: #E07856 !important; opacity: 0.85 !important; font-size: 14px !important; line-height: 0 !important; }

/* Pill — glass pill in the centre with the nav links */
.nav-pill {
  display: inline-flex !important;
  gap: 4px !important;
  padding: 4px !important;
  background: rgba(20,20,20,0.55) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 999px !important;
  flex-shrink: 1;
  min-width: 0;
}
.nav-pill > .nav-item { position: relative; }
.nav-pill > .nav-item > a,
.nav-pill > a {
  padding: 9px 16px !important;
  border-radius: 999px !important;
  font-family: 'Instrument Sans', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  text-decoration: none !important;
  transition: color 0.2s ease, background 0.2s ease !important;
}
.nav-pill > .nav-item > a:hover,
.nav-pill > .nav-item > a[aria-current="page"],
.nav-pill > .nav-item > a.active,
.nav-pill > a:hover,
.nav-pill > a[aria-current="page"],
.nav-pill > a.active { color: #fff !important; background: rgba(255,255,255,0.08) !important; }

/* CTA — red pill far right */
.nav-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 6px 6px 20px !important;
  min-height: 42px !important;       /* exact Dubai height, regardless of per-page line-box */
  box-sizing: border-box !important;
  background: #E07856 !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-family: 'Instrument Sans', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.2s ease !important;
}
.nav-cta:hover { background: #B85A3A !important; transform: translateY(-1px) !important; }
/* Black arrow circle on the right — matches the canonical home page CTA.
   Also targets a bare second span (markup is inconsistent: most Asia pills use
   <span>text</span><span>→</span> with NO .arrow class, which left the pill
   short). Styling the last-of-two span as the circle restores Dubai's 42px. */
.nav-cta .arrow,
.nav-cta > span:last-child:not(:only-child) {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #1A1A1A !important;
  color: #F5EDE0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  flex-shrink: 0;
}

/* ============================================================
   RESPONSIVE SQUEEZE FIX — mid-screen widths
   The nav has 6 pill items after adding Insights. At widths
   between the hide-pill breakpoint and full desktop, the brand
   text, pill, and CTA collide. This block tightens spacing/size
   so the three columns of the top-nav fit cleanly without
   overlap or text wrapping.
============================================================ */

/* Roomy desktop (1281+): leave defaults. */

/* Mid-large (1080-1280): pull padding and letter-spacing in. */
@media (min-width: 1080px) and (max-width: 1280px) {
  .top-nav { padding-left: clamp(16px, 2vw, 32px) !important; padding-right: clamp(16px, 2vw, 32px) !important; }
  .nav-pill { gap: 2px !important; padding: 3px !important; }
  .nav-pill > .nav-item > a,
  .nav-pill a { padding: 8px 11px !important; font-size: 9.5px !important; letter-spacing: 0.14em !important; }
  .nav-cta { padding: 9px 15px !important; font-size: 9.5px !important; letter-spacing: 0.16em !important; white-space: nowrap; gap: 6px !important; }
  .nav-cta .arrow { font-size: 11px !important; }
  .nav-brand { font-size: 11px !important; letter-spacing: 0.12em !important; padding: 8px 14px !important; }
  .nav-brand .brand-lockup,
  .nav-brand .brand-lockup span { font-size: 9.5px !important; letter-spacing: 0.14em !important; gap: 5px !important; }
}

/* Medium (881-1079): even tighter, brand shrinks more. */
@media (min-width: 881px) and (max-width: 1079px) {
  .top-nav { padding-left: 14px !important; padding-right: 14px !important; gap: 8px !important; }
  .nav-pill { gap: 0 !important; padding: 2px !important; }
  .nav-pill > .nav-item > a,
  .nav-pill a { padding: 7px 9px !important; font-size: 9px !important; letter-spacing: 0.1em !important; }
  .nav-cta { padding: 8px 12px !important; font-size: 9px !important; letter-spacing: 0.14em !important; white-space: nowrap; gap: 5px !important; }
  .nav-cta .arrow { font-size: 10px !important; }
  .nav-brand { font-size: 10px !important; letter-spacing: 0.10em !important; padding: 7px 12px !important; }
  .nav-brand .brand-lockup,
  .nav-brand .brand-lockup span { font-size: 8.5px !important; letter-spacing: 0.12em !important; gap: 4px !important; }
  .nav-brand .slash { font-size: 11px !important; }
}

/* Hide the nav-pill AND nav-cta at narrow widths. The burger menu replaces
   both — the drawer already has a "Book a meeting" CTA at the bottom, so
   there's no need to keep the desktop CTA pill at narrow widths. This also
   prevents the CTA from floating awkwardly at random positions when the
   pill is hidden but the CTA still occupies its slot in the flex row. */
@media (max-width: 1100px) {
  .nav-pill { display: none !important; }
  .nav-cta { display: none !important; }

  /* TASK B — mobile brand: show only "COSTA" in the glass pill.
     The brand-lockup is <span>COSTA</span><span class="slash">·</span>
     <span>GLOBAL</span>... etc. Hide everything after the first word.
     The frosted-glass pill treatment (blur/border/radius/padding) stays
     on .nav-brand — only the text content shrinks. */
}
@media (min-width: 1101px) {
  .nav-cta { white-space: nowrap !important; }
}

/* Pat & Kath is a two-person cutout — wider aspect (0.62) than the single-person
   portraits (~0.30). The default .member-photo `max-width: 56%` caps its width, so
   object-fit shrinks the figures and they sit low with a gap under the name. Give
   this one card more width so the pair fills the photo height and their heads reach
   the name line like every other member. Only affects the About page (#pat-kath). */
/* EVERY member card's bio was vertically centred. The cards are sticky-pinned in a
   scroll-stack (can't scroll within one), so on laptop heights the centred bio pushed
   the "Speak with" CTA below the fold. Top-align all bios with a comfortable offset so
   the full text + CTA sit on one screen at every viewport / card. */
.member-bio-col { align-self: start !important; padding-top: clamp(40px, 7vh, 88px) !important; padding-bottom: 0 !important; }
/* Pat & Kath is a two-person cutout (wider aspect) — give it more photo width so the
   pair fills the height and their heads reach the name line; its bio runs a touch
   longer so tighten its line spacing too. */
#pat-kath .member-photo { max-width: 78% !important; }
#pat-kath .member-bio p { line-height: 1.5 !important; margin-bottom: 10px !important; }

/* Mobile brand collapse — on small phones every page shows only "COSTA" in the
   glass pill (the home page already did this inline; this makes it universal so
   the brand is identical site-wide). The frosted pill stays; GLOBAL / CAPITAL and
   the middot separators are hidden so the brand never wraps or crowds the burger.
   Selector is more specific than the old per-page inline rule so it always wins. */
@media (max-width: 440px) {
  nav.top-nav .nav-brand .brand-lockup .slash,
  nav.top-nav .nav-brand .brand-lockup span:nth-child(n+3) { display: none !important; }
}

/* ============================================================
   UNIFIED MOBILE BURGER + DRAWER — applies to every page
============================================================ */

.mobile-toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: rgba(20,20,20,0.55);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.08);
  align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
  padding: 0;
  color: #F5EDE0;
  margin-left: 8px;
}
.mobile-toggle:hover { background: rgba(26,26,26,0.10); border-color: rgba(26,26,26,0.20); }
.mobile-toggle svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.6; }
@media (max-width: 1100px) {
  /* Force the burger to a dark frosted pill with a CREAM icon on every page —
     some pages overrode it to a dark icon on a near-invisible pill, which
     vanished on the dark sections. Cream stroke + thicker weight reads on both
     light and dark sections the fixed nav floats over. */
  .mobile-toggle { display: inline-flex !important; background: rgba(20,20,20,0.55) !important; border: 1px solid rgba(255,255,255,0.18) !important; color: #F5EDE0 !important; }
  .mobile-toggle svg { stroke: #F5EDE0 !important; stroke-width: 2 !important; }
}

.mobile-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(5, 5, 5, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.mobile-drawer-backdrop.open { opacity: 1; pointer-events: auto; }

/* ============================================================
   Mobile drawer — polished
   - Tighter typographic rhythm, generous breathing room
   - Single source of motion: ease-out-quart for all reveals
   - Active indicator: 2px red rail on the left of the item
   - Sub-links sit on a slightly cooler background well so the
     expanded state reads as a different surface, not just spacing
============================================================ */
.mobile-drawer {
  position: fixed;
  top: 0; bottom: 0; right: 0;
  width: min(90vw, 420px);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(224,120,86,0.06), transparent 55%),
    linear-gradient(180deg, #0E0D0B 0%, #050504 100%);
  border-left: 1px solid rgba(26,26,26,0.06);
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 22px 26px clamp(36px, 7vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 28px;
  color: #F5EDE0;
  font-family: 'Instrument Sans', sans-serif;
}
.mobile-drawer.open { transform: translateX(0); }

.mobile-drawer-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(26,26,26,0.06);
}
.mobile-drawer-head .brand {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #F5EDE0 !important; opacity: 1;
  text-decoration: none;
}
.mobile-drawer-head .brand span { color: #F5EDE0; }
.mobile-drawer-head .brand .slash { color: #E07856 !important; }
.mobile-drawer-head .brand .slash { color: #E07856; opacity: 0.85; }
.mobile-drawer-close {
  width: 38px; height: 38px;
  border-radius: 999px;
  background: rgba(26,26,26,0.04);
  border: 1px solid rgba(26,26,26,0.10);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
  color: #F5EDE0;
  transition: background 0.25s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s, transform 0.25s;
}
.mobile-drawer-close:hover { background: rgba(26,26,26,0.10); border-color: rgba(26,26,26,0.20); transform: rotate(90deg); }
.mobile-drawer-close svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.6; }

/* Dubai / Phuket market toggle inside the drawer */
.mobile-drawer .market-toggle.in-drawer {
  display: inline-flex;
  margin: 24px clamp(20px, 5vw, 28px) 20px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(26,26,26,0.05);
  border: 1px solid rgba(26,26,26,0.14);
  justify-content: stretch;
}
.mobile-drawer .market-toggle.in-drawer .market-opt {
  flex: 1;
  min-height: 44px;
  min-width: 0;
  padding: 12px 22px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: rgba(26,26,26,0.62);
  font-family: 'Instrument Sans', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  border-radius: 999px;
  transition: color 0.2s ease, background 0.2s ease;
}
.mobile-drawer .market-toggle.in-drawer .market-opt:hover { color: #F5EDE0; }
.mobile-drawer .market-toggle.in-drawer .market-opt.is-active {
  background: #E07856;
  color: #fff;
}

/* Nav stack */
.mobile-drawer-group,
.mobile-drawer-link-flat {
  position: relative;
  border-top: 1px solid rgba(26,26,26,0.06);
}
.mobile-drawer-group:first-of-type,
.mobile-drawer-group:first-of-type ~ .mobile-drawer-link-flat:nth-of-type(1) { /* no-op safety */ }
.mobile-drawer > .mobile-drawer-head + .mobile-drawer-group,
.mobile-drawer > .mobile-drawer-head + .mobile-drawer-link-flat { border-top: 0; }

.mobile-drawer-group { display: flex; flex-direction: column; }

.mobile-drawer-group .group-label {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: none;
  color: #F5EDE0;
  padding: 18px 0;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  transition: color 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.mobile-drawer-group .group-label:hover { color: #E07856; }
.mobile-drawer-group.is-open .group-label { color: #E07856; }

/* Chevron: simple thin line that rotates and changes color smoothly */
.mobile-drawer-group .group-chev {
  position: relative;
  width: 12px; height: 12px;
  flex: 0 0 12px;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.mobile-drawer-group .group-chev::before,
.mobile-drawer-group .group-chev::after {
  content: '';
  position: absolute;
  background: currentColor;
  border-radius: 1px;
  transition: opacity 0.25s ease;
  opacity: 0.7;
}
.mobile-drawer-group .group-chev::before {
  left: 0; right: 0; top: 50%;
  height: 1.5px; transform: translateY(-50%);
}
.mobile-drawer-group .group-chev::after {
  top: 0; bottom: 0; left: 50%;
  width: 1.5px; transform: translateX(-50%);
}
.mobile-drawer-group.is-open .group-chev { transform: rotate(135deg); }
.mobile-drawer-group.is-open .group-chev::before,
.mobile-drawer-group.is-open .group-chev::after { opacity: 1; }

/* Sub-links panel — cooler surface to read as a layered well */
.mobile-drawer-group .group-links {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease 0.04s,
    padding 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.mobile-drawer-group.is-open .group-links {
  max-height: 480px;
  opacity: 1;
  padding-bottom: 8px;
}
/* Language accordion holds the full 50-language list — let it scroll inside the
   open panel instead of being clipped at the standard 480px accordion height. */
.mobile-drawer-lang.is-open .group-links { max-height: 52vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* Sub-link rows */
.mobile-drawer-link {
  position: relative;
  display: flex; align-items: center;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 13px; font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(245,237,224,0.72);
  text-decoration: none;
  padding: 11px 0 11px 18px;
  transition: color 0.25s cubic-bezier(0.22, 1, 0.36, 1), padding-left 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.mobile-drawer-link::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(245,237,224,0.28);
  transform: translateY(-50%);
  transition: background 0.25s ease, width 0.25s ease, height 0.25s ease;
}
.mobile-drawer-link:hover { color: #F5EDE0; padding-left: 22px; }
.mobile-drawer-link:hover::before { background: rgba(224,120,86,0.55); }
.mobile-drawer-link.is-active { color: #E07856; padding-left: 22px; }
.mobile-drawer-link.is-active::before { background: #E07856; width: 8px; height: 8px; }

.mobile-drawer-link.is-sub { /* identical to base, kept for explicit hooks */ }

.mobile-drawer-link .arrow {
  margin-left: auto;
  font-size: 13px;
  color: rgba(26,26,26,0.22);
  transition: color 0.25s ease, transform 0.25s ease;
}
.mobile-drawer-link:hover .arrow { color: rgba(26,26,26,0.55); transform: translateX(2px); }
.mobile-drawer-link.is-active .arrow { color: #E07856; transform: translateX(2px); }

/* Flat top-level link (used for groups with only 1 sub-link e.g. Concierge / Contact) */
.mobile-drawer-link-flat {
  position: relative;
  display: flex; align-items: center;
  padding: 18px 0;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: none;
  color: #F5EDE0;
  text-decoration: none;
  transition: color 0.25s cubic-bezier(0.22, 1, 0.36, 1), padding-left 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.mobile-drawer-link-flat::before { display: none; }
.mobile-drawer-link-flat:hover { color: #E07856; padding-left: 6px; }
.mobile-drawer-link-flat.is-active { color: #E07856; padding-left: 6px; }
.mobile-drawer-link-flat .arrow {
  margin-left: auto;
  font-size: 14px;
  color: rgba(26,26,26,0.30);
  transition: color 0.25s ease, transform 0.25s ease;
}
.mobile-drawer-link-flat:hover .arrow,
.mobile-drawer-link-flat.is-active .arrow { color: #E07856; transform: translateX(2px); }

/* Bottom CTA */
.mobile-drawer-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: auto;
  padding: 16px 24px;
  background: #E07856; color: #fff;
  border-radius: 999px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
  box-shadow: 0 12px 28px -10px rgba(224,120,86,0.55);
}
.mobile-drawer-cta:hover { background: #B85A3A; transform: translateY(-2px); box-shadow: 0 18px 36px -10px rgba(224,120,86,0.7); }

/* Force the drawer "Book a meeting" CTA to brand CORAL on Phuket. Several pages
   hardcode Dubai red (#C41E3A) in an inline <style>; this higher-specificity,
   market-scoped rule wins over those so the CTA is orange everywhere. */
html[data-market="phuket"] .mobile-drawer-cta { background: #E07856; box-shadow: 0 14px 36px -10px rgba(224,120,86,0.55); }
html[data-market="phuket"] .mobile-drawer-cta:hover { background: #B85A3A; }

body.drawer-open { overflow: hidden; }

/* Hide the floating chat pill while the mobile drawer is open OR the quiz
   modal is open — otherwise it overlaps drawer controls (esp. BOOK A MEETING)
   and clutters the modal. */
body.drawer-open .cgc-chat,
body.quiz-locked .cgc-chat { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .mobile-drawer,
  .mobile-drawer-group .group-chev,
  .mobile-drawer-group .group-links,
  .mobile-drawer-link,
  .mobile-drawer-link-flat,
  .mobile-drawer-close,
  .mobile-drawer-cta {
    transition-duration: 0.01ms !important;
  }
}


/* ============================================================
   UNIVERSAL MOBILE-DRAWER LEGIBILITY  (Asia / Phuket deploy)
   Every interior page ships its own STALE inline drawer style
   (light-drawer: dark text + transparent panel) that overrode
   this shared file, so the homepage-only fix never propagated.
   These !important rules make THIS shared file the single source
   of truth for the dark drawer on every page. Dubai is a separate
   deploy/folder and is untouched.
   ============================================================ */
.mobile-drawer {
  background:
    radial-gradient(ellipse at 100% 0%, rgba(224,120,86,0.06), transparent 55%),
    linear-gradient(180deg, #0E0D0B 0%, #050504 100%) !important;
  color: #F5EDE0 !important;
}
.mobile-drawer .group-label {
  color: #F5EDE0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.035em !important;
  text-transform: uppercase !important;
}
.mobile-drawer .mobile-drawer-link,
.mobile-drawer .mobile-drawer-link-flat {
  color: rgba(245,237,224,0.82) !important;
  text-transform: uppercase !important;
  font-family: 'Instrument Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.035em !important;
  border-bottom: 0 !important;
}
.mobile-drawer .mobile-drawer-link:hover,
.mobile-drawer .mobile-drawer-link.is-active,
.mobile-drawer .mobile-drawer-link-flat:hover,
.mobile-drawer .mobile-drawer-link-flat.is-active { color: #E07856 !important; }
.mobile-drawer .mobile-drawer-link::before { background: rgba(245,237,224,0.30) !important; }
.mobile-drawer .mobile-drawer-link.is-active::before { background: #E07856 !important; }

/* ===== Developer deep-profile sections (shared) ===== */
.dv-analysis{background:var(--paper);color:var(--mc-ink);padding:clamp(60px,7vw,110px) 0;border-top:1px solid rgba(20,17,13,0.07);}
.dv-analysis .label{font-family:'Instrument Sans',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:0.26em;text-transform:uppercase;color:var(--mc-red);margin-bottom:14px;display:block;}
.dv-analysis h2{font-family:'Fraunces',Georgia,serif;font-weight:300;font-size:clamp(26px,3.4vw,46px);line-height:1.05;letter-spacing:-0.02em;color:var(--mc-ink);margin:0 0 clamp(28px,4vw,48px);}
.dv-analysis h2 em{font-style:italic;color:var(--mc-red);font-weight:400;}
.dv-analysis-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start;}
.dv-analysis-body p{font-family:'Inter',sans-serif;font-size:15.5px;line-height:1.78;color:rgba(20,17,13,0.82);margin:0 0 18px;}
.dv-analysis-body p:last-child{margin-bottom:0;}
.dv-facts{background:var(--paper-deep,#F4EEE3);border:1px solid rgba(20,17,13,0.08);border-radius:16px;padding:clamp(22px,3vw,30px);}
.dv-facts dt{font-family:'Instrument Sans',sans-serif;font-size:9.5px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:var(--mc-red);margin-bottom:4px;}
.dv-facts dd{font-family:'Fraunces',Georgia,serif;font-size:18px;color:var(--mc-ink);margin:0 0 16px;line-height:1.25;}
.dv-facts dd:last-child{margin-bottom:0;}
@media(max-width:860px){.dv-analysis-grid{grid-template-columns:1fr;}}

/* drawer resting contrast fix */
.mobile-drawer-link{color:rgba(245,237,224,0.82);}
.mobile-drawer-link-flat{color:rgba(245,237,224,0.82);}
.mobile-drawer-close{color:#F5EDE0;}
.mobile-drawer-group .group-label{color:rgba(245,237,224,0.82);}

/* About hero group portrait: show the FULL 16:9 photo centered at every width so nobody
   on the ends (e.g. Sam, far right) gets cropped. Desktop previously used object-fit:cover
   which clipped the outer people; match the mobile "contain" treatment everywhere. */
.about-hero-portrait img { object-fit: contain !important; object-position: center center !important; }

/* Single-property inquiry section ("Ask Sam about this listing"). It was authored as a
   dark band (cream text on var(--mc-black)), but on the Phuket LIGHT theme --mc-black is
   #FAFAF8, so cream text landed on a near-white bg and vanished. Rather than force a dark
   band (which reads as a random brown block on the light page), keep it LIGHT and switch
   the text to dark ink so it fits the page and is fully readable. */
.prop-inquire { background: var(--paper-deep, #F4EEE3) !important; color: var(--mc-ink, #1A1A1A) !important; border-top-color: rgba(20,17,13,0.10) !important; }
.prop-inquire h2 { color: var(--mc-ink, #1A1A1A) !important; }
.prop-inquire .pinq-sub { color: rgba(26,26,26,0.74) !important; opacity: 1 !important; }
.prop-inquire .pinq-field label { color: rgba(26,26,26,0.66) !important; }
.prop-inquire .pinq-field input { color: var(--mc-ink, #1A1A1A) !important; border-bottom-color: rgba(20,17,13,0.28) !important; }
.prop-inquire .pinq-consent { color: rgba(26,26,26,0.62) !important; opacity: 1 !important; }

/* Properties/community filter combos ("All communities", "All types", "Beds", "Baths",
   "Sort by"): the CLOSED trigger text was --mc-cream, styled for a dark filter bar, but
   the Phuket bar is light -> cream on light = invisible (all languages). Force dark ink on
   the closed trigger/label only. The OPEN dropdown panel stays dark, so its cream options
   are untouched (they're readable on the dark panel). */
.combo--filter .combo-trigger,
.combo--filter .combo-label { color: var(--mc-ink, #1A1A1A) !important; }
.combo--filter .combo-panel .combo-option { color: var(--mc-cream, #F5EDE0) !important; }

/* CGC-BRAND-FULLNAME-FIT
   Ben's call, carried over from the working build: show the FULL name, not just COSTA.
   Deleting the collapse rule on its own pushed the burger off screen on small phones and
   left no way to open the menu, so the name is made to FIT instead: tighter pill padding,
   tighter tracking, and a step down in size on the narrowest screens. */
@media (max-width: 440px) {
  nav.top-nav .nav-brand .brand-lockup .slash,
  nav.top-nav .nav-brand .brand-lockup span:nth-child(n+3) { display: inline !important; }
  nav.top-nav .nav-brand { padding-left: 11px !important; padding-right: 11px !important;
                           flex: 0 1 auto !important; min-width: 0 !important; }
  nav.top-nav { padding-left: 12px !important; padding-right: 12px !important; gap: 8px !important; }
  nav.top-nav .nav-brand .brand-lockup,
  nav.top-nav .nav-brand .brand-lockup span { font-size: 9px !important; letter-spacing: 0.09em !important; }
  nav.top-nav .nav-brand .brand-lockup .slash { margin: 0 3px !important; }
  nav.top-nav .mobile-toggle { margin-left: auto !important; flex: 0 0 auto !important; }
}
@media (max-width: 345px) {
  nav.top-nav .nav-brand .brand-lockup,
  nav.top-nav .nav-brand .brand-lockup span { font-size: 8px !important; letter-spacing: 0.06em !important; }
  nav.top-nav .nav-brand { padding-left: 9px !important; padding-right: 9px !important; }
}