/**
 * Homelink Real Estate - Unified Professional Design System & Core Stylesheet
 * Strict Brand Colors:
 * - Primary Blue: #0B3D91
 * - Gold:         #F5B301
 * - Dark Navy:    #0E1B2E
 * - Light Gray:   #E5E7EB
 */

/* ==========================================================================
   1. Centralized Design Tokens (Light Theme Default)
   ========================================================================== */
:root {
  /* Primitive Brand Colors */
  --hl-blue: #0B3D91;
  --hl-blue-hover: #082d6b;
  --hl-blue-subtle: rgba(11, 61, 145, 0.08);
  --hl-blue-rgb: 11, 61, 145;

  --hl-gold: #F5B301;
  --hl-gold-hover: #dca000;
  --hl-gold-subtle: rgba(245, 179, 1, 0.12);
  --hl-gold-rgb: 245, 179, 1;

  --hl-navy: #0E1B2E;
  --hl-navy-hover: #0a1422;
  --hl-navy-subtle: rgba(14, 27, 46, 0.05);
  --hl-navy-rgb: 14, 27, 46;

  --hl-gray: #E5E7EB;
  --hl-gray-light: #F8FAFC;
  --hl-gray-border: #E5E7EB;

  /* Semantic Light Mode Tokens */
  --hl-bg-page: #F8FAFC;
  --hl-bg-section: #ffffff;
  --hl-bg-section-alt: #F8FAFC;
  --hl-bg-surface: #ffffff;
  --hl-bg-card: #ffffff;
  --hl-bg-elevated: #F1F5F9;
  --hl-bg-input: #ffffff;

  --hl-text-heading: #0E1B2E;
  --hl-text-primary: #1E293B;
  --hl-text-secondary: #475569;
  --hl-text-muted: #64748B;
  --hl-text-inverse: #ffffff;

  --hl-border: #E2E8F0;
  --hl-border-focus: var(--hl-blue);
  --hl-divider: #E5E7EB;

  --hl-shadow-xs: 0 1px 2px 0 rgba(14, 27, 46, 0.05);
  --hl-shadow-sm: 0 2px 6px -1px rgba(14, 27, 46, 0.06), 0 2px 4px -2px rgba(14, 27, 46, 0.04);
  --hl-shadow-md: 0 8px 20px -3px rgba(14, 27, 46, 0.08), 0 4px 6px -4px rgba(14, 27, 46, 0.03);
  --hl-shadow-lg: 0 16px 32px -4px rgba(14, 27, 46, 0.12), 0 6px 12px -6px rgba(14, 27, 46, 0.05);
  --hl-shadow-hover: 0 20px 36px -6px rgba(11, 61, 145, 0.14);

  --hl-radius-sm: 6px;
  --hl-radius-md: 10px;
  --hl-radius-lg: 14px;
  --hl-radius-full: 9999px;

  --hl-transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  --hl-focus-ring: 0 0 0 3px rgba(245, 179, 1, 0.5);
}

/* ==========================================================================
   2. Dark Mode Semantic Tokens (Dark Navy Foundation)
   ========================================================================== */
[data-theme="dark"] {
  --hl-bg-page: #0E1B2E;
  --hl-bg-section: #0E1B2E;
  --hl-bg-section-alt: #0A1422;
  --hl-bg-surface: #152438;
  --hl-bg-card: #152438;
  --hl-bg-elevated: #1B2D46;
  --hl-bg-input: #18283E;

  --hl-text-heading: #FFFFFF;
  --hl-text-primary: #E2E8F0;
  --hl-text-secondary: #CBD5E1;
  --hl-text-muted: #94A3B8;
  --hl-text-inverse: #0E1B2E;

  --hl-border: rgba(229, 231, 235, 0.14);
  --hl-border-focus: var(--hl-gold);
  --hl-divider: rgba(229, 231, 235, 0.12);

  --hl-blue-subtle: rgba(11, 61, 145, 0.35);

  --hl-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --hl-shadow-sm: 0 2px 6px -1px rgba(0, 0, 0, 0.4);
  --hl-shadow-md: 0 8px 20px -3px rgba(0, 0, 0, 0.5);
  --hl-shadow-lg: 0 16px 32px -4px rgba(0, 0, 0, 0.6);
  --hl-shadow-hover: 0 20px 36px -6px rgba(245, 179, 1, 0.18);
}

/* Base Body Application & Global Anti-Overflow (Preserves Sticky Header Positioning) */
html, body {
  overflow-x: clip !important;
  max-width: 100vw;
  width: 100%;
}

body {
  background-color: var(--hl-bg-page) !important;
  color: var(--hl-text-primary) !important;
  font-family: var(--default-font);
  font-size: 0.95rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   3. Typography Hierarchy & Refinement
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--heading-font);
  color: var(--hl-text-heading) !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

h1, .h1 { font-size: 2.5rem; letter-spacing: -0.03em; }
h2, .h2 { font-size: 2rem; }
h3, .h3 { font-size: 1.5rem; }
h4, .h4 { font-size: 1.25rem; }
h5, .h5 { font-size: 1.1rem; }
h6, .h6 { font-size: 0.95rem; }

p {
  color: var(--hl-text-secondary);
  margin-bottom: 1rem;
}

.text-muted {
  color: var(--hl-text-muted) !important;
}

.section-title {
  text-align: center;
  padding-bottom: 2.5rem;
}

.section-title h2 {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hl-blue) !important;
  margin-bottom: 0.5rem;
}

[data-theme="dark"] .section-title h2 {
  color: var(--hl-gold) !important;
}

.section-title .description-title {
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--hl-text-heading);
  letter-spacing: -0.025em;
}

/* ==========================================================================
   4. Buttons, Micro-Interactions & Form Controls
   ========================================================================== */
.btn {
  font-family: var(--nav-font);
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: var(--hl-radius-sm);
  padding: 0.6rem 1.4rem;
  transition: var(--hl-transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px; /* WCAG 2.2 touch target */
}

.btn-brand-primary {
  background-color: var(--hl-blue) !important;
  border: 1px solid var(--hl-blue) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(11, 61, 145, 0.2);
}

.btn-brand-primary:hover,
.btn-brand-primary:focus {
  background-color: var(--hl-blue-hover) !important;
  border-color: var(--hl-blue-hover) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(11, 61, 145, 0.35);
  transform: translateY(-1px);
}

.btn-brand-gold {
  background-color: var(--hl-gold) !important;
  border: 1px solid var(--hl-gold) !important;
  color: var(--hl-navy) !important;
  box-shadow: 0 2px 8px rgba(245, 179, 1, 0.25);
}

.btn-brand-gold:hover,
.btn-brand-gold:focus {
  background-color: var(--hl-gold-hover) !important;
  border-color: var(--hl-gold-hover) !important;
  color: var(--hl-navy) !important;
  box-shadow: 0 4px 14px rgba(245, 179, 1, 0.4);
  transform: translateY(-1px);
}

.btn-brand-outline {
  background-color: transparent !important;
  border: 1.5px solid var(--hl-blue) !important;
  color: var(--hl-blue) !important;
}

.btn-brand-outline:hover,
.btn-brand-outline:focus {
  background-color: var(--hl-blue) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

[data-theme="dark"] .btn-brand-outline {
  border-color: var(--hl-gold) !important;
  color: var(--hl-gold) !important;
}

[data-theme="dark"] .btn-brand-outline:hover {
  background-color: var(--hl-gold) !important;
  color: var(--hl-navy) !important;
}

/* Modern Brand Focus Ring (WCAG 2.2 AA Compliant, No Harsh Floating Outlines) */
a:focus-visible,
button:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(11, 61, 145, 0.28) !important;
}

[data-theme="dark"] a:focus-visible,
[data-theme="dark"] button:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(245, 179, 1, 0.35) !important;
}

/* Form Inputs - Sleek, Clean, Modern Brand Focus */
.form-control,
.form-select,
input,
select,
textarea {
  background-color: var(--hl-bg-input) !important;
  border: 1px solid var(--hl-border) !important;
  color: var(--hl-text-primary) !important;
  border-radius: var(--hl-radius-sm);
  padding: 0.65rem 0.95rem;
  font-size: 0.92rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  min-height: 44px;
  outline: none !important;
}

.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--hl-blue) !important;
  box-shadow: 0 0 0 3.5px rgba(11, 61, 145, 0.14) !important;
  background-color: var(--hl-bg-input) !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: var(--hl-gold) !important;
  box-shadow: 0 0 0 3.5px rgba(245, 179, 1, 0.22) !important;
}

.form-control::placeholder,
textarea::placeholder,
input::placeholder {
  color: var(--hl-text-muted) !important;
}

/* ==========================================================================
   5. Header & Navigation (Smooth Sticky Performance Across All Viewports)
   ========================================================================== */
.header,
.header.sticky-top {
  position: sticky !important;
  top: 0 !important;
  z-index: 1030 !important;
  width: 100% !important;
  background-color: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hl-border);
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

[data-theme="dark"] .header,
[data-theme="dark"] .header.sticky-top {
  background-color: rgba(14, 27, 46, 0.96) !important;
  border-bottom-color: rgba(229, 231, 235, 0.12);
}

.header.scrolled,
.header.header-scrolled {
  box-shadow: 0 6px 24px -2px rgba(14, 27, 46, 0.1) !important;
}

[data-theme="dark"] .header.scrolled,
[data-theme="dark"] .header.header-scrolled {
  box-shadow: 0 6px 28px -2px rgba(0, 0, 0, 0.55) !important;
}

/* Smooth Topbar Glide on Scroll */
.header .topbar {
  max-height: 40px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, padding 0.3s ease;
}

.header.scrolled .topbar,
.header.header-scrolled .topbar {
  max-height: 0 !important;
  opacity: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
  pointer-events: none;
}

.topbar {
  background-color: var(--hl-navy) !important;
  color: var(--hl-gray) !important;
  font-size: 0.82rem;
  padding: 6px 0;
  border-bottom: 1px solid rgba(229, 231, 235, 0.08);
  letter-spacing: 0.01em;
}

.topbar a {
  color: var(--hl-gray) !important;
  text-decoration: none;
  transition: var(--hl-transition);
}

.topbar a:hover {
  color: var(--hl-gold) !important;
}

.topbar .container,
.branding .container {
  max-width: 1360px !important;
}

.branding {
  padding: 10px 0;
  background-color: transparent !important;
}

/* Reset legacy template padding and pseudo-element underlines completely */
.navmenu > ul > li {
  padding: 0 !important;
  margin: 0 !important;
}

.navmenu > ul > li > a:before,
.navmenu a:hover:before,
.navmenu li:hover > a:before,
.navmenu .active:before {
  display: none !important;
  content: none !important;
  visibility: hidden !important;
  width: 0 !important;
}

.navmenu {
  display: flex;
  align-items: center;
}

/* Desktop Main Navigation List - Clean, Seamless, No Card/Box Shadow */
@media (min-width: 1200px) {
  .navmenu > ul {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
}

.navmenu a,
.navmenu a:focus {
  font-family: var(--nav-font);
  font-weight: 500;
  font-size: 0.91rem;
  color: var(--hl-text-secondary) !important;
  padding: 8px 11px;
  transition: var(--hl-transition);
  position: relative;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.navmenu a::after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 11px;
  right: 11px;
  height: 2.5px;
  background-color: var(--hl-gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 2px;
}

.navmenu a:hover::after,
.navmenu .active::after,
.navmenu a.active::after,
.navmenu li.active > a::after {
  transform: scaleX(1);
}

.navmenu a:hover,
.navmenu .active,
.navmenu .active:focus,
.navmenu a.active {
  color: var(--hl-blue) !important;
}

[data-theme="dark"] .navmenu a:hover,
[data-theme="dark"] .navmenu .active,
[data-theme="dark"] .navmenu a.active {
  color: var(--hl-gold) !important;
}

/* Intermediate Laptop / Desktop Scaling (1200px - 1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
  .navmenu a,
  .navmenu a:focus {
    padding: 8px 8px;
    font-size: 0.86rem;
  }
  .navmenu a::after {
    left: 8px;
    right: 8px;
  }
  .header-action-group {
    gap: 6px;
  }
  .header-action-btn {
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
  }
  .header-action-group .btn-brand-primary {
    font-size: 0.82rem !important;
    padding: 0.45rem 0.85rem !important;
    height: 36px !important;
    min-height: 36px !important;
  }
}

/* Dropdown Menu ONLY - Styled as floating card */
.navmenu .dropdown ul {
  background-color: var(--hl-bg-surface) !important;
  border: 1px solid var(--hl-border) !important;
  border-radius: var(--hl-radius-md);
  box-shadow: 0 12px 32px -4px rgba(14, 27, 46, 0.16);
  padding: 8px !important;
}

.navmenu .dropdown ul a {
  padding: 9px 16px;
  border-radius: var(--hl-radius-sm);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--hl-text-primary) !important;
}

.navmenu .dropdown ul a::after {
  display: none !important;
}

.navmenu .dropdown ul a:hover {
  background-color: var(--hl-blue-subtle) !important;
  color: var(--hl-blue) !important;
  transform: translateX(3px);
}

[data-theme="dark"] .navmenu .dropdown ul a:hover {
  background-color: rgba(245, 179, 1, 0.1) !important;
  color: var(--hl-gold) !important;
}

.header-action-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (min-width: 1200px) {
  .header-action-group .btn-brand-primary {
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    padding: 0.55rem 1.15rem !important;
    height: 40px !important;
    min-height: 40px !important;
  }
}

.header-action-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--hl-border);
  background: var(--hl-bg-surface);
  color: var(--hl-text-heading);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  cursor: pointer;
  transition: var(--hl-transition);
  text-decoration: none;
}

.header-action-btn:hover {
  background: var(--hl-blue-subtle);
  color: var(--hl-blue);
  border-color: var(--hl-blue);
  transform: translateY(-1px);
}

[data-theme="dark"] .header-action-btn:hover {
  color: var(--hl-gold);
  border-color: var(--hl-gold);
  background: rgba(245, 179, 1, 0.1);
}

.header-action-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background-color: var(--hl-gold);
  color: var(--hl-navy);
  font-size: 0.68rem;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

@media (max-width: 480px) {
  .header .logo img {
    height: 32px;
  }
  .header-action-btn {
    width: 36px;
    height: 36px;
    font-size: 0.92rem;
  }
  .header-action-group {
    gap: 5px;
  }
  .topbar {
    font-size: 0.76rem;
  }
}

/* ==========================================================================
   Mobile Header & Offcanvas Drawer Architecture (< 1200px)
   ========================================================================== */
@media (max-width: 1199px) {
  .header .branding .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .header .logo {
    order: 1 !important;
    margin-right: auto !important;
    flex-shrink: 0 !important;
  }

  .header .logo img {
    max-height: 34px !important;
    width: auto !important;
  }

  .header-action-group {
    order: 2 !important;
    margin-right: 8px !important;
    gap: 6px !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }

  .header-action-btn {
    width: 38px !important;
    height: 38px !important;
    font-size: 0.95rem !important;
  }

  /* Hide Submit Property in the top bar on mobile/tablet to eliminate crowding & overflow */
  .header-action-group .btn-brand-primary {
    display: none !important;
  }

  .navmenu {
    order: 3 !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Hamburger Toggle: Circular, balanced brand button at far right */
  .mobile-nav-toggle {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    border: 1px solid var(--hl-border) !important;
    background: var(--hl-bg-surface) !important;
    color: var(--hl-text-heading) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
    margin: 0 !important;
    transition: var(--hl-transition) !important;
  }

  .mobile-nav-toggle:hover {
    background-color: var(--hl-blue-subtle) !important;
    color: var(--hl-blue) !important;
    border-color: var(--hl-blue) !important;
  }

  [data-theme="dark"] .mobile-nav-toggle {
    background: var(--hl-bg-card) !important;
    border-color: var(--hl-border) !important;
    color: var(--hl-text-heading) !important;
  }

  [data-theme="dark"] .mobile-nav-toggle:hover {
    background-color: rgba(245, 179, 1, 0.12) !important;
    color: var(--hl-gold) !important;
    border-color: var(--hl-gold) !important;
  }

  /* Submenu Dropdown formatting inside mobile menu */
  .navmenu .dropdown ul {
    position: static !important;
    display: none;
    box-shadow: none !important;
    border: 1px solid var(--hl-border) !important;
    background-color: var(--hl-bg-card) !important;
    border-radius: var(--hl-radius-md) !important;
    padding: 6px 8px !important;
    margin: 6px 0 6px 8px !important;
  }

  .navmenu .dropdown > .dropdown-active {
    display: block !important;
  }

  .navmenu .dropdown ul a {
    padding: 8px 12px !important;
    font-size: 0.88rem !important;
  }
}

/* ==========================================================================
   Full-Screen Active Mobile Navigation Overlay & Drawer
   (CRITICAL FIX: Header backdrop-filter removed when active to prevent trapping fixed drawer)
   ========================================================================== */
body.mobile-nav-active {
  overflow: hidden !important;
}

body.mobile-nav-active .header,
body.mobile-nav-active .header.sticky-top {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  transform: none !important;
  overflow: visible !important;
  z-index: 99999 !important;
}

body.mobile-nav-active .branding,
body.mobile-nav-active .branding .container {
  overflow: visible !important;
}

/* Backdrop Dimmer: Spans entire viewport smoothly */
body.mobile-nav-active .navmenu {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: rgba(14, 27, 46, 0.78) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 99998 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: block !important;
  animation: fadeInBackdrop 0.25s ease-out !important;
}

@keyframes fadeInBackdrop {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Offcanvas Drawer: Full height card anchored to viewport */
body.mobile-nav-active .navmenu > ul {
  display: flex !important;
  flex-direction: column !important;
  position: fixed !important;
  top: 16px !important;
  right: 16px !important;
  bottom: 16px !important;
  left: auto !important;
  width: min(320px, calc(100vw - 32px)) !important;
  height: calc(100vh - 32px) !important;
  height: calc(100dvh - 32px) !important;
  max-height: calc(100dvh - 32px) !important;
  background-color: var(--hl-bg-surface) !important;
  border: 1px solid var(--hl-border) !important;
  border-radius: var(--hl-radius-lg) !important;
  box-shadow: 0 25px 60px rgba(14, 27, 46, 0.45) !important;
  padding: 68px 18px 24px 18px !important;
  margin: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  z-index: 99999 !important;
  animation: drawerSlide 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes drawerSlide {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Close Button on Top Right of Drawer */
body.mobile-nav-active .mobile-nav-toggle {
  position: fixed !important;
  top: 26px !important;
  right: 26px !important;
  z-index: 100000 !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background-color: var(--hl-navy) !important;
  color: #ffffff !important;
  border: 1px solid rgba(245, 179, 1, 0.4) !important;
  box-shadow: 0 4px 14px rgba(14, 27, 46, 0.4) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.25rem !important;
  cursor: pointer !important;
}

body.mobile-nav-active .navmenu > ul > li {
  margin-bottom: 4px;
  list-style: none;
}

body.mobile-nav-active .navmenu a,
body.mobile-nav-active .navmenu a:focus {
  padding: 11px 16px !important;
  border-radius: var(--hl-radius-md) !important;
  font-size: 0.96rem !important;
  font-weight: 600 !important;
  color: var(--hl-text-heading) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  transition: var(--hl-transition) !important;
  text-decoration: none !important;
}

body.mobile-nav-active .navmenu a::after {
  display: none !important;
}

body.mobile-nav-active .navmenu a:hover {
  background-color: var(--hl-blue-subtle) !important;
  color: var(--hl-blue) !important;
  transform: translateX(3px);
}

body.mobile-nav-active .navmenu a.active {
  background-color: var(--hl-blue) !important;
  color: #ffffff !important;
}

[data-theme="dark"] body.mobile-nav-active .navmenu a:hover {
  background-color: rgba(245, 179, 1, 0.12) !important;
  color: var(--hl-gold) !important;
}

[data-theme="dark"] body.mobile-nav-active .navmenu a.active {
  background-color: var(--hl-gold) !important;
  color: var(--hl-navy) !important;
}

@media (max-width: 575px) {
  .header .logo img {
    max-height: 28px !important;
  }
  .header-action-btn {
    width: 35px !important;
    height: 35px !important;
    font-size: 0.9rem !important;
  }
  .header-action-group {
    gap: 4px !important;
    margin-right: 4px !important;
  }
  .mobile-nav-toggle {
    width: 35px !important;
    height: 35px !important;
    font-size: 1.15rem !important;
  }
  .topbar {
    display: none !important;
  }
}

/* ==========================================================================
   6. Unified Premium Property Card System
   ========================================================================== */
.listing-card,
.prop-card {
  background: var(--hl-bg-card) !important;
  border: 1px solid var(--hl-border) !important;
  border-radius: var(--hl-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: var(--hl-transition);
  box-shadow: var(--hl-shadow-sm);
  position: relative;
}

.listing-card:hover,
.prop-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--hl-shadow-hover);
  border-color: rgba(11, 61, 145, 0.35) !important;
}

[data-theme="dark"] .listing-card:hover,
[data-theme="dark"] .prop-card:hover {
  border-color: var(--hl-gold) !important;
}

.listing-card .listing-img,
.prop-card .prop-card-media {
  position: relative;
  overflow: hidden;
  height: 230px;
  background-color: var(--hl-navy);
}

.listing-card .listing-img img,
.prop-card .prop-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.listing-card:hover .listing-img img,
.prop-card:hover .prop-card-media img {
  transform: scale(1.05);
}

/* Property Badges */
.listing-tags {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  z-index: 2;
}

.tag-badge {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: var(--hl-radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tag-badge-gold {
  background-color: var(--hl-gold);
  color: var(--hl-navy);
}

.tag-badge-navy {
  background-color: var(--hl-navy);
  color: #ffffff;
}

.tag-badge-blue {
  background-color: var(--hl-blue);
  color: #ffffff;
}

/* Card Floating Action Buttons */
.card-save-btn,
.card-compare-btn {
  position: absolute;
  top: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(14, 27, 46, 0.65);
  backdrop-filter: blur(8px);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: var(--hl-transition);
}

.card-save-btn { right: 12px; }
.card-compare-btn { right: 54px; }

.card-save-btn:hover,
.card-save-btn.active {
  background: #ffffff;
  color: #e11d48;
}

.card-compare-btn:hover,
.card-compare-btn.active {
  background: var(--hl-gold);
  color: var(--hl-navy);
}

.listing-card .listing-body,
.prop-card .prop-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.listing-card .listing-price,
.prop-card .price-tag {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--hl-blue);
  margin-bottom: 4px;
}

[data-theme="dark"] .listing-card .listing-price,
[data-theme="dark"] .prop-card .price-tag {
  color: var(--hl-gold) !important;
}

.listing-card .listing-title,
.prop-card h4 {
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 8px;
  color: var(--hl-text-heading);
}

.listing-card .listing-title a,
.prop-card h4 a {
  color: inherit;
  text-decoration: none;
  transition: var(--hl-transition);
}

.listing-card .listing-title a:hover,
.prop-card h4 a:hover {
  color: var(--hl-blue);
}

[data-theme="dark"] .listing-card .listing-title a:hover,
[data-theme="dark"] .prop-card h4 a:hover {
  color: var(--hl-gold);
}

.listing-card .listing-address,
.prop-card .location-line {
  font-size: 0.86rem;
  color: var(--hl-text-muted);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.listing-card .listing-specs,
.prop-card .spec-list {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--hl-border);
  border-bottom: 1px solid var(--hl-border);
  margin-bottom: 16px;
  font-size: 0.86rem;
  color: var(--hl-text-secondary);
  list-style: none;
}

.listing-card .listing-specs span,
.prop-card .spec-list li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.listing-card .listing-specs i,
.prop-card .spec-list i {
  color: var(--hl-blue);
  font-size: 0.95rem;
}

[data-theme="dark"] .listing-card .listing-specs i,
[data-theme="dark"] .prop-card .spec-list i {
  color: var(--hl-gold);
}

.listing-card .listing-footer,
.prop-card .prop-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.listing-card .details-link {
  color: var(--hl-blue);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--hl-transition);
}

.listing-card .details-link:hover {
  color: var(--hl-gold);
  transform: translateX(3px);
}

/* List View Variant */
.listings-list-view .listing-card {
  flex-direction: row;
  min-height: 240px;
}

.listings-list-view .listing-card .listing-img {
  width: 320px;
  flex-shrink: 0;
  height: auto;
}

@media (max-width: 991px) {
  .listings-list-view .listing-card {
    flex-direction: column;
  }
  .listings-list-view .listing-card .listing-img {
    width: 100%;
    height: 230px;
  }
}

/* ==========================================================================
   7. Homepage Hero & Animated Architectural Experience
   ========================================================================== */
.hero {
  position: relative;
  padding: 100px 0 80px 0;
  background-color: var(--hl-bg-section);
  overflow: hidden;
}

/* Subtle Architectural Grid Background */
.hero-bg-pattern {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(to right, rgba(11, 61, 145, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 61, 145, 0.04) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  z-index: 0;
}

[data-theme="dark"] .hero-bg-pattern {
  background-image: 
    linear-gradient(to right, rgba(229, 231, 235, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(229, 231, 235, 0.03) 1px, transparent 1px);
}

/* Ambient Brand Glow Mesh */
.hero-glow-1 {
  position: absolute;
  top: -15%;
  left: 15%;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(11, 61, 145, 0.12) 0%, rgba(11, 61, 145, 0) 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
  animation: heroGlowPulse 10s ease-in-out infinite alternate;
}

.hero-glow-2 {
  position: absolute;
  bottom: 0%;
  right: 10%;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 179, 1, 0.09) 0%, rgba(245, 179, 1, 0) 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
  animation: heroGlowPulse 14s ease-in-out infinite alternate-reverse;
}

[data-theme="dark"] .hero-glow-1 {
  background: radial-gradient(circle, rgba(11, 61, 145, 0.24) 0%, rgba(11, 61, 145, 0) 70%);
}

[data-theme="dark"] .hero-glow-2 {
  background: radial-gradient(circle, rgba(245, 179, 1, 0.14) 0%, rgba(245, 179, 1, 0) 70%);
}

/* Architectural Linework Elements */
.hero-arch-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.hero-arch-line {
  position: absolute;
  stroke: var(--hl-blue);
  opacity: 0.15;
  transition: opacity 0.5s ease;
}

[data-theme="dark"] .hero-arch-line {
  stroke: var(--hl-gold);
  opacity: 0.2;
}

.hero-arch-line-left {
  top: 15%;
  left: 3%;
  width: 140px;
  animation: heroFloatSlow 18s ease-in-out infinite;
}

.hero-arch-line-right {
  top: 25%;
  right: 4%;
  width: 160px;
  animation: heroFloatSlow 22s ease-in-out infinite reverse;
}

@keyframes heroGlowPulse {
  0% { transform: scale(1) translate(0, 0); opacity: 0.55; }
  50% { transform: scale(1.12) translate(20px, -15px); opacity: 0.85; }
  100% { transform: scale(0.94) translate(-15px, 15px); opacity: 0.6; }
}

@keyframes heroFloatSlow {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(1.5deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

/* Staggered Hero Content Entrance Keyframe */
@keyframes heroFadeInUp {
  0% {
    opacity: 0;
    transform: translateY(22px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Ambient Subtle Shimmer for Hero Badge */
@keyframes heroBadgeShimmer {
  0%, 100% {
    box-shadow: 0 2px 10px rgba(245, 179, 1, 0.14);
    border-color: rgba(245, 179, 1, 0.35);
  }
  50% {
    box-shadow: 0 4px 18px rgba(245, 179, 1, 0.3);
    border-color: rgba(245, 179, 1, 0.6);
  }
}

.hero-header {
  position: relative;
  z-index: 1;
}

.hero-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  border-radius: var(--hl-radius-full);
  background-color: var(--hl-gold-subtle);
  border: 1px solid rgba(245, 179, 1, 0.35);
  color: var(--hl-navy);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  animation: heroFadeInUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both, heroBadgeShimmer 6s ease-in-out infinite 0.9s;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, box-shadow;
}

.hero-badge-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(245, 179, 1, 0.35) !important;
}

[data-theme="dark"] .hero-badge-pill {
  background-color: rgba(245, 179, 1, 0.15);
  color: var(--hl-gold);
  border-color: rgba(245, 179, 1, 0.3);
}

.hero-header h1 {
  font-size: 3.25rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.15;
  margin-bottom: 1.2rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  animation: heroFadeInUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
  will-change: transform, opacity;
}

@media (max-width: 768px) {
  .hero-header h1 {
    font-size: 2.2rem;
  }
}

.hero-header p {
  font-size: 1.15rem;
  max-width: 680px;
  margin: 0 auto 2.25rem auto;
  color: var(--hl-text-secondary);
  animation: heroFadeInUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
  will-change: transform, opacity;
}

.search-bar {
  position: relative;
  z-index: 2;
  background: var(--hl-bg-surface) !important;
  border: 1px solid var(--hl-border);
  border-radius: var(--hl-radius-lg);
  padding: 24px;
  box-shadow: 0 16px 36px -4px rgba(14, 27, 46, 0.09);
  margin-bottom: 3.5rem;
  animation: heroFadeInUp 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
  will-change: transform, box-shadow;
}

.search-bar:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 48px -6px rgba(14, 27, 46, 0.12);
}

.search-bar:focus-within {
  transform: translateY(-2px);
  border-color: rgba(11, 61, 145, 0.45);
  box-shadow: 0 24px 50px -4px rgba(11, 61, 145, 0.16);
}

[data-theme="dark"] .search-bar {
  box-shadow: 0 16px 40px -4px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .search-bar:hover,
[data-theme="dark"] .search-bar:focus-within {
  border-color: rgba(245, 179, 1, 0.4);
  box-shadow: 0 24px 52px -4px rgba(0, 0, 0, 0.7);
}

/* ==========================================================================
   Smooth Scroll Motion & Reveal System (WCAG 2.2 AA / Prefers-Reduced-Motion)
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

[data-reveal="fade-up"] {
  transform: translateY(28px);
}

[data-reveal="fade-in"] {
  transform: none;
}

[data-reveal="slide-left"] {
  transform: translateX(-30px);
}

[data-reveal="slide-right"] {
  transform: translateX(30px);
}

[data-reveal="scale"] {
  transform: scale(0.95);
}

[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

[data-reveal].delay-1 { transition-delay: 0.1s; }
[data-reveal].delay-2 { transition-delay: 0.2s; }
[data-reveal].delay-3 { transition-delay: 0.3s; }
[data-reveal].delay-4 { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-glow-1,
  .hero-glow-2,
  .hero-arch-line-left,
  .hero-arch-line-right {
    animation: none !important;
  }
}

/* ==========================================================================
   8. Complete Footer Redesign (Strict Four-Column Architecture)
   ========================================================================== */
.footer-redesign {
  background-color: #0A1422 !important;
  color: #E2E8F0 !important;
  border-top: 1px solid rgba(229, 231, 235, 0.12);
  position: relative;
  padding-top: 0;
}

.footer-main-content {
  padding: 65px 0 45px 0;
}

.footer-col-heading {
  font-family: var(--nav-font);
  font-size: 0.92rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #FFFFFF !important;
  margin-bottom: 22px;
  position: relative;
  padding-bottom: 10px;
}

.footer-col-heading::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 2px;
  background-color: var(--hl-gold);
}

.footer-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links-list li {
  margin-bottom: 12px;
}

.footer-links-list a {
  color: #CBD5E1;
  text-decoration: none;
  font-size: 0.92rem;
  transition: var(--hl-transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.footer-links-list a:hover {
  color: var(--hl-gold);
  transform: translateX(4px);
}

.footer-contact-compact {
  font-size: 0.9rem;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #CBD5E1;
  line-height: 1.45;
}

.footer-contact-item i {
  color: var(--hl-gold);
  font-size: 1.05rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.footer-newsletter-widget {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 16px;
  border-radius: var(--hl-radius-md);
}

.footer-newsletter-widget .form-control {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  font-size: 0.88rem;
}

.footer-newsletter-widget .form-control::placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
}

.footer-social-links {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.footer-social-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: var(--hl-transition);
}

.footer-social-btn:hover {
  background: var(--hl-gold);
  color: var(--hl-navy);
  border-color: var(--hl-gold);
  transform: translateY(-2px);
}

.footer-bottom-bar {
  border-top: 1px solid rgba(229, 231, 235, 0.1);
  padding: 22px 0;
  font-size: 0.84rem;
  color: #94A3B8;
}

.footer-bottom-bar a {
  color: #CBD5E1;
  text-decoration: none;
  transition: var(--hl-transition);
}

.footer-bottom-bar a:hover {
  color: var(--hl-gold);
}

/* Developer Credit Styling in Footer Bottom Bar */
.developer-credit {
  letter-spacing: 0.01em;
}

.developer-credit-link {
  color: var(--hl-gold) !important;
  text-decoration: none !important;
  display: inline-block;
  transition: color 0.22s ease, text-shadow 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform;
}

.developer-credit-link:hover {
  color: #ffc933 !important;
  text-shadow: 0 0 10px rgba(245, 179, 1, 0.45);
  transform: translateY(-1px);
  text-decoration: underline !important;
}

/* ==========================================================================
   Universal Smooth Hover Transitions & Elevation System
   ========================================================================== */
a,
button,
.btn,
.navmenu a,
.footer-links a,
.category-card,
.listing-card,
.prop-card,
.agent-card,
.hover-translate,
.feature-bullet-icon {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Unified Card & Block Hover Transitions */
.hover-translate,
.card-hover,
.pillar-card,
.contact-channel-card,
.feature-card,
.admin-stat-card,
.stat-block,
.quote-card,
.opportunity-card,
.process-step {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, background-color 0.25s ease !important;
  will-change: transform, box-shadow;
}

.hover-translate:hover,
.card-hover:hover,
.pillar-card:hover,
.contact-channel-card:hover,
.feature-card:hover,
.admin-stat-card:hover,
.stat-block:hover,
.opportunity-card:hover,
.process-step:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 36px -4px rgba(14, 27, 46, 0.12), 0 0 0 1px rgba(11, 61, 145, 0.08) !important;
}

[data-theme="dark"] .hover-translate:hover,
[data-theme="dark"] .card-hover:hover,
[data-theme="dark"] .pillar-card:hover,
[data-theme="dark"] .contact-channel-card:hover,
[data-theme="dark"] .feature-card:hover,
[data-theme="dark"] .admin-stat-card:hover,
[data-theme="dark"] .stat-block:hover,
[data-theme="dark"] .opportunity-card:hover,
[data-theme="dark"] .process-step:hover {
  box-shadow: 0 16px 40px -4px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(245, 179, 1, 0.2) !important;
  border-color: rgba(245, 179, 1, 0.35) !important;
}

/* Smooth zoom for images inside cards */
.card-img-top,
.listing-img img,
.prop-card-media img,
.category-card img,
.about-media-card img,
.agent-photo-wrap img {
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform;
}

.card:hover .card-img-top,
.about-media-card:hover img {
  transform: scale(1.04);
}

/* ==========================================================================
   9. Dark Mode Complete Component Coverage
   ========================================================================== */
[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-white,
[data-theme="dark"] .hero-stats-bar,
[data-theme="dark"] .table-light,
[data-theme="dark"] .card,
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer,
[data-theme="dark"] .lead-agent,
[data-theme="dark"] .team-card,
[data-theme="dark"] .form-card,
[data-theme="dark"] .sidebar-card,
[data-theme="dark"] .content-card,
[data-theme="dark"] .admin-stat-card,
[data-theme="dark"] .homelink-filter-toolbar,
[data-theme="dark"] .list-group-item {
  background-color: var(--hl-bg-card) !important;
  border-color: var(--hl-border) !important;
  color: var(--hl-text-primary) !important;
}

[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-body {
  color: var(--hl-text-primary) !important;
}

[data-theme="dark"] .table {
  color: var(--hl-text-primary) !important;
  border-color: var(--hl-border) !important;
}

[data-theme="dark"] .table th,
[data-theme="dark"] .table td {
  background-color: var(--hl-bg-surface) !important;
  border-color: var(--hl-border) !important;
  color: var(--hl-text-primary) !important;
}

[data-theme="dark"] .table-light th,
[data-theme="dark"] .table thead th {
  background-color: var(--hl-bg-elevated) !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .dropdown-menu {
  background-color: var(--hl-bg-surface) !important;
  border: 1px solid var(--hl-border) !important;
  box-shadow: var(--hl-shadow-lg) !important;
}

[data-theme="dark"] .dropdown-item {
  color: var(--hl-text-primary) !important;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
  background-color: var(--hl-bg-elevated) !important;
  color: var(--hl-gold) !important;
}

[data-theme="dark"] .accordion-item {
  background-color: var(--hl-bg-card) !important;
  border-color: var(--hl-border) !important;
}

[data-theme="dark"] .accordion-button {
  background-color: var(--hl-bg-surface) !important;
  color: var(--hl-text-heading) !important;
  border-color: var(--hl-border) !important;
}

[data-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: var(--hl-bg-elevated) !important;
  color: var(--hl-gold) !important;
}

[data-theme="dark"] .accordion-button::after {
  filter: invert(1);
}

[data-theme="dark"] .accordion-body {
  background-color: var(--hl-bg-card) !important;
  color: var(--hl-text-primary) !important;
}

[data-theme="dark"] .pagination .page-link {
  background-color: var(--hl-bg-card) !important;
  border-color: var(--hl-border) !important;
  color: var(--hl-text-primary) !important;
}

[data-theme="dark"] .pagination .page-item.active .page-link {
  background-color: var(--hl-gold) !important;
  border-color: var(--hl-gold) !important;
  color: var(--hl-navy) !important;
  font-weight: 700;
}

[data-theme="dark"] .modal-content {
  background-color: var(--hl-bg-surface) !important;
  border-color: var(--hl-border) !important;
  color: var(--hl-text-primary) !important;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
  border-color: var(--hl-border) !important;
}

[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

[data-theme="dark"] .page-title {
  background: linear-gradient(135deg, #070D17 0%, #0E1B2E 100%) !important;
  border-bottom: 1px solid rgba(245, 179, 1, 0.15);
}

[data-theme="dark"] .page-title h1,
[data-theme="dark"] .page-title p,
[data-theme="dark"] .page-title .breadcrumb a,
[data-theme="dark"] .page-title .breadcrumb-item.active {
  color: #FFFFFF !important;
}

[data-theme="dark"] .page-title .breadcrumb-item.active {
  color: var(--hl-gold) !important;
}

[data-theme="dark"] .nav-tabs .nav-link {
  color: var(--hl-text-secondary);
  border-color: transparent;
}

[data-theme="dark"] .nav-tabs .nav-link.active {
  background-color: var(--hl-bg-card) !important;
  border-color: var(--hl-border) var(--hl-border) transparent !important;
  color: var(--hl-gold) !important;
}

[data-theme="dark"] .badge.bg-light {
  background-color: var(--hl-bg-elevated) !important;
  color: var(--hl-text-primary) !important;
  border-color: var(--hl-border) !important;
}

[data-theme="dark"] .input-group-text {
  background-color: var(--hl-bg-elevated) !important;
  border-color: var(--hl-border) !important;
  color: var(--hl-text-secondary) !important;
}

[data-theme="dark"] hr,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-start,
[data-theme="dark"] .border-end {
  border-color: var(--hl-border) !important;
}

/* ==========================================================================
   10. Property Comparison Bar & Widgets
   ========================================================================== */
.compare-floating-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(140%);
  background: var(--hl-navy);
  color: #ffffff;
  border: 1px solid rgba(245, 179, 1, 0.4);
  border-radius: var(--hl-radius-full);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  z-index: 1050;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.compare-floating-bar.active {
  transform: translateX(-50%) translateY(0);
}

.compare-thumb-list {
  display: flex;
  align-items: center;
  gap: 8px;
}

.compare-thumb-item {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--hl-gold);
  overflow: hidden;
}

.compare-thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Toast Notifications */
.homelink-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.homelink-toast {
  background: var(--hl-navy);
  color: #ffffff;
  border-left: 4px solid var(--hl-gold);
  border-radius: var(--hl-radius-sm);
  padding: 12px 20px;
  font-size: 0.9rem;
  box-shadow: var(--hl-shadow-lg);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 280px;
  animation: slideToastIn 0.3s ease-out forwards;
}

@keyframes slideToastIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ==========================================================================
   11. Admin & Financial Calculator Specific Visuals
   ========================================================================== */
.admin-stat-card {
  background: var(--hl-bg-card);
  border: 1px solid var(--hl-border);
  border-radius: var(--hl-radius-md);
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: var(--hl-shadow-xs);
  transition: var(--hl-transition);
}

.admin-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--hl-shadow-sm);
}

.admin-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--hl-radius-md);
  background-color: var(--hl-blue-subtle);
  color: var(--hl-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

[data-theme="dark"] .admin-stat-icon {
  background-color: rgba(245, 179, 1, 0.15);
  color: var(--hl-gold);
}

.admin-stat-val {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--hl-text-heading);
}

.admin-stat-label {
  font-size: 0.82rem;
  color: var(--hl-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* Financial Calculator Progress & Visuals */
.calc-breakdown-bar {
  display: flex;
  height: 14px;
  border-radius: var(--hl-radius-full);
  overflow: hidden;
  background-color: var(--hl-border);
}

.bar-segment-principal {
  background-color: var(--hl-blue);
  transition: width 0.3s ease;
}

.bar-segment-tax {
  background-color: var(--hl-gold);
  transition: width 0.3s ease;
}

.bar-segment-insurance {
  background-color: rgba(11, 61, 145, 0.7);
  transition: width 0.3s ease;
}

.bar-segment-hoa {
  background-color: var(--hl-text-muted);
  transition: width 0.3s ease;
}

[data-theme="dark"] .bar-segment-principal {
  background-color: var(--hl-gold);
}

.letter-spacing-1 {
  letter-spacing: 0.08em;
}

/* ==========================================================================
   14. Homepage Refinements & Brand Identity Safeguards (Strict Palette Enforcement)
   ========================================================================== */

/* Strict Framework Color Token Overrides */
.text-primary {
  color: var(--hl-blue) !important;
}
[data-theme="dark"] .text-primary {
  color: var(--hl-gold) !important;
}
.bg-primary {
  background-color: var(--hl-blue) !important;
  color: #ffffff !important;
}
.bg-primary-subtle {
  background-color: var(--hl-blue-subtle) !important;
  color: var(--hl-blue) !important;
}
[data-theme="dark"] .bg-primary-subtle {
  background-color: rgba(245, 179, 1, 0.12) !important;
  color: var(--hl-gold) !important;
}
.text-warning {
  color: var(--hl-gold) !important;
}
.bg-warning {
  background-color: var(--hl-gold) !important;
  color: var(--hl-navy) !important;
}

/* Institutional Metric Stat Numbers */
.stat-metric-val {
  font-family: var(--heading-font);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--hl-blue) !important;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
[data-theme="dark"] .stat-metric-val {
  color: var(--hl-gold) !important;
}

/* Feature Bullet Icon (Exact Circular Geometry & Brand Styling) */
.feature-bullet-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50% !important;
  background-color: var(--hl-blue-subtle) !important;
  color: var(--hl-blue) !important;
  border: 1px solid rgba(11, 61, 145, 0.15) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.15rem;
  flex-shrink: 0;
  box-shadow: 0 2px 5px rgba(11, 61, 145, 0.06);
  transition: var(--hl-transition);
}
.feature-bullet-icon:hover {
  transform: scale(1.06);
  background-color: rgba(11, 61, 145, 0.15) !important;
}
[data-theme="dark"] .feature-bullet-icon {
  background-color: rgba(245, 179, 1, 0.12) !important;
  color: var(--hl-gold) !important;
  border-color: rgba(245, 179, 1, 0.25) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Category Cards & Full Gradient Overlay (Fixes floating middle box) */
.category-card {
  height: 230px;
  position: relative;
  overflow: hidden;
  border-radius: var(--hl-radius-lg) !important;
  border: 1px solid var(--hl-border);
  box-shadow: var(--hl-shadow-sm);
  transition: var(--hl-transition);
  display: block;
}
.category-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--hl-shadow-hover);
  border-color: rgba(11, 61, 145, 0.3);
}
.category-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.category-card:hover img {
  transform: scale(1.08);
}
.category-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(14, 27, 46, 0.94) 0%, rgba(14, 27, 46, 0.4) 55%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  z-index: 2;
  transition: var(--hl-transition);
}
.category-card:hover .category-card-overlay {
  background: linear-gradient(to top, rgba(14, 27, 46, 0.98) 0%, rgba(11, 61, 145, 0.6) 65%, transparent 100%);
}
.category-card-title {
  color: #ffffff !important;
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
  letter-spacing: -0.01em;
}
.category-card-link {
  color: var(--hl-gold) !important;
  font-weight: 600;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: var(--hl-transition);
}
.category-card:hover .category-card-link i {
  transform: translateX(4px);
}
.category-card-link i {
  transition: transform 0.25s ease;
}

/* Agent Cards & Action Buttons (Strict Brand Styling) */
.agent-card {
  border-radius: var(--hl-radius-lg) !important;
  overflow: hidden;
  border: 1px solid var(--hl-border) !important;
  background-color: var(--hl-bg-card) !important;
  box-shadow: var(--hl-shadow-sm);
  transition: var(--hl-transition);
}
.agent-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--hl-shadow-hover);
  border-color: rgba(11, 61, 145, 0.25) !important;
}
.agent-photo-wrap {
  height: 240px;
  position: relative;
  overflow: hidden;
  background-color: var(--hl-navy);
}
.agent-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.agent-card:hover .agent-photo-wrap img {
  transform: scale(1.06);
}
.agent-rating-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background-color: var(--hl-gold) !important;
  color: var(--hl-navy) !important;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 4px 10px;
  border-radius: var(--hl-radius-sm);
  box-shadow: 0 4px 12px rgba(14, 27, 46, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  z-index: 2;
  letter-spacing: 0.02em;
}
.agent-deal-metric {
  font-size: 0.82rem;
  color: var(--hl-text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}
.agent-deal-metric i {
  color: var(--hl-blue) !important;
  font-size: 0.95rem;
}
[data-theme="dark"] .agent-deal-metric i {
  color: var(--hl-gold) !important;
}
.agent-action-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: var(--hl-radius-md) !important;
  border: 1px solid var(--hl-border) !important;
  background-color: var(--hl-bg-surface) !important;
  color: var(--hl-navy) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.95rem;
  transition: var(--hl-transition);
  text-decoration: none;
}
[data-theme="dark"] .agent-action-btn {
  color: var(--hl-text-primary) !important;
  background-color: var(--hl-bg-elevated) !important;
  border-color: var(--hl-border) !important;
}
.agent-action-btn:hover {
  border-color: var(--hl-blue) !important;
  background-color: var(--hl-blue) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: var(--hl-shadow-sm);
}
[data-theme="dark"] .agent-action-btn:hover {
  border-color: var(--hl-gold) !important;
  background-color: var(--hl-gold) !important;
  color: var(--hl-navy) !important;
}

/* ==========================================================================
   15. Unified Enterprise Page Header, Breadcrumb System & Toolbar Architecture
   ========================================================================== */
.page-title {
  position: relative;
  background: linear-gradient(135deg, #0E1B2E 0%, #0B3D91 100%) !important;
  padding: 52px 0 48px !important;
  overflow: hidden;
  text-align: center;
  border-bottom: 1px solid rgba(229, 231, 235, 0.12);
}

.page-title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(rgba(245, 179, 1, 0.12) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.7;
  pointer-events: none;
}

.page-title .container {
  position: relative;
  z-index: 2;
  max-width: 1200px;
}

/* Unified Frosted-Glass Breadcrumb Capsule */
.page-title .breadcrumbs {
  margin-bottom: 1.25rem !important;
  display: flex !important;
  justify-content: center !important;
}

.page-title .breadcrumbs .breadcrumb {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: var(--hl-radius-full) !important;
  padding: 6px 20px !important;
  margin: 0 !important;
  list-style: none;
  box-shadow: 0 4px 16px rgba(14, 27, 46, 0.2);
}

.page-title .breadcrumbs .breadcrumb-item {
  font-family: var(--nav-font);
  font-size: 0.84rem;
  font-weight: 500;
  color: rgba(229, 231, 235, 0.75) !important;
  display: inline-flex;
  align-items: center;
}

.page-title .breadcrumbs .breadcrumb-item a {
  color: rgba(229, 231, 235, 0.9) !important;
  text-decoration: none;
  transition: var(--hl-transition);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.page-title .breadcrumbs .breadcrumb-item a:hover {
  color: var(--hl-gold) !important;
  transform: translateY(-1px);
}

.page-title .breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
  content: "/" !important;
  color: rgba(245, 179, 1, 0.65) !important;
  padding: 0 10px !important;
  font-weight: 400;
}

.page-title .breadcrumbs .breadcrumb-item.active,
.page-title .breadcrumbs .breadcrumb-item.current {
  color: var(--hl-gold) !important;
  font-weight: 700;
}

/* Page Title Typography Hierarchy - Guaranteed Crisp White Contrast in Both Modes */
.page-title h1,
.page-title .title-wrapper h1,
.page-title-heading {
  font-family: var(--heading-font);
  font-size: 2.35rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #FFFFFF !important;
  margin-bottom: 0.75rem;
  line-height: 1.2;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.page-title p,
.page-title .title-wrapper p,
.page-title-sub {
  font-family: var(--default-font);
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(229, 231, 235, 0.92) !important;
  max-width: 680px;
  margin: 0 auto;
}

/* Dark Mode Harmonization */
[data-theme="dark"] .page-title {
  background: linear-gradient(135deg, #070D17 0%, #0E1B2E 100%) !important;
  border-bottom-color: rgba(245, 179, 1, 0.15);
}

[data-theme="dark"] .page-title .breadcrumbs .breadcrumb {
  background: rgba(14, 27, 46, 0.65) !important;
  border-color: rgba(245, 179, 1, 0.25) !important;
}

/* Multi-Parameter Filter Toolbar */
.homelink-filter-toolbar {
  background: var(--hl-bg-surface);
  border: 1px solid var(--hl-border);
  border-radius: var(--hl-radius-lg);
  padding: 1.5rem;
  box-shadow: var(--hl-shadow-sm);
  margin-bottom: 2rem;
  transition: var(--hl-transition);
}

/* View Mode Segmented Toggle (Uniform Height & Baseline Alignment) */
.view-toggle-group {
  display: inline-flex;
  align-items: center;
  background: var(--hl-bg-surface);
  border: 1px solid var(--hl-border);
  border-radius: var(--hl-radius-md);
  padding: 3px;
  gap: 3px;
  height: 40px;
}

.view-toggle-btn,
.view-toggle-btn.btn,
.view-toggle-btn.btn-sm,
#view-mode-grid,
#view-mode-list {
  width: 34px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--hl-radius-sm) !important;
  border: none !important;
  background: transparent !important;
  color: var(--hl-text-secondary) !important;
  font-size: 1rem !important;
  transition: var(--hl-transition);
  cursor: pointer;
  box-shadow: none !important;
}

.view-toggle-btn:hover,
#view-mode-grid:hover,
#view-mode-list:hover {
  color: var(--hl-blue) !important;
  background: var(--hl-blue-subtle) !important;
}

.view-toggle-btn.active,
.view-toggle-btn.btn-brand-primary,
#view-mode-grid.active,
#view-mode-grid.btn-brand-primary,
#view-mode-list.active,
#view-mode-list.btn-brand-primary {
  background-color: var(--hl-blue) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(11, 61, 145, 0.25) !important;
}

[data-theme="dark"] .view-toggle-btn.active,
[data-theme="dark"] .view-toggle-btn.btn-brand-primary,
[data-theme="dark"] #view-mode-grid.active,
[data-theme="dark"] #view-mode-grid.btn-brand-primary,
[data-theme="dark"] #view-mode-list.active,
[data-theme="dark"] #view-mode-list.btn-brand-primary {
  background-color: var(--hl-gold) !important;
  color: var(--hl-navy) !important;
}

.sort-select {
  height: 40px !important;
  min-height: 40px !important;
  border-radius: var(--hl-radius-md) !important;
  font-size: 0.88rem !important;
}

/* ==========================================================================
   16. Navigation Pills, Segmented Tabs & Scroll-Top De-duplication
   ========================================================================== */

/* Unified Brand Navigation Pills (Replaces default browser/bootstrap blues) */
.nav-pills {
  background-color: var(--hl-bg-surface);
  border: 1px solid var(--hl-border);
  border-radius: var(--hl-radius-full);
  padding: 6px;
  display: inline-flex;
  gap: 6px !important;
  box-shadow: var(--hl-shadow-xs);
}

.nav-pills .nav-item {
  margin: 0;
}

.nav-pills .nav-link {
  font-family: var(--nav-font);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--hl-text-secondary) !important;
  background-color: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--hl-radius-full) !important;
  padding: 0.65rem 1.4rem !important;
  transition: var(--hl-transition);
  display: inline-flex;
  align-items: center;
  box-shadow: none !important;
  outline: none !important;
}

.nav-pills .nav-link i {
  color: var(--hl-blue);
  font-size: 1.05rem;
  transition: color 0.2s ease;
}

.nav-pills .nav-link:hover {
  color: var(--hl-blue) !important;
  background-color: var(--hl-blue-subtle) !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #ffffff !important;
  background-color: var(--hl-blue) !important;
  border-color: var(--hl-blue) !important;
  box-shadow: 0 4px 14px rgba(11, 61, 145, 0.25) !important;
}

.nav-pills .nav-link.active i {
  color: var(--hl-gold) !important;
}

.nav-pills .nav-link:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

.nav-pills .nav-link:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(11, 61, 145, 0.28) !important;
}

[data-theme="dark"] .nav-pills .nav-link:focus-visible {
  box-shadow: 0 0 0 3px rgba(245, 179, 1, 0.35) !important;
}

[data-theme="dark"] .nav-pills {
  background-color: var(--hl-bg-card);
  border-color: var(--hl-border);
}

[data-theme="dark"] .nav-pills .nav-link {
  color: var(--hl-text-secondary) !important;
}

[data-theme="dark"] .nav-pills .nav-link i {
  color: var(--hl-gold);
}

[data-theme="dark"] .nav-pills .nav-link:hover {
  background-color: var(--hl-bg-elevated) !important;
  color: var(--hl-gold) !important;
}

[data-theme="dark"] .nav-pills .nav-link.active {
  background-color: var(--hl-gold) !important;
  border-color: var(--hl-gold) !important;
  color: var(--hl-navy) !important;
  box-shadow: 0 4px 16px rgba(245, 179, 1, 0.25) !important;
}

[data-theme="dark"] .nav-pills .nav-link.active i {
  color: var(--hl-navy) !important;
}

/* Brand Navigation Tabs */
.nav-tabs {
  border-bottom: 2px solid var(--hl-border);
}
.nav-tabs .nav-link {
  font-family: var(--nav-font);
  font-weight: 600;
  color: var(--hl-text-secondary);
  border: none;
  border-bottom: 2.5px solid transparent;
  padding: 0.75rem 1.25rem;
  transition: var(--hl-transition);
  background: transparent;
}
.nav-tabs .nav-link:hover {
  color: var(--hl-blue);
  border-bottom-color: rgba(11, 61, 145, 0.3);
}
.nav-tabs .nav-link.active {
  color: var(--hl-blue) !important;
  border-bottom-color: var(--hl-gold) !important;
  background: transparent !important;
}
[data-theme="dark"] .nav-tabs .nav-link:hover {
  color: var(--hl-gold);
  border-bottom-color: rgba(245, 179, 1, 0.3);
}
[data-theme="dark"] .nav-tabs .nav-link.active {
  color: var(--hl-gold) !important;
  border-bottom-color: var(--hl-gold) !important;
}

/* De-duplicate Back to Top: Completely hide side floating button */
#scroll-top,
.scroll-top {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}