/**
 * QA pages fixes — careers / contact / about / products / services
 * Loaded last among design sheets so pack rules can be corrected without editing huge packs.
 */

/* Careers design tokens (referenced by inner-pages.css but never defined) */
.careers-page {
  --font-main: "Inter-Regular", "Inter", sans-serif;
  --primary-accent: #ff3366;
  --dark-navy: #0c1a63;
  --text-dark: #000000;
  --text-medium: #475569;
  --text-placeholder: rgba(0, 0, 0, 0.3);
  --card-bg: #ffffff;
  --card-border: #eef2f6;
  --card-shadow: 0 10px 28px rgba(12, 26, 99, 0.08);
  --input-bg: #f6f6f6;
  --input-border: #e8e8e8;
  --input-focus-border: #ff3366;
  --accent-dashed-border: #ff3366;
}

.careers-page .hero-title {
  font: 55px/65px "Inter-Bold", sans-serif;
  color: #000;
  letter-spacing: -0.5px;
}
.careers-page .hero-title span {
  color: #ff3366;
}

.careers-page .career-hero {
  min-height: 416px;
  display: flex;
  align-items: center;
}
.careers-page .career-hero-content {
  padding: 72px 0;
  position: relative;
  z-index: 2;
}
.careers-page .career-hero-image-wrapper::after {
  background: linear-gradient(to right, #ffffff 38%, rgba(255, 255, 255, 0) 68%);
}

.careers-page .brd_crumb,
.main-content-contact .brd_crumb,
.main-content-about .brd_crumb,
.main-content-services-main .brd_crumb,
.product-mn-cnt .brd_crumb,
.serv-det-mn-cnt .brd_crumb,
.s-dtl .brd_crumb {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative;
  z-index: 3;
  margin-bottom: 14px;
}

.careers-page .form-error-msg,
.application-form .form-error-msg,
.careers-page .form-status-error {
  display: block;
  font: 13px/18px "Inter-Medium", sans-serif;
  color: #c2185b;
  background: rgba(255, 51, 102, 0.08);
  border: 1px solid rgba(255, 51, 102, 0.22);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 8px;
}
.careers-page .field-error,
.application-form .field-error {
  display: block;
  margin: 6px 0 0;
  padding: 0;
  border: none;
  background: none;
  border-radius: 0;
  color: #e11d48;
  font: 12px/16px "Inter-Medium", sans-serif;
}
.careers-page .resume-upload-box.is-invalid {
  border-color: #ef4444;
}
.careers-page .form-success-alert,
.careers-page .form-success-alert.visible {
  display: block;
  background-color: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
  border-radius: 10px;
  padding: 12px 14px;
  font: 13px/20px "Inter-Medium", sans-serif;
  text-align: center;
  margin-top: 10px;
}

.req-ast {
  color: #ff3366;
  margin-left: 3px;
  font-weight: 700;
}

.resume-upload-box {
  position: relative;
}
.resume-clear-btn {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 3;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: #0c1a63;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  line-height: 0;
}
.resume-clear-btn:hover {
  background: #ff3366;
}
.resume-clear-btn svg {
  width: 12px;
  height: 12px;
}

.careers-page .application-card {
  box-shadow: 0 12px 32px rgba(12, 26, 99, 0.1);
}
.careers-page .job-card {
  box-shadow: 0 4px 16px rgba(12, 26, 99, 0.06);
}
.careers-page .job-card.active {
  box-shadow: 0 8px 24px rgba(255, 51, 102, 0.12);
  border-color: rgba(255, 51, 102, 0.35);
}
.careers-page .status-dot {
  box-shadow: 0 0 0 7px rgba(0, 210, 106, 0.22);
}

/* CR1 — icon left + 2-line title block right (same row), tight gap */
.careers-page .application-card-header {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
}

.careers-page .job-header-main {
  gap: 10px;
}

.careers-page .application-card-header .hed-35,
.careers-page .application-card-header .application-form-title {
  margin-top: 0;
  margin-bottom: 0;
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
}

/* CR2 — keep icons readable on tablet (avoid over-compression) */
@media screen and (max-width: 991px) {
  .careers-page .job-icon-circle {
    width: 56px;
    height: 56px;
    min-width: 56px;
  }
  .careers-page .job-icon-circle img {
    width: 28px;
    height: 28px;
    object-fit: contain;
  }
  .careers-page .application-header-icon {
    width: 60px;
    min-width: 60px;
    height: 60px;
  }
  .careers-page .application-header-icon img {
    width: 30px;
    height: 34px;
    object-fit: contain;
  }
}

/* Narrow form card: keep icon + 2-line title block side by side (never stack) */
.careers-page .application-card {
  container-type: inline-size;
  container-name: careers-apply;
}

@container careers-apply (max-width: 520px) {
  .application-card-header {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    text-align: left;
  }
  .application-card-header .hed-35,
  .application-form-title {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: none;
    white-space: normal;
    margin-top: 0;
    font-size: 20px;
    line-height: 26px;
  }
  .application-header-icon {
    width: 52px;
    min-width: 52px;
    height: 52px;
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .application-header-icon img {
    width: 26px;
    height: 30px;
    object-fit: contain;
  }
}

@media screen and (max-width: 991px) {
  .careers-page .hero-title {
    font-size: 36px;
    line-height: 44px;
  }
  .careers-page .career-hero {
    min-height: 320px;
  }
  .careers-page .career-hero-content {
    max-width: 100%;
    padding: 48px 0 40px;
  }
  .careers-page .application-card-header {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }
  .careers-page .application-card-header .hed-35,
  .careers-page .application-card-header .application-form-title {
    font-size: 24px;
    line-height: 30px;
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
  }
  .careers-page .job-icon-circle {
    width: 56px;
    height: 56px;
    min-width: 56px;
  }
  .careers-page .job-icon-circle img {
    width: 28px;
    height: 28px;
    object-fit: contain;
  }
  .careers-page .application-header-icon {
    width: 60px;
    min-width: 60px;
    height: 60px;
    flex-shrink: 0;
  }
  .careers-page .application-header-icon img {
    width: 30px;
    height: 34px;
    object-fit: contain;
  }
}

/* No container queries: still keep icon + 2-line title on one row */
@supports not (container-type: inline-size) {
  @media screen and (max-width: 991px) {
    .careers-page .application-card-header {
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      gap: 8px;
      text-align: left;
    }
    .careers-page .application-card-header .hed-35,
    .careers-page .application-card-header .application-form-title {
      flex: 1 1 auto;
      min-width: 0;
      white-space: normal;
      margin-top: 0;
      font-size: 22px;
      line-height: 28px;
    }
  }
}

@media screen and (max-width: 575px) {
  .careers-page .hero-title {
    font-size: 28px;
    line-height: 34px;
  }
  .careers-page .career-hero {
    min-height: 260px;
  }
  .careers-page .application-card-header {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    text-align: left;
  }
  .careers-page .application-card-header .hed-35,
  .careers-page .application-card-header .application-form-title {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    font-size: 18px;
    line-height: 24px;
    margin-top: 0;
  }
  .careers-page .application-header-icon {
    width: 48px;
    min-width: 48px;
    height: 48px;
    flex-shrink: 0;
  }
  .careers-page .application-header-icon img {
    width: 24px;
    height: 28px;
  }
  .careers-page .upload-icon-circle {
    width: 40px;
    height: 40px;
  }
  .careers-page .upload-icon-circle img {
    width: 18px;
    height: 18px;
  }
}

/* Contact hero: exact 416px band (QA). Scoped so about/services keep shared padding. */
.main-content-contact .hero.contact-bg {
  height: 416px;
  min-height: 416px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding-top: 56px;
  padding-bottom: 56px;
  overflow: hidden;
}
.main-content-contact .hero.contact-bg .hero-content {
  padding-top: 0;
  padding-bottom: 0;
}

.main-content-about .hero {
  min-height: 416px;
  display: flex;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 70px;
}
/* Services: do not flex-center in a clipped 416px band — that shears the title
   under the fixed header. Pack .hero { overflow:hidden } is the clip source. */
.main-content-services-main .hero {
  min-height: 416px;
  display: block;
  overflow: visible;
  padding-top: 128px;
  padding-bottom: 70px;
  box-sizing: border-box;
}
.main-content-contact .hero-title,
.main-content-about .hero-title,
.main-content-services-main .hero-title {
  font: 55px/63px "Inter-Bold", sans-serif;
  color: #000;
}
.main-content-contact .hero::before,
.main-content-about .hero::before,
.main-content-services-main .hero::before,
.product-mn-cnt .prod::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.72) 42%, rgba(255, 255, 255, 0.15) 70%, transparent 100%);
}
.main-content-contact .hero-content,
.main-content-about .hero-content,
.main-content-services-main .hero-content,
.product-mn-cnt .prod-content {
  position: relative;
  z-index: 2;
  text-align: left;
}
.main-content-contact .hero-title,
.main-content-about .hero-title,
.main-content-services-main .hero-title,
.product-mn-cnt .prod-title,
.careers-page .hero-title {
  display: block;
  text-align: left;
}

/* Hide desktop-only hero line breaks on small screens so titles reflow cleanly */
@media screen and (max-width: 767px) {
  br.ban-hide {
    display: none;
  }
}

.main-content-contact .card-desc p,
.main-content-contact .card-desc a {
  font: 15px/22px "Inter-Regular", sans-serif;
  color: #000;
}
.main-content-contact .card-heading {
  font: 23px/32px "Inter-SemiBold", sans-serif;
  color: #000;
}
.main-content-contact .flag-name {
  font: 15px/22px "Inter-Bold", sans-serif;
}
.main-content-contact .card-desc a:hover {
  color: #ff3366;
}

.main-content-contact .locations-empty {
  display: block;
  width: 100%;
  text-align: center;
  padding: 2rem 1rem;
  margin: 0 auto;
}

.contact .contact_in .lft .cont_img img {
  width: 100%;
  max-width: 833px;
  height: 555px;
  object-fit: cover;
}

/* Contact offices: cards + map on one row (HTML pack). Override 80%/100% wrap. */
.main-content-contact .locations-section .uk-office-flex,
.main-content-contact .locations-section .head-office-flex,
.locations-section .uk-office-flex.office-row,
.locations-section .head-office-flex.office-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 20px;
}

.main-content-contact .locations-section .uk-office-flex .info-card,
.main-content-contact .locations-section .uk-office-flex .infos2,
.locations-section .uk-office-flex.office-row .info-card,
.locations-section .uk-office-flex.office-row .infos2 {
  width: 22%;
  min-width: 0;
  max-width: none;
  flex: 0 1 22%;
  box-sizing: border-box;
}

.main-content-contact .locations-section .uk-office-flex .map-card2,
.main-content-contact .locations-section .uk-office-flex .map-card,
.locations-section .uk-office-flex.office-row .map-card2,
.locations-section .uk-office-flex.office-row .map-card,
.locations-section .map-card.map-wide {
  width: 52%;
  min-width: 0;
  flex: 1 1 52%;
  box-sizing: border-box;
}

.main-content-contact .locations-section .head-office-flex .map-card1,
.main-content-contact .locations-section .head-office-flex .info-card1,
.main-content-contact .locations-section .head-office-flex .info-card2,
.main-content-contact .locations-section .head-office-flex .info-card3,
.main-content-contact .locations-section .head-office-flex .infos1,
.locations-section .head-office-flex.office-row .map-card1,
.locations-section .head-office-flex.office-row .info-card1,
.locations-section .head-office-flex.office-row .info-card2,
.locations-section .head-office-flex.office-row .info-card3,
.locations-section .head-office-flex.office-row .infos1 {
  width: 23%;
  min-width: 0;
  flex: 1 1 23%;
  box-sizing: border-box;
}

.main-content-contact .locations-section .map-card,
.locations-section .office-row .map-card {
  display: flex;
}
.main-content-contact .locations-section .map-card iframe,
.locations-section .office-row .map-card iframe {
  width: 100%;
  height: 100%;
  min-height: 290px;
  flex: 1;
  align-self: stretch;
}

.contact .contact_in .ryt .frm .inp_row:not(:last-child) .inp label {
  font: 15px/22px "Inter-SemiBold", sans-serif;
  color: #000;
}
.contact .contact_in .ryt .frm .inp_row:not(:last-child) .inp input,
.contact .contact_in .ryt .frm .inp_row:not(:last-child) .inp select,
.contact .contact_in .ryt .frm .inp_row:not(:last-child) .inp textarea {
  font: 15px/22px "Inter-Regular", sans-serif;
  color: #000;
}

/* Tablet: keep cards + map on one row (do not drop map to 100%). */
@media screen and (max-width: 1199px) {
  .main-content-contact .locations-section .uk-office-flex .info-card,
  .main-content-contact .locations-section .uk-office-flex .infos2,
  .locations-section .uk-office-flex.office-row .info-card,
  .locations-section .uk-office-flex.office-row .infos2 {
    width: 24%;
    flex: 0 1 24%;
  }
  .main-content-contact .locations-section .uk-office-flex .map-card2,
  .main-content-contact .locations-section .uk-office-flex .map-card,
  .locations-section .uk-office-flex.office-row .map-card2,
  .locations-section .uk-office-flex.office-row .map-card,
  .locations-section .map-card.map-wide {
    width: 48%;
    flex: 1 1 48%;
  }
}

@media screen and (max-width: 767px) {
  .main-content-contact .locations-section .uk-office-flex,
  .main-content-contact .locations-section .head-office-flex,
  .locations-section .uk-office-flex.office-row,
  .locations-section .head-office-flex.office-row {
    flex-wrap: wrap;
  }
  .main-content-contact .locations-section .uk-office-flex .info-card,
  .main-content-contact .locations-section .uk-office-flex .infos2,
  .main-content-contact .locations-section .uk-office-flex .map-card2,
  .main-content-contact .locations-section .uk-office-flex .map-card,
  .main-content-contact .locations-section .head-office-flex .map-card1,
  .main-content-contact .locations-section .head-office-flex .info-card1,
  .main-content-contact .locations-section .head-office-flex .info-card2,
  .main-content-contact .locations-section .head-office-flex .info-card3,
  .main-content-contact .locations-section .head-office-flex .infos1,
  .locations-section .uk-office-flex.office-row .info-card,
  .locations-section .uk-office-flex.office-row .infos2,
  .locations-section .uk-office-flex.office-row .map-card2,
  .locations-section .uk-office-flex.office-row .map-card,
  .locations-section .head-office-flex.office-row .map-card1,
  .locations-section .head-office-flex.office-row .info-card1,
  .locations-section .head-office-flex.office-row .info-card2,
  .locations-section .head-office-flex.office-row .info-card3,
  .locations-section .head-office-flex.office-row .infos1,
  .locations-section .map-card.map-wide {
    width: 100%;
    flex: 1 1 100%;
    max-width: 100%;
  }
  .main-content-contact .locations-section .map-card iframe,
  .locations-section .office-row .map-card iframe {
    min-height: 220px;
    height: 220px;
  }
}

@media screen and (max-width: 991px) {
  .main-content-contact .hero.contact-bg {
    height: auto;
    min-height: 300px;
    max-height: none;
    padding: 80px 0 48px;
  }
  .main-content-about .hero {
    min-height: 300px;
    padding: 80px 0 48px;
  }
  .main-content-services-main .hero {
    min-height: 300px;
    padding: 110px 0 48px;
    overflow: visible;
    display: block;
  }
  /* Expand past 60% hero column so titles don't cramped-wrap beside the bg art */
  .main-content-contact .hero-content,
  .main-content-about .hero-content,
  .main-content-services-main .hero-content,
  .product-mn-cnt .prod-content {
    max-width: 100%;
    padding-right: 12px;
    text-align: left;
  }
  .main-content-about .container-in,
  .main-content-contact .container-in,
  .main-content-services-main .ser-container,
  .product-mn-cnt .prod .container,
  .careers-page .container {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }
  .main-content-contact .hero-title,
  .main-content-about .hero-title,
  .main-content-services-main .hero-title {
    font-size: 36px;
    line-height: 44px;
    text-align: left;
  }
  .main-content-contact .contact .contact_in .ryt strong {
    display: block;
    text-align: left;
    font-size: 32px;
    line-height: 40px;
  }
  .contact .contact_in {
    flex-direction: column-reverse;
    gap: 28px;
  }
  .contact .contact_in .lft,
  .contact .contact_in .ryt {
    width: 100%;
    padding-right: 0;
  }
  .contact .contact_in .lft .cont_img {
    text-align: center;
  }
  .contact .contact_in .lft .cont_img img {
    max-width: 100%;
    height: 360px;
    margin: 0 auto;
  }
  .main-content-contact .locations-section .head-office-flex,
  .main-content-contact .locations-section .uk-office-flex {
    justify-content: center;
  }
  .main-content-contact .locations-section .flag-pill {
    margin-left: auto;
    margin-right: auto;
  }
  .main-content-contact .locations-empty {
    text-align: center;
  }
  .locations-section .info-card,
  .locations-section .info-card1,
  .locations-section .info-card2,
  .locations-section .info-card3 {
    text-align: left;
  }
}

@media screen and (max-width: 575px) {
  .main-content-contact .hero-title,
  .main-content-about .hero-title,
  .main-content-services-main .hero-title {
    font-size: 28px;
    line-height: 34px;
  }
  .contact .contact_in .lft .cont_img img {
    height: 220px;
  }
  .main-content-contact .hero.contact-bg {
    height: auto;
    min-height: 240px;
    max-height: none;
    padding: 64px 0 36px;
  }
  .main-content-about .hero {
    min-height: 240px;
    padding: 64px 0 36px;
  }
  .main-content-services-main .hero {
    min-height: 240px;
    padding: 96px 0 36px;
    overflow: visible;
    display: block;
  }
  .locations-section {
    padding: 40px 0;
  }
  .contact {
    padding: 48px 0 60px;
  }
  .main-content-contact .locations-section .info-card1,
  .main-content-contact .locations-section .info-card2,
  .main-content-contact .locations-section .info-card3,
  .main-content-contact .locations-section .info-card,
  .main-content-contact .locations-section .map-card {
    margin-left: auto;
    margin-right: auto;
  }
}

.main-content-about .ind .ind_prnt .rgt h1 {
  font: 40px/48px "Inter-Bold", sans-serif;
  color: #000;
  text-align: left;
}
.main-content-about .ind .ind_prnt .rgt h1 span {
  display: block;
  color: #ff3366;
}
.main-content-about .ind .ind_prnt .rgt p {
  text-align: left;
  font: 16px/26px "Inter-Regular", sans-serif;
  color: #000;
}
.main-content-about .ind .ind_prnt .lft img {
  width: 100%;
  max-width: 578px;
  height: 552px;
  object-fit: contain;
}
.main-content-about .hm_sli .hm_sli_in h2 {
  text-align: center;
}
.main-content-about .hm_sli .hm_sli_in .cus_sy .cus_slider .swiper-slide .cust_in {
  text-align: left;
}
.main-content-about .hm_sli .hm_sli_in .cus_sy .cus_slider .swiper-slide .cust_in .cust_tp {
  max-height: 130px;
  overflow-y: auto;
}
.main-content-about .hm_sli .hm_sli_in .cus_sy .cus_slider .swiper-slide .cust_in .cust_tp p {
  text-align: left;
}
.main-content-about .stat .stat_prnt .card_grp .crd1s {
  text-align: center;
}

@media screen and (max-width: 991px) {
  /* Stack intro earlier so centered copy isn't cramped beside the illustration */
  .main-content-about .ind .ind_prnt {
    flex-direction: column;
    align-items: center;
  }
  .main-content-about .ind .ind_prnt .lft,
  .main-content-about .ind .ind_prnt .rgt {
    width: 100%;
  }
  .main-content-about .ind .ind_prnt .lft {
    text-align: center;
  }
  .main-content-about .ind .ind_prnt .lft img {
    max-width: 420px;
    height: 400px;
    margin: 0 auto;
  }
  .main-content-about .ind .ind_prnt .rgt {
    padding: 24px 12px 0;
  }
  .main-content-about .ind .ind_prnt .rgt h1,
  .main-content-about .ind .ind_prnt .rgt p {
    text-align: center;
    padding-right: 0;
  }
}

@media screen and (max-width: 575px) {
  .main-content-about .ind .ind_prnt .lft img {
    max-width: 100%;
    height: 260px;
  }
  .main-content-about .ind .ind_prnt .rgt {
    padding: 16px 0 0;
  }
  .main-content-about .ind .ind_prnt .rgt h1 {
    font-size: 28px;
    line-height: 34px;
  }
  .main-content-about .stat {
    padding: 36px 0;
  }
  .main-content-about .ind {
    padding: 12px 0 40px;
  }
  .main-content-contact .contact .contact_in .ryt {
    padding: 18px 16px;
  }
  .main-content-contact .contact .contact_in .ryt strong {
    font-size: 26px;
    line-height: 32px;
  }
}

.product-mn-cnt .prod {
  min-height: 416px;
  display: flex;
  align-items: center;
  padding-top: 120px;
  padding-bottom: 70px;
}
.product-mn-cnt .prod-title {
  font: 55px/63px "Inter-Bold", sans-serif;
  color: #000;
}
.product-mn-cnt .prdts .prdts-dtl .p-lft > span {
  font: 15px/20px "Inter-Bold", sans-serif;
}
.product-mn-cnt .prdts .prdts-dtl .p-lft .p-txt b {
  color: #ff3366;
}
.product-mn-cnt .prdts .prdts-dtl .p-lft .p-txt,
.product-mn-cnt .prdts .prdts-dtl .p-lft .p-wrk {
  max-width: 801px;
}

/* #10 — inline <a> brand color (not CTA buttons) */
.product-mn-cnt .prdts .prdts-dtl .p-lft .p-txt a,
.product-mn-cnt .prdts .prdts-dtl .p-lft .p-wrk a,
.product-mn-cnt .prdts .prdts-dtl .p-ryt > ul a,
.product-mn-cnt .prdts .prdts-dtl .p-ryt .r-prd-blk a {
  color: #ff3366;
  text-decoration: none;
}
.product-mn-cnt .prdts .prdts-dtl .p-lft .p-txt a:hover,
.product-mn-cnt .prdts .prdts-dtl .p-lft .p-wrk a:hover,
.product-mn-cnt .prdts .prdts-dtl .p-ryt > ul a:hover,
.product-mn-cnt .prdts .prdts-dtl .p-ryt .r-prd-blk a:hover {
  color: #0c1a63;
}

/* #11 — move bullet list content left */
.product-mn-cnt .prdts .prdts-dtl .p-ryt > ul li {
  padding-left: 24px;
  background-position: top 5px left 0;
}
.product-mn-cnt .prdts .prdts-dtl.ylw-brdr .p-ryt > ul li,
.product-mn-cnt .prdts .prdts-dtl.fright-brdr .p-ryt > ul li,
.product-mn-cnt .prdts .prdts-dtl.purp-brdr .p-ryt > ul li {
  padding-left: 24px;
}
.product-mn-cnt .prdts .prdts-dtl.ylw-brdr .p-ryt > ul li::before,
.product-mn-cnt .prdts .prdts-dtl.fright-brdr .p-ryt > ul li::before,
.product-mn-cnt .prdts .prdts-dtl.purp-brdr .p-ryt > ul li::before {
  left: 0;
}

/* #12 / #13 / #15 — how-it-works icons visible + sized (override globals 28/22) */
.product-mn-cnt .prdts .prdts-dtl .p-lft .p-wrk ul li {
  overflow: visible;
}
.product-mn-cnt .prdts .prdts-dtl .p-lft .p-wrk ul li img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 70px !important;
  height: 60px !important;
  max-width: none;
  object-fit: contain;
  margin-bottom: 10px;
}

@media screen and (max-width: 991px) {
  .product-mn-cnt .prod {
    min-height: 300px;
    padding: 90px 0 48px;
  }
  .product-mn-cnt .prod-title {
    font-size: 36px;
    line-height: 44px;
    text-align: left;
  }
  .product-mn-cnt .prdts .prdts-dtl .p-lft,
  .product-mn-cnt .prdts .prdts-dtl .p-ryt {
    text-align: left;
  }
  .product-mn-cnt .prdts .prdts-dtl .p-lft .p-wrk ul li img {
    width: 50px !important;
    height: 42px !important;
  }
}

/* #14 — at 901px use stacked structure (same as ≤880/801) */
@media screen and (max-width: 901px) {
  .product-mn-cnt .prdts .prdts-dtl .p-lft,
  .product-mn-cnt .prdts .prdts-dtl .p-ryt {
    width: 100%;
    position: static;
    padding-right: 0;
    align-self: stretch;
  }
  .product-mn-cnt .prdts .prdts-dtl .p-ryt .img-blk img {
    height: auto;
    max-height: 320px;
  }
}

@media screen and (max-width: 575px) {
  .product-mn-cnt .prod {
    min-height: 240px;
    padding: 70px 0 36px;
  }
  .product-mn-cnt .prod-title {
    font-size: 28px;
    line-height: 34px;
  }
  .product-mn-cnt .prdts .prdts-dtl {
    padding: 20px 16px;
  }
  .product-mn-cnt .prdts .prdts-dtl .p-lft .p-wrk ul li img {
    width: 40px !important;
    height: 36px !important;
  }
}

/* Services — restore pack proportions (#16) + underline + 17px features (#19) */
.services-list .service-card {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow: visible;
  isolation: isolate;
  z-index: 0;
  padding-left: 36px;
}
.services-list .service-card .card-icon-wrapper {
  margin-left: 0;
  flex: 0 0 auto;
}
.services-list .service-card .card-title-col .card-title::before {
  bottom: -14px;
}
.services-list .service-card .card-title-col .title-underline {
  width: 47px;
  height: 4px;
  margin-top: 14px;
  background: var(--card-color, #ff2e59);
  border-radius: 2px;
}
.services-list .service-card .card-title-col:has(.title-underline) .card-title::before {
  content: none;
}
.services-list .service-card .card-features .feature-list li {
  align-items: flex-start;
  font: 17px/25px "Inter-Regular", sans-serif !important;
  color: #333;
}
.services-list .service-card .card-features .feature-list li .check-icon {
  width: 20px;
  height: 20px;
  margin: 3px 7px 0 0;
  flex-shrink: 0;
  fill: none !important;
  stroke: #ff3366 !important;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.services-list .service-card .card-title-col {
  width: 23%;
}
.services-list .service-card .card-features {
  width: 73%;
}
/* #18 — card icons match pack stroke style */
.services-list .service-card .card-icon-wrapper .card-icon svg {
  width: 50px;
  height: 50px;
  stroke: #fff !important;
  fill: none !important;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media screen and (max-width: 1199px) {
  .services-list .service-card .card-title-col {
    width: 26%;
  }
  .services-list .service-card .card-features {
    width: 70%;
  }
}

@media screen and (max-width: 991px) {
  .services-list .service-card .card-icon-wrapper .card-icon {
    min-width: 88px;
    height: 88px;
  }
  .services-list .service-card .card-icon-wrapper .card-icon svg {
    width: 36px;
    height: 36px;
  }
  /* #17 — responsive title size */
  .services-list .service-card .card-title-col .card-title {
    font-size: 22px;
    line-height: 30px;
  }
  .services-list .service-card .card-title-col .card-number {
    font-size: 32px;
    line-height: 40px;
  }
}

@media screen and (max-width: 767px) {
  .services-list .service-card {
    flex-wrap: wrap;
    padding-left: 20px;
  }
  .services-list .service-card .card-title-col,
  .services-list .service-card .card-features {
    width: 100%;
  }
  .services-list .service-card .card-title-col {
    text-align: left;
  }
  .services-list .service-card .card-title-col .card-title {
    font-size: 20px;
    line-height: 28px;
  }
  .services-list .service-card .card-features .feature-list li {
    width: 100%;
    padding-right: 0;
    text-align: left;
    font: 17px/25px "Inter-Regular", sans-serif !important;
  }
  .main-content-services-main .hero-title {
    text-align: left;
  }
}

.home-foot .foot-logo img {
  display: block;
  max-width: 180px;
  height: auto;
}
.home-foot .footer-links a:hover,
.home-foot .foot-link a:hover {
  color: #ff3366;
}


/* Asterisk class used by careers/contact forms */
.req,
.req-ast {
  color: #ff3366;
  margin-left: 3px;
  font-weight: 700;
}

.main-content-contact .location-link {
  color: inherit;
  text-decoration: none;
}
.main-content-contact .location-link:hover p {
  color: #ff3366;
}

.resume-upload-box .resume-file-input { z-index: 1; }
.resume-upload-box .resume-clear-btn { z-index: 5; pointer-events: auto; }

/*
 * Product detail landers (/products/buildostore|biteqwik|freightory|bookflow)
 * use pack CSS under /landing — DesignStyles skips those routes.
 * Overrides live in: /landing/css/qa-product-landers.css (loaded by LandingPage).
 */

/* —— FAQ QA (doc #39–#43) —— */

/* #39 — full banner background (preserve faq-hero.jpg) */
.faqPage .hero-section.faq-hero-bg {
  position: relative;
  min-height: 416px;
  display: flex;
  align-items: center;
  padding: 100px 0 70px;
  overflow: hidden;
  background: #edf0fd;
}
.faqPage .hero-section.faq-hero-bg .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("../images/faq-hero.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
}
.faqPage .hero-section.faq-hero-bg .hero-container {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
}
.faqPage .hero-section.faq-hero-bg .hero-content {
  position: relative;
  z-index: 2;
  flex: none;
  min-width: 0;
  max-width: 560px;
  width: auto;
  padding: 0;
}

/* #40 font sizes 16 / 45 / 16 + #41 Inter Regular */
.faqPage .hero-section .hero-container .hero-content .breadcrumb {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  position: relative;
  z-index: 2;
  font: 16px/24px "Inter-Regular", "Inter", sans-serif;
  color: #64748b;
}
.faqPage .hero-section .hero-container .hero-content .breadcrumb a,
.faqPage .hero-section .hero-container .hero-content .breadcrumb .current,
.faqPage .hero-section .hero-container .hero-content .breadcrumb .separator {
  font: inherit;
}
.faqPage .hero-section .hero-container .hero-content h1 {
  font: 45px/55px "Inter-Bold", "Inter", sans-serif;
  color: #0a0c10;
  margin: 0;
}
.faqPage .faq-section .section-header h2 {
  font: 45px/55px "Inter-Bold", "Inter", sans-serif;
  color: #0a0c10;
  margin-bottom: 30px;
  letter-spacing: -0.01em;
}
.faqPage .faq-section .section-header .category-tabs-wrapper .category-tabs .tab-btn {
  font: 16px/24px "Inter-Regular", "Inter", sans-serif;
}
.faqPage .faq-section .faq-grid .faq-column .faq-card .faq-header {
  font-family: "Inter-Regular", "Inter", sans-serif;
}
.faqPage .faq-section .faq-grid .faq-column .faq-card .faq-header .faq-question {
  font-family: "Inter-Regular", "Inter", sans-serif;
}
.faqPage .faq-section .faq-grid .faq-column .faq-card .faq-body p,
.faqPage .support-section .support-box .support-left .support-text p,
.faqPage .support-section .support-box .support-left .support-text .support-desc {
  font: 16px/24px "Inter-Regular", "Inter", sans-serif;
  color: #000;
}
.faqPage .hero-section .hero-container .hero-content h1 .pink-highlight,
.faqPage .faq-section .section-header h2 .pink-highlight {
  font: inherit;
}

/* #42 — remove width:100% that creates extra space on tabs */
.faqPage .faq-section .section-header .category-tabs-wrapper {
  width: auto;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
}

/* #43 — breadcrumbs sit in hero copy block (left of banner art) */
.faqPage .hero-section.faq-hero-bg .hero-content .breadcrumb {
  margin-top: 0;
  margin-bottom: 18px;
}

@media screen and (max-width: 991px) {
  .faqPage .hero-section.faq-hero-bg {
    min-height: 300px;
    padding: 90px 0 48px;
  }
  .faqPage .hero-section.faq-hero-bg .hero-bg {
    background-position: 70% center;
  }
  .faqPage .hero-section.faq-hero-bg .hero-content {
    max-width: 100%;
  }
  .faqPage .hero-section .hero-container .hero-content h1,
  .faqPage .faq-section .section-header h2 {
    font-size: 36px;
    line-height: 44px;
  }
}

@media screen and (max-width: 575px) {
  .faqPage .hero-section.faq-hero-bg {
    min-height: 240px;
    padding: 72px 0 36px;
  }
  .faqPage .hero-section.faq-hero-bg .hero-bg {
    background-position: 78% center;
  }
  .faqPage .hero-section .hero-container .hero-content h1,
  .faqPage .faq-section .section-header h2 {
    font-size: 28px;
    line-height: 34px;
  }
}

/* —— Service detail QA (doc #35–#37; #38 empty) —— */
.serv-det-mn-cnt .serv_det_banr .ser_in .ryt img,
.serv-det-mn-cnt .serv_det_tw .ser_in .lft img,
.serv-det-mn-cnt .serv_det_th .ser_in .ryt img,
.serv-det-mn-cnt .serv_det_fr .ser_in .lft img {
  width: 589px;
  max-width: 100%;
  height: 493px;
  object-fit: cover;
  display: block;
  border-radius: 15px;
}

/* #36 — horizontal padding on all breakpoints */
.serv-det-mn-cnt .serd-container {
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}
.serv-det-mn-cnt .ser_in {
  padding-left: 0;
  padding-right: 0;
}

/* #37 — reduce image to 80% on tablet/phone */
@media screen and (max-width: 991px) {
  .serv-det-mn-cnt .serv_det_banr .ser_in .ryt,
  .serv-det-mn-cnt .serv_det_tw .ser_in .lft,
  .serv-det-mn-cnt .serv_det_th .ser_in .ryt,
  .serv-det-mn-cnt .serv_det_fr .ser_in .lft {
    text-align: center;
  }
  .serv-det-mn-cnt .serv_det_banr .ser_in .ryt img,
  .serv-det-mn-cnt .serv_det_tw .ser_in .lft img,
  .serv-det-mn-cnt .serv_det_th .ser_in .ryt img,
  .serv-det-mn-cnt .serv_det_fr .ser_in .lft img {
    width: 80%;
    max-width: 80%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
}

/* —— Top nav baseline (shared with nav-dropdown.css) —— */
header .head-flx .rgt-head .hd-rgt > li,
header .head-flx .hd-rgt > li {
  display: flex;
  align-items: center;
  line-height: 0;
}
header .head-flx .rgt-head .hd-rgt > li > a,
header .head-flx .hd-rgt > li > a {
  display: inline-flex !important;
  align-items: center;
  line-height: 24px !important;
  vertical-align: middle;
}

/* —— Home remaining (doc #20–#34) —— */

/* #22 — brand link color in body copy */
.home-cnt .contact .frm .frm_chk label p a,
.home-cnt .wte-dec p a,
.home-cnt .soft_prnt p a,
.home-cnt .ban-cont p a,
.home-cnt .soft_prnt a:not(.soft-btn),
.home-cnt .wte-dec a:not(.nxt) {
  color: #ff3366;
}
.home-cnt .contact .frm .frm_chk label p a:hover,
.home-cnt .wte-dec p a:hover,
.home-cnt .soft_prnt p a:hover,
.home-cnt .ban-cont p a:hover,
.home-cnt .soft_prnt a:not(.soft-btn):hover,
.home-cnt .wte-dec a:not(.nxt):hover {
  color: #0c1a63;
}

/* #20 — What We Do fonts 15 / 18 / 15 */
.home-cnt .wte-main .wte .wte-dec > p {
  font: 15px/22px "Inter-Regular", sans-serif;
}
.home-cnt .wte-main .wte .wte-dec ul li span.txt-blk b {
  font: 18px/23px "Inter-Bold", sans-serif;
  padding-bottom: 10px;
}
.home-cnt .wte-main .wte .wte-dec ul li span.txt-blk p {
  font: 15px/20px "Inter-Regular", sans-serif;
}

/* #21 — contact illustration 561×445 (override pages-updates 600px) */
.home-cnt .contact .contact_in .lft .cont_img img {
  width: 561px;
  max-width: 100%;
  height: 445px;
  object-fit: cover;
  display: block;
}

/* #23 — What We Do list icons visible */
.home-cnt .wte-main .wte .wte-dec ul li span.img-blk {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  visibility: visible;
  opacity: 1;
}
.home-cnt .wte-main .wte .wte-dec ul li span.img-blk img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 25px;
  height: 36px;
  object-fit: contain;
}

/*
  Homepage pack width — ALL home bands share a centered container.
  A prior overflow patch set .container { max-width: 100% } at every viewport,
  which full-bled hero / cards / What We Do / contact on 1440–1920.
  Do not restore that. Laptop overflow is handled by style.css padding, not by
  dropping max-width. Services overflow stays scoped below (not homepage).
*/
.home-cnt .container {
  max-width: 1425px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.home-cnt .max-container {
  max-width: 1673px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.home-cnt .wte-main .wte {
  max-width: 100%;
}
@media screen and (max-width: 1199px) {
  .home-cnt .wte-main .wte-spec .spec-bx.lft-1,
  .home-cnt .wte-main .wte-spec .spec-bx.lft-2 {
    margin-left: 0;
  }
}

/* #29 — desktop banner band 710px */
.home-cnt .banner-hm .ban_sli .sld.banr1 .hom_ban_prnt,
.home-cnt .banner-hm .ban_sli .sld.banr2 .hom_ban_prnt {
  min-height: 710px;
  box-sizing: border-box;
}

/* #25 — reduce banner + preview image height on tablet/mobile */
@media screen and (max-width: 991px) {
  .home-cnt .banner-hm .ban_sli .sld.banr1 .hom_ban_prnt,
  .home-cnt .banner-hm .ban_sli .sld.banr2 .hom_ban_prnt {
    min-height: 0;
  }
  .home-cnt .banner-hm .ban_sli .sld.banr1 .hom_ban_prnt {
    padding: 80px 0 56px;
  }
  .home-cnt .banner-hm .ban_sli .sld.banr2 .hom_ban_prnt {
    padding: 80px 0 220px;
  }
  .home-cnt .banner-hm .ban_sli .sld .hom_ban_prnt .ban-cont .ban-btm img {
    height: 280px;
  }
  .home-cnt .wte-main .wte-img-sec img {
    height: 360px;
  }
}

@media screen and (max-width: 767px) {
  .home-cnt .banner-hm .ban_sli .sld.banr1 .hom_ban_prnt {
    padding: 64px 0 40px;
  }
  .home-cnt .banner-hm .ban_sli .sld.banr2 .hom_ban_prnt {
    padding: 64px 0 180px;
  }
  .home-cnt .banner-hm .ban_sli .sld .hom_ban_prnt .ban-cont .ban-btm img {
    height: 200px;
  }
  .home-cnt .wte-main .wte-img-sec img {
    height: 280px;
  }

  /* #27 — mobile font scale 38/22/10/25/13/15/25/13/15 */
  .home-cnt .adcrds #cards .card .card__content .crd_cnt.cd1 strong,
  .home-cnt .adcrds #cards .card .card__content .crd_cnt.cd2 strong,
  .home-cnt .adcrds #cards .card .card__content .crd_cnt.cd3 .ct strong,
  .home-cnt .adcrds #cards .card .card__content .crd_cnt.cd4 strong {
    font-size: 38px;
    line-height: 42px;
  }
  .home-cnt .banner-hm .ban_sli .sld.banr2 .hom_ban_prnt .ban-cont > b {
    font-size: 22px;
    line-height: 32px;
  }
  .home-cnt .banner-hm .ban_sli .sld .hom_ban_prnt .ban-cont .top .vist-btn .btn1,
  .home-cnt .banner-hm .ban_sli .sld .hom_ban_prnt .ban-cont .top .vist-btn .btn2 {
    font-size: 10px;
    line-height: 17px;
  }
  .home-cnt .soft .soft_prnt h1,
  .home-cnt .contact .contact_in .ryt strong,
  .home-cnt .hm_sli .hm_sli_in h4 {
    font-size: 25px;
    line-height: 33px;
  }
  .home-cnt .soft .soft_prnt .soft-btn,
  .home-cnt .wte-main .wte .wte-dec .nxt {
    font-size: 13px;
    line-height: 21px;
  }
  .home-cnt .wte-main .wte .wte-dec > p,
  .home-cnt .wte-main .wte-spec .spec-bx .spec-txt .txt-blk strong,
  .home-cnt .contact .contact_in .ryt .frm .inp_row:not(:last-child) .inp label {
    font-size: 15px;
    line-height: 23px;
  }
  .home-cnt .wte-main .wte-spec .spec-bx .spec-txt .txt-blk p,
  .home-cnt .contact .contact_in .lft .cont_btm .itm .cnt .cl {
    font-size: 13px;
    line-height: 21px;
  }

  /* #33 — contact image height 258px */
  .home-cnt .contact .contact_in .lft .cont_img img {
    width: 100%;
    height: 258px;
  }
}

/* #32 — mobile/tablet: image → content → form */
@media screen and (max-width: 991px) {
  .home-cnt .contact .contact_in {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
  .home-cnt .contact .contact_in .lft,
  .home-cnt .contact .contact_in .ryt {
    width: 100%;
    padding-right: 0;
  }
  .home-cnt .contact .contact_in .lft {
    display: flex;
    flex-direction: column;
  }
  .home-cnt .contact .contact_in .lft .cont_img {
    order: -1;
    margin-bottom: 16px;
  }
  .home-cnt .contact .contact_in .lft h3 {
    order: 0;
  }
  .home-cnt .contact .contact_in .lft > p {
    order: 1;
  }
  .home-cnt .contact .contact_in .lft .cont_btm {
    order: 2;
  }
  .home-cnt .contact .contact_in .ryt {
    order: 3;
  }
}

/* #34 — circle stays under What We Do copy/cards (see home-updates.css) */
.home-cnt .wte-main .wte-img-sec {
  z-index: 0 !important;
}
.home-cnt .contact .contact_in .ryt .frm .sm_btn {
  position: relative;
  z-index: 2;
  pointer-events: auto;
  cursor: pointer;
}
.home-cnt .banner-hm .ban_sli .sld .hom_ban_prnt .ban-cont .top .vist-btn a,
.home-cnt .wte-main .wte .wte-dec .nxt,
.home-cnt .soft .soft_prnt .soft-btn,
.home-cnt .adcrds #cards .card .card__content .crd_cnt .crd_btn a {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

/* C2 — enlarge mobile hit targets on non-product CTAs / nav parents */
@media screen and (max-width: 991px) {
  header .head-flx .rgt-head .hd-rgt > li > a,
  header .head-flx .hd-rgt > li > a,
  header .head-flx .rgt-head .hd-rgt li.has-sub > .nav-parent,
  header .head-flx .hd-rgt li.has-sub > .nav-parent,
  header .head-flx .rgt-head .hd-rgt li.has-sub > .nav-parent .nav-parent-label,
  header .head-flx .hd-rgt li.has-sub > .nav-parent .nav-parent-label {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
    pointer-events: auto !important;
    touch-action: manipulation;
    position: relative;
    z-index: 5;
  }

  header .head-flx .rgt-head .hd-rgt li.has-sub > .nav-parent .nav-caret,
  header .head-flx .hd-rgt li.has-sub > .nav-parent .nav-caret {
    min-width: 44px;
    min-height: 44px;
    pointer-events: auto !important;
    touch-action: manipulation;
    position: relative;
    z-index: 5;
  }
  .services-list .service-card .card-features .feature-list a,
  .services-list .service-card a.card-link,
  .main-content-services-main a,
  .main-content-about a:not(.brand),
  .main-content-contact .sm_btn,
  .careers-page .submit-btn,
  .careers-page .job-toggle,
  .faqPage .faq-header,
  .faqPage .tab-btn {
    min-height: 44px;
    pointer-events: auto;
    position: relative;
    z-index: 2;
  }
  .butns a::after,
  .product-mn-cnt .butns a::after,
  .serv-det-mn-cnt .butns a::after {
    content: none !important;
    pointer-events: none !important;
  }
}

/* --------------------------------------------------------------------------
   Services overview — surgical layout restore (do not re-apply homepage
   overflow-x:hidden from 4d03f32). html/body overflow-x:clip pairs overflow-y
   to clip and shears the hero title; icon negative margins sit half off-card.
   -------------------------------------------------------------------------- */
html:has(.main-content-services-main),
html:has(.main-content-services-main) body {
  overflow-x: hidden;
  overflow-y: auto;
}

.main-content-services-main,
.main-content-services-main .services-list,
.main-content-services-main .ser-container,
.main-content-services-main .hero-content,
.main-content-services-main .hero-title {
  overflow: visible;
}

.main-content-services-main .hero-title {
  display: block;
}

.main-content-services-main .services-list .ser-container {
  padding-left: 24px;
  padding-right: 48px;
  box-sizing: border-box;
}

.main-content-services-main .services-list .service-card .card-icon-wrapper,
.main-content-services-main .services-list .service-card .card-icon-wrapper .card-icon {
  margin-left: 0;
}

@media screen and (max-width: 991px) {
  .main-content-services-main .services-list .ser-container {
    padding-left: 16px;
    padding-right: 20px;
  }
}