/*
 * Home page hero: full width under the menu at the top, the rounded card after scrolling.
 * js/home-hero-scroll.js adds "is-card" to .main-header once the page is scrolled 24px
 * (removed again at the top); the change animates over 0.7s, like officeslist.com.
 * The hero itself is always edge to edge; clip-path cuts it down to the card, so the
 * text and the page below never move.
 * Loaded on the front page only (functions.php → bwi_enqueue_home_hero_scroll).
 */
.l-section.home-header {
	/* the card's side space now comes from the clip-path below */
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.home-header .main-header {
	/* the card: 1rem from the edges, at most 1560px wide, 50px corners (as before) */
	--bwi-hero-side: max(1rem, calc((100% - 1560px) / 2));
	--bwi-hero-radius: 50px;
	width: auto !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	/* the text, form and Trustpilot keep the card's width (on phones the form would reach the edges) */
	padding-left: var(--bwi-hero-side) !important;
	padding-right: var(--bwi-hero-side) !important;
	border-radius: 0 !important;
	clip-path: inset(0 0 round 0);
	transition: clip-path 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-header .main-header.is-card {
	clip-path: inset(0 var(--bwi-hero-side) round var(--bwi-hero-radius));
}
.home-header .main-header::before {
	border-radius: 0;
}
/* "Reduce motion": always the card, no animation */
@media (prefers-reduced-motion: reduce) {
	.home-header .main-header {
		clip-path: inset(0 var(--bwi-hero-side) round var(--bwi-hero-radius));
		transition: none;
	}
}