/*
 * OS About page (/about/, client brief client-html/About_Us_Final_Content.pdf). Most sections
 * reuse Industries/Services/Partners/Platforms components as is (automate cards, results strip,
 * case study testimonial, news/award cards, OS Post CTA, common OS FAQs) with no extra CSS. These
 * rules cover only the pieces that needed a new design or a small variant: the 4-up card grid
 * (What Makes Us Different, Values), the Leadership quote's head-to-quote gap, the Reliability OS
 * and closing Connect CTAs' copy spacing, and the new Matri Chaya teaser.
 */

/* ---------- Hero (os/about-hero) ---------- */
/* The L1 hero's grid rule (os-industry-list.css) targets `.os-blog-hero > .os-industry-list-hero__body`
   — a *direct* child of the section. The OS Slider wrapper this hero adds around its one slide
   (`os-about-hero__slides`, so a second banner can be added later) puts another div between them,
   so that rule never matched: the image fell into normal flow below the text and the Contact Us
   button overlapped it instead of the two sitting side by side. Re-declared at the slides
   wrapper's child instead (same values, including the two breakpoints). */
.os-about-hero__slides > .os-industry-list-hero__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 543px);
	gap: 40px;
	align-items: center;
	margin-top: 24px;
}
@media (max-width: 1100px) {
	.os-about-hero__slides > .os-industry-list-hero__body { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 768px) {
	.os-about-hero__slides > .os-industry-list-hero__body { gap: 24px; }
}

/* ---------- Our Foundation (os/about-foundation) ---------- */
/* The Industries client base card (os-industry-list.css, .os-industry-stats) as is (user,
   2026-10-15: "Serving Industry Leaders Worldwide … ignore the numbers and just use after heading
   the cards"; replaced the Home Client Success band tried first). With no metrics row, the region
   cards' divider and the gap that separated them from it would sit straight under the head, so
   they're dropped: the head's own 40px (24 on phones) is the gap. */
.os-about-foundation .os-industry-stats > .os-industry-stats__regions { margin-top: 0; padding-top: 0; border-top: 0; }
/* Centred cards, as Industries (os-industry-list.css has the same line since 2026-10-08, but UAT's
   copy doesn't: kept here so About doesn't depend on it). */
.os-about-foundation .os-industry-stats__regions > .os-industry-region { text-align: center; }

/* ---------- Worldwide Presence (os/about-presence) ---------- */
/* The DevRev page's "Where we work" panel, Regions row (os-partners.css, .os-partners-where; user,
   2026-10-15), as is, but 3 tiles across on desktop for the 3 regions (the component's 4 left an
   empty slot and squeezed Asia Pacific's eight cities). Above 1100px only, so the component's
   own 2 (≤1100px) and 1 (≤640px) still apply. */
@media (min-width: 1101px) {
	.os-about-presence .os-partners-where__item > .os-partners-where__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* No "Regions" label (user, 2026-10-15), so the tiles' 16px gap under it would only pad the top. */
.os-about-presence .os-partners-where__item > .os-partners-where__tiles:first-child { margin-top: 0; }

/* ---------- 4-up card grid (os/about-approach, os/about-values) ---------- */
/* The Automate/Focus card grid is 3-up by default (2 below 1100px, 1 below 640px, unchanged); these
   two sections have 4 cards, so only the desktop column count needs overriding — 2 below 1100px
   already gives the 2x2 layout these need. Scoped to above 1100px (as the CSR metrics 4-up
   override, os-csr.css): without the media query this rule's higher specificity (3 classes) beat
   the base ≤1100px/≤640px rules (2 classes) at *every* width, including phones — forcing 4 cramped
   columns into a 360px screen instead of falling back to 2 and then 1 (card text unreadable). */
@media (min-width: 1101px) {
	.os-about-approach.os-service-detail-automate > .os-service-detail-automate__grid,
	.os-about-values.os-service-detail-automate > .os-service-detail-automate__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ---------- Leadership (os/about-leadership) ---------- */
/* The CSR Founder's message layout (os-csr.css, .os-csr-founder; user, 2026-10-15) on the full-width
   aurora gradient (the section's gradient preset, which out-ranks the founder section's white with
   its own !important), with the author box's blue card removed (user: "remove the blue container
   and adjust the design accordingly"): no card background, padding or corners, so the photo and
   message sit on the gradient, and the white text turns dark — the message in ink, the name in
   ink, the role in the tertiary grey, the opening mark in brand blue (teal is faint on the light
   gradient). The author box anchors photos to the bottom (object-position 50% 100%, for the blog's
   head-and-shoulders crops), which cut the top of the CEO's head here — this portrait has the head
   close to its top edge — so it's anchored to the top instead. */
/* Head left-aligned (user, 2026-10-15), over the shared head's centring (os-industry-list.css:
   text-align center, children margin-inline auto). */
.os-about-leadership > .os-industry-list__head { text-align: left; }
.os-about-leadership > .os-industry-list__head > * { margin-inline: 0; }
.os-about-leadership .os-author-box { padding: 0; border-radius: 0; background: none; }
.os-about-leadership .os-author-box > .os-author-box__body > .os-csr-founder__quote { color: var(--wp--preset--color--ink); }
.os-about-leadership .os-csr-founder__quote::before { color: var(--wp--preset--color--brand); }
.os-about-leadership .os-author-box__head > .os-author-box__name { color: var(--wp--preset--color--ink); }
.os-about-leadership .os-author-box__head > .os-author-box__role { color: var(--wp--custom--color--tertiary); }
.os-about-leadership .os-author-box__photo img { object-position: 50% 0; }
/* The CSR message is one paragraph, so its quote sets no gap between paragraphs (> p margin 0);
   the CEO's message has two, which ran together. */
.os-about-leadership .os-csr-founder__quote > p + p { margin-top: 16px; }

/* ---------- Reliability OS (os/about-reliability-os) ---------- */
/* Edge to edge on the OS Blue Band (os-theme.css; user, 2026-10-15: "full blue background … text
   center aligned and button below the content"; the Home AI Labs banner layout was tried first),
   centred in an 860px column. As Our Foundation on the same band: the page's own section padding
   (48px, 24px ≤768px), the band's gradient stretched to the section's height (it's sized for
   Home's 782px band) and the spinning orbit ring (::after) off; the static orbit lines and glow
   stay. Eyebrow → H2 16px (the OS Section Head gap), H2 → text 16px, text → button 32px. */
.os-about-reliability-os.is-style-os-blue-band {
	padding-top: 48px;
	padding-bottom: 48px;
	background:
		var(--os-band-glow) var(--os-band-glow-x) var(--os-band-glow-y) / var(--os-band-glow-size) no-repeat,
		linear-gradient(to bottom, #00509e 23.982%, #001f54 103.62%),
		#001f54 !important;
}
.os-about-reliability-os.is-style-os-blue-band::after { content: none; animation: none; }
.os-about-reliability-os > .os-about-reliability-os__copy { max-width: 860px; margin-block: 0; }
.os-about-reliability-os__copy > * { margin: 0; }
.os-about-reliability-os__copy > * + h2 { margin-top: var(--wp--custom--section-head-gap); }
.os-about-reliability-os__copy > .os-about-reliability-os__text {
	margin-top: 16px;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.6;
	color: rgb(255 255 255 / 0.85);
}
.os-about-reliability-os__copy > .wp-block-buttons { margin-top: 32px; }
@media (max-width: 768px) {
	.os-about-reliability-os.is-style-os-blue-band { padding-top: 24px; padding-bottom: 24px; }
	.os-about-reliability-os__copy > .os-about-reliability-os__text { font-size: 15px; }
	.os-about-reliability-os__copy > .wp-block-buttons { margin-top: 24px; }
}

/* ---------- Connect CTA (os/about-contact) ---------- */
/* The OS Post CTA panel (dark) on a white section, as the Platforms L0 / Contact / CSR CTAs, with
   an eyebrow added above the title (brief: "Eyebrow: Let's Connect"). */
.os-about-contact {
	padding-top: 48px;
	padding-bottom: 48px;
	background: var(--wp--preset--color--white);
}
.os-about-contact > .os-post-cta { margin-block: 0; }
.os-about-contact .os-about-contact__copy > * { margin: 0; }
.os-about-contact .os-about-contact__copy > .is-style-os-eyebrow {
	margin-bottom: 8px !important;
	color: var(--wp--custom--color--on-brand);
}
.os-about-contact .os-post-cta .os-post-cta__title { max-width: 620px; }
.os-about-contact .os-about-contact__copy > .os-about-contact__text {
	max-width: 620px;
	margin-top: 12px !important;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.6;
	color: rgb(255 255 255 / 0.8);
}
@media (max-width: 768px) {
	.os-about-contact { padding-top: 24px; padding-bottom: 24px; }
	.os-about-contact .os-about-contact__copy > .os-about-contact__text { font-size: 15px; }
}

/* ---------- Matri Chaya (os/about-matrichaya) ---------- */
/* The service page's "Proven in production" figures (OS Service Proof Stats, os-service-detail.css,
   as on /services/ai-for-reliability/; user, 2026-10-15) as is, with the brief's four impact
   figures. Two additions: the intro is a paragraph, not Proven in production's one line, so it's
   capped at 860px and centred; and the Learn More button (→ /csr/) sits centred under the panel. */
.os-about-matrichaya .os-service-detail-proof__head > .os-service-detail-proof__lead { max-width: 860px; margin-inline: auto; }
/* Light (user, 2026-10-15: "full light gradient background"): the section's aurora gradient preset
   out-ranks the component's navy (its own !important); the white text turns dark — H2 ink, intro
   tertiary — and the panel turns white with a card-blue edge (green stripe kept), figures in brand
   blue over tertiary labels, split by the line colour instead of white 15%. The sky hover stays. */
.os-about-matrichaya.os-service-detail-proof { color: var(--wp--preset--color--ink); }
.os-about-matrichaya .os-service-detail-proof__head > .os-service-detail-proof__title { color: var(--wp--preset--color--ink); }
.os-about-matrichaya .os-service-detail-proof__head > .os-service-detail-proof__lead { color: var(--wp--custom--color--tertiary); }
.os-about-matrichaya > .os-service-detail-proof__panel {
	border-color: var(--wp--custom--color--card-blue);
	border-top-color: var(--wp--preset--color--green);
	background: var(--wp--preset--color--white);
	filter: drop-shadow(2px 2px 20px rgb(0 0 0 / 0.05));
}
.os-about-matrichaya .os-service-stat { box-shadow: 1px 0 0 var(--wp--preset--color--line), 0 1px 0 var(--wp--preset--color--line); }
.os-about-matrichaya .os-service-stat > .os-service-stat__value { color: var(--wp--preset--color--brand); }
.os-about-matrichaya .os-service-stat > .os-service-stat__label { color: var(--wp--custom--color--tertiary); }
/* The Matri Chaya logo in place of the eyebrow (user, 2026-10-15), 130px wide (110 on phones),
   20px above the H2. */
.os-about-matrichaya .os-service-detail-proof__head > .os-about-matrichaya__logo { margin-inline: auto; }
.os-about-matrichaya .os-service-detail-proof__head > .os-about-matrichaya__logo + .os-service-detail-proof__title { margin-top: 20px; }
.os-about-matrichaya > .os-about-matrichaya__actions { margin-top: 32px; }
/* Shorter figures (user, 2026-10-15: "reduce the height of the stats, too much space"): the
   component's 220px minimum (sized for Proven in production's two- and three-line descriptions)
   left these one-line labels floating in empty space, so the figures size to their content with
   less padding: 28/32 (24 ≤1100px, 20 on phones). */
.os-about-matrichaya .os-service-stat { min-height: 0; padding: 28px 32px; }
@media (max-width: 1100px) {
	.os-about-matrichaya .os-service-stat { padding: 24px; }
}
@media (max-width: 768px) {
	.os-about-matrichaya > .os-about-matrichaya__actions { margin-top: 24px; }
	.os-about-matrichaya .os-service-stat { padding: 20px 24px; }
	.os-about-matrichaya .os-about-matrichaya__logo img { width: 110px !important; }
}