/**
 * ==============================================================================
 * NAVAGRUHA INFRA DEVELOPERS — CENTRALIZED CROSS-PLATFORM DESIGN SYSTEM
 * Single Source of Truth (SSOT) for Visual Identity, Typography & Design Tokens
 * 
 * Target Consistency:
 * - Operating Systems: Windows, macOS, Linux, iOS (iPhone/iPad), Android
 * - Browsers: Chrome, Safari/WebKit, Firefox, Microsoft Edge, Opera, Samsung Internet
 * - Viewports: 320px, 375px, 390px, 414px, 768px, 820px, 1024px, 1280px, 1440px, 1920px+
 * ==============================================================================
 */

/* ==============================================================================
   1. CONTROLLED WEBFONT LOADING (@font-face & PRECONNECT)
   Prevents OS-dependent font disparities and synthetic browser italic/bold.
   ============================================================================== */

/* Local Copperplate CC Webfont for Brand/Architectural Display Titles */
@font-face {
  font-family: 'Copperplate CC';
  src: url('../fonts/CopperplateCC-Bold.otf') format('opentype'),
       url('../fonts/CopperplateCC-Bold.ttf') format('truetype');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Copperplate CC';
  src: url('../fonts/CopperplateCC-Heavy.otf') format('opentype'),
       url('../fonts/CopperplateCC-Heavy.ttf') format('truetype');
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Copperplate';
  src: local('Copperplate CC'),
       local('Copperplate'),
       local('Copperplate Gothic Bold'),
       url('../fonts/CopperplateCC-Bold.otf') format('opentype'),
       url('../fonts/CopperplateCC-Bold.ttf') format('truetype');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Copperplate';
  src: local('Copperplate CC Heavy'),
       local('Copperplate Heavy'),
       local('Copperplate Gothic Heavy'),
       url('../fonts/CopperplateCC-Heavy.otf') format('opentype'),
       url('../fonts/CopperplateCC-Heavy.ttf') format('truetype');
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}

/* ==============================================================================
   2. CENTRALIZED DESIGN TOKENS (:root)
   Single Source of Truth for all Colors, Typography, Spacing, Radii & Shadows.
   ============================================================================== */
:root {
  /* --- Typography: Font Families --- */
  --font-family-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-display: 'Copperplate CC', 'Copperplate', 'Cinzel', serif;
  --font-family-brand: 'Copperplate CC', 'Copperplate', 'Cinzel', serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* Legacy variable aliases for total backward compatibility */
  --font-sans: var(--font-family-primary);
  --font-heading: var(--font-family-display);
  --font-copperplate: var(--font-family-display);

  /* --- Typography: Font Weights (Only strictly loaded weights) --- */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* --- Typography: Fluid / Standard Font Sizing Scale (rem-based) --- */
  --font-size-3xs: 0.625rem;  /* 10px */
  --font-size-2xs: 0.6875rem; /* 11px */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-md: 1rem;       /* 16px (Base) */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 2rem;      /* 32px */
  --font-size-4xl: 2.5rem;    /* 40px */
  --font-size-5xl: 3rem;      /* 48px */
  --font-size-6xl: 4rem;      /* 64px */

  /* --- Typography: Line Heights --- */
  --line-height-none: 1;
  --line-height-tight: 1.2;
  --line-height-snug: 1.35;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  /* --- Typography: Letter Spacing --- */
  --letter-spacing-tighter: -0.04em;
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.04em;
  --letter-spacing-wider: 0.08em;
  --letter-spacing-widest: 0.14em;

  /* --- Brand Color System --- */
  --color-primary: #234159;
  --color-primary-rgb: 35, 65, 89;
  --color-primary-dark: #182d3d;
  --color-primary-light: #2e526f;
  --color-primary-hover: #1e384c;
  --color-primary-active: #152735;

  --color-secondary: #71b644;
  --color-secondary-rgb: 113, 182, 68;
  --color-secondary-dark: #5c9735;
  --color-secondary-light: #88cb5d;
  --color-secondary-hover: #63a13c;
  --color-secondary-active: #548a33;

  --color-accent: #dc3526;
  --color-accent-rgb: 220, 53, 38;
  --color-accent-hover: #b82a1d;
  --color-accent-gold: #d6c08a;
  --color-accent-gold-light: #e5d5ab;

  /* --- Surface, Background & Depth Colors --- */
  --color-background: #142533;
  --color-surface: #1a3042;
  --color-surface-card: #20394e;
  --color-surface-elevated: #26445c;
  --color-surface-hover: #233e55;
  --color-surface-overlay: rgba(20, 37, 51, 0.94);

  /* --- Text & Foreground Colors --- */
  --color-text: #e2e8f0;
  --color-text-white: #ffffff;
  --color-text-muted: #94a3b8;
  --color-text-dim: #64748b;
  --color-text-disabled: rgba(255, 255, 255, 0.38);

  /* --- Borders & Outlines --- */
  --color-border: rgba(255, 255, 255, 0.12);
  --color-border-light: rgba(255, 255, 255, 0.18);
  --color-border-subtle: rgba(255, 255, 255, 0.08);
  --color-border-focus: #71b644;

  /* --- Status / Functional Colors --- */
  --color-success: #71b644;
  --color-warning: #f59e0b;
  --color-danger: #dc3526;
  --color-info: #38bdf8;
  --color-disabled-bg: rgba(255, 255, 255, 0.06);

  /* Legacy variable mappings */
  --primary-color: var(--color-primary);
  --primary-color-rgb: var(--color-primary-rgb);
  --primary-dark: var(--color-primary-dark);
  --primary-light: var(--color-primary-light);
  --secondary-color: var(--color-secondary);
  --secondary-color-rgb: var(--color-secondary-rgb);
  --secondary-dark: var(--color-secondary-dark);
  --secondary-light: var(--color-secondary-light);
  --accent-color: var(--color-accent);
  --accent-color-rgb: var(--color-accent-rgb);
  --accent-gold: var(--color-accent-gold);
  --dark-bg: var(--color-background);
  --dark-surface: var(--color-surface);
  --dark-surface-card: var(--color-surface-card);
  --dark-border: var(--color-border);
  --dark-border-light: var(--color-border-light);

  /* --- Centralized Spacing System Scale --- */
  --space-0: 0;
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  --space-20: 5rem;    /* 80px */
  --space-24: 6rem;    /* 96px */

  /* --- Border Radius Scale --- */
  --radius-none: 0;
  --radius-xs: 0.25rem;   /* 4px */
  --radius-sm: 0.375rem;  /* 6px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;      /* 16px */
  --radius-2xl: 1.25rem;  /* 20px */
  --radius-3xl: 1.5rem;   /* 24px */
  --radius-pill: 9999px;
  --radius-circle: 50%;

  /* --- Elevation & Shadows --- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.38), 0 4px 8px rgba(0, 0, 0, 0.24);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.45), 0 8px 16px rgba(0, 0, 0, 0.3);
  --shadow-glow-green: 0 0 16px rgba(113, 182, 68, 0.45);
  --shadow-glow-primary: 0 0 16px rgba(35, 65, 89, 0.6);
  --focus-ring: 0 0 0 3px rgba(113, 182, 68, 0.35);

  /* --- Transitions & Timing --- */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 400ms cubic-bezier(0.2, 0.8, 0.2, 1);

  /* --- Container & Layout Dimensions --- */
  --container-max: 1260px;
  --container-pad: 1.5rem;
}

/* Tablet & Desktop Layout Overrides for Spacing */
@media (min-width: 768px) {
  :root {
    --container-pad: 2.5rem;
  }
}

@media (min-width: 1200px) {
  :root {
    --container-pad: 3rem;
  }
}

/* ==============================================================================
   3. UNIVERSAL BROWSER NORMALIZATION & CSS RESET
   Guarantees zero platform default styling interference (Safari, Chrome, Edge, Firefox, iOS, Android)
   ============================================================================== */

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background-color: var(--color-background);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  text-align: start;
}

/* Headings Base Reset */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-white);
  letter-spacing: var(--letter-spacing-wide);
  text-wrap: balance;
}

/* Paragraphs & Text Base Reset */
p {
  margin-block-end: var(--space-4);
  line-height: var(--line-height-normal);
}
p:last-child {
  margin-block-end: 0;
}

/* Lists Reset */
ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Anchor Base Reset */
a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast), opacity var(--transition-fast), background var(--transition-fast);
}

/* Tables Reset */
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

/* Media Elements Normalization */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

img {
  image-rendering: -webkit-optimize-contrast;
}

/* Horizontal Rules */
hr {
  border: none;
  border-block-start: 1px solid var(--color-border);
  margin-block: var(--space-6);
}

/* Universal Focus States for Keyboard Navigation */
:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

/* ==============================================================================
   4. FORM CONTROLS & BUTTONS NORMALIZATION
   Removes iOS/macOS/Windows OS control styling to prevent rendering differences.
   ============================================================================== */

/* Buttons */
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-none);
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
}

/* Form Inputs, Selects & Textareas */
input,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-md); /* 16px minimum prevents iOS Safari auto-zoom! */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-white);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  width: 100%;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

/* Placeholder Styling */
input::placeholder,
textarea::placeholder {
  color: var(--color-text-dim);
  opacity: 1;
}

/* Input Focus States */
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(113, 182, 68, 0.25);
  background-color: rgba(26, 48, 66, 0.95);
}

/* Disabled States */
input:disabled,
select:disabled,
textarea:disabled,
button:disabled {
  background-color: var(--color-disabled-bg) !important;
  color: var(--color-text-disabled) !important;
  border-color: var(--color-border-subtle) !important;
  cursor: not-allowed !important;
  opacity: 0.6;
}

/* Textareas */
textarea {
  min-height: 100px;
  resize: vertical;
}

/* Custom Select Dropdown Indicator */
select {
  padding-inline-end: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.25rem 1.25rem;
  cursor: pointer;
}

[dir="rtl"] select {
  background-position: left 0.75rem center;
}

/* Custom Accessible Checkboxes & Radio Buttons */
input[type="checkbox"],
input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
}

input[type="radio"] {
  border-radius: var(--radius-circle);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

input[type="checkbox"]:checked::before {
  content: "";
  width: 0.65rem;
  height: 0.65rem;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  background-color: #ffffff;
}

input[type="radio"]:checked::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-circle);
  background-color: #ffffff;
}

/* Labels */
label,
.form-label {
  display: inline-block;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text);
  margin-block-end: var(--space-2);
}

/* ==============================================================================
   5. EXPLICIT TYPOGRAPHY SYSTEM (H1-H4, Body, Labels, Prices, Metadata)
   ============================================================================== */

/* Display H1 */
h1, .h1, .display-1 {
  font-family: var(--font-family-display);
  font-size: clamp(2rem, 4vw, 2.75rem); /* 32px to 44px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-white);
  margin-block-end: var(--space-4);
  text-transform: uppercase;
}

/* Section Heading H2 */
h2, .h2, .section-title {
  font-family: var(--font-family-display);
  font-size: clamp(1.625rem, 3vw, 2.25rem); /* 26px to 36px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-white);
  margin-block-end: var(--space-3);
  text-transform: uppercase;
}

/* Sub-Heading H3 */
h3, .h3 {
  font-family: var(--font-family-display);
  font-size: clamp(1.25rem, 2.5vw, 1.625rem); /* 20px to 26px */
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-white);
  margin-block-end: var(--space-3);
}

/* Component Heading H4 */
h4, .h4 {
  font-family: var(--font-family-display);
  font-size: clamp(1.125rem, 2vw, 1.375rem); /* 18px to 22px */
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--color-text-white);
  margin-block-end: var(--space-2);
}

/* Minor Headings H5 & H6 */
h5, .h5 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  color: var(--color-text-white);
}

h6, .h6 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  color: var(--color-text-muted);
}

/* Section Subtitle / Kicker */
.subtitle,
.subtitle-copperplate,
.section-subtitle {
  font-family: var(--font-family-display);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider);
  color: var(--color-secondary);
  text-transform: uppercase;
  margin-block-end: var(--space-2);
  display: inline-block;
}

/* Body Text */
.body-text,
.text-body-standard {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text);
}

/* Small Text */
small,
.small,
.text-small {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-text-muted);
}

/* Property Titles */
.property-title,
.plot-title,
.venture-title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-white);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

/* Prices & Currency */
.price-tag,
.plot-price,
.property-price {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-none);
  color: var(--color-secondary);
  letter-spacing: var(--letter-spacing-tight);
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
}

.price-unit {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

/* Property Metadata & Specs */
.property-meta,
.plot-meta,
.spec-ledger {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.property-meta-icon {
  color: var(--color-secondary);
  font-size: var(--font-size-sm);
}

/* Stat Numbers & Highlights */
.stat-number,
.highlight-stat {
  font-family: var(--font-family-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-none);
  color: var(--color-secondary);
  letter-spacing: var(--letter-spacing-tight);
}

.stat-label {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-block-start: var(--space-1);
}

/* ==============================================================================
   6. STANDARDIZED BUTTON COMPONENTS
   ============================================================================== */

.btn-primary-brand,
.btn-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding-block: var(--space-3);
  padding-inline: var(--space-6);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: #ffffff !important;
  background-color: var(--color-secondary);
  background-image: linear-gradient(135deg, #71b644 0%, #5c9735 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 14px rgba(113, 182, 68, 0.35);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
  cursor: pointer;
  text-align: center;
}

.btn-primary-brand:hover,
.btn-main:hover {
  background-color: var(--color-secondary-hover);
  background-image: linear-gradient(135deg, #80cb4e 0%, #6ba83e 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(113, 182, 68, 0.5);
  color: #ffffff !important;
}

.btn-primary-brand:active,
.btn-main:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 8px rgba(113, 182, 68, 0.4);
}

.btn-secondary-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding-block: var(--space-3);
  padding-inline: var(--space-6);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: #ffffff !important;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
  cursor: pointer;
  text-align: center;
}

.btn-secondary-brand:hover {
  background-color: var(--color-surface-hover);
  border-color: var(--color-secondary);
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-secondary-brand:active {
  transform: translateY(0) scale(0.98);
}

.btn-outline-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding-block: var(--space-3);
  padding-inline: var(--space-6);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-secondary) !important;
  background-color: transparent;
  border: 1.5px solid var(--color-secondary);
  border-radius: var(--radius-pill);
  transition: transform var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
  cursor: pointer;
}

.btn-outline-brand:hover {
  background-color: var(--color-secondary);
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-green);
}

.btn-outline-brand:active {
  transform: translateY(0) scale(0.98);
}

/* Header Small CTA Button */
.btn-header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding-block: var(--space-2);
  padding-inline: var(--space-5);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: #ffffff !important;
  background-color: var(--color-secondary);
  background-image: linear-gradient(135deg, #71b644 0%, #5c9735 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 10px rgba(113, 182, 68, 0.35);
  transition: all var(--transition-fast);
}

.btn-header-cta:hover {
  background-image: linear-gradient(135deg, #80cb4e 0%, #6ba83e 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(113, 182, 68, 0.45);
}

@media (max-width: 991px) {
  .btn-header-cta,
  #headerScheduleVisitBtn {
    display: none !important;
  }
}

/* ==============================================================================
   7. STANDARDIZED CARDS & SURFACES
   ============================================================================== */

.card-brand,
.bg-brand-card,
.surface-card {
  background-color: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.card-brand:hover,
.bg-brand-card:hover,
.surface-card:hover {
  border-color: var(--color-border-light);
  box-shadow: var(--shadow-lg);
}

/* Interactive Card Variant */
.card-brand-interactive:hover {
  transform: translateY(-4px);
  border-color: rgba(113, 182, 68, 0.4);
  box-shadow: var(--shadow-xl), 0 0 20px rgba(113, 182, 68, 0.15);
}

/* ==============================================================================
   8. STANDARDIZED BADGES & STATUS PILLS
   ============================================================================== */

.badge-brand,
.badge-pill,
.plot-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding-block: 0.3rem;
  padding-inline: 0.75rem;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  line-height: 1;
}

.badge-brand-green,
.badge-available {
  background-color: rgba(113, 182, 68, 0.15);
  color: #88cb5d;
  border: 1px solid rgba(113, 182, 68, 0.35);
}

.badge-brand-gold {
  background-color: rgba(214, 192, 138, 0.15);
  color: var(--color-accent-gold);
  border: 1px solid rgba(214, 192, 138, 0.35);
}

.badge-brand-red,
.badge-sold {
  background-color: rgba(220, 53, 38, 0.15);
  color: #f87171;
  border: 1px solid rgba(220, 53, 38, 0.35);
}

.badge-brand-blue {
  background-color: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
}

/* ==============================================================================
   9. IMAGES, RATIOS & ICON STANDARDIZATION
   Zero OS Emoji icons for UI, standard vector sizing.
   ============================================================================== */

.aspect-16-9 {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
}

.aspect-4-3 {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

.aspect-1-1 {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
}

.aspect-3-2 {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
}

.aspect-21-9 {
  aspect-ratio: 21 / 9;
  object-fit: cover;
  width: 100%;
}

/* Icon Sizing Tokens */
.icon-xs { font-size: var(--font-size-xs) !important; }
.icon-sm { font-size: var(--font-size-sm) !important; }
.icon-md { font-size: var(--font-size-md) !important; }
.icon-lg { font-size: var(--font-size-xl) !important; }
.icon-xl { font-size: var(--font-size-2xl) !important; }

/* ==============================================================================
   10. LOGICAL PROPERTIES (RTL & LTR SUPPORT)
   Full bidirectional support without hardcoded left/right breakage.
   ============================================================================== */

[dir="rtl"] {
  text-align: right;
}

[dir="rtl"] .ms-auto {
  margin-inline-start: auto !important;
}

[dir="rtl"] .me-auto {
  margin-inline-end: auto !important;
}

/* Logical Spacing Utility Classes */
.m-space-1 { margin: var(--space-1) !important; }
.m-space-2 { margin: var(--space-2) !important; }
.m-space-3 { margin: var(--space-3) !important; }
.m-space-4 { margin: var(--space-4) !important; }
.m-space-6 { margin: var(--space-6) !important; }
.m-space-8 { margin: var(--space-8) !important; }

.p-space-1 { padding: var(--space-1) !important; }
.p-space-2 { padding: var(--space-2) !important; }
.p-space-3 { padding: var(--space-3) !important; }
.p-space-4 { padding: var(--space-4) !important; }
.p-space-6 { padding: var(--space-6) !important; }
.p-space-8 { padding: var(--space-8) !important; }

.gap-space-1 { gap: var(--space-1) !important; }
.gap-space-2 { gap: var(--space-2) !important; }
.gap-space-3 { gap: var(--space-3) !important; }
.gap-space-4 { gap: var(--space-4) !important; }
.gap-space-6 { gap: var(--space-6) !important; }
.gap-space-8 { gap: var(--space-8) !important; }

/* Logical Alignment Utilities */
.text-start-logical { text-align: start !important; }
.text-end-logical { text-align: end !important; }

/* ==============================================================================
   11. ACCESSIBILITY & TEXT SCALING
   Adapts gracefully when user increases device / browser base font size.
   ============================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High Contrast Mode Adjustments */
@media (forced-colors: active) {
  .btn-primary-brand,
  .btn-main,
  .btn-secondary-brand {
    border: 2px solid ButtonText !important;
  }
}

/* Container Utility */
.design-system-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}