/* =============================================================
   On The Cape Real Estate — Main Stylesheet
   On The Cape Real Estate Theme
   ============================================================= */

/* ── Scrollbar ──────────────────────────────────────────────── */
* { scrollbar-width: auto; scrollbar-color: var(--ocean) transparent; }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ocean); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--navy); }

/* ── Custom Properties ─────────────────────────────────────── */
:root {
    /* Palette — Atlantic coast */
    --navy:        #1B3A5C;
    --navy-dark:   #0F2340;
    --navy-light:  #2B4C6F;
    --ocean:       #2D7BA8;
    --ocean-light: #4A9AC4;
    --seafoam:     #7FBFBB;
    --sand:        #E8D9C0;
    --border:      #E8D9C0;
    --sand-light:  #F5EDD8;
    --driftwood:   #9B8067;
    --cream:       #FAF7F2;
    --white:       #FFFFFF;
    --charcoal:    #2C2C2C;
    --gray-600:    #6B7280;
    --gray-200:    #E5E7EB;
    --gray-100:    #F3F4F6;
    --success:     #2E7D32;
    --warning:     #F59E0B;
    --danger:      #DC2626;

    /* Typography */
    --font-display: 'DM Serif Display', Georgia, serif;
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body:    'Jost', system-ui, sans-serif;

    /* Spacing */
    --container-max: 1320px;
    --section-py:    2rem;
    --radius-sm:     6px;
    --radius:        12px;
    --radius-lg:     20px;
    --radius-xl:     32px;

    /* Shadows */
    --shadow-sm:  0 1px 3px rgba(27,58,92,.08), 0 1px 2px rgba(27,58,92,.06);
    --shadow:     0 4px 16px rgba(27,58,92,.10), 0 2px 6px rgba(27,58,92,.06);
    --shadow-lg:  0 20px 48px rgba(27,58,92,.14), 0 8px 20px rgba(27,58,92,.08);
    --shadow-xl:  0 32px 64px rgba(27,58,92,.18);

    /* Transitions */
    --ease:  cubic-bezier(.25,.46,.45,.94);
    --ease-out-back: cubic-bezier(.34,1.56,.64,1);
}

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

html { scroll-behavior: smooth; font-size: 16px; }

body {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--charcoal);
    background: var(--cream);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    font-size: 1rem;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: var(--ocean); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--navy); }

/* ── ADA: keyboard focus indicators (WCAG 2.4.7 Focus Visible) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--ocean);
    outline-offset: 2px;
    border-radius: 2px;
}

h1,h2,h3,h4,h5,h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.25;
    color: var(--navy);
}

/* ── Container ──────────────────────────────────────────────── */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ── Announcement Bar ───────────────────────────────────────── */
.announcement-bar {
    background: var(--navy-dark);
    color: rgba(255,255,255,.95);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .03em;
    padding: .5rem 0;
}
.announcement-bar .container {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.announcement-bar a { color: var(--seafoam); }
.announcement-bar a:hover { color: var(--white); }
.announcement-bar .sep { opacity: .3; }
.announcement-bar i { margin-right: .4rem; }

/* ── Site Header ────────────────────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(27,58,92,.08);
    transition: box-shadow .3s var(--ease);
}
.site-header.scrolled { box-shadow: var(--shadow); }
body.nav-open .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.site-header .container {
    display: flex;
    align-items: center;
    gap: 1.0rem;
    padding-top: .9rem;
    padding-bottom: .9rem;
}


@media (max-width: 1280px) {
.site-header .container {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-top: .9rem;
    padding-bottom: .9rem;
}
}
@media (max-width: 1080px) {
.site-header .container {
    display: flex;
    align-items: center;
    gap: .125rem;
    padding-top: .5rem;
    padding-bottom: .9rem;
}
}
/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--navy);
    text-decoration: none;
    flex-shrink: 0;
}
.logo-anchor {
    font-size: 2rem;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(27,58,92,.2));
}
.logo-name {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.675rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--navy);
    line-height: 1.375;
}
.logo-tagline {
    display: block;
    font-size: .875rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ocean);
    line-height: 1;
}


@media (max-width: 1325px) {
.logo-name {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--navy);
    line-height: 1.375;
}
.logo-tagline {
    display: block;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ocean);
    line-height: 1;
}
}
/* Main Nav */
.main-nav { flex: 1; padding-top: 1.4rem;}
.main-nav > ul { list-style: none; display: flex; align-items: flex-start; gap: .25rem; }
@media (max-width: 1325px) {
.main-nav > ul { list-style: none; display: flex; align-items: flex-start; gap: .125rem; }
}
.main-nav a {
    display: block;
    padding: .5rem .8rem;
    font-size: .88rem;
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--charcoal);
    border-radius: var(--radius-sm);
    transition: color .2s, background .2s;
    position: relative;
}
.main-nav a:hover, .main-nav a.active {
    color: var(--navy);
    background: var(--sand-light);
}
.main-nav a.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: .8rem;
    right: .8rem;
    height: 2px;
    background: var(--ocean);
    border-radius: 2px;
}

@media (max-width: 1230px) {
.main-nav a {
    display: block;
    padding: .5rem .75rem;
    font-size: .85rem;
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--charcoal);
    border-radius: var(--radius-sm);
    transition: color .2s, background .2s;
    position: relative;
}
}

@media (max-width: 1200px) {
.main-nav a {
    display: block;
    padding: .5rem .75rem;
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--charcoal);
    border-radius: var(--radius-sm);
    transition: color .2s, background .2s;
    position: relative;
}
}
@media (max-width: 1160px) {
.main-nav a {
    display: block;
    padding: .5rem .5rem;
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: -.02em;
    color: var(--charcoal);
    border-radius: var(--radius-sm);
    transition: color .2s, background .2s;
    position: relative;
}
}
@media (max-width: 1065px) {
.main-nav a {
    display: block;
    padding: .5rem .365rem;
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: -.03em;
    color: var(--charcoal);
    border-radius: var(--radius-sm);
    transition: color .2s, background .2s;
    position: relative;
}
}
.main-nav a:hover, .main-nav a.active {
    color: var(--navy);
    background: var(--sand-light);
}
.main-nav a.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: .8rem;
    right: .8rem;
    height: 2px;
    background: var(--ocean);
    border-radius: 2px;
}

@media (max-width: 1098px) {
.main-nav a {
    display: block;
    padding: .5rem .375rem;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--charcoal);
    border-radius: var(--radius-sm);
    transition: color .2s, background .2s;
    position: relative;
}
.main-nav a:hover, .main-nav a.active {
    color: var(--navy);
    background: var(--sand-light);
}
.main-nav a.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: .8rem;
    right: .8rem;
    height: 2px;
    background: var(--ocean);
    border-radius: 2px;
}
}

@media (max-width: 1024px) {
.main-nav a {
    display: block;
    padding: .5rem .2875rem;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--charcoal);
    border-radius: var(--radius-sm);
    transition: color .2s, background .2s;
    position: relative;
}
.main-nav a:hover, .main-nav a.active {
    color: var(--navy);
    background: var(--sand-light);
}
.main-nav a.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: .8rem;
    right: .8rem;
    height: 2px;
    background: var(--ocean);
    border-radius: 2px;
}
}
/* Dropdown */
.has-dropdown { position: relative; display: flex; flex-wrap: wrap; align-items: center; }
.has-dropdown > a { flex: 1; }

/* Dropdown toggle button — chevron next to the nav link */
.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: .35rem .5rem;
    color: var(--charcoal);
    border-radius: var(--radius-sm);
    transition: color .2s, transform .25s var(--ease);
    line-height: 1;
}
.dropdown-toggle:hover { color: var(--navy); }
.dropdown-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.dropdown-toggle i { transition: transform .25s var(--ease); display: block; }

/* .nav-caret is styled per breakpoint:
   desktop → inside @media (min-width: 1024px) above
   mobile  → display:none inside @media (max-width: 1023px) below */

/* ── Desktop: restore normal dropdown hover behaviour ────── */
@media (min-width: 1024px) {
    /* Hide the mobile-only toggle button */
    .dropdown-toggle { display: none; }
    /* Hide nav items that belong only in the mobile drawer */
    .mobile-nav-only { display: none; }

    /* Undo the flex layout set for mobile */
    .has-dropdown { display: block; }
    .has-dropdown > a { flex: none; }

    /* Draw the chevron via ::after pseudo-element — no <i> tag required,
       nothing for Font Awesome or other rules to accidentally hide.
       Unicode ▾ (U+25BE) is a solid downward-pointing triangle. */
    .has-dropdown > a::after {
        content: ' \25BE';
        font-style: normal;
        font-size: .85em;
        margin-left: .3rem;
        transition: transform .25s var(--ease);
        transform-origin: center 60%;
        display: inline-block;
    }
    .has-dropdown:hover > a::after,
    .has-dropdown:focus-within > a::after {
        transform: rotate(180deg);
    }

    /* Also hide the <i class="nav-caret"> tags since ::after handles it */
    .nav-caret { display: none !important; }

    /* The [hidden] attribute is written into the HTML for the mobile accordion.
       On desktop we override it so the element is present in the DOM and the
       CSS opacity/visibility hover transition can work normally. */
    .has-dropdown .dropdown[hidden] {
        display: block !important;
    }

    /* Make sure hover still wins even with [hidden] overridden */
    .has-dropdown:hover .dropdown,
    .has-dropdown:focus-within .dropdown {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }
}

/* Mobile close button — hidden on desktop */
.mobile-nav-close { display: none; }

.dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    min-width: 200px;
    padding: .5rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
    z-index: 200;
    columns: 1;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.dropdown li {list-style: none;
}
.dropdown li a {
    padding: .25rem 1rem;
    font-size: .83rem;
    display: block;
    border-radius: 0;
    break-inside: avoid;
}
.dropdown li a:hover { background: var(--sand-light); }

/* ── Mega-dropdown (Find a Home) ─────────────────────────── */
@media (min-width: 1024px) {
    /* Override block to grid for the megamenu on desktop */
    .has-dropdown .dropdown.megamenu[hidden],
    .has-dropdown .dropdown.megamenu {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        min-width: 680px;
        padding: 1.25rem 1.5rem;
        left: -60px;
    }
    /* When not hovered, keep opacity/visibility hidden like normal dropdown */
    .has-dropdown .dropdown.megamenu[hidden] {
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
    }
    .has-dropdown:hover .dropdown.megamenu,
    .has-dropdown:focus-within .dropdown.megamenu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .mega-col { list-style: none; padding: 0 1rem; border-right: 1px solid var(--gray-100); }
    .mega-col:last-child { border-right: none; }
    .mega-region-hd {
        display: block;
        font-family: var(--font-heading);
        font-weight: 700;
        font-size: .75rem;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--navy);
        padding: 0 0 .5rem;
        margin-bottom: .4rem;
        border-bottom: 2px solid var(--sand);
        text-decoration: none;
    }
    .mega-region-hd:hover { color: var(--navy-dark); background: none; }
    .mega-town-list { list-style: none; padding: 0; margin: 0; }
    .mega-town-list li a {
        display: block;
        padding: .22rem 0;
        font-size: .82rem;
        color: var(--gray-700, #374151);
        text-decoration: none;
        border-radius: 0;
        break-inside: unset;
    }
    .mega-town-list li a:hover { background: none; color: var(--navy); padding-left: .25rem; transition: padding-left .15s; }
    /* Centered megamenu: left: calc(50% - 340px) places the panel's center under the nav link
       regardless of the li's computed width. 340 = half of the 680px panel. */
    .has-dropdown .dropdown.megamenu.megamenu-right { left: calc(50% - 340px); right: auto; }
}

/* Mobile: mega-dropdown stacks as accordion with 2-col town lists */
@media (max-width: 1023px) {
    /* Remove the default dropdown left-indent so region headers align flush left */
    .dropdown.megamenu { padding-left: 0; }
    .dropdown.megamenu:not([hidden]) { max-height: 900px; }
    .mega-col { display: block; padding: 0; border-right: none; }
    .mega-region-hd {
        display: block;
        font-weight: 700;
        font-size: .8rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--navy);
        padding: .5rem 0 .3rem;
        margin-top: .5rem;
        margin-bottom: .2rem;
        border-bottom: 2px solid var(--sand);
        text-decoration: none;
    }
    /* 2-column town list; towns indented */
    .mega-town-list { list-style: none; padding: 0; margin: 0 0 .25rem; columns: 2; column-gap: 0; }
    .mega-town-list li { break-inside: avoid; }
    .mega-town-list li a { display: block; padding: .22rem .5rem .22rem 1.25rem; font-size: .82rem; color: var(--gray-700, #374151); }
    .mega-town-list li a:hover { background: var(--sand-light); }
}

/* Header Actions */
.header-actions { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }

/* Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
}
.hamburger span {
    display: block;
    height: 2px;
    background: var(--navy);
    border-radius: 2px;
    transition: transform .3s var(--ease), opacity .3s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .7rem 1.5rem;
    font-family: var(--font-body);
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .02em;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all .25s var(--ease);
    white-space: nowrap;
    text-decoration: none;
}
.btn-primary {
    background: var(--navy);
    color: var(--white);
    border-color: var(--navy);
}
.btn-primary:hover {
    background: var(--navy-dark);
    border-color: var(--navy-dark);
    color: var(--white);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(27,58,92,.3);
}
.btn-outline {
    background: transparent;
    color: var(--navy);
    border-color: var(--navy);
}
.btn-outline:hover {
    background: var(--navy);
    color: var(--white);
    transform: translateY(-1px);
}
.header-actions .btn-outline.active {
    background: var(--ocean);
    border-color: var(--ocean);
    color: var(--white);
}
.header-actions .btn-outline.active i { color: var(--white); }
.btn-white {
    background: var(--white);
    color: var(--navy);
    border-color: var(--white);
}
.btn-white:hover {
    background: var(--sand-light);
    color: var(--navy-dark);
}
.btn-outline-white {
    background: transparent;
    color: var(--white);
    border-color: rgba(255,255,255,.7);
}
.btn-outline-white:hover {
    background: rgba(255,255,255,.1);
    border-color: var(--white);
}
.btn-sm  { padding: .5rem .5rem; font-size: .82rem; }
.btn-lg  { padding: .9rem 2rem; font-size: 1rem; }
.btn-block { width: 100%; }


@media (max-width: 1260px) {
.btn-sm  { padding: .5rem .375rem; font-size: .75rem; }
}
/* ── Hero ───────────────────────────────────────────────────── */
.hero {
    position: relative;
    min-height: 95vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Slideshow */
.hero-slideshow {
    position: absolute;
    inset: 0;
}
.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease;
    transform: scale(1.04);
    animation: kenBurns 8s var(--ease) forwards;
}
.hero-slide.active { opacity: 1; }

@keyframes kenBurns {
    from { transform: scale(1.04); }
    to   { transform: scale(1); }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(11,28,52,.75) 0%,
        rgba(11,28,52,.45) 60%,
        rgba(27,58,92,.2) 100%
    );
}

.hero-content {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 2rem 1.5rem 2rem 1.5rem;
}

@media (max-width: 1024px) {
.hero { align-items: flex-start; }
.hero-content {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem 1.5rem;
}
}
@media (max-width: 810px) {
.hero-content {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: .5rem 1.5rem 6rem 1.5rem;/*
    padding-top: 1rem;
    padding-bottom: 2rem;*/
}
}

@media (max-width: 560px) {
.hero-content {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: .5rem 1.5rem 5rem 1.5rem;/*
    padding-top: 1rem;
    padding-bottom: 2rem;*/
}
}
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--seafoam);
    margin-bottom: 1.0rem;
    animation: fadeInUp .8s .2s var(--ease) both;
}
.wave-icon { font-size: 1.2em; }
.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 7vw, 5.5rem);
    font-weight: 400;
    color: var(--white);
    line-height: 1.1;
    margin-bottom: 1.25rem;
    animation: fadeInUp .8s .4s var(--ease) both;
}
.hero-title em {
    font-style: italic;
    color: var(--sand);
}
.hero-subtitle {
    font-size: 1.15rem;
    color: rgba(255,255,255,.85);
    max-width: 520px;
    margin-bottom: 2.5rem;
    line-height: 1.7;
    animation: fadeInUp .8s .6s var(--ease) both;
}

@media (max-width: 560px) {
.hero-subtitle {
    font-size: 1.05rem;
    color: rgba(255,255,255,.85);
    max-width: 520px;
    margin-bottom: 1.5rem;
    line-height: 1.7;
    animation: fadeInUp .8s .6s var(--ease) both;
}
}

@media (max-width: 428px) {
.hero-subtitle {
    font-size: 1.0rem;
    color: rgba(255,255,255,.85);
    max-width: 520px;
    margin-bottom: 1.5rem;
    line-height: 1.7;
    animation: fadeInUp .8s .6s var(--ease) both;
}
}

/* ── Address Autocomplete ───────────────────────────────── */
.hero-address-row { margin-bottom: .75rem; }

.search-field--address { position: relative; }

.address-ac-wrap { position: relative; }

/* Plain text input — no dropdown arrow */
.search-field--address input {
    background-image: none;
    padding-right: 1rem;
}

.address-suggestions {
    position: absolute;
    background: var(--white);
    border: 1.5px solid var(--ocean);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    list-style: none;
    margin: 0; padding: 0;
    z-index: 9999;
    max-height: min(480px, 70vh);
    overflow-y: auto;
}
.address-suggestions li {
    display: flex;
    flex-direction: column;
    padding: .65rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--gray-200);
    transition: background .15s;
}
.address-suggestions li:last-child { border-bottom: none; }
.address-suggestions li:hover,
.address-suggestions li.ac-focused {
    background: var(--sand-light);
}
.ac-address {
    font-size: .9rem;
    font-weight: 600;
    color: var(--navy);
}
.ac-meta {
    font-size: .78rem;
    color: var(--gray-600);
    margin-top: .15rem;
}
.address-suggestions li.ac-town-item { background: var(--sand-light); }
.address-suggestions li.ac-town-item:hover,
.address-suggestions li.ac-town-item.ac-focused { background: var(--sand); }
.address-suggestions li.ac-town-item .ac-address i { margin-right: .35rem; color: var(--ocean); }
.address-suggestions li.ac-separator {
    padding: .3rem 1rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gray-600);
    background: var(--gray-100);
    cursor: default;
    pointer-events: none;
    border-bottom: 1px solid var(--gray-200);
}

.hero-search-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .75rem;
    color: var(--gray-600);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.hero-search-divider::before,
.hero-search-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--gray-200);
}

/* Hero Search */
.hero-search {
    background: rgba(255,255,255,.98);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    max-width: 860px;
    box-shadow: var(--shadow-xl);
    animation: fadeInUp .8s .8s var(--ease) both;
}
.hero-search-inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 1rem;
    align-items: end;
}
.search-field label {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gray-600);
    margin-bottom: .4rem;
}
.search-field select,
.search-field input {
    width: 100%;
    padding: .7rem 1rem;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: .9rem;
    color: var(--charcoal);
    background-color: var(--white);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%236B7280' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 1rem;
    transition: border-color .2s;
}
.search-field select:focus,
.search-field input:focus {
    outline: none;
    border-color: var(--ocean);
    box-shadow: 0 0 0 3px rgba(45,123,168,.12);
}
.btn-search { padding: .7rem 2rem; height: 100%; }

.hero-search-quick {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

@media (max-width: 560px) {
.hero-search-quick {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: .25rem;
    flex-wrap: wrap;
}
}
.hero-search-quick > span {
    font-size: .8rem;
    font-weight: 600;
    color: var(--gray-600);
}
.hero-search-quick a {
    font-size: .8rem;
    font-weight: 500;
    color: var(--ocean);
    padding: .3rem .75rem;
    background: var(--gray-100);
    border-radius: 100px;
    transition: all .2s;
}
.hero-search-quick a:hover {
    background: var(--navy);
    color: var(--white);
}

/* Hero Scroll Indicator */
.hero-scroll {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    z-index: 10;
    animation: fadeIn 1.5s 1.5s both;
}
.hero-scroll span {
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(255,255,255,.6);
}
.scroll-line {
    width: 1px;
    height: 50px;
    background: linear-gradient(rgba(255,255,255,.6), transparent);
    animation: scrollLine 2s 2s ease-in-out infinite;
}
@keyframes scrollLine {
    0%   { transform: scaleY(1); transform-origin: top; }
    50%  { transform: scaleY(0); transform-origin: top; }
    51%  { transform: scaleY(0); transform-origin: bottom; }
    100% { transform: scaleY(1); transform-origin: bottom; }
}

/* ── Stats Strip ────────────────────────────────────────────── */
.stats-strip {
    background: var(--navy);
    padding: 2rem 0;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    text-align: center;
}
.stat-item { padding: 1rem; }
.stat-num {
    display: block;
    font-family: var(--font-display);
    font-size: 2.5rem;
    color: var(--seafoam);
    line-height: 1;
    margin-bottom: .4rem;
}
.stat-label {
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.6);
}

/* ── Sections ───────────────────────────────────────────────── */
.section { padding: var(--section-py) 0; }

.section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 2.5rem;
    gap: 1rem;
}
.section-header.centered {
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.section-eyebrow {
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: capitalize;
    color: var(--ocean);
    /*margin-bottom: .5rem;*/
}
.section-title {
    font-size: clamp(1.5rem, 3.5vw, 2.75rem);
    color: var(--navy);
    margin-bottom: .5rem;
}
.section-desc {
    font-size: 1.0rem;
    color: var(--gray-600);
    max-width: 560px;
    text-align: center;
    margin-top: .5rem;
}
.section-link {
    font-size: .88rem;
    font-weight: 600;
    color: var(--ocean);
    /*white-space: nowrap;*/
}
.section-link:hover { color: var(--navy); }
.section-link i { margin-left: .3rem; transition: transform .2s; }
.section-link:hover i { transform: translateX(4px); }
.section-footer {
    margin-top: 3rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ── Communities Grid ───────────────────────────────────────── */
.communities-section { background: var(--sand-light); }
.communities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.community-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4/3;
    display: block;
    color: var(--white);
}
.community-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform .6s var(--ease);
}
.community-card:hover .community-img { transform: scale(1.06); }
.community-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(11,28,52,.8) 0%, transparent 60%);
}
.community-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    padding: 1.5rem;
    transform: translateY(0);
    transition: transform .3s var(--ease);
}
.community-info h3 {
    font-size: 1.4rem;
    color: var(--white);
    margin-bottom: .25rem;
}
.community-info p {
    font-size: .85rem;
    color: rgba(255,255,255,.8);
    line-height: 1.5;
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s var(--ease), opacity .3s;
    opacity: 0;
}
.community-actions {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: .5rem;
}
.community-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--seafoam);
    text-decoration: none;
}
.community-link:hover {
    color: var(--sand);
}
.community-link i { transition: transform .2s; }
.community-card:hover .community-info p { max-height: 60px; opacity: 1; }
.community-card:hover .community-link i { transform: translateX(4px); }

/* ── Why Section ────────────────────────────────────────────── */
.why-section { background: var(--white); }
.why-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}
.why-image { position: relative; }
.why-image img {
    width: 100%;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    object-fit: cover;
    aspect-ratio: 4/5;
}
.why-image-badge {
    position: absolute;
    bottom: -1.5rem;
    right: -1.5rem;
    background: var(--navy);
    color: var(--white);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-lg);
}
.why-image-badge .badge-num {
    display: block;
    font-family: var(--font-display);
    font-size: 2.5rem;
    color: var(--seafoam);
    line-height: 1;
}
.why-image-badge .badge-text {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.7);
    margin-top: .25rem;
}
.why-content { padding: 2rem 0; }
.why-features { margin: 2rem 0; display: flex; flex-direction: column; gap: 1.5rem; }
.why-feature {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.why-feature i {
    width: 44px;
    height: 44px;
    background: var(--sand-light);
    color: var(--ocean);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.why-feature strong { display: block; color: var(--navy); margin-bottom: .2rem; }
.why-feature span { font-size: .9rem; color: var(--gray-600); }

/* ── Open Houses Strip ──────────────────────────────────────── */
.openhouse-section { background: var(--sand-light); }
.openhouse-list { display: flex; flex-direction: column; gap: .75rem; }
.openhouse-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: var(--white);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    text-decoration: none;
    color: var(--charcoal);
    transition: all .25s var(--ease);
    box-shadow: var(--shadow-sm);
}
.openhouse-row:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow);
    color: var(--charcoal);
}
.oh-date {
    text-align: center;
    min-width: 52px;
}
.oh-month {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ocean);
}
.oh-day {
    display: block;
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--navy);
    line-height: 1;
}
.oh-info { flex: 1; }
.oh-info strong { display: block; color: var(--navy); font-weight: 600; }
.oh-info span { font-size: .88rem; color: var(--gray-600); }
.oh-price { font-family: var(--font-heading); font-weight: 600; color: var(--navy); font-size: 1.1rem; }
.oh-arrow { color: var(--gray-200); transition: color .2s, transform .2s; }
.openhouse-row:hover .oh-arrow { color: var(--ocean); transform: translateX(4px); }

/* ── CTA Section ────────────────────────────────────────────── */
.cta-section {
    position: relative;
    padding: 6rem 0;
    overflow: hidden;
}
.cta-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(11,28,52,.88) 0%, rgba(27,58,92,.75) 100%);
}
.cta-content {
    position: relative;
    z-index: 1;
    text-align: center;
}
.cta-content h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.25rem);
    color: var(--white);
    font-weight: 400;
    margin-bottom: 1rem;
}
.cta-content p {
    font-size: 1.1rem;
    color: rgba(255,255,255,.8);
    max-width: 560px;
    margin: 0 auto 2.5rem;
}
.cta-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ── Testimonials ───────────────────────────────────────────── */
.testimonials-section { background: var(--cream); }
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.testimonial-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow);
    position: relative;
}
.testimonial-card::before {
    content: '\201C';
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-family: Georgia, serif;
    font-size: 5rem;
    color: var(--sand);
    line-height: 1;
}
.stars { color: var(--warning); margin-bottom: 1rem; font-size: .9rem; }
.testimonial-card blockquote {
    font-style: italic;
    color: var(--charcoal);
    line-height: 1.7;
    margin-bottom: 1.25rem;
    font-size: .97rem;
}
.testimonial-author strong {
    display: block;
    color: var(--navy);
    font-family: var(--font-heading);
    font-size: 1rem;
}
.testimonial-author span {
    font-size: .82rem;
    color: var(--gray-600);
}

/* ── Page Header ────────────────────────────────────────────── */
.page-header {
    background: var(--navy);
    padding: 1rem 0;
    color: var(--white);
}
.page-header-town { padding: .5rem 0;
    background-size: cover;
    background-position: center;
}
.page-header-sm { padding: 1rem 0; }
.page-header-sm .container { position: relative; }

@media (max-width: 560px) {
.page-header-sm { padding: .5rem 0; }
}

.page-header h1 {
    color: var(--white);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    margin-top: .5rem;
}
@media (max-width: 560px) {.page-header h1 {
    color: var(--white);
    font-size: 1.125rem;
    margin-top: .5rem;
}
}
.result-count { color: rgba(255,255,255,.7); font-size: .9rem; margin-top: .35rem; }
.oh-last-updated { font-size: .8rem; opacity: .75; white-space: nowrap; }

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .82rem;
    color: rgba(255,255,255,.8);
}

@media (max-width: 560px) {
.breadcrumb {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .75rem;
    color: rgba(255,255,255,.6);
}
}
.breadcrumb a, .breadcrumb span { line-height: 1; white-space: nowrap; }
.breadcrumb a { color: rgba(255,255,255,.9); }
.breadcrumb a:hover { color: var(--seafoam); }
.breadcrumb i { font-size: .9rem; display: inline-block; width: 1em; text-align: center; flex-shrink: 0; }

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer { background: var(--navy-dark); color: rgba(255,255,255,.75); }
.footer-waves { line-height: 0; }
.footer-waves svg { width: 100%; height: 40px; display: block; }
.footer-body { padding: 4rem 0 2rem; }
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
    gap: 3rem;
}
.footer-logo {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--white);
    text-decoration: none;
    margin-bottom: 1rem;
}
.footer-col p { font-size: .88rem; line-height: 1.7; margin-bottom: 1rem; }
.footer-col address {
    font-style: normal;
    font-size: .85rem;
    line-height: 2;
}
.footer-col address i { margin-right: .5rem; color: var(--seafoam); }
.footer-col address a { color: rgba(255,255,255,.7); }
.footer-col address a:hover { color: var(--seafoam); }
.footer-col h4 {
    color: var(--white);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    font-family: var(--font-body);
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: .5rem; }
.footer-col ul a {
    font-size: .88rem;
    color: rgba(255,255,255,.6);
    transition: color .2s;
}
.footer-col ul a:hover { color: var(--seafoam); }

.social-links {
    display: flex;
    gap: .75rem;
    margin-top: 1rem;
}
.social-links a {
    width: 38px;
    height: 38px;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    transition: all .2s;
}
.social-links a:hover {
    background: var(--ocean);
    color: var(--white);
}

/* Newsletter form */
.hp-field { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

@keyframes newsletter-flash-fade {
    0%   { opacity:0; transform:translateY(-4px); }
    8%   { opacity:1; transform:translateY(0); }
    75%  { opacity:1; }
    100% { opacity:0; }
}
.newsletter-flash {
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    align-items:center;
    gap:.6rem;
    max-width:340px;
    font-size:.85rem;
    color:rgba(255,255,255,.92);
    z-index:5;
    pointer-events:none;
    animation:newsletter-flash-fade 6s ease forwards;
}
.newsletter-flash i { color:var(--seafoam); font-size:1rem; flex-shrink:0; }
@media (max-width:767px) {
    .newsletter-flash {
        top:.5rem;
        transform:none;
        width:225px;
        max-width:225px;
        background:#fff;
        border-left:3px solid var(--ocean);
        border-radius:var(--radius);
        box-shadow:var(--shadow-lg);
        padding:.65rem .85rem;
        color:var(--charcoal);
        font-size:.8rem;
        pointer-events:auto;
    }
    .newsletter-flash i { color:var(--ocean); }
}

.newsletter-form .input-group {
    display: flex;
    gap: .5rem;
}
.newsletter-form input {
    flex: 1;
    padding: .65rem 1rem;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,.08);
    color: var(--white);
    font-family: var(--font-body);
    font-size: .9rem;
}
.newsletter-form input::placeholder { color: rgba(255,255,255,.4); }
.newsletter-form input:focus {
    outline: none;
    border-color: var(--seafoam);
}
.disclaimer { opacity: .5; margin-top: 1rem; font-size: .75rem !important; }

/* 2026-06-17 CLICK CAPE CLAUDE --- ADDED IDX COMPLIANCE LOGO STYLES AND LISTING DISCLAIMER LAYOUT */
.footer-idx-logos {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: .75rem 0;
    background: rgba(0,0,0,.15);
}
.footer-idx-logos .container {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.footer-idx-logos img {
    height: 32px;
    width: auto;
    opacity: 1;
    filter: brightness(1.0);
}
/* IDX disclaimer on listing pages */
.idx-disclaimer {
    margin-top: 2rem;
    padding: 1rem;
    background: var(--gray-100);
    border-radius: var(--radius);
    font-size: .82rem;
    color: var(--gray-600);
}
.idx-logos {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: .6rem;
    flex-wrap: wrap;
}
.idx-logos img {
    height: 24px;
    width: auto;
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 1.25rem 0;
}
.footer-bottom .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.footer-bottom p { font-size: .8rem; color: rgba(255,255,255,.4); }
.footer-bottom ul {
    list-style: none;
    display: flex;
    gap: 1.25rem;
}
.footer-bottom ul a {
    font-size: .8rem;
    color: rgba(255,255,255,.4);
}
.footer-bottom ul a:hover { color: var(--seafoam); }

/* ── Alerts ─────────────────────────────────────────────────── */
.alert {
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    font-size: .9rem;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: 1.5rem;
}
.alert-success {
    background: #ecfdf5;
    color: var(--success);
    border: 1px solid #a7f3d0;
}
.alert-warning {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}
.alert-error {
    background: #fef2f2;
    color: var(--danger);
    border: 1px solid #fecaca;
}
.api-notice {
    text-align: center;
    padding: 2rem;
    background: var(--sand-light);
    border-radius: var(--radius);
    color: var(--gray-600);
    font-size: .9rem;
}
.api-notice i { color: var(--ocean); margin-right: .4rem; }
.api-notice code { background: var(--gray-100); padding: .2rem .5rem; border-radius: 4px; font-size: .85rem; }

/* ── Utilities / Animations ─────────────────────────────────── */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mobile-nav-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 300px;
    bottom: 0;
    background: rgba(11,28,52,.5);
    z-index: 1050;
    backdrop-filter: blur(4px);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .dropdown { columns: 1; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .why-inner { gap: 3rem; }
}
@media (max-width: 980px) {
		
.logo-name {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: .2em;
    color: var(--navy);
    line-height: 1.1;
}
.logo-tagline {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ocean);
    line-height: 1;
}
}
@media (max-width: 900px) {
    .communities-grid { grid-template-columns: repeat(2, 1fr); }
    .testimonials-grid { grid-template-columns: 1fr; max-width: 540px; margin: 0 auto; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-search-inner { grid-template-columns: 1fr 1fr; }
    .why-inner { grid-template-columns: 1fr; }
    .why-image { max-width: 480px; margin: 0 auto; }
    .why-image-badge { right: 1rem; }
}
@media (max-width: 1023px) {
    :root { --section-py: 3rem; }

    .hamburger { display: flex; }
    .site-header .container { justify-content: space-between; }
		
.logo-name {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .2em;
    color: var(--navy);
    line-height: 1.25;
}
.logo-tagline {
    display: block;
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ocean);
    line-height: 1.125;
}
.main-nav {
    position: fixed;
    top: 0;
    right: 0;

    width: 300px;
    height: 100vh;

    background: var(--white);
    z-index: 1100;
    box-shadow: var(--shadow-xl);
    padding: 4rem 1.5rem 2rem; /* reduced top — close button uses absolute pos */

    overflow-y: auto;
    overflow-x: hidden;

    transform: translateX(100%) translateZ(0);
    transition: transform .35s var(--ease);
}
.main-nav:not(.open){
    display:none !important;
}
.main-nav.open {
    transform: translateX(0) translateZ(0);
}
    .mobile-nav-overlay.open { display: block; }
    .main-nav ul { flex-direction: column; gap: 0; list-style: none; }
    .main-nav > ul > li > a { padding: .8rem 0; border-radius: 0; border-bottom: none; }
    .main-nav > ul > li:not(.has-dropdown) { border-bottom: 1px solid var(--gray-100); }
    .main-nav a.active::after { display: none; }
    /* Dropdowns collapsed by default on mobile */
    .dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        columns: 1;
        width: 100%;
        /* collapsed state */
        max-height: 0;
        overflow: hidden;
        padding: 0 0 0 1rem;
        transition: max-height .35s var(--ease), padding .25s;
    }
    .dropdown:not([hidden]) {
        max-height: 600px; /* large enough for any list */
        padding: .25rem 0 .5rem 1rem;
    }
    /* [hidden] attribute keeps it collapsed on first render */
    .dropdown[hidden] {
        display: block !important; /* override [hidden] so CSS transition works */
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Mobile close button */
    .mobile-nav-close {
        display: flex;
        align-items: center;
        gap: .6rem;
        position: absolute;
        top: 1rem;
        right: 1rem;
        background: none;
        border: none;
        cursor: pointer;
        font-family: var(--font-body);
        font-size: .9rem;
        font-weight: 600;
        color: var(--gray-600);
        padding: .4rem .75rem;
        border-radius: var(--radius-sm);
        transition: color .2s, background .2s;
    }
    .mobile-nav-close:hover {
        color: var(--navy);
        background: var(--gray-100);
    }
    .mobile-nav-close i { font-size: 1rem; }

    /* Hide the in-anchor chevron on mobile — the toggle button has its own */
    .nav-caret { display: none; }

    /* Show dropdown toggle button on mobile */
    .dropdown-toggle {
        display: inline-flex;
        padding: .8rem .6rem;
        color: var(--gray-600);
    }

    /* Stack: link takes full row minus the toggle button width */
    .has-dropdown {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        border-bottom: 1px solid var(--gray-100);
    }
    .has-dropdown > a {
        flex: 1;
        border-bottom: none !important; /* border is on the parent li */
        padding-right: .25rem;
    }
    .has-dropdown > .dropdown-toggle {
        border-bottom: none;
    }

    .header-actions .btn:not(.hamburger) { display: none; }

    .hero-search-inner { grid-template-columns: 1fr; }
    .hero-title { font-size: 2.5rem; }
    .hero-search { padding: 1rem; }

    .communities-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }

    .footer-bottom .container { flex-direction: column; text-align: center; }
    .mobile-hide { display: none !important; }
		
}

@media (max-width: 560px) {
    :root { --section-py: 3rem; }
    .footer-grid { grid-template-columns: 1fr; }

    .hamburger { display: flex; }

    .hero-title { font-size: 2.125rem; margin-bottom: 1.0rem; }
		
    .logo-name {
        display: block;
        font-family: var(--font-heading);
        font-size: 1.025rem;
        font-weight: 700;
        letter-spacing: .2em;
        color: var(--navy);
        line-height: 1.5;
}
    .logo-tagline {
        display: block;
        font-size: .875rem;
        font-weight: 500;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--ocean);
        line-height: 1;
}
}
@media (max-width: 640px) {
    .bar-email { display: none !important; }
}
@media (max-width: 480px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .btn-lg { padding: .8rem 1.5rem; font-size: .9rem; }

    .announcement-bar .container { gap: .5rem; padding: 0 .75rem; }
    .announcement-bar .sep:not(.mobile-hide) { display: none; }
    .announcement-bar i { margin-right: .25rem; }
}
.back-to-top {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;

    width: 56px;
    height: 56px;

    border: none;
    border-radius: 50%;

    background: var(--navy);
    color: #fff;

    font-size: 1.25rem;
    cursor: pointer;

    box-shadow: var(--shadow-lg);

    opacity: 0;
    visibility: hidden;

    transform: translateY(20px);

    transition:
        opacity .3s,
        transform .3s,
        visibility .3s;

    z-index: 999;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    transform: translateY(-3px);
}
.back-to-top:hover i {
    transform: rotate(-10deg);
}

.back-to-top i {
    transition: transform .25s ease;
}

/* =============================================================
   MAP VIEW — Split-pane Leaflet layout
   ============================================================= */

/* Full-viewport split container */
.search-map-view {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 120px); /* viewport minus sticky header (~82px) + announcement bar (~36px) */
    overflow: hidden;
}

/* Toolbar above the split pane */
.map-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .6rem 1rem;
    border-bottom: 1px solid var(--border);
    background: #fff;
    flex-shrink: 0;
    z-index: 10;
}
/* Toolbar count + pagination: hidden on mobile, shown at ≥768px */
.map-toolbar-count {
    display: none;
}
/* Use .map-toolbar parent for higher specificity over .pagination { display:flex } in listings.css */
.map-toolbar .map-toolbar-pagination {
    display: none;
}
@media (min-width: 768px) {
    .map-toolbar .map-toolbar-pagination {
        display: flex;
        align-items: center;
        gap: .125rem;
        flex-wrap: wrap;
        margin-left: auto;
    }
    .map-panel-header nav.pagination { display: none; }
}
@media (min-width: 768px) and (max-width: 899px) {
    .map-toolbar-pagination .pg-outer { display: none; }
}
@media (min-width: 1024px) {
    .map-toolbar .map-toolbar-pagination {
        display: flex;
        align-items: center;
        gap: .35rem;
        flex-wrap: wrap;
        margin-left: auto;
    }
}
@media (min-width: 1280px) {
    .map-toolbar-count {
        display: block;
        flex: 1;
        text-align: center;
        font-size: .85rem;
        color: var(--gray-600);
        white-space: nowrap;
        margin: 0;
        order: 4;
    }
    .map-toolbar .map-toolbar-pagination {
        margin-left: 3.5rem;
        order: 3;
    }
    .map-panel-header .map-panel-count { display: none; }
}
.map-result-count {
    flex: 1;
    font-size: .85rem;
    color: var(--gray-600);
}

/* The two-panel split */
.map-split-pane {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0; /* allow flex children to shrink below their natural content height */
}

/* Left: scrollable listing list — wider for 2-col card grid */
.map-listing-panel {
    width: 580px;
    min-width: 380px;
    overflow-y: auto;
    border-right: 1px solid var(--border);
    background: var(--border, #e5e7eb);
    flex-shrink: 0;
}

/* 2-column card grid inside the listing panel */
.map-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px; /* grid lines via panel background showing through */
}

/* Right: Leaflet map */
.map-panel-map {
    flex: 1;
    position: relative;
}
#leafletMap {
    width: 100%;
    height: 100%;
    isolation: isolate; /* contains all Leaflet z-indexes (panes 200-1000) so they don't bleed into root stacking context above the site-header */
}

/* Vertical listing card for the 2-col grid */
.map-listing-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: background .15s;
    cursor: pointer;
    background: #fff;
}
.map-listing-card:hover,
.map-listing-card.highlighted {
    background: var(--sand-light, #f8f5ef);
}
.map-listing-card-thumb {
    position: relative;
    flex-shrink: 0;
}
.map-listing-card-img {
    width: 100%;
    height: 175px;
    object-fit: cover;
    display: block;
}
.map-listing-card-body {
    flex: 1;
    padding: .5rem .65rem .6rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.map-listing-card-price {
    font-weight: 700;
    font-size: .9rem;
    color: var(--navy);
}
.map-listing-card-address {
    font-size: .75rem;
    color: var(--gray-800, #1f2937);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.map-listing-card-city {
    font-size: .72rem;
    color: var(--gray-500, #6b7280);
}
.map-listing-card-stats {
    font-size: .72rem;
    color: var(--gray-500, #6b7280);
    margin-top: 2px;
}

/* Map sidebar — flyout overlay (all screen sizes in map view) */
.search-sidebar.map-mode {
    position: fixed;
    top: 0;
    left: -320px;
    width: 300px;
    height: 100%;
    overflow-y: auto;
    background: #fff;
    box-shadow: 4px 0 20px rgba(0,0,0,.15);
    z-index: 1100;
    transform: translateZ(0);
    padding: 1rem 1.25rem;
    transition: left .3s ease;
}
.search-sidebar.map-mode.open {
    left: 0;
}

/* Leaflet price-bubble marker */
.price-marker-wrap {
    background: transparent !important;
    border: none !important;
}
.price-bubble {
    display: inline-block;
    position: relative;
    background: var(--navy, #1B3A5C);
    color: #fff;
    padding: 4px 9px;
    border-radius: 20px;
    font-family: var(--font-body, 'Jost', sans-serif);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.28);
    transform: translate(-50%, calc(-100% - 8px));
    transform-origin: center bottom;
    transition: transform .12s, background .12s;
    line-height: 1.3;
}
.price-bubble::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid var(--navy, #1B3A5C);
    border-bottom: 0;
}
.price-bubble.active {
    background: var(--ocean);
    transform: translate(-50%, calc(-100% - 8px)) scale(1.15);
}
.price-bubble.active::after {
    border-top-color: var(--ocean);
}

/* Leaflet cluster marker */
.cluster-marker-wrap {
    background: transparent !important;
    border: none !important;
}
.cluster-bubble {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--ocean, #2D7BA8);
    color: #fff;
    border-radius: 50%;
    font-size: .8rem;
    font-weight: 700;
    border: 2px solid rgba(255,255,255,.9);
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    cursor: pointer;
    transition: background .15s, transform .15s;
}
.cluster-bubble.active {
    background: var(--navy, #1B3A5C);
    transform: scale(1.15);
}

/* Leaflet popup override */
.price-popup .leaflet-popup-content-wrapper {
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,.18);
}
.price-popup .leaflet-popup-content {
    margin: 0;
    width: 240px !important;
}
.price-popup .leaflet-popup-tip-container { display: none; }
.map-popup-inner {
    display: block;
    text-decoration: none;
    color: inherit;
}
.map-popup-thumb {
    position: relative;
}
.map-popup-thumb .card-status {
    display: none;
}
@media (max-width: 767px) {
    .map-popup-thumb .card-status { display: block; }
}
.map-popup-img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    display: block;
}
.map-popup-body {
    padding: .6rem .75rem .75rem;
}
.map-popup-price {
    font-weight: 700;
    font-size: 1rem;
    color: var(--navy);
}
.map-popup-addr {
    font-size: .8rem;
    color: #374151;
    margin-top: 2px;
}
.map-popup-city {
    font-size: .75rem;
    color: #6b7280;
}
.map-popup-stats {
    font-size: .75rem;
    color: #6b7280;
    margin-top: 3px;
}
.map-popup-type {
    font-size: .7rem;
    color: #6b7280;
    margin-top: 1px;
}
.map-popup-cta {
    display: inline-block;
    margin-top: .5rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--ocean);
}

/* Tablet: 1-column card list, narrower panel */
@media (max-width: 1024px) {
    .map-listing-panel { width: 320px; min-width: 260px; }
    .map-card-grid { grid-template-columns: 1fr; }
}

/* Mobile: pagination bar above full-height map, listing cards hidden */
@media (max-width: 767px) {
    .search-map-view {
        height: calc(100dvh - 120px);
    }
    .map-split-pane { flex-direction: column; }
    .map-listing-panel {
        width: 100%;
        flex: 0 0 auto;
        min-width: 0;
        border-right: none;
        border-bottom: 1px solid var(--border);
        overflow: hidden;
    }
    /* Show only the count + pagination header; hide cards and bottom nav */
    .map-listing-panel > *:not(.map-panel-header) { display: none; }
    /* Compact single-row layout for the header bar on mobile */
    .map-panel-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: .35rem;
        padding: .45rem .75rem;
    }
    .map-panel-map { flex: 1; min-height: 0; }
}

/* Header row (count + top pagination) inside the map listing panel */
.map-panel-header {
    padding: 0rem 1rem;
    border-bottom: 1px solid var(--border, #e5e7eb);
    background: var(--sand-light, #f8f5ef);
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: .4rem;
}
@media (max-width: 560px) {
.map-panel-header {
    padding: 0rem 1rem;
    border-bottom: 1px solid var(--border, #e5e7eb);
    background: var(--sand-light, #f8f5ef);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: .4rem;
}
}
.map-panel-count {
    font-size: .8rem;
    font-weight: 600;
    color: var(--navy);
    letter-spacing: .02em;
}

/* Pagination inside the map listing panel */
.map-pagination {
    padding: .75rem 1rem;
    border-top: 1px solid var(--border, #e5e7eb);
    justify-content: center;
    flex-wrap: wrap;
    gap: .25rem;
}
.map-panel-header .map-pagination {
    padding: 0;
    border-top: none;
}