/* J & H Luxe Realty - Custom Styles (Light / Premium Theme)
   Palette: white page bg, light-gray sections/cards (#F5F7FA),
   slate body text, brand gold accents, deep-ink headings. */

/* Global Styles */
html {
    scroll-behavior: smooth;
    /* Guard the root element too so no horizontal overflow can ever propagate to/from the viewport. Putting it on <html> (not only <body>) is the reliable cross-browser fix, including iOS Safari overscroll. (clip) avoids making <html> a scroll container so position:sticky keeps working. */
    overflow-x: hidden;
    overflow-x: clip;
    max-width: 100%;
}

body {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    /* NOTE: use `clip`, NOT `hidden`, so position:sticky keeps working.
       `hidden` makes <body> a scroll container and breaks sticky navs.
       `clip` prevents horizontal overflow without the sticky side effect;
       `hidden` is left first as a fallback for older browsers. */
    overflow-x: hidden;
    overflow-x: clip;
    background-color: #FFFFFF;
    color: #475569;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    width: 100%;
    max-width: 100%;
}

/* ============================================================
   Mobile overflow safety net
   ------------------------------------------------------------
   * box-sizing everywhere (Tailwind preflight does this too, but we
     re-assert it) so widths and padding never exceed the viewport.
   * Media elements are hard-capped at the container width so large
     images or embedded maps cannot widen the page on small screens.
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

img, picture, video, canvas, iframe, embed, object {
    max-width: 100%;
}

video, iframe {
    height: auto;
}

/* Headings use the luxury serif */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', Georgia, serif;
    /* Allow long headings (e.g. hero titles) to wrap so they never force the page wider than the screen. */
    overflow-wrap: break-word;
}

/* Custom Scrollbar (light) */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #F1F5F9;
}

::-webkit-scrollbar-thumb {
    background: #C9A227;
    border-radius: 5px;
    border: 2px solid #F1F5F9;
}

::-webkit-scrollbar-thumb:hover {
    background: #fcd34d;
}

/* Luxury Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.8s ease-out;
}

@keyframes shimmer {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

.shimmer {
    background: linear-gradient(90deg,
        #fcd34d 0%,
        #E0B53B 50%,
        #fcd34d 100%);
    background-size: 200% auto;
    animation: shimmer 3s linear infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Glassmorphism Effect (light) */
.glass-effect {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(184, 134, 11, 0.22);
}

/* Hover Effects */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

/* Polished white card used across sections */
.card-luxe {
    background: #FFFFFF;
    border: 1px solid #EEF1F5;
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.card-luxe:hover {
    transform: translateY(-6px);
    border-color: rgba(184, 134, 11, 0.35);
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06), 0 18px 40px rgba(15, 23, 42, 0.12);
}

/* Section eyebrow label */
.eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #8E6C0F;
    background: rgba(184, 134, 11, 0.10);
    border: 1px solid rgba(184, 134, 11, 0.18);
    padding: 0.4rem 1rem;
    border-radius: 999px;
}

/* Gold divider */
.gold-divider {
    background: linear-gradient(90deg, transparent, #fcd34d, transparent);
    height: 2px;
}

/* Form Input Styles (light) */
input, select, textarea {
    transition: all 0.3s ease;
}

input:focus, select:focus, textarea:focus {
    box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.18);
}

/* Button shimmer sweep (light) */
.btn-luxe {
    position: relative;
    overflow: hidden;
}

.btn-luxe::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transition: left 0.5s ease;
}

.btn-luxe:hover::before {
    left: 100%;
}

/* Navigation links — clean animated underline on hover/focus (no box or
   background). The underline is an absolutely-positioned pseudo-element,
   so it never causes any layout shift. It grows left→right on hover /
   focus and stays visible for the active page. */
a.nav-link {
    position: relative;
    font-weight: 500;
    background-color: transparent;
    transition: color 0.3s ease;
    color: #ffffff;
}

/* The animated underline sits just below the link.
   Hover, focus, and the active page MUST use the exact same border style so
   the weight never visually differs between states. */
a.nav-link::after {
    content: '';
    position: absolute;
    left: 0.625rem;      /* inset slightly less than the link's px-3.5 (0.875rem)
                            padding, so the underline is a touch wider than the
                            text for a bolder, premium look */
    right: 0.625rem;     /* symmetric — stays centered under the text and
                            auto-scales with each item's own text width */
    width: auto;
    bottom: -3px;
    height: 2.5px;
    background: linear-gradient(90deg, #C9972E, #fcd34d);
    border-radius: 999px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Mobile dropdown rows are full-width justify-between links (px-3, with the
   label on the left and a chevron on the right). A text-width underline would
   sit oddly there, so we let those rows keep their own hover styling clean. */
#mobileMenu a.nav-link::after {
    display: none;
}

/* Smooth underline sweep on hover */
a.nav-link:hover {
    color: #fcd34d;
}

/* Hover, focus, and active share ONE underline — identical color, height and
   radius, so the active border never looks thinner (or the hover thicker). */
a.nav-link:hover::after,
a.nav-link:focus-visible::after,
a.nav-link.active::after {
    transform: scaleX(1);
    background: linear-gradient(90deg, #C9972E, #fcd34d);
}

/* Keep the underline visible (and fully expanded) while focused */
a.nav-link:focus-visible {
    outline: none;
    color: #fcd34d;
}

/* Active page: underline stays visible (same shared border style above) */
a.nav-link.active {
    color: #fcd34d;
    background-color: transparent;
}

/* Previous active style fallback (kept for safety) */
nav a.active {
    color: #fcd34d;
}

/* ============================================================
   Two-Level Navbar (auto-hiding top bar)
   ------------------------------------------------------------
   The whole <header class="site-header"> is position:sticky with
   a negative top offset equal to the top bar's height. Both rows
   stay in normal document flow, so there is NO fixed positioning,
   NO spacer measurement, and therefore NO gaps/jumps/layout shifts.

   Behavior:
   - At page top: both rows are visible.
   - Scroll down: the header slides up exactly one top-bar height,
     smoothly hiding the top bar while the main navbar pins to the
     viewport top (and stays visible the whole time).
   - Scroll up: the header slides back down and the top bar smoothly
     reappears.
   ============================================================ */

:root {
    --topbar-height: 40px;
}

.site-header {
    position: -webkit-sticky;
    position: sticky;
    top: calc(-1 * var(--topbar-height));
    /* Above floating action buttons (z-40), below the entry popup (z-50) */
    z-index: 45;
}

/* Row 1: Top Navbar strip (fixed height so the sticky offset is exact) */
.top-navbar {
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, #0F172A, #1E293B);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Row 2: Main Navbar (always visible; pins to the viewport top) */
.main-navbar {
    background: rgb(17 25 44);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: box-shadow 0.3s ease;
}

/* Shadow appears once the header has slide up (toggled by app.js) */
.main-navbar.shadow-lg {
    box-shadow: 0 6px 30px rgba(15, 23, 42, 0.08);
}

/* Testimonial Cards */
.testimonial-card {
    position: relative;
    overflow: hidden;
}

.testimonial-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(184, 134, 11, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .text-5xl {
        font-size: 2.5rem;
    }

    .text-6xl {
        font-size: 3rem;
    }

    .text-7xl {
        font-size: 3.5rem;
    }
}

/* Floating Action Buttons Animation */
.fab-button {
    position: relative;
    overflow: hidden;
}

.fab-button::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.fab-button:hover::after {
    opacity: 1;
}

/* Popup Modal Animation */
#popupModal {
    animation: fadeIn 0.3s ease-out;
    overflow: hidden; /* prevent any scrollbar on desktop & mobile */
}

#popupModal .relative.z-10 {
    max-height: 100vh;
    overflow: hidden;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

#popupModal .relative {
    animation: slideDown 0.5s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Loading Spinner (gold on light) */
.spinner {
    border: 3px solid rgba(184, 134, 11, 0.15);
    border-top: 3px solid #fcd34d;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Hero Slider */
.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.9s ease, visibility 0.9s ease;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Hero text - white with subtle text shadow for legibility over images */
.hero-eyebrow {
    display: inline-block;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    padding: 0.55rem 1.4rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.hero-heading {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.45);
}

.hero-subtitle {
    color: #f8fafc;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 3px 10px rgba(0, 0, 0, 0.35);
}

/* Hero primary CTA (gold gradient) */
.btn-hero-primary {
    background: linear-gradient(135deg, #C9972E, #fcd34d);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.btn-hero-primary:hover {
    transform: translateY(-3px);
    filter: brightness(1.06);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.35);
}

/* Hero secondary CTA (glass) */
.btn-hero-secondary {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: #ffffff;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.btn-hero-secondary:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-3px);
}

/* Hero slider arrows */
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(184, 134, 11, 0.25);
    color: #8E6C0F;
    border-radius: 9999px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10);
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.hero-arrow:hover {
    background: #fcd34d;
    color: #FFFFFF;
    border-color: #fcd34d;
    transform: translateY(-50%) scale(1.08);
}

/* Hero slider dots */
.hero-dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.22);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
}

.hero-dot.active {
    background: #fcd34d;
    width: 1.6rem;
    border-radius: 9999px;
}

@media (max-width: 768px) {
    .hero-arrow {
        width: 2.5rem;
        height: 2.5rem;
    }
}

/* Mobile hardening: scale hero text fluidly and allow wrapping so the large hero titles can never trigger horizontal / sideways scrolling. The (#heroSlider) prefix keeps specificity above Tailwind text-5xl. */
@media (max-width: 767px) {
    #heroSlider .hero-heading {
        font-size: clamp(2.5rem, 8vw, 3rem);
        line-height: 1.12;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    #heroSlider .hero-subtitle {
        font-size: clamp(1.125rem, 4.5vw, 1.375rem);
        overflow-wrap: break-word;
    }
}

/* ============================================================
   PREMIUM FULL-WIDTH + POLISH (global refinements)
   ------------------------------------------------------------
   These overrides sit at the end of the stylesheet and therefore
   win over the Tailwind CDN utilities, letting us refine the whole
   application's presentation without touching every page's markup.
   No content, structure, or logic is changed.
   ============================================================ */

/* --- 1. Full-width, fluid containers (removes the empty side gutters).
   Every shared container (.max-w-7xl: top bar, main nav, page-header,
   every section grid, and the footer) now fills the full available
   viewport instead of stopping short at a hard max-width. Instead of a
   fixed cap we use generous, proportional side padding (clamp) so the
   content always has comfortable breathing room yet never leaves a big
   empty gutter on the left/right — even on very wide monitors.

   NOTE: inner "copy" blocks that should stay readable keep their own
   max-w-3xl / max-w-4xl utilities (unaffected by this rule). */
.max-w-7xl {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    /* Fluid, proportional horizontal padding:
       - 16px on the smallest phones
       - grows with the viewport (4vw) up to 72px on huge screens */
    padding-inline: clamp(1rem, 4vw, 4.5rem);
}

/* Refined premium header: the sticky navigation is drawn edge-to-edge and
   uses a noticeably tighter cap than the page copy, so the top bar and main
   navbar make the most of the available screen width without leaving large
   empty side gutters on wide monitors. It still grows proportionally with
   the viewport (clamp) so alignment stays consistent across desktop/mobile. */
.main-navbar > .max-w-7xl,
.top-navbar > .max-w-7xl {
    padding-inline: clamp(0.875rem, 2.25vw, 3rem);
}

/* --- 2. Refined premium card --- */
.card-luxe {
    position: relative;
    background: linear-gradient(180deg, #FFFFFF 0%, #FCFDFE 100%);
    border: 1px solid #EDF0F4;
    border-radius: 1.25rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 30px rgba(15, 23, 42, 0.06);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.card-luxe:hover {
    transform: translateY(-6px);
    border-color: rgba(184, 134, 11, 0.42);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06), 0 24px 48px rgba(15, 23, 42, 0.12);
}

/* Decorative gold accent line that grows in on hover */
.card-accent::after { display: none;
    content: '';
    position: absolute;
    left: 1.25rem;
    right: 1.25rem;
    top: 0;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, transparent, #fcd34d, transparent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .4s ease;
}

.card-accent:hover::after {
    transform: scaleX(1);
}

/* --- 3. Eyebrow label polish --- */
.eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.22em;
}

/* --- 4. Gold divider polish --- */
.gold-divider {
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, #fcd34d 30%, #C9972E 50%, #fcd34d 70%, transparent);
    opacity: 0.85;
}

/* --- 5. Scroll reveal (works with the existing [data-animate] observer) --- */
[data-animate] {
    opacity: 0;
    will-change: transform, opacity;
}

[data-animate].fade-in-up {
    animation: fadeInUp .8s ease-out forwards;
}

/* --- 6. Hero legibility scrim --- */
.hero-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(15, 23, 42, 0.55) 0%,
        rgba(15, 23, 42, 0.42) 45%,
        rgba(15, 23, 42, 0.62) 100%);
    pointer-events: none;
}

/* --- 7. Destination cards (Home "Our Markets") --- */
.dest-card {
    position: relative;
    height: 22rem;
    border-radius: 1.5rem;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
    transition: transform .45s ease, box-shadow .45s ease;
}

.dest-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.22);
}

.dest-card .dest-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform .6s ease;
    z-index: -1;
}

.dest-card:hover .dest-bg { transform: scale(1.08); }

.dest-card .dest-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.05) 30%, rgba(15, 23, 42, 0.85) 100%);
    z-index: -1;
}

/* --- 8. Journey steps (Home "How it Works") --- */
.journey-step { position: relative; }

.journey-step .step-num {
    position: absolute;
    top: 0.75rem;
    right: 1.25rem;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    color: rgba(184, 134, 11, 0.16);
    -webkit-text-stroke: 1px rgba(184, 134, 11, 0.35);
    user-select: none;
    pointer-events: none;
}

/* --- 9. Footer (dark navy premium) --- */
.footer-dark {
    background: linear-gradient(180deg, #101828 0%, #0B1120 100%);
    color: #CBD5E1;
}

.footer-dark a { transition: color .3s ease; }

.footer-dark .foot-heading {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #F8FAFC;
}

/* --- 10. Tablet / mobile polish (no overflow, tidy spacing) --- */
@media (max-width: 767px) {
    .card-luxe { border-radius: 1rem; }
    .dest-card { height: 17rem; }
}

/* --- 11. (removed) Gold accent line beneath the main navbar --- */

/* ==========================================================================
   J & H Luxe Realty - Visual Refinement Pass (presentation only)
   ---------------------------------------------------------------------------
   Content-safe polish for the EXISTING sections. No markup, links, ordering,
   structure, logic or functionality is changed - only typography, spacing,
   alignment, responsive behaviour and visual feedback. Appended last in the
   cascade so these rules win over the Tailwind CDN utilities + earlier styles.
   ========================================================================== */

/* --- 1. Typography: balanced, luxury heading rhythm --- */
.text-4xl, .text-5xl, .text-6xl, .text-7xl { line-height: 1.12; }
#heroSlider .hero-heading { letter-spacing: -0.012em; line-height: 1.1; }
.hero-subtitle { font-weight: 300; letter-spacing: 0.01em; }
.eyebrow { letter-spacing: 0.2em; }
section h2, section h3 { scroll-margin-top: 6.5rem; }

/* --- 2. Spacing & alignment --- */
[class*="text-4xl"][class*="text-luxe"] { font-variant-numeric: tabular-nums; }
div[class*="bg-amber-50"][class*="rounded-2xl"] { box-shadow: inset 0 0 0 1px rgba(184,134,11,0.10); }

/* --- 3. Form fields: warm, focused state (contact form + popup) --- */
input:focus, select:focus, textarea:focus {
    background: #FFFDF6;
    border-color: #fcd34d;
    box-shadow: 0 0 0 4px rgba(184,134,11,0.14);
}

/* --- 4. Accessible focus feedback for interactive elements --- */
a.btn-luxe:focus-visible, button.btn-luxe:focus-visible,
.btn-hero-primary:focus-visible, .btn-hero-secondary:focus-visible,
.hero-arrow:focus-visible, .hero-dot:focus-visible {
    outline: 2px solid #C9972E;
    outline-offset: 3px;
}

/* --- 5. Cards: warm paper + refined, deeper hover elevation --- */
.card-luxe { background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFE 100%); }

/* --- 6. Destination cards: legibility shadows over photography --- */
.dest-card h3 { text-shadow: 0 1px 8px rgba(0,0,0,0.35); }
.dest-card p  { text-shadow: 0 1px 5px rgba(0,0,0,0.28); }

/* --- 7. Buttons: smooth, premium hover / active transform --- */
.btn-luxe, .btn-hero-primary, .btn-hero-secondary {
    will-change: transform;
    -webkit-tap-highlight-color: transparent;
}

/* --- 8. Footer + top bar micro-polish --- */
.footer-dark .foot-heading { letter-spacing: 0.02em; }
.top-navbar a { white-space: nowrap; }

/* --- 9. Responsive refinements --- */
@media (max-width: 480px) {
    section h2 { font-size: 2.1rem; }
    .max-w-7xl { padding-inline: 1.25rem; }
}
/* ==========================================================================
   HOME PAGE — Image Clarity & Text Placement Refinement
   ---------------------------------------------------------------------------
   Presentation-only optimization for every image-backed section on the Home
   Page. Overlays are lightened so the photography stays bright and clear,
   legibility gradients are anchored behind the copy blocks, and the CTA text
   gets a soft centered vignette. Appended last so these win the cascade.
   No markup, links, ordering, structure, logic or content is changed.
   ========================================================================== */

/* --- 1. Hero slider: keep the local slider photos vivid, text stays crisp.
        Lighter vertical scrim than the default; text relies on its own
        text-shadow (slightly strengthened below). --- */
#heroSlider .hero-scrim {
    background: linear-gradient(180deg,
        rgba(15, 23, 42, 0.38) 0%,
        rgba(15, 23, 42, 0.26) 45%,
        rgba(15, 23, 42, 0.48) 100%);
}

#heroSlider .hero-heading {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.5);
}

#heroSlider .hero-subtitle {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6), 0 3px 12px rgba(0, 0, 0, 0.4);
}

/* --- 2. Destination cards ("Our Markets" + "Signature Portfolio"): ---
        The default overlay darkens the whole card. We keep the top and middle
        light so the photo shows through cleanly, deepening the gradient only
        toward (and behind) the bottom text area for legibility. */
.dest-card .dest-overlay {
    background: linear-gradient(180deg,
        rgba(15, 23, 42, 0.02) 22%,
        rgba(15, 23, 42, 0.28) 55%,
        rgba(15, 23, 42, 0.66) 100%);
}

/* Neutral fallback tint so a slow-to-load card never flashes a blank box. */
.dest-card { background-color: #1E293B; }

/* Raise desktop cards a little for better photo presence + breathing room. */
@media (min-width: 768px) {
    .dest-card { height: 24rem; }
}

/* Keep the copy block above the newly-lightened overlay. */
.dest-card .relative { z-index: 1; }

/* Slightly stronger text shadows over the lighter overlay. */
.dest-card h3 { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4); }
.dest-card p  { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.35); }

/* --- 3. Call to Action "Your Luxurious Journey Begins Here":
        Replace the uniform dark wash with a centered radial vignette so the
        background image shows through clearly while the edges (where text and
        the button sit) stay darker for readability. Applied via .cta-scrim. */
.cta-scrim {
    background: radial-gradient(120% 120% at 50% 42%,
        rgba(15, 23, 42, 0.34) 0%,
        rgba(15, 23, 42, 0.60) 78%,
        rgba(15, 23, 42, 0.72) 100%);
}

/* --- 4. "What Our Clients Say" backdrop: the photo should read through.
        The overlay utility is lightened in the markup (bg-white/55); this
        class keeps the copy cards readable on top. --- */
.testimonials-backdrop {
    background: rgba(255, 255, 255, 0.55);
}

/* ==========================================================================
   J & H Luxe Realty — Premium Image-Backed Section Overhaul
   ---------------------------------------------------------------------------
   Final content-safe pass. Improves every section that uses a background
   cover image so the photography stays clearly visible while text remains
   readable, balanced and responsive on desktop, tablet and mobile.
   No markup structure, links, ordering, logic or content is changed.
   ========================================================================== */

/* --- 1. Universal: every image layer is a true cover centered within its
        section and never overflows. Isolated so content stacks above. --- */
#heroSlider .hero-slide,
.testimonials-section,
.cta-section,
.own-section {
    isolation: isolate;
}

#heroSlider .hero-slide > [class*="bg-cover"],
.testimonials-section .testimonials-bg,
.cta-section .cta-bg,
.own-section .own-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* --- 2. Hero slider: softer, cinema-style legibility that keeps the photo
        vivid. Light everywhere except the center-vertical band behind the
        copy, so the skyline stays bright and text stays crisp. --- */
#heroSlider .hero-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(15, 23, 42, 0.30) 0%,
        rgba(15, 23, 42, 0.10) 38%,
        rgba(15, 23, 42, 0.12) 50%,
        rgba(15, 23, 42, 0.18) 62%,
        rgba(15, 23, 42, 0.55) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Fade the separate scrim layer back so it never double-darkens. */
#heroSlider .hero-scrim {
    opacity: 0;
}

/* Keep the hero copy above the new gradient + visual layers. */
#heroSlider .hero-slide .relative { z-index: 2; }

/* Slightly sharpen hero shadows so text pops on the lighter photo. */
#heroSlider .hero-heading {
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.60), 0 1px 3px rgba(0, 0, 0, 0.55);
}
#heroSlider .hero-eyebrow {
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}
#heroSlider .hero-subtitle {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65), 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Hero slide photos themselves sit on the absolute inset layer already;
   make their arrow/dots rim readable too. */
.hero-arrow {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* --- 3. Destination cards ("Our Markets" + "Signature Portfolio"):
        Keep the photo bright at top/center, deepen only behind the lower
        text block. Stronger bottom gradient for guaranteed legibility. --- */
.dest-card .dest-overlay {
    background: linear-gradient(180deg,
        rgba(15, 23, 42, 0.00) 20%,
        rgba(15, 23, 42, 0.10) 45%,
        rgba(15, 23, 42, 0.42) 72%,
        rgba(15, 23, 42, 0.74) 100%);
}

/* Gives the card a neutral, image-tinted fallback while loading (no flash). */
.dest-card { background-color: #17202E; }
.dest-card .dest-bg { z-index: -1; }

/* Copy block always sits above the overlay. */
.dest-card .relative { z-index: 1; }

/* --- 4. Call to Action "Your Luxurious Journey Begins Here":
        Now a clean white background (no photo). No dark text shadows needed —
        text is dark ink on white so it reads clearly on its own. --- */
.cta-section h2 { text-shadow: none; }
.cta-section p { text-shadow: none; }

/* --- 5. "Owning Property in Dubai & the UAE, Made Simple":
        NEW background imagery + soft scrim, with a refined dark gradient
        so the white heading/intro stay readable without hiding the photo.
        The 3 white cards sit crisply on top. --- */
.own-section {
    background-color: #101828; /* neutral fallback while the photo loads */
}
.own-section .own-bg {
    background-size: cover;
    background-position: center 42%;
    background-repeat: no-repeat;
}
.own-section .own-scrim {
    background:
        linear-gradient(180deg,
            rgba(9, 14, 26, 0.74) 0%,
            rgba(13, 19, 34, 0.42) 30%,
            rgba(13, 19, 34, 0.30) 50%,
            rgba(15, 23, 42, 0.55) 78%,
            rgba(15, 23, 42, 0.82) 100%);
}
.own-section .eyebrow { border-color: rgba(184, 134, 11, 0.55); }
.own-section h2 {
    text-shadow: 0 3px 20px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.5);
}
.own-section .own-intro {
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
/* The white cards + their text stay fully opaque and above every layer. */
.own-section .card-luxe {
    position: relative;
    z-index: 1;
    background: #FFFFFF;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
}

/* --- 6. Responsive polish for the image sections --- */
@media (max-width: 767px) {
    #heroSlider .hero-slide .relative { padding-top: 7rem; padding-bottom: 7rem; }
    .own-section { padding-top: 4rem; padding-bottom: 4rem; }
    .cta-section, .testimonials-section { padding-top: 5rem; padding-bottom: 5rem; }
}
/* ==========================================================================
   J & H Luxe Realty — Balanced Image Clarity & Text Readability
   ---------------------------------------------------------------------------
   Final presentation-only pass. Every section that uses a background cover
   image has its full-section color/overlay removed (or heavily reduced) so
   the photography reads clearly, then legibility is re-anchored onto the text
   itself via localized backings and soft type shadows. Middle ground:
   photos are plainly visible while copy still pops on first read.
   No markup, links, ordering, structure, logic or content is changed.
   ========================================================================== */

/* --- 1. Hero slider: each slide photo is the star.
        Remove the full-bleed dark wash; now only a faint shade at the very
        top (for the header overlap) and a soft band at the very bottom.
        The center stays near-transparent so the skyline/interior is vivid. --- */
#heroSlider .hero-slide::after {
    background: linear-gradient(180deg,
        rgba(15, 23, 42, 0.26) 0%,
        rgba(15, 23, 42, 0.08) 30%,
        rgba(15, 23, 42, 0.10) 55%,
        rgba(15, 23, 42, 0.34) 100%);
}

/* Instead of dimming the whole photo, a soft radial panel sits only behind
   the headline block so the white copy stays crisp without touching the rest
   of the image. The copy container already establishes a stacking context
   (z-index:2), so this pseudo-layer sits neatly behind its own text. */
#heroSlider .hero-slide .relative::before {
    content: '';
    position: absolute;
    inset: 18% 12% 20% 12%;
    background: radial-gradient(85% 100% at 50% 50%,
        rgba(9, 14, 26, 0.40) 0%,
        rgba(9, 14, 26, 0.22) 46%,
        rgba(9, 14, 26, 0.00) 76%);
    border-radius: 1.5rem;
    pointer-events: none;
    z-index: -1;
}

/* --- 2. Destination cards ("Our Markets" + "Signature Portfolio"):
        Keep the top ~3/4 of each photo essentially untouched and deepen the
        gradient only behind the bottom text block for guaranteed legibility. --- */
.dest-card .dest-overlay {
    background: linear-gradient(180deg,
        rgba(15, 23, 42, 0.03) 34%,
        rgba(15, 23, 42, 0.26) 64%,
        rgba(15, 23, 42, 0.60) 100%);
}

/* Location + "Explore/Cta" labels on the bright top half of the photo get a
   soft shadow so they read clearly without an overlay behind them. */
.dest-card .relative > span {
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* --- 3. "What Our Clients Say": swap the flat 55% white wash for a gradient
        that backs the dark heading/intro block, then opens the lower part of
        the photo so it shows through between the white review cards. --- */
.testimonials-backdrop {
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.84) 0%,
        rgba(255, 255, 255, 0.52) 26%,
        rgba(255, 255, 255, 0.16) 52%,
        rgba(255, 255, 255, 0.00) 80%);
}

/* --- 4. "Owning Property in Dubai & the UAE, Made Simple":
        Lift the scrim so the mid-section (around the white cards) reads clear
        and the image is visible, keeping only a soft dark band behind the top
        heading/intro and a gentle edge at the very bottom. --- */
.own-section .own-scrim {
    background: linear-gradient(180deg,
        rgba(9, 14, 26, 0.52) 0%,
        rgba(13, 19, 34, 0.18) 26%,
        rgba(13, 19, 34, 0.05) 50%,
        rgba(15, 23, 42, 0.26) 78%,
        rgba(15, 23, 42, 0.55) 100%);
}
/* ==========================================================================
   J & H Luxe Realty — Hero: Clean Image + Refined Text Legibility
   ---------------------------------------------------------------------------
   Final pass. Removes every background color / gradient / overlay layer that
   sat over the hero photography so the original slider images show through
   clearly and vividly. Legibility is then re-anchored onto the text itself
   with subtle, professional layered text-shadows so the copy stays crisp and
   easy to read across all slides without any dimming wash on the photo.
   ========================================================================== */

/* 1. Remove the hero darkening layers entirely. */
#heroSlider .hero-slide::after {
    content: none;             /* kill the full-bleed gradient wash */
}

#heroSlider .hero-slide .relative::before {
    content: none;             /* kill the radial panel behind the copy */
}

#heroSlider .hero-scrim {
    background: none;          /* ensure the legibility scrim adds no tint */
    opacity: 1;                /* (keep remaining elements predictable) */
}

/* 2. Refined, professional text shadows over the clean photography.
      A tight crisp shadow right against the glyphs + a soft wider drop for
      depth — reads clearly on bright skies and light interiors alike. */
#heroSlider .hero-heading {
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.55),
        0 3px 10px rgba(0, 0, 0, 0.50),
        0 8px 26px rgba(0, 0, 0, 0.38);
}

#heroSlider .hero-eyebrow {
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.65),
        0 2px 8px rgba(0, 0, 0, 0.45);
}

#heroSlider .hero-subtitle {
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.60),
        0 3px 10px rgba(0, 0, 0, 0.50),
        0 6px 20px rgba(0, 0, 0, 0.34);
}

/* 3. Keep the CTA buttons crisp against the now-bright imagery. */
#heroSlider .btn-hero-primary {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.3);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
}

#heroSlider .btn-hero-secondary {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
/* ==========================================================================
   J & H Luxe Realty — "What Our Clients Say": Testimonials Treatment
   ---------------------------------------------------------------------------
   Final pass. Applies the same visual language as the other image-backed
   sections: the backdrop overlay is lifted so the photo stays clearly visible,
   the testimonial cards get a polished, cohesive design, and the section's
   button becomes a solid, high-contrast gold pill that reads instantly.
   ========================================================================== */

/* 1. Lighten the backdrop overlay — keep the photo clearly visible. A soft
      white wash remains only in the upper area behind the (dark) heading so
      the copy stays crisp, then opens up so the photography shows through
      around the white review cards. */
.testimonials-backdrop {
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.82) 0%,
        rgba(255, 255, 255, 0.40) 20%,
        rgba(255, 255, 255, 0.00) 38%);
}

/* 2. Testimonial cards — cohesive, refined card treatment shared with the
      rest of the UI (subtle gradient face, soft elevation, rounded corners).
      The existing ::before radial glow is repurposed into a clean gold accent
      bar that draws in on hover. */
.testimonials-section .testimonial-card {
    background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFE 100%);
    border: 1px solid #EDF0F4;
    border-radius: 1.25rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.10);
}
.testimonials-section .testimonial-card:hover {
    transform: translateY(-6px);
    border-color: rgba(184, 134, 11, 0.42);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06), 0 24px 48px rgba(15, 23, 42, 0.14);
}
.testimonials-section .testimonial-card::before { display: none;
    top: 0;
    left: 1.25rem;
    right: 1.25rem;
    width: auto;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, transparent, #fcd34d, transparent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .4s ease;
}
.testimonials-section .testimonial-card:hover::before {
    transform: scaleX(1);
}

/* 3. Section button — solid gold fill with white text for strong, obvious
      contrast against the photography (replaces the low-contrast outline). */
.testimonials-section .btn-luxe {
    background: linear-gradient(120deg, #C9972E, #fcd34d);
    color: #FFFFFF;
    border: 1px solid transparent;
    box-shadow: 0 10px 26px rgba(184, 134, 11, 0.32);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.testimonials-section .btn-luxe:hover {
    background: linear-gradient(120deg, #D9A63A, #C9972E);
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(184, 134, 11, 0.42);
}

/* ==========================================================================
   HERO - Mobile & Small-Device Optimization
   --------------------------------------------------------------------------
   Proportions the hero slider for phones: smaller, tightly-spaced copy,
   full-width stacked buttons, reduced vertical padding (no surplus scroll)
   and edge-safe arrows/dots. Scoped to the hero by ID so specificity beats
   the Tailwind utilities and the earlier hero rules. Desktop/tablet stays
   exactly as-is.
   ========================================================================== */
@media (max-width: 767px) {

    /* 1. Trim the hero's internal vertical padding so the full-height
          section no longer runs taller than it needs to on small screens. */
    #heroSlider .hero-slide .relative {
        padding-top: 4.5rem;
        padding-bottom: 4.5rem;
    }

    /* 2. Eyebrow pill: smaller type, tighter padding, closer to heading. */
    #heroSlider .hero-eyebrow {
        font-size: 0.68rem;
        letter-spacing: 0.24em;
        padding: 0.4rem 1.05rem;
        margin-bottom: 1.1rem;   /* tighter than the markup mb-6 */
    }

    /* 3. Heading: fluid but noticeably more compact than desktop. */
    #heroSlider .hero-heading {
        font-size: clamp(2rem, 9vw, 2.5rem);
        line-height: 1.12;
        margin-bottom: 1rem;     /* tighter than the markup mb-6 */
    }

    /* 4. Subtitle: smaller, relaxed line-height, capped line length so it
          never widens the column or wraps awkwardly. */
    #heroSlider .hero-subtitle {
        font-size: clamp(1rem, 4.2vw, 1.125rem);
        line-height: 1.45;
        max-width: 20rem;
        margin-bottom: 1.7rem;   /* tighter than the markup mb-10 */
    }

    /* 5. Actions column: capped width, centered, tighter gap; buttons
          stretch full-width for style-consistent, comfortable tap targets. */
    #heroSlider .hero-slide .relative > .flex {
        width: 100%;
        max-width: 20rem;
        margin-inline: auto;
        gap: 0.85rem;
    }

    #heroSlider .btn-hero-primary,
    #heroSlider .btn-hero-secondary {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 0.9rem 1.25rem;
        font-size: 1rem;
    }

    /* 6. Hide the left/right arrows on mobile - navigation handled by dots. */
    #heroSlider .hero-arrow {
        display: none;
    }

    /* 7. Dots: slightly lower, still clear of the buttons above them. */
    #heroSlider #heroDots {
        bottom: 1.5rem;
    }
}

/* ==========================================================================
   OUR LOCATIONS & INTEGRATED MAP COMPONENT STYLES
   --------------------------------------------------------------------------
   Custom styles for the Our Locations section on the Contact page,
   including interactive map controls, custom Leaflet pin popups,
   location card highlights, and mobile responsiveness.
   ========================================================================== */

/* Map container frame */
.locations-map-container {
    position: relative;
    width: 100%;
    height: 480px;
    border-radius: 1.25rem;
    overflow: hidden;
    border: 1px solid #E2E8F0;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
    background-color: #F8FAFC;
    transition: all 0.3s ease;
}

@media (max-width: 1024px) {
    .locations-map-container {
        height: 420px;
    }
}

@media (max-width: 640px) {
    .locations-map-container {
        height: 360px;
        border-radius: 1rem;
    }
}

/* Map instance container */
#locationsMap {
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Location filter tabs bar */
.location-tab-btn {
    display: inline-flex;
    items-center: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    border-radius: 9999px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    white-space: nowrap;
}

.location-tab-btn:hover {
    color: #8E6C0F;
    border-color: #fcd34d;
    background: #FFFDF5;
    transform: translateY(-1px);
}

.location-tab-btn.active {
    color: #FFFFFF;
    background: linear-gradient(135deg, #B8860B, #C9972E);
    border-color: #B8860B;
    box-shadow: 0 4px 14px rgba(184, 134, 11, 0.35);
}

/* Location card highlight on hover / map focus */
.location-card {
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.location-card:hover, .location-card.active-location {
    border-color: rgba(184, 134, 11, 0.6);
    box-shadow: 0 12px 30px rgba(184, 134, 11, 0.15);
    transform: translateY(-4px);
}

/* Custom Leaflet Map Pin & Popup Styling */
.custom-map-pin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, #B8860B, #8E6C0F);
    color: #FFFFFF;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3);
    border: 2px solid #FFFFFF;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.custom-map-pin i {
    transform: rotate(45deg);
    font-size: 16px;
}

.custom-map-pin:hover {
    transform: rotate(-45deg) scale(1.15);
}

/* Leaflet Popup overrides */
.leaflet-popup-content-wrapper {
    background: #FFFFFF !important;
    color: #0F172A !important;
    border-radius: 1rem !important;
    padding: 0.25rem !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.2) !important;
    border-top: 4px solid #B8860B !important;
}

.leaflet-popup-tip {
    background: #FFFFFF !important;
}

.leaflet-popup-content {
    margin: 0.85rem 1rem !important;
    line-height: 1.5 !important;
    font-family: 'Inter', sans-serif !important;
}

.map-popup-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: #0F172A;
    margin-bottom: 0.35rem;
}

.map-popup-address {
    font-size: 0.825rem;
    color: #475569;
    margin-bottom: 0.75rem;
}

.map-popup-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.775rem;
    font-weight: 600;
    color: #FFFFFF;
    background: #B8860B;
    padding: 0.4rem 0.85rem;
    border-radius: 9999px;
    text-decoration: none !important;
    transition: background 0.2s ease;
}

.map-popup-link:hover {
    background: #8E6C0F;
}