/*
 * XGene Stage 8 Mobile Economy + Consistency — 1.13.3
 * Presentation-only correction. Mobile animation/diagram surfaces are removed
 * from layout until a dedicated mobile visual strategy is approved.
 */

:root {
	--xg-mobile-section-gap: clamp(2.4rem, 8vw, 3.4rem);
	--xg-mobile-button-height: 3.15rem;
}

/* --------------------------------------------------------------------------
   01. MOBILE: REMOVE ANIMATION SURFACES FROM THE LAYOUT
   Not frozen, not visually hidden with retained height: display:none reclaims
   the full mobile fold for proposition, proof, navigation, and conversion.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
	[data-xg-animate-diagram],
	[data-xg-motion-scene],
	[data-xg-semantic-motion],
	[data-xg121-topic-motion],
	.xg120-faq-hero__visual,
	.xg190-knowledge-hero__visual,
	.xg-media-hero__visual,
	.xg-editorial-cover__visual,
	.xg-service-lifecycle,
	.xg-service-motion,
	.xg-reg-center-visual,
	.xg-evidence-visual {
		display: none !important;
	}

	/* Explicitly collapse every two-column hero family after its visual leaves. */
	.xg-home-hero__grid,
	.xg-enterprise-hero__grid,
	.xg-contact-hero__grid,
	.xg-methodology-hero__grid,
	.xg-compact-hero__grid,
	.xg-hub-hero__grid,
	.xg-editorial-hub-hero__grid,
	.xg-service-hub-hero__grid,
	.xg-services-hero__grid,
	.xg-service-detail-hero__grid,
	.xg120-faq-hero__grid,
	.xg120-search-hero__grid,
	.xg111-hero__grid,
	.xg190-hero__grid,
	.xg190-knowledge-hero__grid,
	.xg611-faq-hero__grid,
	.xg-media-hero__grid {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 0 !important;
		min-height: 0 !important;
	}

	/* Eliminate desktop visual reserve and restore a compact business-first fold. */
	.xg-home-hero__grid,
	.xg-service-hub-hero__grid,
	.xg-service-detail-hero__grid,
	.xg-enterprise-hero__grid,
	.xg-contact-hero__grid,
	.xg-methodology-hero__grid,
	.xg190-hero__grid,
	.xg120-faq-hero__grid,
	.xg111-hero__grid {
		padding-top: clamp(2.1rem, 8vw, 2.9rem) !important;
		padding-bottom: clamp(2.25rem, 8vw, 3.15rem) !important;
	}
}

/* --------------------------------------------------------------------------
   02. MOBILE CTA ECONOMY + CONTRAST
   One strong primary action, one clearly visible secondary action. Full-width
   remains useful on phones, but buttons no longer feel like oversized panels.
   -------------------------------------------------------------------------- */
@media (max-width: 520px) {
	.xg-button-row {
		gap: .65rem !important;
		margin-top: 1.15rem;
	}
	.xg-button,
	body.xg-r10 .xg-button {
		min-height: var(--xg-mobile-button-height) !important;
		padding: .64rem .9rem !important;
		font-size: .98rem !important;
		line-height: 1.15 !important;
		border-radius: .82rem !important;
	}

	/* Light hero families need a dark visible secondary action. */
	.xg-service-hub-hero .xg-button--ghost-light,
	.xg-service-detail-hero .xg-button--ghost-light,
	.xg-home-hero .xg-button--ghost-light,
	.xg-enterprise-hero .xg-button--ghost-light {
		color: var(--xg-deep-blue) !important;
		border-color: rgb(18 93 245 / 34%) !important;
		background: rgb(255 255 255 / 78%) !important;
		box-shadow: 0 .4rem 1.15rem rgb(8 43 73 / 7%) !important;
	}
	.xg-service-hub-hero .xg-button--ghost-light:hover,
	.xg-service-hub-hero .xg-button--ghost-light:focus-visible,
	.xg-service-detail-hero .xg-button--ghost-light:hover,
	.xg-service-detail-hero .xg-button--ghost-light:focus-visible {
		color: #fff !important;
		border-color: var(--xg-deep-blue) !important;
		background: var(--xg-deep-blue) !important;
	}

	.xg-home-hero__note {
		gap: .55rem .75rem !important;
		margin-top: 1.25rem !important;
		font-size: .9rem !important;
		line-height: 1.4 !important;
	}
}

/* --------------------------------------------------------------------------
   03. MOBILE TYPOGRAPHY / SPACING RHYTHM
   The screenshots showed headings and section gaps varying more than the visual
   system should. Normalize content rhythm without flattening page-family roles.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
	.xg-home-hero h1,
	.xg-enterprise-hero h1,
	.xg-contact-hero h1,
	.xg-hub-hero h1,
	.xg-methodology-hero h1,
	.xg-editorial-hub-hero h1,
	.xg-compact-hero h1,
	.xg-service-hub-hero__copy h1,
	.xg-service-detail-hero__copy h1,
	.xg190-hero h1,
	.xg120-faq-hero h1,
	.xg120-search-hero h1,
	.xg111-hero h1,
	.xg611-faq-hero__copy h1 {
		font-size: clamp(2.1rem, 9.6vw, 2.8rem) !important;
		line-height: 1.035 !important;
		letter-spacing: -.042em !important;
		max-width: 18ch !important;
	}

	.xg-home-hero h1 { max-width: 15ch !important; }

	.xg-enterprise-lead,
	.xg-hub-lead,
	.xg-contact-hero p:not(.xg-eyebrow),
	.xg-compact-hero__content > p:not(.xg-eyebrow),
	.xg-service-hub-hero__copy > p:not(.xg-eyebrow),
	.xg-service-detail-hero__lead,
	.xg190-hero__lead,
	.xg120-faq-hero__copy > p:not(.xg-eyebrow),
	.xg111-hero__grid > div:first-child > p:not(.xg-eyebrow) {
		font-size: 1.02rem !important;
		line-height: 1.58 !important;
	}

	.xg-eyebrow {
		font-size: .78rem !important;
		letter-spacing: .13em !important;
	}
}

/* --------------------------------------------------------------------------
   04. DESKTOP ANIMATION COPY ECONOMY
   Visual labels are navigational cues, not paragraphs. Clamp label areas so
   future wording cannot silently turn diagrams into text cards.
   -------------------------------------------------------------------------- */
@media (min-width: 761px) {
	.xg-life-node strong,
	.xg-service-motion__node span,
	.xg-contact-signal__card small,
	.xg121-topic-node small,
	.xg-methodology-node small,
	.xg-service-lifecycle__node span {
		max-width: 16ch;
		line-height: 1.25 !important;
	}

	.xg-service-motion__node strong,
	.xg121-topic-node strong,
	.xg-life-node span,
	.xg-methodology-node strong {
		text-wrap: balance;
	}
}

/* --------------------------------------------------------------------------
   05. SMALL CONSISTENCY CORRECTIONS OBSERVED IN MOBILE REVIEW
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
	/* Keep the floating search affordance compact and clear of mobile browser UI. */
	.xg-global-search-trigger,
	.xg-search-trigger,
	[data-xg-global-search-open] {
		max-width: 3.25rem;
		max-height: 3.25rem;
	}

	/* Long service/navigation labels must wrap cleanly rather than collide. */
	.xg-service-pressure__grid strong,
	.xg-footer-nav a,
	.xg190-context-card h3,
	.xg-content-card h3 {
		overflow-wrap: anywhere;
		word-break: normal;
	}
}