@charset "UTF-8";
/* ============================================================
    BCRE STRATEGIC MASTER MANIFEST v6.1
    Location: scss/style.scss
    Standard: BCRE Modern Dart Sass 7-1
    Role: Final compile sequence for the global CSS architecture.
   ============================================================ */
/* ============================================================
    1. LOGIC LAYER (Configuration)
   ============================================================ */
/* ============================================================
    BCRE STRATEGIC VARIABLES - FULL PRODUCTION VERSION 4.2 (Modernized)
    Location: scss/utils/_variables.scss
    Standard: BCRE Modern Dart Sass 7-1
    Role: Satisfies all map lookups and global helper calls.
   ============================================================ */
/* ============================================================
    1. BRAND TOKENS (Colors)
   ============================================================ */
/* Master Color Map */
/* ============================================================
    2. TYPOGRAPHY (Branded PNW Intelligence)
   ============================================================ */
/* ============================================================
    3. BREAKPOINTS & LAYOUT (Responsive Geometry)
   ============================================================ */
/* ============================================================
    4. DESIGN SCALES, MOTION, & ELEVATION
   ============================================================ */
/* ============================================================
    5. FLAT HELPERS (Runtime Resolution)
   ============================================================ */
/* ============================================================
    BCRE STRATEGIC MASTER MANIFEST v6.1
    Location: scss/style.scss
    Standard: BCRE Modern Dart Sass 7-1
    Role: Final compile sequence for the global CSS architecture.
   ============================================================ */
/* ============================================================
    1. LOGIC LAYER (Configuration)
   ============================================================ */
/* ============================================================
    BCRE STRATEGIC MIXINS
    Location: scss/utils/_mixins.scss
    Standard: BCRE Modern Dart Sass 7-1
    Role: Logic & Reusable UI Patterns
   ============================================================ */
/* ============================================================
    1. BREAKPOINT SYSTEM
   ============================================================ */
/* ============================================================
    2. THE "STRATEGIC OVERLAY" & POSITIONING
   ============================================================ */
/* ============================================================
    3. MEDIA & PERFORMANCE ENGINE
   ============================================================ */
/* ============================================================
    4. LUXURY UI EFFECTS
   ============================================================ */
/* ============================================================
    2. BASE (Global DOM & Tokens)
   ============================================================ */
/* ============================================================
    BCRE STRATEGIC MASTER MANIFEST v6.1
    Location: scss/style.scss
    Standard: BCRE Modern Dart Sass 7-1
    Role: Final compile sequence for the global CSS architecture.
   ============================================================ */
/* ============================================================
    1. LOGIC LAYER (Configuration)
   ============================================================ */
/**
 * BCRE STRATEGIC GLOBAL BASE
 * Location: scss/base/_global.scss
 * Role: Maps Sass Tokens to Runtime CSS Variables & Vertical Rhythm.
 * Standard: BCRE Modern Dart Sass 7-1
 */
/* ============================================================
    1. RUNTIME DESIGN SYSTEM (CSS Variables)
   ============================================================ */
:root {
  /* Brand Colors - Resolved via _variables.scss */
  --color-primary: #0a2438;
  --color-primary-rgb: 10, 36, 56;
  --color-accent: #c5a059;
  --color-accent-rgb: 197, 160, 89;
  --color-light: #ffffff;
  --color-dark: #000000;
  --color-light-alt: #f9f9f9;
  /* Semantic Colors */
  --color-muted: rgba(10, 36, 56, 0.65);
  /* Typography Tokens */
  --font-body: Quasimoda, 'Helvetica Neue', system-ui, sans-serif;
  --font-headings: Tenso, 'Helvetica Neue', system-ui, sans-serif;
  --font-display: 'Arno Pro Display', Georgia, serif;
  /* Layout Constants */
  --header-height: clamp(56px, 8vw, 72px);
  /* Dynamic Spacing Loop (Includes hero-offset) */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 20px;
  --space-lg: 28px;
  --space-xl: 36px;
  --space-xxl: 48px;
  --space-hero-offset: clamp(48px, 8vh, 80px);
  /* Dynamic Elevation (Shadows) Loop */
  --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-strong: 0 10px 30px rgba(0, 0, 0, 0.2);
  --shadow-hover: 0 20px 40px rgba(10, 36, 56, 0.15);
  /* Dynamic Radii Loop */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-full: 9999px;
  /* Kinetic Motion Constants */
  --transition-default: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
    2. VERTICAL RHYTHM STACK ENGINE (Strategic Gap Logic)
   ============================================================ */
/**
 * The "Stack Engine" uses the lobotomized owl selector to manage 
 * vertical spacing between siblings without affecting top/bottom margins.
 */
[class*=stack--] > * + * {
  margin-top: var(--stack-gap, var(--space-md));
}

.stack--xxs {
  --stack-gap: var(--space-xxs);
}

.stack--xs {
  --stack-gap: var(--space-xs);
}

.stack--sm {
  --stack-gap: var(--space-sm);
}

.stack--md {
  --stack-gap: var(--space-md);
}

.stack--lg {
  --stack-gap: var(--space-lg);
}

.stack--xl {
  --stack-gap: var(--space-xl);
}

.stack--xxl {
  --stack-gap: var(--space-xxl);
}

.stack--hero-offset {
  --stack-gap: var(--space-hero-offset);
}

/* ============================================================
    3. LAYOUT (Structural Scaffolding)
   ============================================================ */
/* ============================================================
    BCRE STRATEGIC MASTER MANIFEST v6.1
    Location: scss/style.scss
    Standard: BCRE Modern Dart Sass 7-1
    Role: Final compile sequence for the global CSS architecture.
   ============================================================ */
/* ============================================================
    1. LOGIC LAYER (Configuration)
   ============================================================ */
/* ============================================================
    BASE BODY & LAYOUT STRUCTURE
    Location: scss/base/_body.scss
    Role: High-level layout rhythm, containers, and theme hooks.
    Standard: BCRE Modern Dart Sass 7-1
   ============================================================ */
/* ============================================================
    1. THEME HOOKS (Synchronized with Global Tokens)
   ============================================================ */
:root {
  --theme-bg: var(--color-light);
  --theme-text: var(--color-primary);
  --theme-accent: var(--color-accent);
  --shadow-soft: 0 4px 20px rgba(var(--color-primary-rgb), 0.08);
  --shadow-strong: 0 20px 40px rgba(var(--color-primary-rgb), 0.12);
}

/* ============================================================
    2. BASE DOM STYLES
   ============================================================ */
html {
  scroll-behavior: smooth;
  box-sizing: border-box;
  scroll-padding-top: calc(var(--header-height) + var(--space-md));
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 0.5vw + 0.8rem, 1.05rem);
  line-height: 1.5;
  color: var(--theme-text);
  background-color: var(--theme-bg);
  /* Hardware Accelerated Surface */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform;
  /* Web Vitals Rendering Optimization */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Layout Logic */
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Theme Transition Engine */
  transition: background-color 0.3s ease, color 0.3s ease;
}

main {
  flex: 1 0 auto;
}

/* ============================================================
    3. SCROLLBAR & INTERACTIVE UTILS
   ============================================================ */
body::-webkit-scrollbar {
  width: 10px;
}

body::-webkit-scrollbar-track {
  background: var(--color-light);
}

body::-webkit-scrollbar-thumb {
  background: rgba(var(--color-primary-rgb), 0.2);
  border: 2px solid var(--color-light);
  border-radius: var(--radius-full);
}
body::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--color-primary-rgb), 0.4);
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: 2px;
}

::selection {
  background-color: rgba(var(--color-accent-rgb), 0.25);
  color: var(--color-primary);
}

/* STATE: Navigation Lock (Prevents scroll-chaining on modals/menus) */
body.no-scroll {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  touch-action: none;
  padding-right: var(--scrollbar-width, 0px);
}

/* ============================================================
    4. CORE CONTAINERS & GRID ENGINES
   ============================================================ */
.container-narrow, .container, .grid-split, .container-grid, .container-centered {
  width: 100%;
  margin-inline: auto;
  position: relative;
  padding-inline: max(var(--space-md), env(safe-area-inset-left));
}
@media (min-width: 768px) {
  .container-narrow, .container, .grid-split, .container-grid, .container-centered {
    padding-inline: clamp(32px, 6vw, 80px);
  }
}
@media (min-width: 1200px) {
  .container-narrow, .container, .grid-split, .container-grid, .container-centered {
    padding-inline: 60px;
  }
}

.container, .grid-split, .container-grid, .container-centered {
  max-width: 1140px;
}

.container-narrow {
  max-width: 720px;
}

.container-full {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}

.container-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-md);
}
@media (max-width: 575.98px) {
  .container-centered {
    padding-top: var(--space-hero-offset);
  }
}

.container-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 768px) {
  .container-grid[data-cols="2"] {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .container-grid[data-cols="3"] {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 768px) {
  .container-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: var(--space-lg);
  }
}

.grid-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}
@media (min-width: 768px) {
  .grid-split {
    grid-template-columns: 1.1fr 0.9fr;
  }
}
@media (min-width: 768px) {
  .grid-split.reverse {
    grid-template-columns: 0.9fr 1.1fr;
  }
  .grid-split.reverse > *:first-child {
    order: 2;
  }
}

/* ============================================================
    BCRE STRATEGIC MASTER MANIFEST v6.1
    Location: scss/style.scss
    Standard: BCRE Modern Dart Sass 7-1
    Role: Final compile sequence for the global CSS architecture.
   ============================================================ */
/* ============================================================
    1. LOGIC LAYER (Configuration)
   ============================================================ */
/* ============================================================
    SITE HEADER – Strategic BCRE Component
    Location: scss/layout/_header.scss
    Standard: BCRE Modern Dart Sass 7-1
    Role: Primary branding and navigation container.
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 1000;
  background-color: rgba(var(--color-primary-rgb), 0);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--color-light);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform;
  transition: background-color 0.45s var(--ease-out-expo), backdrop-filter 0.45s var(--ease-out-expo), height 0.45s var(--ease-out-expo), box-shadow 0.45s var(--ease-out-expo);
  padding-inline: var(--space-md);
}
.site-header.is-scrolled {
  background-color: var(--color-primary);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  height: 70px;
  box-shadow: var(--shadow-strong);
}
.site-header.is-scrolled .logo img {
  height: 32px;
}
.site-header .container {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1140px;
  margin-inline: auto;
}
.site-header .logo {
  flex-shrink: 0;
  z-index: 10;
}
.site-header .logo img {
  height: 40px;
  width: auto;
  transition: height 0.4s var(--ease-out-expo);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform;
}
.site-header .logo:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}
.site-header {
  /* ============================================================
      MAIN NAVIGATION
     ============================================================ */
}
@media (max-width: 1023.98px) {
  .site-header .main-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--color-primary);
    display: none;
    padding-top: calc(var(--header-height) + var(--space-xl));
    padding-bottom: var(--space-xl);
    padding-inline: var(--space-xl);
    border-top: none;
    box-shadow: none;
    overflow-y: auto;
    z-index: -1;
  }
  .site-header .main-nav.is-open {
    display: flex;
    flex-direction: column;
    justify-content: center;
    animation: navFadeIn 0.3s var(--ease-out-expo) forwards;
  }
}
@media (min-width: 1024px) {
  .site-header .main-nav {
    display: block;
    height: auto;
  }
}
.site-header .main-nav .nav-list {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
}
@media (max-width: 1023.98px) {
  .site-header .main-nav .nav-list {
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
    margin-top: -10vh;
  }
}
@media (min-width: 1024px) {
  .site-header .main-nav .nav-list {
    flex-direction: row;
    gap: var(--space-xl);
  }
}
.site-header .main-nav .nav-list a {
  font-family: var(--font-headings);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-light);
  text-decoration: none;
  transition: color 0.3s ease, opacity 0.3s ease;
}
@media (min-width: 1024px) {
  .site-header .main-nav .nav-list a {
    font-size: 0.75rem;
  }
}
.site-header .main-nav .nav-list a:hover, .site-header .main-nav .nav-list a:focus-visible {
  color: var(--color-accent);
  outline: none;
}
@media (min-width: 1024px) {
  .site-header .main-nav .nav-list:hover a:not(:hover) {
    opacity: 0.55;
  }
}
.site-header {
  /* ============================================================
      NAV TOGGLE (Hamburger)
     ============================================================ */
}
.site-header .nav-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 10;
}
@media (min-width: 1024px) {
  .site-header .nav-toggle {
    display: none;
  }
}
.site-header .nav-toggle .hamburger-inner {
  position: relative;
}
.site-header .nav-toggle .hamburger-inner, .site-header .nav-toggle .hamburger-inner::before, .site-header .nav-toggle .hamburger-inner::after {
  width: 22px;
  height: 2px;
  background-color: var(--color-light);
  display: block;
  transition: transform 0.3s var(--ease-out-expo), top 0.3s ease;
}
.site-header .nav-toggle .hamburger-inner::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 0;
}
.site-header .nav-toggle .hamburger-inner::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
}
.site-header .nav-toggle.is-active .hamburger-inner {
  background-color: transparent;
}
.site-header .nav-toggle.is-active .hamburger-inner::before {
  transform: rotate(45deg);
  top: 0;
}
.site-header .nav-toggle.is-active .hamburger-inner::after {
  transform: rotate(-45deg);
  top: 0;
}

@keyframes navFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ============================================================
    BCRE STRATEGIC MASTER MANIFEST v6.1
    Location: scss/style.scss
    Standard: BCRE Modern Dart Sass 7-1
    Role: Final compile sequence for the global CSS architecture.
   ============================================================ */
/* ============================================================
    1. LOGIC LAYER (Configuration)
   ============================================================ */
/* ============================================================
    FOOTER MODULE – BCRE Strategic Implementation
    Location: scss/layout/_footer.scss
    Role: Compliance anchor and site-wide navigation.
    Standard: BCRE Modern Dart Sass 7-1
   ============================================================ */
.site-footer {
  background-color: var(--color-primary);
  color: var(--color-light);
  padding-block: var(--space-xxl) var(--space-lg);
  font-family: var(--font-body);
  font-size: 0.875rem;
  position: relative;
  z-index: 1;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform;
}
.site-footer .footer-inner {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--space-xl);
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: var(--space-md);
}
@media (max-width: 1023.98px) {
  .site-footer .footer-inner {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575.98px) {
  .site-footer .footer-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-xl);
  }
}
.site-footer .footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
@media (max-width: 575.98px) {
  .site-footer .footer-column {
    align-items: center;
  }
}
.site-footer .footer-column h4 {
  font-family: var(--font-headings);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: var(--space-lg);
  color: var(--color-accent);
}
.site-footer .footer-column .footer-logo {
  margin-bottom: var(--space-md);
  transition: opacity 0.3s ease;
}
.site-footer .footer-column .footer-logo img {
  height: clamp(40px, 5vw, 54px);
  width: auto;
}
.site-footer .footer-column .footer-logo:hover {
  opacity: 0.8;
}
.site-footer .footer-column .footer-description {
  line-height: 1.5;
  opacity: 0.7;
  max-width: 32ch;
  margin-bottom: var(--space-md);
}
@media (max-width: 575.98px) {
  .site-footer .footer-column .footer-description {
    margin-inline: auto;
  }
}
.site-footer .footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.site-footer .footer-column ul li a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: all 0.3s var(--ease-out-expo);
  display: inline-block;
}
.site-footer .footer-column ul li a:hover {
  color: var(--color-light);
  transform: translateX(5px);
}
@media (max-width: 575.98px) {
  .site-footer .footer-column ul li a:hover {
    transform: translateY(-2px);
  }
}
.site-footer {
  /* ============================================
      LEGAL & DISCLOSURES (Compliance Bar)
     ============================================ */
}
.site-footer .footer-legal {
  max-width: 1140px;
  margin-inline: auto;
  margin-top: var(--space-xxl);
  padding-top: var(--space-xl);
  padding-inline: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.site-footer .footer-legal .compliance-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-xl);
  margin-bottom: var(--space-lg);
  filter: brightness(0) invert(1);
  opacity: 0.5;
}
.site-footer .footer-legal .compliance-logos img {
  height: 24px;
  width: auto;
}
.site-footer .footer-legal .licensing-disclosure {
  max-width: 850px;
  margin-inline: auto;
  margin-bottom: var(--space-lg);
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}
.site-footer .footer-legal .licensing-disclosure .brokerage-legal {
  display: block;
  font-weight: 700;
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.site-footer .footer-legal .footer-copyright {
  text-align: center;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ============================================================
    4. COMPONENTS (Modular UI)
   ============================================================ */
/* ============================================================
    BCRE STRATEGIC MASTER MANIFEST v6.1
    Location: scss/style.scss
    Standard: BCRE Modern Dart Sass 7-1
    Role: Final compile sequence for the global CSS architecture.
   ============================================================ */
/* ============================================================
    1. LOGIC LAYER (Configuration)
   ============================================================ */
/* ============================================================
    UNIVERSAL BUTTON STYLES – Strategic BCRE Version 4.0
    Location: scss/components/_buttons.scss
    Role: High-conversion interactive components.
    Standard: BCRE Modern Dart Sass 7-1
   ============================================================ */
/**
 * Base Button Placeholder: Optimized for performance and touch-targets.
 * Using % instead of @mixin prevents CSS bloat by grouping selectors.
 */
.button--text, .button--outline, .button--white, .button--primary, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-headings);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 1.15rem 2.75rem;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform;
  transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
  will-change: transform, box-shadow;
}
.button--text:hover, .button--outline:hover, .button--white:hover, .button--primary:hover, .button:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(var(--color-primary-rgb), 0.15);
}
.button--text, .button--outline, .button--white, .button--primary, .button {
  transition: background-color 0.4s var(--ease-out-expo), border-color 0.4s var(--ease-out-expo), color 0.4s var(--ease-out-expo), transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
}
.button--text:active:not(:disabled), .button--outline:active:not(:disabled), .button--white:active:not(:disabled), .button--primary:active:not(:disabled), .button:active:not(:disabled) {
  transform: translateY(-1px) scale(0.98);
  filter: brightness(0.95);
  transition: transform 0.1s ease;
}
.button--text:focus-visible, .button--outline:focus-visible, .button--white:focus-visible, .button--primary:focus-visible, .button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}
.button--text:disabled, .button--outline:disabled, .button--white:disabled, .button--primary:disabled, .button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(1);
}
.button--text:disabled:hover, .button--outline:disabled:hover, .button--white:disabled:hover, .button--primary:disabled:hover, .button:disabled:hover {
  transform: none;
  box-shadow: none;
}

/* ============================================================
    IMPLEMENTATION CLASSES & VARIANTS
   ============================================================ */
.button {
  background: transparent;
  color: var(--color-primary);
}

.button--primary {
  background: var(--color-accent);
  color: var(--color-primary);
  border-color: var(--color-accent);
}
.button--primary:hover:not(:disabled) {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-light);
  box-shadow: 0 12px 24px rgba(var(--color-accent-rgb), 0.25);
}

.button--white {
  background: var(--color-light);
  color: var(--color-primary);
  border-color: var(--color-light);
  box-shadow: var(--shadow-strong);
}
.button--white:hover:not(:disabled) {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-primary);
}

.button--outline {
  background: transparent;
  color: var(--color-primary);
  border-color: rgba(var(--color-primary-rgb), 0.2);
}
.button--outline:hover:not(:disabled) {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-light);
}

.button--text {
  background: transparent;
  color: var(--color-primary);
  padding-inline: 0;
  border: none;
  letter-spacing: 0.05em;
}
.button--text::after {
  content: "→";
  margin-left: 8px;
  transition: transform 0.3s var(--ease-out-expo);
}
.button--text:hover:not(:disabled) {
  background: transparent;
  color: var(--color-accent);
  transform: translateX(5px);
  box-shadow: none;
}
.button--text:hover:not(:disabled)::after {
  transform: translateX(5px);
}

/* ============================================================
    MODIFIERS & SIZING
   ============================================================ */
.button--small {
  font-size: 0.65rem;
  padding: 0.75rem 1.85rem;
  letter-spacing: 0.15em;
}

.button--large {
  font-size: 1rem;
  padding: 1.4rem 4rem;
}

/* ============================================================
    BCRE STRATEGIC MASTER MANIFEST v6.1
    Location: scss/style.scss
    Standard: BCRE Modern Dart Sass 7-1
    Role: Final compile sequence for the global CSS architecture.
   ============================================================ */
/* ============================================================
    1. LOGIC LAYER (Configuration)
   ============================================================ */
/* ============================================================
    CARDS & DIRECTORIES – Strategic BCRE Version 6.1
    Location: scss/components/_cards.scss
    Role: Premium grid, property, and advisor card architecture.
    Standard: BCRE Modern Dart Sass 7-1
   ============================================================ */
/* ============================================================
    1. THE GRID LAYOUTS (Wrappers)
   ============================================================ */
.cards,
.container-grid,
.featured-listing-grid,
.property-grid,
.agent-grid,
#agentDirectory {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  padding-block: var(--space-sm);
}
@media (max-width: 575.98px) {
  .cards,
  .container-grid,
  .featured-listing-grid,
  .property-grid,
  .agent-grid,
  #agentDirectory {
    padding-inline: var(--space-md);
  }
}

@media (min-width: 768px) {
  .cards,
  .container-grid,
  .featured-listing-grid,
  .property-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  }
}

@media (min-width: 768px) {
  .agent-grid,
  #agentDirectory {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  }
}

/* ============================================================
    2. BASE CARD LOGIC (DRY Placeholder)
   ============================================================ */
.agent-card, .card-item,
.insight-card,
.featured-listing-block,
.property-card {
  position: relative;
  background: var(--color-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.45s var(--ease-out-expo), box-shadow 0.45s var(--ease-out-expo);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform;
}
.agent-card:hover, .card-item:hover,
.insight-card:hover,
.featured-listing-block:hover,
.property-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
  z-index: 2;
}
.agent-card:hover [class*=-media] img, .card-item:hover [class*=-media] img,
.insight-card:hover [class*=-media] img,
.featured-listing-block:hover [class*=-media] img,
.property-card:hover [class*=-media] img,
.agent-card:hover [class*=-image] img,
.card-item:hover [class*=-image] img,
.insight-card:hover [class*=-image] img,
.featured-listing-block:hover [class*=-image] img,
.property-card:hover [class*=-image] img,
.agent-card:hover [class*=__photo-box] img,
.card-item:hover [class*=__photo-box] img,
.insight-card:hover [class*=__photo-box] img,
.featured-listing-block:hover [class*=__photo-box] img,
.property-card:hover [class*=__photo-box] img {
  transform: scale(1.08);
}

/* ============================================================
    3. PROPERTY & INSIGHT CARDS
   ============================================================ */
.card-item .card-media,
.card-item .insight-media,
.card-item .listing-media,
.card-item .property-image,
.insight-card .card-media,
.insight-card .insight-media,
.insight-card .listing-media,
.insight-card .property-image,
.featured-listing-block .card-media,
.featured-listing-block .insight-media,
.featured-listing-block .listing-media,
.featured-listing-block .property-image,
.property-card .card-media,
.property-card .insight-media,
.property-card .listing-media,
.property-card .property-image {
  margin: 0;
  overflow: hidden;
  background-color: var(--color-light-alt);
  aspect-ratio: 4/3;
}
@supports not (aspect-ratio: 1/1) {
  .card-item .card-media,
  .card-item .insight-media,
  .card-item .listing-media,
  .card-item .property-image,
  .insight-card .card-media,
  .insight-card .insight-media,
  .insight-card .listing-media,
  .insight-card .property-image,
  .featured-listing-block .card-media,
  .featured-listing-block .insight-media,
  .featured-listing-block .listing-media,
  .featured-listing-block .property-image,
  .property-card .card-media,
  .property-card .insight-media,
  .property-card .listing-media,
  .property-card .property-image {
    padding-top: 75%;
    position: relative;
  }
  .card-item .card-media > *,
  .card-item .insight-media > *,
  .card-item .listing-media > *,
  .card-item .property-image > *,
  .insight-card .card-media > *,
  .insight-card .insight-media > *,
  .insight-card .listing-media > *,
  .insight-card .property-image > *,
  .featured-listing-block .card-media > *,
  .featured-listing-block .insight-media > *,
  .featured-listing-block .listing-media > *,
  .featured-listing-block .property-image > *,
  .property-card .card-media > *,
  .property-card .insight-media > *,
  .property-card .listing-media > *,
  .property-card .property-image > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}
.card-item .card-media img,
.card-item .insight-media img,
.card-item .listing-media img,
.card-item .property-image img,
.insight-card .card-media img,
.insight-card .insight-media img,
.insight-card .listing-media img,
.insight-card .property-image img,
.featured-listing-block .card-media img,
.featured-listing-block .insight-media img,
.featured-listing-block .listing-media img,
.featured-listing-block .property-image img,
.property-card .card-media img,
.property-card .insight-media img,
.property-card .listing-media img,
.property-card .property-image img {
  transition: transform 1.2s var(--ease-out-expo);
  will-change: transform;
}
.card-item .card-body,
.card-item .insight-content,
.card-item .listing-info,
.card-item .property-content,
.insight-card .card-body,
.insight-card .insight-content,
.insight-card .listing-info,
.insight-card .property-content,
.featured-listing-block .card-body,
.featured-listing-block .insight-content,
.featured-listing-block .listing-info,
.featured-listing-block .property-content,
.property-card .card-body,
.property-card .insight-content,
.property-card .listing-info,
.property-card .property-content {
  padding: var(--space-md);
  text-align: left;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
@media (max-width: 575.98px) {
  .card-item .card-body,
  .card-item .insight-content,
  .card-item .listing-info,
  .card-item .property-content,
  .insight-card .card-body,
  .insight-card .insight-content,
  .insight-card .listing-info,
  .insight-card .property-content,
  .featured-listing-block .card-body,
  .featured-listing-block .insight-content,
  .featured-listing-block .listing-info,
  .featured-listing-block .property-content,
  .property-card .card-body,
  .property-card .insight-content,
  .property-card .listing-info,
  .property-card .property-content {
    padding: var(--space-xl);
  }
}
.card-item .card-body h3, .card-item .card-body [class*=-title], .card-item .card-body [class*=-tagline],
.card-item .insight-content h3,
.card-item .insight-content [class*=-title],
.card-item .insight-content [class*=-tagline],
.card-item .listing-info h3,
.card-item .listing-info [class*=-title],
.card-item .listing-info [class*=-tagline],
.card-item .property-content h3,
.card-item .property-content [class*=-title],
.card-item .property-content [class*=-tagline],
.insight-card .card-body h3,
.insight-card .card-body [class*=-title],
.insight-card .card-body [class*=-tagline],
.insight-card .insight-content h3,
.insight-card .insight-content [class*=-title],
.insight-card .insight-content [class*=-tagline],
.insight-card .listing-info h3,
.insight-card .listing-info [class*=-title],
.insight-card .listing-info [class*=-tagline],
.insight-card .property-content h3,
.insight-card .property-content [class*=-title],
.insight-card .property-content [class*=-tagline],
.featured-listing-block .card-body h3,
.featured-listing-block .card-body [class*=-title],
.featured-listing-block .card-body [class*=-tagline],
.featured-listing-block .insight-content h3,
.featured-listing-block .insight-content [class*=-title],
.featured-listing-block .insight-content [class*=-tagline],
.featured-listing-block .listing-info h3,
.featured-listing-block .listing-info [class*=-title],
.featured-listing-block .listing-info [class*=-tagline],
.featured-listing-block .property-content h3,
.featured-listing-block .property-content [class*=-title],
.featured-listing-block .property-content [class*=-tagline],
.property-card .card-body h3,
.property-card .card-body [class*=-title],
.property-card .card-body [class*=-tagline],
.property-card .insight-content h3,
.property-card .insight-content [class*=-title],
.property-card .insight-content [class*=-tagline],
.property-card .listing-info h3,
.property-card .listing-info [class*=-title],
.property-card .listing-info [class*=-tagline],
.property-card .property-content h3,
.property-card .property-content [class*=-title],
.property-card .property-content [class*=-tagline] {
  font-family: var(--font-headings);
  font-size: 1.25rem;
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
  line-height: 1.1;
  font-weight: 700;
}
.card-item .card-body p, .card-item .card-body [class*=-text], .card-item .card-body [class*=-summary], .card-item .card-body [class*=-location],
.card-item .insight-content p,
.card-item .insight-content [class*=-text],
.card-item .insight-content [class*=-summary],
.card-item .insight-content [class*=-location],
.card-item .listing-info p,
.card-item .listing-info [class*=-text],
.card-item .listing-info [class*=-summary],
.card-item .listing-info [class*=-location],
.card-item .property-content p,
.card-item .property-content [class*=-text],
.card-item .property-content [class*=-summary],
.card-item .property-content [class*=-location],
.insight-card .card-body p,
.insight-card .card-body [class*=-text],
.insight-card .card-body [class*=-summary],
.insight-card .card-body [class*=-location],
.insight-card .insight-content p,
.insight-card .insight-content [class*=-text],
.insight-card .insight-content [class*=-summary],
.insight-card .insight-content [class*=-location],
.insight-card .listing-info p,
.insight-card .listing-info [class*=-text],
.insight-card .listing-info [class*=-summary],
.insight-card .listing-info [class*=-location],
.insight-card .property-content p,
.insight-card .property-content [class*=-text],
.insight-card .property-content [class*=-summary],
.insight-card .property-content [class*=-location],
.featured-listing-block .card-body p,
.featured-listing-block .card-body [class*=-text],
.featured-listing-block .card-body [class*=-summary],
.featured-listing-block .card-body [class*=-location],
.featured-listing-block .insight-content p,
.featured-listing-block .insight-content [class*=-text],
.featured-listing-block .insight-content [class*=-summary],
.featured-listing-block .insight-content [class*=-location],
.featured-listing-block .listing-info p,
.featured-listing-block .listing-info [class*=-text],
.featured-listing-block .listing-info [class*=-summary],
.featured-listing-block .listing-info [class*=-location],
.featured-listing-block .property-content p,
.featured-listing-block .property-content [class*=-text],
.featured-listing-block .property-content [class*=-summary],
.featured-listing-block .property-content [class*=-location],
.property-card .card-body p,
.property-card .card-body [class*=-text],
.property-card .card-body [class*=-summary],
.property-card .card-body [class*=-location],
.property-card .insight-content p,
.property-card .insight-content [class*=-text],
.property-card .insight-content [class*=-summary],
.property-card .insight-content [class*=-location],
.property-card .listing-info p,
.property-card .listing-info [class*=-text],
.property-card .listing-info [class*=-summary],
.property-card .listing-info [class*=-location],
.property-card .property-content p,
.property-card .property-content [class*=-text],
.property-card .property-content [class*=-summary],
.property-card .property-content [class*=-location] {
  font-size: 0.875rem;
  color: var(--color-muted);
  line-height: 1.5;
  margin-bottom: var(--space-md);
}
.card-item .card-body .insight-box,
.card-item .insight-content .insight-box,
.card-item .listing-info .insight-box,
.card-item .property-content .insight-box,
.insight-card .card-body .insight-box,
.insight-card .insight-content .insight-box,
.insight-card .listing-info .insight-box,
.insight-card .property-content .insight-box,
.featured-listing-block .card-body .insight-box,
.featured-listing-block .insight-content .insight-box,
.featured-listing-block .listing-info .insight-box,
.featured-listing-block .property-content .insight-box,
.property-card .card-body .insight-box,
.property-card .insight-content .insight-box,
.property-card .listing-info .insight-box,
.property-card .property-content .insight-box {
  margin-top: auto;
  margin-bottom: var(--space-md);
  background-color: rgba(var(--color-primary-rgb), 0.03);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  border: 1px solid rgba(var(--color-primary-rgb), 0.05);
}
.card-item .card-body .insight-box h4,
.card-item .insight-content .insight-box h4,
.card-item .listing-info .insight-box h4,
.card-item .property-content .insight-box h4,
.insight-card .card-body .insight-box h4,
.insight-card .insight-content .insight-box h4,
.insight-card .listing-info .insight-box h4,
.insight-card .property-content .insight-box h4,
.featured-listing-block .card-body .insight-box h4,
.featured-listing-block .insight-content .insight-box h4,
.featured-listing-block .listing-info .insight-box h4,
.featured-listing-block .property-content .insight-box h4,
.property-card .card-body .insight-box h4,
.property-card .insight-content .insight-box h4,
.property-card .listing-info .insight-box h4,
.property-card .property-content .insight-box h4 {
  color: var(--color-accent);
  margin-bottom: 4px;
  font-size: 0.65rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.card-item .card-body .button,
.card-item .insight-content .button,
.card-item .listing-info .button,
.card-item .property-content .button,
.insight-card .card-body .button,
.insight-card .insight-content .button,
.insight-card .listing-info .button,
.insight-card .property-content .button,
.featured-listing-block .card-body .button,
.featured-listing-block .insight-content .button,
.featured-listing-block .listing-info .button,
.featured-listing-block .property-content .button,
.property-card .card-body .button,
.property-card .insight-content .button,
.property-card .listing-info .button,
.property-card .property-content .button {
  margin-top: auto;
  align-self: stretch;
}
@media (min-width: 576px) {
  .card-item .card-body .button,
  .card-item .insight-content .button,
  .card-item .listing-info .button,
  .card-item .property-content .button,
  .insight-card .card-body .button,
  .insight-card .insight-content .button,
  .insight-card .listing-info .button,
  .insight-card .property-content .button,
  .featured-listing-block .card-body .button,
  .featured-listing-block .insight-content .button,
  .featured-listing-block .listing-info .button,
  .featured-listing-block .property-content .button,
  .property-card .card-body .button,
  .property-card .insight-content .button,
  .property-card .listing-info .button,
  .property-card .property-content .button {
    align-self: flex-start;
    width: auto;
  }
}

/* ============================================================
    4. AGENT & ADVISOR CARDS
   ============================================================ */
.agent-card {
  text-decoration: none;
  border: 1px solid rgba(var(--color-primary-rgb), 0.05);
}
.agent-card.reveal-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}
.agent-card.reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.agent-card__photo-box {
  aspect-ratio: 4/5;
}
@supports not (aspect-ratio: 1/1) {
  .agent-card__photo-box {
    padding-top: 125%;
    position: relative;
  }
  .agent-card__photo-box > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}
.agent-card__photo-box {
  overflow: hidden;
  background-color: var(--color-light-alt);
}
.agent-card__photo-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(var(--color-primary-rgb), 0.15) 0%, rgba(var(--color-primary-rgb), 0.35) 100%);
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 60%, rgba(var(--color-primary-rgb), 0.3) 100%);
}
.agent-card__photo-box img {
  object-position: center top;
  transition: transform 1.2s var(--ease-out-expo);
  will-change: transform;
}
.agent-card__info {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  text-align: center;
  background: var(--color-light);
}
.agent-card__title {
  font-size: 0.65rem;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}
.agent-card__name {
  font-family: var(--font-headings);
  font-size: 1.25rem;
  color: var(--color-primary);
  line-height: 1.1;
}
.agent-card__name span {
  display: block;
  font-size: 1.5rem;
  font-weight: 900;
  margin-top: 4px;
}
.agent-card__license-box {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: var(--space-sm);
  margin-bottom: var(--space-md);
}
.agent-card__license-box .badge {
  padding: 3px 10px;
  font-size: 0.65rem;
  font-weight: 700;
  border: 1px solid rgba(var(--color-primary-rgb), 0.12);
  color: var(--color-muted);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}
.agent-card__action {
  margin-top: auto;
  padding-block: 0.85rem;
  font-family: var(--font-headings);
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border: 1px solid rgba(var(--color-primary-rgb), 0.15);
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  transition: var(--transition-default);
}
.agent-card__action:hover {
  background: var(--color-primary);
  color: var(--color-light);
  border-color: var(--color-primary);
}

/* ============================================================
    5. DIRECTORY UI CONTROLS (Filters & Toggles)
   ============================================================ */
.directory-filter-bar {
  position: sticky;
  top: var(--header-height);
  z-index: 500;
  background-color: rgba(var(--color-light-rgb), 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.1);
}
.directory-filter-bar__wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-xl);
  justify-content: center;
  align-items: center;
  padding-block: var(--space-md);
}
@media (max-width: 767.98px) {
  .directory-filter-bar__wrapper {
    flex-direction: column;
    gap: var(--space-lg);
    padding-block: var(--space-lg);
  }
}
.directory-filter-bar__group {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.directory-filter-bar__label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted);
}

.directory-toggle-btn {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(var(--color-primary-rgb), 0.15);
  padding: 8px 16px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-primary);
  cursor: pointer;
  transition: var(--transition-default);
  border-radius: var(--radius-sm);
}
.directory-toggle-btn.active {
  background: var(--color-primary);
  color: var(--color-light);
  border-color: var(--color-primary);
}
.directory-toggle-btn:hover:not(.active) {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-1px);
}

/* ============================================================
    6. REGIONAL HUB CARDS (Clean State Name)
   ============================================================ */
.region-card {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  aspect-ratio: 4/3;
  box-shadow: var(--shadow-soft);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform;
  transition: transform 0.45s var(--ease-out-expo), box-shadow 0.45s var(--ease-out-expo);
}
@media (min-width: 768px) {
  .region-card {
    aspect-ratio: 16/9;
  }
}
.region-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  z-index: 2;
}
.region-card:hover .region-card__bg img {
  transform: scale(1.06);
}
.region-card:hover .region-card__overlay {
  background-color: rgba(var(--color-primary-rgb), 0.45);
}
.region-card__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.region-card__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out-expo);
  will-change: transform;
}
.region-card__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(var(--color-primary-rgb), 0.35);
  z-index: 2;
  pointer-events: none;
  transition: background-color 0.4s ease;
}
.region-card__content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  text-align: center;
}
.region-card__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  color: var(--color-light);
  line-height: 1;
  margin: 0;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.8);
}

/* ============================================================
    BCRE STRATEGIC MASTER MANIFEST v6.1
    Location: scss/style.scss
    Standard: BCRE Modern Dart Sass 7-1
    Role: Final compile sequence for the global CSS architecture.
   ============================================================ */
/* ============================================================
    1. LOGIC LAYER (Configuration)
   ============================================================ */
/* ============================================================
    GLOBAL FORM STYLING – BCRE High-Touch Version 2.0
    Location: scss/components/_forms.scss
    Standard: BCRE Modern Dart Sass 7-1
    Role: Lead capture and specialized questionnaire forms.
   ============================================================ */
/* ============================================================
    1. BASE INPUT PLACEHOLDER (DRY Architecture)
   ============================================================ */
form .form-group input[type=text],
form .form-group input[type=email],
form .form-group input[type=tel],
form .form-group input[type=password],
form .form-group select,
form .form-group textarea,
.questionnaire-form .form-group input[type=text],
.questionnaire-form .form-group input[type=email],
.questionnaire-form .form-group input[type=tel],
.questionnaire-form .form-group input[type=password],
.questionnaire-form .form-group select,
.questionnaire-form .form-group textarea {
  width: 100%;
  font-family: inherit;
  font-size: max(16px, 1rem);
  padding: 1.15rem;
  border: 1px solid rgba(var(--color-primary-rgb), 0.15);
  border-radius: var(--radius-md);
  background: var(--color-light);
  color: var(--color-primary);
  transition: var(--transition-default);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform;
}
form .form-group input[type=text]::placeholder,
form .form-group input[type=email]::placeholder,
form .form-group input[type=tel]::placeholder,
form .form-group input[type=password]::placeholder,
form .form-group select::placeholder,
form .form-group textarea::placeholder,
.questionnaire-form .form-group input[type=text]::placeholder,
.questionnaire-form .form-group input[type=email]::placeholder,
.questionnaire-form .form-group input[type=tel]::placeholder,
.questionnaire-form .form-group input[type=password]::placeholder,
.questionnaire-form .form-group select::placeholder,
.questionnaire-form .form-group textarea::placeholder {
  color: var(--color-muted);
  opacity: 0.6;
}
form .form-group input[type=text]:focus,
form .form-group input[type=email]:focus,
form .form-group input[type=tel]:focus,
form .form-group input[type=password]:focus,
form .form-group select:focus,
form .form-group textarea:focus,
.questionnaire-form .form-group input[type=text]:focus,
.questionnaire-form .form-group input[type=email]:focus,
.questionnaire-form .form-group input[type=tel]:focus,
.questionnaire-form .form-group input[type=password]:focus,
.questionnaire-form .form-group select:focus,
.questionnaire-form .form-group textarea:focus, form .form-group input[type=text]:focus-visible,
form .form-group input[type=email]:focus-visible,
form .form-group input[type=tel]:focus-visible,
form .form-group input[type=password]:focus-visible,
form .form-group select:focus-visible,
form .form-group textarea:focus-visible,
.questionnaire-form .form-group input[type=text]:focus-visible,
.questionnaire-form .form-group input[type=email]:focus-visible,
.questionnaire-form .form-group input[type=tel]:focus-visible,
.questionnaire-form .form-group input[type=password]:focus-visible,
.questionnaire-form .form-group select:focus-visible,
.questionnaire-form .form-group textarea:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(var(--color-accent-rgb), 0.15);
}
form .form-group input[type=text]:disabled,
form .form-group input[type=email]:disabled,
form .form-group input[type=tel]:disabled,
form .form-group input[type=password]:disabled,
form .form-group select:disabled,
form .form-group textarea:disabled,
.questionnaire-form .form-group input[type=text]:disabled,
.questionnaire-form .form-group input[type=email]:disabled,
.questionnaire-form .form-group input[type=tel]:disabled,
.questionnaire-form .form-group input[type=password]:disabled,
.questionnaire-form .form-group select:disabled,
.questionnaire-form .form-group textarea:disabled {
  background: rgba(var(--color-primary-rgb), 0.05);
  cursor: not-allowed;
  opacity: 0.7;
}

/* ============================================================
    2. FORM STRUCTURE & LAYOUT
   ============================================================ */
form,
.questionnaire-form {
  max-width: 1000px;
  width: 100%;
  margin-inline: auto;
  font-family: var(--font-body);
  /* Layout Utilities */
}
form .form-row,
.questionnaire-form .form-row {
  display: grid;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
@media (min-width: 768px) {
  form .form-row,
  .questionnaire-form .form-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
form,
.questionnaire-form {
  /* Form Group */
}
form .form-group,
.questionnaire-form .form-group {
  width: 100%;
  margin-bottom: var(--space-lg);
  text-align: left;
}
form .form-group label,
.questionnaire-form .form-group label {
  display: block;
  font-family: var(--font-headings);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.1;
  margin-bottom: var(--space-xs);
  color: var(--color-primary);
}
form .form-group,
.questionnaire-form .form-group {
  /* Inputs & Textareas */
}
form .form-group textarea,
.questionnaire-form .form-group textarea {
  min-height: 160px;
  resize: vertical;
}
form,
.questionnaire-form {
  /* Submit Button Synchronization */
}
form button[type=submit],
form .form-submit,
.questionnaire-form button[type=submit],
.questionnaire-form .form-submit {
  margin-top: var(--space-sm);
}
@media (max-width: 575.98px) {
  form button[type=submit],
  form .form-submit,
  .questionnaire-form button[type=submit],
  .questionnaire-form .form-submit {
    width: 100%;
    display: flex;
    justify-content: center;
  }
}

/* ============================================================
    3. THEMATIC VARIANTS & WRAPPERS
   ============================================================ */
form.contact--dark .form-group label {
  color: var(--color-light);
}
form.contact--dark .form-group input[type=text],
form.contact--dark .form-group input[type=email],
form.contact--dark .form-group input[type=tel],
form.contact--dark .form-group input[type=password],
form.contact--dark .form-group select,
form.contact--dark .form-group textarea {
  background: rgba(255, 255, 255, 0.95);
  border: none;
}
form.contact--dark .form-group input[type=text]:focus, form.contact--dark .form-group input[type=text]:focus-visible,
form.contact--dark .form-group input[type=email]:focus,
form.contact--dark .form-group input[type=email]:focus-visible,
form.contact--dark .form-group input[type=tel]:focus,
form.contact--dark .form-group input[type=tel]:focus-visible,
form.contact--dark .form-group input[type=password]:focus,
form.contact--dark .form-group input[type=password]:focus-visible,
form.contact--dark .form-group select:focus,
form.contact--dark .form-group select:focus-visible,
form.contact--dark .form-group textarea:focus,
form.contact--dark .form-group textarea:focus-visible {
  background: var(--color-light);
  box-shadow: 0 0 0 4px rgba(var(--color-accent-rgb), 0.3);
}

.contact-form-wrapper {
  background: var(--color-light);
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.contact-form-wrapper .section-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

/* ============================================================
    4. ACCESSIBILITY & REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  form *,
  .questionnaire-form * {
    transition: none !important;
    animation: none !important;
  }
}
/* ============================================================
    BCRE STRATEGIC MASTER MANIFEST v6.1
    Location: scss/style.scss
    Standard: BCRE Modern Dart Sass 7-1
    Role: Final compile sequence for the global CSS architecture.
   ============================================================ */
/* ============================================================
    1. LOGIC LAYER (Configuration)
   ============================================================ */
/* ============================================================
   HERO – Centered Strategic Hub v5.1
   Component: components/_hero.scss
   Standard: BCRE Modern Dart Sass 7-1
   Role: Cinematic first impression, immune to mobile collisions.
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  min-height: 500px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--color-primary);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform;
  /* Configuration Tokens */
  --hero-content-width: 850px;
  padding-top: var(--header-height);
  /* ============================================================
     MODIFIERS (Layout Variants)
     ============================================================ */
  /* 1. Fullscreen Variant (Home/Landing Pages) */
}
.hero--fullscreen {
  min-height: 100vh;
}
@media (max-width: 575.98px) {
  .hero--fullscreen {
    min-height: 85vh;
    min-height: 85svh;
    padding-top: calc(var(--header-height) + var(--space-md));
    padding-bottom: calc(var(--space-hero-offset) + var(--space-md));
    flex-direction: column;
    justify-content: center;
  }
}
.hero {
  /* 2. Half-Height Variant (General Interstitial/Text Headers) */
}
.hero--half {
  min-height: 40vh;
}
@media (max-width: 575.98px) {
  .hero--half {
    min-height: 35vh;
    padding-top: calc(var(--header-height) + var(--space-sm));
    padding-bottom: var(--space-lg);
    flex-direction: column;
    justify-content: center;
  }
}
.hero--half {
  /* Removes inner content glass-pane padding when used without an image bg */
}
.hero--half .hero-content {
  padding-top: 0;
  padding-bottom: 0;
  background: transparent !important;
  backdrop-filter: none !important;
}
.hero {
  /* 3. Condo Profile Variant (Sleek/Minimal) */
}
.hero--condo {
  min-height: clamp(200px, 25vh, 350px);
  padding-block: var(--space-xl);
  position: relative;
  overflow: hidden;
}
.hero--condo .hero-content {
  margin-top: auto;
  margin-bottom: auto;
  width: 100%;
}
@media (min-width: 768px) {
  .hero--condo {
    min-height: clamp(250px, 30vh, 400px);
    padding-block: var(--space-xxl);
  }
}
.hero {
  /* ============================================================
     BASE COMPONENTS
     ============================================================ */
}
.hero .container {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
}
.hero .hero-content {
  max-width: var(--hero-content-width);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .hero .hero-content {
    background-color: rgba(var(--color-primary-rgb), 0.12);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--space-xxl);
    border-radius: var(--radius-lg);
  }
}
.hero .hero_header {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 8vw, 5.5rem);
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-md);
  color: var(--color-light);
  text-shadow: 0 4px 16px rgba(var(--color-primary-rgb), 0.6);
}
@media (max-width: 575.98px) {
  .hero .hero_header {
    font-size: clamp(2rem, 10vw, 2.8rem);
    line-height: 1.05;
  }
}
.hero .hero_header--alt {
  display: block;
  font-family: var(--font-body);
  font-size: 1em;
  font-weight: 300;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-accent);
}
.hero .tagline {
  max-width: 55ch;
  margin-inline: auto;
  margin-bottom: var(--space-xl);
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  line-height: 1.6;
  color: var(--color-light);
  opacity: 0.95;
  text-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.6);
}
.hero .hero-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
}
@media (max-width: 575.98px) {
  .hero .hero-actions {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
}
.hero .hero-actions .button {
  padding: 1.25rem 2.75rem;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
}
@media (max-width: 575.98px) {
  .hero .hero-actions .button {
    min-height: 48px;
  }
}
.hero {
  /* ============================================================
      BACKGROUND & KINETIC MOTION
     ============================================================ */
}
.hero .hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero .hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(var(--color-primary-rgb), 0.55) 0%, rgba(var(--color-primary-rgb), 0.75) 100%);
  z-index: 1;
  pointer-events: none;
}
.hero .hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  will-change: transform;
  transition: transform 14s var(--ease-out-expo);
}
.hero {
  /* Submits to hardware acceleration on hover */
}
.hero:hover .hero-bg img {
  transform: scale(1.06) translateZ(0);
}

/* ============================================================
    BCRE STRATEGIC MASTER MANIFEST v6.1
    Location: scss/style.scss
    Standard: BCRE Modern Dart Sass 7-1
    Role: Final compile sequence for the global CSS architecture.
   ============================================================ */
/* ============================================================
    1. LOGIC LAYER (Configuration)
   ============================================================ */
/* ============================================================
    MARKET INSIGHTS MODULE – BCRE Strategic Version 3.0
    Location: scss/components/_insights.scss
    Role: Analytical Data Visualization for the Camas Market
    Standard: BCRE Modern Dart Sass 7-1
   ============================================================ */
.market-insights {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: var(--pad-section);
  background: linear-gradient(180deg, rgba(var(--color-primary-rgb), 0.04) 0%, rgba(var(--color-primary-rgb), 0) 100%);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform;
}
.market-insights .container {
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
}
.market-insights {
  /* ===== Strategic Price Grid ===== */
}
.market-insights .price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
  width: 100%;
  margin-bottom: var(--space-xl);
}
.market-insights .price-grid .price-card {
  position: relative;
  background: var(--color-light);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  text-align: center;
  border: 1px solid rgba(var(--color-primary-rgb), 0.08);
  overflow: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform;
  transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
  will-change: transform, box-shadow;
}
.market-insights .price-grid .price-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 32px rgba(var(--color-primary-rgb), 0.1);
}
.market-insights .price-grid .price-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-accent);
  opacity: 0.8;
}
.market-insights .price-grid .price-card:hover {
  border-color: rgba(var(--color-accent-rgb), 0.3);
}
.market-insights .price-grid .price-card .label {
  display: block;
  font-family: var(--font-headings);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  margin-bottom: var(--space-xs);
}
.market-insights .price-grid .price-card .value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  color: var(--color-primary);
  font-weight: 700;
  line-height: 1.2;
}
.market-insights {
  /* ===== Market Report Layout (Responsive Data) ===== */
}
.market-insights .market-report {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-xl);
  align-items: center;
  background: var(--color-light);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
@media (max-width: 767.98px) {
  .market-insights .market-report {
    grid-template-columns: 1fr;
    padding: var(--space-lg);
    gap: var(--space-lg);
  }
}
.market-insights .market-report .report-text {
  border-right: 1px solid rgba(var(--color-primary-rgb), 0.1);
  padding-right: var(--space-xl);
}
@media (max-width: 767.98px) {
  .market-insights .market-report .report-text {
    border-right: none;
    padding-right: 0;
    border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.1);
    padding-bottom: var(--space-lg);
  }
}
.market-insights .market-report .report-text p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-muted);
}
.market-insights {
  /* ===== Kinetic Table Architecture ===== */
}
.market-insights .table-wrapper {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-md);
  background: var(--color-light);
  box-shadow: var(--shadow-soft);
  margin-block: var(--space-xl);
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.market-insights .styled-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}
.market-insights .styled-table th {
  background: var(--color-primary);
  color: var(--color-light);
  font-family: var(--font-headings);
  font-size: 0.75rem;
  text-transform: uppercase;
  padding: var(--space-md);
  text-align: left;
  position: sticky;
  top: 0;
  z-index: 10;
}
.market-insights .styled-table td {
  padding: var(--space-md);
  border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.05);
  color: var(--color-muted);
  font-size: 0.875rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.market-insights .styled-table tr:hover td {
  background: rgba(var(--color-accent-rgb), 0.05);
  color: var(--color-primary);
}

/* ============================================================
    BCRE STRATEGIC MASTER MANIFEST v6.1
    Location: scss/style.scss
    Standard: BCRE Modern Dart Sass 7-1
    Role: Final compile sequence for the global CSS architecture.
   ============================================================ */
/* ============================================================
    1. LOGIC LAYER (Configuration)
   ============================================================ */
/* =====================================================================
    FEATURED LISTINGS – Strategic BCRE Component v3.0
    Location: scss/components/_listings.scss
    Role: Premium inventory grid for 2026 New Listings.
    Standard: BCRE Modern Dart Sass 7-1
    Optimization: High-velocity performance & kinetic engagement.
   ===================================================================== */
#featured-listings,
.section-block {
  background-color: var(--color-light);
  position: relative;
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: 1px 1000px;
}

.featured-listing-grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
  padding-inline: var(--space-md);
  max-width: 1140px;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .featured-listing-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
  }
}
@media (min-width: 1024px) {
  .featured-listing-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.featured-listing-block {
  display: flex;
  flex-direction: column;
  background: var(--color-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  height: 100%;
  border: 1px solid rgba(var(--color-primary-rgb), 0.05);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform;
  transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
  will-change: transform, box-shadow;
}
.featured-listing-block:hover {
  transform: translateY(-12px);
  box-shadow: var(--shadow-strong);
}
.featured-listing-block:hover .listing-media img {
  transform: scale(1.06);
}
.featured-listing-block .listing-media {
  position: relative;
  width: 100%;
  background: var(--color-primary);
  overflow: hidden;
  aspect-ratio: 16/9;
}
@supports not (aspect-ratio: 1/1) {
  .featured-listing-block .listing-media {
    padding-top: 56.25%;
    position: relative;
  }
  .featured-listing-block .listing-media > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}
.featured-listing-block .listing-media img, .featured-listing-block .listing-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.featured-listing-block .listing-media img {
  transition: transform 1.2s var(--ease-out-expo);
  will-change: transform;
}
.featured-listing-block .listing-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(var(--color-primary-rgb), 0.5) 100%);
  pointer-events: none;
}
.featured-listing-block .listing-info {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: var(--space-sm);
}
.featured-listing-block .listing-info .badge-new {
  align-self: flex-start;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: var(--color-light);
  padding: 0.5em 1.5em;
  border-radius: var(--radius-full);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  box-shadow: 0 4px 10px rgba(var(--color-accent-rgb), 0.2);
}
.featured-listing-block .listing-info .listing-tagline {
  font-family: var(--font-headings);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.featured-listing-block .listing-info .listing-details {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-accent);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-bottom: 1px solid rgba(var(--color-accent-rgb), 0.2);
  padding-bottom: var(--space-xs);
  margin-bottom: var(--space-xs);
}
.featured-listing-block .listing-info .listing-summary {
  font-size: 0.875rem;
  color: var(--color-muted);
  line-height: 1.5;
  margin-bottom: var(--space-md);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.featured-listing-block .listing-info .button {
  margin-top: auto;
  width: 100%;
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
}

/* ============================================================
    BCRE STRATEGIC MASTER MANIFEST v6.1
    Location: scss/style.scss
    Standard: BCRE Modern Dart Sass 7-1
    Role: Final compile sequence for the global CSS architecture.
   ============================================================ */
/* ============================================================
    1. LOGIC LAYER (Configuration)
   ============================================================ */
/* ============================================================
    LISTS – BCRE Strategic UI Optimization
    Location: scss/components/_lists.scss
    Role: Handles property feature lists & regional routing.
    Standard: BCRE Modern Dart Sass 7-1
   ============================================================ */
/* ============================================================
    1. BASE UL/OL STYLES (Rich Text Defaults)
   ============================================================ */
ul,
ol {
  margin-top: 0;
  margin-bottom: var(--space-md);
  padding-left: var(--space-lg);
  line-height: 1.5;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-muted);
}
ul li,
ol li {
  margin-bottom: var(--space-xs);
}
ul li::marker,
ol li::marker {
  color: var(--color-accent);
  font-weight: 700;
}

/* ============================================================
    2. HIGHLIGHT LIST (Property Features)
   ============================================================ */
.highlight-list {
  list-style: none;
  padding: 0;
  margin-bottom: var(--space-md);
}
.highlight-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  font-size: 0.875rem;
  color: var(--color-muted);
  line-height: 1.5;
}
.highlight-list li::before {
  content: "→";
  display: inline-block;
  flex-shrink: 0;
  color: var(--color-accent);
  font-weight: 700;
  transition: transform 0.3s var(--ease-out-expo);
}
.highlight-list li:hover::before {
  transform: translateX(4px);
}

/* ============================================================
    3. MARKET LIST GRID (Regional Routing)
   ============================================================ */
.market-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(260px, 30vw, 340px), 1fr));
  gap: var(--space-md);
  margin-block: var(--space-lg);
  padding: 0;
  list-style: none;
}
.market-list .market-item {
  background: var(--color-light);
  border: 1px solid rgba(var(--color-primary-rgb), 0.08);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: var(--space-md);
  line-height: 1.5;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform;
  transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
  will-change: transform, box-shadow;
}
.market-list .market-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-strong);
}
.market-list .market-item strong {
  color: var(--color-primary);
  font-family: var(--font-headings);
  font-size: 1rem;
  display: block;
  margin-bottom: 4px;
}
.market-list .market-item:hover {
  border-left-color: var(--color-primary);
}

/* ============================================================
    4. INLINE LIST (Filters & Tags)
   ============================================================ */
.inline-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  gap: var(--space-sm);
  padding: 0;
  margin-inline: auto;
  margin-block: var(--space-md);
}
.inline-list li {
  display: inline-flex;
}
.inline-list li > a, .inline-list li > button, .inline-list li.is-static {
  appearance: none;
  background: rgba(var(--color-primary-rgb), 0.03);
  border: 1px solid rgba(var(--color-primary-rgb), 0.06);
  border-radius: var(--radius-md);
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary);
  text-decoration: none;
  cursor: pointer;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform;
  transition: all 0.3s var(--ease-out-expo);
}
.inline-list li > a:hover, .inline-list li > a:focus-visible, .inline-list li > button:hover, .inline-list li > button:focus-visible, .inline-list li.is-static:hover, .inline-list li.is-static:focus-visible {
  background: var(--color-primary);
  color: var(--color-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(var(--color-primary-rgb), 0.1);
  outline: none;
}
.inline-list li.active > a, .inline-list li.active > button {
  background: var(--color-primary);
  color: var(--color-light);
  border-color: var(--color-primary);
}

/* ============================================================
    5. MOBILE OPTIMIZATION
   ============================================================ */
@media (max-width: 575.98px) {
  .market-list {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
  .inline-list li {
    flex: 1 1 45%;
  }
  .inline-list li > a, .inline-list li > button, .inline-list li.is-static {
    width: 100%;
    justify-content: center;
    text-align: center;
    font-size: 0.65rem;
  }
}
/* ============================================================
    BCRE STRATEGIC MASTER MANIFEST v6.1
    Location: scss/style.scss
    Standard: BCRE Modern Dart Sass 7-1
    Role: Final compile sequence for the global CSS architecture.
   ============================================================ */
/* ============================================================
    1. LOGIC LAYER (Configuration)
   ============================================================ */
/* ============================================================
    BCRE STRATEGIC MEDIA ENGINE v4.3
    Location: scss/components/_media.scss
    Standard: BCRE Modern Dart Sass 7-1
    Role: Native Server-Hosted Images, Galleries, Video, & Audio.
   ============================================================ */
/* ============================================================
    1. BASE IMAGES & ASPECT RATIOS
   ============================================================ */
img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  background: transparent;
  transition: var(--transition-default);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform;
  image-rendering: -webkit-optimize-contrast;
}

/* Aspect Ratio Intelligence (Uniform Sizing) */
.image-16-9, .image-1-1, .image-4-3, .image-portrait {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--color-light-alt);
}
.image-16-9 img, .image-1-1 img, .image-4-3 img, .image-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-16-9 {
  aspect-ratio: 16/9;
}
@supports not (aspect-ratio: 1/1) {
  .image-16-9 {
    padding-top: 56.25%;
    position: relative;
  }
  .image-16-9 > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}

.image-1-1 {
  aspect-ratio: 1/1;
}
@supports not (aspect-ratio: 1/1) {
  .image-1-1 {
    padding-top: 100%;
    position: relative;
  }
  .image-1-1 > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}

.image-4-3 {
  aspect-ratio: 4/3;
}
@supports not (aspect-ratio: 1/1) {
  .image-4-3 {
    padding-top: 75%;
    position: relative;
  }
  .image-4-3 > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}

/* Strategic Portrait Lock: Critical for Advisor Consistency */
.image-portrait {
  aspect-ratio: 4/5;
}
@supports not (aspect-ratio: 1/1) {
  .image-portrait {
    padding-top: 125%;
    position: relative;
  }
  .image-portrait > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}
@media (max-width: 575.98px) {
  .image-portrait {
    aspect-ratio: 1/1;
    max-width: 280px;
    margin-inline: auto;
  }
}
.image-portrait img {
  object-position: center 15%;
}

/* Cinematic Breaks – Asset Integration Overlays */
.image-break {
  position: relative;
  width: 100%;
  margin-block: var(--space-xl);
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-strong);
  z-index: 10;
}
.image-break::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(var(--color-primary-rgb), 0.15) 0%, transparent 25%, transparent 75%, rgba(var(--color-primary-rgb), 0.3) 100%);
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.5s var(--ease-out-expo);
}
.image-break.full-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  border-radius: 0;
  box-shadow: none;
  margin-block: var(--space-xxl);
}
.image-break.full-bleed .image-16-9 {
  aspect-ratio: 21/9;
}
@supports not (aspect-ratio: 1/1) {
  .image-break.full-bleed .image-16-9 {
    padding-top: 42.8571428571%;
    position: relative;
  }
  .image-break.full-bleed .image-16-9 > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}
@media (max-width: 767.98px) {
  .image-break.full-bleed .image-16-9 {
    aspect-ratio: 16/9;
  }
}
.image-break img {
  transition: transform 1.5s var(--ease-out-expo);
  will-change: transform;
  transform: scale(1.02);
}
.image-break:hover::after {
  opacity: 0.8;
}
.image-break:hover img {
  transform: scale(1.06);
}
.image-break .break-caption {
  position: absolute;
  bottom: var(--space-lg);
  left: var(--space-lg);
  color: var(--color-light);
  z-index: 3;
  font-family: var(--font-headings);
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* ============================================================
    2. STRATEGIC GALLERIES & CAROUSELS
   ============================================================ */
/* Placeholder Tracks */
.agent-carousel, .gallery-carousel .carousel-track {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  padding-block: var(--space-md);
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform;
}
.agent-carousel::-webkit-scrollbar, .gallery-carousel .carousel-track::-webkit-scrollbar {
  display: none;
}

.agent-carousel .carousel-card, .gallery-carousel .gallery-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  border-radius: var(--radius-md);
  background: var(--color-light);
  overflow: hidden;
  transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
  will-change: transform, box-shadow;
}
.agent-carousel .carousel-card:hover, .gallery-carousel .gallery-item:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
}
.agent-carousel .carousel-card, .gallery-carousel .gallery-item {
  transition: var(--transition-default);
}

/* Strategic Property Visuals (Reveal Grid) */
#property-visuals-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 768px) {
  #property-visuals-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
}
@media (min-width: 1024px) {
  #property-visuals-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
#property-visuals-grid .image-wrapper {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
  will-change: transform, opacity;
}
#property-visuals-grid .image-wrapper.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Horizontal Asset Carousels */
.gallery-carousel {
  position: relative;
  width: 100%;
}
.gallery-carousel .gallery-item {
  width: clamp(280px, 40vw, 450px);
}
.gallery-carousel .gallery-item img.gallery-thumb {
  width: 100%;
  aspect-ratio: 16/9;
}
@supports not (aspect-ratio: 1/1) {
  .gallery-carousel .gallery-item img.gallery-thumb {
    padding-top: 56.25%;
    position: relative;
  }
  .gallery-carousel .gallery-item img.gallery-thumb > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}
.gallery-carousel .gallery-item img.gallery-thumb {
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--ease-out-expo);
}
.gallery-carousel .gallery-item:hover img.gallery-thumb {
  transform: scale(1.05);
}

/* Agent & Specialist Carousel */
.agent-carousel {
  padding-bottom: var(--space-xl);
}
.agent-carousel .carousel-card {
  width: clamp(200px, 22vw, 260px);
  border: 1px solid rgba(var(--color-primary-rgb), 0.05);
  text-decoration: none;
}
.agent-carousel .carousel-card .agent-photo-wrapper {
  width: 100%;
  aspect-ratio: 1/1;
}
@supports not (aspect-ratio: 1/1) {
  .agent-carousel .carousel-card .agent-photo-wrapper {
    padding-top: 100%;
    position: relative;
  }
  .agent-carousel .carousel-card .agent-photo-wrapper > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}
.agent-carousel .carousel-card .agent-photo-wrapper {
  overflow: hidden;
  background: var(--color-light-alt);
}
.agent-carousel .carousel-card .agent-photo-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out-expo);
}
.agent-carousel .carousel-card .card-content {
  padding: var(--space-md);
  text-align: center;
}
.agent-carousel .carousel-card .card-content .agent-name {
  font-family: var(--font-headings);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-primary);
  margin-bottom: 4px;
}
.agent-carousel .carousel-card .card-content .agent-title {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.agent-carousel .carousel-card:hover .agent-photo-wrapper img {
  transform: scale(1.08);
}
.agent-carousel .carousel-card:hover .agent-name {
  color: var(--color-accent);
}

/* ============================================================
    3. NATIVE VIDEO ENGINE & MODALS
   ============================================================ */
/* Strategic Property Tours (Self-Hosted) */
.video-wrapper {
  position: relative;
  width: 100%;
  margin-block: var(--space-lg);
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-dark);
  box-shadow: var(--shadow-soft);
  /* Default is Cinematic Horizontal */
  aspect-ratio: 16/9;
}
@supports not (aspect-ratio: 1/1) {
  .video-wrapper {
    padding-top: 56.25%;
    position: relative;
  }
  .video-wrapper > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}
.video-wrapper {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform;
}
@media (min-width: 768px) {
  .video-wrapper {
    max-width: 800px;
    box-shadow: var(--shadow-strong);
  }
}
.video-wrapper video, .video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
  border-radius: inherit;
  background: var(--color-dark);
}
.video-wrapper {
  /* Modifier: Vertical Reels / Shorts */
}
.video-wrapper--vertical {
  aspect-ratio: 9/16;
  max-width: 400px; /* Constrains the height beautifully on desktop */
  margin-inline: auto;
}
.video-wrapper--vertical video, .video-wrapper--vertical iframe {
  object-fit: cover;
}
@media (min-width: 768px) {
  .video-wrapper--vertical {
    border-radius: var(--radius-lg);
    max-width: 360px; /* Tighter constraint for ultra-premium feel on large screens */
  }
}

/* High-Impact Entry Point */
.video-thumb {
  position: relative;
  display: block;
  width: 100%;
  margin-block: var(--space-xl);
  margin-inline: auto;
  cursor: pointer;
  padding-inline: var(--space-sm);
}
@media (min-width: 768px) {
  .video-thumb {
    max-width: 960px;
    padding-inline: 0;
  }
}
.video-thumb img {
  display: block;
  width: 100%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  transition: var(--transition-default);
}
@media (min-width: 768px) {
  .video-thumb img {
    border-radius: var(--radius-lg);
  }
}
.video-thumb:hover img {
  filter: brightness(0.8);
  transform: scale(1.01);
}
.video-thumb .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.8rem;
  color: var(--color-light);
  background: rgba(var(--color-primary-rgb), 0.65);
  border-radius: 50%;
  padding: 0.5em 0.65em;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  transition: var(--transition-default);
  z-index: 10;
}
@media (min-width: 768px) {
  .video-thumb .play-button {
    font-size: clamp(2rem, 5vw, 3rem);
  }
}
.video-thumb .play-button:hover {
  background: rgba(var(--color-primary-rgb), 0.85);
  transform: translate(-50%, -50%) scale(1.1);
}

/* Immersive Focus Modal */
.modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background: rgba(0, 0, 0, 0.9);
  opacity: 0;
  pointer-events: none;
  transition: var(--transition-default);
  background-color: rgba(var(--color-primary-rgb), 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.modal.active {
  opacity: 1;
  pointer-events: auto;
}
.modal .modal-content {
  width: 100%;
  max-width: 1200px;
  aspect-ratio: 16/9;
}
@supports not (aspect-ratio: 1/1) {
  .modal .modal-content {
    padding-top: 56.25%;
    position: relative;
  }
  .modal .modal-content > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}
.modal .modal-content {
  background: var(--color-dark);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-strong);
  position: relative;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform;
}
.modal .modal-content iframe, .modal .modal-content video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

/* ============================================================
    4. NATIVE AUDIO PLAYER
   ============================================================ */
#audio-player {
  max-width: 960px;
  margin-inline: auto;
  text-align: center;
  background: var(--color-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-strong);
  padding: var(--space-md);
  opacity: 0;
  transform: translateY(8px);
  animation: fadeUp 0.6s ease forwards;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform;
}
@media (max-width: 575.98px) {
  #audio-player {
    padding: var(--space-sm);
    border-radius: var(--radius-md);
  }
}

.audio-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.audio-controls button {
  background: var(--color-accent);
  color: var(--color-primary);
  border: none;
  border-radius: var(--radius-full);
  width: 52px;
  height: 52px;
  cursor: pointer;
  transition: var(--transition-default);
  display: flex;
  align-items: center;
  justify-content: center;
}
.audio-controls button:hover {
  background: var(--color-primary);
  color: var(--color-light);
  transform: scale(1.08) translateY(-2px);
}
.audio-controls button:active {
  transform: scale(0.96);
}

.audio-waveform {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 3px;
  height: 44px;
  margin-block: var(--space-sm);
}
.audio-waveform span {
  display: block;
  width: 4px;
  background: var(--color-accent);
  border-radius: var(--radius-sm);
  animation: audioWave 1.2s infinite ease-in-out;
  will-change: height;
}
.audio-waveform span:nth-child(1) {
  animation-delay: 0.12s;
}
.audio-waveform span:nth-child(2) {
  animation-delay: 0.24s;
}
.audio-waveform span:nth-child(3) {
  animation-delay: 0.36s;
}
.audio-waveform span:nth-child(4) {
  animation-delay: 0.48s;
}
.audio-waveform span:nth-child(5) {
  animation-delay: 0.6s;
}
.audio-waveform span:nth-child(6) {
  animation-delay: 0.72s;
}
.audio-waveform span:nth-child(7) {
  animation-delay: 0.84s;
}
.audio-waveform span:nth-child(8) {
  animation-delay: 0.96s;
}

@keyframes audioWave {
  0%, 100% {
    height: 8px;
    opacity: 0.5;
  }
  50% {
    height: 36px;
    opacity: 1;
  }
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ============================================================
    BCRE STRATEGIC MASTER MANIFEST v6.1
    Location: scss/style.scss
    Standard: BCRE Modern Dart Sass 7-1
    Role: Final compile sequence for the global CSS architecture.
   ============================================================ */
/* ============================================================
    1. LOGIC LAYER (Configuration)
   ============================================================ */
/* ============================================================
    SOCIAL & DIGITAL HUB – BCRE Strategic Component v2.0
    Location: scss/components/_social.scss
    Role: External Social Networks, Feed Grids, & Embed Optimization.
    Standard: BCRE Modern Dart Sass 7-1
   ============================================================ */
/* ============================================================
    1. SOCIAL LINK CLUSTERS (Typography & Kinetic Hover)
   ============================================================ */
.social-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  align-items: center;
}
@media (max-width: 575.98px) {
  .social-cluster {
    gap: var(--space-sm) var(--space-md);
  }
}

/* Premium Animated Typography Link */
.social-link {
  font-family: var(--font-headings);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-primary);
  text-decoration: none;
  position: relative;
  padding-bottom: 4px;
  transition: color 0.3s var(--ease-out-expo);
  /* The "Draw Out" Underline */
}
.social-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-out-expo);
}
.social-link:hover, .social-link:focus-visible {
  color: var(--color-accent);
  outline: none;
}
.social-link:hover::after, .social-link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Dark Mode / Footer Reversals */
.bg-primary .social-link,
.site-footer .social-link {
  color: var(--color-light);
}
.bg-primary .social-link:hover, .bg-primary .social-link:focus-visible,
.site-footer .social-link:hover,
.site-footer .social-link:focus-visible {
  color: var(--color-accent);
}

/* ============================================================
    2. SOCIAL FEEDS (Instagram / Visual Grids)
   ============================================================ */
.social-feed-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xs);
}
@media (min-width: 768px) {
  .social-feed-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
  }
}
.social-feed-grid .feed-item {
  position: relative;
  aspect-ratio: 1/1;
}
@supports not (aspect-ratio: 1/1) {
  .social-feed-grid .feed-item {
    padding-top: 100%;
    position: relative;
  }
  .social-feed-grid .feed-item > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}
.social-feed-grid .feed-item {
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--color-light-alt);
  display: block;
  text-decoration: none;
  /* Hardware Acceleration */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform;
}
.social-feed-grid .feed-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out-expo);
  will-change: transform;
}
.social-feed-grid .feed-item {
  /* Glassmorphism Overlay */
}
.social-feed-grid .feed-item .feed-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(var(--color-primary-rgb), 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out-expo);
  /* Text styling & kinetic positioning */
  color: var(--color-light);
  font-family: var(--font-headings);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  /* Prepare for slide-up reveal */
  padding-top: 15px;
  transition: opacity 0.4s var(--ease-out-expo), padding-top 0.4s var(--ease-out-expo);
}
.social-feed-grid .feed-item:hover, .social-feed-grid .feed-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(var(--color-accent-rgb), 0.3);
}
.social-feed-grid .feed-item:hover img, .social-feed-grid .feed-item:focus-visible img {
  transform: scale(1.08);
}
.social-feed-grid .feed-item:hover .feed-overlay, .social-feed-grid .feed-item:focus-visible .feed-overlay {
  opacity: 1;
  padding-top: 0; /* Creates the slide-up reveal effect */
}

/* ============================================================
    3. GENERIC EMBED WRAPPERS (Spotify / External Iframes)
   ============================================================ */
.embed-wrapper {
  position: relative;
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: var(--color-light-alt);
  transition: box-shadow 0.4s var(--ease-out-expo), transform 0.4s var(--ease-out-expo);
  /* Strict containment prevents iOS iframe bleed */
  isolation: isolate;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.embed-wrapper:hover {
  box-shadow: var(--shadow-strong);
  transform: translateY(-4px);
}
.embed-wrapper iframe {
  display: block;
  width: 100%;
  border: none;
}
.embed-wrapper {
  /* Spotify specific override */
}
.embed-wrapper--spotify {
  min-height: 152px;
  border-radius: 12px; /* Matches Spotify's native iframe radius exactly */
}

/* ============================================================
    4. YOUTUBE FACADE ENGINE (Lazy-Loaded External Iframes)
   ============================================================ */
.youtube-facade {
  position: relative;
  width: 100%;
  cursor: pointer;
  background-color: var(--color-primary);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: block;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform;
  transition: var(--transition-default);
}
.youtube-facade--landscape {
  aspect-ratio: 16/9;
}
@supports not (aspect-ratio: 1/1) {
  .youtube-facade--landscape {
    padding-top: 56.25%;
    position: relative;
  }
  .youtube-facade--landscape > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}
.youtube-facade--shorts {
  aspect-ratio: 9/16;
}
@supports not (aspect-ratio: 1/1) {
  .youtube-facade--shorts {
    padding-top: 177.7777777778%;
    position: relative;
  }
  .youtube-facade--shorts > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}
.youtube-facade--shorts {
  max-width: 420px;
  margin-inline: auto;
  border: 1px solid rgba(var(--color-primary-rgb), 0.1);
}
.youtube-facade {
  /* Crisp, localized gradient for depth */
}
.youtube-facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(var(--color-primary-rgb), 0.25) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.4s var(--ease-out-expo);
}
.youtube-facade__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out-expo), filter 0.4s ease;
}
.youtube-facade__play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(60px, 8vw, 80px);
  height: clamp(40px, 6vw, 56px);
  /* Frosted Glass Play Button */
  background: rgba(var(--color-primary-rgb), 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: all 0.4s var(--ease-out-expo);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.youtube-facade__play-btn::after {
  content: "";
  border-style: solid;
  border-width: 10px 0 10px 18px;
  border-color: transparent transparent transparent var(--color-light);
  margin-left: 4px;
  transition: border-color 0.4s ease;
}
.youtube-facade:hover, .youtube-facade:focus-visible {
  outline: none;
  transform: translateY(-8px);
  box-shadow: var(--shadow-strong);
}
.youtube-facade:hover::after, .youtube-facade:focus-visible::after {
  opacity: 0;
}
.youtube-facade:hover .youtube-facade__thumb, .youtube-facade:focus-visible .youtube-facade__thumb {
  transform: scale(1.06);
  filter: brightness(0.9);
}
.youtube-facade:hover .youtube-facade__play-btn, .youtube-facade:focus-visible .youtube-facade__play-btn {
  background: var(--color-accent);
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 10px 30px rgba(var(--color-accent-rgb), 0.4);
}
.youtube-facade:hover .youtube-facade__play-btn::after, .youtube-facade:focus-visible .youtube-facade__play-btn::after {
  border-color: transparent transparent transparent var(--color-primary);
}
.youtube-facade {
  /* Activated State (When YouTube Iframe actually loads) */
}
.youtube-facade.is-active {
  cursor: default;
  transform: none !important;
  box-shadow: none;
}
.youtube-facade.is-active::after,
.youtube-facade.is-active .youtube-facade__thumb,
.youtube-facade.is-active .youtube-facade__play-btn {
  display: none;
}
.youtube-facade.is-active iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ============================================================
    BCRE STRATEGIC MASTER MANIFEST v6.1
    Location: scss/style.scss
    Standard: BCRE Modern Dart Sass 7-1
    Role: Final compile sequence for the global CSS architecture.
   ============================================================ */
/* ============================================================
    1. LOGIC LAYER (Configuration)
   ============================================================ */
/* =====================================================================
    MARKET TABLES – Strategic, Responsive, Accessible
    Location: scss/components/_tables.scss
    Role: Data-heavy market reports (e.g., Camas Sales Velocity)
    Standard: BCRE Modern Dart Sass 7-1
   ===================================================================== */
.market-table-wrapper {
  width: 100%;
  margin-block: var(--space-md);
  overflow-x: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* Custom Scrollbar - BCRE Gold Accent */
}
.market-table-wrapper::-webkit-scrollbar {
  height: 6px;
}
.market-table-wrapper::-webkit-scrollbar-thumb {
  background: rgba(var(--color-accent-rgb), 0.4);
  border-radius: var(--radius-full);
}
.market-table-wrapper::-webkit-scrollbar-track {
  background: rgba(var(--color-primary-rgb), 0.05);
}

.market-table {
  width: 100%;
  min-width: 600px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--color-light);
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-primary);
  /* Header Architecture: Sticky BCRE Navy */
}
.market-table th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-primary);
  color: var(--color-light);
  font-family: var(--font-headings);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  padding: var(--space-md);
  text-align: left;
  border-bottom: 2px solid var(--color-accent);
}
.market-table {
  /* Cell Logic */
}
.market-table td {
  padding: var(--space-md);
  vertical-align: middle;
  border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.05);
  transition: var(--transition-default);
}
.market-table {
  /* Strategic Number Alignment (Prevents Jitter) */
}
.market-table .num-cell {
  font-family: var(--font-headings);
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-weight: 600;
}
.market-table {
  /* Row Interactions */
}
.market-table tbody tr:nth-child(even) td {
  background: rgba(var(--color-primary-rgb), 0.01);
}
.market-table tbody tr:hover td {
  background: rgba(var(--color-accent-rgb), 0.08);
  color: var(--color-primary);
}
.market-table tbody tr:last-child td {
  border-bottom: none;
}
.market-table {
  /* Primary Column Emphasis */
}
.market-table tbody td:first-child {
  font-weight: 700;
  color: var(--color-primary);
  background: rgba(var(--color-primary-rgb), 0.02);
}
.market-table {
  /* Compliance & Status Badge System */
}
.market-table .status-badge {
  display: inline-flex;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.market-table .status-badge.status-active {
  background: #e6fffa;
  color: #2c7a7b;
}
.market-table .status-badge.status-pen {
  background: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary);
}
.market-table .status-badge.status-sld {
  background: rgba(var(--color-accent-rgb), 0.1);
  color: rgb(157.6, 128, 71.2);
}

/* =====================================================================
    ✅ Mobile Strategy: Responsive Stacked Cards
    Targets: Small screens where tables break layout
   ===================================================================== */
@media (max-width: 767.98px) {
  .market-table.stacked {
    display: block;
    border: none;
    box-shadow: none;
  }
  .market-table.stacked thead {
    display: none;
  }
  .market-table.stacked tbody, .market-table.stacked tr, .market-table.stacked td {
    display: block;
    width: 100%;
  }
  .market-table.stacked tr {
    background: var(--color-light);
    margin-bottom: var(--space-lg);
    border-radius: var(--radius-md);
    border: 1px solid rgba(var(--color-primary-rgb), 0.1);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
  }
  .market-table.stacked td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.05);
  }
  .market-table.stacked td::before {
    content: attr(data-label);
    font-family: var(--font-headings);
    font-weight: 700;
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--color-accent);
    text-align: left;
  }
  .market-table.stacked td:first-child {
    background: var(--color-primary);
    color: var(--color-light);
    padding-block: var(--space-sm);
    justify-content: center;
    font-size: 1rem;
  }
  .market-table.stacked td:first-child::before {
    display: none;
  }
}
/* ============================================================
    5. PAGES & EDITORIAL
   ============================================================ */
/* ============================================================
    BCRE STRATEGIC MASTER MANIFEST v6.1
    Location: scss/style.scss
    Standard: BCRE Modern Dart Sass 7-1
    Role: Final compile sequence for the global CSS architecture.
   ============================================================ */
/* ============================================================
    1. LOGIC LAYER (Configuration)
   ============================================================ */
/* ============================================================
    EDITORIAL BLOG ENGINE – BCRE Strategic v2.0
    Location: scss/layout/_blog.scss
    Role: High-end editorial architecture for market intelligence.
    Standard: BCRE Modern Dart Sass 7-1
   ============================================================ */
.blog-article {
  --blog-content-width: 720px;
  --blog-breakout-width: 1000px;
  padding-block: var(--space-xl) var(--space-xxl);
  background-color: var(--color-light);
}
.blog-article__header {
  max-width: var(--blog-breakout-width);
  margin-inline: auto;
  margin-bottom: var(--space-xxl);
  text-align: center;
  padding-inline: var(--space-md);
}
.blog-article__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  line-height: 0.95;
  color: var(--color-primary);
  margin-bottom: var(--space-md);
  letter-spacing: -0.03em;
  font-weight: 800;
}
.blog-article__meta {
  font-family: var(--font-headings);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-accent);
  font-weight: 800;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md) var(--space-xl);
  opacity: 0.9;
}
.blog-article__meta span {
  display: flex;
  align-items: center;
}
.blog-article__meta span::before {
  content: "";
  width: 4px;
  height: 4px;
  background: var(--color-accent);
  border-radius: 50%;
  margin-right: 12px;
  opacity: 0.5;
}
.blog-article__content {
  max-width: var(--blog-content-width);
  margin-inline: auto;
  font-size: 1.125rem;
  line-height: 1.85;
  color: var(--color-muted);
  padding-inline: var(--space-md);
}
.blog-article__content > p:first-of-type::first-letter {
  font-family: var(--font-display);
  float: left;
  font-size: 4.8rem;
  line-height: 1;
  padding-top: 4px;
  padding-right: 12px;
  color: var(--color-primary);
  font-weight: 700;
}
.blog-article__content p {
  margin-bottom: var(--space-lg);
  /* Handle orphan prevention natively */
  text-wrap: pretty;
}
.blog-article__content h2, .blog-article__content h3 {
  font-family: var(--font-headings);
  color: var(--color-primary);
  margin-top: var(--space-xxl);
  margin-bottom: var(--space-md);
  line-height: 1.2;
}
.blog-article__content h2 {
  font-size: 2rem;
  border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.05);
  padding-bottom: 0.5rem;
}
.blog-article__content figure {
  margin-block: var(--space-xxl);
  width: 100%;
}
@media (min-width: 1200px) {
  .blog-article__content figure {
    width: var(--blog-breakout-width);
    margin-left: calc((var(--blog-breakout-width) - var(--blog-content-width)) / -2);
  }
}
.blog-article__content figure img, .blog-article__content figure .youtube-facade {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-strong);
  transition: var(--transition-default);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform;
}
.blog-article__content figure figcaption {
  font-family: var(--font-body);
  font-size: 0.875rem;
  text-align: center;
  margin-top: var(--space-md);
  font-style: italic;
  color: var(--color-muted);
  opacity: 0.8;
}
.blog-article__content blockquote {
  margin: var(--space-xl) 0;
  padding: var(--space-lg) var(--space-xl);
  border-left: 3px solid var(--color-accent);
  background-color: rgba(var(--color-primary-rgb), 0.02);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-style: italic;
  color: var(--color-primary);
}

/* ============================================
    RELATED POSTS MODULE (Kinetic Card Integration)
   ============================================ */
.blog-related {
  background-color: rgba(var(--color-primary-rgb), 0.03);
  padding-block: var(--space-xxl);
  margin-top: var(--space-xxl);
  border-top: 1px solid rgba(var(--color-primary-rgb), 0.08);
}
.blog-related__header {
  text-align: center;
  margin-bottom: var(--space-xl);
}
.blog-related__header h4 {
  font-family: var(--font-headings);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-accent);
}

/* ============================================================
    BCRE STRATEGIC MASTER MANIFEST v6.1
    Location: scss/style.scss
    Standard: BCRE Modern Dart Sass 7-1
    Role: Final compile sequence for the global CSS architecture.
   ============================================================ */
/* ============================================================
    1. LOGIC LAYER (Configuration)
   ============================================================ */
/* ============================================================
    MARKET PAGES – Strategic Editorial Layout 3.0
    Location: scss/pages/_market-pages.scss
    Role: Regional intelligence engine for PNW real estate.
    Standard: BCRE Modern Dart Sass 7-1
   ============================================================ */
/* 1. Page Wrapper & Entry Animations */
.market-page {
  background: var(--color-light);
  animation: fadeIn 0.8s var(--ease-out-expo) both;
}
.market-page h1.section-header {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  font-weight: 800;
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
  letter-spacing: -0.03em;
  line-height: 0.95;
  animation: fadeUp 0.8s var(--ease-out-expo) both;
}
.market-page .hero_header--alt {
  display: block;
  font-family: var(--font-body);
  font-weight: 300;
  font-style: italic;
  font-size: 0.45em;
  color: var(--color-accent);
  letter-spacing: 0;
  margin-top: 0.2em;
}

/* 2. Market Hero Image (Kinetic Asset) */
.market-image {
  display: block;
  width: 100%;
  max-width: 1000px;
  margin-block: var(--space-xl);
  margin-inline: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-strong);
  object-fit: cover;
  aspect-ratio: 16/9;
}
@supports not (aspect-ratio: 1/1) {
  .market-image {
    padding-top: 56.25%;
    position: relative;
  }
  .market-image > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}
.market-image {
  transition: transform 0.6s var(--ease-out-expo), box-shadow 0.6s ease;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform;
}
.market-image:hover {
  transform: scale(1.01) translateY(-5px);
  box-shadow: 0 20px 40px rgba(var(--color-primary-rgb), 0.15);
}

/* 3. Market Insights (Strategic Intelligence Block) */
.market-insights {
  background: var(--color-light);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(var(--color-primary-rgb), 0.05);
  box-shadow: var(--shadow-soft);
  margin-top: var(--space-xxl);
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .market-insights {
    padding: var(--space-xxl);
  }
}
.market-insights::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.05) 0%, rgba(var(--color-primary-rgb), 0.02) 100%);
  pointer-events: none;
}
.market-insights .market-report {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-muted);
  position: relative;
  z-index: 1;
}
.market-insights .market-report strong {
  color: var(--color-primary);
  font-weight: 700;
}
.market-insights {
  /* Data Visualization List */
}
.market-insights .market-stats {
  list-style: none;
  margin-block: var(--space-xl);
  padding: 0;
  display: grid;
  gap: 1rem;
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .market-insights .market-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}
.market-insights .market-stats li {
  font-family: var(--font-headings);
  font-size: 0.875rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px dashed rgba(var(--color-primary-rgb), 0.15);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-muted);
}
.market-insights .market-stats li span:first-child {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 800;
}
.market-insights .market-stats li span:last-child {
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
}

/* 4. Seller & Advisor Conversion Blocks */
.market-seller {
  background: linear-gradient(rgba(var(--color-primary-rgb), 0.03), rgba(var(--color-primary-rgb), 0.01));
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  margin-top: var(--space-xxl);
  text-align: center;
  border: 1px solid rgba(var(--color-primary-rgb), 0.05);
}
.market-seller h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin-bottom: var(--space-md);
  color: var(--color-primary);
  letter-spacing: -0.02em;
}
.market-seller p {
  max-width: 42rem;
  margin-inline: auto;
  margin-bottom: var(--space-lg);
  color: var(--color-muted);
  line-height: 1.6;
}

/* 5. Keyframe Animations (Refined Expo Easing) */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ============================================================
    BCRE STRATEGIC MASTER MANIFEST v6.1
    Location: scss/style.scss
    Standard: BCRE Modern Dart Sass 7-1
    Role: Final compile sequence for the global CSS architecture.
   ============================================================ */
/* ============================================================
    1. LOGIC LAYER (Configuration)
   ============================================================ */
/* ============================================================
   CONDO DIRECTORY & INTELLIGENCE MODULE
   Location: scss/pages/_condos.scss
   Role: Styling for market stats, building cards, and data grids.
   Standard: BCRE Modern Dart Sass 7-1
   ============================================================ */
/* ============================================================
   1. MARKET INTELLIGENCE STATS (Hero/Header Data)
   ============================================================ */
.market-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 768px) {
  .market-stats {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
  }
}
.market-stats li {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  background: var(--color-light);
  border: 1px solid rgba(var(--color-primary-rgb), 0.04);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
  will-change: transform, box-shadow;
  transform: translateZ(0);
}
.market-stats li:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(var(--color-primary-rgb), 0.08);
}
.market-stats__label {
  font-family: var(--font-headings);
  font-size: clamp(0.65rem, 1vw, 0.7rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted);
}
.market-stats__value {
  font-family: var(--font-headings);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* ============================================================
   2. CONDO CARD DATA ELEMENTS & ANIMATIONS
   ============================================================ */
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(40px) translateZ(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) translateZ(0);
  }
}
.amenity-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.amenity-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  background: rgba(var(--color-primary-rgb), 0.04);
  border: 1px solid rgba(var(--color-primary-rgb), 0.06);
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
  transition: all 0.3s var(--ease-out-expo);
}
.amenity-chip:hover {
  background: rgba(var(--color-primary-rgb), 0.08);
  border-color: rgba(var(--color-primary-rgb), 0.15);
  transform: translateY(-1px);
}

.condo-status-badge {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  z-index: 2;
  padding: 8px 14px;
  background: var(--color-primary);
  color: var(--color-light);
  font-family: var(--font-headings);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(4px);
}

/* Data Grid (BEM Structure Enforced) */
.condo-data-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  margin-top: auto;
  margin-bottom: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(var(--color-primary-rgb), 0.08);
}
.condo-data-grid__point {
  display: flex;
  flex-direction: column;
}
.condo-data-grid__point--full {
  grid-column: 1/-1;
  margin-top: var(--space-xs);
}
.condo-data-grid__label {
  margin-bottom: 4px;
  font-family: var(--font-headings);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted);
}
.condo-data-grid__value {
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -0.01em;
}

/* ============================================================
   3. INDIVIDUAL BUILDING PROFILE PAGES
   ============================================================ */
.building-intel-table {
  width: 100%;
  background: var(--color-light);
  border: 1px solid rgba(var(--color-primary-rgb), 0.06);
  border-collapse: collapse;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.building-intel-table tr {
  border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.06);
  transition: background-color 0.2s ease;
}
.building-intel-table tr:last-child {
  border-bottom: none;
}
.building-intel-table tr:hover {
  background-color: rgba(var(--color-primary-rgb), 0.02);
}
.building-intel-table th, .building-intel-table td {
  padding: var(--space-md) var(--space-lg);
  text-align: left;
  vertical-align: top;
}
.building-intel-table th {
  width: 45%;
  background: rgba(var(--color-light-alt-rgb), 0.5);
  font-family: var(--font-headings);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
}
.building-intel-table td {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-primary);
}

/* ============================================================
    6. UTILITIES (Structural Overrides)
   ============================================================ */
/* ============================================================
    BCRE STRATEGIC MASTER MANIFEST v6.1
    Location: scss/style.scss
    Standard: BCRE Modern Dart Sass 7-1
    Role: Final compile sequence for the global CSS architecture.
   ============================================================ */
/* ============================================================
    1. LOGIC LAYER (Configuration)
   ============================================================ */
/* ============================================================
    BCRE STRATEGIC UTILITIES 
    Location: scss/utils/_utilities.scss
    Standard: BCRE Modern Dart Sass 7-1
    Role: Structural overrides, rapid layout hooks, and containment.
   ============================================================ */
/* ============================================================
    1. FLEXBOX & LAYOUT HELPERS
   ============================================================ */
.flex {
  display: flex;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-split {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.grid {
  display: grid;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.mx-auto {
  margin-inline: auto;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

/* REFINED: Mobile-First Alignment & Centering Hooks */
@media (max-width: 1023.98px) {
  .text-mobile-center {
    text-align: center !important;
  }
  .justify-mobile-center {
    justify-content: center !important;
  }
  .align-mobile-center {
    align-items: center !important;
  }
  .flex-mobile-center {
    justify-content: center !important;
    align-items: center !important;
  }
  .mobile-order-first {
    order: -1 !important;
  }
  .mobile-order-last {
    order: 99 !important;
  }
  .w-mobile-100 {
    width: 100% !important;
    display: flex !important;
  }
  .mx-mobile-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* DESKTOP REVERSALS (Ensures clean layout on larger screens) */
@media (min-width: 1024px) {
  .text-left-desktop {
    text-align: left !important;
  }
  .justify-start-desktop {
    justify-content: flex-start !important;
  }
}
/* ============================================================
    2. DYNAMIC SPACING SYSTEM (Variable-Based)
   ============================================================ */
.gap-xxs {
  gap: var(--space-xxs) !important;
}

.m-xxs {
  margin: var(--space-xxs) !important;
}

.mb-xxs {
  margin-bottom: var(--space-xxs) !important;
}

.mt-xxs {
  margin-top: var(--space-xxs) !important;
}

.p-xxs {
  padding: var(--space-xxs) !important;
}

.pb-xxs {
  padding-bottom: var(--space-xxs) !important;
}

.pt-xxs {
  padding-top: var(--space-xxs) !important;
}

@media (max-width: 575.98px) {
  .mb-mobile-xxs {
    margin-bottom: var(--space-xxs) !important;
  }
  .mt-mobile-xxs {
    margin-top: var(--space-xxs) !important;
  }
  .gap-mobile-xxs {
    gap: var(--space-xxs) !important;
  }
}
.gap-xs {
  gap: var(--space-xs) !important;
}

.m-xs {
  margin: var(--space-xs) !important;
}

.mb-xs {
  margin-bottom: var(--space-xs) !important;
}

.mt-xs {
  margin-top: var(--space-xs) !important;
}

.p-xs {
  padding: var(--space-xs) !important;
}

.pb-xs {
  padding-bottom: var(--space-xs) !important;
}

.pt-xs {
  padding-top: var(--space-xs) !important;
}

@media (max-width: 575.98px) {
  .mb-mobile-xs {
    margin-bottom: var(--space-xs) !important;
  }
  .mt-mobile-xs {
    margin-top: var(--space-xs) !important;
  }
  .gap-mobile-xs {
    gap: var(--space-xs) !important;
  }
}
.gap-sm {
  gap: var(--space-sm) !important;
}

.m-sm {
  margin: var(--space-sm) !important;
}

.mb-sm {
  margin-bottom: var(--space-sm) !important;
}

.mt-sm {
  margin-top: var(--space-sm) !important;
}

.p-sm {
  padding: var(--space-sm) !important;
}

.pb-sm {
  padding-bottom: var(--space-sm) !important;
}

.pt-sm {
  padding-top: var(--space-sm) !important;
}

@media (max-width: 575.98px) {
  .mb-mobile-sm {
    margin-bottom: var(--space-sm) !important;
  }
  .mt-mobile-sm {
    margin-top: var(--space-sm) !important;
  }
  .gap-mobile-sm {
    gap: var(--space-sm) !important;
  }
}
.gap-md {
  gap: var(--space-md) !important;
}

.m-md {
  margin: var(--space-md) !important;
}

.mb-md {
  margin-bottom: var(--space-md) !important;
}

.mt-md {
  margin-top: var(--space-md) !important;
}

.p-md {
  padding: var(--space-md) !important;
}

.pb-md {
  padding-bottom: var(--space-md) !important;
}

.pt-md {
  padding-top: var(--space-md) !important;
}

@media (max-width: 575.98px) {
  .mb-mobile-md {
    margin-bottom: var(--space-md) !important;
  }
  .mt-mobile-md {
    margin-top: var(--space-md) !important;
  }
  .gap-mobile-md {
    gap: var(--space-md) !important;
  }
}
.gap-lg {
  gap: var(--space-lg) !important;
}

.m-lg {
  margin: var(--space-lg) !important;
}

.mb-lg {
  margin-bottom: var(--space-lg) !important;
}

.mt-lg {
  margin-top: var(--space-lg) !important;
}

.p-lg {
  padding: var(--space-lg) !important;
}

.pb-lg {
  padding-bottom: var(--space-lg) !important;
}

.pt-lg {
  padding-top: var(--space-lg) !important;
}

@media (max-width: 575.98px) {
  .mb-mobile-lg {
    margin-bottom: var(--space-lg) !important;
  }
  .mt-mobile-lg {
    margin-top: var(--space-lg) !important;
  }
  .gap-mobile-lg {
    gap: var(--space-lg) !important;
  }
}
.gap-xl {
  gap: var(--space-xl) !important;
}

.m-xl {
  margin: var(--space-xl) !important;
}

.mb-xl {
  margin-bottom: var(--space-xl) !important;
}

.mt-xl {
  margin-top: var(--space-xl) !important;
}

.p-xl {
  padding: var(--space-xl) !important;
}

.pb-xl {
  padding-bottom: var(--space-xl) !important;
}

.pt-xl {
  padding-top: var(--space-xl) !important;
}

@media (max-width: 575.98px) {
  .mb-mobile-xl {
    margin-bottom: var(--space-xl) !important;
  }
  .mt-mobile-xl {
    margin-top: var(--space-xl) !important;
  }
  .gap-mobile-xl {
    gap: var(--space-xl) !important;
  }
}
.gap-xxl {
  gap: var(--space-xxl) !important;
}

.m-xxl {
  margin: var(--space-xxl) !important;
}

.mb-xxl {
  margin-bottom: var(--space-xxl) !important;
}

.mt-xxl {
  margin-top: var(--space-xxl) !important;
}

.p-xxl {
  padding: var(--space-xxl) !important;
}

.pb-xxl {
  padding-bottom: var(--space-xxl) !important;
}

.pt-xxl {
  padding-top: var(--space-xxl) !important;
}

@media (max-width: 575.98px) {
  .mb-mobile-xxl {
    margin-bottom: var(--space-xxl) !important;
  }
  .mt-mobile-xxl {
    margin-top: var(--space-xxl) !important;
  }
  .gap-mobile-xxl {
    gap: var(--space-xxl) !important;
  }
}
.gap-hero-offset {
  gap: var(--space-hero-offset) !important;
}

.m-hero-offset {
  margin: var(--space-hero-offset) !important;
}

.mb-hero-offset {
  margin-bottom: var(--space-hero-offset) !important;
}

.mt-hero-offset {
  margin-top: var(--space-hero-offset) !important;
}

.p-hero-offset {
  padding: var(--space-hero-offset) !important;
}

.pb-hero-offset {
  padding-bottom: var(--space-hero-offset) !important;
}

.pt-hero-offset {
  padding-top: var(--space-hero-offset) !important;
}

@media (max-width: 575.98px) {
  .mb-mobile-hero-offset {
    margin-bottom: var(--space-hero-offset) !important;
  }
  .mt-mobile-hero-offset {
    margin-top: var(--space-hero-offset) !important;
  }
  .gap-mobile-hero-offset {
    gap: var(--space-hero-offset) !important;
  }
}
.m-0 {
  margin: 0 !important;
}

.p-0 {
  padding: 0 !important;
}

@media (max-width: 575.98px) {
  .pt-mobile-hero-offset {
    padding-top: calc(var(--header-height) + var(--space-hero-offset)) !important;
  }
}
/* ============================================================
    3. MEDIA WRAPPERS & ASPECT RATIOS
   ============================================================ */
.video-wrapper,
.image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--color-primary);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform;
  aspect-ratio: 16/9;
}
@supports not (aspect-ratio: 1/1) {
  .video-wrapper,
  .image-wrapper {
    padding-top: 56.25%;
    position: relative;
  }
  .video-wrapper > *,
  .image-wrapper > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}
.video-wrapper img, .video-wrapper video, .video-wrapper iframe,
.image-wrapper img,
.image-wrapper video,
.image-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
}

.media-portrait {
  aspect-ratio: 4/5;
}
@supports not (aspect-ratio: 1/1) {
  .media-portrait {
    padding-top: 125%;
    position: relative;
  }
  .media-portrait > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}

/* ============================================================
    4. VISIBILITY & ACCESSIBILITY
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

@media (min-width: 768px) {
  .mobile-only {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  .desktop-only {
    display: none !important;
  }
}

/* ============================================================
    5. INTERACTIVE & FILTER UTILITIES
   ============================================================ */
.filter-bar {
  background: var(--color-primary);
  padding-block: var(--space-md);
  position: sticky;
  top: var(--header-height);
  z-index: 500;
  box-shadow: var(--shadow-strong);
}
@media (max-width: 575.98px) {
  .filter-bar {
    padding-block: var(--space-sm);
  }
}

/* ============================================================
    6. MOBILE CONTAINMENT & TOUCH OPTIMIZATION (v5.0)
   ============================================================ */
@media (max-width: 575.98px) {
  /* Bulletproof Page Containment (Prevents horizontal blowouts) */
  body, #main-content {
    overflow-x: hidden;
    width: 100vw;
    max-width: 100%;
    -webkit-text-size-adjust: 100%;
    overscroll-behavior-y: none;
  }
  /* Structural Grid Resets (Forces vertical stacking on mobile) */
  .grid-tiles,
  .listing-grid,
  .agent-grid,
  .container-grid:not([data-cols]) {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-lg);
  }
  /* iOS Performance Engine (Prevent Auto-Zoom) */
  input, select, textarea {
    font-size: 16px !important;
    appearance: none;
  }
}
/* ============================================================
    7. TYPOGRAPHY, COLOR & STRUCTURAL UTILITIES
    Role: Eliminates inline CSS for semantic formatting.
   ============================================================ */
.text-primary {
  color: var(--color-primary) !important;
}

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

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

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

.bg-primary {
  background-color: var(--color-primary) !important;
}

.bg-light {
  background-color: var(--color-light) !important;
}

.bg-light-alt {
  background-color: var(--color-light-alt) !important;
}

.bg-transparent {
  background-color: transparent !important;
}

.overline {
  font-family: var(--font-headings);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 700;
}

.display-heading {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  line-height: 1.1;
}

.font-bold {
  font-weight: 700 !important;
}

.font-light {
  font-weight: 300 !important;
}

.font-italic {
  font-style: italic !important;
}

.font-headings {
  font-family: var(--font-headings) !important;
}

.text-sm {
  font-size: 0.875rem !important;
}

.text-lg {
  font-size: 1.25rem !important;
}

.text-xl {
  font-size: 1.5rem !important;
}

.line-height-base {
  line-height: 1.5 !important;
}

.opacity-80 {
  opacity: 0.8 !important;
}

.max-w-ch {
  max-width: 60ch !important;
}

.shadow-none {
  box-shadow: none !important;
}

.shadow-soft {
  box-shadow: var(--shadow-soft) !important;
}

.shadow-strong {
  box-shadow: var(--shadow-strong) !important;
}

.border-top {
  border-top: 1px solid rgba(var(--color-primary-rgb), 0.1) !important;
}

.border-bottom {
  border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.1) !important;
}

.border-light {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.border-radius-md {
  border-radius: var(--radius-md) !important;
}

/*# sourceMappingURL=style.css.map */