/* ==========================================================================
   PRIME BUILD PROJECTS — GALLERY MOBILE VIEW ONLY
   Strictly active ONLY on screen widths <= 767px.
   Desktop, Laptop, and Tablet layouts are 100% UNTOUCHED and PRESERVED.
   Scoped specifically to body.gallery-page and #gallery.
   ========================================================================== */

/* Hide mobile-only elements on desktop and tablet */
.mobile-header-cta,
.gallery-mobile-final-btn-wrap {
  display: none !important;
}

@media screen and (max-width: 767px) {

  /* -------------------------------------------------------------------------
     0. BASE CONTAINER CONSTRAINTS — WHITE BACKGROUND (NO BLACK GAPS)
     ------------------------------------------------------------------------- */
  body.gallery-page,
  body.gallery-page html {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    background-color: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.gallery-page main {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding-top: 56px !important;
    background: #ffffff !important;
  }

  /* -------------------------------------------------------------------------
     1. COMPACT MOBILE HEADER: [ LOGO ] [ GET IN TOUCH → ] [ ☰ ]
     ------------------------------------------------------------------------- */
  body.gallery-page .prime-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    background: #07080a !important;
    border-bottom: 1px solid rgba(218, 165, 82, 0.25) !important;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.6) !important;
    z-index: 1000000 !important;
    overflow: visible !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  body.gallery-page .nav-container {
    padding: 0 12px !important;
    height: 56px !important;
    min-height: 56px !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.gallery-page .brand-wrapper {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
  }

  body.gallery-page .brand-logo-img {
    height: 38px !important;
    max-height: 40px !important;
    width: auto !important;
    max-width: 165px !important;
    object-fit: contain !important;
    margin: 0 !important;
    top: 0 !important;
  }

  /* Compact "GET IN TOUCH →" header button toward the right */
  body.gallery-page .mobile-header-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    margin-left: auto !important;
    margin-right: 8px !important;
    padding: 4px 8px !important;
    border: 1px solid rgba(218, 165, 82, 0.75) !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: #daa552 !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  body.gallery-page .mobile-header-cta:hover,
  body.gallery-page .mobile-header-cta:active {
    background: rgba(218, 165, 82, 0.15) !important;
    color: #fce09b !important;
  }

  body.gallery-page .mobile-header-cta i {
    font-size: 0.68rem !important;
    line-height: 1 !important;
  }

  body.gallery-page .nav-toggle-checkbox {
    position: fixed !important;
    top: -9999px !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;
  }

  /* Hamburger toggle at extreme right */
  body.gallery-page .nav-toggle-label {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 32px !important;
    height: 32px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 4px !important;
    gap: 4px !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    z-index: 1000002 !important;
    margin-left: 0 !important;
    flex-shrink: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  body.gallery-page .nav-toggle-bar {
    width: 20px !important;
    height: 2px !important;
    background-color: #daa552 !important;
    border-radius: 2px !important;
    pointer-events: none !important;
    transition: transform 0.3s ease, opacity 0.2s ease !important;
  }

  body.gallery-page .nav-menu-wrapper {
    z-index: 1000001 !important;
  }

  body.gallery-page .nav-toggle-checkbox:checked ~ .nav-menu-wrapper {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 1000001 !important;
    top: 56px !important;
    height: calc(100vh - 56px) !important;
    max-height: calc(100vh - 56px) !important;
  }

  body.gallery-page .nav-toggle-checkbox:checked ~ .nav-toggle-label .nav-toggle-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg) !important;
  }

  body.gallery-page .nav-toggle-checkbox:checked ~ .nav-toggle-label .nav-toggle-bar:nth-child(2) {
    opacity: 0 !important;
  }

  body.gallery-page .nav-toggle-checkbox:checked ~ .nav-toggle-label .nav-toggle-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg) !important;
  }

  body.gallery-page .nav-links-list li a,
  body.gallery-page .nav-link-item {
    pointer-events: auto !important;
    cursor: pointer !important;
  }

  body.gallery-page #header-cta-btn,
  body.gallery-page .nav-cta-btn {
    display: none !important;
  }

  /* -------------------------------------------------------------------------
     2. HERO SECTION
     ------------------------------------------------------------------------- */
  body.gallery-page .page-hero,
  #gallery .page-hero {
    position: relative !important;
    min-height: 310px !important;
    height: clamp(310px, 80vw, 340px) !important;
    max-height: 345px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    background: #07080a !important;
    box-sizing: border-box !important;
  }

  body.gallery-page .page-hero-bg,
  #gallery .page-hero-bg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.gallery-page .page-hero-bg img,
  #gallery .page-hero-bg img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 72% center !important;
    display: block !important;
  }

  body.gallery-page .page-hero-gradient,
  #gallery .page-hero-gradient {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2 !important;
    background: linear-gradient(
      90deg,
      rgba(7, 8, 10, 0.94) 0%,
      rgba(7, 8, 10, 0.82) 38%,
      rgba(7, 8, 10, 0.35) 70%,
      rgba(7, 8, 10, 0.08) 100%
    ) !important;
    pointer-events: none !important;
  }

  body.gallery-page .page-hero .container,
  #gallery .page-hero .container {
    position: relative !important;
    z-index: 3 !important;
    padding: 24px 14px 18px 14px !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.gallery-page .page-hero-content,
  #gallery .page-hero-content {
    max-width: 225px !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.gallery-page .section-tag,
  #gallery .section-tag {
    display: inline-block !important;
    font-size: 9.5px !important;
    font-weight: 600 !important;
    letter-spacing: 1.8px !important;
    color: #daa552 !important;
    text-transform: uppercase !important;
    margin-bottom: 7px !important;
    font-family: 'Montserrat', sans-serif !important;
    position: relative !important;
    line-height: 1.2 !important;
  }

  body.gallery-page .section-tag::before,
  #gallery .section-tag::before {
    content: "" !important;
    display: block !important;
    width: 32px !important;
    height: 1.5px !important;
    background: #daa552 !important;
    margin-bottom: 7px !important;
  }

  body.gallery-page .page-hero-title,
  #gallery .page-hero-title {
    font-family: 'Cinzel', serif !important;
    font-size: 21.5px !important;
    line-height: 1.10 !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 0 8px 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
  }

  body.gallery-page .page-hero-title .gold-text,
  #gallery .page-hero-title .gold-text {
    color: #daa552 !important;
    display: block !important;
    margin-top: 2px !important;
  }

  body.gallery-page .page-hero-title::after,
  #gallery .page-hero-title::after {
    content: "" !important;
    display: block !important;
    width: 32px !important;
    height: 1.5px !important;
    background: #daa552 !important;
    margin-top: 9px !important;
  }

  body.gallery-page .page-hero-lead,
  #gallery .page-hero-lead {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 10.5px !important;
    line-height: 1.40 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    margin: 9px 0 0 0 !important;
    max-width: 215px !important;
  }

  body.gallery-page .page-hero-cta,
  #gallery .page-hero-cta {
    display: none !important;
  }

  /* -------------------------------------------------------------------------
     3. 10 FILTERS: EXACT 5 COLUMNS × 2 ROWS (NO HORIZONTAL SCROLL)
     ------------------------------------------------------------------------- */
  body.gallery-page .gallery-section,
  #gallery .gallery-section {
    padding: 8px 0 0 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body.gallery-page .gallery-section .container,
  #gallery .gallery-section .container {
    padding: 0 8px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.gallery-page .gallery-filter-nav,
  #gallery .gallery-filter-nav {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 3px 0 !important;
    background: #ffffff !important;
    border-top: 1px solid #ede8df !important;
    border-bottom: 1px solid #ede8df !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 0 8px 0 !important;
    padding: 6px 0 !important;
    width: 100% !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  body.gallery-page .gallery-filter-btn,
  #gallery .gallery-filter-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 7.2px !important;
    font-weight: 600 !important;
    font-family: 'Montserrat', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15px !important;
    line-height: 1.15 !important;
    color: #555555 !important;
    background: transparent !important;
    border: none !important;
    border-right: 1px solid #ede8df !important;
    border-radius: 0 !important;
    padding: 4px 2px 5px 2px !important;
    min-height: 26px !important;
    white-space: normal !important;
    box-shadow: none !important;
    position: relative !important;
    cursor: pointer !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body.gallery-page .gallery-filter-btn:nth-child(5n),
  #gallery .gallery-filter-btn:nth-child(5n) {
    border-right: none !important;
  }

  body.gallery-page .gallery-filter-btn.active,
  #gallery .gallery-filter-btn.active {
    color: #daa552 !important;
    font-weight: 700 !important;
    background: transparent !important;
  }

  body.gallery-page .gallery-filter-btn.active::after,
  #gallery .gallery-filter-btn.active::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 8% !important;
    width: 84% !important;
    height: 2px !important;
    background: #daa552 !important;
    border-radius: 1px !important;
  }

  body.gallery-page .gallery-filter-btn[data-filter="street-lighting"],
  #gallery .gallery-filter-btn[data-filter="street-lighting"] {
    display: none !important;
  }

  /* -------------------------------------------------------------------------
     4. GALLERY GRID: 2 COLUMNS COMPACT — ZERO BLANK SPACE UNDER IMAGES
     ------------------------------------------------------------------------- */
  body.gallery-page .gallery-grid-row#galleryGrid,
  #gallery .gallery-grid-row#galleryGrid,
  .gallery-grid-row#galleryGrid,
  #galleryGrid,
  .gallery-grid-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Column container: strictly shrink-wrap, zero min-height */
  body.gallery-page .gallery-grid-item,
  #gallery .gallery-grid-item,
  .gallery-grid-item,
  body.gallery-page [class*="gallery-grid-item"],
  #gallery [class*="gallery-grid-item"],
  [class*="gallery-grid-item"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    box-sizing: border-box !important;
  }

  /* Card wrapper: strictly shrink-wrap to image, remove aspect-ratio and background */
  body.gallery-page .gallery-item-card,
  #gallery .gallery-item-card,
  .gallery-item-card,
  body.gallery-page .gallery-item,
  #gallery .gallery-item,
  .gallery-item {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    border-radius: 3px !important;
    overflow: hidden !important;
    background: transparent !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  body.gallery-page .gallery-item-card::after,
  #gallery .gallery-item-card::after,
  .gallery-item-card::after {
    display: none !important;
  }

  /* Image: exact 1.35 / 1 aspect ratio */
  body.gallery-page .gallery-item-card img,
  #gallery .gallery-item-card img,
  .gallery-item-card img,
  body.gallery-page .gallery-grid-item img,
  #gallery .gallery-grid-item img,
  .gallery-grid-item img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1.35 / 1 !important;
    object-fit: cover !important;
    border-radius: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    transform: none !important;
  }

  /* -------------------------------------------------------------------------
     5. SHOW MORE / SHOW LESS BUTTON — COMPACT & DIRECTLY BELOW IMAGES
     ------------------------------------------------------------------------- */
  body.gallery-page .gallery-show-more-wrap,
  #gallery .gallery-show-more-wrap,
  .gallery-show-more-wrap {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 10px !important;
    margin-bottom: 0px !important;
    padding: 0 !important;
    width: 100% !important;
    background: #ffffff !important;
  }

  body.gallery-page .gallery-show-more-btn,
  #gallery .gallery-show-more-btn,
  .gallery-show-more-btn,
  #galleryShowMoreBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background: transparent !important;
    color: #c89a3f !important;
    border: 1px solid rgba(200, 154, 63, 0.75) !important;
    border-radius: 4px !important;
    padding: 5px 16px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 8.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    outline: none !important;
  }

  body.gallery-page .gallery-show-more-btn i,
  #gallery .gallery-show-more-btn i,
  .gallery-show-more-btn i,
  #galleryShowMoreBtn i {
    font-size: 9.5px !important;
    line-height: 1 !important;
    transition: transform 0.2s ease !important;
  }

  body.gallery-page .gallery-show-more-btn:active,
  #gallery .gallery-show-more-btn:active,
  .gallery-show-more-btn:active,
  #galleryShowMoreBtn:active {
    background: rgba(200, 154, 63, 0.1) !important;
  }

  /* -------------------------------------------------------------------------
     6. BOTTOM STATS STRIP: ALL 5 STATS IN ONE SINGLE ROW (NO DROPPED ITEM)
     Zero black gap between gallery and stats section
     ------------------------------------------------------------------------- */
  body.gallery-page .gallery-stats-strip,
  #gallery .gallery-stats-strip,
  .gallery-stats-strip {
    background: #ffffff !important;
    border-top: 1px solid #ede8df !important;
    border-bottom: 1px solid #ede8df !important;
    padding: 10px 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  body.gallery-page .gallery-stats-strip::before,
  #gallery .gallery-stats-strip::before,
  .gallery-stats-strip::before {
    display: none !important;
  }

  body.gallery-page .gallery-stats-strip .container,
  #gallery .gallery-stats-strip .container,
  .gallery-stats-strip .container {
    padding: 0 4px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.gallery-page .gallery-stats-strip .row,
  #gallery .gallery-stats-strip .row,
  .gallery-stats-strip .row {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  /* Force every stat column to occupy exactly 1 column — NO drop to 2nd row */
  body.gallery-page .gallery-stats-strip [class*="col-"],
  #gallery .gallery-stats-strip [class*="col-"],
  .gallery-stats-strip [class*="col-"],
  body.gallery-page .gallery-stats-strip [class*="col-"]:last-child,
  #gallery .gallery-stats-strip [class*="col-"]:last-child,
  .gallery-stats-strip [class*="col-"]:last-child,
  body.gallery-page .gallery-stats-strip .col-12,
  #gallery .gallery-stats-strip .col-12,
  .gallery-stats-strip .col-12 {
    grid-column: auto / auto !important;
    grid-column-start: auto !important;
    grid-column-end: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 1px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  body.gallery-page .stat-box,
  #gallery .stat-box,
  .stat-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    padding: 2px 1px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    position: relative !important;
    gap: 0 !important;
  }

  body.gallery-page .stat-box:not(:last-child)::after,
  #gallery .stat-box:not(:last-child)::after,
  .stat-box:not(:last-child)::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    top: 10% !important;
    height: 80% !important;
    width: 1px !important;
    background: #ede8df !important;
  }

  body.gallery-page .stat-icon-wrap,
  #gallery .stat-icon-wrap,
  .stat-icon-wrap {
    margin-bottom: 3px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.gallery-page .stat-icon,
  #gallery .stat-icon,
  .stat-icon {
    font-size: 15px !important;
    color: #daa552 !important;
  }

  body.gallery-page .stat-number,
  #gallery .stat-number,
  .stat-number {
    font-size: 8.5px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    line-height: 1.1 !important;
    margin-bottom: 2px !important;
    font-family: 'Montserrat', sans-serif !important;
    white-space: nowrap !important;
  }

  body.gallery-page .stat-label,
  #gallery .stat-label,
  .stat-label {
    font-size: 6.2px !important;
    font-weight: 500 !important;
    color: #555555 !important;
    line-height: 1.15 !important;
    font-family: 'Montserrat', sans-serif !important;
    max-width: 58px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  /* -------------------------------------------------------------------------
     7. FINAL VIEW FULL GALLERY BUTTON (Black bar at the very bottom below stats)
     ------------------------------------------------------------------------- */
  body.gallery-page .gallery-mobile-final-btn-wrap,
  #gallery .gallery-mobile-final-btn-wrap,
  .gallery-mobile-final-btn-wrap {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 10px 12px 18px 12px !important;
    background: #07080a !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body.gallery-page .gallery-mobile-final-btn,
  #gallery .gallery-mobile-final-btn,
  .gallery-mobile-final-btn,
  #galleryMobileFinalBtn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 38px !important;
    background: #07080a !important;
    border: 1px solid #daa552 !important;
    border-radius: 4px !important;
    color: #daa552 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 9.5px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
  }

  body.gallery-page .gallery-mobile-final-btn:active,
  #gallery .gallery-mobile-final-btn:active,
  .gallery-mobile-final-btn:active,
  #galleryMobileFinalBtn:active {
    background: #14161b !important;
    color: #fce09b !important;
  }

  /* -------------------------------------------------------------------------
     8. PHONE FLOATING BUTTON PRESERVED & VISIBLE ON MOBILE
     ------------------------------------------------------------------------- */
  .floating-action-btn,
  body.gallery-page .floating-action-btn,
  #gallery ~ .floating-action-btn {
    display: flex !important;
    position: fixed !important;
    left: 16px !important;
    right: auto !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 99999 !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45) !important;
  }

  .floating-action-btn.floating-call {
    bottom: 84px !important;
    background: linear-gradient(135deg, #ff3b30 0%, #e53935 60%, #c62828 100%) !important;
  }

  .floating-action-btn.floating-whatsapp {
    bottom: 20px !important;
    background: linear-gradient(135deg, #2fe675 0%, #25D366 60%, #1da851 100%) !important;
  }

  .floating-action-btn i {
    font-size: 24px !important;
    color: #ffffff !important;
    line-height: 1 !important;
  }
}

/* ==========================================================================
   MOBILE TYPOGRAPHY OVERRIDE (max-width: 767px)
   Strictly typography only: increases text readability on mobile devices.
   Zero layout, box-model, spacing, or visual design changes.
   ========================================================================== */
@media screen and (max-width: 767px) {
  /* 1. Main page headings */
  h1,
  .hero-title,
  .home-hero-title,
  .home-main-title,
  .page-hero-title,
  .capabilities-hero-title,
  .contact-page-hero-title,
  .govt-hero-title,
  .luxury-hero-title,
  .projects-hero-title {
    font-size: clamp(24px, 6.5vw, 28px) !important;
    line-height: 1.25 !important;
  }

  /* 2. Section headings */
  h2,
  .section-title,
  .home-section-title,
  .capabilities-main-title,
  .govt-section-title,
  .luxury-section-title,
  .contact-main-heading,
  .commitment-main-title,
  .section-title-dark,
  .footer-heading {
    font-size: clamp(20px, 5.5vw, 24px) !important;
    line-height: 1.3 !important;
  }

  /* 3. Card titles */
  .expertise-card-title,
  .project-card-title,
  .govt-item-title,
  .luxury-item-title,
  .home-card-title,
  .about-pillar-title,
  .commitment-item-title,
  .card-title {
    font-size: clamp(13px, 3.5vw, 15px) !important;
    line-height: 1.3 !important;
  }

  /* Specific: Capabilities card titles */
  .cap-card-title,
  #capabilities .cap-card-title,
  body.capabilities-page .cap-card-title {
    font-size: clamp(11.5px, 3.2vw, 13px) !important;
    line-height: 1.25 !important;
  }

  /* Specific: 6-column Pillars titles & descriptions */
  .pillar-title,
  body.capabilities-page .pillar-title,
  #capabilities .pillar-title {
    font-size: clamp(7.5px, 2vw, 8.5px) !important;
    line-height: 1.2 !important;
  }

  .pillar-desc,
  body.capabilities-page .pillar-desc,
  #capabilities .pillar-desc {
    font-size: clamp(6.5px, 1.7vw, 7.5px) !important;
    line-height: 1.25 !important;
  }

  /* 4. Card descriptions */
  .expertise-card-desc,
  .project-card-desc,
  .govt-item-desc,
  .luxury-item-desc,
  .home-card-text,
  .about-pillar-desc,
  .commitment-item-desc,
  .card-desc {
    font-size: clamp(11.5px, 3vw, 13px) !important;
    line-height: 1.45 !important;
  }

  /* 5. Card list items */
  .cap-card-list,
  #capabilities .cap-card-list,
  body.capabilities-page .cap-card-list {
    font-size: clamp(10.5px, 2.8vw, 11.5px) !important;
    line-height: 1.4 !important;
  }

  .cap-card-list li,
  #capabilities .cap-card-list li,
  body.capabilities-page .cap-card-list li {
    font-size: clamp(10.5px, 2.8vw, 11.5px) !important;
    line-height: 1.4 !important;
  }

  /* 6. Paragraph / body text */
  p,
  .capabilities-main-desc,
  .hero-desc,
  .section-desc,
  .statement-text,
  .about-desc,
  .home-main-subtitle,
  .govt-hero-desc,
  .govt-hero-desc-2,
  .luxury-hero-desc,
  .footer-desc,
  .luxury-statement-text,
  .govt-commitment-subtext,
  .contact-hero-qtext,
  .quote-text {
    font-size: clamp(13px, 3.5vw, 14.5px) !important;
    line-height: 1.5 !important;
  }

  /* 7. Small labels / tags */
  .capabilities-hero-tag,
  .contact-page-hero-tag,
  .projects-hero-tag,
  .capabilities-tag,
  .cap-tag-text,
  .section-tag,
  .contact-eyebrow-text,
  .govt-badge-text,
  .stat-label,
  .eyebrow {
    font-size: clamp(10px, 2.6vw, 11.5px) !important;
    line-height: 1.3 !important;
  }

  /* 8. Navigation / menu text */
  .nav-links-list li a,
  .nav-link-item {
    font-size: clamp(14px, 3.8vw, 16px) !important;
    line-height: 1.4 !important;
  }

  /* 9. Buttons / CTA text */
  .nav-cta-btn,
  .mobile-header-cta,
  .mobile-header-cta span,
  .home-mobile-cta-btn,
  .about-mobile-cta-btn,
  .capabilities-hero-btn,
  .capabilities-bottom-btn,
  .projects-hero-btn,
  .projects-bottom-btn,
  .govt-view-capabilities-btn,
  .govt-bottom-capabilities-btn,
  .luxury-hero-btn,
  .luxury-explore-work-btn,
  .contact-page-hero-btn,
  .contact-clean-submit-btn,
  .btn-gold,
  .btn-gold-outline,
  .gallery-filter-btn {
    font-size: clamp(12px, 3.2vw, 13.5px) !important;
    line-height: 1.3 !important;
  }

  /* Footer links & bottom bar text */
  .footer-links-list li a {
    font-size: clamp(11.5px, 3vw, 13px) !important;
    line-height: 1.4 !important;
  }

  .footer-bottom-bar,
  .footer-bottom-bar a {
    font-size: clamp(10px, 2.6vw, 11px) !important;
    line-height: 1.3 !important;
  }
}