/* Service pillar hero (opx-service-hero) — breadcrumb matches production. */

/* Blurry circle mesh (Frame-1) — all /services/ child pages (parent Our Services 22220). */
body.parent-pageid-22220 #sec-hero.opx-service-hero,
body.parent-pageid-22220 section#sec-hero.opx-service-hero,
body.parent-pageid-22220
  #sec-hero.opx-hero:not(.opx-hero--edi-landing):not(.opx-faq-hero):not(
    .opx-products-hero
  ),
body.parent-pageid-22220
  main
  .wp-block-post-content
  > .wp-block-group.opx-hero:not(.opx-hero--edi-landing):not(.opx-faq-hero):not(
    .opx-products-hero
  ),
body.parent-pageid-22220 #sec-scale-development-team.opx-hero,
body.parent-pageid-22220
  main
  .wp-block-post-content
  > :first-child:not(.opx-hero--edi-landing),
body.parent-pageid-22220 #sec-purpose-built-edi,
body.parent-pageid-22220 #sec-secure-accurate-insight,
body.parent-pageid-22220 #sec-api-integration-services,
body.parent-pageid-22220 #sec-erp-crm-integration.opx-hero {
  box-sizing: border-box;
  background-color: transparent;
  background-image: url("https://orthoplexsostg.wpenginepowered.com/wp-content/uploads/2024/12/Frame-1.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: min(100%, 1400px) auto;
}

body.parent-pageid-22220 .wp-block-group.opx-service-hero,
body.parent-pageid-22220 section.opx-service-hero {
  padding-top: 5% !important;
  padding-block-start: 5% !important;
}

html
  body
  .wp-block-group.opx-service-hero
  p.opx-service-hero__breadcrumb.has-ink-color
  a[href*="/services"],
html
  body
  .wp-block-group.opx-service-hero
  p[class*="is-style-overline-services"]
  a[href*="/services"] {
  color: var(--wp--preset--color--accent) !important;
  text-decoration: none !important;
  text-decoration-line: none !important;
}

html
  body
  .wp-block-group.opx-service-hero
  p.opx-service-hero__breadcrumb.has-ink-color
  a[href*="/services"]:hover,
html
  body
  .wp-block-group.opx-service-hero
  p.opx-service-hero__breadcrumb.has-ink-color
  a[href*="/services"]:focus-visible,
html
  body
  .wp-block-group.opx-service-hero
  p[class*="is-style-overline-services"]
  a[href*="/services"]:hover,
html
  body
  .wp-block-group.opx-service-hero
  p[class*="is-style-overline-services"]
  a[href*="/services"]:focus-visible {
  text-decoration: none !important;
  text-decoration-line: none !important;
}

/* Breadcrumb line box: production is 29px at every width on every service page (the --reflow heroes already set it). */
body .opx-service-hero .opx-service-hero__breadcrumb {
  line-height: 29px;
}

/* WordPress Web Development + Business Services — desktop hero (680px media, spaced columns; headline ~3 lines). */
@media (min-width: 1025px) {
  html
    body:is(
      .page-id-21967,
      .postid-21967,
      .page-id-17611,
      .postid-17611,
      .page-id-22251,
      .postid-22251,
      .page-id-17631,
      .postid-17631,
      .page-id-22263,
      .postid-22263,
      .page-id-17632,
      .postid-17632,
      .page-id-22388,
      .postid-22388,
      .page-id-17633,
      .postid-17633,
      .page-id-22409,
      .postid-22409,
      .page-id-17732,
      .postid-17732
    )
    #sec-hero.opx-service-hero
    .opx-service-hero__cols
    > .opx-service-hero__col-content {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
  }

  html
    body:is(
      .page-id-21967,
      .postid-21967,
      .page-id-17611,
      .postid-17611,
      .page-id-22251,
      .postid-22251,
      .page-id-17631,
      .postid-17631,
      .page-id-22263,
      .postid-22263,
      .page-id-17632,
      .postid-17632,
      .page-id-22388,
      .postid-22388,
      .page-id-17633,
      .postid-17633,
      .page-id-22409,
      .postid-22409,
      .page-id-17732,
      .postid-17732
    )
    #sec-hero.opx-service-hero
    .opx-service-hero__cols {
    justify-content: space-between !important;
    gap: var(--wp--preset--spacing--gap-l) !important;
  }

  html
    body:is(
      .page-id-21967,
      .postid-21967,
      .page-id-17611,
      .postid-17611,
      .page-id-22251,
      .postid-22251,
      .page-id-17631,
      .postid-17631,
      .page-id-22263,
      .postid-22263,
      .page-id-17632,
      .postid-17632,
      .page-id-22388,
      .postid-22388,
      .page-id-17633,
      .postid-17633,
      .page-id-22409,
      .postid-22409,
      .page-id-17732,
      .postid-17732
    )
    #sec-hero.opx-service-hero
    .opx-service-hero__cols
    > .opx-service-hero__col-media {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 680px !important;
    margin-inline-start: auto !important;
    padding-inline-end: 0 !important;
  }

  html
    body:is(
      .page-id-21967,
      .postid-21967,
      .page-id-17611,
      .postid-17611,
      .page-id-22251,
      .postid-22251,
      .page-id-17631,
      .postid-17631,
      .page-id-22263,
      .postid-22263,
      .page-id-17632,
      .postid-17632,
      .page-id-22388,
      .postid-22388,
      .page-id-17633,
      .postid-17633,
      .page-id-22409,
      .postid-22409,
      .page-id-17732,
      .postid-17732
    )
    #sec-hero.opx-service-hero
    .opx-service-hero__title {
    max-width: none !important;
  }

  html
    body:is(
      .page-id-21967,
      .postid-21967,
      .page-id-17611,
      .postid-17611,
      .page-id-22251,
      .postid-22251,
      .page-id-17631,
      .postid-17631,
      .page-id-22263,
      .postid-22263,
      .page-id-17632,
      .postid-17632,
      .page-id-22388,
      .postid-22388,
      .page-id-17633,
      .postid-17633,
      .page-id-22409,
      .postid-22409,
      .page-id-17732,
      .postid-17732
    )
    #sec-hero.opx-service-hero
    .opx-service-hero__media {
    width: auto;
    max-width: 680px;
    margin: 0 0 0 auto;
  }

  html
    body:is(
      .page-id-21967,
      .postid-21967,
      .page-id-17611,
      .postid-17611,
      .page-id-22251,
      .postid-22251,
      .page-id-17631,
      .postid-17631,
      .page-id-22263,
      .postid-22263,
      .page-id-17632,
      .postid-17632,
      .page-id-22388,
      .postid-22388,
      .page-id-17633,
      .postid-17633,
      .page-id-22409,
      .postid-22409,
      .page-id-17732,
      .postid-17732
    )
    #sec-hero.opx-service-hero
    .opx-service-hero__media
    img {
    display: block;
    width: 680px;
    max-width: 100%;
    height: auto;
    margin-inline: 0 0;
    margin-inline-start: auto;
    border-radius: 16px;
  }

  /* Business Services (--reflow heroes): override full-width media so layout matches WordPress Web Development. */
  html
    body:is(
      .page-id-22251,
      .postid-22251,
      .page-id-17631,
      .postid-17631,
      .page-id-22263,
      .postid-22263,
      .page-id-17632,
      .postid-17632,
      .page-id-22388,
      .postid-22388,
      .page-id-17633,
      .postid-17633,
      .page-id-22409,
      .postid-22409,
      .page-id-17732,
      .postid-17732
    )
    #sec-hero.opx-service-hero.opx-service-hero--reflow
    .wp-block-columns.opx-service-hero__cols {
    gap: var(--wp--preset--spacing--gap-l) !important;
  }

  html
    body:is(
      .page-id-22251,
      .postid-22251,
      .page-id-17631,
      .postid-17631,
      .page-id-22263,
      .postid-22263,
      .page-id-17632,
      .postid-17632,
      .page-id-22388,
      .postid-22388,
      .page-id-17633,
      .postid-17633,
      .page-id-22409,
      .postid-22409,
      .page-id-17732,
      .postid-17732
    )
    #sec-hero.opx-service-hero.opx-service-hero--reflow
    .opx-service-hero__media,
  html
    body:is(
      .page-id-22251,
      .postid-22251,
      .page-id-17631,
      .postid-17631,
      .page-id-22263,
      .postid-22263,
      .page-id-17632,
      .postid-17632,
      .page-id-22388,
      .postid-22388,
      .page-id-17633,
      .postid-17633,
      .page-id-22409,
      .postid-22409,
      .page-id-17732,
      .postid-17732
    )
    #sec-hero.opx-service-hero.opx-service-hero--reflow
    .opx-service-hero__media
    img {
    width: auto;
    max-width: 680px;
    margin-inline-start: auto;
    margin-inline-end: 0;
  }

  html
    body:is(
      .page-id-22251,
      .postid-22251,
      .page-id-17631,
      .postid-17631,
      .page-id-22263,
      .postid-22263,
      .page-id-17632,
      .postid-17632,
      .page-id-22388,
      .postid-22388,
      .page-id-17633,
      .postid-17633,
      .page-id-22409,
      .postid-22409,
      .page-id-17732,
      .postid-17732
    )
    #sec-hero.opx-service-hero.opx-service-hero--reflow
    .opx-service-hero__media
    img {
    display: block;
    width: 680px;
    max-width: 100%;
    height: auto;
    border-radius: 16px;
  }

  /* AI Solutions — copy column width so the hero title breaks as: Empower Your / Business with AI / Solutions. */
  html
    body:is(.page-id-22263, .postid-22263, .page-id-17632, .postid-17632)
    #sec-hero.opx-service-hero
    .opx-service-hero__cols
    > .opx-service-hero__col-content {
    flex: 0 1 500px !important;
    max-width: 500px !important;
  }

  html
    body:is(.page-id-22263, .postid-22263, .page-id-17632, .postid-17632)
    #sec-hero.opx-service-hero
    .opx-service-hero__title {
    max-width: 500px !important;
  }

  /* Approach rows — intro paragraph fits two lines (WordPress Web Development only). */
  body.page-id-21967 .opx-approach-row > .opx-approach-row__content,
  body.postid-21967 .opx-approach-row > .opx-approach-row__content,
  body.page-id-21967
    .opx-approach-row
    > .wp-block-column.opx-approach-row__content,
  body.postid-21967
    .opx-approach-row
    > .wp-block-column.opx-approach-row__content {
    flex-basis: 54% !important;
    max-width: 54% !important;
    width: 54% !important;
  }

  body.page-id-21967 .opx-approach-row > .opx-approach-row__media,
  body.postid-21967 .opx-approach-row > .opx-approach-row__media,
  body.page-id-21967
    .opx-approach-row
    > .wp-block-column.opx-approach-row__media,
  body.postid-21967
    .opx-approach-row
    > .wp-block-column.opx-approach-row__media {
    flex-basis: 46% !important;
    max-width: 46% !important;
    width: 46% !important;
  }

  body.page-id-21967 .opx-approach .opx-approach-row__intro,
  body.postid-21967 .opx-approach .opx-approach-row__intro {
    max-width: 620px !important;
  }
}

/* UX/UI, File Integrity Monitoring, Malware Detection, CI/CD: desktop hero title (55px/66px) on 3 lines — wider text column. */
@media (min-width: 1025px) {
	html body:is(.page-id-22036, .page-id-22113, .page-id-22136, .page-id-22177) #sec-hero .opx-service-hero__col-content {
		flex: 0 0 54%;
	}

	html body:is(.page-id-22036, .page-id-22113, .page-id-22136, .page-id-22177) #sec-hero .opx-service-hero__col-media {
		flex: 0 0 46%;
	}

	html body:is(.page-id-22036, .page-id-22113, .page-id-22136, .page-id-22177) #sec-hero .opx-service-hero__title {
		max-width: none;
	}
}

/* Same pages, wide desktop: 680x560 hero image; it may run into the right page margin so the title keeps 665px. */
@media (min-width: 1440px) {
	html body:is(.page-id-22036, .page-id-22113, .page-id-22136, .page-id-22177) #sec-hero .opx-service-hero__cols {
		column-gap: 0;
	}

	html body:is(.page-id-22036, .page-id-22113, .page-id-22136, .page-id-22177) #sec-hero .opx-service-hero__col-content {
		flex: 1 1 0;
		min-width: 0;
	}

	html body:is(.page-id-22036, .page-id-22113, .page-id-22136, .page-id-22177) #sec-hero .opx-service-hero__col-media {
		flex: 0 0 680px;
		margin-right: max(min(0px, calc(100% - 1345px)), calc(12px - 4.95vw));
	}

	html body:is(.page-id-22036, .page-id-22113, .page-id-22136, .page-id-22177) #sec-hero .opx-service-hero__col-media img {
		width: 680px;
		max-width: none;
		height: 560px;
		object-fit: cover;
	}

	/* FIM (2560x1782) and CI/CD (2560x1859) images are wider: keep their full frame, 680px wide at natural height. */
	html body:is(.page-id-22113, .page-id-22177) #sec-hero .opx-service-hero__col-media img {
		height: auto;
	}
}

/* S-13: Malware uses equal padded columns and the illustration's natural ratio. */
@media (min-width: 1025px) {
  html body[class~="page-id-22136"] #sec-hero.opx-service-hero .opx-service-hero__cols {
    gap: 0;
    align-items: center;
  }

  html body[class~="page-id-22136"] #sec-hero.opx-service-hero .opx-service-hero__cols > .wp-block-column {
    flex: 0 1 50%;
    min-width: 0;
    margin: 0;
    padding: var(--wp--preset--spacing--gap-s);
  }

  html body[class~="page-id-22136"] #sec-hero.opx-service-hero .opx-service-hero__media,
  html body[class~="page-id-22136"] #sec-hero.opx-service-hero .opx-service-hero__media img {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    object-fit: contain;
  }
}

/* AI and WordPress stack throughout production's tablet range, before core Columns does. */
@media (min-width: 768px) and (max-width: 1024px) {
  html body:is([class~="page-id-22263"], [class~="page-id-21967"]) #sec-hero.opx-service-hero .opx-service-hero__cols {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  html body:is([class~="page-id-22263"], [class~="page-id-21967"]) #sec-hero.opx-service-hero .opx-service-hero__cols > .wp-block-column {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    padding: var(--wp--preset--spacing--gap-s);
  }

  html body:is([class~="page-id-22263"], [class~="page-id-21967"]) #sec-hero.opx-service-hero .opx-service-hero__media,
  html body:is([class~="page-id-22263"], [class~="page-id-21967"]) #sec-hero.opx-service-hero .opx-service-hero__media img {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
  }

  html body[class~="page-id-22263"] #sec-hero.opx-service-hero .opx-service-hero__title {
    width: 90%;
    max-width: none;
  }
}

/* Saved desktop breaks become spaces when the AI copy column spans the tablet row. */
@media (min-width: 768px) and (max-width: 1024px) {
  body[class~="page-id-22263"] #sec-hero.opx-service-hero .opx-service-hero__title[data-opx-natural-breaks] br {
    display: none;
  }

}

/* Malware CTA: production includes a 10px widget inset after the 20px content gap. */
body[class~="page-id-22136"] #sec-hero.opx-service-hero .opx-service-hero__list { gap: var(--wp--preset--spacing--gap-s); }
body[class~="page-id-22136"] #sec-hero.opx-service-hero .wp-block-buttons { margin-block-start: var(--wp--preset--spacing--gap-s); }
@media (max-width: 1024px) {
  body[class~="page-id-22136"] #sec-hero.opx-service-hero .wp-block-buttons { margin-block-end: var(--wp--preset--spacing--gap-20); }
}
@media (max-width: 767px) {
  body[class~="page-id-22136"] #sec-hero.opx-service-hero .wp-block-buttons {
    margin-block-start: calc(var(--wp--preset--spacing--gap-m) / 2);
    margin-block-end: var(--wp--preset--spacing--gap-s);
  }
}

/* Mobile App Development: production's hero image is 90% of the media column (565px at 1440), centred, and the hero keeps the
   same space below as above on desktop. On tablet the figure is 90% less 18px and the image fills it. Phones already match. */
@media (min-width: 1025px) {
	html body.page-id-22023 #sec-hero .opx-service-hero__col-media .opx-service-hero__media {
		width: 90%;
		margin-inline: auto;
	}

	html body.page-id-22023 #sec-hero.opx-service-hero {
		padding-bottom: 5%;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	html body.page-id-22023 #sec-hero .opx-service-hero__col-media .opx-service-hero__media {
		width: calc(90% - 18px);
		margin-inline: auto;
	}

	html body.page-id-22023 #sec-hero .opx-service-hero__col-media .opx-service-hero__media img {
		width: 100%;
	}
}