/**
 * Catalyze Capital - Responsive Overrides & Mobile-First Fine-tuning
 * Complements Bootstrap 5's responsive grid with premium adjustments
 */

@import url("variables.css");

/* --- MOBILE & EXTRA SMALL DEVICES (Max width: 575.98px) --- */
@media (max-width: 575.98px) {
  section {
    padding: 60px 0;
  }

  .section-pad {
    padding: 72px 0;
  }

  .section-pad-sm {
    padding: 56px 0;
  }

  .section-title {
    font-size: 1.85rem;
    margin-bottom: 1rem;
  }

  /* Hero adjustments */
  .hero-premium {
    min-height: 100svh;
    text-align: center;
  }

  .hero-premium h1 {
    font-size: 3rem;
  }

  .home-hero .min-vh-100 {
    min-height: 100svh !important;
    align-items: center !important;
    padding: 128px 0 88px;
  }

  .hero-lead {
    margin-inline: auto;
  }

  .hero-insight-card {
    display: none;
  }

  .about-image-stack,
  .about-image-stack img {
    min-height: 0;
    height: 380px;
    width: 100%;
  }

  .about-floating-panel {
    position: relative;
    left: auto;
    bottom: auto;
    max-width: none;
    margin-top: -64px;
    margin-inline: 16px;
  }

  .category-card {
    min-height: 360px;
  }

  .quick-services-section {
    margin-top: 0;
    background: var(--color-dark-900);
    padding: 24px 0 0;
  }

  .quick-services-shell {
    box-shadow: none;
  }

  .quick-service-grid {
    grid-template-columns: 1fr;
  }

  .quick-service-card {
    min-height: 96px;
  }

  .about-preview {
    padding-top: 72px;
  }

  .mosaic-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 320px;
    gap: 18px;
  }

  .mosaic-large {
    grid-row: span 1;
  }

  .stats-shell {
    padding: 1.5rem 1rem;
  }

  .cta-banner {
    padding-bottom: 72px;
  }

  .cta-shell,
  .contact-preview-form {
    text-align: left;
  }

  .hero-search-wrapper {
    padding: 1.25rem;
    margin-top: 1.5rem;
  }

  .search-tab-btn {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
  }

  /* Buttons */
  .btn-premium {
    width: 100%;
    justify-content: center;
    padding: 0.75rem 1.5rem;
  }

  /* Cards */
  .property-card-img-wrap {
    height: 200px;
  }

  .property-card-body {
    padding: 1.25rem;
  }

  .service-card {
    padding: 2rem 1.5rem;
  }

  /* Team & Testimonials */
  .team-img-wrap {
    height: 300px;
  }

  .testimonial-card {
    padding: 1.5rem;
  }
}

/* --- SMALL DEVICES (Max width: 767.98px) --- */
@media (max-width: 767.98px) {

  /* Navbar styling for mobile drawer */
  .navbar-premium {
    background-color: var(--color-dark-900) !important;
    height: auto !important;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .navbar-premium .navbar-collapse {
    background-color: var(--color-dark-900);
    padding: 1.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 10px;
  }

  .navbar-premium .nav-link {
    padding: 0.75rem 0 !important;
  }

  .navbar-premium .nav-link::after {
    left: 0;
    right: auto;
    width: 30px;
  }

  .navbar-premium .btn-premium {
    margin-top: 1rem;
    width: 100%;
    text-align: center;
  }

  .navbar-premium .navbar-brand {
    font-size: 0.9rem;
  }

  .brand-mark {
    width: 36px;
    height: 36px;
  }

  .home-hero .min-vh-100 {
    min-height: 100svh !important;
    align-items: center !important;
    padding: 128px 0 84px;
  }

  .hero-copy {
    padding-top: 0;
  }

  .hero-insight-card {
    display: none;
  }

  .hero-premium h1 {
    font-size: clamp(2.65rem, 10vw, 3.75rem);
  }

  .quick-service-grid {
    grid-template-columns: 1fr;
  }

  .mosaic-grid {
    grid-template-columns: 1fr;
  }

  .capital-masonry-section {
    padding: 58px 0 64px;
  }

  .capital-masonry-container {
    width: min(100% - 28px, 540px);
  }

  .capital-masonry-heading {
    margin-bottom: 24px;
  }

  .capital-masonry-heading h2 {
    font-size: clamp(1.95rem, 10vw, 2.7rem);
    line-height: 1.04;
  }

  .capital-masonry-grid {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .capital-card {
    min-height: 220px;
    width: 100%;
  }

  .capital-card-small {
    min-height: 200px;
  }

  .capital-card-large,
  .capital-card-tall,
  .capital-card-featured-video {
    min-height: 270px;
  }

  .capital-card-showcase {
    order: 1;
  }

  .capital-card-corridors {
    order: 2;
  }

  .capital-card-stat:nth-of-type(3) {
    order: 3;
  }

  .capital-card-trust {
    order: 4;
  }

  .capital-card-commercial {
    order: 5;
  }

  .capital-card-testimonial {
    order: 6;
  }

  .capital-card-cta {
    order: 7;
  }

  .capital-card-featured-video {
    order: 8;
  }

  .capital-card-content {
    padding: 1.35rem;
  }

  .capital-mini-stats {
    grid-template-columns: 1fr;
  }

  .capital-cta-button {
    width: auto !important;
    align-self: flex-start !important;
    padding: 0.45rem 0.45rem 0.45rem 1.1rem !important;
    min-height: auto !important;
    gap: 10px !important;
    margin-top: 14px !important;
  }

  .capital-cta-button span {
    font-size: 0.76rem !important;
  }

  .capital-cta-button .capital-button-arrow {
    width: 28px !important;
    height: 28px !important;
  }
}

/* --- LARGE PHONES / NARROW TABLETS (576px to 767.98px) --- */
@media (min-width: 576px) and (max-width: 767.98px) {
  .capital-masonry-container {
    width: min(100% - 32px, 720px);
  }

  .capital-masonry-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 108px;
    gap: 16px;
  }

  .capital-card,
  .capital-card-large,
  .capital-card-tall,
  .capital-card-medium,
  .capital-card-small,
  .capital-card-featured-video {
    min-height: 0;
  }

  .capital-card-large,
  .capital-card-featured-video {
    grid-column: span 1;
    grid-row: span 2;
  }

  .capital-card-tall {
    grid-row: span 2;
  }

  .capital-card-medium,
  .capital-card-small {
    grid-row: span 2;
  }

  .capital-zone-list,
  .capital-mini-stats {
    display: none;
  }

  .capital-card-cta p {
    display: none;
  }
}

/* --- TABLETS / MEDIUM DEVICES (768px to 991.98px) --- */
@media (min-width: 768px) and (max-width: 991.98px) {
  section {
    padding: 80px 0;
  }

  .section-title {
    font-size: 2.25rem;
  }

  .hero-premium h1 {
    font-size: 3.25rem;
  }

  .home-hero .min-vh-100 {
    padding: 140px 0 90px;
  }

  .hero-title {
    font-size: 4.8rem;
  }

  .about-image-stack img {
    width: 100%;
  }

  .quick-services-section {
    margin-top: -40px;
  }

  .quick-service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .quick-service-card {
    padding: 1rem;
  }

  .quick-service-card span {
    font-size: 0.92rem;
  }

  .mosaic-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 260px;
  }

  .mosaic-large {
    grid-row: span 1;
  }

  .hero-search-wrapper {
    padding: 2rem;
  }

  .capital-masonry-section {
    padding: 70px 0;
  }

  .capital-masonry-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 126px;
    gap: 18px;
  }

  .capital-card-large,
  .capital-card-featured-video {
    grid-column: span 2;
    grid-row: span 2;
  }

  .capital-card-tall {
    grid-row: span 3;
  }

  .capital-card-medium,
  .capital-card-small {
    grid-row: span 2;
  }
}

/* --- LARGE SCREEN OVERRIDES (Min width: 1200px) --- */
@media (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}

/* --- ULTRA WIDE SCREENS (Min width: 1400px) --- */
@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}

/* =======================================================
   START : TESTIMONIAL RESPONSIVE
======================================================== */

@media (max-width: 991.98px) {
  .cc-review-slide {
    gap: 24px;
  }

  .cc-review-card p {
    font-size: 1rem;
  }
}

@media (max-width: 767.98px) {
  .cc-review-slide {
    grid-template-columns: 1fr;
  }

  .cc-review-divider {
    display: none;
  }

  .cc-review-nav {
    width: 46px;
    height: 46px;
  }

  .cc-review-prev {
    margin-right: 12px;
  }

  .cc-review-next {
    margin-left: 12px;
  }

  .cc-review-card {
    padding: 10px;
  }

  .cc-review-card p {
    font-size: 0.95rem;
    line-height: 1.8;
  }
}

@media (max-width: 575.98px) {
  .cc-review-slider {
    flex-direction: column;
  }

  .cc-review-prev,
  .cc-review-next {
    margin: 0;
  }

  .cc-review-nav {
    position: static;
    margin-top: 15px;
  }
}

/* =======================================================
   END : TESTIMONIAL RESPONSIVE
======================================================== */

/* =======================================================
   MOBILE HORIZONTAL OVERFLOW FIX — ALL PAGES (max-width: 768px)
   Root causes identified:
   1. html element had no overflow-x: hidden (body alone is not enough)
   2. .contact-editorial-section::before = fixed 600px pseudo-element
      with no overflow:hidden on its parent → bleeds on small screens
   3. Bootstrap .row negative gutter margins can push 1–2px past edge
   4. Various absolute-positioned decorative elements (bg glows, etc.)
   Desktop completely unchanged.
======================================================== */
@media (max-width: 768px) {

  /* --- ROOT FIX: Clamp html + body to viewport --- */
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  /* --- CONTACT SECTION: ::before glow is 600px wide, clip it --- */
  .contact-editorial-section {
    overflow: hidden !important;
  }

  /* --- DECORATIVE PSEUDO-ELEMENTS: clip to parent bounds --- */
  /* Any section/card that uses large fixed-px pseudo decorations */
  .hero-luxury-slider,
  .category-section,
  .mosaic-section,
  .cta-section-luxury,
  .trust-section-editorial,
  .contact-editorial-section,
  .svc-cta-section {
    overflow: hidden !important;
  }

  /* --- BOOTSTRAP ROW: prevent negative gutter from creating strip --- */
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Compensate: restore col padding so content isn't flush to edges */
  .row > [class*="col-"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* --- HERO SECTION: ensure slider never overflows --- */
  .hero-luxury-slider,
  .hero-luxury-container,
  .hero-luxury-copy {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* --- IMAGES: prevent oversized imgs from stretching layout --- */
  img {
    max-width: 100% !important;
    height: auto;
  }

  /* --- CARDS & GRID: prevent fixed widths from bleeding --- */
  .mosaic-grid,
  .quick-service-grid,
  .category-grid {
    max-width: 100% !important;
    overflow: hidden !important;
  }

}
/* =======================================================
   END : MOBILE HORIZONTAL OVERFLOW FIX
======================================================== */

/* =======================================================
   MOBILE HERO SECTION REFINEMENT — PHONE ONLY (max-width: 768px)
   All rules are strictly mobile-only.
   Desktop / tablet layouts are completely unchanged.
======================================================== */
@media (max-width: 768px) {

  /* -------------------------------------------------------
     1. NAVBAR — Perfect vertical alignment
        Logo · theme toggle · hamburger all vertically centred.
        Premium balanced height. No overlap with hero.
  ------------------------------------------------------- */
  .navbar-premium {
    height: 68px !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .navbar-premium .container {
    display: flex;
    align-items: center;
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Logo: vertically centred, proportional size */
  .navbar-premium .navbar-brand {
    display: flex;
    align-items: center;
    height: 100%;
    margin-right: 0;
  }

  .navbar-premium .navbar-logo {
    height: 40px;
    width: auto;
  }

  .navbar-premium.scrolled .navbar-logo {
    height: 34px;
  }

  /* Right-side action group: theme toggle + hamburger */
  .nav-right-actions {
    display: flex !important;
    align-items: center !important;
    gap: 4px;
    height: 100%;
    margin-left: auto;
    padding: 0;
  }

  /* Theme toggle: perfectly centred */
  .cc-theme-toggle-btn.d-lg-none {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    flex-shrink: 0;
  }

  /* Hamburger icon: perfectly centred */
  .hamburger-menu-trigger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 8px;
    flex-shrink: 0;
  }

  /* -------------------------------------------------------
     ISSUE #1 — LIGHT THEME: Navbar looks dark on initial load.
     Root cause: @media (max-width: 767.98px) forces
     background-color: var(--color-dark-900) !important.
     Fix: In light theme (default :root), immediately apply
     the "scrolled" look — white/translucent background —
     so it looks correct before AND after scrolling.
     Dark theme is scoped separately and remains unchanged.
  ------------------------------------------------------- */

  /* Light theme (default) — white navbar from first paint */
  :root .navbar-premium,
  :root .navbar-premium.scrolled {
    background-color: var(--theme-navbar-bg-scrolled) !important;
    /* = rgba(255, 255, 255, 0.96) in light mode */
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    border-bottom: 1px solid var(--theme-navbar-border-scrolled);
    box-shadow: 0 4px 24px rgba(7, 19, 38, 0.08);
  }

  /* Dark theme — keep the original dark appearance */
  [data-theme="dark"] .navbar-premium {
    background-color: rgba(7, 19, 38, 0.88) !important;
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  [data-theme="dark"] .navbar-premium.scrolled {
    background-color: rgba(7, 19, 38, 0.95) !important;
    border-bottom: 1px solid rgba(0, 183, 255, 0.18);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  }

  /* -------------------------------------------------------
     ISSUE #2 — NAVBAR OVERFLOW: Content bleeds outside viewport.
     Fix: Constrain nav, container, and action group so
     nothing escapes the screen on any phone (320px–390px+).
  ------------------------------------------------------- */

  /* Prevent the nav element itself from overflowing */
  .navbar-premium {
    max-width: 100vw !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* Container: use padding instead of fixed widths */
  .navbar-premium > .container,
  .navbar-premium > .container-fluid {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    flex-wrap: nowrap !important;
  }

  /* Brand: never grow beyond needed width */
  .navbar-premium .navbar-brand {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
  }

  /* Logo image: constrain width so it never overflows */
  .navbar-premium .navbar-logo {
    max-width: clamp(90px, 36vw, 140px) !important;
    height: auto !important;
    max-height: 40px !important;
    width: auto !important;
    object-fit: contain;
  }

  /* Actions wrapper: never overflows right edge */
  .nav-right-actions {
    flex-shrink: 0 !important;
    flex-wrap: nowrap !important;
    overflow: hidden;
  }

  /* -------------------------------------------------------
     2 + 8. HERO FULL-VIEWPORT FIT
        Section becomes a flex-column so that:
          – .hero-luxury-container grows and centres copy
          – .luxury-scroll-cue anchors naturally at bottom
        Everything visible in 100svh without scrolling.
  ------------------------------------------------------- */
  .hero-luxury-slider {
    height: 100svh !important;
    min-height: 100svh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden;
  }

  /* Hero content wrapper: grows to fill available space */
  .hero-luxury-container {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding-top: clamp(80px, 14vw, 100px) !important;
    padding-bottom: clamp(6px, 1.5vh, 14px) !important;
    width: 100% !important;
  }

  /* Copy block: tight flex column, no extra gaps */
  .hero-luxury-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100%;
    padding-top: 0 !important;
  }

  /* -------------------------------------------------------
     2. EYEBROW / BADGE SPACING
        Breathing space between navbar and "PREMIUM..." label.
  ------------------------------------------------------- */
  .luxury-subtitle {
    font-size: clamp(0.65rem, 2.2vw, 0.84rem);
    letter-spacing: 0.2em;
    margin-bottom: clamp(0.45rem, 1.4vh, 0.8rem);
    display: block;
  }

  /* -------------------------------------------------------
     3. HERO HEADING — Wider, premium, fluid typography
        Matches the reference mockup: large generous wrapping.
        Scales across: iPhone 13/14/15, Samsung S21/S23,
        OnePlus and Xiaomi devices.
  ------------------------------------------------------- */
  .luxury-title {
    font-size: clamp(1.72rem, 8.2vw, 2.6rem) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em;
    margin-bottom: clamp(0.7rem, 2vh, 1.15rem);
    text-align: center;
  }

  /* -------------------------------------------------------
     4. LUXURY SERVICE BADGES — 2 × 2 GRID, SINGLE-LINE
        Row 1: RERA-VERIFIED PROPERTIES  |  LUXURY APARTMENTS
        Row 2: COMMERCIAL SPACES         |  INVESTMENT ADVISORY
        white-space: nowrap guarantees no text wrapping.
        Equal widths and heights. No divider pipes.
  ------------------------------------------------------- */
  .luxury-bullets-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(5px, 1.5vw, 8px) !important;
    width: 100% !important;
    max-width: min(94vw, 380px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: clamp(0.7rem, 1.8vh, 1.1rem) !important;
  }

  /* Hide all divider pipe characters */
  .luxury-divider {
    display: none !important;
  }

  /* Individual badge cell */
  .luxury-bullet {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(0.52rem, 1.9vw, 0.66rem) !important;
    letter-spacing: 0.1em;
    padding: clamp(0.32rem, 1.1vh, 0.48rem) clamp(0.28rem, 1.4vw, 0.55rem) !important;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    line-height: 1;
    width: 100% !important;
    min-height: clamp(30px, 4.5vh, 40px);
    box-sizing: border-box;
  }

  /* -------------------------------------------------------
     5. LUXURY LEAD PARAGRAPH — Restored original elegance
        Full readability, premium line-height, not compressed.
  ------------------------------------------------------- */
  .luxury-lead {
    font-size: clamp(0.82rem, 2.6vw, 0.95rem) !important;
    line-height: 1.75 !important;
    margin-bottom: 0 !important;
    max-width: min(92vw, 520px);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  /* -------------------------------------------------------
     6. CTA BUTTONS — Single row, single-line text guaranteed
        "EXPLORE PROPERTIES" and "INQUIRE NOW" stay on one line.
        Premium pill shape. Equal widths. Touch-friendly.
  ------------------------------------------------------- */
  .hero-luxury-copy .d-flex {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: clamp(8px, 2vw, 12px) !important;
    margin-top: clamp(0.7rem, 2.2vh, 1.2rem) !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: min(94vw, 400px);
    margin-left: auto;
    margin-right: auto;
  }

  .hero-luxury-copy .btn-luxury {
    font-size: clamp(0.6rem, 2vw, 0.72rem) !important;
    letter-spacing: 0.06em !important;
    padding: clamp(0.4rem, 1.2vh, 0.54rem) clamp(0.4rem, 1.2vw, 0.54rem) clamp(0.4rem, 1.2vh, 0.54rem) clamp(0.8rem, 2.4vw, 1.05rem) !important;
    gap: clamp(6px, 1.5vw, 10px) !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 190px !important;
    justify-content: space-between !important;
    white-space: nowrap !important;
    overflow: hidden;
  }

  .hero-luxury-copy .btn-luxury .btn-arrow-circle {
    width: clamp(22px, 5.5vw, 28px) !important;
    height: clamp(22px, 5.5vw, 28px) !important;
    font-size: clamp(0.6rem, 1.8vw, 0.72rem) !important;
    flex-shrink: 0 !important;
  }

  /* -------------------------------------------------------
     7. SCROLL INDICATOR — Always visible below CTA buttons.
        Repositioned from absolute to relative flow.
        Sits at the natural bottom of the flex-column hero.
        flex-shrink: 0 ensures it's never squeezed out.
  ------------------------------------------------------- */
  .luxury-scroll-cue {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    padding: clamp(10px, 2.4vh, 18px) 0 clamp(12px, 2.8vh, 20px) !important;
    width: 100% !important;
  }

  /* Slightly smaller mouse icon on phones */
  .hero-luxury-slider .scroll-mouse {
    width: 22px;
    height: 36px;
  }

}

/* =======================================================
   END : MOBILE HERO SECTION REFINEMENT
======================================================== */

/* =======================================================
   MOBILE MENU OVERLAY DRAWER — PHONE ONLY (max-width: 768px)
   Fixes: excessive top gap, Follow Us wrapping, no-scroll.
   Desktop overlay is completely unchanged.
======================================================== */
@media (max-width: 768px) {

  /* -------------------------------------------------------
     CORE LAYOUT: Make the entire overlay fit in one screen.
     No scrolling. Everything visible immediately.
  ------------------------------------------------------- */
  .overlay-luxury {
    height: 100dvh !important;
    overflow: hidden !important;
  }

  .overlay-luxury-container {
    /* Tighter vertical padding so links don't start far down */
    padding-top: clamp(20px, 4vh, 32px) !important;
    /* Extra bottom space — lifts social icons above browser chrome */
    padding-bottom: max(env(safe-area-inset-bottom, 0px) + 40px, clamp(44px, 8vh, 64px)) !important;
    /* No scroll — layout must fit inside 100dvh */
    overflow: hidden !important;
    /* Keep flex-direction: column + space-between from base */
    height: 100% !important;
    box-sizing: border-box !important;
  }

  /* -------------------------------------------------------
     ISSUE #1 — EXCESSIVE TOP GAP
     Root cause: .overlay-luxury-body uses align-items: center
     which vertically centres links, creating large empty top.
     Fix: align links to flex-start (top) so they sit close
     to the header/logo area. flex-grow:1 still fills space.
  ------------------------------------------------------- */
  .overlay-luxury-body {
    align-items: flex-start !important;
    padding-top: clamp(12px, 3vh, 24px) !important;
    /* Small breathing gap between header & first nav link */
    flex-grow: 1 !important;
    min-height: 0 !important;
  }

  /* Tighter gap between nav items on mobile */
  .overlay-luxury-nav ul {
    gap: clamp(0.75rem, 2.5vh, 1.25rem) !important;
  }

  /* Slightly smaller link font so 6 items fit comfortably */
  .overlay-luxury-nav a {
    font-size: clamp(1.8rem, 7vw, 2.8rem) !important;
    line-height: 1.15 !important;
  }

  /* -------------------------------------------------------
     ISSUE #2 — FOLLOW US: No wrapping, comfortable spacing.
     Fix: flex-wrap: nowrap on the socials row + smaller
     icon size + tighter gap so it all fits in one line.
  ------------------------------------------------------- */

  /* Reduce divider margin so footer stays in frame */
  .overlay-divider-line {
    margin-bottom: clamp(12px, 2.5vh, 20px) !important;
  }

  /* Footer row: no wrap, lifted above bottom edge */
  .overlay-footer-bottom {
    flex-wrap: nowrap !important;
    align-items: center !important;
    /* Generous bottom breathing room + safe area */
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 8px) !important;
    margin-bottom: clamp(8px, 2vh, 16px) !important;
  }

  /* Socials wrapper: nowrap, tighter gap */
  .overlay-socials-wrapper {
    flex-wrap: nowrap !important;
    gap: clamp(8px, 2vw, 14px) !important;
    align-items: center !important;
  }

  /* "FOLLOW US:" label — keep on same line, no shrink */
  .socials-title {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-size: 0.72rem !important;
    margin-right: clamp(6px, 1.5vw, 10px) !important;
  }

  /* Social icon buttons: slightly smaller on phones */
  .socials-circle-btn {
    width: clamp(36px, 9vw, 44px) !important;
    height: clamp(36px, 9vw, 44px) !important;
    font-size: 0.88rem !important;
    flex-shrink: 0 !important;
  }

  /* Close button: slightly smaller on mobile */
  .close-circle-icon {
    width: 44px !important;
    height: 44px !important;
  }

}
/* =======================================================
   END : MOBILE MENU OVERLAY DRAWER
======================================================== */