/* homepage: the search floats over the ocean in a dark glass pill; the hero
       is generative so it simply renders taller here */
    .map_holder { height: 496px !important; transition: height .6s cubic-bezier(.4,0,.2,1); }
    .map_holder > .absolute.bottom-0 { display: none; } /* cred row would sit under the pill */
    .cs-hero-search { position: relative; z-index: 40; margin-top: -268px; padding: 0 16px 56px; transition: margin-top .5s cubic-bezier(.4,0,.2,1), padding .5s cubic-bezier(.4,0,.2,1); }
    /* headline rides higher so open water shows between it and the search */
    .map_holder .map_cover { align-items: flex-start !important; padding-top: 92px; }
    .cs-hero-pill { position: relative; z-index: 2; max-width: 76rem; margin: 0 auto; background: linear-gradient(to bottom right, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 42%), rgba(9, 20, 36, .26); backdrop-filter: blur(9px) saturate(1.4); -webkit-backdrop-filter: blur(9px) saturate(1.4); border: 1px solid rgba(255, 255, 255, .22); border-radius: 24px; padding: 14px 20px 8px; box-shadow: 0 24px 60px -18px rgba(5, 15, 30, .55), inset 0 1px 0 rgba(255, 255, 255, .40), inset 0 -1px 0 rgba(255, 255, 255, .06); transition: max-width .5s cubic-bezier(.4,0,.2,1), border-radius .5s ease, background .45s ease, border-color .45s ease, box-shadow .45s ease, padding .45s ease; }
    .cs-hero-cred { position: relative; z-index: 1; max-width: 76rem; margin: 20px auto 0; opacity: .85; filter: brightness(0) invert(1); }
    .cs-hero-pill .search-panel { background: none !important; box-shadow: none !important; }
    /* docked: after a search the pill morphs into a full-width bar flush under
       the ocean hero (also the static form of the results-page search bar) */
    .cs-hero-search.is-docked { padding: 0; }
    /* JS sets .map_holder height + .cs-hero-search margin-top so the waves
       compress up to meet the bar's bottom; .no-anim applies it instantly on
       a fresh results-page load */
    .cs-hero-search.no-anim, .cs-hero-search.no-anim .cs-hero-pill, .map_holder.no-anim { transition: none !important; }
    .cs-hero-search.is-docked .cs-hero-pill { max-width: 100%; border-radius: 0; background: linear-gradient(to bottom right, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 42%), rgba(9, 20, 36, .26); border-color: transparent; border-bottom: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 10px 24px -8px rgba(5, 15, 30, .4); padding: 10px 20px 4px; }
    .cs-hero-search.is-docked .cs-hero-cred { display: none; }
    /* A clean edge between the water and the page body. */
    body[data-search-sidebar] .map_holder::after { display: none; }
    body[data-search-sidebar="home"]:not(.cs-search-layout-ready) main > .container { padding-top: 24px; }

    @media (max-width: 639px) {
      /* A taller mobile hero accommodates the stacked search fields. */
      .map_holder { height: 736px !important; }
      /* the inline 4rem on the headline needs the !important to lose */
      .map_holder .header_name { font-size: 42px !important; }
      /* Breathing room above the first category. */
      .cs-hp-band:first-of-type { padding-top: 16px; }
      /* Match the hero reduction in the pull-up and bottom spacing so the
         search controls and credibility row retain their positions. */
      .cs-hero-search { margin-top: -496px; padding: 0 10px 80px; }
      .cs-hero-cred { opacity: .85; } /* waves run behind it now — white knockout like desktop */
      .map_holder .map_cover { padding-top: 82px; }
      .cs-hero-cred span { display: none; }
      .cs-hero-cred img { max-width: 100%; }
      .cs-hero-pill { padding: 10px 12px 4px; border-radius: 18px; }
    }
    @media (max-width: 1023px) and (min-width: 640px) {
      /* Tablet fields wrap to two rows; lift the search block to keep the
         credibility row comfortably inside the water. */
      .map_holder { height: 556px !important; }
      .map_holder .header_name { font-size: clamp(36px, 6vw, 56px) !important; }
      .map_holder .header_name span.block { display: inline; }
      .cs-hero-search { margin-top: -354px; }
    }
    
    /* Results pages render already docked: the ocean is a fixed strip and the
       bar sits in normal flow below it, so first paint matches the docked end
       state — no JS-applied shrink, no jump. The strip keeps the search-page
       header height independent of the homepage spacing. */
    :where(body.results-page) .map_holder { height: 228px !important; }
    :where(body.results-page) .cs-hero-search { margin-top: 0; padding: 0; }
    @media (max-width: 639px) {
      :where(body.results-page) .map_holder { height: 290px !important; }
    }