/* Page-specific styles for solution-oil-and-gas-exploration-and-production-distributor */
/* Add overrides here — never edit compat.css for page-specific changes */

/* ==========================================================================
   About Us / More Information  -  the label-rail split (.Page3, first two rows)

   The legacy markup cut these rows 5/7, so a one-line heading owned ~500px of
   empty column while the prose ran a ~95ch measure across the rest. The two
   blocks were also spaced by an inline 20px, which read as an accident next to
   the section's own padding. Re-cut as one rail: a fixed-ratio label column,
   a readable measure, and a shared rhythm between the two rows.
   ========================================================================== */

.Page3 > .rail + .rail {
  margin-top: clamp(2rem, 1.4rem + 2vw, 3.25rem);
  padding-top: clamp(2rem, 1.4rem + 2vw, 3.25rem);
  border-top: 1px solid var(--line);
}

@media (min-width: 768px) {
  .Page3 > .rail > .row > .col-md-5 {
    width: 33.3333%;
  }

  .Page3 > .rail > .row > .col-md-7 {
    width: 66.6667%;
  }
}

/* the heading sits on a larger type scale than the prose it labels, so its
   first baseline lands low. Nudge the rail label back up to the prose's. */
.Page3 > .rail .left-text,
.Page3 > .rail .info-box {
  margin-bottom: 0;
}

.Page3 > .rail .left-text::after,
.Page3 > .rail .info-box::after {
  margin-top: .75rem;
}

/* readable measure - the prose column is now ~790px wide */
.Page3 > .rail .right-paragraphs p,
.Page3 > .rail .right-paragraph p,
.Page3 > .rail .head {
  max-width: 62ch;
}

/* name + role read as one unit, not two loose paragraphs */
.Page3 > .rail--meta .right-paragraph p:first-child {
  margin-bottom: .25rem;
}

.Page3 > .rail--meta .head {
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  .Page3 > .rail > .row > .col-md-7 {
    margin-top: 1.25rem;
  }
}