/* =====================================================================
   North Avenue Properties — Premium design layer
   Loaded after site.css on public pages only (<body class="premium-ui">).
   Same brand palette (Oxford Blue / Metallic Silver / Gold), refined with
   glass surfaces, an editorial serif for headlines, depth, and motion.
   Every rule is scoped to .premium-ui so dashboards are untouched, and all
   motion is switched off for visitors who ask for reduced motion.
   ===================================================================== */

.premium-ui {
    --p-navy: #061058;
    --p-navy-deep: #030835;
    --p-navy-mid: #0a1a7a;
    --p-gold: #d4af37;
    --p-gold-light: #ecd27f;
    --p-gold-deep: #b8932a;
    --p-silver: #a5a8b9;
    --p-ink: #1d2340;
    --p-muted: #6b7088;
    --p-surface: #ffffff;
    --p-canvas: #f6f7fb;
    --p-line: rgba(6, 16, 88, 0.08);
    --p-gold-grad: linear-gradient(135deg, #f3dd8f 0%, #d4af37 45%, #b8932a 100%);
    --p-navy-grad: linear-gradient(135deg, #0a1a7a 0%, #061058 55%, #030835 100%);
    --p-shadow-sm: 0 2px 10px rgba(6, 16, 88, 0.06);
    --p-shadow: 0 10px 30px -8px rgba(6, 16, 88, 0.18);
    --p-shadow-lg: 0 30px 60px -20px rgba(6, 16, 88, 0.35);
    --p-radius: 18px;
    --p-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --p-serif: 'Barlow', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;  /* brand display font */
    --p-nav-pad: 12px;

    /* The FAQ, Careers and Testimonials views use these but nothing ever defined them, so their
       coloured cards and buttons rendered white. Map them to the brand colours. */
    --color-primary: #061058;
    --color-accent: #d4af37;

    background: var(--p-canvas);
    color: var(--p-ink);
}

/* ---------- Typography ---------- */
.premium-ui .section-header h2,
.premium-ui .section-header .section-title,
.premium-ui .hero-title,
.premium-ui .page-header h1,
.premium-ui .cta-section h2,
.premium-ui .partners-header h2,
.premium-ui .partners-header h3 {
    font-family: var(--p-serif);
    font-weight: 700;
    letter-spacing: -0.01em;
    font-variant-numeric: lining-nums;
}

.premium-ui ::selection { background: rgba(212, 175, 55, 0.35); color: var(--p-navy); }

/* ---------- Motion system ---------- */
.premium-ui {
    --p-ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* fast start, long soft landing */
    --p-dur-fast: 0.25s;
    --p-dur: 0.5s;
    --p-dur-slow: 0.9s;
}

/* Soft cross-fade between pages (Chromium/Edge 126+; other browsers just navigate normally) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: pPageOut 0.22s ease both; }
::view-transition-new(root) { animation: pPageIn 0.42s var(--p-ease-out, ease) both; }
@keyframes pPageOut { to { opacity: 0; } }
@keyframes pPageIn { from { opacity: 0; transform: translate3d(0, 10px, 0); } }

/* Sticky navbar without the old "jump" (site.css switches it to position:fixed and pads the
   body). Enabled by premium.js only where overflow-x:clip is supported, because the older
   overflow-x:hidden on html/body silently disables position:sticky. */
html.p-sticky-nav,
html.p-sticky-nav body { overflow-x: clip; }
html.p-sticky-nav .navbar-main,
html.p-sticky-nav .navbar-main.scrolled { position: sticky; top: 0; left: auto; right: auto; animation: none; }
html.p-sticky-nav body.navbar-fixed { padding-top: 0 !important; }
/* a sticky bar is in the page flow: keep its height constant so nothing below it shifts */
html.p-sticky-nav .premium-ui .navbar-main.scrolled { padding: var(--p-nav-pad) 0; }

/* Tactile press feedback */
.premium-ui .btn:active,
.premium-ui .hero-tab:active,
.premium-ui .hero-slider-btn:active { transform: scale(0.97); transition-duration: 0.08s; }

/* Image areas show a calm placeholder tone until the photo arrives and covers it (pure CSS,
   static on purpose: nothing is hidden by script and nothing repaints while scrolling). */
.premium-ui .property-image,
.premium-ui .blog-image,
.premium-ui .agent-image { background-color: #e7eaf3; }

/* Smooth in-page scrolling, with room for the sticky navbar */
html.p-sticky-nav { scroll-padding-top: 90px; }
.premium-ui :focus-visible { outline: 2px solid var(--p-gold); outline-offset: 3px; border-radius: 6px; }

/* ---------- Scroll progress ---------- */
.p-scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 100%;
    transform-origin: 0 50%;
    transform: scaleX(0);
    background: var(--p-gold-grad);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.6);
    z-index: 2000;
    pointer-events: none;
}

/* ---------- Top bar ---------- */
.premium-ui .top-bar {
    background: linear-gradient(90deg, var(--p-navy-deep) 0%, #071261 50%, var(--p-navy-deep) 100%);
    border-bottom: 1px solid rgba(212, 175, 55, 0.18);
    padding: 7px 0;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}
.premium-ui .top-bar a,
.premium-ui .top-bar span { color: rgba(255, 255, 255, 0.72); }
.premium-ui .top-bar a:hover { color: var(--p-gold-light); }
.premium-ui .top-bar .bi { color: var(--p-gold); }
.premium-ui .top-bar-social a {
    width: 30px; height: 30px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.35s var(--p-ease), background 0.35s, border-color 0.35s;
}
.premium-ui .top-bar-social a .bi { color: rgba(255, 255, 255, 0.85); }
.premium-ui .top-bar-social a:hover {
    background: var(--p-gold-grad);
    border-color: transparent;
    transform: translateY(-2px);
}
.premium-ui .top-bar-social a:hover .bi { color: var(--p-navy); }

/* ---------- Navbar ---------- */
.premium-ui .navbar-main {
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--p-line);
    box-shadow: none;
    padding: var(--p-nav-pad) 0;
    transition: padding 0.4s var(--p-ease), background 0.4s, box-shadow 0.4s;
}
.premium-ui .navbar-main.scrolled {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 40px -12px rgba(6, 16, 88, 0.25);
    animation: pNavIn 0.5s var(--p-ease);
}
@keyframes pNavIn { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } }

.premium-ui .navbar-brand .logo-img { transition: height 0.4s var(--p-ease), transform 0.4s var(--p-ease); }
html:not(.p-sticky-nav) .premium-ui .navbar-main.scrolled { padding: 6px 0; }
html:not(.p-sticky-nav) .premium-ui .navbar-main.scrolled .navbar-brand .logo-img { height: 44px; }
.premium-ui .navbar-brand:hover .logo-img { transform: scale(1.03); }

.premium-ui .navbar-main .nav-link {
    color: var(--p-ink) !important;
    font-weight: 600;
    font-size: 0.93rem;
    letter-spacing: 0.01em;
    padding: 10px 16px !important;
    border-radius: 999px;
    transition: color 0.3s, background 0.3s;
}
.premium-ui .navbar-main .nav-link::after {
    left: 50%; right: auto;
    bottom: 4px;
    width: 22px; height: 2px;
    margin-left: -11px;
    border-radius: 2px;
    background: var(--p-gold-grad);
    transform: scaleX(0);
    transition: transform 0.45s var(--p-ease);
}
.premium-ui .navbar-main .nav-link:hover,
.premium-ui .navbar-main .nav-link.active {
    color: var(--p-navy) !important;
    background: rgba(6, 16, 88, 0.045);
}
.premium-ui .navbar-main .nav-link:hover::after,
.premium-ui .navbar-main .nav-link.active::after { transform: scaleX(1); }

@media (min-width: 992px) {
    .premium-ui .navbar-main .nav-dropdown-hover .dropdown-menu {
        border: 1px solid var(--p-line);
        border-top: 2px solid var(--p-gold);
        border-radius: 16px;
        padding: 10px;
        min-width: 230px;
        background: rgba(255, 255, 255, 0.97);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        box-shadow: var(--p-shadow-lg);
    }
    .premium-ui .navbar-main .nav-dropdown-hover:hover > .dropdown-menu {
        animation: pDropIn 0.35s var(--p-ease);
    }
    .premium-ui .navbar-main .nav-dropdown-hover .dropdown-item {
        border-radius: 10px;
        padding: 9px 14px;
        font-weight: 500;
        position: relative;
    }
    .premium-ui .navbar-main .nav-dropdown-hover .dropdown-item::before {
        content: '';
        position: absolute;
        left: 6px; top: 50%;
        width: 4px; height: 4px;
        margin-top: -2px;
        border-radius: 50%;
        background: var(--p-gold);
        opacity: 0;
        transition: opacity 0.3s, transform 0.3s var(--p-ease);
        transform: scale(0);
    }
    .premium-ui .navbar-main .nav-dropdown-hover .dropdown-item:hover {
        background: linear-gradient(90deg, rgba(212, 175, 55, 0.12), rgba(212, 175, 55, 0));
        color: var(--p-navy);
        padding-left: 22px;
    }
    .premium-ui .navbar-main .nav-dropdown-hover .dropdown-item:hover::before { opacity: 1; transform: scale(1); }
}
@keyframes pDropIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }

.premium-ui .navbar-toggler { color: var(--p-navy); }

/* Mobile drawer */
.premium-ui #mobileDrawer { border-left: 1px solid var(--p-line); }
.premium-ui #mobileDrawer .offcanvas-header {
    background: linear-gradient(180deg, #fff, var(--p-canvas));
    border-bottom: 1px solid var(--p-line) !important;
}
.premium-ui .mobile-drawer-link {
    color: var(--p-ink) !important;
    font-weight: 600;
    border-radius: 12px;
    padding: 11px 14px !important;
    position: relative;
    transition: background 0.3s, color 0.3s, padding 0.3s var(--p-ease);
}
.premium-ui .mobile-drawer-link:hover,
.premium-ui .mobile-drawer-link.active {
    background: rgba(212, 175, 55, 0.12);
    color: var(--p-navy) !important;
    padding-left: 20px !important;
}
.premium-ui .mobile-drawer-link.active::before {
    content: '';
    position: absolute;
    left: 6px; top: 25%; bottom: 25%;
    width: 3px; border-radius: 3px;
    background: var(--p-gold-grad);
}
.premium-ui .mobile-drawer-link > .bi:first-child {
    width: 34px; height: 34px;
    margin-right: 12px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(6, 16, 88, 0.06);
    color: var(--p-navy);
    font-size: 1rem;
    vertical-align: middle;
    transition: background 0.3s, color 0.3s;
}
.premium-ui .mobile-drawer-link:hover > .bi:first-child,
.premium-ui .mobile-drawer-link.active > .bi:first-child { background: var(--p-gold-grad); color: var(--p-navy); }
.premium-ui #drawerPages .mobile-drawer-link { font-weight: 500; padding-left: 60px !important; }
.premium-ui .drawer-quick-contact .btn { border-radius: 12px; padding: 10px 12px; font-weight: 600; }
.premium-ui .drawer-wa { background: #1faa53; color: #fff; border: 0; }
.premium-ui .drawer-wa:hover { background: #179447; color: #fff; transform: translateY(-2px); }
.premium-ui #mobileDrawer.show .nav-item { animation: pDrawerItem 0.5s var(--p-ease) both; }
.premium-ui #mobileDrawer.show .nav-item:nth-child(2) { animation-delay: 0.04s; }
.premium-ui #mobileDrawer.show .nav-item:nth-child(3) { animation-delay: 0.08s; }
.premium-ui #mobileDrawer.show .nav-item:nth-child(4) { animation-delay: 0.12s; }
.premium-ui #mobileDrawer.show .nav-item:nth-child(5) { animation-delay: 0.16s; }
.premium-ui #mobileDrawer.show .nav-item:nth-child(6) { animation-delay: 0.2s; }
.premium-ui #mobileDrawer.show .nav-item:nth-child(7) { animation-delay: 0.24s; }
@keyframes pDrawerItem { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

/* ---------- Buttons ---------- */
.premium-ui .btn { transition: transform 0.35s var(--p-ease), box-shadow 0.35s var(--p-ease), background 0.35s, color 0.3s, border-color 0.3s; }
.premium-ui .btn-primary,
.premium-ui .btn-accent,
.premium-ui .hero-search-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.premium-ui .btn-primary {
    background: var(--p-navy-grad);
    border: 0;
    box-shadow: 0 8px 20px -8px rgba(6, 16, 88, 0.6);
}
.premium-ui .btn-primary:hover,
.premium-ui .btn-primary:focus-visible {
    background: var(--p-navy-grad);
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -10px rgba(6, 16, 88, 0.7);
}
.premium-ui .btn-accent {
    background: var(--p-gold-grad);
    color: var(--p-navy) !important;
    border: 0;
    font-weight: 700;
    box-shadow: 0 8px 22px -8px rgba(184, 147, 42, 0.75);
}
.premium-ui .btn-accent:hover {
    background: var(--p-gold-grad);
    color: var(--p-navy) !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -10px rgba(184, 147, 42, 0.85);
}
/* light sweep across solid buttons */
.premium-ui .btn-primary::after,
.premium-ui .btn-accent::after,
.premium-ui .hero-search-btn::after {
    content: '';
    position: absolute;
    top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    transform: skewX(-20deg);
    z-index: -1;
    transition: left 0.75s var(--p-ease);
    pointer-events: none;
}
.premium-ui .btn-primary:hover::after,
.premium-ui .btn-accent:hover::after,
.premium-ui .hero-search-btn:hover::after { left: 130%; }

.premium-ui .btn-outline-primary {
    border: 1.5px solid var(--p-navy);
    color: var(--p-navy);
    border-radius: 999px;
    padding-left: 1.75rem; padding-right: 1.75rem;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: transparent;
}
.premium-ui .btn-outline-primary::before {
    content: '';
    position: absolute; inset: 0;
    background: var(--p-navy-grad);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 0.5s var(--p-ease);
    z-index: -1;
}
.premium-ui .btn-outline-primary:hover { color: #fff; background: transparent; border-color: var(--p-navy); transform: translateY(-2px); box-shadow: var(--p-shadow); }
.premium-ui .btn-outline-primary:hover::before { transform: scaleX(1); }
.premium-ui .btn-outline-primary .bi-arrow-right { display: inline-block; transition: transform 0.35s var(--p-ease); }
.premium-ui .btn-outline-primary:hover .bi-arrow-right { transform: translateX(5px); }

/* ---------- Hero ---------- */
.premium-ui .hero-banner {
    min-height: clamp(600px, 88vh, 920px);
    padding: 90px 0 130px;
}
/* Overlay strength comes from Admin -> Settings -> Hero (--hero-o1/2/3 set inline). */
.premium-ui .hero-bg::after {
    z-index: 2;
    background:
        radial-gradient(1200px 600px at 85% 20%, rgba(212, 175, 55, 0.14), transparent 60%),
        linear-gradient(100deg,
            rgba(3, 8, 53, var(--hero-o1, 0.92)) 0%,
            rgba(6, 16, 88, var(--hero-o2, 0.7)) 42%,
            rgba(6, 16, 88, var(--hero-o3, 0.3)) 78%,
            rgba(6, 16, 88, var(--hero-o3, 0.3)) 100%);
}
.premium-ui .hero-no-zoom .hero-bg::before { animation: none; }

/* Slideshow */
.premium-ui .hero-mode-slideshow .hero-bg::before,
.premium-ui .hero-mode-video .hero-bg::before { display: none; }
.premium-ui .hero-slides { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.premium-ui .hero-slide {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 1.4s var(--p-ease), transform 1.4s var(--p-ease);
    will-change: opacity, transform;
}
.premium-ui .hero-slide.is-active {
    opacity: 1;
    transform: scale(1);
    animation: pSlideZoom var(--hero-slide-ms, 6000ms) linear both;
}
.premium-ui .hero-no-zoom .hero-slide.is-active { animation: none; }
@keyframes pSlideZoom { from { transform: scale(1); } to { transform: scale(1.1); } }

/* Video */
.premium-ui .hero-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Slide captions + controls */
.premium-ui .hero-slider-ui {
    position: absolute;
    left: 0; right: 0;
    bottom: 78px;               /* clears the search card that overlaps the hero bottom */
    z-index: 6;
    pointer-events: none;
}
.premium-ui .hero-slider-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;   /* bottom-left is taken by the floating "Send us a Message" widget */
    gap: 16px;
}
.premium-ui .hero-slide-captions { position: relative; min-height: 44px; flex: 0 1 420px; }
.premium-ui .hero-slide-caption {
    position: absolute; right: 0; top: 50%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px 9px 12px;
    border-radius: 999px;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: translate(0, -30%);
    transition: opacity 0.7s var(--p-ease), transform 0.7s var(--p-ease);
    pointer-events: none;
    max-width: 100%;
}
.premium-ui .hero-slide-caption:empty { display: none; }
.premium-ui .hero-slide-caption .bi { color: var(--p-gold-light); }
.premium-ui .hero-slide-caption.is-active { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
.premium-ui a.hero-slide-caption:hover { color: #fff; background: rgba(212, 175, 55, 0.25); border-color: rgba(212, 175, 55, 0.6); }
.premium-ui .hero-slider-controls {
    display: flex; align-items: center; gap: 12px;
    pointer-events: auto;
}
.premium-ui .hero-slider-btn {
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.3s, border-color 0.3s, transform 0.3s var(--p-ease);
}
.premium-ui .hero-slider-btn:hover { background: var(--p-gold-grad); color: var(--p-navy); border-color: transparent; transform: scale(1.06); }
.premium-ui .hero-slider-dots { display: flex; gap: 8px; }
.premium-ui .hero-slider-dot {
    width: 28px; height: 4px;
    padding: 0; border: 0;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.3);
    overflow: hidden;
    position: relative;
    transition: width 0.5s var(--p-ease);
}
.premium-ui .hero-slider-dot.is-active { width: 54px; }
.premium-ui .hero-slider-dot span {
    position: absolute; inset: 0;
    background: var(--p-gold-grad);
    transform: scaleX(0);
    transform-origin: 0 50%;
}
.premium-ui .hero-slider-dot.is-active span { animation: pDotFill var(--hero-slide-ms, 6000ms) linear forwards; }
.premium-ui .hero-banner.is-paused .hero-slider-dot.is-active span,
.premium-ui .hero-banner.is-paused .hero-slide.is-active { animation-play-state: paused; }
@keyframes pDotFill { to { transform: scaleX(1); } }
.premium-ui .hero-banner::after {
    /* soft fade into the search panel / page */
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 140px;
    background: linear-gradient(180deg, transparent, rgba(3, 8, 53, 0.35));
    z-index: 2;
    pointer-events: none;
}
.premium-ui .hero-content { animation: none; }
.premium-ui .hero-content > * { animation: pRise 1s var(--p-ease) both; }
.premium-ui .hero-content > *:nth-child(2) { animation-delay: 0.15s; }
.premium-ui .hero-content > *:nth-child(3) { animation-delay: 0.3s; }
.premium-ui .hero-content > *:nth-child(4) { animation-delay: 0.45s; }
/* transform + opacity only: composited on the GPU, smooth even on low-end phones */
@keyframes pRise { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: none; } }

.premium-ui .hero-title {
    font-size: clamp(2.2rem, 4.4vw, 3.9rem);
    line-height: 1.08;
    text-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
    margin-bottom: 1.25rem;
}
.premium-ui .hero-title .highlight {
    display: inline-block;
    background: linear-gradient(110deg, #b8932a 0%, #f3dd8f 25%, #d4af37 50%, #fff3c4 60%, #b8932a 100%);
    background-size: 250% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 6px 24px rgba(212, 175, 55, 0.35));
    animation: pGoldShimmer 6s linear infinite;
}
@keyframes pGoldShimmer { to { background-position: -250% center; } }

.premium-ui .hero-subtitle {
    color: rgba(255, 255, 255, 0.86);
    font-size: 1.15rem;
    text-shadow: none;
    padding-left: 18px;
    border-left: 2px solid var(--p-gold);
}

.premium-ui .hero-tab {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    padding: 10px 26px;
    letter-spacing: 0.02em;
}
.premium-ui .hero-tab.active {
    background: var(--p-gold-grad);
    border-color: transparent;
    color: var(--p-navy);
    box-shadow: 0 10px 30px -8px rgba(212, 175, 55, 0.7);
}

@media (min-width: 992px) {
    /* site.css centres these (older centred hero); align them with the left-aligned headline */
    .premium-ui .hero-content .hero-tabs { justify-content: flex-start; }
    .premium-ui .hero-content .hero-search-form { margin-left: 0; margin-right: 0; max-width: 560px; }
}
.premium-ui .hero-search-box {
    border-radius: 18px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
}
.premium-ui .hero-search-box::before { background: none; }
.premium-ui .hero-search-btn {
    border-radius: 12px;
    background: var(--p-navy-grad);
    padding: 14px 30px;
    letter-spacing: 0.02em;
}
.premium-ui .hero-search-btn:hover { background: var(--p-gold-grad); color: var(--p-navy); }

.premium-ui .hero-img-wrapper {
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 40px 80px -24px rgba(0, 0, 0, 0.7);
}
.premium-ui .hero-img-wrapper::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, transparent 55%, rgba(3, 8, 53, 0.55));
    pointer-events: none;
}
.premium-ui .img-badge {
    z-index: 2;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.35);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 999px;
}
.premium-ui .img-badge .bi { color: var(--p-gold-light); }

/* ---------- Search panel under the hero ---------- */
/* Style the outer card (.search-box) only; the inner .search-box-panel is shown/hidden by the
   mobile "Advanced Filter" toggle and must stay a plain container. */
.premium-ui .search-box {
    border-radius: 22px;
    border: 1px solid rgba(6, 16, 88, 0.06);
    box-shadow: 0 30px 70px -25px rgba(6, 16, 88, 0.35);
}
.premium-ui .search-box::before {
    content: '';
    position: absolute;
    top: 0; left: 28px; right: 28px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--p-gold-grad);
    pointer-events: none;
}
.premium-ui .search-box .btn-primary {
    min-height: 54px;
    border-radius: 12px;
}
.premium-ui .search-box-panel .form-label {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--p-muted);
    font-weight: 700;
}
.premium-ui .form-control,
.premium-ui .form-select {
    border-radius: 12px;
    border-color: #e3e6ef;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.premium-ui .form-control:focus,
.premium-ui .form-select:focus {
    border-color: var(--p-gold);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.18);
}

/* ---------- Sections & headers ---------- */
.premium-ui .section { padding: 110px 0; position: relative; }
.premium-ui .section-gray {
    background:
        radial-gradient(900px 400px at 0% 0%, rgba(212, 175, 55, 0.06), transparent 60%),
        radial-gradient(900px 400px at 100% 100%, rgba(6, 16, 88, 0.05), transparent 60%),
        #f1f3f9;
}
.premium-ui .section-header { margin-bottom: 64px; }
.premium-ui .section-header .subtitle {
    background: none;
    padding: 0;
    color: var(--p-gold-deep);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}
.premium-ui .section-header .subtitle::before,
.premium-ui .section-header .subtitle::after {
    content: '';
    width: 34px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--p-gold));
}
.premium-ui .section-header .subtitle::after { background: linear-gradient(90deg, var(--p-gold), transparent); }
.premium-ui .section-header.text-start .subtitle::before { display: none; }
.premium-ui .section-header h2,
.premium-ui .section-header .section-title {
    font-size: clamp(2rem, 3.6vw, 3rem);
    color: var(--p-navy);
    line-height: 1.15;
    margin-bottom: 18px;
}
.premium-ui .section-header p,
.premium-ui .section-desc { color: var(--p-muted); font-size: 1.08rem; }

/* ---------- Cards (property / agent / blog / testimonial) ---------- */
.premium-ui .property-card,
.premium-ui .agent-card,
.premium-ui .blog-card,
.premium-ui .testimonial-card {
    border-radius: var(--p-radius);
    border: 1px solid var(--p-line);
    background: var(--p-surface);
    box-shadow: var(--p-shadow-sm);
    transition: transform 0.6s var(--p-ease), box-shadow 0.6s var(--p-ease), border-color 0.6s;
    will-change: transform;
}
.premium-ui .property-card:hover,
.premium-ui .agent-card:hover,
.premium-ui .blog-card:hover,
.premium-ui .testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--p-shadow-lg);
    border-color: rgba(212, 175, 55, 0.45);
}
.premium-ui .property-image,
.premium-ui .blog-image,
.premium-ui .agent-image { overflow: hidden; }
.premium-ui .property-image img,
.premium-ui .blog-image img,
.premium-ui .agent-image img { transition: transform 1.2s var(--p-ease), filter 0.6s; }
.premium-ui .property-card:hover .property-image img,
.premium-ui .blog-card:hover .blog-image img,
.premium-ui .agent-card:hover .agent-image img { transform: scale(1.08); }
.premium-ui .property-image::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(3, 8, 53, 0) 50%, rgba(3, 8, 53, 0.45) 100%);
    opacity: 0.6;
    transition: opacity 0.6s;
    pointer-events: none;
}
.premium-ui .property-card:hover .property-image::after { opacity: 1; }
.premium-ui .property-image .property-badges,
.premium-ui .property-image .property-actions,
.premium-ui .property-image .property-price { z-index: 2; }
.premium-ui .property-card .btn-sm.btn-primary { border-radius: 999px; padding: 6px 16px; white-space: nowrap; flex-shrink: 0; }
.premium-ui .property-card .property-footer { gap: 10px; }
.premium-ui .property-card .agent-mini { min-width: 0; }
.premium-ui .property-card .agent-mini span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.premium-ui .badge-featured { background: var(--p-gold-grad) !important; color: var(--p-navy) !important; }

.premium-ui .testimonial-card::before { color: rgba(212, 175, 55, 0.25); font-family: var(--p-serif); }
/* Testimonials page has its own quote icon: drop the duplicate and keep text clear of it */
.premium-ui .testimonial-card:has(.testimonial-quote)::before { display: none; }
.premium-ui .testimonial-card .testimonial-quote { color: var(--p-gold); opacity: 0.22; }
.premium-ui .testimonial-card .testimonial-quote ~ .testimonial-content { padding-right: 44px; }
.premium-ui .faq-contact-card h5 { color: #fff; font-family: var(--p-serif); }
.premium-ui .testimonial-rating .bi-star-fill { color: var(--p-gold); }

/* ---------- Explore areas ---------- */
.premium-ui .city-card { border-radius: 20px; overflow: hidden; box-shadow: var(--p-shadow); }
.premium-ui .city-card .city-image,
.premium-ui .city-card img { transition: transform 1.4s var(--p-ease); }
.premium-ui .city-card:hover .city-image,
.premium-ui .city-card:hover img { transform: scale(1.1); }
.premium-ui .city-card .city-overlay {
    background: linear-gradient(180deg, rgba(3, 8, 53, 0) 35%, rgba(3, 8, 53, 0.85) 100%);
    transition: background 0.6s;
}
.premium-ui .city-card:hover .city-overlay { background: linear-gradient(180deg, rgba(6, 16, 88, 0.15) 0%, rgba(3, 8, 53, 0.92) 100%); }
.premium-ui .city-card .city-name {
    font-family: var(--p-serif);
    letter-spacing: 0.01em;
    transition: transform 0.6s var(--p-ease);
}
.premium-ui .city-card:hover .city-name { transform: translateY(-6px); }

/* ---------- Stats ---------- */
.premium-ui .stats-section {
    background: var(--p-navy-grad);
    padding: 100px 0;
    overflow: hidden;
    isolation: isolate;
}
.premium-ui .stats-section::before {
    inset: -20%;
    background:
        radial-gradient(500px 280px at 15% 20%, rgba(212, 175, 55, 0.18), transparent 70%),
        radial-gradient(600px 320px at 85% 90%, rgba(165, 168, 185, 0.16), transparent 70%);
    background-size: auto;
    animation: pAurora 14s ease-in-out infinite alternate;
    z-index: -1;
}
@keyframes pAurora { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.08); } }
.premium-ui .stats-section .stat-item {
    padding: 34px 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: transform 0.6s var(--p-ease), background 0.6s, border-color 0.6s;
    height: 100%;
}
.premium-ui .stats-section .stat-item:hover { transform: translateY(-8px); background: rgba(255, 255, 255, 0.07); border-color: rgba(212, 175, 55, 0.35); }
.premium-ui .stats-section .stat-item .stat-icon {
    background: transparent;
    border: 1px solid rgba(212, 175, 55, 0.45);
    box-shadow: 0 0 0 8px rgba(212, 175, 55, 0.06);
    transition: transform 0.8s var(--p-ease), box-shadow 0.6s;
}
.premium-ui .stats-section .stat-item:hover .stat-icon { transform: rotateY(180deg); box-shadow: 0 0 0 12px rgba(212, 175, 55, 0.1); }
.premium-ui .stats-section .stat-item .stat-number {
    font-family: var(--p-serif);
    background: linear-gradient(180deg, #ffffff 30%, #e6e8f2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-variant-numeric: lining-nums tabular-nums;
}
.premium-ui .stats-section .stat-item .stat-label { letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.78rem; color: rgba(255, 255, 255, 0.65); }

/* ---------- CTA ---------- */
.premium-ui .cta-section {
    /* static gradient; the motion comes from the glow below (transform = GPU, no repaints) */
    background: linear-gradient(120deg, #030835 0%, #0a1a7a 45%, #061058 70%, #030835 100%);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.premium-ui .cta-section::before {
    content: '';
    position: absolute;
    width: 520px; height: 520px;
    right: -140px; top: -220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.28), transparent 65%);
    z-index: -1;
    animation: pFloatOrb 12s ease-in-out infinite alternate;
}
@keyframes pGradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes pFloatOrb { to { transform: translate(-60px, 60px) scale(1.1); } }
.premium-ui .cta-section h2,
.premium-ui .cta-section h3 { color: #fff; }
.premium-ui .cta-section .btn-accent { animation: pPulseGold 2.8s ease-in-out infinite; }
@keyframes pPulseGold {
    0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.55), 0 8px 22px -8px rgba(184, 147, 42, 0.75); }
    50% { box-shadow: 0 0 0 14px rgba(212, 175, 55, 0), 0 8px 22px -8px rgba(184, 147, 42, 0.75); }
}

/* ---------- Inner page header ---------- */
/* site.css paints the photo in ::before and a flat navy veil in ::after; keep the photo,
   give it a slow drift, and replace the veil with a deeper, directional one. */
/* Compact banner: title and breadcrumb share one row (was ~260px tall, now ~120px; breadcrumb-only
   headers on detail pages collapse to a slim strip). */
.premium-ui .page-header { padding: 34px 0 30px; }
.premium-ui .page-header .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 28px; }
.premium-ui .page-header:not(:has(h1)) { padding: 14px 0; }
.premium-ui .page-header:not(:has(h1)) .container::after { display: none; }
/* the section right under the compact header doesn't need a full-height top gap */
.premium-ui .page-header + .section, .premium-ui .page-header + section { padding-top: clamp(28px, 4vw, 48px); }
.premium-ui .page-header::before { animation: pHeaderDrift 24s ease-in-out infinite alternate; }
@keyframes pHeaderDrift { from { transform: scale(1.02); } to { transform: scale(1.12) translate(-1%, -1%); } }
.premium-ui .page-header::after {
    background:
        radial-gradient(700px 300px at 88% 0%, rgba(212, 175, 55, 0.25), transparent 65%),
        linear-gradient(100deg, rgba(3, 8, 53, 0.94) 0%, rgba(6, 16, 88, 0.82) 45%, rgba(6, 16, 88, 0.55) 100%);
}
.premium-ui .page-header .container::after {
    content: '';
    display: block;
    flex-basis: 100%;
    width: 56px; max-width: 56px; height: 2px;
    margin-top: -2px;
    border-radius: 2px;
    background: var(--p-gold-grad);
    animation: pRise 0.9s 0.3s var(--p-ease) both;
}
.premium-ui .page-header.text-center .container::after { margin-left: auto; margin-right: auto; }
/* compact header: a short gold bar beside the title instead of a separate underline row */
.premium-ui .page-header .container::after { display: none; }
.premium-ui .page-header h1 { position: relative; padding-left: 16px; }
.premium-ui .page-header h1::before {
    content: ''; position: absolute; left: 0; top: 0.18em; bottom: 0.18em; width: 3px; border-radius: 3px;
    background: var(--p-gold-grad);
}
.premium-ui .page-header h1 {
    color: #fff;
    font-size: clamp(1.5rem, 2.6vw, 2.15rem);
    margin: 0;
    line-height: 1.2;
    animation: pRise 0.9s var(--p-ease) both;
}
.premium-ui .page-header .breadcrumb {
    display: inline-flex;
    padding: 6px 16px;
    font-size: 0.85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    animation: pRise 0.9s 0.15s var(--p-ease) both;
}
.premium-ui .page-header .breadcrumb-item a { color: var(--p-gold-light); }
.premium-ui .page-header .breadcrumb-item.active { color: rgba(255, 255, 255, 0.8); }

/* ---------- Partners ---------- */
.premium-ui .partner-slide img { filter: grayscale(1) opacity(0.6); transition: filter 0.5s, transform 0.5s var(--p-ease); }
.premium-ui .partner-slide:hover img { filter: none; transform: scale(1.06); }

/* ---------- Footer ---------- */
.premium-ui .footer {
    background:
        radial-gradient(800px 300px at 90% 0%, rgba(212, 175, 55, 0.1), transparent 60%),
        linear-gradient(180deg, #061058 0%, #030835 100%);
    position: relative;
}
.premium-ui .footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--p-gold), transparent);
}
.premium-ui .footer-top { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.premium-ui .footer-widget h5 {
    font-family: var(--p-serif);
    color: #fff;
    position: relative;
    padding-bottom: 12px;
}
.premium-ui .footer-widget h5::after {
    content: '';
    position: absolute; left: 0; bottom: 0;
    width: 32px; height: 2px;
    background: var(--p-gold-grad);
    border-radius: 2px;
}
.premium-ui .footer-links a {
    color: rgba(255, 255, 255, 0.68);
    display: inline-flex;
    align-items: center;
    gap: 0;
    transition: color 0.3s, gap 0.35s var(--p-ease);
}
.premium-ui .footer-links a::before {
    content: '';
    width: 0; height: 1px;
    background: var(--p-gold);
    transition: width 0.35s var(--p-ease);
}
.premium-ui .footer-links a:hover { color: var(--p-gold-light); gap: 8px; }
.premium-ui .footer-links a:hover::before { width: 12px; }
.premium-ui .footer-contact .bi {
    color: var(--p-gold);
    width: 36px; height: 36px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(212, 175, 55, 0.35);
    flex-shrink: 0;
}
.premium-ui .footer-social a {
    border: 1px solid rgba(255, 255, 255, 0.14);
    transition: transform 0.35s var(--p-ease), background 0.35s, color 0.35s, border-color 0.35s;
}
.premium-ui .footer-social a:hover {
    background: var(--p-gold-grad);
    color: var(--p-navy);
    border-color: transparent;
    transform: translateY(-3px);
}
.premium-ui .newsletter-input-group {
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
.premium-ui .btn-newsletter { background: var(--p-gold-grad); color: var(--p-navy); font-weight: 700; }
.premium-ui .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); }

/* ---------- Scroll reveal (only when JS is running) ---------- */
.p-js .p-reveal {
    opacity: 0;
    transform: translate3d(0, 34px, 0);
    transition: opacity 0.9s var(--p-ease), transform 0.9s var(--p-ease);
    transition-delay: var(--p-delay, 0s);
}
.p-js .p-reveal.p-reveal-left { transform: translate3d(-40px, 0, 0); }
.p-js .p-reveal.p-reveal-zoom { transform: scale(0.94); }
.p-js .p-reveal.is-visible { opacity: 1; transform: none; }
/* cards keep their own hover transform once revealed */
.p-js .p-reveal.is-visible.property-card:hover,
.p-js .p-reveal.is-visible.agent-card:hover,
.p-js .p-reveal.is-visible.blog-card:hover,
.p-js .p-reveal.is-visible.testimonial-card:hover,
.p-js .stats-section .p-reveal.is-visible.stat-item:hover { transform: translateY(-10px); transition-delay: 0s; }
.p-js .p-reveal.is-visible.quick-action:hover { transform: translateY(-6px); transition-delay: 0s; }
.p-js .p-reveal.is-visible.career-card:hover,
.p-js .p-reveal.is-visible.benefit-card:hover,
.p-js .p-reveal.is-visible.contact-info-card:hover { transform: translateY(-8px); transition-delay: 0s; }

/* ---------- Brand-map Bootstrap's default blue utilities (About page etc.) ---------- */
.premium-ui .text-primary { color: var(--p-navy) !important; }
.premium-ui .text-primary.text-uppercase,
.premium-ui .text-primary.small.fw-semibold {
    color: var(--p-gold-deep) !important;
    letter-spacing: 0.22em;
    font-size: 0.76rem;
    font-weight: 700 !important;
}
.premium-ui .bg-primary {
    background: var(--p-navy-grad) !important;
    box-shadow: 0 10px 24px -10px rgba(6, 16, 88, 0.6);
}
.premium-ui .rounded-circle.bg-primary .bi { color: var(--p-gold-light) !important; }
.premium-ui .display-4,
.premium-ui .display-5,
.premium-ui .display-6 {
    font-family: var(--p-serif);
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    font-variant-numeric: lining-nums;
}
.premium-ui .card.border-0.shadow-sm {
    border-radius: var(--p-radius) !important;
    transition: transform 0.6s var(--p-ease), box-shadow 0.6s var(--p-ease);
}
.premium-ui .card.border-0.shadow-sm:hover { transform: translateY(-8px); box-shadow: var(--p-shadow-lg) !important; }
.premium-ui .card.border-0.shadow-sm .card-img-top { transition: transform 1.2s var(--p-ease); }
.premium-ui .card.border-0.shadow-sm:hover .card-img-top { transform: scale(1.06); }
.premium-ui .img-fluid.rounded.shadow { border-radius: 22px !important; box-shadow: var(--p-shadow-lg) !important; }

/* ---------- Forms ---------- */
.premium-ui .input-group { flex-wrap: nowrap; }
.premium-ui .input-group > .form-control { min-width: 0; }
.premium-ui .input-group-text { border-radius: 12px 0 0 12px; background: #f4f5fa; border-color: #e3e6ef; white-space: nowrap; }
.premium-ui .input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* ---------- Property details ---------- */
.premium-ui .property-main-title {
    font-family: var(--p-serif);
    font-size: clamp(1.6rem, 3vw, 2.5rem);
    line-height: 1.15;
    color: var(--p-navy);
}
.premium-ui .property-price-box {
    background:
        radial-gradient(320px 160px at 100% 0%, rgba(212, 175, 55, 0.28), transparent 70%),
        var(--p-navy-grad) !important;
    border-radius: 22px !important;
    border: 1px solid rgba(212, 175, 55, 0.25);
    box-shadow: 0 24px 50px -22px rgba(6, 16, 88, 0.7);
    position: relative;
    overflow: hidden;
}
.premium-ui .property-price-box .price-value {
    font-family: var(--p-serif);
    font-variant-numeric: lining-nums;
}
.premium-ui .property-price-box .price-label { letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.72rem; color: var(--p-gold-light) !important; }
.premium-ui .gallery-main {
    border-radius: 22px !important;
    overflow: hidden;
    box-shadow: var(--p-shadow-lg);
}
.premium-ui .gallery-thumbs img { border-radius: 12px; transition: transform 0.4s var(--p-ease), box-shadow 0.4s; }
.premium-ui .gallery-thumbs img:hover { transform: translateY(-3px); box-shadow: var(--p-shadow); }
.premium-ui .gallery-nav {
    background: rgba(255, 255, 255, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff !important;
    transition: background 0.3s, transform 0.3s var(--p-ease);
}
.premium-ui .gallery-nav:hover { background: var(--p-gold-grad) !important; color: var(--p-navy) !important; transform: scale(1.06); }
.premium-ui .property-section,
.premium-ui .sidebar-card {
    border-radius: 20px !important;
    border: 1px solid var(--p-line);
    box-shadow: var(--p-shadow-sm);
    transition: box-shadow 0.5s var(--p-ease);
}
.premium-ui .property-section:hover,
.premium-ui .sidebar-card:hover { box-shadow: var(--p-shadow); }
.premium-ui .property-section .section-title {
    font-family: var(--p-serif);
    font-size: 1.3rem;
    color: var(--p-navy);
}
.premium-ui .property-section .section-title .bi { color: var(--p-gold-deep); }
.premium-ui .property-quick-stats .stat-icon {
    background: var(--p-navy-grad) !important;
    box-shadow: 0 10px 20px -10px rgba(6, 16, 88, 0.7);
    transition: transform 0.4s var(--p-ease);
}
.premium-ui .property-quick-stats .stat-item:hover .stat-icon { transform: translateY(-3px) rotate(-4deg); }
.premium-ui .detail-row { transition: background 0.3s; border-radius: 10px; }
.premium-ui .detail-row:hover { background: rgba(212, 175, 55, 0.07); }

/* =====================================================================
   Landing page: quick actions
   ===================================================================== */
.premium-ui .quick-actions-section { padding: 30px 0 20px; }
.premium-ui .quick-actions-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.premium-ui .quick-actions-eyebrow {
    font-size: 0.74rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase;
    color: var(--p-gold-deep);
}
.premium-ui .quick-actions-title {
    font-family: var(--p-serif);
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    color: var(--p-navy);
    margin: 0;
}
.premium-ui .quick-action {
    position: relative;
    display: flex; flex-direction: column;
    height: 100%;
    padding: 24px 22px 22px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--p-line);
    box-shadow: var(--p-shadow-sm);
    color: var(--p-ink);
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--p-dur) var(--p-ease-out), box-shadow var(--p-dur) var(--p-ease-out), border-color var(--p-dur);
}
.premium-ui .quick-action::before {
    content: '';
    position: absolute; inset: 0;
    background: var(--p-navy-grad);
    opacity: 0;
    transition: opacity var(--p-dur) var(--p-ease-out);
    z-index: -1;
}
.premium-ui .quick-action:hover { transform: translateY(-6px); box-shadow: var(--p-shadow-lg); border-color: transparent; color: #fff; }
.premium-ui .quick-action:hover::before { opacity: 1; }
.premium-ui .quick-action-icon {
    width: 50px; height: 50px;
    border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.35rem;
    color: var(--p-navy);
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.18), rgba(212, 175, 55, 0.06));
    margin-bottom: 16px;
    transition: transform var(--p-dur) var(--p-ease-out), background var(--p-dur);
}
.premium-ui .quick-action:hover .quick-action-icon { background: var(--p-gold-grad); transform: scale(1.06) rotate(-4deg); }
.premium-ui .quick-action-title { font-weight: 700; font-size: 1.05rem; margin-bottom: 4px; }
.premium-ui .quick-action-text { font-size: 0.88rem; color: var(--p-muted); line-height: 1.5; transition: color var(--p-dur); }
.premium-ui .quick-action:hover .quick-action-text { color: rgba(255, 255, 255, 0.75); }
.premium-ui .quick-action-arrow {
    position: absolute; top: 22px; right: 22px;
    font-size: 1.1rem;
    color: var(--p-gold-deep);
    transition: transform var(--p-dur) var(--p-ease-out), color var(--p-dur);
}
.premium-ui .quick-action:hover .quick-action-arrow { transform: translate(3px, -3px); color: var(--p-gold-light); }
.premium-ui .quick-types {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin-top: 26px;
}
.premium-ui .quick-types-label { font-size: 0.85rem; font-weight: 600; color: var(--p-muted); margin-right: 4px; }
.premium-ui .quick-type-chip {
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid #e1e4ee;
    background: #fff;
    color: var(--p-ink);
    font-size: 0.88rem;
    font-weight: 600;
    transition: background var(--p-dur-fast), color var(--p-dur-fast), border-color var(--p-dur-fast), transform var(--p-dur-fast) var(--p-ease-out);
}
.premium-ui .quick-type-chip:hover { background: var(--p-navy); color: #fff; border-color: var(--p-navy); transform: translateY(-2px); }
.premium-ui .quick-type-chip-all { border-color: rgba(212, 175, 55, 0.6); color: var(--p-gold-deep); }
@media (max-width: 575.98px) {
    .premium-ui .quick-action { padding: 18px 16px 16px; border-radius: 16px; }
    .premium-ui .quick-action-icon { width: 42px; height: 42px; font-size: 1.15rem; margin-bottom: 12px; }
    .premium-ui .quick-action-title { font-size: 0.96rem; }
    .premium-ui .quick-action-text { font-size: 0.8rem; }
    .premium-ui .quick-action-arrow { top: 16px; right: 16px; }
    .premium-ui .quick-types { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .premium-ui .quick-types::-webkit-scrollbar { display: none; }
    .premium-ui .quick-type-chip, .premium-ui .quick-types-label { flex-shrink: 0; }
}

/* =====================================================================
   Shared page pieces
   ===================================================================== */
/* Eyebrow + titles used on FAQ / Careers / Testimonials pages */
/* (on these pages .section-subtitle is the descriptive sentence under the title) */
.premium-ui .section-subtitle {
    color: var(--p-muted);
    font-size: 1.08rem;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}
.premium-ui .section > .container > .text-center > .section-title,
.premium-ui .section .text-center .section-title {
    font-family: var(--p-serif);
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    color: var(--p-navy);
}

/* Pagination */
.premium-ui .pagination { gap: 6px; }
.premium-ui .page-link {
    border-radius: 12px !important;
    border: 1px solid #e3e6ef;
    color: var(--p-navy);
    min-width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600;
    transition: background var(--p-dur-fast), color var(--p-dur-fast), transform var(--p-dur-fast) var(--p-ease-out), border-color var(--p-dur-fast);
}
.premium-ui .page-link:hover { background: rgba(212, 175, 55, 0.12); border-color: rgba(212, 175, 55, 0.5); color: var(--p-navy); transform: translateY(-2px); }
.premium-ui .page-item.active .page-link { background: var(--p-navy-grad); border-color: transparent; color: #fff; box-shadow: 0 8px 18px -8px rgba(6, 16, 88, 0.6); }
.premium-ui .page-item.disabled .page-link { opacity: 0.45; }

/* Empty states */
.premium-ui .empty-state { padding: 60px 20px; text-align: center; }
.premium-ui .empty-state .empty-icon {
    width: 88px; height: 88px; margin: 0 auto 18px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.2rem;
    color: var(--p-gold-deep);
    background: radial-gradient(circle, rgba(212, 175, 55, 0.16), rgba(212, 175, 55, 0.04));
    border: 1px solid rgba(212, 175, 55, 0.3);
}

/* Generic sidebar cards (blog, FAQ) */
.premium-ui .blog-sidebar-card,
.premium-ui .faq-sidebar,
.premium-ui .faq-contact-card {
    border-radius: 20px !important;
    border: 1px solid var(--p-line);
    box-shadow: var(--p-shadow-sm);
}
.premium-ui .sidebar-title {
    font-family: var(--p-serif);
    color: var(--p-navy);
    position: relative;
    padding-bottom: 12px;
}
.premium-ui .sidebar-title::after {
    content: ''; position: absolute; left: 0; bottom: 0;
    width: 28px; height: 2px; border-radius: 2px;
    background: var(--p-gold-grad);
}
.premium-ui .recent-post-item { border-radius: 12px; transition: background var(--p-dur-fast), transform var(--p-dur-fast) var(--p-ease-out); }
.premium-ui .recent-post-item:hover { background: rgba(212, 175, 55, 0.07); transform: translateX(4px); }
.premium-ui .recent-post-image img { border-radius: 10px; }

/* =====================================================================
   Property listing
   ===================================================================== */
.premium-ui .quick-filter-bar,
.premium-ui .property-list-header,
.premium-ui .advanced-filters {
    border-radius: 20px !important;
    border: 1px solid var(--p-line) !important;
    box-shadow: var(--p-shadow-sm) !important;
    background: #fff;
}
.premium-ui .quick-filter-bar { position: relative; }
.premium-ui .quick-filter-bar::before {
    content: ''; position: absolute; top: 0; left: 28px; right: 28px; height: 3px;
    border-radius: 0 0 3px 3px; background: var(--p-gold-grad); pointer-events: none;
}
.premium-ui .results-count { font-weight: 700; color: var(--p-navy); }
.premium-ui .btn-view {
    width: 42px; height: 42px;
    border-radius: 12px !important;
    border: 1px solid #e3e6ef !important;
    color: var(--p-muted);
    display: inline-flex; align-items: center; justify-content: center;
}
.premium-ui .btn-view.active { background: var(--p-navy-grad) !important; color: #fff !important; border-color: transparent !important; }
.premium-ui .active-filters .badge {
    border-radius: 999px;
    padding: 7px 12px;
    background: rgba(212, 175, 55, 0.14) !important;
    color: var(--p-navy) !important;
    border: 1px solid rgba(212, 175, 55, 0.4);
    font-weight: 600;
}

/* =====================================================================
   Blog article
   ===================================================================== */
.premium-ui .blog-article-title {
    font-family: var(--p-serif);
    font-size: clamp(1.9rem, 3.6vw, 3rem);
    line-height: 1.12;
    color: var(--p-navy);
    font-variant-numeric: lining-nums;
}
.premium-ui .blog-category-tag {
    background: var(--p-gold-grad) !important;
    color: var(--p-navy) !important;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.premium-ui .blog-featured-image,
.premium-ui .blog-featured-image img { border-radius: 22px; }
.premium-ui .blog-featured-image { overflow: hidden; box-shadow: var(--p-shadow-lg); }
.premium-ui .blog-article-content {
    font-size: 1.08rem;
    line-height: 1.85;
    color: #2b3150;
}
.premium-ui .blog-article-content h2,
.premium-ui .blog-article-content h3 {
    font-family: var(--p-serif);
    color: var(--p-navy);
    margin-top: 2.2rem;
}
.premium-ui .blog-article-content p { margin-bottom: 1.3rem; }
.premium-ui .blog-article-content img { border-radius: 16px; margin: 1.2rem 0; }
.premium-ui .blog-article-content a { color: var(--p-gold-deep); text-decoration: underline; text-underline-offset: 3px; }
.premium-ui .blog-article-content blockquote {
    margin: 2rem 0;
    padding: 18px 24px;
    border-left: 3px solid var(--p-gold);
    background: rgba(212, 175, 55, 0.07);
    border-radius: 0 16px 16px 0;
    font-family: var(--p-serif);
    font-size: 1.2rem;
    color: var(--p-navy);
}
.premium-ui .share-btn { transition: transform var(--p-dur-fast) var(--p-ease-out), box-shadow var(--p-dur-fast); }
.premium-ui .share-btn:hover { transform: translateY(-3px); box-shadow: var(--p-shadow); }

/* =====================================================================
   FAQ
   ===================================================================== */
.premium-ui .faq-accordion .accordion-item {
    border: 1px solid var(--p-line) !important;
    border-radius: 16px !important;
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: var(--p-shadow-sm);
    transition: box-shadow var(--p-dur), border-color var(--p-dur);
}
.premium-ui .faq-accordion .accordion-item:hover { box-shadow: var(--p-shadow); }
.premium-ui .faq-accordion .accordion-button { font-weight: 600; color: var(--p-navy); padding: 18px 22px; background: #fff; box-shadow: none; }
.premium-ui .faq-accordion .accordion-button:not(.collapsed) { background: linear-gradient(90deg, rgba(212, 175, 55, 0.12), rgba(212, 175, 55, 0.02)); }
.premium-ui .faq-accordion .accordion-item:has(.accordion-button:not(.collapsed)) { border-color: rgba(212, 175, 55, 0.5) !important; }
.premium-ui .faq-accordion .accordion-button:focus { box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25); }
.premium-ui .faq-number {
    background: var(--p-navy-grad) !important;
    color: var(--p-gold-light) !important;
    border-radius: 10px !important;
}
.premium-ui .faq-category-list a,
.premium-ui .faq-category-list button { border-radius: 12px; transition: background var(--p-dur-fast), padding var(--p-dur-fast) var(--p-ease-out); }

/* =====================================================================
   Careers / Testimonials / Agent profile
   ===================================================================== */
.premium-ui .career-card,
.premium-ui .benefit-card,
.premium-ui .cta-card,
.premium-ui .contact-info-card {
    border-radius: 20px !important;
    border: 1px solid var(--p-line);
    box-shadow: var(--p-shadow-sm);
    transition: transform var(--p-dur) var(--p-ease-out), box-shadow var(--p-dur) var(--p-ease-out), border-color var(--p-dur);
}
.premium-ui .career-card:hover,
.premium-ui .benefit-card:hover,
.premium-ui .contact-info-card:hover { transform: translateY(-8px); box-shadow: var(--p-shadow-lg); border-color: rgba(212, 175, 55, 0.45); }
.premium-ui .career-title { font-family: var(--p-serif); color: var(--p-navy); }
.premium-ui .benefit-icon,
.premium-ui .contact-info-card .contact-icon {
    background: var(--p-navy-grad) !important;
    color: var(--p-gold-light) !important;
    box-shadow: 0 12px 24px -12px rgba(6, 16, 88, 0.7);
    transition: transform var(--p-dur) var(--p-ease-out);
}
.premium-ui .benefit-card:hover .benefit-icon,
.premium-ui .contact-info-card:hover .contact-icon { transform: translateY(-4px) rotate(-6deg); }
.premium-ui .stats-banner {
    background: radial-gradient(500px 260px at 15% 20%, rgba(212, 175, 55, 0.2), transparent 70%), var(--p-navy-grad) !important;
    border-radius: 24px !important;
    overflow: hidden;
}
.premium-ui .stats-banner .stat-number { font-family: var(--p-serif); font-variant-numeric: lining-nums; }
.premium-ui .cta-card { background: radial-gradient(500px 260px at 90% 0%, rgba(212, 175, 55, 0.22), transparent 70%), var(--p-navy-grad) !important; }
.premium-ui .agent-stat,
.premium-ui .contact-item { border-radius: 14px; transition: background var(--p-dur-fast), transform var(--p-dur-fast) var(--p-ease-out); }
.premium-ui .agent-stat:hover,
.premium-ui .contact-item:hover { background: rgba(212, 175, 55, 0.07); transform: translateY(-2px); }

/* =====================================================================
   Login / register popups
   ===================================================================== */
.premium-ui .auth-modal .modal-content {
    border: 0;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 40px 90px -30px rgba(3, 8, 53, 0.65);
}
.premium-ui .auth-modal .auth-modal-header,
.premium-ui .auth-modal .modal-header {
    background: radial-gradient(400px 200px at 90% 0%, rgba(212, 175, 55, 0.25), transparent 70%), var(--p-navy-grad);
    border-bottom: 0;
}
.premium-ui .auth-modal .modal-title,
.premium-ui .auth-modal .auth-modal-header h4,
.premium-ui .auth-modal .auth-modal-header h5 { font-family: var(--p-serif); color: #fff; }
.premium-ui .auth-modal .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.premium-ui .auth-modal .form-control { min-height: 50px; }
.premium-ui .auth-modal .btn-primary { min-height: 50px; border-radius: 14px; }
.premium-ui .auth-modal .btn-social { border-radius: 14px; min-height: 48px; transition: transform var(--p-dur-fast) var(--p-ease-out), box-shadow var(--p-dur-fast); }
.premium-ui .auth-modal .btn-social:hover { transform: translateY(-2px); box-shadow: var(--p-shadow); }
.premium-ui .modal.fade .modal-dialog { transform: translate3d(0, 24px, 0) scale(0.98); transition: transform 0.45s var(--p-ease-out); }
.premium-ui .modal.show .modal-dialog { transform: none; }
.premium-ui .modal-backdrop.show { opacity: 0.6; }
.premium-ui .modal-backdrop { background: #030835; }

/* =====================================================================
   404 / error pages
   ===================================================================== */
.premium-ui .p-status-page {
    min-height: 70vh;
    display: flex; align-items: center;
    padding: 80px 0;
    background:
        radial-gradient(700px 360px at 85% 10%, rgba(212, 175, 55, 0.12), transparent 65%),
        radial-gradient(600px 360px at 10% 90%, rgba(6, 16, 88, 0.08), transparent 65%);
}
.premium-ui .p-status-card { max-width: 720px; margin: 0 auto; text-align: center; }
.premium-ui .p-status-code {
    font-family: var(--p-serif);
    font-size: clamp(5rem, 16vw, 9rem);
    line-height: 1;
    font-weight: 700;
    background: linear-gradient(110deg, #b8932a 0%, #f3dd8f 30%, #d4af37 55%, #061058 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    font-variant-numeric: lining-nums;
    animation: pRise 0.9s var(--p-ease-out) both;
}
.premium-ui .p-status-card h1 {
    font-family: var(--p-serif);
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    color: var(--p-navy);
    margin: 10px 0 14px;
    animation: pRise 0.9s 0.1s var(--p-ease-out) both;
}
.premium-ui .p-status-card > p { color: var(--p-muted); font-size: 1.08rem; animation: pRise 0.9s 0.2s var(--p-ease-out) both; }
.premium-ui .p-status-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.premium-ui .p-status-ref { margin-top: 22px; font-size: 0.85rem; color: var(--p-muted); }
.premium-ui .p-status-search {
    display: flex; align-items: center; gap: 8px;
    max-width: 560px; margin: 28px auto 0;
    padding: 8px 8px 8px 18px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--p-line);
    box-shadow: var(--p-shadow);
    animation: pRise 0.9s 0.3s var(--p-ease-out) both;
}
.premium-ui .p-status-search .bi { color: var(--p-navy); }
.premium-ui .p-status-search input { flex: 1; border: 0; outline: 0; min-width: 0; padding: 10px 6px; font-size: 16px; background: transparent; }
.premium-ui .p-status-search .btn { border-radius: 12px; padding: 10px 22px; }
.premium-ui .p-status-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 26px; animation: pRise 0.9s 0.4s var(--p-ease-out) both; }
.premium-ui .p-status-links a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border-radius: 999px;
    border: 1px solid #e1e4ee; background: #fff;
    color: var(--p-ink); font-weight: 600; font-size: 0.9rem;
    transition: background var(--p-dur-fast), color var(--p-dur-fast), transform var(--p-dur-fast) var(--p-ease-out);
}
.premium-ui .p-status-links a .bi { color: var(--p-gold-deep); }
.premium-ui .p-status-links a:hover { background: var(--p-navy); color: #fff; transform: translateY(-2px); }

/* =====================================================================
   Round 3 — signature details
   ===================================================================== */

/* Hero headline: each word rises from behind a mask */
.premium-ui .hero-title.p-words-ready .p-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: 0.08em;      /* room for descenders */
    margin-bottom: -0.08em;
}
.premium-ui .hero-title.p-words-ready .p-word > span {
    display: inline-block;
    animation: pWordUp 1s var(--p-ease-out) both;
}
@keyframes pWordUp { from { transform: translate3d(0, 105%, 0); } to { transform: none; } }
/* the gold phrase is not split into words (see premium.js); it rises in as one piece,
   keeping its gradient-text shimmer */
.premium-ui .hero-title.p-words-ready .highlight {
    display: inline-block;
    animation:
        pGoldShimmer 6s linear infinite,
        pHighlightIn 1.1s var(--p-ease-out) var(--hl-delay, 0.3s) both;
}
@keyframes pHighlightIn { from { opacity: 0; transform: translate3d(0, 0.45em, 0); } to { opacity: 1; transform: none; } }

/* Hero trust chips */
.premium-ui .hero-trust {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-top: 22px;
}
.premium-ui .hero-trust-chip {
    display: inline-flex; align-items: baseline; gap: 8px;
    padding: 8px 16px 8px 14px;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.86rem;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: background var(--p-dur-fast), border-color var(--p-dur-fast), transform var(--p-dur-fast) var(--p-ease-out);
}
.premium-ui .hero-trust-chip strong {
    font-family: var(--p-serif);
    font-size: 1.15rem;
    color: var(--p-gold-light);
    font-variant-numeric: lining-nums;
}
.premium-ui a.hero-trust-chip:hover { color: #fff; background: rgba(212, 175, 55, 0.18); border-color: rgba(212, 175, 55, 0.5); transform: translateY(-2px); }
@media (max-width: 991.98px) { .premium-ui .hero-trust { justify-content: center; } }
/* site.css centres the hero on portrait iPads (device-width rule); follow it there */
@media only screen and (min-device-width: 768px) and (max-device-width: 1366px) and (orientation: portrait) {
    .premium-ui .hero-subtitle { border-left: 0; padding-left: 0; }
    .premium-ui .hero-trust { justify-content: center; }
    .premium-ui .hero-content .hero-tabs { justify-content: center; }
    .premium-ui .hero-content .hero-search-form { margin-left: auto; margin-right: auto; }
}
@media (max-width: 575.98px) {
    .premium-ui .hero-trust { gap: 6px; }
    .premium-ui .hero-trust-chip { padding: 6px 11px; font-size: 0.76rem; gap: 5px; }
    .premium-ui .hero-trust-chip strong { font-size: 0.98rem; }
}

/* Hero eases up and fades as you scroll (pure CSS where supported; premium.js otherwise) */
@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        .premium-ui .hero-banner .hero-content {
            animation: pHeroAway linear both;
            animation-timeline: scroll(root);
            animation-range: 0 85vh;
        }
        .premium-ui .hero-banner .hero-images {
            animation: pHeroImagesAway linear both;
            animation-timeline: scroll(root);
            animation-range: 0 85vh;
        }
    }
}
/* drift only, no fade: fading turned the white search console see-through while scrolling */
@keyframes pHeroAway { to { transform: translate3d(0, -60px, 0); } }
@keyframes pHeroImagesAway { to { transform: translate3d(0, -130px, 0); } }

/* Section watermark word + gold ornament */
.premium-ui .section-header { position: relative; isolation: isolate; }
.premium-ui .section-header[data-watermark]:not([data-watermark=""])::before {
    content: attr(data-watermark);
    position: absolute;
    left: 50%; top: -0.32em;
    transform: translateX(-50%);
    z-index: -1;
    font-family: var(--p-serif);
    font-weight: 700;
    font-size: clamp(4.5rem, 13vw, 10rem);
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1px rgba(6, 16, 88, 0.07);
    pointer-events: none;
    user-select: none;
}
.premium-ui .section-header.text-start[data-watermark]::before { left: 0; transform: none; }
.premium-ui .stats-section .section-header::before,
.premium-ui .section-dark .section-header::before { -webkit-text-stroke-color: rgba(255, 255, 255, 0.07); }
.premium-ui .section-header h2::after {
    content: '';
    display: block;
    width: 64px; height: 10px;
    margin: 16px auto 0;
    background:
        linear-gradient(90deg, transparent, var(--p-gold) 40%, transparent 40%, transparent 60%, var(--p-gold) 60%, transparent) center / 100% 1px no-repeat,
        linear-gradient(45deg, transparent 42%, var(--p-gold) 42%, var(--p-gold) 58%, transparent 58%) center / 10px 10px no-repeat;
    transform: scaleX(0);
    transition: transform 1s 0.25s var(--p-ease-out);
}
.premium-ui .section-header.text-start h2::after { margin-left: 0; transform-origin: 0 50%; }
.premium-ui .section-header.is-visible h2::after,
html:not(.p-js) .premium-ui .section-header h2::after,
.p-static .section-header h2::after { transform: none; }
@media (max-width: 575.98px) { .premium-ui .section-header[data-watermark]::before { font-size: 3.6rem; top: -0.1em; } }

/* Cursor spotlight on cards (desktop) */
.premium-ui .p-spot { position: relative; }
.premium-ui .p-spot::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(212, 175, 55, 0.14), transparent 45%);
    opacity: 0;
    transition: opacity 0.4s;
    z-index: 3;
}
.premium-ui .p-spot:hover::after { opacity: 1; }
.premium-ui .quick-action.p-spot::after { background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(236, 210, 127, 0.22), transparent 50%); }

/* Gentle 3D tilt on property cards (desktop) */
.premium-ui .property-card.p-spot:hover,
.p-js .p-reveal.is-visible.property-card.p-spot:hover {
    transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-10px);
    transition: transform 0.25s var(--p-ease-out), box-shadow 0.6s var(--p-ease), border-color 0.6s;
}

/* Light sweep across property photos on hover */
.premium-ui .property-image::before {
    content: '';
    position: absolute;
    top: 0; left: -80%;
    width: 50%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-18deg);
    z-index: 2;
    pointer-events: none;
    transition: left 0.9s var(--p-ease-out);
}
.premium-ui .property-card:hover .property-image::before { left: 140%; }

/* Fine film grain on dark sections: a luxury print feel (static, no repaints) */
.premium-ui .stats-section::after,
.premium-ui .cta-section::after,
.premium-ui .footer::after {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none;
    opacity: 0.07;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    z-index: 0;
}
.premium-ui .stats-section > .container,
.premium-ui .cta-section > .container,
.premium-ui .footer > * { position: relative; z-index: 1; }

/* Rotating gold ring around stat icons (transform-only) */
.premium-ui .stats-section .stat-item .stat-icon { position: relative; }
.premium-ui .stats-section .stat-item .stat-icon::before {
    content: '';
    position: absolute; inset: -7px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 70%, rgba(236, 210, 127, 0.95) 85%, transparent 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
    animation: pSpin 4.5s linear infinite;
}
@keyframes pSpin { to { transform: rotate(1turn); } }

/* Footer watermark */
.premium-ui .footer { overflow: hidden; }
.premium-ui .footer-main { position: relative; }
.premium-ui .footer-main::before {
    content: 'NORTH AVENUE';
    position: absolute;
    left: 50%; bottom: -0.18em;
    transform: translateX(-50%);
    font-family: var(--p-serif);
    font-weight: 700;
    font-size: clamp(3rem, 12vw, 11rem);
    line-height: 1;
    letter-spacing: 0.04em;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1px rgba(212, 175, 55, 0.12);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
.premium-ui .footer-main > .container { position: relative; z-index: 1; }

/* Gold-rimmed primary CTA in the hero tabs + navbar */
.premium-ui .navbar-main .btn-accent,
.premium-ui .hero-tab.active { box-shadow: 0 0 0 1px rgba(255, 243, 196, 0.6) inset, 0 10px 26px -10px rgba(212, 175, 55, 0.8); }

/* =====================================================================
   Luxury hero (.lux-hero) — centred, cinematic, one search console
   ===================================================================== */
.premium-ui .hero-banner.lux-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(640px, calc(100vh - 130px), 980px);
    min-height: clamp(640px, calc(100svh - 130px), 980px);
    padding: 84px 0 118px;
    overflow: hidden;
    isolation: isolate;
    text-align: center;
    background: #030835;
}

/* background layers */
.premium-ui .lux-hero .hero-bg { position: absolute; inset: 0; z-index: 0; }
.premium-ui .lux-hero .hero-bg::before {
    content: '';
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    animation: pLuxZoom 26s ease-in-out infinite alternate;
}
.premium-ui .lux-hero.hero-no-zoom .hero-bg::before { animation: none; }
@keyframes pLuxZoom { from { transform: scale(1.02); } to { transform: scale(1.12); } }
.premium-ui .lux-hero .hero-bg::after {
    content: '';
    position: absolute; inset: 0;
    z-index: 2;
    background:
        /* a soft dark pool behind the text block keeps it legible on bright photos */
        radial-gradient(ellipse 58% 50% at 50% 48%, rgba(3, 8, 53, calc(var(--hero-o2, 0.7) * 0.75)) 0%, rgba(3, 8, 53, calc(var(--hero-o2, 0.7) * 0.35)) 55%, transparent 80%),
        radial-gradient(ellipse 120% 90% at 50% 40%, transparent 35%, rgba(3, 8, 53, var(--hero-o1, 0.92)) 100%),
        linear-gradient(180deg, rgba(3, 8, 53, var(--hero-o2, 0.7)) 0%, rgba(6, 16, 88, var(--hero-o3, 0.3)) 38%, rgba(6, 16, 88, var(--hero-o3, 0.3)) 58%, rgba(3, 8, 53, var(--hero-o1, 0.92)) 100%);
}

/* fine gold frame with corner accents */
.premium-ui .lux-frame {
    position: absolute;
    inset: 28px;
    z-index: 3;
    pointer-events: none;
    border: 1px solid rgba(212, 175, 55, 0.18);
}
.premium-ui .lux-frame span {
    position: absolute;
    width: 26px; height: 26px;
    border-color: rgba(236, 210, 127, 0.75);
    border-style: solid;
    border-width: 0;
}
.premium-ui .lux-frame span:nth-child(1) { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.premium-ui .lux-frame span:nth-child(2) { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; }
.premium-ui .lux-frame span:nth-child(3) { bottom: -1px; left: -1px; border-bottom-width: 2px; border-left-width: 2px; }
.premium-ui .lux-frame span:nth-child(4) { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }

.premium-ui .lux-hero-inner { position: relative; z-index: 5; }
.premium-ui .lux-content { max-width: 920px; margin: 0 auto; }

/* eyebrow: brand name in fine spaced capitals */
.premium-ui .lux-eyebrow {
    display: inline-flex; align-items: center; gap: 18px;
    color: var(--p-gold-light);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    margin-bottom: 28px;
    padding-left: 0.42em;            /* optically centre the letter-spaced text */
}
.premium-ui .lux-eyebrow-line { width: 56px; height: 1px; background: linear-gradient(90deg, transparent, var(--p-gold)); }
.premium-ui .lux-eyebrow-line:last-child { background: linear-gradient(90deg, var(--p-gold), transparent); }

/* headline: light editorial serif, italic champagne second line */
.premium-ui .lux-hero .hero-title.lux-title {
    font-family: var(--p-serif);
    font-weight: 400;
    font-size: clamp(2.6rem, 6.4vw, 5.6rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin: 0 auto 26px;
    color: #fff;
    text-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.premium-ui .lux-hero .lux-title .highlight {
    display: block;
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.01em;
    margin-top: 0.06em;
    background: linear-gradient(100deg, #c9a24a 0%, #f4e2a8 38%, #d9b45c 62%, #b8932a 100%);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 10px 30px rgba(212, 175, 55, 0.25));
}
.premium-ui .lux-hero .hero-title.p-words-ready .highlight {
    display: block;
    animation: pGoldShimmer 9s linear infinite, pHighlightIn 1.2s var(--p-ease-out) var(--hl-delay, 0.3s) both;
}

/* single refined line under the headline */
.premium-ui .lux-lede {
    max-width: 600px;
    margin: 0 auto 44px;
    color: rgba(255, 255, 255, 0.78);
    font-size: clamp(1rem, 1.5vw, 1.12rem);
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0.01em;
    animation: pRise 1s 0.55s var(--p-ease-out) both;
}

/* concierge search bar: dark glass, hairline gold dividers */
/* z-index: the entrance animations give the links/stats below their own layers; keep the bar
   (and its open dropdown lists) above them */
.premium-ui .lux-console { position: relative; z-index: 20; max-width: 980px; margin: 0 auto; animation: pRise 1s 0.7s var(--p-ease-out) both; }
.premium-ui .lux-bar {
    display: flex;
    align-items: stretch;
    padding: 8px;
    border-radius: 999px;
    text-align: left;
    background: linear-gradient(180deg, rgba(10, 18, 70, 0.62), rgba(3, 8, 53, 0.72));
    border: 1px solid rgba(236, 210, 127, 0.28);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    backdrop-filter: blur(22px) saturate(140%);
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.premium-ui .lux-cell {
    position: relative;
    display: flex; flex-direction: column; justify-content: center;
    min-width: 0;
    margin: 0;
    padding: 10px 26px;
    border-radius: 999px;
    cursor: text;
    transition: background var(--p-dur-fast);
}
.premium-ui .lux-cell + .lux-cell::before {
    content: '';
    position: absolute; left: 0; top: 24%; bottom: 24%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(236, 210, 127, 0.45), transparent);
}
.premium-ui .lux-cell:hover,
.premium-ui .lux-cell:focus-within { background: rgba(255, 255, 255, 0.06); }
.premium-ui .lux-cell-purpose { flex: 0 0 auto; cursor: default; padding-left: 30px; }
.premium-ui .lux-cell-location { flex: 1.5; }
.premium-ui .lux-cell-type { flex: 1.1; cursor: pointer; }
.premium-ui .lux-cell-budget { flex: 1.1; cursor: pointer; }
.premium-ui .lux-cell-label {
    display: block;
    margin-bottom: 3px;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(236, 210, 127, 0.85);
}
.premium-ui .lux-cell input {
    width: 100%; min-width: 0;
    padding: 0;
    border: 0; outline: 0; background: transparent;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.01em;
}
.premium-ui .lux-cell input::placeholder { color: rgba(255, 255, 255, 0.5); font-weight: 400; }
.premium-ui .lux-purpose { display: flex; gap: 18px; }
.premium-ui .lux-purpose label { margin: 0; cursor: pointer; }
.premium-ui .lux-purpose input { position: absolute; opacity: 0; pointer-events: none; }
.premium-ui .lux-purpose span {
    position: relative;
    display: inline-block;
    padding-bottom: 2px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 16px;
    font-weight: 500;
    transition: color var(--p-dur-fast);
}
.premium-ui .lux-purpose span::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: -2px;
    height: 1px;
    background: var(--p-gold-light);
    transform: scaleX(0);
    transition: transform var(--p-dur) var(--p-ease-out);
}
.premium-ui .lux-purpose label:hover span { color: rgba(255, 255, 255, 0.85); }
.premium-ui .lux-purpose input:checked + span { color: #fff; }
.premium-ui .lux-purpose input:checked + span::after { transform: scaleX(1); }
.premium-ui .lux-purpose input:focus-visible + span { outline: 1px solid var(--p-gold-light); outline-offset: 4px; }

/* dropdowns inside the dark bar */
.premium-ui .lux-bar .lux-select-btn { padding: 0; color: #fff; font-weight: 500; }
.premium-ui .lux-bar .lux-select-btn::after { border-color: var(--p-gold-light); width: 7px; height: 7px; border-width: 0 1.5px 1.5px 0; }
.premium-ui .lux-bar .lux-select-list { left: -18px; right: -18px; top: calc(100% + 22px); }
.premium-ui .lux-bar .lux-select.opens-up .lux-select-list { top: auto; bottom: calc(100% + 22px); }
.premium-ui .lux-cell:has(.lux-select-btn:focus-visible),
.premium-ui .lux-cell:has(input:focus-visible) { box-shadow: inset 0 0 0 1px rgba(236, 210, 127, 0.7); }

/* gold search button */
.premium-ui .lux-go {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    padding: 0 34px;
    min-height: 64px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #f3dd8f 0%, #d4af37 50%, #b8932a 100%);
    color: #061058;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 14px 30px -12px rgba(212, 175, 55, 0.85);
    transition: transform var(--p-dur-fast) var(--p-ease-out), box-shadow var(--p-dur-fast);
}
.premium-ui .lux-go .bi { font-size: 1.1rem; transition: transform var(--p-dur) var(--p-ease-out); }
.premium-ui .lux-go::after {
    content: ''; position: absolute; top: 0; left: -80%;
    width: 50%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-20deg);
    z-index: -1;
    transition: left 0.8s var(--p-ease-out);
}
.premium-ui .lux-go:hover { transform: translateY(-1px); box-shadow: 0 20px 36px -12px rgba(212, 175, 55, 1); }
.premium-ui .lux-go:hover::after { left: 140%; }
.premium-ui .lux-go:hover .bi { transform: translateX(4px); }
.premium-ui .lux-go:active { transform: scale(0.98); }

/* quiet links under the bar */
.premium-ui .lux-links {
    display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 22px;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    animation: pRise 1s 0.85s var(--p-ease-out) both;
}
.premium-ui .lux-links a {
    position: relative;
    display: inline-block;
    padding: 12px 2px;            /* comfortable tap target (text alone is only ~16px tall) */
    margin: -12px 0;
    color: rgba(255, 255, 255, 0.72);
    transition: color var(--p-dur-fast);
}
.premium-ui .lux-links a::after {
    content: ''; position: absolute; left: 2px; right: 2px; bottom: 8px; height: 1px;
    background: var(--p-gold-light);
    transform: scaleX(0); transform-origin: 0 50%;
    transition: transform var(--p-dur) var(--p-ease-out);
}
.premium-ui .lux-links a:hover { color: #fff; }
.premium-ui .lux-links a:hover::after { transform: scaleX(1); }

/* tablets: bar wraps into two rows inside a rounded panel */
@media (max-width: 991.98px) {
    .premium-ui .lux-bar { flex-wrap: wrap; border-radius: 28px; padding: 10px; }
    .premium-ui .lux-cell-purpose { flex: 1 1 100%; padding: 12px 22px; }
    .premium-ui .lux-cell-location { flex: 1 1 100%; }
    .premium-ui .lux-cell-type, .premium-ui .lux-cell-budget { flex: 1 1 40%; }
    .premium-ui .lux-cell + .lux-cell::before { left: 22px; right: 22px; top: 0; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(236, 210, 127, 0.35), transparent); }
    .premium-ui .lux-cell-budget::before { left: 0 !important; right: auto !important; top: 24% !important; bottom: 24% !important; width: 1px !important; height: auto !important; background: linear-gradient(180deg, transparent, rgba(236, 210, 127, 0.45), transparent) !important; }
    .premium-ui .lux-cell { border-radius: 18px; padding: 12px 22px; }
    .premium-ui .lux-go { flex: 1 1 100%; margin-top: 6px; min-height: 56px; border-radius: 18px; }
}
/* stats row */
.premium-ui .lux-stats {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: 10px 26px;
    margin-top: 28px;
}
.premium-ui .lux-stat {
    display: inline-flex; align-items: baseline; gap: 10px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.premium-ui .lux-stat strong {
    font-family: var(--p-serif);
    font-size: 1.7rem;
    letter-spacing: 0;
    color: #fff;
    font-variant-numeric: lining-nums;
    text-transform: none;
}
.premium-ui a.lux-stat:hover strong { color: var(--p-gold-light); }
.premium-ui .lux-stat-dot { width: 5px; height: 5px; transform: rotate(45deg); background: var(--p-gold); }

/* premium dropdown (built by premium.js from <select data-lux-select>) */
.premium-ui .lux-select { position: relative; width: 100%; }
.premium-ui .lux-select-native {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden;
}
.premium-ui .lux-select-btn {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%;
    padding: 2px 0 0;
    border: 0; background: transparent;
    font-size: 16px; font-weight: 600;
    color: var(--p-ink);
    text-align: left;
    cursor: pointer;
}
.premium-ui .lux-select-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.premium-ui .lux-select-btn::after {
    content: '';
    flex-shrink: 0;
    width: 8px; height: 8px;
    margin: 0 4px 4px 0;
    border-right: 2px solid var(--p-navy);
    border-bottom: 2px solid var(--p-navy);
    transform: rotate(45deg);
    transition: transform var(--p-dur-fast) var(--p-ease-out), margin var(--p-dur-fast);
}
.premium-ui .lux-select.is-open .lux-select-btn::after { transform: rotate(-135deg); margin-bottom: -4px; }
/* keyboard focus is shown around the whole field, not the small value button */
.premium-ui .lux-select-btn:focus-visible { outline: none; }


.premium-ui .lux-select-list {
    position: absolute;
    left: -58px; right: -18px;          /* align with the whole field (icon included) */
    top: calc(100% + 18px);
    z-index: 60;
    margin: 0; padding: 8px;
    list-style: none;
    max-height: 300px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    border: 1px solid rgba(6, 16, 88, 0.08);
    border-radius: 18px;
    box-shadow: 0 30px 60px -18px rgba(3, 8, 53, 0.45), 0 2px 6px rgba(3, 8, 53, 0.06);
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, -8px, 0) scale(0.98);
    transform-origin: 50% 0;
    transition: opacity 0.22s var(--p-ease-out), transform 0.32s var(--p-ease-out), visibility 0s linear 0.32s;
}
.premium-ui .lux-select.opens-up .lux-select-list { top: auto; bottom: calc(100% + 18px); transform-origin: 50% 100%; transform: translate3d(0, 8px, 0) scale(0.98); }
.premium-ui .lux-select.is-open .lux-select-list {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.22s var(--p-ease-out), transform 0.32s var(--p-ease-out), visibility 0s;
}
.premium-ui .lux-select-list:focus { outline: none; }
.premium-ui .lux-select-list [role="option"] {
    position: relative;
    padding: 11px 40px 11px 14px;
    border-radius: 12px;
    color: var(--p-ink);
    font-size: 0.96rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.premium-ui .lux-select-list [role="option"].is-active { background: rgba(212, 175, 55, 0.12); color: var(--p-navy); }
.premium-ui .lux-select-list [role="option"][aria-selected="true"] { font-weight: 700; color: var(--p-navy); }
.premium-ui .lux-select-list [role="option"][aria-selected="true"]::after {
    content: '';
    position: absolute; right: 16px; top: 50%;
    width: 6px; height: 11px;
    margin-top: -7px;
    border-right: 2px solid var(--p-gold-deep);
    border-bottom: 2px solid var(--p-gold-deep);
    transform: rotate(45deg);
}
.premium-ui .lux-select-list::-webkit-scrollbar { width: 8px; }
.premium-ui .lux-select-list::-webkit-scrollbar-thumb { background: #dde0ea; border-radius: 8px; border: 2px solid #fff; }
@media (max-width: 767.98px) {
    .premium-ui .lux-select-list { left: -46px; right: -6px; max-height: 260px; }
}

/* slide UI + scroll cue */
.premium-ui .hero-slider-ui.lux-slider-ui { bottom: 46px; }
@media (min-width: 992px) {
    /* keep clear of the fixed "Add Listing" button in the bottom-right corner */
    .premium-ui .lux-slider-ui .hero-slider-bar { padding-right: 92px; }
}
.premium-ui .lux-slide-count {
    display: inline-flex; align-items: center; gap: 10px;
    margin-right: 6px;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--p-serif);
    font-size: 0.95rem;
    font-variant-numeric: lining-nums tabular-nums;
}
.premium-ui .lux-slide-count strong { color: #fff; font-size: 1.3rem; }
.premium-ui .lux-slide-count em { width: 26px; height: 1px; background: rgba(236, 210, 127, 0.7); }
.premium-ui .lux-scroll {
    position: absolute;
    left: 50%; bottom: 44px;
    transform: translateX(-50%);
    z-index: 6;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.66rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}
.premium-ui .lux-scroll i {
    position: relative;
    width: 1px; height: 46px;
    background: rgba(255, 255, 255, 0.25);
    overflow: hidden;
}
.premium-ui .lux-scroll i::after {
    content: '';
    position: absolute; left: 0; top: 0;
    width: 1px; height: 18px;
    background: var(--p-gold-light);
    animation: pScrollCue 2.2s var(--p-ease-out) infinite;
}
@keyframes pScrollCue { from { transform: translateY(-18px); } to { transform: translateY(46px); } }
.premium-ui .lux-scroll:hover { color: #fff; }
.premium-ui .lux-hero:has(.lux-slider-ui) .lux-scroll { display: none; }
@media (min-width: 992px) and (max-height: 960px) { .premium-ui .lux-scroll { display: none; } }   /* no room under the stats */   /* slide controls take that space */

/* spacing for the section right after the hero (the old overlapping filter card is gone) */
.premium-ui .lux-hero + .quick-actions-section { padding-top: 70px; }

/* hero: tablets */
@media (max-width: 991.98px) {
    .premium-ui .hero-banner.lux-hero { min-height: 0; padding: 92px 0 120px; }
    .premium-ui .lux-frame { inset: 16px; }
    .premium-ui .hero-slider-ui.lux-slider-ui { bottom: 30px; }
    .premium-ui .lux-scroll { bottom: 30px; }
    .premium-ui .lux-scroll i { height: 34px; }
}
/* hero: phones */
@media (max-width: 767.98px) {
    .premium-ui .hero-banner.lux-hero { padding: 64px 0 100px; }
    .premium-ui .lux-frame { inset: 10px; }
    .premium-ui .lux-frame span { width: 18px; height: 18px; }
    .premium-ui .lux-eyebrow { font-size: 0.6rem; letter-spacing: 0.3em; gap: 10px; margin-bottom: 20px; }
    .premium-ui .lux-eyebrow-line { width: 26px; }
    .premium-ui .lux-hero .hero-title.lux-title { font-size: clamp(2.3rem, 11vw, 3rem); margin-bottom: 18px; }
    .premium-ui .lux-lede { font-size: 0.95rem; margin-bottom: 28px; padding: 0 6px; }
    .premium-ui .lux-bar { border-radius: 24px; padding: 8px; }
    .premium-ui .lux-cell { padding: 11px 18px; }
    .premium-ui .lux-cell-type, .premium-ui .lux-cell-budget { flex: 1 1 100%; }
    .premium-ui .lux-cell-budget::before { left: 18px !important; right: 18px !important; top: 0 !important; bottom: auto !important; width: auto !important; height: 1px !important; background: linear-gradient(90deg, transparent, rgba(236, 210, 127, 0.35), transparent) !important; }
    .premium-ui .lux-go { min-height: 54px; }
    .premium-ui .lux-links { font-size: 0.66rem; letter-spacing: 0.12em; gap: 6px 10px; }
    .premium-ui .lux-stats { gap: 8px 16px; margin-top: 26px; }
    .premium-ui .lux-stat { font-size: 0.68rem; letter-spacing: 0.1em; gap: 6px; }
    .premium-ui .lux-stat strong { font-size: 1.3rem; }
    .premium-ui .lux-hero + .quick-actions-section { padding-top: 46px; }
    .premium-ui .lux-slide-count { display: none; }   /* bottom-left belongs to the floating message button */
}
/* =====================================================================
   Popups: shared premium modal shell (filters + mortgage)
   ===================================================================== */
.premium-ui .filter-modal .modal-content,
.premium-ui .mortgage-modal .modal-content {
    border: 0;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 50px 100px -30px rgba(3, 8, 53, 0.7);
}
.premium-ui .filter-modal .modal-header,
.premium-ui .mortgage-modal .modal-header {
    align-items: flex-start;
    padding: 24px 28px 20px;
    border-bottom: 0;
    color: #fff;
    background: radial-gradient(420px 200px at 95% 0%, rgba(212, 175, 55, 0.28), transparent 70%), var(--p-navy-grad);
}
.premium-ui .filter-modal .modal-title,
.premium-ui .mortgage-modal .modal-title {
    font-family: var(--p-serif);
    font-size: 1.6rem;
    color: #fff;
    margin: 2px 0 4px;
}
.premium-ui .filter-modal .modal-title .bi,
.premium-ui .mortgage-modal .modal-title .bi { color: var(--p-gold-light); }
.premium-ui .mortgage-modal .modal-header p { color: rgba(255, 255, 255, 0.72); font-size: 0.92rem; }
.premium-ui .filter-modal-eyebrow,
.premium-ui .mortgage-modal-eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--p-gold-light);
}
.premium-ui .filter-modal .btn-close,
.premium-ui .mortgage-modal .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
    opacity: 0.8;
    margin-top: 4px;
}
.premium-ui .filter-modal .modal-body { padding: 24px 28px 8px; }
.premium-ui .filter-modal .modal-footer {
    padding: 16px 28px 22px;
    border-top: 1px solid var(--p-line);
    justify-content: space-between;
    background: #fbfbfe;
}

/* filter popup fields */
.premium-ui .fm-group { margin-bottom: 20px; }
.premium-ui .fm-group + .row { margin-top: 0; }
.premium-ui .filter-modal .row + .fm-group { margin-top: 22px; }
.premium-ui .fm-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--p-muted);
}
.premium-ui .filter-modal .form-control,
.premium-ui .filter-modal .form-select { min-height: 50px; font-size: 16px; }
.premium-ui .filter-modal .form-select:disabled { background-color: #f4f5f9; color: #9aa0b8; }
.premium-ui .fm-input-icon { position: relative; }
.premium-ui .fm-input-icon .bi {
    position: absolute; left: 16px; top: 50%;
    transform: translateY(-50%);
    color: var(--p-gold-deep);
    pointer-events: none;
}
.premium-ui .fm-input-icon .form-control { padding-left: 44px; }
.premium-ui .fm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.premium-ui .fm-chip { margin: 0; cursor: pointer; }
.premium-ui .fm-chip input { position: absolute; opacity: 0; pointer-events: none; }
.premium-ui .fm-chip span {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid #e1e4ee;
    background: #fff;
    color: var(--p-ink);
    font-weight: 600;
    font-size: 0.92rem;
    transition: background var(--p-dur-fast), color var(--p-dur-fast), border-color var(--p-dur-fast), box-shadow var(--p-dur-fast);
}
.premium-ui .fm-chip span .bi { color: var(--p-gold-deep); }
.premium-ui .fm-chip:hover span { border-color: rgba(212, 175, 55, 0.6); }
.premium-ui .fm-chip input:checked + span {
    background: var(--p-navy-grad);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 18px -8px rgba(6, 16, 88, 0.6);
}
.premium-ui .fm-chip input:checked + span .bi { color: var(--p-gold-light); }
.premium-ui .fm-chip input:focus-visible + span { outline: 2px solid var(--p-gold); outline-offset: 2px; }
.premium-ui .fm-chips-sm .fm-chip span { padding: 8px 16px; min-width: 56px; justify-content: center; }
.premium-ui .fm-sort { max-width: 320px; }
.premium-ui .fm-reset { color: var(--p-muted); text-decoration: none; font-weight: 600; }
.premium-ui .fm-reset:hover { color: var(--p-navy); }
.premium-ui .fm-submit { border-radius: 14px; padding-left: 28px; padding-right: 28px; }
[data-bedrooms-group][hidden] { display: none !important; }

/* =====================================================================
   Mortgage calculator popup (.mc)
   ===================================================================== */
.premium-ui .mortgage-modal .modal-dialog { max-width: 1080px; }
.premium-ui .mortgage-modal .modal-body.mc { padding: 0; background: #fff; }
.premium-ui .mc-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
.premium-ui .mc-inputs { padding: 34px 38px 36px; }
.premium-ui .mc-field { margin-bottom: 28px; }
.premium-ui .mc-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.premium-ui .mc-field-head label {
    margin: 0;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--p-muted);
}
.premium-ui .mc-words { font-family: var(--p-serif); font-style: italic; color: var(--p-gold-deep); font-size: 1rem; }
.premium-ui .mc-badge {
    padding: 3px 10px; border-radius: 999px;
    background: rgba(212, 175, 55, 0.14); border: 1px solid rgba(212, 175, 55, 0.4);
    color: var(--p-navy); font-weight: 700; font-size: 0.82rem;
}
.premium-ui .mc-amount {
    display: flex; align-items: baseline; gap: 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e3e6ef;
    transition: border-color var(--p-dur-fast);
}
.premium-ui .mc-amount:focus-within { border-bottom-color: var(--p-gold); }
.premium-ui .mc-prefix, .premium-ui .mc-suffix { font-family: var(--p-serif); font-size: 1.5rem; color: var(--p-gold-deep); }
.premium-ui .mc-amount input {
    flex: 1; min-width: 0;
    border: 0; outline: 0; background: transparent; padding: 0;
    font-family: var(--p-serif);
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 600;
    color: var(--p-navy);
    font-variant-numeric: lining-nums tabular-nums;
}
.premium-ui .mc-range {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 4px; margin: 18px 0 6px;
    border-radius: 4px;
    background: linear-gradient(90deg, #d4af37 0%, #b8932a var(--fill, 50%), #e6e8f0 var(--fill, 50%));
    outline: none; cursor: pointer;
}
.premium-ui .mc-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 22px; height: 22px; border-radius: 50%;
    background: #fff; border: 2px solid #d4af37;
    box-shadow: 0 4px 12px rgba(184, 147, 42, 0.45);
    transition: transform 0.15s;
}
.premium-ui .mc-range::-webkit-slider-thumb:hover { transform: scale(1.12); }
.premium-ui .mc-range::-moz-range-thumb {
    width: 22px; height: 22px; border-radius: 50%;
    background: #fff; border: 2px solid #d4af37;
    box-shadow: 0 4px 12px rgba(184, 147, 42, 0.45);
}
.premium-ui .mc-range:focus-visible::-webkit-slider-thumb { outline: 3px solid rgba(212, 175, 55, 0.4); outline-offset: 2px; }
.premium-ui .mc-scale { display: flex; justify-content: space-between; font-size: 0.74rem; color: #9aa0b8; }
.premium-ui .mc-chips { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.premium-ui .mc-chips button {
    flex: 1 1 0; min-width: 56px;
    padding: 9px 0;
    border-radius: 12px;
    border: 1px solid #e1e4ee;
    background: #fff;
    color: var(--p-ink);
    font-weight: 600; font-size: 0.9rem;
    transition: background var(--p-dur-fast), color var(--p-dur-fast), border-color var(--p-dur-fast), box-shadow var(--p-dur-fast);
}
.premium-ui .mc-chips button:hover { border-color: rgba(212, 175, 55, 0.6); }
.premium-ui .mc-chips button.is-active {
    background: var(--p-navy-grad); color: #fff; border-color: transparent;
    box-shadow: 0 8px 18px -8px rgba(6, 16, 88, 0.6);
}

.premium-ui .mc-result {
    position: relative;
    display: flex; flex-direction: column;
    padding: 34px 36px 30px;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient(420px 260px at 100% 0%, rgba(212, 175, 55, 0.22), transparent 70%), linear-gradient(160deg, #0a1a7a 0%, #061058 45%, #030835 100%);
}
.premium-ui .mc-result-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--p-gold-light); }
.premium-ui .mc-monthly {
    font-family: var(--p-serif);
    font-size: clamp(2.6rem, 5vw, 3.6rem);
    line-height: 1.05;
    margin: 8px 0 4px;
    font-variant-numeric: lining-nums tabular-nums;
    background: linear-gradient(180deg, #ffffff 30%, #f1e2b0 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.premium-ui .mc-result-sub { color: rgba(255, 255, 255, 0.6); font-size: 0.88rem; }
.premium-ui .mc-breakdown { display: flex; align-items: center; gap: 24px; margin: 26px 0 22px; }
.premium-ui .mc-donut {
    --a: 300deg; --b: 340deg;
    flex-shrink: 0;
    width: 132px; height: 132px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: conic-gradient(#ecd27f 0 var(--a), #a5a8b9 var(--a) var(--b), #6e7bd9 var(--b) 360deg);
    -webkit-mask: radial-gradient(circle, transparent 54%, #000 55%);
    mask: radial-gradient(circle, transparent 54%, #000 55%);
    position: relative;
    transition: background 0.4s;
}
.premium-ui .mc-donut > div { display: none; }
.premium-ui .mc-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; }
.premium-ui .mc-legend li {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
}
.premium-ui .mc-legend li:last-child { border-bottom: 0; }
.premium-ui .mc-legend em { font-style: normal; color: rgba(255, 255, 255, 0.4); font-size: 0.8rem; }
.premium-ui .mc-legend strong { margin-left: auto; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.premium-ui .mc-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.premium-ui .mc-dot-pi { background: #ecd27f; }
.premium-ui .mc-dot-tax { background: #a5a8b9; }
.premium-ui .mc-dot-ins { background: #6e7bd9; }
.premium-ui .mc-summary {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
    border-radius: 16px; overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    margin-bottom: 22px;
}
.premium-ui .mc-summary div { padding: 14px 14px 12px; background: rgba(3, 8, 53, 0.55); }
.premium-ui .mc-summary div > span { display: block; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin-bottom: 4px; }
.premium-ui .mc-summary strong { font-size: 0.98rem; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.premium-ui .mc-cta {
    display: flex; align-items: center; gap: 12px;
    margin-top: auto;
    padding: 16px 22px;
    border-radius: 16px;
    background: var(--p-gold-grad);
    color: var(--p-navy);
    font-weight: 700;
    box-shadow: 0 14px 30px -12px rgba(212, 175, 55, 0.8);
    transition: transform var(--p-dur-fast) var(--p-ease-out), box-shadow var(--p-dur-fast);
}
.premium-ui .mc-cta span { flex: 1; }
.premium-ui .mc-cta:hover { color: var(--p-navy); transform: translateY(-2px); box-shadow: 0 20px 36px -12px rgba(212, 175, 55, 1); }
.premium-ui .mc-cta .bi-arrow-right { transition: transform var(--p-dur) var(--p-ease-out); }
.premium-ui .mc-cta:hover .bi-arrow-right { transform: translateX(4px); }
.premium-ui .mc-note { margin: 12px 0 0; font-size: 0.74rem; color: rgba(255, 255, 255, 0.45); text-align: center; }
.premium-ui .mc-sticky { display: none; }

@media (max-width: 991.98px) {
    .premium-ui .mc-grid { grid-template-columns: 1fr; }
    .premium-ui .mc-inputs { padding: 26px 24px 28px; }
    .premium-ui .mc-result { padding: 28px 24px 26px; }
    /* result summary pinned at the top of the scrolling popup */
    .premium-ui .mc-sticky {
        position: sticky; top: 0; z-index: 5;
        display: flex; align-items: baseline; justify-content: space-between;
        padding: 12px 24px;
        background: rgba(3, 8, 53, 0.96);
        -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
        border-bottom: 1px solid rgba(212, 175, 55, 0.35);
    }
    .premium-ui .mc-sticky strong { font-family: var(--p-serif); font-size: 1.45rem; letter-spacing: 0; text-transform: none; color: var(--p-gold-light); font-variant-numeric: lining-nums tabular-nums; }
}
@media (max-width: 575.98px) {
    /* phones: the calculator slides up as a bottom sheet */
    .premium-ui .mortgage-modal .modal-dialog { margin: 0; max-width: none; height: 100%; min-height: 100%; align-items: flex-end; }
    .premium-ui .mortgage-modal .modal-content { border-radius: 24px 24px 0 0; max-height: 94vh; }
    .premium-ui .mc-breakdown { gap: 16px; }
    .premium-ui .mc-donut { width: 96px; height: 96px; }
    .premium-ui .mc-summary { grid-template-columns: 1fr; }
    .premium-ui .mc-summary div { display: flex; justify-content: space-between; align-items: baseline; padding: 11px 14px; }
    .premium-ui .mc-summary div > span { margin: 0; }
}
@media (max-width: 575.98px) {
    .premium-ui .filter-modal .modal-header,
    .premium-ui .mortgage-modal .modal-header { padding: 20px 20px 16px; }
    .premium-ui .filter-modal .modal-body { padding: 20px 20px 4px; }
    .premium-ui .filter-modal .modal-footer { padding: 14px 20px 18px; }
    .premium-ui .filter-modal .modal-title,
    .premium-ui .mortgage-modal .modal-title { font-size: 1.3rem; }
    .premium-ui .fm-chip span { padding: 9px 16px; }
    .premium-ui .fm-submit { flex: 1; }
}

/* home page mortgage teaser */
.premium-ui .mortgage-teaser { padding: 40px 0 90px; }
.premium-ui .mortgage-teaser-card {
    position: relative;
    display: flex; align-items: center; gap: 28px;
    padding: 34px 40px;
    border-radius: 26px;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient(520px 260px at 92% 0%, rgba(212, 175, 55, 0.3), transparent 70%), var(--p-navy-grad);
    box-shadow: 0 40px 80px -36px rgba(3, 8, 53, 0.75);
}
.premium-ui .mortgage-teaser-icon {
    flex-shrink: 0;
    width: 72px; height: 72px;
    border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem;
    color: var(--p-navy);
    background: var(--p-gold-grad);
    box-shadow: 0 14px 30px -12px rgba(212, 175, 55, 0.8);
}
.premium-ui .mortgage-teaser-text { flex: 1; min-width: 0; }
.premium-ui .mortgage-teaser-eyebrow {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--p-gold-light);
}
.premium-ui .mortgage-teaser h2 {
    font-family: var(--p-serif);
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    color: #fff;
    margin: 6px 0 6px;
}
.premium-ui .mortgage-teaser p { margin: 0; color: rgba(255, 255, 255, 0.75); }
.premium-ui .mortgage-teaser-btn { flex-shrink: 0; border-radius: 14px; }
@media (max-width: 767.98px) {
    .premium-ui .mortgage-teaser { padding: 20px 0 60px; }
    .premium-ui .mortgage-teaser-card { flex-direction: column; text-align: center; padding: 30px 22px; gap: 18px; }
    .premium-ui .mortgage-teaser-btn { width: 100%; }
}

/* =====================================================================
   Properties page: full filter panel
   ===================================================================== */
.premium-ui .filter-panel {
    position: relative;
    margin-bottom: 24px;
    padding: 14px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid var(--p-line);
    box-shadow: var(--p-shadow);
}
.premium-ui .filter-panel::before {
    content: ''; position: absolute; top: 0; left: 28px; right: 28px; height: 3px;
    border-radius: 0 0 3px 3px; background: var(--p-gold-grad); pointer-events: none;
}
.premium-ui .filter-panel .filter-label-sm {
    display: block;
    margin-bottom: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--p-muted);
}
.premium-ui .filter-panel .form-control,
.premium-ui .filter-panel .form-select { min-height: 48px; }
.premium-ui .filter-panel .form-select:disabled { background-color: #f4f5f9; color: #9aa0b8; }
.premium-ui .filter-panel .search-input-wrapper { position: relative; }
.premium-ui .filter-panel .search-input-wrapper .bi {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    color: var(--p-gold-deep); pointer-events: none; z-index: 2;
}
.premium-ui .filter-panel .search-input-wrapper .form-control { padding-left: 44px; }
.premium-ui .filter-seg {
    display: flex;
    padding: 4px;
    min-height: 48px;
    border-radius: 14px;
    background: #f1f3f9;
    border: 1px solid #e3e6ef;
}
.premium-ui .filter-seg { flex-wrap: wrap; gap: 2px; }
.premium-ui .filter-seg label { flex: 1 0 auto; margin: 0; cursor: pointer; }
.premium-ui .filter-seg input { position: absolute; opacity: 0; pointer-events: none; }
.premium-ui .filter-seg span {
    display: flex; align-items: center; justify-content: center;
    height: 100%;
    padding: 6px 10px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--p-muted);
    white-space: nowrap;
    transition: background var(--p-dur-fast), color var(--p-dur-fast), box-shadow var(--p-dur-fast);
}
.premium-ui .filter-seg label:hover span { color: var(--p-navy); }
.premium-ui .filter-seg input:checked + span { background: #fff; color: var(--p-navy); box-shadow: 0 4px 12px -4px rgba(6, 16, 88, 0.25); }
.premium-ui .filter-seg input:focus-visible + span { outline: 2px solid var(--p-gold); outline-offset: 1px; }
/* compact top row: search | purpose | More filters */
.premium-ui .filter-primary { display: flex; align-items: center; gap: 10px; }
.premium-ui .filter-primary-search { flex: 1 1 320px; min-width: 0; }
.premium-ui .filter-primary-search .form-control { min-height: 52px; border-radius: 14px; }
.premium-ui .filter-primary .filter-seg { flex: 0 1 auto; flex-wrap: nowrap; min-height: 52px; }
.premium-ui .filter-panel-toggle {
    flex: none; display: inline-flex; align-items: center; gap: 8px;
    min-height: 52px; padding: 0 18px; border-radius: 14px;
    border: 1px solid #e3e6ef; background: #fff; color: var(--p-navy);
    font-weight: 700; font-size: 0.92rem; white-space: nowrap;
    transition: border-color var(--p-dur-fast), background var(--p-dur-fast), color var(--p-dur-fast);
}
.premium-ui .filter-panel-toggle:hover { border-color: var(--p-gold); }
.premium-ui .filter-panel.is-open .filter-panel-toggle { background: var(--p-navy); border-color: var(--p-navy); color: #fff; }
.premium-ui .filter-panel-count:empty { display: none; }
.premium-ui .filter-panel-count {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--p-gold-grad); color: #241a00; font-size: 0.72rem; font-weight: 800;
}
.premium-ui .filter-panel-chevron { font-size: 0.8rem; transition: transform var(--p-dur-fast) var(--p-ease-out); }
.premium-ui .filter-panel.is-open .filter-panel-chevron { transform: rotate(180deg); }
.premium-ui .filter-panel-body { display: none; margin-top: 14px; padding: 18px 6px 4px; border-top: 1px dashed #e3e6ef; }
.premium-ui .filter-panel.is-open .filter-panel-body { display: block; animation: pRise 0.4s var(--p-ease-out) both; }
.premium-ui .filter-panel-foot { display: flex; justify-content: flex-end; }
.premium-ui .filter-reset {
    border: 0; background: none; padding: 4px 2px; color: var(--p-muted); font-weight: 600; font-size: 0.88rem;
    border-bottom: 1px solid transparent;
}
.premium-ui .filter-reset:hover { color: var(--p-navy); border-bottom-color: var(--p-gold); }
.premium-ui .active-filters .filter-tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px;
    margin: 4px 6px 0 0;
    border-radius: 999px;
    background: rgba(212, 175, 55, 0.14);
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: var(--p-navy);
    font-size: 0.82rem;
    font-weight: 600;
}
.premium-ui .active-filters .filter-tag .bi { cursor: pointer; opacity: 0.7; }
.premium-ui .active-filters .filter-tag .bi:hover { opacity: 1; }
@media (max-width: 991.98px) {
    .premium-ui .filter-primary { flex-wrap: wrap; }
    .premium-ui .filter-primary-search { flex: 1 1 100%; }
    .premium-ui .filter-primary .filter-seg { flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; }
    .premium-ui .filter-primary .filter-seg::-webkit-scrollbar { display: none; }
    .premium-ui .filter-primary .filter-seg label { flex: 1 0 auto; }
}
@media (max-width: 575.98px) {
    .premium-ui .filter-panel { padding: 10px; border-radius: 18px; }
    .premium-ui .filter-primary { gap: 8px; }
    .premium-ui .filter-primary-search .form-control, .premium-ui .filter-primary .filter-seg, .premium-ui .filter-panel-toggle { min-height: 46px; }
    .premium-ui .filter-primary .filter-seg { flex-basis: 100%; }
    .premium-ui .filter-panel-toggle { flex: 1 1 100%; justify-content: center; }
}

/* =====================================================================
   Floating buttons: concierge (left) + list your property (right)
   ===================================================================== */
.premium-ui .contact-float-widget {
    left: 28px; bottom: 28px;
    height: 56px;
    max-width: none;
    padding: 6px 22px 6px 6px;
    gap: 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(10, 26, 122, 0.94), rgba(3, 8, 53, 0.96));
    border: 1px solid rgba(236, 210, 127, 0.35);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 18px 40px -14px rgba(3, 8, 53, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: transform 0.35s var(--p-ease-out), box-shadow 0.35s, padding 0.45s var(--p-ease-out), gap 0.45s var(--p-ease-out);
}
.premium-ui .contact-float-widget:hover {
    background: linear-gradient(135deg, rgba(10, 26, 122, 0.98), rgba(3, 8, 53, 1));
    transform: translateY(-3px);
    box-shadow: 0 24px 48px -14px rgba(3, 8, 53, 0.75), 0 0 0 1px rgba(236, 210, 127, 0.55);
}
.premium-ui .contact-float-icon {
    position: relative;
    width: 44px; height: 44px;
    background: var(--p-gold-grad);
    box-shadow: 0 6px 16px -6px rgba(212, 175, 55, 0.9);
}
.premium-ui .contact-float-widget:hover .contact-float-icon { background: var(--p-gold-grad); }
.premium-ui .contact-float-icon i { color: var(--p-navy); font-size: 1.2rem; }
.premium-ui .contact-float-online {
    position: absolute; right: 1px; top: 1px;
    width: 11px; height: 11px; border-radius: 50%;
    background: #2ecc71;
    border: 2px solid #061058;
}
.premium-ui .contact-float-online::after {
    content: ''; position: absolute; inset: -2px; border-radius: 50%;
    border: 2px solid #2ecc71;
    animation: pOnline 2.4s ease-out infinite;
}
@keyframes pOnline { from { transform: scale(1); opacity: 0.8; } to { transform: scale(2.4); opacity: 0; } }
.premium-ui .contact-float-text {
    overflow: hidden;
    max-width: 180px;
    transition: max-width 0.45s var(--p-ease-out), opacity 0.3s;
}
.premium-ui .contact-float-eyebrow { color: var(--p-gold-light); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.2em; }
.premium-ui .contact-float-cta { color: #fff; font-size: 0.92rem; font-weight: 600; letter-spacing: 0.01em; }
.premium-ui .contact-float-widget:hover .contact-float-eyebrow { color: var(--p-gold-light); }
.premium-ui .contact-float-widget:hover .contact-float-cta { color: #fff; }

.premium-ui .add-listing-float-container { right: 28px; bottom: 28px; }
.premium-ui .add-listing-float-btn {
    width: auto; height: 56px;
    display: inline-flex; align-items: center; gap: 12px;
    padding: 6px 22px 6px 6px;
    border-radius: 999px;
    border: 0;
    background: linear-gradient(135deg, #f3dd8f 0%, #d4af37 50%, #b8932a 100%);
    color: var(--p-navy);
    box-shadow: 0 18px 40px -14px rgba(184, 147, 42, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.35s var(--p-ease-out), box-shadow 0.35s, padding 0.45s var(--p-ease-out), gap 0.45s var(--p-ease-out);
}
.premium-ui .add-listing-float-btn::after {
    content: ''; position: absolute; top: 0; left: -80%;
    width: 50%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    transform: skewX(-20deg);
    z-index: -1;
    transition: left 0.8s var(--p-ease-out);
}
.premium-ui .add-listing-float-btn:hover { transform: translateY(-3px); color: var(--p-navy); box-shadow: 0 24px 48px -14px rgba(184, 147, 42, 1); }
.premium-ui .add-listing-float-btn:hover::after { left: 140%; }
.premium-ui .add-listing-float-btn .fab-icon {
    width: 44px; height: 44px; flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--p-navy-grad);
    color: var(--p-gold-light);
    font-size: 1.25rem;
    transition: transform 0.45s var(--p-ease-out);
}
.premium-ui .add-listing-float-btn:hover .fab-icon { transform: rotate(90deg); }
.premium-ui .add-listing-float-btn i { font-size: inherit; color: inherit; }
.premium-ui .add-listing-float-btn .fab-text {
    overflow: hidden; white-space: nowrap;
    max-width: 180px;
    font-weight: 700; font-size: 0.9rem; letter-spacing: 0.01em;
    transition: max-width 0.45s var(--p-ease-out), opacity 0.3s;
}

/* while scrolling down, both shrink to their icons (expand again on hover / scrolling up) */
.premium-ui.p-fabs-compact .contact-float-widget:not(:hover):not(:focus-visible),
.premium-ui.p-fabs-compact .add-listing-float-btn:not(:hover):not(:focus-visible) { padding-right: 6px; gap: 0; }
.premium-ui.p-fabs-compact .contact-float-widget:not(:hover):not(:focus-visible) .contact-float-text,
.premium-ui.p-fabs-compact .add-listing-float-btn:not(:hover):not(:focus-visible) .fab-text { max-width: 0; opacity: 0; }

@media (max-width: 767.98px) {
    .premium-ui .contact-float-widget { left: 16px; bottom: 18px; height: 52px; padding: 4px; gap: 0; }
    .premium-ui .contact-float-text { display: none; }
    .premium-ui .contact-float-icon { width: 44px; height: 44px; }
    .premium-ui .add-listing-float-container { right: 16px; bottom: 18px; }
    .premium-ui .add-listing-float-btn { height: 52px; padding: 4px; gap: 0; }
    .premium-ui .add-listing-float-btn .fab-text { display: none; }
}

/* ---------- Back to top ---------- */
.p-to-top {
    position: fixed;
    /* stacked above the "Add Listing" button (bottom-right, ~140px tall) */
    right: 34px; bottom: 100px;
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 0;
    background: var(--p-navy-grad, #061058);
    color: #fff;
    box-shadow: 0 12px 30px -10px rgba(6, 16, 88, 0.7);
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transform: translateY(16px) scale(0.9);
    pointer-events: none;
    transition: opacity 0.4s, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 1040;
}
.p-to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.p-to-top:hover { background: linear-gradient(135deg, #f3dd8f, #d4af37 45%, #b8932a); color: #061058; }
.p-to-top svg { position: absolute; inset: -4px; width: 54px; height: 54px; transform: rotate(-90deg); }
.p-to-top svg circle { fill: none; stroke: #d4af37; stroke-width: 2; stroke-linecap: round; }

/* ---------- Mobile tuning ---------- */
@media (max-width: 991.98px) {
    .premium-ui .section { padding: 72px 0; }
    .premium-ui .section-header { margin-bottom: 40px; }
    .premium-ui .hero-banner { min-height: 0; padding: 56px 0 120px; }
    .premium-ui .hero-slider-ui { bottom: 58px; }
    .premium-ui .hero-slider-bar { justify-content: center; }
    .premium-ui .hero-slide-captions { display: none; }
    .premium-ui .hero-slider-btn { width: 36px; height: 36px; }
    .premium-ui .hero-subtitle { border-left: 0; padding-left: 0; }
    .premium-ui { --p-nav-pad: 8px; }
    .premium-ui .stats-section { padding: 70px 0; }
    .premium-ui .stats-section .stat-item { padding: 24px 10px; margin-bottom: 16px; }
    .p-to-top { right: 20px; bottom: 84px; width: 42px; height: 42px; }
    .p-to-top svg { width: 50px; height: 50px; }
}
@media (max-width: 1199.98px) and (min-width: 768px) {
    /* tablets: one tidy top-bar row (contact details only) */
    .premium-ui .top-bar-social { display: none; }
    .premium-ui .top-bar .col-lg-8 { width: 100%; }
    .premium-ui .top-bar-contact { justify-content: center; }
}
@media (max-width: 767.98px) {
    /* long breadcrumbs (property titles) stay on one line */
    .premium-ui .page-header .breadcrumb {
        flex-wrap: nowrap;
        max-width: 100%;
        overflow: hidden;
        border-radius: 16px;
    }
    .premium-ui .page-header .breadcrumb-item { white-space: nowrap; }
    .premium-ui .page-header .breadcrumb-item.active { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
    .premium-ui .page-header { padding: 22px 0 20px; }
    .premium-ui .page-header .container { gap: 8px; }
    .premium-ui .page-header:not(:has(h1)) { padding: 10px 0; }
}
@media (max-width: 575.98px) {
    .premium-ui .section-header .subtitle { letter-spacing: 0.2em; }
    .premium-ui .section-header .subtitle::before,
    .premium-ui .section-header .subtitle::after { width: 18px; }
    .premium-ui .property-card:hover,
    .premium-ui .agent-card:hover,
    .premium-ui .blog-card:hover,
    .premium-ui .testimonial-card:hover { transform: translateY(-4px); }
}

/* ---------- ?pstatic=1: everything in its final state (screenshots / visual QA) ---------- */
.p-static *, .p-static *::before, .p-static *::after {
    animation-delay: -60s !important;
    animation-play-state: paused !important;
    transition: none !important;
}

/* ---------- Large screens ---------- */
@media (min-width: 1600px) {
    .premium-ui .container { max-width: 1440px; }
    .premium-ui .hero-title { font-size: 4.3rem; }
    .premium-ui .section { padding: 130px 0; }
}

/* ---------- Respect reduced-motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
    .premium-ui *,
    .premium-ui *::before,
    .premium-ui *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .p-js .p-reveal { opacity: 1; transform: none; }
}

/* =====================================================================
   Contact popup ("Send us a Message") — concierge layout
   ===================================================================== */
.cm-modal .modal-dialog { max-width: 940px; }
.cm-content {
    position: relative; display: grid; grid-template-columns: 340px minmax(0, 1fr);
    border: 0; border-radius: 26px; overflow: hidden; background: #fff;
    box-shadow: 0 40px 90px -30px rgba(3, 8, 53, 0.55);
}
.cm-close {
    position: absolute; right: 16px; top: 16px; z-index: 3;
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid #e3e6ef; background: #fff;
    display: inline-flex; align-items: center; justify-content: center; color: #061058;
    transition: transform 0.25s, border-color 0.25s;
}
.cm-close:hover { transform: rotate(90deg); border-color: #d4af37; }
.cm-side {
    position: relative; padding: 40px 32px; color: rgba(255, 255, 255, 0.75);
    background:
        radial-gradient(420px 260px at 100% 0%, rgba(212, 175, 55, 0.3), transparent 65%),
        linear-gradient(160deg, #0a1a7a 0%, #061058 55%, #030835 100%);
    display: flex; flex-direction: column;
}
.cm-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #ecd27f; }
.cm-eyebrow::before { content: ''; width: 22px; height: 1px; background: currentColor; }
.cm-title { font-family: 'Barlow', 'Roboto', sans-serif; font-weight: 600; color: #fff; font-size: 2rem; line-height: 1.15; margin: 14px 0 12px; }
.cm-lede { font-size: 0.95rem; line-height: 1.65; margin: 0 0 26px; }
.cm-channels { list-style: none; padding: 0; margin: 0 0 auto; display: flex; flex-direction: column; gap: 10px; }
.cm-channels a {
    display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; text-decoration: none;
    color: #fff; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.cm-channels a:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(212, 175, 55, 0.5); transform: translateX(3px); color: #fff; }
.cm-channels .bi { width: 38px; height: 38px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(212, 175, 55, 0.18); color: #ecd27f; }
.cm-channels span { display: flex; flex-direction: column; font-size: 0.9rem; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.cm-channels small { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.cm-hours { margin: 24px 0 0; font-size: 0.82rem; color: rgba(255, 255, 255, 0.6); }
.cm-hours .bi { color: #ecd27f; margin-right: 6px; }

.cm-main { padding: 40px 36px 32px; }
.cm-topics { border: 0; padding: 0; margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.cm-topics legend { float: none; width: 100%; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #6b7088; margin-bottom: 10px; padding-right: 48px; }
.cm-topics label { margin: 0; cursor: pointer; }
.cm-topics input { position: absolute; opacity: 0; pointer-events: none; }
.cm-topics span {
    display: inline-block; padding: 9px 16px; border-radius: 999px; border: 1px solid #e3e6ef;
    font-weight: 600; font-size: 0.88rem; color: #3b4160; transition: all 0.2s;
}
.cm-topics label:hover span { border-color: #d4af37; }
.cm-topics input:checked + span { background: #061058; border-color: #061058; color: #fff; }
.cm-topics input:focus-visible + span { outline: 2px solid #d4af37; outline-offset: 2px; }

.cm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cm-field { position: relative; margin-bottom: 12px; }
.cm-field input, .cm-field textarea {
    width: 100%; border: 1px solid #dfe2ec; border-radius: 14px; background: #fbfbfd;
    padding: 22px 16px 8px; font-size: 16px; color: #1d2340; resize: vertical;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.cm-field textarea { min-height: 116px; line-height: 1.5; }
.cm-field label {
    position: absolute; left: 17px; top: 16px; pointer-events: none; color: #6b7088; font-size: 0.95rem;
    transform-origin: left top; transition: transform 0.2s, color 0.2s;
}
.cm-field input:focus, .cm-field textarea:focus { outline: none; border-color: #d4af37; background: #fff; box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.15); }
.cm-field input:focus + label, .cm-field input:not(:placeholder-shown) + label,
.cm-field textarea:focus + label, .cm-field textarea:not(:placeholder-shown) + label { transform: translateY(-10px) scale(0.74); color: #b8932a; }
.cm-phone input { padding-left: 64px; }
.cm-phone label { left: 64px; }
.cm-prefix { position: absolute; left: 1px; top: 1px; bottom: 1px; width: 52px; display: flex; align-items: center; justify-content: center; border-right: 1px solid #e3e6ef; font-size: 0.88rem; font-weight: 600; color: #061058; border-radius: 14px 0 0 14px; background: #f3f4f9; }

.cm-alert { margin: 4px 0 12px; padding: 10px 14px; border-radius: 12px; font-size: 0.9rem; }
.cm-alert.err { background: #fdecec; color: #b42318; }
.cm-alert.ok { background: #e7f6ec; color: #1f7a45; }
.cm-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.cm-note { margin: 0; font-size: 0.8rem; color: #6b7088; }
.cm-note .bi { color: #1f9d55; margin-right: 4px; }
.cm-submit {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 52px; padding: 0 28px; border: 0; border-radius: 999px; font-weight: 700; font-size: 0.95rem;
    background: linear-gradient(135deg, #f3dd8f 0%, #d4af37 45%, #b8932a 100%); color: #241a00;
    box-shadow: 0 12px 26px -12px rgba(184, 147, 42, 0.9); transition: transform 0.25s, box-shadow 0.25s;
}
.cm-submit:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(184, 147, 42, 0.95); }
.cm-submit:disabled { opacity: 0.7; transform: none; }
.cm-submit .bi { transition: transform 0.25s; }
.cm-submit:hover .bi { transform: translateX(4px); }

.cm-done { text-align: center; padding: 40px 10px 20px; }
.cm-done-icon { width: 76px; height: 76px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 2.2rem; color: #fff; background: linear-gradient(135deg, #2bb673, #1f9d55); box-shadow: 0 16px 30px -12px rgba(31, 157, 85, 0.7); animation: cmPop 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes cmPop { from { transform: scale(0.5); opacity: 0; } }
.cm-done h3 { font-family: 'Barlow', 'Roboto', sans-serif; color: #061058; font-weight: 600; margin: 22px 0 10px; }
.cm-done p { color: #6b7088; max-width: 380px; margin: 0 auto 24px; }

@media (max-width: 991.98px) {
    .cm-content { grid-template-columns: 1fr; }
    .cm-side { padding: 28px 26px 22px; }
    .cm-lede { margin-bottom: 16px; }
    .cm-channels { flex-direction: row; gap: 8px; }
    .cm-channels li { flex: 1; }
    .cm-channels a { justify-content: center; padding: 10px; }
    .cm-channels span, .cm-hours { display: none; }
    .cm-close { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.25); color: #fff; }
    .cm-topics legend { padding-right: 0; }
}
@media (max-width: 575.98px) {
    .cm-modal .modal-dialog { margin: 0; min-height: 100%; align-items: flex-end; max-width: none; }
    .cm-content { border-radius: 24px 24px 0 0; }
    .cm-title { font-size: 1.55rem; margin: 10px 0 6px; }
    .cm-lede { font-size: 0.88rem; }
    .cm-main { padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); }
    .cm-row { grid-template-columns: 1fr; gap: 0; }
    .cm-actions { flex-direction: column-reverse; align-items: stretch; }
    .cm-submit { width: 100%; }
    .cm-note { text-align: center; }
}

/* =====================================================================
   Smoothness pass — every continuous animation runs on transform/opacity only
   (GPU-composited); costly effects are dropped on phones and touch screens.
   ===================================================================== */

/* Navbar buttons: the shine used to animate `left` and the glow a box-shadow, forever,
   inside the sticky navbar (a repaint on every frame while scrolling). */
.premium-ui .nav-btn { animation: none !important; }
.premium-ui .nav-btn::before {
    left: 0 !important;
    animation: pNavShine 7s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
    will-change: transform;
}
.premium-ui .nav-btn.btn-accent::before { animation-delay: 3.5s !important; }
@keyframes pNavShine {
    0% { transform: translateX(-140%) skewX(-25deg); }
    14%, 100% { transform: translateX(460%) skewX(-25deg); }
}

/* "List / Explore" call-to-action: pulse ring drawn with transform + opacity instead of box-shadow */
.premium-ui .cta-section .btn-accent { animation: none !important; position: relative; isolation: isolate; }
.premium-ui .cta-section .btn-accent::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
    border: 2px solid rgba(212, 175, 55, 0.7);
    animation: pRing 2.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes pRing { 0% { transform: scale(1); opacity: 0.8; } 70%, 100% { transform: scale(1.18, 1.45); opacity: 0; } }

/* leftovers from the old hero (box-shadow / border-color loops) */
.premium-ui .hero-tab.active, .premium-ui .hero-banner-title .typing-text { animation: none !important; }

/* Touch screens: no hover zoom/lift (a tap left cards "stuck" mid-animation while scrolling) */
@media (hover: none) {
    .premium-ui .property-card:hover, .premium-ui .agent-card:hover, .premium-ui .blog-card:hover,
    .premium-ui .city-card:hover, .premium-ui .project-card:hover, .premium-ui .ed-card:hover,
    .premium-ui .testimonial-card:hover { transform: none !important; }
    .premium-ui .property-card:hover img, .premium-ui .city-card:hover img, .premium-ui .city-card:hover .city-image,
    .premium-ui .blog-card:hover img, .premium-ui .ed-card:hover img, .premium-ui .agent-card:hover img { transform: none !important; }
    .premium-ui .city-card:hover .city-name { transform: none !important; }
}

/* Phones & tablets */
@media (max-width: 991.98px) {
    /* frosted-glass blur under a sticky bar is re-computed on every scroll frame: use a solid bar */
    .premium-ui .navbar-main, .premium-ui .navbar-main.scrolled {
        -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
        background: rgba(255, 255, 255, 0.98) !important;
    }
    .premium-ui .nav-btn::before { animation: none !important; display: none; }
}
@media (max-width: 767.98px) {
    .premium-ui .page-header::before { animation: none !important; }
    .premium-ui .cities-marquee::before, .premium-ui .cities-marquee::after { width: 8%; }
}

/* Headline gold shimmer: it animates a gradient under a drop-shadow filter, which re-renders the
   whole glowing headline every frame. Let it sweep once on arrival, then rest. */
.premium-ui .hero-title .highlight, .premium-ui .hero-title.p-words-ready .highlight,
.premium-ui .lux-hero .hero-title.p-words-ready .highlight { animation-iteration-count: 1 !important; }

/* the logo shrinks with a transform (no layout work) when the navbar compacts */
.premium-ui .navbar-brand .logo-img { transition: transform 0.4s var(--p-ease) !important; transform-origin: left center; }
html:not(.p-sticky-nav) .premium-ui .navbar-main.scrolled .navbar-brand .logo-img { height: revert-layer; transform: scale(0.85); }

@media (prefers-reduced-motion: reduce) {
    .premium-ui .nav-btn::before, .premium-ui .cta-section .btn-accent::after { animation: none !important; }
}

/* Brand fonts (Barlow headings / Roboto body): weights and styles tuned for Barlow, replacing
   the thin + italic settings that suited the old serif. */
.premium-ui .lux-hero .hero-title.lux-title { font-weight: 600; letter-spacing: -0.015em; }
.premium-ui .hero-title .highlight, .premium-ui .lux-hero .hero-title .highlight,
.premium-ui .mc-words, .premium-ui .ed-prose blockquote, .premium-ui .blog-article-content blockquote { font-style: normal !important; }
.premium-ui .section-header h2, .premium-ui .page-header h1, .premium-ui .pd-title, .premium-ui .ed-article-title,
.premium-ui .ed-lead-title, .premium-ui .cm-title { font-weight: 700; letter-spacing: -0.01em; }

/* Agent cards: phone and email each on their own line with their icon (the envelope used to
   trail the phone number while the address wrapped onto the next line). */
.premium-ui .agent-card .agent-contact { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.premium-ui .agent-card .agent-contact a {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    max-width: 100%; line-height: 1.35; text-align: center; overflow-wrap: anywhere; word-break: break-word;
}
.premium-ui .agent-card .agent-contact a .bi { flex: none; color: var(--p-gold-deep); }