/* Final, CSS-only mobile fidelity layer for the About page. This file loads
 * after all shared styles so the result never depends on JavaScript timing. */
@media (max-width: 767px) {
	html body.pyp-about-figma .pyp-header { position: static !important; }
	html body.pyp-about-figma .pyp-about-mobile-break { display: initial !important; }

	html body.pyp-about-figma .pyp-about-trust-strip {
		font-family: "BR Segma Figma Web", "BR Segma", Arial, sans-serif !important;
		font-size: 14px !important;
		font-weight: 500 !important;
		line-height: 22px !important;
		letter-spacing: 0 !important;
		text-align: left !important;
	}

	html body.pyp-about-figma .pyp-about-works__partner-logo,
	html body.pyp-about-figma .pyp-about-works__partner > img:first-child {
		width: 125.034px !important;
		height: 17.669px !important;
		min-width: 125.034px !important;
		min-height: 17.669px !important;
		flex: 0 0 17.669px !important;
		object-fit: fill !important;
	}

	html body.pyp-about-figma .pyp-about-works__partner {
		justify-content: flex-start !important;
		gap: 0 !important;
	}

	html body.pyp-about-figma .pyp-about-works__partner-copy {
		margin-top: 24px !important;
	}

	html body.pyp-about-figma .pyp-about-works__partner-tags {
		margin-top: 24px !important;
		padding-top: 0 !important;
	}

	html body.pyp-about-figma .pyp-footer__cta-inner > a {
		box-sizing: border-box !important;
		width: 170px !important;
		min-width: 170px !important;
		max-width: 170px !important;
		height: 42px !important;
		min-height: 42px !important;
		max-height: 42px !important;
		padding: 12px 24px !important;
	}
}

@media (max-width: 767px) {
	html body.pyp-about-figma #pyp-main-content .pyp-about-works__service-title,
	html body.pyp-about-figma #pyp-main-content .pyp-about-works__service-title * {
		font-family: "BR Segma Figma Web", "BR Segma", Arial, sans-serif !important;
		font-size: 16px !important;
		font-weight: 600 !important;
		line-height: 21.75px !important;
		font-synthesis: none !important;
	}

	html body.pyp-about-figma #pyp-main-content .pyp-about-works__service-body,
	html body.pyp-about-figma #pyp-main-content .pyp-about-works__service-body * {
		font-family: "BR Segma Figma Web", "BR Segma", Arial, sans-serif !important;
		font-size: 12px !important;
		font-weight: 500 !important;
		line-height: 18px !important;
		font-synthesis: none !important;
	}

	html body.pyp-about-figma #pyp-main-content .pyp-about-journey__step {
		align-content: start !important;
		row-gap: 4px !important;
	}

	html body.pyp-about-figma #pyp-main-content .pyp-about-difference__logo {
		width: 160px !important;
		height: 22.61px !important;
		min-width: 160px !important;
		min-height: 22.61px !important;
		flex: 0 0 22.61px !important;
		display: block !important;
	}

	html body.pyp-about-figma #pyp-main-content [data-about-carousel] {
		box-sizing: border-box !important;
		width: 390px !important;
		max-width: none !important;
		margin-left: -24px !important;
		margin-right: -24px !important;
		padding-left: 24px !important;
		padding-right: 24px !important;
		scroll-padding-left: 24px !important;
	}

	html body.pyp-about-figma #pyp-main-content :is(.pyp-about-quality__track, .pyp-about-buyers__track) {
		padding-right: 53px !important;
	}

	html body.pyp-about-figma #pyp-main-content .pyp-about-difference__traditional-title,
	html body.pyp-about-figma #pyp-main-content .pyp-about-difference__traditional-title * {
		font-family: "BR Segma Figma Web", "BR Segma", Arial, sans-serif !important;
		font-size: 18px !important;
		font-weight: 600 !important;
		line-height: 17px !important;
		letter-spacing: 0 !important;
		font-synthesis: none !important;
	}

	/* The desktop comparison rule has higher specificity and was forcing a
	 * 23.25px line-height on mobile. That makes the six rows overflow the
	 * fixed Figma card and consumes its 48px bottom inset. */
	html body.pyp-about-figma #pyp-main-content .pyp-about-difference__card--pyp > div:last-child .pyp-about-difference__pyp-text,
	html body.pyp-about-figma #pyp-main-content .pyp-about-difference__card--pyp > div:last-child .pyp-about-difference__pyp-text * {
		font-size: 14px !important;
		font-weight: 500 !important;
		line-height: 16.8px !important;
		font-synthesis: none !important;
	}
}

@layer pyp-site-typography {
	@media (max-width: 767px) {
		html body.pyp-about-figma :is(
			.pyp-about-hero .pyp-about-eyebrow,
			.pyp-about-hero .pyp-about-button,
			.pyp-about-hero__copy > p,
			.pyp-about-who__intro > p,
			.pyp-about-stats > div > span:last-child,
			.pyp-about-reason-card__body,
			.pyp-about-works__service-body,
			.pyp-about-system__card > div:last-child > span:last-child,
			.pyp-about-journey__body,
			.pyp-about-difference__traditional-text,
			.pyp-about-difference__pyp-text,
			.pyp-about-quality__card > div:last-child > span:last-child,
			.pyp-about-delivery__intro-copy > p,
			.pyp-about-delivery__step-body,
			.pyp-about-buyer-card__summary,
			.pyp-about-buyer-card__point,
			.pyp-about-project-card p,
			.pyp-about-team__head > p,
			.pyp-about-team-card > span:nth-child(3)
		),
		html body.pyp-about-figma :is(
			.pyp-about-hero .pyp-about-eyebrow,
			.pyp-about-hero .pyp-about-button,
			.pyp-about-hero__copy > p,
			.pyp-about-who__intro > p,
			.pyp-about-stats > div > span:last-child,
			.pyp-about-reason-card__body,
			.pyp-about-works__service-body,
			.pyp-about-system__card > div:last-child > span:last-child,
			.pyp-about-journey__body,
			.pyp-about-difference__traditional-text,
			.pyp-about-difference__pyp-text,
			.pyp-about-quality__card > div:last-child > span:last-child,
			.pyp-about-delivery__intro-copy > p,
			.pyp-about-delivery__step-body,
			.pyp-about-buyer-card__summary,
			.pyp-about-buyer-card__point,
			.pyp-about-project-card p,
			.pyp-about-team__head > p,
			.pyp-about-team-card > span:nth-child(3)
		) * {
			font-family: "BR Segma Figma Web", "BR Segma", Arial, sans-serif !important;
			font-weight: 500 !important;
			font-synthesis: none !important;
		}

		html body.pyp-about-figma :is(
			.pyp-about-reason-card__title,
			.pyp-about-journey__title,
			.pyp-about-quality__card > div:last-child > span:first-child,
			.pyp-about-delivery__step-title,
			.pyp-about-buyer-card > div:nth-child(2) > span:first-child,
			.pyp-about-project-card h3,
			.pyp-about-team-card > span:nth-child(2),
			.pyp-about-slogan p
		),
		html body.pyp-about-figma :is(
			.pyp-about-reason-card__title,
			.pyp-about-journey__title,
			.pyp-about-quality__card > div:last-child > span:first-child,
			.pyp-about-delivery__step-title,
			.pyp-about-buyer-card > div:nth-child(2) > span:first-child,
			.pyp-about-project-card h3,
			.pyp-about-team-card > span:nth-child(2),
			.pyp-about-slogan p
		) * {
			font-family: "BR Segma Figma Web", "BR Segma", Arial, sans-serif !important;
			font-weight: 600 !important;
			font-synthesis: none !important;
		}

		html body.pyp-about-figma :is(
			.pyp-about-delivery__step-tag,
			.pyp-about-delivery__num,
			.pyp-about-delivery__intro > div:last-child span,
			.pyp-about-buyer-card__link
		),
		html body.pyp-about-figma :is(
			.pyp-about-delivery__step-tag,
			.pyp-about-delivery__num,
			.pyp-about-delivery__intro > div:last-child span,
			.pyp-about-buyer-card__link
		) * {
			font-family: "BR Segma Figma Web", "BR Segma", Arial, sans-serif !important;
			font-weight: 400 !important;
			font-synthesis: none !important;
		}
	}
}

html body.pyp-about-figma #start .pyp-about-select {
	display: none;
}

/* Mobile document flow and inquiry menus. The shared shell locks body
 * to one viewport and makes it the scroller; on this long page that leaves an
 * extra viewport after the footer. Restore normal document scrolling here. */
@media (max-width: 767px) {
	html:has(body.pyp-about-figma) {
		height: auto !important;
		min-height: 100% !important;
		overflow-y: auto !important;
		background: #14271f !important;
	}

	html body.pyp-about-figma {
		height: auto !important;
		min-height: 100% !important;
		overflow-y: visible !important;
	}

	html body.pyp-about-figma #start select option {
		padding: 8px 12px !important;
		color: #999999 !important;
		background: #ffffff linear-gradient(#ffffff, #ffffff) !important;
	}

	html body.pyp-about-figma #start select option:checked {
		color: #000000 !important;
		background: #f5f5f5 linear-gradient(#f5f5f5, #f5f5f5) !important;
	}

	html body.pyp-about-figma #start select.pyp-about-select__native {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		min-width: 1px !important;
		min-height: 1px !important;
		margin: -1px !important;
		padding: 0 !important;
		opacity: 0 !important;
		pointer-events: none !important;
		clip-path: inset(50%) !important;
	}

	html body.pyp-about-figma #start .pyp-about-select {
		position: relative;
		z-index: 1;
		display: block;
		width: 100%;
		font-family: "BR Segma Figma Web", "BR Segma", Arial, sans-serif;
		font-size: 13px;
		font-weight: 400;
		line-height: 16px;
		font-synthesis: none;
	}

	html body.pyp-about-figma #start .pyp-about-select.is-open {
		z-index: 40;
	}

	html body.pyp-about-figma #start .pyp-about-select__button {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 40px;
		margin: 0;
		padding: 0 40px 0 12px;
		border: 1px solid #ded8ce;
		border-radius: 0;
		background: #ffffff;
		box-shadow: none;
		color: #000000;
		font: inherit;
		text-align: left;
		cursor: pointer;
	}

	html body.pyp-about-figma #start .pyp-about-select__button::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 15px;
		width: 7px;
		height: 7px;
		border-right: 1px solid #20261f;
		border-bottom: 1px solid #20261f;
		transform: translateY(-70%) rotate(45deg);
		transform-origin: center;
	}

	html body.pyp-about-figma #start .pyp-about-select.is-open .pyp-about-select__button::after {
		transform: translateY(-30%) rotate(225deg);
	}

	html body.pyp-about-figma #start .pyp-about-select__button:focus-visible {
		outline: 1px solid #20261f;
		outline-offset: 1px;
	}

	html body.pyp-about-figma #start .pyp-about-select__menu {
		position: absolute;
		top: calc(100% - 1px);
		left: 0;
		right: 0;
		z-index: 2;
		margin: 0;
		padding: 0;
		border: 1px solid #808080;
		border-radius: 0;
		background: #ffffff;
		box-shadow: none;
	}

	html body.pyp-about-figma #start .pyp-about-select__menu[hidden] {
		display: none !important;
	}

	html body.pyp-about-figma #start .pyp-about-select__option {
		display: block;
		width: 100%;
		min-height: 32px;
		margin: 0;
		padding: 8px 12px;
		border: 0;
		border-radius: 0;
		background: #ffffff;
		box-shadow: none;
		color: #999999;
		font: inherit;
		line-height: 16px;
		text-align: left;
		cursor: pointer;
	}

	html body.pyp-about-figma #start .pyp-about-select__option.is-selected {
		background: #f5f5f5;
		color: #000000;
	}

	html body.pyp-about-figma #start .pyp-about-select__option:hover,
	html body.pyp-about-figma #start .pyp-about-select__option:focus-visible {
		background: #f5f5f5;
		color: #000000;
		outline: none;
	}

	/* Figma 4540:5768 uses two max-content grid rows with a fixed 32px gap.
	 * Without explicit row sizing, the browser stretches the auto rows and
	 * creates an extra 40px between the region chips and delivery steps. */
	html body.pyp-about-figma #pyp-main-content .pyp-about-delivery__layout {
		grid-template-rows: max-content max-content !important;
		align-content: start !important;
	}

	html body.pyp-about-figma #pyp-main-content .pyp-about-delivery__step-tag {
		display: block !important;
		color: #d8b98c !important;
		font-family: "BR Segma Figma Web", "BR Segma", Arial, sans-serif !important;
		font-size: 12px !important;
		font-weight: 400 !important;
		line-height: 12px !important;
		text-transform: uppercase !important;
		white-space: nowrap !important;
		font-synthesis: none !important;
	}
}