/*
 * Section background fixes. Loaded after the main stylesheets.
 *
 * "Why Choose Us" (.sv-choose) is tagged .bpd-section-grey, but a grouped rule
 * in style.css (.sv-overview, .sv-choose, .sv-process, ... { background: #fffdf8 })
 * paints it the same cream as the intro section above it, so the two read as
 * one block. This gives it a deeper version of the theme's own sand
 * section-grey, which also stays distinct from the cool grey panels below it.
 */
.bpd-section.sv-choose {
	background:
		linear-gradient(135deg, rgba(47, 83, 104, 0.07), transparent 38%),
		linear-gradient(180deg, #f3eee4 0%, #ece5d8 100%);
	border-top: 1px solid rgba(6, 34, 53, 0.08);
	border-bottom: 1px solid rgba(6, 34, 53, 0.06);
}

/*
 * Short text panels (.sv-editorial__content) on the service and city pages.
 * Their paragraphs are capped at about 80 characters, so one or two lines sat
 * against the left edge of a 1080px box with the right third empty. Centre
 * the text and the button row in those panels. Longer panels (4+ paragraphs,
 * lists or sub-headings) stay left-aligned for reading, and the renovation
 * panels keep their own layout.
 */
.bpd-section.sv-editorial:not(.sv-renovation-detail):not(.sv-renovation-intro-panel) .sv-editorial__content:not(:has(ul, ol, h2, h3, h4, h5, > p:nth-of-type(4))) {
	text-align: center !important;
}

.bpd-section.sv-editorial:not(.sv-renovation-detail):not(.sv-renovation-intro-panel) .sv-editorial__content:not(:has(ul, ol, h2, h3, h4, h5, > p:nth-of-type(4))) > p {
	margin-left: auto !important;
	margin-right: auto !important;
	justify-content: center !important;
}

/*
 * Our Services card grid, kept in step with the home page services grid.
 * The grid is capped at 1180px inside a wider container but had margin 0, so
 * it sat left of centre. The photo overlay picked up inset:0 from one rule
 * and height:35% from another, which drew a hard-edged band across the top
 * third of every photo; let it cover the whole image as on the home page.
 */
html body.page-id-134 section.bpd-services-grid-section .bpd-service-grid {
	margin-left: auto !important;
	margin-right: auto !important;
}

html body.page-id-134 section.bpd-services-grid-section .bpd-service-img-wrapper::after {
	height: auto !important;
}

/*
 * City pages: each city's own photo behind the hero (set per page as
 * --bpd-city-hero / --bpd-city-hero-sm in page.php). The default header
 * stacks two ~90% navy overlays, which hid the old photo completely. Here the
 * tint stays dark behind the heading on the left and opens up on the right
 * where the city is, with a darker band at the bottom behind the stats row.
 */
html body .bpd-page-header.sv-premium-header.bpd-city-hero {
	background-color: #05131f !important;
	background-image: var(--bpd-city-hero) !important;
	background-size: cover !important;
	background-position: 65% center !important;
	background-repeat: no-repeat !important;
}

html body .bpd-page-header.sv-premium-header.bpd-city-hero::before {
	background:
		linear-gradient(90deg, rgba(5, 19, 31, 0.9) 0%, rgba(5, 19, 31, 0.78) 34%, rgba(5, 19, 31, 0.42) 62%, rgba(5, 19, 31, 0.12) 100%),
		linear-gradient(0deg, rgba(5, 19, 31, 0.6) 0%, rgba(5, 19, 31, 0) 40%) !important;
}

@media (max-width: 767px) {
	html body .bpd-page-header.sv-premium-header.bpd-city-hero {
		background-image: var(--bpd-city-hero-sm, var(--bpd-city-hero)) !important;
		background-position: 70% center !important;
	}

	html body .bpd-page-header.sv-premium-header.bpd-city-hero::before {
		background: linear-gradient(180deg, rgba(5, 19, 31, 0.72) 0%, rgba(5, 19, 31, 0.8) 55%, rgba(5, 19, 31, 0.9) 100%) !important;
	}
}