/* ============================================================
   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(245,240,232,0.74);
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.nav-pill .dropdown-panel a:hover {
  background: rgba(196,30,58,0.22);
  color: #fff;
}
.nav-pill .dropdown-panel a[aria-current="page"] {
  color: #fff;
  background: rgba(196,30,58,0.32);
}
.nav-pill .dropdown-panel a:first-child {
  color: rgba(245,240,232,0.9);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  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: #C41E3A !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: rgba(245,237,224,0.78) !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;
  background: #C41E3A !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: #9B1530 !important; transform: translateY(-1px) !important; }
/* Black arrow circle on the right — matches the canonical home page CTA */
.nav-cta .arrow {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #14110D !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; }
}
@media (min-width: 1101px) {
  .nav-cta { white-space: nowrap !important; }
}

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

.mobile-toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: 999px;
  /* Near-solid dark disc + light ring + shadow so the burger reads on ANY
     background. At 0.55 opacity it washed out to grey over white sections and
     the cream icon vanished; this keeps strong contrast everywhere. */
  background: rgba(18,18,18,0.88);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.30);
  box-shadow: 0 2px 12px rgba(0,0,0,0.35);
  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(245,237,224,0.10); border-color: rgba(245,237,224,0.20); }
.mobile-toggle svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.6; }
@media (max-width: 1100px) { .mobile-toggle { display: inline-flex !important; } }
/* Several pages set their own faint cream `nav.top-nav .mobile-toggle` background
   inline (higher specificity), which vanished on light sections. Force the visible
   dark disc + light ring + shadow on EVERY page so the burger always reads. */
nav.top-nav .mobile-toggle,
.top-nav .mobile-toggle,
.mobile-toggle {
  background: rgba(18,18,18,0.88) !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.35) !important;
  color: #F5EDE0 !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;
  /* Use 100dvh so iOS Safari's dynamic toolbar doesn't crop the bottom items. */
  height: 100vh;
  height: 100dvh;
  width: min(90vw, 420px);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(196,30,58,0.06), transparent 55%),
    linear-gradient(180deg, #0E0D0B 0%, #050504 100%);
  border-left: 1px solid rgba(245,237,224,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;
  overscroll-behavior: contain;
  touch-action: pan-y;
  /* Bottom padding includes safe-area inset so the last item (LANGUAGE) sits
     above the iOS home indicator / address bar. */
  padding: 22px 26px max(clamp(36px, 7vw, 56px), env(safe-area-inset-bottom));
  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(245,237,224,0.06);
}
.mobile-drawer-head .brand {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: #F5EDE0;
  text-decoration: none;
}
.mobile-drawer-head .brand .slash { color: #C41E3A; opacity: 0.85; }
.mobile-drawer-close {
  width: 38px; height: 38px;
  border-radius: 999px;
  background: rgba(245,237,224,0.04);
  border: 1px solid rgba(245,237,224,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(245,237,224,0.10); border-color: rgba(245,237,224,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(245,237,224,0.05);
  border: 1px solid rgba(245,237,224,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(245,237,224,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: #C41E3A;
  color: #fff;
}

/* Nav stack */
.mobile-drawer-group,
.mobile-drawer-link-flat {
  position: relative;
  border-top: 1px solid rgba(245,237,224,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: #C41E3A; }
.mobile-drawer-group.is-open .group-label { color: #C41E3A; }

/* 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;
}

/* Sub-link rows */
.mobile-drawer-link {
  position: relative;
  display: flex; align-items: center;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14px; font-weight: 400;
  letter-spacing: 0.005em;
  text-transform: none;
  color: rgba(245,237,224,0.62);
  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.18);
  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(196,30,58,0.55); }
.mobile-drawer-link.is-active { color: #C41E3A; padding-left: 22px; }
.mobile-drawer-link.is-active::before { background: #C41E3A; 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(245,237,224,0.22);
  transition: color 0.25s ease, transform 0.25s ease;
}
.mobile-drawer-link:hover .arrow { color: rgba(245,237,224,0.55); transform: translateX(2px); }
.mobile-drawer-link.is-active .arrow { color: #C41E3A; 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: #C41E3A; padding-left: 6px; }
.mobile-drawer-link-flat.is-active { color: #C41E3A; padding-left: 6px; }
.mobile-drawer-link-flat .arrow {
  margin-left: auto;
  font-size: 14px;
  color: rgba(245,237,224,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: #C41E3A; 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: #C41E3A; 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(196,30,58,0.55);
}
.mobile-drawer-cta:hover { background: #9B1530; transform: translateY(-2px); box-shadow: 0 18px 36px -10px rgba(196,30,58,0.7); }

/* ─── Drawer language accordion ─────────────────────────────────────── */
.mobile-drawer-lang {
  margin-top: 8px;
  border-top: 1px solid rgba(245,237,224,0.08);
  padding-top: 8px;
}
.mobile-drawer-lang-toggle {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 48px; padding: 12px 4px;
  background: transparent; border: 0;
  color: rgba(245,237,224,0.85);
  cursor: pointer;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  text-align: left;
}
.mobile-drawer-lang-globe { font-size: 16px; line-height: 1; }
.mobile-drawer-lang-label { flex: 1; }
.mobile-drawer-lang-current {
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: rgba(245,237,224,0.55);
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid rgba(245,237,224,0.14);
}
.mobile-drawer-lang-chev {
  width: 20px; text-align: center; font-size: 14px;
  color: rgba(245,237,224,0.5);
  transition: transform 0.22s ease;
}
.mobile-drawer-lang.is-open .mobile-drawer-lang-chev { transform: rotate(45deg); }

.mobile-drawer-lang-list {
  display: none; flex-direction: column;
  max-height: 0; overflow: hidden;
  transition: max-height 0.3s ease;
}
.mobile-drawer-lang.is-open .mobile-drawer-lang-list {
  display: flex;
  max-height: 40vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  margin-top: 4px;
  padding: 4px 0 8px;
  border-radius: 10px;
  background: rgba(0,0,0,0.22);
}
.mobile-drawer-lang-item {
  display: block; min-height: 48px; width: 100%;
  padding: 12px 16px;
  background: transparent; border: 0;
  color: rgba(245,237,224,0.78);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 15px; font-weight: 500;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.18s ease, color 0.18s ease;
}
.mobile-drawer-lang-item:last-child { border-bottom: 0; }
.mobile-drawer-lang-item:hover,
.mobile-drawer-lang-item:active {
  background: rgba(245,237,224,0.06);
  color: #F5EDE0;
}
.mobile-drawer-lang-item.is-active {
  color: #fff;
  background: rgba(196,30,58,0.14);
  position: relative;
}
.mobile-drawer-lang-item.is-active::after {
  content: '✓';
  position: absolute; right: 16px; top: 50%;
  transform: translateY(-50%);
  color: #C41E3A; font-size: 14px; font-weight: 700;
}

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;
  }
}


/* ===== Unified mobile-drawer typography (State A) — AUTHORITATIVE.
   Higher specificity (.mobile-drawer ...) than any stale per-page inline
   <style> drawer rule, so every page renders the same prominent treatment
   regardless of stylesheet order. Active/hover colours (red Dubai / coral
   Phuket) are excluded via :not() and left untouched. ===== */
.mobile-drawer .group-label,
.mobile-drawer .mobile-drawer-link {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}
.mobile-drawer .mobile-drawer-link {
  padding: 12px 0 12px 18px;
  border-bottom: 0;
}
.mobile-drawer .mobile-drawer-link:not(.is-active):not(:hover) {
  color: rgba(245,237,224,0.82);
}
.mobile-drawer .mobile-drawer-link-flat { padding-left: 0; }
.mobile-drawer .mobile-drawer-link-flat:not(.is-active):not(:hover) {
  color: #F5EDE0;
}

/* ===== 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,#ece3d4);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;}
.dv-projects{margin-top:clamp(40px,5vw,72px);}
.dv-projects h3{font-family:'Instrument Sans',sans-serif;font-size:11px;font-weight:700;letter-spacing:0.24em;text-transform:uppercase;color:var(--mc-ink);margin:0 0 20px;}
.dv-projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.dv-project{border-radius:14px;overflow:hidden;background:#000;position:relative;aspect-ratio:4/3;text-decoration:none;display:block;}
.dv-project img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.dv-project:hover img{transform:scale(1.05);}
.dv-project .cap{position:absolute;inset:auto 0 0 0;padding:16px 16px 14px;background:linear-gradient(to top,rgba(0,0,0,0.82),rgba(0,0,0,0.1) 80%,transparent);}
.dv-project .cap b{display:block;font-family:'Fraunces',Georgia,serif;font-size:16px;font-weight:500;color:#F5EDE0;}
.dv-project .cap span{font-family:'Inter',sans-serif;font-size:11.5px;color:rgba(245,237,224,0.8);line-height:1.4;}
@media(max-width:860px){.dv-analysis-grid{grid-template-columns:1fr;}.dv-projects-grid{grid-template-columns:1fr;}}