/* Internal markup board, Mobile tab (pins 63-89, posted ~2026-09-14, built
 * 2026-09-30). Mobile-only corrections that override earlier rules, so this
 * partial loads last. Each block names its pin. */

/* Pin 63: the quality cover's ::after fades the section's bottom 160px into
 * the stats band. On mobile the paragraph reaches into that band, and the
 * inner container was not stacked above the fade, so its last lines greyed
 * out. Lift the content over the fade at every width. */
.cmp-home-quality > .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
}

@media (max-width: 781px) {

	/* Pin 64: the 465+ label grew to fill the row (flex: 1 1 0), so that row
	 * ran edge to edge and read as left-aligned beside the two centred ones.
	 * Cap the label to its two-line width so the row shrinks and centres. */
	.cmp-home-stats .cmp-stat > p:not(.cmp-stat-num) {
		flex: 0 1 auto;
		max-width: 14em;
	}

	/* Pins 65 + 81: the carousel container keeps the 85px it reserves for
	 * dots on desktop, but dots and arrows are hidden on mobile, so it left
	 * ~118px between the headline and the first card. The block's own 32px
	 * margin is the Figma mobile gap (home features 430). */
	.cmp-home-features .wp-block-kindling-carousel .kindling-carousel-container,
	.cmp-industries-carousel .wp-block-kindling-carousel .kindling-carousel-container {
		padding-top: 0 !important;
	}

	/* Pin 66: Explore sat flush under the card copy; Figma mobile
	 * (33494 industries, 430) leaves ~32px. */
	.cmp-home-industries .cmp-card .wp-block-buttons {
		margin-top: 32px !important;
	}

	/* Pin 69: keep the home map artwork on mobile (block 68 is reused on
	 * Contact, where the mobile artboard has no map), without the callout card or
	 * the dot hotspots (the facilities are listed as cards above it). */
	.home .cmp-home-map {
		display: flex !important;
		min-height: 0 !important;
		height: calc(100vw * 692 / 1440);
		padding: 0 !important;
	}

	.home .cmp-home-map .wp-block-cover__inner-container,
	.home .cmp-home-map .cmp-map-pins {
		display: none;
	}
}

/* Pin 88: the MENU label (theme.json ::before, 19px) read heavy beside the
 * burger; step it down to 16px. */
.cmp-primary-nav .wp-block-navigation__responsive-container-open::before {
	font-size: 1rem;
}

/* Pin 89: the Compass logo (top) and LinkedIn icon (bottom) are blocks inside
 * navigation 84, shown only in the open mobile overlay. Core wraps each in a
 * bare <li class="wp-block-navigation-item">; hide that wrapper too, or the
 * empty item still takes a flex gap and shifts the desktop links. */
.cmp-primary-nav .wp-block-navigation-item:has(> .cmp-nav-overlay-only),
.cmp-primary-nav .cmp-nav-overlay-only {
	display: none !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:has(> .cmp-nav-overlay-only),
.wp-block-navigation__responsive-container.is-menu-open .cmp-nav-overlay-only {
	display: flex !important;
}

.wp-block-navigation__responsive-container.is-menu-open .cmp-nav-logo {
	margin-bottom: 16px;
}

.wp-block-navigation__responsive-container.is-menu-open .cmp-nav-logo img {
	width: 160px;
	height: auto;
}

.wp-block-navigation__responsive-container.is-menu-open .cmp-nav-social {
	margin-top: 24px;
}

.wp-block-navigation__responsive-container.is-menu-open .cmp-nav-social .wp-social-link svg {
	width: 28px;
	height: 28px;
}

@media (max-width: 781px) {

	/* Pins 73, 74, 76, 77, 78: on every service page the applications 50/50
	 * (.cmp-mt-apps, shared by all five) now stacks image first, like the
	 * story variant, instead of the archetype's image-below. */
	.cmp-cta-split.cmp-mt-apps .cmp-cta-img {
		order: 0;
	}
}

@media (max-width: 781px) {

	/* Pin 75: the desktop break before "at" left "Accuracy" alone on line 2
	 * at phone width; drop it and let the heading balance. */
	.cmp-swiss-twocol h2 br {
		display: none;
	}

	.cmp-swiss-twocol h2 {
		text-wrap: balance;
	}
}

@media (max-width: 781px) {

	/* Pin 71: "Learn More" sat flush under the card copy at 12px. Give it
	 * 16px of air and the card-copy size. Same component on home and
	 * /services, so both follow. Three classes to match theme.json's
	 * `.cmp-services-capabilities .cmp-card .cmp-cta { margin-block-start: 0 !important }`,
	 * which this later-loaded partial then overrides. */
	.cmp-home-capabilities .cmp-card .cmp-cta {
		margin-block-start: 16px !important;
		font-size: 1rem !important;
	}

	/* Pin 72: the /services 50/50 copy ran edge to edge at the 20px section
	 * gutter while every card around it insets its text; inset the copy. */
	.cmp-services-materials > .wp-block-group.alignwide > .wp-block-group,
	.cmp-services-standards > .wp-block-group.alignwide > .wp-block-group {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}

@media (max-width: 781px) {

	/* Pin 79: /facilities ran 90px between the stats image and the
	 * "Facilities" eyebrow (30 stats bottom + 60 comparison top); take 50
	 * off the comparison section's top. */
	.cmp-facil-stats + .cmp-comparison-section {
		padding-top: 10px !important;
	}

	/* Pins 83 + 84: the News/post CTA (.cmp-news-cta, wp_block 164) kept a
	 * 626px min-height around a 258px card. The other internal pages size
	 * their closing CTA to content with 60px padding; match them. */
	.cmp-news-cta {
		min-height: 0 !important;
		padding-top: 60px !important;
		padding-bottom: 60px !important;
	}

	/* Pin 85: the Contact reach-out image butted against the email line. */
	.cmp-contact-reach .cmp-cta-row {
		row-gap: 32px !important;
	}

	/* Pin 86: the mobile "Our Facilities" band carried a screen-blend teal
	 * flare; the Figma mobile artboard (33538:19105 render) shows only the
	 * dark grid texture, like the desktop section. */
	.cmp-contact-facilities::before {
		content: none;
	}
}