:root{
    --ink: #121212;
    --ink-soft: #1e1e1e;
    --cream: #f5f5f3;
    --cream-dim: #b9b8b3;
    --bronze: #cfcfcf;
    --bronze-bright: #ffffff;
    --moss: #2a2a2a;
    --line: rgba(245,245,243,0.14);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--ink);
    color:var(--cream);
    font-family:'Work Sans', sans-serif;
    font-weight:300;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Fraunces', serif;
    font-weight:500;
    letter-spacing:-0.01em;
    line-height:1.05;
  }
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
  .eyebrow{
    font-size:12px; letter-spacing:0.22em; text-transform:uppercase;
    color:var(--bronze-bright); font-weight:500; margin-bottom:16px; display:block;
  }

  /* NAV */
  #siteHeader{
    position:fixed; top:0; left:0; right:0; z-index:50;
    padding:26px 0; transition:background .3s ease, padding .3s ease, border-color .3s ease;
    border-bottom:1px solid transparent;
  }
  #siteHeader.scrolled{ background:rgba(22,20,15,0.92); backdrop-filter:blur(10px); padding:16px 0; border-color:var(--line);}
  nav{display:flex; align-items:center; justify-content:space-between;}
  .logo{font-family:'Fraunces', serif; font-size:20px; letter-spacing:0.02em;}
  .logo span{color:var(--bronze-bright); font-style:italic;}
  .logo-mark{ height:26px; width:auto; filter:invert(1) brightness(1.05); display:block; }
  .logo-mark.footer-mark{ height:30px; margin-bottom:18px; }
  .logo-group{ display:flex; align-items:center; gap:18px; }
  .logo-divider{ width:1px; height:30px; background:var(--line); flex-shrink:0; }
  .brokerage-mark{ height:22px; width:auto; display:block; opacity:0.92; }
  .brokerage-mark.footer-mark{ height:26px; opacity:0.85; }
  .footer-logo-group{ margin-bottom:18px; align-items:flex-end; }
  .footer-logo-group .logo-mark.footer-mark{ margin-bottom:0; }
  .footer-logo-group .logo-divider{ height:26px; }
  .nav-links{display:flex; gap:36px; font-size:14px; letter-spacing:0.02em;}
  .nav-links a{opacity:0.82; transition:opacity .2s;}
  .nav-links a:hover{opacity:1;}
  .nav-cta{
    border:1px solid var(--bronze); padding:10px 22px; font-size:13px;
    letter-spacing:0.05em; border-radius:2px; transition:all .25s;
  }
  .nav-cta:hover{background:var(--bronze); color:var(--ink);}
  .menu-btn{display:none;}

  /* MOBILE NAV
     .nav-panel wraps .nav-links + the "Contact Us" button so both can be
     shown together as one slide-down sheet on mobile. On desktop it needs
     to be invisible as a box — display:contents removes it from the layout
     entirely so .nav-links and .nav-cta keep behaving as direct flex
     children of <nav>, exactly as they did before this wrapper existed. */
  .nav-panel{ display:contents; }
  /* .nav-cta--panel is the duplicate "Contact Us" that lives inside the
     panel for mobile; on desktop .nav-panel's display:contents makes it a
     plain flex child of <nav> like everything else, so without this it
     shows up a second time next to the real .nav-cta. Hidden here; the
     mobile media query below turns it back on. */
  .nav-cta--panel{ display:none; }
  .mobile-menu-toggle{
    display:none; background:none; border:none; cursor:pointer; padding:8px;
    width:40px; height:40px; flex-shrink:0;
    flex-direction:column; justify-content:center; align-items:center; gap:5px;
  }
  .mobile-menu-toggle span{
    display:block; width:22px; height:2px; background:var(--cream);
    transition:transform .2s ease, opacity .2s ease;
  }
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* AREAS NAV DROPDOWN */
  .nav-dropdown{ position:relative; }
  .nav-dropdown > a{ display:inline-flex; align-items:center; gap:5px; }
  .dropdown-caret{ font-size:9px; opacity:0.6; }
  /* Invisible bridge, part of .nav-dropdown itself (not the panel), so the
     mouse stays "inside" .nav-dropdown while crossing the gap on its way
     down to the panel below the link — otherwise :hover drops the instant
     the cursor leaves the thin link and the panel fades before it's reached. */
  .nav-dropdown::after{
    content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
    width:220px; height:20px;
  }
  .dropdown-panel{
    position:absolute; top:100%; left:50%; transform:translateX(-50%);
    min-width:190px; background:rgba(22,20,15,0.97); border:1px solid var(--line);
    border-radius:6px; padding:8px; margin-top:20px;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .15s ease; z-index:60;
    box-shadow:0 12px 30px rgba(0,0,0,0.35);
  }
  .nav-dropdown:hover .dropdown-panel,
  .nav-dropdown:focus-within .dropdown-panel{
    opacity:1; visibility:visible; pointer-events:auto;
  }
  .dropdown-state{ position:relative; }
  .dropdown-state-label{
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding:10px 14px; font-size:13px; letter-spacing:0.02em; border-radius:4px;
    cursor:default; white-space:nowrap; opacity:0.9;
  }
  .dropdown-state:hover > .dropdown-state-label{ background:rgba(245,245,243,0.08); opacity:1; }
  /* Same bridge trick for the nested state -> cities flyout. */
  .dropdown-state::after{
    content:""; position:absolute; top:0; left:100%; width:16px; height:100%;
  }
  .dropdown-cities{
    position:absolute; top:0; left:100%; margin-left:16px;
    min-width:170px; background:rgba(22,20,15,0.97); border:1px solid var(--line);
    border-radius:6px; padding:8px;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .15s ease;
  }
  .dropdown-state:hover > .dropdown-cities,
  .dropdown-state:focus-within > .dropdown-cities{
    opacity:1; visibility:visible; pointer-events:auto;
  }
  .dropdown-cities a{
    display:block; padding:9px 14px; font-size:13px; border-radius:4px;
    white-space:nowrap; opacity:0.85;
  }
  .dropdown-cities a:hover{ background:rgba(245,245,243,0.08); opacity:1; }

  /* HERO */
  .hero{
    position:relative; min-height:100vh; display:flex; flex-direction:column; justify-content:flex-end;
    padding-bottom:0; overflow:hidden;
  }
  .hero-media{
    position:absolute; inset:0; z-index:0;
    background:
      linear-gradient(180deg, rgba(22,20,15,0.35) 0%, rgba(22,20,15,0.55) 55%, var(--ink) 100%),
      url('hero-photo.jpg') center/cover no-repeat;
  }
  /* Longhand on purpose: .hero-content also carries the .wrap class, which
     supplies the 32px side gutters (padding:0 32px). A shorthand
     "padding:200px 0 90px" here would override wrap's left/right padding
     with 0, pinning the hero text flush to the screen edges — most visible
     on mobile where there's no extra whitespace to hide it. */
  .hero-content{position:relative; z-index:2; padding-top:200px; padding-bottom:90px;}
  .hero h1{ font-size:clamp(42px, 7vw, 92px); max-width:820px; }
  .hero h1 em{ font-style:italic; color:var(--bronze-bright); font-weight:400; }
  .hero p.lede{ max-width:480px; margin-top:26px; font-size:17px; color:var(--cream-dim); }
  .hero-actions{display:flex; gap:16px; margin-top:40px; flex-wrap:wrap;}
  .btn{
    padding:15px 30px; font-size:13px; letter-spacing:0.06em; text-transform:uppercase;
    border-radius:2px; transition:all .25s; display:inline-block; cursor:pointer; border:1px solid transparent;
  }
  .btn-solid{background:var(--bronze-bright); color:var(--ink); font-weight:500;}
  .btn-solid:hover{background:var(--cream);}
  .btn-ghost{border-color:var(--line); color:var(--cream);}
  .btn-ghost:hover{border-color:var(--bronze-bright); color:var(--bronze-bright);}

  /* SECTION generic */
  section{padding:120px 0;}
  .section-head{ max-width:640px; margin-bottom:64px; }
  .section-head h2{ font-size:clamp(30px, 4vw, 46px); }

  /* STATS */
  .stats{ background:var(--ink-soft); }
  .stats-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:40px; }
  .stats-grid--three{ grid-template-columns:repeat(3, 1fr); max-width:760px; margin:0 auto; }
  .stat{ text-align:center; }
  .stat b{ font-family:'Fraunces', serif; font-size:clamp(34px,4vw,54px); font-weight:400; color:var(--bronze-bright); display:block;}
  .stat span{ font-size:13px; color:var(--cream-dim); letter-spacing:0.03em; }

  /* RECENT SALES */
  #recent-sales{ background:#000; }

  /* LISTINGS */
  .listing-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; }
  .card{ background:var(--ink-soft); border:1px solid var(--line); overflow:hidden; transition:transform .3s ease, border-color .3s; }
  .card:hover{ transform:translateY(-6px); border-color:var(--bronze); }
  .card-img{ height:230px; overflow:hidden; }
  .card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
  .card:hover .card-img img{ transform:scale(1.06); }
  .card-body{ padding:24px; }
  .card-price{ font-family:'Fraunces', serif; font-size:24px; color:var(--bronze-bright); margin-bottom:6px; }
  .card-addr{ font-size:15px; color:var(--cream); margin-bottom:12px; }
  .card-meta{ display:flex; gap:16px; font-size:13px; color:var(--cream-dim); border-top:1px solid var(--line); padding-top:14px; }

  /* AREAS */
  .areas{ background:var(--moss); padding:60px 0; }
  .area-state{
    font-size:13px; text-transform:uppercase; letter-spacing:0.08em;
    color:var(--cream-dim); font-weight:500; margin-bottom:16px;
  }
  .area-state--second{ margin-top:40px; }
  .area-chips{ display:flex; flex-wrap:wrap; gap:12px; }
  .chip{
    padding:12px 22px; border:1px solid rgba(244,239,228,0.25); border-radius:999px;
    font-size:14px; transition:all .2s;
  }
  .chip:hover{ background:var(--cream); color:var(--moss); border-color:var(--cream); }

  /* TESTIMONIALS */
  .testi-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
  .testi{ background:var(--ink); padding:44px; }
  .testi p{ font-size:17px; font-family:'Fraunces', serif; font-weight:300; font-style:italic; color:var(--cream); margin-bottom:22px; }
  .testi-name{ font-size:13px; color:var(--bronze-bright); letter-spacing:0.04em; }

  /* CTA */
  .cta{
    background:linear-gradient(180deg, var(--ink-soft), var(--ink));
    text-align:center;
  }
  .cta h2{ font-size:clamp(32px, 5vw, 56px); max-width:700px; margin:0 auto 24px; }
  .cta p{ color:var(--cream-dim); max-width:480px; margin:0 auto 40px; }

  /* FOOTER */
  #siteFooter{ border-top:1px solid var(--line); padding:70px 0 40px; }
  .footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px; margin-bottom:60px; }
  #siteFooter h4{ font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:var(--bronze-bright); margin-bottom:18px; font-weight:500; }
  #siteFooter p, #siteFooter a{ font-size:14px; color:var(--cream-dim); }
  #siteFooter ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }
  #siteFooter ul a:hover{ color:var(--cream); }
  .footer-bottom{ display:flex; justify-content:space-between; padding-top:30px; border-top:1px solid var(--line); font-size:12px; color:var(--cream-dim); flex-wrap:wrap; gap:12px; }

  @media (max-width: 860px){
    /* The old rule here was ".nav-links{display:none}" with nothing to
       replace it — there was no mobile menu at all below 860px, so Buy /
       Listings / Team / Areas / Testimonials were simply unreachable on a
       phone, and the logo + "Contact Us" button alone were already wider
       than a typical phone screen, causing the whole page to scroll
       sideways (confirmed live: 409px of content in a 375px viewport).
       This replaces it with a real slide-down menu opened by the
       hamburger button, and hides the header's own "Contact Us" button
       (it's duplicated inside the panel instead) so the header itself
       always fits. */
    .nav-cta{ display:none; }
    .mobile-menu-toggle{ display:flex; }
    /* #siteHeader.scrolled uses backdrop-filter, which creates a new CSS
       containing block for any position:fixed descendant. Since .nav-panel
       lives inside the header (needed so .nav-links/.nav-cta--panel behave
       as plain flex children on desktop via display:contents), that made
       the "full-screen" panel size itself against the header's own small
       box instead of the viewport once the header had .scrolled on it
       (always true on team.html/wrapper.html; true on index.html after any
       scrolling). Dropping the header's backdrop-filter while the panel is
       open removes that containing block so inset:0 sizes to the viewport
       again; the header is covered by the panel's own background anyway. */
    body.nav-open #siteHeader.scrolled{ backdrop-filter:none; }
    .nav-panel{
      display:none;
      position:fixed; inset:0; padding:100px 32px 40px;
      background:rgba(18,18,18,0.98); backdrop-filter:blur(10px);
      flex-direction:column; overflow-y:auto; z-index:45;
    }
    .nav-panel.open{ display:flex; }
    .nav-links{
      display:flex; flex-direction:column; gap:0; width:100%;
      font-size:16px; letter-spacing:normal;
    }
    .nav-links > a{ padding:16px 0; border-bottom:1px solid var(--line); width:100%; }
    .nav-dropdown{ width:100%; }
    .nav-dropdown > a{
      width:100%; padding:16px 0; border-bottom:1px solid var(--line);
      justify-content:space-between;
    }
    /* The hover "bridge" and flyout positioning below are desktop-only
       tricks for a mouse; on mobile the dropdown opens as a plain
       accordion instead (toggled by JS, since there's no hover on touch). */
    .nav-dropdown::after{ content:none; }
    .dropdown-panel{
      position:static; transform:none; width:100%; min-width:0;
      background:none; border:none; box-shadow:none; padding:0; margin:0;
      opacity:1; visibility:visible; pointer-events:none;
      max-height:0; overflow:hidden; transition:max-height .25s ease;
    }
    .nav-dropdown.open .dropdown-panel{
      max-height:1200px; pointer-events:auto; padding:4px 0 10px;
    }
    .dropdown-state{ width:100%; }
    .dropdown-state::after{ content:none; }
    .dropdown-state-label{
      padding:12px 0 12px 14px; cursor:pointer; white-space:normal;
    }
    .dropdown-cities{
      position:static; margin:0; width:100%; min-width:0;
      background:none; border:none; padding:0;
      opacity:1; visibility:visible; pointer-events:none;
      max-height:0; overflow:hidden; transition:max-height .2s ease;
    }
    .dropdown-state.open .dropdown-cities{
      max-height:600px; pointer-events:auto; padding-bottom:4px;
    }
    .dropdown-cities a{ padding:10px 0 10px 28px; }
    .nav-cta--panel{
      display:block; text-align:center; margin-top:28px; flex-shrink:0;
    }
    body.nav-open{ overflow:hidden; }

    .stats-grid{ grid-template-columns:repeat(2,1fr); row-gap:36px; }
    /* Homes closed/Total sales volume/Average client rating: on mobile this
       was one column, stacking the three stats across the whole screen
       height. Two columns with the first stat spanning both puts "Homes
       closed" on its own line up top and the other two side by side below
       it, matching the rest of the site's 2-up mobile stat grid instead of
       a single long column. */
    .stats-grid--three{ grid-template-columns:repeat(2,1fr); max-width:420px; row-gap:36px; }
    .stats-grid--three .stat:first-child{ grid-column:1 / -1; }
    .listing-grid{ grid-template-columns:1fr; }
    .testi-grid{ grid-template-columns:1fr; }
    .footer-grid{ grid-template-columns:1fr; }
    section{ padding:80px 0; }
    .hero-content{ padding-top:160px; }

    /* "View Listings" / "Get a Home Valuation" side by side instead of
       stacked: equal-width flex items with tighter padding/font so both
       fit a phone-width row; text is still free to wrap to a second line
       inside its own button rather than overflowing. */
    .hero-actions{ flex-wrap:nowrap; gap:10px; }
    .hero-actions .btn{
      flex:1 1 0; min-width:0; padding:14px 10px; font-size:11.5px;
      text-align:center; letter-spacing:0.04em;
    }
  }

/* ===== TEAM PAGE ===== */
.team-hero{ padding:180px 0 60px; }
.team-hero h1{ font-size:clamp(38px, 6vw, 64px); max-width:700px; }
.team-hero p.lede{ max-width:520px; margin-top:20px; font-size:17px; color:var(--cream-dim); }

.team-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;
  padding-bottom:120px;
}
.agent-card{
  background:var(--ink-soft); border:1px solid var(--line);
  display:flex; flex-direction:column; overflow:hidden;
}
.agent-photo{
  aspect-ratio:4/5; background:#2b2b2b;
  display:flex; align-items:center; justify-content:center;
  color:var(--cream-dim); font-size:13px; letter-spacing:0.05em; text-transform:uppercase;
  border-bottom:1px solid var(--line);
}
.agent-photo svg{ width:64px; height:64px; opacity:0.35; }
.agent-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.agent-info{ padding:22px 22px 0; }
.agent-name{ font-family:'Fraunces', serif; font-size:21px; font-weight:500; margin-bottom:4px; }
.agent-title{ font-size:13px; color:var(--bronze); letter-spacing:0.03em; margin-bottom:18px; }

.agent-contact{
  padding:20px 22px 22px; border-top:1px solid var(--line); margin-top:auto;
  font-size:14px; color:var(--cream-dim); line-height:1.7;
}
.agent-contact a{ color:var(--cream); text-decoration:underline; text-underline-offset:3px; }
.agent-contact .panel-row{ display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--line); }
.agent-contact .panel-row:last-child{ border-bottom:none; }
.agent-contact .panel-label{ color:var(--cream-dim); font-size:12px; text-transform:uppercase; letter-spacing:0.04em; }

.agent-cta{ padding-top:14px; }
.agent-bio-btn{ display:block; width:100%; text-align:center; padding:13px 20px; text-decoration:none !important; }
.agent-bio-pending{
  display:block; text-align:center; padding:13px 0; font-size:13px; color:var(--cream-dim);
  border:1px dashed var(--line); border-radius:2px;
}
.coming-soon{
  text-align:center; padding:20px 0; font-size:13px; color:var(--cream-dim);
  border:1px dashed var(--line); border-radius:2px;
}

@media (max-width: 860px){
  .team-grid{ grid-template-columns:1fr; }
}

/* ===== LEGAL / DMCA PAGE ===== */
.legal-copy{ max-width:760px; padding-bottom:120px; font-size:15px; color:var(--cream-dim); }
.legal-copy p{ margin-bottom:20px; }
.legal-copy ul{ margin:0 0 20px 22px; }
.legal-copy li{ margin-bottom:12px; }
.legal-copy a{ color:var(--cream); text-decoration:underline; text-underline-offset:3px; }
.legal-strong{ color:var(--cream); font-weight:500; margin-bottom:6px !important; }
.legal-note{ font-size:13px; padding-top:10px; border-top:1px solid var(--line); }
.footer-bottom a{ color:var(--cream-dim); text-decoration:underline; text-underline-offset:2px; }
.footer-bottom a:hover{ color:var(--cream); }

/* ===== BUY / SEARCH PAGE ===== */
.buy-hero{ padding:170px 0 40px; }
.buy-hero h1{ font-size:clamp(34px, 5vw, 54px); max-width:700px; }
.buy-hero p.lede{ max-width:520px; margin-top:16px; font-size:16px; color:var(--cream-dim); }

.demo-banner{
  background:var(--ink-soft); border:1px solid var(--line); border-left:3px solid var(--bronze-bright);
  padding:14px 20px; font-size:13px; color:var(--cream-dim); margin-bottom:32px;
}
.demo-banner b{ color:var(--cream); }

.filter-bar{
  display:grid; grid-template-columns:repeat(6, 1fr); gap:12px;
  background:var(--ink-soft); border:1px solid var(--line); padding:20px; margin-bottom:28px;
}
.filter-field{ display:flex; flex-direction:column; gap:6px; }
.filter-field label{
  font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--cream-dim);
}
.filter-field select{
  background:var(--ink); color:var(--cream); border:1px solid var(--line);
  padding:10px 10px; font-size:13px; font-family:'Work Sans', sans-serif;
  border-radius:2px; appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b9b8b3'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center; background-size:16px;
}
.filter-field select:focus{ outline:none; border-color:var(--bronze-bright); }
.filter-actions{ grid-column:1 / -1; display:flex; justify-content:flex-end; gap:12px; margin-top:4px; }

#buyMap{
  width:100%; height:520px; border:1px solid var(--line); margin-bottom:16px;
  filter:grayscale(0.5) invert(0.92) contrast(0.9);
}
.map-result-count{ font-size:13px; color:var(--cream-dim); margin-bottom:60px; }

.leaflet-popup-content-wrapper{ background:var(--ink-soft); color:var(--cream); border-radius:2px; }
.leaflet-popup-tip{ background:var(--ink-soft); }
.popup-price{ font-family:'Fraunces', serif; color:var(--bronze-bright); font-size:17px; margin-bottom:2px; }
.popup-addr{ font-size:12px; color:var(--cream-dim); margin-bottom:6px; }
.popup-meta{ font-size:12px; color:var(--cream-dim); }

@media (max-width: 860px){
  .filter-bar{ grid-template-columns:repeat(2, 1fr); }
  #buyMap{ height:380px; }
}

/* ===== IDX WIDGET WRAPPER ===== */
.idx-widget-frame{
  background:var(--ink-soft); border:1px solid var(--line);
  padding:24px; margin-bottom:80px; color:#111;
}
.idx-widget-frame, .idx-widget-frame * { color-scheme: light; }

/* IDX Broker Wrapper Page results (Map Search / Advanced Search, the "View
   all listings"/"View all recently sold" results pages, agent bio, contact)
   — isolate from the site's dark theme so IDX's own listing text (built for
   a light background) stays legible instead of rendering dark-on-dark. Note:
   intentionally does NOT use "all: revert" here — that reset broke the
   widget's own layout (tabs stacking, duplicated dropdowns) when tried
   previously. Only color-scheme is overridden; layout-affecting properties
   are left alone.
   Background: confirmed live that every one of these pages renders its real
   content (tabs, filters, map, listing cards) inside IDX's own
   .IDX-wrapper-standard child, which already paints its own near-black
   background (rgb(18,18,18), effectively identical to this site's --ink) and
   sets its own readable text colors - it fills this frame edge-to-edge with
   a uniform ~20px gap all around (confirmed by measuring both boxes' live
   rects), matching this rule's own padding exactly. So the white background
   below was never load-bearing for legibility; it only ever showed up as a
   thick white picture-frame in that gap - read by the user as a "thick
   white border" on the Buy/Listings/Recently-Sold pages. var(--ink) instead
   makes that gap disappear visually into the page, and the border/no-shadow
   treatment matches the thin line already used around the homepage's own
   Spotlight/Featured/Recently-Sold boxes (.showcase-widget-wrap) for a
   consistent look between the two. */
.idx-results-frame{
  /* overflow was "hidden" - confirmed live this clips the last line of IDX's
     own "Data services provided by IDX Broker" credit line, which sits right
     after the map/listings content: this frame's own auto-height resolves a
     touch short of its real content height (an IDX layout quirk unrelated to
     anything here), and with overflow:hidden that shortfall silently crops
     the bottom of that trailing text instead of just letting it show - read
     by the user as cut-off text below the map on the Listings/Recently Sold
     pages. "visible" was tested live and doesn't reintroduce the old
     thick-border/box-shadow issue (border-radius is 0 and the shadow is
     already gone above) and doesn't cause any new horizontal overflow -
     confirmed by measuring every descendant's rect against this frame's own
     edges before shipping.
     transform was "translate(0)" (a no-op move, presumably an old hack for
     some stacking/GPU-layer purpose) - dropped after finding, via a real
     375x812 mobile-viewport test, that it was the actual cause of a user-
     reported bug: on mobile, IDX ships its own Filter/Save/New Search/
     Modify/Show Map toolbar and its "Filter by" bottom-sheet panel as
     position:fixed, meant to stay pinned to the real screen edges while the
     results list scrolls underneath. A `transform` on any value other than
     none makes its element the *containing block* for fixed-position
     descendants (CSS spec behavior, not a bug in IDX's code) - so with
     translate(0) here, those two fixed elements were anchored to the bottom
     of this frame's own box instead of the viewport. Since the frame can be
     thousands of pixels tall (500 listings), that meant the toolbar/panel
     only appeared wherever the frame's bottom edge happened to be - stuck
     mid-page, styled in IDX's stock blue, which is what the user saw and
     reported as "buttons and filter options are at the bottom of the page
     and in blue". Removing the transform lets both resolve against the true
     viewport again - confirmed live via computed top/bottom math (both sum
     exactly to the 812px test viewport height) - and the mobile section
     below now carries the dark-theme restyle for them on top of that fix.
     isolation:isolate is unaffected (it creates a stacking context, not a
     containing block, so it doesn't capture fixed-position descendants) and
     stays for whatever z-index/paint-order purpose it originally had. */
  position:relative; isolation:isolate; overflow:visible;
  background:var(--ink); color:#1a1a1a; border:1px solid var(--line); border-radius:0;
  padding:24px; margin-bottom:20px;
}
/* The general Listings/Recently-Sold results pages give IDX's own content
   wrapper a deliberate fixed height so its listings column can scroll
   independently next to the map (see the agent-page overflow comment further
   below for the same mechanism) - and the "Data services provided by IDX
   Broker" credit line is appended as a sibling INSIDE that same fixed-height
   box, so it can never be counted in that height and always renders just
   past it, a stable ~25px shortfall confirmed live and unaffected by giving
   the page more time to settle. With overflow:visible above the credit line
   itself is no longer clipped, but the border/background still stop at the
   old (short) edge, so the line floats outside the box instead of reading as
   part of it - reported by the user as the border cutting the text in half.
   Reserving extra bottom padding sized to the credit line's own rendered
   height (consistently ~50px live - a single short line, confirmed it
   doesn't wrap even at mobile widths) lets the border properly enclose it
   instead. Scoped with :has() to pages with map results that are NOT the
   agent bio page: that page doesn't use the fixed-height trick and already
   sizes correctly on its own (confirmed live, no shortfall there), so adding
   this there would only leave dead space at the bottom. */
.idx-results-frame:has(.idx-results--map):not(:has(.idx-results__agent)){
  padding-bottom:80px;
}
@media (max-width: 860px){
  /* On mobile this frame sits inside .wrap (max-width:1180px; padding:0
     32px, unchanged at any width - confirmed live, no mobile override of
     its own), so on top of this frame's own 24px padding there's another
     32px of page gutter on each side before the map/content actually
     starts - on a ~375px phone that's 112px of combined margin eating into
     the one piece of UI (the map) that benefits most from screen space.
     Canceling .wrap's padding with a matching negative margin lets the
     frame's own border run flush to the screen edge - still visible as the
     thin line the user asked to keep, just without the extra gutter behind
     it - and trimming this frame's own padding down (matching the 10px
     already used for the homepage's own mobile listing boxes) gives the
     map itself more width inside that border. */
  .idx-results-frame{
    margin-left:-32px; margin-right:-32px;
    padding:10px;
  }
  /* Same fixed-bottom-padding reasoning as the desktop rule above, just
     resized to this breakpoint's own 10px padding convention instead of the
     desktop 24px. */
  .idx-results-frame:has(.idx-results--map):not(:has(.idx-results__agent)){
    padding-bottom:70px;
  }
}
.idx-results-frame * { color-scheme: light; }

/* Confirmed by inspecting the live DOM (an agent bio page rendered through
   this wrapper) — this single .idx-results-frame is NOT one uniform box.
   IDX injects two visually distinct regions inside it:
     1. .IDX-rosterAgentPanel — the agent bio/contact card at the top (photo,
        name, phone, email, links). Restyled dark to match the site theme.
     2. .idx-results__listings — everything below it (the "Agent Listings"
        heading, "Listing courtesy of..." captions, section chrome). This
        sits directly on IDX's own dark page background, NOT inside the
        card, so it needs light text same as #1, just via a separate rule
        since it's a structurally different region.
   Nested inside #2, IDX's own .idx-listing-card property cards are
   full-bleed photos with the price/status text already colored white by
   IDX with a built-in text-shadow for legibility on any photo — deliberately
   left alone here rather than forced, since that's already correct.
   All of this needs !important: IDX's own stylesheet (loaded after ours)
   otherwise wins ties on these exact classes. */
.idx-results-frame .idx-results__listings,
.idx-results-frame .idx-results__listings *{
  color:#f5f5f3 !important;
}
.idx-results-frame .IDX-rosterAgentPanel,
.idx-results-frame .IDX-rosterAgentPanel *{
  color:#f5f5f3 !important;
  background-color:transparent !important;
}
.idx-results-frame .IDX-rosterAgentPanel{
  background-color:#1e1e1e !important;
}
.idx-results-frame a,
.idx-results-frame .idx-results__listings a{
  color:#0d6efd !important;
  text-decoration:underline !important;
  text-underline-offset:2px !important;
}
/* Listing DETAIL page: "New Search" / "Modify Search" in the top nav and the
   "NN Photos" gallery button sit on dark/blue backgrounds, but the blanket
   link rule above painted them blue (blue-on-blue for the photos button).
   ID-based selectors out-specificity that rule. Confirmed live. */
.idx-results-frame #IDX-detailsTopNav a,
.idx-results-frame #IDX-detailsTopNav .IDX-btn,
.idx-results-frame #IDX-searchControls a,
.idx-results-frame #IDX-searchControls .IDX-btn,
.idx-results-frame #IDX-detailsMobileNewSearch{
  color:#fff !important;
}
.idx-results-frame #IDX-detailsPhotoGalleryLink,
.idx-results-frame #IDX-detailsPhotoGalleryLink *{
  color:#fff !important;
}
/* Listing DETAIL page description actions: "Show More | More Information |
   Get Directions". "Show More" is IDX's muted gray (#b9b8b3) but the other two
   links and both "|" separators (::after, colored by --idx-primary-color)
   rendered blue. Match them all to the "Show More" gray. */
.idx-results-frame #IDX-detailsDescriptionActions a,
.idx-results-frame #IDX-detailsDescriptionActions .IDX-btn{
  color:#b9b8b3 !important;
  text-decoration:none !important;
}
#IDX-main #IDX-detailsDescriptionActions > *:not(:last-child)::after{
  color:#b9b8b3 !important;
}
/* "Your Contact Information" heading: cream text on IDX's light-gray
   (#F2F3F4) header bar was unreadable. Match the dark site theme. */
.idx-results-frame .IDX-contact-form__title{
  background:transparent !important;
  color:#f5f5f3 !important;
  border:0 !important;
  font-weight:700 !important;
}
/* "Message" box on the contact / More Information form: IDX ships it at only
   2 rows tall with resizing disabled. Make it taller. */
.idx-results-frame #IDX-message{
  min-height:220px !important;
  resize:vertical !important;
}
.idx-results-frame .IDX-rosterAgentPanel a{
  color:#f5f5f3 !important;
  text-decoration:underline !important;
  text-underline-offset:2px !important;
}
.idx-results-frame a:hover{ color:#0b5ed7 !important; }

/* The bio card's own grid gives the photo/contact column 4/12 width and the
   bio text column 8/12 — fine for a long bio, but with short placeholder
   text ("TEST INFORMATION.") it leaves a huge empty gap between them,
   reading as misaligned. Let each column size to its content instead, with
   a fixed gap, so the bio text sits right next to the contact info. */
.idx-results-frame .IDX-row__equal{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:24px !important;
}
.idx-results-frame .col-md-4.IDX-bioInfo{
  flex:0 0 auto !important;
  width:auto !important;
  max-width:420px !important;
}
.idx-results-frame .col-md-8.IDX-agent-bio-wrapper{
  flex:1 1 300px !important;
  width:auto !important;
  max-width:none !important;
}

/* Photo left, all text right. NOTE: an agent bio page is served directly by
   IDX Broker at blackmanre.idxbroker.com — it is NOT rendered through
   wrapper.html (that page turned out to be unused for bios; IDX pulls in
   this stylesheet on its own hosted page instead). So this can only be a
   CSS fix — no script from wrapper.html ever runs here. Two earlier
   attempts failed: (1) a flex-row grouped via JS broke badly, with the
   ungrouped siblings each becoming their own narrow flex column; (2) a
   float on the photo looked right in isolation, but on the live page the
   agent's name ("Lacey Blackman" at 24px) was too wide to fit in the ~180px
   gap beside the float, so the browser pushed that whole line below the
   float instead of wrapping it — confirmed live via computed styles showing
   the name's line box rendering under the photo's bottom edge. A CSS grid
   avoids that failure mode entirely: each of the 5 children (photo, name,
   title, contact-info list, action-links list) gets an explicit cell, so
   there's no line-wrapping-around-a-float to fail. Column 1 is the photo,
   spanning all 4 text rows; column 2 holds the 4 text elements stacked.
   Verified live at both desktop and 420px-wide viewports before shipping.
   Also unifies the title/phone/action-link font size (IDX ships the phone
   number a size larger than the rest by default). */
.idx-results-frame .IDX-bioInfo .col-xs-12{
  display:grid !important;
  grid-template-columns:100px 1fr !important;
  column-gap:18px !important;
  row-gap:4px !important;
  align-items:start !important;
}
.idx-results-frame .IDX-bioInfo .col-xs-12 > *:nth-child(1){
  grid-column:1 !important;
  grid-row:1 / span 4 !important;
  float:none !important;
  margin:0 !important;
}
.idx-results-frame .IDX-bioInfo .col-xs-12 > *:nth-child(2){ grid-column:2 !important; grid-row:1 !important; }
.idx-results-frame .IDX-bioInfo .col-xs-12 > *:nth-child(3){ grid-column:2 !important; grid-row:2 !important; }
.idx-results-frame .IDX-bioInfo .col-xs-12 > *:nth-child(4){ grid-column:2 !important; grid-row:3 !important; }
.idx-results-frame .IDX-bioInfo .col-xs-12 > *:nth-child(5){ grid-column:2 !important; grid-row:4 !important; }
.idx-results-frame .IDX-rosterAgentImage{
  width:100px !important;
  height:150px !important;
  object-fit:cover !important;
  margin:0 !important;
}
.idx-results-frame .IDX-bioName,
.idx-results-frame .IDX-bioUserTitle,
.idx-results-frame .IDX-agentInfo-group,
.idx-results-frame .IDX-actionLinks{
  margin:0 !important;
}
.idx-results-frame .IDX-bioUserTitle,
.idx-results-frame .IDX-agentInfo-group,
.idx-results-frame .IDX-agentInfo-group a,
.idx-results-frame .IDX-actionLinks,
.idx-results-frame .IDX-actionLinks a{
  font-size:14px !important;
}

/* "New Search" / "Save Search" buttons above the listing results, and the
   "22 Listings" count heading. IDX ships these as a plain white filled box
   (Save Search) next to an outlined pill (New Search) — mismatched, and both
   use IDX's stock blue. Restyle both as the same cream-outlined pill to
   match the site's dark theme, and make the listings-count heading
   (IDX default: black text) legible against the dark background.
   NOTE: these selectors must have 2 classes (scoped under
   .idx-results-frame) to out-specificity the earlier blanket
   ".idx-results-frame a{color:#0d6efd !important}" link-color rule above —
   a single-class selector loses that specificity fight and silently stays
   blue, confirmed live before landing this. */
.idx-results-frame .IDX-top-action__group,
.idx-results-frame .IDX-top-action__group--no-refinement{
  margin:0 !important;
}
.idx-results-frame .IDX-newSearch,
.idx-results-frame [class*="save-search" i]{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:transparent !important;
  color:#f5f5f3 !important;
  border:1px solid rgba(245,245,243,0.4) !important;
  border-radius:999px !important;
  padding:8px 18px !important;
  font-size:13px !important;
  font-weight:500 !important;
  letter-spacing:.02em !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
  height:auto !important;
  width:auto !important;
  min-width:0 !important;
  box-shadow:none !important;
}
.idx-results-frame .IDX-newSearch:hover,
.idx-results-frame [class*="save-search" i]:hover{
  background:#f5f5f3 !important;
  color:#121212 !important;
}
.idx-results-frame .idx-results-total__heading{
  color:#f5f5f3 !important;
}

/* Placement: previously the New Search / Save Search buttons and the
   "Listings" count heading just stacked in DOM order — two full-width rows
   for the buttons (each right-aligned on its own line) sitting above a
   third, unrelated row for the count, with a big gap and no visual
   relationship between them. Put all three on one row instead: count on
   the left, both buttons on the right, using a 3-column grid on the results
   container (col 1 = count/header, col 2 = New Search, col 3 = Save Search).
   The container's other children (bio card, listing grid, mobile menu,
   etc.) are forced to span the full width on their own row so this only
   touches the top toolbar, not the results below it.
   IMPORTANT: wrapped in IDX's own "@media (min-width:1200.1px)" — IDX
   hides these two buttons entirely below 1200px in favor of a mobile
   filter UI (its .IDX-hide-filters--desktop class does this). An earlier,
   unscoped version of this fix forced them back on with `display` and broke
   that mobile behavior (buttons overflowed a 420px-wide screen); confirmed
   live at both 1440px and 420px before landing this version. */
@media (min-width:1200.1px){
  .idx-results-frame .idx-results.idx-results--map.idx-results--agent{
    display:grid !important;
    grid-template-columns:1fr auto auto !important;
    column-gap:12px !important;
    row-gap:0 !important;
    align-items:center !important;
    /* Leaves a bit of breathing room on the right so Save Search doesn't
       sit flush against the card's border; shifts every row (including the
       listing grid) in a few px, which is not visually noticeable. */
    padding-right:10px !important;
  }
  .idx-results-frame .idx-results.idx-results--map.idx-results--agent > *:nth-child(1){
    grid-column:2 !important;
    grid-row:1 !important;
  }
  .idx-results-frame .idx-results.idx-results--map.idx-results--agent > *:nth-child(2){
    grid-column:3 !important;
    grid-row:1 !important;
  }
  .idx-results-frame .idx-results.idx-results--map.idx-results--agent > *:nth-child(3){
    grid-column:1 / -1 !important;
  }
  .idx-results-frame .idx-results.idx-results--map.idx-results--agent > *:nth-child(4){
    /* Spans the full row (not just column 1) so its border-bottom divider
       reaches all the way to the right edge, passing behind the buttons
       rather than stopping where column 1 ends. Its own content ("23
       Listings" + a hidden "Show Map" toggle) stays left-aligned, so this
       doesn't visually collide with the buttons sitting in columns 2–3. */
    grid-column:1 / -1 !important;
    grid-row:1 !important;
    align-self:center !important;
  }
  .idx-results-frame .idx-results.idx-results--map.idx-results--agent > *:nth-child(5){
    grid-column:1 / -1 !important;
    grid-row:2 !important;
  }
  .idx-results-frame .idx-results.idx-results--map.idx-results--agent > *:nth-child(8){
    grid-column:1 / -1 !important;
    grid-row:3 !important;
  }
  .idx-results-frame .idx-results.idx-results--map.idx-results--agent > *:nth-child(9){
    grid-column:1 / -1 !important;
    grid-row:4 !important;
  }
  /* Bug: once the header (nth-child 4, just above) was made to span the
     full row so its divider line would reach the right edge, its box now
     overlaps the same row as the New Search / Save Search buttons — and
     since it comes after them in DOM order, it paints on top and silently
     swallows every click on both buttons, even though they're still
     visible underneath. Confirmed live via elementFromPoint() before this
     fix: clicking either button actually hit idx-results__header, not the
     button. Fix: the header itself ignores pointer events, but its real
     content (the "23 Listings" text, and IDX's own "Show Map" toggle)
     opts back in, so nothing else loses its click. */
  .idx-results-frame .idx-results__header{
    pointer-events:none !important;
  }
  .idx-results-frame .idx-results__header *{
    pointer-events:auto !important;
  }
  .idx-results-frame .idx-results .IDX-top-action__group,
  .idx-results-frame .idx-results .IDX-top-action__group--no-refinement{
    display:inline-flex !important;
    width:auto !important;
    margin:0 !important;
  }
}

/* Agent listing page layout: by default IDX splits this area into two
   side-by-side columns (a narrow map, then a single-column stack of listing
   cards next to it) — cramped, and the cards are tall and narrow. Reflow it
   to a full-width map on top with the listing cards in a 3-column grid
   below, at desktop widths. Scoped to the same 1200.1px breakpoint as the
   toolbar fixes above — IDX's own default (map+list side by side, or
   stacked, depending on width) still applies on tablet/mobile, confirmed
   live at 900px before landing this. */
@media (min-width:1200.1px){
  /* Scoped with :has(.idx-results__agent) — this block was originally
     unscoped (just .idx-results-frame) and was also catching the general
     "View All" listings page (idx/results/listings), which reuses the same
     .idx-results__content/.idx-map/.idx-results__listings class names for a
     DIFFERENT layout: a two-column split pane where .idx-results__listings
     scrolls independently inside a fixed-height .idx-results__content. That
     page's .idx-results__content keeps its own overflow:hidden regardless of
     what we do here, so forcing grid-template-columns:1fr on it (stacking
     map+listings) while also killing .idx-results__listings' internal
     scrollbar left the listings permanently clipped with no way to reach
     them at all — confirmed by disabling this stylesheet entirely and
     inspecting IDX's untouched default on that page.
     There's no "agent" modifier class on the results wrapper to key off of
     (checked live: .idx-results--agent doesn't actually exist anywhere), but
     only the single-agent bio page's results block contains an
     .idx-results__agent info card, so :has() is used to target only that
     page. Confirmed live: 1 match on the agent bio page, 0 matches on the
     general listings page. */
  .idx-results-frame .idx-results:has(.idx-results__agent) .idx-results__content{
    grid-template-columns:1fr !important;
  }
  .idx-results-frame .idx-results:has(.idx-results__agent) .idx-map{
    height:420px !important;
  }
  .idx-results-frame .idx-results:has(.idx-results__agent) .idx-results__category--featured,
  .idx-results-frame .idx-results:has(.idx-results__agent) .idx-results__category--soldPending{
    grid-template-columns:repeat(3, 1fr) !important;
    gap:20px !important;
  }
  /* Alignment: the listings column was ending ~31px short of the map's
     right edge. Two separate leftover styles from the old side-by-side
     layout caused it: .idx-results__listings had a permanent
     "overflow-y:scroll" (reserving a scrollbar gutter even though nothing
     scrolls independently in this stacked layout any more), and
     .idx-results__category--featured had its own 16px right margin (a
     gutter meant to sit next to that scrollbar). Both are gone now that the
     map and listings share the page's normal scroll. Confirmed live: map
     and listing-grid right edges land on the same pixel. */
  .idx-results-frame .idx-results:has(.idx-results__agent) .idx-results__listings{
    overflow-y:visible !important;
    overflow-x:visible !important;
  }
  .idx-results-frame .idx-results:has(.idx-results__agent) .idx-results__category--featured,
  .idx-results-frame .idx-results:has(.idx-results__agent) .idx-results__category--soldPending{
    margin-right:0 !important;
  }
}

/* Leaflet map's zoom (+/-) and layer-switcher (globe) controls are plain
   <a> tags, so the blanket ".idx-results-frame a{color:#0d6efd !important;
   text-decoration:underline !important}" rule above was painting them blue
   with an underline — IDX ships these as icon-only buttons (SVG background
   image, transparent text), so the underline showed as a stray blue line
   sitting across each button. Restores the icon-only look; confirmed live. */
.idx-results-frame .leaflet-control-zoom-in,
.idx-results-frame .leaflet-control-zoom-out,
.idx-results-frame .leaflet-control-layers-toggle,
.idx-results-frame .leaflet-control a{
  color:transparent !important;
  text-decoration:none !important;
}

/* "Buy" page (blackmanre.idxbroker.com/idx/map/mapsearch and its Advanced
   Search / Address / Listing ID sibling tabs) — same "IDX ships this in
   black by default" problem as the bio and contact pages, in three more
   spots:
   - #IDX-mapHeader-Search / #IDX-mapCount: the "Found X of Y" result count
     above the map search results.
   - #IDX-detailsDisclaimer: the MLS data disclaimer below the map.
   - .IDX-advanced-fields__title: the "Advanced Fields" section header on
     the Advanced Search tab.
   - .IDX-title--PL: field-group labels ("Property Type", "Must Include",
     etc.) on the Address tab — one of these ("Location") already rendered
     in the site's dimmed cream, so matched that shade for consistency
     instead of full-bright cream. */
.idx-results-frame #IDX-mapHeader-Search,
.idx-results-frame #IDX-mapCount{
  color:#f5f5f3 !important;
}
.idx-results-frame #IDX-detailsDisclaimer,
.idx-results-frame #IDX-detailsDisclaimer *{
  color:#f5f5f3 !important;
}
.idx-results-frame .IDX-advanced-fields__title{
  color:#f5f5f3 !important;
}
.idx-results-frame .IDX-title--PL{
  color:#b9b8b3 !important;
}

/* Map Search / Advanced Search / Address / Listing ID tabs above the map:
   the tab labels are plain <a class="IDX-searchNavLink"> elements, so
   they're caught by the site's blanket anchor-underline rule, leaving a
   blue-ish underline running under each tab. Strip it. */
.idx-results-frame .IDX-searchNavLink{
  text-decoration:none !important;
}

/* Disclaimer block below the map (#IDX-detailsDisclaimer): IDX floats a
   small "tree logo" caption (icon + one line of credit text,
   #IDX-detailsDisclaimerLogo) to the left of the long disclaimer
   paragraph, at a fixed content width (~450px out of ~1074px). The
   paragraph is a plain run of text, not its own element, so it wraps
   around that float for its first line or two, then drops to full width
   for the rest — a ragged, inconsistently-indented left edge.
   IDX sets this element's float with an inline "style=... !important",
   which no external stylesheet rule can override (inline !important always
   wins over a stylesheet's !important, regardless of selector). So instead
   of fighting the float directly, this widens it to the full container
   (100%, not set inline so it's ours to control) — with no room left
   beside it, the paragraph text has nowhere to wrap into and drops
   entirely below, giving the same clean stacked result without touching
   the float property itself. Confirmed live before landing this. */
.idx-results-frame #IDX-detailsDisclaimerLogo{
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  gap:0.5rem !important;
  box-sizing:border-box !important;
  margin-bottom:0.5rem !important;
}

/* "Nearby" button (#IDX-userLocation) above the map: its background is a
   medium blue (rgb(53,97,183)) but its label text (#IDX-locationText,
   "Nearby") defaults to IDX's link-blue (rgb(13,110,253)), so it's blue
   text on a blue button and hard to read. Force the text to the site's
   cream color instead. Confirmed live via getComputedStyle. Also strips
   the underline picked up from the site's blanket anchor rule and bolds
   the label to match the weight of the "MAP SEARCH" tab (font-weight:700),
   since it reads as a nav-style button, not a text link. */
.idx-results-frame #IDX-userLocation,
.idx-results-frame #IDX-userLocation *{
  color:#f5f5f3 !important;
  text-decoration:none !important;
  font-weight:700 !important;
}

/* "Virtual Tour" link on a listing card (shown in place of the usual price
   badge when a listing has one). IDX's default blue is hard to read against
   the photo it overlays; match the site's cream link color instead. Needs
   the .idx-results-frame prefix for the same specificity reason as the
   button fixes above. */
.idx-results-frame .IDX-resultsVirtualTour .IDX-psudolink,
.idx-results-frame a.IDX-psudolink{
  color:#f5f5f3 !important;
}

/* Contact page (blackmanre.idxbroker.com/idx/contact.php?agentID=…), reached
   from an agent's "Contact This Team Lead" link. IDX ships the "Contact"
   page title and the "Your Contact Information" form heading in black by
   default; same dark-background problem as the bio page, same fix. */
.idx-results-frame .IDX-contactPageTitle,
.idx-results-frame .IDX-contact-form__title{
  color:#f5f5f3 !important;
}

/* "Buy" page on mobile (blackmanre.idxbroker.com/idx/map/mapsearch and its
   Advanced Search/Address/Listing ID siblings) — two things read as rough
   on a phone, confirmed from the user's own screenshot and from reading
   IDX's own CSS (this environment can't render a true mobile viewport, so
   this is sized from IDX's actual computed rules at the breakpoint, not a
   live visual check — flagged to the user to confirm after upload):

   1. The four search-mode tabs (Map Search/Advanced Search/Address/Listing
      ID) sit in a non-wrapping flex row with a 135px min-width floor and
      18px of padding each side at the site's normal 16px tab font size.
      That adds up to ~650px of tabs - way over a ~375px phone screen - so
      the row horizontally scrolls and the last visible tab simply gets
      clipped mid-word at the viewport edge, reading as broken rather than
      "swipe for more". Shrinking the font and padding here brings the
      full set much closer to fitting without scrolling at all.
   2. The three filter dropdowns (City/Price/etc.) are IDX's Select2
      widget, not a plain <select> - the existing dark-input rule above
      only targets real form elements, so Select2's own box
      (.select2-selection) never got touched and renders as a flat white
      rectangle with square corners dropped directly onto the page's dark
      background. Rounding it to the site's standard 2px radius and
      softening the border lets it read as a deliberate part of the page
      instead of an unstyled default. */
@media (max-width: 860px){
  /* Two levels carry padding/sizing here - the .IDX-searchNavItem wrapper
     (18px padding, 135px min-width floor) and its .IDX-searchNavLink
     child (16px uppercase bold text) - both have to shrink together or
     the wrapper's own padding alone keeps the row just as wide. Values
     below are measured live (text width doesn't depend on viewport, so
     this part is verifiable without a true mobile emulator): they bring
     the full 4-tab row from ~650px to ~410px, so Map Search and Advanced
     Search - the two tabs people actually use - fit fully on even a small
     375px phone with no scrolling, leaving only Address/Listing ID
     partially tucked at the edge instead of Advanced Search itself being
     the one cut off mid-word. */
  .idx-results-frame .IDX-searchNavItem{
    min-width:0 !important;
    padding:0 !important;
    margin-right:2px !important;
  }
  .idx-results-frame .IDX-searchNavLink{
    padding:0 7px !important;
    font-size:10.5px !important;
    letter-spacing:0 !important;
  }
  .idx-results-frame .select2-selection{
    border-radius:2px !important;
    border-color:#d8d8d6 !important;
  }
  /* IDX's own mobile-only sticky toolbar (Filter / Save / New Search /
     Modify / Show Map) and its "Filter by" bottom-sheet panel, both
     position:fixed and meant to stay pinned to the real screen edges -
     confirmed live via a true mobile viewport (375x812, real touch UA),
     since neither element appears under IDX's own mobile detection at
     desktop widths. The actual mispositioning (stuck mid-page instead of
     pinned to the screen) was traced to .idx-results-frame's own
     transform:translate(0) hijacking them as a containing block - fixed by
     removing that transform above. What's left here is just IDX's own stock
     styling, which doesn't match the dark theme: a plain <section>, so it
     was silently catching this site's own blanket "section{padding:80px 0}"
     mobile rule (meant for homepage sections like Spotlight/Stats) and
     blowing up into a ~160px-tall slab; IMPORTANT - do not add height:auto
     here even though it looks like the obvious companion fix for that:
     tested live and it breaks the position:fixed;top:auto;bottom:0 math
     (the browser falls back to resolving "top" from the element's normal-
     flow static position - thousands of pixels down the page - instead of
     pinning to the viewport), undoing the transform fix above. Padding
     alone is enough to fix the height. Also ships with IDX's own blue brand
     background and blue-on-blue link text for Save/New Search/Modify
     (barely readable against the matching blue bar), and the filter panel
     is plain white. Restyled both as the site's own thin-line pill buttons
     (same treatment as the New Search/Save Search buttons above) and dark
     panel background. */
  .idx-results-frame #idx-results-mobile-control{
    padding:10px !important;
    background:var(--ink-soft) !important;
    border-top:1px solid var(--line) !important;
    box-shadow:none !important;
  }
  .idx-results-frame #idx-results-mobile-control .IDX-btn{
    background:transparent !important;
    color:#f5f5f3 !important;
    border:1px solid rgba(245,245,243,0.4) !important;
    border-radius:999px !important;
    text-decoration:none !important;
  }
  .idx-results-frame #idx-results-mobile-control .IDX-btn:hover,
  .idx-results-frame #idx-results-mobile-control .IDX-btn:active{
    background:#f5f5f3 !important;
    color:#121212 !important;
  }
  /* User-requested: of this toolbar's 5 buttons, Filter does nothing on
     this site (it has no click handler bound at all - see the IDX Broker
     bug described elsewhere, a page-load JS crash in IDX's own script that
     aborts before it reaches the line wiring up Filter's handler), and the
     user asked to drop Save and Modify too and keep only New Search and
     Show Map, sized evenly side by side. Hiding by id rather than position
     (e.g. nth-child) since the active and sold pages don't share the same
     child order/count elsewhere in this file (see the comment above the
     1200.1px header-grid fix for the same gotcha) - ids are stable across
     both pages, confirmed live. */
  .idx-results-frame #idx-results-mobile-control #idx-mobile-filters,
  .idx-results-frame #idx-results-mobile-control #idx-mobile-save-search,
  .idx-results-frame #idx-results-mobile-control #idx-mobile-modify-search{
    display:none !important;
  }
  .idx-results-frame #idx-results-mobile-control{
    gap:10px !important;
  }
  .idx-results-frame #idx-results-mobile-control .IDX-btn{
    flex:1 1 0 !important;
    text-align:center !important;
  }
  /* User-reported: the "X Listings" count + native "Show Map" toggle bar
     above the results list rendered as a near-white strip
     (background-color: var(--idx-lightest-gray), IDX's own #F2F3F4, set by
     ".IDX-wrapper-standard.IDX-category-results .idx-results__header" at
     max-width:1199px - confirmed live by fetching idxstyles.php's raw text,
     since this particular rule's compound selector didn't show up via the
     usual cssRules walk used elsewhere in this file) with black text,
     clashing hard with the dark theme around it (black-on-near-white against
     the page's near-black). Restyled to match the dark toolbar immediately
     below it: same var(--ink-soft) background, light text for the count,
     and the "Show Map" button restyled as the same bordered pill used on
     every other button on this toolbar/panel. */
  .idx-results-frame #idx-results-header{
    background-color:var(--ink-soft) !important;
  }
  .idx-results-frame #idx-results-header .idx-results__total,
  .idx-results-frame #idx-results-header .idx-results__total *{
    color:#f5f5f3 !important;
  }
  .idx-results-frame #idx-results-header #idx-results-map-toggle{
    background:transparent !important;
    color:#f5f5f3 !important;
    border:1px solid rgba(245,245,243,0.4) !important;
    border-radius:999px !important;
  }
  .idx-results-frame #idx-results-header #idx-results-map-toggle:hover,
  .idx-results-frame #idx-results-header #idx-results-map-toggle:active{
    background:#f5f5f3 !important;
    color:#121212 !important;
  }
  .idx-results-frame .idx-results__refinement{
    background:var(--ink-soft) !important;
    color:#f5f5f3 !important;
  }
  .idx-results-frame .idx-results__refinement *{
    color:#f5f5f3 !important;
  }
  .idx-results-frame .idx-results__refinement input[type="text"],
  .idx-results-frame .idx-results__refinement input[type="number"],
  .idx-results-frame .idx-results__refinement select{
    background:#121212 !important;
    border-color:rgba(245,245,243,0.4) !important;
  }
}

.quick-search-frame{ margin-bottom:32px; max-width:none; color:var(--cream); }

/* Restyle IDX Broker's Quick Search widget (confirmed real structure: form.IDX-quicksearchForm > div.IDX-qsFieldWrap > label.IDX-qsLabel + input/select.IDX-qsInput) */
.quick-search-frame .IDX-quicksearchForm{
  display:flex !important; flex-wrap:wrap; align-items:flex-end; gap:16px 18px; width:100%;
}
.quick-search-frame .IDX-qsFieldWrap{
  display:flex; flex-direction:column; flex:1 1 160px; min-width:150px;
}
.quick-search-frame .IDX-qsFieldWrap:has(.IDX-qsButtonInput){ flex:0 0 160px; }

.quick-search-frame .IDX-qsLabel{
  display:block; width:100%;
  font-size:11px; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--cream-dim) !important; font-family:'Work Sans', sans-serif;
  margin-bottom:6px; text-align:left !important;
}

.quick-search-frame .IDX-qsInput{
  width:100% !important; box-sizing:border-box;
  background:var(--ink) !important; color:var(--cream) !important;
  border:1px solid var(--line) !important; border-radius:2px;
  padding:11px 12px !important; font-size:14px; font-family:'Work Sans', sans-serif;
  appearance:none !important; -webkit-appearance:none !important; -moz-appearance:none !important;
}
.quick-search-frame .IDX-qsSelectInput{
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b9b8b3'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:right 10px center !important; background-size:16px !important;
}
.quick-search-frame .IDX-qsButtonInput{
  background:var(--bronze-bright) !important; color:var(--ink) !important;
  border:none !important; padding:12px 20px !important;
  font-size:13px; letter-spacing:0.06em; text-transform:uppercase; font-weight:500;
  border-radius:2px; cursor:pointer;
}
@media (max-width: 700px){
  .quick-search-frame .IDX-quicksearchForm{ flex-direction:column; align-items:stretch; }
  .quick-search-frame .IDX-qsFieldWrap,
  .quick-search-frame .IDX-qsFieldWrap:has(.IDX-qsButtonInput){ flex:1 1 auto; min-width:0; }
}
.showcase-widget-wrap{
  background:var(--ink); border:1px solid var(--line); padding:24px;
  /* Hard backstop: the Spotlight/Featured/Sold widgets below (IDX's
     idx-listings-carousel / idx-listings-showcase custom elements) render
     an internal row of fixed-width cards that doesn't reliably shrink to
     fit a narrow screen — confirmed live, the row stays ~940px wide (three
     300px cards) even inside a ~300px mobile box, so the card photo and
     address text visibly spill past this wrapper's border. overflow-x:hidden
     here clips that spillover at our own border regardless of what the
     widget's shadow-DOM internals do. */
  overflow-x:hidden;
}
/* The widget custom elements default to display:inline (confirmed live via
   getComputedStyle), which breaks the percentage-width fix below applied to
   their shadow-DOM internals — a percentage can't resolve sanely against an
   inline box. Forcing them to block-level, full-width elements gives their
   shadow content a proper containing block to size against. */
.showcase-widget-wrap idx-listings-carousel,
.showcase-widget-wrap idx-listings-showcase{
  display:block !important; width:100% !important; max-width:100% !important;
}
@media (max-width: 860px){
  /* Less outer padding on mobile so the listing photos can run closer to
     the box border and render larger, instead of losing width to padding
     that was sized for the desktop 3-column layout. */
  .showcase-widget-wrap{ padding:10px; }
}

/* ===== ZILLOW REVIEWS ===== */
.zillow-reviews-head{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:20px; }
.zillow-badge{
  display:flex; align-items:center; gap:8px;
  background:#0d6efd; color:#fff; padding:10px 18px; border-radius:4px;
  font-weight:600; font-size:15px; font-family:'Work Sans', sans-serif;
  transition:background .2s;
}
.zillow-badge:hover{ background:#0b5ed7; }
.zillow-mark{ width:18px; height:18px; }
.zillow-card{ position:relative; }
.zillow-stars{ color:#ffb100; font-size:16px; letter-spacing:2px; margin-bottom:14px; }
.zillow-meta{ font-size:12px; color:var(--cream-dim); margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.zillow-cta{ text-align:center; margin-top:44px; }
.google-badge{
  display:flex; align-items:center; gap:8px;
  background:#fff; color:#3c4043; padding:10px 18px; border-radius:4px;
  font-weight:600; font-size:15px; font-family:'Work Sans', sans-serif;
  border:1px solid var(--line); transition:border-color .2s, transform .2s;
}
.google-badge:hover{ border-color:var(--bronze-bright); }
.google-mark{ width:18px; height:18px; }
.google-stars{ color:#fbbc05; font-size:16px; letter-spacing:2px; margin-bottom:14px; }
@media (max-width: 860px){
  .zillow-reviews-head{ align-items:flex-start; }
}

/* ===== CONTACT MODAL ===== */
.modal-overlay{
  display:none; position:fixed; inset:0; z-index:100;
  background:rgba(10,9,7,0.75); backdrop-filter:blur(4px);
  align-items:center; justify-content:center; padding:24px;
}
.modal-overlay.open{ display:flex; }
.modal-box{
  background:var(--ink-soft); border:1px solid var(--line);
  max-width:560px; width:100%; max-height:88vh; overflow-y:auto;
  padding:40px; position:relative; border-radius:2px;
}
.modal-close{
  position:absolute; top:18px; right:18px; background:none; border:none;
  color:var(--cream-dim); font-size:28px; line-height:1; cursor:pointer; padding:4px;
}
.modal-close:hover{ color:var(--cream); }
.modal-box h3{ font-size:26px; margin-bottom:8px; }
.modal-sub{ color:var(--cream-dim); font-size:14px; margin-bottom:28px; }

.form-row{ display:flex; gap:16px; }
.form-row .form-field{ flex:1; }
.form-field{ margin-bottom:20px; }
.form-field label, fieldset.form-field legend{
  display:block; font-size:12px; text-transform:uppercase; letter-spacing:0.05em;
  color:var(--cream-dim); margin-bottom:8px;
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field textarea{
  width:100%; background:var(--ink); color:var(--cream);
  border:1px solid var(--line); border-radius:2px; padding:12px;
  font-family:'Work Sans', sans-serif; font-size:14px;
}
.form-field textarea{ resize:vertical; }
fieldset.form-field{ border:none; padding:0; margin-bottom:20px; }
.checkbox-row{ display:flex; flex-wrap:wrap; gap:16px; }
.checkbox-label{
  display:flex; align-items:center; gap:8px;
  font-size:14px; text-transform:none; letter-spacing:normal; color:var(--cream);
  cursor:pointer;
}
.checkbox-label input{ width:16px; height:16px; accent-color:var(--bronze-bright); }
.interest-error{ color:#e88; font-size:13px; margin-top:10px; }
.hidden-field{ position:absolute; left:-9999px; }
.modal-submit{ width:100%; margin-top:8px; }
.form-success{ text-align:center; font-size:16px; padding:30px 0; }

@media (max-width: 560px){
  .form-row{ flex-direction:column; gap:0; }
  .modal-box{ padding:28px 22px; }
}

/* General search-results page (blackmanre.idxbroker.com/idx/results/listings
   — reached from "Featured listings → View All"), distinct from the single
   agent's listings page above: no .idx-results__agent info card, so the
   :has() scoping elsewhere correctly leaves this page alone and these fixes
   are needed separately.

   1) Pagination (<1 2 3 … 20 >) below the results: the arrows and page
      numbers are plain <a> tags so they inherit the site's blue link color.
      The "current page" number sits in its own blue pill
      (background:rgb(53,97,183)), so with the native blue text it was
      blue-on-blue as well as blue-on-black. White works for both: readable
      against the black listing cards AND against the blue "current page"
      pill.
      First attempt at this used plain ".idx-pagination a" and silently lost
      — the pagination links sit inside .idx-results__listings, and this
      file's early blanket link rule (around line 372) targets
      ".idx-results-frame .idx-results__listings a" at specificity (0,2,1),
      which beats ".idx-pagination a" at (0,1,1) even though both are
      !important: equal !important weight falls back to specificity, not
      source order. Nesting ".idx-results__listings" into the selector here
      too matches that specificity and wins. Confirmed live via
      getComputedStyle after the fix. */
.idx-results-frame .idx-results__listings .idx-pagination a{
  color:#f5f5f3 !important;
}

/* 2) "Modify Search" (next to "New Search" above the filter row) is blue,
   underlined, and a different size/weight than "New Search" right next to
   it. The underline specifically comes from that same blanket link rule
   (".idx-results-frame a{text-decoration:underline !important}") — color
   alone (no text-decoration override) wasn't enough, which is why the first
   pass at this still showed an underline. Matched to "New Search"'s own
   native font-size/weight/letter-spacing/padding so the two read as a
   matched pair. */
.idx-results-frame .IDX-modifySearch{
  color:#f5f5f3 !important;
  border-color:rgba(245,245,243,0.4) !important;
  text-decoration:none !important;
  font-size:13px !important;
  font-weight:500 !important;
  letter-spacing:0.26px !important;
  padding:8px 18px !important;
}

/* 3) "Save Search" next to "Apply Filters": this page uses IDX's
   "IDX-btn-primary" filled-white-button variant (white background, blue
   border/text, underlined) rather than the outline variant used elsewhere
   on the site (e.g. the agent page's Save Search, which IDX already ships
   as transparent-background/cream-text and needed no fix). Overriding to
   the same transparent/cream outline style here for consistency — plain
   color alone would've left white text invisible on the white background,
   and (as with Modify Search above) the underline needs its own override
   since it comes from a separate blanket rule, not from this button's own
   class. Confirmed live. */
.idx-results-frame .idx-results-refinement__actions.IDX-btn-primary{
  color:#f5f5f3 !important;
  background-color:transparent !important;
  border-color:rgba(245,245,243,0.4) !important;
  text-decoration:none !important;
}

/* 4) Placement: "New Search" / "Modify Search" sat in their own row above
   the price/beds/baths filter form, floating with no visual relationship to
   the "500 Listings" count below the form — cramped and disconnected,
   unlike the clean single-row "[X Listings] ... [New Search] [Save Search]"
   header already used on the agent page. Reflows this page's top-level
   children into a grid so the results count and the action button(s) share
   one row, same as the agent page's header. Explicitly excludes any page
   with an .idx-results__agent block (i.e. the agent page itself), which
   already has its own matching grid layout further up this file. Scoped to
   the same 1200.1px desktop breakpoint as the rest of this file's layout
   fixes.

   IMPORTANT: this was first built keyed to nth-child position (1=buttons,
   2=filter form, 5=alert, 6=header, 9=content), copying the pattern used for
   the agent page above. That broke immediately on the "sold" results page
   (idx/results/listings?statusCategory=sold), which has a DIFFERENT child
   order and count than the "active" results page it was built against — no
   filter form, and "Save Search" is its own sibling element
   (.IDX-top-action__group--no-refinement) instead of living inside a filter
   form. With fixed nth-child positions pointing at the wrong elements, the
   real .idx-results__content (map + listings) was left out of the grid
   placement entirely and fell back to default auto-placement, which
   collapsed the map to nothing and scrambled the whole page — confirmed via
   DOM inspection of both the active and sold pages side by side. Keyed to
   stable class names instead, which works regardless of which optional
   siblings (filter form, alert banner, a second button group) are present
   or how many there are:
     - .idx-results__header (the listings count) → row 1, column 1.
     - .IDX-topAction (New Search, and Modify Search when present inside it)
       → row 1, column 2.
     - .IDX-top-action__group--no-refinement (a standalone Save Search,
       present on pages without a filter form, e.g. sold/agent) → row 1,
       column 3. Simply absent — and its track collapses to 0 width — on
       pages where Save Search instead lives inside the filter form.
     - Everything else (filter form, alert banner, hidden reset form,
       .idx-results__content, mobile menu — whatever exists) is caught by
       the trailing :not() selector and forced full-width, in normal DOM
       order, so .idx-results__content always ends up placed no matter where
       it falls in a given page's child list. Confirmed live on both the
       active and sold results pages: map renders correctly on both, and the
       agent page (excluded by :not(:has(.idx-results__agent))) is
       unaffected.

   The divider line under that row (native border-bottom on the "500
   Listings" header element) only ran under the listings-count column,
   stopping dead where the action buttons begin, since each grid item's own
   border only spans its own box. Rather than try to get separate borders
   (on differently-sized, differently-centered elements) to line up
   pixel-for-pixel, a dedicated full-width line is added via ::after on the
   grid container itself, explicitly placed to span every column of row 1
   and pinned to the row's bottom edge — matching the native border's own
   color. Confirmed live it now reaches the white card border on the right
   on both pages. */
@media (min-width:1200.1px){
  .idx-results-frame .idx-results.idx-results--map:not(:has(.idx-results__agent)){
    display:grid !important;
    grid-template-columns:1fr auto auto !important;
    align-items:center !important;
    /* IDX's own New Search/Modify Search anchors already carry a native
       margin-right:10px each (including the last one in the group), so an
       additional column-gap here would stack on top of that and make the
       gap to the next group (Save Search) twice as wide as the gap between
       New Search and Modify Search. Zeroing the gap lets that native
       margin be the only spacing, so all three buttons end up evenly
       spaced. padding-right keeps Save Search off the card's right
       border, matching the padding-right already used on the agent page's
       analogous grid rule. */
    column-gap:0px !important;
    padding-right:14px !important;
    row-gap:0 !important;
  }
  .idx-results-frame .idx-results.idx-results--map:not(:has(.idx-results__agent))::after{
    content:"";
    display:block;
    grid-column:1 / -1;
    grid-row:1;
    align-self:end;
    border-bottom:1px solid rgb(228,228,228);
  }
  .idx-results-frame .idx-results.idx-results--map:not(:has(.idx-results__agent)) > .idx-results__header{
    grid-column:1 !important;
    grid-row:1 !important;
  }
  .idx-results-frame .idx-results.idx-results--map:not(:has(.idx-results__agent)) > .IDX-topAction{
    grid-column:2 !important;
    grid-row:1 !important;
    justify-self:end !important;
  }
  .idx-results-frame .idx-results.idx-results--map:not(:has(.idx-results__agent)) > .IDX-top-action__group--no-refinement{
    grid-column:3 !important;
    grid-row:1 !important;
    justify-self:end !important;
  }
  .idx-results-frame .idx-results.idx-results--map:not(:has(.idx-results__agent)) > *:not(.idx-results__header):not(.IDX-topAction):not(.IDX-top-action__group--no-refinement){
    grid-column:1 / -1 !important;
  }
  /* User-reported: on the Listings/Recently-Sold pages, the map+results row
     sits noticeably narrower than the "500 Listings" header and filter bar
     above it, inside the same bordered card - empty dark space on both
     sides, with the map's left edge and the results cards' right edge both
     falling well short of the header/filter-bar rows' own edges (and short
     of the card's own border - confirmed live: ~40px short on the left,
     ~54px short on the right at a 1440px-wide viewport). Root cause is
     IDX's own 40px left/right padding on .idx-results__content (the actual
     map+listings grid) - an extra inset layer the header/filter-bar rows
     above don't have (they sit directly in this .idx-results-frame's own
     24px padding with nothing extra on top), which is why only the
     map/listings row reads as "pushed in" relative to the rest of the card.
     Zeroing that 40px padding lets the map and listings reach the same
     edges as the header/filter-bar rows above - confirmed live on both the
     active-listings and sold pages: .idx-results__content's edges now
     match .idx-results__header's own left edge (map flush with "500
     Listings"/"182 Listings") and sit within 1px of this card's own 24px-
     padded right edge (matching the inset already on .idx-results's own
     padding-right:14px set above, which the header's New Search/Modify
     Search/Save Search buttons use too - so both rows end up with matching
     insets instead of the map/listings row sitting noticeably narrower).
     An earlier version of this fix also zeroed out the .wrap/frame-level
     padding with negative margins, which pulled the map and listings out
     past this card's own border entirely (reported back by the user as
     looking broken, with the card border cutting across the middle of the
     map) - removed; the fix now stays inside the existing border as
     intended. Leaflet's tiles redraw correctly at the new size with no
     grey/blank gaps (IDX's own map script already re-measures its
     container on layout changes - no JS injection needed here). Scoped to
     the same 1200.1px breakpoint as the rest of this block since that's
     where IDX's own two-column map/listings layout is active; below that
     the content already collapses to a single stacked column via IDX's own
     CSS, where this fixed-px inset isn't the same kind of problem. */
  .idx-results-frame .idx-results.idx-results--map:not(:has(.idx-results__agent)) .idx-results__content{
    padding-left:0 !important;
    padding-right:0 !important;
  }
}

/* Filter dropdowns (Any Price / Any Beds / Any Baths / More Filters) on the
   general results pages: the site's global "body{line-height:1.6}" was
   inheriting all the way down into IDX's own text inputs (e.g. the Minimum
   Price / Maximum Price fields), which have a fixed height (45px) sized for
   IDX's own tighter native line-height. 1.6 line-height computes to 25.6px,
   which doesn't fit in the ~21px of content room left after the input's own
   12px top/bottom padding, so the placeholder/typed text rendered visibly
   clipped top and bottom — read by the user as the price boxes being "cut
   off". IDX's own dropdown toggle buttons set their own explicit
   line-height already (confirmed live) so they're unaffected; only the
   plain text/number inputs inside the dropdown menus needed this. Scoped to
   .idx-results-frame so it doesn't touch the rest of the site. */
.idx-results-frame input[type="text"],
.idx-results-frame input[type="number"],
.idx-results-frame input[type="email"],
.idx-results-frame input[type="tel"],
.idx-results-frame select,
.idx-results-frame textarea{
  line-height:normal !important;
}

/* Same dropdowns: the option labels (Bedrooms "Any Number"/"Studio"/"1+"
   etc., Bathrooms, and every field under "More Filters" such as "City") use
   IDX's own "#IDX-main label{color:#B9B8B3 !important}" — a pale tan-gray
   that was presumably meant for a dark background, but these dropdown
   panels render on a plain white background, so the label text came out
   low-contrast and hard to read. #IDX-main label is an ID selector, so
   this needs to match or beat (1,0,1) specificity even though it's also
   !important — confirmed matching specificity alone isn't enough since
   source order isn't guaranteed, so this adds a class qualifier
   (.idx-dropdown__menu) to safely outrank it regardless of load order.
   Confirmed live: labels in the Beds, Baths and More Filters panels all
   render dark/readable now. */
#IDX-main .idx-dropdown__menu label{
  color:#1a1a1a !important;
}

/* Same dropdowns: the custom radio/checkbox "bubble" IDX draws next to each
   option (Bedrooms, Bathrooms, etc.) uses a border color and a "selected"
   fill color that are the exact same pale gray (#E4E4E4) as each other, on
   a plain white panel. Confirmed live: the result is a near-invisible,
   washed-out smudge instead of a crisp circle — especially noticeable on
   "Any Number", which is selected by default — read by the user as a
   "distorted circle". Darkened both to the same family of gray but with
   real contrast against white; the inner 6px white ring (IDX's own
   "selected" indicator) is untouched. */
.idx-results-frame .IDX-radio-button__box{
  border-color:#b0b0b0 !important;
}
.idx-results-frame input[type="radio"]:checked + label > .IDX-radio-button__box,
.idx-results-frame input[type="checkbox"]:checked + label > .IDX-radio-button__box{
  box-shadow: inset 0 0 0 6px #fff, inset 0 0 0 30px #8a8a8a !important;
}

/* Price/Beds/Baths dropdown panels: IDX positions each panel
   "position:absolute; left:0; right:0" against its own toggle button, so
   the panel is always exactly as wide as the button that opens it — it
   never gets wider than that button on its own. The toolbar packs 5-6
   buttons into one row, so each button (and so each panel) ends up narrow
   on anything short of a very wide window. Confirmed live and from the
   user's own screenshots: at that width the Minimum/Maximum Price boxes
   run past the edge of their own panel ("cut off"), and "Any Number" wraps
   onto two lines next to its radio circle (read as the circle being
   "distorted"). Widening just the panel (not the toggle button itself, so
   the toolbar row doesn't get any wider) by overriding "right" back to
   auto and giving it its own explicit width fixes both: confirmed live at
   a 1055px-wide window that the Price panel no longer crowds its inputs
   and "Any Number" stays on one line, without the panel overflowing the
   white card's edge. Keyed off each panel's aria-labelledby, which IDX
   sets per field (idx-refinement-price / -bd / -tb) and is stable
   regardless of toggle width. "More Filters" (idx-refinement-more) wasn't
   reported as a problem and holds a city picker that's already wide
   content, so it's left alone. */
.idx-dropdown__menu[aria-labelledby="idx-refinement-price"]{
  width:320px !important;
  right:auto !important;
}
.idx-dropdown__menu[aria-labelledby="idx-refinement-bd"],
.idx-dropdown__menu[aria-labelledby="idx-refinement-tb"]{
  width:260px !important;
  right:auto !important;
}

/* ===== Listing DETAIL page, phone/tablet layout (below IDX's 1200px
   breakpoint) =====
   IDX's stock detail page is a light theme: white sticky address header,
   light-gray photo-button strip and accordion bars, a solid blue fixed
   bottom action bar, dark-gray text and blue links. On our dark site that
   gave dark-on-dark text, blue-on-blue buttons and white slabs. Everything
   below is restyled to the site's dark palette (ink #121212, ink-soft
   #1e1e1e, cream #f5f5f3, muted #b9b8b3). Desktop (>=1200px) is untouched.
   ID selectors under .idx-results-frame beat the blanket
   ".idx-results-frame a{color:#0d6efd !important}" link rule. */
@media (max-width:1199px){
  .idx-results-frame #IDX-detailsHeader{
    background:#121212 !important;
    color:#f5f5f3 !important;
  }
  /* Fixed bottom bar (Add to Favorites / Print Flyer): was solid blue */
  .idx-results-frame #IDX-detailsHeader #IDX-detailsHeaderActions{
    background:#1e1e1e !important;
    border-top:1px solid rgba(245,245,243,0.14) !important;
  }
  .idx-results-frame #IDX-detailsHeaderActions .IDX-btn,
  .idx-results-frame #IDX-detailsHeaderActions .IDX-btn *{
    color:#f5f5f3 !important;
    text-decoration:none !important;
  }
  .idx-results-frame #IDX-detailsHeaderActions .IDX-btn{
    background:transparent !important;
    border:1px solid rgba(245,245,243,0.4) !important;
  }
  /* "NN Photos" strip under the main photo */
  .idx-results-frame #IDX-detailsSlidesActions{
    background:#121212 !important;
  }
  .idx-results-frame #IDX-detailsSlidesActions .IDX-btn,
  .idx-results-frame #IDX-detailsPhotoGalleryLink,
  .idx-results-frame #IDX-detailsPhotoGalleryLink *{
    background:transparent !important;
    color:#f5f5f3 !important;
  }
  /* Agent name / email / phone, and links inside the description */
  .idx-results-frame .IDX-contact__agentName{ color:#f5f5f3 !important; }
  .idx-results-frame #IDX-main a[href^="mailto:"],
  .idx-results-frame #IDX-main a[href^="tel:"],
  .idx-results-frame .IDX-clamp__target a{
    color:#f5f5f3 !important;
  }
  .idx-results-frame #IDX-detailsMobileModifySearch{ color:#fff !important; }
  /* Accordion bars (Basic Information, Primary Features, ...) */
  .idx-results-frame #IDX-detailsMain .IDX-panel-heading{
    background:#1e1e1e !important;
    border:1px solid rgba(245,245,243,0.14) !important;
  }
  .idx-results-frame #IDX-detailsMain .IDX-panel-title,
  .idx-results-frame #IDX-detailsMain .IDX-panel-collapse-toggle,
  .idx-results-frame #IDX-detailsMain .IDX-panel-collapse-toggle *{
    color:#f5f5f3 !important;
  }
  .idx-results-frame #IDX-detailsSimilar .IDX-similar-listings-title{
    background:transparent !important;
    color:#f5f5f3 !important;
  }
  .idx-results-frame #IDX-detailsPageContainer{ color:#b9b8b3; }
}

/* Listing DETAIL page, phone/tablet: simplified bottom bar and Contact row.
   - "Print Flyer" isn't useful on a phone: hidden.
   - "New Search" (normally a row in the page body) is pinned into the fixed
     bottom bar beside "Add to Favorites", equal widths, same pill style.
   - "Contact" was a bright cream slab; now a plain dark row like "New
     Search" used to be (chevrons inverted so they show on dark). */
@media (max-width:1199px){
  .idx-results-frame #IDX-detailsContactLink{
    background:transparent !important;
    color:#f5f5f3 !important;
  }
  .idx-results-frame #IDX-detailsContactLink *{ color:#f5f5f3 !important; }
  .idx-results-frame #IDX-detailsContactLink img{ filter:invert(1) !important; }
  .idx-results-frame #IDX-detailsHeaderActions #IDX-printable{ display:none !important; }
  .idx-results-frame #IDX-detailsHeaderActions{
    height:72px !important;
    padding:12px 15px !important;
    box-sizing:border-box !important;
  }
  .idx-results-frame #IDX-detailsHeaderActions .IDX-inline-buttons{
    height:48px !important;
    margin:0 !important;
    justify-content:flex-start !important;
  }
  .idx-results-frame #IDX-detailsHeaderActions #IDX-saveProperty{
    flex:none !important;
    width:calc(50vw - 22px) !important;
    height:48px !important;
    padding:0 10px !important;
    margin:0 !important;
    justify-content:center !important;
  }
  .idx-results-frame #IDX-detailsMobileNewSearch{
    position:fixed !important;
    right:15px !important;
    bottom:12px !important;
    width:calc(50vw - 22px) !important;
    height:48px !important;
    padding:0 10px !important;
    margin:0 !important;
    justify-content:center !important;
    align-items:center !important;
    z-index:10001 !important;
    background:transparent !important;
    border:1px solid rgba(245,245,243,0.4) !important;
    border-radius:999px !important;
    color:#f5f5f3 !important;
    text-decoration:none !important;
    box-sizing:border-box !important;
  }
  .idx-results-frame #IDX-detailsMobileNewSearch img{ display:none !important; }
}
@media (max-width:1199px){
  .idx-results-frame #IDX-detailsHeaderActions #IDX-saveProperty{
    font-size:12px !important;
    letter-spacing:.06em !important;
    white-space:nowrap !important;
    gap:6px !important;
  }
  .idx-results-frame #IDX-detailsHeaderActions #IDX-saveProperty span{
    margin:0 !important;
    width:auto !important;
    font-size:12px !important;
    letter-spacing:.06em !important;
    white-space:nowrap !important;
  }
  .idx-results-frame #IDX-detailsMobileNewSearch{
    font-size:12px !important;
    letter-spacing:.06em !important;
    text-transform:uppercase !important;
    font-weight:700 !important;
  }
  .idx-results-frame #IDX-detailsMobileModifySearch img{ filter:invert(1) !important; }
}

/* Listing DETAIL page, phone/tablet: the "Contact" popup (IDX .IDX-modal)
   rendered on a transparent/white sheet with cream text (unreadable), and
   its title bar + close button sat underneath our fixed 73px site header so
   the popup couldn't be closed. Make it a dark sheet starting below the site
   header, with a dark title bar and an outlined close button. */
@media (max-width:1199px){
  .idx-results-frame .IDX-modal{
    top:73px !important;
    height:calc(100% - 73px) !important;
    background:#121212 !important;
  }
  .idx-results-frame .IDX-modal__header{
    background:#1e1e1e !important;
    border-bottom:1px solid rgba(245,245,243,0.14) !important;
  }
  .idx-results-frame .IDX-modal__title{ color:#f5f5f3 !important; }
  .idx-results-frame .IDX-modal__body{ background:#121212 !important; }
  .idx-results-frame #IDX-detailsContactModal .IDX-modal__close{
    background:transparent !important;
    border:1px solid rgba(245,245,243,0.4) !important;
    border-radius:50% !important;
    width:36px !important;
    height:36px !important;
    min-width:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  .idx-results-frame .IDX-modal__close img{ filter:invert(1) !important; margin:0 !important; }
  .idx-results-frame #IDX-detailsContactModal #IDX-detailsContactInformation{
    padding-left:40px !important;
    padding-right:40px !important;
    box-sizing:border-box !important;
  }
}

/* PHOTO GALLERY page (/idx/photogallery/...), all widths.
   - "Photo Gallery" heading was IDX's default black on our dark page.
   - "View Property" outlined button was IDX blue (blue text + blue border
     + underline); now matches the site's cream-outlined pills.
   - The "|" dividers between beds/price/status were black.
   - Each photo sat in a fixed 500px-tall white slide, so shorter photos left
     big white gaps. Slides now size to their photo with a small gap. */
.idx-results-frame #IDX-photoGalleryHeader{ color:#f5f5f3 !important; }
.idx-results-frame .IDX-PIH a.IDX-btn__outline,
.idx-results-frame .IDX-PIH a.IDX-btn__outline *{
  color:#f5f5f3 !important;
  text-decoration:none !important;
}
.idx-results-frame .IDX-PIH a.IDX-btn__outline{
  border-color:rgba(245,245,243,0.4) !important;
}
.idx-results-frame .IDX-PIH .IDX-PIH__vertical-divider{
  border-right-color:rgba(245,245,243,0.4) !important;
}
.idx-results-frame #IDX-photoGallery .IDX-showcaseSlide{
  height:auto !important;
  min-height:0 !important;
  background:transparent !important;
  margin-bottom:12px !important;
  justify-content:center !important;
}
/* Keep each photo's real aspect ratio: IDX caps the image at 500px tall
   while forcing it full-width, which stretched it on desktop. Let it size
   naturally (never wider than the column, never taller than the screen) and
   centre it. */
.idx-results-frame #IDX-photoGallery .IDX-detailsPrimaryImg{
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  max-height:85vh !important;
  object-fit:contain !important;
}

/* Photo gallery: IDX sized the gallery wider (1170px) than its card with a
   negative right margin, so photos spilled past the card border and sat
   off-centre. Constrain the gallery to the card width and centre each photo. */
.idx-results-frame #IDX-photoGallery{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
}
.idx-results-frame #IDX-photoGallery .IDX-showcaseSlides{
  margin:0 !important;
  width:100% !important;
}
.idx-results-frame #IDX-photoGallery .IDX-showcaseSlide{
  width:100% !important;
  max-width:100% !important;
}
.idx-results-frame #IDX-photoGallery .IDX-detailsPrimaryImg{
  margin:0 auto !important;
}

/* Agent bio page (/idx/agent/...), phone/tablet (IDX stacks photo/contact
   above the bio below 992px).
   - Removed the vertical divider line IDX draws to the right of the
     photo/contact block (it made no sense once the bio is stacked below).
   - IDX clips the bio to ~125px and relies on an "Expand" link, but that
     link is hidden/non-functional on this site (IDX's script doesn't wire it
     up), so readers could never see the full bio. Show the whole bio and hide
     the dead Expand control. */
@media (max-width:991px){
  .idx-results-frame .IDX-rosterAgentPanel .IDX-bioInfo{
    border-right:0 !important;
  }
  .idx-results-frame #IDX-bioDetails.IDX-bioDetails__limited{
    max-height:none !important;
    height:auto !important;
    overflow:visible !important;
  }
  .idx-results-frame #IDX-bio-collapse{ display:none !important; }
}

/* Agent bio page, phone/tablet: centre the divider between the
   photo/contact block and the bio (IDX's columns were two different widths so
   the line sat left of centre), align bio text with the photo, and show the
   agent's cell phone — IDX hides it on small screens via the
   ".IDX-agentInfo__collapse" class even though desktop shows it. */
@media (max-width:991px){
  .idx-results-frame .IDX-rosterAgentPanel .IDX-bioPanelBody .IDX-row__equal{
    flex-wrap:wrap !important;
  }
  .idx-results-frame .IDX-rosterAgentPanel .IDX-bioInfo,
  .idx-results-frame .IDX-rosterAgentPanel .IDX-agent-bio-wrapper{
    flex:0 0 100% !important;
    max-width:100% !important;
    width:100% !important;
    box-sizing:border-box !important;
  }
  .idx-results-frame .IDX-rosterAgentPanel .IDX-agent-bio-wrapper{
    padding-left:15px !important;
    padding-right:15px !important;
  }
  .idx-results-frame .IDX-rosterAgentPanel .IDX-agent-bio-inner{
    margin-left:0 !important;
    margin-right:0 !important;
  }
  .idx-results-frame .IDX-rosterAgentPanel #IDX-bioDetails{
    padding-left:0 !important;
    padding-right:0 !important;
  }
  .idx-results-frame .IDX-rosterAgentPanel .IDX-agentInfo.IDX-agentInfo__collapse{
    display:list-item !important;
  }
}

/* Agent bio page, phone/tablet: tighten vertical spacing. IDX spread the
   photo block and bio apart with ~24px of extra flex spacing (top, between,
   and bottom). Pin them to the top, give equal 16px gaps above and below the
   divider line, and ~20px padding at the top and bottom of the card. */
@media (max-width:991px){
  .idx-results-frame .IDX-rosterAgentPanel .IDX-bioPanelBody{
    padding-top:20px !important;
    padding-bottom:20px !important;
  }
  .idx-results-frame .IDX-rosterAgentPanel .IDX-bioPanelBody .IDX-row__equal{
    align-content:flex-start !important;
    row-gap:0 !important;
    gap:0 !important;
  }
  .idx-results-frame .IDX-rosterAgentPanel .IDX-agent-bio-inner{
    margin-top:16px !important;
  }
  .idx-results-frame .IDX-rosterAgentPanel #IDX-bioDetails p:last-child{
    margin-bottom:0 !important;
  }
}

/* Agent page, phone: IDX leaves a 45px margin under the content box on top
   of the frame's own padding, which showed as a big empty strip below
   "Data services provided by IDX Broker". Remove it. */
@media (max-width:860px){
  .idx-results-frame #IDX-main.IDX-page-agent{ margin-bottom:0 !important; }
}

/* Listing DETAIL page, phone/tablet: the "< Back to Results >" bar at the very
   top (previous / next listing arrows) was IDX's light gray (#F2F3F4) with
   white text, so the words were invisible. Dark bar, cream text, and the
   arrow icons inverted so they show on dark. */
@media (max-width:1199px){
  .idx-results-frame #IDX-detailsTopNav{
    background:#1e1e1e !important;
    border:1px solid rgba(245,245,243,0.14) !important;
  }
  .idx-results-frame #IDX-detailsTopNav a{
    color:#f5f5f3 !important;
    text-decoration:none !important;
  }
  .idx-results-frame #IDX-detailsTopNav img{ filter:invert(1) !important; }
}

/* Agent page: IDX puts a space inside the phone-number link
   (<a> (509) 550-2245 </a>), so the underline started one space too early and
   ran one space too long. Making the link inline-block collapses that edge
   whitespace so the underline hugs the number. */
.idx-results-frame .IDX-rosterAgentPanel .IDX-agentInfo a{
  display:inline-block !important;
}