/* ============================================================
   Northwest Home Advisor — Main Stylesheet
   Fonts: Dosis (body), Playfair Display (headings), Plus Jakarta Sans (footer)
   Brand: #552448 (plum), #111 (black), #f7f7f7 (gray bg)
   ============================================================ */

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

html { font-size: 16px; -webkit-font-smoothing: antialiased; }

body {
    font-family: 'Dosis', sans-serif;
    color: #222;
    background: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main { flex: 1; }

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

a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.8; }

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
    line-height: 1.25;
}

ul { list-style: none; }

/* ---- Utilities ------------------------------------------- */
.container {
    max-width: 1310px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}

.text-center { text-align: center; }
.font-semibold { font-weight: 600; }
.bg-white { background-color: #fff; }
.bg-gray  { background-color: #f7f7f7; }

.section {
    padding-top: 80px;
    padding-bottom: 80px;
    padding-left: 16px;
    padding-right: 16px;
}

.prose p { color: #4b5563; line-height: 1.75; margin-bottom: 1.25rem; }
.prose h2 { color: #111; margin-bottom: 1.5rem; font-size: 1.875rem; }
.prose h3 { color: #111; margin-bottom: 1rem; font-size: 1.25rem; }

/* ---- Buttons --------------------------------------------- */
.btn-primary {
    display: inline-block;
    padding: 10px 28px;
    background-color: #552448;
    color: #fff !important;
    font-family: 'Dosis', sans-serif;
    font-weight: 700;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
    text-decoration: none;
}
.btn-primary:hover { opacity: 0.9; color: #fff !important; }

.btn-sm { padding: 8px 16px; font-size: 0.75rem; }

.btn-white {
    display: inline-block;
    padding: 14px 32px;
    background-color: #fff;
    color: #111 !important;
    font-family: 'Dosis', sans-serif;
    font-weight: 700;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 4px;
    transition: opacity 0.2s;
}
.btn-white:hover { opacity: 0.9; }

.btn-outline-white {
    display: inline-block;
    padding: 14px 32px;
    border: 2px solid #fff;
    color: #fff !important;
    font-family: 'Dosis', sans-serif;
    font-weight: 700;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
}
.btn-outline-white:hover { background-color: #fff; color: #111 !important; }

.btn-outline-dark {
    display: inline-block;
    padding: 12px 28px;
    border: 2px solid #111;
    color: #111 !important;
    font-family: 'Dosis', sans-serif;
    font-weight: 700;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}
.btn-outline-dark:hover { background-color: #111; color: #fff !important; }

.btn-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}

/* ---- Section Headers ------------------------------------- */
.section-label {
    font-family: 'Dosis', sans-serif;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: #552448;
    margin-bottom: 8px;
}

.section-title {
    font-size: 1.875rem;
    font-weight: 600;
    color: #111;
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .section-title { font-size: 2.25rem; }
}

.section-intro { margin-bottom: 48px; }
.section-intro .section-label { display: block; }

.section-header-row {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 48px;
}
@media (min-width: 640px) {
    .section-header-row {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
}

.view-all-link {
    font-family: 'Dosis', sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #552448;
    white-space: nowrap;
}

/* ---- Page Header ----------------------------------------- */
.page-header {
    position: relative;
    padding: 64px 16px;
    background-size: cover;
    background-position: center;
    color: #fff;
}

.page-header-short { padding: 48px 16px; }

.page-header-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
}

.page-header-content {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
}

.page-header-content h1 {
    font-size: 2.25rem;
    font-weight: 600;
    margin-top: 8px;
}

@media (min-width: 768px) {
    .page-header-content h1 { font-size: 3rem; }
}

.page-header-sub {
    margin-top: 12px;
    color: rgba(255,255,255,0.7);
    font-family: 'Dosis', sans-serif;
    font-size: 1rem;
}

/* ---- Site Header ----------------------------------------- */
.site-header {
    background-color: #fff;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 50;
}

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

.header-logos {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.logo-main { object-fit: contain; height: 50px; width: auto; }

.logo-divider {
    width: 1px;
    height: 32px;
    background: rgba(0,0,0,0.15);
    display: none;
}
@media (min-width: 640px) { .logo-divider { display: block; } }

.bhhs-portrait { display: block; object-fit: contain; }
.bhhs-landscape { display: none; object-fit: contain; }
@media (min-width: 640px) {
    .bhhs-portrait { display: none; }
    .bhhs-landscape { display: block; }
}

.desktop-nav {
    display: none;
    align-items: center;
    gap: 4px;
}
@media (min-width: 1024px) { .desktop-nav { display: flex; } }

.nav-link {
    padding: 8px 12px;
    font-family: 'Dosis', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(0,0,0,0.75);
    border-radius: 4px;
    transition: color 0.15s;
}
.nav-link:hover, .nav-link.active { color: #552448; opacity: 1; }

.header-cta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-phone {
    display: none;
    align-items: center;
    gap: 8px;
    font-family: 'Dosis', sans-serif;
    font-size: 0.875rem;
    color: rgba(0,0,0,0.6);
    transition: color 0.15s;
}
.header-phone:hover { color: #111; opacity: 1; }
@media (min-width: 768px) { .header-phone { display: flex; } }

.header-cta .btn-primary { display: none; }
@media (min-width: 768px) { .header-cta .btn-primary { display: inline-block; } }

.hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(0,0,0,0.7);
}
@media (min-width: 1024px) { .hamburger { display: none; } }

.mobile-nav {
    border-top: 1px solid rgba(0,0,0,0.1);
    padding-bottom: 16px;
    padding-top: 8px;
}

.mobile-nav-link {
    display: block;
    padding: 12px;
    font-family: 'Dosis', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(0,0,0,0.7);
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
.mobile-nav-link:hover { color: #111; opacity: 1; }

.mobile-phone-row { padding-top: 12px; padding-left: 4px; }

.mobile-phone-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Dosis', sans-serif;
    font-size: 0.875rem;
    color: rgba(0,0,0,0.6);
    padding: 4px 8px;
}

/* ---- Hero ------------------------------------------------ */
.hero {
    position: relative;
    min-height: 600px;
    overflow: hidden;
    color: #fff;
    display: flex;
    align-items: center;
}

.hero-slides {
    position: absolute;
    inset: 0;
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1500ms ease-in-out;
}
.hero-slide.active { opacity: 1; }

.hero-slide-kb {
    position: absolute;
    inset: 0;
}
.hero-slide-kb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@keyframes kenBurns {
    from { transform: scale(1); }
    to   { transform: scale(1.1); }
}
.hero-slide.active .hero-slide-kb {
    animation: kenBurns 6000ms ease-out forwards;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(5,5,5,0.60) 0%, rgba(10,10,10,0.52) 50%, rgba(0,0,0,0.65) 100%);
    z-index: 10;
}

.hero-dots-bg {
    position: absolute;
    inset: 0;
    z-index: 11;
    opacity: 0.06;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.hero-content {
    position: relative;
    z-index: 12;
    padding: 96px 16px;
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
    width: 100%;
}

.hero-eyebrow {
    font-family: 'Dosis', sans-serif;
    font-size: 1.125rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 16px;
    opacity: 1;
    animation: heroFadeDown 0.7s ease both 0.1s;
}

.hero-heading {
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 24px;
    animation: heroFadeUp 0.9s ease both 0.3s;
}
@media (min-width: 768px) { .hero-heading { font-size: 3rem; } }
@media (min-width: 1024px) { .hero-heading { font-size: 3.75rem; } }

.hero-sub {
    font-family: 'Dosis', sans-serif;
    font-size: 1.125rem;
    color: rgba(255,255,255,0.8);
    max-width: 640px;
    margin: 0 auto 40px;
    line-height: 1.7;
    animation: heroFadeUp 0.9s ease both 0.55s;
}
@media (min-width: 768px) { .hero-sub { font-size: 1.25rem; } }

.hero-cta-row {
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
    align-items: center;
    animation: heroFadeUp 0.9s ease both 0.75s;
}
@media (min-width: 640px) { .hero-cta-row { flex-direction: row; } }

.hero-dots {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 13;
}

.hero-dot {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    border: none;
    padding: 0;
    cursor: pointer;
    background: rgba(255,255,255,0.45);
    transition: width 0.3s ease, background-color 0.3s ease;
}
.hero-dot.active {
    width: 24px;
    background: #552448;
}

@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroFadeDown {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Stats Bar ------------------------------------------- */
.stats-bar {
    padding: 32px 16px;
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    text-align: center;
}
@media (min-width: 768px) {
    .stats-grid { grid-template-columns: repeat(4, 1fr); }
}

.stat-value {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 1.875rem;
    font-weight: 700;
    color: #552448;
}

.stat-label {
    display: block;
    font-family: 'Dosis', sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #111;
    margin-top: 4px;
}

/* ---- Services -------------------------------------------- */
.service-card-content .btn-primary { 
    align-self: flex-start !important; 
    width: fit-content !important;
    display: inline-block !important;
}


.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}
@media (min-width: 768px) {
    .services-grid { grid-template-columns: 1fr 1fr; }
}

.service-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    min-height: 420px;
    background-size: cover;
    background-position: center;
    box-shadow: 6px 6px 9px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
}

.service-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.75) 100%);
}

.service-card-content {
    position: relative;
    z-index: 1;
    padding: 32px;
    height: 100%;
    display: flex;
    flex-direction: column;
    color: #fff;
}

.service-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #552448;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.service-card-content h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.service-card-content p {
    font-family: 'Dosis', sans-serif;
    color: rgba(255,255,255,0.9);
    line-height: 1.7;
    margin-bottom: 20px;
}

.service-list {
    list-style: none;
    margin-bottom: 24px;
    flex-grow: 1;
}

.service-list li {
    font-family: 'Dosis', sans-serif;
    font-size: 0.875rem;
    color: rgba(255,255,255,0.8);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.service-list li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.7);
    flex-shrink: 0;
}

/* ---- Blog Preview Grid ----------------------------------- */
.blog-preview-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 768px)  { .blog-preview-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .blog-preview-grid { grid-template-columns: repeat(4, 1fr); } }

.blog-preview-card { }

.blog-card-thumb {
    position: relative;
    height: 176px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #111, #000);
}

.blog-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-card-thumb-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #111, #000);
}

.blog-card-cat {
    position: absolute;
    bottom: 16px;
    left: 16px;
    font-family: 'Dosis', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 100px;
    background: #552448;
    color: #fff;
}

.blog-card-date {
    font-family: 'Dosis', sans-serif;
    font-size: 0.75rem;
    color: #9ca3af;
    margin-bottom: 8px;
}

.blog-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: #111;
    line-height: 1.35;
    margin-bottom: 8px;
}

.blog-card-title a:hover { opacity: 0.75; }

.blog-card-excerpt {
    font-family: 'Dosis', sans-serif;
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.6;
}

/* ---- Blog Archive (index.php) ---------------------------- */
.blog-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}
@media (min-width: 1024px) {
    .blog-layout { grid-template-columns: 1fr 320px; }
}

.blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 640px) { .blog-grid { grid-template-columns: 1fr 1fr; } }

.blog-post-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 6px 6px 9px rgba(0,0,0,0.08);
}

.blog-post-card .blog-card-thumb { border-radius: 0; margin: 0; }

.blog-post-card-body { padding: 24px; }

.read-more-link {
    font-family: 'Dosis', sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    color: #552448;
}

/* ---- Single Post ----------------------------------------- */
.single-post-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}
@media (min-width: 1024px) {
    .single-post-layout { grid-template-columns: 1fr 320px; }
}

.single-post-thumb { border-radius: 12px; overflow: hidden; margin-bottom: 32px; }
.single-post-thumb img { width: 100%; height: auto; }

.post-body { font-family: 'Dosis', sans-serif; color: #374151; line-height: 1.8; }
.post-body p { margin-bottom: 1.25rem; }
.post-body h2, .post-body h3 { color: #111; margin: 2rem 0 1rem; }
.post-body ul, .post-body ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.post-body li { margin-bottom: 0.5rem; }
.post-body img { border-radius: 8px; margin: 1.5rem 0; }

.post-nav { margin-top: 48px; padding-top: 32px; border-top: 1px solid #e5e7eb; }
.post-nav .nav-links { display: flex; justify-content: space-between; gap: 16px; }
.post-nav .nav-previous a, .post-nav .nav-next a {
    font-family: 'Dosis', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: #552448;
}

/* ---- Sidebar --------------------------------------------- */
.blog-sidebar { display: flex; flex-direction: column; gap: 24px; }

.sidebar-widget {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 6px 6px 9px rgba(0,0,0,0.08);
}

.sidebar-widget h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #111;
    margin-bottom: 16px;
}

.sidebar-widget ul { list-style: none; }
.sidebar-widget ul li { margin-bottom: 8px; }
.sidebar-widget ul li a {
    font-family: 'Dosis', sans-serif;
    font-size: 0.875rem;
    color: #111;
}
.sidebar-widget ul li a:hover { color: #552448; opacity: 1; }

.sidebar-cta { background: #111; color: #fff; }
.sidebar-cta h3 { color: #fff; }
.sidebar-cta p { font-family: 'Dosis', sans-serif; font-size: 0.875rem; color: rgba(255,255,255,0.75); margin-bottom: 16px; }

.sidebar-recent-posts { list-style: none; }
.sidebar-recent-posts li { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #f3f4f6; }
.sidebar-recent-posts li:last-child { border-bottom: none; margin: 0; padding: 0; }
.sidebar-recent-posts li a { font-family: 'Dosis', sans-serif; font-size: 0.875rem; color: #111; display: block; line-height: 1.35; }
.sidebar-recent-posts li span { font-family: 'Dosis', sans-serif; font-size: 0.75rem; color: #9ca3af; display: block; margin-top: 2px; }

/* Pagination */
.pagination { margin-top: 48px; }
.pagination .nav-links { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.pagination .page-numbers {
    font-family: 'Dosis', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 8px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    color: #111;
}
.pagination .page-numbers.current { background: #552448; color: #fff; border-color: #552448; }
.pagination .page-numbers:hover { border-color: #552448; color: #552448; opacity: 1; }

/* ---- Testimonials ---------------------------------------- */
.testimonials-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 768px) {
    .testimonials-grid { grid-template-columns: repeat(3, 1fr); }
}

.testimonial-card {
    background: #fff;
    padding: 28px;
    border-radius: 12px;
    box-shadow: 6px 6px 9px rgba(0,0,0,0.08);
}

.stars { display: flex; gap: 4px; margin-bottom: 16px; }

.testimonial-text {
    font-family: 'Dosis', sans-serif;
    font-size: 0.875rem;
    color: #4b5563;
    line-height: 1.75;
    margin-bottom: 20px;
}

.testimonial-author { display: flex; align-items: center; gap: 12px; }

.testimonial-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #111;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Dosis', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    flex-shrink: 0;
}

.testimonial-name {
    font-family: 'Dosis', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: #111;
}

.testimonial-location {
    font-family: 'Dosis', sans-serif;
    font-size: 0.75rem;
    color: #9ca3af;
}

/* ---- About Section --------------------------------------- */
.about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}
@media (min-width: 1024px) {
    .about-grid { grid-template-columns: 1fr 1fr; }
}

.about-text p {
    font-family: 'Dosis', sans-serif;
    color: #4b5563;
    line-height: 1.75;
    margin-bottom: 20px;
}

.about-image-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
@media (min-width: 1024px) { .about-image-col { align-items: flex-end; } }

.about-photo-wrap {
    width: 100%;
    max-width: 340px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 12px 12px 50px rgba(0,0,0,0.15);
}
.about-photo-wrap img { width: 100%; height: auto; object-fit: cover; }

.about-badges {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
}
.about-badges img { height: 56px; width: auto; object-fit: contain; }
.about-badges img:last-child { height: 40px; }

/* About Page bio layout */
.about-bio-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: start;
}
@media (min-width: 1024px) {
    .about-bio-grid { grid-template-columns: 2fr 3fr; }
}

.about-bio-photo-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.about-contact-info {
    font-family: 'Dosis', sans-serif;
    font-size: 0.875rem;
}
.about-contact-info p { margin-bottom: 4px; }
.about-contact-info a { color: #6b7280; }
.about-contact-info a:hover { color: #111; opacity: 1; }

.about-badges-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.about-badges-col img:first-child { max-width: 180px; }
.about-badges-col img:last-child  { max-width: 200px; }

.about-bio-text h2 {
    font-size: 1.875rem;
    font-weight: 600;
    color: #111;
    margin-bottom: 24px;
}

/* ---- Features Grid (About page) -------------------------- */
.features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 768px)  { .features-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .features-grid { grid-template-columns: repeat(3, 1fr); } }

.feature-card {
    background: #fff;
    padding: 28px;
    border-radius: 12px;
    box-shadow: 6px 6px 9px rgba(0,0,0,0.08);
}

.feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #552448;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: #fff;
}

.feature-card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #111;
    margin-bottom: 8px;
}

.feature-card p {
    font-family: 'Dosis', sans-serif;
    font-size: 0.875rem;
    color: #4b5563;
    line-height: 1.6;
}

/* ---- Tag Cloud ------------------------------------------- */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }

.tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 100px;
    background: #111;
    color: #fff;
    font-family: 'Dosis', sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
}

/* ---- Contact Page ---------------------------------------- */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
}
@media (min-width: 1024px) {
    .contact-grid { grid-template-columns: 2fr 3fr; }
}

.contact-info h2, .contact-form-col h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #111;
    margin-bottom: 24px;
}

.contact-details { display: flex; flex-direction: column; gap: 24px; margin-bottom: 32px; }

.contact-detail-row { display: flex; gap: 16px; align-items: flex-start; }

.contact-detail-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #552448;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

.contact-detail-label {
    font-family: 'Dosis', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: #111;
    margin-bottom: 4px;
}

.contact-detail-value {
    font-family: 'Dosis', sans-serif;
    font-size: 0.875rem;
    color: #111;
    display: block;
}

.contact-image { border-radius: 12px; overflow: hidden; box-shadow: 6px 6px 9px rgba(0,0,0,0.08); }
.contact-image img { width: 100%; height: auto; }

.contact-form-placeholder {
    padding: 24px;
    background: #f7f7f7;
    border-radius: 8px;
    font-family: 'Dosis', sans-serif;
    font-size: 0.9rem;
    color: #555;
    border: 1px solid #e5e7eb;
}

/* Contact Form 7 overrides */
.wpcf7-form { font-family: 'Dosis', sans-serif; }
.wpcf7-form label { font-size: 0.875rem; font-weight: 600; color: #374151; display: block; margin-bottom: 6px; }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    font-family: 'Dosis', sans-serif;
    font-size: 0.875rem;
    color: #111;
    outline: none;
    transition: border-color 0.2s;
}
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus { border-color: #552448; }
.wpcf7-form .wpcf7-submit {
    background: #552448;
    color: #fff;
    border: none;
    padding: 14px 32px;
    border-radius: 4px;
    font-family: 'Dosis', sans-serif;
    font-weight: 700;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    width: 100%;
    transition: opacity 0.2s;
}
.wpcf7-form .wpcf7-submit:hover { opacity: 0.9; }

/* ---- Embed Pages (MLS / Home Value) ---------------------- */
.embed-page-wrap {
    position: relative;
    background-size: cover;
    background-position: center;
    min-height: 400px;
}

.embed-page-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
}

.embed-page-title {
    position: relative;
    z-index: 1;
    padding: 64px 16px 32px;
    color: #fff;
}
.embed-page-title h1 {
    font-size: 2.25rem;
    font-weight: 600;
}
@media (min-width: 768px) { .embed-page-title h1 { font-size: 3rem; } }

.embed-page-content {
    position: relative;
    z-index: 1;
    padding-bottom: 80px;
    padding-left: 16px;
    padding-right: 16px;
}

.mls-widget-wrap {
    margin-bottom: 48px;
    overflow-x: auto;
    display: flex;
    justify-content: center;
}

.valuation-widget-wrap { max-width: 860px; margin: 0 auto; }

.service-areas-card {
    background: #fff;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 6px 6px 9px rgba(0,0,0,0.08);
    margin-top: 48px;
}
.service-areas-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #111;
    margin-bottom: 20px;
}

.service-areas-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (min-width: 768px) {
    .service-areas-grid { grid-template-columns: repeat(4, 1fr); }
}

.area-county {
    font-family: 'Dosis', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: #111;
    margin-bottom: 8px;
}

.service-areas-grid ul { list-style: none; }
.service-areas-grid li { margin-bottom: 4px; }
.service-areas-grid li a {
    font-family: 'Dosis', sans-serif;
    font-size: 0.875rem;
    color: #6b7280;
}
.service-areas-grid li a:hover { color: #111; opacity: 1; }

/* ---- Listings / For Sale --------------------------------- */
.listings-filters {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    box-shadow: 6px 6px 9px rgba(0,0,0,0.08);
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-group label {
    font-family: 'Dosis', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7280;
}

.filter-select {
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    font-family: 'Dosis', sans-serif;
    font-size: 0.875rem;
    color: #374151;
    background: #fff;
    outline: none;
}
.filter-select:focus { border-color: #552448; }

.filter-sort { margin-left: auto; }

.listings-count {
    font-family: 'Dosis', sans-serif;
    font-size: 0.875rem;
    color: #6b7280;
    align-self: flex-end;
    padding-bottom: 8px;
    margin-left: 8px;
}

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

.listing-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 6px 6px 9px rgba(0,0,0,0.08);
}

.listing-card-header {
    height: 192px;
    padding: 16px;
    background: linear-gradient(135deg, #111, #000);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.listing-card-header-top {
    display: flex;
    justify-content: space-between;
}

.listing-badge {
    font-family: 'Dosis', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 100px;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    align-self: flex-start;
}

.listing-featured-badge {
    font-family: 'Dosis', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 100px;
    background: rgba(0,0,0,0.4);
    color: #fff;
}

.listing-price {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    margin-top: auto;
}

.listing-card-body { padding: 20px; }

.listing-address {
    font-family: 'Dosis', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #111;
    margin-bottom: 4px;
}

.listing-city {
    font-family: 'Dosis', sans-serif;
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 12px;
}

.listing-stats {
    display: flex;
    gap: 16px;
    font-family: 'Dosis', sans-serif;
    font-size: 0.875rem;
    color: #4b5563;
    padding-top: 12px;
    border-top: 1px solid #f3f4f6;
    margin-bottom: 12px;
}

.listing-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.listing-type {
    font-family: 'Dosis', sans-serif;
    font-size: 0.75rem;
    color: #9ca3af;
}

.listing-view-link {
    font-family: 'Dosis', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #552448;
}

.listings-empty {
    text-align: center;
    padding: 80px 0;
    font-family: 'Dosis', sans-serif;
    color: #6b7280;
}

.listings-idx-note {
    margin-top: 40px;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #fff;
    text-align: center;
    font-family: 'Dosis', sans-serif;
    font-size: 0.875rem;
    color: #6b7280;
}
.listings-idx-note a { color: #552448; font-weight: 600; }

/* ---- CTA Banner ------------------------------------------ */
.cta-banner {
    padding: 64px 16px;
    background: #552448;
    color: #fff;
}

.cta-banner h2 {
    font-size: 1.875rem;
    font-weight: 600;
    margin-bottom: 16px;
}
@media (min-width: 768px) { .cta-banner h2 { font-size: 2.25rem; } }

.cta-banner p {
    font-family: 'Dosis', sans-serif;
    color: rgba(255,255,255,0.9);
    font-size: 1.125rem;
    margin-bottom: 32px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* ---- Footer ---------------------------------------------- */
.site-footer {
    background: #000;
    color: #fff;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 48px;
    padding-bottom: 40px;
}
@media (min-width: 768px)  { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }

.footer-logo { object-fit: contain; margin-bottom: 16px; }

.footer-tagline {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.6;
    margin-bottom: 20px;
}

.footer-bhhs { object-fit: contain; margin-bottom: 20px; }
.bhhs-portrait.footer-bhhs { display: block; }
.bhhs-landscape.footer-bhhs { display: none; }
@media (min-width: 640px) {
    .bhhs-portrait.footer-bhhs { display: none; }
    .bhhs-landscape.footer-bhhs { display: block; }
}

.footer-social { display: flex; gap: 12px; }

.social-link {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.7);
    transition: color 0.15s, border-color 0.15s;
}
.social-link:hover { color: #fff; border-color: rgba(255,255,255,0.5); opacity: 1; }

.footer-heading {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #fff;
    margin-bottom: 16px;
}

.footer-contact-list { list-style: none; }
.footer-contact-list li {
    display: flex;
    gap: 8px;
    font-size: 0.875rem;
    color: rgba(255,255,255,0.6);
    margin-bottom: 12px;
    align-items: flex-start;
}
.footer-contact-list svg { color: rgba(255,255,255,0.4); flex-shrink: 0; margin-top: 2px; }
.footer-contact-list a { color: rgba(255,255,255,0.6); }
.footer-contact-list a:hover { color: #fff; opacity: 1; }

.footer-two-col-list {
    list-style: none;
    columns: 2;
}
.footer-two-col-list li, .footer-list li { margin-bottom: 6px; }
.footer-two-col-list li a, .footer-list li a {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.6);
}
.footer-two-col-list li a:hover, .footer-list li a:hover { color: #fff; opacity: 1; }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 24px;
    padding-bottom: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.4);
    text-align: center;
}
@media (min-width: 640px) {
    .footer-bottom { flex-direction: row; justify-content: space-between; }
}

.footer-affiliate { color: rgba(255,255,255,0.3); font-size: 0.75rem; }

.footer-legal { display: flex; gap: 16px; }
.footer-legal a { color: rgba(255,255,255,0.4); font-size: 0.75rem; }
.footer-legal a:hover { color: #fff; opacity: 1; }