/**
 * 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;
  }

  /* Why Choose Us Cards - Scroll-triggered Active States on Mobile */
  .cc-wc-card.active {
    transform: scale(1.02) !important;
    z-index: 5 !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15) !important;
  }

  .cc-wc-card.active .cc-wc-bg {
    opacity: 1 !important;
    transform: scale(1.05) !important;
  }

  .cc-wc-card.active .cc-wc-overlay {
    opacity: 1 !important;
  }

  .cc-wc-card.active .cc-wc-number,
  .cc-wc-card.active .cc-wc-heading,
  .cc-wc-card.active .cc-wc-text {
    color: #ffffff !important;
  }
}

@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;
  }

  .hero-luxury-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100%;
    padding: 0 10px 1.5rem 10px !important; /* reduced left/right padding to prevent grid overflow */
  }

  /* -------------------------------------------------------
     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.5rem, 1.7vw, 0.6rem) !important;
    letter-spacing: 0.05em !important;
    padding: clamp(0.28rem, 1vh, 0.4rem) clamp(0.2rem, 1.2vw, 0.45rem) !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.2vh, 36px);
    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.6rem, 1.8vw, 0.85rem) !important;
    gap: clamp(6px, 1.5vw, 10px) !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 210px !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
======================================================== */

/* =======================================================
   MOBILE-SPECIFIC REFINEMENTS FOR HOME PAGE
======================================================== */
@media (max-width: 767.98px) {

  /* 1. Book Consultation Button in Investment Section */
  .capital-cta-button {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0.75rem 0.75rem 0.75rem 1.5rem !important;
    min-height: 48px !important;
    margin-top: 20px !important;
    align-self: stretch !important;
  }

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

  .capital-cta-button .capital-button-arrow {
    width: 32px !important;
    height: 32px !important;
    margin-left: auto !important;
  }

  /* 3. Blog Section Headings */
  .cc-insights-eyebrow {
    font-size: 0.8rem !important;
  }

  .cc-insights-registry {
    font-size: 0.68rem !important;
  }

  .cc-insights-featured-title {
    font-size: 1.4rem !important;
    line-height: 1.25 !important;
    margin: 10px 0 !important;
  }

  .cc-insights-ledger-title {
    font-size: 1.12rem !important;
    line-height: 1.3 !important;
    margin: 6px 0 10px !important;
  }

  /* 4. Trust Metric Cards (2x2 Grid Layout) */
  .trust-metric-card {
    padding: 22px 12px !important;
    gap: 6px !important;
    border-radius: 12px !important;
    min-height: 130px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  .metric-number {
    font-size: 1.75rem !important;
    letter-spacing: -0.5px !important;
    line-height: 1.1 !important;
  }

  .metric-label {
    font-size: 0.7rem !important;
    letter-spacing: 0.5px !important;
    line-height: 1.3 !important;
  }

  /* 5. About Section Mobile Adjustments (Slightly wider aspect ratio & clean spacing) */
  .about-editorial-image-wrapper {
    aspect-ratio: 1.25 / 1 !important;
    height: auto !important;
    width: 100% !important;
    margin-bottom: 0 !important;
  }

  /* 6. Developer Partnerships Marquee Adjustments (Logo size & gaps) */
  .cc-logo-box {
    width: 120px !important;
    height: 65px !important;
  }

  .cc-logo-box img {
    max-width: 95px !important;
    max-height: 45px !important;
  }

  .cc-marquee-track {
    gap: 55px !important;
  }

  .cc-marquee-row+.cc-marquee-row {
    margin-top: 24px !important;
  }
}

/* =======================================================
   MOBILE OVERRIDES: DETAILED SERVICE SHOWCASE SECTION
   ======================================================== */
@media (max-width: 991.98px) {

  /* Prevent horizontal scroll on body */
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  /* Force container and layout to stay within parent width */
  .svc-details-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    /* Must be visible to allow sticky nav to stick */
  }

  .svc-details-split-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    /* Allow sticky positioning of child */
  }

  .svc-details-nav-col {
    display: none !important;
  }

  /* Content Column */
  .svc-details-content-col {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    gap: 0px !important;
    /* tighter gap on mobile */
    min-width: 0 !important;
  }

  .svc-details-section {
    min-height: auto !important;
    padding-bottom: 30px !important;
    margin-bottom: 10px !important;
    scroll-margin-top: 130px !important;
    /* accounts for sticky navbar + tabs */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Grid Layout inside each section */
  .svc-details-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Image styling */
  .svc-details-image-frame {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    /* clean cinematic layout */
    max-height: 260px !important;
    box-sizing: border-box !important;
  }

  .svc-details-pane {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  /* Typography sizes */
  .svc-details-title {
    font-size: clamp(1.5rem, 5vw, 1.8rem) !important;
    margin-bottom: 12px !important;
    line-height: 1.25 !important;
  }

  .svc-details-caption {
    font-size: 0.68rem !important;
    margin-bottom: 6px !important;
  }

  .svc-details-intro-text {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    margin-bottom: 20px !important;
  }

  /* Key Capabilities Cards Grid */
  .svc-details-value-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    /* Single column card layout to prevent overflow */
    gap: 12px !important;
    margin-bottom: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .svc-details-value-card {
    padding: 14px 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .svc-details-value-card-title {
    font-size: 0.82rem !important;
    margin-bottom: 4px !important;
  }

  .svc-details-value-card-desc {
    font-size: 0.72rem !important;
    line-height: 1.45 !important;
  }

  /* Timeline Process Steps */
  .svc-details-process-steps {
    padding-left: 16px !important;
    margin-left: 4px !important;
    gap: 10px !important;
    margin-bottom: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .svc-details-process-step {
    font-size: 0.76rem !important;
    line-height: 1.45 !important;
    padding-right: 0 !important;
    white-space: normal !important;
  }

  .svc-details-process-step::before {
    left: -20px !important;
    top: 5px !important;
    width: 6px !important;
    height: 6px !important;
  }

  /* Action Links (CTAs) */
  .svc-details-cta {
    font-size: 0.76rem !important;
    gap: 8px !important;
    margin-top: 5px !important;
  }

  /* Success Stories / Case Studies mobile styling */
  .svc-case-card {
    padding: clamp(20px, 4vw, 24px) !important;
    height: 100% !important;
  }

  .svc-case-type {
    font-size: 0.68rem !important;
    margin-bottom: 10px !important;
    letter-spacing: 0.1em !important;
  }

  .svc-case-title {
    font-size: clamp(1.15rem, 4vw, 1.35rem) !important;
    margin-bottom: 20px !important;
    line-height: 1.25 !important;
  }

  .svc-case-stats-panel {
    padding: 12px 16px !important;
    margin-bottom: 20px !important;
    gap: 12px !important;
  }

  .svc-case-stat-val {
    font-size: clamp(1.2rem, 3.5vw, 1.45rem) !important;
  }

  .svc-case-stat-lbl {
    font-size: 0.68rem !important;
    margin-top: 3px !important;
  }

  .svc-case-result-list {
    gap: 8px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .svc-case-result-item {
    font-size: 0.8rem !important;
    padding-top: 6px !important;
    margin-top: 6px !important;
    gap: 8px !important;
  }

  .svc-case-result-item i {
    font-size: 0.88rem !important;
  }

  /* Detailed Service Showcase Section Header mobile fixes */
  .svc-details-container .section-heading-luxury {
    margin-bottom: 2.5rem !important;
  }

  .svc-details-container .section-heading-luxury .section-title-serif {
    font-size: clamp(1.45rem, 5vw, 1.85rem) !important;
    line-height: 1.25 !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.8rem !important;
  }

  .svc-details-container .section-heading-luxury .inline-editorial-img {
    width: 60px !important;
    height: 52px !important;
    margin: 0 4px !important;
    transform: translateY(-4px) !important;
  }

  .svc-details-container .section-heading-luxury .section-desc-premium {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    max-width: 100% !important;
  }

  /* FAQ section mobile overrides */
  .svc-faq-header {
    padding: 16px 20px !important;
  }

  .svc-faq-num {
    margin-right: 12px !important;
    font-size: 0.82rem !important;
  }

  .svc-faq-title {
    font-size: 0.98rem !important;
    padding-right: 10px !important;
    line-height: 1.35 !important;
  }

  .svc-faq-trigger {
    width: 14px !important;
    height: 14px !important;
  }

  .svc-faq-icon-line.h-line {
    width: 14px !important;
  }

  .svc-faq-icon-line.v-line {
    height: 14px !important;
  }

  .svc-faq-body {
    padding: 0 20px 16px 48px !important;
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
  }

  @media (max-width: 480px) {
    .svc-faq-body {
      padding: 0 16px 14px 16px !important;
      /* Stack fully on small screens for maximum text readability */
    }

    .svc-faq-header {
      padding: 14px 16px !important;
    }
  }

  /* =======================================================
     BLOG DETAILS PAGE MOBILE OVERRIDES
     ======================================================== */
  .blog-details-hero {
    height: auto !important;
    min-height: 380px !important;
    padding: 100px 0 50px !important;
  }

  .blog-details-hero .inner-hero-content-wrap {
    margin-top: 0 !important;
  }

  .blog-details-hero .inner-hero-subtitle {
    font-size: 0.72rem !important;
    padding: 0 !important;
    margin-bottom: 12px !important;
    letter-spacing: 0.15em !important;
    display: inline-block !important;
    background: none !important;
    color: var(--color-primary) !important;
  }

  .blog-details-hero .inner-hero-title-serif {
    font-size: clamp(1.4rem, 5.5vw, 1.95rem) !important;
    line-height: 1.25 !important;
    margin-top: 8px !important;
    margin-bottom: 12px !important;
    max-width: 100% !important;
    padding: 0 10px !important;
  }

  .blog-details-hero .article-hero-meta {
    font-size: 0.75rem !important;
    margin-top: 12px !important;
    color: var(--color-text-cream) !important;
    opacity: 0.95 !important;
    line-height: 1.4 !important;
  }

  .blog-details-hero .article-hero-meta .meta-dot {
    margin: 0 6px !important;
  }

  /* Executive Summary Box */
  .blog-details-summary-section {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }

  .blog-executive-summary {
    padding: 24px 20px !important;
  }

  .summary-box-title {
    font-size: 1.25rem !important;
    margin-bottom: 8px !important;
  }

  .summary-box-intro {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    margin-bottom: 20px !important;
  }

  .summary-highlight-item {
    padding: 14px 16px !important;
  }

  .summary-highlight-label {
    font-size: 0.7rem !important;
    margin-bottom: 4px !important;
  }

  .summary-highlight-text {
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
  }

  .summary-takeaways {
    padding-top: 16px !important;
  }

  .takeaways-box-title {
    font-size: 0.78rem !important;
    margin-bottom: 10px !important;
  }

  .summary-takeaway-item {
    padding: 8px 0 !important;
  }

  .takeaway-num {
    font-size: 0.88rem !important;
    min-width: 16px !important;
  }

  .takeaway-divider {
    margin: 0 8px !important;
  }

  .takeaway-label {
    font-size: 0.88rem !important;
  }

  .takeaway-desc {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
  }

  /* Reading Pane Content */
  .blog-details-content-section {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
  }

  .blog-details-reading-pane {
    font-size: 0.92rem !important;
    line-height: 1.7 !important;
  }

  .blog-details-h2 {
    font-size: 1.45rem !important;
    margin-top: 36px !important;
    margin-bottom: 12px !important;
  }

  .blog-details-h3 {
    font-size: 1.2rem !important;
    margin-top: 24px !important;
    margin-bottom: 10px !important;
  }

  .blog-body-text {
    margin-bottom: 16px !important;
  }

  /* Quote Box */
  .blog-details-quote {
    padding: 20px 24px !important;
    margin: 30px 0 !important;
  }

  .blog-details-quote p {
    font-size: 1.15rem !important;
    line-height: 1.55 !important;
  }

  .blog-details-quote cite {
    font-size: 0.75rem !important;
    margin-top: 6px !important;
  }

  /* Callout Card */
  .blog-callout {
    padding: 16px 20px !important;
    margin: 20px 0 !important;
  }

  .blog-callout p {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
  }

  /* Table of Contents Box */
  .blog-details-toc-box {
    padding: 20px !important;
    margin-top: 20px !important;
    margin-bottom: 30px !important;
  }

  .blog-details-toc-box .toc-title {
    font-size: 0.95rem !important;
    padding-bottom: 8px !important;
    margin-bottom: 12px !important;
  }

  .blog-details-toc-box .toc-list li {
    padding-left: 12px !important;
    margin-bottom: 5px !important;
  }

  .blog-details-toc-box .toc-link {
    font-size: 0.85rem !important;
  }

  /* Data Table */
  .blog-details-table-wrap {
    margin: 30px 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .blog-details-table {
    min-width: 600px !important;
  }

  .blog-details-table th {
    padding: 10px 12px !important;
    font-size: 0.78rem !important;
  }

  .blog-details-table td {
    padding: 10px 12px !important;
    font-size: 0.82rem !important;
  }

  .rating-stars {
    font-size: 0.95rem !important;
  }

  /* Inline CTA Block */
  .blog-inline-cta {
    padding: 30px 20px !important;
    margin: 35px 0 !important;
  }

  .blog-inline-cta h4 {
    font-size: 1.2rem !important;
  }

  .blog-inline-cta p {
    font-size: 0.85rem !important;
    margin-bottom: 20px !important;
  }

  /* Dynamic FAQ section list */
  .blog-details-faq-item {
    margin-bottom: 20px !important;
  }

  .blog-details-faq-item .faq-question {
    font-size: 1.05rem !important;
    margin-bottom: 6px !important;
  }

  .blog-details-faq-item .faq-answer {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
  }

  /* Related Insights Grid reset */
  .blog-related-section {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }

  /* Advisory CTA Section on Blog details */
  .blog-details-cta-section {
    padding-top: 35px !important;
    padding-bottom: 35px !important;
  }

  /* =======================================================
     CONTACT PAGE MOBILE OVERRIDES
     ======================================================== */
  .contact-editorial-section {
    padding: 72px 0 !important;
  }

  .contact-editorial-section .section-heading-luxury {
    margin-bottom: 32px !important;
  }

  .contact-editorial-section .section-title-serif {
    font-size: clamp(1.8rem, 6vw, 2.4rem) !important;
    line-height: 1.2 !important;
  }

  .contact-info-lead {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    margin-bottom: 24px !important;
    max-width: 100% !important;
  }

  .contact-info-item {
    padding: 14px 0 !important;
  }

  .contact-info-value {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
  }

  .contact-form-panel {
    padding-top: 20px !important;
  }

  .contact-editorial-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }

  .editorial-field-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }

  .editorial-field-group {
    padding-top: 28px !important;
    margin: 0 !important;
  }

  .editorial-field-group--full {
    margin-top: 0 !important;
  }

  .editorial-field-label {
    font-size: 0.68rem !important;
  }

  .editorial-field-input {
    font-size: 0.95rem !important;
    padding: 8px 0 10px !important;
  }

  .editorial-field-input::placeholder {
    font-size: 0.9rem !important;
  }

  .editorial-submit-row {
    margin-top: 12px !important;
  }

  .btn-editorial-submit {
    padding: 14px 28px !important;
    font-size: 0.82rem !important;
    border-radius: 10px !important;
  }

  .cc-office-location-section {
    padding: 60px 0 0 !important;
  }

  .cc-office-location-section .section-heading-luxury {
    margin-bottom: 32px !important;
  }

  .cc-office-location-section .section-title-serif {
    font-size: clamp(1.8rem, 6vw, 2.4rem) !important;
    line-height: 1.2 !important;
  }

  .cc-office-location-section .section-desc-premium {
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
  }

  /* General Sub-page Hero Title override for clean mobile viewing */
  .inner-hero-title-serif {
    font-size: clamp(1.5rem, 6vw, 2.2rem) !important;
    line-height: 1.2 !important;
  }
}