/* Shared desktop/tablet system for service-page hero pictograms.
   The complete row follows the hero copy's left axis; every pictogram and its
   subtitle share one left axis inside an equal-width column. Mobile layouts
   remain untouched. */
@media (min-width: 901px) {
  .service-hero-pictograms {
    --service-hero-label-indent: 16px;
    --service-hero-gap: 24px;
    --service-hero-column-width: 160px;
    --service-hero-icon-zone: 120px;
    --service-hero-icon-width: auto;
    --service-hero-icon-height: 104px;
    --service-hero-icon-label-gap: 28px;
    display: grid !important;
    grid-template-columns: repeat(
      var(--service-hero-columns),
      minmax(0, 1fr)
    ) !important;
    column-gap: var(--service-hero-gap) !important;
    row-gap: 0 !important;
    justify-content: start !important;
    align-items: start !important;
    right: auto !important;
    left: var(--service-hero-left, 0px) !important;
    width: min(
      var(--service-hero-row-width),
      calc(100% - var(--service-hero-left, 0px) - 24px)
    ) !important;
    max-width: var(--service-hero-row-width) !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    transform: none !important;
  }

  .service-hero-pictograms--integration {
    --service-hero-columns: 6;
    --service-hero-column-width: 155px;
    --service-hero-row-width: 1050px;
    --service-hero-optical-gap: 16px;
    --service-hero-icon-label-gap: 22px;
    --service-hero-left: 10.8%;
  }

  .service-hero-pictograms--engineering {
    --service-hero-columns: 5;
    --service-hero-column-width: 155px;
    --service-hero-row-width: 871px;
    --service-hero-optical-gap: 32px;
    --service-hero-left: var(--engineering-copy-left);
  }

  .service-hero-pictograms--assistance {
    --service-hero-columns: 3;
    --service-hero-column-width: 170px;
    --service-hero-row-width: 558px;
    --service-hero-optical-gap: 48px;
    --service-hero-left: 0px;
  }

  .service-hero-pictograms__item {
    display: grid !important;
    grid-template-rows: var(--service-hero-icon-zone) auto !important;
    justify-items: stretch !important;
    align-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: var(--service-hero-icon-label-gap) !important;
    background-image: none !important;
  }

  .service-hero-pictograms__visual {
    display: flex !important;
    width: 100% !important;
    height: var(--service-hero-icon-zone) !important;
    max-width: none !important;
    max-height: var(--service-hero-icon-zone) !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 0 0 var(--service-hero-label-indent) !important;
    background-image: none !important;
  }

  .service-hero-pictograms__item::before,
  .service-hero-pictograms__item::after,
  .service-hero-pictograms__visual::before,
  .service-hero-pictograms__visual::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  .service-hero-pictograms__visual > img {
    display: block !important;
    width: var(--service-hero-icon-width) !important;
    height: var(--service-hero-icon-height) !important;
    max-width: 100% !important;
    max-height: var(--service-hero-icon-zone) !important;
    margin: 0 auto 0 0 !important;
    object-fit: contain !important;
    object-position: left bottom !important;
    transform: none !important;
  }

  .service-hero-pictograms__label {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 0 !important;
    padding-left: var(--service-hero-label-indent) !important;
    text-align: left !important;
  }

  /* The label owns the only permitted arrow. */
  html body.wms-site
    .service-hero-pictograms
    .service-hero-pictograms__item
    .service-hero-pictograms__label::before {
    content: "" !important;
    position: absolute !important;
    top: 0.38em !important;
    left: 0 !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    border-top: 0.22em solid transparent !important;
    border-right: 0 !important;
    border-bottom: 0.22em solid transparent !important;
    border-left: 0.32em solid #f7b000 !important;
    background: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  html body.wms-site
    .service-hero-pictograms
    .service-hero-pictograms__item
    .service-hero-pictograms__label::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  /* This high-specificity shared reset neutralizes the historical per-page
     centering rules without introducing any per-item exception. */
  html body.wms-site
    .service-hero-pictograms
    .service-hero-pictograms__item::before,
  html body.wms-site
    .service-hero-pictograms
    .service-hero-pictograms__item::after,
  html body.wms-site
    .service-hero-pictograms
    .service-hero-pictograms__visual::before,
  html body.wms-site
    .service-hero-pictograms
    .service-hero-pictograms__visual::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  html body.wms-site
    .service-hero-pictograms
    .service-hero-pictograms__visual {
    align-items: flex-end !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    padding: 0 0 0 var(--service-hero-label-indent) !important;
  }

  html body.wms-site.wms-site
    .service-hero-pictograms.service-hero-pictograms {
    display: grid !important;
    grid-template-columns: repeat(
      var(--service-hero-columns),
      minmax(0, 1fr)
    ) !important;
    column-gap: var(--service-hero-gap) !important;
    row-gap: 0 !important;
    justify-content: start !important;
    right: auto !important;
    left: var(--service-hero-left, 0px) !important;
    width: min(
      var(--service-hero-row-width),
      calc(100% - var(--service-hero-left, 0px) - 24px)
    ) !important;
    max-width: var(--service-hero-row-width) !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    transform: none !important;
  }

  html body.wms-site.wms-site
    .service-hero-pictograms.service-hero-pictograms
    .service-hero-pictograms__item.service-hero-pictograms__item {
    position: relative !important;
    inset: auto !important;
    justify-self: stretch !important;
    width: 100% !important;
    margin: 0 !important;
    row-gap: var(--service-hero-icon-label-gap) !important;
    gap: var(--service-hero-icon-label-gap) !important;
    transform: none !important;
  }

  html body.wms-site.wms-site
    .service-hero-pictograms.service-hero-pictograms
    .service-hero-pictograms__item.service-hero-pictograms__item
    .service-hero-pictograms__label.service-hero-pictograms__label {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 0 0 var(--service-hero-label-indent) !important;
    text-align: left !important;
  }

  html body.wms-site
    .service-hero-pictograms
    .service-hero-pictograms__visual
    > img {
    width: auto !important;
    height: var(--service-hero-icon-height) !important;
    max-width: calc(100% - var(--service-hero-label-indent)) !important;
    max-height: var(--service-hero-icon-zone) !important;
    margin: 0 auto 0 0 !important;
    object-fit: contain !important;
    object-position: left bottom !important;
    transform: none !important;
  }
}

@media (min-width: 1600px) {
  .service-hero-pictograms--integration {
    --service-hero-left: calc(50% - 560px);
  }
}

/* Fixed desktop cadence shared by every service hero. Each row uses one
   optical column width for all its items and the same 24px inter-column gap;
   no individual item offset is permitted. */
@media (min-width: 1280px) {
  html body.wms-site.wms-site
    .service-hero-pictograms.service-hero-pictograms {
    grid-template-columns: repeat(
      var(--service-hero-columns),
      var(--service-hero-column-width)
    ) !important;
    column-gap: var(--service-hero-gap) !important;
    width: var(--service-hero-row-width) !important;
    max-width: var(--service-hero-row-width) !important;
    justify-content: start !important;
  }
}

/* The visible interval is measured between complete pictogram/label blocks,
   rather than between equal theoretical tracks whose labels have unequal
   widths. The row stays left-anchored and no item receives an offset. */
@media (min-width: 901px) {
  html body.wms-site.wms-site
    .service-hero-pictograms.service-hero-pictograms {
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: max-content !important;
    column-gap: var(--service-hero-optical-gap) !important;
    width: max-content !important;
    max-width: calc(100% - var(--service-hero-left, 0px) - 24px) !important;
    justify-content: start !important;
  }

  html body.wms-site.wms-site
    .service-hero-pictograms.service-hero-pictograms
    .service-hero-pictograms__item.service-hero-pictograms__item {
    width: max-content !important;
    max-width: none !important;
  }

  html body.wms-site.wms-site
    .service-hero-pictograms.service-hero-pictograms
    .service-hero-pictograms__label.service-hero-pictograms__label {
    width: max-content !important;
    max-width: none !important;
  }
}

@media (max-width: 900px) {
  .service-hero-pictograms__desktop-break {
    display: none !important;
  }

  /* Mobile owns one arrow only: the one attached to the subtitle. Historical
     page styles also generated an arrow inside the pictogram wrapper. */
  html body.wms-site.integration-it-page
    .service-hero-pictograms--integration
    .service-hero-pictograms__visual::before,
  html body.wms-site.integration-it-page
    .service-hero-pictograms--integration
    .service-hero-pictograms__visual::after {
    content: none !important;
    display: none !important;
  }
}

/* Tablet landscape bridge (768–900px).
   The legacy generic `hotspot span` rule must not turn the pictogram wrapper
   into the two-column arrow/label grid. Keep the validated row geometry and
   only restore the artwork inside its existing cell. */
@media (min-width: 768px) and (max-width: 900px) {
  html body.wms-site.integration-it-page
    .service-hero-pictograms--integration
    .service-hero-pictograms__visual {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: flex-end !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: none !important;
    color: inherit !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  html body.wms-site.integration-it-page
    .service-hero-pictograms--integration
    .service-hero-pictograms__visual::before,
  html body.wms-site.integration-it-page
    .service-hero-pictograms--integration
    .service-hero-pictograms__visual::after {
    content: none !important;
    display: none !important;
  }

  html body.wms-site.integration-it-page
    .service-hero-pictograms--integration
    .service-hero-pictograms__visual
    > img {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
    object-fit: contain !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Keep the six-item row fully visible on compact desktop/tablet landscape
   without changing the mobile grid or the validated large-desktop cadence. */
@media (min-width: 901px) and (max-width: 1279px) {
  .service-hero-pictograms--integration {
    --service-hero-label-indent: 12px;
    --service-hero-optical-gap: 12px;
    --service-hero-icon-zone: 108px;
    --service-hero-icon-height: 92px;
  }

  html body.wms-site.wms-site
    .service-hero-pictograms--integration.service-hero-pictograms
    .service-hero-pictograms__label.service-hero-pictograms__label {
    font-size: 12px !important;
    line-height: 1.08 !important;
  }
}

/* The Support artwork contains more internal breathing room than the other
   Assistance pictograms. Increase only its rendered canvas so the visible
   drawing matches their optical height; the shared row and label geometry do
   not change. */
@media (min-width: 901px) {
  html body.wms-site.wms-site
    .service-hero-pictograms--assistance
    .service-hero-pictograms__visual
    > img[src*="icon-support"] {
    height: 124px !important;
    max-height: 124px !important;
  }
}

/* Restore the validated Assistance hover motion on the other two service
   heroes. Only the image is animated: grid tracks, cells, labels, margins and
   pictogram dimensions remain untouched. */
@media (min-width: 901px) and (hover: hover) {
  html body.wms-site
    .service-hero-pictograms--integration
    .service-hero-pictograms__visual
    > img,
  html body.wms-site
    .service-hero-pictograms--engineering
    .service-hero-pictograms__visual
    > img {
    transition: transform 180ms ease !important;
  }

  html body.wms-site
    .service-hero-pictograms--integration
    .service-hero-pictograms__item:hover
    .service-hero-pictograms__visual
    > img,
  html body.wms-site
    .service-hero-pictograms--engineering
    .service-hero-pictograms__item:hover
    .service-hero-pictograms__visual
    > img {
    transform: translateY(-4px) !important;
  }
}

/* Integration IT: use the same optical-block cadence as the other service
   heroes. Each complete icon/label block owns its intrinsic width and every
   interval between those blocks is the same fixed value. This intentionally
   brings Testing and Pilotage closer after the narrower Dev block, matching
   the supplied artwork rather than equalising their column start points. */
@media (min-width: 1280px) {
  html body.wms-site.wms-site
    .service-hero-pictograms--integration.service-hero-pictograms {
    grid-auto-flow: column !important;
    grid-auto-columns: max-content !important;
    grid-template-columns: none !important;
    column-gap: 32px !important;
    width: max-content !important;
    max-width: calc(100% - var(--service-hero-left, 0px) - 24px) !important;
  }

  html body.wms-site.wms-site
    .service-hero-pictograms--integration.service-hero-pictograms
    .service-hero-pictograms__item.service-hero-pictograms__item {
    display: inline-grid !important;
    grid-template-columns: max-content !important;
    grid-template-rows: var(--service-hero-icon-zone) auto !important;
    justify-items: start !important;
    justify-self: start !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  html body.wms-site.integration-it-page.wms-site
    .integration-page-visual--hero-html
    .service-hero-pictograms--integration.service-hero-pictograms
    .service-hero-pictograms__item.service-hero-pictograms__item
    .service-hero-pictograms__visual.service-hero-pictograms__visual {
    display: inline-flex !important;
    width: var(--service-hero-visible-box-width) !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: start !important;
    overflow: visible !important;
  }

  /* The uniform PNG exports share a 280×220 transparent canvas, while their
     visible drawings have different opaque widths. Size the layout wrapper
     from that opaque width so the fixed grid gap is also the visible gap.
     The image itself keeps its validated height and position. */
  .service-hero-pictograms--integration
    .integration-page-hotspot--wms {
    --service-hero-visible-box-width: 106px;
  }

  .service-hero-pictograms--integration
    .integration-page-hotspot--erp {
    --service-hero-visible-box-width: 124px;
  }

  .service-hero-pictograms--integration
    .integration-page-hotspot--interfaces {
    --service-hero-visible-box-width: 110px;
  }

  .service-hero-pictograms--integration
    .integration-page-hotspot--indicators {
    --service-hero-visible-box-width: 103px;
  }

  .service-hero-pictograms--integration
    .integration-page-hotspot--testing {
    --service-hero-visible-box-width: 92px;
  }

  .service-hero-pictograms--integration
    .integration-page-hotspot--pilotage {
    --service-hero-visible-box-width: 111px;
  }

  html body.wms-site.integration-it-page.wms-site
    .integration-page-visual--hero-html
    .service-hero-pictograms--integration.service-hero-pictograms
    .service-hero-pictograms__visual.service-hero-pictograms__visual
    > img {
    flex: 0 0 auto !important;
    max-width: none !important;
  }

  html body.wms-site.integration-it-page.wms-site
    .integration-page-visual--hero-html
    .service-hero-pictograms--integration.service-hero-pictograms
    .service-hero-pictograms__item.service-hero-pictograms__item
    .service-hero-pictograms__label.service-hero-pictograms__label {
    display: inline-block !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: start !important;
  }
}

/* Smartphone service heroes: one final shared cell model. Keeping this rule at
   the end of the cascade prevents older page-specific mobile alignment rules
   from re-centering an incomplete last row. */
@media (max-width: 620px) {
  html body.wms-site.wms-site
    .service-hero-pictograms.service-hero-pictograms {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: start !important;
    justify-items: stretch !important;
    align-items: start !important;
  }

  html body.wms-site.wms-site
    .service-hero-pictograms.service-hero-pictograms
    > .service-hero-pictograms__item.service-hero-pictograms__item {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-column: auto !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 72px auto !important;
    grid-auto-flow: row !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
    align-items: start !important;
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 113px !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 9px !important;
    text-align: left !important;
  }

  html body.wms-site.wms-site
    .service-hero-pictograms.service-hero-pictograms
    .service-hero-pictograms__visual.service-hero-pictograms__visual {
    display: flex !important;
    width: 100% !important;
    height: 72px !important;
    max-width: none !important;
    max-height: 72px !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 0 0 12px !important;
  }

  html body.wms-site.wms-site
    .service-hero-pictograms.service-hero-pictograms
    .service-hero-pictograms__visual.service-hero-pictograms__visual
    > img {
    display: block !important;
    width: auto !important;
    height: 62px !important;
    max-width: calc(100% - 12px) !important;
    max-height: 62px !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: left bottom !important;
  }

  html body.wms-site.wms-site
    .service-hero-pictograms.service-hero-pictograms
    .service-hero-pictograms__label.service-hero-pictograms__label {
    position: relative !important;
    display: block !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 0 0 12px !important;
    text-align: left !important;
  }

  /* Integration mobile: the desktop triangle rule is intentionally outside
     this breakpoint. Recreate that same marker here so legacy mobile rules
     cannot turn it into a vertical yellow bar. */
  html body.wms-site.integration-it-page
    .service-hero-pictograms--integration
    .service-hero-pictograms__label::before {
    content: "" !important;
    position: absolute !important;
    top: 0.54em !important;
    left: 0 !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    border-top: 5px solid transparent !important;
    border-right: 0 !important;
    border-bottom: 5px solid transparent !important;
    border-left: 7px solid #f7b000 !important;
    border-radius: 0 !important;
    background: transparent !important;
    clip-path: none !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* The service hero switches to its compact grid before 620px on some legacy
   page rules. Keep the Integration marker consistent throughout that whole
   responsive range without changing any grid geometry. */
@media (max-width: 900px) {
  html body.wms-site.integration-it-page.wms-site
    .service-hero-pictograms--integration.service-hero-pictograms
    .service-hero-pictograms__label.service-hero-pictograms__label {
    display: flex !important;
    align-items: flex-start !important;
    column-gap: 0 !important;
    gap: 0 !important;
    padding-left: 0 !important;
  }

  html body.wms-site.integration-it-page
    .service-hero-pictograms--integration
    .service-hero-pictograms__label::before {
    content: "" !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    flex: 0 0 auto !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 5px 0 0 !important;
    border-top: 5px solid transparent !important;
    border-right: 0 !important;
    border-bottom: 5px solid transparent !important;
    border-left: 7px solid #f7b000 !important;
    border-radius: 0 !important;
    background: transparent !important;
    clip-path: none !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Engineering reference: the Audit artwork is optically narrower than its
   two-line label. Keep the validated artwork and label geometry, but use the
   artwork's optical block width for the first grid track. This shortens only
   the Audit to Expertise interval; every following interval remains intact. */
@media (min-width: 1280px) {
  html body.wms-site.wms-site
    .service-hero-pictograms--engineering.service-hero-pictograms
    .service-hero-pictograms__item.service-hero-pictograms__item--engineering-audit {
    width: 116px !important;
    max-width: 116px !important;
  }

  html body.wms-site.wms-site
    .service-hero-pictograms--engineering.service-hero-pictograms
    .service-hero-pictograms__item--engineering-audit
    .service-hero-pictograms__visual,
  html body.wms-site.wms-site
    .service-hero-pictograms--engineering.service-hero-pictograms
    .service-hero-pictograms__item--engineering-audit
    .service-hero-pictograms__label {
    width: 146px !important;
    max-width: none !important;
  }
}