/* Child Theme Custom CSS */

/* ============================================
   MAKE STICKY HEADER LOGO LARGER
   ============================================ */

/* Modern Design - Sticky Header Logo */
body .rh_mod_sticky_header .rh_sticky_header_logo img,
body .rh_mod_sticky_header.sticked .rh_sticky_header_logo img,
body .rh_mod_sticky_header .rh_sticky_header_logo a img,
body .rh_mod_sticky_header.sticked .rh_sticky_header_logo a img {
  max-height: 80px !important;
  height: auto !important;
  width: auto !important;
  max-width: 300px !important;
  object-fit: contain !important;
}

/* Modern Design - Logo Container */
body .rh_mod_sticky_header .rh_sticky_header_logo,
body .rh_mod_sticky_header.sticked .rh_sticky_header_logo {
  display: flex !important;
  align-items: center !important;
  height: auto !important;
  min-height: 80px !important;
}

body .rh_mod_sticky_header .rh_sticky_header_logo a,
body .rh_mod_sticky_header.sticked .rh_sticky_header_logo a {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 80px !important;
}

/* Classic Design - Sticky Header Logo */
body .rh_classic_sticky_header .header_logo img,
body .rh_sticky_header_container .header_logo img,
body .rh_sticky_header_container .header_logo .site-logo img,
body .rh_sticky_header_container .header_logo a img {
  max-height: 80px !important;
  height: auto !important;
  width: auto !important;
  max-width: 300px !important;
  object-fit: contain !important;
}

/* Classic Design - Logo Container */
body .rh_classic_sticky_header .header_logo,
body .rh_sticky_header_container .header_logo {
  display: flex !important;
  align-items: center !important;
  height: auto !important;
  min-height: 80px !important;
}

/* Classic Design - Logo Link */
body .rh_classic_sticky_header .header_logo a,
body .rh_sticky_header_container .header_logo a,
body .rh_classic_sticky_header .header_logo .site-logo,
body .rh_sticky_header_container .header_logo .site-logo {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 80px !important;
}

/* Ultra Design - Sticky Header Logo */
body .rh-sticky-header .site-logo img,
body .rh-sticky-header.sticked .site-logo img,
body .rh-sticky-header .rh-ultra-header-wrapper .site-logo img,
body .rh-sticky-header .site-logo a img {
  max-height: 80px !important;
  height: auto !important;
  width: auto !important;
  max-width: 300px !important;
  object-fit: contain !important;
}

/* Ultra Design - Logo Container */
body .rh-sticky-header .site-logo,
body .rh-sticky-header.sticked .site-logo,
body .rh-sticky-header .rh-ultra-header-wrapper .site-logo {
  display: flex !important;
  align-items: center !important;
  height: auto !important;
  min-height: 80px !important;
}

/* Ultra Design - Logo Link */
body .rh-sticky-header .site-logo a,
body .rh-sticky-header.sticked .site-logo a,
body .rh-sticky-header .rh-ultra-header-wrapper .site-logo a {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 80px !important;
}


/* ============================================
   ORANGE COUNTY UTILITIES TABLE - RESPONSIVE DROPDOWNS
   ============================================ */

/* Orange County Utilities Table - Responsive Styles */
table.center-table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

table.center-table th,
table.center-table td {
    padding: 12px 8px;
    text-align: left;
    border: 1px solid #ddd;
    word-wrap: break-word;
}

table.center-table th {
    background-color: #f5f5f5;
    font-weight: bold;
}

table.center-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* Mobile: Hide original table, show dropdown version */
@media (max-width: 768px) {
    table.center-table {
        display: none !important;
    }
    
    .utilities-dropdown-container {
        display: block !important;
    }
}

/* Desktop: Hide dropdown version, show table */
@media (min-width: 769px) {
    .utilities-dropdown-container {
        display: none !important;
    }
    
    table.center-table {
        display: table !important;
    }
}

/* Dropdown Styles */
.utilities-dropdown-container {
    margin: 20px 0;
}

.utility-city-item {
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    background-color: #fff;
}

.utility-city-header {
    padding: 15px;
    background-color: #f5f5f5;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    transition: background-color 0.3s ease;
}

.utility-city-header:hover {
    background-color: #e9e9e9;
}

.utility-city-header.active {
    background-color: #143F77;
    color: #fff;
}

.utility-city-header::after {
    content: '+';
    font-size: 20px;
    font-weight: bold;
    transition: transform 0.3s ease;
}

.utility-city-header.active::after {
    content: '−';
    transform: rotate(0deg);
}

.utility-city-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.utility-city-content.active {
    max-height: 2000px;
}

.utility-list {
    padding: 15px;
    list-style: none;
    margin: 0;
}

.utility-list li {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.utility-list li:last-child {
    border-bottom: none;
}

.utility-label {
    font-weight: bold;
    color: #333;
    display: inline-block;
    min-width: 80px;
    margin-right: 10px;
}

.utility-value {
    color: #666;
}

/* Hide sidx-details-table__friends */
.sidx-details-table__friends {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Hide sidx-details-table__timeline (Recent Activity section on listing pages) */
.sidx-details-table__timeline {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Hide empty SIDX rows / groups / headings flagged by rt-empty-hider.js */
.rt-empty-row,
.rt-empty-group,
.rt-empty-heading {
    display: none !important;
}


/* ============================================
   ENTRY HEADER FULL WIDTH
   ============================================ */

/* Make entry-header full width on all screen sizes */
.entry-header.blog-post-entry-header {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
}

/* Break out of container to full viewport width */
body .entry-header.blog-post-entry-header {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

/* On mobile, maintain full width with proper padding */
@media (max-width: 767px) {
    body .entry-header.blog-post-entry-header {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box !important;
    }
}

/* ============================================
   RESPONSIVE MENU - VERTICAL DISPLAY FIX
   ============================================ */

/* Ensure responsive menu displays vertically on mobile/tablet devices */
/* This fixes the issue where menu items display horizontally on mobile landscape and iPad */

/* Modern and Classic theme responsive menu */
ul.rh_menu__responsive,
ul.rh_menu__responsive_plain {
    display: block !important;
    flex-direction: column !important;
}

ul.rh_menu__responsive > li,
ul.rh_menu__responsive_plain > li {
    display: block !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
}

/* Ultra theme responsive menu */
.rh-menu-responsive,
.rh-ultra-responsive-nav .rh-menu-responsive {
    display: block !important;
    flex-direction: column !important;
}

.rh-menu-responsive > li,
.rh-ultra-responsive-nav .rh-menu-responsive > li {
    display: block !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
}

/* Media queries for mobile devices in landscape and tablets */
/* Target mobile devices in landscape mode (max-width: 1024px covers most tablets and mobile landscape) */
@media (max-width: 1024px) {
    /* Modern and Classic theme */
    ul.rh_menu__responsive,
    ul.rh_menu__responsive_plain {
        display: block !important;
        flex-direction: column !important;
    }
    
    ul.rh_menu__responsive > li,
    ul.rh_menu__responsive_plain > li {
        display: block !important;
        width: 100% !important;
        float: none !important;
        clear: both !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Ultra theme */
    .rh-menu-responsive,
    .rh-ultra-responsive-nav .rh-menu-responsive {
        display: block !important;
        flex-direction: column !important;
    }
    
    .rh-menu-responsive > li,
    .rh-ultra-responsive-nav .rh-menu-responsive > li {
        display: block !important;
        width: 100% !important;
        float: none !important;
        clear: both !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Specific fix for landscape orientation on mobile devices */
@media (max-width: 1024px) and (orientation: landscape) {
    /* Modern and Classic theme */
    ul.rh_menu__responsive,
    ul.rh_menu__responsive_plain {
        display: block !important;
        flex-direction: column !important;
    }
    
    ul.rh_menu__responsive > li,
    ul.rh_menu__responsive_plain > li {
        display: block !important;
        width: 100% !important;
        float: none !important;
        clear: both !important;
    }
    
    /* Ultra theme */
    .rh-menu-responsive,
    .rh-ultra-responsive-nav .rh-menu-responsive {
        display: block !important;
        flex-direction: column !important;
    }
    
    .rh-menu-responsive > li,
    .rh-ultra-responsive-nav .rh-menu-responsive > li {
        display: block !important;
        width: 100% !important;
        float: none !important;
        clear: both !important;
    }
}

/* iPad specific fix (iPad width is typically 768px-1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Modern and Classic theme */
    ul.rh_menu__responsive,
    ul.rh_menu__responsive_plain {
        display: block !important;
        flex-direction: column !important;
    }
    
    ul.rh_menu__responsive > li,
    ul.rh_menu__responsive_plain > li {
        display: block !important;
        width: 100% !important;
        float: none !important;
        clear: both !important;
    }
    
    /* Ultra theme */
    .rh-menu-responsive,
    .rh-ultra-responsive-nav .rh-menu-responsive {
        display: block !important;
        flex-direction: column !important;
    }
    
    .rh-menu-responsive > li,
    .rh-ultra-responsive-nav .rh-menu-responsive > li {
        display: block !important;
        width: 100% !important;
        float: none !important;
        clear: both !important;
    }
}

/* =========================================================================
   Homepage eyebrows — uniform size (14px)
   Every section eyebrow is forced to the same 14px so they all match. The
   theme uses a 62.5% root (1rem = 10px), so a literal 14px is used to avoid
   rem-base ambiguity. The .elementor-4589 prefix raises specificity to
   (0,2,0) so this beats the page's own single-class !important rules, which
   otherwise pin rt-ab/rt-tm at 1.125rem (11.25px) and rt-gateway at 0.85rem
   (8.5px). The page's inline CSS loads after this file, so equal-specificity
   !important alone would lose — the extra class is what makes this win.
   ========================================================================= */
.elementor-4589 .rt-ab__eyebrow,
.elementor-4589 .rt-tm__eyebrow,
.elementor-4589 .rt-c__eyebrow,
.elementor-4589 .rt-cta__eyebrow,
.elementor-4589 .rt-shs__eyebrow,
.elementor-4589 .rt-gateway__card-eyebrow {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.32em !important;
    text-transform: uppercase !important;
    color: #2F5D62 !important;
}

/* Mobile: keep 14px but tighten tracking so the longer eyebrows
   ("YOUR NEIGHBORHOOD EXPERTS") don't wrap on narrow screens. */
@media (max-width: 767px) {
    .elementor-4589 .rt-ab__eyebrow,
    .elementor-4589 .rt-tm__eyebrow,
    .elementor-4589 .rt-c__eyebrow,
    .elementor-4589 .rt-cta__eyebrow,
    .elementor-4589 .rt-shs__eyebrow,
    .elementor-4589 .rt-gateway__card-eyebrow {
        letter-spacing: 0.18em !important;
    }
}

/* =========================================================================
   Fix tiling on "Our Mission" hero (.elementor-element-e85cfb5)
   The Elementor-generated CSS sets a background-image but no background-size
   or background-repeat on desktop — so when the section grows, the image
   tiles. Force cover/no-repeat at all viewports.
   ========================================================================= */
.elementor-4589 .elementor-element.elementor-element-e85cfb5:not(.elementor-motion-effects-element-type-background),
.elementor-4589 .elementor-element.elementor-element-e85cfb5 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

/* Restore "Our Mission" sections to full hero height */
.elementor-4589 .elementor-element.elementor-element-e85cfb5 > .elementor-container,
.elementor-4589 .elementor-element.elementor-element-5a742dc0 > .elementor-container {
    min-height: 70vh !important;
}

@media (max-width: 767px) {
    .elementor-4589 .elementor-element.elementor-element-e85cfb5 > .elementor-container,
    .elementor-4589 .elementor-element.elementor-element-5a742dc0 > .elementor-container {
        min-height: 50vh !important;
    }
}

/* Vertically center the text in the "Our Mission" hero (e85cfb5), matching
   the section below (5a742dc0).
   Two things are required, confirmed by inspecting the live DOM:
   1. .elementor-section-items-top sets the container's align-items to
      flex-start, so the column only grows to content height (~320px) and never
      fills the 70vh section — leaving nothing to center within. Override the
      container to align-items:stretch so the column fills the full height.
   2. The widget-wrap is a flex-wrap:wrap ROW container, so vertical centering
      uses align-content (not justify-content). */
.elementor-4589 .elementor-element.elementor-element-e85cfb5 > .elementor-container {
    align-items: stretch !important;
}
.elementor-4589 .elementor-element.elementor-element-e85cfb5 > .elementor-container > .elementor-column > .elementor-widget-wrap {
    align-content: center !important;
    align-items: center !important;
}

/* =========================================================================
   Mobile: center the "Search Homes For Sale" hero (.rt-shs).
   ROOT CAUSE: the reveal-animation rule
       .rt-shs.rev .rt-shs__left { padding-left:36px !important; border-left:3px ... !important }
   has NO media query, so it applies at every width. JS adds `.rev` on scroll
   even on phones, so that !important left-padding + gold left-border survives
   the site's own ≤767px mobile rule (which is non-!important and lower in the
   cascade), shifting the eyebrow / title / button to the right.

   To win we must beat specificity (0,3,0)+!important, so we prefix with the
   page wrapper .elementor-4589 → (0,4,0)+!important. Scoped to ≤860px (the
   site's own single-column breakpoint — confirmed in the page's inline CSS:
   "@media(max-width:860px){.rt-shs{grid-template-columns:1fr}") so the
   desktop split is untouched.
   ========================================================================= */
@media (max-width: 860px) {
    /* Sidestep the grid entirely. Something outside the readable stylesheets
       (WP Rocket used-CSS) keeps the grid at two equal tracks even when
       grid-template-columns:1fr is forced, so the left column stays pinned to
       the left half. Switching to a flex COLUMN makes every child full-width
       and stacked, which is the intended mobile layout. */
    .elementor-4589 .rt-shs,
    .elementor-4589 .rt-shs.rev {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 28px !important;
    }
    .elementor-4589 .rt-shs > * {
        width: 100% !important;
        max-width: 100% !important;
    }
    .elementor-4589 .rt-shs .rt-shs__left,
    .elementor-4589 .rt-shs.rev .rt-shs__left {
        padding-left: 0 !important;
        border-left: 0 !important;
        border-top: 3px solid #2F5D62 !important;
        padding-top: 24px !important;
        text-align: center !important;
    }
    /* hide the absolutely-positioned vertical gold bar on mobile */
    .elementor-4589 .rt-shs.rev .rt-shs__left::before {
        display: none !important;
    }
    .elementor-4589 .rt-shs .rt-shs__eyebrow,
    .elementor-4589 .rt-shs .rt-shs__title,
    .elementor-4589 .rt-shs .rt-shs__copy,
    .elementor-4589 .rt-shs .rt-shs__copy p {
        text-align: center !important;
    }

    /* REAL ROOT CAUSE of "shifted to the right / not centered" on phones:
       the title has `white-space:nowrap` + `font-size:clamp(40px,4.2vw,58px)`
       in the page's inline used-CSS. "Search Homes For Sale" is forced onto a
       single unbreakable line that is FAR wider than a ~390px phone viewport.
       text-align:center / align-items:center cannot center a line that is wider
       than its container, so it overflows the right edge AND stretches the flex
       container, dragging the eyebrow/button off-center too. The previous fix
       only touched block alignment, never the nowrap line — so it kept failing
       on a real device while looking "centered" in a desktop iframe box test.
       Here we let the title wrap, scale it down, and contain overflow. */
    .elementor-4589 .rt-shs .rt-shs__title {
        white-space: normal !important;
        font-size: clamp(28px, 8vw, 42px) !important;
        line-height: 1.1 !important;
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }
    /* allow the long letter-spaced eyebrow to wrap rather than overflow */
    .elementor-4589 .rt-shs .rt-shs__eyebrow {
        white-space: normal !important;
        max-width: 100% !important;
        overflow-wrap: break-word !important;
    }
    /* belt-and-braces: keep the hero from ever forcing horizontal scroll */
    .elementor-4589 .rt-shs,
    .elementor-4589 .rt-shs.rev {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}

/* =========================================================================
   Restore diamond rotation on the two .rt-c__diamond ornaments
   ROOT CAUSE: the per-section reveal-animation end state sets
       .elementor-element-XXXX.rev.in .rt-c__diamond { transform: none; }
   which obliterates the base CSS `transform: rotate(45deg)`, leaving the gold
   13×13 ornament rendered as a plain square. The third diamond on the page
   (.rt-cta__ornament-diamond) uses a separate rule and stays correctly
   rotated, which is why only these two look square.
   !important wins because the reveal rules above are NOT marked !important.
   ========================================================================= */
.elementor-4589 .rt-c__diamond {
    transform: rotate(45deg) !important;
}

/* =========================================================================
   "Your Neighborhood Experts" section (elementor-element-5a742dc0).
   GOAL: animation should match the section above ("Our Mission" / e85cfb5),
   which uses the page's native .rev → .rev.in staggered translateY+fade
   reveal. The section above works smoothly because its widgets DON'T carry
   Elementor's `elementor-invisible` class. This one's title and sub widgets
   DO carry it, which is what caused the "loads faded then turns brighter"
   pre-animation flash — Elementor JS holds them at visibility:hidden, then
   removes the class and triggers `animated fadeInUp` on top of the native
   .rev reveal, producing two compounding fades.

   Fix: ONLY disable the Elementor-invisible/animated layer. Leave the native
   .rev reveal alone so this section animates identically to the one above.
   Diamond rotation preserved (the global rule at line ~601 handles it).
   ========================================================================= */
.elementor-4589 .elementor-element-5a742dc0 .elementor-invisible {
    visibility: visible !important;
    opacity: 1 !important;
    animation: none !important;
}
.elementor-4589 .elementor-element-5a742dc0 .animated {
    animation: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* KILL the opacity fade — keep only the slide. White text on a dark
   background looks washed-out during opacity 0 → 1, which is the "slides in
   faded" effect. Forcing opacity:1 through both .rev and .rev.in states
   leaves the native translateY transform animation (and its 1.1s cubic-bezier
   + staggered delays) intact, so the text just slides up smoothly as full
   white the whole way. */
.elementor-4589 .elementor-element-5a742dc0.rev .rt-c__eyebrow,
.elementor-4589 .elementor-element-5a742dc0.rev .rt-c__title,
.elementor-4589 .elementor-element-5a742dc0.rev .rt-c__sub,
.elementor-4589 .elementor-element-5a742dc0.rev .rt-c__actions,
.elementor-4589 .elementor-element-5a742dc0.rev.in .rt-c__eyebrow,
.elementor-4589 .elementor-element-5a742dc0.rev.in .rt-c__title,
.elementor-4589 .elementor-element-5a742dc0.rev.in .rt-c__sub,
.elementor-4589 .elementor-element-5a742dc0.rev.in .rt-c__actions {
    opacity: 1 !important;
}
/* Diamond: same opacity:1, but also preserve rotate(45deg) in both states. */
.elementor-4589 .elementor-element-5a742dc0.rev .rt-c__diamond {
    opacity: 1 !important;
    transform: translateY(24px) rotate(45deg) !important;
}
.elementor-4589 .elementor-element-5a742dc0.rev.in .rt-c__diamond {
    opacity: 1 !important;
    transform: rotate(45deg) !important;
}

/* =========================================================================
   "Still fading" defense — every device measurement reports opacity:1
   throughout, so the user-perceived fade is most likely:
     (a) the brand serif webfont swapping in (FOUT) when the font
         arrives mid-render, causing the title text to re-render and look
         like it "appears" or "fades in"
     (b) the section's dark background image lazy-loading, which makes the
         white text appear higher contrast (perceived as "brightening")
     (c) a residual opacity transition on some ancestor we haven't pinned
   Brute-force all three at once:
   ========================================================================= */
/* (a) Force opacity:1 on every visual descendant of the section — leaves the
   background-overlay alone (it has design opacity 0.25). */
.elementor-4589 .elementor-element-5a742dc0 .elementor-container,
.elementor-4589 .elementor-element-5a742dc0 .elementor-column,
.elementor-4589 .elementor-element-5a742dc0 .elementor-column-wrap,
.elementor-4589 .elementor-element-5a742dc0 .elementor-widget-wrap,
.elementor-4589 .elementor-element-5a742dc0 .elementor-widget,
.elementor-4589 .elementor-element-5a742dc0 .elementor-widget-container,
.elementor-4589 .elementor-element-5a742dc0 .elementor-heading-title,
.elementor-4589 .elementor-element-5a742dc0 .rt-c,
.elementor-4589 .elementor-element-5a742dc0 .rt-c * {
    opacity: 1 !important;
    animation-name: none !important;
}
/* (b) Kill ANY transition that could animate opacity on text widgets. Keep
   transform animation alive via longhand so the slide-up still works. */
.elementor-4589 .elementor-element-5a742dc0 .rt-c__eyebrow,
.elementor-4589 .elementor-element-5a742dc0 .rt-c__title,
.elementor-4589 .elementor-element-5a742dc0 .rt-c__sub,
.elementor-4589 .elementor-element-5a742dc0 .rt-c__diamond,
.elementor-4589 .elementor-element-5a742dc0 .rt-c__actions {
    transition-property: transform !important;
    transition-duration: 1.1s !important;
    transition-timing-function: cubic-bezier(.22,.61,.36,1) !important;
}
/* (c) Force the background image to render fully on initial paint by giving
   the section a stable min-height so lazy-loaded background images don't
   trigger a layout repaint after they arrive. */
.elementor-4589 .elementor-element-5a742dc0 > .elementor-background-overlay {
    transition: none !important;
    opacity: 0.25 !important;
}

/* =========================================================================
   Embedded IDX listings grid — mobile side padding.
   On pages that embed the Showcase IDX search/hotsheet (city pages like
   /laguna-beach/, plus the /homes/ search), the listings grid goes full-bleed
   on mobile — the grid wrapper is 100vw with 0 padding, so cards touch the
   screen edges. Pad the results wrapper so they don't.
   Target .sidx-search-results directly (NOT .sidx-container:has(...)): the grid
   is injected after render and Chromium's :has() invalidation doesn't reliably
   restyle the container for late-added descendants. .sidx-search-results only
   exists in search/grid contexts, so this never touches /homes/listing detail
   pages (padded separately). body+container prefixes raise specificity to beat
   the IDX's own later-loading rules.
   ========================================================================= */
@media (max-width: 768px) {
    body .sidx-container .sidx-search-results {
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   rt-reveal — scroll-triggered fade/slide-in (paired with rt-reveal.js).
   Add [data-reveal] to any element; it animates once on viewport entry.
   ────────────────────────────────────────────────────────────── */
[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
[data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ─────────────────────────────────────────────────────────────
   About block (rt-ab) — 7-step staggered reveal.
   The rt-ab section is the [data-reveal] root; descendants reveal
   on a stagger via transition-delay once the root is .is-revealed.
   ────────────────────────────────────────────────────────────── */
/* Targets are listed by name — not `> *` — so future helper divs added inside .rt-ab are not affected. */
.rt-ab[data-reveal] .rt-ab__media,
.rt-ab[data-reveal] .rt-ab__title,
.rt-ab[data-reveal] .rt-ab__rule {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.rt-ab[data-reveal] .rt-ab__eyebrow,
.rt-ab[data-reveal] .rt-ab__lede,
.rt-ab[data-reveal] .rt-ab__broker,
.rt-ab[data-reveal] .rt-ab__body,
.rt-ab[data-reveal] .rt-ab__btn {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.rt-ab[data-reveal] .rt-ab__media { transform: translateY(0) scale(0.96); }
.rt-ab[data-reveal] .rt-ab__rule  { transform: scaleX(0); transform-origin: left center; transition: opacity 0.5s, transform 0.5s ease-out; }
.rt-ab[data-reveal].is-revealed .rt-ab__media   { opacity: 1; transform: scale(1); transition-delay: 0ms; transition-duration: 0.7s; }
.rt-ab[data-reveal].is-revealed .rt-ab__eyebrow { opacity: 1; transform: translateY(0); transition-delay: 120ms; }
.rt-ab[data-reveal].is-revealed .rt-ab__title   { opacity: 1; transform: translateY(0); transition-delay: 200ms; transition-duration: 0.7s; }
.rt-ab[data-reveal].is-revealed .rt-ab__rule    { opacity: 1; transform: scaleX(1); transition-delay: 420ms; }
.rt-ab[data-reveal].is-revealed .rt-ab__lede    { opacity: 1; transform: translateY(0); transition-delay: 520ms; }
.rt-ab[data-reveal].is-revealed .rt-ab__broker  { opacity: 1; transform: translateY(0); transition-delay: 820ms; }
.rt-ab[data-reveal].is-revealed .rt-ab__body    { opacity: 1; transform: translateY(0); transition-delay: 900ms; }
.rt-ab[data-reveal].is-revealed .rt-ab__btn     { opacity: 1; transform: translateY(0); transition-delay: 980ms; }
@media (prefers-reduced-motion: reduce) {
    .rt-ab[data-reveal] *,
    .rt-ab[data-reveal].is-revealed * { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ─────────────────────────────────────────────────────────────
   rt-reveal — no-JS / script-failure fallback.
   Without <html class="js"> (set by an inline wp_head priority-0 script),
   reveal-hidden elements stay fully visible. This catches the case where
   rt-reveal.js fails to load or throws before adding .is-revealed.
   ────────────────────────────────────────────────────────────── */
html:not(.js) [data-reveal],
html:not(.js) [data-reveal] * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* ─────────────────────────────────────────────────────────────
   About block — portrait image + bottom-centered 1983 gold badge.
   Portrait <img> lives inside .rt-ab__media; the existing 1983
   badge becomes a bottom-centered overlay with a white border ring.
   ────────────────────────────────────────────────────────────── */
.rt-ab__media {
    position: relative;
    /* No width override — let the pre-existing frame from rt-ab's own
       CSS expand to its natural column width (~470px on desktop).
       position:relative is kept so .rt-ab__badge can absolutely-position
       to the bottom-center of the frame. */
}
.rt-ab__portrait {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 8px 28px rgba(27, 85, 112, 0.18);
}
.rt-ab__badge {
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: #2F5D62;
    color: #fff;
    padding: 0.5rem 0.85rem;
    border-radius: 4px;
    text-align: center;
    line-height: 1;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    white-space: nowrap;
    border: 2px solid #fff;
    z-index: 2;
}
.rt-ab__badge-num {
    display: block;
    font-family: 'Marcellus', Georgia, serif;
    font-size: 1.2rem;
    font-weight: 400;
}
.rt-ab__badge-label {
    display: block;
    font-size: 0.55rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.85;
    margin-top: 0.15rem;
}

/* ─────────────────────────────────────────────────────────────
   Buyer/Seller gateway (rt-gateway-section) — Ken-Burns BG zoom
   + staggered card reveal + arrow + hover lift.
   ────────────────────────────────────────────────────────────── */
.rt-gateway-section[data-reveal] .rt-gateway__bg {
    transform: scale(1);
    transition: transform 8s ease-out;
    will-change: transform;
}
.rt-gateway-section[data-reveal].is-revealed .rt-gateway__bg {
    transform: scale(1.03);
}
.rt-gateway-section[data-reveal] .rt-gateway__card {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.rt-gateway-section[data-reveal].is-revealed .rt-gateway__card { opacity: 1; transform: translateY(0); }
.rt-gateway-section[data-reveal].is-revealed .rt-gateway__card:nth-child(1) { transition-delay: 0ms; }
.rt-gateway-section[data-reveal].is-revealed .rt-gateway__card:nth-child(2) { transition-delay: 180ms; }

.rt-gateway__card { transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; }
.rt-gateway__card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0,0,0,0.18); }
.rt-gateway__open-arrow { display: inline-block; transition: transform 0.25s ease, filter 0.25s ease; }
.rt-gateway__card:hover .rt-gateway__open-arrow { transform: translateX(4px); filter: brightness(1.15); }

@media (prefers-reduced-motion: reduce) {
    .rt-gateway-section[data-reveal] .rt-gateway__bg { transform: none !important; transition: none !important; }
    .rt-gateway-section[data-reveal] .rt-gateway__card,
    .rt-gateway-section[data-reveal].is-revealed .rt-gateway__card { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ─────────────────────────────────────────────────────────────
   Final CTA band (.rt-cta) — S1 styling: gold "Let's Talk"
   eyebrow + 54px gold rule below title + 7-step scroll reveal.
   ────────────────────────────────────────────────────────────── */
.rt-cta__eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #2F5D62;
    margin: 0 0 1rem;
    display: block;
    text-align: center;
}
.rt-cta__rule {
    width: 54px;
    height: 2px;
    background: #2F5D62;
    margin: 0.85rem auto 1.1rem;
    display: block;
}
.rt-cta[data-reveal] .rt-cta__eyebrow,
.rt-cta[data-reveal] .rt-cta__title,
.rt-cta[data-reveal] .rt-cta__rule,
.rt-cta[data-reveal] .rt-cta__body,
.rt-cta[data-reveal] .rt-cta__ctas {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.rt-cta[data-reveal] .rt-cta__rule { transform: scaleX(0); transform-origin: left center; }
.rt-cta[data-reveal] .rt-cta__title { transform: translateY(24px); transition-duration: 0.7s; }

.rt-cta[data-reveal].is-revealed .rt-cta__eyebrow { opacity: 1; transform: translateY(0); transition-delay: 0ms; transition-duration: 0.4s; }
.rt-cta[data-reveal].is-revealed .rt-cta__title   { opacity: 1; transform: translateY(0); transition-delay: 150ms; }
.rt-cta[data-reveal].is-revealed .rt-cta__rule    { opacity: 1; transform: scaleX(1); transition-delay: 400ms; transition-duration: 0.4s; }
.rt-cta[data-reveal].is-revealed .rt-cta__body    { opacity: 1; transform: translateY(0); transition-delay: 550ms; }
.rt-cta[data-reveal].is-revealed .rt-cta__ctas    { opacity: 1; transform: translateY(0); transition-delay: 780ms; }

/* Hover lift on primary CTA */
.rt-cta__btn-primary { transition: background 0.25s, transform 0.25s, box-shadow 0.25s; }
.rt-cta__btn-primary:hover { transform: translateY(-2px); background: #3D7A80; box-shadow: 0 8px 22px rgba(47, 93, 98, 0.35); }

@media (prefers-reduced-motion: reduce) {
    .rt-cta[data-reveal] *,
    .rt-cta[data-reveal].is-revealed * { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ─────────────────────────────────────────────────────────────
   Featured listings — "Just Listed" eyebrow above section title.
   The title widget is .elementor-element-7edab64 on post 4589
   (heading widget). ::before injects the eyebrow content.
   ────────────────────────────────────────────────────────────── */
.elementor-element-7edab64 .elementor-heading-title::before {
    content: "Just Listed";
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #2F5D62;
    margin-bottom: 0.4rem;
}

/* ─────────────────────────────────────────────────────────────
   Featured listings — "See All Orange County Homes →" footer link.
   Rendered as a centered uppercase link below the SIDX strip,
   with a gold underline that draws in on hover.
   ────────────────────────────────────────────────────────────── */
.rt-lst__see-all-wrap {
    text-align: center;
    margin: 1.3rem 0 0;
}
.rt-lst__see-all {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0e2c4a;
    text-decoration: none;
    position: relative;
}
.rt-lst__see-all::after {
    content: "";
    display: block;
    width: 0;
    height: 1px;
    background: #2F5D62;
    margin: 0.3rem auto 0;
    transition: width 0.3s ease-out;
}
.rt-lst__see-all:hover::after {
    width: 240px;
}

/* ─────────────────────────────────────────────────────────────
   Neighborhoods grid (.rt-nh) — 5×2 image cards (desktop),
   3×4 tablet, 2×5 mobile. Hover photo zoom + label slide.
   Entrance reveal deliberately omitted (IO broken on this homepage).
   ────────────────────────────────────────────────────────────── */
.rt-nh { padding: 2.2rem 1.5rem; background: #f5f6f8; }
.rt-nh__head { text-align: center; margin-bottom: 1.4rem; }
.rt-nh__eyebrow {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.22em;
    text-transform: uppercase; color: #2F5D62; display: block; margin-bottom: 0.4rem;
}
.rt-nh__title {
    font-family: 'Marcellus', Georgia, serif;
    font-size: 1.85rem; font-weight: 400; color: #0e2c4a; margin: 0;
}
.rt-nh__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.6rem;
    max-width: 1200px;
    margin: 0 auto;
}
.rt-nh__city {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 6px;
    overflow: hidden;
    display: block;
    text-decoration: none;
    color: inherit;
    background: #0e2c4a;
    transition: transform 0.4s ease-out, box-shadow 0.4s ease-out;
}
.rt-nh__city img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease-out;
    display: block;
}
.rt-nh__city:hover img { transform: scale(1.05); }
.rt-nh__city:hover { box-shadow: 0 12px 28px rgba(0,0,0,0.22); }
.rt-nh__scrim {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.55) 75%);
    transition: background 0.3s;
}
.rt-nh__city:hover .rt-nh__scrim { background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.65) 75%); }
.rt-nh__label {
    position: absolute; bottom: 0.6rem; left: 0; right: 0;
    text-align: center; color: #fff; z-index: 1;
    transition: transform 0.3s ease-out;
}
.rt-nh__city:hover .rt-nh__label { transform: translateY(-4px); }
.rt-nh__name {
    display: block;
    font-family: 'Marcellus', Georgia, serif;
    font-size: 0.95rem; font-weight: 400; line-height: 1.05;
    text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
.rt-nh__meta {
    display: block;
    font-size: 0.55rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: #2F5D62; margin-top: 0.2rem;
}

/* Tablet: 3 columns */
@media (max-width: 1023px) and (min-width: 768px) {
    .rt-nh__grid { grid-template-columns: repeat(3, 1fr); }
}
/* Mobile: 2 columns */
@media (max-width: 767px) {
    .rt-nh__grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
    .rt-nh__title { font-size: 1.55rem; }
}

@media (prefers-reduced-motion: reduce) {
    .rt-nh__city, .rt-nh__city img, .rt-nh__scrim, .rt-nh__label { transition: none !important; }
    .rt-nh__city:hover img { transform: none !important; }
}

/* ─────────────────────────────────────────────────────────────
   Reveal safety-net (2026-05-31).
   The About block (.rt-ab) and the Style C bands (.rt-c) carry a legacy
   scroll-reveal that sets their content to opacity:0 until JS adds a
   reveal class. That reveal is unreliable on this page (a shmac/jQuery
   init error + inconsistent IntersectionObserver), so those sections
   intermittently render BLANK — the About text and "Our Mission" band
   were showing empty. Force the content permanently visible. The
   entrance animation is abandoned anyway.

   High specificity + !important is required to beat the post-4589.css
   copy of the hide rule (the "two-copy CSS" gotcha in CLAUDE.md), whose
   .rt-ab.rt-ab-rev hide is opacity:0 !important.

   transform:none is applied only to text elements. The rotated
   .rt-c__diamond and the translateX-centered .rt-ab__badge get opacity
   only, so their own transforms are preserved.
   ────────────────────────────────────────────────────────────── */
html body .rt-ab.rt-ab-rev.rt-ab-scroll .rt-ab__eyebrow,
html body .rt-ab.rt-ab-rev.rt-ab-scroll .rt-ab__title,
html body .rt-ab.rt-ab-rev.rt-ab-scroll .rt-ab__rule,
html body .rt-ab.rt-ab-rev.rt-ab-scroll .rt-ab__lede,
html body .rt-ab.rt-ab-rev.rt-ab-scroll .rt-ab__broker,
html body .rt-ab.rt-ab-rev.rt-ab-scroll .rt-ab__body,
html body .rt-ab.rt-ab-rev.rt-ab-scroll .rt-ab__btn,
html body .elementor .rt-c .rt-c__eyebrow,
html body .elementor .rt-c .rt-c__title,
html body .elementor .rt-c .rt-c__subtitle,
html body .elementor .rt-c .rt-c__actions {
    opacity: 1 !important;
    transform: none !important;
}
html body .elementor .rt-c .rt-c__diamond,
html body .rt-ab.rt-ab-rev.rt-ab-scroll .rt-ab__badge,
html body .rt-ab.rt-ab-rev.rt-ab-scroll .rt-ab__badge--reveal {
    opacity: 1 !important;
}

/* ─────────────────────────────────────────────────────────────
   1983 badge — animated blue accent traveling around the white
   border. The badge gets a transparent border + two stacked
   background paint-areas: the inner gold (padding-box) and a
   conic-gradient that paints the border ring. @property + the
   --rtb-angle custom property animate the conic's starting
   angle so a visible blue arc rotates around the perimeter.
   Falls back to a static white border in browsers without
   @property support (Firefox <128, old Safari) and is paused
   for prefers-reduced-motion.
   ────────────────────────────────────────────────────────────── */
@property --rtb-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
@keyframes rt-ab-badge-trace {
    to { --rtb-angle: 360deg; }
}
html body .rt-ab .rt-ab__badge {
    background:
        linear-gradient(#2F5D62, #2F5D62) padding-box,
        conic-gradient(
            from var(--rtb-angle, 0deg),
            #ffffff 0deg,
            #ffffff 250deg,
            #143F77 305deg,
            #ffffff 360deg
        ) border-box !important;
    border: 2px solid transparent !important;
    animation: rt-ab-badge-trace 3s linear infinite !important;
}
@media (prefers-reduced-motion: reduce) {
    html body .rt-ab .rt-ab__badge {
        animation: none !important;
        background: #2F5D62 !important;
        border: 2px solid #ffffff !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   2026-05-31 polish pass — fix four issues caused by 10px root
   font-size (62.5% trick): rem values landed 60% smaller than
   intended. Replaced with pixel values matching the .rt-c eyebrow
   (14px accent, letter-spacing 4.48px) and title (50px serif)
   reference. Plus button restore, See-All visibility, and image-
   actually-covers-the-card fix.
   ────────────────────────────────────────────────────────────── */

/* Fix 1: Final CTA — restore the gold "Contact Us" button + white phone.
   The site-wide a:link rule was winning the cascade over our class because
   our selector specificity was only (0,1,0). Bump it with html body. */
html body .rt-cta .rt-cta__btn-primary {
    display: inline-block !important;
    background: #2F5D62 !important;
    color: #fff !important;
    padding: 14px 28px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border: 0 !important;
    border-radius: 2px !important;
    box-shadow: 0 6px 20px rgba(47, 93, 98, 0.28);
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    line-height: 1 !important;
}
html body .rt-cta .rt-cta__btn-primary:hover {
    background: #3D7A80 !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(47, 93, 98, 0.35);
}
html body .rt-cta .rt-cta__ctas {
    display: flex !important;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 18px;
}
html body .rt-cta .rt-cta__phone {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: 0.01em !important;
}
html body .rt-cta .rt-cta__phone a {
    color: #2F5D62 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}
html body .rt-cta .rt-cta__phone a:hover {
    color: #ffffff !important;
}

/* Fix 2: "Just Listed" eyebrow — match the .rt-c__eyebrow look (14px gold,
   letter-spacing 4.48px ~= 0.32em, font-weight 700). */
.elementor-element-7edab64 .elementor-heading-title::before {
    content: "Just Listed";
    display: block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #2F5D62;
    margin-bottom: 12px;
}

/* Fix 4: "See All Orange County Homes" — currently #0e2c4a deep-blue on a
   #0e2c4a deep-blue background (invisible). Make it gold to match the
   See-All-style of a footer eyebrow, and bump to 14px. */
html body .rt-lst__see-all-wrap { margin-top: 24px !important; }
html body a.rt-lst__see-all {
    color: #2F5D62 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}
html body a.rt-lst__see-all::after {
    background: #2F5D62 !important;
    height: 1px !important;
}
html body a.rt-lst__see-all:hover {
    color: #ffffff !important;
}
html body a.rt-lst__see-all:hover::after { background: #ffffff !important; width: 280px !important; }

/* Fix 3: Neighborhoods grid — header sizing matches .rt-c bands; cards
   larger gap + more rounded; image is FORCED to cover (the previous
   `height: 100%` was being overridden by an external rule that pinned
   height to the image's natural aspect ratio, leaving a teal strip below
   the photo). Bigger city name + meta. */
/* ─────────────────────────────────────────────────────────────
   Neighborhoods grid (.rt-nh) — MOBILE FIRST.
   Project convention: write mobile defaults first, then layer in
   min-width breakpoints for tablet (≥768) and desktop (≥1024).
   Background matches the dark navy of the .rt-c Style C band above
   so the section ties into the bottom of the page visually.
   ────────────────────────────────────────────────────────────── */

/* ===== Mobile (default — ≤767px) ===== */
html body .rt-nh {
    padding: 48px 16px 56px !important;
    background: #0e2c4a !important;
}
html body .rt-nh__head { text-align: center !important; margin-bottom: 28px !important; }
html body .rt-nh__eyebrow {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.28em !important;
    text-transform: uppercase !important;
    color: #2F5D62 !important;
    display: block !important;
    margin-bottom: 8px !important;
}
html body .rt-nh__title {
    font-family: 'Marcellus', Georgia, serif !important;
    font-size: 28px !important;
    font-weight: 400 !important;
    color: #ffffff !important;
    margin: 0 !important;
    line-height: 1.1 !important;
}
html body .rt-nh__grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}
html body .rt-nh__city {
    position: relative !important;
    aspect-ratio: 4 / 5 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    display: block !important;
    background: #0e2c4a !important;
    transition: transform 0.4s ease-out, box-shadow 0.4s ease-out !important;
}
/* Force the image to actually fill the card. External rule(s) were
   pinning height to the image's natural aspect ratio. !important + the
   max-* overrides defeat the HTML width/height attributes. */
html body .rt-nh__city > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    transition: transform 0.5s ease-out !important;
}
html body .rt-nh__city:hover > img { transform: scale(1.05) !important; }
html body .rt-nh__scrim {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.70) 80%) !important;
    transition: background 0.3s !important;
    z-index: 1 !important;
}
html body .rt-nh__label {
    position: absolute !important;
    bottom: 12px !important;
    left: 0 !important;
    right: 0 !important;
    text-align: center !important;
    color: #fff !important;
    z-index: 2 !important;
    padding: 0 10px !important;
}
html body .rt-nh__name {
    display: block !important;
    font-family: 'Marcellus', Georgia, serif !important;
    font-size: 19px !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;
    color: #fff !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
}
html body .rt-nh__meta {
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: #2F5D62 !important;
    margin-top: 6px !important;
}

/* ===== Tablet (≥768px) ===== */
@media (min-width: 768px) {
    html body .rt-nh { padding: 56px 24px 64px !important; }
    html body .rt-nh__head { margin-bottom: 32px !important; }
    html body .rt-nh__eyebrow { font-size: 13px !important; letter-spacing: 0.30em !important; margin-bottom: 10px !important; }
    html body .rt-nh__title { font-size: 36px !important; }
    html body .rt-nh__grid { grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; max-width: 960px !important; }
    html body .rt-nh__city { border-radius: 12px !important; }
    html body .rt-nh__name { font-size: 22px !important; }
    html body .rt-nh__meta { font-size: 12px !important; margin-top: 7px !important; }
    html body .rt-nh__label { bottom: 18px !important; padding: 0 14px !important; }
}

/* ===== Desktop (≥1024px) — wider grid, larger type ===== */
@media (min-width: 1024px) {
    html body .rt-nh { padding: 64px 32px 80px !important; }
    html body .rt-nh__head { margin-bottom: 40px !important; }
    html body .rt-nh__eyebrow { font-size: 14px !important; letter-spacing: 0.32em !important; margin-bottom: 12px !important; }
    html body .rt-nh__title { font-size: 48px !important; }
    html body .rt-nh__grid { grid-template-columns: repeat(5, 1fr) !important; gap: 20px !important; max-width: 1400px !important; }
    html body .rt-nh__name { font-size: 26px !important; }
    html body .rt-nh__meta { font-size: 13px !important; letter-spacing: 0.18em !important; margin-top: 8px !important; }
    html body .rt-nh__label { bottom: 22px !important; padding: 0 16px !important; }
}

/* ===== Wide desktop (≥1440px) — push the grid out further ===== */
@media (min-width: 1440px) {
    html body .rt-nh__grid { max-width: 1500px !important; gap: 22px !important; }
    html body .rt-nh__title { font-size: 52px !important; }
    html body .rt-nh__name { font-size: 28px !important; }
    html body .rt-nh__meta { font-size: 14px !important; }
}

/* ─────────────────────────────────────────────────────────────
   Neighborhoods grid — slow stagger reveal.
   Cards start invisible+below; when the grid enters the viewport
   (JS adds .rt-nh--in via a scroll listener), each card slides
   up + fades in on a 200ms stagger. Gated on html.js so no-JS
   visitors see the cards immediately (no permanent-invisible
   failure mode).
   ────────────────────────────────────────────────────────────── */
/* Cards fade in one at a time via a keyframe animation triggered when the
   grid scrolls into view. JS adds .rt-nh--anim to the grid; nth-child
   `animation-delay` staggers each card. `animation-fill-mode: both` holds
   the `from` state before the delay (so cards stay invisible until their
   turn) and the `to` state after (so they stay visible). Using @keyframes
   instead of CSS transitions on the inline style because inline `opacity:1`
   wasn't winning the cascade for some reason on this page — animations
   sidestep that entirely. */
@keyframes rt-nh-in {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0);    }
}
html.js body .rt-nh__grid.rt-nh--anim .rt-nh__city {
    animation-name: rt-nh-in !important;
    animation-duration: 1s !important;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
    animation-fill-mode: both !important;
    will-change: opacity, transform;
}
html.js body .rt-nh__grid.rt-nh--anim .rt-nh__city:nth-child(1)  { animation-delay: 0s    !important; }
html.js body .rt-nh__grid.rt-nh--anim .rt-nh__city:nth-child(2)  { animation-delay: 0.22s !important; }
html.js body .rt-nh__grid.rt-nh--anim .rt-nh__city:nth-child(3)  { animation-delay: 0.44s !important; }
html.js body .rt-nh__grid.rt-nh--anim .rt-nh__city:nth-child(4)  { animation-delay: 0.66s !important; }
html.js body .rt-nh__grid.rt-nh--anim .rt-nh__city:nth-child(5)  { animation-delay: 0.88s !important; }
html.js body .rt-nh__grid.rt-nh--anim .rt-nh__city:nth-child(6)  { animation-delay: 1.1s  !important; }
html.js body .rt-nh__grid.rt-nh--anim .rt-nh__city:nth-child(7)  { animation-delay: 1.32s !important; }
html.js body .rt-nh__grid.rt-nh--anim .rt-nh__city:nth-child(8)  { animation-delay: 1.54s !important; }
html.js body .rt-nh__grid.rt-nh--anim .rt-nh__city:nth-child(9)  { animation-delay: 1.76s !important; }
html.js body .rt-nh__grid.rt-nh--anim .rt-nh__city:nth-child(10) { animation-delay: 1.98s !important; }
@media (prefers-reduced-motion: reduce) {
    html.js body .rt-nh__grid.rt-nh--anim .rt-nh__city {
        animation: none !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   Gateway cards (Listing Presentation / Buyer's Presentation)
   — make them MORE PROMINENT. MOBILE FIRST.
   1. Bigger sizing (title 28→40px, CTA 8→14px, more padding).
   2. Scroll-triggered fade-up entrance with 250ms stagger.
   3. Stronger hover: -12px lift, big shadow, +10px arrow travel,
      gold underline draws under title, Ken-Burns BG zoom.
   ────────────────────────────────────────────────────────────── */

/* ===== Mobile (default) — bigger card sizing ===== */
html body .rt-gateway__card {
    position: relative !important;
    min-height: 320px !important;
    padding: 28px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
/* Bigger gap between the two cards so they don't crowd each other. */
html body .rt-gateway__cards {
    gap: 40px !important;
    max-width: 100% !important;
}
@media (min-width: 1024px) {
    html body .rt-gateway__cards { gap: 56px !important; }
}
html body .rt-gateway__card-title {
    font-size: 28px !important;
    line-height: 1.1 !important;
    position: relative !important;
    padding-bottom: 14px !important;
}
/* Gold underline draws under the title on hover */
html body .rt-gateway__card-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    background: #2F5D62;
    transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}
html body .rt-gateway__card:hover .rt-gateway__card-title::after {
    width: 100% !important;
}
html body .rt-gateway__card-desc {
    font-size: 18px !important;
    line-height: 1.5 !important;
    margin-top: 14px !important;
}
html body .rt-gateway__card-cta {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
}
html body .rt-gateway__open-arrow {
    display: inline-block !important;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.4s ease !important;
}
/* Stronger hover */
html body .rt-gateway__card:hover {
    transform: translateY(-12px) !important;
    box-shadow: 0 28px 64px rgba(0, 0, 0, 0.35) !important;
}
html body .rt-gateway__card:hover .rt-gateway__open-arrow {
    transform: translateX(10px) !important;
    filter: brightness(1.25) !important;
}
/* Ken-Burns BG zoom on hover — applies to .rt-gateway__bg if present */
html body .rt-gateway-section { overflow: hidden; }
html body .rt-gateway__bg {
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
html body .rt-gateway-section:hover .rt-gateway__bg {
    transform: scale(1.04) !important;
}

/* ===== Tablet (≥768px) ===== */
@media (min-width: 768px) {
    html body .rt-gateway__card { min-height: 360px !important; padding: 32px !important; }
    html body .rt-gateway__card-title { font-size: 34px !important; padding-bottom: 16px !important; }
    html body .rt-gateway__card-desc { font-size: 19px !important; }
    html body .rt-gateway__card-cta { font-size: 13px !important; }
}

/* ===== Desktop (≥1024px) ===== */
@media (min-width: 1024px) {
    html body .rt-gateway__card { min-height: 400px !important; padding: 40px !important; }
    html body .rt-gateway__card-title { font-size: 40px !important; padding-bottom: 18px !important; }
    html body .rt-gateway__card-desc { font-size: 20px !important; }
    html body .rt-gateway__card-cta { font-size: 14px !important; }
}

/* ===== Scroll-triggered entrance — JS adds .rt-gateway--anim ===== */
@keyframes rt-gw-card-in {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0);    }
}
/* Initial hidden state for cards (gated on html.js so no-JS visitors
   see them immediately). */
html.js body .rt-gateway-section .rt-gateway__card {
    opacity: 0;
    transform: translateY(32px);
}
html.js body .rt-gateway-section.rt-gateway--anim .rt-gateway__card {
    animation-name: rt-gw-card-in !important;
    animation-duration: 0.9s !important;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
    animation-fill-mode: both !important;
}
html.js body .rt-gateway-section.rt-gateway--anim .rt-gateway__card--sell {
    animation-delay: 0s !important;
}
html.js body .rt-gateway-section.rt-gateway--anim .rt-gateway__card--buy {
    animation-delay: 0.25s !important;
}

@media (prefers-reduced-motion: reduce) {
    html.js body .rt-gateway-section .rt-gateway__card,
    html.js body .rt-gateway-section.rt-gateway--anim .rt-gateway__card {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
    html body .rt-gateway__card:hover {
        transform: none !important;
        box-shadow: none !important;
    }
    html body .rt-gateway__card-title::after { transition: none !important; }
    html body .rt-gateway__bg { transition: none !important; transform: none !important; }
}

/* ─────────────────────────────────────────────────────────────
   Mobile/touch parity — auto-play the hover treatment on touch
   devices after each card's entrance settles. The keyframes mirror
   the :hover state's end values, hold for ~1.4s, then return to
   the resting state. Gated by (hover:none) and (pointer:coarse)
   so this only fires on phones/tablets — laptops with mouse stay
   on interactive hover.
   ────────────────────────────────────────────────────────────── */
@keyframes rt-gw-card-showcase {
    0%   { transform: translateY(0);     box-shadow: 0 0 0 rgba(0,0,0,0); }
    18%  { transform: translateY(-12px); box-shadow: 0 28px 64px rgba(0,0,0,0.35); }
    72%  { transform: translateY(-12px); box-shadow: 0 28px 64px rgba(0,0,0,0.35); }
    100% { transform: translateY(0);     box-shadow: 0 0 0 rgba(0,0,0,0); }
}
@keyframes rt-gw-arrow-showcase {
    0%, 100% { transform: translateX(0);    filter: brightness(1);    }
    18%, 72% { transform: translateX(10px); filter: brightness(1.25); }
}
@keyframes rt-gw-underline-showcase {
    0%, 100% { width: 0;    }
    18%, 72% { width: 100%; }
}
@keyframes rt-gw-bg-showcase {
    0%, 100% { transform: scale(1);    }
    18%, 72% { transform: scale(1.04); }
}

/* Auto-play showcase on ALL devices (no media-query gate).
   Entrance fade-up happens first, then the hover treatment auto-plays
   once and settles back. Desktop users still get interactive hover
   afterward (transitions take over once the animation ends). */
html.js body .rt-gateway-section.rt-gateway--anim .rt-gateway__card--sell {
    animation:
        rt-gw-card-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0s both,
        rt-gw-card-showcase 2.5s ease-in-out 1s both !important;
}
html.js body .rt-gateway-section.rt-gateway--anim .rt-gateway__card--buy {
    animation:
        rt-gw-card-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both,
        rt-gw-card-showcase 2.5s ease-in-out 1.25s both !important;
}
/* Underline draws then retracts */
html.js body .rt-gateway-section.rt-gateway--anim .rt-gateway__card--sell .rt-gateway__card-title::after {
    animation: rt-gw-underline-showcase 2.5s ease-in-out 1s both !important;
}
html.js body .rt-gateway-section.rt-gateway--anim .rt-gateway__card--buy .rt-gateway__card-title::after {
    animation: rt-gw-underline-showcase 2.5s ease-in-out 1.25s both !important;
}
/* Arrow races forward then settles */
html.js body .rt-gateway-section.rt-gateway--anim .rt-gateway__card--sell .rt-gateway__open-arrow {
    animation: rt-gw-arrow-showcase 2.5s ease-in-out 1s both !important;
}
html.js body .rt-gateway-section.rt-gateway--anim .rt-gateway__card--buy .rt-gateway__open-arrow {
    animation: rt-gw-arrow-showcase 2.5s ease-in-out 1.25s both !important;
}
/* BG Ken-Burns once */
html.js body .rt-gateway-section.rt-gateway--anim .rt-gateway__bg {
    animation: rt-gw-bg-showcase 2.5s ease-in-out 1s both !important;
}
@media (prefers-reduced-motion: reduce) {
    html.js body .rt-gateway-section.rt-gateway--anim .rt-gateway__card--sell,
    html.js body .rt-gateway-section.rt-gateway--anim .rt-gateway__card--buy,
    html.js body .rt-gateway-section.rt-gateway--anim .rt-gateway__card-title::after,
    html.js body .rt-gateway-section.rt-gateway--anim .rt-gateway__open-arrow,
    html.js body .rt-gateway-section.rt-gateway--anim .rt-gateway__bg {
        animation: none !important;
    }
}
/* ------------------------------------------------------------------
   Featured Cities — remove bright-blue column "border"
   The Elementor column (633bfd70) wrapping the .rt-nh band carries a
   #00ACFF background + 10px padding, so a 10px blue frame shows around
   the navy band. Make the wrap transparent with no padding so the
   navy .rt-nh band reaches the column edges (no border).
   ------------------------------------------------------------------ */
html body .elementor-4589 .elementor-element-633bfd70 > .elementor-widget-wrap,
html body .elementor-4589 .elementor-element-633bfd70 > .elementor-widget-wrap.elementor-element-populated {
    background-color: transparent !important;
    background-image: none !important;
    padding: 0 !important;
}