.hero {
    background-size: var(--hero-size, cover);
    background-position: var(--hero-position, center);
}

.hero > .wrap {
    position: relative;
    z-index: 1;
}

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

.hero-agent-card,
.hero-team-card {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 7px;
    background: rgba(10, 28, 40, 0.78);
    box-shadow: 0 24px 55px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(8px);
}

.hero-agent-card img,
.hero-agent-placeholder {
    display: grid;
    width: 100%;
    aspect-ratio: 4 / 5;
    place-items: center;
    object-fit: cover;
    background: var(--soft);
    color: var(--brand);
    font-size: calc(72px * var(--rs-text-scale, 1));
    font-weight: 850;
}

.hero-agent-card div,
.hero-team-card {
    padding: 17px 19px;
}

.hero-agent-card strong,
.hero-agent-card span,
.hero-team-card strong,
.hero-team-card > span {
    display: block;
}

.hero-agent-card strong,
.hero-team-card strong {
    font-size: calc(18px * var(--rs-text-scale, 1));
}

.hero-agent-card span,
.hero-team-card > span {
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.78);
    font-size: calc(13px * var(--rs-text-scale, 1));
}

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

.hero-team-people img,
.hero-team-people span {
    display: grid;
    width: 100%;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 5px;
    object-fit: cover;
    background: var(--soft);
    color: var(--brand);
    font-size: calc(28px * var(--rs-text-scale, 1));
    font-weight: 850;
}

.theme-classic .hero-copy {
    max-width: 760px;
    margin-inline: auto;
    padding: 42px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    text-align: center;
}

.theme-classic .hero h1 {
    font-size: calc(clamp(42px, 5.4vw, 68px) * var(--rs-heading-scale, 1));
}

.theme-contemporary .hero-copy {
    max-width: 700px;
    padding: 38px;
    border-bottom: 5px solid var(--accent);
    background: rgba(17, 45, 64, 0.78);
}

.theme-premium-brokerage .hero,
.theme-luxury-living .hero {
    min-height: 720px;
    align-items: end;
}

.theme-premium-brokerage .hero::before,
.theme-luxury-living .hero::before {
    background: linear-gradient(0deg, rgba(12, 14, 18, 0.94), rgba(12, 14, 18, 0.18));
}

.theme-premium-brokerage .hero-copy,
.theme-luxury-living .hero-copy {
    max-width: 920px;
    padding-left: 28px;
    border-left: 4px solid var(--accent);
}

.theme-premium-brokerage .hero h1,
.theme-luxury-living .hero h1,
.theme-luxury-agent .hero h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 500;
}

.theme-seo-brokerage .hero,
.theme-search-first .hero {
    min-height: 390px;
    text-align: center;
}

.theme-seo-brokerage .hero-copy,
.theme-search-first .hero-copy {
    max-width: 850px;
    margin-inline: auto;
}

.theme-seo-brokerage .idx-search-band,
.theme-search-first .idx-search-band {
    position: relative;
    z-index: 3;
    margin-top: -70px;
    padding-top: 0;
    background: transparent;
}

.theme-seo-brokerage .site-header {
    border-bottom: 4px solid var(--accent);
}

.theme-search-first .hero {
    min-height: 330px;
    align-items: start;
}

.theme-search-first .hero h1 {
    max-width: 680px;
    margin-inline: auto;
    font-size: calc(clamp(38px, 4.8vw, 60px) * var(--rs-heading-scale, 1));
}

.theme-multi-office .hero::before {
    background: linear-gradient(90deg, rgba(15, 39, 57, 0.97) 0 46%, rgba(15, 39, 57, 0.35) 46%);
}

.theme-multi-office .hero-copy {
    width: 46%;
    padding-right: 42px;
}

.theme-minimal .hero,
.theme-agent-leads .hero,
.theme-luxury-agent .hero,
.theme-agent-bio .hero,
.theme-agent-sphere .hero {
    min-height: 650px;
}

.theme-minimal .hero > .wrap,
.theme-agent-leads .hero > .wrap,
.theme-luxury-agent .hero > .wrap,
.theme-agent-bio .hero > .wrap,
.theme-agent-sphere .hero > .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(250px, 0.7fr);
    align-items: center;
    gap: 62px;
}

.theme-minimal .hero-agent-card,
.theme-agent-bio .hero-agent-card {
    background: #fff;
    color: var(--brand);
}

.theme-minimal .hero-agent-card span,
.theme-agent-bio .hero-agent-card span {
    color: #627585;
}

.theme-agent-leads .hero-copy {
    padding: 36px;
    border-left: 5px solid var(--accent);
    background: rgba(10, 32, 48, 0.8);
}

.theme-minimal .hero {
    background-image: linear-gradient(90deg, rgba(247, 249, 250, 0.98) 0 56%, rgba(247, 249, 250, 0.15) 56%), url("../template-media/neighborhood.webp");
}

.theme-minimal .hero-copy,
.theme-minimal .hero-copy .eyebrow {
    color: var(--brand);
}

.theme-minimal .hero-copy .button {
    background: var(--accent);
}

.theme-luxury-agent .hero::before {
    background: linear-gradient(90deg, rgba(13, 14, 17, 0.93), rgba(13, 14, 17, 0.38));
}

.theme-luxury-agent .hero-agent-card {
    border-color: var(--accent);
    background: #17191d;
}

.theme-agent-bio .hero::before {
    background: linear-gradient(90deg, rgba(24, 43, 56, 0.94), rgba(24, 43, 56, 0.52));
}

.theme-agent-bio .hero-agent-card img {
    aspect-ratio: 1;
}

.theme-agent-sphere .hero-copy {
    padding: 38px;
    border-radius: 7px;
    background: rgba(44, 53, 68, 0.86);
}

.theme-agent-sphere .hero-agent-card {
    transform: rotate(2deg);
    border: 8px solid #fff;
}

.theme-team .hero > .wrap,
.theme-team-recruiting .hero > .wrap,
.theme-team-area .hero > .wrap,
.theme-team-leads .hero > .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) 340px;
    align-items: center;
    gap: 65px;
}

.theme-team-recruiting .hero > .wrap {
    grid-template-columns: 340px minmax(0, 1.2fr);
}

.theme-team-recruiting .hero-team-card {
    grid-column: 1;
    grid-row: 1;
}

.theme-team-recruiting .hero-copy {
    grid-column: 2;
}

.theme-team-area .hero-team-card {
    transform: translateY(70px);
}

.theme-team-leads .hero-copy {
    padding: 34px;
    background: rgba(22, 43, 67, 0.86);
}

.theme-team .hero-team-card {
    transform: translateY(48px);
}

.theme-team-recruiting .hero::before {
    background: linear-gradient(105deg, rgba(24, 39, 59, 0.3), rgba(24, 39, 59, 0.96));
}

.theme-team-area .hero {
    border-bottom: 9px solid var(--accent);
}

.theme-team-leads .hero-team-card {
    border-radius: 0;
    box-shadow: 18px 18px 0 var(--accent);
}

.theme-area-showcase .hero,
.theme-waterfront .hero,
.theme-beachfront .hero,
.theme-golf-community .hero,
.theme-suburban .hero,
.theme-new-construction .hero {
    min-height: 680px;
    align-items: end;
}

.theme-area-showcase .hero::before,
.theme-suburban .hero::before {
    background: linear-gradient(0deg, rgba(18, 54, 50, 0.91), rgba(18, 54, 50, 0.12));
}

.theme-waterfront .hero::before,
.theme-beachfront .hero::before {
    background: linear-gradient(90deg, rgba(8, 48, 67, 0.84), rgba(8, 48, 67, 0.12));
}

.theme-waterfront .hero-copy,
.theme-beachfront .hero-copy {
    max-width: 640px;
}

.theme-area-showcase .hero-copy {
    max-width: 760px;
    margin-bottom: 38px;
}

.theme-luxury-living .hero-copy {
    max-width: 660px;
    margin-left: auto;
    border-right: 4px solid var(--accent);
    border-left: 0;
    padding-right: 28px;
    text-align: right;
}

.theme-waterfront .hero-copy {
    padding-left: 32px;
    border-left: 4px solid #fff;
}

.theme-beachfront .hero-copy {
    margin-left: auto;
    padding: 38px;
    background: rgba(12, 74, 94, 0.8);
}

.theme-golf-community .hero-copy {
    max-width: 620px;
    margin-left: auto;
    padding: 38px;
    background: rgba(25, 66, 46, 0.86);
}

.theme-suburban .hero-copy {
    max-width: 720px;
    margin-inline: auto;
    padding: 34px;
    border-radius: 7px;
    background: rgba(37, 68, 84, 0.82);
    text-align: center;
}

.theme-urban-living .hero {
    min-height: 600px;
    align-items: center;
}

.theme-urban-living .hero::before {
    background: linear-gradient(110deg, rgba(29, 34, 44, 0.97) 0 50%, rgba(29, 34, 44, 0.18) 50%);
}

.theme-urban-living .hero-copy {
    width: 50%;
}

.theme-new-construction .hero-copy {
    max-width: 720px;
    padding: 36px;
    background: rgba(24, 51, 68, 0.82);
}

.theme-new-construction .hero {
    border-top: 12px solid var(--accent);
}

.theme-new-construction .hero-copy {
    margin-left: auto;
    border-radius: 0;
}

.theme-community-landing .hero,
.theme-buyer-landing .hero,
.theme-seller-landing .hero,
.theme-featured-landing .hero,
.theme-open-house-landing .hero {
    min-height: 470px;
}

.theme-community-landing .hero-copy,
.theme-featured-landing .hero-copy {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
}

.theme-community-landing .hero-copy {
    padding: 34px;
    border: 1px solid rgba(255, 255, 255, 0.72);
}

.theme-buyer-landing .hero-copy {
    max-width: 610px;
    padding: 34px;
    background: rgba(20, 53, 82, 0.84);
}

.theme-seller-landing .hero-copy {
    max-width: 610px;
    margin-left: auto;
    padding: 34px;
    background: rgba(54, 43, 62, 0.86);
}

.theme-featured-landing .hero {
    min-height: 290px;
}

.theme-featured-landing .hero-copy {
    max-width: 960px;
}

.theme-open-house-landing .hero {
    min-height: 360px;
    text-align: center;
}

.theme-open-house-landing .hero-copy {
    max-width: 760px;
    margin-inline: auto;
}

.theme-single-property-modern .site-header nav,
.theme-single-property-luxury .site-header nav,
.theme-single-property-editorial .site-header nav,
.theme-home-valuation-landing .site-header nav {
    gap: 28px;
}

.theme-single-property-modern .hero {
    min-height: 690px;
    align-items: end;
}

.theme-single-property-modern .hero::before {
    background: linear-gradient(0deg, rgba(16, 43, 57, 0.94), rgba(16, 43, 57, 0.08) 70%);
}

.theme-single-property-modern .hero-copy {
    display: grid;
    max-width: 960px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px 48px;
}

.theme-single-property-modern .hero-copy h1,
.theme-single-property-modern .hero-copy > p:not(.eyebrow) {
    grid-column: 1;
}

.theme-single-property-modern .hero-copy .button {
    grid-column: 2;
    grid-row: 2 / 4;
}

.theme-single-property-luxury {
    background: #111419;
}

.theme-single-property-luxury .site-header {
    border-bottom: 1px solid #3a3427;
    background: #111419;
}

.theme-single-property-luxury .site-header a,
.theme-single-property-luxury .brand {
    color: #fff;
}

.theme-single-property-luxury .hero {
    min-height: 780px;
    align-items: end;
}

.theme-single-property-luxury .hero::before {
    background: linear-gradient(0deg, rgba(8, 10, 13, 0.98), rgba(8, 10, 13, 0.05) 65%);
}

.theme-single-property-luxury .hero-copy {
    max-width: 980px;
    padding-bottom: 38px;
    border-bottom: 1px solid var(--accent);
}

.theme-single-property-luxury .hero h1,
.theme-single-property-editorial .hero h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 500;
}

.theme-single-property-luxury .content-band {
    background: #f7f4ee;
}

.theme-single-property-editorial .hero {
    min-height: 620px;
}

.theme-single-property-editorial .hero::before {
    background: linear-gradient(90deg, rgba(31, 44, 57, 0.98) 0 42%, rgba(31, 44, 57, 0.08) 42%);
}

.theme-single-property-editorial .hero-copy {
    width: 40%;
}

.theme-single-property-editorial .content-band:nth-of-type(even) .wrap {
    padding-left: min(12vw, 170px);
}

.theme-home-valuation-landing .site-header {
    position: absolute;
    z-index: 5;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(20, 45, 68, 0.5);
}

.theme-home-valuation-landing .site-header a,
.theme-home-valuation-landing .brand {
    color: #fff;
}

.theme-home-valuation-landing .hero {
    min-height: 760px;
}

.theme-home-valuation-landing .hero::before {
    background: linear-gradient(90deg, rgba(17, 42, 65, 0.88), rgba(17, 42, 65, 0.18));
}

.theme-home-valuation-landing .hero-copy {
    max-width: 660px;
    padding: 42px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--brand);
}

.theme-home-valuation-landing .hero-copy .eyebrow {
    color: var(--accent);
}

.theme-home-valuation-landing .hero-copy > p:not(.eyebrow) {
    color: #385268;
}

.theme-home-valuation-landing .hero + .content-band {
    position: relative;
    z-index: 3;
    margin-top: -190px;
    background: transparent;
}

.theme-home-valuation-landing .hero + .content-band .wrap {
    max-width: 900px;
    padding: 30px;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 22px 58px rgba(20, 45, 68, 0.22);
}

.theme-commercial-investment .site-header {
    border-bottom: 1px solid #344852;
    background: #13232c;
}

.theme-commercial-investment .site-header a,
.theme-commercial-investment .brand {
    color: #fff;
}

.theme-commercial-investment .hero {
    min-height: 620px;
    align-items: center;
}

.theme-commercial-investment .hero::before {
    background: linear-gradient(90deg, rgba(12, 27, 35, 0.98) 0 52%, rgba(12, 27, 35, 0.2) 72%);
}

.theme-commercial-investment .hero-copy {
    width: 50%;
    padding-left: 28px;
    border-left: 5px solid var(--accent);
}

.theme-commercial-investment .content-band:nth-of-type(odd) {
    border-block: 1px solid #d8e0e2;
}

.theme-land-ranch .hero {
    min-height: 720px;
    align-items: end;
}

.theme-land-ranch .hero::before {
    background: linear-gradient(0deg, rgba(26, 55, 31, 0.95), rgba(26, 55, 31, 0.06) 72%);
}

.theme-land-ranch .hero-copy {
    max-width: 820px;
    padding-bottom: 42px;
}

.theme-land-ranch .hero h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 500;
}

.theme-land-ranch .idx-search-band {
    border-top: 6px solid var(--accent);
}

.theme-new-development .hero {
    min-height: 650px;
    align-items: center;
}

.theme-new-development .hero::before {
    background: linear-gradient(105deg, rgba(23, 37, 57, 0.14) 0 45%, rgba(23, 37, 57, 0.94) 45%);
}

.theme-new-development .hero-copy {
    width: 52%;
    margin-left: auto;
    padding: 40px;
    border-top: 7px solid var(--accent);
    background: rgba(29, 45, 67, 0.86);
}

.theme-new-development .content-band:nth-of-type(even) .wrap {
    padding-left: min(8vw, 110px);
}

.theme-relocation .hero {
    min-height: 560px;
    text-align: center;
}

.theme-relocation .hero::before {
    background: rgba(12, 61, 77, 0.72);
}

.theme-relocation .hero-copy {
    max-width: 900px;
    margin-inline: auto;
    padding: 38px;
    border: 1px solid rgba(255, 255, 255, 0.7);
}

.theme-relocation .idx-search-band {
    position: relative;
    z-index: 3;
    margin-top: -48px;
    background: transparent;
}

.theme-rental-property-management .hero {
    min-height: 520px;
}

.theme-rental-property-management .hero::before {
    background: linear-gradient(90deg, rgba(26, 43, 59, 0.94) 0 58%, rgba(26, 43, 59, 0.08) 58%);
}

.theme-rental-property-management .hero-copy {
    width: 54%;
    padding: 38px;
    background: rgba(27, 46, 63, 0.76);
}

.theme-rental-property-management .idx-search-band {
    border-bottom: 1px solid #d4e0e3;
}

.theme-campaign-lead .site-header nav {
    display: none;
}

.theme-campaign-lead .site-header > .wrap {
    justify-content: center;
}

.theme-campaign-lead .hero {
    min-height: 680px;
}

.theme-campaign-lead .hero::before {
    background: linear-gradient(105deg, rgba(29, 42, 75, 0.95) 0 58%, rgba(29, 42, 75, 0.18) 58%);
}

.theme-campaign-lead .hero-copy {
    max-width: 650px;
    padding: 42px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--brand);
}

.theme-campaign-lead .hero-copy .eyebrow {
    color: var(--accent);
}

.theme-campaign-lead .hero-copy > p:not(.eyebrow) {
    color: #4c5b70;
}

.theme-campaign-lead .hero + .content-band .service-grid,
.theme-campaign-lead .hero + .content-band .simple-grid {
    margin-top: -100px;
}

@media (max-width: 760px) {
    .theme-minimal .hero > .wrap,
    .theme-agent-leads .hero > .wrap,
    .theme-luxury-agent .hero > .wrap,
    .theme-agent-bio .hero > .wrap,
    .theme-agent-sphere .hero > .wrap,
    .theme-team .hero > .wrap,
    .theme-team-recruiting .hero > .wrap,
    .theme-team-area .hero > .wrap,
    .theme-team-leads .hero > .wrap {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .theme-team-recruiting .hero-copy,
    .theme-team-recruiting .hero-team-card {
        grid-column: auto;
        grid-row: auto;
    }

    .hero-agent-card,
    .hero-team-card {
        width: min(320px, 100%);
    }

    .theme-multi-office .hero-copy,
    .theme-urban-living .hero-copy,
    .theme-single-property-editorial .hero-copy {
        width: 100%;
    }

    .theme-multi-office .hero::before,
    .theme-urban-living .hero::before {
        background: rgba(15, 39, 57, 0.78);
    }

    .theme-team-area .hero-team-card {
        transform: none;
    }

    .theme-single-property-modern .hero-copy {
        display: block;
    }

    .theme-single-property-modern .hero-copy .button {
        display: inline-flex;
        margin-top: 18px;
    }

    .theme-home-valuation-landing .site-header {
        position: relative;
        background: var(--brand);
    }

    .theme-home-valuation-landing .hero + .content-band {
        margin-top: -80px;
    }

    .theme-commercial-investment .hero-copy,
    .theme-new-development .hero-copy,
    .theme-rental-property-management .hero-copy {
        width: 100%;
        margin-left: 0;
    }

    .theme-commercial-investment .hero::before,
    .theme-new-development .hero::before,
    .theme-rental-property-management .hero::before {
        background: rgba(18, 39, 52, 0.82);
    }

    .theme-relocation .idx-search-band {
        margin-top: 0;
    }
}

/* ==========================================================================
   Midnight Modern
   --------------------------------------------------------------------------
   The only dark template in the catalog. Everything else in this stylesheet
   adjusts layout on top of a light base; this one inverts the base, so it is
   written differently and the difference is worth understanding before
   editing it.

   Two layers:

   1. Token overrides on `body.theme-midnight`. Custom properties inherit, so
      restating --paper/--ink/--soft/--line here re-points every rule that
      already reads them. That covers most of the site for free.

   2. Explicit overrides for the surfaces that were written as a literal #fff
      rather than as var(--paper) -- listing cards, the search widget, filter
      panels, section cards, community cards, reviews, the compare bar. Those
      cannot be reached through a token, so each is restated. Selectors carry a
      `body.theme-midnight` prefix, which is specificity 0,2,1 against their
      0,1,0, so this block wins whichever stylesheet loads last.

   `html` needs its own rule: :root in site.css sets `background: var(--paper)`
   and resolves it there, where --paper is still white, so overriding the token
   on body alone leaves a white canvas behind the page on overscroll.
   ========================================================================== */

html:has(body.theme-midnight) {
    background: #070c17;
    color-scheme: dark;
}

body.theme-midnight {
    --paper: #070c17;
    --ink: #e8eefb;
    --muted: #94a7c5;
    --line: #1e2d49;
    --soft: #0c1422;

    --mn-card: #101a2c;
    --mn-card-2: #16223a;
    --mn-line-soft: #182742;
    /* Buttons put dark ink on the cyan rather than white. White on a bright
       cyan lands near 2:1, which is unreadable at button sizes; dark ink on
       the same cyan reads better than 10:1 and keeps the neon look. */
    --mn-on-accent: #04121c;
    --mn-glow: color-mix(in srgb, var(--accent) 42%, transparent);

    /* Scrollbars. The track sits just above the page so the bar reads as part
       of the panel it belongs to rather than a slot cut through it, and the
       thumb clears the track by enough to stay findable without competing with
       the accent for attention. */
    --mn-scroll-track: #0d1728;
    --mn-scroll-thumb: #2c3f63;
    --mn-scroll-thumb-hover: #3d5580;

    background: var(--paper);
    color: var(--ink);
}

/* -- Chrome -------------------------------------------------------------- */

body.theme-midnight .site-header {
    background: rgba(8, 14, 26, 0.86);
    border-bottom: 1px solid var(--mn-line-soft);
    backdrop-filter: blur(16px);
}

body.theme-midnight .site-header .brand,
body.theme-midnight .site-header nav a {
    color: var(--ink);
}

body.theme-midnight .site-header nav a {
    font-weight: 600;
}

body.theme-midnight .site-header nav a:hover {
    color: var(--accent);
}

body.theme-midnight .menu-toggle,
body.theme-midnight .site-header nav .nav-icon-link {
    border-color: var(--line);
    background: var(--mn-card);
    color: var(--ink);
}

/* -- Hero ---------------------------------------------------------------- */

body.theme-midnight .hero {
    min-height: 620px;
    align-items: center;
    background-color: #070c17;
}

/*
 * The base hero lays a flat 72% wash over the whole image. Here the wash is a
 * horizontal gradient instead: opaque at the left where the headline sits,
 * clearing toward the right so the photograph is actually visible. A cyan
 * radial sits on top of it for the glow.
 */
body.theme-midnight .hero::before {
    background:
        radial-gradient(880px 520px at 78% 18%, var(--mn-glow), transparent 62%),
        linear-gradient(96deg, #070c17 4%, rgba(7, 12, 23, 0.90) 38%, rgba(7, 12, 23, 0.46) 68%, rgba(7, 12, 23, 0.22) 100%);
}

body.theme-midnight .hero h1 {
    max-width: 15ch;
    font-size: calc(clamp(44px, 6.2vw, 80px) * var(--rs-heading-scale, 1));
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.035em;
}

body.theme-midnight .hero p {
    max-width: 46ch;
    color: rgba(232, 238, 251, 0.80);
    font-size: calc(19px * var(--rs-text-scale, 1));
}

body.theme-midnight .hero-copy {
    max-width: 640px;
}

/* -- The search panel ----------------------------------------------------- */

body.theme-midnight .idx-search-widget,
body.theme-midnight .hero-search-band .idx-search-widget {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(16, 26, 44, 0.88);
    color: var(--ink);
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(18px);
}

body.theme-midnight .idx-search-widget input,
body.theme-midnight .idx-search-widget select,
body.theme-midnight .idx-search-location input,
body.theme-midnight .idx-filter-group > summary,
body.theme-midnight .idx-filter-panel input,
body.theme-midnight .idx-filter-panel select,
body.theme-midnight .idx-choice-row span,
body.theme-midnight .idx-choice-list span,
body.theme-midnight .idx-direct-filter select {
    border-color: var(--line);
    border-radius: 10px;
    background: var(--mn-card-2);
    color: var(--ink);
}

body.theme-midnight .idx-search-widget input::placeholder {
    color: #7b8fae;
}

body.theme-midnight .idx-filter-panel,
body.theme-midnight .location-suggestions {
    border-color: var(--line);
    border-radius: 14px;
    background: #0e1727;
    color: var(--ink);
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.6);
}

body.theme-midnight .idx-filter-heading {
    color: var(--muted);
}

body.theme-midnight .idx-choice-row input:checked + span,
body.theme-midnight .idx-choice-list input:checked + span {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--ink);
}

body.theme-midnight .location-suggestions button {
    background: transparent;
    color: var(--ink);
}

body.theme-midnight .location-suggestions button:hover,
body.theme-midnight .location-suggestions button.is-active {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
}

body.theme-midnight .idx-reset {
    border-color: var(--line);
    background: transparent;
    color: var(--muted);
}

/* -- Buttons -------------------------------------------------------------- */

body.theme-midnight .button,
body.theme-midnight button[type="submit"],
body.theme-midnight .idx-search-location button,
body.theme-midnight .idx-search-submit {
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 62%, #1d6ff0));
    color: var(--mn-on-accent);
    font-weight: 750;
    box-shadow: 0 6px 22px color-mix(in srgb, var(--accent) 32%, transparent);
}

body.theme-midnight .button:hover,
body.theme-midnight .idx-search-location button:hover {
    filter: brightness(1.08);
}

/* -- Bands and headings ---------------------------------------------------- */

/*
 * background-COLOR, not the background shorthand.
 *
 * These only ever meant to set a colour, but the shorthand also resets
 * background-image to none -- and the hero carries section-style-light while
 * themes.css paints the photograph with `background-image: var(--hero-image)`
 * at 0,1,0. These rules are 0,2,1 and load later, so the shorthand won and
 * silently erased the hero photograph on every Midnight site. The gradient in
 * .hero::before then sat over a flat colour, which is why it looked
 * intentional rather than broken.
 *
 * The static cascade checker cannot catch this either: it compares which rule
 * paints a LIGHT background, and here the winning rule is correctly dark. The
 * damage is a longhand being reset by a shorthand, which is invisible to a
 * colour audit.
 */
body.theme-midnight .content-band.alt,
body.theme-midnight .section-style-soft {
    background-color: var(--soft);
}

body.theme-midnight .section-style-light {
    background-color: var(--paper);
}

body.theme-midnight .section-style-dark {
    background-color: #0b1322;
    color: var(--ink);
}

body.theme-midnight h1,
body.theme-midnight h2,
body.theme-midnight h3 {
    color: var(--ink);
    letter-spacing: -0.022em;
}

body.theme-midnight h2 {
    font-size: calc(36px * var(--rs-heading-scale, 1));
    font-weight: 750;
}

body.theme-midnight .prose,
body.theme-midnight .section-intro {
    color: var(--muted);
}

body.theme-midnight .eyebrow {
    color: var(--accent);
    letter-spacing: 0.1em;
}

/* -- Cards ----------------------------------------------------------------- */

body.theme-midnight .section-cards article,
body.theme-midnight .feature-property-grid article,
body.theme-midnight .resource-grid article,
body.theme-midnight .review-card,
body.theme-midnight .multi-column-block,
body.theme-midnight .community-card,
body.theme-midnight .person,
body.theme-midnight .listing-card,
body.theme-midnight .property-layout > article,
body.theme-midnight .property-layout > aside,
body.theme-midnight .idx-disclaimer,
body.theme-midnight .agent-lead-form {
    overflow: hidden;
    border-color: var(--line);
    border-radius: 14px;
    background: var(--mn-card);
    color: var(--ink);
}

body.theme-midnight .section-cards article p,
body.theme-midnight .feature-property-grid article p,
body.theme-midnight .resource-grid article p,
body.theme-midnight .review-card p,
body.theme-midnight .multi-column-block p,
body.theme-midnight .community-card p,
body.theme-midnight .person p,
body.theme-midnight .person span,
body.theme-midnight .listing-card p,
body.theme-midnight .listing-card small {
    color: var(--muted);
}

body.theme-midnight .section-cards article:hover,
body.theme-midnight .listing-card:hover,
body.theme-midnight .community-card:hover {
    border-color: color-mix(in srgb, var(--accent) 46%, transparent);
}

/* The stats row. Numbers take the accent, which is what makes this section
   read as the "128K+ / 97% / 24-7" band from the design. */
body.theme-midnight .section-cards-stats article {
    background: linear-gradient(150deg, var(--mn-card-2), var(--mn-card));
    text-align: left;
}

body.theme-midnight .section-cards-stats article h3 {
    color: var(--accent);
    font-size: calc(34px * var(--rs-heading-scale, 1));
    font-weight: 800;
    letter-spacing: -0.03em;
}

/* -- Listings --------------------------------------------------------------- */

body.theme-midnight .listing-card strong {
    color: var(--ink);
    font-size: calc(24px * var(--rs-text-scale, 1));
    font-weight: 800;
    letter-spacing: -0.02em;
}

body.theme-midnight .listing-card .listing-card-locality,
body.theme-midnight .listing-card .listing-card-date {
    color: var(--muted);
}

body.theme-midnight .listing-badge {
    border-radius: 999px;
    background: rgba(6, 12, 22, 0.82);
    color: var(--ink);
    font-size: calc(11px * var(--rs-text-scale, 1));
    letter-spacing: 0.05em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
}

body.theme-midnight .listing-badge.open-house-badge {
    background: color-mix(in srgb, var(--accent) 88%, #000);
    color: var(--mn-on-accent);
}

body.theme-midnight .listing-badge.price-reduced-badge {
    background: #b4462f;
    color: #fff;
}

body.theme-midnight .listing-no-photo {
    background: var(--mn-card-2);
    color: var(--muted);
}

body.theme-midnight .favorite-toggle,
body.theme-midnight .compare-toggle {
    border-color: var(--line);
    background: rgba(6, 12, 22, 0.72);
    color: var(--ink);
    backdrop-filter: blur(6px);
}

body.theme-midnight .compare-toggle[aria-pressed="true"],
body.theme-midnight .favorite-toggle[aria-pressed="true"] {
    background: var(--accent);
    color: var(--mn-on-accent);
}

body.theme-midnight .compare-bar,
body.theme-midnight .compare-table,
body.theme-midnight .listing-pagination a,
body.theme-midnight .listing-carousel-controls button,
body.theme-midnight .search-filters,
body.theme-midnight .idx-search-hero {
    border-color: var(--line);
    background: var(--mn-card);
    color: var(--ink);
}

body.theme-midnight .card-attribution {
    border-top-color: var(--mn-line-soft);
}

/* -- Map panel --------------------------------------------------------------- */

body.theme-midnight .map-widget {
    background: var(--soft);
}

body.theme-midnight .map-widget-preview {
    border-radius: 14px;
    background: linear-gradient(150deg, #0f1c31, #0a1322);
    box-shadow: inset 0 0 0 1px var(--line), 0 24px 60px rgba(0, 0, 0, 0.45);
}

/* -- Directory ---------------------------------------------------------------- */

body.theme-midnight .person img,
body.theme-midnight .person-placeholder,
body.theme-midnight .hero-agent-card img,
body.theme-midnight .hero-agent-placeholder,
body.theme-midnight .hero-team-people img,
body.theme-midnight .hero-team-people span {
    background: var(--mn-card-2);
    color: var(--accent);
}

body.theme-midnight .hero-agent-card,
body.theme-midnight .hero-team-card {
    border-color: var(--line);
    border-radius: 14px;
    background: rgba(16, 26, 44, 0.86);
}

/* -- Forms ---------------------------------------------------------------------- */

body.theme-midnight .lead-form input,
body.theme-midnight .lead-form textarea,
body.theme-midnight .lead-form select,
body.theme-midnight .listing-gate-fields input,
body.theme-midnight .listing-gate-fields select,
body.theme-midnight .listing-gate-fields textarea {
    border-color: var(--line);
    border-radius: 10px;
    background: var(--mn-card-2);
    color: var(--ink);
}

body.theme-midnight .lead-form input::placeholder,
body.theme-midnight .lead-form textarea::placeholder {
    color: #7b8fae;
}

body.theme-midnight .lead-form label {
    color: var(--ink);
}

body.theme-midnight :is(input, select, textarea):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* -- Notices ---------------------------------------------------------------------- */

body.theme-midnight .notice {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--ink);
}

body.theme-midnight .notice.error,
body.theme-midnight .listing-gate-error {
    background: rgba(190, 60, 45, 0.20);
    color: #ffb3a6;
}

body.theme-midnight .no-results-message {
    border-color: rgba(226, 193, 125, 0.4);
    background: rgba(226, 193, 125, 0.12);
    color: var(--ink);
}

/* -- Closing band and footer ---------------------------------------------------- */

body.theme-midnight .cta {
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--mn-line-soft);
    background:
        radial-gradient(720px 320px at 12% 0%, var(--mn-glow), transparent 60%),
        linear-gradient(120deg, #0b1424, #0a1a2c);
}

body.theme-midnight .cta h2 {
    color: var(--ink);
}

body.theme-midnight .cta p {
    color: rgba(232, 238, 251, 0.78);
}

body.theme-midnight .site-footer,
body.theme-midnight footer {
    border-top: 1px solid var(--mn-line-soft);
    background: #050a13;
    color: var(--muted);
}

body.theme-midnight .site-footer a,
body.theme-midnight footer a {
    color: var(--ink);
}

body.theme-midnight .site-footer a:hover,
body.theme-midnight footer a:hover {
    color: var(--accent);
}

/* -- FAQ and remaining surfaces -------------------------------------------------- */

body.theme-midnight .faq-list details {
    border-top-color: var(--mn-line-soft);
    background: transparent;
}

body.theme-midnight .faq-list summary {
    color: var(--ink);
}

body.theme-midnight .gallery-thumbs button,
body.theme-midnight .property-section dl div {
    background: var(--mn-card-2);
}

body.theme-midnight .review-stars {
    color: #f0b429;
}

@media (max-width: 760px) {
    body.theme-midnight .site-header nav {
        background: #0b1322;
        border-bottom-color: var(--mn-line-soft);
    }

    body.theme-midnight .hero {
        min-height: 520px;
    }

    body.theme-midnight .hero::before {
        background:
            radial-gradient(560px 340px at 70% 12%, var(--mn-glow), transparent 62%),
            linear-gradient(180deg, rgba(7, 12, 23, 0.86), rgba(7, 12, 23, 0.94));
    }

    body.theme-midnight h2 {
        font-size: calc(28px * var(--rs-heading-scale, 1));
    }
}

/* ==========================================================================
   Midnight Modern -- full surface coverage
   --------------------------------------------------------------------------
   The block above covers the pages a visitor sees first. This one closes the
   remaining 56 surfaces, found by reading every shipped stylesheet for rules
   that paint a light background and checking which of them the midnight block
   already reaches. Static analysis rather than clicking around, because a rule
   only reachable from the compare page or a saved-search panel still shows a
   white card when somebody finally gets there.

   Grouped by the page you would be on when you hit it.
   ========================================================================== */

/* -- Listing cards: the type chip ---------------------------------------- */

body.theme-midnight .listing-type-chip {
    border: 1px solid var(--line);
    background: rgba(6, 12, 22, 0.78);
    color: var(--ink);
    backdrop-filter: blur(6px);
}

/* -- The map workspace ----------------------------------------------------
   The largest single gap. The shell, its toolbar, the result rail, the cards
   in it, the filter bar, the property overlay and MapLibre's own controls are
   all light by default, so a midnight site opened the map and got a white
   sheet over a dark site. */

body.theme-midnight .property-map-shell,
body.theme-midnight .map-property-panel,
body.theme-midnight .map-property-panel > header {
    background: var(--paper);
    color: var(--ink);
}

body.theme-midnight .map-results {
    border-left-color: var(--line);
    border-top-color: var(--line);
    background: var(--soft);
}

body.theme-midnight .map-toolbar,
body.theme-midnight .map-filter-bar {
    border-bottom-color: var(--line);
    background: rgba(10, 18, 32, 0.96);
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

body.theme-midnight .map-filter-bar input,
body.theme-midnight .map-filter-bar select {
    border-color: var(--line);
    background: var(--mn-card-2);
    color: var(--ink);
}

body.theme-midnight .map-view-switcher {
    border-color: var(--line);
    background: var(--mn-card-2);
}

body.theme-midnight .map-result-card {
    border-color: var(--line);
    background: var(--mn-card);
    color: var(--ink);
}

body.theme-midnight .map-result-card:hover {
    border-color: color-mix(in srgb, var(--accent) 46%, transparent);
}

/* The map result card carries its own muted greys rather than var(--muted),
   so the token override does not reach them. */
body.theme-midnight .map-result-card b,
body.theme-midnight .map-result-card strong {
    color: var(--ink);
}

body.theme-midnight .map-result-card span,
body.theme-midnight .map-result-card small,
body.theme-midnight .map-results-range,
body.theme-midnight .map-result-type {
    color: var(--muted);
}

body.theme-midnight .map-result-type {
    border-color: var(--line);
    background: var(--mn-card-2);
}

body.theme-midnight .map-result-card img,
body.theme-midnight .map-listing-popup img,
body.theme-midnight .map-popup-photo-placeholder,
body.theme-midnight .map-card-placeholder {
    background: var(--mn-card-2);
    color: var(--muted);
}

/* The canvas colour shows for the instant before tiles paint, and around the
   edges of a partly loaded viewport. Light there flashes white on every pan. */
body.theme-midnight .property-map,
body.theme-midnight .property-location-map {
    background: #0b1524;
}

body.theme-midnight .map-empty,
body.theme-midnight .map-fallback {
    border-color: var(--line);
    background: var(--mn-card);
    color: var(--muted);
}

body.theme-midnight .map-toolbar .is-alert {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--ink);
}

body.theme-midnight.map-overlay-document,
body.theme-midnight .map-property-panel iframe {
    background: var(--paper);
}

/* MapLibre injects its own controls with hardcoded white. They are the zoom
   buttons, the basemap switcher and the attribution, and they sit directly on
   the map, so they are the most visible thing left if they are missed. */
body.theme-midnight .maplibregl-ctrl-group,
body.theme-midnight .maplibregl-ctrl-attrib,
body.theme-midnight .maplibregl-ctrl-attrib.maplibregl-compact,
body.theme-midnight .map-basemap-control {
    border: 1px solid var(--line);
    background: rgba(10, 18, 32, 0.94) !important;
    color: var(--ink);
}

body.theme-midnight .maplibregl-ctrl-group button,
body.theme-midnight .maplibregl-ctrl-attrib a,
body.theme-midnight .map-basemap-control button,
body.theme-midnight .map-basemap-control label {
    background: transparent;
    color: var(--ink);
}

body.theme-midnight .maplibregl-ctrl-group button + button {
    border-top-color: var(--line);
}

body.theme-midnight .maplibregl-ctrl-group button span {
    filter: invert(1) brightness(1.6);
}

body.theme-midnight .property-hover-popup .maplibregl-popup-content,
body.theme-midnight .maplibregl-popup-content {
    border: 1px solid var(--line);
    background: #0e1727;
    color: var(--ink);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}

body.theme-midnight .maplibregl-popup-tip {
    border-top-color: #0e1727;
    border-bottom-color: #0e1727;
}

/* -- Property detail ------------------------------------------------------ */

body.theme-midnight .property-page,
body.theme-midnight .property-page .property-detail,
body.theme-midnight .property-page .similar-listings,
body.theme-midnight .property-facts,
body.theme-midnight .property-seo-summary,
body.theme-midnight .property-gallery,
body.theme-midnight .gallery-thumbs,
body.theme-midnight .gallery-main {
    background: var(--paper);
    color: var(--ink);
}

body.theme-midnight .property-facts {
    border-color: var(--line);
    background: var(--mn-card);
}

body.theme-midnight .property-seo-summary {
    border-color: var(--line);
    background: var(--soft);
    color: var(--muted);
}

body.theme-midnight .gallery-main {
    background: #060b14;
}

body.theme-midnight .gallery-prev,
body.theme-midnight .gallery-next,
body.theme-midnight .property-action-icon {
    border-color: var(--line);
    background: rgba(6, 12, 22, 0.74);
    color: var(--ink);
    backdrop-filter: blur(6px);
}

body.theme-midnight .gallery-prev:hover,
body.theme-midnight .gallery-next:hover,
body.theme-midnight .property-action-icon:hover {
    background: color-mix(in srgb, var(--accent) 26%, rgba(6, 12, 22, 0.74));
}

/* -- Saved searches, favourites and the client account -------------------- */

body.theme-midnight .save-search-panel > summary,
body.theme-midnight .save-search-panel form,
body.theme-midnight .client-account-card,
body.theme-midnight .client-account-forms form,
body.theme-midnight .property-favorite,
body.theme-midnight .search-override-notice {
    border-color: var(--line);
    background: var(--mn-card);
    color: var(--ink);
}

body.theme-midnight .client-account-forms input,
body.theme-midnight .save-search-panel input,
body.theme-midnight .save-search-panel select {
    border-color: var(--line);
    background: var(--mn-card-2);
    color: var(--ink);
}

body.theme-midnight .client-activity-status {
    border-color: var(--line);
    background: #0e1727;
    color: var(--ink);
}

body.theme-midnight .listing-gate-close {
    border-color: var(--line);
    background: var(--mn-card-2);
    color: var(--ink);
}

/* -- Search filter controls ----------------------------------------------- */

body.theme-midnight .idx-choice-row input + span,
body.theme-midnight .idx-choice-list input + span,
body.theme-midnight .idx-dual-range,
body.theme-midnight .idx-dual-range input {
    border-color: var(--line);
    background: var(--mn-card-2);
    color: var(--ink);
}

/* The range thumb is drawn by the browser and needs its own selectors. */
body.theme-midnight .idx-dual-range input::-webkit-slider-thumb {
    border-color: var(--accent);
    background: var(--accent);
}

body.theme-midnight .idx-dual-range input::-moz-range-thumb {
    border-color: var(--accent);
    background: var(--accent);
}

/* -- Resource articles and reviews ---------------------------------------- */

body.theme-midnight .resource-article main > .content-band,
body.theme-midnight .resource-article main > .content-band:nth-child(even) {
    background: var(--paper);
}

body.theme-midnight .resource-article .faq-list details {
    background: var(--mn-card);
    box-shadow: none;
}

body.theme-midnight .resource-card-media,
body.theme-midnight .review-person > img,
body.theme-midnight .review-person > span,
body.theme-midnight .community-card-media {
    background: var(--mn-card-2);
    color: var(--accent);
}

/* -- Buttons that were still painting white text on the accent ------------
   The map toolbar builds its controls from .secondary-button, which sets a
   white label on var(--accent). At this cyan that lands near 2:1. Dark ink is
   the same fix the primary buttons already use. */

body.theme-midnight .secondary-button,
body.theme-midnight .map-icon-button {
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    border-color: var(--accent-edge, var(--line));
    color: var(--ink);
}

body.theme-midnight .secondary-button:hover,
body.theme-midnight .map-icon-button:hover {
    background: color-mix(in srgb, var(--accent) 34%, transparent);
}

body.theme-midnight .secondary-button[aria-pressed="true"],
body.theme-midnight .map-icon-button[aria-pressed="true"],
body.theme-midnight .map-view-switcher button[aria-pressed="true"] {
    background: var(--accent);
    color: var(--mn-on-accent);
}

/* ==========================================================================
   Midnight Modern -- rules that outrank the earlier overrides
   --------------------------------------------------------------------------
   The first coverage pass was checked with a tool that asked whether a
   selector's class was NAMED anywhere in the midnight block. That is the wrong
   question. CSS resolves by specificity and then source order, so a base rule
   of 0,4,1 beats a midnight override of 0,2,1 no matter how obviously the
   override "mentions" the class -- and an !important base rule beats any
   override without one.

   That is why the site still showed a white IDX disclaimer and a white results
   bar after the previous pass reported zero gaps.

   Everything below exists because a real rule genuinely wins against the
   earlier override. Each one carries the specificity or !important it needs
   and nothing more, so the reason it is written this way stays visible.
   ========================================================================== */

/* The disclaimer is 0,4,1 in property-templates.css -- deliberately high, so
   an MLS notice always clears galleries and sticky cards. Matching that
   specificity is the correct answer here, not raising it further. */
body.theme-midnight.property-page .property-detail > .wrap > .idx-disclaimer {
    border-color: var(--line);
    background: var(--mn-card);
    color: var(--muted);
}

body.theme-midnight.property-page .property-detail > .wrap > .idx-disclaimer p {
    color: var(--muted);
}

/* The map result count bar. This is the "Showing 1-25 of 500" strip. */
body.theme-midnight .map-results-range {
    border-color: var(--line);
    background: var(--mn-card-2);
    color: var(--muted);
}

/* MapLibre's basemap switcher sets background and colour !important, so the
   override has to as well. */
body.theme-midnight .map-basemap-control button {
    background: var(--mn-card-2) !important;
    color: var(--ink) !important;
}

body.theme-midnight .map-basemap-control button[aria-pressed="true"],
body.theme-midnight .map-basemap-control button.is-active {
    background: var(--accent) !important;
    color: var(--mn-on-accent) !important;
}

/* Attention states on map controls use a pale amber !important. Keep the
   meaning -- these still have to read as "look at me" -- but at a value that
   works on a dark toolbar. */
body.theme-midnight .map-icon-button.is-active,
body.theme-midnight .map-icon-button.needs-attention {
    background: color-mix(in srgb, #f0b95c 26%, transparent) !important;
    color: #f5cd85 !important;
}

body.theme-midnight .map-toolbar [data-map-status].is-alert {
    background: color-mix(in srgb, #f0b95c 22%, transparent);
    color: #f5cd85;
}

/* The saved-property state. Amber on white becomes amber on dark. */
body.theme-midnight .property-favorite[aria-pressed="true"] {
    border-color: color-mix(in srgb, #f0b95c 44%, transparent);
    background: color-mix(in srgb, #f0b95c 22%, transparent);
    color: #f5cd85;
}

/* The client account page paints its own gradient on the body element, so the
   override has to be on the same element rather than a descendant. */
body.theme-midnight.client-account-page {
    background:
        radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 34rem),
        var(--paper);
}

/* The price range slider draws its own track as a gradient, with the unfilled
   portion hardcoded light. */
body.theme-midnight .idx-dual-range::before {
    background: linear-gradient(
        to right,
        var(--mn-card-2) 0 var(--price-start),
        var(--accent) var(--price-start) var(--price-end),
        var(--mn-card-2) var(--price-end) 100%
    );
}

/* Demo-only chrome. It only renders on demo sites, but a demo site is what a
   prospect is shown, so it is worth the two rules. */
body.theme-midnight.demo-mode .hero .button {
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 62%, #1d6ff0));
    color: var(--mn-on-accent);
}

body.theme-midnight .demo-site-notice a:focus-visible {
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    color: var(--ink);
}

/*
 * NOT overridden, deliberately: everything in error-pages.css.
 *
 * realtyslate_error_page() emits a complete standalone document with
 * <body class="rs-error-document"> and no theme class, so no site theme has
 * ever applied there and adding one would style a page that is not part of
 * the template. The error page has its own design on purpose.
 */

/* ==========================================================================
   Midnight Modern -- scrollbars
   --------------------------------------------------------------------------
   Browser-default scrollbars are light. On a #070c17 page every scrolling
   container therefore gets a white track down its edge: the map property
   overlay, the thumbnail rail under the gallery, the results rail, and the
   document itself.

   The static cascade checker cannot find these, and that is not a bug in it.
   It compares rules that EXIST -- selector against selector, specificity and
   source order. A scrollbar the user agent paints because no rule was ever
   written has no selector to compare against. Missing styling is invisible to
   a tool that audits declared styling; only looking at the page finds it.

   Both syntaxes are set on purpose. `scrollbar-color` is the standard and is
   what Firefox honours; Chromium supports it from 121 but older Chromium and
   all WebKit need the ::-webkit-scrollbar pseudo-elements, and the managed
   sites cannot assume a browser floor.
   ========================================================================== */

body.theme-midnight,
body.theme-midnight *,
body.map-overlay-document.theme-midnight,
body.map-overlay-document.theme-midnight * {
    scrollbar-color: var(--mn-scroll-thumb) var(--mn-scroll-track);
    scrollbar-width: thin;
}

body.theme-midnight ::-webkit-scrollbar,
body.map-overlay-document.theme-midnight ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body.theme-midnight ::-webkit-scrollbar-track,
body.map-overlay-document.theme-midnight ::-webkit-scrollbar-track {
    background: var(--mn-scroll-track);
}

body.theme-midnight ::-webkit-scrollbar-thumb,
body.map-overlay-document.theme-midnight ::-webkit-scrollbar-thumb {
    border: 2px solid var(--mn-scroll-track);
    border-radius: 8px;
    background: var(--mn-scroll-thumb);
}

body.theme-midnight ::-webkit-scrollbar-thumb:hover,
body.map-overlay-document.theme-midnight ::-webkit-scrollbar-thumb:hover {
    background: var(--mn-scroll-thumb-hover);
}

/* Where two scrollbars meet. Left unstyled it is a light square in the corner. */
body.theme-midnight ::-webkit-scrollbar-corner,
body.map-overlay-document.theme-midnight ::-webkit-scrollbar-corner {
    background: var(--mn-scroll-track);
}

/*
 * The gallery thumbnail rail sets its own scrollbar-color in property-detail.css
 * -- accent on transparent, which was chosen against a white page. `transparent`
 * resolves to the light UA track here, which is the white strip under the
 * thumbnails. It needs the track named explicitly rather than inherited.
 */
body.theme-midnight .gallery-thumbs,
body.theme-midnight.property-page .gallery-thumbs {
    scrollbar-color: var(--mn-scroll-thumb) var(--mn-scroll-track);
}

/* The map overlay's own scroller, which is the tall white bar in the report. */
body.theme-midnight .map-property-panel,
body.theme-midnight .map-property-overlay,
body.theme-midnight .map-results {
    scrollbar-color: var(--mn-scroll-thumb) var(--mn-scroll-track);
    scrollbar-width: thin;
}

/* ==========================================================================
   Midnight Modern Agent -- the hero leads with the headshot
   --------------------------------------------------------------------------
   The company cut opens on a full-bleed photograph, which is right for a
   brokerage: the inventory is the subject. On a solo-agent site the agent is
   the subject, and every other agent template in the catalog already says so
   by putting a headshot card in the hero.

   The card itself is rendered by PageRenderer::heroFeature(), which gates on a
   hardcoded list of agent templates. midnight-agent was missing from that list,
   so no headshot was emitted at all and the agent cut silently fell through to
   the company hero. Adding it there is the actual fix; everything below is the
   layout that makes it read as a portrait rather than an afterthought.

   Scoped to .theme-midnight-agent, not .theme-midnight, so the company cut is
   untouched. Both classes are on the body -- see TemplateCatalog::bodyClasses().
   ========================================================================== */

body.theme-midnight-agent .hero > .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.72fr);
    align-items: center;
    gap: 58px;
}

/*
 * The company wash clears toward the right so the photograph shows through
 * there. On this cut the headshot now sits on the right, so the gradient is
 * evened out -- otherwise the brightest part of the backdrop lands directly
 * behind the portrait and the card loses its edges.
 */
/* The bloom was 760x520 at 30% accent, which on a 1280px hero reads as a large
   cyan circle sitting on the photograph rather than light behind the portrait.
   Smaller, weaker, and pushed further into the corner so it lifts the headshot
   without becoming an object in its own right. */
body.theme-midnight-agent .hero::before {
    background:
        radial-gradient(460px 320px at 78% 16%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
        linear-gradient(96deg, var(--paper) 6%, color-mix(in srgb, var(--paper) 88%, transparent) 46%, color-mix(in srgb, var(--paper) 74%, transparent) 100%);
}

body.theme-midnight-agent .hero-agent-card {
    border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
    border-radius: 16px;
    background: rgba(16, 26, 44, 0.9);
    /* The same cyan bloom the rest of the template uses for emphasis, so the
       portrait belongs to the design rather than sitting on top of it. */
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04),
        0 26px 70px rgba(0, 0, 0, 0.55),
        0 0 60px var(--mn-glow);
}

/* A headshot, so a portrait crop -- the 4/5 the other agent templates use.
   object-position favours the top because faces sit above centre. */
body.theme-midnight-agent .hero-agent-card img,
body.theme-midnight-agent .hero-agent-placeholder {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 50% 22%;
}

body.theme-midnight-agent .hero-agent-card > div {
    padding: 18px 20px;
    border-top: 1px solid var(--line);
}

body.theme-midnight-agent .hero-agent-card strong {
    font-size: calc(19px * var(--rs-text-scale, 1));
    letter-spacing: -0.01em;
}

body.theme-midnight-agent .hero-agent-card span {
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: calc(12px * var(--rs-text-scale, 1));
}

@media (max-width: 760px) {
    body.theme-midnight-agent .hero > .wrap {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    /* Stacked, a full-height portrait pushes the headline off the screen. */
    body.theme-midnight-agent .hero-agent-card {
        max-width: 320px;
    }
}