/* ========================================
   NAH Realty - Brand Stylesheet
   Version: 1.3.0 - Complete Fixes
   ======================================== */

/* ----------------------------------------
   CSS Custom Properties (Light Mode Default)
   ---------------------------------------- */
:root {
    /* Brand Colors */
    --color-gold: #B8956B;
    --color-gold-hover: #A6845D;
    --color-gold-light: rgba(184, 149, 107, 0.1);
    --color-slate: #1E293B;
    --color-champagne: #F5EFE6;
    --color-charcoal: #374151;
    --color-warm-gray: #9CA3AF;
    --color-white: #FFFFFF;
    --color-black: #000000;

    /* Light Mode Theme Colors */
    --bg-primary: var(--color-champagne);
    --bg-secondary: var(--color-white);
    --bg-dark: var(--color-slate);
    --text-primary: var(--color-slate);
    --text-secondary: var(--color-charcoal);
    --text-muted: var(--color-warm-gray);
    /* Readable muted: 4.6:1 on champagne/white. Use for ALL readable muted text.
       --text-muted (#9CA3AF) is reserved for decorative non-text (borders, dividers,
       disabled-state icons) only. */
    --text-muted-readable: #6B7280;
    --text-on-dark: var(--color-white);
    --accent: var(--color-gold);
    --accent-hover: var(--color-gold-hover);
    --border-color: #E5E0D8;

    /* dev-0.59: status colors. The light value is the deep on-light hex (the
       historical hardcode, correct on light backgrounds, so repointing keeps
       light mode pixel-identical); the bright dark value (legible on the
       deep-slate dark surfaces) lives in the prefers-color-scheme:dark block.
       Same light==old-hex / dark==legible pattern dev-0.57 used for text. */
    --status-error: #b91c1c;
    --status-success: #166534;
    --status-warning: #b45309;
    --status-negative: #991b1b;
    --status-neutral: #475569;

    /* Typography */
    --font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-secondary: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Font Weights */
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    /* Container */
    --container-max: 1200px;
    --container-padding: 1.5rem;

    /* Header */
    --header-height: 80px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(30, 41, 59, 0.05);
    --shadow-md: 0 4px 6px rgba(30, 41, 59, 0.07);
    --shadow-lg: 0 10px 25px rgba(30, 41, 59, 0.1);
    --shadow-xl: 0 20px 40px rgba(30, 41, 59, 0.15);
}

/* ----------------------------------------
   Dark Mode
   ---------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: var(--color-slate);
        --bg-secondary: #263244;
        --bg-dark: #151D2B;
        --text-primary: var(--color-champagne);
        --text-secondary: #D1CCC3;
        --text-muted: var(--color-warm-gray);
        --text-muted-readable: #B0B7C3;
        --text-on-dark: var(--color-champagne);
        --border-color: #3D4A5C;
        /* dev-0.59: bright, legible-on-dark status values (paired with the deep
           on-light values in :root). */
        --status-error: #F87171;
        --status-success: #4ADE80;
        --status-warning: #FBBF24;
        --status-negative: #FCA5A5;
        --status-neutral: #B0B7C3;
        --color-gold-light: rgba(184, 149, 107, 0.15);
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
        --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.25);
        --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.3);
        --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.4);
    }

}

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-primary);
    font-weight: var(--weight-regular);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    transition: background-color var(--transition-base), color var(--transition-base);
}

body.no-scroll {
    overflow: hidden;
}

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

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

ul, ol {
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

input, select, textarea {
    font-family: inherit;
    font-size: inherit;
}

/* ----------------------------------------
   Typography
   ---------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--weight-bold);
    line-height: 1.2;
    color: var(--text-primary);
}

h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: var(--weight-extrabold);
    letter-spacing: -0.02em;
}

h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    letter-spacing: -0.01em;
}

h3 {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
}

h4 {
    font-size: 1.125rem;
    font-weight: var(--weight-semibold);
}

p {
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
}

p:last-child {
    margin-bottom: 0;
}

.text-gold {
    color: var(--color-gold);
}

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

.lead {
    font-size: 1.25rem;
    line-height: 1.5;
}

/* ----------------------------------------
   Container & Layout
   ---------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.section {
    padding: var(--space-4xl) 0;
}

.section-dark {
    background-color: var(--bg-dark);
    color: var(--text-on-dark);
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4 {
    color: var(--text-on-dark);
}

.section-dark p {
    color: rgba(255, 255, 255, 0.8);
}

.section-alt {
    background-color: var(--bg-secondary);
}

/* Section Header */
.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--space-3xl);
}

.section-header h2 {
    margin-bottom: var(--space-md);
}

.section-header p {
    color: var(--text-secondary);
    font-size: 1.0625rem;
}

/* ----------------------------------------
   Header - Matching NAH Management
   ---------------------------------------- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    z-index: 1000;
    transition: background-color var(--transition-base), box-shadow var(--transition-base);
}

.site-header.scrolled {
    box-shadow: var(--shadow-md);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    gap: var(--space-xl);
}

/* ----------------------------------------
   Logo System - Matching NAH Management
   ---------------------------------------- */
.logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-decoration: none;
    flex-shrink: 0;
}

.logo-mark {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.logo-key-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 800px;
}

.logo-key {
    height: 28px;
    width: auto;
    cursor: pointer;
    transform-style: preserve-3d;
}

.logo-key:hover {
    animation: keyUnlock 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.logo-key.flip {
    animation: keyUnlock 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes keyUnlock {
    0% {
        transform: rotateX(0deg);
    }
    50% {
        transform: rotateX(-180deg);
    }
    100% {
        transform: rotateX(-360deg);
    }
}

.logo-wordmark {
    font-family: var(--font-primary);
    font-weight: var(--weight-extrabold);
    font-size: 1.75rem;
    letter-spacing: 0.08em;
    color: var(--text-primary);
    line-height: 1;
    display: flex;
    align-items: center;
}

.logo-text {
    font-family: var(--font-primary);
    font-weight: var(--weight-medium);
    font-size: 0.5rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-charcoal);
    margin-top: 2px;
    display: block;
    white-space: nowrap;
}

/* Light mode logo (default) */
.logo-light {
    display: block;
}

.logo-dark {
    display: none;
}

/* Dark mode logo adjustments */
@media (prefers-color-scheme: dark) {
    .logo-wordmark {
        color: var(--color-gold);
    }

    .logo-text {
        color: var(--color-champagne);
    }

    .logo-light {
        display: none;
    }

    .logo-dark {
        display: block;
    }
}

/* ----------------------------------------
   Main Navigation
   ---------------------------------------- */
.main-nav {
    display: none;
    align-items: center;
    gap: var(--space-md);
}

.main-nav a {
    font-weight: var(--weight-medium);
    font-size: 0.9375rem;
    color: var(--text-secondary);
    padding: var(--space-sm) 0;
    position: relative;
    /* dev-0.32.1: keep two-word labels (Browse Homes, Private Collection,
       ConciergeMatch) on a single line so the bar never wraps. */
    white-space: nowrap;
}

.main-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-gold);
    transition: width var(--transition-fast);
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--text-primary);
}

.main-nav a:hover::after,
.main-nav a.active::after {
    width: 100%;
}

/* Header Actions */
.header-actions {
    display: none;
    align-items: center;
    gap: var(--space-sm);
}

/* Mobile Toggle */
.mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--text-primary);
}

.mobile-toggle .icon-close {
    display: none;
}

.site-header.menu-open .mobile-toggle .icon-menu {
    display: none;
}

.site-header.menu-open .mobile-toggle .icon-close {
    display: block;
}

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-primary);
    padding: var(--space-xl) var(--container-padding);
    transform: translateX(100%);
    transition: transform var(--transition-base);
    overflow-y: auto;
    z-index: 999;
    display: flex;
    flex-direction: column;
}

.mobile-menu.open {
    transform: translateX(0);
}

.mobile-menu-header {
    /* dev-0.31: stack the primary CTA and the auth control full-width so they
       align cleanly (the auth block is injected after load; a row left it
       vertically off-center). Mobile-only surface; desktop menu is hidden. */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
    padding-bottom: var(--space-lg);
    margin-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-color);
}

.mobile-login-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px; /* dev-0.31: 44px touch target */
    padding: var(--space-sm) var(--space-md);
    font-size: 0.875rem;
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    text-align: center;
}

.mobile-login-btn:hover {
    border-color: var(--color-gold);
    color: var(--color-gold);
}

.mobile-login-btn-primary {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-white);
}

.mobile-login-btn-primary:hover {
    background-color: var(--color-gold-hover);
    border-color: var(--color-gold-hover);
    color: var(--color-white);
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.mobile-nav a {
    font-size: 1.125rem;
    font-weight: var(--weight-medium);
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--border-color);
}

.mobile-nav a.active {
    color: var(--color-gold);
}

.mobile-menu-footer {
    margin-top: auto;
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.mobile-menu-footer a {
    font-size: 0.875rem;
    color: var(--text-muted-readable);
    display: flex;
    align-items: center;
    min-height: 44px; /* dev-0.31: 44px touch target */
}

/* Desktop Navigation */
@media (min-width: 1024px) {
    .main-nav {
        display: flex;
    }

    .header-actions {
        display: flex;
    }

    .mobile-toggle {
        display: none;
    }

    .mobile-menu {
        display: none;
    }
}

/* dev-0.32.1: between 1024px and 1200px the eight nav links plus the Find Your
   Home button and the account icon are tight (the new Private Collection link
   pushed it over). Step the gap and link size down so the whole bar stays on
   one clean line. Targets the desktop .main-nav only; the mobile menu, which is
   the .mobile-nav list shown below 1024px, is untouched. */
@media (max-width: 1200px) {
    .main-nav {
        gap: var(--space-sm);
    }

    .main-nav a {
        font-size: 0.875rem;
    }
}

/* ----------------------------------------
   Mobile Logo Adjustments
   ---------------------------------------- */
@media (max-width: 767px) {
    .logo-key {
        height: 24px;
    }

    .logo-wordmark {
        font-size: 1.5rem;
    }

    .logo-text {
        font-size: 0.4375rem;
    }

    .logo-mark {
        gap: 6px;
    }
}

@media (max-width: 480px) {
    .logo-key {
        height: 20px;
    }

    .logo-wordmark {
        font-size: 1.25rem;
    }

    .logo-text {
        font-size: 0.375rem;
        letter-spacing: 0.08em;
    }

    .logo-mark {
        gap: 5px;
    }
}

/* ----------------------------------------
   Footer - Matching NAH Management
   ---------------------------------------- */
.site-footer {
    background-color: var(--color-slate);
    color: var(--color-champagne);
    padding: var(--space-4xl) 0 var(--space-xl);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    margin-bottom: var(--space-3xl);
}

.footer-brand {
    max-width: 300px;
}

.footer-logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-decoration: none;
    margin-bottom: var(--space-lg);
}

.footer-logo-mark {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-key {
    height: 28px;
    width: auto;
}

.footer-wordmark {
    font-family: var(--font-primary);
    font-weight: var(--weight-extrabold);
    font-size: 1.75rem;
    letter-spacing: 0.08em;
    color: var(--color-gold);
    line-height: 1;
    display: flex;
    align-items: center;
}

.footer-logo-text {
    font-family: var(--font-primary);
    font-weight: var(--weight-medium);
    font-size: 0.5rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-warm-gray);
    margin-top: 2px;
}

.footer-brand p {
    color: rgba(245, 239, 230, 0.8);
    font-size: 0.9375rem;
    margin-bottom: var(--space-sm);
}

.footer-tagline {
    color: var(--color-gold);
    font-family: var(--font-primary);
    font-weight: var(--weight-semibold);
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    line-height: 1.5;
    margin-bottom: var(--space-md);
    overflow-wrap: break-word;
}

.footer-location {
    color: var(--color-gold) !important;
    font-weight: var(--weight-medium);
}

.footer-links h4 {
    color: var(--color-champagne);
    font-size: 0.875rem;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-lg);
}

.footer-links a {
    display: block;
    color: rgba(245, 239, 230, 0.7);
    font-size: 0.9375rem;
    padding: var(--space-xs) 0;
    transition: color var(--transition-fast);
}

.footer-links a:hover {
    color: var(--color-gold);
}

.footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    padding-top: var(--space-xl);
    border-top: 1px solid rgba(245, 239, 230, 0.1);
}

.footer-social {
    display: flex;
    gap: var(--space-md);
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: rgba(245, 239, 230, 0.6);
    border: 1px solid rgba(245, 239, 230, 0.2);
    border-radius: 50%;
    transition: all var(--transition-fast);
}

.footer-social a:hover {
    color: var(--color-gold);
    border-color: var(--color-gold);
    transform: translateY(-2px);
}

.copyright {
    color: rgba(245, 239, 230, 0.5);
    font-size: 0.875rem;
    text-align: center;
    margin: 0;
    white-space: nowrap;
}

.footer-legal-links {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.footer-legal-links a {
    color: rgba(245, 239, 230, 0.6);
    font-size: 0.8125rem;
    transition: color var(--transition-fast);
}

.footer-legal-links a:hover {
    color: var(--color-gold);
}

.footer-legal-divider {
    color: rgba(245, 239, 230, 0.3);
    font-size: 0.8125rem;
}

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }

    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
    }

    .footer-social {
        flex: 1;
        justify-content: flex-start;
    }

    .copyright {
        flex: 1;
        text-align: center;
    }

    .footer-legal-links {
        flex: 1;
        justify-content: flex-end;
    }
}

/* ----------------------------------------
   Buttons
   ---------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    font-family: var(--font-primary);
    font-weight: var(--weight-semibold);
    font-size: 0.9375rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background-color: var(--color-gold);
    color: var(--color-white);
}

.btn-primary:hover {
    background-color: var(--color-gold-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(184, 149, 107, 0.3);
}

.btn-secondary {
    background-color: var(--color-slate);
    color: var(--color-white);
}

.btn-secondary:hover {
    background-color: var(--color-charcoal);
}

.btn-outline {
    background-color: transparent;
    border: 2px solid var(--color-champagne);
    color: var(--color-champagne);
}

.btn-outline:hover {
    background-color: var(--color-champagne);
    color: var(--color-slate);
    transform: translateY(-2px);
}

.btn-outline-gold {
    background-color: transparent;
    border: 2px solid var(--color-gold);
    color: var(--color-gold);
}

.btn-outline-gold:hover {
    background-color: var(--color-gold);
    color: var(--color-white);
    transform: translateY(-2px);
}

.btn-text {
    background: none;
    padding: 0.5rem 0.75rem;
    color: var(--text-secondary);
}

.btn-text:hover {
    color: var(--color-gold);
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1rem;
}

/* ----------------------------------------
   Hero Section
   ---------------------------------------- */
.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(var(--header-height) + var(--space-2xl)) var(--container-padding) var(--space-2xl);
    background-color: var(--color-slate);
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-bg img,
.hero-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(30, 41, 59, 0.85) 0%,
        rgba(30, 41, 59, 0.70) 35%,
        rgba(30, 41, 59, 0.50) 100%
    );
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
    max-width: 800px;
    text-align: center;
}

.hero h1 {
    color: var(--color-champagne);
    margin-bottom: var(--space-lg);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.hero h1 span {
    display: block;
    color: var(--color-gold);
}

.hero .lead {
    color: rgba(245, 239, 230, 0.95);
    margin-bottom: var(--space-xl);
    font-weight: var(--weight-medium);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: center;
}

.hero-animate {
    opacity: 0;
    transform: translateY(20px);
}

.hero.ready .hero-animate,
.page-hero.ready .hero-animate,
.about-hero.ready .hero-animate {
    animation: heroFadeIn 0.8s ease-out forwards;
}

@keyframes heroFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hero Search Box */
.hero-search {
    position: relative;
    z-index: 3;
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-top: var(--space-2xl);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 900px;
}

.hero-search-form {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: var(--space-md);
    align-items: end;
}

.hero-search .form-group {
    margin-bottom: 0;
}

.hero-search .form-label {
    font-size: 0.8125rem;
    margin-bottom: var(--space-xs);
    /* dev-0.59: var(--text-primary) light == --color-slate (byte-identical),
       flips to champagne in dark so the label stays readable on the flipped box. */
    color: var(--text-primary);
}

.hero-search .form-select {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.hero-search .btn {
    height: 100%;
    min-height: 48px;
}

@media (max-width: 900px) {
    .hero-search-form {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .hero-search {
        margin: var(--space-xl) 0 0;
        padding: var(--space-md);
    }
    
    .hero-search-form {
        grid-template-columns: 1fr;
    }
    
    .hero-search .btn {
        width: 100%;
    }
}

/* Page Hero (Inner Pages) */
.page-hero {
    position: relative;
    padding: calc(var(--header-height) + var(--space-4xl)) 0 var(--space-4xl);
    background: var(--color-slate);
    overflow: hidden;
}

.page-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.15;
}

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

.page-hero-content {
    max-width: 700px;
}

.page-hero h1 {
    color: var(--color-champagne);
    margin-bottom: var(--space-lg);
}

.page-hero h1 span {
    color: var(--color-gold);
}

.page-hero .lead {
    color: rgba(245, 239, 230, 0.85);
    margin-bottom: var(--space-xl);
}

/* Page Header (Simple) */
.page-header {
    padding: calc(var(--header-height) + var(--space-3xl)) 0 var(--space-2xl);
    background-color: var(--color-slate);
    text-align: center;
}

.page-header h1 {
    color: var(--color-champagne);
    margin-bottom: var(--space-sm);
}

.page-header p,
.page-header .lead {
    color: rgba(245, 239, 230, 0.85);
    max-width: 600px;
    margin: 0 auto;
}

/* ----------------------------------------
   Cards
   ---------------------------------------- */
.card {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-sm);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-6px);
}

.card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-gold-light);
    color: var(--color-gold);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
    transition: all var(--transition-base);
}

.card:hover .card-icon {
    background-color: var(--color-gold);
    color: var(--color-white);
    transform: scale(1.05);
}

.card h3 {
    margin-bottom: var(--space-md);
}

.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
}

@media (min-width: 768px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ----------------------------------------
   Listings Grid
   ---------------------------------------- */
.listings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
}

@media (min-width: 768px) {
    .listings-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .listings-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.listing-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.listing-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.listing-image {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.listing-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.listing-card:hover .listing-image img {
    transform: scale(1.05);
}

.listing-badge {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-gold);
    color: white;
    font-size: 0.75rem;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-sm);
}
/* dev-0.15: NAH-listed private inventory badge (gold, top-left). When a card is
   both private and featured, the featured chip drops below it. */
.listing-badge-private {
    background: linear-gradient(135deg, #B8956B, #a6845d);
    box-shadow: 0 2px 8px rgba(184, 149, 107, 0.4);
    z-index: 2;
}
.listing-badge-private ~ .listing-badge { top: calc(var(--space-md) + 28px); }

.listing-content {
    padding: var(--space-lg);
}

.listing-price {
    font-size: 1.5rem;
    font-weight: var(--weight-bold);
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.listing-address {
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.listing-city {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
}

.listing-features {
    display: flex;
    gap: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-color);
}

.listing-feature {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.9375rem;
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
}

.listing-feature svg {
    width: 16px;
    height: 16px;
    color: var(--color-gold);
}

/* ----------------------------------------
   Areas Grid
   ---------------------------------------- */
.areas-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

@media (min-width: 768px) {
    .areas-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

.area-card {
    display: block;
    text-align: center;
    padding: var(--space-lg);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.area-card:hover {
    border-color: var(--color-gold);
    background: var(--color-gold-light);
}

.area-card h4 {
    font-size: 0.9375rem;
    font-weight: var(--weight-semibold);
    margin: 0;
}

/* ----------------------------------------
   CTA Section
   ---------------------------------------- */
.cta-section {
    text-align: center;
    padding: var(--space-4xl) 0;
    background-color: var(--bg-dark);
}

.cta-section h2 {
    color: var(--color-champagne);
    margin-bottom: var(--space-md);
}

.cta-section p {
    color: rgba(245, 239, 230, 0.85);
    max-width: 600px;
    margin: 0 auto var(--space-xl);
}

.cta-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    justify-content: center;
    align-items: center;
}

@media (min-width: 768px) {
    .cta-actions {
        flex-direction: row;
    }
}

/* ----------------------------------------
   Forms
   ---------------------------------------- */
.form-group {
    margin-bottom: var(--space-lg);
}

.form-label {
    display: block;
    font-weight: var(--weight-medium);
    font-size: 0.875rem;
    margin-bottom: var(--space-sm);
    color: var(--text-primary);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    font-size: 1rem;
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px rgba(184, 149, 107, 0.15);
}

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

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

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

@media (min-width: 768px) {
    .form-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Form Checkbox */
.form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    cursor: pointer;
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

.form-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--color-gold);
    cursor: pointer;
    flex-shrink: 0;
}

.form-checkbox span {
    line-height: 1.4;
}

/* ----------------------------------------
   Scroll Animations
   ---------------------------------------- */
.animate-on-scroll,
.reveal-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.animated,
.reveal-section.animated {
    opacity: 1;
    transform: translateY(0);
}

/* ----------------------------------------
   Utilities
   ---------------------------------------- */
.text-center {
    text-align: center;
}

.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }

.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }

/* ----------------------------------------
   Responsive Adjustments
   ---------------------------------------- */
@media (max-width: 767px) {
    .section {
        padding: var(--space-2xl) 0;
    }

    .hero {
        min-height: auto;
        padding-bottom: var(--space-3xl);
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .hero-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .footer-bottom {
        text-align: center;
    }
    
    .page-hero {
        padding: calc(var(--header-height) + var(--space-2xl)) 0 var(--space-2xl);
    }
}

/* ----------------------------------------
   Listing detail mosaic + lightbox
   ---------------------------------------- */
.listing-mosaic {
    display: grid;
    grid-template-columns: 60% 40%;
    gap: var(--space-sm);
    height: 520px;
    margin-bottom: var(--space-2xl);
    position: relative;
}

.mosaic-hero {
    height: 100%;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-secondary);
}

.mosaic-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
}

.mosaic-hero:hover img {
    transform: scale(1.02);
}

.mosaic-thumbs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: var(--space-sm);
    height: 100%;
    position: relative;
}

.mosaic-thumb {
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-secondary);
}

.mosaic-thumb:nth-child(2) {
    border-radius: 0 var(--radius-lg) 0 0;
}

.mosaic-thumb:nth-child(4) {
    border-radius: 0 0 var(--radius-lg) 0;
}

.mosaic-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
}

.mosaic-thumb:hover img {
    transform: scale(1.05);
}

.mosaic-view-all {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background: rgba(30, 41, 59, 0.92);
    color: var(--color-champagne);
    border: 1px solid var(--color-gold);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: var(--weight-semibold);
    font-family: var(--font-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    z-index: 2;
    transition: background var(--transition-base), border-color var(--transition-base);
}

.mosaic-view-all:hover {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-white);
}

@media (max-width: 768px) {
    .listing-mosaic {
        grid-template-columns: 1fr;
        height: auto;
        gap: var(--space-xs);
    }
    .mosaic-hero {
        height: 280px;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
    .mosaic-thumbs {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr;
        height: 140px;
    }
    .mosaic-thumb:nth-child(3),
    .mosaic-thumb:nth-child(4) {
        display: none;
    }
    .mosaic-thumb:nth-child(2) {
        border-radius: 0 0 0 var(--radius-lg);
    }
    .mosaic-thumb:nth-child(2) ~ .mosaic-thumb {
        border-radius: 0 0 var(--radius-lg) 0;
    }
    .mosaic-view-all {
        bottom: 12px;
        right: 12px;
        font-size: 0.8125rem;
        padding: var(--space-xs) var(--space-sm);
    }
}

.listing-detail-header {
    padding: calc(var(--header-height) + var(--space-xl)) 0 var(--space-lg);
}

.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
}
.lightbox.open { display: flex; }
.lightbox-image {
    max-width: 92vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(184, 149, 107, 0.85);
    color: #fff;
    border: none;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-base);
    z-index: 2;
}
.lightbox-nav:hover { background: rgba(184, 149, 107, 1); }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
.lightbox-close {
    position: absolute;
    top: 20px;
    right: 24px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 2;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.3); }
.lightbox-counter {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
}

/* dev-0.13: hardened lightbox (js/lightbox.js). The image sits in its own
   flex-centered stage and renders as a single clean block image: transparent
   background, no border-radius (which can leave a hairline on downscaled wide
   aerials), object-fit:contain against an explicit box. This replaced the
   brittle inline styling that produced a faint vertical seam down wide photos. */
/* Lightbox: styled entirely inline by js/lightbox.js (rewritten dev-0.13.2,
   el.style.cssText) so no CSS rule can hide or mis-size the overlay. The old
   .nahr-lightbox / .nahr-lb-* rules were removed deliberately. */

/* Similar properties */
.similar-properties {
    padding: var(--space-3xl) 0;
    background: var(--bg-secondary);
}
.similar-properties h2 {
    margin-bottom: var(--space-xl);
    color: var(--text-primary);
}
.similar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-lg);
}

/* ----------------------------------------
   Intake forms (find-your-home, list-your-home)
   ---------------------------------------- */
.intake-section {
    padding: calc(var(--header-height) + var(--space-2xl)) 0 var(--space-3xl);
    background: var(--bg-primary);
}
.intake-hero {
    text-align: center;
    margin-bottom: var(--space-2xl);
}
.intake-hero h1 {
    /* dev-0.60: clamp so the unbreakable word "ConciergeMatch" stops clipping
       on ~360px phones; desktop unchanged (max = the former fixed 2.5rem). */
    font-size: clamp(1.75rem, 6vw, 2.5rem);
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}
.intake-hero p {
    color: var(--text-secondary);
    font-size: 1.125rem;
    max-width: 640px;
    margin: 0 auto;
}
.intake-form {
    max-width: 820px;
    margin: 0 auto;
    background: var(--bg-secondary);
    padding: var(--space-2xl);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}
.intake-form .form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}
@media (max-width: 640px) {
    .intake-form .form-row { grid-template-columns: 1fr; }
}
.intake-form .form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-md);
}
.intake-form label {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: var(--space-xs);
}
.intake-form input[type="text"],
.intake-form input[type="number"],
.intake-form input[type="email"],
.intake-form input[type="tel"],
.intake-form select,
.intake-form textarea {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 1rem;
}
.intake-form textarea { min-height: 100px; resize: vertical; }
.intake-form .checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-sm);
}
.intake-form .checkbox-grid label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: 400;
    color: var(--text-secondary);
    background: var(--bg-primary);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    cursor: pointer;
}
.intake-form .checkbox-grid label:hover { border-color: var(--color-gold); }
.intake-form fieldset {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
}
.intake-form fieldset legend {
    color: var(--color-gold);
    font-weight: 700;
    padding: 0 var(--space-sm);
}
.intake-submit-row {
    display: flex;
    justify-content: center;
    margin-top: var(--space-xl);
}
.intake-status {
    margin-top: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    text-align: center;
    display: none;
}
.intake-status.error {
    display: block;
    background: rgba(220, 38, 38, 0.1);
    color: #f87171;
    border: 1px solid #b91c1c;
}
.intake-status.success {
    display: block;
    background: rgba(34, 197, 94, 0.1);
    color: #4ade80;
    border: 1px solid #166534;
}
/* dev-0.59: phone input theming (js/phone-input.js builds the markup inline and
   sets only layout props inline, so these class rules take effect). Backgrounds
   ride --bg-primary/--bg-secondary, whose LIGHT values equal the former inline
   #F5EFE6 / white exactly (light byte-identical), and flip automatically in dark.
   The gold accent borders stay inline (brand chrome, legible on both modes); only
   the #eee search divider needs a dark override. */
.country-trigger { background: var(--bg-primary); }
.phone-digits { background: var(--bg-secondary); color: var(--text-primary); }
.country-dropdown { background: var(--bg-secondary); }
.country-search { background: transparent; color: var(--text-primary); border: none; border-bottom: 1px solid #eee; }
.country-list li { color: var(--text-primary); }
@media (prefers-color-scheme: dark) {
    .country-search { border-bottom-color: var(--border-color); }
}
.photo-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--space-sm);
    margin-top: var(--space-md);
}
.photo-preview-grid .preview-tile {
    position: relative;
    height: 100px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-color);
}
.photo-preview-grid .preview-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Results matches */
.matches-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}
.match-card {
    position: relative;
}
.score-chip {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--color-gold);
    color: #fff;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    font-weight: 700;
    z-index: 2;
}

/* CTA banners on buyers/sellers/home */
.cta-banner {
    background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-hover) 100%);
    color: #fff;
    padding: var(--space-2xl);
    border-radius: var(--radius-lg);
    text-align: center;
    margin: var(--space-2xl) 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.cta-banner h2 {
    color: #fff;
    margin-bottom: var(--space-md);
}
.cta-banner p {
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: var(--space-lg);
    font-size: 1.0625rem;
}
.cta-banner .btn {
    background: #fff;
    color: var(--color-gold);
    font-weight: 700;
}
.cta-banner .btn:hover {
    background: var(--bg-secondary);
    color: var(--color-gold-hover);
}

.cta-duo {
    padding: var(--space-3xl) 0;
    background: var(--bg-secondary);
}
.cta-duo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
}
@media (max-width: 768px) {
    .cta-duo-grid { grid-template-columns: 1fr; }
}
.cta-duo-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    padding: var(--space-2xl);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: transform var(--transition-base), border-color var(--transition-base);
}
.cta-duo-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-gold);
}
.cta-duo-card h3 {
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}
.cta-duo-card p {
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
}

/* ----------------------------------------
   ConciergeMatch quiz
   ---------------------------------------- */
.quiz-card {
    max-width: 760px;
    margin: 0 auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-md);
}
.quiz-progress-bar {
    width: 100%;
    height: 6px;
    background: var(--color-gold-light);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-xs);
}
.quiz-progress-fill {
    height: 100%;
    width: 12.5%;
    background: linear-gradient(90deg, var(--color-gold) 0%, var(--color-gold-hover) 100%);
    border-radius: var(--radius-full);
    transition: width var(--transition-slow);
}
.quiz-progress-label {
    text-align: right;
    font-size: 0.8125rem;
    color: var(--text-muted-readable);
    margin-bottom: var(--space-lg);
    font-weight: var(--weight-semibold);
}
.quiz-step { display: none; }
.quiz-step.active { display: block; }
.quiz-step h2 {
    font-size: 1.625rem;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}
.quiz-step-lead {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: var(--space-lg);
    line-height: 1.55;
}
.quiz-step-fineprint {
    color: var(--text-muted-readable);
    font-size: 0.8125rem;
}
.quiz-step .form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}
@media (max-width: 640px) {
    .quiz-step .form-row { grid-template-columns: 1fr; }
    .quiz-card { padding: var(--space-lg); }
}
.quiz-step .form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-md);
}
.quiz-step label {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: var(--space-xs);
}
.quiz-step input[type="number"],
.quiz-step input[type="text"],
.quiz-step select,
.quiz-step textarea {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 1rem;
}
.quiz-step textarea { min-height: 120px; resize: vertical; }
.quiz-char-count {
    font-size: 0.75rem;
    color: var(--text-muted-readable);
    text-align: right;
    margin-top: var(--space-xs);
}
.quiz-section-label {
    display: block;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.875rem;
    margin: var(--space-md) 0 var(--space-xs);
}
.quiz-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}
.quiz-musthave-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}
.quiz-chip {
    background: var(--bg-primary);
    color: var(--text-secondary);
    border: 1.5px solid var(--border-color);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-full);
    font-family: var(--font-primary);
    font-size: 0.9375rem;
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: border-color var(--transition-base), background var(--transition-base), color var(--transition-base);
}
.quiz-chip:hover {
    border-color: var(--color-gold);
    color: var(--text-primary);
}
.quiz-chip.selected {
    border-color: var(--color-gold);
    background: var(--color-gold-light);
    color: var(--color-gold);
    font-weight: var(--weight-bold);
}
.quiz-musthave-grid .quiz-chip {
    border-radius: var(--radius-md);
    text-align: center;
}
.quiz-nav-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-xl);
    gap: var(--space-md);
}
.quiz-nav-row .btn { min-width: 140px; }
.quiz-loading-indicator {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-xl) 0;
}
.quiz-loading-dot {
    width: 12px;
    height: 12px;
    background: var(--color-gold);
    border-radius: 50%;
    animation: quiz-loading-pulse 1.2s infinite ease-in-out;
}
.quiz-loading-dot:nth-child(2) { animation-delay: 0.15s; }
.quiz-loading-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes quiz-loading-pulse {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* ----------------------------------------
   ConciergeMatch results
   ---------------------------------------- */
.cm-results-wrap {
    max-width: var(--container-max);
    margin: 0 auto;
}
.cm-results-summary {
    text-align: center;
    margin-bottom: var(--space-2xl);
    color: var(--text-secondary);
}
.cm-results-summary strong { color: var(--text-primary); }
.cm-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}
.listing-card-blurred {
    position: relative;
}
.listing-card-blurred .listing-image img {
    filter: brightness(0.85) blur(2px);
    transform: scale(1.03);
}
.listing-card-blurred .listing-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.45) 0%, rgba(30, 41, 59, 0.65) 100%);
    pointer-events: none;
}
.blurred-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    color: #fff;
    text-align: center;
    z-index: 3;
    padding: var(--space-md);
}
.blurred-overlay svg {
    width: 32px;
    height: 32px;
    color: var(--color-gold);
}
.blurred-overlay span {
    font-weight: var(--weight-bold);
    font-size: 0.9375rem;
    letter-spacing: 0.02em;
}
.fit-bullets {
    list-style: none;
    padding: 0;
    margin: var(--space-md) 0 0;
}
.fit-bullets li {
    position: relative;
    padding-left: 1.5rem;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.5;
    margin-bottom: var(--space-xs);
}
.fit-bullets li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-gold);
    font-weight: var(--weight-bold);
}
.cm-tier1-unlock {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    box-shadow: var(--shadow-md);
}
.cm-tier1-unlock h2 {
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}
.cm-tier1-unlock p {
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
}
.cm-tier1-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    text-align: left;
}
.cm-tier1-form input[type="email"] {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 1rem;
}
.cm-tier1-form .cm-terms-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.4;
}
.cm-tier1-form .cm-terms-row input { margin-top: 4px; }
.cm-tier1-form .cm-terms-row a { color: var(--color-gold); }
.cm-status {
    margin-top: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    text-align: center;
    display: none;
}
.cm-status.error {
    display: block;
    background: rgba(220, 38, 38, 0.08);
    color: var(--status-error);
    border: 1px solid rgba(185, 28, 28, 0.4);
}
.cm-status.success {
    display: block;
    background: rgba(16, 122, 87, 0.08);
    color: var(--status-success);
    border: 1px solid rgba(21, 128, 61, 0.4);
}
.cm-tier1-cta-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    margin-top: var(--space-xl);
    text-align: center;
}

/* Tier 1 unlocked card extras */
.listing-card .listing-description {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.5;
    margin: var(--space-md) 0;
}
.listing-card .listing-content .btn {
    width: 100%;
    margin-top: var(--space-md);
}
.cm-mosaic-mini {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}
.cm-mosaic-mini .cm-mosaic-hero {
    grid-row: 1 / span 2;
    overflow: hidden;
}
.cm-mosaic-mini .cm-mosaic-thumb {
    overflow: hidden;
    background: var(--color-warm-gray);
}
.cm-mosaic-mini img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ----------------------------------------
   Platform Terms page
   ---------------------------------------- */
.platform-terms-section {
    padding: calc(var(--header-height) + var(--space-2xl)) 0 var(--space-3xl);
    background: var(--color-champagne);
}
.platform-terms-wrap {
    max-width: 720px;
    margin: 0 auto;
    background: var(--color-champagne);
    color: var(--color-charcoal);
    padding: var(--space-2xl);
}
.platform-terms-wrap h1 {
    color: var(--color-slate);
    margin-bottom: var(--space-sm);
}
.platform-terms-wrap .pt-meta {
    color: var(--text-muted-readable);
    font-size: 0.875rem;
    margin-bottom: var(--space-xl);
}
.platform-terms-wrap h2 {
    color: var(--color-slate);
    font-size: 1.25rem;
    margin-top: var(--space-xl);
    margin-bottom: var(--space-sm);
}
.platform-terms-wrap p,
.platform-terms-wrap li {
    color: var(--color-charcoal);
    line-height: 1.7;
    margin-bottom: var(--space-md);
}
.platform-terms-wrap a {
    color: var(--color-gold);
    text-decoration: underline;
}

/* ----------------------------------------
   Print Styles
   ---------------------------------------- */
@media print {
    .site-header,
    .site-footer,
    .mobile-menu,
    .btn {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }
}

@media (max-width: 480px) {
    .copyright { white-space: normal; font-size: 0.8125rem; }
}

/* ----------------------------------------
   Listing Detail Premium (dev-0.11)
   Destination-grade Tier 2 detail: 60/40 hero gallery, pinned sidebar,
   AI Match Narrative card, vision chips, proximity intelligence, similar.
   ---------------------------------------- */

/* Hero gallery */
.ld-gallery { max-width: 1280px; margin: var(--space-lg) auto 0; padding: 0 var(--space-lg); }
.ld-gallery-grid {
    display: grid;
    grid-template-columns: 6fr 4fr;
    gap: 4px;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.ld-g-hero, .ld-g-cell {
    padding: 0; border: none; margin: 0;
    background: #e9e4db;
    cursor: pointer;
    display: block;
    position: relative;
    overflow: hidden;
}
.ld-g-hero { aspect-ratio: 4 / 3; max-height: 560px; width: 100%; }
.ld-g-hero img, .ld-g-cell img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.ld-g-hero img.loaded, .ld-g-cell img.loaded { opacity: 1; }
.ld-g-hero:hover img, .ld-g-cell:hover img { transform: scale(1.02); }
.ld-g-mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; }
.ld-g-empty { background: #e9e4db; cursor: default; }
.ld-g-more {
    position: absolute; inset: 0;
    background: rgba(30, 41, 59, 0.78);
    color: var(--color-champagne);
    display: flex; align-items: center; justify-content: center;
    font: 600 0.9375rem/1.2 'Outfit', sans-serif;
    text-align: center; padding: var(--space-sm);
}
.ld-gallery-mobile-btn { display: none; }

/* Head: address + vision chips */
.ld-head { max-width: 1200px; margin: var(--space-xl) auto 0; padding: 0 var(--space-lg); }
.ld-head h1 { font-size: 1.75rem; color: var(--text-primary); margin: 0 0 var(--space-sm); }
.vision-chips { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: var(--space-md) 0 0; }
.vision-chip {
    display: inline-flex; align-items: center; gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    background: var(--color-gold-light);
    color: var(--color-gold);
    border: 1px solid rgba(184, 149, 107, 0.3);
    border-radius: var(--radius-full);
    font-size: 0.8125rem; font-weight: var(--weight-semibold);
}
.vision-chip svg { width: 14px; height: 14px; }

/* dev-0.17: "What Makes This Home Stand Out" standout-highlights section. */
.ld-highlights-wrap { margin: var(--space-lg) 0 0; }
.ld-highlights { margin: 0; }
.ldh-title {
    font-size: 1.15rem; font-weight: var(--weight-bold);
    color: var(--text-primary); margin: 0 0 var(--space-md);
}
.ldh-signature { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: 0 0 var(--space-md); }
.ldh-pill {
    display: inline-flex; align-items: center; gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    background: var(--color-gold); color: var(--color-white);
    border-radius: var(--radius-full);
    font-size: 0.8125rem; font-weight: var(--weight-semibold);
    box-shadow: 0 2px 8px rgba(184, 149, 107, 0.3);
}
.ldh-pill svg { width: 14px; height: 14px; }
.ldh-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-md); }
.ldh-group {
    background: var(--bg-secondary);
    border: 1px solid rgba(184, 149, 107, 0.18);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
}
.ldh-group h3 {
    font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--color-gold); font-weight: var(--weight-bold);
    margin: 0 0 var(--space-sm);
}
.ldh-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.ldh-chip {
    display: inline-flex; align-items: center;
    padding: 4px var(--space-sm);
    background: var(--color-gold-light); color: var(--text-secondary);
    border-radius: var(--radius-md);
    font-size: 0.8125rem; font-weight: var(--weight-medium);
}
.ldh-shimmer {
    display: flex; align-items: center; gap: var(--space-sm);
    padding: var(--space-md) 0;
}
.ldh-shimmer-bar {
    flex: 0 0 120px; height: 14px; border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--bg-secondary) 0%, var(--color-gold-light) 50%, var(--bg-secondary) 100%);
    background-size: 200% 100%; animation: ld-shimmer 1.5s infinite;
}
.ldh-shimmer-text { color: var(--text-muted-readable); font-size: 0.875rem; font-style: italic; }

/* Two-column layout: main + pinned sidebar */
.ld-layout {
    max-width: 1200px; margin: var(--space-xl) auto 0;
    padding: 0 var(--space-lg);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--space-2xl);
    align-items: start;
}
.ld-block {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    margin-bottom: var(--space-xl);
    backdrop-filter: blur(6px) saturate(1.1);
}
.ld-block h2 { font-size: 1.375rem; color: var(--text-primary); margin: 0 0 var(--space-md); }
.ld-desc p { color: var(--text-secondary); line-height: 1.8; font-size: 0.9375rem; margin: 0; }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-md); }
.feature-item { padding: var(--space-md); background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); }
.feature-item .fi-label { color: var(--text-muted-readable); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
.feature-item .fi-value { color: var(--text-primary); font-weight: var(--weight-semibold); font-size: 0.9375rem; margin-top: 4px; }

/* Pinned sidebar */
.listing-sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--space-md));
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
    align-self: flex-start;
    opacity: 0;
    transform: translateX(20px);
    animation: sidebarSlideIn 0.5s ease 0.2s forwards;
}
@keyframes sidebarSlideIn { to { opacity: 1; transform: translateX(0); } }
.sidebar-price { font-size: 2rem; font-weight: var(--weight-extrabold); color: var(--color-gold); line-height: 1.1; margin-bottom: var(--space-xs); }
.sidebar-meta { color: var(--text-secondary); font-size: 0.9375rem; margin-bottom: var(--space-lg); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--border-color); }
.sidebar-quick-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin-bottom: var(--space-xl); }
.sidebar-quick-stats > div { display: flex; flex-direction: column; gap: 2px; }
.sidebar-quick-stats span { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted-readable); }
.sidebar-quick-stats strong { font-size: 0.9375rem; color: var(--text-primary); font-weight: var(--weight-semibold); }
.sidebar-cta, .sidebar-save { width: 100%; margin-bottom: var(--space-sm); justify-content: center; }
/* dev-0.14: helper line under the "Request a Showing" CTA. */
.sidebar-cta-help { font-size: 0.75rem; color: var(--text-muted-readable); text-align: center; margin: -2px 0 var(--space-sm); }
/* dev-0.16: server-rendered "Showing Requested" state. A steady gold-outline
   pill with a check; no hover lift since the request is already in. */
.sidebar-cta-requested, .sidebar-cta-requested:hover {
    background-color: rgba(184, 149, 107, 0.08);
    color: var(--color-gold);
    border-color: var(--color-gold);
    cursor: default;
    transform: none;
    opacity: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.sidebar-cta-requested .btn-icon { width: 18px; height: 18px; flex-shrink: 0; }
.sidebar-save.saved { background: var(--color-gold); color: #fff; border-color: var(--color-gold); }
/* dev-0.13.1: single heart toggle (no trash icon). Unsaved = outline; saved =
   filled. The button fill is driven by the svg's own fill attr in JS. */
.sidebar-save svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Listing-card heart (browse view) */
.listing-card-fav { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 5px rgba(30, 41, 59, 0.25); z-index: 2; padding: 0; transition: transform var(--transition-fast), background var(--transition-fast); }
@supports (backdrop-filter: blur(4px)) { .listing-card-fav { backdrop-filter: blur(4px); } }
.listing-card-fav:hover { transform: scale(1.06); background: #fff; }
.listing-card-fav svg { width: 19px; height: 19px; color: var(--text-primary); fill: none; pointer-events: none; }
.listing-card-fav.saved svg { color: var(--color-gold); fill: var(--color-gold); }
.listing-card-fav-toast { position: absolute; top: 54px; right: 12px; background: var(--color-slate); color: #fff; font-size: 0.75rem; font-family: var(--font-secondary); padding: 6px 10px; border-radius: var(--radius-md); z-index: 3; box-shadow: 0 4px 14px rgba(30, 41, 59, 0.3); white-space: nowrap; }
.listing-card-fav-toast a { color: var(--color-gold); text-decoration: underline; }
.sidebar-fine-print { font-size: 0.75rem; color: var(--text-muted-readable); text-align: center; margin: var(--space-md) 0 0; }

/* AI Match Narrative card */
.match-narrative-card {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    border-left: 3px solid var(--color-gold);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    margin-bottom: var(--space-xl);
    box-shadow: var(--shadow-sm);
}
.narrative-eyebrow { display: inline-block; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-gold); font-weight: var(--weight-bold); margin-bottom: var(--space-sm); }
.narrative-heading { margin: 0 0 var(--space-xl); color: var(--text-primary); font-size: 1.375rem; }
.narrative-loading { color: var(--text-muted-readable); }
.narrative-highlights { display: flex; flex-direction: column; gap: var(--space-lg); }
.narrative-highlight { display: flex; gap: var(--space-md); align-items: flex-start; }
.narrative-icon { flex-shrink: 0; width: 44px; height: 44px; background: var(--color-gold-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-gold); }
.narrative-icon svg { width: 22px; height: 22px; }
.narrative-text h3 { margin: 0 0 var(--space-xs); font-size: 1.0625rem; color: var(--text-primary); }
.narrative-text p { margin: 0; color: var(--text-secondary); line-height: 1.6; }

/* Proximity intelligence */
.proximity-section { margin-bottom: var(--space-xl); }
.proximity-section > .ld-section-inner > h2 { font-size: 1.375rem; color: var(--text-primary); margin: 0 0 var(--space-lg); }
.proximity-category { margin-bottom: var(--space-xl); }
.proximity-category-header { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-gold); font-weight: var(--weight-bold); margin-bottom: var(--space-md); }
.proximity-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-md); align-items: stretch; }
/* dev-0.13.2: CSS GRID replaces flex (3rd attempt at long POI names). The icon
   and distance columns are fixed; the name column is minmax(0, 1fr) — plain 1fr
   is minmax(auto, 1fr) whose auto min-track equals max-content, which blocked
   shrinking and forced overflow / mid-word breaks on long names like
   "Orlando Regional Medical Center". minmax(0, 1fr) lets the cell shrink so the
   name wraps cleanly to 2 lines within its column. */
.proximity-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: var(--space-md); align-items: center; padding: var(--space-md); background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base); }
.proximity-icon { width: 34px; height: 34px; background: var(--color-gold-light); color: var(--color-gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.proximity-icon svg { width: 18px; height: 18px; }
.proximity-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.proximity-text strong { min-width: 0; max-width: 100%; font-size: 0.875rem; color: var(--text-primary); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: normal; overflow-wrap: break-word; }
.proximity-text span { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted-readable); }
.proximity-distance { font-size: 0.875rem; color: var(--color-gold); font-weight: var(--weight-bold); text-align: right; white-space: nowrap; }
.proximity-distance .pd-primary, .poi-distance .pd-primary { display: block; color: var(--color-gold); font-size: 1rem; font-weight: var(--weight-bold); }
.proximity-distance .pd-sub, .poi-distance .pd-sub { display: block; color: var(--text-muted-readable); font-size: 0.75rem; font-weight: var(--weight-medium); }
/* dev-0.12: cards with a map pin are clickable (highlight the pin) */
.personal-poi-card, .proximity-featured { transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base); }
[data-poi-index] { cursor: pointer; }
.proximity-item[data-poi-index]:hover, .personal-poi-card[data-poi-index]:hover, .proximity-featured[data-poi-index]:hover { transform: translateY(-2px); border-color: var(--color-gold); }
.proximity-item.poi-active, .personal-poi-card.poi-active, .proximity-featured.poi-active { border-color: var(--color-gold); box-shadow: 0 0 0 2px var(--color-gold-light); }
.proximity-featured { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-lg); margin-bottom: var(--space-xl); background: var(--color-gold-light); border-left: 3px solid var(--color-gold); border-radius: var(--radius-md); }
.proximity-featured > svg { width: 28px; height: 28px; color: var(--color-gold); flex-shrink: 0; }
.proximity-featured strong { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-gold); }
.proximity-featured span { color: var(--text-primary); font-weight: var(--weight-semibold); }
.proximity-featured .proximity-distance { margin-left: auto; }

/* Personal anchors (buyer-supplied secular places) */
.proximity-personal { background: linear-gradient(135deg, var(--color-gold-light) 0%, transparent 100%); padding: var(--space-xl); border-radius: var(--radius-lg); border-left: 3px solid var(--color-gold); margin-bottom: var(--space-2xl); }
.proximity-personal h3 { color: var(--color-gold); margin: 0 0 var(--space-md); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; }
.personal-pois-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-md); }
.personal-poi-card { background: var(--bg-secondary); padding: var(--space-md); border-radius: var(--radius-md); border: 1px solid var(--border-color); }
.poi-label { font-weight: var(--weight-bold); color: var(--text-primary); margin-bottom: 2px; }
.poi-address { font-size: 0.75rem; color: var(--text-muted-readable); margin-bottom: var(--space-sm); }
.poi-distance { font-size: 0.9375rem; color: var(--color-gold); font-weight: var(--weight-semibold); }

/* Similar properties (full-width band) */
.similar-properties { padding: var(--space-2xl) 0; background: var(--bg-secondary); margin-top: var(--space-2xl); border-top: 1px solid var(--border-color); }
.similar-properties .ld-section-inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-lg); }
.similar-properties h2 { margin: 0 0 var(--space-sm); }
.similar-properties > .ld-section-inner > p { color: var(--text-secondary); margin: 0 0 var(--space-xl); }
.similar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.similar-card-link { text-decoration: none; color: inherit; display: block; }

/* Attribution */
.ld-attr { max-width: 1200px; margin: var(--space-md) auto 0; padding: var(--space-md) var(--space-lg); color: var(--text-muted-readable); font-size: 0.75rem; line-height: 1.5; }

/* dev-0.12: AI Match Narrative elevated to a full-width band after the gallery,
   before the two-column body. Gets the first content moment (it is the #1
   differentiator). Highlights flow into up-to-3 columns on wide screens. */
.ld-narrative-band { max-width: 1200px; margin: var(--space-xl) auto 0; padding: 0 var(--space-lg); }
.ld-narrative-band .match-narrative-card { margin-bottom: 0; padding: var(--space-2xl); }
.ld-narrative-band .narrative-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-xl); }

/* dev-0.12: collapsible MLS public remarks ("About this home") */
.mls-description-text { position: relative; overflow: hidden; transition: max-height 0.45s ease; color: var(--text-secondary); line-height: 1.8; font-size: 0.9375rem; }
.mls-description-text.collapsed { max-height: 5.4em; }
.mls-description-text.collapsed::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2.4em; background: linear-gradient(transparent, var(--bg-secondary)); pointer-events: none; }
.mls-description-text.expanded { max-height: 2400px; }
.mls-toggle { background: none; border: none; color: var(--color-gold); font-weight: var(--weight-semibold); cursor: pointer; padding: var(--space-sm) 0 0; margin-top: var(--space-xs); font-size: 0.875rem; font-family: inherit; }
.mls-toggle:hover { text-decoration: underline; }

/* dev-0.12: Leaflet neighborhood map (free OSM tiles). z-index:0 + relative
   confines Leaflet's internal pane/control z-indices to this stacking context so
   they never bleed over the fixed header. */
.neighborhood-map { height: 420px; width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--border-color); margin-bottom: var(--space-xl); overflow: hidden; position: relative; z-index: 0; background: var(--bg-secondary); }
.map-skeleton { position: absolute; inset: 0; z-index: 500; background: linear-gradient(90deg, var(--bg-secondary) 0%, var(--color-gold-light) 50%, var(--bg-secondary) 100%); background-size: 200% 100%; animation: ld-shimmer 1.5s infinite; }
.map-skeleton.hide { opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }
@keyframes ld-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.map-prop-pin { color: var(--color-gold); filter: drop-shadow(0 2px 4px rgba(30, 41, 59, 0.45)); }
.map-prop-pin svg { display: block; width: 38px; height: 38px; }
.map-popup-title { font-weight: var(--weight-bold); color: var(--text-primary); font-size: 0.9375rem; }
.map-popup-sub { color: var(--text-muted-readable); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; }
.map-popup-dist { color: var(--color-gold); font-weight: var(--weight-semibold); font-size: 0.8125rem; margin-top: 2px; }
.leaflet-popup-content { font-family: 'Outfit', 'Montserrat', sans-serif; margin: 10px 14px; line-height: 1.4; }
/* dev-0.13: reset-view control, matches the Leaflet zoom button aesthetic. */
.map-reset-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--color-gold); border: 2px solid rgba(0, 0, 0, 0.2); border-radius: 6px; cursor: pointer; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); padding: 0; }
.map-reset-btn:hover { background: var(--color-gold-light); }
@media (max-width: 768px) {
    .neighborhood-map { height: 280px; }
}

/* Responsive: stack at <=1024px, sidebar static above content */
@media (max-width: 1024px) {
    .ld-gallery-grid { grid-template-columns: 1fr; }
    .ld-g-mosaic { display: none; }
    .ld-g-hero { aspect-ratio: 4 / 3; max-height: 380px; }
    .ld-gallery-mobile-btn { display: inline-flex; margin-top: var(--space-md); }
    .ld-layout { display: flex; flex-direction: column; }
    .listing-sidebar { position: static; order: -1; animation: none; opacity: 1; transform: none; }
    .similar-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .ld-head h1 { font-size: 1.375rem; }
    .similar-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--space-md); padding-bottom: var(--space-md); }
    .similar-grid > * { flex: 0 0 280px; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
    .listing-sidebar { animation: none; opacity: 1; transform: none; }
    .ld-g-hero img, .ld-g-cell img { transition: none; }
}

/* =========================================================================
   dev-0.13: progressive auth header, buyer dashboard, inline Save prompts.
   ========================================================================= */

/* Person-icon trigger + dropdown */
.auth-trigger { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--border-color); color: var(--text-primary); width: auto; min-width: 38px; height: 38px; padding: 0 10px; border-radius: 999px; cursor: pointer; transition: border-color var(--transition-fast), color var(--transition-fast); }
.auth-trigger:hover { border-color: var(--color-gold); color: var(--color-gold); }
.auth-trigger.is-auth { border-color: var(--color-gold); }
.auth-name { font-family: var(--font-secondary); font-size: 0.875rem; font-weight: var(--weight-semibold); max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* dev-0.13.1: the dropdown is gated by an explicit .open class, not the [hidden]
   attribute. Any author display rule overrides UA [hidden], so the attribute
   approach was fragile; the class is deterministic. */
/* dev-0.13.2: z-index lifted from 1200 to 10000 so the dropdown floats above the
   listing-detail sticky sidebar (right column, same screen region as the open
   dropdown) and every other stacking context on the page. position:fixed +
   body-appended (js/components.js) keeps it in the root stacking context. */
.auth-dropdown { position: fixed; top: calc(var(--header-height) + 8px); right: 16px; width: 300px; max-width: calc(100vw - 32px); background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: 0 20px 50px rgba(30, 41, 59, 0.18); padding: var(--space-lg); z-index: 10000; display: none; }
.auth-dropdown.open { display: block; z-index: 10000 !important; animation: authDropdownIn 0.16s ease; }
@keyframes authDropdownIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .auth-dropdown.open { animation: none; } }
.auth-panel h3 { margin: 0 0 var(--space-sm); font-size: 1.0625rem; color: var(--text-primary); }
.auth-panel form { display: flex; flex-direction: column; gap: 8px; }
.auth-panel input { width: 100%; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: var(--radius-md); font-family: var(--font-secondary); font-size: 0.9375rem; }
.auth-panel input:focus { outline: none; border-color: var(--color-gold); }
.auth-block-btn { width: 100%; justify-content: center; }
.auth-text-link { background: none; border: none; color: var(--color-gold); font-family: var(--font-secondary); font-size: 0.8125rem; cursor: pointer; padding: 8px 0 4px; text-align: left; }
.auth-text-link:hover { text-decoration: underline; }
.auth-msg { font-size: 0.8125rem; margin: 2px 0 0; min-height: 1em; }
.auth-msg.err { color: var(--status-error); }
.auth-msg.ok { color: var(--status-success); }
.auth-item { display: block; padding: 10px 8px; border-radius: var(--radius-md); color: var(--text-primary); font-family: var(--font-secondary); font-weight: var(--weight-medium); text-align: left; width: 100%; background: none; border: none; cursor: pointer; font-size: 0.9375rem; }
.auth-item:hover { background: var(--color-gold-light); color: var(--color-gold); }
.auth-signout { color: var(--text-secondary); border-top: 1px solid var(--border-color); margin-top: 4px; border-radius: 0; }
.mobile-auth { display: flex; flex-direction: column; gap: 8px; } /* dev-0.31: drop margin-top; parent gap spaces it, keeps it aligned with the CTA */

/* Inline Save / identify / password prompts on the listing detail sidebar */
.ld-inline-prompt { margin-top: var(--space-md); padding: var(--space-md); background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); position: relative; }
.ld-inline-prompt p { margin: 0 0 var(--space-sm); font-size: 0.875rem; color: var(--text-secondary); }
.ld-pw-prompt { border-color: var(--color-gold); background: var(--color-gold-light); }
.ld-pw-prompt input { width: 100%; padding: 9px 11px; margin-bottom: 8px; border: 1px solid var(--border-color); border-radius: var(--radius-md); font-family: var(--font-secondary); font-size: 0.9375rem; }
.ld-pw-x { position: absolute; top: 6px; right: 8px; background: none; border: none; font-size: 20px; line-height: 1; color: var(--text-muted-readable); cursor: pointer; }
.ld-pw-msg { font-size: 0.8125rem; margin: 6px 0 0; min-height: 1em; }
.ld-pw-msg.err { color: var(--status-error); }
.ld-pw-msg.ok { color: var(--status-success); }

/* Buyer dashboard */
.dash-wrap { max-width: 1120px; margin: 0 auto; padding: calc(var(--header-height) + var(--space-xl)) var(--space-lg) var(--space-3xl); }
.dash-hero { margin-bottom: var(--space-2xl); }
.dash-eyebrow { display: inline-block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-gold); font-weight: var(--weight-bold); margin-bottom: var(--space-xs); }
.dash-hero h1 { font-size: 2rem; color: var(--text-primary); margin: 0 0 var(--space-md); }
.dash-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dash-chip { background: var(--color-gold-light); color: var(--color-gold); border: 1px solid var(--color-gold); border-radius: 999px; padding: 5px 14px; font-size: 0.8125rem; font-weight: var(--weight-semibold); }
.dash-section { margin-bottom: var(--space-2xl); }
.dash-section > h2 { font-size: 1.375rem; color: var(--text-primary); margin: 0 0 var(--space-lg); }
.dash-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); flex-wrap: wrap; }
.dash-section-head h2 { font-size: 1.375rem; color: var(--text-primary); margin: 0; }
.dash-link { color: var(--color-gold); font-weight: var(--weight-semibold); font-size: 0.9375rem; }
.dash-link:hover { text-decoration: underline; }
.dash-subhead { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted-readable); margin: var(--space-md) 0 var(--space-sm); }
.dash-muted { color: var(--text-muted-readable); font-size: 0.9375rem; }
.dash-empty { color: var(--text-secondary); font-size: 0.9375rem; padding: var(--space-lg); background: var(--bg-secondary); border: 1px dashed var(--border-color); border-radius: var(--radius-md); }
.dash-badge { display: inline-block; font-size: 0.75rem; font-weight: var(--weight-bold); padding: 4px 10px; border-radius: 999px; margin-bottom: 6px; }
.dash-badge-good { background: rgba(46, 125, 50, 0.12); color: var(--status-success); }
.dash-badge-up { background: rgba(198, 40, 40, 0.10); color: var(--status-error); }
.dash-badge-muted { background: var(--bg-secondary); color: var(--text-muted-readable); border: 1px solid var(--border-color); }
/* dev-0.14: Verified Buyer badge + amber "in review / pending" badge. */
.dash-badge-verified { display: inline-flex; align-items: center; gap: 6px; background: rgba(46, 125, 50, 0.12); color: var(--status-success); }
.dash-badge-verified .dash-rep-icon { width: 15px; height: 15px; }
.dash-badge-amber { background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D; }
/* dev-0.13.3: relaxed-fallback banner + amber stretch badges (shown only when the
   strict pass returns zero matches). */
.dash-relax-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; background: #FEF3C7; border: 1px solid #FCD34D; border-radius: var(--radius-md); padding: var(--space-md) var(--space-lg); margin-bottom: var(--space-lg); color: #92400E; font-size: 0.9375rem; }
.dash-relax-banner .dash-link { color: #92400E; text-decoration: underline; white-space: nowrap; }
.dash-stretch-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.dash-stretch-badge { display: inline-block; background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D; border-radius: 999px; padding: 3px 10px; font-size: 0.6875rem; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.03em; }
.dash-card-delisted { opacity: 0.85; }
.dash-card-delisted .listing-content { padding: var(--space-lg); }
.dash-find-similar { margin-top: var(--space-md); }
/* dev-0.65: saved searches card (theme vars only, dark-safe by inheritance). */
.dash-search { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; padding: var(--space-md) 0; border-bottom: 1px solid var(--border-color); }
.dash-search:last-child { border-bottom: none; }
.dash-search-main { flex: 1; min-width: 220px; }
.dash-search-name { font-weight: var(--weight-semibold); color: var(--text-primary); }
.dash-search-summary { color: var(--text-secondary); font-size: 0.9375rem; margin-top: 2px; }
.dash-search-when { color: var(--text-muted-readable); font-size: 0.8125rem; margin-top: 2px; }
.dash-search-actions { display: flex; align-items: center; gap: var(--space-sm); }
/* dev-0.67: saved-search email alerts. Theme vars only; the off state dims the
   toggle without introducing any new color. */
.dash-search-alerts[data-on="0"] { opacity: 0.55; }
.dash-alerts-pause { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--border-color); }
.dash-alerts-pause p { margin-top: var(--space-sm); font-size: 0.8125rem; }
.dash-tour { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; padding: var(--space-md) 0; border-bottom: 1px solid var(--border-color); }
.dash-tour-when { font-weight: var(--weight-semibold); color: var(--text-primary); min-width: 180px; }
.dash-tour-where { flex: 1; color: var(--text-secondary); }
.dash-rep-active { display: flex; align-items: center; gap: 8px; color: var(--status-success); font-weight: var(--weight-semibold); }
.dash-rep-icon { width: 22px; height: 22px; }
/* dev-0.14: Verification section card + expiry reminder + showing-request note. */
.dash-verify-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: var(--space-lg); }
.dash-verify-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 var(--space-sm); }
.dash-verify-dates { display: flex; flex-direction: column; gap: 4px; margin: 0 0 var(--space-sm); }
.dash-verify-date { font-size: 0.9375rem; font-weight: 600; color: var(--color-gold, #B8956B); }
.dash-verify-reminder { background: #FEF3C7; border: 1px solid #FCD34D; border-radius: var(--radius-md); padding: var(--space-md); margin-top: var(--space-md); color: #92400E; font-size: 0.9375rem; }
.dash-verify-reminder .btn { margin-top: var(--space-sm); }
.dash-tour-note { flex-basis: 100%; color: var(--text-secondary); font-size: 0.875rem; font-style: italic; }
.dash-pw-form { display: flex; flex-direction: column; gap: 10px; max-width: 360px; }
.dash-pw-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8125rem; color: var(--text-secondary); }
.dash-pw-form input { padding: 10px 12px; border: 1px solid var(--border-color); border-radius: var(--radius-md); font-family: var(--font-secondary); font-size: 0.9375rem; }
.dash-pw-msg { font-size: 0.8125rem; min-height: 1em; margin: 0; }
.dash-pw-msg.err { color: var(--status-error); }
.dash-pw-msg.ok { color: var(--status-success); }
.dash-privacy { margin-top: var(--space-lg); font-size: 0.75rem; }
.dash-section .similar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-lg); }
@media (max-width: 640px) {
    .dash-hero h1 { font-size: 1.5rem; }
    .dash-section .similar-grid { grid-template-columns: 1fr; }
    .dash-tour-when { min-width: 0; }
}

/* =========================================================================
   dev-0.31: mobile optimization. Scope is header / nav / chat only; desktop
   layout and all copy are unchanged.
   ========================================================================= */

/* The mobile menu slides in from off-canvas (.mobile-menu transform:
   translateX(100%)). A transformed fixed element parked to the right of the
   viewport can add horizontal scroll on iOS Safari. overflow-x: clip stops it
   WITHOUT establishing a scroll container, so position: sticky (e.g. the
   listing-detail sidebar between 769-1023px) keeps working. */
@media (max-width: 1023px) {
    html { overflow-x: clip; }
}

/* Respect reduced motion on the menu slide. */
@media (prefers-reduced-motion: reduce) {
    .mobile-menu { transition: none; }
}

/* Touch tap targets: the header controls that only appear at >=1024px still
   need a 44px hit area on touch screens (e.g. a tablet). Gate on coarse
   pointers so mouse-desktop visuals are untouched (no desktop regression). */
@media (pointer: coarse) {
    .auth-trigger { min-height: 44px; }
    .header-actions .btn-sm { min-height: 44px; }
}

/* Nora (Retell) chat widget. retell-widget-v2.js injects
   <div id="retell-widget-root"> into <body> (inline position:fixed;
   bottom/right:24px; z-index:999999) and renders its FAB + panel inside (React,
   partly shadow DOM); this id is the only stable light-DOM hook. The widget's
   own CSS already fits the OPEN panel to the viewport with safe areas
   (max-height: calc(100dvh - 72px - env(safe-area-inset-*))) and uses
   overscroll-behavior: contain, so the panel is handled; here we fix the
   LAUNCHER. */
/* z-index 999999 sits above the header (1000) and the open mobile menu (999),
   so the FAB and its auto-popup overlap the open hamburger panel. Hide the
   widget whenever the mobile menu is open (body.no-scroll tracks the menu). */
body.no-scroll #retell-widget-root { display: none !important; }
/* Lift the launcher clear of the iOS home indicator / right safe-area inset. */
#retell-widget-root {
    bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    right: calc(16px + env(safe-area-inset-right, 0px)) !important;
}

/* =========================================================================
   dev-0.32: three mobile fixes (Retell container, Sign-in modal, CM nav).
   Header / nav / chat only; desktop layout and all copy unchanged.
   ========================================================================= */

/* (a) Retell/Nora: constrain the widget container to the mobile viewport so the
   open panel can never exceed the screen width or sit under a safe-area inset.
   The launcher itself is positioned above; this caps the container box. */
@media (max-width: 600px) {
    #retell-widget-root {
        max-width: 100vw !important;
        max-width: 100dvw !important;
        box-sizing: border-box !important;
        padding-left: env(safe-area-inset-left, 0px) !important;
        padding-right: env(safe-area-inset-right, 0px) !important;
    }
}

/* (b) Sign-in modal (the body-appended .auth-dropdown). On phones it spans the
   viewport width with safe margins, centers, scrolls if tall, and sits on the
   top layer above the nav (1000) and the ConciergeMatch card. */
@media (max-width: 600px) {
    .auth-dropdown {
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        max-height: calc(100dvh - var(--header-height) - 24px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 100000;
    }
    .auth-dropdown.open { z-index: 100000 !important; }
}

/* =========================================================================
   dev-0.59: consumer dark-mode audit (surfaces). These rules were hardcoded
   LIGHT (white/near-white boxes) with no dark handling, so in OS dark mode
   they stayed light while the shared theme flipped dark around them. Every
   declaration below lives inside this media query, so light mode is byte-for-
   byte unchanged; the surfaces flip to the deep-slate palette. Paired text on
   these surfaces already rides the theme vars (which flip), so no text rule is
   needed here.
   ========================================================================= */
@media (prefers-color-scheme: dark) {
    /* Listing-detail content card (styles.css .ld-block, light rgba(255,255,255,0.72)). */
    .ld-block { background: rgba(38, 50, 68, 0.72); border-color: #3D4A5C; }
    /* Homepage hero search box (light rgba(255,255,255,0.95)); flipping it keeps
       the theme-driven selects inside from looking mismatched on the light box. */
    .hero-search { background: rgba(38, 50, 68, 0.95); }
}