/* =========================================================
   CCM 2026-09-26 – mobile fixes (phones, 767px and below)
   Loaded after main.css on index + the 3 service pages.
   ========================================================= */
@media (max-width: 767px) {

  /* ---------- Home: team section ---------- */
  #our-team.dgm-team-area { padding-top: 50px !important; padding-bottom: 30px !important; }
  #our-team .dgm-team-top-wrap { margin-bottom: 24px !important; }
  #our-team .tp-section-title-grotesk { font-size: 32px !important; }
  #our-team .tp-team-details-thumb { margin: 0 auto 20px !important; max-width: 300px; }
  #our-team .tp-team-details-thumb img {
    width: 100%; height: 330px; object-fit: cover; object-position: top center; border-radius: 16px;
  }
  #our-team .tp-team-details-text-sub { font-size: 14px !important; }
  #our-team .tp-team-details-text-title { font-size: 28px !important; line-height: 1.15 !important; margin-bottom: 12px !important; }
  #our-team .tp-team-details-text p { font-size: 15px !important; line-height: 1.6 !important; }
  #our-team .row.mt-40 { margin-top: 20px !important; }
  #our-team .accordion-item-strip {
    flex: 0 0 290px !important;
    width: 290px !important;
    height: 420px !important;
    border-radius: 20px !important;
  }
  #our-team .accordion-expanded-content {
    bottom: 20px !important;
    left: 18px !important;
    right: 18px !important;
  }
  #our-team .accordion-expanded-content h3 {
    font-size: 20px !important;
    margin-bottom: 4px !important;
  }
  #our-team .accordion-expanded-content p {
    font-size: 13px !important;
    line-height: 1.45 !important;
    color: rgba(255, 255, 255, 0.9) !important;
  }
  #our-team .accordion-item-strip::after {
    height: 55% !important;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.85) 100%) !important;
  }

  /* ---------- Service pages: top card (no black empty space) ---------- */
  .tp-pd-3-hero-area .des-portfolio-item { height: 240px !important; }
  .tp-pd-3-hero-area .des-portfolio-thumb { height: 100% !important; }
  .tp-pd-3-hero-area .des-portfolio-thumb img {
    height: 100% !important; width: 100% !important; object-fit: cover !important;
  }
  .tp-pd-3-hero-area .des-portfolio-title { font-size: 28px !important; }

  /* ---------- Service pages: intro text ---------- */
  .tp-pd-3-overview-area { padding-top: 24px !important; padding-bottom: 10px !important; }
  .tp-pd-3-overview-area .tp-industry-content { padding-left: 0 !important; }
  .tp-pd-3-overview-area .tp-industry-text p { font-size: 15px !important; line-height: 1.65 !important; }
  .tp-pd-3-overview-area .tp-industry-text p:first-child { font-size: 17px !important; }
  .tp-pd-3-overview-area .mb-40 { margin-bottom: 20px !important; }

  /* ---------- Service pages: video stills ---------- */
  .tp-pd-3-gallery-img.height { height: 210px !important; margin-bottom: 14px !important; border-radius: 16px !important; }
  .tp-pd-3-gallery-img.height img { height: 260px !important; object-fit: cover; margin-top: -25px !important; border-radius: 16px !important; }

  /* ---------- Service pages: The Challenge / The Solution ---------- */
  .tp-pd-3-portfolio-area { padding-top: 30px !important; padding-bottom: 20px !important; }
  .tp-pd-3-portfolio-area .tp-pd-3-portfolio-item-wrap.pt-120 { padding-top: 10px !important; }
  .tp-pd-3-portfolio-area .tp-pd-3-portfolio-item.mb-120 { margin-bottom: 30px !important; }
  .tp-pd-3-portfolio-thumb img {
    height: auto !important; width: 100% !important; object-fit: contain !important; border-radius: 16px;
  }
  .tp-pd-3-portfolio-content { margin: 16px 0 0 !important; }
  .tp-pd-3-portfolio-content .tp-pd-3-title { font-size: 34px !important; margin-bottom: 12px !important; }
  .tp-pd-3-portfolio-content .tp-pd-3-overview-text p { font-size: 15px !important; line-height: 1.65 !important; margin: 0 0 14px !important; }
}
@media (max-width: 767px) {
  /* zoom-in animation wraps the hero image in extra divs – make them full height too */
  .tp-pd-3-hero-area .des-portfolio-thumb div,
  .tp-pd-3-hero-area .des-portfolio-thumb .anim-zoomin { height: 100% !important; width: 100% !important; }
}

@media (max-width: 991px) {
  /* stop images/video grabbing the finger (image drag) so the page always scrolls */
  .tp-video-area img, .tp-video-area video, #funfact-section img {
    -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; pointer-events: none;
  }
  .tp-video-area, #funfact-section { touch-action: pan-y; }

  /* Home: Process / Work cards GSAP scroll stacking with full buffer for Card 09 */
  #our-process.tp-panel-pin-area {
    padding-top: 50px !important;
    padding-bottom: 280px !important;
    overflow: visible !important;
  }
  #our-process .tp-work-wrapper {
    position: relative !important;
  }
  #our-process .tp-work-item.tp-panel-pin {
    margin-bottom: 20px !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
  }
}

/* =========================================================
   Overlap Prevention: Process Area vs Team Area (All screens)
   ========================================================= */
#our-process.tp-panel-pin-area {
  position: relative !important;
  z-index: 1 !important;
}

@media (min-width: 992px) {
  #our-process.tp-panel-pin-area {
    padding-bottom: 260px !important;
  }
}

#our-team.dgm-team-area {
  position: relative !important;
  z-index: 10 !important;
  background-color: #ffffff !important;
}

/* =========================================================
   Header Bar Fix: Always on top & fully clickable
   ========================================================= */
#header-sticky,
.tp-header-area.header-transparent,
.tp-header-area.header-sticky,
.header-sticky {
  z-index: 9999 !important;
  pointer-events: auto !important;
}

.tp-header-menu ul li a,
.tp-header-logo a,
.tp-header-btn-box a,
.tp-offcanvas-open-btn {
  pointer-events: auto !important;
  cursor: pointer !important;
}