/**
 * Contact Us page (/contact/, os/contact-page-* patterns; copy from the client brief
 * Orbital_QKTech_L0-Company_Contact_v4_081026.pdf, 2026-10-13). Most of it is existing components
 * with their own CSS: the hero is the site's contact section (OS Contact, os-theme.css), the
 * overview the Industry intro and the section head the Industries head (os-industry-list.css), the
 * region tabs the Success Stories chip tabs (os-stories-tabs, + os-tabs.css), the FAQs the common
 * OS FAQs (os-faq.css) and the CTA the OS Post CTA panel (os-post.css). Only what is new lives
 * here. Loads where a block with an "os-contact-page" class renders (os_interactive_styles).
 *
 * Section rhythm = Industries / Services: 48px above and below (24 on phones), 32px from the head to
 * the content (24 on phones), cards with 16px corners.
 */

/* ---------- Hero (os/contact-page-hero) ---------- */
/* The OS Contact section as the page banner: the breadcrumbs at the blog hero's 38px from the top,
   the two columns under them, and the title as the page's H1 (theme.json's 48px, not the
   section's 30px). Its 746px minimum height is for a closing section, so it goes. */
.os-contact.os-contact-page-hero { min-height: 0; }
.os-contact-page-hero > .wp-block-breadcrumbs {
	position: relative;
	z-index: 1;
	margin-block: 0;
	padding-top: 38px;
}
.os-contact.os-contact-page-hero > .os-contact__inner { padding-top: 48px; padding-bottom: 100px; }
.os-contact-page-hero .os-contact__intro > h1.os-contact__title {
	max-width: 520px;
	font-size: var(--wp--preset--font-size--display);
	font-weight: 700;
	line-height: 1.25;
}
.os-contact-page-hero .os-contact__intro > .os-contact__text { max-width: 500px; font-size: var(--wp--preset--font-size--large); line-height: 1.6; }
@media (max-width: 1100px) {
	.os-contact.os-contact-page-hero > .os-contact__inner { padding-top: 40px; padding-bottom: 80px; }
	.os-contact-page-hero .os-contact__intro > h1.os-contact__title,
	.os-contact-page-hero .os-contact__intro > .os-contact__text { max-width: 620px; }
}
@media (max-width: 768px) {
	.os-contact-page-hero > .wp-block-breadcrumbs { padding-top: calc(var(--wp--preset--spacing--90) * 0.6); }
	.os-contact.os-contact-page-hero > .os-contact__inner { padding-top: 24px; padding-bottom: var(--wp--preset--spacing--90); }
	.os-contact-page-hero .os-contact__intro > h1.os-contact__title { font-size: var(--wp--preset--font-size--title); }
	.os-contact-page-hero .os-contact__intro > .os-contact__text { margin-top: 16px !important; font-size: var(--wp--preset--font-size--medium); }
}

/* ---------- Locations (os/contact-page-locations) ---------- */
/* Background = the Aurora gradient preset on the block (as the Platforms page's "Choose by the
   problem you are solving"), so no background here. */
.os-contact-page-locations {
	padding-top: 48px;
	padding-bottom: 48px;
}
.os-contact-page-locations > * { margin-block: 0; }
.os-contact-page-locations > .os-industry-list__head + .os-contact-page-regions { margin-top: 32px; }

/* Each tab opens with the brief's region H2 and intro line, centred above the cards (the H2 is a
   card-title size: the tab above already names the region in large type). */
.os-contact-page-region > .os-contact-page-region__head { margin: 0 0 32px; text-align: center; }
.os-contact-page-region__head > * { margin: 0 auto; }
.os-contact-page-region__head > .os-contact-page-region__title {
	font-size: var(--wp--preset--font-size--title);
	font-weight: 600;
	line-height: 1.25;
	color: var(--wp--preset--color--ink-deep);
}
.os-contact-page-region__head > .os-contact-page-region__text {
	max-width: 640px;
	margin-top: 8px;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
	color: var(--wp--custom--color--tertiary);
}

/* Office cards: 3 across, centred, so a region with two offices sits in the middle (2 at
   641–1100, 1 on phones). */
.os-contact-page-offices {
	--os-office-cols: 3;
	--os-office-gap: 24px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--os-office-gap);
}
.os-contact-page-offices > .os-contact-page-office {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	flex: 0 0 calc((100% - (var(--os-office-cols) - 1) * var(--os-office-gap)) / var(--os-office-cols));
	min-width: 0;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--wp--custom--color--card-border);
	border-radius: 16px;
	background: var(--wp--preset--color--white);
	transition: box-shadow var(--os-fast) var(--os-ease), transform var(--os-fast) var(--os-ease);
}
@media (hover: hover) {
	.os-contact-page-offices > .os-contact-page-office:hover {
		box-shadow: 0 12px 32px rgb(19 25 39 / 0.1);
		transform: translateY(-4px);
	}
}
@media (prefers-reduced-motion: reduce) {
	.os-contact-page-offices > .os-contact-page-office { transition: none; }
	.os-contact-page-offices > .os-contact-page-office:hover { transform: none; }
}
.os-contact-page-office > .os-contact-page-office__image { margin: 0; }
.os-contact-page-office__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 427 / 321;
	object-fit: cover;
}
.os-contact-page-office > .os-contact-page-office__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	margin: 0;
	padding: 24px;
}
.os-contact-page-office__body > * { margin: 0; }
.os-contact-page-office__body > .os-contact-page-office__city {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--ink-deep);
}
.os-contact-page-office__body > .os-contact-page-office__address {
	margin-top: 12px;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: var(--wp--custom--color--tertiary);
}
.os-contact-page-office__body > .os-contact-page-office__email {
	margin-top: 12px;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.5;
}
.os-contact-page-office__email a {
	color: var(--wp--preset--color--brand);
	text-decoration: none;
	overflow-wrap: anywhere;
}
.os-contact-page-office__email a:hover { text-decoration: underline; }
.os-contact-page-office__email a:focus-visible { outline: 2px solid var(--wp--preset--color--brand); outline-offset: 2px; }
/* The link sits on the card's bottom edge, so cards in a row line up whatever the address's length. */
.os-contact-page-office__body > .os-contact-page-office__actions { margin-top: auto; padding-top: 20px; }

@media (max-width: 1100px) {
	.os-contact-page-offices { --os-office-cols: 2; }
}
@media (max-width: 768px) {
	.os-contact-page-locations { padding-top: 24px; padding-bottom: 24px; }
	.os-contact-page-locations > .os-industry-list__head + .os-contact-page-regions { margin-top: 24px; }
	.os-contact-page-offices { --os-office-gap: 16px; }
	.os-contact-page-office > .os-contact-page-office__body { padding: 20px; }
	.os-contact-page-office__body > .os-contact-page-office__city { font-size: 22px; }
	.os-contact-page-region > .os-contact-page-region__head { margin-bottom: 24px; }
	.os-contact-page-region__head > .os-contact-page-region__title { font-size: var(--wp--preset--font-size--xx-large); }
	.os-contact-page-region__head > .os-contact-page-region__text { font-size: var(--wp--preset--font-size--medium); }
}
@media (max-width: 640px) {
	.os-contact-page-offices { --os-office-cols: 1; }
}

/* ---------- Call to action (os/contact-page-cta) ---------- */
/* The Platforms page CTA (os-platforms-l0.css): the OS Post CTA panel across the wide width in a
   white section with the page's spacing, an H2 with a line of text under it in the first column. */
.os-contact-page-cta {
	padding-top: 48px;
	padding-bottom: 48px;
	background: var(--wp--preset--color--white);
}
.os-contact-page-cta > .os-post-cta { margin-block: 0; }
.os-contact-page-cta .os-contact-page-cta__copy > * { margin: 0; }
.os-contact-page-cta .os-post-cta .os-post-cta__title { max-width: 760px; }
.os-contact-page-cta .os-contact-page-cta__copy > .os-contact-page-cta__text {
	max-width: 760px;
	margin-top: 12px;
	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-contact-page-cta { padding-top: 24px; padding-bottom: 24px; }
	.os-contact-page-cta .os-contact-page-cta__copy > .os-contact-page-cta__text { font-size: 15px; }
}