/* ---------------------------------------------------------------------------
   Legacy content pages
   ---------------------------------------------------------------------------
   The technology and industry pages still use the original .inner .services-page
   markup. They are readable but were set against a different type system than
   the rest of the site: 1.5 line height, and paragraphs that run the full 1140px
   container at around 120 characters a line, which is roughly double a
   comfortable measure.

   This brings their reading rhythm in line with the rebuilt pages without
   touching the markup or the content itself.
   --------------------------------------------------------------------------- */

.inner.services-page p,
.inner.services-page li {
    max-width: 58ch;
    font-size: 15.5px;
    line-height: 1.72;
    color: #444;
}

/* Full-width rows get a slightly longer measure, still inside the comfortable
   range. Nested wrappers inherit the base cap rather than escaping it. */
.inner.services-page .col-md-12 p,
.inner.services-page .col-xs-12 p,
.inner.services-page > p {
    max-width: 65ch;
}

/* Vertical rhythm: headings need more space above than below, so a section
   reads as belonging to the heading that opens it. */
.inner.services-page h2,
.inner.services-page h3,
.inner.services-page h4 {
    margin-top: 34px;
    margin-bottom: 14px;
}

.inner.services-page h2:first-child,
.inner.services-page h3:first-child,
.inner.services-page h4:first-child {
    margin-top: 0;
}

.inner.services-page p + p { margin-top: 0; }
.inner.services-page p { margin-bottom: 16px; }

/* Lists were inheriting the paragraph gap on every item. */
.inner.services-page ul,
.inner.services-page ol { margin-bottom: 20px; }
.inner.services-page li { margin-bottom: 8px; }

/* The intro row pairs copy with a logo, where the column is already narrow, so
   the cap simply never bites there. */
.inner.services-page .col-md-6 p { max-width: 65ch; }

/* Trim the band above and below the legacy content block so it sits on the
   same rhythm as the FAQ and related-reading blocks appended beneath it. */
.inner.services-page { padding-bottom: 34px; }

@media (max-width: 767px) {
    .inner.services-page p,
    .inner.services-page li { max-width: none; font-size: 15px; }
    .inner.services-page h2,
    .inner.services-page h3,
    .inner.services-page h4 { margin-top: 26px; }
}

/* ---------------------------------------------------------------------------
   Legacy pages outside the .services-page wrapper
   ---------------------------------------------------------------------------
   The clients, careers, about and industries pages were built with their own
   markup and never picked up the reading rhythm applied elsewhere. Their hero
   copy runs the full 1140px container at around 90 characters a line.
   --------------------------------------------------------------------------- */

.banner-header p,
.banner-header .inner-text p {
    max-width: 62ch;
    line-height: 1.68;
}

.inner.about p,
.about-globosoft p,
.client-lists p,
.indus p,
.technology p {
    max-width: 65ch;
    font-size: 15.5px;
    line-height: 1.72;
}

.inner.about h2,
.inner.about h3,
.about-globosoft h2,
.about-globosoft h3,
.indus h2,
.indus h3 {
    margin-top: 32px;
    margin-bottom: 14px;
}

.inner.about h2:first-child,
.inner.about h3:first-child { margin-top: 0; }

/* ---------------------------------------------------------------------------
   Industry tiles
   ---------------------------------------------------------------------------
   Eleven tiles in a three-column Bootstrap grid left a two-tile row at the end.
   Flowing them lets the final row stretch to the full width instead.
   --------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .indus .row:has(.industry-tile2) {
        display: flex;
        flex-wrap: wrap;
    }

    .indus .industry-tile2 {
        display: flex;
        flex: 1 1 300px;
        flex-direction: column;
        float: none;
        width: auto;
        max-width: 33.333%;
        padding-bottom: 34px;
    }

    .indus .industry-tile2 p { max-width: none; }
}

@media (max-width: 767px) {
    .banner-header p,
    .inner.about p,
    .about-globosoft p,
    .client-lists p,
    .indus p { max-width: none; }
}

/* Full-width Bootstrap columns on the careers and product-style pages, and the
   section intros on the CRM layout, were still running past a comfortable
   measure. Scoped away from the rebuilt templates, which set their own. */
body:not(.market-service-page):not(.shopify-cluster-page) section .col-md-12 > p,
body:not(.market-service-page):not(.shopify-cluster-page) .section_title p,
body:not(.market-service-page):not(.shopify-cluster-page) .row_am .container > p {
    max-width: 68ch;
    line-height: 1.72;
}

/* Centre-aligned intros keep their measure but stay centred. */
body:not(.market-service-page) .section_title[class*="text-center"] p,
body:not(.market-service-page) .text-center .section_title p,
body:not(.market-service-page) .section_title.text-center p {
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 767px) {
    body:not(.market-service-page) section .col-md-12 > p,
    body:not(.market-service-page) .section_title p { max-width: none; }
}