/* Phone and small-tablet layout fixes. The theme was built for wide screens;
   these rules only apply below 992px and leave the desktop view untouched. */

/* Home hero for phones: shown instead of the pinned video card. */
.m-hero { display: none; }

@media (max-width: 991px) {

	#pxl-wapper { overflow-x: hidden; }

	/* Header: keep the wordmark clear of the menu button */
	#pxl-header-mobile .pxl-header-branding img,
	.pxl-logo-mobile img {
		height: auto !important;
		max-height: 30px;
		max-width: calc(100vw - 120px);
		width: auto;
	}

	/* Home: the desktop hero (pinned card over a video) is replaced by a static hero */
	.home .layout-element-ae1ca32 { display: none !important; }
	.m-hero {
		display: block;
		position: relative;
		overflow: hidden;
		padding: 48px 24px 56px;
		background: #1b1a1c;
		color: var(--four-color);
		text-align: left;
	}
	.m-hero__glow {
		position: absolute;
		width: 320px; height: 320px;
		right: -120px; top: -80px;
		border-radius: 50%;
		background: var(--primary-color);
		opacity: .28;
		filter: blur(90px);
		pointer-events: none;
	}
	.m-hero__video, .m-hero__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
	.m-hero__video { object-fit: cover; z-index: 0; }
	.m-hero__shade { z-index: 1; background: linear-gradient(180deg, rgba(27, 26, 28, .55) 0%, rgba(27, 26, 28, .78) 55%, rgba(27, 26, 28, .96) 100%); }
	.m-hero__glow { z-index: 2; }
	.m-hero > :not(.m-hero__glow):not(.m-hero__video):not(.m-hero__shade) { position: relative; z-index: 3; }
	.m-hero__label {
		display: inline-block;
		font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
		color: var(--primary-color);
		margin-bottom: 22px;
	}
	.m-hero__mark { width: 84px; height: 84px; border-radius: 22px; display: block; margin-bottom: 26px; }
	.m-hero__wordmark { display: block; width: 100%; max-width: 380px; height: auto; margin: 0 0 22px; }
	.m-hero__tagline { font-size: 17px; line-height: 1.65; margin: 0 0 30px; max-width: 420px; }
	.m-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; }
	.m-hero__link { color: var(--white-color); font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
	.m-hero__link i { color: var(--primary-color); }
	.m-hero__strip {
		margin: 44px -24px 0;
		padding: 16px 24px 0;
		border-top: 1px solid rgba(255, 255, 255, .1);
		display: flex; gap: 12px 22px; flex-wrap: wrap;
		font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
		color: var(--four-color);
	}
	.m-hero__strip span::before { content: "."; color: var(--primary-color); margin-right: 2px; }

	/* Background videos are heavy on mobile data and never fit a phone frame */
	.layout-background-video-container { display: none !important; }

	/* Services list: no hover images on touch screens, so drop the space kept for them */
	.pxl-service-grid-layout1 .pxl-grid-item .pxl-post--inner { padding: 22px 16px !important; min-height: 0 !important; gap: 12px; }
	.pxl-service-grid-layout1 .pxl-grid-item .pxl-post--inner .pxl-grid-img { display: none !important; }
	.pxl-service-grid-layout1 .pxl-grid-item .pxl-post--inner .pxl-post--title { font-size: 22px !important; line-height: 1.25 !important; }

	/* Forms: budget buttons wrap cleanly instead of overlapping */
	.pxl-contact-form .pxl-radio--button .form-radio { height: auto !important; row-gap: 6px; }
	.pxl-contact-form .pxl-radio--button .form-radio .form-option .form-option-label {
		line-height: 44px !important;
		padding: 0 16px !important;
		font-size: 14px !important;
		white-space: nowrap;
	}

	/* Contact page budget pills (contact-form-h5 markup) */
	.site-form .contact-form-h5 .budget .form-field { display: flex; flex-wrap: wrap; gap: 8px; }
	.site-form .contact-form-h5 .budget .form-field .form-option { margin: 0 !important; padding: 0 !important; }
	.site-form .contact-form-h5 .budget .form-field .form-option-label { display: inline-block; padding: 11px 14px !important; font-size: 14px !important; white-space: nowrap; line-height: 1.3; }

	/* Section rhythm */
	.svc-hero { padding-top: 24px; }
	.svc-hero__title { font-size: clamp(34px, 9.5vw, 44px); }
	.legal__hero { padding-top: 24px; }

	/* Google map on the contact page: shorter on phones */
	.layout-widget-google_maps iframe { height: 260px !important; }
}

@media (max-width: 480px) {
	.m-hero { padding: 40px 20px 48px; }
	.m-hero__strip { margin: 36px -20px 0; padding: 14px 20px 0; }
	.svc-cards { gap: 16px; }
	.svc-card { padding: 28px 22px 26px; }
}