/* ==========================================================================
   ServantCARE UI overhaul - design token + component layer
   --------------------------------------------------------------------------
   Loaded from elements/header.php AFTER style.css and main-color.css.
   NOT wrapped in @layer on purpose: the legacy theme loads unlayered, and
   layered rules always lose to unlayered ones regardless of specificity -
   so an @layer wrapper would let .row / .col-* override the new grid
   layout. The `sc-` prefix keeps every rule scoped to elements that opt
   in, so nothing here changes an existing selector the theme owns.

   Palette: evolved from the logo blue (#6FA4C4) with a deeper readable
   accent (#2D5D80). The warm, hospitality tone is preserved - no
   marketplace/hard-sell styling.
   ========================================================================== */

  /* ------------------------------------------------------------------
     1. Design tokens
     ------------------------------------------------------------------ */
  :root {
    /* Brand */
    --sc-primary:          #6fa4c4;
    --sc-primary-strong:   #2d5d80;
    --sc-primary-deep:     #234b68;
    /* Vivid, saturated blue used where a call to action should really pop
       (the hero search button). Hover is a touch deeper. */
    --sc-primary-bright:   #1a8fd8;
    --sc-primary-bright-hover: #1577bb;
    --sc-primary-soft:     #eaf2f8;
    --sc-primary-tint:     #f5f9fc;

    /* Neutrals */
    --sc-ink:              #22303c;
    --sc-body:             #4a5a68;
    --sc-muted:            #71828f;
    --sc-line:             #dbe3ea;
    --sc-surface:          #ffffff;
    --sc-surface-sunken:   #f7f9fb;
    --sc-surface-warm:     #fdfaf6;

    /* Feedback */
    --sc-danger:           #b23b3b;
    --sc-danger-soft:      #fbeceb;
    --sc-success:          #2f7a52;
    --sc-success-soft:     #e9f5ef;

    /* Spacing scale */
    --sc-space-1:  4px;
    --sc-space-2:  8px;
    --sc-space-3:  12px;
    --sc-space-4:  16px;
    --sc-space-5:  24px;
    --sc-space-6:  32px;
    --sc-space-7:  48px;
    --sc-space-8:  64px;

    /* Radius */
    --sc-radius-sm: 6px;
    --sc-radius-md: 10px;
    --sc-radius-lg: 16px;
    --sc-radius-pill: 999px;

    /* Elevation */
    --sc-shadow-sm: 0 1px 2px rgba(34, 48, 60, .06);
    --sc-shadow-md: 0 4px 14px rgba(34, 48, 60, .08);
    --sc-shadow-lg: 0 12px 32px rgba(34, 48, 60, .12);

    /* Type */
    --sc-font-body: "Figtree", "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --sc-font-display: "Raleway", "Figtree", "HelveticaNeue", Helvetica, Arial, sans-serif;

    --sc-text-xs:  .8125rem;
    --sc-text-sm:  .875rem;
    --sc-text-md:  1rem;
    --sc-text-lg:  1.125rem;
    --sc-text-xl:  clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
    --sc-text-2xl: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem);

    --sc-leading: 1.6;

    /* Layout */
    --sc-container: 1240px;
    --sc-focus-ring: 0 0 0 3px rgba(45, 93, 128, .35);

    /* Height of the pinned site header clone (#header.cloned). The
       homes-page filter bar parks directly under it (section 14), so keep
       this in step with that element's rendered height (6px padding + 56px
       row + 6px padding = 68px). */
    --sc-sticky-header-h: 68px;
  }

  /* ------------------------------------------------------------------
     2. Base refinements (non-destructive)
     ------------------------------------------------------------------ */
  body {
    font-family: var(--sc-font-body);
    color: var(--sc-body);
    line-height: var(--sc-leading);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3, h4 {
    font-family: var(--sc-font-display);
    color: var(--sc-ink);
    letter-spacing: -.01em;
  }

  a {
    color: var(--sc-primary-strong);
  }

  /* Keyboard focus: visible and consistent. Mouse users never see it. */
  :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--sc-primary-strong);
    outline-offset: 2px;
    border-radius: var(--sc-radius-sm);
  }

  /* ------------------------------------------------------------------
     3. Layout helpers
     ------------------------------------------------------------------ */
  .sc-container {
    width: 100%;
    max-width: var(--sc-container);
    margin-inline: auto;
    padding-inline: var(--sc-space-4);
  }

  .sc-section {
    padding-block: clamp(var(--sc-space-6), 6vw, var(--sc-space-8));
  }

  .sc-section__title {
    font-family: var(--sc-font-display);
    font-size: var(--sc-text-xl);
    color: var(--sc-ink);
    margin: 0 0 var(--sc-space-2);
  }

  .sc-section__lede {
    color: var(--sc-muted);
    max-width: 60ch;
    margin: 0 0 var(--sc-space-5);
  }

  /* ------------------------------------------------------------------
     4. Buttons
     ------------------------------------------------------------------ */
  .sc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sc-space-2);
    min-height: 44px;                 /* touch target */
    padding: 0 var(--sc-space-5);
    font-family: var(--sc-font-body);
    font-size: var(--sc-text-sm);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--sc-radius-pill);
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease,
                border-color .18s ease, box-shadow .18s ease,
                transform .18s ease;
  }

  .sc-btn--primary {
    background: var(--sc-primary-strong);
    color: #fff;
    box-shadow: var(--sc-shadow-sm);
  }
  .sc-btn--primary:hover {
    background: var(--sc-primary-deep);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--sc-shadow-md);
  }

  .sc-btn--ghost {
    background: transparent;
    color: var(--sc-primary-strong);
    border-color: var(--sc-primary);
  }
  .sc-btn--ghost:hover {
    background: var(--sc-primary-soft);
    color: var(--sc-primary-deep);
  }

  .sc-btn--subtle {
    background: var(--sc-surface-sunken);
    color: var(--sc-ink);
    border-color: var(--sc-line);
  }
  .sc-btn--subtle:hover {
    background: #eef2f6;
    color: var(--sc-ink);
  }

  .sc-btn[disabled],
  .sc-btn.is-disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }

  /* Motion-safe: honour the OS "reduce motion" setting. */
  @media (prefers-reduced-motion: reduce) {
    .sc-btn,
    .sc-card,
    .sc-listing-card {
      transition: none !important;
    }
    .sc-btn:hover,
    .sc-card:hover,
    .sc-listing-card:hover {
      transform: none !important;
    }
  }

  /* ------------------------------------------------------------------
     5. Forms
     ------------------------------------------------------------------ */
  .sc-field {
    margin-bottom: var(--sc-space-4);
  }

  .sc-field > label,
  .sc-label {
    display: block;
    font-size: var(--sc-text-sm);
    font-weight: 600;
    color: var(--sc-ink);
    margin-bottom: var(--sc-space-2);
  }

  .sc-field :is(input[type="text"], input[type="email"], input[type="password"],
                input[type="tel"], input[type="number"], input[type="search"],
                select, textarea),
  .sc-input,
  .sc-select {
    width: 100%;
    min-height: 46px;
    padding: 10px var(--sc-space-3);
    font-family: var(--sc-font-body);
    font-size: var(--sc-text-md);
    color: var(--sc-ink);
    background: var(--sc-surface);
    border: 1px solid var(--sc-line);
    border-radius: var(--sc-radius-md);
    transition: border-color .15s ease, box-shadow .15s ease;
  }

  .sc-field :is(input, select, textarea):focus,
  .sc-input:focus,
  .sc-select:focus {
    outline: none;
    border-color: var(--sc-primary);
    box-shadow: var(--sc-focus-ring);
  }

  .sc-field :is(input, select, textarea):disabled {
    background: var(--sc-surface-sunken);
    color: var(--sc-muted);
    cursor: not-allowed;
  }

  .sc-help {
    display: block;
    margin-top: var(--sc-space-1);
    font-size: var(--sc-text-xs);
    color: var(--sc-muted);
  }

  .sc-alert {
    padding: var(--sc-space-3) var(--sc-space-4);
    border-radius: var(--sc-radius-md);
    border: 1px solid var(--sc-line);
    background: var(--sc-surface-sunken);
    color: var(--sc-body);
    font-size: var(--sc-text-sm);
    margin-bottom: var(--sc-space-4);
  }
  .sc-alert--danger  { background: var(--sc-danger-soft);  border-color: #eccfcd; color: var(--sc-danger); }
  .sc-alert--success { background: var(--sc-success-soft); border-color: #cfe7db; color: var(--sc-success); }

  /* ------------------------------------------------------------------
     6. Listing cards (homes grid)
     ------------------------------------------------------------------ */
  .sc-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: var(--sc-space-5);
    margin-left: 0;
    margin-right: 0;
  }
  /* Kill Bootstrap row::before/::after clearfix — they become grid items
     inside a CSS Grid and steal the first cell. */
  .sc-results-grid::before,
  .sc-results-grid::after {
    display: none !important;
    content: none !important;
  }
  /* Direct children of the grid are grid items — no wrapper needed. */
  .sc-results-grid > .listing-item-container {
    width: 100%;
  }
  /* Map highlight: card hovered by the guest gets a visual ring. */
  .sc-results-grid > .listing-item-container.sc-card-highlighted {
    outline: 2px solid var(--sc-primary-strong);
    outline-offset: -2px;
    border-color: var(--sc-primary-strong);
  }

  .sc-listing-card {
    display: flex;
    flex-direction: column;
    background: var(--sc-surface);
    border: 1px solid var(--sc-line);
    border-radius: var(--sc-radius-lg);
    overflow: hidden;
    box-shadow: var(--sc-shadow-sm);
    color: inherit;
    text-decoration: none;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
  }
  .sc-listing-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sc-shadow-lg);
    border-color: var(--sc-primary);
    color: inherit;
  }

  .sc-listing-card__media {
    position: relative;
    background: var(--sc-surface-sunken);
    overflow: hidden;
    /* Never let flexbox shrink the photo: without this the media is a
       shrinkable flex child of the card, so a tall body squeezes the
       image and crams the header. Keep the 4:3 pane at its natural
       size and let the body take the leftover space instead. */
    flex: 0 0 auto;
  }
  .sc-listing-card__media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
  }
  .sc-listing-card:hover .sc-listing-card__media img {
    transform: scale(1.04);
  }
  .sc-listing-card__placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: var(--sc-primary);
    font-size: 2.5rem;
    background: var(--sc-primary-tint);
  }

  .sc-listing-card__badge {
    position: absolute;
    top: var(--sc-space-3);
    left: var(--sc-space-3);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: var(--sc-text-xs);
    font-weight: 600;
    color: var(--sc-primary-deep);
    background: rgba(255, 255, 255, .94);
    border-radius: var(--sc-radius-pill);
    box-shadow: var(--sc-shadow-sm);
    backdrop-filter: blur(2px);
  }

  /* SC-352: long-term minimum-stay sticker, pinned top-right of the card
     image in brand red so guests spot it before clicking into the listing. */
  .sc-listing-card__longterm {
    position: absolute;
    top: var(--sc-space-3);
    right: var(--sc-space-3);
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    font-size: var(--sc-text-xs);
    font-weight: 700;
    color: #fff;
    background: var(--sc-danger, #b23b3b);
    border-radius: var(--sc-radius-pill);
    box-shadow: var(--sc-shadow-sm);
  }

  /* SC-352: long-term minimum-stay notice on the property details page,
     under the title and above the Overview/Pricing/Location nav. */
  .sc-min-stay-notice {
    margin: 0 0 var(--sc-space-4);
    padding: var(--sc-space-3) var(--sc-space-4);
    color: #fff;
    background: var(--sc-danger, #b23b3b);
    border-radius: var(--sc-radius-md);
    font-size: var(--sc-text-sm);
    font-weight: 600;
  }

  .sc-listing-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--sc-space-2);
    padding: var(--sc-space-4);
    flex: 1;
  }

  .sc-listing-card__title {
    font-family: var(--sc-font-display);
    font-size: var(--sc-text-lg);
    font-weight: 600;
    color: var(--sc-ink);
    margin: 0;
    line-height: 1.3;
  }

  .sc-listing-card__location {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: var(--sc-text-sm);
    color: var(--sc-muted);
    margin: 0;
  }
  .sc-listing-card__location i {
    margin-top: 3px;
    color: var(--sc-primary);
  }

  /* The legacy theme sets .listing-item-content h3 and
     .listing-item-content span to white (it was designed for cards
     with a dark photo overlay). Those selectors are (0,1,1), which
     beat our (0,1,0) card rules, so the title, location and chip text
     rendered white-on-light and were unreadable. Re-assert the
     intended colours under the card scope, which is more specific
     than .listing-item-content h3/span without editing style.css. */
  .sc-listing-card .sc-listing-card__title {
    color: var(--sc-ink);
  }
  .sc-listing-card .sc-listing-card__location,
  .sc-listing-card .sc-listing-card__location span {
    color: var(--sc-muted);
  }
  .sc-listing-card .sc-listing-card__location i {
    color: var(--sc-primary);
  }

  .sc-listing-card__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sc-space-2);
    margin-top: auto;
    padding-top: var(--sc-space-2);
  }

  .sc-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    font-size: var(--sc-text-xs);
    font-weight: 600;
    color: var(--sc-primary-strong);
    background: var(--sc-primary-soft);
    border-radius: var(--sc-radius-pill);
    white-space: nowrap;
  }

  /* Card fact chips: darker blue background with white text so they
     read clearly on the card. Scoped under .sc-listing-card with a
     span target so it beats the legacy .listing-item-content span
     white-text rule. */
  .sc-listing-card .sc-listing-card__facts .sc-chip,
  .sc-listing-card .sc-listing-card__facts .sc-chip span {
    color: #fff;
    background: var(--sc-primary-strong);
  }
  .sc-listing-card .sc-listing-card__facts .sc-chip i {
    color: #fff;
  }
  .sc-listing-card .sc-listing-card__facts .sc-chip.sc-chip--longterm,
  .sc-listing-card .sc-listing-card__facts .sc-chip.sc-chip--longterm span {
    color: #fff;
    background: var(--sc-danger, #b23b3b);
  }

  .sc-listing-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    margin-top: var(--sc-space-3);
    padding-top: var(--sc-space-3);
    border-top: 1px solid var(--sc-line);
    font-size: var(--sc-text-sm);
    font-weight: 600;
    color: var(--sc-primary-strong);
  }
  .sc-listing-card:hover .sc-listing-card__cta {
    color: var(--sc-primary-deep);
  }

  /* ------------------------------------------------------------------
     7. Filter panel (sidebar on desktop, collapsible sheet on mobile)
     ------------------------------------------------------------------ */
  .sc-filter {
    background: var(--sc-surface);
    border: 1px solid var(--sc-line);
    border-radius: var(--sc-radius-lg);
    padding: var(--sc-space-4);
    box-shadow: var(--sc-shadow-sm);
  }

  .sc-filter__group {
    border: 0;
    margin: 0 0 var(--sc-space-5);
    padding: 0;
  }

  .sc-filter__legend {
    font-family: var(--sc-font-body);
    font-size: var(--sc-text-sm);
    font-weight: 700;
    color: var(--sc-ink);
    margin-bottom: var(--sc-space-2);
    padding: 0;
  }

  /* Checkbox rows: comfortable tap targets, hover feedback. */
  .sc-check {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    min-height: 36px;
    padding: 2px 0;
    font-size: var(--sc-text-sm);
    color: var(--sc-body);
    cursor: pointer;
  }
  .sc-check::before {
    display: none !important;
    content: none !important;
  }
  .sc-check input[type=checkbox] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--sc-primary-strong);
    flex: 0 0 auto;
    display: inline-block;
  }
  .sc-check:hover {
    color: var(--sc-primary-deep);
  }

  .sc-filter__toggle {
    display: none;              /* desktop: no toggle, panel always visible */
    width: 100%;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 0 var(--sc-space-4);
    margin-bottom: var(--sc-space-3);
    font-size: var(--sc-text-md);
    font-weight: 600;
    color: var(--sc-ink);
    background: var(--sc-surface);
    border: 1px solid var(--sc-line);
    border-radius: var(--sc-radius-md);
    cursor: pointer;
  }
  .sc-filter__toggle .sc-filter__count {
    font-size: var(--sc-text-xs);
    font-weight: 500;
    color: var(--sc-muted);
  }
  .sc-filter__toggle::after {
    content: "\f107";               /* FontAwesome caret, inherited */
    font-family: FontAwesome;
    transition: transform .2s ease;
  }
  .sc-filter__toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
  }

  .sc-filter__body {
    display: block;
  }

  .sc-chip--longterm {
    color: #fff;
    background: var(--sc-danger, #b23b3b);
  }

  /* Active filter chips */
  .sc-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sc-space-2);
    margin-bottom: var(--sc-space-4);
  }

  .sc-results-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sc-space-3);
    margin-bottom: var(--sc-space-4);
  }
  .sc-results-bar__count {
    font-size: var(--sc-text-sm);
    color: var(--sc-muted);
  }
  .sc-results-bar__count strong {
    color: var(--sc-ink);
    font-weight: 700;
  }

  /* ------------------------------------------------------------------
     8. Responsive: below ~900px the filter becomes a sheet ABOVE results
        only when open; results come first in visual order so the first
        home is reachable without scrolling past every checkbox.
     ------------------------------------------------------------------ */
  @media (max-width: 900px) {
    .sc-filter__toggle {
      display: flex;
    }

    .sc-filter__body {
      display: none;
    }

    /* Stacked below 1200px; the map leads above the cards (ordered in the
       <=1199px block in section 14). */
    .sc-listing-layout {
      display: flex;
      flex-direction: column;
    }

    .sc-results-grid {
      grid-template-columns: 1fr;
    }
  }

  /* ------------------------------------------------------------------
     9. Types-of-stay / home page cards
     ------------------------------------------------------------------ */
  .sc-tos-slider {
    display: flex;
    gap: var(--sc-space-5);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;   /* momentum scrolling on iOS */
    overscroll-behavior-x: contain;      /* stop the page bouncing/back-swipe */
    touch-action: pan-x pan-y;           /* let touches drive the rail, not block */
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--sc-space-2);
    padding: var(--sc-space-2) 0 var(--sc-space-5);
    scrollbar-width: thin;
    -webkit-user-select: none;           /* dragging a card selects text; stop it */
    user-select: none;
  }
  /* Let a swipe that starts on a card's image pull the rail (drag the page
     instead of the photo). Cards stay tap-friendly for their links/buttons. */
  .sc-tos-slider img {
    -webkit-user-drag: none;
    pointer-events: none;
  }
  .sc-tos-link {
    -webkit-tap-highlight-color: rgba(0,0,0,.08);
    touch-action: manipulation;
  }
  .sc-tos-slider::-webkit-scrollbar { height: 0; }
  .sc-tos-slider::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
  }

  .sc-tos-item {
    flex: 0 0 240px;
    scroll-snap-align: start;
    text-align: center;
    padding: var(--sc-space-4) var(--sc-space-3);
    background: var(--sc-surface);
    border: 1px solid var(--sc-line);
    border-radius: var(--sc-radius-lg);
    box-shadow: var(--sc-shadow-sm);
    transition: box-shadow .2s ease, transform .2s ease;
  }
  .sc-tos-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--sc-shadow-md);
  }
  .sc-tos-photo,
  .sc-tos-circle {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto var(--sc-space-3);
    display: block;
  }
  .sc-tos-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: #fff;
    background: var(--sc-primary-strong);
  }
  .sc-tos-item h4 {
    font-family: var(--sc-font-display);
    margin: 0 0 4px;
    font-size: 17px;
    color: var(--sc-ink);
  }
  .sc-tos-subtitle {
    display: block;
    font-size: 13px;
    color: var(--sc-primary-strong);
    margin-bottom: var(--sc-space-2);
    font-weight: 600;
  }
  .sc-tos-item p {
    font-size: 14px;
    color: var(--sc-muted);
    margin-bottom: var(--sc-space-3);
    line-height: 1.5;
  }
  .sc-tos-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 var(--sc-space-4);
    background: var(--sc-primary-strong);
    color: #fff;
    border-radius: var(--sc-radius-pill);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
  }
  .sc-tos-link:hover { background: var(--sc-primary-deep); color: #fff; }

  .sc-tos-arrows {
    display: none;   /* hide the prev/next below "Explore Our Types of Stay" */
  }
  .sc-tos-arrow {
    width: 44px;
    height: 44px;
    margin: 0 6px;
    background: var(--sc-surface);
    border: 1px solid var(--sc-line);
    border-radius: 50%;
    color: var(--sc-primary-strong);
    font-size: 15px;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease;
  }
  .sc-tos-arrow:hover {
    background: var(--sc-primary-soft);
    border-color: var(--sc-primary);
  }

  @media (min-width: 1200px) {
    .sc-tos-item {
      flex-basis: 300px;
      padding: var(--sc-space-5) var(--sc-space-4);
    }
    .sc-tos-photo,
    .sc-tos-circle {
      width: 160px;
      height: 160px;
      font-size: 60px;
    }
    /* Use px here, not the rem tokens: the legacy theme sets the root
       html font-size to 10px, so rem-based sizes resolve far too small
       on this section. Pixel sizes keep the cards readable on desktop. */
    .sc-tos-item h4 { font-size: 20px; }
    .sc-tos-subtitle { font-size: 14px; }
    .sc-tos-item p { font-size: 15px; }
    .sc-tos-link { font-size: 14px; }
    .sc-tos-item h4,
    .sc-tos-subtitle,
    .sc-tos-item p { line-height: 1.45; }
  }

  @media (min-width: 1400px) {
    .sc-tos-slider {
      overflow-x: hidden;
      justify-content: center;
      flex-wrap: wrap;
    }
  }

  /* Desktop: bump filter/chip text to readable px sizes (the legacy
     rem root is 10px, so --sc-text-xs is ~8px — unreadable). */
  @media (min-width: 1200px) {
    .sc-chip { font-size: 13px; }
    .sc-filter__legend { font-size: 15px; }
    .sc-check { font-size: 14px; }
    .sc-results-bar__count { font-size: 14px; }
    .sc-results-bar__count strong { font-size: 14px; }
    .sc-active-filters .sc-chip { font-size: 12px; }
  }

  /* ------------------------------------------------------------------
     10. Property detail: gallery + booking panel
     ------------------------------------------------------------------ */

  /* Gallery. The legacy swiper carried a hard-coded 500px wrapper and a
     40vh/500px pane inline height that ignored phones entirely; the
     overhaul drives the strip by a fluid height so it scales down.
     Scoped to .sc-gallery so nothing else that reuses .swiper is
     affected. */
  .sc-gallery {
    position: relative;
    border-radius: var(--sc-radius-lg);
    overflow: hidden;
    background: var(--sc-surface-sunken);
    box-shadow: var(--sc-shadow-sm);
    margin-top: var(--sc-space-4);
  }

  .sc-gallery .swiper-wrapper {
    height: auto !important;         /* beat the inline height:500px */
  }

  .sc-gallery .swiper-slide {
    height: auto;
    background: none;
    cursor: zoom-in;
  }

  .sc-gallery .swiper-pane {
    width: 100%;
    /* The gallery is a multi-slide strip (swiper shows 1/2/3/4 slides by
       breakpoint), so pane width shrinks as more slides fit. A width-derived
       aspect-ratio would flatten the strip to a thin band on desktop; a
       near-constant height preserves the legacy 500px strip feel while
       still shrinking on small screens. */
    height: clamp(260px, 44vw, 500px);
    background-size: cover;
    background-position: center;
    display: block;
  }

  @media (max-width: 700px) {
    .sc-gallery .swiper-pane {
      height: clamp(220px, 60vw, 320px);
    }
  }

  .sc-gallery .swiper-pagination-bullet {
    background: #fff;
    opacity: .6;
  }
  .sc-gallery .swiper-pagination-bullet-active {
    background: var(--sc-primary) !important;
    opacity: 1;
  }

  /* Slide counter badge, top-right. */
  .sc-gallery__count {
    position: absolute;
    top: var(--sc-space-3);
    right: var(--sc-space-3);
    z-index: 5;
    padding: 5px 12px;
    font-size: var(--sc-text-xs);
    font-weight: 600;
    color: #fff;
    background: rgba(0, 0, 0, .55);
    border-radius: var(--sc-radius-pill);
    backdrop-filter: blur(2px);
    pointer-events: none;
  }

  /* Booking panel. Sticky beside the content on desktop. */
  .sc-booking-panel {
    background: var(--sc-surface);
    border: 1px solid var(--sc-line);
    border-radius: var(--sc-radius-lg);
    box-shadow: var(--sc-shadow-md);
    padding: var(--sc-space-5);
  }

  .sc-booking-panel h3 {
    display: flex;
    align-items: center;
    gap: var(--sc-space-2);
    font-family: var(--sc-font-display);
    font-size: var(--sc-text-lg);
    color: var(--sc-ink);
    margin: 0 0 var(--sc-space-4);
  }

  .sc-booking-panel .book-now {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    margin-top: var(--sc-space-3);
    padding: 0 var(--sc-space-4);
    font-size: var(--sc-text-md);
    font-weight: 600;
    color: #fff;
    background: var(--sc-primary-strong);
    border: 0;
    border-radius: var(--sc-radius-pill);
    cursor: pointer;
    text-decoration: none;
    transition: background-color .18s ease, transform .18s ease;
  }
  .sc-booking-panel .book-now:hover {
    background: var(--sc-primary-deep);
    color: #fff;
    transform: translateY(-1px);
  }
  .sc-booking-panel .book-now.btn-disable,
  .sc-booking-panel .book-now[disabled] {
    background: #9fb0bd !important;
    transform: none;
    cursor: not-allowed;
  }

  @media (min-width: 993px) {
    .sc-booking-panel {
      position: sticky;
      top: 100px;
    }
  }

  /* Mobile: the booking panel stays in the flow (it holds the only
     booking form, so hiding it would strand the fixed bar's CTA with
     nothing to scroll to). Only the desktop sticky positioning is
     dropped; the fixed bottom bar is a persistent shortcut to it.
     Mirrors the legacy .booking-sticky-footer intent. */
  .sc-booking-bar {
    display: none;
  }

  @media (max-width: 992px) {
    .sc-booking-panel {
      position: static;
    }

    .sc-booking-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--sc-space-3);
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 10001;
      padding: var(--sc-space-3) var(--sc-space-4);
      background: var(--sc-surface);
      border-top: 1px solid var(--sc-line);
      box-shadow: 0 -4px 14px rgba(34, 48, 60, .1);
    }

    .sc-booking-bar__label {
      display: flex;
      flex-direction: column;
      font-size: var(--sc-text-xs);
      color: var(--sc-muted);
      line-height: 1.3;
    }
    .sc-booking-bar__label strong {
      font-size: var(--sc-text-sm);
      color: var(--sc-ink);
    }

    .sc-booking-bar .sc-btn {
      flex: 0 0 auto;
      min-width: 150px;
    }

    /* Keep the page footer clear of the fixed bar. */
    body.is-sc-property {
      padding-bottom: 84px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .sc-booking-panel .book-now {
      transition: none;
    }
    .sc-booking-panel .book-now:hover {
      transform: none;
    }
  }

/* SC-maps: Leaflet marker-cluster badge (replaces the old Google clusterer
   image sprite). */
.sc-cluster-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(38, 116, 168, 0.85);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  border: 3px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* SC-maps: home-shaped map marker (replaces the default Leaflet teardrop
   pin). The active variant is used while its card is hovered. */
.sc-map-home {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--sc-primary-strong, #2d5d80);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.sc-map-home i {
  transform: rotate(45deg);
  color: #fff;
  font-size: 15px;
  line-height: 1;
}
.sc-map-home--active {
  background: var(--sc-danger, #b23b3b);
  transform: rotate(-45deg) scale(1.28);
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.sc-map-home--active i {
  font-size: 17px;
}

/* Larger location pin in the card body. */
.sc-listing-card .sc-listing-card__location i {
  font-size: 18px;
}

/* ------------------------------------------------------------------
    Need Help bubble — fixed bottom-right on every page
   ------------------------------------------------------------------ */
.sc-help-bubble {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  background: var(--sc-primary-strong, #1e6b9e);
  color: #fff;
  border: none;
  border-radius: 40px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.sc-help-bubble:hover {
  background: var(--sc-primary-deep, #14527a);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
.sc-help-bubble i {
  font-size: 18px;
}
@media (max-width: 600px) {
  .sc-help-bubble {
    bottom: 12px;
    right: 12px;
    padding: 10px 16px;
    font-size: 13px;
  }
}

/* ------------------------------------------------------------------
   11. Airbnb-style listing card features: image slider, save heart,
       badges, saturation boost
   ------------------------------------------------------------------ */

/* Image slider container */
.sc-card-slider {
  position: relative;
  overflow: hidden;
}
.sc-card-slider img.sc-slide {
  display: none;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: opacity 0.3s ease;
}
.sc-card-slider img.sc-slide.active {
  display: block;
}

/* Prev/next arrows — hidden by default, show on card hover */
.sc-slide-prev,
.sc-slide-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  border: none;
  color: #222;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Always visible (not only on hover) so the slider is usable on
     touch devices, which have no hover state. */
  opacity: 1;
  transition: opacity 0.18s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.sc-slide-prev { left: 8px; }
.sc-slide-next { right: 8px; }
.sc-card-slider:hover .sc-slide-prev,
.sc-card-slider:hover .sc-slide-next {
  opacity: 1;
}
.sc-slide-prev:hover,
.sc-slide-next:hover {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* Dot indicators */
.sc-slide-dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  z-index: 5;
}
.sc-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  transition: background 0.2s;
  cursor: pointer;
}
.sc-dot.active {
  background: #fff;
}

/* Save / heart button */
.sc-save-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 100;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  transition: transform 0.15s ease, color 0.15s ease;
  text-shadow: 0 1px 4px rgba(0,0,0,0.35);
  line-height: 1;
  padding: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0,0,0,0.3);
}
.sc-save-btn:hover {
  transform: scale(1.15);
  background: rgba(0,0,0,0.4);
}
.sc-save-btn.saved {
  color: #ff385c;
  background: rgba(255,255,255,0.9);
}
.sc-save-btn.saved:hover {
  color: #ff385c;
  background: #fff;
}

/* Slider navigation buttons */
.sc-slide-prev,
.sc-slide-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  border: none;
  color: #222;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.18s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.sc-slide-prev { left: 8px; }
.sc-slide-next { right: 8px; }
.sc-slide-prev:hover,
.sc-slide-next:hover {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* Card container needs relative positioning for absolute elements */
.sc-listing-card {
  position: relative;
}

/* The legacy sheet gives .listing-item { z-index: 100 } (it was a card
   header meant to sit over the photo). Our media div carries that class,
   so it floated above the card link and swallowed every click on the
   photo. Drop the media to its own low layer; the link then covers the
   whole card and the controls below re-raise themselves. */
.sc-listing-card .sc-listing-card__media.listing-item,
.sc-listing-card .sc-listing-card__media {
  z-index: auto;
}

/* Ensure interactive elements are clickable (above the card link) */
.sc-save-btn,
.sc-slide-prev,
.sc-slide-next,
.sc-dot {
  z-index: 100;
  pointer-events: auto;
}

/* Card link covers the whole card so clicking the photo or the text both
   open the listing. It sits ABOVE the media and body (so the click lands
   on it) but BELOW the slider arrows and save button (z-index 100), which
   stay independently clickable. */
.sc-listing-card-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  text-indent: -9999px;
  pointer-events: auto;
  cursor: pointer;
}

/* Body stays below the link so a click anywhere in the card (title,
   location, chips) is handled by the link and opens the listing.
   The legacy .listing-item-content is absolutely positioned with
   bottom: 28px (it was meant to sit ON the photo, over the dark vignette
   we removed). Reset that positioning so the body flows in the card below
   the image instead of lifting 28px and overlapping it. */
.sc-listing-card .sc-listing-card__body,
.sc-listing-card__body.listing-item-content {
  position: relative;
  bottom: auto;
  left: auto;
  right: auto;
  top: auto;
  width: 100%;
  z-index: 1;
  pointer-events: auto;
  box-sizing: border-box;
  /* legacy padding was 0 32px with a 90px right inset for the old rating
     widget; use the card's own even padding. */
  padding: var(--sc-space-4);
}

/* Cards should read bright and saturated, so instead of the legacy theme's
   dark vignette we lift the photo with a filter (see below). */

/* Remove the legacy dark vignette.
   style.css paints .listing-item:before with a heavy top-to-bottom
   gradient (rgba(35,35,37,.9) -> transparent) plus a 0.2 black wash over
   every card image. That is what made the photos look dark and murky. We
   keep the legacy stylesheet untouched and neutralise both the ::before
   vignette and any ::after shading on our own cards. */
.sc-listing-card .listing-item::before,
.sc-listing-card .listing-item:before,
.sc-listing-card__media::before,
.sc-listing-card__media::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* Bright, saturated photos in place of the vignette. Slightly higher
   saturation and brightness so the images pop against the white cards. */
.sc-listing-card__media img {
  filter: saturate(1.18) brightness(1.06) contrast(1.03);
  transition: filter 0.3s ease, transform .35s ease;
  background-color: #f0f0f0;
}
.sc-listing-card__media img:hover,
.sc-listing-card:hover .sc-listing-card__media img {
  filter: saturate(1.3) brightness(1.1) contrast(1.05);
}

/* ------------------------------------------------------------------
   12. Map on right side (Airbnb-style sidebar map)
   ------------------------------------------------------------------ */
.sc-listing-layout {
  position: relative;
}
.sc-listing-layout > .sc-listing-filters {
  z-index: 2;
}
@media (min-width: 1200px) {
  /* Full-width Airbnb-style search layout: a collapsible filter bar spans
     the top, then the listings grid and the map split the remaining width
     down the middle (listings left, map right, each ~half). The listings
     pane scrolls inside its own half, so the map stays static while the
     grid scrolls. */
  .sc-homes-wide {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 30px;
    padding-right: 30px;
  }
  .sc-listing-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 24px;
    align-items: start;
  }
  /* Neutralise the Bootstrap col-* widths so each item fills its track —
     otherwise col-lg-9/col-lg-3 left the map at 25% of its own half. */
  .sc-listing-layout > .sc-listing-filters,
  .sc-listing-layout > .sc-listing-results,
  .sc-listing-layout > .sc-map-column {
    width: auto;
    max-width: none;
  }
  /* Bootstrap row clearfix pseudo-elements become grid items — drop them. */
  .sc-listing-layout::before,
  .sc-listing-layout::after {
    display: none !important;
    content: none !important;
  }
  /* Filters: full-width collapsible bar above the two panes, so the
     listings and the map each get an equal half. */
  .sc-listing-layout > .sc-listing-filters {
    grid-column: 1 / -1;
    margin-bottom: 18px;
  }
  .sc-listing-filters .sc-filter {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .sc-listing-filters #sidebar {
    padding-top: 0 !important;
  }
  .sc-filter__toggle {
    display: flex;
    margin-bottom: 0;
  }
  .sc-filter__body {
    display: none;
  }
  /* Listings: left half. The page scrolls as a whole (Airbnb-style) so
     the sticky search/filter bar stays pinned while the grid scrolls; the
     old inner-pane scroll would have kept the bar fixed but scrolled only
     the cards, which reads as broken. */
  .sc-listing-layout > .sc-listing-results {
    grid-column: 1;
    min-width: 0;
    /* Beat the theme's .padding-right-30 !important so the grid gets the
       full column width needed for two card columns. */
    padding-right: 15px !important;
  }
  /* Map: right half, sticky under the search bar while the page scrolls. */
  .sc-listing-layout > .sc-map-column {
    grid-column: 2;
    position: sticky;
    /* Clear the sticky search bar so the map parks below it. */
    top: 92px;
    align-self: start;
    height: calc(100vh - 112px);
    z-index: 1;
  }
  .sc-map-column #map-container {
    width: 100%;
    height: 100%;
    border-radius: var(--sc-radius-lg);
    overflow: hidden;
    box-shadow: var(--sc-shadow-sm);
  }
  .sc-map-column #map {
    width: 100% !important;
    height: 100% !important;
    min-height: 400px;
  }
  /* Hide the old full-width map — it's now in the column */
  .fullwidth-home-map {
    display: none !important;
  }
}

/* Improved map tracking */
.sc-map-column #map {
  transition: height 0.3s ease;
}

/* ------------------------------------------------------------------
   12b. Filter modal (Airbnb-style)
        The Filters trigger opens a centered dialog with a dark backdrop
        on desktop and mobile alike. Applied whenever the panel has
        .is-open, so it overrides the old inline/sheet behaviour.
   ------------------------------------------------------------------ */
/* True overlay: a real, full-bleed layer that dims the page without
   tinting, blending or recolouring the assets underneath it. Sits above
   every other page layer (Need Help bubble, dashboard chrome). */
.sc-filter-overlay {
  display: none;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999990;
  background: rgba(15, 23, 42, 0.5);
  opacity: 0;
  transition: opacity .18s ease;
}
.sc-filter-overlay.is-open {
  display: block;
  opacity: 1;
}
/* The dialog sits above its own overlay. It is hoisted to <body> by the
   page script (sibling of .sc-filter-overlay), so it is driven by its own
   .is-open class; the .sc-filter.is-open path is kept for the legacy
   fallback where JS never hoisted it. */
/* While hoisted to <body> it is no longer inside .sc-filter, so the base
   responsive .sc-filter__body display rules no longer apply to hide it.
   Force it hidden until opened. NOTE: the *open* rule must also carry the
   #id (or higher specificity) — a bare #sc-filter-body { display:none }
   outranks .sc-filter__body.is-open and would keep the dialog invisible. */
#sc-filter-body {
  display: none;
}
#sc-filter-body.is-open,
.sc-filter__body.is-open,
.sc-filter.is-open .sc-filter__body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 24px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(1000px, 94vw);
  max-height: 88vh;
  overflow-y: auto;
  z-index: 999999;
  margin: 0;
  padding: var(--sc-space-5);
  background: var(--sc-surface);
  border: 1px solid var(--sc-line);
  border-radius: var(--sc-radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}
/* Legacy fallback: only used when JS never created the overlay element
   (there is no .sc-filter-overlay in the DOM). Same colour, so it also
   reads as a plain overlay rather than a tint. When the element exists
   this is suppressed so the two backdrops never stack. */
body:not(:has(.sc-filter-overlay)) .sc-filter.is-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999990;
  background: rgba(15, 23, 42, 0.5);
}
.sc-filter__modal-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-space-3);
  margin-bottom: var(--sc-space-4);
  padding-bottom: var(--sc-space-3);
  border-bottom: 1px solid var(--sc-line);
}
.sc-filter__modal-head h3 {
  margin: 0;
}
.sc-filter__close {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: var(--sc-muted);
  padding: 2px 10px;
  border-radius: 8px;
}
.sc-filter__close:hover {
  background: var(--sc-surface-sunken, #eef2f7);
  color: var(--sc-ink);
}
/* Popup footer: Clear Filters + Show homes. */
.sc-filter__actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: var(--sc-space-3);
  align-items: center;
  margin-top: var(--sc-space-2);
  padding-top: var(--sc-space-4);
  border-top: 1px solid var(--sc-line);
}
.sc-filter__actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--sc-space-5);
  margin: 0;
  border-radius: var(--sc-radius-pill);
  font-weight: 600;
  text-decoration: none;
}
.sc-filter__actions .sc-filter__clear {
  background: var(--sc-surface-sunken);
  color: var(--sc-ink);
  border: 1px solid var(--sc-line);
}
.sc-filter__actions .sc-filter__apply {
  background: var(--sc-primary-strong);
  color: #fff;
  border: 1px solid var(--sc-primary-strong);
  cursor: pointer;
}
.sc-filter__actions .sc-filter__apply:hover {
  background: var(--sc-primary-deep);
  color: #fff;
}

/* Clear Filters spans the dialog; keep it at its natural height. */
.sc-filter.is-open .sc-filter__body > .button {
  grid-column: 1 / -1;
  align-self: start;
}

/* Mobile improvements */
@media (max-width: 768px) {
  .sc-listing-card {
    min-height: 200px;
  }
  
  .sc-listing-card__media {
    min-height: 160px;
  }
  
  .sc-listing-card__title {
    font-size: 16px;
  }
  
  .sc-listing-card__location {
    font-size: 13px;
  }
  
  .sc-chip {
    font-size: 11px;
    padding: 3px 8px;
  }
  
  .sc-filter__body.is-open,
  .sc-filter.is-open .sc-filter__body {
    width: 96vw;
    max-height: 90vh;
    padding: var(--sc-space-4);
  }
  
  .sc-filter__modal-head {
    margin-bottom: var(--sc-space-3);
    padding-bottom: var(--sc-space-2);
  }
  
  .sc-results-grid {
    grid-template-columns: 1fr;
    gap: var(--sc-space-4);
  }

  /* The map now leads on mobile instead of being hidden (it used to be
     display:none on phones). Sizing/ordering live in section 14. */
  .sc-map-column {
    display: block;
  }

  .sc-listing-layout > .sc-listing-results {
    padding-right: 0 !important;
  }
}

/* ==================================================================
   13. Header / primary navigation overhaul
   ------------------------------------------------------------------
   The legacy theme stacks three things on separate rows (logo + account
   widget, then a second nav row) with a 300px inline-SVG logo, which made
   a very tall header. This layer puts the logo, the primary nav and the
   account actions on ONE line, shrinks the logo, calms the palette onto
   the design tokens, and fixes the cloned sticky header so it no longer
   drops a full-height copy over the real nav.

   Everything is scoped to the header so nothing else on the site moves.
   ================================================================== */

#header-container {
  background: var(--sc-surface);
  border-bottom: 1px solid var(--sc-line);
}

/* Cap the whole header bar at a compact 72px. #header carries a large
   legacy vertical padding that would otherwise stretch past it; zero it
   so the row height is owned by the container below. */
#header {
  padding: 0;
  max-height: 72px;
}

/* The legacy theme draws its header shadow on a separate .header-bottom
   spacer; with the one-row bar a hairline border is enough. */
.header-bottom {
  box-shadow: none;
}

/* One-row layout. header.fullwidth .container is already display:flex in
   the legacy sheet; we re-state and complete it: logo, nav, actions on a
   single, vertically-centred line that never wraps. */
header.fullwidth .container {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(12px, 2vw, 32px);
  padding: 7px clamp(16px, 2.5vw, 40px);
  min-height: 0;
  max-height: 72px;
}

/* Logo: the inline SVG is hard-coded to width="300"; constrain it so the
   row can breathe. Height-driven so the wordmark keeps its ratio. */
#logo {
  flex: 0 0 auto;
  margin: 0;
  line-height: 0;
}
#logo a { display: inline-flex; align-items: center; }
#logo svg,
#logo img,
#logo .sticky-logo {
  width: auto;
  height: 42px;
  max-width: 160px;
  margin: 0;
  display: block;
}

/* Make the brand mark pop, slightly darker, in the house blue. The inline
   SVG now renders the whole wordmark + house in the same blue
   (rgb(111,164,196)); saturation lifts it to vivid and brightness just
   under 1 keeps it richer rather than washed out. */
#logo svg,
#logo img {
  filter: saturate(1.85) brightness(0.97) contrast(1.06);
}
#header.cloned #logo svg,
#header.cloned #logo img {
  filter: saturate(1.85) brightness(0.97) contrast(1.06);
}

/* Primary nav: drop the legacy float/margins and let it sit inline.
   The nav is the flexible middle column; it must be allowed to shrink
   (min-width:0) and scroll rather than shove the account actions off the
   right edge of the row. */
/* The nav-widget is the flexible middle column: basis 0 lets it shrink so
   the account actions always keep their space on the right. */
.nav-widget {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
}
/* The whole header row must be allowed to grow taller when the nav wraps
   onto a second line. */
header.fullwidth .container { align-items: center; }
#navigation.style-1 {
  float: none;
  margin: 0;
  padding: 0;
  width: 100%;
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  /* MUST stay visible: the dropdown menus are absolutely positioned below
     the bar, and any non-visible overflow anywhere on the chain clips
     them (overflow-x:auto forces overflow-y:auto, which is what hid the
     dropdowns). The nav is kept in-bounds by letting the ul shrink
     instead of scroll (see below). */
  overflow: visible;
}
#navigation.style-1 > ul#responsive {
  float: none;
  display: flex;
  /* The nav needs ~1125px of content but the header only leaves it ~635px
     at 1280 wide, so allow the items to WRAP onto a second line rather
     than overlap, ellipsis, or scroll (scrolling would clip the dropdown
     menus). */
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 2px;
  margin: 0;
  padding: 0;
  width: 100%;
  min-width: 0;
}
#navigation.style-1 ul#responsive > li {
  float: none;
  margin: 0;
  white-space: nowrap;
  flex: 0 0 auto;
}
/* Keep the nav tidy like a modern travel site: plain text links with a
   simple colour change on hover (no boxy pill fill behind each item). */
#navigation.style-1 ul#responsive > li > a {
  display: inline-flex;
  align-items: center;
  padding: 6px 8px;
  border-radius: 0;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--sc-body);
  line-height: 1.2;
  transition: color .15s ease;
}
#navigation.style-1 ul#responsive > li > a:hover,
#navigation.style-1 ul#responsive > li.current > a {
  color: var(--sc-primary-strong);
  background: transparent;
}
/* The caret arrow that the legacy sheet injects via FontAwesome. */
#navigation.style-1 ul#responsive > li > a .caret,
#navigation.style-1 ul#responsive > li > a:after {
  color: currentColor;
  opacity: .5;
}

/* ---- "Menu" button + dropdown (Vrbo-style nav cleanup) ----
   Collapse all the primary links behind one Menu button in the top bar.
   The button drops open a clean panel under the bar listing every item
   (submenus nested as their own group). Only the tightest essentials stay
   in the bar: logo + Menu + the account actions on the right. On mobile
   the existing hamburger drawer already hides the items, so this widget is
   desktop-only. */
@media (min-width: 1071px) {
  /* Hide the inline pill of links on desktop; they live in the panel. */
  #navigation.style-1.sc-inline-hidden > ul#responsive { display: none; }
}
.sc-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--sc-line);
  border-radius: var(--sc-radius-pill);
  background: var(--sc-surface);
  color: var(--sc-ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.sc-menu-toggle:hover,
.sc-menu-toggle.open {
  border-color: var(--sc-primary);
  color: var(--sc-primary-strong);
  background: var(--sc-primary-soft);
}
.sc-menu-toggle i { font-size: 15px; }
.sc-menu-toggle span { display: inline-block; }
.sc-nav-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1200;
  background: var(--sc-surface);
  border-bottom: 1px solid var(--sc-line);
  box-shadow: var(--sc-shadow-md);
  padding: 16px clamp(16px, 4vw, 60px) 18px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.sc-nav-panel.open {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.sc-nav-panel__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 4px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sc-nav-panel__item a {
  display: block;
  padding: 9px 10px;
  color: var(--sc-ink);
  font-weight: 500;
  font-size: 15px;
  border-radius: var(--sc-radius-md);
  text-decoration: none;
}
.sc-nav-panel__item > a:hover { background: var(--sc-primary-soft); color: var(--sc-primary-strong); }
.sc-nav-panel__sub { list-style: none; margin: 2px 0 6px 10px; padding: 0; }
.sc-nav-panel__sub a {
  color: var(--sc-muted);
  font-weight: 400;
  font-size: 14px;
  padding: 6px 10px;
}
.sc-nav-panel__sub a:hover { color: var(--sc-primary-strong); }
/* Mobile keeps its hamburger drawer; hide the Menu widget there. */
@media (max-width: 1070px) {
  .sc-menu-toggle,
  .sc-nav-panel { display: none !important; }
}

/* The mobile top-row Sign In is hidden on desktop; the account cluster on
   the right shows it there. It is revealed in the <=1070px block below. */
.sc-mobile-signin { display: none; }

/* Actions cluster (Sign In / Donate / Become a Host). The flex child of
   the row is .right-side, so pin that; .header-widget lays out inside. */
.right-side {
  flex: 0 0 auto;
  width: auto;
  margin-left: auto;
}
.header-widget {
  flex: 0 0 auto;
  height: auto;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  text-align: right;
  width: auto;
}
/* Uniform action buttons: Donate / Become a Host live in .sc-options, the
   Menu toggle and the Sign In cluster are also children of .header-widget.
   Everybody gets the same height and the same gap, all vertically centred
   in the bar, so the four buttons read as one even, aligned row. */
.header-widget .sc-options {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  line-height: normal;
}
.sc-menu-toggle,
.header-widget .button,
.header-widget .button.border,
.header-widget .nav-item-270 {
  height: 40px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
}
/* The legacy sheet nudges .user-menu down 9px (position:relative; top:9px)
   and gives it a 25px right margin, which dropped the Sign In link out of
   line with the Donate / Become a Host buttons. Reset both so everything
   on the row shares one baseline. */
.header-widget .user-menu {
  display: inline-flex;
  align-items: center;
  position: static;
  top: auto;
  margin: 0;
  /* Keep the account/Sign In cluster at the far right, after Donate and
     Become a Host, so the Sign In button is the last action on the row. */
  order: 9;
}
.header-widget .nav-item-270 {
  display: inline-flex;
  align-items: center;
  color: var(--sc-body);
  font-weight: 500;
  padding: 8px 6px;
  white-space: nowrap;
  line-height: 1.2;
}
.header-widget .nav-item-270:hover { color: var(--sc-primary-strong); }

/* Buttons in the header: calm, token-based, no loud fills. */
.header-widget .button,
.header-widget .button.border,
header.fullwidth .header-widget .button {
  min-width: 0;
  margin: 0;
  padding: 8px 12px;
  line-height: 1.2;
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--sc-radius-pill);
  border: 1px solid var(--sc-line);
  background: var(--sc-surface);
  color: var(--sc-ink);
  box-shadow: none;
}
.header-widget .button:hover,
.header-widget .button.border:hover {
  border-color: var(--sc-primary);
  background: var(--sc-primary-soft);
  color: var(--sc-primary-strong);
}
.header-widget .button i { color: currentColor; }

/* Dropdown menus: white surface, one soft shadow, token text. */
#navigation.style-1 ul ul {
  margin: 12px 0 0 0;
  background: var(--sc-surface);
  border: 1px solid var(--sc-line);
  box-shadow: var(--sc-shadow-md);
}
#navigation.style-1 ul ul a { color: var(--sc-body); }
#navigation.style-1 ul ul li:hover a { color: var(--sc-primary-strong); }
#navigation.style-1 ul ul li:hover { background: var(--sc-primary-tint); }

/* ---- Sticky header clone ----
   The theme clones #header into #header.cloned and fixes it to the top.
   It sized the clone's logo via "#header.cloned #logo img", which never
   matched the inline SVG, so the clone rendered full-size and dropped over
   the real nav. Pin the clone to a single compact row instead. */
#header.cloned {
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--sc-line);
  box-shadow: 0 4px 16px rgba(34, 48, 60, .08);
  padding: 6px 0;
}
#header.cloned .container {
  min-height: 56px;
  padding-top: 4px;
  padding-bottom: 4px;
}
#header.cloned #logo svg,
#header.cloned #logo img,
#header.cloned #logo .sticky-logo {
  height: 34px;
  max-width: 132px;
}
/* The clone ships the full nav + actions; keep them on the one row. */
#header.cloned #navigation.style-1 { margin: 0; }

/* Below the legacy breakpoint (1070px) the one-row header can't hold
   logo + full nav + actions, so fall back to the theme's hamburger.
   Mobile top row is just: logo (left) + hamburger (right). The Donate /
   Become a Host / Sign In actions move out of the row into
   .sc-options-mobile below it (the legacy sheet already shows that block
   at this width), so the hamburger is never squashed by the buttons.
   The legacy .mmenu-trigger was absolutely positioned at top:77px, which
   parked it on top of those buttons — reset it to sit inline in the row. */
@media (max-width: 1070px) {
  header.fullwidth .container {
    flex-wrap: nowrap;
    align-items: center;
    row-gap: 0;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  /* The full desktop nav is replaced by the mmenu drawer. */
  #navigation.style-1 {
    display: none;
  }

  /* Hide the desktop account cluster in the row; its mobile twin below
     the row carries the same links. */
  .right-side#responsive {
    display: none !important;
  }

  /* The nav-widget carries Sign In + the hamburger, pushed to the right
     of the row (logo stays left). */
  .nav-widget {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
    flex: 0 0 auto;
  }
  /* Compact Sign In sitting between the logo and the hamburger. */
  .sc-mobile-signin {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 6px;
    color: var(--sc-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
  }
  .sc-mobile-signin i { font-size: 14px; color: var(--sc-primary-strong); }
  .sc-mobile-signin:hover { color: var(--sc-primary-strong); }
  /* Drop the duplicate Sign In from the block below the row (its Donate /
     Become a Host buttons stay). */
  .sc-options-mobile .nav-item-270,
  .sc-options-mobile .user-menu .nav-item-270 {
    display: none !important;
  }

  /* Hamburger: inline in the row, fixed square, never overlapping. */
  .mmenu-trigger {
    position: static !important;
    top: auto !important;
    right: auto !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    background: var(--sc-surface-sunken);
    border: 1px solid var(--sc-line);
    border-radius: var(--sc-radius-md);
    cursor: pointer;
  }
  .mmenu-trigger .hamburger {
    top: 0;
    left: 0;
    transform: none;
    -moz-transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: 0;
  }
  .mmenu-trigger .hamburger-box { width: 24px; height: 18px; }
  .mmenu-trigger .hamburger-inner,
  .mmenu-trigger .hamburger-inner::before,
  .mmenu-trigger .hamburger-inner::after {
    width: 24px;
    height: 3px;
    background-color: var(--sc-ink);
  }
  /* Centre the middle line and space the three lines evenly. The legacy
     sheet leaves the middle line at an off-centre top (17px in an 18px
     box), which skews the whole icon and makes the top gap read bigger. */
  .mmenu-trigger .hamburger-inner {
    top: 50%;
    margin-top: -2px;
    left: 0;
    bottom: auto;
  }
  .mmenu-trigger .hamburger-inner::before { top: -7px; bottom: auto; }
  .mmenu-trigger .hamburger-inner::after { bottom: -7px; top: auto; }

  /* Logo keeps its small size but is allowed to take the left space. */
  #logo {
    width: auto !important;
    margin: 0;
  }
  #logo svg,
  #logo img { height: 38px; max-width: 150px; }

  /* Mobile action block below the row: keep it tight. The old three-row
     stack (Donate/Host, then Sign In) left a tall empty band under the
     buttons; Sign In now lives in the top row, so drop the now-empty
     wrapper and trim the padding. */
  /* The legacy mobile sheet pins the header to a fixed 230px height, which
     is what left a tall empty band under the buttons. Let it size to its
     content instead. */
  #header-container,
  #header {
    height: auto !important;
  }
  .sc-options-mobile {
    padding: 0 0 10px;
    margin: 0;
    line-height: 0;
  }
  .sc-options-mobile > div {
    margin: 0 !important;
    line-height: normal;
  }
  .sc-options-mobile .button {
    margin: 0 6px !important;
    min-width: 0;
  }
  /* Tighten the header block itself under the row. */
  #header { padding-bottom: 0; }
  header.fullwidth .container { padding-bottom: 6px; }

  /* The desktop rule sets #header{max-height:72px}; on mobile that clips
     the Donate / Become a Host row below the capsule and leaves it hanging
     over the hero slider with a transparent background. Lift the cap, put
     the mobile nav on a solid surface, and give both rows real padding so
     the buttons never overlap the hero slider images. */
  #header {
    max-height: none;
    height: auto;
    background: var(--sc-surface);
    border-bottom: 1px solid var(--sc-line);
  }
  header.fullwidth .container {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .sc-options-mobile {
    padding: 12px 0 16px;
    margin-top: 4px;
    border-top: 1px solid var(--sc-line);
  }
  .sc-options-mobile .button { margin-top: 0; }
}

/* ==================================================================
   14. Hospitality Homes: sticky Airbnb-style filter/search bar
   ------------------------------------------------------------------
   Scoped to the homes page template so nothing else moves. The bar sits
   in the normal flow and then sticks to the top of the viewport under the
   (also sticky) site header as the guest scrolls, on desktop and mobile.
   ================================================================== */

/* The page template wrapper is the positioning root for the sticky bar. */
.page-template-hospitality-homes-new #header-container { z-index: 1200; }

/* ---- AirBnB-style pill bar ---- */
.page-template-hospitality-homes-new .sc-filter__toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  padding: 5px;
  background: var(--sc-surface);
  border: 1px solid var(--sc-line);
  border-radius: var(--sc-radius-pill);
  box-shadow: var(--sc-shadow-md);
  font-family: var(--sc-font-body);
  cursor: pointer;
  overflow-x: auto;
  scrollbar-width: none;
}
.page-template-hospitality-homes-new .sc-filter__toggle::-webkit-scrollbar { display: none; }

/* Each segment reads like an Airbnb search pill. */
.page-template-hospitality-homes-new .sc-searchbar__pill,
.page-template-hospitality-homes-new .sc-searchbar__filters {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
  padding: 8px 18px;
  border-radius: var(--sc-radius-pill);
  background: transparent;
  text-align: left;
  white-space: nowrap;
  transition: background-color .15s ease;
}
.page-template-hospitality-homes-new .sc-searchbar__pill:hover { background: var(--sc-surface-sunken); }

.page-template-hospitality-homes-new .sc-searchbar__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--sc-ink);
  line-height: 1.1;
}
.page-template-hospitality-homes-new .sc-searchbar__value {
  font-size: 13px;
  font-weight: 500;
  color: var(--sc-muted);
  line-height: 1.2;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Divider between the plain search segments, Airbnb-style. */
.page-template-hospitality-homes-new .sc-searchbar__pill + .sc-searchbar__pill {
  border-left: 1px solid var(--sc-line);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.page-template-hospitality-homes-new .sc-searchbar__pill:hover + .sc-searchbar__pill {
  border-left-color: transparent;
}

/* The "Filters" action on the right of the bar. */
.page-template-hospitality-homes-new .sc-searchbar__filters {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sc-ink);
  border: 1px solid var(--sc-line);
  padding: 9px 16px;
}
.page-template-hospitality-homes-new .sc-searchbar__filters i { font-size: 14px; color: var(--sc-primary-strong); }
.page-template-hospitality-homes-new .sc-searchbar__filters .sc-filter__count {
  font-size: 12px;
  font-weight: 500;
  color: var(--sc-muted);
}

/* ---- Sticky behaviour ----
   The bar parks just BELOW the sticky site header rather than at top:0,
   so the two never overlap. The full-width strip is transparent — only the
   centred pill itself carries a background, so it floats over the page
   instead of painting a white band across the screen. */
.page-template-hospitality-homes-new .sc-listing-filters {
  position: sticky;
  /* Height of the sticky header clone (see #header.cloned below). Parking
     the bar here keeps it tucked under the header on scroll. */
  top: var(--sc-sticky-header-h, 56px);
  z-index: 1100;
  padding-top: 8px;
  padding-bottom: 8px;
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
}
/* Once it is actually pinned, the pill gets a slightly stronger float. */
.page-template-hospitality-homes-new .sc-listing-filters.is-stuck .sc-filter__toggle {
  box-shadow: var(--sc-shadow-lg);
}

/* Below the full-width (>=1200px) layout the filter column is still a
   narrow Bootstrap sidebar, which would squeeze the pill bar. Make it a
   full-width strip above the results at every width, so the bar reads the
   same everywhere and the results flow underneath it. */
@media (max-width: 1199px) {
  /* Order: sticky search bar, then the map, then the cards, so a guest
     sees where the homes are before scrolling into the list. */
  .page-template-hospitality-homes-new .sc-listing-layout {
    display: flex;
    flex-direction: column;
  }
  .page-template-hospitality-homes-new .sc-listing-layout > .sc-listing-filters { order: 1; }
  .page-template-hospitality-homes-new .sc-listing-layout > .sc-map-column { order: 2; }
  .page-template-hospitality-homes-new .sc-listing-layout > .sc-listing-results { order: 3; }

  .page-template-hospitality-homes-new .sc-listing-layout > .sc-listing-filters {
    float: none;
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }
  .page-template-hospitality-homes-new .sc-listing-filters #sidebar { padding-top: 0 !important; }
  .page-template-hospitality-homes-new .sc-listing-layout > .sc-listing-results {
    float: none;
    width: 100%;
    max-width: 100%;
  }
  /* Below the 1200px full-width layout the map is out of the sidebar and
     leads above the cards, so give it a fixed, usable height at every
     width down to the phone breakpoint (Leaflet needs an explicit
     height or it collapses to zero). */
  .page-template-hospitality-homes-new .sc-map-column {
    float: none;
    width: 100% !important;
    max-width: 100% !important;
    position: static;
    height: auto;
  }
  .page-template-hospitality-homes-new .sc-map-column #map-container {
    width: 100%;
    height: auto;
  }
  .page-template-hospitality-homes-new .sc-map-column #map {
    width: 100% !important;
    height: 380px !important;
    min-height: 380px;
  }
}

@media (max-width: 1070px) {
  /* On mobile the bar scrolls horizontally inside its own track. */
  .page-template-hospitality-homes-new .sc-filter__toggle {
    justify-content: flex-start;
    margin: 0;
    border-radius: var(--sc-radius-pill);
  }
  .page-template-hospitality-homes-new .sc-searchbar__value { max-width: 130px; }
}

/* ==================================================================
   15. Homepage: "How can we serve you?" section
   ------------------------------------------------------------------
   The legacy markup renders three bare .icon-box-2 blocks straight onto a
   flat blue band with red glyphs and red buttons (both from main-color.css
   and an inline .home-serve rule). This layer keeps the blue band but
   turns each column into a clean white card on the design tokens, with a
   soft blue icon medallion instead of the tacky red. Scoped to .home-serve
   so nothing else on the site is touched.
   ================================================================== */

/* ---- The band ---- */
.home-serve {
  background: linear-gradient(180deg, var(--sc-primary-strong) 0%, var(--sc-primary-deep) 100%);
  padding-top: clamp(48px, 7vw, 88px);
  padding-bottom: clamp(48px, 7vw, 88px);
}

/* ---- Section heading ---- */
.home-serve .headline {
  color: #fff;
  text-align: center;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.home-serve .headline strong,
.home-serve .headline span {
  color: #fff;
}
.home-serve .headline span {
  display: block;
  margin-top: 10px;
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 400;
  opacity: .9;
}
/* Keep the legacy separator line, but make it read on the blue band. */
.home-serve .headline-with-separator { color: #fff; }

/* ---- The three cards ----
   The legacy .row is float-based AND has overflow:hidden, so
   align-items:stretch did nothing and the row clipped whatever the cards
   overflowed. Make the row a flex row (floats no longer matter) and let it
   show overflow so the cards' rounded bottoms and shadows are not cut. */
.home-serve .icons-container {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  overflow: visible;
  /* Columns already carry the 15px Bootstrap gutter as padding, so keep
     column-gap at 0 (no double gutter) and use row-gap for the vertical
     spacing when the cards wrap on tablet/phone. */
  column-gap: 0;
  row-gap: 24px;
}
.home-serve .icons-container > [class*="col-"] {
  display: flex;
}
.home-serve .icons-container > [class*="col-"] > .icon-box-2 {
  width: 100%;
}
.home-serve .icon-box-2 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: clamp(28px, 3vw, 40px) clamp(20px, 2.5vw, 34px);
  text-align: center;
  background: var(--sc-surface);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--sc-radius-lg);
  box-shadow: 0 10px 30px rgba(18, 45, 66, .18);
  transition: transform .22s ease, box-shadow .22s ease;
}
.home-serve .icon-box-2:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 42px rgba(18, 45, 66, .26);
}

/* Icon medallion: the legacy rule made it a 120x80 box with overflow:hidden
   and a 60px glyph, which clipped and mis-centred the glyph. Use a proper
   square circle and centre it with line-height = height. */
.home-serve .icon-box-2 > a {
  display: inline-flex;
  text-decoration: none;
}
.home-serve .icon-box-2 i {
  width: 84px;
  height: 84px;
  line-height: 84px;
  font-size: 40px;
  margin: 0 auto 18px;
  display: inline-block;
  overflow: visible;
  border-radius: 50%;
  color: var(--sc-primary-strong);
  background: var(--sc-primary-soft);
  transition: background-color .2s ease, color .2s ease;
}
.home-serve .icon-box-2:hover i {
  color: #fff;
  background: var(--sc-primary-strong);
}

/* Copy */
.home-serve .icon-box-2 h3 {
  margin: 0 0 10px;
  font-family: var(--sc-font-display);
  font-size: clamp(18px, 1.8vw, 21px);
  font-weight: 600;
  color: var(--sc-ink);
  line-height: 1.3;
}
.home-serve .icon-box-2 p {
  flex: 1 1 auto;
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--sc-body);
}

/* Token-styled button instead of the red pill. */
.home-serve .icon-box-2 .button,
.home-serve .icon-box-2 a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  padding: 0 26px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: var(--sc-primary-strong);
  border: 1px solid var(--sc-primary-strong);
  border-radius: var(--sc-radius-pill);
  box-shadow: none;
  text-decoration: none;
  transition: background-color .18s ease, transform .18s ease;
}
.home-serve .icon-box-2 .button:hover,
.home-serve .icon-box-2 a.button:hover {
  background: var(--sc-primary-deep);
  border-color: var(--sc-primary-deep);
  color: #fff;
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .home-serve .icon-box-2,
  .home-serve .icon-box-2 i,
  .home-serve .icon-box-2 .button { transition: none !important; }
  .home-serve .icon-box-2:hover { transform: none; }
}

/* Stack cleanly on phones with vertical spacing between the cards. */
@media (max-width: 767px) {
  .home-serve .icons-container { row-gap: 20px; }
}

/* ==================================================================
   16. Homepage hero (image-slider banner) + search bar
   ------------------------------------------------------------------
   The banner is a Concrete Image Slider block. Out of the box it sits
   20px below the header (.ccm-image-slider-inner { margin-top:20px }),
   the slide images carry a 15px radius from the block's own view.css,
   and the slider shows prev/next arrows. This layer makes the banner
   full-bleed (edge to edge, no gap, no rounding), hides the arrows, and
   gives the search bar a cleaner, modern treatment. Scoped to the home
   page so nothing else changes.
   ================================================================== */

/* ---- Full-bleed banner ---- */

/* Close the gap between the navbar and the banner. */
.home-search-slider-headlines { margin-top: 0 !important; }
.ccm-image-slider-container { margin-top: 0 !important; margin-bottom: 0 !important; }
.ccm-image-slider-inner { margin-top: 0 !important; }

/* The block wrapper some themes add a bottom margin to. */
.ccm-image-slider-container,
.ccm-image-slider,
.ccm-image-slider-inner,
.ccm-image-slider-inner ul.rslides {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-radius: 0 !important;
}

/* Kill the per-slide rounding + any inset the block ships. */
.ccm-image-slider ul.rslides img,
.ccm-image-slider-inner ul.rslides img,
ul.rslides.rslides1 img {
  width: 100% !important;
  border-radius: 0 !important;
  display: block;
}

/* Hide the prev/next arrows. */
.ccm-image-slider .rslides_nav,
.ccm-image-slider-inner .rslides_nav,
a.rslides_nav {
  display: none !important;
}

/* The block may add a fixed height; let the slides fill edge to edge. */
.ccm-image-slider-inner ul.rslides,
.ccm-image-slider-inner ul.rslides li {
  width: 100% !important;
  border-radius: 0 !important;
}

/* ---- Modern search bar ---- */
.main-search-input {
  max-height: none;
  padding: 8px;
  border-radius: var(--sc-radius-pill, 999px);
  background: rgba(255, 255, 255, .98);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 10px 30px rgba(15, 23, 42, .18);
  align-items: center;
  gap: 0;
}
.main-search-input-item {
  border-right: 1px solid var(--sc-line);
  margin-top: 0;
  padding-left: 12px;
  padding-right: 12px;
  min-width: 0;
  /* Centre the field's contents against the pill height. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  min-height: 46px;
}
.main-search-input .main-search-input-item:nth-last-child(2) {
  border-right: 1px solid var(--sc-line);
  padding-left: 22px;
  padding-right: 22px;
}
/* Chosen replaces the <select> with its own anchor; restyle that so it
   blends into the pill. The legacy theme paints the chosen-single with a
   white bg + border + shadow, and adds a WHITE BORDER + SHADOW again when
   the field is active/open (`.main-search-input-item .chosen-container-
   active.chosen-with-drop .chosen-single`). That open-state box is what
   showed as a stray shadow. Flatten every state to a borderless,
   shadowless, transparent surface. */
.main-search-input .chosen-container,
.main-search-input .main-search-input-item .chosen-container {
  width: 100% !important;
  height: 100%;
}
.main-search-input .chosen-container-single .chosen-single,
.main-search-input-item .chosen-container-active .chosen-single,
.main-search-input-item .chosen-container-active.chosen-with-drop .chosen-single,
.main-search-input .chosen-container-active.chosen-with-drop .chosen-single {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 46px;
  line-height: 1.3;
  padding: 0 24px;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: var(--sc-radius-pill, 999px);
  color: var(--sc-body);
  font-size: 15px;
  text-align: center;
}
/* Centre the visible label both ways. The span is the flex item that
   holds the text, so align its own line with the field height and centre
   it horizontally. */
.main-search-input .chosen-container-single .chosen-single span {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 100%;
  height: 100%;
  margin-right: 0;
  line-height: normal;
  text-align: center;
}
/* The caret holder sits to the right of the centred label. */
.main-search-input .chosen-container-single .chosen-single > div {
  position: absolute;
  top: 0;
  right: 12px;
  height: 100%;
  display: flex;
  align-items: center;
}
.main-search-input .main-search-input-item .chosen-single:after {
  /* legacy rule that painted a white block under the field */
  display: none;
  content: none;
}
.main-search-input .chosen-container .chosen-results { text-align: left; }
/* The dropdown panel itself keeps a soft shadow (it floats), but no border. */
.main-search-input-item .chosen-container .chosen-drop {
  border: 0;
  box-shadow: var(--sc-shadow-lg);
  border-radius: var(--sc-radius-md);
}

/* Primary action: brand pill, comfortable target. */
.main-search-input .button,
.main-search-input button.button,
.main-search-input input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin: 0;
  padding: 0 30px;
  border: 0;
  border-radius: var(--sc-radius-pill, 999px);
  /* Bright saturated blue so the primary action pops against the photo. */
  background: var(--sc-primary-bright);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 6px 16px rgba(26, 143, 216, .35);
  transition: background-color .18s ease, box-shadow .18s ease;
}
.main-search-input .button:hover,
.main-search-input button.button:hover,
.main-search-input input[type="submit"]:hover {
  background: var(--sc-primary-bright-hover);
  color: #fff;
  box-shadow: 0 8px 20px rgba(26, 143, 216, .45);
}

/* ------------------------------------------------------------------
   Mobile hero + search bar
   The desktop search bar lives in a nested .container.search-cont inside
   the slider, which on phones collapses it to a narrow centred blob (the
   "egg"). Break the whole chain out to full width and lay the search out
   as a normal filters bar: full-width stacked fields with a big primary
   button.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  /* Let the slider's inner columns span the full viewport width. */
  .ccm-image-slider-container .container.search-cont,
  .ccm-image-slider-inner .container.search-cont,
  .container.search-cont {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .container.search-cont .col-md-12 {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .container.search-cont form {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* The bar itself: a full-width white panel, not a pill. */
  .main-search-input {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 10px;
    border-radius: var(--sc-radius-lg, 16px);
    background: #fff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .22);
  }

  /* Each field is a full-width row with a divider between them. */
  .main-search-input-item,
  .main-search-input .main-search-input-item:nth-last-child(2) {
    display: block;
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--sc-line);
    padding: 0;
    margin: 0;
    min-height: 0;
  }
  .main-search-input .main-search-input-item:nth-last-child(2) {
    border-bottom: 0;
  }
  .main-search-input .chosen-container {
    width: 100% !important;
    height: auto;
  }
  .main-search-input .chosen-container-single .chosen-single,
  .main-search-input .chosen-container-single .chosen-single span {
    justify-content: flex-start;
    text-align: left;
    width: 100%;
  }
  .main-search-input .chosen-container-single .chosen-single {
    padding: 0 34px 0 8px;
    min-height: 52px;
    font-size: 16px;
  }
  .main-search-input .chosen-container-single .chosen-single > div {
    right: 8px;
  }
  .main-search-input .chosen-container-single .chosen-single span {
    display: block;
    line-height: 52px;
    height: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Big, obvious primary button. */
  .main-search-input .button,
  .main-search-input button.button,
  .main-search-input input[type="submit"] {
    display: flex;
    width: 100%;
    min-height: 52px;
    margin: 8px 0 0;
    font-size: 16px;
  }

  /* Hero height on mobile is tight: just the headline, then the search
     bar right beneath it. Too tall and the bar floats far below the
     headline (the old 560px did exactly that). */
  .ccm-image-slider-container .ccm-image-slider-inner ul.rslides,
  .ccm-image-slider-container .ccm-image-slider-inner ul.rslides li,
  .ccm-image-slider-container .ccm-image-slider-inner ul.rslides img {
    height: 430px !important;
  }
  .ccm-image-slider-container .home-search-slider-headlines {
    top: 0;
    bottom: auto;
    padding: 18px 16px 0 !important;
    text-align: center;
  }
  .ccm-image-slider-container .home-search-slider-headlines h3 {
    font-size: 24px;
    line-height: 1.2;
    text-align: center;
  }
  /* Anchor the search bar close under the headline, and pin it to the
     full viewport width. The legacy rule centres the container with
     left/right offsets (left:117px; right:-117px on a phone) which shoved
     the bar off the right edge — reset both to 0. */
  .home-search-carousel .container.search-cont,
  .container.search-cont {
    top: auto !important;
    bottom: 14px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    transform: none !important;
    padding: 0 12px !important;
  }
}

/* ==================================================================
   17. Back-to-top button
   ------------------------------------------------------------------
   The theme already ships #backtotop (footer.php) with show/hide JS in
   custom.js. It worked, but it sat in the exact bottom-right corner where
   the "Need Help?" bubble lives (z-index 9999), so the bubble covered it.
   Lift it above the bubble, give it the brand look, and show it on mobile
   too (the legacy sheet hid it under 767px).
   ================================================================== */
#backtotop {
  /* Stack above the Need Help bubble (which is bottom:24px, ~52px tall). */
  bottom: 92px;
  right: 0;
  margin: 0 24px 0 0;
  z-index: 9998;              /* below Need Help (9999) but above content */
}
#backtotop a {
  width: 48px;
  height: 48px;
  /* Centre the caret with flexbox; the legacy rule centred it with
     top:50% + translateY(-55%) which fought the new layout. */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;               /* the ⭡ glyph is drawn via ::after */
  line-height: 1;
  background-color: var(--sc-primary-strong, #1e6b9e);
  box-shadow: 0 6px 16px rgba(45, 93, 128, .3);
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
#backtotop a:hover {
  background-color: var(--sc-primary-deep, #234b68);
  box-shadow: 0 8px 20px rgba(45, 93, 128, .4);
  transform: translateY(-2px);
}
/* Reset the legacy positioning/transform so the glyph sits dead centre. */
#backtotop a:after {
  position: static;
  display: block;
  top: auto;
  -webkit-transform: none;
  transform: none;
  font-size: 22px;
  line-height: 1;
  color: #fff;
}

/* Keep it available on phones too (legacy hides it below 767px) and tuck
   it under the Need Help bubble, which is smaller there. */
@media (max-width: 767px) {
  #backtotop { display: block; bottom: 74px; margin-right: 12px; }
  #backtotop a { width: 42px; height: 42px; }
  #backtotop a:after { font-size: 20px; }
}

/* ==================================================================
   18. Primary CTA "pop" celebration
   ------------------------------------------------------------------
   A short scale pulse plus an expanding ring on click, applied to the
   site's primary call-to-action buttons (search, Find a Home, Request
   Booking, etc.). Purely decorative and skipped when the OS asks for
   reduced motion. The JS in footer.php adds .sc-pop on click; the ring is
   drawn with a ::after so no extra markup is needed.
   ================================================================== */
.sc-cta-pop {
  position: relative;               /* ring anchors to the button */
  overflow: visible;
  will-change: transform;
}
.sc-cta-pop.sc-pop {
  animation: sc-cta-pulse .42s cubic-bezier(.2, .8, .3, 1);
}
@keyframes sc-cta-pulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.08); }
  65%  { transform: scale(.97); }
  100% { transform: scale(1); }
}
/* Expanding celebration ring. */
.sc-cta-pop.sc-pop::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid currentColor;
  opacity: .55;
  pointer-events: none;
  animation: sc-cta-ring .55s ease-out forwards;
}
@keyframes sc-cta-ring {
  0%   { transform: scale(1);   opacity: .55; }
  100% { transform: scale(1.55); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-cta-pop.sc-pop { animation: none !important; }
  .sc-cta-pop.sc-pop::after { animation: none !important; opacity: 0 !important; }
}

/* ------------------------------------------------------------------
   Hero search: Nights / Travelers as dropdowns on desktop, number fields
   on phones. The block script always creates the number input; WHICH ONE
   SHOWS IS DECIDED HERE, by media query, so the dropdown and the number
   box can never both be visible at the same time.

   Desktop (default): dropdown visible, number field hidden.
   Mobile (<=767px): dropdown hidden, number field visible.
   ------------------------------------------------------------------ */
.main-search-input .sc-number-field {
  display: none;               /* desktop: the Chosen dropdown is used */
  width: 100%;
  height: 52px;
  min-height: 52px;
  padding: 0 8px;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--sc-body);
  font-family: var(--sc-font-body);
  font-size: 16px;
  line-height: 52px;
}
.main-search-input .sc-number-field:focus {
  outline: none;
}
.main-search-input .sc-number-field::placeholder {
  color: var(--sc-muted);
  opacity: 1;
}
/* Chrome/Safari spinner is noisy on the mobile bar; hide it. */
.main-search-input .sc-number-field::-webkit-outer-spin-button,
.main-search-input .sc-number-field::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.main-search-input .sc-number-field { -moz-appearance: textfield; appearance: textfield; }

/* Phones: show the number field, hide its dropdown. */
@media (max-width: 767px) {
  .main-search-input .sc-has-number .sc-number-field { display: block; }
  .main-search-input .sc-has-number .chosen-container { display: none !important; }
  .main-search-input .sc-has-number > select { display: none !important; }
}

/* ------------------------------------------------------------------
   Mobile: Featured Hospitality Homes
   Hide the "Featured Hospitality Homes" heading + blurb on phones and
   let the homes carousel sit on its own right under the hero, instead of
   wasting the first screen on a title block.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .sc-featured-heading { display: none !important; }
  .sc-featured-carousel .row { margin-top: 0 !important; }
  .sc-featured-carousel { padding-top: 24px; }
}

/* ------------------------------------------------------------------
   Fix: "Show More / Show Less" chevron on the property pages
   The markup used `fa fa-angle-down`. The site resolves `fa` to
   "Font Awesome 5 Free", where the solid glyph needs the `fas` class and
   font-weight 900 (or `far` at 400). With bare `fa` + the legacy
   weight:500 the glyph rendered empty, i.e. a broken icon. Force the
   solid weight and colour here so it renders regardless of class.
   ------------------------------------------------------------------ */
.show-more-button i {
  font-weight: 900 !important;
  color: var(--sc-primary-strong, #2d5d80);
}

/* ==================================================================
   19. "Need Help?" modal — bring it onto the brand
   ------------------------------------------------------------------
   Legacy .modal-newsletter paints the icon medallion and the submit
   button in the tacky #E25943 red and uses square inputs. Scoped to
   #scHelpModal so nothing else changes. Uses the same tokens, radii and
   button language as the rest of the overhaul.
   ================================================================== */
#scHelpModal .modal-content {
  border: 0;
  border-radius: var(--sc-radius-lg);
  box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
  padding: 34px 34px 30px;
}
#scHelpModal .modal-header {
  border-bottom: 0;
  padding: 0;
}
/* Icon medallion: soft brand-blue circle instead of the red glyph. */
#scHelpModal .icon-box {
  color: var(--sc-primary-strong, #2d5d80);
  width: 76px;
  height: 76px;
  margin: 0 auto 6px;
  border-radius: 50%;
  background: var(--sc-primary-soft, #eaf2f8);
  display: grid;
  place-items: center;
}
#scHelpModal .icon-box i {
  font-size: 34px;
  line-height: 1;
}
#scHelpModal .modal-body { padding: 0; }
#scHelpModal h4 {
  font-family: var(--sc-font-display);
  color: var(--sc-ink);
  font-size: 24px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -.01em;
  margin: 6px 0 6px;
}
#scHelpModal .modal-body > p {
  color: var(--sc-muted);
  font-size: 15px;
  margin: 0 0 4px;
}
/* Close button: quiet, top-right. */
#scHelpModal .modal-header .close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sc-surface-sunken);
  color: var(--sc-muted);
  opacity: 1;
  font-size: 20px;
  line-height: 1;
  text-shadow: none;
  display: grid;
  place-items: center;
}
#scHelpModal .modal-header .close:hover {
  background: var(--sc-line);
  color: var(--sc-ink);
  opacity: 1;
}
/* Inputs: token styled, left aligned, comfortable height. */
#scHelpModal .form-group { margin: 14px 0 0; }
#scHelpModal .form-control {
  min-height: 48px;
  border: 1px solid var(--sc-line);
  border-radius: var(--sc-radius-md);
  background: var(--sc-surface);
  color: var(--sc-ink);
  font-size: 15px;
  text-align: left;
  padding: 12px 14px;
  box-shadow: none;
}
#scHelpModal textarea.form-control { min-height: 120px; resize: vertical; }
#scHelpModal .form-control:focus {
  border-color: var(--sc-primary);
  box-shadow: var(--sc-focus-ring);
}
#scHelpModal .form-control::placeholder { color: var(--sc-muted); opacity: 1; }
/* Submit: brand pill. */
#scHelpModal .btn,
#scHelpModal .btn:active,
#scHelpModal .btn:focus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 180px;
  margin-top: 22px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--sc-radius-pill);
  background: var(--sc-primary-strong) !important;
  color: #fff;
  font-family: var(--sc-font-body);
  font-size: 15px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: none;
}
#scHelpModal .btn:hover {
  background: var(--sc-primary-deep) !important;
  color: #fff;
}
#scHelpModal .sc-help-success {
  margin-top: 14px;
  border-radius: var(--sc-radius-md);
}

@media (max-width: 600px) {
  #scHelpModal .modal-content { padding: 26px 22px 24px; }
  #scHelpModal .modal-newsletter { width: 100%; }
}