/* --- Brand Variables --- */
:root {
    --deep-blue: #0f2c59;
    --gold: #c5a059;
    --light-pink: #fff0f3;
    --charcoal: #333333;
    --white: #ffffff;
    --border-light: #f1f5f9;
}

*, *::before, *::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
    margin: 0;
    padding: 0;
}

/* --- Global Button & Link Reset --- */
a, 
button, 
.btn-hero, 
.btn-listings-main, 
.btn-neighborhoods-alt, 
.expertise-card-link {
    text-decoration: none !important; /* Removes underlines from all button-like links */
}

/* Specifically target icons inside buttons to ensure they don't inherit underlines */
a i, 
button i {
    text-decoration: none !important;
    display: inline-block;
}

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    font-family: 'Lato', sans-serif;
}

body {
    margin: 0;
    line-height: inherit;
}

img {
    max-width: 100%;
    display: block; /* Prevents strange gaps under images */
}

button, input, select {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
    padding: 0;
}

/* --- Navigation Bar --- */
.navbar-main {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid #f1f5f9;
}

.nav-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}

.logo-img {
    height: 40px;
    width: auto;
    transition: transform 0.2s ease;
}

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

/* --- Nav Links --- */
.nav-menu {
    display: none; /* Mobile first: hidden */
}

@media (min-width: 768px) {
    .nav-menu {
        display: flex;
        align-items: center;
        gap: 1.5rem;
    }
}

.nav-link {
    font-size: 0.9rem;
    color: #334155;
    text-decoration: none;
    padding: 4px 0;
    transition: color 0.2s ease;
}

.nav-link:hover {
    color: #0f2c59;
}

.nav-link.active {
    color: #0f2c59;
    font-weight: 700;
    border-bottom: 2px solid #c4a978;
}

/* --- Contact Button & Lang Toggle --- */
.btn-contact-nav {
    background-color: #0f2c59;
    color: #ffffff;
    padding: 8px 20px;
    border-radius: 2px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.btn-contact-nav:hover {
    background-color: rgba(15, 44, 89, 0.9);
}

.lang-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    border: 1px solid #e2e8f0;
    padding: 4px 8px;
    border-radius: 4px;
    text-decoration: none;
    color: #334155;
} 

/* --- Layout Utility Map --- */
.hidden { display: none; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.relative { position: relative; }
.absolute { position: absolute; }
.text-center { text-align: center; }

/* Grid System */
.grid { display: grid; }
.gap-4 { gap: 1rem; }
.gap-8 { gap: 2rem; }
.gap-12 { gap: 3rem; }

@media (min-width: 768px) {
    .md\:flex { display: flex; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Standard Spacing */
.py-14 { padding-top: 2rem; padding-bottom: 2rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.mb-10 { margin-bottom: 2.5rem; }

/* --- Global Title & Subtitle System (Expertise-Style) --- */
/* Standardized to match "Expertise You Can Trust" across all pages */
.section-title-global,
.expertise-title,
.buy-factors-title,
.concierge-title,
.reloc-header,
.buy-main-title,
.inv-main-title,
.selling-main-title,
.inv-nav-header,
.kb-title,
.mu-title,
.listings-title {
    font-family: 'Playfair Display', serif !important;
    font-size: 2.5rem !important; 
    color: var(--deep-blue) !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
    text-align: center;
}

.mu-title
 {
    font-family: 'Playfair Display', serif !important;
    font-size: 2.5rem !important; 
    color: var(--white) !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
    text-align: center;
}

.page-subtitle-global,
.expertise-description,
.buy-main-subtitle,
.concierge-subtitle,
.reloc-lead,
.inv-main-subtitle,
.selling-main-subtitle,
.mu-description,
.kb-description,
.listings-subtitle {
    font-family: 'Lato', sans-serif !important;
    font-size: 1.1rem !important;
    color: var(--charcoal) !important;
    opacity: 0.7 !important;
    line-height: 1.6 !important;
    max-width: 800px;
    margin: 0 auto 2.5rem auto;
    text-align: center;
}

.mu-description
{
    font-family: 'Lato', sans-serif !important;
    font-size: 1.1rem !important;
    color: var(--white) !important;
    opacity: 0.7 !important;
    line-height: 1.6 !important;
    max-width: 800px;
    margin: 0 auto 2.5rem auto;
    text-align: center;
}

.section-divider-gold {
    width: 60px;
    height: 3px;
    background-color: #c4a978;
    margin: 0 auto 2.5rem;
}

/* --- Hero Section Styling --- */
/* --- Hero Section Fix --- */
.hero-main {
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    /* Add the image path here */
    background-image: url('../img/houston_hero.webp'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Ensure the overlay is active to keep text readable */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 44, 89, 0.45); /* Brand deep blue at 45% opacity */
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 10;
    max-width: 900px;
    padding: 0 1.5rem;
    color: var(--white);
}

/* Button Refinements */
.btn-hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 2rem;
    border-radius: 9999px;
    font-weight: 700;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    text-decoration: none !important; /* Force no underline */
}

.btn-hero:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}

.btn-primary-blue {
    background-color: var(--deep-blue);
    color: var(--white);
    border-color: var(--deep-blue);
}

.btn-primary-blue:hover {
    background-color: var(--white);
    color: var(--deep-blue);
}

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

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

/* --- Section Styles --- */
.section-feminine-hero {
    background-color: var(--light-pink) !important;
    padding: 2rem 0;
    border-bottom: 1px solid #fce4ec;
}

/* --- Photo Sizing (Now forced to 200px for a "small" look) --- */
.profile-photo-small {
    width: 200px !important; 
    height: auto;
    object-fit: cover;
    border-radius: 2rem;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 10;
}

.photo-container-pink {
    position: relative;
    width: 200px;
    margin: 0 auto;
}

/* --- Market Tracker (Forced to 1 row on Desktop) --- */
.market-tracker-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2x2 on mobile */
    gap: 1.5rem;
    margin-top: 2rem;
}

/* Desktop: 4 columns in 1 row */
@media (min-width: 768px) {
    .market-tracker-grid {
        grid-template-columns: repeat(4, 1fr) !important; 
    }
    .photo-container-pink {
        margin: 0;
    }
}

/* --- Market Card Styling --- */
.market-card {
    background-color: var(--white);
    padding: 1.5rem;
    border-radius: 1rem;
    border: 1px solid var(--border-light);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: transform 0.3s ease;
}

.market-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--charcoal);
    opacity: 0.7;
    margin-bottom: 0.5rem;
}

.market-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--deep-blue);
    font-family: serif;
}

/* --- Market Data Footnote (Aligned Left & Small) --- */
/* Market Pulse Single-Row Optimization */
/* Individual Market Card Styling */
/* --- Branded Market Pulse Styling --- */

/* --- Market Pulse Layout Alignment --- */
.section-market-pulse {
    background-color: var(--white); /* Keeps the background white as requested */
    padding: 2rem 0; /* Matches the padding of section-feminine-hero */
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}

/* Constrain the grid width to match the hero content width */
.market-tracker-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
    max-width: 900px; /* Matches the hero-content max-width for consistency */
}

@media (min-width: 768px) {
    .market-tracker-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* Branded Card Enhancements */
/* --- Branded Market Pulse Typography --- */

.market-card-branded {
    background-color: var(--deep-blue);
    padding: 2.5rem 1.5rem; /* Increased padding for a more boutique feel */
    border-radius: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle white border */
}

/* Force all text elements to White */
.market-card-title {
    display: block;
    color: var(--white) !important; /* Forces the italic title to white */
    font-family: serif;
    font-style: italic;
    font-size: 1rem;
    margin-bottom: 0.25rem;
    opacity: 0.9;
}

.market-card-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--white) !important; /* Forces the uppercase label to white */
    opacity: 0.7;
    letter-spacing: 0.15em;
    margin-bottom: 1.25rem;
}

.market-card-value {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: var(--white) !important; /* Forces the dynamic value to white */
    font-family: serif;
}

/* Hover state remains consistent with site styling */
.market-card-branded:hover {
    transform: translateY(-5px);
    border-color: var(--gold);
}

/* --- Listings Section - Professional Theme --- */
.section-listings-refined {
    position: relative;
    width: 100%;
    padding: 2rem 0;
    /* Split-tone architectural background */
    background: linear-gradient(to bottom, #f1f5f9 0%, #ffffff 20%, #ffffff 80%, #f1f5f9 100%);
    border-top: 1px solid #cbd5e1;
    border-bottom: 1px solid #cbd5e1;
    overflow: hidden;
    box-sizing: border-box;
}

/* Architectural Grid Pattern Overlay */
.section-listings-refined::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: 
        linear-gradient(#cbd5e1 1px, transparent 1px),
        linear-gradient(90deg, #cbd5e1 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.4;
    mask-image: radial-gradient(circle at center, transparent 20%, black 100%);
    -webkit-mask-image: radial-gradient(circle at center, transparent 20%, black 100%);
    pointer-events: none;
}

.listings-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: 10;
    text-align: center;
}

/* Visibility Classes (JavaScript Toggles These) */
.hidden {
    display: none !important;
}

.animate-fade-in {
    display: block !important;
    animation: slideUpFade 0.6s ease-out forwards;
}

/* --- Main Button --- */
.btn-listings-main {
    text-decoration: none !important;
    background-color: var(--deep-blue);
    color: var(--white);
    padding: 1.5rem 4rem;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 1.1rem;
    border: 2px solid var(--deep-blue);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 20px 40px rgba(15, 44, 89, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
}

.btn-listings-main:hover {
    background-color: var(--white);
    color: var(--deep-blue);
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0 30px 50px rgba(15, 44, 89, 0.3);
}

.btn-listings-main i { color: var(--gold); font-size: 1.4rem; }

/* --- Iframe Relief & Shadow --- */
.listing-window-container {
    max-width: 1080px;
    margin: 3rem auto 0;
    border-radius: 2.5rem;
    overflow: hidden;
    box-shadow: 0 40px 100px -20px rgba(15, 44, 89, 0.3);
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

/* Maintain a generic hidden class for other legacy items IF needed, 
   but without !important so Tailwind can override it */
.hidden {
    display: none;
}

/* Change the generic .hidden to this specific one */
#listings-window.hidden {
    display: none !important;
}

/* Spinner Styles */
.iframe-loader {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: white;
    z-index: 10;
}

.spinner-gold {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(197, 160, 89, 0.1);
    border-top: 3px solid #c5a059; /* Brand Gold */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Restore Menu Visibility: Forces Tailwind's desktop flex to win */
@media (min-width: 768px) {
    nav .hidden.md\:flex {
        display: flex !important;
    }
}

/* Ensure the animation class is also specific */
#listings-window.animate-fade-in {
    display: block !important;
    animation: slideUpFade 0.6s ease-out forwards;
}

#harIframe {
    width: 100%;
    height: 600px;
    border: none;
    display: block;
}

/* --- Footer Button --- */
.btn-neighborhoods-alt {
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;    
    background-color: transparent;
    color: var(--gold);
    padding: 1.1rem 3rem;
    border-radius: 9999px;
    font-weight: 700;
    border: 2px solid var(--gold);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 3rem;
    cursor: pointer;
}

.btn-neighborhoods-alt:hover {
    background-color: var(--gold); color: var(--white);
}

@keyframes slideUpFade {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
/* --- End --- */

/* Force the 5000px height strictly via CSS */
#harIframe {
    width: 100%;

    border: none;
    display: block;
}

/* Ensure the toggle animation is smooth */
.animate-fade-in {
    animation: fadeInListing 0.8s ease-out forwards;
}

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

/* --- Typography --- */
.signature-row { margin-top: 1rem; padding-left: 1.25rem; display: block; }
.signature-label { font-size: 14px; font-weight: 700; color: var(--deep-blue); text-transform: uppercase; }
.quote-style { font-style: italic; font-family: serif; font-size: 1.25rem; color: var(--gold); border-left: 4px solid var(--gold); padding-left: 1rem; }

/* --- Expertise Section Layout --- */
.section-expertise {
    background-color: #f8fafc !important; /* Light grey background */
    padding: 2rem 0;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    width: 100%;
}

.expertise-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* --- Header Styling --- */
.expertise-header {
    text-align: center;
    margin-bottom: 4rem;
}

.expertise-subtitle {
    display: block;
    color: var(--deep-blue);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.75rem;
    margin-bottom: 0.75rem;
}

/* --- Fixed Expertise Section Alignment --- */

.expertise-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
    margin-bottom: 4rem;
    align-items: stretch; /* Ensures all cards in a row are same height */
}

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

.expertise-card {
    background-color: var(--white);
    border-radius: 1.5rem;
    border: 1px solid rgba(15, 44, 89, 0.08);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 10px 20px -5px rgba(15, 44, 89, 0.1);
    display: flex; /* Added to handle internal alignment */
}

.expertise-card-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Forces all children to align left */
    text-align: left; /* Aligns text specifically */
    padding: 2rem; /* Consistent internal spacing */
    width: 100%;
    height: 100%;
    text-decoration: none !important;
}

.expertise-icon-box {
    width: 3.5rem;
    height: 3.5rem;
    background-color: rgba(15, 44, 89, 0.05);
    color: var(--deep-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.5rem; /* Space between icon and title */
    transition: all 0.3s ease;
}

.expertise-card:hover .expertise-icon-box {
    background-color: var(--deep-blue);
    color: var(--white);
}

.expertise-card h3 {
    font-family: 'Lato', sans-serif; /* Consistency with the prompt's fonts */
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--charcoal);
    margin-bottom: 0.75rem;
    transition: color 0.3s ease;
}

.expertise-card p {
    font-size: 0.95rem;
    color: var(--charcoal);
    opacity: 0.7;
    line-height: 1.5;
    margin: 0;
}


/* --- Action Buttons Container --- */
.expertise-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
}

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

/* --- Market Updates Section (Navy Background) --- */
.section-market-updates {
    background-color: var(--deep-blue);
    padding: 2rem 0;
    text-align: center;
    color: var(--white);
}

/* --- Knowledge Base Section (White/Clean Relief) --- */
.section-knowledge-base {
    background-color: var(--white);
    padding: 2rem 0;
    text-align: center;
    border-top: 1px solid var(--border-light);
}

.kb-question {
    color: var(--gold);
    font-family: serif;
    font-style: italic;
    font-size: 1.5rem;
    margin-bottom: 2rem;
    font-weight: 400;
}

/* Shared Container for these sections */
.container-small {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* --- Tailwind Migration: Layout & Spacing --- */
.max-w-6xl { max-width: 72rem; margin-left: auto; margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-4 { gap: 1rem; }
.gap-12 { gap: 3rem; }
.flex-1 { flex: 1 1 0%; }

/* --- Tailwind Migration: Typography --- */
.text-5xl { font-size: 3rem; line-height: 1; }
.text-white { color: #ffffff; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-10 { margin-bottom: 2.5rem; }
.drop-shadow-xl { filter: drop-shadow(0 20px 13px rgba(0,0,0,0.03)) drop-shadow(0 8px 5px rgba(0,0,0,0.08)); }
.leading-tight { line-height: 1.25; }
.font-serif { font-family: 'Playfair Display', serif; }
.font-bold { font-weight: 700; }

/* --- Responsive Menu & Layout Fixes --- */
/* Scoped hide for listings only - Fixes the Top Menu visibility */
#listings-window.hidden {
    display: none !important;
}

/* Replicating 'hidden md:flex' for the Top Menu without Tailwind */
.nav-menu-desktop {
    display: none;
}

@media (min-width: 768px) {
    .md\:flex-row { flex-direction: row; }
    .md\:text-7xl { font-size: 4.5rem; }
    .md\:text-2xl { font-size: 1.5rem; }
    .nav-menu-desktop { display: flex !important; align-items: center; gap: 1.5rem; }
}

/* --- Spinner Styles --- */
.iframe-loader {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--white);
    z-index: 10;
}

.spinner-gold {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(197, 160, 89, 0.1);
    border-top: 3px solid var(--gold);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- Buying Page Styling --- */
.section-buying-header {
    padding: 6rem 0 2rem;
    text-align: center;
    background-color: var(--white);
}

.buy-factors-title {
    font-family: serif;
    font-size: 2.5rem;
    color: var(--deep-blue);
}

/* --- Buying Header Section --- */
.section-buying-header {
    /* Using a soft, premium grey to contrast with the pure white section below */
    background-color: #f8fafc; 
    padding: 80px 0 60px;
    text-align: center;
    border-bottom: 1px solid #e2e8f0; /* Optional: adds a crisp line between sections */
}

/* Factors Grid */
.section-factors-grid {
    padding: 2rem 0 6rem;
    background-color: var(--white);
}

.factors-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
}

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

.factor-card {
    background: white;
    padding: 2rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-bottom: 4px solid transparent;
    transition: transform 0.3s ease;
}

.factor-card:hover { transform: translateY(-5px); }

.factor-card h3 {
    font-weight: 700;
    font-size: 1.25rem;
    margin: 1.5rem 0 1rem;
    color: var(--charcoal);
}

.factor-card p {
    font-size: 0.95rem;
    color: var(--charcoal);
    opacity: 0.7;
    line-height: 1.5;
}

/* Factor Specific Colors */
.border-blue { border-bottom-color: #3b82f6; }
.text-blue { color: #3b82f6; }

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

.border-orange { border-bottom-color: #f97316; }
.text-orange { color: #f97316; }

.border-green { border-bottom-color: #22c55e; }
.text-green { color: #22c55e; }

.factor-icon { font-size: 2.5rem; }

.container-standard {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.calculator-card {
    background: white;
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    border-top: 4px solid;
    height: 100%;
}

.calc-title { font-family: serif; font-size: 1.5rem; font-bold: 700; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.calc-desc { font-size: 0.875rem; color: rgba(51,51,51,0.7); margin-bottom: 1.5rem; }
.calc-label { display: block; font-size: 0.75rem; font-weight: 700; color: rgba(51,51,51,0.5); text-transform: uppercase; margin-bottom: 0.5rem; }
.calc-input { width: 100%; padding: 0.75rem; border: 1px solid #cbd5e1; border-radius: 0.25rem; background: #f8fafc; outline: none; transition: border 0.3s; }
.calc-input:focus { border-color: var(--deep-blue); }

.input-suffix { position: absolute; right: 0.75rem; top: 0.5rem; font-size: 0.75rem; color: rgba(51,51,51,0.4); font-style: italic; }

.commute-table-container { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.5rem; overflow: hidden; }
.table-header { padding: 0.5rem 1rem; background: #f1f5f9; border-bottom: 1px solid #e2e8f0; font-size: 0.75rem; font-weight: 700; color: rgba(51,51,51,0.5); text-transform: uppercase; display: flex; justify-content: space-between; }
.table-body { max-height: 256px; overflow-y: auto; }

.results-box { background: #f8fafc; border-radius: 0.75rem; padding: 1.5rem; border: 1px solid #e2e8f0; }
.result-row { display: flex; justify-content: space-between; font-size: 0.875rem; color: rgba(51,51,51,0.7); margin-bottom: 0.75rem; }
.result-label { font-size: 0.75rem; font-weight: 700; color: rgba(51,51,51,0.5); text-transform: uppercase; letter-spacing: 0.1em; }
.result-total { font-family: serif; font-size: 2.5rem; font-weight: 700; color: var(--deep-blue); }

/* --- CALCULATOR REDESIGN (NO TAILWIND) --- */

.section-calculators-branded {
    padding: 80px 0;
    background-color: #f8fafc;
    border-top: 1px solid var(--border-light);
}

.calc-main-row {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

@media (min-width: 992px) {
    .calc-main-row { flex-direction: row; align-items: stretch; }
}

.calculator-card-mht {
    flex: 1;
    background: var(--white);
    padding: 40px;
    border-radius: 24px;
    border-top: 4px solid #ddd;
    box-shadow: 0 10px 30px rgba(15, 44, 89, 0.05);
}

.calculator-card-mht.border-blue { border-top-color: var(--deep-blue); }
.calculator-card-mht.border-gold { border-top-color: var(--gold); }

.calc-header-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    color: var(--deep-blue);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.calc-header-desc {
    font-size: 0.9rem;
    color: #64748b;
    margin-bottom: 30px;
}

/* Inputs & Fields */
.calc-field-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 8px;
    color: #94a3b8;
}

.mht-input-field {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
    color: var(--deep-blue);
    background: #fdfdfd;
}

.mht-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 15px;
}

/* Commute List Spacing & Colors */
.commute-data-box {
    margin-top: 20px;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    overflow: hidden;
}

.commute-data-header {
    background: #f8fafc;
    padding: 8px 15px;
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #94a3b8;
    border-bottom: 1px solid #f1f5f9;
}

.commute-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 15px;
    border-bottom: 1px solid #f8fafc;
    font-size: 0.9rem;
    line-height: 1.5;
}

.school-info-note {
    font-size: 0.75rem;
}

.time-green { color: #10b981 !important; font-weight: 700; }
.time-orange { color: #f59e0b !important; font-weight: 700; }
.time-red { color: #ef4444 !important; font-weight: 700; }

/* Cost Results Split */
@media (min-width: 768px) {
    .cost-calc-internal-split { display: flex; gap: 30px; }
    .cost-inputs-side { flex: 1.2; }
    .cost-results-side { flex: 1; }
}

.res-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px dotted #e2e8f0;
    font-size: 0.85rem;
}

.final-total-box {
    margin-top: 25px;
    background: var(--deep-blue);
    color: white;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
}

.final-price { font-size: 2rem; font-weight: 700; font-family: 'Playfair Display', serif; }

/* --- Tighter Inputs --- */
.calc-label {
    display: block;
    font-size: 0.65rem; /* Smaller, uppercase label */
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.35rem;
}

.calc-input-styled {
    width: 100%;
    padding: 0.6rem 0.8rem; /* Slimmer padding */
    border: 1px solid #cbd5e1;
    border-radius: 0.4rem;
    background-color: #f1f5f9;
    font-weight: 700;
    color: #0f2c59;
    font-size: 0.9rem; /* Smaller input text */
    outline: none;
    box-sizing: border-box;
}

.input-tag-inline {
    position: absolute;
    right: 0.8rem;
    top: 0.6rem;
    font-size: 0.65rem;
    color: #94a3b8;
}

/* --- Compact Results Pane --- */
.calc-results-pane {
    background-color: #f8fafc;
    border: 1px solid #a4a5a7;
    border-radius: 1.5rem; /* Slightly tighter radius */
    padding: 1.25rem 1rem; /* Reduced inner padding */
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

.res-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.6rem; /* Tighter spacing */
    font-size: 0.85rem; /* Reduced from 1.05rem */
}

.res-label {
    color: #64748b;
    font-weight: 400;
}

.res-value {
    color: #0f2c59;
    font-weight: 700;
}

.res-item.last {
    border-bottom: 1px solid #cbd5e1;
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
}

/* --- Compact Total Display --- */
.total-label {
    display: block;
    text-align: center; /* Added for alignment */
    text-transform: uppercase;
    font-size: 0.65rem; 
    letter-spacing: 0.15em;
    color: #94a3b8;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.total-amount {
    display: block; /* Ensures the text-align applies fully */
    text-align: center; /* Added for alignment */
    font-family: 'Playfair Display', serif;
    font-size: 1.75rem; 
    font-weight: 800;
    color: #0f2c59;
    line-height: 1;
}

.total-display {
    text-align: center;
    margin-top: .1rem; /* Adds a nice separation from the line items above */
}

/* --- Tighter Card Headers --- */
.calc-title {
    font-size: 1.25rem; /* Smaller header */
    margin-bottom: 0.5rem;
}

.calc-desc {
    font-size: 0.75rem; /* Smaller description */
    margin-bottom: 1.25rem;
    line-height: 1.4;
}

/* --- Rounded Brand CTA Button (Match index.php) --- */
.btn-pill-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    
    /* The Pill Shape */
    background-color: #0f2c59; /* Brand Deep Blue */
    color: #ffffff !important;
    border: 2px solid #0f2c59;
    border-radius: 9999px; /* Force perfect pill shape */
    
    /* Typography matches the compact boutique feel */
    padding: 0.75rem 2.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    cursor: pointer;
}

.btn-pill-brand:hover {
    background-color: transparent;
    color: #0f2c59 !important;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(15, 44, 89, 0.1);
}

.btn-pill-brand i {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.btn-pill-brand:hover i {
    transform: translateX(3px); /* Subtle arrow/icon nudge */
}

/* Modifier for the Pro Forma button specifically */
.btn-pill-gold {
    background-color: #f59e0b !important; /* Brand Yellow/Gold */
    border-color: #f59e0b !important;
    color: #ffffff !important;
}

.btn-pill-gold:hover {
    background-color: transparent !important;
    color: #f59e0b !important;
    border-color: #f59e0b !important;
}

/* Container for spacing at the bottom of buying.php */
.cta-footer-container {
    text-align: center;
    margin-top: 4rem;
    padding-bottom: 3rem;
}

/* --- Footer Brand Theme (No Tailwind) --- */
.footer-site-main {
    background-color: #333333 !important; /* Forces Charcoal */
    color: rgba(255, 255, 255, 0.6) !important;
    padding: 60px 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-row-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

@media (min-width: 768px) {
    .footer-row-grid {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
    }
    .footer-block { flex: 1; }
    .block-left { text-align: left; }
    .block-center { text-align: center; }
    .block-right { text-align: right; }
}

/* Typography & Links */
.footer-copy { font-size: 14px; line-height: 1.6; }
.footer-logo-realtor { height: 40px; margin-top: 15px; opacity: 0.6; }

.footer-legal-link {
    display: block;
    color: #ffffff;
    font-size: 12px;
    text-decoration: underline;
    margin-bottom: 8px;
}
.footer-legal-link:hover { color: var(--gold); }

.footer-heading-caps {
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 10px;
    margin-bottom: 15px;
}

.footer-link-item {
    display: block;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 5px;
}

.footer-bottom-legal {
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-micro-text {
    font-size: 10px;
    line-height: 1.4;
    text-align: center;
    opacity: 0.3;
    text-transform: uppercase;
}

/* Neighborhood Cards */
.neighborhood-card {
    background: white;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
    transition: transform 0.3s ease;
}

.neighborhood-card:hover { transform: translateY(-5px); }

.nb-image-wrap { position: relative; height: 200px; }
.nb-image-wrap img { width: 100%; height: 100%; object-fit: cover; }

.nb-tag {
    position: absolute; top: 1rem; right: 1rem;
    background: #0f2c59; color: white;
    padding: 0.25rem 0.75rem; border-radius: 0.25rem;
    font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
}

.nb-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.nb-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--deep-blue);
    margin-bottom: 0.5rem;
    text-align: center;
}

.nb-card-description {
    font-size: 0.875rem;
    color: var(--charcoal);
    opacity: 0.7;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    text-align: center;
    /* Maintain the 2-line limit */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nb-card-stats {
    border-top: 1px solid #f1f5f9;
    padding-top: 1rem;
    margin-bottom: 1.5rem;
    width: 100%;
}

.nb-stat-line {
    margin-bottom: 0.35rem;
}

.nb-stat-label {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #94a3b8;
}

.nb-stat-value-blue { color: var(--deep-blue); font-weight: 700; font-size: 10px; }
.nb-stat-value-green { color: #10b981; font-weight: 700; font-size: 10px; }

/* Centering the Button Container */
.nb-card-action {
    margin-top: auto;
    display: flex;
    justify-content: center;
    width: 100%;
}

.nb-card-action .btn-pill-brand {
    font-size: 11px;
    padding: 10px 30px;
}
.nb-content h3 { font-family: 'Playfair Display', serif; font-size: 1.25rem; color: #0f2c59; margin-bottom: 0.5rem; }
.nb-content p { font-size: 0.8rem; color: #64748b; margin-bottom: 1rem; line-height: 1.5; height: 3rem; overflow: hidden; }
.nb-stats { font-size: 0.75rem; color: #64748b; }

/* --- Responsive Modal Scaling --- */

/* --- Neighborhood Modal Overlay --- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 44, 89, 0.4); /* Brand Deep Blue with opacity */
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.3s ease;
}

/* --- Modal Content Container --- */
/* --- 1. Modal Overlay & Background --- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 44, 89, 0.4); /* Brand Deep Blue */
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.3s ease;
}

/* --- 2. Modal Container --- */
.modal-content {
    background: white;
    width: 90%;
    max-width: 720px; /* Tighter width for boutique feel */
    max-height: 85vh;
    border-radius: 2rem;
    overflow: hidden;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    
    /* Animation Trigger */
    animation: modalSlideUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(40px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.nb-modal-split {
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .nb-modal-split {
        flex-direction: row; /* Horizontal split on desktop */
        min-height: 450px;
    }
}

.nb-modal-image {
    flex: 1;
    min-height: 250px;
}

.nb-modal-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nb-modal-info {
    flex: 1;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
}

.nb-modal-title {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    color: var(--deep-blue);
    margin-bottom: 1rem;
}

.nb-modal-desc {
    font-size: 1rem;
    color: var(--charcoal);
    opacity: 0.8;
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* Neighborhood Modal Specifics */
.nb-modal-banner {
    height: 160px; /* Reduced for a tighter look */
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.nb-modal-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent, rgba(15, 44, 89, 0.8));
}

.nb-modal-tag {
    position: relative;
    background: var(--deep-blue);
    color: white;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    width: fit-content;
    margin-bottom: 10px;
}

.nb-modal-h2 {
    font-size: 1.8rem; /* Scaled down for tighter layout */
    color: white;
    font-family: 'Playfair Display', serif;
}

.btn-close-guide {
    width: 100%;
    margin-top: 25px;
    padding: 12px;
    border-radius: 50px;
    border: 1px solid #e2e8f0;
    background: #f8fafc; /* Neutral background to pop the text */
    color: #334155 !important; /* Forces dark charcoal visibility */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-close-guide:hover {
    background: #0f2c59; /* Brand Blue on hover */
    color: #ffffff !important;
    border-color: #0f2c59;
}

/* --- Center the Read Guide Button --- */
.neighborhood-card .btn-pill-brand {
    align-self: center; /* Centers the button within its flex container */
    margin-top: auto;   /* Keeps it at the bottom of the card */
    width: auto;        /* Ensures it stays a pill shape rather than stretching */
    min-width: 180px;   /* Optional: gives it a consistent boutique width */
}

/* Tighter Stats Grid */
.nb-stats-row {
    gap: 10px;
    margin-bottom: 20px;
}

.nb-stat-box {
    padding: 12px; /* Tighter padding */
}

/* 4-Column Stat Grid */
.nb-stats-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}

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

.nb-stat-box {
    background: #f8fafc;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
}

.nb-stat-label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    color: #94a3b8;
    font-weight: 700;
    margin-bottom: 8px;
}

.nb-stat-value {
    font-weight: 700;
    color: var(--deep-blue);
    font-size: 1rem;
}

/* Custom Scrollbar */
.modal-content::-webkit-scrollbar { width: 6px; }
.modal-content::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }

/* --- 3. Close Button --- */
.modal-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 100;
}
.modal-close:hover { transform: scale(1.1); }
.modal-close i { font-size: 1.25rem; color: #0f2c59; }

/* --- 4. Pros/Cons Column Shared Logic --- */
.nb-pros-cons-container {
    display: flex;
    flex-direction: row; /* Always horizontal */
    gap: 3rem;
}

.flex-row .flex-1 {
    flex: 1 1 50%;
    min-width: 0; /* Prevents overflow */
}

/* --- 5. Responsive Mobile Scaling (Verified) --- */
@media (max-width: 768px) {
    .modal-content {
        width: calc(100% - 32px) !important; /* 16px margins */
        margin: 16px;
        border-radius: 1.5rem;
    }

    /* Padding for mobile content */
    .modal-content .px-6 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* 4-column stats to 2x2 grid */
    .stats-row-mobile {
        display: grid !important;
        grid-template-cols: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    /* Header scaling */
    .modal-header-img { height: 180px !important; }
    .modal-header-img h2 { 
        font-size: 2rem !important; 
        left: 1.5rem !important;
        bottom: 1rem !important;
    }

    /* Force 2-column list font scaling */
    .nb-pros-cons-container {
        gap: 1rem !important;
    }

    .modal-content li {
        font-size: 11px !important; /* Smaller for 2-column mobile */
        line-height: 1.3;
    }

    .modal-content li span {
        word-break: break-word;
        hyphens: auto;
    }

    .modal-content i.ph { font-size: 0.85rem !important; }
}

/* Helper to hide modal */
.hidden { display: none !important; }

/* Visual feedback for clickable neighborhood images */
.nb-image-wrap {
    overflow: hidden;
}

.nb-image-wrap img {
    transition: transform 0.5s ease;
}

.nb-image-wrap:hover img {
    transform: scale(1.05); /* Gentle zoom on hover */
}

.cursor-pointer {
    cursor: pointer;
}

/* Contact Link Glow Effect */
.contact-glow {
    text-shadow: 0 0 0px rgba(196, 169, 120, 0);
    transition: all 0.3s ease-in-out;
}

.contact-glow:hover {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(196, 169, 120, 0.8), 0 0 20px rgba(196, 169, 120, 0.4);
    transform: translateY(-2px);
}

/* --- Brand Background Sections --- */
.section-dark-brand {
    background-color: #0f2c59; /* Centralized brand blue */
}

/* Ghost Button Style for the Section Divider */
.btn-ghost-white {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(4px);
    color: #ffffff;
    transition: all 0.3s ease;
    cursor: default;
}

.btn-ghost-white:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
}

/* --- Contact Glow Effect --- */
.contact-glow {
    text-shadow: 0 0 0px rgba(196, 169, 120, 0);
    transition: all 0.3s ease-in-out;
}

.contact-glow:hover {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(196, 169, 120, 0.8), 0 0 20px rgba(196, 169, 120, 0.4);
    transform: translateY(-2px);
}

/* Custom Button Override for Dark Backgrounds */
.btn-conv {
    background-color: #c4a978; /* Brand Gold */
    color: #0f2c59 !important; /* Brand Blue for contrast */
    border: 2px solid #c4a978;
    transition: all 0.3s ease-in-out;
}

.btn-conv:hover {
    background-color: transparent !important;
    color: #ffffff !important; /* Turns white on hover to stay visible */
    border-color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Ensure the dark section background is locked */
.section-dark-brand {
    background-color: #0f2c59 !important;
}

/* Section Base */
.section-dark-brand {
    background-color: #0f2c59 !important;
    padding: 80px 0;
    text-align: center;
    color: #ffffff;
}

/* Subtitle Spacing */
.conv-subtitle {
    font-size: 0.875rem;
    color: #cbd5e1;
    margin-bottom: 20px; /* Brings it closer to the button */
}

/* Button Styling */
.btn-conv {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: #c4a978;
    color: #0f2c59 !important;
    padding: 16px 32px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    border: 2px solid #c4a978;
    transition: all 0.3s ease;
}

.btn-conv:hover {
    background-color: transparent !important;
    color: #ffffff !important;
    border-color: #ffffff;
}

/* Contact Links Layout */
.contact-links-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

@media (min-width: 768px) {
    .contact-links-wrap {
        flex-direction: row;
        gap: 60px;
    }
}

.contact-glow {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #c4a978;
    text-decoration: none;
    font-size: 1.25rem;
    transition: all 0.3s ease;
}

.contact-glow:hover {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(196, 169, 120, 0.8);
}

/* --- Global Reset & Base (Crucial when removing Tailwind) --- */
* { box-sizing: border-box; margin: 0; padding: 0; }

.container-standard {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

/* --- Section Dark Brand --- */
.section-dark-brand {
    background-color: #0f2c59 !important; /* Forces the brand blue */
    padding: 80px 0;
    text-align: center;
    color: #ffffff;
    display: block; /* Ensures section occupies space */
    width: 100%;
}

.conv-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    margin-bottom: 2.5rem;
    color: #ffffff;
}

.conv-subtitle {
    font-size: 0.875rem;
    color: #cbd5e1;
    margin-bottom: 1rem; /* Distance to button */
    display: block;
}

/* --- Button Styling --- */
.btn-conv {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: #c4a978;
    color: #0f2c59 !important;
    padding: 18px 36px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    border: 2px solid #c4a978;
    transition: all 0.3s ease;
}

.btn-conv:hover {
    background-color: transparent !important;
    color: #ffffff !important;
    border-color: #ffffff;
}

/* --- Divider --- */
.conv-divider-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 50px auto;
    max-width: 600px;
}

.conv-line {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.15);
    flex: 1;
}

.conv-divider-text {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #94a3b8;
    font-weight: 700;
    white-space: nowrap;
}

/* --- Contact Links --- */
.contact-links-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

@media (min-width: 768px) {
    .contact-links-wrap {
        flex-direction: row;
        justify-content: center;
        gap: 60px;
    }
}

.contact-glow {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #c4a978;
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: 300;
    transition: all 0.3s ease;
}

.contact-glow:hover {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(196, 169, 120, 0.8);
}

.icon-lg { font-size: 24px; }

/* --- Selling Page Specific Styles --- */

.section-selling-intro {
    padding: 100px 0;
    background-color: #ffffff;
}

.selling-main-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: var(--charcoal);
    font-weight: 700;
    margin-bottom: 20px;
}

.selling-main-subtitle {
    font-size: 1,25rem;
    color: #64748b;
    max-width: 800px;
    margin: 0 auto 60px;
    line-height: 1.6;
}

/* Grid Layout */
.selling-process-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

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

/* Card Styling */
.process-card {
    background: #ffffff;
    padding: 40px;
    border-radius: 12px;
    text-align: left;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid #f1f5f9;
    transition: transform 0.3s ease;
}

.process-card:hover {
    transform: translateY(-5px);
}

/* Side Border Accents */
.border-blue-left { border-left: 5px solid var(--deep-blue); }
.border-gold-left { border-left: 5px solid var(--gold); }

/* Header Elements */
.card-header-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.step-number {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
}

.bg-blue { background-color: var(--deep-blue); }
.bg-gold { background-color: var(--gold); }

.card-title-blue { color: var(--deep-blue); font-weight: 700; font-size: 1rem; }
.card-title-gold { color: var(--gold); font-weight: 700; font-size: 1rem; }

.card-text {
    color: #475569;
    line-height: 1.2;
    font-size: 1rem;
}

/* --- Houston Risk Shield Styling --- */
.risk-shield-wrapper {
    margin-top: 60px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.risk-shield-card {
    background-color: #333333; /* Brand Charcoal */
    border-radius: 20px;
    padding: 40px;
    display: flex;
    align-items: center;
    gap: 30px;
    text-align: left;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.shield-icon-circle {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--gold); /* Brand Gold */
}

.shield-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.75rem;
    color: var(--white);
    margin-bottom: 12px;
}

.shield-text {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    font-size: 1.1rem;
    margin: 0;
}

@media (max-width: 768px) {
    .risk-shield-card {
        flex-direction: column;
        text-align: center;
        padding: 30px;
    }
    .shield-title { font-size: 1.5rem; }
}

/* --- Investment Intelligence Page --- */
.section-investment-header {
    padding: 10px 0;
    background-color: #ffffff;
}

.inv-main-title {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    color: var(--charcoal);
    font-weight: 700;
    margin-bottom: 20px;
}

.inv-main-subtitle {
    font-size: 1.25rem;
    color: #64748b;
    max-width: 850px;
    margin: 0 auto 60px;
    line-height: 1.6;
}

/* Centered Data Heading Divider */
.inv-section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 10px;
}

.divider-line {
    height: 1px;
    background-color: #e2e8f0;
    flex: 1;
    max-width: 200px;
}

.inv-data-heading {
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 700;
    color: var(--charcoal);
}

/* Card Enhancements */
.investment-card {
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 20px;
    text-align: left;
    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
    border: 1px solid #f1f5f9;
    border-top: 5px solid #ddd;
}

.border-green-top { border-top-color: #10b981; }
.border-blue-top { border-top-color: #3b82f6; }
.border-dark-blue-top { border-top-color: var(--deep-blue); }
.border-gold-top { border-top-color: var(--gold); }

.inv-icon-box {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 25px;
}

.bg-light-green { background-color: rgba(16, 185, 129, 0.1); }
.bg-light-blue { background-color: rgba(59, 130, 246, 0.1); }
.bg-light-purple { background-color: rgba(15, 44, 89, 0.1); }
.bg-light-gold { background-color: rgba(197, 160, 89, 0.1); }

.inv-list {
    list-style: none;
    margin-top: 20px;
}

.inv-list li {
    font-size: 0.75rem;
    color: #475569;
    margin-bottom: 12px;
    display: flex;
    gap: 10px;
    line-height: 1.4;
}

.inv-list i {
    font-size: 1.1rem;
    opacity: 0.6;
}

/* --- Pro Forma Analyzer CSS --- */
.proforma-grid-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

@media (min-width: 1024px) {
    .proforma-grid-layout { grid-template-columns: 2fr 1fr; }
}

.analyzer-main-card {
    background: var(--white);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
}

.card-branding-accent-emerald {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background-color: #059669; /* emerald-600 */
}

.analyzer-title {
    font-size: 1.5rem;
    font-family: 'Playfair Display', serif;
    color: var(--charcoal);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.analyzer-title i { color: #059669; }

.analyzer-desc {
    font-size: 0.85rem;
    color: rgba(51,51,51,0.7);
    margin-bottom: 30px;
}

.analyzer-results {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem; /* Reduced padding from 25px */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Space content vertically */
    height: 100%; /* Ensure it fills parent height */
    max-height: 250px; /* Limit maximum height */
}

.res-item-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline; /* Align text baselines */
    margin-bottom: 0.75rem; /* Space between items */
}

.res-tag {
    font-size: 0.9rem;
    color: #64748b;
}

.res-big-val {
    font-size: 1.25rem; /* Sized down from 1.5rem */
    font-weight: 800;
    color: #0f2c59; /* Standard Blue */
}

.res-total-display {
    text-align: center;
    margin-top: auto; /* Push to bottom of flex container */
}

.total-micro-header {
    display: block;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    color: #94a3b8;
    letter-spacing: 0.1em;
    margin-bottom: 3px;
}

.total-currency {
    font-family: 'Playfair Display', serif;
    font-size: 2rem; /* Sized down from 2.5rem */
    font-weight: 700;
}

/* Inputs & Results Layout */
@media (min-width: 768px) {
    .analyzer-split-body { display: flex; gap: 40px; }
    .analyzer-inputs { flex: 1.2; }
    .analyzer-results { flex: 1; }
}

.input-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; }
.input-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 15px;}
.input-row-4 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.micro-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(51,51,51,0.6);
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.pf-field {
    width: 100%;
    padding: 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #f8fafc;
    font-size: 1rem;
}

.font-bold-blue { color: var(--deep-blue); font-weight: 700; }
.font-bold-emerald { color: #059669; font-weight: 700; }

/* Sidebar Styles */
.sidebar-card-dark { background: #333333; color: white; padding: 24px; border-radius: 16px; margin-bottom: 24px; }
.sidebar-card-blue { background: var(--deep-blue); color: white; padding: 30px; border-radius: 16px; }

.live-pulse {
    font-size: 10px;
    font-weight: 800;
    color: #22c55e;
    animation: pulse 2s infinite;
}

@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }

.rate-row { display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid rgba(255,255,255,0.1); }

/* --- Investor Concierge Section --- */
.services-main-card {
    background: #ffffff;
    border-radius: 2rem;
    padding: 3.5rem;
    border: 1px solid #f1f5f9;
    box-shadow: 0 10px 30px rgba(15, 44, 89, 0.05);
}

.concierge-subtitle {
    color: #64748b;
    font-size: 1.1rem;
    margin-top: 0.5rem;
}

.services-grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

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

.service-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.service-icon-wrap {
    background-color: #f8fafc;
    color: var(--deep-blue);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 1.25rem;
}

.service-h4 {
    font-weight: 700;
    color: var(--charcoal);
    font-size: 1.15rem;
}

.service-list {
    list-style: none;
    padding: 0;
}

.service-list li {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 0.75rem;
    position: relative;
    padding-left: 1rem;
}

/* Bullet decoration */
.service-list li::before {
    content: "•";
    color: var(--gold);
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* --- 1031 Timeline Styles --- */
/* --- 1031 Timeline Section Relief --- */
.section-1031-timeline {
    position: relative;
    background: #ffffff;
    padding-bottom: 8rem; /* Extra breathing room before the footer */
    /* Signature boutique shadow */
    box-shadow: 0 20px 40px -20px rgba(15, 44, 89, 0.08); 
    border-bottom: 1px solid #f1f5f9;
}

/* Optional: Add a subtle architectural gradient like the Listings section */
.section-1031-timeline::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to bottom, transparent, #f8fafc);
    pointer-events: none;
}

.timeline-wrapper {
    background: #ffffff; /* Shifted to white to "pop" against the subtle shadow */
    border-radius: 1.5rem;
    padding: 3rem;
    border: 1px solid #f1f5f9;
    /* Card relief shadow */
    box-shadow: 0 10px 30px rgba(15, 44, 89, 0.05); 
}

.timeline-wrapper {
    background: #f8fafc;
    border-radius: 1.5rem;
    padding: 3rem;
    border: 1px solid #e2e8f0;
}

.timeline-main-subtitle {
    color: #64748b;
    font-size: 0.95rem;
}

.timeline-visual {
    display: flex;
    flex-direction: column;
    gap: 3rem; /* Increased gap for vertical mobile view */
    position: relative;
    padding-left: 3rem; /* Space for the dot and line on mobile */
}

@media (min-width: 768px) {
    .timeline-visual {
        flex-direction: row;
        padding-left: 0;
        gap: 2rem;
        padding-top: 3rem; /* Space for the labels to sit above the line */
    }
}

.timeline-axis {
    position: absolute;
    left: 7px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e2e8f0;
}

@media (min-width: 768px) {
    .timeline-axis {
        left: 0;
        right: 0;
        top: 7px;
        height: 2px;
        width: 100%;
    }
}

.milestone {
    position: relative;
    z-index: 5;
    flex: 1;
}

/* Positioning the dot exactly on the line */
.milestone-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    position: absolute;
    left: -32px; /* Centers dot on mobile line */
    top: 4px;
    border: 3px solid #fff;
}

@media (min-width: 768px) {
    .milestone-dot {
        left: 0;
        top: -31px; /* Positions dot exactly on the horizontal line */
    }
}

/* Ensuring text doesn't overlap the dot */
.milestone-content {
    padding-top: 0;
}

@media (min-width: 768px) {
    .milestone-content {
        padding-top: 1px; /* Space between the horizontal line and the labels */
    }
}

.m-day {
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px; /* Consistent gap between "Day X" and description */
}

.m-desc {
    font-size: 0.85rem;
    color: #475569;
    line-height: 1.4;
}

.bg-deep-blue { background-color: var(--deep-blue); }
.bg-gold { background-color: var(--gold); }
.bg-charcoal { background-color: var(--charcoal); }

/* Animation for the 45-day critical window */
.animate-pulse {
    animation: pulse-gold 2s infinite;
}

@keyframes pulse-gold {
    0% { box-shadow: 0 0 0 0 rgba(196, 169, 120, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(196, 169, 120, 0); }
    100% { box-shadow: 0 0 0 0 rgba(196, 169, 120, 0); }
}

/* Centering utilities for the roadmap */
/* --- Relocation Simplified Cards --- */
.reloc-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 40px 30px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
    border: 1px solid #f1f5f9;
    border-top: 5px solid #ddd; /* Placeholder */
    height: 100%;
    transition: transform 0.3s ease;
}

.reloc-card:hover {
    transform: translateY(-5px);
}

.border-top-blue { border-top-color: #0f2c59; }
.border-top-gold { border-top-color: #c5a059; }

.reloc-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
}

.reloc-icon-box {
    width: 50px;
    height: 50px;
    background-color: #f8fafc;
    color: #0f2c59;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.reloc-h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: #333;
}

.reloc-detail-list {
    list-style: none;
    padding: 0;
}

.reloc-detail-list li {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 25px;
}

.reloc-detail-list li strong {
    display: block;
    color: #0f2c59;
    font-size: 1.05rem;
    margin-bottom: 4px;
}

/* --- Investment Quick Navigation (Centered & Proportional) --- */
/* --- Investment Quick Nav Styling --- */
.inv-nav-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.btn-nav-bullet {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0.8rem 2.5rem !important;
    min-width: 240px; /* Slight increase for better visual balance */
    
    background-color: var(--deep-blue) !important;
    color: #ffffff !important;
    border: 2px solid var(--deep-blue) !important;
    border-radius: 9999px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(15, 44, 89, 0.15);
}

.btn-nav-bullet i {
    font-size: 1.2rem;
    color: var(--gold);
}

.btn-nav-bullet:hover {
    background-color: #ffffff !important;
    color: var(--deep-blue) !important;
    border-color: var(--deep-blue) !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(15, 44, 89, 0.1);
}

.btn-nav-bullet:hover i {
    color: var(--deep-blue);
}

/* --- Knowledge Base Filter UI --- */
.filter-btn {
    background: #f8fafc;
    border: 1px solid transparent;
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 0.85rem;
    color: #475569;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.filter-btn .count {
    background: #e2e8f0;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    color: #64748b;
}

.filter-btn.active {
    background: var(--deep-blue);
    color: #ffffff;
}

.filter-btn.active .count {
    background: rgba(255,255,255,0.2);
    color: #ffffff;
}

.filter-btn:hover:not(.active) {
    background: #f1f5f9;
}

/* Ensure cards maintain height in grid */
.blog-post-card {
    height: 100%;
}

.blog-post-card .expertise-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 2rem;
    text-align: left;
}

/* --- Force Blog Button Visibility --- */
.blog-post-card .nb-card-action {
    margin-top: 1.5rem;
    display: flex !important;
    justify-content: center !important;
    width: 100%;
}

.blog-post-card .blog-cta-btn {
    display: inline-block !important; /* Forces the button to respect padding */
    min-width: 180px !important;    /* Prevents the 'nub' shape */
    padding: 12px 24px !important;  /* Creates internal space for text */
    background-color: #0f2c59 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    text-align: center;
    line-height: 1;
    border-radius: 50px;
    visibility: visible !important;
}

.expertise-card .flex-col.md\:flex-row {
    display: flex;
    flex-direction: row !important; /* Force row layout on desktop */
    justify-content: space-between !important; /* Push items to opposite ends */
    align-items: center;
    width: 100%;
    gap: 2rem;
}

/* --- Corrected Search Bar Positioning --- */

.search-wrapper {
    position: relative;
    flex: 0 1 350px; /* Do not grow, but allow shrinking, with a base of 350px */
    margin-left: auto; /* Pushes the element to the far right of the flex container */
}

.search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 1.1rem;
    pointer-events: none;
    z-index: 10;
}

.search-input-boutique {
    width: 100%;
    padding: 12px 15px 12px 50px !important;
    border-radius: 50px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    outline: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

/* --- Category Filters Group --- */
#categoryFilters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex: 1; /* Allows the filters to take up the remaining space on the left */
}

/* --- Knowledge Base Category Color Coding --- */

/* Base tag style */
.category-tag-gold {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 8px;
    display: inline-block;
}

/* Category Specific Colors */
.tag-buyers { color: #0f2c59; }    /* Brand Deep Blue */
.tag-sellers { color: #c5a059; }   /* Brand Gold */
.tag-renters { color: #10b981; }   /* Emerald Green */
.tag-investors { color: #8b5cf6; } /* Royal Purple */

/* --- Category Specific Card Hover Accents (Optional) --- */
.blog-post-card[data-category="Buyers"]:hover { border-top: 3px solid #0f2c59; }
.blog-post-card[data-category="Sellers"]:hover { border-top: 3px solid #c5a059; }
.blog-post-card[data-category="Renters"]:hover { border-top: 3px solid #10b981; }
.blog-post-card[data-category="Investors"]:hover { border-top: 3px solid #8b5cf6; }

/* Matching count pills in the navigation bar */
/* --- Knowledge Base Filter Navigation --- */

/* Base Button Style: Set a default border and neutral look */
.filter-btn {
    background: #f8fafc;
    border: 2px solid #e2e8f0; /* Neutral default border */
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 0.85rem;
    color: #475569;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

/* Category-Specific Border Coding */
.filter-btn[data-category="Buyers"] { 
    border-color: #0f2c59; /* Brand Deep Blue */
}

.filter-btn[data-category="Sellers"] { 
    border-color: #c5a059; /* Brand Gold */
}

.filter-btn[data-category="Renters"] { 
    border-color: #10b981; /* Emerald Green */
}

.filter-btn[data-category="Investors"] { 
    border-color: #8b5cf6; /* Royal Purple */
}

/* Neutral Count Pill: Removed individual category coding */
.count-pill {
    background: #e2e8f0;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    color: #64748b;
    border: none; /* Keep it flat and neutral */
}

/* Active State: The entire button fills with brand color */
.filter-btn.active {
    color: #ffffff;
}

.filter-btn.active[data-category="Buyers"] { background: #0f2c59; border-color: #0f2c59; }
.filter-btn.active[data-category="Sellers"] { background: #c5a059; border-color: #c5a059; }
.filter-btn.active[data-category="Renters"] { background: #10b981; border-color: #10b981; }
.filter-btn.active[data-category="Investors"] { background: #8b5cf6; border-color: #8b5cf6; }

/* Active State Count Pill remains readable */
.filter-btn.active .count-pill {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 44, 89, 0.4); /* Brand Blue with transparency */
    backdrop-filter: blur(5px);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999; padding: 20px;
}

.modal-container {
    background: #ffffff;
    width: 100%; max-width: 700px;
    max-height: 90vh;
    border-radius: 20px;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    padding: 40px;
}

.modal-close-icon {
    position: absolute; top: 20px; right: 20px;
    background: #f1f5f9; border: none;
    width: 40px; height: 40px; border-radius: 50%;
    cursor: pointer; color: #64748b;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; transition: all 0.3s ease;
}

.modal-scroll-area {
    max-height: 50vh;
    overflow-y: auto;
    padding-right: 15px;
}

.blog-excerpt-p {
    color: rgba(51, 51, 51, 0.6); /* Brand charcoal at 60% opacity */
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 10px !important;
    
    /* Truncation Logic */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Change this number to show more/fewer lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Blog Grid Layout --- */
#blogGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
    align-items: stretch; /* Forces equal height cards in a row */
}

/* --- Blog Card Styling --- */
.blog-post-card {
    display: flex; /* Changed from none to allow JS to control visibility */
    flex-direction: column;
    height: 100%;
    background: #ffffff;
    border-radius: 1.5rem;
    border: 1px solid rgba(15, 44, 89, 0.08);
    transition: all 0.4s ease;
    overflow: hidden;
}

.blog-post-card:hover {
    transform: translateY(-5px);
    border-color: var(--gold);
    box-shadow: 0 20px 25px -5px rgba(15, 44, 89, 0.1);
}

.expertise-card-link {
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Ensures content area takes up available space */
}

/* --- Content Sizing --- */
.blog-h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    color: var(--deep-blue);
    margin-bottom: 1rem;
    line-height: 1.3;
    min-height: 3.4rem; /* Keeps titles aligned */
}

.blog-excerpt-p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #64748b;
    margin-bottom: 2rem;
    /* Force exactly 3 lines for visual consistency */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Button Visibility Fix --- */
.nb-card-action {
    margin-top: auto; /* Pushes button to bottom */
    padding-top: 1.5rem;
    display: flex;
    justify-content: center;
}

.blog-cta-btn {
    min-width: 170px;
    padding: 12px 24px;
    background-color: var(--deep-blue);
    color: white !important;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}
/* --- Refined Blog Modal System (Vanilla CSS) --- */

.modal-container-refined {
    background: #ffffff;
    width: 90%;
    max-width: 720px;
    max-height: 85vh; /* Prevents popup from going off-screen */
    border-radius: 2rem;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: modalSlideUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    
    /* Crucial for pinning the footer */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Container itself doesn't scroll */
}

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

/* 1. Scrolling Text Area */
.modal-scroll-area {
    padding: 40px 40px 20px; /* Reduced bottom padding */
    flex-grow: 1; /* Fills available space above footer */
    overflow-y: auto; /* Internal scrolling only */
}

.modal-scroll-area::-webkit-scrollbar { width: 6px; }
.modal-scroll-area::-webkit-scrollbar-track { background: #f1f5f9; }
.modal-scroll-area::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 10px; }

.blog-popup-p {
    font-size: 1.1rem;
    color: #475569;
    line-height: 1.7;
    margin-bottom: 20px;
}

/* 2. Pinned Footer for Button */
.modal-action-footer {
    padding: 20px 40px 40px; /* Added significant padding for boutique feel */
    background-color: white; /* Ensures text doesn't bleed behind button */
    border-top: 1px solid #f1f5f9; /* Subtle divider for elegance */
    width: 100%;
    display: flex;
    justify-content: center;
}

/* 3. Visible Button Styling (Fix for white-on-white) */
.btn-close-article {
    width: 100%; /* Keeps standard width from original screenshot */
    border: 1px solid #e2e8f0;
    background: #f8fafc; /* Neutral grey background makes text pop */
    color: #334155 !important; /* Force visibility of dark charcoal text */
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    padding: 15px;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.btn-close-article:hover {
    background: #0f2c59; /* Brand Blue on hover */
    color: white !important;
    border-color: #0f2c59;
}

/* Close Icon (X) at Top Right */
.modal-close-icon {
    position: absolute; top: 20px; right: 20px;
    background: #f8fafc; border: none;
    width: 40px; height: 40px; border-radius: 50%;
    cursor: pointer; color: #64748b;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; transition: all 0.3s ease;
    z-index: 101; /* Above scrolling content */
}

/* Custom Scrollbar for Boutique Feel */
.modal-scroll-area::-webkit-scrollbar { width: 6px; }
.modal-scroll-area::-webkit-scrollbar-track { background: #f1f5f9; }
.modal-scroll-area::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 10px; }

/* --- Market Updates Specialized Styling --- */
.mu-archives-wrapper { max-width: 900px; margin: 0 auto; position: relative; min-height: 200px; }

.mu-month-group {
    margin-bottom: 20px;
    border: 1px solid var(--border-light);
    border-radius: 1.5rem;
    overflow: hidden;
    background: white;
    box-shadow: 0 4px 15px rgba(15, 44, 89, 0.05);
}

.mu-month-trigger {
    width: 100%; padding: 25px 35px; display: flex; justify-content: space-between;
    align-items: center; background: white; font-family: 'Playfair Display', serif;
    font-size: 1.5rem; color: var(--deep-blue); font-weight: 700; transition: all 0.3s ease;
}

.mu-month-trigger.active { border-bottom: 1px solid var(--border-light); }

/* --- Enhanced Market Update Typography --- */

.mu-entry-card {
    display: flex;
    align-items: center;
    padding: 30px 40px; /* Increased padding for a more luxury feel */
    background: #fffcf8;
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.3s ease;
}

.mu-entry-meta {
    min-width: 200px; /* Wider meta area for the larger date */
}

.mu-date {
    font-size: 1rem; /* Larger date */
    color: #94a3b8;
    font-weight: 600;
}

.mu-entry-h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem; /* Significantly bigger title */
    color: var(--deep-blue);
    margin-bottom: 8px;
    line-height: 1.2;
}

.mu-entry-excerpt {
    font-size: 1.1rem; /* Bigger, more readable excerpt */
    color: #475569;
    line-height: 1.5;
}

.mu-arrow {
    font-size: 1.5rem; /* Larger icon to balance the text */
    color: var(--gold);
    opacity: 0.5;
    margin-left: 20px;
}

/* Response for Mobile scaling */
@media (max-width: 768px) {
    .mu-entry-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 25px;
    }
    .mu-entry-meta { margin-bottom: 10px; }
    .mu-entry-h3 { font-size: 1.4rem; }
    .mu-entry-excerpt { font-size: 1rem; }
    .mu-arrow { display: none; } /* Hide arrow on mobile to save space */
}

.mu-entry-card:hover { background: white; transform: translateX(5px); }
.mu-entry-meta { min-width: 180px; }
.mu-category-tag { display: block; font-size: 10px; font-weight: 800; color: var(--gold); text-transform: uppercase; margin-bottom: 4px; }
.mu-date { font-size: 0.8rem; color: #94a3b8; }
.mu-entry-h3 { font-family: 'Playfair Display', serif; font-size: 1.3rem; color: var(--deep-blue); margin-bottom: 5px; }
.mu-entry-excerpt { font-size: 0.95rem; color: #64748b; }
.mu-arrow { color: var(--gold); opacity: 0.6; transition: transform 0.3s; }
.mu-entry-card:hover .mu-arrow { transform: translateX(5px); opacity: 1; }