@import url('tokens.css?v=44');

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  height: 100%;
  scrollbar-gutter: stable;
}
body {
  min-height: 100%;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: 600;
  overflow-x: hidden;
}
html {
  background: var(--bg-page);
}

h1, .display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
}

h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}

h3, h4, h5, .heading {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* One-emphasis-word-per-headline serif italic accent — the copper
   metal gradient, clipped to the text (the brand's signature flourish),
   never a flat fill. */
.n-em, em.n-em {
  font-family: var(--n-font-serif);
  font-style: italic;
  font-weight: 700;
  color: var(--accent-deep);
  background: var(--n-copper-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 0.12em 0.22em 0.16em 0.1em;
  margin: -0.12em -0.22em -0.16em -0.1em;
  display: inline-block;
}

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

/* ─── NAV ──────────────────────────────────────────── */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  background: rgba(247,240,232,0.9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-hairline);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.nav-logo img {
  height: 40px;
  width: auto;
  display: block;
}
.nav-logo .wordmark-tag {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
}

.nav-links a {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  letter-spacing: -0.005em;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.nav-links a:hover, .nav-links a.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.admin-btn {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -0.005em;
  color: var(--text-inverse);
  background: var(--n-ink);
  border: none;
  padding: 8px 18px;
  cursor: pointer;
  border-radius: var(--radius-1);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.admin-btn:hover { background: var(--n-ink-2); }
.admin-btn:active { transform: scale(0.98); }

/* Nav CTA button — the signature copper "metal" variant (Button.jsx metal) */
.nav-cta-btn {
  background: var(--n-copper-gradient); background-size: 200% 200%;
  animation: metalShimmer 6s ease infinite;
  color: var(--n-ink);
  font-family: var(--font-sans); font-weight: 600;
  font-size: 13px; letter-spacing: -0.005em;
  height: 40px; padding: 0 20px; border: none; border-radius: var(--radius-1); cursor: pointer;
  transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.nav-cta-btn:hover { box-shadow: 0 3px 14px rgba(196,105,58,0.4); }
.nav-cta-btn:active { transform: scale(0.98); }

/* Navbar dropdown */
.nav-dropdown-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-dropdown-trigger {
  /* identical box to .nav-links a so "Analysis" sits on the same line */
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  line-height: normal;
  letter-spacing: -0.005em;
  color: var(--text-secondary);
  cursor: pointer;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out);
  user-select: none;
}
.nav-dropdown-wrap:hover .nav-dropdown-trigger,
.nav-dropdown-wrap.active .nav-dropdown-trigger { color: var(--accent); }
.nav-dropdown {
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: #FFFFFF;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-2); padding: 6px;
  box-shadow: var(--shadow-md);
  min-width: 180px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast) var(--ease-out);
  z-index: 200;
}
/* Invisible bridge: covers the gap between the trigger (centered in the
   72px navbar) and the menu, so hover isn't lost while moving down. */
.nav-dropdown::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: 36px;
}
.nav-dropdown-wrap:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown a {
  display: block; padding: 9px 14px;
  font-family: var(--font-sans);
  font-size: 13px; letter-spacing: -0.005em; font-weight: 600;
  color: var(--text-secondary); text-decoration: none;
  border-radius: var(--radius-1); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.nav-dropdown a:hover, .nav-dropdown a.active {
  background: var(--bg-inset); color: var(--accent);
}

/* Burger (hidden on desktop) */
.nav-burger {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; padding: 8px;
  background: transparent; border: none; cursor: pointer;
}
.nav-burger span {
  display: block; height: 2px; width: 100%;
  background: var(--text-primary); border-radius: 1px; transition: transform 0.25s, opacity 0.2s;
}
.navbar.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
.navbar.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile dropdown menu */
.mobile-menu {
  display: none;
  position: fixed; top: 72px; left: 0; right: 0;
  flex-direction: column;
  background: #FFFFFF;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-hairline);
  padding: 12px 24px 48px;
  z-index: 999;
  /* 100vh on a phone measures the viewport WITHOUT the browser chrome, so the
     last few links end up hidden behind it. dvh tracks the real visible area;
     the vh line stays as a fallback for older browsers. */
  max-height: calc(100vh - 72px);
  max-height: calc(100dvh - 72px);
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.navbar.nav-open .mobile-menu { display: flex; }
.mobile-menu a {
  font-family: var(--font-sans); font-weight: 600;
  font-size: 17px; letter-spacing: -0.01em;
  color: var(--text-secondary); text-decoration: none;
  padding: 14px 0; border-bottom: 1px solid var(--border-hairline);
}
.mobile-menu a.active, .mobile-menu a:hover { color: var(--accent); }
.mobile-menu-cta {
  margin-top: 16px;
  background: var(--n-copper-gradient); background-size: 200% 200%;
  animation: metalShimmer 6s ease infinite;
  color: var(--n-ink);
  font-family: var(--font-sans); font-weight: 600;
  font-size: 15px; letter-spacing: -0.01em;
  padding: 13px; border: none; border-radius: var(--radius-1); cursor: pointer;
}

@media (max-width: 1024px) {
  .navbar { padding: 0 18px; }
  .nav-logo img { height: 28px; }
  .nav-links { display: none; }
  .nav-cta-btn { display: none; }
  .nav-burger { display: flex; }
}

/* ─── PAGE HEADER ───────────────────────────────────── */
.page-header {
  position: fixed;
  top: 70px; left: 40px;
  z-index: 50;
}

.page-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 44px;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--text-primary);
}

.page-title span {
  font-family: var(--n-font-serif); font-style: italic; font-weight: 700;
  color: var(--accent-deep);
  background: var(--n-copper-gradient);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  padding: 0.12em 0.22em 0.16em 0.1em; margin: -0.12em -0.22em -0.16em -0.1em; display: inline-block;
}

.page-subtitle {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 6px;
}

/* ─── EMIRATE SELECTOR ──────────────────────────────── */
.emirate-selector {
  position: fixed;
  top: 76px; left: 0; right: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 0 40px;
}

.emirate-btn {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.005em;
  color: var(--text-secondary);
  background: #FFFFFF;
  border: 1px solid var(--border-hairline);
  padding: 9px 22px;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.emirate-btn:hover { color: var(--accent); border-color: var(--accent); }

.emirate-btn.active {
  color: var(--text-inverse);
  background: var(--n-ink);
  border-color: var(--n-ink);
}

/* ─── MAIN LAYOUT ───────────────────────────────────── */
.main-layout {
  position: relative;
  /* Leaflet gives its panes z-index up to 800. Without a stacking context
     here those compete with the filter bar at the root and paint over its
     dropdowns, so pin the whole map into its own low context. */
  z-index: 1;
  /* 72px navbar + however tall the filter bar has wrapped to */
  margin-top: calc(72px + var(--filter-h, 48px));
  height: calc(100vh - 72px - var(--filter-h, 48px));
  display: block;
  overflow: hidden;
}

/* ─── PROJECTS SIDEBAR ──────────────────────────────── */
.projects-sidebar {
  border-right: 1px solid var(--border-hairline);
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 10;
}

.sidebar-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.project-count {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 0.06em;
}

.projects-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

.projects-list::-webkit-scrollbar { width: 3px; }
.projects-list::-webkit-scrollbar-thumb { background: var(--accent); }

.project-card {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-hairline);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.project-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--dur-base) var(--ease-out);
}

.project-card:hover::before,
.project-card.active::before { transform: scaleY(1); }

.project-card:hover { background: var(--bg-inset); }
.project-card.active { background: var(--mist); }

.card-type {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--caution);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.card-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  line-height: 1.1;
  margin-bottom: 4px;
}

.card-developer {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.card-meta {
  display: flex;
  gap: 12px;
}

.card-price {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  color: var(--accent);
}

.card-completion {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
  align-self: center;
}

.card-3d-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
}

/* ─── MAP SECTION ───────────────────────────────────── */
.map-section {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--bg-dark);
}

#threeCanvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.map-ui-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.map-compass {
  position: absolute;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  pointer-events: none;
}

.scan-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--n-copper-300), transparent);
  animation: scanDown 4s linear infinite;
  opacity: 0.35;
  pointer-events: none;
}

@keyframes scanDown {
  0% { top: 0%; }
  100% { top: 100%; }
}

.map-crosshair {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60px; height: 60px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.map-crosshair.visible { opacity: 1; }

.map-crosshair::before,
.map-crosshair::after {
  content: '';
  position: absolute;
  background: var(--n-copper-300);
}

.map-crosshair::before {
  top: 50%; left: 0; right: 0;
  height: 1px;
  transform: translateY(-50%);
}

.map-crosshair::after {
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  transform: translateX(-50%);
}

.camera-hud {
  position: absolute;
  bottom: 24px;
  left: 24px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11px;
  color: var(--text-inverse-muted);
  letter-spacing: 0.1em;
  pointer-events: none;
}

.camera-hud span { color: var(--n-copper-300); }

/* ─── PROJECT DETAIL PANEL — fixed right overlay ────── */
.project-detail {
  position: fixed;
  top: 120px; right: 0; bottom: 0;
  width: 380px;
  border-left: 1px solid var(--border-hairline);
  background: #FFFFFF;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 600;
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
}
#detailContent {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}
.project-detail.open {
  transform: translateX(0);
}
.detail-close-btn {
  position: sticky;
  top: 12px;
  float: right;
  margin: 12px 14px 0 0;
  background: var(--paper);
  border: 1px solid var(--border-hairline);
  color: var(--text-secondary);
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 14px;
  z-index: 1;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.detail-close-btn:hover { color: var(--accent); border-color: var(--accent); }

.project-detail::-webkit-scrollbar { width: 3px; }
.project-detail::-webkit-scrollbar-thumb { background: var(--accent); }

.detail-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 8px;
  color: var(--text-muted);
  padding: 40px;
  text-align: center;
}

.placeholder-hex {
  width: 60px;
  height: 60px;
  margin-bottom: 16px;
  opacity: 0.4;
}

.detail-placeholder p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.detail-placeholder .sub {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  font-family: var(--font-sans);
}

/* Detail content */
.detail-img {
  width: 100%;
  height: 180px;
  background: linear-gradient(150deg, var(--ink-navy-raised), var(--ink-navy));
  position: relative;
  overflow: hidden;
}

.detail-img canvas {
  width: 100%;
  height: 100%;
}

.detail-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(18,10,6,0.35) 100%);
}

.detail-badge {
  position: absolute;
  top: 12px; right: 12px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  background: var(--caution);
  color: #FFFFFF;
  border-radius: var(--radius-1);
}

.detail-body {
  padding: 20px;
}

.detail-type {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--caution);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.detail-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.025em;
  line-height: 1.02;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.detail-developer {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.detail-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 20px;
}

.detail-price-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.detail-price {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 26px;
  color: var(--accent);
}

.detail-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border-hairline);
  border: 1px solid var(--border-hairline);
  margin-bottom: 20px;
}

.stat-item {
  background: var(--paper);
  padding: 12px 14px;
}

.stat-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.stat-value {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 16px;
  color: var(--text-primary);
}

.detail-section-title {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-hover);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.detail-description {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.detail-features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 24px;
}

.feature-tag {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border: 1px solid var(--sapphire);
  color: var(--accent);
}

/* ─── DETAIL PANEL NEW STYLES ───────────────────────── */
.dp-section-title {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-hairline);
  margin-bottom: 10px;
  margin-top: 4px;
}
.detail-flag {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0;
  padding: 4px 10px;
  border-radius: var(--radius-1);
  background: rgba(196,105,58,0.08);
  border: 1px solid rgba(196,105,58,0.3);
  color: var(--accent);
}

/* ─── OFF-PLAN FILTER BAR ───────────────────────────── */
.filter-bar {
  position: fixed;
  top: 72px; left: 0; right: 0;
  z-index: 49;
  background: #FFFFFF;
  border-bottom: 1px solid var(--border-hairline);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  /* Wrap onto more rows rather than running off the edge. The layout below
     reads the real height from --filter-h, set in JS. */
  flex-wrap: wrap;
  row-gap: 8px;
  min-height: 48px;
  overflow: visible;
  scrollbar-width: none;
}
.filter-bar::-webkit-scrollbar { display: none; }
.view-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.view-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: -0.005em;
  padding: 5px 10px;
  border-radius: var(--radius-1);
  cursor: pointer;
  height: 30px;
  transition: all var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.view-btn:hover { background: var(--bg-inset); color: var(--text-primary); }
.view-btn.active {
  background: var(--n-ink);
  color: var(--text-inverse);
  border-color: var(--n-ink);
}
.filter-select {
  background: #FFFFFF;
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: var(--radius-1);
  cursor: pointer;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out);
  height: 30px;
  white-space: nowrap;
}
.filter-select:focus { border-color: var(--accent); }
.filter-input {
  background: #FFFFFF;
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: var(--radius-1);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out);
  height: 30px;
  width: 110px;
}
.filter-input:focus { border-color: var(--accent); }
.filter-input::placeholder { color: var(--text-muted); }
/* ── Multi select dropdown (emirates) ── */
.ms-wrap { position: relative; display: inline-block; }
.ms-trigger {
  display: flex; align-items: center; gap: 6px;
  background: #FFFFFF;
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: var(--radius-1);
  height: 30px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.ms-trigger:hover { border-color: var(--accent); }
.ms-wrap.open .ms-trigger { border-color: var(--accent); }
.ms-trigger.has-selection { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.ms-caret { font-size: 10px; opacity: 0.6; }
.ms-panel {
  display: none;
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 190px;
  background: #FFFFFF;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-2);
  box-shadow: 0 8px 24px rgba(36,26,18,0.14);
  padding: 6px;
  z-index: 60;
  max-height: 320px; overflow-y: auto;
}
.ms-wrap.open .ms-panel { display: block; }
.ms-opt {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; border-radius: var(--radius-1);
  font-family: var(--font-sans); font-size: 13px;
  color: var(--text-secondary); cursor: pointer; white-space: nowrap;
}
.ms-opt:hover { background: var(--bg-inset); color: var(--text-primary); }
.ms-opt input { accent-color: var(--accent); width: 14px; height: 14px; cursor: pointer; }
.ms-opt .ms-count { margin-left: auto; font-size: 11px; color: var(--text-muted); }

.filter-toggle {
  background: #FFFFFF;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: var(--radius-1);
  cursor: pointer;
  height: 30px;
  white-space: nowrap;
  transition: all var(--dur-fast) var(--ease-out);
}
.filter-toggle:hover { background: var(--bg-inset); color: var(--text-primary); }
.filter-toggle.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
  font-weight: 600;
}
.filter-divider {
  width: 1px; height: 20px;
  background: var(--border-hairline);
  flex-shrink: 0;
}

/* ─── LIST VIEW ──────────────────────────────────────── */
.list-view {
  margin-top: 120px;
  min-height: calc(100vh - 120px);
  overflow-y: auto;
  padding: 24px 32px;
  background: var(--bg-page);
}
.list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
}
.list-card {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-2);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.list-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.list-card-cover {
  width: 100%; height: 180px;
  background: var(--bg-inset);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.list-card-cover img { width:100%;height:100%;object-fit:cover;display:block; }
.list-card-cover .no-photo {
  font-size: 40px; opacity: 0.3;
}
.list-card-body { padding: 16px; }
.list-card-type {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.list-card-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin-bottom: 2px;
  line-height: 1.1;
}
.list-card-dev {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.list-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.list-card-price {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 18px;
  color: var(--accent);
  line-height: 1.1;
}
.list-card-status {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-1);
}
.list-card-status.active   { background: rgba(196,105,58,0.1); color: var(--accent); }
.list-card-status.upcoming { background: rgba(217,131,90,0.15); color: var(--accent-hover); }
.list-card-status.sold     { background: rgba(181,67,46,0.12);  color: var(--caution); }

.detail-cta {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  color: var(--text-inverse);
  background: var(--n-ink);
  border: none;
  width: 100%;
  padding: 14px;
  cursor: pointer;
  border-radius: var(--radius-1);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  margin-bottom: 8px;
}

.detail-cta:hover { background: var(--n-ink-2); }
.detail-cta:active { transform: scale(0.98); }

.detail-cta-sec {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.005em;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid var(--border-strong);
  width: 100%;
  padding: 12px;
  cursor: pointer;
  border-radius: var(--radius-1);
  transition: all var(--dur-fast) var(--ease-out);
}

.detail-cta-sec:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ─── SIGNATURE METAL BUTTON — sparingly, one per screen ────── */
.btn-metal {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--n-ink);
  background: var(--n-copper-gradient);
  background-size: 200% 200%;
  border: none;
  border-radius: var(--radius-1);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background-position var(--dur-slow) var(--ease-out);
  animation: metalShimmer 6s ease infinite;
}
.btn-metal:active { transform: scale(0.98); }
@keyframes metalShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ─── LOADING OVERLAY ───────────────────────────────── */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-dark);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 24px;
  transition: opacity 0.6s, visibility 0.6s;
}

.loading-overlay.hidden {
  opacity: 0;
  visibility: hidden;
}

.loading-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.03em;
  color: var(--accent-hi);
}

.loading-bar {
  width: 200px;
  height: 1px;
  background: var(--border-on-dark);
  position: relative;
  overflow: hidden;
}

.loading-bar-fill {
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: var(--n-copper-300);
  animation: loadFill 1.5s ease forwards;
}

@keyframes loadFill {
  to { left: 0%; }
}

.loading-text {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-inverse-muted);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ─── ADMIN ─────────────────────────────────────────── */
.admin-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

.admin-sidebar {
  background: var(--bg-dark);
  border-right: 1px solid var(--border-on-dark);
  padding: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.admin-logo {
  padding: 28px 24px;
  border-bottom: 1px solid var(--border-on-dark);
}

.admin-logo h2 {
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--text-inverse);
}

.admin-logo span {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-inverse-muted);
  letter-spacing: 0.16em;
  display: block;
  margin-top: 2px;
}

.admin-nav {
  padding: 16px 0;
  flex: 1;
}

.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  color: var(--text-inverse-muted);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  border-left: 2px solid transparent;
  text-decoration: none;
}

.admin-nav-item:hover {
  color: var(--text-inverse);
  background: rgba(255,255,255,0.03);
  border-left-color: var(--border-on-dark);
}

.admin-nav-item.active {
  color: var(--accent-hi);
  border-left-color: var(--n-copper-300);
  background: rgba(217,131,90,0.08);
}

.admin-nav-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
}

.admin-main {
  padding: 40px;
  overflow-y: auto;
  background: var(--bg-page);
}

.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 36px;
}

.admin-page-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

.admin-page-title span {
  font-family: var(--n-font-serif); font-style: italic; font-weight: 700;
  color: var(--accent-deep);
  background: var(--n-copper-gradient);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  padding: 0.12em 0.22em 0.16em 0.1em; margin: -0.12em -0.22em -0.16em -0.1em; display: inline-block;
}

.btn-primary {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.005em;
  color: var(--text-inverse);
  background: var(--n-ink);
  border: none;
  padding: 10px 24px;
  cursor: pointer;
  border-radius: var(--radius-1);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.btn-primary:hover { background: var(--n-ink-2); }
.btn-primary:active { transform: scale(0.98); }

.btn-secondary {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.005em;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid var(--text-primary);
  padding: 9px 22px;
  cursor: pointer;
  border-radius: var(--radius-1);
  transition: all var(--dur-fast) var(--ease-out);
}

.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.action-btn {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: -0.005em;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-hairline);
  padding: 5px 12px;
  border-radius: var(--radius-1);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}

.action-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.action-btn.danger:hover {
  border-color: var(--caution);
  color: var(--caution);
}

.btn-danger {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  color: var(--caution);
  background: transparent;
  border: 1px solid var(--caution);
  padding: 6px 14px;
  cursor: pointer;
  border-radius: var(--radius-1);
  transition: all var(--dur-fast) var(--ease-out);
}

.btn-danger:hover {
  background: var(--caution);
  color: #FFFFFF;
}

/* Admin stats */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}

.stat-card {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  padding: 20px 24px;
  position: relative;
  overflow: hidden;
}

.stat-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
}

.stat-card.primary::after { background: var(--accent); }
.stat-card.purple::after { background: var(--n-copper-300); }
.stat-card.orange::after { background: var(--caution); }
.stat-card.white::after { background: var(--border-strong); }

.stat-card .stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.stat-card .stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text-primary);
}

.stat-card.primary .stat-value { color: var(--accent); }

/* Admin table */
.admin-section {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  margin-bottom: 32px;
}

.admin-section-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.admin-section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-align: left;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border-hairline);
  text-transform: uppercase;
}

.admin-table td {
  padding: 14px 24px;
  border-bottom: 1px solid var(--border-hairline);
  font-size: 13px;
  color: var(--text-secondary);
  vertical-align: middle;
}

.admin-table tr:last-child td { border-bottom: none; }

.admin-table tr:hover td {
  background: var(--bg-inset);
}

.status-badge {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  text-transform: uppercase;
  border-radius: var(--radius-1);
}

.status-badge.active { color: var(--accent); border: 1px solid rgba(196,105,58,0.4); }
.status-badge.sold { color: var(--caution); border: 1px solid rgba(181,67,46,0.4); }
.status-badge.upcoming { color: var(--accent-hover); border: 1px solid rgba(217,131,90,0.5); }

.table-actions { display: flex; gap: 8px; }

/* ─── MODAL / FORM ──────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18,10,6,0.6);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}

.modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: #FFFFFF;
  border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-lg);
  width: 700px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

.modal-header {
  padding: 24px 32px;
  border-bottom: 1px solid var(--border-hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background: #FFFFFF;
  z-index: 1;
}

.modal-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 22px;
  cursor: pointer;
  padding: 4px;
  transition: color var(--dur-fast) var(--ease-out);
}

.modal-close:hover { color: var(--text-primary); }

.modal-body { padding: 32px; }

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

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

.form-group.full { grid-column: 1 / -1; }

.form-label {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.form-input, .form-select, .form-textarea {
  background: var(--paper);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  padding: 10px 14px;
  outline: none;
  border-radius: var(--radius-1);
  transition: border-color var(--dur-fast) var(--ease-out);
  width: 100%;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--accent);
}

.form-input::placeholder { color: var(--text-muted); }

.form-select option {
  background: #FFFFFF;
  color: var(--text-primary);
}

.form-textarea { resize: vertical; min-height: 80px; }

.coord-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* ─── FOOTER ─────────────────────────────────────────── */
footer { border-top: 1px solid var(--border-on-dark); background: var(--bg-dark); }
.footer-top { max-width: 1200px; margin: 0 auto; padding: 64px 40px 48px; display: grid; grid-template-columns: 1.6fr 1fr 1.2fr; gap: 48px; }
.footer-col-logo img { height: 40px; width: auto; margin-bottom: 20px; }
.footer-col-logo .footer-wordmark { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -0.02em; color: var(--text-inverse); margin-bottom: 18px; }
.footer-tagline { font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: var(--text-inverse-muted); line-height: 1.6; max-width: 260px; }
.footer-col-title { font-family: var(--font-mono); font-weight: 600; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-on-dark); margin-bottom: 20px; }
.footer-links { display: flex; flex-direction: column; gap: 12px; }
.footer-links a { font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: var(--text-inverse-muted); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.footer-links a:hover { color: var(--text-inverse); }
.footer-contact-item { display: flex; align-items: flex-start; gap: 10px; font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: var(--text-inverse-muted); margin-bottom: 14px; line-height: 1.5; }
.footer-contact-icon { color: var(--n-copper-300); flex-shrink: 0; margin-top: 1px; }
.footer-bottom { border-top: 1px solid var(--border-on-dark); padding: 20px 40px; max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.footer-copy { font-family: var(--font-mono); font-size: 11px; color: var(--text-inverse-muted); letter-spacing: 0.06em; }
.footer-admin { font-family: var(--font-mono); font-size: 11px; color: rgba(247,240,232,0.3); text-decoration: none; letter-spacing: 0.08em; transition: color var(--dur-fast) var(--ease-out); }
.footer-admin:hover { color: var(--text-inverse-muted); }
@media (max-width: 520px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; padding: 40px 20px; }
  .footer-col-logo { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; padding: 16px 20px; }
}

.modal-footer {
  padding: 20px 32px;
  border-top: 1px solid var(--border-hairline);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  position: sticky;
  bottom: 0;
  background: #FFFFFF;
}

/* ─── TOAST ─────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 32px;
  right: 32px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.005em;
  padding: 14px 24px;
  background: var(--n-ink);
  color: var(--text-inverse);
  z-index: 999;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.3s;
  border-radius: var(--radius-1);
  box-shadow: var(--shadow-md);
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

.toast.error {
  background: var(--caution);
  color: #FFFFFF;
}

/* ─── MISC ──────────────────────────────────────────── */
.dot-pulse {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

.tag-emirate {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  color: var(--accent-hover);
  border: 1px solid rgba(217,131,90,0.5);
}

/* mini 3D building SVG animation in card */
@keyframes buildingRotate {
  0% { transform: rotateY(0deg) rotateX(10deg); }
  100% { transform: rotateY(360deg) rotateX(10deg); }
}

@keyframes buildFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}

/* Leaflet dashed line animation */
.connection-anim {
  animation: dashFlow 2s linear infinite;
}

@keyframes dashFlow {
  to { stroke-dashoffset: -24; }
}

/* ─── OFF-PLAN MOBILE LAYOUT ─────────────────────────────────────
   On small screens the filter bar wraps into rows (no hidden
   horizontal scroll), and the map + footer flow in normal order. */
@media (max-width: 1024px) {
  .filter-bar {
    position: static;
    margin-top: 72px;          /* clear the fixed navbar */
    height: auto;
    flex-wrap: wrap;
    overflow: visible;
    padding: 10px 14px;
    row-gap: 8px;
  }
  .filter-divider { display: none; }
  .filter-bar .view-toggle-wrap { flex: 1 1 100%; }
  .filter-bar .view-btn { flex: 1 1 0; justify-content: center; }
  .filter-select, .filter-input { flex: 1 1 calc(50% - 8px); min-width: 0; }
  .filter-toggle { flex: 1 1 calc(50% - 8px); justify-content: center; }
  .ms-wrap { flex: 1 1 calc(50% - 8px); min-width: 0; }
  .ms-trigger { width: 100%; justify-content: space-between; }
  .ms-panel { min-width: 100%; }

  /* Map + list flow naturally below the now-static filter bar */
  .main-layout { margin-top: 0; height: 68vh; }
  .list-view { margin-top: 0; min-height: auto; padding: 20px 16px; }
}

/* ---- numbers line up in columns -------------------------------------
   Inter is proportional, so a 1 is narrower than a 7 and a column of figures
   goes ragged. tabular-nums makes every digit the same width, which is the
   one thing the old monospace face was really buying. Applied where numbers
   sit under each other, never to running text. */
.k-value, .kpi .v, .lb-val .v, .lb-rank, .lt-val, .cc-val,
table td, table th, .num, .f-datebox input.f-date,
[class*="-value"], [class*="-num"], [class*="psf"], [class*="Count"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* The footer's small button. Its size used to be written on the button itself
   (js/components.js); it lives here now so the new look below can change it. */
footer .footer-cta { font-size: 12px; padding: 10px 20px; margin-top: 8px; cursor: pointer; }
/* The phone menu's group names ("Analysis", "Marketing"). */
.mobile-menu-group {
  font-family: var(--font-mono); font-weight: 600; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-muted); padding: 18px 0 2px;
}

/* ════════════════════════════════════════════════════════════════════
   THE NEW LOOK (5 Oct 2026): the shared parts in the Showroom's design.

   Only a page that carries <html data-look="showroom"> reads this section;
   every other page keeps the rules above. Tokens: css/tokens.css (THE NEW
   LOOK). Reference: css/project-compare-v3.css.

   Every selector starts with :where(...), which weighs nothing, so each
   rule weighs the same as the old rule it replaces and a page's own
   <style> still wins, exactly as before. The lead form is the one
   exception (its old rules are injected after this file).

   ONE motion system: two durations, one easing. Hover only where a real
   pointer hovers. Everything pressable gives a little under the finger.
   ════════════════════════════════════════════════════════════════════ */

/* ---------- the ground and the type ---------- */
html:where([data-look="showroom"]) { background: var(--bg); -webkit-tap-highlight-color: transparent; }
:where([data-look="showroom"]) body {
  background: var(--bg); color: var(--fg);
  font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 1.45;
  font-feature-settings: normal; font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
:where([data-look="showroom"]) h1,
:where([data-look="showroom"]) .display { font-family: var(--sans); font-weight: 300; letter-spacing: -.04em; }
:where([data-look="showroom"]) h2 { font-family: var(--sans); font-weight: 300; letter-spacing: -.035em; }
:where([data-look="showroom"]) h3,
:where([data-look="showroom"]) h4,
:where([data-look="showroom"]) h5,
:where([data-look="showroom"]) .heading { font-family: var(--sans); font-weight: 400; letter-spacing: -.015em; }
:where([data-look="showroom"]) button,
:where([data-look="showroom"]) input,
:where([data-look="showroom"]) select,
:where([data-look="showroom"]) textarea { font-family: var(--sans); }

/* the one emphasis word: weight and copper. Never a second family, never gradient text */
:where([data-look="showroom"]) .n-em,
:where([data-look="showroom"]) em.n-em,
:where([data-look="showroom"]) .n-metal,
:where([data-look="showroom"]) .n-serif {
  font-family: inherit; font-style: normal; font-weight: 500; letter-spacing: inherit; color: var(--cu-hi);
  background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor;
  padding: 0; margin: 0; display: inline;
}

/* one typeface with no italic cut: a slanted word would be faked by the browser, so emphasis is weight */
:where([data-look="showroom"]) em,
:where([data-look="showroom"]) i,
:where([data-look="showroom"]) cite { font-style: normal; }
:where([data-look="showroom"]) a { color: var(--cu-hi); text-underline-offset: 3px; text-decoration-thickness: 1px; }
:where([data-look="showroom"]) a:focus-visible,
:where([data-look="showroom"]) button:focus-visible,
:where([data-look="showroom"]) input:focus-visible,
:where([data-look="showroom"]) select:focus-visible,
:where([data-look="showroom"]) textarea:focus-visible,
:where([data-look="showroom"]) [tabindex]:focus-visible { outline: 2px solid var(--cu-hi); outline-offset: 3px; }
:where([data-look="showroom"]) ::selection { background: rgba(196, 105, 58, .45); color: #fff; }
:where([data-look="showroom"]) input,
:where([data-look="showroom"]) textarea { caret-color: var(--cu-hi); }

/* scrollbars in the brand: thin, no arrows, a copper thumb */
:where([data-look="showroom"]) * { scrollbar-width: thin; scrollbar-color: rgba(196, 105, 58, .6) transparent; }
:where([data-look="showroom"]) ::-webkit-scrollbar { width: 8px; height: 8px; }
:where([data-look="showroom"]) ::-webkit-scrollbar-track { background: transparent; }
:where([data-look="showroom"]) ::-webkit-scrollbar-thumb { background: rgba(196, 105, 58, .6); border-radius: 8px; }
:where([data-look="showroom"]) ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
:where([data-look="showroom"]) ::-webkit-scrollbar-corner { background: transparent; }

/* a fine grain over the dark ground, 3%, so it never reads sterile; it takes no pointer */
:where([data-look="showroom"]) body::after {
  content: ''; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; opacity: .03;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='128' height='128'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='128' height='128' filter='url(%23n)'/></svg>");
  background-size: 128px 128px;
}
@media print { :where([data-look="showroom"]) body::after { display: none; } }

/* ---------- the top menu: one bar of glass ---------- */
:where([data-look="showroom"]) .navbar {
  height: var(--nav-h); padding: 0 var(--gut); gap: 20px;
  background: var(--glass); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 0;
}
@media (prefers-reduced-transparency: reduce) {
  :where([data-look="showroom"]) .navbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); }
}
:where([data-look="showroom"]) .nav-logo { font-family: var(--sans); font-weight: 500; font-size: 15px; letter-spacing: .01em; color: var(--fg); min-height: 44px; }
:where([data-look="showroom"]) .nav-links { gap: 26px; }
:where([data-look="showroom"]) .nav-links a,
:where([data-look="showroom"]) .nav-dropdown-trigger {
  font-family: var(--sans); font-size: 14.5px; font-weight: 400; letter-spacing: 0; line-height: 1.2;
  color: var(--fg-2); padding: 10px 0; border-bottom: 0; white-space: nowrap;
  transition: color var(--d-s) var(--ease);
}
:where([data-look="showroom"]) .nav-links a:hover,
:where([data-look="showroom"]) .nav-links a.active { color: var(--fg); border-bottom-color: transparent; }
:where([data-look="showroom"]) .nav-links a.active { color: var(--cu-hi); }
:where([data-look="showroom"]) .nav-dropdown-trigger svg { opacity: .7; transition: transform var(--d-s) var(--ease); }
:where([data-look="showroom"]) .nav-dropdown-wrap:hover .nav-dropdown-trigger,
:where([data-look="showroom"]) .nav-dropdown-wrap:focus-within .nav-dropdown-trigger { color: var(--fg); }
:where([data-look="showroom"]) .nav-dropdown-wrap.active .nav-dropdown-trigger { color: var(--cu-hi); }
:where([data-look="showroom"]) .nav-dropdown-wrap:hover .nav-dropdown-trigger svg,
:where([data-look="showroom"]) .nav-dropdown-wrap:focus-within .nav-dropdown-trigger svg { transform: rotate(180deg); }

/* the menu that drops: a floating card, no line around it */
:where([data-look="showroom"]) .nav-dropdown {
  top: calc(100% + 12px); min-width: 230px; padding: 8px;
  background: var(--float); border: 0; border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(244, 236, 226, .07), var(--shadow-float);
  transition: opacity var(--d-s) var(--ease), transform var(--d-s) var(--ease), visibility var(--d-s) var(--ease);
}
:where([data-look="showroom"]) .nav-dropdown.wide { display: grid; grid-template-columns: 1fr 1fr; column-gap: 4px; min-width: 540px; }
:where([data-look="showroom"]) .nav-dropdown-wrap:focus-within .nav-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
:where([data-look="showroom"]) .nav-dropdown a {
  display: flex; align-items: center; min-height: 40px; padding: 8px 14px;
  font-size: 14.5px; font-weight: 400; letter-spacing: 0; color: var(--fg-2);
  border-radius: 12px; border-bottom: 0;
  transition: background var(--d-s) var(--ease), color var(--d-s) var(--ease);
}
:where([data-look="showroom"]) .nav-dropdown a:hover { background: var(--bg-3); color: var(--fg); }
:where([data-look="showroom"]) .nav-dropdown a.active { background: var(--cu-soft); color: var(--cu-hi); }

/* the one copper button of the bar */
:where([data-look="showroom"]) .nav-cta-btn {
  height: 42px; padding: 0 20px; border-radius: 999px;
  background: var(--cu); animation: none; color: #fff;
  font-family: var(--sans); font-weight: 500; font-size: 14.5px; letter-spacing: 0; white-space: nowrap;
  transition: background var(--d-s) var(--ease), transform var(--d-s) var(--ease);
}
:where([data-look="showroom"]) .nav-cta-btn:hover { box-shadow: none; }
:where([data-look="showroom"]) .nav-cta-btn:active { transform: scale(.98); }

/* the phone: three thin lines, then a full sheet under the bar */
:where([data-look="showroom"]) .nav-burger { width: 44px; height: 44px; padding: 12px 10px; gap: 5px; border-radius: 999px; }
:where([data-look="showroom"]) .nav-burger span { height: 1.5px; background: var(--fg); border-radius: 2px; transition: transform var(--d-l) var(--ease), opacity var(--d-s) var(--ease); }
:where([data-look="showroom"]) .navbar.nav-open .nav-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
:where([data-look="showroom"]) .navbar.nav-open .nav-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
:where([data-look="showroom"]) .mobile-menu {
  top: var(--nav-h); height: calc(100vh - var(--nav-h)); height: calc(100dvh - var(--nav-h));
  padding: 6px var(--gut) calc(28px + env(safe-area-inset-bottom));
  background: rgba(11, 7, 5, .98); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0;
}
:where([data-look="showroom"]) .mobile-menu > * { flex: none; }
:where([data-look="showroom"]) .mobile-menu a {
  display: flex; align-items: center; min-height: 50px; padding: 0;
  font-family: var(--sans); font-weight: 400; font-size: 18px; letter-spacing: -.01em;
  color: var(--fg); border-bottom: 0;
}
:where([data-look="showroom"]) .mobile-menu a.active { color: var(--cu-hi); }
:where([data-look="showroom"]) .mobile-menu-group {
  font-family: var(--sans); font-weight: 400; font-size: 13.5px; letter-spacing: 0; text-transform: none;
  color: var(--fg-3); padding: 22px 0 4px;
}
:where([data-look="showroom"]) .mobile-menu-cta {
  margin-top: 22px; min-height: 52px; padding: 0 24px; border-radius: 999px;
  background: var(--cu); animation: none; color: #fff;
  font-family: var(--sans); font-weight: 500; font-size: 16px; letter-spacing: 0;
}
:where([data-look="showroom"]) .mobile-menu-cta:active { transform: scale(.98); }

/* ---------- the footer: a quieter ground, the links in the menu's own groups, the name very large and very faint ---------- */
:where([data-look="showroom"]) footer { border-top: 0; }
.yf { position: relative; overflow: hidden; }
.yf-top { max-width: var(--maxw); margin: 0 auto; padding: 88px var(--gut) 0; }
.yf-brand { display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; gap: 0 48px; padding-bottom: 56px; border-bottom: 1px solid var(--line); }
.yf-logo { display: block; width: 46px; height: 46px; object-fit: contain; margin-bottom: 22px; }
.yf-brand .y-cta { justify-self: start; margin-top: 26px; }
@media (min-width: 760px) {
  .yf-brand { grid-template-columns: minmax(0, 1fr) auto; }
  .yf-logo { grid-column: 1 / -1; }
  .yf-brand .y-cta { margin-top: 0; margin-bottom: 6px; }
}
.yf-line { max-width: 21em; font-size: clamp(22px, 2.6vw, 34px); font-weight: 300; line-height: 1.2; letter-spacing: -.025em; color: var(--fg); }
.yf-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 28px; padding-top: 52px; }
.yf-col.wide { grid-column: 1 / -1; }
.yf-h { font-size: 13.5px; color: var(--fg-3); margin-bottom: 12px; }
.yf-list { display: grid; gap: 2px; align-content: start; }
.yf-col.wide .yf-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.yf-list a, .yf-list span { display: block; padding: 6px 0; font-size: 15px; line-height: 1.35; color: var(--fg-2); text-decoration: none; transition: color var(--d-s) var(--ease); }
.yf-mark {
  margin: 64px 0 -0.19em; padding: 0 var(--gut); text-align: center; white-space: nowrap; pointer-events: none;
  -webkit-user-select: none; user-select: none;
  font-weight: 200; font-size: clamp(44px, 12.6vw, 236px); line-height: 1; letter-spacing: -.055em;
  color: transparent; background: linear-gradient(to bottom, rgba(244, 236, 226, .13), rgba(244, 236, 226, .02) 78%);
  -webkit-background-clip: text; background-clip: text;
}
.yf-bottom { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 18px var(--gut) calc(22px + env(safe-area-inset-bottom)); font-size: 13px; color: var(--fg-3); }
@media (min-width: 760px) {
  .yf-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .yf-col.wide { grid-column: span 2; }
}
@media (min-width: 1100px) {
  .yf-cols { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px; }
}

/* ---------- buttons: a copper pill, a quiet pill ---------- */
:where([data-look="showroom"]) .btn-primary,
:where([data-look="showroom"]) .btn-metal,
:where([data-look="showroom"]) .detail-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px;
  border: 0; border-radius: 999px; background: var(--cu); animation: none; color: #fff;
  font-family: var(--sans); font-weight: 500; font-size: 16px; letter-spacing: 0; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--d-s) var(--ease), transform var(--d-s) var(--ease);
}
:where([data-look="showroom"]) .btn-secondary,
:where([data-look="showroom"]) .detail-cta-sec,
:where([data-look="showroom"]) .action-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px;
  border: 0; border-radius: 999px; background: var(--bg-3); color: var(--fg);
  font-family: var(--sans); font-weight: 400; font-size: 16px; letter-spacing: 0; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--d-s) var(--ease), transform var(--d-s) var(--ease);
}
:where([data-look="showroom"]) .action-btn { min-height: 40px; padding: 0 16px; font-size: 14.5px; }
:where([data-look="showroom"]) .btn-primary:active,
:where([data-look="showroom"]) .btn-metal:active,
:where([data-look="showroom"]) .detail-cta:active,
:where([data-look="showroom"]) .btn-secondary:active,
:where([data-look="showroom"]) .detail-cta-sec:active,
:where([data-look="showroom"]) .action-btn:active { transform: scale(.98); }

/* ---------- a project tile: the photo (rounded) and the words under it; no box, space separates tiles ---------- */
:where([data-look="showroom"]) .list-grid { gap: 34px 14px; }
:where([data-look="showroom"]) .list-card { min-width: 0; background: none; border: 0; border-radius: 0; overflow: visible; box-shadow: none; transition: none; }
:where([data-look="showroom"]) .list-card:hover { border-color: transparent; transform: none; box-shadow: none; }
:where([data-look="showroom"]) .list-card-cover {
  position: relative; height: auto; aspect-ratio: 4 / 3; border-radius: var(--r-m); overflow: hidden;
  background: var(--bg-3); display: grid; place-items: center;
}
:where([data-look="showroom"]) .list-card-cover img { transition: transform 400ms var(--ease); }
:where([data-look="showroom"]) .list-card-cover .no-photo { font-size: 26px; color: var(--fg-3); opacity: .5; }
/* no photo, or a photo that failed to load: never a broken picture. A copper-tinted tile carries the project's name. */
:where([data-look="showroom"]) .list-card-cover .no-photo.named {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; opacity: 1; text-align: center;
  background: linear-gradient(135deg, rgba(232, 163, 116, .26) 0%, rgba(196, 105, 58, .18) 40%, rgba(122, 46, 20, .34) 100%), var(--bg-3);
  font-weight: 300; font-size: clamp(20px, 2.2vw, 30px); line-height: 1.1; letter-spacing: -.025em; color: var(--fg); overflow-wrap: anywhere;
}
:where([data-look="showroom"]) .list-card-body { padding: 12px 2px 0; }
:where([data-look="showroom"]) .list-card-type { font-family: var(--sans); font-size: 13.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--fg-2); margin-bottom: 3px; }
:where([data-look="showroom"]) .list-card-name { font-family: var(--sans); font-size: 20px; font-weight: 400; letter-spacing: -.015em; line-height: 1.2; color: var(--fg); margin-bottom: 0; overflow-wrap: anywhere; }
:where([data-look="showroom"]) .list-card-dev { font-size: 14px; color: var(--fg-2); margin: 2px 0 10px; }
:where([data-look="showroom"]) .list-card-meta { gap: 10px; }
:where([data-look="showroom"]) .list-card-price { font-family: var(--sans); font-size: 15.5px; font-weight: 400; color: var(--fg); }
:where([data-look="showroom"]) .list-card-status {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; background: var(--bg-3);
  font-family: var(--sans); font-size: 12.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--fg); white-space: nowrap;
}
:where([data-look="showroom"]) .list-card-status::before { content: ''; width: 6px; height: 6px; border-radius: 3px; background: var(--cu-hi); flex: none; }
:where([data-look="showroom"]) .list-card-status.active { background: var(--bg-3); color: var(--fg); }
:where([data-look="showroom"]) .list-card-status.upcoming { background: var(--bg-3); color: var(--fg); }
:where([data-look="showroom"]) .list-card-status.upcoming::before { background: var(--fg-2); }
:where([data-look="showroom"]) .list-card-status.sold { background: var(--bg-3); color: var(--fg-3); }
:where([data-look="showroom"]) .list-card-status.sold::before { background: var(--fg-3); }

/* the small message that rises from the bottom */
:where([data-look="showroom"]) .toast {
  background: var(--fg); color: var(--bg); border-radius: 999px; padding: 12px 18px;
  font-family: var(--sans); font-weight: 400; font-size: 14.5px; letter-spacing: 0; box-shadow: none;
}

/* ---------- the new look's own small kit, for new pages (the door page) and new parts ---------- */
.y-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.y-cta, .y-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px;
  border: 0; border-radius: 999px; font-family: var(--sans); font-size: 16px; letter-spacing: 0; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--d-s) var(--ease), transform var(--d-s) var(--ease);
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.y-cta { background: var(--cu); color: #fff; font-weight: 500; }
.y-ghost { background: var(--bg-3); color: var(--fg); font-weight: 400; }
.y-cta.big { min-height: 60px; padding: 0 30px; font-size: 17.5px; }
.y-cta:active, .y-ghost:active { transform: scale(.98); }
.y-cta svg, .y-ghost svg { width: 22px; height: 22px; flex: none; }
.y-pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 11px; border-radius: 999px; border: 1px solid rgba(232, 163, 116, .35); color: var(--cu-hi); font-size: 12.5px; white-space: nowrap; }
.y-card { background: var(--bg-2); border-radius: var(--r); }
.y-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--bg-3); color: var(--cu-hi); flex: none; }
.y-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* the arrow that rides at the end of a button: a small disc, it leans forward under a real pointer */
.y-arr { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: -10px; border-radius: 50%; background: rgba(255, 255, 255, .17); flex: none; transition: transform var(--d-s) var(--ease); }
.y-ghost .y-arr { background: rgba(244, 236, 226, .09); }
.y-arr svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* a soft copper light that follows a real pointer across a card (js/components.js sets --mx and --my) */
.y-spot { position: relative; isolation: isolate; }
.y-spot::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(232, 163, 116, .14), transparent 68%);
  transition: opacity var(--d-l) var(--ease);
}

/* a warm glow rising from the bottom of a closing section */
.y-glow { position: relative; isolation: isolate; }
.y-glow::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(58% 70% at 50% 108%, rgba(196, 105, 58, .26), rgba(196, 105, 58, .07) 46%, transparent 72%);
}

/* THINGS RISE INTO PLACE the first time they are seen. A page opts in twice: its head adds the class "rise" to
   <html> (so nothing flashes), and the parts carry data-rise. A headline with data-rise="lines" rises line by line.
   --i (on the element) staggers neighbours. If the script never runs, everything shows itself after 3.5 seconds. */
.rise [data-rise] {
  opacity: 0; transform: translateY(24px);
  transition: opacity var(--d-show) var(--ease), transform var(--d-show) var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.rise [data-rise].in { opacity: 1; transform: none; }
.rise [data-rise="lines"] { transform: none; transition: none; }
.rise [data-rise="lines"].split { opacity: 1; }
.y-line { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.y-line > span { display: block; transform: translateY(112%); transition: transform 1000ms var(--ease); transition-delay: calc(var(--l, 0) * 95ms + var(--i, 0) * 80ms); }
.in > .y-line > span { transform: none; }
.rise:not(.rise-on) [data-rise] { animation: yRiseSafe 1ms 3.5s forwards; }
@keyframes yRiseSafe { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .rise [data-rise] { opacity: 1; transform: none; transition: none; }
  .y-line > span { transform: none; transition: none; }
}

/* the top menu is clear over the first screen and frosts once the page moves (js/components.js sets nav-top) */
:where([data-look="showroom"]) .navbar { transition: background-color var(--d-l) var(--ease); }
:where([data-look="showroom"]) .navbar.nav-top { background: linear-gradient(to bottom, rgba(11, 7, 5, .62), rgba(11, 7, 5, 0)); backdrop-filter: none; -webkit-backdrop-filter: none; }
:where([data-look="showroom"]) .navbar.nav-open { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* the small lock beside "Project Finder" in the menu, and the small line beside it in the phone menu */
.nav-lock { margin-left: 6px; opacity: .65; vertical-align: -1px; flex: none; }
.mobile-menu-note { margin-left: 10px; font-size: 12px; font-weight: 500; color: var(--text-muted); }
:where([data-look="showroom"]) .nav-links a { display: inline-flex; align-items: center; }
:where([data-look="showroom"]) .mobile-menu-note { margin-left: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(232, 163, 116, .35); font-size: 12px; font-weight: 400; color: var(--cu-hi); }

/* ---------- hover: only where a real pointer hovers ---------- */
@media (hover: hover) and (pointer: fine) {
  :where([data-look="showroom"]) a:hover { color: var(--fg); }
  :where([data-look="showroom"]) .nav-cta-btn:hover,
  :where([data-look="showroom"]) .mobile-menu-cta:hover,
  :where([data-look="showroom"]) .btn-primary:hover,
  :where([data-look="showroom"]) .btn-metal:hover,
  :where([data-look="showroom"]) .detail-cta:hover,
  .y-cta:hover { background: var(--cu-press); color: #fff; }
  :where([data-look="showroom"]) .btn-secondary:hover,
  :where([data-look="showroom"]) .detail-cta-sec:hover,
  :where([data-look="showroom"]) .action-btn:hover,
  .y-ghost:hover { background: var(--bg-4); color: var(--fg); border-color: transparent; }
  .yf-list a:hover { color: var(--fg); }
  .y-cta:hover .y-arr, .y-ghost:hover .y-arr { transform: translateX(3px); }
  .y-spot:hover::before { opacity: 1; }
  :where([data-look="showroom"]) .view-btn:not(.active):hover,
  :where([data-look="showroom"]) .filter-toggle:not(.active):hover,
  :where([data-look="showroom"]) .ms-trigger:hover { background: var(--bg-4); color: var(--fg); }
  :where([data-look="showroom"]) .ms-opt:hover { background: var(--bg-3); color: var(--fg); }
  :where([data-look="showroom"]) .project-card:hover { background: var(--bg-3); }
  :where([data-look="showroom"]) .list-card:hover .list-card-cover img { transform: scale(1.04); }
  :where([data-look="showroom"]) ::-webkit-scrollbar-thumb:hover { background: #C4693A; }
}

/* ---------- THE LIVING GROUND (5 Oct 2026). js/components.js draws a slow warm light on <canvas class="y-amb">, fixed
   behind the page. For it to show, the body and the page's own wrappers are see-through; <html> keeps the dark
   ground under it. Where there is no WebGL (class amb-still), a still warm gradient stands in. ---------- */
.y-amb { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: -1; display: block; pointer-events: none; }
[data-look="showroom"] body,
[data-look="showroom"] .why-page,
[data-look="showroom"] .content-page,
[data-look="showroom"] .sc-page,
[data-look="showroom"] .roi-page,
[data-look="showroom"] .reports-page,
[data-look="showroom"] .ready-page,
[data-look="showroom"] .list-view { background: transparent; }
html.amb-still[data-look="showroom"] {
  background:
    radial-gradient(70% 55% at 96% -6%, rgba(196, 105, 58, .26), transparent 70%),
    radial-gradient(60% 50% at -8% 108%, rgba(196, 105, 58, .14), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
/* over the light, a panel is dark glass with a thin light edge (the Showroom does the same over a project's photo) */
:root[data-look="showroom"] {
  --bg-2: rgba(24, 16, 11, .74);
  --bg-3: rgba(38, 26, 18, .76);
  --bg-4: rgba(52, 36, 25, .86);
}
:where([data-look="showroom"]) footer { background: rgba(16, 10, 7, .78); }

/* ---------- SCENES: still pictures from the site's own film (assets/scenes/), behind a page's head or a big section.
   A head shows its scene in the far corner, melting into the dark towards the words. A section with the class
   y-scene shows its scene edge to edge under a dark veil; where the browser can, the picture drifts a little
   as the page scrolls (it works on a phone: scrolling is the phone's hover). ---------- */
/* (the heads no longer show a film still: since the fourth pass each page has its OWN sharp photo, see THE SPLIT HEAD below) */
.y-scene { position: relative; isolation: isolate; overflow: hidden; }
/* the picture is dimmed and melts away at the section's top and floor, so it joins the living ground with no edge */
.y-scene > .y-scene-wrap { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; opacity: .46;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 72%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 72%, transparent 100%); }
.y-scene .y-scene-img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; filter: saturate(.86) contrast(1.04); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .y-scene .y-scene-img, .y-drift { animation: yDrift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes yDrift { from { transform: translate3d(0, -5%, 0); } to { transform: translate3d(0, 5%, 0); } }
  }
}

/* ---------- THE PHONE DOCK (js/components.js builds it when <body data-dock="..."> names the page's main action) ---------- */
.y-dock { display: none; }
@media (max-width: 599px) {
  .y-dock {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    padding: 22px var(--gut) calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, rgba(11, 7, 5, .97) 58%, rgba(11, 7, 5, 0));
    transform: translateY(110%); transition: transform var(--d-l) var(--ease); pointer-events: none;
  }
  .y-dock.on { transform: none; pointer-events: auto; }
  .y-dock .y-cta { width: 100%; justify-content: space-between; padding: 0 22px 0 26px; box-shadow: 0 10px 34px rgba(0, 0, 0, .45); }
  .has-dock .yf-bottom { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* ---------- DATA ZONES (5 Oct 2026). Nasser on the transactions pages: "everything is dark, and the text is also dark".
   Inside the body of a data page the quiet words are brighter, a card is clearly lifted off the ground (solid,
   lighter, with a visible edge and a soft light along its top), and lines are stronger. The old names are set
   again here because a name set on <html> is already worked out there and would not follow. ---------- */
[data-look="showroom"] .data-main,
[data-look="showroom"] .sc-main,
[data-look="showroom"] .roi-main,
[data-look="showroom"] .d-wrap,
[data-look="showroom"] .m-wrap,
[data-look="showroom"] .filter-bar,
[data-look="showroom"] .sc-filter-bar,
[data-look="showroom"] .roi-modebar,
[data-look="showroom"] .tabs-bar,
[data-look="showroom"] .f-pop,
[data-look="showroom"] .ms-panel {
  --fg-2: rgba(244, 236, 226, .84);  --fg-3: rgba(244, 236, 226, .68);
  --text-secondary: rgba(244, 236, 226, .84);  --n-fg-muted: rgba(244, 236, 226, .84);  --stone-700: rgba(244, 236, 226, .84);
  --text-muted: rgba(244, 236, 226, .68);  --n-fg-subtle: rgba(244, 236, 226, .68);  --stone-500: rgba(244, 236, 226, .68);  --n-neutral-data: rgba(244, 236, 226, .68);
  --text-inverse-muted: rgba(244, 236, 226, .84);
  --bg-2: #1C140E;  --bg-3: #2A1E15;  --bg-4: #3A2A1E;
  --surface-card: #1C140E;  --white: #1C140E;  --n-bg-elevated: #1C140E;  --alabaster: #1C140E;  --bg-raised: #1C140E;  --surface: #1C140E;  --n-cream: #1C140E;  --n-paper-2: #1C140E;
  --bg-inset: #2A1E15;  --mist: #2A1E15;  --paper: #2A1E15;  --n-paper-3: #2A1E15;  --stone-100: #2A1E15;
  --line: rgba(244, 236, 226, .14);  --border-hairline: rgba(244, 236, 226, .14);  --n-border: rgba(244, 236, 226, .14);  --border: rgba(244, 236, 226, .14);
  --border-strong: rgba(244, 236, 226, .24);  --n-border-strong: rgba(244, 236, 226, .24);  --stone-300: rgba(244, 236, 226, .24);
  --shadow-sm: inset 0 1px 0 rgba(244, 236, 226, .07);  --shadow-xs: inset 0 1px 0 rgba(244, 236, 226, .07);  --n-shadow-sm: inset 0 1px 0 rgba(244, 236, 226, .07);
}
[data-look="showroom"] .filter-bar,
[data-look="showroom"] .sc-filter-bar,
[data-look="showroom"] .roi-modebar { background: rgba(17, 11, 8, .88); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); border-color: rgba(244, 236, 226, .1); box-shadow: none; }

/* ---------- THE HEAD OF A DATA PAGE (Dubai Data, Luxury, Rentals, Supply, Service Charges, ROI, Developers, Zones,
   Master Plan). The same five families of class names, one design: the words left and very large, a warm light
   in the far corner, no band. These carry the attribute's weight because each page's own <style> comes later. ---------- */
[data-look="showroom"] .data-hero,
[data-look="showroom"] .sc-hero,
[data-look="showroom"] .roi-hero,
[data-look="showroom"] .d-hero,
[data-look="showroom"] .m-hero {
  position: relative; isolation: isolate; overflow: hidden; text-align: left; background: none; border: 0;
  padding: calc(var(--nav-h) + 76px) max(24px, calc((100% - var(--n-container)) / 2 + 24px)) 52px;
}
[data-look="showroom"] .sc-hero,
[data-look="showroom"] .roi-hero { padding-top: 76px; }      /* these two pages already clear the menu themselves */
[data-look="showroom"] .data-hero::before,
[data-look="showroom"] .sc-hero::before,
[data-look="showroom"] .roi-hero::before,
[data-look="showroom"] .d-hero::before,
[data-look="showroom"] .m-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(54% 130% at 92% -18%, rgba(196, 105, 58, .24), rgba(196, 105, 58, .06) 48%, transparent 70%);
}
[data-look="showroom"] .data-hero .eyebrow,
[data-look="showroom"] .sc-hero .eyebrow,
[data-look="showroom"] .roi-hero .eyebrow,
[data-look="showroom"] .d-hero .eyebrow,
[data-look="showroom"] .m-hero .eyebrow { margin: 0 0 18px; font-family: var(--sans); font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--cu-hi); }
[data-look="showroom"] .data-hero h1,
[data-look="showroom"] .sc-hero h1,
[data-look="showroom"] .roi-hero h1,
[data-look="showroom"] .d-hero h1,
[data-look="showroom"] .m-hero h1 {
  margin: 0 0 24px; max-width: 13em; font-family: var(--sans); font-weight: 300;
  font-size: clamp(44px, 7.6vw, 112px); line-height: .95; letter-spacing: -.055em; color: var(--fg); text-wrap: balance;
}
[data-look="showroom"] .data-hero h1 .accent, [data-look="showroom"] .data-hero h1 em,
[data-look="showroom"] .sc-hero h1 em, [data-look="showroom"] .roi-hero h1 em,
[data-look="showroom"] .d-hero h1 .accent, [data-look="showroom"] .m-hero h1 .accent, [data-look="showroom"] .m-hero h1 .n-em { font-style: normal; font-weight: 500; color: var(--cu-hi); }
[data-look="showroom"] .data-hero .sub,
[data-look="showroom"] .sc-hero .sub,
[data-look="showroom"] .roi-hero .sub,
[data-look="showroom"] .d-hero .sub,
[data-look="showroom"] .m-hero .sub { margin: 0 0 26px; max-width: 36em; font-size: clamp(16.5px, 1.5vw, 19px); font-weight: 400; line-height: 1.5; color: var(--fg-2); }
[data-look="showroom"] .hero-meta,
[data-look="showroom"] .sc-hero-meta { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
[data-look="showroom"] .hero-meta span,
[data-look="showroom"] .sc-hero-meta span {
  padding: 6px 13px; border-radius: 999px; border: 1px solid rgba(232, 163, 116, .3); background: rgba(11, 7, 5, .4);
  font-family: var(--sans); font-size: 13.5px; letter-spacing: 0; color: var(--cu-hi);
}
@media (max-width: 640px) {
  [data-look="showroom"] .data-hero, [data-look="showroom"] .d-hero, [data-look="showroom"] .m-hero { padding: calc(var(--nav-h) + 44px) 16px 36px; }
  [data-look="showroom"] .sc-hero, [data-look="showroom"] .roi-hero { padding: 44px 16px 36px; }
}

/* ---------- THE HEAD OF A SMALL PAGE (Reports, Secondary properties, the Blog): the same design as a data page's
   head, for their class names (a .label, an h1 with a <span>, a plain <p>). ---------- */
[data-look="showroom"] .reports-hero,
[data-look="showroom"] .ready-hero,
[data-look="showroom"] .blogs-hero {
  position: relative; isolation: isolate; overflow: hidden; max-width: none; margin: 0; text-align: left; background: none; border: 0;
  padding: calc(var(--nav-h) + 76px) max(var(--gut), calc((100% - var(--maxw)) / 2 + var(--gut))) 52px;
}
[data-look="showroom"] .reports-hero::before,
[data-look="showroom"] .ready-hero::before,
[data-look="showroom"] .blogs-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(54% 130% at 92% -18%, rgba(196, 105, 58, .24), rgba(196, 105, 58, .06) 48%, transparent 70%);
}
[data-look="showroom"] .reports-hero .label,
[data-look="showroom"] .ready-hero .label { margin: 0 0 18px; font-family: var(--sans); font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--cu-hi); }
[data-look="showroom"] .reports-hero h1,
[data-look="showroom"] .ready-hero h1,
[data-look="showroom"] .blogs-hero h1 {
  margin: 0 0 24px; max-width: 13em; font-family: var(--sans); font-weight: 300;
  font-size: clamp(44px, 7.6vw, 112px); line-height: .95; letter-spacing: -.055em; color: var(--fg);
}
[data-look="showroom"] .reports-hero h1 span,
[data-look="showroom"] .ready-hero h1 span,
[data-look="showroom"] .blogs-hero h1 span { font-style: normal; font-weight: inherit; color: inherit; }
[data-look="showroom"] .reports-hero h1 .y-line span span,
[data-look="showroom"] .ready-hero h1 .y-line span span,
[data-look="showroom"] .blogs-hero h1 .y-line span span,
[data-look="showroom"] .reports-hero h1:not(.split) > span,
[data-look="showroom"] .ready-hero h1:not(.split) > span,
[data-look="showroom"] .blogs-hero h1:not(.split) > span { font-weight: 500; color: var(--cu-hi); }
[data-look="showroom"] .reports-hero p,
[data-look="showroom"] .ready-hero p,
[data-look="showroom"] .blogs-hero p { margin: 0; max-width: 36em; font-family: var(--sans); font-size: clamp(16.5px, 1.5vw, 19px); font-weight: 400; line-height: 1.5; color: var(--fg-2); }
@media (max-width: 640px) {
  [data-look="showroom"] .reports-hero, [data-look="showroom"] .ready-hero, [data-look="showroom"] .blogs-hero { padding-top: calc(var(--nav-h) + 44px); padding-bottom: 36px; }
}

/* ---------- THE OLD MAP PAGE and the pages that share its parts (off-plan.html, ready.html): the bar of filters, the
   list, the panel that slides in. Same class names as above in this file, new look. ---------- */
:where([data-look="showroom"]) .filter-bar { background: rgba(11, 7, 5, .9); border-bottom: 0; -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); }
:where([data-look="showroom"]) .view-btn,
:where([data-look="showroom"]) .filter-select,
:where([data-look="showroom"]) .filter-input,
:where([data-look="showroom"]) .ms-trigger,
:where([data-look="showroom"]) .filter-toggle {
  height: 38px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--bg-3); color: var(--fg);
  font-family: var(--sans); font-weight: 400; font-size: 14px; letter-spacing: 0;
  transition: background var(--d-s) var(--ease), box-shadow var(--d-s) var(--ease), color var(--d-s) var(--ease);
}
:where([data-look="showroom"]) .filter-input::placeholder { color: var(--fg-3); }
:where([data-look="showroom"]) .filter-select:focus,
:where([data-look="showroom"]) .filter-input:focus { box-shadow: inset 0 0 0 1.5px var(--cu); }
:where([data-look="showroom"]) .view-btn.active { background: var(--fg); color: var(--bg); border-color: transparent; }
:where([data-look="showroom"]) .filter-toggle.active,
:where([data-look="showroom"]) .ms-trigger.has-selection { background: var(--cu-soft); box-shadow: inset 0 0 0 1.5px var(--cu); color: var(--fg); font-weight: 400; }
:where([data-look="showroom"]) .filter-divider { background: var(--line); }
:where([data-look="showroom"]) .ms-panel { background: var(--float); border: 0; border-radius: 18px; padding: 8px; box-shadow: inset 0 0 0 1px rgba(244, 236, 226, .07), var(--shadow-float); }
:where([data-look="showroom"]) .ms-opt { min-height: 40px; padding: 8px 12px; border-radius: 12px; font-size: 14.5px; color: var(--fg-2); }
:where([data-look="showroom"]) .ms-opt .ms-count { color: var(--fg-3); }
:where([data-look="showroom"]) .list-view { background: var(--bg); }
:where([data-look="showroom"]) .projects-sidebar { background: rgba(20, 13, 9, .94); border: 0; }
:where([data-look="showroom"]) .sidebar-header { border-bottom-color: var(--line); background: transparent; }
:where([data-look="showroom"]) .project-count { font-family: var(--sans); font-size: 14px; letter-spacing: 0; color: var(--cu-hi); }
:where([data-look="showroom"]) .project-card { border-bottom-color: var(--line); }
:where([data-look="showroom"]) .project-card.active { background: var(--bg-3); }
:where([data-look="showroom"]) .card-type { font-family: var(--sans); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--fg-2); }
:where([data-look="showroom"]) .card-name { font-weight: 400; font-size: 19px; letter-spacing: -.015em; color: var(--fg); }
:where([data-look="showroom"]) .card-developer { font-size: 13.5px; color: var(--fg-2); }
:where([data-look="showroom"]) .card-price { font-family: var(--sans); font-weight: 400; font-size: 15px; color: var(--fg); }
:where([data-look="showroom"]) .card-completion { font-size: 12.5px; font-weight: 400; color: var(--fg-3); }
:where([data-look="showroom"]) .project-detail { background: var(--float); border-left: 0; box-shadow: var(--shadow-float); }
:where([data-look="showroom"]) .detail-close-btn { width: 40px; height: 40px; border: 0; border-radius: 999px; background: var(--bg-3); color: var(--fg-2); }
:where([data-look="showroom"]) .detail-type,
:where([data-look="showroom"]) .detail-price-label,
:where([data-look="showroom"]) .stat-label,
:where([data-look="showroom"]) .detail-section-title,
:where([data-look="showroom"]) .dp-section-title { font-family: var(--sans); font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--fg-3); }
:where([data-look="showroom"]) .dp-section-title { border-bottom-color: var(--line); }
:where([data-look="showroom"]) .detail-name { font-weight: 300; font-size: 34px; letter-spacing: -.035em; color: var(--fg); }
:where([data-look="showroom"]) .detail-developer { font-size: 14px; color: var(--fg-2); }
:where([data-look="showroom"]) .detail-price { font-family: var(--sans); font-weight: 300; font-size: 30px; letter-spacing: -.03em; color: var(--fg); }
:where([data-look="showroom"]) .detail-stats { gap: 8px; background: none; border: 0; }
:where([data-look="showroom"]) .stat-item { background: var(--bg-3); border-radius: 14px; }
:where([data-look="showroom"]) .stat-value { font-family: var(--sans); font-weight: 400; font-size: 17px; color: var(--fg); }
:where([data-look="showroom"]) .detail-description { font-size: 15px; line-height: 1.6; color: var(--fg-2); }
:where([data-look="showroom"]) .feature-tag,
:where([data-look="showroom"]) .detail-flag,
:where([data-look="showroom"]) .tag-emirate { padding: 5px 11px; border: 1px solid rgba(232, 163, 116, .3); border-radius: 999px; background: none; font-family: var(--sans); font-size: 12.5px; font-weight: 400; letter-spacing: 0; color: var(--cu-hi); }
:where([data-look="showroom"]) .detail-badge { border-radius: 999px; background: var(--grad); color: #1a0d06; font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: 0; }
:where([data-look="showroom"]) .loading-overlay { background: var(--bg); }
:where([data-look="showroom"]) .loading-logo { font-weight: 300; color: var(--fg); }
:where([data-look="showroom"]) .loading-text { font-family: var(--sans); font-size: 13.5px; letter-spacing: 0; text-transform: none; color: var(--fg-3); }
:where([data-look="showroom"]) .camera-hud { font-family: var(--sans); letter-spacing: 0; }

/* ---------- Leaflet (the map engine on four pages): its buttons, its pop-ups and its small print, in the look ---------- */
[data-look="showroom"] .leaflet-container { background: #e9e5df; font-family: var(--sans); }
[data-look="showroom"] .leaflet-bar { border: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 24px rgba(40, 18, 8, .35); }
[data-look="showroom"] .leaflet-bar a { width: 38px; height: 38px; line-height: 38px; background: rgba(11, 7, 5, .88); color: #F4ECE2; border-bottom: 1px solid rgba(244, 236, 226, .09); }
[data-look="showroom"] .leaflet-bar a:hover { background: #1D140E; color: #F4ECE2; }
[data-look="showroom"] .leaflet-popup-content-wrapper,
[data-look="showroom"] .leaflet-popup-tip { background: rgba(20, 13, 9, .97); color: #F4ECE2; box-shadow: 0 20px 60px rgba(40, 18, 8, .55); }
[data-look="showroom"] .leaflet-popup-content-wrapper { border-radius: 18px; }
[data-look="showroom"] .leaflet-popup-content { font-family: var(--sans); font-size: 14.5px; line-height: 1.45; }
[data-look="showroom"] .leaflet-container a.leaflet-popup-close-button { color: rgba(244, 236, 226, .66); }
[data-look="showroom"] .leaflet-tooltip { background: rgba(20, 13, 9, .96); border: 0; border-radius: 10px; color: #F4ECE2; font-family: var(--sans); font-size: 13px; box-shadow: 0 8px 24px rgba(40, 18, 8, .35); }
[data-look="showroom"] .leaflet-tooltip::before { display: none; }
[data-look="showroom"] .leaflet-control-attribution { background: rgba(255, 255, 255, .78); font-size: 10px; }

/* ---------- MapLibre, the English map (js/ynn-map.js, 7 Oct 2026: the five zones and the master plan; the Project
   Finder keeps its own file): the same dark buttons and dark glass pop-ups as the Leaflet rules above ---------- */
[data-look="showroom"] .maplibregl-map { font-family: var(--sans); }
[data-look="showroom"] .maplibregl-ctrl-group { border-radius: 14px; overflow: hidden; background: rgba(11, 7, 5, .88); box-shadow: 0 8px 24px rgba(40, 18, 8, .35); }
[data-look="showroom"] .maplibregl-ctrl-group button { width: 38px; height: 38px; }
[data-look="showroom"] .maplibregl-ctrl-group button + button { border-top: 1px solid rgba(244, 236, 226, .09); }
[data-look="showroom"] .maplibregl-ctrl-group button:hover { background: #1D140E; }
[data-look="showroom"] .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1) brightness(1.6); }
[data-look="showroom"] .maplibregl-popup-content { background: rgba(20, 13, 9, .97); color: #F4ECE2; border-radius: 14px; padding: 10px 13px;
  font-family: var(--sans); font-size: 13px; line-height: 1.45; box-shadow: 0 12px 36px rgba(40, 18, 8, .5); }
[data-look="showroom"] .maplibregl-popup-content b { color: #F4ECE2; font-weight: 500; }
[data-look="showroom"] .maplibregl-popup-tip { display: none; }
[data-look="showroom"] .maplibregl-popup.y-tip { pointer-events: none; }   /* a hover name never catches the mouse */
[data-look="showroom"] .maplibregl-ctrl-attrib { font-size: 10px; }
@media (max-width: 600px) {
  [data-look="showroom"] .maplibregl-ctrl-group button { width: 44px; height: 44px; }
}

/* ---------- the lead form (js/components.js injects its old rules AFTER this file, so these carry the attribute's weight) ---------- */
[data-look="showroom"] .modal-overlay { background: rgba(6, 4, 3, .74); }
[data-look="showroom"] .modal-box {
  background: var(--float); border: 0; border-radius: var(--r); padding: 34px 32px 32px;
  box-shadow: inset 0 0 0 1px rgba(244, 236, 226, .07), var(--shadow-float);
}
[data-look="showroom"] .modal-close { top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 999px; background: var(--bg-3); color: var(--fg-2); font-size: 15px; }
[data-look="showroom"] .modal-progress { gap: 6px; margin-right: 52px; }
[data-look="showroom"] .modal-progress-dot { flex: 1; width: auto; height: 2px; border-radius: 2px; background: var(--line); transition: background var(--d-l) var(--ease); }
[data-look="showroom"] .modal-progress-dot.done { background: var(--cu); }
[data-look="showroom"] .modal-label { font-family: var(--sans); font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--fg-3); }
[data-look="showroom"] .modal-title { font-family: var(--sans); font-weight: 300; font-size: 30px; line-height: 1.1; letter-spacing: -.03em; color: var(--fg); margin-bottom: 8px; }
[data-look="showroom"] .modal-sub { font-family: var(--sans); font-size: 15px; color: var(--fg-2); margin-bottom: 22px; }
[data-look="showroom"] .modal-input {
  min-height: 52px; padding: 0 16px; margin-bottom: 10px; border: 0; border-radius: 14px;
  background: var(--bg-3); color: var(--fg); font-family: var(--sans); font-size: 16px;
  box-shadow: inset 0 0 0 1px transparent; transition: box-shadow var(--d-s) var(--ease);
}
[data-look="showroom"] .modal-input:focus { box-shadow: inset 0 0 0 1.5px var(--cu); outline: none; }
[data-look="showroom"] .modal-input::placeholder { color: var(--fg-3); }
[data-look="showroom"] .modal-radio-group { gap: 8px; margin-bottom: 22px; }
[data-look="showroom"] .modal-radio-label {
  min-height: 52px; padding: 10px 16px; border: 0; border-radius: 14px; background: var(--bg-3);
  font-family: var(--sans); font-size: 16px; color: var(--fg);
  transition: background var(--d-s) var(--ease), box-shadow var(--d-s) var(--ease);
}
[data-look="showroom"] .modal-radio-label.selected { background: var(--cu-soft); box-shadow: inset 0 0 0 1.5px var(--cu); color: var(--fg); }
[data-look="showroom"] .modal-btn {
  height: 52px; border-radius: 999px; background: var(--cu); color: #fff;
  font-family: var(--sans); font-weight: 500; font-size: 16px; letter-spacing: 0;
  transition: background var(--d-s) var(--ease), transform var(--d-s) var(--ease);
}
[data-look="showroom"] .modal-btn:hover { background: var(--cu-press); }
[data-look="showroom"] .modal-btn:active { transform: scale(.98); }
[data-look="showroom"] .modal-err { font-family: var(--sans); font-size: 14px; color: var(--no); }
[data-look="showroom"] .modal-confirm-box { background: var(--bg-3); border: 0; border-radius: 14px; font-family: var(--sans); font-size: 14.5px; color: var(--fg-2); }
[data-look="showroom"] .modal-confirm-box span { color: var(--cu-hi) !important; }
[data-look="showroom"] #smError { border-color: rgba(232, 131, 111, .35) !important; background: rgba(232, 131, 111, .1) !important; border-radius: 12px !important; color: var(--no) !important; font-size: 14px !important; }
[data-look="showroom"] .modal-success-icon { color: var(--cu-hi); }
[data-look="showroom"] .modal-success h3 { font-family: var(--sans); font-weight: 300; font-size: 32px; letter-spacing: -.03em; color: var(--fg); }
[data-look="showroom"] .modal-success p { font-family: var(--sans); font-size: 15.5px; color: var(--fg-2); }

@media (prefers-reduced-motion: reduce) {
  :where([data-look="showroom"]) *, :where([data-look="showroom"]) *::before, :where([data-look="showroom"]) *::after {
    animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important;
  }
}

/* >>> PASS4 START (made by YNN-Site-Restyle\apply_pass4.py, do not edit here) */
/* ══════════ THE FOURTH PASS (5 Oct 2026, night) ══════════
   Nasser, after the third pass: "still boring", "you are reusing the same photo over and over", "the photos are low
   quality or pixelated", "the photos must not affect the text in front of them", and "for the Dubai transaction data
   and the others the UI/UX still remains the same".
   So this part changes STRUCTURE, not paint:
   1. THE SPLIT HEAD     the words on the left, the page's OWN sharp photo on the right inside a tall arch (a doorway).
                         No word ever sits on a photo. On a phone the arch comes first and the words follow under it.
   2. THE CONTROL DECK   the filters float as one rounded glass deck; the chart groups are a row of plain words with a
                         copper line under the chosen one (on a phone the row slides sideways instead of wrapping).
   3. THE NUMBERS        a bento: the first two numbers are very large, the others are small cards beside them.
   4. THE LEDGER         the latest transactions are rows with thin lines and the price large on the right (like the
                         results list of an auction). On a phone they are cards you swipe sideways.
   5. THE CHAPTERS       a chart is no longer a box in a pile of boxes: a number (01, 02 ...), a large title and its
                         words stand on the ground, and only the chart itself sits on a lifted plate.
   This source lives in C:\Users\nasse\YNN-Site-Restyle\shared\pass4.css; apply_pass4.py puts it into css\styles.css. */

/* ---------- 1. THE SPLIT HEAD ---------- */
[data-look="showroom"] .y-split {
  --hx: max(24px, calc((100% - var(--n-container)) / 2 + 24px));
  --ht: calc(var(--nav-h) + 26px);
  --pw: clamp(340px, 36vw, 520px);
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; justify-content: center;
  min-height: clamp(620px, 90vh, 880px);
  padding: calc(var(--ht) + 40px) calc(var(--hx) + var(--pw) + clamp(36px, 5vw, 88px)) 72px var(--hx);
  overflow: visible; overflow-x: clip;
}
[data-look="showroom"] .reports-hero.y-split,
[data-look="showroom"] .ready-hero.y-split,
[data-look="showroom"] .blogs-hero.y-split { --hx: max(var(--gut), calc((100% - var(--maxw)) / 2 + var(--gut))); }
[data-look="showroom"] .sc-hero.y-split,
[data-look="showroom"] .roi-hero.y-split { --ht: 26px; }
[data-look="showroom"] .y-split h1 { max-width: none; font-size: clamp(44px, 6vw, 96px); }
[data-look="showroom"] .y-split > .y-photo {
  position: absolute; right: var(--hx); top: var(--ht); bottom: 44px; width: var(--pw); margin: 0; z-index: 0;
  border-radius: calc(var(--pw) / 2) calc(var(--pw) / 2) 30px 30px; overflow: hidden; background: #17100B;
  outline: 1px solid rgba(232, 163, 116, .36); outline-offset: 12px;
  box-shadow: 0 44px 100px rgba(0, 0, 0, .55);
}
[data-look="showroom"] .y-photo img { position: absolute; left: 0; top: -5%; width: 100%; height: 110%; max-width: none; object-fit: cover; display: block; }
[data-look="showroom"] .y-photo::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(244, 236, 226, .16);
  background: linear-gradient(to top, rgba(11, 7, 5, .32), transparent 34%);
}
/* the photo's own colours, very blurred, glow behind the arch: every page gets its own air */
[data-look="showroom"] .y-split::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  right: calc(var(--hx) - 70px); top: calc(var(--ht) + 60px); bottom: -70px; width: calc(var(--pw) + 140px);
  background: var(--photo) center / cover no-repeat; filter: blur(72px) saturate(1.5); opacity: .5; border-radius: 40%;
}
@media (prefers-reduced-motion: no-preference) {
  /* a dark curtain lifts off the photo once, while the photo settles back a little */
  [data-look="showroom"] .y-photo::before {
    content: ''; position: absolute; inset: 0; z-index: 2; background: #0B0705; transform-origin: 50% 0;
    animation: yCurtain 1.15s cubic-bezier(.77, 0, .18, 1) .18s both;
  }
  [data-look="showroom"] .y-photo img { animation: yKen 2.8s cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes yCurtain { from { transform: scaleY(1); } to { transform: scaleY(0); } }
  @keyframes yKen { from { scale: 1.16; } to { scale: 1; } }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* and it slips a little behind its frame as the page scrolls (a phone has no hover; scrolling is its hover) */
    [data-look="showroom"] .y-photo img {
      animation: yKen 2.8s cubic-bezier(.2, .7, .2, 1) both, yPhotoDrift linear both;
      animation-timeline: auto, view(); animation-range: normal, exit 0% exit 100%;
    }
    @keyframes yPhotoDrift { from { translate: 0 0; } to { translate: 0 4.5%; } }
  }
}
@media (max-width: 900px) {
  [data-look="showroom"] .y-split { --hx: 24px; --pw: calc(100vw - 48px); display: block; min-height: 0; padding: var(--ht) var(--hx) 44px; }
  [data-look="showroom"] .reports-hero.y-split,
  [data-look="showroom"] .ready-hero.y-split,
  [data-look="showroom"] .blogs-hero.y-split { --hx: 24px; }
  [data-look="showroom"] .y-split > .y-photo { position: relative; right: auto; top: auto; bottom: auto; width: 100%; height: min(86vw, 500px); margin: 0 0 40px; outline-offset: 8px; }
  [data-look="showroom"] .y-split::after { left: -40px; right: -40px; width: auto; top: var(--ht); bottom: auto; height: 86vw; opacity: .4; }
}
@media (max-width: 640px) {
  [data-look="showroom"] .y-split { --hx: 16px; --pw: calc(100vw - 32px); padding: var(--ht) var(--hx) 36px; }
  [data-look="showroom"] .reports-hero.y-split,
  [data-look="showroom"] .ready-hero.y-split,
  [data-look="showroom"] .blogs-hero.y-split { --hx: 16px; }
}

/* ---------- 2. THE CONTROL DECK (the market pages: the bar of filters and the row of chart groups) ---------- */
@media (min-width: 761px) {
  [data-look="showroom"] .data-hero ~ .filter-bar {
    width: min(calc(100% - 48px), calc(var(--n-container) - 48px)); margin: 0 auto; top: calc(var(--nav-h) + 10px);
    padding-left: 22px; padding-right: 22px;
    border: 1px solid rgba(244, 236, 226, .13); border-radius: 30px;
    background: rgba(24, 16, 11, .88);
    box-shadow: 0 26px 64px rgba(0, 0, 0, .46), inset 0 1px 0 rgba(244, 236, 226, .08);
  }
  [data-look="showroom"] .data-hero ~ .filter-bar.is-stuck { box-shadow: 0 18px 44px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(244, 236, 226, .08); }
}
[data-look="showroom"] .cg-bar {
  max-width: var(--n-container); margin: 30px auto 0; padding: 0 24px; gap: 4px;
  justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  box-shadow: inset 0 -1px 0 rgba(244, 236, 226, .13);
}
[data-look="showroom"] .cg-bar::-webkit-scrollbar { display: none; }
[data-look="showroom"] .cg-tab {
  position: relative; flex: none; min-height: 0; padding: 14px 16px 18px; border: 0; border-radius: 0; background: none; box-shadow: none;
  font-family: var(--sans); font-size: 17px; font-weight: 400; color: rgba(244, 236, 226, .6);
  transition: color var(--d-s) var(--ease);
}
[data-look="showroom"] .cg-tab:first-child { padding-left: 0; }
[data-look="showroom"] .cg-tab .ic { display: none; }
[data-look="showroom"] .cg-tab .cg-n { min-width: 0; padding: 0; background: none; font-size: 12.5px; font-weight: 400; color: var(--cu-hi); transform: translateY(-7px); }
[data-look="showroom"] .cg-tab::after {
  content: ''; position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; border-radius: 2px; background: var(--cu);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--d-l) var(--ease);
}
[data-look="showroom"] .cg-tab:first-child::after { left: 0; }
[data-look="showroom"] .cg-tab.on { color: var(--fg); background: none; box-shadow: none; }
[data-look="showroom"] .cg-tab.on::after { transform: scaleX(1); }
[data-look="showroom"] .cg-tab.on .cg-n { background: none; color: var(--cu-hi); }
[data-look="showroom"] .cg-tab:focus-visible { outline: 2px solid var(--cu-hi); outline-offset: -4px; box-shadow: none; }
@media (hover: hover) and (pointer: fine) { [data-look="showroom"] .cg-tab:hover { color: var(--fg); border: 0; box-shadow: none; } }
@media (max-width: 760px) {
  [data-look="showroom"] .cg-bar { margin-top: 18px; padding: 0 16px; gap: 0;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); }
  [data-look="showroom"] .cg-tab { padding: 12px 13px 15px; font-size: 16px; }
  [data-look="showroom"] .cg-tab:last-child { margin-right: 40px; }
}

/* ---------- 3. THE NUMBERS: a bento ---------- */
[data-look="showroom"] .data-main .kpi-row { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; margin: 30px 0 0; }
[data-look="showroom"] .data-main .kpi {
  grid-column: span 3; display: flex; flex-direction: column; overflow: hidden; padding: 22px 22px 18px;
  border: 1px solid rgba(244, 236, 226, .1); border-radius: 26px;
  background: linear-gradient(165deg, #22170F 0%, #17100B 72%); box-shadow: inset 0 1px 0 rgba(244, 236, 226, .07);
}
[data-look="showroom"] .data-main .kpi:nth-child(-n+2) { grid-column: span 6; padding: 30px 34px 26px; }
[data-look="showroom"] .data-main .kpi:nth-child(3):nth-last-child(2),
[data-look="showroom"] .data-main .kpi:nth-child(4):nth-last-child(1) { grid-column: span 6; }      /* a page with four numbers: two rows of two */
[data-look="showroom"] .data-main .kpi:first-child {
  border-color: rgba(232, 163, 116, .3);
  background: radial-gradient(120% 130% at 0% 0%, rgba(196, 105, 58, .3), rgba(196, 105, 58, .05) 46%, transparent 68%), linear-gradient(165deg, #22170F 0%, #17100B 72%);
}
[data-look="showroom"] .data-main .kpi .k-label { font-family: var(--sans); font-size: 15px; color: rgba(244, 236, 226, .78); }
[data-look="showroom"] .data-main .kpi .k-value { font-family: var(--sans); font-size: clamp(28px, 2.5vw, 38px); font-weight: 300; letter-spacing: -.035em; line-height: 1.02; color: var(--fg); }
[data-look="showroom"] .data-main .kpi:nth-child(-n+2) .k-value { margin: 8px 0 4px; font-size: clamp(54px, 6.2vw, 100px); font-weight: 200; letter-spacing: -.06em; line-height: .94; }
[data-look="showroom"] .data-main .kpi .kpi-v { font-size: clamp(28px, 2.5vw, 38px); }
[data-look="showroom"] .data-main .kpi:nth-child(-n+2) .kpi-v { margin: 8px 0 4px; font-size: clamp(54px, 6.2vw, 100px); font-weight: 200; letter-spacing: -.06em; line-height: .94; }
[data-look="showroom"] .data-main .kpi:nth-child(-n+2) .kpi-u { font-size: .3em; }
[data-look="showroom"] .data-main .kpi .k-label + .kpi-v { margin-top: 10px; }
[data-look="showroom"] .data-main .kpi:nth-child(-n+2) .kpi-d { justify-content: flex-start; gap: 12px; font-size: 14.5px; }
[data-look="showroom"] .data-main .kpi .k-value, [data-look="showroom"] .data-main .kpi .kpi-v { overflow-wrap: normal; }
[data-look="showroom"] .data-main .kpi .k-unit, [data-look="showroom"] .data-main .kpi .kpi-u { white-space: nowrap; }
[data-look="showroom"] .data-main .kpi:nth-child(-n+2) .k-spark circle { display: none; }      /* stretched this wide, the end dot became an egg */
[data-look="showroom"] .data-main .kpi .k-unit { font-size: .34em; letter-spacing: 0; color: rgba(244, 236, 226, .6); }
[data-look="showroom"] .data-main .kpi:nth-child(n+3) .k-unit { font-size: .5em; }
[data-look="showroom"] .data-main .kpi:nth-child(-n+2) .k-deltas { flex-direction: row; flex-wrap: wrap; gap: 8px 30px; margin-top: 16px; }
[data-look="showroom"] .data-main .kpi:nth-child(-n+2) .k-drow { justify-content: flex-start; gap: 10px; }
[data-look="showroom"] .data-main .k-dlabel { font-family: var(--sans); font-size: 13.5px; letter-spacing: 0; color: rgba(244, 236, 226, .7); }
[data-look="showroom"] .data-main .k-delta { font-family: var(--sans); font-size: 13.5px; padding: 3px 10px; }
[data-look="showroom"] .data-main .kpi .k-sparkholder { margin-top: auto; padding-top: 12px; }
[data-look="showroom"] .data-main .kpi:nth-child(-n+2) .k-spark { height: 76px; }
[data-look="showroom"] .data-main .k-sparkcap,
[data-look="showroom"] .data-main .k-scope { font-family: var(--sans); font-size: 13px; color: rgba(244, 236, 226, .6); }
[data-look="showroom"] .data-main .k-scope { border-top-color: rgba(244, 236, 226, .1); }
@media (hover: hover) and (pointer: fine) { [data-look="showroom"] .data-main .kpi:hover { transform: none; box-shadow: inset 0 1px 0 rgba(244, 236, 226, .07); border-color: rgba(232, 163, 116, .34); } }
@media (max-width: 1000px) {
  [data-look="showroom"] .data-main .kpi { grid-column: span 6; }
  [data-look="showroom"] .data-main .kpi:nth-child(-n+2) { grid-column: span 12; }
}
@media (max-width: 600px) {
  [data-look="showroom"] .data-main .kpi-row { gap: 10px; margin-top: 22px; }
  [data-look="showroom"] .data-main .kpi { padding: 16px 14px 14px; border-radius: 22px; }
  [data-look="showroom"] .data-main .kpi:nth-child(-n+2) { padding: 22px 20px 18px; }
  [data-look="showroom"] .data-main .kpi:nth-child(-n+2) .k-value { font-size: clamp(50px, 16vw, 68px); }
  [data-look="showroom"] .data-main .kpi:nth-child(-n+2) .kpi-v { font-size: clamp(50px, 16vw, 68px); }
  [data-look="showroom"] .data-main .kpi:nth-child(n+3),
  [data-look="showroom"] .data-main .kpi:nth-child(3):nth-last-child(2),
  [data-look="showroom"] .data-main .kpi:nth-child(4):nth-last-child(1) { grid-column: span 12; padding: 18px 18px 14px; }
  [data-look="showroom"] .data-main .kpi:nth-child(n+3) .k-value,
  [data-look="showroom"] .data-main .kpi:nth-child(n+3) .kpi-v { font-size: 32px; }
  [data-look="showroom"] .data-main .kpi:nth-child(n+3) .kpi-u { display: inline; margin: 0 0 0 6px; font-size: .42em; }
}

/* ---------- 4. THE LEDGER: the latest transactions ---------- */
[data-look="showroom"] .lt-block { margin-top: 76px; }
[data-look="showroom"] .lt-title { font-family: var(--sans); font-size: clamp(30px, 3.4vw, 48px); font-weight: 300; letter-spacing: -.04em; line-height: 1; }
[data-look="showroom"] .lt-matches, [data-look="showroom"] .lt-showing { font-family: var(--sans); font-size: 14px; color: rgba(244, 236, 226, .7); }
[data-look="showroom"] .lt-sort { height: 40px; padding: 0 14px; border-radius: 999px; font-size: 14px; }
[data-look="showroom"] .lt-pg, [data-look="showroom"] .lt-num { min-width: 38px; height: 38px; font-family: var(--sans); font-size: 14px; }
@media (min-width: 1101px) {
  [data-look="showroom"] #latestCards { display: block; margin-top: 26px; border-top: 1px solid rgba(244, 236, 226, .16); }
  [data-look="showroom"] #latestCards .lt-card {
    display: grid; grid-template-columns: 148px minmax(0, 1fr) auto 40px; column-gap: 28px; row-gap: 4px; align-items: center;
    grid-template-areas: "top name price open" "top area price open" "top fields strip open";
    padding: 22px 12px 22px 8px; border: 0; border-bottom: 1px solid rgba(244, 236, 226, .12); border-radius: 0; background: none; box-shadow: none;
    transition: background var(--d-s) var(--ease);
  }
  [data-look="showroom"] #latestCards .lt-top { grid-area: top; align-self: start; flex-direction: column; align-items: flex-start; gap: 10px; margin: 4px 0 0; }
  [data-look="showroom"] #latestCards .lt-date { font-family: var(--sans); font-size: 15px; color: rgba(244, 236, 226, .82); }
  [data-look="showroom"] #latestCards .lt-badge { margin-left: 0; font-family: var(--sans); font-size: 12.5px; }
  [data-look="showroom"] #latestCards .lt-name { grid-area: name; margin: 0; font-family: var(--sans); font-size: 22px; font-weight: 400; letter-spacing: -.02em; }
  [data-look="showroom"] #latestCards .lt-area { grid-area: area; font-size: 14px; }
  [data-look="showroom"] #latestCards .lt-price { grid-area: price; justify-self: end; margin: 0; font-family: var(--sans); font-size: 36px; font-weight: 300; letter-spacing: -.045em; white-space: nowrap; }
  [data-look="showroom"] #latestCards .lt-fields { grid-area: fields; grid-template-columns: repeat(6, auto); justify-content: start; gap: 4px 30px; margin-top: 12px; padding: 0; border: 0; }
  [data-look="showroom"] #latestCards .lt-f .ic { display: none; }
  [data-look="showroom"] #latestCards .lt-l { font-size: 12.5px; color: rgba(244, 236, 226, .56); }
  [data-look="showroom"] #latestCards .lt-v { font-family: var(--sans); font-size: 14.5px; color: rgba(244, 236, 226, .92); white-space: nowrap; }
  [data-look="showroom"] #latestCards .lt-strip { grid-area: strip; justify-self: end; align-self: end; margin: 12px 0 0; padding: 7px 14px; gap: 18px; }
  [data-look="showroom"] #latestCards .lt-sa { margin: 0; }
  [data-look="showroom"] #latestCards .lt-sl { font-size: 12px; }
  [data-look="showroom"] #latestCards .lt-sv { font-family: var(--sans); font-size: 14px; }
  [data-look="showroom"] #latestCards .lt-flat { font-size: 13px; }
  /* the whole row opens the transaction: the button's words are kept for a screen reader, the eye sees the arrow */
  [data-look="showroom"] #latestCards .lt-open { grid-area: open; position: static; width: 40px; margin: 0; padding: 0; border: 0; font-size: 0; justify-content: center; }
  [data-look="showroom"] #latestCards .lt-open::after { content: ''; position: absolute; inset: 0; }
  [data-look="showroom"] #latestCards .lt-chev { width: 40px; height: 40px; transition: transform var(--d-s) var(--ease), background var(--d-s) var(--ease), border-color var(--d-s) var(--ease); }
  [data-look="showroom"] #latestCards .lt-chev .ic { width: 16px; height: 16px; }
}
@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
  [data-look="showroom"] #latestCards .lt-card:hover { background: rgba(244, 236, 226, .045); border-color: rgba(244, 236, 226, .12); box-shadow: none; }
  [data-look="showroom"] #latestCards .lt-card:hover .lt-chev { transform: translateX(4px); background: var(--cu); border-color: var(--cu); color: #fff; }
}
@media (max-width: 700px) {
  /* a phone: one card at a time, swiped sideways; the next card shows its edge, so the thumb knows */
  [data-look="showroom"] .lt-block { margin-top: 52px; }
  [data-look="showroom"] #latestCards {
    display: flex; gap: 12px; margin: 16px -16px 0; padding: 4px 16px 10px; overflow-x: auto; scrollbar-width: none;
    scroll-snap-type: x mandatory; scroll-padding: 0 16px; -webkit-overflow-scrolling: touch;
  }
  [data-look="showroom"] #latestCards::-webkit-scrollbar { display: none; }
  [data-look="showroom"] #latestCards .lt-card { flex: 0 0 86%; scroll-snap-align: start; border-radius: 24px; padding: 18px 18px 14px; }
  [data-look="showroom"] #latestCards .lt-empty { flex: 1 0 100%; }
  [data-look="showroom"] #latestCards .lt-name { font-family: var(--sans); font-size: 19px; }
  [data-look="showroom"] #latestCards .lt-price { font-family: var(--sans); font-size: 34px; letter-spacing: -.04em; }
  [data-look="showroom"] #latestCards .lt-l { font-size: 12.5px; }
  [data-look="showroom"] #latestCards .lt-v { font-family: var(--sans); font-size: 14px; }
}

/* ---------- 5. THE CHAPTERS: a chart, its number, its title ---------- */
[data-look="showroom"] .data-main .charts-grid { counter-reset: chap; gap: 0; margin-top: 64px; }
[data-look="showroom"] .data-main .chart-card {
  counter-increment: chap;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(28px, 4.4vw, 72px); row-gap: 0; align-items: start;
  padding: 46px 0 70px; border: 0; border-top: 1px solid rgba(244, 236, 226, .15); border-radius: 0; background: none; box-shadow: none;
}
[data-look="showroom"] .data-main .chart-card > * { grid-column: 1 / -1; min-width: 0; }
[data-look="showroom"] .data-main .chart-card > .cc-head,
[data-look="showroom"] .data-main .chart-card > .cc-title { grid-column: 1; display: block; margin: 0 0 20px; }
[data-look="showroom"] .data-main .chart-card > .cc-head::before,
[data-look="showroom"] .data-main .chart-card > .cc-title::before {
  content: counter(chap, decimal-leading-zero); display: block; margin-bottom: 16px;
  font-family: var(--sans); font-size: 15px; font-weight: 400; letter-spacing: .04em; color: var(--cu-hi);
}
[data-look="showroom"] .data-main .chart-card .cc-title {
  font-family: var(--sans); font-size: clamp(27px, 3vw, 42px); font-weight: 300; letter-spacing: -.04em; line-height: 1.04; color: var(--fg); text-wrap: balance;
}
[data-look="showroom"] .data-main .chart-card > .cc-head .cc-tools { margin-top: 20px; }
[data-look="showroom"] .data-main .chart-card > .cc-sub {
  grid-column: 2; grid-row: 1; align-self: end; max-width: 62ch; margin: 0 0 22px;
  font-size: 15.5px; line-height: 1.62; color: rgba(244, 236, 226, .8);
}
[data-look="showroom"] .data-main .chart-card > .cc-filters { margin: 2px 0 8px; }
[data-look="showroom"] .data-main .chart-card > .chart-box,
[data-look="showroom"] .data-main .chart-card > .lb-list,
[data-look="showroom"] .data-main .chart-card > .tbl-wrap {
  margin-top: 12px; padding: 22px 22px 16px; border: 1px solid rgba(244, 236, 226, .1); border-radius: 26px;
  background: linear-gradient(180deg, #1E150E 0%, #17100B 100%); box-shadow: inset 0 1px 0 rgba(244, 236, 226, .06);
}
[data-look="showroom"] .data-main .chart-card > .cc-note { margin-top: 16px; font-size: 13.5px; line-height: 1.6; color: rgba(244, 236, 226, .66); }
@media (max-width: 860px) {
  [data-look="showroom"] .data-main .charts-grid { margin-top: 44px; }
  [data-look="showroom"] .data-main .chart-card { display: block; padding: 34px 0 46px; }
  [data-look="showroom"] .data-main .chart-card > .cc-sub { margin-bottom: 16px; }
  [data-look="showroom"] .data-main .chart-card > .chart-box,
  [data-look="showroom"] .data-main .chart-card > .lb-list,
  [data-look="showroom"] .data-main .chart-card > .tbl-wrap { padding: 14px 12px 12px; border-radius: 22px; }
}

/* ---------- 6. A PHOTO UNDER THE WORDS (the story pages: Why Nasser, Buy content). A section with the class y-scene
   used to lay a dim film still BEHIND its words. Now its photo is sharp and stands in a wide frame UNDER the words,
   so no word ever sits on a photo. The frame grows a little as it scrolls into view. ---------- */
[data-look="showroom"] .y-scene { display: flex; flex-direction: column; padding-bottom: clamp(76px, 8vw, 124px); overflow: visible; overflow-x: clip; }
[data-look="showroom"] .y-scene > .y-scene-wrap {
  order: 9; position: relative; inset: auto; z-index: 0; opacity: 1; -webkit-mask-image: none; mask-image: none;
  width: min(calc(100% - 2 * var(--gut)), var(--maxw)); margin: 0 auto; aspect-ratio: 21 / 9; overflow: hidden; border-radius: 34px; background: #17100B;
  outline: 1px solid rgba(232, 163, 116, .32); outline-offset: 12px; box-shadow: 0 50px 120px rgba(0, 0, 0, .55);
}
[data-look="showroom"] .y-scene .y-scene-img { filter: none; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-look="showroom"] .y-scene > .y-scene-wrap { animation: yGrow linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
    @keyframes yGrow { from { scale: .84; opacity: .45; } to { scale: 1; opacity: 1; } }
  }
}
@media (max-width: 700px) {
  [data-look="showroom"] .y-scene > .y-scene-wrap { aspect-ratio: 4 / 5; border-radius: 28px; outline-offset: 8px; }
}

/* ---------- 7. SERVICE CHARGES: the same large numbers as the market pages (the first one very large) ---------- */
[data-look="showroom"] .sc-kpi-row { max-width: none; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; margin: 30px 0 36px; }
[data-look="showroom"] .sc-kpi {
  grid-column: span 3; padding: 22px 22px 18px; border: 1px solid rgba(244, 236, 226, .1); border-radius: 26px;
  background: linear-gradient(165deg, #22170F 0%, #17100B 72%); box-shadow: inset 0 1px 0 rgba(244, 236, 226, .07);
}
[data-look="showroom"] .sc-kpi:first-child {
  grid-column: span 6; padding: 30px 34px 26px; border-color: rgba(232, 163, 116, .3);
  background: radial-gradient(120% 130% at 0% 0%, rgba(196, 105, 58, .3), rgba(196, 105, 58, .05) 46%, transparent 68%), linear-gradient(165deg, #22170F 0%, #17100B 72%);
}
[data-look="showroom"] .sc-kpi:nth-child(2):last-child { grid-column: span 6; padding: 30px 34px 26px; }
[data-look="showroom"] .sc-kpi .lbl { font-family: var(--sans); font-size: 15px; letter-spacing: 0; text-transform: none; color: rgba(244, 236, 226, .78); }
[data-look="showroom"] .sc-kpi .val { font-family: var(--sans); font-size: clamp(30px, 2.6vw, 40px); font-weight: 300; letter-spacing: -.035em; line-height: 1.02; color: var(--fg); }
[data-look="showroom"] .sc-kpi:first-child .val,
[data-look="showroom"] .sc-kpi:nth-child(2):last-child .val { margin: 10px 0 6px; font-size: clamp(54px, 6.2vw, 100px); font-weight: 200; letter-spacing: -.06em; line-height: .94; }
[data-look="showroom"] .sc-kpi:first-child .val .unit,
[data-look="showroom"] .sc-kpi:nth-child(2):last-child .val .unit { font-size: .26em; letter-spacing: 0; }
[data-look="showroom"] .sc-kpi .note { font-size: 13.5px; color: rgba(244, 236, 226, .66); }
@media (max-width: 900px) {
  [data-look="showroom"] .sc-kpi, [data-look="showroom"] .sc-kpi:first-child, [data-look="showroom"] .sc-kpi:nth-child(2):last-child { grid-column: span 12; padding: 22px 20px 18px; }
  [data-look="showroom"] .sc-kpi:first-child .val, [data-look="showroom"] .sc-kpi:nth-child(2):last-child .val { font-size: clamp(50px, 16vw, 68px); }
}

/* ---------- 8. READING (6 Oct 2026, after a measured check at 390 px): chips and table cells at 13 px or more;
   on a phone the arch of a DATA page is shorter, so the title and the first numbers come sooner (the story pages
   and the small pages keep the tall arch). ---------- */
[data-look="showroom"] .mini-chips button,
[data-look="showroom"] .f-chips button,
[data-look="showroom"] button.more,
[data-look="showroom"] .ru-more { font-size: 13.5px; }
[data-look="showroom"] .sc-table tbody td { font-size: 14px; }
[data-look="showroom"] .sc-table thead th { font-size: 13.5px; }
[data-look="showroom"] .sc-card-area,
[data-look="showroom"] .sc-card-sc span { font-size: 13px; }
@media (max-width: 640px) {
  [data-look="showroom"] .data-hero.y-split > .y-photo,
  [data-look="showroom"] .sc-hero.y-split > .y-photo,
  [data-look="showroom"] .roi-hero.y-split > .y-photo,
  [data-look="showroom"] .d-hero.y-split > .y-photo,
  [data-look="showroom"] .m-hero.y-split > .y-photo { height: min(64vw, 300px); margin-bottom: 28px; }
  [data-look="showroom"] .data-hero.y-split::after,
  [data-look="showroom"] .sc-hero.y-split::after,
  [data-look="showroom"] .roi-hero.y-split::after,
  [data-look="showroom"] .d-hero.y-split::after,
  [data-look="showroom"] .m-hero.y-split::after { height: 64vw; }
}

/* ---------- 9. NASSER'S ROUND OF 6 OCT 2026 ----------
   THE MENU FITS. The eight items and the button need 1,169 px. Between 1,025 and 1,199 px they ran off the right
   edge ("the menus are on top of each other"). Under 1,200 px the menu is the three-line button. */
@media (max-width: 1199px) {
  [data-look="showroom"] .nav-links { display: none; }
  [data-look="showroom"] .nav-cta-btn { display: none; }
  [data-look="showroom"] .nav-burger { display: flex; }
}
@media (min-width: 1200px) and (max-width: 1339px) { [data-look="showroom"] .nav-links { gap: 20px; } }
/* A POP-UP OPENS AT ITS OWN FIELD. The lists of the filters are placed against the WINDOW (position: fixed). A
   frosted-glass effect (backdrop-filter), a transform or a filter on the bar makes the BAR their anchor instead, and
   the list opens far from its field (Nasser's picture of the Area list; the phone's filter sheet had the same
   fault). So: NEVER any of those three on a bar of filters. The bar is simply a little more solid. */
[data-look="showroom"] .filter-bar,
[data-look="showroom"] .sc-filter-bar,
[data-look="showroom"] .roi-modebar { -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; filter: none; }
[data-look="showroom"] .data-hero ~ .filter-bar { background: rgba(24, 16, 11, .97); }

/* ---------- 10. TYPE TO SEARCH (js/components.js, searchable()): a long drop-down list becomes a field you type
   into. The page's own <select> stays in the page, hidden, and stays the source of truth. ---------- */
[data-look="showroom"] select.y-pick-src { display: none !important; }
[data-look="showroom"] .y-pick {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; max-width: 260px; height: 40px; padding: 0 12px 0 16px;
  border: 1px solid rgba(244, 236, 226, .2); border-radius: 999px; background: #2A1E15; color: var(--fg);
  font-family: var(--sans); font-size: 14px; font-weight: 400; line-height: 1; text-align: left; cursor: pointer;
  transition: border-color var(--d-s) var(--ease), background var(--d-s) var(--ease);
}
[data-look="showroom"] .y-pick-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-look="showroom"] .y-pick-c { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--cu-hi); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--d-s) var(--ease); }
[data-look="showroom"] .y-pick[aria-expanded="true"] { border-color: var(--cu-hi); }
[data-look="showroom"] .y-pick[aria-expanded="true"] .y-pick-c { transform: rotate(180deg); }
[data-look="showroom"] .y-pick:focus-visible { outline: 2px solid var(--cu-hi); outline-offset: 2px; }
[data-look="showroom"] .y-pick:disabled { opacity: .5; cursor: default; }
[data-look="showroom"] .y-pick-pop {
  position: absolute; z-index: 9500; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid rgba(244, 236, 226, .14); border-radius: 20px; background: #1F160F; box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  font-family: var(--sans); color: var(--fg);
}
[data-look="showroom"] .y-pick-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; border-bottom: 1px solid rgba(244, 236, 226, .1); }
[data-look="showroom"] .y-pick-s { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--cu-hi); stroke-width: 1.8; stroke-linecap: round; }
[data-look="showroom"] .y-pick-q { flex: 1; min-width: 0; height: 38px; padding: 0; border: 0; background: none; color: var(--fg); font-family: var(--sans); font-size: 16px; font-weight: 400; outline: none; box-shadow: none; }
[data-look="showroom"] .y-pick-q::placeholder { color: rgba(244, 236, 226, .5); }
[data-look="showroom"] .y-pick-x { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgba(244, 236, 226, .09); color: var(--fg); cursor: pointer; }
[data-look="showroom"] .y-pick-x[hidden] { display: none; }
[data-look="showroom"] .y-pick-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
[data-look="showroom"] .y-pick-list { position: relative; overflow-y: auto; padding: 6px; overscroll-behavior: contain; }
[data-look="showroom"] .y-pick-o { padding: 10px 12px; border-radius: 12px; font-size: 14.5px; line-height: 1.3; color: rgba(244, 236, 226, .9); cursor: pointer; }
[data-look="showroom"] .y-pick-o.cur { background: rgba(244, 236, 226, .09); }
[data-look="showroom"] .y-pick-o.on { color: var(--cu-hi); }
[data-look="showroom"] .y-pick-a { font-size: .9em; color: rgba(244, 236, 226, .62); }      /* the everyday name beside the register's name */
[data-look="showroom"] .y-pick-none { padding: 18px 14px; font-size: 14.5px; color: rgba(244, 236, 226, .72); }
[data-look="showroom"] .y-pick-scrim { display: none; }
[data-look="showroom"] .y-pick-pop.sheet { position: fixed; left: 10px; right: 10px; top: 10px; width: auto; max-height: min(62vh, 460px); }
@media (hover: hover) and (pointer: fine) {
  [data-look="showroom"] .y-pick:hover { border-color: rgba(232, 163, 116, .6); }
  [data-look="showroom"] .y-pick-o:hover { background: rgba(244, 236, 226, .09); }
  [data-look="showroom"] .y-pick-x:hover { background: rgba(244, 236, 226, .16); }
}
@media (max-width: 599px) {
  [data-look="showroom"] .y-pick-scrim { display: block; position: fixed; inset: 0; z-index: 9499; background: rgba(6, 4, 3, .62); }
  [data-look="showroom"] .y-pick-o { padding: 13px 12px; font-size: 15.5px; }
  [data-look="showroom"] .y-pick { max-width: 100%; }
}

/* ---------- 11. A SMALL PICKER OPENS UPWARDS when there is no room under it (js/market-data.js marks it "to-up") ---------- */
[data-look="showroom"] .f-box.to-up .f-pickdrop { top: auto; bottom: calc(100% + 6px); }

/* ---------- 12. ONE FOCUS LOOK FOR A FIELD (Nasser, 6 Oct 2026: "there is a line ... wherever I click on any filter").
   The new look gives every <input> a focus outline. Inside a filter field the typing box is small and its shell
   cuts off what sticks out, so only the outline's TOP edge showed: a line through the field's small label.
   RULE: a control that lives INSIDE a field's shell draws no outline of its own; the shell shows one copper ring,
   for a click and for the Tab key alike. ---------- */
[data-look="showroom"] .ms-wrap input:focus-visible,
[data-look="showroom"] .ms-field input:focus-visible,
[data-look="showroom"] .f-box input:focus-visible,
[data-look="showroom"] .f-box select:focus-visible,
[data-look="showroom"] .f-box button:focus-visible,
[data-look="showroom"] .fld input:focus-visible,
[data-look="showroom"] .fld select:focus-visible { outline: none; }
[data-look="showroom"] .f-box:focus-within,
[data-look="showroom"] .ms-wrap.has-ico:focus-within,
[data-look="showroom"] .ms-wrap.has-ico.open,
[data-look="showroom"] .ms-wrap:not(.has-ico) .ms-field:focus-within,
[data-look="showroom"] .ms-wrap.open:not(.has-ico) .ms-field,
[data-look="showroom"] .fld input:focus-visible,
[data-look="showroom"] .fld select:focus-visible { border-color: var(--cu-hi); box-shadow: 0 0 0 3px rgba(232, 163, 116, .2); }

/* ---------- 13. ONE KIND OF POP-UP PANEL: THE SHEET (Nasser, 6 Oct 2026: the opened transaction was "not clear to
   read"; "make something better looking" than a flat one-colour box).
   THE VEIL covers the whole page, above the menu and the bar of filters: dark, warm and blurred, so no word behind
   stays readable. (The blur is on the veil. A veil has no list hanging from it, so it is safe here; see part 9.)
   THE SHEET on it is SOLID, so nothing can show through its words, but it is not one flat colour: a slow warm
   gradient, a hairline copper edge, light along its top edge, a deep soft shadow. Dark glass with light on it.
   Used by: the opened transaction (#latestPanel), the unit panels of the luxury and rentals pages (.ru-modal),
   the supply page's panel (.modal), the calculator's (.m-box), the lead form (.modal-box) and the phone's sheet
   of filters (#kpiFilters). ---------- */
html.y-sheet-open { overflow: hidden; }
[data-look="showroom"] #latestPanel,
[data-look="showroom"] .ru-modal-back,
[data-look="showroom"] .modal-back,
[data-look="showroom"] .m-back,
[data-look="showroom"] .modal-overlay,
[data-look="showroom"] .f-scrim {
  background: rgba(9, 6, 4, .72);
  -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15);
}
[data-look="showroom"] #latestPanel,
[data-look="showroom"] .ru-modal-back,
[data-look="showroom"] .modal-back,
[data-look="showroom"] .m-back,
[data-look="showroom"] .modal-overlay { z-index: 12000; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-look="showroom"] #latestPanel,
  [data-look="showroom"] .ru-modal-back,
  [data-look="showroom"] .modal-back,
  [data-look="showroom"] .m-back,
  [data-look="showroom"] .modal-overlay,
  [data-look="showroom"] .f-scrim { background: rgba(9, 6, 4, .92); }
}
[data-look="showroom"] .lp-box,
[data-look="showroom"] .ru-modal,
[data-look="showroom"] .modal-back > .modal,
[data-look="showroom"] .m-box,
[data-look="showroom"] .modal-box {
  position: relative; border: 1px solid rgba(232, 163, 116, .3); border-radius: 28px;
  background: linear-gradient(180deg, #2D2016 0%, #1E150E 36%, #150E09 100%);
  box-shadow: 0 50px 140px rgba(0, 0, 0, .78), 0 0 0 1px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(244, 236, 226, .16);
  color: var(--fg);
  /* the quiet words inside a sheet are as bright as in the body of a data page */
  --fg-2: rgba(244, 236, 226, .86);  --fg-3: rgba(244, 236, 226, .72);
  --text-secondary: rgba(244, 236, 226, .86);  --n-fg-muted: rgba(244, 236, 226, .86);
  --text-muted: rgba(244, 236, 226, .72);  --n-fg-subtle: rgba(244, 236, 226, .72);
  --line: rgba(244, 236, 226, .12);  --border-hairline: rgba(244, 236, 226, .12);  --n-border: rgba(244, 236, 226, .12);
  --border-strong: rgba(244, 236, 226, .22);  --n-border-strong: rgba(244, 236, 226, .22);
  --surface-card: #241910;  --bg-inset: #2A1E15;  --bg-2: #241910;  --bg-3: #2A1E15;  --n-bg-elevated: #241910;  --n-paper-2: #241910;
}
@media (prefers-reduced-motion: no-preference) {
  [data-look="showroom"] .lp-box,
  [data-look="showroom"] .ru-modal,
  [data-look="showroom"] .modal-back > .modal,
  [data-look="showroom"] .m-box { animation: ySheetIn 260ms cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes ySheetIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
}

/* the opened transaction: a head band, quiet rows, the earlier sale as its own block */
[data-look="showroom"] #latestPanel .lp-box { display: flex; flex-direction: column; width: 100%; max-width: 480px; max-height: min(88vh, 780px); padding: 0; overflow: hidden; }
[data-look="showroom"] .lp-head { position: relative; flex: none; padding: 26px 72px 22px 28px; border-bottom: 1px solid rgba(244, 236, 226, .1);
  background: linear-gradient(180deg, rgba(244, 236, 226, .075), rgba(244, 236, 226, .02)); }
[data-look="showroom"] .lp-date { font-family: var(--sans); font-size: 14px; letter-spacing: 0; color: rgba(244, 236, 226, .74); }
[data-look="showroom"] .lp-name { margin: 6px 0 7px; padding-right: 0; font-family: var(--sans); font-size: 26px; font-weight: 400; line-height: 1.12; letter-spacing: -.025em; color: var(--fg); }
[data-look="showroom"] .lp-head .lt-area { font-family: var(--sans); font-size: 14.5px; color: rgba(244, 236, 226, .82); }
[data-look="showroom"] .lp-price { margin: 16px 0 0; font-family: var(--sans); font-size: clamp(34px, 5vw, 44px); font-weight: 200; line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; color: var(--fg); }
[data-look="showroom"] .lp-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 28px 24px; }
[data-look="showroom"] .lp-row { padding: 11px 0; border-top: 1px solid rgba(244, 236, 226, .09); font-family: var(--sans); font-size: 14.5px; color: rgba(244, 236, 226, .72); }
[data-look="showroom"] .lp-scroll > .lp-row:first-child,
[data-look="showroom"] .lp-prev > .lp-h + .lp-row { border-top: 0; }
[data-look="showroom"] .lp-row b { font-family: var(--sans); font-size: 15px; font-weight: 400; font-variant-numeric: tabular-nums; color: var(--fg); }
[data-look="showroom"] .lp-prev { margin: 16px 0 0; padding: 14px 18px 6px; border: 1px solid rgba(232, 163, 116, .24); border-radius: 18px; background: rgba(196, 105, 58, .11); }
[data-look="showroom"] .lp-prev-none { padding-bottom: 14px; border-color: rgba(244, 236, 226, .12); background: rgba(244, 236, 226, .04); }
[data-look="showroom"] .lp-h { margin: 0 0 2px; font-family: var(--sans); font-size: 14px; letter-spacing: 0; color: var(--cu-hi); }
[data-look="showroom"] .lp-gain b { font-size: 18px; font-weight: 500; }
[data-look="showroom"] .lp-gain.up b { color: var(--ok); }
[data-look="showroom"] .lp-gain.down b { color: var(--no); }
[data-look="showroom"] .lp-note, [data-look="showroom"] .lp-src { font-family: var(--sans); font-size: 13px; line-height: 1.55; color: rgba(244, 236, 226, .7); }
[data-look="showroom"] .lp-prev .lp-note { margin: 6px 0 0; }
[data-look="showroom"] .lp-src { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(244, 236, 226, .09); }
[data-look="showroom"] .lp-x { position: absolute; top: 16px; right: 16px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(244, 236, 226, .09); color: var(--fg); line-height: 0; transition: background var(--d-s) var(--ease), transform var(--d-s) var(--ease); }
[data-look="showroom"] .lp-x:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { [data-look="showroom"] .lp-x:hover { background: rgba(244, 236, 226, .18); } }

/* a phone: every sheet rises from the bottom, with a grab handle, and its own content scrolls */
@media (max-width: 600px) {
  [data-look="showroom"] #latestPanel,
  [data-look="showroom"] .ru-modal-back,
  [data-look="showroom"] .modal-back,
  [data-look="showroom"] .m-back { align-items: flex-end; padding: 0; }
  [data-look="showroom"] #latestPanel .lp-box,
  [data-look="showroom"] .ru-modal,
  [data-look="showroom"] .modal-back > .modal,
  [data-look="showroom"] .m-box { max-width: none; max-height: 90vh; border-bottom: 0; border-radius: 28px 28px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  [data-look="showroom"] #latestPanel .lp-box { padding-bottom: 0; }
  [data-look="showroom"] .ru-modal, [data-look="showroom"] .modal-back > .modal, [data-look="showroom"] .m-box { padding-top: 30px; }
  [data-look="showroom"] .lp-box::before,
  [data-look="showroom"] .ru-modal::before,
  [data-look="showroom"] .modal-back > .modal::before,
  [data-look="showroom"] .m-box::before,
  [data-look="showroom"] #kpiFilters::before {
    content: ''; position: absolute; top: 9px; left: 50%; z-index: 3; width: 44px; height: 4px; margin-left: -22px; border-radius: 4px; background: rgba(244, 236, 226, .3);
  }
  [data-look="showroom"] .lp-head { padding: 32px 68px 20px 22px; }
  [data-look="showroom"] .lp-scroll { padding: 6px 22px calc(22px + env(safe-area-inset-bottom)); }
  [data-look="showroom"] .lp-name { font-size: 23px; }
  @media (prefers-reduced-motion: no-preference) {
    [data-look="showroom"] .lp-box,
    [data-look="showroom"] .ru-modal,
    [data-look="showroom"] .modal-back > .modal,
    [data-look="showroom"] .m-box { animation: ySheetUp 320ms cubic-bezier(.32, .72, 0, 1) both; }
    @keyframes ySheetUp { from { transform: translateY(100%); } to { transform: none; } }
  }
}
/* the phone's sheet of filters: the same sheet */
@media (max-width: 760px) {
  [data-look="showroom"] #kpiFilters {
    border: 1px solid rgba(232, 163, 116, .3); border-bottom: 0; border-radius: 28px 28px 0 0; padding-top: 26px;
    background: linear-gradient(180deg, #2D2016 0%, #1E150E 36%, #150E09 100%);
    box-shadow: 0 -30px 90px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(244, 236, 226, .16);
  }
}

/* ---------- 14. AIR AROUND EVERY CHART (Nasser on his iPhone, 6 Oct 2026: "give some padding for the charts ... check
   the borders"). The canvas was placed with inset: 0 inside its box, so it ignored the box's padding and the axis
   labels sat on the card's border. The box's padding is named, and the canvas starts after it; Chart.js sizes
   the drawing to the content area. The box's height is counted without the padding, so charts keep their height. ---------- */
[data-look="showroom"] .chart-box { --cp-x: 0px; --cp-t: 0px; }
[data-look="showroom"] .data-main .chart-card > .chart-box { --cp-x: 22px; --cp-t: 22px; box-sizing: content-box; padding: var(--cp-t) var(--cp-x) 16px; }
[data-look="showroom"] .chart-box > canvas { inset: auto; left: var(--cp-x); top: var(--cp-t); }
@media (max-width: 860px) {
  [data-look="showroom"] .data-main .chart-card > .chart-box { --cp-x: 14px; --cp-t: 18px; padding-bottom: 14px; }
}

/* ---------- 15. A THUMB CAN HIT IT (the phone pass of 6 Oct 2026): on a phone every button, list, text box and footer
   link is at least 44 px tall. Left out on purpose: the typing box INSIDE a filter field (its shell is the target),
   the close crosses of the sheets (44 px already), the three-line menu button (44 px already). ---------- */
@media (max-width: 600px) {
  [data-look="showroom"] button:not(.lp-x):not(.y-pick-x):not(.nav-burger):not(.ms-item):not(.f-pickbtn):not(.cg-tab),
  [data-look="showroom"] select:not(.y-pick-src),
  [data-look="showroom"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.ms-input):not(.f-date),
  [data-look="showroom"] .yf a,
  [data-look="showroom"] .y-pick { min-height: 44px; }
  [data-look="showroom"] .yf a { display: inline-flex; align-items: center; }
  [data-look="showroom"] .leaflet-bar a,
  [data-look="showroom"] .leaflet-touch .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; }
  [data-look="showroom"] .tier-bar a { min-height: 44px; display: inline-flex; align-items: center; }
  [data-look="showroom"] .mini-chips button,
  [data-look="showroom"] .f-chips button { padding-top: 0; padding-bottom: 0; }
}

/* ---------- 16. A CHAPTER'S CONTROL STANDS CLEAR OF ITS TITLE (Nasser on the live supply page, 6 Oct 2026: "the field of
   the search is directly on the text, so people can't see it"). Under a chapter's title, one line of air before
   any control, and the area picker looks like a control: a stronger edge, a magnifier, a chevron. ---------- */
[data-look="showroom"] .data-main .chart-card > .cc-head > * + * { margin-top: 18px; }
[data-look="showroom"] .area-search > input {
  height: 44px; width: 240px; max-width: 100%; padding: 0 38px 0 40px; border: 1px solid rgba(244, 236, 226, .28); border-radius: 999px;
  background-color: #2A1E15; color: var(--fg); font-family: var(--sans); font-size: 14.5px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8A374' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8A374' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 14px 50%, right 14px center; background-size: 17px 17px, 15px 15px;
}
[data-look="showroom"] .area-search > input::placeholder { color: rgba(244, 236, 226, .62); }
[data-look="showroom"] .area-search > input:focus { border-color: var(--cu-hi); box-shadow: 0 0 0 3px rgba(232, 163, 116, .2); outline: none; }

/* ---------- 17. TYPE TO SEARCH A LIST (the supply page's lists; the page's own script builds the box, class y-ls) ---------- */
[data-look="showroom"] .y-ls { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 16px 0 14px; }
[data-look="showroom"] .y-ls-i { position: absolute; left: 14px; top: 13px; width: 18px; height: 18px; fill: none; stroke: var(--cu-hi); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
[data-look="showroom"] .y-ls-q {
  flex: 1 1 240px; min-width: 0; height: 44px; padding: 0 14px 0 42px; border: 1px solid rgba(244, 236, 226, .26); border-radius: 999px;
  background: #2A1E15; color: var(--fg); font-family: var(--sans); font-size: 16px; outline: none; -webkit-appearance: none; appearance: none;
}
[data-look="showroom"] .y-ls-q::-webkit-search-cancel-button, [data-look="showroom"] .y-ls-q::-webkit-search-decoration { -webkit-appearance: none; display: none; }
[data-look="showroom"] .y-ls-q::placeholder { color: rgba(244, 236, 226, .6); }
[data-look="showroom"] .y-ls-q:focus { border-color: var(--cu-hi); box-shadow: 0 0 0 3px rgba(232, 163, 116, .2); }
[data-look="showroom"] .y-ls-x { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(244, 236, 226, .09); color: var(--fg); cursor: pointer; }
[data-look="showroom"] .y-ls-x[hidden] { display: none; }
[data-look="showroom"] .y-ls-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
[data-look="showroom"] .y-ls-n { flex: none; font-family: var(--sans); font-size: 14px; color: rgba(244, 236, 226, .74); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* <<< PASS4 END */

/* ---------- 18. THE PHONE ROUND OF 7 OCT 2026 (Nasser on his iPhone). Outside the PASS4 block on purpose. ---------- */

/* A. THE MENU STAYS ON TOP, SOLID ("when scrolling in a page, I see the content is going above the top menu").
   Cause: Safari 26 on an iPhone paints the strip above the page (clock, battery) from the fixed bar at the top of the
   page, but only when that bar is a solid colour with no frosted-glass blur. Our menu was 82% see-through and blurred
   (and fully clear over the first screen), so Safari let the page itself scroll through that strip, above the menu.
   Fix: wherever the menu is the three-line button (under 1200 px) or the screen is touch-only, the menu is SOLID,
   never blurred, never clear. Its layer stays 1000: the sheets (12000) still cover it, the lists (9500) still open
   over it, the phone dock (900) and the sticky bars (under 100) stay under it. */
@media (max-width: 1199px), (hover: none) {
  :where([data-look="showroom"]) .navbar,
  :where([data-look="showroom"]) .navbar.nav-top,
  :where([data-look="showroom"]) .navbar.nav-open {
    background: #0B0705; -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: 0 1px 0 rgba(244, 236, 226, .08);
  }
  :where([data-look="showroom"]) .navbar.nav-top { box-shadow: none; }
}
/* the page's own sticky bars hang right under the menu, never half under it */
@media (max-width: 760px) {
  [data-look="showroom"] .data-hero ~ .filter-bar { top: var(--nav-h, 72px); }
}
/* a jump to a part of the page (#anchor) stops below the menu, and below the bar of filters on the market pages */
html[data-look="showroom"] { scroll-padding-top: calc(var(--nav-h, 72px) + 14px); }
html[data-look="showroom"]:has(.data-hero ~ .filter-bar) { scroll-padding-top: calc(var(--nav-h, 72px) + 86px); }

/* B. "ALL FILTERS" ON A PHONE SHOWED A BLANK PAGE (dubai-data, abu-dhabi-data). Cause: the sheet of filters
   (#kpiFilters) lives INSIDE the bar of filters, and that bar is sticky with its own layer (60). A child can never
   rise above its parent's layer, so the sheet's own 300 counted only inside the bar. The veil (#fScrim, 299 on the
   page, dark and blurred since 6 Oct) therefore covered the sheet: the page went dark and blurred, the filters were
   under the veil. Fix: while the sheet is open, the BAR goes above the veil, and the veil above the menu. The bar's own
   strip and buttons hide while the sheet is open, so only the sheet shows on the veil. The page under it stops
   scrolling. */
@media (max-width: 760px) {
  [data-look="showroom"] body.f-sheet-open .f-scrim { z-index: 12000; }
  body.f-sheet-open .filter-bar,
  [data-look="showroom"] body.f-sheet-open .data-hero ~ .filter-bar {
    z-index: 12001; background: transparent; border-color: transparent; box-shadow: none;
  }
  body.f-sheet-open .filter-bar > :not(#kpiFilters) { visibility: hidden; }
  [data-look="showroom"] body.f-sheet-open #kpiFilters {
    max-height: calc(100vh - var(--nav-h, 72px) - 24px); max-height: calc(100dvh - var(--nav-h, 72px) - 24px);
    padding-bottom: calc(22px + env(safe-area-inset-bottom)); overscroll-behavior: contain;
  }
  /* a type-to-search list opened from inside the sheet goes above it too */
  body.f-sheet-open .y-pick-scrim { z-index: 12009; }
  body.f-sheet-open .y-pick-pop { z-index: 12010; }
  html:has(body.f-sheet-open) { overflow: hidden; }
}