/* Mobile-only quick CTA between the hero and the trust band (all LP pages). */
.lp-mcta { display: none; }

@media (max-width: 746px) {
	.lp-mcta {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;
		padding: 20px 16px 24px;
		background: var(--color-white, #fff);
		text-align: center;
	}
	.lp-mcta__btn {
		width: 100%;
		max-width: 360px;
	}
	.lp-mcta__note {
		margin: 0;
		font-size: 14px;
		line-height: 1.3;
		color: #6b7280;
	}
	.lp-mcta__phone {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		color: var(--color-red, #d41a1e);
		font-weight: 700;
		font-size: 22px;
		line-height: 1;
		text-decoration: none;
	}
	.lp-mcta__phone:hover,
	.lp-mcta__phone:focus-visible { color: var(--color-red-hover, #b3161a); }
	.lp-mcta__phone-icon { width: 20px; height: 20px; display: block; }
}

/* Emergency LP (page 21): mobile header shows the phone number, not the
   Request Service button. Desktop already shows the phone (button hidden by base). */
@media (max-width: 768px) {
	body.page-id-21 .lp-nav .phone { display: inline-flex; }
	body.page-id-21 .lp-nav__actions .btn--cta { display: none; }
}

/* Emergency LP mobile header: shrink the phone so the full number fits next to the logo. */
@media (max-width: 768px) {
	body.page-id-21 .lp-nav .phone__number { font-size: 18px; line-height: 24px; }
	body.page-id-21 .lp-nav .phone__label  { font-size: 12px; line-height: 16px; }
	body.page-id-21 .lp-nav .phone__icon   { width: 22px; height: 22px; }
}

/* Emergency LP (page 21) hero = the team photo: a portrait shot in a 16/11 mobile slot.
   The base rule anchors `center top`, which on mobile would crop to sky + tree and drop the
   people entirely. Shift the crop window down so the crew stays in frame. */
@media (max-width: 768px) {
	body.page-id-21 .lp-hero__media-img { object-position: center 60%; }
}

/* Installation LP (page 20) hero: at the mobile 16/11 crop the default `center top`
   cuts the technician's head exactly at the crown. Nudge the window down so he is whole. */
@media (max-width: 768px) {
	body.page-id-20 .lp-hero__media-img { object-position: center 30%; }
}