/* ==============================================================================
   NAQSH RESIDENCE · OFFICIAL ARCHITECTURAL LUXURY STYLESHEET (2026)
   Matching NAQSH Brandbook Specifications:
   - Latte Brown: #C3AA83
   - Storm Gray: #404F5E / #6E6863
   - Silver Gray: #D5D5D3 / #6398A7
   - Honeyed Amber: #DAA53F / #CBA258
   - Dark Obsidian / Espresso: #141312 / #1A1715
   - Fonts: Platypi-Master (Display/Headings) + Montserrat (UI/Body)
   ============================================================================== */

@font-face {
  font-family: 'Platypi-Master';
  src: url('../fonts/Platypi-Light-300.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Platypi-Master';
  src: url('../fonts/Platypi-Regular-400.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Platypi-Master';
  src: url('../fonts/Platypi-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-latte: #C3AA83;
  --color-storm: #404F5E;
  --color-storm-light: #6E6863;
  --color-silver: #D5D5D3;
  --color-cadet: #6398A7;
  --color-amber: #DAA53F;
  --color-gold: #CBA258;
  --color-gold-bright: #F5DBA0;

  --color-dark-obsidian: #141312;
  --color-dark-espresso: #1A1715;
  --color-dark-card: #201D1A;
  --color-dark-border: rgba(195, 170, 131, 0.22);
  --color-dark-border-strong: rgba(195, 170, 131, 0.45);

  --color-light-bg: #FAF8F5;
  --color-light-card: #FFFFFF;
  --color-light-border: rgba(64, 79, 94, 0.15);

  --color-text-main: #FFFFFF;
  --color-text-dim: #E0DDD7;
  --color-text-muted: #A39D95;

  --font-serif: 'Platypi-Master', 'Georgia', serif;
  --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;

  --container-max: 1320px;
  --header-height: 80px;
  --transition-smooth: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* RESET & BASE */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: var(--color-dark-obsidian);
  color: var(--color-text-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  line-height: 1.6;
  background: var(--color-dark-obsidian);
  color: var(--color-text-main);
  overflow-x: hidden;
  font-weight: 300;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-smooth);
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  transition: var(--transition-smooth);
}

/* SITE CONTAINER */
.site-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 32px;
}

/* TYPOGRAPHY HELPERS */
.section-label {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-gold);
  font-weight: 600;
  margin-bottom: 12px;
  display: inline-block;
}

.section-title {
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 300;
  line-height: 1.25;
  color: #FFFFFF;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}

.section-desc {
  font-size: 16px;
  color: var(--color-text-muted);
  max-width: 680px;
  line-height: 1.7;
  font-weight: 300;
}

.section-header-center {
  text-align: center;
  margin-bottom: 60px;
}
.section-header-center .section-desc {
  margin: 0 auto;
}

.section-header-left {
  text-align: left;
  margin-bottom: 50px;
}

/* BUTTONS */
.btn-concierge-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #F5DBA0 0%, #CBA258 50%, #9A7840 100%);
  color: #141312;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 16px 32px;
  border-radius: 2px;
  box-shadow: 0 4px 16px rgba(203, 162, 88, 0.25);
  border: 1px solid rgba(245, 219, 160, 0.4);
}
.btn-concierge-solid:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(203, 162, 88, 0.38);
  filter: brightness(1.06);
}

.btn-concierge-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 19, 18, 0.6);
  backdrop-filter: blur(8px);
  color: #FFFFFF;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 16px 32px;
  border-radius: 2px;
  border: 1px solid var(--color-dark-border-strong);
}
.btn-concierge-outline:hover {
  background: rgba(195, 170, 131, 0.12);
  border-color: var(--color-gold);
  color: var(--color-gold);
  transform: translateY(-2px);
}

/* ==============================================================================
   NAVIGATION HEADER
   ============================================================================== */
.header-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  z-index: 1000;
  background: rgba(18, 17, 16, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(195, 170, 131, 0.18);
  transition: var(--transition-smooth);
}
.header-nav.scrolled {
  background: rgba(14, 13, 12, 0.98);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.nav-container {
  max-width: var(--container-max);
  height: 100%;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand-logo-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  white-space: nowrap;
}
.brand-logo-icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.brand-logo-text {
  font-family: var(--font-serif);
  font-size: 15px;
  letter-spacing: 0.16em;
  color: #FFFFFF;
  font-weight: 400;
  white-space: nowrap;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 1;
}
.nav-link {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  font-weight: 400;
  position: relative;
  padding: 6px 0;
  white-space: nowrap;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-gold);
  transition: width 0.3s ease;
}
.nav-link:hover {
  color: var(--color-gold);
}
.nav-link:hover::after {
  width: 100%;
}
.nav-link-highlight {
  color: var(--color-gold);
  font-weight: 500;
}
.nav-link-cinema {
  color: var(--color-gold);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.cinema-nav-icon {
  font-size: 8px;
  color: var(--color-amber);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.nav-phone {
  font-size: 12px;
  color: #FFFFFF;
  letter-spacing: 0.04em;
  font-weight: 400;
  white-space: nowrap;
}
.nav-phone:hover {
  color: var(--color-gold);
}
.nav-actions .btn-concierge-outline {
  padding: 10px 18px;
  font-size: 11px;
  white-space: nowrap;
}

.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 6px;
  width: 32px;
  height: 24px;
  justify-content: center;
}
.mobile-menu-toggle span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--color-gold);
  transition: var(--transition-smooth);
}
.mobile-menu-drawer {
  display: none;
}

/* ==============================================================================
   HERO SECTION
   ============================================================================== */
.hero-section {
  position: relative;
  min-height: 100vh;
  max-height: 1080px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--header-height);
  padding-bottom: 40px;
  overflow: hidden;
}

.hero-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}
.hero-bg-video,
.hero-bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.62) contrast(1.08);
}
.btn-play-hero {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.icon-play-tri {
  display: inline-block;
  vertical-align: middle;
}
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(20, 19, 18, 0.4) 0%, rgba(20, 19, 18, 0.88) 85%, #141312 100%),
              linear-gradient(to bottom, rgba(20, 19, 18, 0.6) 0%, transparent 40%, rgba(20, 19, 18, 0.95) 100%);
}
#ambientCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  opacity: 0.6;
}

.hero-container {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 40px 32px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
}

.hero-content {
  text-align: center;
  max-width: 880px;
  margin: auto auto 60px;
}

.hero-emblem-wrap {
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-emblem-wrap::before {
  content: '';
  position: absolute;
  inset: -12px;
  background: radial-gradient(circle, rgba(203, 162, 88, 0.35) 0%, transparent 70%);
  border-radius: 50%;
  animation: pulseGlow 4s ease-in-out infinite alternate;
}
@keyframes pulseGlow {
  0% { transform: scale(0.9); opacity: 0.5; }
  100% { transform: scale(1.15); opacity: 0.9; }
}
.hero-emblem {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 16px rgba(203, 162, 88, 0.4));
}

.hero-eyebrow {
  font-size: 12px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--color-gold);
  font-weight: 500;
  margin-bottom: 16px;
}

.hero-title {
  font-family: var(--font-serif);
  font-size: 64px;
  font-weight: 300;
  letter-spacing: 0.14em;
  color: #FFFFFF;
  line-height: 1.15;
  margin-bottom: 14px;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
}

.hero-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 24px;
  color: var(--color-latte);
  margin-bottom: 24px;
  letter-spacing: 0.04em;
}

.hero-lead {
  font-size: 17px;
  color: var(--color-text-dim);
  line-height: 1.8;
  max-width: 740px;
  margin: 0 auto 36px;
  font-weight: 300;
}

.hero-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* STATS BAR */
.hero-stats-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  background: rgba(26, 23, 21, 0.75);
  backdrop-filter: blur(12px);
  border: 1px solid var(--color-dark-border);
  border-radius: 4px;
  padding: 24px 36px;
  margin-top: 20px;
}
.stat-item {
  text-align: center;
}
.stat-val {
  font-family: var(--font-serif);
  font-size: 30px;
  color: var(--color-gold-bright);
  font-weight: 300;
  line-height: 1.2;
}
.stat-lbl {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: 4px;
}
.stat-divider {
  width: 1px;
  height: 40px;
  background: var(--color-dark-border);
}

/* ==============================================================================
   SECTION 1: EDITORIAL & PHILOSOPHY
   ============================================================================== */
.editorial-section {
  padding: 120px 0;
  background: var(--color-dark-espresso);
  position: relative;
  border-top: 1px solid var(--color-dark-border);
}
.editorial-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 70px;
  align-items: center;
}
.editorial-heading {
  font-family: var(--font-serif);
  font-size: 42px;
  font-weight: 300;
  line-height: 1.25;
  color: #FFFFFF;
  margin-bottom: 24px;
}
.editorial-lead {
  font-size: 18px;
  line-height: 1.8;
  color: var(--color-latte);
  margin-bottom: 20px;
  font-weight: 400;
}
.editorial-body {
  font-size: 15px;
  line-height: 1.85;
  color: var(--color-text-dim);
  margin-bottom: 32px;
}

.quote-card {
  background: rgba(20, 19, 18, 0.6);
  border-left: 2px solid var(--color-gold);
  padding: 24px 30px;
  border-radius: 0 4px 4px 0;
  position: relative;
}
.quote-decor {
  position: absolute;
  top: -10px;
  left: 20px;
  font-family: var(--font-serif);
  font-size: 60px;
  color: rgba(203, 162, 88, 0.18);
  line-height: 1;
}
.quote-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.75;
  color: #FFFFFF;
  margin-bottom: 12px;
  position: relative;
  z-index: 2;
}
.quote-author {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
  font-weight: 500;
}

.visual-stack {
  position: relative;
}
.visual-card {
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--color-dark-border);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  background: var(--color-dark-card);
}
.visual-card-main {
  width: 100%;
}
.visual-card-sub {
  width: 65%;
  position: absolute;
  bottom: -40px;
  right: -20px;
  border: 2px solid var(--color-dark-obsidian);
}
.visual-img {
  width: 100%;
  height: auto;
  display: block;
}
.visual-caption {
  font-size: 12px;
  color: var(--color-text-muted);
  padding: 12px 16px;
  background: rgba(20, 19, 18, 0.9);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* ==============================================================================
   SECTION 2: SIGNATURE ORNAMENT
   ============================================================================== */
.ornament-section {
  padding: 120px 0;
  background: var(--color-dark-obsidian);
  position: relative;
}
.ornament-dual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
}
.ornament-card {
  border-radius: 6px;
  overflow: hidden;
  transition: var(--transition-smooth);
}
.ornament-card.card-dark {
  background: #181614;
  border: 1px solid var(--color-dark-border-strong);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}
.ornament-card.card-light {
  background: #FAF8F5;
  border: 1px solid rgba(64, 79, 94, 0.2);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
  color: #141312;
}

.ornament-preview-box {
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.ornament-preview-box.dark-box {
  background: radial-gradient(circle at center, #26221E 0%, #121110 80%);
}
.ornament-preview-box.light-box {
  background: radial-gradient(circle at center, #FFFFFF 0%, #F0EAE1 100%);
}

.ornament-glow {
  position: absolute;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(218, 165, 63, 0.25) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.ornament-vector {
  width: 170px;
  height: 170px;
  object-fit: contain;
  position: relative;
  z-index: 2;
  transition: transform 0.5s ease;
}
.ornament-card:hover .ornament-vector {
  transform: scale(1.05);
}

.ornament-info {
  padding: 36px;
}
.badge-amber {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #DAA53F;
  border: 1px solid #DAA53F;
  padding: 4px 10px;
  border-radius: 2px;
  margin-bottom: 16px;
  font-weight: 600;
}
.badge-storm {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #404F5E;
  border: 1px solid #404F5E;
  padding: 4px 10px;
  border-radius: 2px;
  margin-bottom: 16px;
  font-weight: 600;
}

.ornament-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 14px;
}
.card-dark .ornament-title { color: #FFFFFF; }
.card-light .ornament-title { color: #141312; }

.ornament-p {
  font-size: 14px;
  line-height: 1.75;
  margin-bottom: 24px;
}
.card-dark .ornament-p { color: var(--color-text-dim); }
.card-light .ornament-p { color: #55524E; }

.spec-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.spec-tag {
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 6px 14px;
  border-radius: 2px;
}
.card-dark .spec-tag {
  background: rgba(195, 170, 131, 0.12);
  color: var(--color-gold);
  border: 1px solid rgba(195, 170, 131, 0.25);
}
.card-light .spec-tag {
  background: rgba(64, 79, 94, 0.08);
  color: #404F5E;
  border: 1px solid rgba(64, 79, 94, 0.2);
}

/* ==============================================================================
   SECTION 3: 4 MODES PATTERN SYSTEM
   ============================================================================== */
.patterns-section {
  padding: 120px 0;
  background: #181614;
  border-top: 1px solid var(--color-dark-border);
}
.patterns-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.pattern-card {
  background: var(--color-dark-card);
  border: 1px solid var(--color-dark-border);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transition: var(--transition-smooth);
}
.pattern-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-gold);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}

.pattern-img-wrap {
  width: 100%;
  height: 180px;
  overflow: hidden;
  position: relative;
  background: #100E0D;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.pattern-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.pattern-card:hover .pattern-preview-img {
  transform: scale(1.04);
}

.dark-seal-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #121110;
}
.pattern-preview-seal {
  width: 100px;
  height: 100px;
  object-fit: contain;
  filter: drop-shadow(0 4px 16px rgba(203, 162, 88, 0.3));
}

.pattern-meta {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.pattern-idx {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-amber);
  font-weight: 600;
  margin-bottom: 8px;
}
.pattern-name {
  font-family: var(--font-serif);
  font-size: 17px;
  color: #FFFFFF;
  margin-bottom: 10px;
  font-weight: 400;
}
.pattern-desc {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.65;
  font-weight: 300;
}

/* ==============================================================================
   SECTION 4: ARCHITECTURE & SPACES GALLERY
   ============================================================================== */
.gallery-section {
  padding: 120px 0;
  background: var(--color-dark-obsidian);
}
.spaces-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}
.space-item {
  position: relative;
  height: 320px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.space-item-large {
  grid-column: span 2;
}
.space-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.space-item:hover .space-img {
  transform: scale(1.05);
}
.space-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 14, 13, 0.95) 0%, rgba(15, 14, 13, 0.3) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
}
.space-tag {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
  font-weight: 600;
  margin-bottom: 6px;
}
.space-title {
  font-family: var(--font-serif);
  font-size: 20px;
  color: #FFFFFF;
  margin-bottom: 6px;
  font-weight: 400;
}
.space-detail {
  font-size: 13px;
  color: var(--color-text-dim);
  line-height: 1.5;
  font-weight: 300;
}

.material-palette-bar {
  background: var(--color-dark-card);
  border: 1px solid var(--color-dark-border);
  padding: 24px 32px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.mat-label {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-latte);
  font-weight: 500;
}
.mat-cards-wrap {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.mat-card {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mat-thumb {
  width: 44px;
  height: 44px;
  border-radius: 3px;
  object-fit: cover;
  border: 1px solid var(--color-dark-border);
}
.mat-name {
  font-size: 13px;
  color: #FFFFFF;
  font-weight: 400;
}

/* ==============================================================================
   SECTION 5: INTERACTIVE RESIDENCES & FLOORPLANS
   ============================================================================== */
.residences-section {
  padding: 120px 0;
  background: var(--color-dark-espresso);
  border-top: 1px solid var(--color-dark-border);
}
.floorplan-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 36px;
}
.tab-btn {
  background: var(--color-dark-card);
  border: 1px solid var(--color-dark-border);
  padding: 18px 20px;
  border-radius: 4px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--color-text-dim);
  transition: var(--transition-smooth);
}
.tab-btn:hover {
  border-color: var(--color-gold);
  background: rgba(195, 170, 131, 0.08);
}
.tab-btn.active {
  background: linear-gradient(135deg, rgba(203, 162, 88, 0.15) 0%, rgba(20, 19, 18, 0.8) 100%);
  border-color: var(--color-gold);
  color: #FFFFFF;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.tab-type {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-gold);
}
.tab-area {
  font-size: 13px;
  color: var(--color-text-dim);
  font-weight: 300;
}

.floorplan-showcase-box {
  background: #141312;
  border: 1px solid var(--color-dark-border-strong);
  border-radius: 6px;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.plan-vector-viewer {
  background: #0E0D0C;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--color-dark-border);
}
.plan-svg-holder {
  width: 100%;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.plan-svg-asset {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,0.5));
}
.plan-tools-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 16px;
  margin-top: 16px;
}
.tool-tag {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.btn-tool-zoom {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
  padding: 6px 12px;
  border: 1px solid rgba(203, 162, 88, 0.3);
  border-radius: 2px;
}
.btn-tool-zoom:hover {
  background: rgba(203, 162, 88, 0.1);
}

.plan-details-panel {
  padding: 44px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #181614;
}
.plan-title {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 300;
  color: #FFFFFF;
  margin-bottom: 6px;
}
.plan-headline-spec {
  font-size: 14px;
  color: var(--color-latte);
  margin-bottom: 24px;
  font-weight: 400;
}

.specs-mini-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 30px;
}
.s-box {
  background: rgba(20, 19, 18, 0.7);
  border: 1px solid var(--color-dark-border);
  padding: 12px 10px;
  border-radius: 3px;
  text-align: center;
}
.s-val {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--color-gold-bright);
  font-weight: 400;
}
.s-lbl {
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: 4px;
}

.explication-wrap {
  margin-bottom: 32px;
}
.explication-title {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 14px;
  font-weight: 600;
}
.explication-list {
  list-style: none;
}
.explication-list li {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 13px;
  color: var(--color-text-dim);
}
.explication-list li strong {
  color: #FFFFFF;
  font-weight: 500;
}

.plan-actions-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ==============================================================================
   SECTION 6: AMENITIES & 10 ICONS
   ============================================================================== */
.amenities-section {
  padding: 120px 0;
  background: var(--color-dark-obsidian);
}
.amenities-grid-10 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.amenity-card {
  background: var(--color-dark-card);
  border: 1px solid var(--color-dark-border);
  border-radius: 4px;
  padding: 30px 22px;
  text-align: center;
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.amenity-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-gold);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}
.amenity-icon-box {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(195, 170, 131, 0.08);
  border: 1px solid var(--color-dark-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.amenity-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.amenity-name {
  font-family: var(--font-serif);
  font-size: 16px;
  color: #FFFFFF;
  margin-bottom: 8px;
  font-weight: 400;
}
.amenity-desc {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.6;
  font-weight: 300;
}

/* ==============================================================================
   SECTION 7: BRANDBOOK DOWNLOAD BLOCK
   ============================================================================== */
.brandbook-download-section {
  padding: 100px 0;
  background: #181614;
  border-top: 1px solid var(--color-dark-border);
}
.brandbook-download-card {
  background: linear-gradient(135deg, #1C1916 0%, #121110 100%);
  border: 1px solid var(--color-dark-border-strong);
  border-radius: 6px;
  padding: 60px;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 60px;
  align-items: center;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7);
}

.bb-mockup-frame {
  background: #0E0D0C;
  border: 1px solid rgba(195, 170, 131, 0.3);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8);
}
.bb-mockup-header {
  background: #1B1917;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.bb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}
.bb-title-tab {
  font-size: 11px;
  font-family: monospace;
  color: var(--color-latte);
  margin-left: 8px;
}
.bb-mockup-page {
  padding: 50px 36px;
  text-align: center;
  background: radial-gradient(circle at center, #26221E 0%, #100F0E 80%);
}
.bb-seal {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  filter: drop-shadow(0 4px 16px rgba(203, 162, 88, 0.4));
}
.bb-doc-title {
  font-family: var(--font-serif);
  font-size: 22px;
  letter-spacing: 0.16em;
  color: #FFFFFF;
  margin-bottom: 6px;
}
.bb-doc-sub {
  font-size: 9px;
  letter-spacing: 0.25em;
  color: var(--color-gold);
  margin-bottom: 16px;
}
.bb-doc-meta {
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--color-text-muted);
}

.bb-heading {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 300;
  color: #FFFFFF;
  margin-bottom: 16px;
}
.bb-text {
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-text-dim);
  margin-bottom: 24px;
}
.bb-features-list {
  list-style: none;
  margin-bottom: 32px;
}
.bb-features-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: #FFFFFF;
  padding: 6px 0;
}
.bb-features-list li span {
  color: var(--color-gold);
  font-weight: bold;
}
.bb-download-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ==============================================================================
   SECTION 8: LOCATION
   ============================================================================== */
.location-section {
  padding: 120px 0;
  background: var(--color-dark-obsidian);
}
.distance-meters-list {
  margin: 32px 0;
}
.dist-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.dist-time {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--color-gold-bright);
  font-weight: 400;
  min-width: 65px;
}
.dist-name {
  font-size: 14px;
  color: var(--color-text-dim);
}

.coords-box {
  background: rgba(20, 19, 18, 0.6);
  border: 1px solid var(--color-dark-border);
  padding: 16px 24px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.coord-label {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--color-text-muted);
}
.coord-val {
  font-family: monospace;
  font-size: 14px;
  color: var(--color-gold);
  letter-spacing: 0.05em;
}

.map-card-stylized {
  background: var(--color-dark-card);
  border: 1px solid var(--color-dark-border);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}
.map-inner-canvas {
  height: 380px;
  background: radial-gradient(circle at center, #26221E 0%, #141312 80%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.map-crosshair-center {
  position: relative;
  z-index: 5;
  text-align: center;
}
.map-pin-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 10px;
  filter: drop-shadow(0 4px 16px rgba(203, 162, 88, 0.5));
}
.map-pin-label {
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: #FFFFFF;
}

.map-radial-wave {
  position: absolute;
  width: 140px;
  height: 140px;
  border: 1px solid rgba(203, 162, 88, 0.4);
  border-radius: 50%;
  animation: mapWave 3s ease-out infinite;
}
.map-radial-wave.wave-2 {
  animation-delay: 1.5s;
}
@keyframes mapWave {
  0% { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(2.2); opacity: 0; }
}

.map-caption-bar {
  padding: 16px 24px;
  background: #141312;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--color-text-muted);
}
.map-link {
  color: var(--color-gold);
  font-weight: 500;
}
.map-link:hover {
  text-decoration: underline;
}

/* ==============================================================================
   SECTION 9: CONTACT & BOOKING
   ============================================================================== */
.contact-section {
  padding: 120px 0;
  background: var(--color-dark-espresso);
  border-top: 1px solid var(--color-dark-border);
}
.contact-card-editorial {
  background: #161412;
  border: 1px solid var(--color-dark-border-strong);
  border-radius: 6px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.contact-left {
  padding: 60px;
  background: #191715;
  border-right: 1px solid var(--color-dark-border);
}
.contact-heading {
  font-family: var(--font-serif);
  font-size: 38px;
  font-weight: 300;
  color: #FFFFFF;
  margin-bottom: 16px;
}
.contact-p {
  font-size: 15px;
  color: var(--color-text-dim);
  line-height: 1.75;
  margin-bottom: 40px;
}
.contact-direct-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.c-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.c-lbl {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.c-val {
  font-size: 16px;
  color: #FFFFFF;
  font-weight: 400;
}
a.c-val:hover {
  color: var(--color-gold);
}

.contact-right {
  padding: 60px;
  background: #141312;
}
.form-title {
  font-family: var(--font-serif);
  font-size: 22px;
  color: #FFFFFF;
  margin-bottom: 6px;
  font-weight: 400;
}
.form-sub {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 24px;
}

.form-group {
  margin-bottom: 20px;
}
.form-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-bottom: 8px;
  font-weight: 500;
}
.form-input, .form-select {
  width: 100%;
  padding: 14px 18px;
  background: rgba(26, 23, 21, 0.8);
  border: 1px solid var(--color-dark-border);
  border-radius: 3px;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 14px;
  transition: var(--transition-smooth);
}
.form-input:focus, .form-select:focus {
  outline: none;
  border-color: var(--color-gold);
  background: rgba(26, 23, 21, 1);
  box-shadow: 0 0 12px rgba(203, 162, 88, 0.2);
}
.form-select option {
  background: #1A1715;
  color: #FFFFFF;
}
.form-privacy {
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-top: 14px;
  text-align: center;
}

/* ==============================================================================
   FOOTER
   ============================================================================== */
.footer-section {
  background: #0E0D0C;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 80px 0 30px;
}
.footer-layout {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 60px;
  margin-bottom: 60px;
}
.footer-logo-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.footer-logo-icon {
  width: 36px;
  height: 36px;
}
.footer-logo-text {
  font-family: var(--font-serif);
  font-size: 18px;
  letter-spacing: 0.18em;
  color: #FFFFFF;
}
.footer-motto {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.7;
}

.footer-nav-side {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.f-col-title {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  font-weight: 600;
  margin-bottom: 18px;
}
.footer-nav-list {
  list-style: none;
}
.footer-nav-list li {
  margin-bottom: 10px;
}
.footer-nav-list a {
  font-size: 13px;
  color: var(--color-text-dim);
}
.footer-nav-list a:hover {
  color: var(--color-gold);
}

.footer-bottom-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--color-text-muted);
}
.brand-tag {
  letter-spacing: 0.18em;
  font-size: 11px;
  color: var(--color-latte);
}

/* ==============================================================================
   MODAL BOOKING
   ============================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 9, 8, 0.88);
  backdrop-filter: blur(10px);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal-overlay.open {
  display: flex;
}
.modal-box {
  background: #181614;
  border: 1px solid var(--color-dark-border-strong);
  border-radius: 6px;
  width: 100%;
  max-width: 480px;
  padding: 44px 36px;
  position: relative;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8);
  animation: modalIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalIn {
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}
.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 28px;
  color: var(--color-text-muted);
  line-height: 1;
}
.modal-close:hover {
  color: var(--color-gold);
}
.modal-title {
  font-family: var(--font-serif);
  font-size: 24px;
  color: #FFFFFF;
  margin-bottom: 8px;
  font-weight: 400;
}
.modal-desc {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 24px;
}

/* ==============================================================================
   CINEMA THEATER SECTION (4K ULTRA HD)
   ============================================================================== */
.cinema-section {
  padding: 110px 0 120px;
  background: radial-gradient(circle at 50% 25%, #1d1a17 0%, #141312 75%);
  border-top: 1px solid var(--color-dark-border);
  border-bottom: 1px solid var(--color-dark-border);
  position: relative;
  overflow: hidden;
}
.cinema-section::before {
  content: '';
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  width: 760px;
  height: 380px;
  background: radial-gradient(ellipse, rgba(203, 162, 88, 0.14) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 1;
}

.cinema-player-wrapper {
  position: relative;
  z-index: 2;
  margin-top: 48px;
  background: #0d0c0b;
  border: 1px solid rgba(195, 170, 131, 0.35);
  border-radius: 6px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.8), 0 0 40px rgba(203, 162, 88, 0.08);
  padding: 12px;
}

.cinema-frame-ornament {
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: var(--color-gold);
  border-style: solid;
  pointer-events: none;
  z-index: 5;
}
.cinema-frame-ornament.top-left {
  top: -2px;
  left: -2px;
  border-width: 3px 0 0 3px;
}
.cinema-frame-ornament.top-right {
  top: -2px;
  right: -2px;
  border-width: 3px 3px 0 0;
}
.cinema-frame-ornament.bottom-left {
  bottom: -2px;
  left: -2px;
  border-width: 0 0 3px 3px;
}
.cinema-frame-ornament.bottom-right {
  bottom: -2px;
  right: -2px;
  border-width: 0 3px 3px 0;
}

.cinema-badge-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  font-weight: 500;
  border-bottom: 1px solid rgba(195, 170, 131, 0.15);
  margin-bottom: 12px;
}
.badge-live-pulse {
  width: 8px;
  height: 8px;
  background: #E53935;
  border-radius: 50%;
  box-shadow: 0 0 12px #E53935;
  animation: pulseDot 1.8s infinite;
}
@keyframes pulseDot {
  0% { transform: scale(0.9); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.8; }
}

.cinema-video-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  background: #000000;
}
.cinema-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #000;
}

.cinema-play-overlay {
  position: absolute;
  inset: 0;
  background: rgba(14, 13, 12, 0.48);
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  z-index: 4;
}
.cinema-play-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.cinema-big-play-btn {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: rgba(203, 162, 88, 0.92);
  color: #141312;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 40px rgba(203, 162, 88, 0.6), inset 0 0 0 2px rgba(255,255,255,0.4);
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.cinema-big-play-btn svg {
  margin-left: 5px;
}
.cinema-play-overlay:hover .cinema-big-play-btn {
  transform: scale(1.08);
  background: #F5DBA0;
  box-shadow: 0 0 50px rgba(218, 165, 63, 0.8);
}
.cinema-play-caption {
  margin-top: 18px;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFFFFF;
  font-weight: 500;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}

.cinema-info-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 14px 6px;
  flex-wrap: wrap;
}
.c-info-meta {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.c-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.c-meta-lbl {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-latte);
}
.c-meta-val {
  font-size: 13px;
  color: #FFFFFF;
  font-weight: 400;
}
.c-info-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.c-btn-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 12px;
}
.js-toggle-sound {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 12px;
  color: var(--color-latte);
  border: 1px solid rgba(195, 170, 131, 0.35);
  border-radius: 2px;
}
.js-toggle-sound:hover {
  color: #FFFFFF;
  border-color: var(--color-gold);
}

/* ==============================================================================
   REAL ARCHITECTURAL GALLERY (10 HIGH-RES RENDERS)
   ============================================================================== */
.gallery-filter-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 36px 0 44px;
}
.filter-btn {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: 2px;
  border: 1px solid var(--color-dark-border);
  background: var(--color-dark-card);
  color: var(--color-text-dim);
  transition: var(--transition-smooth);
}
.filter-btn:hover {
  color: var(--color-gold);
  border-color: var(--color-gold);
  background: rgba(195, 170, 131, 0.08);
}
.filter-btn.active {
  background: linear-gradient(135deg, rgba(203, 162, 88, 0.22) 0%, rgba(20, 19, 18, 0.9) 100%);
  border-color: var(--color-gold);
  color: #FFFFFF;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}

.real-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 50px;
}
.real-gallery-card {
  background: #181615;
  border: 1px solid var(--color-dark-border);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.4s ease, opacity 0.3s ease;
  cursor: pointer;
  position: relative;
}
.real-gallery-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-gold);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(203, 162, 88, 0.15);
}
.real-gallery-card.card-featured {
  grid-column: span 2;
}
.real-gallery-card.hidden {
  display: none !important;
}

.real-card-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #000;
}
.real-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.real-gallery-card:hover .real-card-img {
  transform: scale(1.06);
}

.real-card-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(18, 16, 15, 0.88);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(195, 170, 131, 0.45);
  color: var(--color-gold);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
  font-weight: 600;
  z-index: 2;
}

.real-card-zoom-badge {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(20, 19, 18, 0.85);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;
  z-index: 2;
}
.real-gallery-card:hover .real-card-zoom-badge {
  opacity: 1;
  transform: scale(1);
  background: var(--color-gold);
  color: #141312;
}

.real-card-body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.real-card-title {
  font-family: var(--font-serif);
  font-size: 19px;
  color: #FFFFFF;
  margin-bottom: 8px;
  line-height: 1.35;
  font-weight: 400;
}
.real-card-desc {
  font-size: 13px;
  color: var(--color-text-dim);
  line-height: 1.6;
  font-weight: 300;
}

/* ==============================================================================
   LIGHTBOX FULLSCREEN VIEWER
   ============================================================================== */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 9, 8, 0.94);
  backdrop-filter: blur(12px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.lightbox-overlay.open {
  opacity: 1;
  visibility: visible;
}
.lightbox-dialog {
  position: relative;
  width: 94%;
  max-width: 1400px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: #141312;
  border: 1px solid var(--color-dark-border);
  border-radius: 6px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}
.lightbox-close {
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 34px;
  color: var(--color-latte);
  z-index: 10;
  line-height: 1;
  transition: color 0.2s ease, transform 0.2s ease;
}
.lightbox-close:hover {
  color: #FFFFFF;
  transform: scale(1.15);
}
.lightbox-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(20, 19, 18, 0.75);
  border: 1px solid rgba(195, 170, 131, 0.4);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.lightbox-nav-btn:hover {
  background: var(--color-gold);
  color: #141312;
  transform: translateY(-50%) scale(1.08);
}
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

.lightbox-img-holder {
  width: 100%;
  max-height: calc(92vh - 120px);
  background: #090908;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.lightbox-img {
  max-width: 100%;
  max-height: calc(92vh - 120px);
  object-fit: contain;
  transition: opacity 0.25s ease;
}

.lightbox-footer {
  padding: 20px 28px;
  background: #181615;
  border-top: 1px solid var(--color-dark-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.lightbox-tag {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}
.lightbox-title {
  font-family: var(--font-serif);
  font-size: 20px;
  color: #FFFFFF;
  margin-bottom: 4px;
  font-weight: 400;
}
.lightbox-desc {
  font-size: 13px;
  color: var(--color-text-dim);
  line-height: 1.5;
}
.lightbox-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}
.lightbox-counter {
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--color-latte);
}

/* ==============================================================================
   AMENITY CARD THUMBNAIL PREVIEWS
   ============================================================================== */
.amenity-thumb-preview {
  width: 100%;
  height: 96px;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 14px;
  border: 1px solid rgba(195, 170, 131, 0.25);
  position: relative;
}
.amenity-thumb-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.amenity-card:hover .amenity-thumb-preview img {
  transform: scale(1.08);
}

/* ==============================================================================
   RESPONSIVE BREAKPOINTS
   ============================================================================== */
@media (max-width: 1200px) {
  .patterns-grid { grid-template-columns: repeat(2, 1fr); }
  .amenities-grid-10 { grid-template-columns: repeat(3, 1fr); }
  .floorplan-tabs { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
  .desktop-nav, .nav-actions .btn-concierge-outline { display: none; }
  .mobile-menu-toggle { display: flex; }
  .editorial-grid { grid-template-columns: 1fr; gap: 40px; }
  .visual-card-sub { position: static; width: 100%; margin-top: 16px; }
  .ornament-dual-grid { grid-template-columns: 1fr; }
  .real-gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .real-gallery-card.card-featured { grid-column: span 1; }
  .cinema-info-bar { flex-direction: column; align-items: flex-start; gap: 16px; }
  .c-info-actions { width: 100%; justify-content: space-between; }
  .lightbox-footer { flex-direction: column; align-items: flex-start; }
  .lightbox-actions { width: 100%; justify-content: space-between; }
  .floorplan-showcase-box { grid-template-columns: 1fr; }
  .plan-vector-viewer { border-right: none; border-bottom: 1px solid var(--color-dark-border); }
  .brandbook-download-card { grid-template-columns: 1fr; padding: 40px 30px; }
  .contact-card-editorial { grid-template-columns: 1fr; }
  .contact-left { border-right: none; border-bottom: 1px solid var(--color-dark-border); padding: 40px; }
  .contact-right { padding: 40px; }
  .footer-layout { grid-template-columns: 1fr; gap: 40px; }
  .hero-title { font-size: 46px; }
  .hero-stats-bar { grid-template-columns: 1fr 1fr; gap: 20px; }
  .stat-divider { display: none; }
}

@media (max-width: 768px) {
  .hero-title { font-size: 36px; }
  .hero-tagline { font-size: 18px; }
  .real-gallery-grid { grid-template-columns: 1fr; }
  .spaces-gallery-grid { grid-template-columns: 1fr; }
  .space-item-large { grid-column: span 1; }
  .patterns-grid { grid-template-columns: 1fr; }
  .amenities-grid-10 { grid-template-columns: repeat(2, 1fr); }
  .floorplan-tabs { grid-template-columns: 1fr; }
  .footer-nav-side { grid-template-columns: 1fr; }
  .footer-bottom-bar { flex-direction: column; gap: 12px; text-align: center; }
  .cinema-big-play-btn { width: 68px; height: 68px; }
  .lightbox-nav-btn { width: 42px; height: 42px; }
}

/* MOBILE DRAWER OPEN */
.mobile-menu-drawer.open {
  display: block;
  position: absolute;
  top: var(--header-height);
  left: 0;
  right: 0;
  background: rgba(18, 17, 16, 0.98);
  border-bottom: 1px solid var(--color-dark-border);
  padding: 30px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.8);
}
.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mobile-link {
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFFFFF;
}


/* ==============================================================================
   MULTI-PAGE ARCHITECTURAL EXTENSIONS (NAQSH 2026)
   Clean Executive Navigation, Subpage Hero, Interactive Chessboard & Catalog
   ============================================================================== */

/* Active Link in Nav */
.nav-link.active {
  color: var(--color-gold) !important;
  font-weight: 500;
}
.nav-link.active::after {
  width: 100% !important;
}
.mobile-link.active {
  color: var(--color-gold) !important;
  font-weight: 600;
}

/* Subpage Hero */
.subpage-hero {
  padding: 130px 20px 60px;
  background: radial-gradient(circle at 50% 20%, rgba(203, 162, 88, 0.08) 0%, rgba(20, 19, 18, 0.98) 70%), #141312;
  border-bottom: 1px solid var(--color-dark-border);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.subpage-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 100%;
  background: url('../vectors/naqsh-pattern-rosette.svg') repeat center;
  opacity: 0.03;
  pointer-events: none;
}
.breadcrumbs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 16px;
}
.breadcrumbs a {
  color: var(--color-latte);
  text-decoration: none;
  transition: color 0.2s;
}
.breadcrumbs a:hover {
  color: var(--color-gold);
}
.breadcrumbs .bc-sep {
  opacity: 0.4;
}
.breadcrumbs .bc-curr {
  color: #FFFFFF;
}
.subpage-title {
  font-family: var(--font-serif);
  font-size: 42px;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 1.2;
  margin-bottom: 14px;
}
.subpage-desc {
  max-width: 720px;
  margin: 0 auto;
  color: var(--color-text-dim);
  font-size: 15px;
  line-height: 1.7;
}

/* View Switcher */
.view-toggle-bar {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 40px auto 30px;
}
.btn-view-toggle {
  padding: 12px 28px;
  border: 1px solid var(--color-dark-border);
  background: var(--color-dark-card);
  color: var(--color-text-dim);
  font-size: 12px;
  font-family: var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 4px;
  transition: var(--transition-smooth);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn-view-toggle svg {
  stroke: currentColor;
}
.btn-view-toggle.active {
  border-color: var(--color-gold);
  color: #FFFFFF;
  background: rgba(203, 162, 88, 0.15);
  box-shadow: 0 4px 16px rgba(203, 162, 88, 0.12);
}
.btn-view-toggle:hover:not(.active) {
  border-color: rgba(203, 162, 88, 0.5);
  color: #FFFFFF;
}

/* Chessboard Section */
.chessboard-section {
  padding: 30px 20px 90px;
  max-width: var(--container-max);
  margin: 0 auto;
}
.chessboard-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
  padding: 18px 28px;
  background: var(--color-dark-card);
  border: 1px solid var(--color-dark-border);
  border-radius: 6px;
}
.legend-group {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--color-text-dim);
}
.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.2);
}
.dot-garden { background: #6398A7; }
.dot-grand { background: #CBA258; }
.dot-penthouse { background: #DAA53F; }
.dot-skyvilla { background: #E8D3A2; box-shadow: 0 0 6px rgba(232, 211, 162, 0.4); }
.dot-reserved { background: #353C42; }

/* Chessboard Building Grid */
.chessboard-facade {
  background: var(--color-dark-card);
  border: 1px solid var(--color-dark-border);
  border-radius: 8px;
  padding: 28px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
  position: relative;
}
.facade-header {
  display: grid;
  grid-template-columns: 110px repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 16px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-dark-border);
  padding-bottom: 12px;
}
.floor-row {
  display: grid;
  grid-template-columns: 110px repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 14px;
  align-items: stretch;
}
.floor-label-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--color-dark-border);
  border-radius: 6px;
  padding: 8px;
}
.floor-label-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}
.floor-label-num {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--color-gold);
  font-weight: 500;
}

/* Individual Unit Cell */
.unit-cell {
  background: rgba(20, 19, 18, 0.85);
  border: 1px solid var(--color-dark-border);
  border-radius: 6px;
  padding: 14px 16px;
  cursor: pointer;
  transition: var(--transition-smooth);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 94px;
  user-select: none;
}
.unit-cell:hover:not(.status-reserved) {
  border-color: var(--color-gold);
  background: rgba(203, 162, 88, 0.09);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(203, 162, 88, 0.16);
}
.unit-cell.selected {
  border-color: var(--color-gold-bright) !important;
  background: rgba(203, 162, 88, 0.16) !important;
  box-shadow: 0 0 24px rgba(203, 162, 88, 0.3) !important;
}
.unit-cell.status-reserved {
  opacity: 0.45;
  background: rgba(30, 32, 34, 0.5);
  cursor: not-allowed;
}

.unit-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.unit-no {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  color: #FFFFFF;
}
.unit-badge {
  font-size: 9px;
  padding: 3px 7px;
  border-radius: 3px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.badge-free {
  background: rgba(203, 162, 88, 0.2);
  color: var(--color-gold-bright);
}
.badge-reserved {
  background: rgba(64, 79, 94, 0.3);
  color: var(--color-silver);
}
.unit-info-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.unit-title-type {
  font-size: 11px;
  color: var(--color-text-dim);
  line-height: 1.3;
}
.unit-title-area {
  font-size: 14px;
  font-weight: 500;
  color: #FFFFFF;
  white-space: nowrap;
}

/* Selected Unit Detailed Drawer / Card */
.selected-residence-card {
  margin-top: 40px;
  background: var(--color-dark-card);
  border: 1px solid var(--color-dark-border-strong);
  border-radius: 8px;
  padding: 36px;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 40px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.plan-vector-box {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--color-dark-border);
  border-radius: 6px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.plan-vector-box img {
  max-height: 380px;
  width: 100%;
  object-fit: contain;
  transition: transform 0.2s;
}
.plan-vector-tools {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  gap: 8px;
}
.btn-vector-tool {
  background: rgba(20, 19, 18, 0.85);
  border: 1px solid var(--color-dark-border);
  color: var(--color-latte);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}
.btn-vector-tool:hover {
  border-color: var(--color-gold);
  color: #FFFFFF;
}

.plan-info-box {
  display: flex;
  flex-direction: column;
}
.plan-info-eyebrow {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 8px;
}
.plan-info-title {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 400;
  color: #FFFFFF;
  margin-bottom: 8px;
}
.plan-info-subtitle {
  font-size: 15px;
  color: var(--color-text-dim);
  margin-bottom: 24px;
}
.spec-mini-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-dark-border);
}
.spec-mini-item {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--color-dark-border);
  border-radius: 4px;
  padding: 10px;
}
.spec-mini-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}
.spec-mini-val {
  font-size: 14px;
  font-weight: 500;
  color: #FFFFFF;
}

.rooms-explication-list {
  list-style: none;
  margin-bottom: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
}
.rooms-explication-list li {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--color-text-dim);
  border-bottom: 1px dotted rgba(195, 170, 131, 0.2);
  padding-bottom: 4px;
}
.rooms-explication-list strong {
  color: #FFFFFF;
  font-weight: 500;
}
.panel-action-row {
  display: flex;
  gap: 16px;
  align-items: center;
}

/* Catalog View (Filters & Cards) */
.catalog-section {
  display: none;
  padding: 30px 20px 90px;
  max-width: var(--container-max);
  margin: 0 auto;
}
.catalog-section.active {
  display: block;
}
.chessboard-section.hidden {
  display: none;
}
.catalog-filter-bar {
  background: var(--color-dark-card);
  border: 1px solid var(--color-dark-border);
  border-radius: 6px;
  padding: 20px 28px;
  margin-bottom: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.filter-block {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.filter-lbl {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-right: 6px;
}
.filter-btn-chip {
  padding: 8px 16px;
  border: 1px solid var(--color-dark-border);
  background: rgba(255,255,255,0.02);
  color: var(--color-text-dim);
  font-size: 11px;
  border-radius: 4px;
  cursor: pointer;
  transition: var(--transition-smooth);
}
.filter-btn-chip:hover, .filter-btn-chip.active {
  border-color: var(--color-gold);
  color: #FFFFFF;
  background: rgba(203, 162, 88, 0.15);
}

.catalog-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.catalog-item-card {
  background: var(--color-dark-card);
  border: 1px solid var(--color-dark-border);
  border-radius: 8px;
  overflow: hidden;
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
}
.catalog-item-card:hover {
  border-color: var(--color-gold);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.6);
}
.catalog-card-header {
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-dark-border);
}
.catalog-card-title {
  font-family: var(--font-serif);
  font-size: 20px;
  color: #FFFFFF;
}
.catalog-card-badge {
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 3px;
  background: rgba(203, 162, 88, 0.15);
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.catalog-card-body {
  padding: 24px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 20px;
  align-items: center;
  flex: 1;
}
.catalog-card-plan {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--color-dark-border);
  border-radius: 6px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.catalog-card-plan img {
  max-height: 180px;
  object-fit: contain;
}
.catalog-card-specs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cat-spec-line {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--color-text-dim);
  border-bottom: 1px dotted rgba(195,170,131,0.2);
  padding-bottom: 3px;
}
.cat-spec-line strong {
  color: #FFFFFF;
  font-weight: 500;
}
.catalog-card-footer {
  padding: 18px 24px;
  border-top: 1px solid var(--color-dark-border);
  background: rgba(20, 19, 18, 0.5);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Deluxe Booking Form (for Contacts page and Homepage) */
.booking-form-deluxe {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.form-group-deluxe {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.form-group-deluxe label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-latte);
  margin-bottom: 8px;
  font-weight: 500;
}
.form-group-deluxe input,
.form-group-deluxe select {
  display: block;
  width: 100%;
  padding: 14px 18px;
  background: rgba(20, 19, 18, 0.85);
  border: 1px solid var(--color-dark-border);
  border-radius: 4px;
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 14px;
  outline: none;
  transition: var(--transition-smooth);
}
.form-group-deluxe input:focus,
.form-group-deluxe select:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 12px rgba(203, 162, 88, 0.25);
}

/* Contacts Page Layout */
.contacts-grid-wrap {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 40px;
  max-width: var(--container-max);
  margin: 40px auto 80px;
  padding: 0 20px;
}
.contacts-info-card {
  background: var(--color-dark-card);
  border: 1px solid var(--color-dark-border);
  border-radius: 8px;
  padding: 40px;
}
.contacts-info-item {
  margin-bottom: 30px;
}
.contacts-item-lbl {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 8px;
}
.contacts-item-val {
  font-size: 18px;
  color: #FFFFFF;
  line-height: 1.5;
}
.contacts-item-val a {
  color: #FFFFFF;
  text-decoration: none;
  transition: color 0.2s;
}
.contacts-item-val a:hover {
  color: var(--color-gold);
}
.contacts-item-sub {
  font-size: 13px;
  color: var(--color-text-dim);
  margin-top: 4px;
}

/* Teaser Card on Index */
.multi-teaser-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 50px 0;
}
.multi-teaser-card {
  background: var(--color-dark-card);
  border: 1px solid var(--color-dark-border);
  border-radius: 8px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: var(--transition-smooth);
}
.multi-teaser-card:hover {
  border-color: var(--color-gold);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.5);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .facade-header, .floor-row {
    grid-template-columns: 80px repeat(4, 1fr);
    gap: 8px;
  }
  .unit-cell { padding: 10px; min-height: 80px; }
  .unit-no { font-size: 13px; }
  .unit-title-area { font-size: 12px; }
  .selected-residence-card { grid-template-columns: 1fr; }
  .catalog-cards-grid { grid-template-columns: 1fr; }
  .contacts-grid-wrap { grid-template-columns: 1fr; }
  .multi-teaser-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .chessboard-facade {
    overflow-x: auto;
    padding: 16px;
  }
  .facade-header, .floor-row {
    min-width: 600px;
  }
  .catalog-card-body {
    grid-template-columns: 1fr;
  }
  .subpage-title {
    font-size: 30px;
  }
  .rooms-explication-list {
    grid-template-columns: 1fr;
  }
}


/* ==============================================================================
   OVERRIDE FIXES (v7)
   ============================================================================== */
.hero-stats-bar {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr !important;
  align-items: center !important;
  width: 100% !important;
}

.booking-form-deluxe {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 100% !important;
}

.form-group-deluxe {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  margin-bottom: 0 !important;
}

.form-group-deluxe label {
  display: block !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--color-latte) !important;
  margin-bottom: 8px !important;
  font-weight: 500 !important;
}

.form-group-deluxe input,
.form-group-deluxe select {
  display: block !important;
  width: 100% !important;
  padding: 14px 18px !important;
  background: rgba(20, 19, 18, 0.9) !important;
  border: 1px solid var(--color-dark-border) !important;
  border-radius: 4px !important;
  color: #FFFFFF !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.form-group-deluxe input:focus,
.form-group-deluxe select:focus {
  border-color: var(--color-gold) !important;
  box-shadow: 0 0 12px rgba(203, 162, 88, 0.25) !important;
}


/* ==============================================================================
   NAQSH RESIDENCE · COMFORT-CLASS EDITORIAL TYPOGRAPHY & SPACING (v8)
   Zero cramped text · Generous breathing room · Complete class styling
   ============================================================================== */

/* Base Typography Refinements */
body.theme-dark-editorial,
body {
  line-height: 1.82 !important;
  letter-spacing: 0.012em !important;
  color: #DDD8CF !important;
  background-color: #141312 !important;
}

p {
  line-height: 1.82 !important;
  margin-bottom: 22px !important;
}

/* Shared Section Containers with Generous Gutters */
.editorial-container,
.residences-container,
.amenities-container,
.patterns-container,
.cinema-container,
.gallery-container,
.brandbook-container,
.contact-container,
.footer-container {
  width: 100% !important;
  max-width: 1260px !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
  box-sizing: border-box !important;
}

/* Generous Section Paddings (Breathing Room) */
.editorial-section {
  padding: 100px 0 !important;
  background: #171513 !important;
  border-top: 1px solid var(--color-dark-border) !important;
}

.residences-section {
  padding: 100px 0 !important;
  background: #141312 !important;
  border-top: 1px solid var(--color-dark-border) !important;
}

.amenities-section {
  padding: 100px 0 !important;
  background: #171513 !important;
  border-top: 1px solid var(--color-dark-border) !important;
}

.patterns-section {
  padding: 100px 0 !important;
  background: #141312 !important;
  border-top: 1px solid var(--color-dark-border) !important;
}

.cinema-section {
  padding: 100px 0 !important;
  background: #11100F !important;
  border-top: 1px solid var(--color-dark-border) !important;
}

.gallery-section {
  padding: 90px 0 110px !important;
  background: #141312 !important;
  border-top: 1px solid var(--color-dark-border) !important;
}

.cta-booking-section {
  padding: 100px 0 !important;
  background: #171513 !important;
  border-top: 1px solid var(--color-dark-border) !important;
}

/* Hero Content Typography Spacing */
.hero-content {
  max-width: 860px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.hero-emblem-wrap {
  margin-bottom: 24px !important;
}

.hero-emblem {
  width: 58px !important;
  height: 58px !important;
  margin: 0 auto !important;
  filter: drop-shadow(0 4px 16px rgba(203, 162, 88, 0.4)) !important;
}

.hero-eyebrow {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase !important;
  color: var(--color-gold) !important;
  margin-bottom: 20px !important;
  display: inline-block !important;
}

.hero-title {
  font-family: var(--font-serif) !important;
  font-size: 58px !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  color: #FFFFFF !important;
  line-height: 1.15 !important;
  margin-bottom: 20px !important;
}

.hero-tagline {
  font-family: var(--font-serif) !important;
  font-size: 22px !important;
  font-style: italic !important;
  color: var(--color-gold-bright) !important;
  margin-bottom: 26px !important;
  letter-spacing: 0.03em !important;
}

.hero-lead {
  font-size: 16px !important;
  line-height: 1.85 !important;
  color: #E2DDD5 !important;
  max-width: 760px !important;
  margin: 0 auto 40px !important;
}

.hero-cta-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 22px !important;
  margin-bottom: 50px !important;
}

.hero-stats-bar {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 30px 44px !important;
  background: rgba(22, 20, 18, 0.88) !important;
  backdrop-filter: blur(14px) !important;
  border: 1px solid var(--color-dark-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
}

.stat-item {
  text-align: center !important;
}

.stat-val {
  font-family: var(--font-serif) !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  color: #FFFFFF !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 8px !important;
}

.stat-lbl {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--color-latte) !important;
}

/* Subpage Hero */
.subpage-hero {
  padding: 140px 20px 70px !important;
  text-align: center !important;
  background: radial-gradient(circle at 50% 20%, rgba(203, 162, 88, 0.08) 0%, rgba(20, 19, 18, 0.98) 70%), #141312 !important;
  border-bottom: 1px solid var(--color-dark-border) !important;
}

.breadcrumbs {
  margin-bottom: 20px !important;
}

.subpage-title {
  font-family: var(--font-serif) !important;
  font-size: 44px !important;
  font-weight: 400 !important;
  color: #FFFFFF !important;
  line-height: 1.25 !important;
  margin-bottom: 18px !important;
  letter-spacing: 0.02em !important;
}

.subpage-desc {
  max-width: 760px !important;
  margin: 0 auto !important;
  color: #CCC6BA !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
}

/* Section Header Typography */
.section-header-center {
  text-align: center !important;
  max-width: 820px !important;
  margin: 0 auto 64px !important;
}

.section-eyebrow {
  display: inline-block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--color-gold) !important;
  margin-bottom: 18px !important;
}

.section-title-large {
  font-family: var(--font-serif) !important;
  font-size: 38px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: #FFFFFF !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 20px !important;
}

.section-subtitle-max {
  font-size: 16px !important;
  line-height: 1.8 !important;
  color: var(--color-text-muted) !important;
  max-width: 700px !important;
  margin: 0 auto !important;
}

/* Two-Column Editorial Storytelling */
.editorial-grid {
  display: grid !important;
  grid-template-columns: 1.05fr 0.95fr !important;
  gap: 70px !important;
  align-items: center !important;
  margin-bottom: 90px !important;
}

.editorial-grid:last-child {
  margin-bottom: 0 !important;
}

.editorial-text-col {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.editorial-title {
  font-family: var(--font-serif) !important;
  font-size: 34px !important;
  font-weight: 400 !important;
  line-height: 1.32 !important;
  color: #FFFFFF !important;
  letter-spacing: 0.015em !important;
  margin-bottom: 24px !important;
}

.editorial-lead {
  font-size: 17px !important;
  line-height: 1.82 !important;
  color: #EDE8DF !important;
  font-weight: 400 !important;
  margin-bottom: 20px !important;
}

.editorial-p {
  font-size: 15px !important;
  line-height: 1.82 !important;
  color: #BDB7AB !important;
  margin-bottom: 24px !important;
}

.editorial-quote {
  padding: 22px 28px !important;
  margin: 28px 0 !important;
  border-left: 3px solid var(--color-gold) !important;
  background: rgba(203, 162, 88, 0.06) !important;
  border-radius: 0 6px 6px 0 !important;
}

.editorial-quote p {
  font-family: var(--font-serif) !important;
  font-size: 17px !important;
  font-style: italic !important;
  line-height: 1.75 !important;
  color: var(--color-gold-bright) !important;
  margin-bottom: 0 !important;
}

/* Visual Column & Media Cards */
.editorial-visual-col {
  position: relative !important;
}

.visual-card-main {
  background: var(--color-dark-card) !important;
  border: 1px solid var(--color-dark-border) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
}

.editorial-img {
  width: 100% !important;
  height: 380px !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.visual-card-main:hover .editorial-img {
  transform: scale(1.025) !important;
}

.visual-caption {
  padding: 18px 24px !important;
  background: #1C1917 !important;
  border-top: 1px solid var(--color-dark-border) !important;
}

.caption-title {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #FFFFFF !important;
  margin-bottom: 6px !important;
}

.caption-sub {
  font-size: 12px !important;
  color: var(--color-latte) !important;
  line-height: 1.6 !important;
}

/* Teaser Grid & Cards (Index & Spaces) */
.multi-teaser-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 36px !important;
  margin: 50px 0 60px !important;
}

.multi-teaser-card {
  background: #1D1A17 !important;
  border: 1px solid var(--color-dark-border) !important;
  border-radius: 10px !important;
  padding: 0 0 32px 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.multi-teaser-card:hover {
  border-color: var(--color-gold) !important;
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5) !important;
}

.multi-teaser-card-img {
  width: 100% !important;
  height: 230px !important;
  object-fit: cover !important;
}

.multi-teaser-content {
  padding: 28px 28px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
}

.multi-teaser-eyebrow {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--color-gold) !important;
  margin-bottom: 12px !important;
}

.multi-teaser-title {
  font-family: var(--font-serif) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  color: #FFFFFF !important;
  margin-bottom: 14px !important;
}

.multi-teaser-desc {
  font-size: 14px !important;
  line-height: 1.78 !important;
  color: #BDB7AB !important;
  margin-bottom: 24px !important;
  flex-grow: 1 !important;
}

.multi-teaser-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 13px 20px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border: 1px solid var(--color-dark-border) !important;
  border-radius: 4px !important;
  color: #FFFFFF !important;
  background: rgba(20, 19, 18, 0.6) !important;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
}

.multi-teaser-btn:hover {
  border-color: var(--color-gold) !important;
  background: rgba(203, 162, 88, 0.15) !important;
  color: var(--color-gold-bright) !important;
}

/* Amenities Grid & Cards */
.amenities-grid-10 {
  display: grid !important;
  gap: 28px !important;
  margin-top: 50px !important;
}

.amenity-card {
  background: #1E1B18 !important;
  border: 1px solid var(--color-dark-border) !important;
  border-radius: 8px !important;
  padding: 34px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  transition: all 0.3s ease !important;
}

.amenity-card:hover {
  border-color: rgba(203, 162, 88, 0.45) !important;
  transform: translateY(-4px) !important;
}

.amenity-icon-box {
  width: 44px !important;
  height: 44px !important;
  border-radius: 6px !important;
  background: rgba(203, 162, 88, 0.12) !important;
  border: 1px solid rgba(203, 162, 88, 0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 20px !important;
  color: var(--color-gold) !important;
}

.amenity-title {
  font-family: var(--font-serif) !important;
  font-size: 19px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  color: #FFFFFF !important;
  margin-bottom: 12px !important;
}

.amenity-desc {
  font-size: 14px !important;
  line-height: 1.75 !important;
  color: #AFA89C !important;
  margin-bottom: 0 !important;
}

/* Panjara Patterns Section (About Page) */
.patterns-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 28px !important;
  margin-top: 50px !important;
}

.pattern-card {
  background: #1D1A17 !important;
  border: 1px solid var(--color-dark-border) !important;
  border-radius: 8px !important;
  padding: 30px 24px !important;
  display: flex !important;
  flex-direction: column !important;
}

.pattern-preview-box {
  height: 120px !important;
  background: #141312 !important;
  border: 1px dashed var(--color-dark-border) !important;
  border-radius: 6px !important;
  margin-bottom: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.pattern-title {
  font-family: var(--font-serif) !important;
  font-size: 18px !important;
  color: #FFFFFF !important;
  margin-bottom: 8px !important;
}

.pattern-time {
  font-size: 11px !important;
  color: var(--color-gold) !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin-bottom: 14px !important;
}

/* Brandbook Banner Block */
.brandbook-banner {
  margin: 70px auto 0 !important;
  max-width: 1260px !important;
  padding: 48px 56px !important;
  background: radial-gradient(circle at 80% 50%, rgba(203, 162, 88, 0.14) 0%, rgba(26, 23, 21, 0.98) 70%), #1B1816 !important;
  border: 1px solid var(--color-dark-border-strong) !important;
  border-radius: 10px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 40px !important;
}

.bb-left {
  max-width: 680px !important;
}

.bb-right {
  flex-shrink: 0 !important;
}

.bb-eyebrow {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--color-gold) !important;
  margin-bottom: 14px !important;
}

.bb-left h3 {
  font-family: var(--font-serif) !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  color: #FFFFFF !important;
  margin-bottom: 14px !important;
  line-height: 1.3 !important;
}

.bb-desc {
  font-size: 15px !important;
  line-height: 1.78 !important;
  color: #CCC6BA !important;
  margin-bottom: 20px !important;
}

.bb-spec-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.bb-pill {
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  color: var(--color-latte) !important;
  background: rgba(203, 162, 88, 0.1) !important;
  padding: 6px 14px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(203, 162, 88, 0.2) !important;
}

/* Contacts Layout & Details */
.contacts-grid-wrap {
  display: grid !important;
  grid-template-columns: 1fr 1.08fr !important;
  gap: 48px !important;
  max-width: 1260px !important;
  margin: 60px auto 100px !important;
  padding: 0 32px !important;
}

.contacts-info-card {
  background: #1C1917 !important;
  border: 1px solid var(--color-dark-border) !important;
  border-radius: 10px !important;
  padding: 48px 42px !important;
}

.contacts-info-item {
  margin-bottom: 34px !important;
}

.contacts-info-item:last-child {
  margin-bottom: 0 !important;
}

.contacts-item-lbl {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--color-gold) !important;
  margin-bottom: 10px !important;
}

.contacts-item-val {
  font-family: var(--font-serif) !important;
  font-size: 22px !important;
  color: #FFFFFF !important;
  line-height: 1.35 !important;
  margin-bottom: 8px !important;
}

.contacts-item-val a {
  color: #FFFFFF !important;
  text-decoration: none !important;
}

.contacts-item-val a:hover {
  color: var(--color-gold) !important;
}

.contacts-item-sub {
  font-size: 13px !important;
  line-height: 1.75 !important;
  color: #A9A296 !important;
}

/* Contact CTA Block on Main Page */
.contact-grid {
  display: grid !important;
  grid-template-columns: 1.1fr 0.9fr !important;
  gap: 60px !important;
  align-items: center !important;
}

.c-info-left {
  display: flex !important;
  flex-direction: column !important;
}

.contact-title {
  font-family: var(--font-serif) !important;
  font-size: 36px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: #FFFFFF !important;
  margin-bottom: 20px !important;
}

.contact-desc {
  font-size: 15px !important;
  line-height: 1.8 !important;
  color: #CCC6BA !important;
  margin-bottom: 32px !important;
}

.contact-specs-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  margin-bottom: 32px !important;
}

.c-spec-row {
  display: flex !important;
  justify-content: space-between !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid rgba(195, 170, 131, 0.15) !important;
  font-size: 14px !important;
}

.c-spec-k {
  color: var(--color-latte) !important;
}

.c-spec-v {
  color: #FFFFFF !important;
  font-weight: 500 !important;
}

.form-card-title {
  font-family: var(--font-serif) !important;
  font-size: 24px !important;
  color: #FFFFFF !important;
  margin-bottom: 18px !important;
}

.form-privacy-note {
  font-size: 12px !important;
  color: #8C867C !important;
  line-height: 1.6 !important;
  text-align: center !important;
  margin-top: 16px !important;
  margin-bottom: 0 !important;
}

/* Cinema & Video Theater */
.cinema-theater-box {
  background: #11100F !important;
  border: 1px solid var(--color-dark-border) !important;
  border-radius: 10px !important;
  padding: 24px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
}

.video-frame-wrapper {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  background: #0A0908 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

.cinema-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.video-play-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(14, 13, 12, 0.5) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: opacity 0.3s ease !important;
}

.cinema-big-play-btn {
  width: 74px !important;
  height: 74px !important;
  border-radius: 50% !important;
  background: var(--color-gold) !important;
  color: #141312 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  box-shadow: 0 8px 24px rgba(203, 162, 88, 0.4) !important;
}

.cinema-big-play-btn:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 12px 32px rgba(203, 162, 88, 0.6) !important;
}

.overlay-video-title {
  font-family: var(--font-serif) !important;
  font-size: 22px !important;
  color: #FFFFFF !important;
  margin-top: 18px !important;
  margin-bottom: 8px !important;
}

.overlay-video-meta {
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
  color: var(--color-latte) !important;
  text-transform: uppercase !important;
}

.cinema-badge-4k,
.cinema-badge-len {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  color: var(--color-gold) !important;
  background: rgba(203, 162, 88, 0.12) !important;
  border: 1px solid rgba(203, 162, 88, 0.3) !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  margin-right: 8px !important;
}

.cinema-desc-short {
  font-size: 13px !important;
  color: #A39D94 !important;
  letter-spacing: 0.04em !important;
}

.btn-sound-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #DDD8CF !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--color-dark-border) !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.btn-sound-toggle:hover {
  border-color: var(--color-gold) !important;
  color: #FFFFFF !important;
}

.btn-cinema-download {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 22px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--color-gold-bright) !important;
  background: rgba(203, 162, 88, 0.12) !important;
  border: 1px solid var(--color-gold) !important;
  border-radius: 4px !important;
  transition: all 0.25s ease !important;
}

.btn-cinema-download:hover {
  background: var(--color-gold) !important;
  color: #141312 !important;
}

/* Gallery & Lightbox */
.real-gallery-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 32px !important;
  margin-top: 40px !important;
}

.real-gallery-card {
  background: #1A1715 !important;
  border: 1px solid var(--color-dark-border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.real-gallery-card:hover {
  border-color: var(--color-gold) !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5) !important;
}

.real-card-img-wrap {
  position: relative !important;
  width: 100% !important;
  height: 260px !important;
  overflow: hidden !important;
}

.real-card-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.5s ease !important;
}

.real-gallery-card:hover .real-card-img-wrap img {
  transform: scale(1.05) !important;
}

.real-card-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(20, 19, 18, 0.35) !important;
  opacity: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: opacity 0.3s ease !important;
}

.real-gallery-card:hover .real-card-overlay {
  opacity: 1 !important;
}

.real-card-zoom-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(203, 162, 88, 0.9) !important;
  color: #141312 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.real-card-meta {
  padding: 20px 22px !important;
  background: #181614 !important;
  border-top: 1px solid var(--color-dark-border) !important;
}

.real-card-tag {
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--color-gold) !important;
  margin-bottom: 6px !important;
}

.real-card-title {
  font-family: var(--font-serif) !important;
  font-size: 17px !important;
  color: #FFFFFF !important;
  line-height: 1.35 !important;
  margin-bottom: 6px !important;
}

.real-card-sub {
  font-size: 12px !important;
  color: #A39D94 !important;
}

/* Lightbox Modal */
.gallery-lightbox {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(10, 9, 8, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  z-index: 10000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.gallery-lightbox.open {
  opacity: 1 !important;
  visibility: visible !important;
}

.lightbox-content {
  position: relative !important;
  width: 94% !important;
  max-width: 1360px !important;
  background: #141312 !important;
  border: 1px solid var(--color-dark-border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8) !important;
}

.lightbox-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.btn-lightbox-download {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--color-gold-bright) !important;
  background: rgba(203, 162, 88, 0.12) !important;
  border: 1px solid var(--color-gold) !important;
  border-radius: 4px !important;
  transition: all 0.25s ease !important;
}

.btn-lightbox-download:hover {
  background: var(--color-gold) !important;
  color: #141312 !important;
}

/* Mobile Contact Block */
.mobile-contact-block {
  margin-top: 24px !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--color-dark-border) !important;
}

.mobile-phone-link {
  color: var(--color-gold) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  display: block !important;
}

/* Site Footer Luxury Refinement */
.site-footer {
  padding: 80px 0 40px !important;
  background: #100F0E !important;
  border-top: 1px solid var(--color-dark-border) !important;
}

.footer-layout {
  display: grid !important;
  grid-template-columns: 1.3fr 2fr !important;
  gap: 60px !important;
  margin-bottom: 60px !important;
}

.footer-brand-side {
  max-width: 440px !important;
}

.footer-logo-row {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 20px !important;
}

.footer-logo-icon {
  width: 32px !important;
  height: 32px !important;
}

.footer-logo-title {
  font-family: var(--font-serif) !important;
  font-size: 20px !important;
  letter-spacing: 0.14em !important;
  color: #FFFFFF !important;
}

.footer-brand-desc {
  font-size: 14px !important;
  line-height: 1.8 !important;
  color: #A39D94 !important;
  margin-bottom: 24px !important;
}

.footer-meta-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.f-tag {
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  color: var(--color-latte) !important;
  background: rgba(203, 162, 88, 0.08) !important;
  padding: 5px 12px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(203, 162, 88, 0.18) !important;
}

.footer-nav-side {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 40px !important;
}

.footer-nav-col {
  display: flex !important;
  flex-direction: column !important;
}

.f-nav-title {
  font-family: var(--font-serif) !important;
  font-size: 16px !important;
  letter-spacing: 0.08em !important;
  color: #FFFFFF !important;
  margin-bottom: 22px !important;
}

.f-nav-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.f-nav-list a {
  font-size: 14px !important;
  color: #A39D94 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.f-nav-list a:hover {
  color: var(--color-gold) !important;
}

.f-contact-line {
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: #A39D94 !important;
  margin-bottom: 12px !important;
}

.footer-bottom-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-top: 32px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  font-size: 12px !important;
  color: #7A746B !important;
}

.f-copy {
  color: #7A746B !important;
}

.f-brandbook-link {
  color: var(--color-gold) !important;
  text-decoration: none !important;
}

.f-brandbook-link:hover {
  text-decoration: underline !important;
}

/* Modal Styling */
.modal-form {
  padding: 36px !important;
}

.modal-emblem {
  width: 48px !important;
  height: 48px !important;
  margin: 0 auto 16px !important;
}

.modal-confidential {
  font-size: 12px !important;
  color: #8C867C !important;
  line-height: 1.6 !important;
  text-align: center !important;
  margin-top: 14px !important;
}

/* Responsive adjustments for comfortable breathing room */
@media (max-width: 1024px) {
  .editorial-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .multi-teaser-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
  .contacts-grid-wrap {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .footer-layout {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .patterns-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .brandbook-banner {
    flex-direction: column !important;
    padding: 36px 28px !important;
    text-align: center !important;
  }
  .hero-stats-bar {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    padding: 24px 20px !important;
  }
  .stat-divider {
    display: none !important;
  }
}


/* ==============================================================================
   NAQSH RESIDENCE · OFFICIAL MOBILE ADAPTATION & HIGH-CONTRAST LIGHT THEME (v12)
   - 100% Fluid Responsive: 320px, 375px, 393px (iPhone), 768px (iPad), Desktop
   - Zero horizontal overflow & scroll lock
   - Touch-friendly buttons (min 44px tap target)
   - Animated mobile hamburger drawer with call action
   - Multi-column grids elegantly collapsed to 1-2 columns
   - High-contrast burnished bronze & deep obsidian typography
   ============================================================================== */

:root {
  --color-latte: #7C5314;
  --color-gold: #7C5314;
  --color-gold-bright: #63420F;
  --color-dark-obsidian: #FAF8F5;
  --color-dark-espresso: #F4F0E8;
  --color-dark-card: #FFFFFF;
  --color-dark-border: #D9D0C1;
  --color-dark-border-strong: #C7BDAA;
  --color-text-main: #11100F;
  --color-text-dim: #24201C;
  --color-text-muted: #4A443E;
}

/* Global Reset & Horizontal Overflow Prevention */
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
  background-color: #FAF8F5 !important;
  color: #24201C !important;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

body.drawer-open {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
}

p {
  color: #2A2622 !important;
}

img, video, svg {
  max-width: 100% !important;
  height: auto;
}

/* ==============================================================================
   1. NAVIGATION HEADER & MOBILE DRAWER
   ============================================================================== */
.header-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--header-height) !important;
  z-index: 1000 !important;
  background: rgba(250, 248, 245, 0.96) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1.5px solid #D9D0C1 !important;
  box-shadow: 0 4px 20px rgba(50, 40, 30, 0.06) !important;
}

.nav-container {
  max-width: var(--container-max) !important;
  height: 100% !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  box-sizing: border-box !important;
}

.brand-logo-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}

.brand-logo-text {
  color: #11100F !important;
  font-family: var(--font-serif) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  white-space: nowrap !important;
}

.brand-logo-icon {
  width: 32px !important;
  height: 32px !important;
  filter: brightness(0.65) contrast(1.25) drop-shadow(0 2px 6px rgba(110, 73, 9, 0.35)) !important;
}

.desktop-nav .nav-link {
  color: #24201C !important;
  font-weight: 500 !important;
}

.desktop-nav .nav-link:hover,
.desktop-nav .nav-link.active {
  color: #7C5314 !important;
}

.desktop-nav .nav-link.active::after {
  background: #7C5314 !important;
  height: 2px !important;
}

.nav-phone {
  color: #11100F !important;
  font-weight: 600 !important;
}

.nav-phone:hover {
  color: #7C5314 !important;
}

.btn-concierge-outline {
  border: 1.5px solid #7C5314 !important;
  color: #6E4909 !important;
  background: transparent !important;
  font-weight: 600 !important;
}

.btn-concierge-outline:hover {
  background: #7C5314 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 16px rgba(124, 83, 20, 0.3) !important;
}

.btn-concierge-solid {
  background: linear-gradient(135deg, #B88A36 0%, #8A6016 100%) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 16px rgba(124, 83, 20, 0.28) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.btn-concierge-solid:hover {
  background: linear-gradient(135deg, #A67828 0%, #76500F 100%) !important;
  box-shadow: 0 6px 22px rgba(124, 83, 20, 0.4) !important;
  color: #FFFFFF !important;
}

/* Mobile Hamburger Toggle */
.mobile-menu-toggle {
  display: none;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  width: 44px !important;
  height: 44px !important;
  padding: 8px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  z-index: 1100 !important;
  -webkit-tap-highlight-color: transparent !important;
}

.mobile-menu-toggle span {
  display: block !important;
  width: 24px !important;
  height: 2px !important;
  background: #11100F !important;
  border-radius: 2px !important;
  transition: transform 0.3s ease, opacity 0.3s ease !important;
}

.mobile-menu-toggle.active span:first-child {
  transform: translateY(4px) rotate(45deg) !important;
}

.mobile-menu-toggle.active span:last-child {
  transform: translateY(-4px) rotate(-45deg) !important;
}

/* Mobile Drawer */
.mobile-menu-drawer {
  display: none;
  position: fixed !important;
  top: var(--header-height) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: calc(100vh - var(--header-height)) !important;
  height: calc(100dvh - var(--header-height)) !important;
  background: #FAF8F5 !important;
  padding: 24px 20px 36px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  z-index: 1050 !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12) !important;
  box-sizing: border-box !important;
}

.mobile-menu-drawer.open {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  animation: fadeInDown 0.25s ease-out !important;
}

body.drawer-open {
  overflow: hidden !important;
  touch-action: none !important;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.mobile-nav-links {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.mobile-link {
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #11100F !important;
  padding: 10px 0 !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(217, 208, 193, 0.4) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.mobile-link.active {
  color: #7C5314 !important;
  font-weight: 700 !important;
  border-bottom-color: #7C5314 !important;
}

.mobile-contact-block {
  margin-top: 24px !important;
  padding-top: 20px !important;
  border-top: 1.5px solid #D9D0C1 !important;
}

.mobile-phone-link {
  color: #11100F !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: block !important;
  margin-bottom: 14px !important;
}

/* ==============================================================================
   2. HERO SECTION
   ============================================================================== */
.hero-section {
  position: relative !important;
  min-height: 100vh !important;
  min-height: 100svh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding-top: var(--header-height) !important;
  padding-bottom: 30px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.hero-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  overflow: hidden !important;
}

.hero-bg-video,
.hero-bg-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: none !important;
}

.hero-overlay {
  display: none !important;
}

.hero-container {
  position: relative !important;
  z-index: 5 !important;
  width: 100% !important;
  max-width: var(--container-max) !important;
  margin: 0 auto !important;
  padding: 20px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 28px !important;
  min-height: calc(100vh - var(--header-height)) !important;
  box-sizing: border-box !important;
}

.hero-content {
  text-align: center !important;
  max-width: 860px !important;
  width: 100% !important;
  margin: 0 auto !important;
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1.5px solid #D9D0C1 !important;
  border-radius: 8px !important;
  box-shadow: 0 16px 48px rgba(30, 24, 16, 0.12) !important;
  padding: 38px 46px 34px !important;
  box-sizing: border-box !important;
}

.hero-emblem-wrap {
  width: 62px !important;
  height: 62px !important;
  margin: 0 auto 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #FDFBF7 !important;
  border: 1.5px solid #D6C3A5 !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 16px rgba(110, 73, 9, 0.15) !important;
  padding: 10px !important;
}

.hero-emblem-wrap::before {
  display: none !important;
}

.hero-emblem {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: brightness(1) contrast(1.1) drop-shadow(0 2px 8px rgba(184, 138, 54, 0.35)) !important;
}

.hero-eyebrow {
  color: #6E4909 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
  text-shadow: none !important;
}

.hero-title {
  color: #11100F !important;
  font-family: var(--font-serif) !important;
  font-size: 58px !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  line-height: 1.15 !important;
  margin-bottom: 16px !important;
  text-shadow: none !important;
}

.hero-tagline {
  color: #5D3E08 !important;
  font-family: var(--font-serif) !important;
  font-size: 22px !important;
  font-style: italic !important;
  letter-spacing: 0.03em !important;
  margin-bottom: 22px !important;
  text-shadow: none !important;
}

.hero-lead {
  color: #1E1B18 !important;
  font-size: 16px !important;
  font-weight: 450 !important;
  line-height: 1.85 !important;
  max-width: 760px !important;
  margin: 0 auto 36px !important;
  text-shadow: none !important;
}

.hero-cta-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
}

.hero-cta-row a {
  box-sizing: border-box !important;
}

.hero-cta-row .btn-concierge-outline {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(8px) !important;
  border: 1.5px solid #7C5314 !important;
  color: #6E4909 !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 16px rgba(50, 40, 30, 0.1) !important;
  text-shadow: none !important;
}

.hero-cta-row .btn-concierge-outline:hover {
  background: #7C5314 !important;
  color: #FFFFFF !important;
}

/* Stats Bar */
.hero-stats-bar {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 24px 36px !important;
  background: #FFFFFF !important;
  backdrop-filter: blur(14px) !important;
  border: 1.5px solid #D9D0C1 !important;
  box-shadow: 0 16px 40px rgba(50, 40, 30, 0.08) !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}

.stat-item {
  text-align: center !important;
}

.stat-val {
  color: #11100F !important;
  font-family: var(--font-serif) !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

.stat-lbl {
  color: #6E4909 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  margin-top: 4px !important;
}

.stat-divider {
  width: 1px !important;
  height: 40px !important;
  background: #D9D0C1 !important;
}

/* ==============================================================================
   3. SUBPAGE HERO
   ============================================================================== */
.subpage-hero {
  background: radial-gradient(circle at 50% 20%, rgba(184, 138, 54, 0.12) 0%, #F5F1E9 70%), #FAF8F5 !important;
  border-bottom: 1.5px solid #D9D0C1 !important;
  padding: calc(var(--header-height) + 36px) 24px 50px !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.breadcrumbs {
  margin-bottom: 18px !important;
  font-size: 12px !important;
}

.breadcrumbs a {
  color: #6E4909 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.breadcrumbs .bc-sep {
  margin: 0 8px !important;
  color: #8C867C !important;
}

.breadcrumbs .bc-curr {
  color: #11100F !important;
  font-weight: 500 !important;
}

.subpage-title {
  color: #11100F !important;
  font-family: var(--font-serif) !important;
  font-size: 44px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
  margin-bottom: 16px !important;
  text-shadow: none !important;
}

.subpage-desc {
  color: #2E2A25 !important;
  font-size: 16px !important;
  font-weight: 450 !important;
  max-width: 780px !important;
  margin: 0 auto !important;
  line-height: 1.7 !important;
}

/* ==============================================================================
   4. SECTIONS & TYPOGRAPHY
   ============================================================================== */
.editorial-section,
.residences-section,
.amenities-section,
.gallery-section,
.cta-booking-section,
.patterns-section {
  box-sizing: border-box !important;
  width: 100% !important;
}

.editorial-section {
  background: #F4F0E8 !important;
  border-top: 1.5px solid #D9D0C1 !important;
  padding: 80px 0 !important;
}

.residences-section {
  background: #FAF8F5 !important;
  border-top: 1.5px solid #D9D0C1 !important;
  padding: 80px 0 !important;
}

.amenities-section {
  background: #F4F0E8 !important;
  border-top: 1.5px solid #D9D0C1 !important;
  padding: 80px 0 !important;
}

.gallery-section {
  background: #FAF8F5 !important;
  border-top: 1.5px solid #D9D0C1 !important;
  padding: 80px 0 !important;
}

.editorial-container,
.residences-container,
.amenities-container,
.gallery-container,
.contact-container,
.footer-container {
  max-width: var(--container-max) !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}

.section-header-center {
  text-align: center !important;
  max-width: 860px !important;
  margin: 0 auto 50px !important;
}

.section-eyebrow {
  color: #6E4909 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  margin-bottom: 14px !important;
  display: inline-block !important;
  text-shadow: none !important;
}

.section-title-large,
.editorial-title {
  color: #11100F !important;
  font-family: var(--font-serif) !important;
  font-size: 38px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  margin-bottom: 16px !important;
  letter-spacing: 0.02em !important;
  text-shadow: none !important;
}

.section-subtitle-max {
  color: #2E2A25 !important;
  font-size: 16px !important;
  font-weight: 450 !important;
  line-height: 1.75 !important;
  max-width: 740px !important;
  margin: 0 auto !important;
}

.editorial-grid {
  display: grid !important;
  grid-template-columns: 1.1fr 0.9fr !important;
  gap: 60px !important;
  align-items: center !important;
}

.editorial-lead {
  color: #1A1816 !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
  margin-bottom: 18px !important;
}

.editorial-p {
  color: #2E2A25 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.8 !important;
  margin-bottom: 22px !important;
}

.editorial-quote {
  border-left: 3.5px solid #7C5314 !important;
  background: rgba(184, 138, 54, 0.1) !important;
  padding: 16px 20px !important;
  margin: 24px 0 !important;
  border-radius: 0 4px 4px 0 !important;
}

.editorial-quote p {
  color: #5D3E08 !important;
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

.visual-card-main {
  background: #FFFFFF !important;
  border: 1.5px solid #D9D0C1 !important;
  box-shadow: 0 16px 36px rgba(50, 40, 30, 0.08) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

.visual-card-main img {
  width: 100% !important;
  display: block !important;
}

.visual-caption {
  background: #FFFFFF !important;
  border-top: 1.5px solid #D9D0C1 !important;
  padding: 16px 20px !important;
}

.caption-title {
  color: #11100F !important;
  font-weight: 500 !important;
  font-size: 15px !important;
}

.caption-sub {
  color: #6E4909 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  margin-top: 4px !important;
}

/* ==============================================================================
   5. CARDS, TEASERS & AMENITIES
   ============================================================================== */
.multi-teaser-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
}

.multi-teaser-card {
  background: #FFFFFF !important;
  border: 1.5px solid #D9D0C1 !important;
  box-shadow: 0 8px 24px rgba(50, 40, 30, 0.06) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: all 0.3s ease !important;
}

.multi-teaser-card:hover {
  border-color: #7C5314 !important;
  box-shadow: 0 16px 36px rgba(124, 83, 20, 0.18) !important;
  transform: translateY(-4px) !important;
}

.multi-teaser-card-img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
}

.multi-teaser-content {
  padding: 24px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
}

.multi-teaser-eyebrow {
  color: #6E4909 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

.multi-teaser-title {
  color: #11100F !important;
  font-family: var(--font-serif) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  margin-bottom: 10px !important;
  line-height: 1.3 !important;
}

.multi-teaser-desc {
  color: #332E28 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  margin-bottom: 20px !important;
  flex-grow: 1 !important;
}

.multi-teaser-btn {
  background: #FAF8F5 !important;
  border: 1.5px solid #D9D0C1 !important;
  color: #1E1B18 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 12px 18px !important;
  text-align: center !important;
  text-decoration: none !important;
  border-radius: 2px !important;
  transition: all 0.25s ease !important;
}

.multi-teaser-btn:hover {
  background: #7C5314 !important;
  color: #FFFFFF !important;
  border-color: #7C5314 !important;
}

/* Amenities Grid 10 Cards */
.amenities-grid-10 {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 20px !important;
}

.amenities-grid-10.materials-grid {
  grid-template-columns: repeat(4, 1fr) !important;
}

.amenity-card {
  background: #FFFFFF !important;
  border: 1.5px solid #D9D0C1 !important;
  box-shadow: 0 8px 24px rgba(50, 40, 30, 0.05) !important;
  border-radius: 6px !important;
  padding: 28px 18px !important;
  text-align: center !important;
  transition: all 0.3s ease !important;
}

.amenity-card:hover {
  border-color: #7C5314 !important;
  box-shadow: 0 16px 36px rgba(124, 83, 20, 0.16) !important;
  transform: translateY(-4px) !important;
}

.amenity-icon-box {
  width: 58px !important;
  height: 58px !important;
  background: #F5EFE4 !important;
  border: 1.5px solid #D6C3A5 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 16px !important;
  box-shadow: 0 4px 12px rgba(110, 73, 9, 0.1) !important;
}

.amenity-icon-box img {
  width: 28px !important;
  height: 28px !important;
  filter: brightness(0.38) sepia(1) hue-rotate(5deg) saturate(4.2) drop-shadow(0 1px 2px rgba(0,0,0,0.15)) !important;
}

.amenity-title {
  color: #11100F !important;
  font-family: var(--font-serif) !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  margin-bottom: 8px !important;
  line-height: 1.3 !important;
}

.amenity-desc {
  color: #332E28 !important;
  font-weight: 450 !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

/* ==============================================================================
   6. GALLERY & CINEMA
   ============================================================================== */
.real-gallery-grid,
.teaser-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
}

.real-gallery-card {
  background: #FFFFFF !important;
  border: 1.5px solid #D9D0C1 !important;
  box-shadow: 0 8px 24px rgba(50, 40, 30, 0.06) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
}

.real-gallery-card:hover {
  border-color: #7C5314 !important;
  box-shadow: 0 16px 36px rgba(124, 83, 20, 0.18) !important;
}

.real-card-img-wrap {
  width: 100% !important;
  height: 260px !important;
  overflow: hidden !important;
  position: relative !important;
  background: #100E0D !important;
}

.real-card-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.5s ease !important;
}

.real-card-meta {
  background: #FFFFFF !important;
  border-top: 1.5px solid #D9D0C1 !important;
  padding: 18px 20px !important;
}

.real-card-tag {
  color: #6E4909 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}

.real-card-title {
  color: #11100F !important;
  font-family: var(--font-serif) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}

/* Cinema Section */
.cinema-section {
  background: #F4F0E8 !important;
  border-top: 1.5px solid #D9D0C1 !important;
  padding: 80px 0 !important;
}

.cinema-theater-box {
  background: #141312 !important;
  border: 1.5px solid #2B2622 !important;
  border-radius: 8px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22) !important;
  padding: 14px !important;
  max-width: 1040px !important;
  margin: 0 auto !important;
}

.video-frame-wrapper {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  background: #000 !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}

.cinema-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.video-play-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(14, 13, 12, 0.55) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: opacity 0.3s ease !important;
}

.video-play-overlay.hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}

.cinema-big-play-btn {
  width: 76px !important;
  height: 76px !important;
  border-radius: 50% !important;
  background: #7C5314 !important;
  color: #FFFFFF !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
  margin-bottom: 14px !important;
  transition: transform 0.25s ease !important;
}

.cinema-big-play-btn:hover {
  transform: scale(1.08) !important;
}

.overlay-video-title {
  color: #FFFFFF !important;
  font-family: var(--font-serif) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  margin-bottom: 6px !important;
}

.overlay-video-meta {
  color: #D9D0C1 !important;
  font-size: 13px !important;
}

.cinema-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 14px 8px 4px !important;
}

.cinema-meta-title {
  color: #D9D0C1 !important;
  font-size: 13px !important;
}

.cinema-controls {
  display: flex !important;
  gap: 10px !important;
}

.cinema-ctrl-btn {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
  padding: 6px 14px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  cursor: pointer !important;
}

/* ==============================================================================
   7. CONTACT SECTION & BOOKING FORMS
   ============================================================================== */
.contact-section {
  background: #FAF8F5 !important;
  border-top: 1.5px solid #D9D0C1 !important;
  padding: 80px 0 100px !important;
}

.contact-card-editorial {
  background: #FFFFFF !important;
  border: 1.5px solid #D9D0C1 !important;
  border-radius: 8px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  box-shadow: 0 24px 60px rgba(50, 40, 30, 0.08) !important;
  overflow: hidden !important;
}

.contact-left {
  background: #F8F5EE !important;
  padding: 48px 42px !important;
  border-right: 1.5px solid #E8E2D8 !important;
  box-sizing: border-box !important;
}

.contact-right {
  background: #FFFFFF !important;
  padding: 48px 42px !important;
  box-sizing: border-box !important;
}

.contact-title {
  color: #11100F !important;
  font-family: var(--font-serif) !important;
  font-size: 30px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  margin-bottom: 16px !important;
}

.contact-desc {
  color: #2E2A25 !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  margin-bottom: 28px !important;
}

.contact-specs-list {
  margin-bottom: 28px !important;
}

.c-spec-row {
  border-bottom: 1px solid #E2DCD0 !important;
  padding: 14px 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.c-spec-k {
  color: #6E4909 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}

.c-spec-v, .c-spec-v a {
  color: #11100F !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  text-decoration: none !important;
}

.c-spec-v a:hover {
  color: #7C5314 !important;
}

.contact-left .btn-concierge-outline {
  background: #FFFFFF !important;
  border: 1.5px solid #7C5314 !important;
  color: #6E4909 !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(50, 40, 30, 0.05) !important;
  display: inline-block !important;
  text-align: center !important;
  text-decoration: none !important;
  padding: 14px 24px !important;
}

.contact-left .btn-concierge-outline:hover {
  background: #7C5314 !important;
  color: #FFFFFF !important;
}

.form-card-title {
  color: #11100F !important;
  font-family: var(--font-serif) !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  margin-bottom: 22px !important;
}

.booking-form-deluxe {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.form-group-deluxe {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

.form-group-deluxe label {
  color: #4A3614 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  margin-bottom: 8px !important;
  display: block !important;
}

.form-group-deluxe input,
.form-group-deluxe select {
  background: #FAF8F5 !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #11100F !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  padding: 14px 18px !important;
  border-radius: 4px !important;
  width: 100% !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: all 0.25s ease !important;
  font-family: var(--font-sans) !important;
}

.form-group-deluxe input:focus,
.form-group-deluxe select:focus {
  background: #FFFFFF !important;
  border-color: #7C5314 !important;
  box-shadow: 0 0 0 3px rgba(124, 83, 20, 0.2) !important;
}

.form-group-deluxe input::placeholder {
  color: #64748B !important;
  opacity: 1 !important;
}

.form-privacy-note {
  color: #524C45 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  margin-top: 14px !important;
}

/* Contacts Page Grid */
.contacts-grid-wrap {
  margin: 60px auto 100px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 32px !important;
  max-width: var(--container-max) !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}

.contacts-info-card {
  background: #FFFFFF !important;
  border: 1.5px solid #D9D0C1 !important;
  box-shadow: 0 16px 40px rgba(50, 40, 30, 0.06) !important;
  padding: 44px 38px !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}

.contacts-info-item {
  margin-bottom: 24px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid #E8E2D8 !important;
}

.contacts-info-item:last-child {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.contacts-item-lbl {
  color: #6E4909 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  margin-bottom: 6px !important;
}

.contacts-item-val,
.contacts-item-val a {
  color: #11100F !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  text-decoration: none !important;
}

.contacts-item-val a:hover {
  color: #7C5314 !important;
}

.contacts-item-sub {
  color: #2E2A25 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin-top: 4px !important;
}

/* ==============================================================================
   8. FOOTER
   ============================================================================== */
.site-footer {
  background: #EAE3D7 !important;
  border-top: 1.5px solid #D9D0C1 !important;
  padding: 70px 0 40px !important;
}

.footer-layout {
  display: flex !important;
  justify-content: space-between !important;
  gap: 60px !important;
}

.footer-brand-side {
  max-width: 440px !important;
}

.footer-logo-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}

.footer-logo-icon {
  width: 32px !important;
  height: 32px !important;
  filter: brightness(0.65) contrast(1.25) drop-shadow(0 2px 6px rgba(110, 73, 9, 0.35)) !important;
}

.footer-logo-title {
  color: #11100F !important;
  font-family: var(--font-serif) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
}

.footer-brand-desc {
  color: #2E2A25 !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  margin-bottom: 18px !important;
}

.footer-meta-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.f-tag {
  color: #5D3E08 !important;
  background: rgba(184, 138, 54, 0.14) !important;
  border: 1px solid rgba(184, 138, 54, 0.35) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
}

.footer-nav-side {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 40px !important;
  flex-grow: 1 !important;
}

.f-nav-title {
  color: #11100F !important;
  font-family: var(--font-serif) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  margin-bottom: 16px !important;
}

.f-nav-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.f-nav-list a {
  color: #2E2A25 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.f-nav-list a:hover {
  color: #7C5314 !important;
}

.f-contact-line {
  color: #24201C !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  margin-bottom: 8px !important;
}

.footer-bottom-bar {
  border-top: 1px solid #D6CCBE !important;
  margin-top: 50px !important;
  padding-top: 24px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.f-copy {
  color: #4A443E !important;
  font-size: 13px !important;
}

.f-brandbook-link a {
  color: #6E4909 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-decoration: none !important;
}

.f-brandbook-link a:hover {
  color: #11100F !important;
}

/* ==============================================================================
   9. MODAL BOOKING DIALOG
   ============================================================================== */
.modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(18, 16, 14, 0.72) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 2000 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  box-sizing: border-box !important;
}

.modal-overlay.open {
  display: flex !important;
}

.modal-box {
  background: #FFFFFF !important;
  border: 1.5px solid #D9D0C1 !important;
  border-radius: 8px !important;
  box-shadow: 0 28px 75px rgba(0, 0, 0, 0.28) !important;
  padding: 44px 38px !important;
  color: #11100F !important;
  width: 100% !important;
  max-width: 480px !important;
  position: relative !important;
  box-sizing: border-box !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
}

.modal-close {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  color: #2E2A25 !important;
  font-size: 24px !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}

.modal-close:hover {
  color: #7C5314 !important;
}

.modal-emblem {
  width: 44px !important;
  height: 44px !important;
  margin: 0 auto 14px !important;
}

.modal-emblem img {
  width: 100% !important;
  height: 100% !important;
  filter: brightness(0.65) contrast(1.25) drop-shadow(0 2px 6px rgba(110, 73, 9, 0.35)) !important;
}

.modal-title {
  color: #11100F !important;
  font-family: var(--font-serif) !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  margin-bottom: 10px !important;
  text-align: center !important;
  text-shadow: none !important;
}

.modal-desc {
  color: #2E2A25 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin-bottom: 24px !important;
  text-align: center !important;
}

.modal-form {
  padding: 0 !important;
}

.modal-form .form-group {
  margin-bottom: 18px !important;
}

.modal-form .form-group label {
  color: #4A3614 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  margin-bottom: 8px !important;
  display: block !important;
}

.modal-form .form-group input,
.modal-form .form-group select {
  background: #FAF8F5 !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #11100F !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  padding: 14px 18px !important;
  border-radius: 4px !important;
  width: 100% !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: all 0.25s ease !important;
  font-family: var(--font-sans) !important;
}

.modal-form .form-group input:focus,
.modal-form .form-group select:focus {
  background: #FFFFFF !important;
  border-color: #7C5314 !important;
  box-shadow: 0 0 0 3px rgba(124, 83, 20, 0.2) !important;
}

.modal-form .form-group input::placeholder {
  color: #64748B !important;
}

.modal-confidential {
  color: #524C45 !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  text-align: center !important;
  margin-top: 14px !important;
}

/* ==============================================================================
   10. RESPONSIVE MEDIA QUERIES (TABLETS & PHONES)
   ============================================================================== */

/* TABLETS (max-width: 1024px) */
@media (max-width: 1024px) {
  .amenities-grid-10 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* TABLETS / PHONES LANDSCAPE (max-width: 992px) */
@media (max-width: 992px) {
  :root {
    --header-height: 70px;
  }

  .desktop-nav {
    display: none !important;
  }

  .nav-actions {
    display: none !important;
  }

  .mobile-menu-toggle {
    display: flex !important;
  }

  .editorial-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  .multi-teaser-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .real-gallery-grid,
  .teaser-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
  }

  .amenities-grid-10.materials-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }

  .contact-card-editorial {
    grid-template-columns: 1fr !important;
  }

  .contact-left {
    border-right: none !important;
    border-bottom: 1.5px solid #E8E2D8 !important;
    padding: 36px 28px !important;
  }

  .contact-right {
    padding: 36px 28px !important;
  }

  .contacts-grid-wrap {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 0 20px !important;
  }

  .footer-layout {
    flex-direction: column !important;
    gap: 40px !important;
  }

  .footer-nav-side {
    grid-template-columns: 1fr 1fr !important;
    gap: 30px !important;
  }
}

/* SMARTPHONES (max-width: 768px) */
@media (max-width: 768px) {
  :root {
    --header-height: 64px;
  }

  .nav-container {
    padding: 0 16px !important;
  }

  .brand-logo-text {
    font-size: 15px !important;
    letter-spacing: 0.1em !important;
  }

  .brand-logo-icon {
    width: 28px !important;
    height: 28px !important;
  }

  /* Hero Section Mobile */
  .hero-section {
    min-height: 100svh !important;
    height: auto !important;
    padding-top: calc(var(--header-height) + 16px) !important;
    padding-bottom: 30px !important;
  }

  .hero-container {
    padding: 0 16px !important;
    min-height: auto !important;
    gap: 18px !important;
  }

  .hero-content {
    margin: 10px auto 20px !important;
    max-width: 100% !important;
    padding: 24px 16px !important;
  }

  .hero-emblem-wrap {
    width: 44px !important;
    height: 44px !important;
    margin-bottom: 12px !important;
  }

  .hero-eyebrow {
    font-size: 10px !important;
    letter-spacing: 0.22em !important;
    margin-bottom: 10px !important;
  }

  .hero-title {
    font-size: 32px !important;
    line-height: 1.18 !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 12px !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  .hero-tagline {
    font-size: 16px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.02em !important;
    margin-bottom: 16px !important;
  }

  .hero-lead {
    font-size: 14px !important;
    line-height: 1.65 !important;
    margin-bottom: 24px !important;
    padding: 0 4px !important;
  }

  .hero-cta-row {
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    align-items: stretch !important;
  }

  .hero-cta-row a {
    width: 100% !important;
    padding: 14px 18px !important;
    font-size: 12px !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Stats Bar Mobile */
  .hero-stats-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px 10px !important;
    padding: 18px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 24px !important;
    border-radius: 8px !important;
  }

  .stat-divider {
    display: none !important;
  }

  .stat-item {
    padding: 6px 4px !important;
    text-align: center !important;
  }

  .stat-item:last-child {
    grid-column: span 2 !important;
    border-top: 1px solid #E8E2D8 !important;
    padding-top: 10px !important;
  }

  .stat-val {
    font-size: 20px !important;
    line-height: 1.2 !important;
  }

  .stat-lbl {
    font-size: 9.5px !important;
    letter-spacing: 0.12em !important;
    margin-top: 3px !important;
  }

  /* Subpage Hero */
  .subpage-hero {
    padding: calc(var(--header-height) + 20px) 16px 36px !important;
  }

  .subpage-title {
    font-size: 28px !important;
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
  }

  .subpage-desc {
    font-size: 14px !important;
    line-height: 1.6 !important;
    padding: 0 !important;
  }

  /* Typography on Mobile */
  .section-title-large,
  .editorial-title {
    font-size: 26px !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
  }

  .section-subtitle-max {
    font-size: 14.5px !important;
    line-height: 1.65 !important;
    padding: 0 !important;
  }

  .section-header-center {
    margin-bottom: 36px !important;
  }

  .editorial-section,
  .residences-section,
  .amenities-section,
  .gallery-section,
  .cinema-section {
    padding: 50px 0 !important;
  }

  .editorial-container,
  .residences-container,
  .amenities-container,
  .gallery-container,
  .contact-container,
  .footer-container {
    padding: 0 16px !important;
  }

  .editorial-lead {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  .editorial-p {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  .visual-card-main img {
    height: 220px !important;
    object-fit: cover !important;
  }

  /* Gallery Grids */
  .real-gallery-grid,
  .teaser-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .real-card-img-wrap {
    height: 220px !important;
  }

  .real-card-meta {
    padding: 16px 16px !important;
  }

  .gallery-filter-bar {
    gap: 8px !important;
    margin: 20px 0 28px !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding: 4px 16px 10px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .gallery-filter-bar::-webkit-scrollbar {
    display: none !important;
  }

  .filter-btn {
    flex-shrink: 0 !important;
    padding: 8px 16px !important;
    font-size: 12px !important;
  }

  /* Amenities 10 Cards on Mobile */
  .amenities-grid-10 {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  .amenity-card {
    padding: 18px 12px !important;
  }

  .amenity-icon-box {
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 12px !important;
  }

  .amenity-icon-box img {
    width: 24px !important;
    height: 24px !important;
  }

  .amenity-title {
    font-size: 14.5px !important;
    margin-bottom: 6px !important;
  }

  .amenity-desc {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  /* Cinema on Mobile */
  .cinema-theater-box {
    padding: 8px !important;
  }

  .cinema-big-play-btn {
    width: 58px !important;
    height: 58px !important;
    margin-bottom: 10px !important;
  }

  .overlay-video-title {
    font-size: 16px !important;
  }

  .overlay-video-meta {
    font-size: 11px !important;
  }

  .cinema-bar {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: flex-start !important;
    padding: 12px 6px !important;
  }

  .cinema-controls {
    width: 100% !important;
    justify-content: space-between !important;
  }

  .cinema-ctrl-btn {
    padding: 6px 10px !important;
    font-size: 11px !important;
  }

  /* Contact Section & Form Mobile */
  .contact-section {
    padding: 50px 0 70px !important;
  }

  .contact-left,
  .contact-right {
    padding: 30px 18px !important;
  }

  .contact-title {
    font-size: 23px !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
  }

  .contact-desc {
    font-size: 14px !important;
    line-height: 1.65 !important;
    margin-bottom: 20px !important;
  }

  .c-spec-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    padding: 12px 0 !important;
  }

  .c-spec-k {
    font-size: 11px !important;
  }

  .c-spec-v, .c-spec-v a {
    font-size: 14.5px !important;
    word-break: break-word !important;
  }

  .contact-left .btn-concierge-outline {
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    padding: 14px !important;
  }

  .form-card-title {
    font-size: 21px !important;
    margin-bottom: 16px !important;
  }

  .form-group-deluxe input,
  .form-group-deluxe select {
    padding: 13px 14px !important;
    font-size: 14px !important;
  }

  .booking-form-deluxe button[type="submit"] {
    padding: 15px !important;
    font-size: 13px !important;
  }

  /* Contacts Page */
  .contacts-grid-wrap {
    margin: 30px auto 60px !important;
    padding: 0 16px !important;
  }

  .contacts-info-card {
    padding: 26px 18px !important;
  }

  .contacts-item-val,
  .contacts-item-val a {
    font-size: 16px !important;
  }

  /* Footer Mobile */
  .site-footer {
    padding: 44px 0 30px !important;
  }

  .footer-nav-side {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .footer-bottom-bar {
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center !important;
    margin-top: 36px !important;
    padding-top: 20px !important;
  }

  .f-copy {
    font-size: 12px !important;
  }

  /* Modal on Mobile */
  .modal-box {
    padding: 32px 20px !important;
    margin: 12px !important;
    border-radius: 6px !important;
  }

  .modal-title {
    font-size: 22px !important;
  }

  .modal-desc {
    font-size: 13px !important;
    margin-bottom: 18px !important;
  }

  .modal-form .form-group input,
  .modal-form .form-group select {
    padding: 13px 14px !important;
    font-size: 14px !important;
  }
}

/* VERY SMALL SCREENS (max-width: 360px) */
@media (max-width: 360px) {
  .hero-title {
    font-size: 28px !important;
  }

  .brand-logo-text {
    font-size: 13.5px !important;
  }

  .amenities-grid-10 {
    grid-template-columns: 1fr !important;
  }

  .hero-stats-bar {
    grid-template-columns: 1fr !important;
  }

  .hero-stats-bar .stat-item:last-child {
    grid-column: span 1 !important;
  }
}


/* ==============================================================================
   NAQSH RESIDENCE — V14 COMPLETE ARCHITECTURAL MASTER SYSTEM
   Fixes All Render Aspect Ratios, Restores Magazine Spread, Unifies All Pages
   ============================================================================== */

/* --- 1. UNIFIED NAVBAR (TRANSPARENT AT TOP -> FROSTED ON SCROLL) --- */
body.page-home .header-nav,
body.page-subpage .header-nav {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: none !important;
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease !important;
}

body.page-home .header-nav .brand-logo-text,
body.page-subpage .header-nav .brand-logo-text {
  color: #FFFFFF !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
}

body.page-home .header-nav .desktop-nav .nav-link,
body.page-subpage .header-nav .desktop-nav .nav-link {
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
}

body.page-home .header-nav .desktop-nav .nav-link:hover,
body.page-home .header-nav .desktop-nav .nav-link.active,
body.page-subpage .header-nav .desktop-nav .nav-link:hover,
body.page-subpage .header-nav .desktop-nav .nav-link.active {
  color: #E6BE75 !important;
  border-bottom-color: #E6BE75 !important;
}

body.page-home .header-nav .nav-phone,
body.page-subpage .header-nav .nav-phone {
  color: #FFFFFF !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
}

body.page-home .header-nav .nav-phone:hover,
body.page-subpage .header-nav .nav-phone:hover {
  color: #E6BE75 !important;
}

body.page-home .header-nav .btn-concierge-outline,
body.page-subpage .header-nav .btn-concierge-outline {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.6) !important;
  color: #FFFFFF !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

body.page-home .header-nav .btn-concierge-outline:hover,
body.page-subpage .header-nav .btn-concierge-outline:hover {
  background: #B88A36 !important;
  border-color: #B88A36 !important;
  color: #FFFFFF !important;
}

body.page-home .header-nav .mobile-menu-toggle span,
body.page-subpage .header-nav .mobile-menu-toggle span {
  background: #FFFFFF !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}

/* Scrolled Navbar (Dark Obsidian Text on Frosted Glass) */
.header-nav.scrolled,
body.page-home .header-nav.scrolled,
body.page-subpage .header-nav.scrolled {
  background: rgba(250, 248, 245, 0.95) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1.5px solid #D9D0C1 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}

.header-nav.scrolled .brand-logo-text,
body.page-home .header-nav.scrolled .brand-logo-text,
body.page-subpage .header-nav.scrolled .brand-logo-text {
  color: #11100F !important;
  text-shadow: none !important;
}

.header-nav.scrolled .desktop-nav .nav-link,
body.page-home .header-nav.scrolled .desktop-nav .nav-link,
body.page-subpage .header-nav.scrolled .desktop-nav .nav-link {
  color: #2E2A25 !important;
  text-shadow: none !important;
}

.header-nav.scrolled .desktop-nav .nav-link:hover,
.header-nav.scrolled .desktop-nav .nav-link.active,
body.page-home .header-nav.scrolled .desktop-nav .nav-link:hover,
body.page-home .header-nav.scrolled .desktop-nav .nav-link.active,
body.page-subpage .header-nav.scrolled .desktop-nav .nav-link:hover,
body.page-subpage .header-nav.scrolled .desktop-nav .nav-link.active {
  color: #7C5314 !important;
  border-bottom-color: #7C5314 !important;
}

.header-nav.scrolled .nav-phone,
body.page-home .header-nav.scrolled .nav-phone,
body.page-subpage .header-nav.scrolled .nav-phone {
  color: #11100F !important;
  text-shadow: none !important;
}

.header-nav.scrolled .nav-phone:hover,
body.page-home .header-nav.scrolled .nav-phone:hover,
body.page-subpage .header-nav.scrolled .nav-phone:hover {
  color: #7C5314 !important;
}

.header-nav.scrolled .btn-concierge-outline,
body.page-home .header-nav.scrolled .btn-concierge-outline,
body.page-subpage .header-nav.scrolled .btn-concierge-outline {
  background: transparent !important;
  border: 1.5px solid #7C5314 !important;
  color: #6E4909 !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
}

.header-nav.scrolled .btn-concierge-outline:hover,
body.page-home .header-nav.scrolled .btn-concierge-outline:hover,
body.page-subpage .header-nav.scrolled .btn-concierge-outline:hover {
  background: #7C5314 !important;
  color: #FFFFFF !important;
}

.header-nav.scrolled .mobile-menu-toggle span,
body.page-home .header-nav.scrolled .mobile-menu-toggle span,
body.page-subpage .header-nav.scrolled .mobile-menu-toggle span {
  background: #11100F !important;
  box-shadow: none !important;
}

/* --- 2. HOME HERO (EDGE-TO-EDGE 4K VIDEO, ZERO WHITE BOX, ZERO BLUR) --- */
.hero-section {
  position: relative !important;
  min-height: 100vh !important;
  min-height: 100svh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding-top: var(--header-height) !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.hero-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  overflow: hidden !important;
}

.hero-bg-video,
.hero-bg-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: none !important;
}

.hero-cinematic-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: 
    radial-gradient(ellipse at 25% 65%, rgba(14, 12, 11, 0.52) 0%, rgba(14, 12, 11, 0) 65%),
    linear-gradient(180deg, 
      rgba(14, 12, 11, 0.45) 0%, 
      rgba(14, 12, 11, 0.08) 25%, 
      rgba(14, 12, 11, 0.30) 65%, 
      rgba(14, 12, 11, 0.78) 100%
    ) !important;
  pointer-events: none !important;
}

.hero-container-cinematic {
  position: relative !important;
  z-index: 5 !important;
  width: 100% !important;
  max-width: var(--container-max) !important;
  margin: 0 auto !important;
  padding: 40px 32px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  flex-grow: 1 !important;
  box-sizing: border-box !important;
}

.hero-brand-block {
  max-width: 820px !important;
  margin-top: auto !important;
  margin-bottom: 40px !important;
  text-align: left !important;
}

/* Insignia Pill Capsule */
.hero-eyebrow-row {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 22px !important;
  padding: 8px 18px 8px 12px !important;
  background: rgba(14, 12, 11, 0.75) !important;
  border: 1px solid rgba(230, 190, 117, 0.45) !important;
  border-radius: 100px !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45) !important;
  width: fit-content !important;
}

.hero-emblem-inline {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 1px 4px rgba(230, 190, 117, 0.8)) !important;
  flex-shrink: 0 !important;
}

.hero-eyebrow-text {
  color: #FDF1D6 !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
  white-space: nowrap !important;
}

.hero-title-cinematic {
  font-family: var(--font-serif) !important;
  font-size: 78px !important;
  line-height: 0.98 !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  color: #FFFFFF !important;
  margin: 0 0 20px 0 !important;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.75), 0 2px 8px rgba(0, 0, 0, 0.85) !important;
}

.hero-tagline-cinematic {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-size: 24px !important;
  line-height: 1.35 !important;
  color: #F4EFE6 !important;
  max-width: 680px !important;
  margin-bottom: 34px !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.8) !important;
}

.hero-actions-cinematic {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.btn-hero-solid {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: linear-gradient(135deg, #C59844 0%, #9D7122 100%) !important;
  color: #FFFFFF !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 16px 30px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  box-shadow: 0 8px 24px rgba(157, 113, 34, 0.45) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease !important;
}

.btn-hero-solid:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(157, 113, 34, 0.6) !important;
  filter: brightness(1.08) !important;
}

.btn-hero-glass {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.6) !important;
  color: #FFFFFF !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 15px 28px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease !important;
}

.btn-hero-glass:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  border-color: #FFFFFF !important;
  transform: translateY(-2px) !important;
}

/* Docked Bottom Bar */
.hero-dock-bar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: rgba(250, 248, 245, 0.94) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(218, 165, 63, 0.45) !important;
  border-radius: 8px !important;
  padding: 16px 20px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(218, 165, 63, 0.15) !important;
  width: 100% !important;
  max-width: 1080px !important;
  margin: 36px auto 0 auto !important;
  box-sizing: border-box !important;
}

.hero-dock-item {
  flex: 1 1 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 0 8px !important;
}

.h-dock-val {
  font-family: var(--font-serif) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #1C1917 !important;
  letter-spacing: 0.03em !important;
  margin-bottom: 3px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.h-dock-lbl {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #6E6863 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.h-dock-sep {
  flex: 0 0 1px !important;
  width: 1px !important;
  height: 38px !important;
  background: rgba(195, 170, 131, 0.45) !important;
}

/* --- 3. SECTION 1: ARCHITECTURAL MANIFESTO (IMAGE CONTAINER FIX) --- */
.visual-card-main {
  background: #FFFFFF !important;
  border: 1.5px solid #E5DFD2 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.05) !important;
}

.visual-card-main .editorial-img {
  width: 100% !important;
  height: 420px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

.visual-caption {
  padding: 22px 24px !important;
  background: #FFFFFF !important;
  border-top: 1px solid #ECE6DB !important;
}

.visual-caption .caption-title {
  font-family: var(--font-serif) !important;
  font-size: 19px !important;
  color: #141211 !important;
  margin-bottom: 4px !important;
}

.visual-caption .caption-sub {
  font-size: 13px !important;
  color: #7C5314 !important;
  font-weight: 500 !important;
}

/* --- 4. SECTION 2: REAL GALLERY TEASER (FIX STRETCHED RENDERS) --- */
.real-gallery-section {
  padding: 80px 0 !important;
  background: var(--color-light-bg) !important;
}

.real-gallery-container {
  width: 100% !important;
  max-width: var(--container-max) !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}

.real-gallery-grid-teaser {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
  margin-top: 40px !important;
}

.real-gallery-grid-teaser .real-gallery-card {
  background: #FFFFFF !important;
  border: 1px solid #E5DFD2 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease !important;
  display: flex !important;
  flex-direction: column !important;
}

.real-gallery-grid-teaser .real-gallery-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.08) !important;
}

.real-gallery-grid-teaser .real-card-img-wrap {
  position: relative !important;
  width: 100% !important;
  height: 280px !important;
  overflow: hidden !important;
  background: #EBE5DB !important;
}

.real-gallery-grid-teaser .real-card-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  transition: transform 0.6s ease !important;
}

.real-gallery-grid-teaser .real-gallery-card:hover .real-card-img-wrap img {
  transform: scale(1.05) !important;
}

.real-gallery-grid-teaser .real-card-meta {
  padding: 24px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  background: #FFFFFF !important;
}

.real-gallery-grid-teaser .real-card-tag {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #7C5314 !important;
  margin-bottom: 8px !important;
}

.real-gallery-grid-teaser .real-card-title {
  font-family: var(--font-serif) !important;
  font-size: 20px !important;
  color: #141211 !important;
  line-height: 1.3 !important;
}

/* --- 5. SECTION 3: EDITORIAL MAGAZINE SPREAD (PRIVILEGES) --- */
.editorial-spread-section {
  background: #F5F1E8 !important;
  border-top: 1.5px solid #D9D0C1 !important;
  padding: 96px 0 !important;
  box-sizing: border-box !important;
}

.spread-header {
  text-align: left !important;
  max-width: 820px !important;
  margin-bottom: 56px !important;
}

.spread-showcase-grid {
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: 28px !important;
  margin-bottom: 48px !important;
}

.spread-feature-card {
  position: relative !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 1.5px solid #D9D0C1 !important;
  background: #FFFFFF !important;
  box-shadow: 0 12px 32px rgba(40, 30, 20, 0.06) !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}

.spread-feature-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 48px rgba(124, 83, 20, 0.14) !important;
}

/* Photo Cards (Park & Travertine) */
.card-park-large,
.card-travertine-large {
  min-height: 480px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
}

.spread-img-wrap {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  overflow: hidden !important;
}

.spread-bg-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  transition: transform 0.6s ease !important;
}

.spread-feature-card:hover .spread-bg-img {
  transform: scale(1.03) !important;
}

.spread-overlay-glass {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, 
    rgba(18, 16, 14, 0.08) 0%, 
    rgba(18, 16, 14, 0.45) 50%, 
    rgba(18, 16, 14, 0.90) 100%
  ) !important;
}

.spread-card-content {
  position: relative !important;
  z-index: 2 !important;
  padding: 36px 32px !important;
  color: #FFFFFF !important;
}

.spread-metric-badge {
  display: inline-block !important;
  font-family: var(--font-serif) !important;
  font-size: 32px !important;
  font-weight: 500 !important;
  color: #E6BE75 !important;
  margin-bottom: 12px !important;
  line-height: 1 !important;
}

.spread-card-eyebrow {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #E6BE75 !important;
  margin-bottom: 8px !important;
}

.spread-card-inner .spread-card-eyebrow {
  color: #7C5314 !important;
}

.spread-card-title {
  font-family: var(--font-serif) !important;
  font-size: 26px !important;
  line-height: 1.25 !important;
  margin-bottom: 12px !important;
  color: #FFFFFF !important;
}

.spread-card-inner .spread-card-title {
  color: #11100F !important;
}

.spread-card-text {
  font-size: 14.5px !important;
  line-height: 1.7 !important;
  color: #EFE9DE !important;
  margin-bottom: 20px !important;
}

.spread-card-inner .spread-card-text {
  color: #2E2A25 !important;
}

.spread-highlights {
  display: flex !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.sp-tag {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #FAF8F5 !important;
  letter-spacing: 0.05em !important;
}

/* Text Architectural Cards (Panjara & Parking) */
.spread-card-inner {
  padding: 44px 36px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

.spread-icon-ornament {
  width: 48px !important;
  height: 48px !important;
  margin-bottom: 24px !important;
}

.spread-icon-ornament img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.spread-spec-row {
  display: flex !important;
  gap: 32px !important;
  margin-top: 24px !important;
  padding-top: 20px !important;
  border-top: 1px solid #ECE6DB !important;
}

.sp-spec-col {
  display: flex !important;
  flex-direction: column !important;
}

.sp-val {
  font-family: var(--font-serif) !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  color: #7C5314 !important;
  line-height: 1 !important;
  margin-bottom: 4px !important;
}

.sp-lbl {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  color: #7A7265 !important;
}

.spread-metrics-ribbon {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr !important;
  align-items: center !important;
  background: #FFFFFF !important;
  border: 1.5px solid #D9D0C1 !important;
  border-radius: 6px !important;
  padding: 32px 28px !important;
  box-shadow: 0 12px 36px rgba(40, 30, 20, 0.04) !important;
}

.ribbon-col {
  text-align: center !important;
  padding: 0 12px !important;
}

.ribbon-number {
  display: block !important;
  font-family: var(--font-serif) !important;
  font-size: 32px !important;
  color: #7C5314 !important;
  font-weight: 500 !important;
  margin-bottom: 6px !important;
}

.ribbon-label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #11100F !important;
}

.ribbon-divider {
  width: 1px !important;
  height: 42px !important;
  background: #D9D0C1 !important;
}

/* --- 6. SUBPAGE CINEMATIC HERO (ABOUT, SPACES, GALLERY, CONTACTS) --- */
.subpage-hero-cinematic {
  position: relative !important;
  min-height: 520px !important;
  height: 64vh !important;
  max-height: 680px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding-top: var(--header-height) !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.subpage-hero-cinematic .hero-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  overflow: hidden !important;
}

.subpage-hero-cinematic .hero-bg-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transform: scale(1.02);
  transition: transform 10s cubic-bezier(0.16, 1, 0.3, 1);
}

.subpage-hero-cinematic:hover .hero-bg-img {
  transform: scale(1.06);
}

.subpage-hero-cinematic .hero-cinematic-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: 
    radial-gradient(ellipse at 25% 65%, rgba(14, 12, 11, 0.60) 0%, rgba(14, 12, 11, 0.15) 65%),
    linear-gradient(180deg, 
      rgba(14, 12, 11, 0.52) 0%, 
      rgba(14, 12, 11, 0.12) 25%, 
      rgba(14, 12, 11, 0.35) 60%, 
      rgba(14, 12, 11, 0.82) 100%
    ) !important;
  pointer-events: none !important;
}

.subpage-container-cinematic {
  position: relative !important;
  z-index: 5 !important;
  width: 100% !important;
  max-width: var(--container-max) !important;
  margin: 0 auto !important;
  padding: 30px 32px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  flex-grow: 1 !important;
  box-sizing: border-box !important;
}

.subpage-brand-block {
  max-width: 840px !important;
  margin-top: auto !important;
  margin-bottom: 24px !important;
  text-align: left !important;
}

.subpage-breadcrumbs-glass {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.7) !important;
  margin-bottom: 12px !important;
}

.subpage-breadcrumbs-glass a {
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.subpage-breadcrumbs-glass a:hover {
  color: #E6BE75 !important;
}

.subpage-title-cinematic {
  font-family: var(--font-serif) !important;
  font-size: 54px !important;
  line-height: 1.05 !important;
  font-weight: 400 !important;
  letter-spacing: 0.03em !important;
  color: #FFFFFF !important;
  margin: 0 0 14px 0 !important;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.75), 0 2px 6px rgba(0, 0, 0, 0.85) !important;
}

.subpage-tagline-cinematic {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-size: 20px !important;
  line-height: 1.4 !important;
  color: #F4EFE6 !important;
  max-width: 680px !important;
  margin-bottom: 0 !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8) !important;
}

/* --- 7. ABOUT PAGE: MONOGRAPH ARCHITECTURAL SPREADS --- */
.monograph-statement-section {
  padding: 80px 0 60px !important;
  background: var(--color-light-bg) !important;
}

.monograph-quote-card {
  background: #FFFFFF !important;
  border: 1px solid #E8E2D5 !important;
  border-radius: 8px !important;
  padding: 48px 52px !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.04) !important;
  margin-bottom: 50px !important;
  position: relative !important;
}

.monograph-quote-mark {
  font-family: var(--font-serif) !important;
  font-size: 72px !important;
  line-height: 1 !important;
  color: #C59844 !important;
  margin-bottom: 12px !important;
}

.monograph-quote-text {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-size: 24px !important;
  line-height: 1.45 !important;
  color: #1A1715 !important;
  margin-bottom: 20px !important;
}

.monograph-quote-author {
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #7C5314 !important;
}

/* Materiality Triptych (3 Noble Elements) */
.materials-triptych-section {
  padding: 40px 0 80px !important;
}

.materials-triptych-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
  margin-top: 36px !important;
}

.material-luxury-card {
  background: #FFFFFF !important;
  border: 1px solid #E5DFD2 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}

.material-luxury-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.08) !important;
}

.material-img-wrap {
  position: relative !important;
  height: 240px !important;
  overflow: hidden !important;
}

.material-card-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.6s ease !important;
}

.material-luxury-card:hover .material-card-img {
  transform: scale(1.05) !important;
}

.material-badge-gold {
  position: absolute !important;
  top: 16px !important;
  left: 16px !important;
  background: rgba(14, 12, 11, 0.75) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(230, 190, 117, 0.45) !important;
  color: #FDF1D6 !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 5px 12px !important;
  border-radius: 40px !important;
}

.material-card-body {
  padding: 28px 26px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
}

.material-card-title {
  font-family: var(--font-serif) !important;
  font-size: 22px !important;
  color: #141211 !important;
  margin-bottom: 12px !important;
}

.material-card-desc {
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  color: #4A443D !important;
  margin-bottom: 20px !important;
  flex-grow: 1 !important;
}

.material-spec-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #7C5314 !important;
  padding-top: 14px !important;
  border-top: 1px solid #ECE6DB !important;
}

/* 4 Panjara Modes Showcase */
.panjara-showcase-section {
  padding: 70px 0 80px !important;
  background: #110F0E !important;
  color: #FAF8F5 !important;
}

.panjara-modes-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 22px !important;
  margin-top: 36px !important;
}

.panjara-mode-card {
  background: #1A1715 !important;
  border: 1px solid rgba(230, 190, 117, 0.25) !important;
  border-radius: 6px !important;
  padding: 24px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.3s ease, border-color 0.3s ease !important;
}

.panjara-mode-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(230, 190, 117, 0.6) !important;
}

.mode-num {
  font-family: var(--font-serif) !important;
  font-size: 28px !important;
  color: #E6BE75 !important;
  margin-bottom: 8px !important;
}

.mode-title {
  font-family: var(--font-serif) !important;
  font-size: 18px !important;
  color: #FFFFFF !important;
  margin-bottom: 10px !important;
}

.mode-desc {
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: #BDB4A5 !important;
}

/* Exclusive Brandbook Presentation */
.brandbook-exclusive-section {
  padding: 60px 0 80px !important;
}

.brandbook-exclusive-card {
  background: linear-gradient(135deg, #181513 0%, #100E0D 100%) !important;
  border: 1px solid rgba(230, 190, 117, 0.35) !important;
  border-radius: 8px !important;
  padding: 48px 56px !important;
  display: grid !important;
  grid-template-columns: 1.4fr 1fr !important;
  gap: 40px !important;
  align-items: center !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2) !important;
}

.bb-card-title {
  font-family: var(--font-serif) !important;
  font-size: 32px !important;
  color: #FFFFFF !important;
  margin-bottom: 16px !important;
}

.bb-card-text {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: #D9D0C1 !important;
  margin-bottom: 24px !important;
}

.bb-bullets {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 28px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.bb-bullets li {
  font-size: 13.5px !important;
  color: #FAF8F5 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.bb-bullets li::before {
  content: "•" !important;
  color: #E6BE75 !important;
  font-size: 18px !important;
}

/* --- 8. SPACES PAGE: EDITORIAL MAGAZINE PARK & AMENITIES --- */
.spaces-feature-spread {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 28px !important;
  margin-bottom: 60px !important;
}

.spaces-feature-card {
  background: #FFFFFF !important;
  border: 1px solid #E5DFD2 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
}

.spaces-feature-card.span-2 {
  grid-column: span 2 !important;
}

/* --- 9. GALLERY PAGE: 4K CINEMA THEATER & MASONRY --- */
.cinema-theater-section {
  padding: 70px 0 !important;
  background: #0E0C0B !important;
}

.cinema-theater-box {
  background: #141211 !important;
  border: 1px solid rgba(230, 190, 117, 0.3) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
}

.cinema-video-wrap {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  background: #000 !important;
}

.cinema-video-el {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.cinema-bar {
  padding: 20px 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: rgba(20, 18, 17, 0.95) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.cinema-bar-title {
  font-family: var(--font-serif) !important;
  font-size: 18px !important;
  color: #FFFFFF !important;
}

.cinema-bar-badge {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #E6BE75 !important;
  border: 1px solid rgba(230, 190, 117, 0.4) !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
}

/* --- 10. CONTACTS PAGE: EXECUTIVE SALON SPREAD --- */
.contacts-executive-spread {
  display: grid !important;
  grid-template-columns: 1fr 1.15fr !important;
  gap: 36px !important;
  padding: 0 !important;
}

.vip-salon-card {
  background: #FFFFFF !important;
  border: 1px solid #E5DFD2 !important;
  border-radius: 8px !important;
  padding: 42px 38px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.04) !important;
}

.booking-desk-card {
  background: #FFFFFF !important;
  border: 1px solid #E5DFD2 !important;
  border-radius: 8px !important;
  padding: 42px 38px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.04) !important;
}

/* --- 11. RESPONSIVE MEDIA QUERIES --- */
@media (max-width: 991px) {
  .spread-showcase-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .spread-metrics-ribbon {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 16px !important;
    padding: 24px !important;
  }
  .ribbon-divider {
    display: none !important;
  }
  .real-gallery-grid-teaser {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .subpage-title-cinematic {
    font-size: 42px !important;
  }
  .materials-triptych-grid {
    grid-template-columns: 1fr !important;
  }
  .panjara-modes-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .brandbook-exclusive-card {
    grid-template-columns: 1fr !important;
    padding: 32px 24px !important;
  }
  .contacts-executive-spread {
    grid-template-columns: 1fr !important;
  }
  .spaces-feature-spread {
    grid-template-columns: 1fr !important;
  }
  .spaces-feature-card.span-2 {
    grid-column: span 1 !important;
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  .subpage-hero-cinematic {
    min-height: 480px !important;
    height: auto !important;
  }
  .subpage-container-cinematic {
    padding: 20px 16px 20px !important;
  }
  .subpage-title-cinematic {
    font-size: 34px !important;
  }
  .subpage-tagline-cinematic {
    font-size: 17px !important;
  }
  .hero-eyebrow-row {
    padding: 6px 14px 6px 10px !important;
    border-radius: 100px !important;
    max-width: 100% !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
  }
  .hero-emblem-inline {
    width: 20px !important;
    height: 20px !important;
  }
  .hero-eyebrow-text {
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
    white-space: normal !important;
    line-height: 1.35 !important;
  }
  .hero-title-cinematic {
    font-size: 42px !important;
    line-height: 1.05 !important;
    margin-bottom: 14px !important;
  }
  .hero-tagline-cinematic {
    font-size: 18px !important;
    line-height: 1.4 !important;
    margin-bottom: 24px !important;
  }
  .hero-actions-cinematic {
    flex-direction: column !important;
    width: 100% !important;
  }
  .btn-hero-solid,
  .btn-hero-glass {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 18px !important;
    box-sizing: border-box !important;
  }
  .hero-dock-bar {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px 10px !important;
    padding: 16px 12px !important;
  }
  .h-dock-sep {
    display: none !important;
  }
  .hero-dock-item:last-child {
    grid-column: span 2 !important;
    border-top: 1px solid rgba(217, 208, 193, 0.25) !important;
    padding-top: 8px !important;
  }
  .h-dock-val {
    font-size: 19px !important;
  }
  .panjara-modes-grid {
    grid-template-columns: 1fr !important;
  }
  .card-park-large,
  .card-travertine-large {
    min-height: 380px !important;
  }
  .spread-card-content,
  .spread-card-inner {
    padding: 26px 20px !important;
  }
  .spread-card-title {
    font-size: 22px !important;
  }
  .spread-metrics-ribbon {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 20px 16px !important;
  }
}

@media (max-width: 360px) {
  .hero-title-cinematic,
  .subpage-title-cinematic {
    font-size: 30px !important;
  }
}


/* ==============================================================================
   NAQSH RESIDENCE — V15 CLIENT FEEDBACK & EMAN INTEGRATIONS
   - Light & Centered Hero Dock Bar (1-row desktop flex layout)
   - High Contrast Badges ("не видно" fix)
   - Centered Section 1 (Manifesto & Philosophy)
   - Edge-to-Edge Fullscreen 4K Cinema Theater
   - Light Luxury Editorial Footer with Prominent PDF Booklet Button
   - Dynamic 36-Unit Interactive Chessboard System
   - EMAN Development Floating Action Buttons (FAB Dock)
   - Full 4K Lightbox Overlay
   ============================================================================== */

/* --- 1. LOCAL & GOOGLE FONTS PREVENT 404 --- */
@font-face {
  font-family: 'Platypi';
  src: url('../fonts/Platypi-Light-300.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Platypi';
  src: url('../fonts/Platypi-Regular-400.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Platypi';
  src: url('../fonts/Platypi-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* --- 2. LOGO ENHANCEMENT --- */
.brand-logo-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  text-decoration: none !important;
}
.brand-logo-icon {
  width: 38px !important;
  height: 38px !important;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45)) !important;
  transition: transform 0.3s ease !important;
}
.brand-logo-wrap:hover .brand-logo-icon {
  transform: rotate(45deg) scale(1.08) !important;
}
.brand-logo-text {
  font-family: var(--font-serif) !important;
  font-size: 19px !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

/* --- 3. HERO DOCK BAR: LIGHT IVORY, CENTERED 1-ROW (Photos 1, 6) --- */
.hero-dock-bar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: rgba(250, 248, 245, 0.94) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(218, 165, 63, 0.45) !important;
  border-radius: 8px !important;
  padding: 16px 20px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(218, 165, 63, 0.15) !important;
  width: 100% !important;
  max-width: 1080px !important;
  margin: 36px auto 0 auto !important;
  box-sizing: border-box !important;
}

.hero-dock-item {
  flex: 1 1 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 0 8px !important;
}

.h-dock-val {
  font-family: var(--font-serif) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #1C1917 !important;
  letter-spacing: 0.03em !important;
  margin-bottom: 3px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.h-dock-lbl {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #6E6863 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.h-dock-sep {
  flex: 0 0 1px !important;
  width: 1px !important;
  height: 38px !important;
  background: rgba(195, 170, 131, 0.45) !important;
  margin: 0 !important;
}

/* Center Hero Container alignment */
.hero-container-cinematic {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 40px 24px 28px !important;
  box-sizing: border-box !important;
  min-height: calc(100vh - var(--header-height)) !important;
  min-height: calc(100svh - var(--header-height)) !important;
}

.hero-brand-block {
  max-width: 820px !important;
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.hero-tagline-cinematic {
  font-size: 22px !important;
  line-height: 1.4 !important;
  color: rgba(255, 255, 255, 0.95) !important;
  margin-bottom: 12px !important;
  font-weight: 400 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}

.hero-subtagline-cinematic {
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: #E6BE75 !important;
  margin-bottom: 30px !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7) !important;
}

/* --- 4. SECTION 1: CENTERED MANIFESTO (Photos 7, 8, 9) --- */
.editorial-centered-wrap {
  max-width: 880px !important;
  margin: 0 auto 50px auto !important;
  text-align: center !important;
}

.editorial-centered-wrap .section-eyebrow {
  margin-bottom: 14px !important;
}

.editorial-centered-wrap .editorial-title {
  font-size: 38px !important;
  line-height: 1.25 !important;
  margin-bottom: 24px !important;
}

.editorial-centered-wrap .editorial-lead {
  font-size: 19px !important;
  line-height: 1.6 !important;
  color: #38332E !important;
  margin-bottom: 20px !important;
}

.editorial-centered-wrap .editorial-p {
  font-size: 15.5px !important;
  line-height: 1.7 !important;
  color: #5C554D !important;
  margin-bottom: 18px !important;
}

/* --- 5. HIGH-CONTRAST BADGES ("НЕ ВИДНО" FIX, Photo 11) --- */
.real-card-tag,
.material-badge-gold,
.blueprint-badge,
.cinema-bar-badge {
  background: #FAF8F5 !important;
  color: #1C1917 !important;
  border: 1px solid #C3AA83 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
}

.real-card-tag {
  font-size: 11px !important;
  padding: 6px 14px !important;
  border-radius: 4px !important;
  color: #7C5314 !important;
  display: inline-block !important;
}

/* --- 6. EDGE-TO-EDGE CINEMA THEATER (Photos 20, 21, 22) --- */
.cinema-theater-section {
  padding: 60px 0 80px !important;
  background: #141211 !important;
  color: #FAF8F5 !important;
}

.cinema-theater-box-full {
  width: 100% !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

.cinema-video-wrap-full {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
  background: #000000 !important;
}

.cinema-video-wrap-full video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.cinema-controls-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px !important;
  background: #1C1917 !important;
  border-top: 1px solid rgba(195, 170, 131, 0.3) !important;
  border-radius: 0 0 8px 8px !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

/* --- 7. LIGHT LUXURY FOOTER (Photos 18, 19) --- */
.site-footer {
  background: #FAF8F5 !important;
  color: #1C1917 !important;
  border-top: 1px solid #E5DFD2 !important;
  padding: 70px 0 30px !important;
}

.footer-logo-title {
  color: #1C1917 !important;
  font-family: var(--font-serif) !important;
  font-size: 20px !important;
}

.footer-brand-desc {
  color: #5C554D !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

.f-tag {
  background: #EDE8DE !important;
  border: 1px solid #D5CEBF !important;
  color: #5C554D !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

.f-nav-title {
  color: #1C1917 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid #C3AA83 !important;
  margin-bottom: 18px !important;
}

.f-nav-list li a {
  color: #5C554D !important;
  font-size: 14px !important;
  text-decoration: none !important;
  transition: color 0.25s ease !important;
}

.f-nav-list li a:hover {
  color: #7C5314 !important;
}

.f-contact-line {
  color: #5C554D !important;
  font-size: 14px !important;
  margin-bottom: 8px !important;
}

.footer-bottom-bar {
  border-top: 1px solid #E5DFD2 !important;
  padding-top: 24px !important;
  margin-top: 50px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.f-copy {
  color: #78716C !important;
  font-size: 13px !important;
}

.btn-booklet-download {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #1C1917 !important;
  color: #FAF8F5 !important;
  border: 1px solid #C3AA83 !important;
  padding: 12px 22px !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.btn-booklet-download:hover {
  background: #8A682D !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(138, 104, 45, 0.3) !important;
}

/* --- 8. FLOATING ACTION BUTTONS (EMAN DOCK STYLE) --- */
.naqsh-fab-dock {
  position: fixed !important;
  bottom: 28px !important;
  right: 28px !important;
  z-index: 990 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  align-items: flex-end !important;
}

.fab-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  border: 1.5px solid #C3AA83 !important;
  background: rgba(250, 248, 245, 0.96) !important;
  color: #1C1917 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  position: relative !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.fab-btn:hover {
  transform: scale(1.1) !important;
  background: #1C1917 !important;
  color: #E6BE75 !important;
  border-color: #E6BE75 !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28) !important;
}

.fab-btn.fab-telegram {
  background: #2481CC !important;
  border-color: #2481CC !important;
  color: #FFFFFF !important;
}
.fab-btn.fab-telegram:hover {
  background: #1B65A3 !important;
  color: #FFFFFF !important;
}

.fab-tour-badge {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

.fab-tooltip {
  position: absolute !important;
  right: 64px !important;
  background: #1C1917 !important;
  color: #FAF8F5 !important;
  padding: 6px 12px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(10px) !important;
  transition: all 0.25s ease !important;
  border: 1px solid rgba(195, 170, 131, 0.3) !important;
}

.fab-btn:hover .fab-tooltip {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* --- 9. INTERACTIVE 36-UNIT CHESSBOARD SYSTEM --- */
.chessboard-section {
  background: #FFFFFF !important;
  border-top: 1px solid #E5DFD2 !important;
  border-bottom: 1px solid #E5DFD2 !important;
}

.chess-controls-wrap {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin-bottom: 30px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid #E5DFD2 !important;
}

.chess-filter-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.chess-filter-lbl {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #5C554D !important;
}

.chess-filter-pills {
  display: flex !important;
  gap: 8px !important;
}

.chess-pill {
  background: #FAF8F5 !important;
  border: 1px solid #D5CEBF !important;
  color: #38332E !important;
  padding: 8px 16px !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.chess-pill:hover,
.chess-pill.active {
  background: #1C1917 !important;
  color: #FAF8F5 !important;
  border-color: #1C1917 !important;
}

.chess-legend-row {
  display: flex !important;
  gap: 16px !important;
  font-size: 13px !important;
  color: #5C554D !important;
}

.c-legend-item {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.c-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  display: inline-block !important;
}
.c-dot.available { background: #2E7D32 !important; }
.c-dot.reserved { background: #B88A36 !important; }
.c-dot.sold { background: #9E9E9E !important; }

.chess-grid-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.chess-floor-row {
  display: grid !important;
  grid-template-columns: 90px 1fr !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 10px 14px !important;
  background: #FAF8F5 !important;
  border: 1px solid #E5DFD2 !important;
  border-radius: 6px !important;
  transition: all 0.25s ease !important;
}

.chess-floor-row:hover {
  border-color: #C3AA83 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.chess-floor-label {
  font-family: var(--font-serif) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1C1917 !important;
  text-align: center !important;
  padding-right: 12px !important;
  border-right: 1px solid #E5DFD2 !important;
}

.chess-units-row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
}

.unit-card {
  background: #FFFFFF !important;
  border: 1.5px solid #E5DFD2 !important;
  border-radius: 6px !important;
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-align: left !important;
}

.unit-card:hover {
  transform: translateY(-2px) !important;
  border-color: #B88A36 !important;
  box-shadow: 0 6px 16px rgba(184, 138, 54, 0.16) !important;
}

.unit-card.status-reserved {
  background: #FDFBF7 !important;
  opacity: 0.85 !important;
}

.unit-card-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 6px !important;
}

.unit-card-no {
  font-family: var(--font-serif) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #1C1917 !important;
}

.unit-card-type {
  font-size: 11px !important;
  color: #7C5314 !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.unit-card-specs {
  font-size: 12.5px !important;
  color: #5C554D !important;
  display: flex !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
}

.unit-card-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 11px !important;
  padding-top: 6px !important;
  border-top: 1px dashed #E5DFD2 !important;
}

.unit-status-indicator {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-weight: 500 !important;
}

.unit-card.status-free .unit-status-indicator { color: #2E7D32 !important; }
.unit-card.status-reserved .unit-status-indicator { color: #B88A36 !important; }

/* --- 10. FULLSCREEN LIGHTBOX STYLES --- */
.lightbox-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(14, 12, 11, 0.94) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  z-index: 1000 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

.lightbox-overlay.open {
  display: flex !important;
  opacity: 1 !important;
}

.lightbox-container {
  position: relative !important;
  width: 92% !important;
  max-width: 1240px !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.lightbox-media-wrap {
  width: 100% !important;
  max-height: 75vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.lightbox-img {
  max-width: 100% !important;
  max-height: 75vh !important;
  object-fit: contain !important;
  border-radius: 4px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6) !important;
  transition: opacity 0.2s ease !important;
}

.lightbox-info-bar {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 18px !important;
  color: #FAF8F5 !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
}

.lightbox-tag {
  color: #E6BE75 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.lightbox-title {
  font-family: var(--font-serif) !important;
  font-size: 20px !important;
  margin: 4px 0 !important;
}

.lightbox-desc {
  font-size: 13.5px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  margin: 0 !important;
}

.lightbox-close-btn {
  position: absolute !important;
  top: -46px !important;
  right: 0 !important;
  background: transparent !important;
  border: none !important;
  color: #FFFFFF !important;
  font-size: 28px !important;
  cursor: pointer !important;
  transition: transform 0.2s ease !important;
}
.lightbox-close-btn:hover {
  transform: scale(1.2) !important;
  color: #E6BE75 !important;
}

.lightbox-nav-btn {
  position: absolute !important;
  top: 45% !important;
  background: rgba(250, 248, 245, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  font-size: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  backdrop-filter: blur(8px) !important;
}
.lightbox-nav-btn:hover {
  background: #B88A36 !important;
  border-color: #B88A36 !important;
  transform: scale(1.1) !important;
}
.lightbox-prev { left: -64px !important; }
.lightbox-next { right: -64px !important; }

/* Responsive Adjustments for Mobile */
@media (max-width: 900px) {
  .hero-dock-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px 10px !important;
    padding: 16px 14px !important;
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }
  .h-dock-sep {
    display: none !important;
  }
  .hero-dock-item:last-child {
    grid-column: span 2 !important;
    border-top: 1px solid rgba(195, 170, 131, 0.3) !important;
    padding-top: 10px !important;
  }
  .chess-floor-row {
    grid-template-columns: 1fr !important;
  }
  .chess-floor-label {
    border-right: none !important;
    border-bottom: 1px solid #E5DFD2 !important;
    padding-bottom: 6px !important;
  }
  .chess-units-row {
    grid-template-columns: 1fr 1fr !important;
  }
  .lightbox-prev { left: 10px !important; top: auto !important; bottom: 80px !important; }
  .lightbox-next { right: 10px !important; top: auto !important; bottom: 80px !important; }
  .naqsh-fab-dock { 
    bottom: 20px !important; 
    right: 14px !important; 
    gap: 8px !important;
  }
  .fab-btn { 
    width: 44px !important; 
    height: 44px !important; 
  }
}

@media (max-width: 500px) {
  .chess-units-row {
    grid-template-columns: 1fr !important;
  }
}

.spread-metric-badge {
  display: inline-block !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-family: var(--font-serif) !important;
  font-size: 32px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
  line-height: 1 !important;
}

/* --- Fix: Dark High-Contrast Tag for Light Cards (Image 3 fix) --- */
.sp-tag-dark {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #1C1917 !important;
  background: #FAF8F5 !important;
  border: 1px solid #C3AA83 !important;
  padding: 6px 14px !important;
  border-radius: 4px !important;
  letter-spacing: 0.04em !important;
  display: inline-block !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

/* --- Fix: Explication List & Floorplan Specs Formatting (Image 5 & 6 fix) --- */
.floorplan-showcase {
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: 32px !important;
  align-items: stretch !important;
  margin-top: 36px !important;
}

.floorplan-blueprint-card {
  background: #171614 !important;
  border: 1.5px solid #332F2A !important;
  border-radius: 8px !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) !important;
}

.blueprint-controls {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 16px !important;
}

.blueprint-badge {
  background: #FAF8F5 !important;
  color: #7C5314 !important;
  border: 1px solid #C3AA83 !important;
  padding: 6px 14px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.btn-zoom-blueprint {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(195, 170, 131, 0.35) !important;
  color: #FAF8F5 !important;
  padding: 6px 14px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
}

.btn-zoom-blueprint:hover {
  background: #DAA53F !important;
  border-color: #DAA53F !important;
  color: #171614 !important;
}

.blueprint-canvas-wrap {
  width: 100% !important;
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 400px !important;
  background: #141312 !important;
  border-radius: 6px !important;
  padding: 12px !important;
}

.blueprint-img {
  width: 100% !important;
  height: auto !important;
  max-height: 460px !important;
  object-fit: contain !important;
}

.blueprint-hint {
  font-size: 11px !important;
  color: #8C8273 !important;
  text-align: center !important;
  margin-top: 12px !important;
  letter-spacing: 0.04em !important;
}

.floorplan-spec-card {
  background: #FFFFFF !important;
  border: 1.5px solid #E5DFD2 !important;
  border-radius: 8px !important;
  padding: 36px 32px !important;
  box-shadow: 0 12px 36px rgba(40, 30, 20, 0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.fp-title {
  font-family: var(--font-serif) !important;
  font-size: 28px !important;
  font-weight: 500 !important;
  color: #1C1917 !important;
  margin-bottom: 6px !important;
  line-height: 1.15 !important;
}

.fp-headline {
  font-family: var(--font-sans) !important;
  font-size: 13.5px !important;
  color: #7C5314 !important;
  font-weight: 500 !important;
  margin-bottom: 22px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid #EFEAE1 !important;
  line-height: 1.4 !important;
}

.fp-metrics-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 14px 18px !important;
  margin-bottom: 24px !important;
  background: #FAF8F5 !important;
  padding: 16px 20px !important;
  border-radius: 6px !important;
  border: 1px solid #EFEAE1 !important;
}

.fp-metric-item {
  display: flex !important;
  flex-direction: column !important;
}

.fp-metric-val {
  font-family: var(--font-serif) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #1C1917 !important;
  line-height: 1.2 !important;
  margin-bottom: 3px !important;
}

.fp-metric-lbl {
  font-family: var(--font-sans) !important;
  font-size: 10.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #7A7265 !important;
  font-weight: 500 !important;
}

.fp-explication-wrap {
  margin-bottom: 24px !important;
}

.fp-explication-title {
  font-family: var(--font-sans) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #8C8273 !important;
  margin-bottom: 12px !important;
}

.fp-explication-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.fp-explication-list li {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  font-size: 13.5px !important;
  color: #383431 !important;
  padding-bottom: 8px !important;
  border-bottom: 1px dashed #E5DFD2 !important;
}

.fp-explication-list li span {
  font-weight: 400 !important;
  color: #4A443D !important;
  padding-right: 12px !important;
}

.fp-explication-list li strong {
  font-family: var(--font-serif) !important;
  font-weight: 600 !important;
  color: #7C5314 !important;
  font-size: 14.5px !important;
  white-space: nowrap !important;
}

.fp-actions button {
  width: 100% !important;
  padding: 16px 24px !important;
  font-size: 13.5px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

@media (max-width: 900px) {
  .floorplan-showcase {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* --- Subpage Header Meta Row: Unified 1-Level Frosted Glass Capsules --- */
.subpage-header-meta {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 22px !important;
  flex-wrap: wrap !important;
}

.subpage-breadcrumbs-glass {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 40px !important;
  padding: 0 18px !important;
  background: rgba(14, 12, 11, 0.82) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(230, 190, 117, 0.45) !important;
  border-radius: 100px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
  font-size: 11.5px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #FAF8F5 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.subpage-breadcrumbs-glass a {
  color: #FAF8F5 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color 0.2s ease !important;
}

.subpage-breadcrumbs-glass a:hover {
  color: #DAA53F !important;
}

.subpage-breadcrumbs-glass .bc-sep {
  color: rgba(218, 165, 63, 0.75) !important;
  font-size: 13px !important;
  margin: 0 2px !important;
}

.subpage-breadcrumbs-glass .bc-active {
  color: #DAA53F !important;
  font-weight: 600 !important;
}

.subpage-header-meta .hero-eyebrow-row {
  height: 40px !important;
  padding: 0 18px 0 14px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

@media (max-width: 768px) {
  .subpage-header-meta {
    gap: 10px !important;
    margin-bottom: 16px !important;
  }
  .subpage-breadcrumbs-glass,
  .subpage-header-meta .hero-eyebrow-row {
    height: 36px !important;
    padding: 0 14px !important;
    font-size: 10.5px !important;
  }
}




/* ============================================================================
   NAQSH LUXURY BRAND LEAD TEMPLATE (NAQSH RESIDENCE SIGNATURE COLORS & DESIGN)
   - Obsidian & Espresso: #141312 / #1A1715
   - Honeyed Amber & Gold: #DAA53F / #CBA258
   - Latte Brown: #C3AA83
   - Headings: Platypi-Master Serif
   ============================================================================ */
.naqsh-template-card {
  background: #141312 !important;
  background: linear-gradient(165deg, #1C1917 0%, #121110 100%) !important;
  border: 1.5px solid rgba(218, 165, 63, 0.42) !important;
  border-radius: 22px !important;
  padding: 44px 38px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(218, 165, 63, 0.15), inset 0 1px 0 rgba(245, 219, 160, 0.15) !important;
  color: #FAF8F5 !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.modal-box.naqsh-template-card {
  max-width: 520px !important;
  width: 100% !important;
  max-height: 92vh !important;
  overflow-y: auto !important;
  animation: modalIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.naqsh-template-card .modal-close {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(218, 165, 63, 0.35) !important;
  color: #DAA53F !important;
  font-size: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  line-height: 1 !important;
}

.naqsh-template-card .modal-close:hover {
  background: rgba(218, 165, 63, 0.25) !important;
  border-color: #F5DBA0 !important;
  color: #FFFFFF !important;
  transform: scale(1.05) !important;
}

.template-card-emblem {
  margin-bottom: 18px !important;
  display: flex !important;
  align-items: center !important;
}

.template-card-emblem img {
  width: 38px !important;
  height: 38px !important;
  filter: drop-shadow(0 2px 8px rgba(218, 165, 63, 0.45)) !important;
}

.template-card-header {
  margin-bottom: 26px !important;
  text-align: left !important;
}

.template-card-title {
  font-family: var(--font-serif), 'Platypi-Master', 'Platypi', Georgia, serif !important;
  font-size: 32px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  color: #FAF8F5 !important;
  margin: 0 0 10px 0 !important;
}

.template-card-desc {
  font-family: var(--font-sans), 'Montserrat', sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: rgba(224, 221, 215, 0.78) !important;
  margin: 0 !important;
}

.template-card-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 100% !important;
}

.template-input-wrap {
  width: 100% !important;
}

.template-input {
  width: 100% !important;
  box-sizing: border-box !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(195, 170, 131, 0.3) !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  font-family: var(--font-sans), 'Montserrat', sans-serif !important;
  font-size: 15px !important;
  color: #FAF8F5 !important;
  outline: none !important;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease !important;
}

.template-input::placeholder {
  color: rgba(195, 170, 131, 0.6) !important;
  font-weight: 400 !important;
}

.template-input:focus {
  border-color: #DAA53F !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 0 0 3px rgba(218, 165, 63, 0.25) !important;
}

.template-textarea {
  height: 110px !important;
  min-height: 90px !important;
  resize: vertical !important;
}

.template-submit-btn {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 18px 24px !important;
  background: linear-gradient(135deg, #DAA53F 0%, #B88A36 50%, #8A6016 100%) !important;
  border: 1px solid rgba(245, 219, 160, 0.45) !important;
  border-radius: 12px !important;
  color: #FFFFFF !important;
  font-family: var(--font-sans), 'Montserrat', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  margin-top: 6px !important;
  box-shadow: 0 8px 24px rgba(184, 138, 54, 0.35) !important;
}

.template-submit-btn:hover {
  background: linear-gradient(135deg, #E6B54E 0%, #C49640 50%, #996D1E 100%) !important;
  border-color: #F5DBA0 !important;
  box-shadow: 0 12px 32px rgba(218, 165, 63, 0.5) !important;
  transform: translateY(-2px) !important;
}

.template-submit-btn .btn-arrow {
  font-size: 18px !important;
  transition: transform 0.2s ease !important;
  display: inline-block !important;
}

.template-submit-btn:hover .btn-arrow {
  transform: translateX(4px) !important;
}

.template-disclaimer {
  font-family: var(--font-sans), 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  color: rgba(195, 170, 131, 0.65) !important;
  margin: 12px 0 0 0 !important;
  text-align: left !important;
}

@media (max-width: 768px) {
  .naqsh-template-card {
    padding: 32px 20px !important;
    border-radius: 18px !important;
  }
  .template-card-title {
    font-size: 26px !important;
  }
  .template-card-desc {
    font-size: 13.5px !important;
    margin-bottom: 20px !important;
  }
  .template-input {
    padding: 14px 16px !important;
    font-size: 14px !important;
  }
  .template-submit-btn {
    padding: 16px 20px !important;
  }
}


/* --- Caption Centering (MSG 8) --- */
.visual-caption {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 20px !important;
}

.visual-caption .caption-title {
  text-align: center !important;
  font-family: var(--font-serif) !important;
  font-size: 20px !important;
  color: #141312 !important;
  margin-bottom: 4px !important;
}

.visual-caption .caption-sub {
  text-align: center !important;
  font-size: 13.5px !important;
  color: #7C5314 !important;
  font-weight: 500 !important;
}

/* Ensure Blueprint controls & tabs are 100% stable */
.floorplan-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-bottom: 32px !important;
}

.floorplan-tab {
  padding: 14px 22px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.floorplan-tab.active {
  background: #141312 !important;
  color: #FFFFFF !important;
  border-color: #141312 !important;
  box-shadow: 0 4px 14px rgba(20, 19, 18, 0.25) !important;
}


/* High contrast typography for dark sections (cinema, theater, CTA) */
.cinema-theater-section .section-title-large,
.cinema-section .section-title-large,
.section-dark .section-title-large,
.cta-booking-section .section-title-large,
.dark-section .section-title-large {
  color: #FAF8F5 !important;
}

.cinema-theater-section .section-subtitle-max,
.cinema-section .section-subtitle-max,
.section-dark .section-subtitle-max,
.cta-booking-section .section-subtitle-max,
.dark-section .section-subtitle-max {
  color: rgba(250, 248, 245, 0.85) !important;
}