/* Page-specific styles for solution-manufacturing-factory-floor-manager-field-service */
/* Add overrides here — never edit compat.css for page-specific changes */

/* compat.css turns any .Page4 without a .card-family child into a navy
   "metrics band" - correct for the other pages in this legacy family whose
   .Page4 really is a stats row, but this page's .Page4 is a testimonial +
   blog block instead, so it inherited a navy background with every bit of
   text forced white via a high-specificity (0,3,1) !important rule. The
   background alone is easy to win back (compat's version isn't !important),
   but beating the text-color rule needs matching specificity - the repeated
   class below is that, not a typo. Without it "Meet Our Team" / "Latest
   Blog and News" render as invisible white-on-white text. */
.Page4 {
  background: #fff !important;
}

.Page4.Page4.Page4.Page4 :is(p, li, h1, h2, h3, h4, h5, h6, div, span, strong, b, em, td, th, label, dt, dd, blockquote) {
  color: var(--slate) !important;
}

.Page4.Page4.Page4.Page4 .Meet,
.Page4.Page4.Page4.Page4 .Blog {
  color: var(--navy) !important;
}

/* .Work, .Reports, .Process, .Meet, .Blog, .News, .part only appear on this
   page, but compat.css's shared "named section shells" list treats them as
   full section wrappers and gives each one its own top+bottom padding. Here
   they're inline text labels inside one shared .container, so every label
   stacked its padding on top of the next one's - that's the huge blank gaps
   between "Work Orders" / the image / "Reports" / the testimonial / etc. */
.Work,
.Reports,
.Process,
.Meet,
.Blog,
.News,
.part {
  padding-block: 0 !important;
}

/* These were plain unstyled div text with no heading treatment at all -
   match the heading style used everywhere else on the site. */
.Work,
.Reports,
.Process,
.Meet,
.Blog {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem);
  line-height: 1.15;
  margin: 2.5rem 0 .55rem;
}

.Work {
  margin-top: 0;
}

.Work::after,
.Reports::after,
.Process::after,
.Meet::after,
.Blog::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  background: var(--teal);
  border-radius: 2px;
  margin-top: .9rem;
}

/* .News is the subtitle under "Latest Blog and News", not a heading - it
   had no styling at all. */
.News {
  font-size: 1rem;
  margin-bottom: 1.5rem;
}

.part {
  margin-bottom: 1rem;
}

/* The "Latest Blog and News" block never got its image - this empty div
   left a blank void the height of a bare block element's default margins.
   Collapse it instead of showing dead space. */
.image5:empty {
  display: none;
}

/* The three stat icons (globe / smile / briefcase) are raw exported
   graphics with no CSS sizing at all, so their boxes didn't line up. Give
   them a common size and the same brand hue-correction applied to other
   imported icon art across the site. */
.Page3 .icon img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: hue-rotate(-15deg) saturate(.92);
}