/* =========================================================
   Professional Pioneers v1.9.107
   Homepage title links, project CTA polish, mobile project
   filter, bottom detail navigation, and Services motion.
========================================================= */

/* Homepage titles that already have a dedicated destination. */
.pp-home-title-link,
.pp-home-title-link:link,
.pp-home-title-link:visited,
.pp-home-title-link:hover,
.pp-home-title-link:focus,
.pp-home-title-link:active {
  color: inherit !important;
  text-decoration: none !important;
  text-decoration-line: none !important;
}

.pp-home-section-title-link {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  border-radius: 8px;
  transition: opacity .35s ease, transform .35s ease;
}

.pp-home-section-title-link:hover,
.pp-home-section-title-link:focus-visible {
  opacity: .82;
  transform: translateY(-2px);
}

.pp-project-preview-title-link {
  display: block;
  width: fit-content;
  max-width: 100%;
}

.pp-project-preview-title-link:hover .pp-latest-projects-preview-title,
.pp-project-preview-title-link:focus-visible .pp-latest-projects-preview-title,
.pp-latest-projects-item-title:hover,
.pp-latest-projects-item-title:focus-visible {
  color: rgba(255,255,255,.78) !important;
}

.pp-latest-projects-item-title {
  display: block;
  width: fit-content;
  max-width: 100%;
  text-decoration: none !important;
}

/* Make the project "More" action visually distinct and interactive. */
.pp-work-projects-section .pp-latest-projects-item-link {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  color: #ffca45 !important;
  background: rgba(255,202,69,.09);
  border: 1px solid rgba(255,202,69,.22);
  font-weight: 700;
  text-decoration: none !important;
  transition: color .32s ease, background .32s ease, border-color .32s ease, transform .32s ease, box-shadow .32s ease;
}

.pp-work-projects-section .pp-latest-projects-item-link i {
  font-size: .9em;
  transition: transform .32s ease;
}

.pp-work-projects-section .pp-latest-projects-item-link:hover,
.pp-work-projects-section .pp-latest-projects-item-link:focus-visible {
  color: #101010 !important;
  background: #ffca45;
  border-color: #ffca45;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(255,202,69,.18);
}

.pp-work-projects-section .pp-latest-projects-item-link:hover i,
.pp-work-projects-section .pp-latest-projects-item-link:focus-visible i {
  transform: translateX(3px);
}

.pp-work-projects-section .pp-latest-projects-item-link:active {
  transform: translateY(0) scale(.96);
  box-shadow: none;
}

html[dir="rtl"] .pp-work-projects-section .pp-latest-projects-item-link i {
  transform: rotate(180deg);
}

html[dir="rtl"] .pp-work-projects-section .pp-latest-projects-item-link:hover i,
html[dir="rtl"] .pp-work-projects-section .pp-latest-projects-item-link:focus-visible i {
  transform: translateX(-3px) rotate(180deg);
}

/* Services: one smooth upward-only hover motion over 2.5 seconds. */
#services.pp-services-section .pp-service-card,
.pp-services-section#services .pp-service-card {
  transform: translateY(0) !important;
  transition: transform 2.5s cubic-bezier(.22,.61,.36,1) !important;
  will-change: transform;
}

#services.pp-services-section .pp-service-card:hover,
#services.pp-services-section .pp-service-card:focus-within,
.pp-services-section#services .pp-service-card:hover,
.pp-services-section#services .pp-service-card:focus-within {
  transform: translateY(-12px) !important;
}

/* Neutralize previous diagonal/scale child movement so the card only travels upward. */
#services.pp-services-section .pp-service-content,
.pp-services-section#services .pp-service-content,
#services.pp-services-section .pp-service-card:hover .pp-service-content,
#services.pp-services-section .pp-service-card:focus-within .pp-service-content,
#services.pp-services-section .pp-service-card:active .pp-service-content,
.pp-services-section#services .pp-service-card:hover .pp-service-content,
.pp-services-section#services .pp-service-card:focus-within .pp-service-content,
.pp-services-section#services .pp-service-card:active .pp-service-content {
  top: 70% !important;
  left: 50% !important;
  right: auto !important;
  width: min(86%, 420px) !important;
  transform: translate(-50%, -50%) !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  transition: none !important;
}

#services.pp-services-section .pp-service-title,
.pp-services-section#services .pp-service-title,
#services.pp-services-section .pp-service-card:hover .pp-service-title,
#services.pp-services-section .pp-service-card:focus-within .pp-service-title,
#services.pp-services-section .pp-service-card:active .pp-service-title,
.pp-services-section#services .pp-service-card:hover .pp-service-title,
.pp-services-section#services .pp-service-card:focus-within .pp-service-title,
.pp-services-section#services .pp-service-card:active .pp-service-title,
html[dir="rtl"] #services.pp-services-section .pp-service-title,
html[dir="rtl"] .pp-services-section#services .pp-service-title {
  text-align: center !important;
  transform: none !important;
  text-shadow: 0 5px 18px rgba(0,0,0,.55) !important;
}

#services.pp-services-section .pp-service-bg,
.pp-services-section#services .pp-service-bg,
#services.pp-services-section .pp-service-card:hover .pp-service-bg,
#services.pp-services-section .pp-service-card:focus-within .pp-service-bg,
#services.pp-services-section .pp-service-card:active .pp-service-bg,
.pp-services-section#services .pp-service-card:hover .pp-service-bg,
.pp-services-section#services .pp-service-card:focus-within .pp-service-bg,
.pp-services-section#services .pp-service-card:active .pp-service-bg,
html[dir="rtl"] #services.pp-services-section .pp-service-bg,
html[dir="rtl"] .pp-services-section#services .pp-service-bg {
  background-position: center 70% !important;
  transform: none !important;
  opacity: .52 !important;
  filter: none !important;
  transition: none !important;
}

/* Bottom navigation on project, service, and standard detail pages. */
.pp-single-bottom-navigation {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  margin-top: clamp(28px, 4vw, 56px);
  padding-top: clamp(22px, 3vw, 36px);
  border-top: 1px solid rgba(255,255,255,.12);
}

.pp-single-bottom-back-link {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  width: fit-content;
}

.pp-single-bottom-back-link i {
  margin: 0 !important;
}

html[dir="rtl"] .pp-single-bottom-navigation {
  justify-content: flex-start;
}

html[dir="rtl"] .pp-single-bottom-back-link i {
  transform: rotate(180deg);
}

/* Custom mobile Projects category dropdown with icon + title. */
.pp-archive-mobile-filter {
  display: none;
}

@media (max-width: 767px) {
  /* Reduce the Services section top/bottom spacing on phones. */
  #services.pp-services-section,
  .pp-main-content > #services.pp-services-section {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
    padding-top: 20px !important;
    padding-bottom: 24px !important;
  }

  #services.pp-services-section .pp-services-header,
  .pp-services-section#services .pp-services-header {
    margin-bottom: 14px !important;
  }

  #services.pp-services-section .pp-service-card:hover,
  #services.pp-services-section .pp-service-card:focus-within,
  .pp-services-section#services .pp-service-card:hover,
  .pp-services-section#services .pp-service-card:focus-within {
    transform: translateY(-8px) !important;
  }

  #services.pp-services-section .pp-service-content,
  .pp-services-section#services .pp-service-content,
  #services.pp-services-section .pp-service-card:hover .pp-service-content,
  #services.pp-services-section .pp-service-card:focus-within .pp-service-content,
  .pp-services-section#services .pp-service-card:hover .pp-service-content,
  .pp-services-section#services .pp-service-card:focus-within .pp-service-content {
    top: 72% !important;
    width: min(88%, 360px) !important;
  }

  .pp-archive-filter-row {
    display: none !important;
  }

  .pp-archive-mobile-filter {
    position: relative;
    display: block;
    width: 100%;
    margin-top: 14px;
    z-index: 30;
  }

  .pp-archive-mobile-filter-trigger {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 72px;
    padding: 11px 14px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.045));
    color: #fff;
    text-align: start;
    cursor: pointer;
    box-shadow: 0 16px 42px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .pp-archive-mobile-filter-trigger:hover,
  .pp-archive-mobile-filter-trigger:focus-visible,
  .pp-archive-mobile-filter.is-open .pp-archive-mobile-filter-trigger {
    border-color: rgba(255,202,69,.52);
    background: linear-gradient(145deg, rgba(255,202,69,.13), rgba(255,255,255,.055));
    outline: none;
  }

  .pp-archive-mobile-filter-icon,
  .pp-archive-mobile-option-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.07);
    overflow: hidden;
    color: #ffca45;
    font-size: 21px;
  }

  .pp-archive-mobile-filter-icon img,
  .pp-archive-mobile-option-icon img {
    width: 70%;
    height: 70%;
    object-fit: contain;
  }

  .pp-archive-mobile-filter-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
  }

  .pp-archive-mobile-filter-title,
  .pp-archive-mobile-option-title {
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
  }

  .pp-archive-mobile-filter-helper {
    color: rgba(255,255,255,.55);
    font-size: 12px;
    line-height: 1.2;
  }

  .pp-archive-mobile-filter-chevron {
    justify-self: end;
    transition: transform .32s ease;
  }

  .pp-archive-mobile-filter.is-open .pp-archive-mobile-filter-chevron {
    transform: rotate(180deg);
  }

  .pp-archive-mobile-filter-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    display: grid;
    gap: 6px;
    max-height: min(52vh, 430px);
    padding: 8px;
    overflow-y: auto;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 18px;
    background: rgba(8,10,14,.97);
    box-shadow: 0 26px 70px rgba(0,0,0,.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
  }

  .pp-archive-mobile-filter.is-open .pp-archive-mobile-filter-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .pp-archive-mobile-filter-option {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 58px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
    color: #fff;
    text-align: start;
    cursor: pointer;
  }

  .pp-archive-mobile-filter-option:hover,
  .pp-archive-mobile-filter-option:focus-visible,
  .pp-archive-mobile-filter-option.is-selected {
    border-color: rgba(255,202,69,.28);
    background: rgba(255,202,69,.10);
    outline: none;
  }

  .pp-archive-mobile-option-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 12px;
    font-size: 18px;
  }

  .pp-archive-mobile-option-check {
    justify-self: end;
    color: #ffca45;
    font-size: 19px;
  }

  .pp-single-bottom-navigation {
    margin-top: 28px;
    padding-top: 22px;
  }

  .pp-single-bottom-back-link {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  #services.pp-services-section .pp-service-card,
  .pp-services-section#services .pp-service-card,
  .pp-home-section-title-link,
  .pp-work-projects-section .pp-latest-projects-item-link {
    transition-duration: .01ms !important;
  }
}