/**
 * Shared footer + hero layout fixes (extracted from style.css).
 * Loaded on blog/store Playwright pages that dequeue the main theme stylesheet.
 */

/* Active footer variant (post-hydration): keep nav bar aligned, logos in flow */
.framer-FUZJ2.framer-v-ibuqgj.framer-6dehdy {
	height: 684px;
	min-height: unset;
}

.framer-FUZJ2.framer-v-ibuqgj .framer-1m4c75a-container {
	transform: none !important;
	order: 0;
}

.framer-FUZJ2.framer-v-ibuqgj .framer-3222yt,
.framer-FUZJ2.framer-v-34hwdm .framer-7oyomr {
	order: 1;
}

.framer-FUZJ2.framer-v-ibuqgj .framer-uces6i {
	order: 2;
}

.framer-FUZJ2.framer-v-ibuqgj .framer-1qb39bh a {
	z-index: 10;
}

.framer-FUZJ2.framer-g2VRf.framer-lT3eR.framer-Zwot9.framer-vLRT3.framer-6dehdy.framer-v-ibuqgj {
	justify-content: start;
	align-items: end;
}

.framer-FUZJ2.framer-v-ibuqgj .framer-1d1d1b5-container {
	order: 5;
}

.framer-FUZJ2.framer-v-ibuqgj .framer-19oihwz {
	order: 4;
}

/*
 * Footer logos clickability: the LEGACY ACCOUNTS bar (.framer-1m4c75a-container)
 * is a full-width absolute layer (z-index 3) that sits above Social + Logos
 * (.framer-1qb39bh, z-index 2) and steals clicks on NZ on Air / Camshaft.
 */
@media (min-width: 810px) {
	.framer-lyubw3 .framer-FUZJ2 .framer-1m4c75a-container {
		pointer-events: none;
	}

	.framer-lyubw3 .framer-FUZJ2 .framer-1m4c75a-container > * {
		pointer-events: auto;
	}

	.framer-lyubw3 .framer-r23lf0-container .framer-1qb39bh[data-framer-name="Social + Logos"],
	.framer-lyubw3 .framer-FUZJ2 .framer-1qb39bh {
		z-index: 4;
		transform: translateX(0) !important;
		width: fit-content !important;
		max-width: 100%;
		left: 0 !important;
		right: auto !important;
	}
}

/* Nav bar: full width anchor (prevents right-shift when theme CSS is absent) */
.framer-lyubw3 .framer-FUZJ2 .framer-1m4c75a-container {
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	transform: none !important;
}

/* Footer poster (<1200px): centered text → logos row → video → bar overlaid */
@media (max-width: 1199.98px) {
	.framer-JaRx7 .framer-lyubw3 {
		overflow: visible !important;
	}

	.framer-lyubw3 .framer-r23lf0-container {
		height: auto !important;
	}

	.framer-lyubw3 .framer-FUZJ2.framer-6dehdy {
		display: flex !important;
		flex-flow: column nowrap !important;
		align-items: center;
		justify-content: flex-start;
		width: 100% !important;
		max-width: 100%;
		min-height: 0 !important;
		height: auto !important;
		overflow: visible !important;
		gap: 0;
	}

	.framer-lyubw3 .framer-FUZJ2 .framer-3222yt,
	.framer-lyubw3 .framer-FUZJ2 .framer-uces6i {
		position: relative !important;
		top: auto !important;
		right: auto !important;
		left: auto !important;
		bottom: auto !important;
		transform: none !important;
		width: 100%;
		max-width: 100%;
		padding: 0 24px;
		z-index: 3;
		text-align: center;
		white-space: normal;
	}

	.framer-lyubw3 .framer-FUZJ2 .framer-3222yt h2 span span,
	.framer-lyubw3 .framer-FUZJ2 .framer-uces6i h2 span span {
		opacity: 1 !important;
		transform: none !important;
	}

	.framer-lyubw3 .framer-FUZJ2 .framer-1d1d1b5-container {
		order: 4;
	}

	.framer-lyubw3 .framer-FUZJ2 .framer-19oihwz {
		display: none !important;
	}

	.framer-lyubw3 .framer-FUZJ2 .framer-3222yt {
		padding-top: 48px;
		padding-bottom: 0;
		order: 1;
	}

	.framer-lyubw3 .framer-FUZJ2 .framer-uces6i {
		padding-top: 0;
		padding-bottom: 32px;
		order: 2;
	}

	.framer-lyubw3 .framer-FUZJ2 .framer-3222yt h2,
	.framer-lyubw3 .framer-FUZJ2 .framer-uces6i h2 {
		text-align: center;
	}

	.framer-lyubw3 .framer-FUZJ2 .framer-1qb39bh {
		position: relative !important;
		left: auto !important;
		bottom: auto !important;
		transform: none !important;
		display: flex !important;
		width: 100%;
		flex-flow: row nowrap !important;
		align-items: center;
		justify-content: center;
		gap: 0;
		padding: 0 24px 40px;
		z-index: 10;
		order: 3;
	}

	/* ibuqgj post-hydration: logos in column flow on mobile/tablet only */
	.framer-lyubw3 .framer-FUZJ2.framer-v-ibuqgj .framer-1qb39bh {
		position: relative !important;
		left: auto !important;
		bottom: auto !important;
		width: fit-content;
		max-width: 100%;
		transform: none !important;
	}

	.framer-lyubw3 .framer-FUZJ2 .framer-1d6q82u {
		display: flex !important;
		flex-flow: row nowrap !important;
		align-items: center;
		justify-content: center;
		gap: 40px;
		width: auto;
	}

	.framer-lyubw3 .framer-FUZJ2 .framer-iiqmyl-container {
		opacity: 1 !important;
		transform: none !important;
	}

	.framer-lyubw3 .framer-FUZJ2 .framer-1d1d1b5-container {
		position: relative !important;
		left: auto !important;
		bottom: auto !important;
		transform: none !important;
		width: 100% !important;
		height: auto !important;
		max-width: 100%;
		aspect-ratio: 16 / 9;
		z-index: 1;
	}

	.framer-lyubw3 .framer-FUZJ2.framer-v-gwopi4 .framer-1d1d1b5-container video,
	.framer-lyubw3 .framer-FUZJ2.framer-v-34hwdm .framer-1d1d1b5-container video,
	.framer-lyubw3 .framer-FUZJ2.framer-v-n6t2vt .framer-1d1d1b5-container video,
	.framer-lyubw3 .framer-FUZJ2.framer-v-18qvbhj .framer-1d1d1b5-container video {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.framer-lyubw3 .framer-FUZJ2 .framer-1m4c75a-container {
		position: absolute !important;
		bottom: 0 !important;
		right: 0 !important;
		width: 100%;
		height: 92px !important;
		overflow: visible !important;
		z-index: 4;
	}

	.framer-lyubw3 .framer-5aKGd.framer-1bkiqa3,
	.framer-lyubw3 .framer-5aKGd.framer-v-1pqac4h.framer-1bkiqa3 {
		width: auto !important;
		max-width: 100%;
	}
}

@media (max-width: 809.98px) {
	.framer-lyubw3 .framer-FUZJ2 .framer-1d1d1b5-container {
		min-height: 420px !important;
	}

	.framer-lyubw3 .framer-FUZJ2 .framer-1m4c75a-container {
		height: 128px !important;
	}
}

@media (max-width: 476px) {
	.framer-lyubw3 .framer-FUZJ2 .framer-1m4c75a-container {
		display: flex;
		align-items: end;
		height: 69px !important;
		width: 100vw !important;
	}

	.framer-lyubw3 .framer-FUZJ2 .framer-1m4c75a-container .framer-5aKGd {
		width: 100% !important;
		height: 72% !important;
	}

	.framer-lyubw3 .framer-FUZJ2 .framer-1m4c75a-container .framer-5aKGd .framer-1ldptep {
		padding: 3px !important;
		padding-right: 101px !important;
	}

	.framer-lyubw3 .framer-FUZJ2 .framer-1m4c75a-container .framer-5aKGd .framer-1oxznxp {
		left: -36px !important;
		width: 55px !important;
		z-index: 0 !important;
	}

	.framer-lyubw3 .framer-FUZJ2 .framer-1m4c75a-container .framer-5aKGd .framer-1mcsgya {
		gap: 10px !important;
	}
}

/* Desktop (≥1200px): full-bleed black footer shell; wipe media anchored to bottom */
@media (min-width: 1200px) {
	.framer-lyubw3,
	.framer-lyubw3 .framer-r23lf0-container {
		width: 100% !important;
		max-width: none !important;
		background-color: rgb(0, 0, 0) !important;
	}

	.framer-lyubw3 .framer-r23lf0-container {
		display: block !important;
		width: 100% !important;
	}

	.framer-lyubw3 .framer-FUZJ2.framer-6dehdy {
		width: 100% !important;
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		background-color: rgb(0, 0, 0) !important;
	}

	.framer-lyubw3 .framer-FUZJ2 .framer-1d1d1b5-container,
	.framer-lyubw3 .framer-FUZJ2 .framer-19oihwz {
		position: absolute !important;
		bottom: 0 !important;
		width: 100% !important;
		height: 684px !important;
		--framer-aspect-ratio-supported: 684px;
		left: 50% !important;
		right: auto !important;
		transform: translateX(-50%) !important;
		padding-top: 0 !important;
	}

	.framer-lyubw3 .framer-FUZJ2 .framer-1d1d1b5-container video {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center bottom;
	}

	.framer-lyubw3 .framer-FUZJ2 .framer-19oihwz img,
	.framer-lyubw3 .framer-FUZJ2 .framer-19oihwz [data-framer-background-image-wrapper] img {
		object-fit: cover !important;
		object-position: center bottom !important;
	}

	/* Desktop: logos bottom-left over the wipe video (not mobile-centered) */
	.framer-lyubw3 .framer-FUZJ2 .framer-1qb39bh,
	.framer-lyubw3 .framer-FUZJ2.framer-v-ibuqgj .framer-1qb39bh,
	.framer-lyubw3 .framer-FUZJ2.framer-v-gwopi4 .framer-1qb39bh {
		position: absolute !important;
		bottom: 0 !important;
		left: 0 !important;
		right: auto !important;
		transform: translateX(0) !important;
		width: fit-content !important;
		max-width: 100%;
		display: flex !important;
		flex-flow: row nowrap !important;
		justify-content: flex-start !important;
		align-items: center !important;
		padding: 0 0 16px 40px !important;
		z-index: 4;
	}

	.framer-lyubw3 .framer-FUZJ2 .framer-1qb39bh .framer-1d6q82u {
		justify-content: flex-end !important;
		width: min-content !important;
	}
}

/*
 * ≥1920px (Framer sfthye): r23lf0 is forced to 1000px and React hydrates ibuqgj.
 *
 * Rather than pinning the poster to a fixed 684px tall box (which forces
 * object-fit: cover to crop more and more of the car as the viewport gets
 * wider — or requires capping the video to a fixed width and letterboxing
 * it, leaving ugly black bars on the sides), let the whole footer band grow
 * TALLER in lockstep with the viewport, using the same 1.75439:1 aspect
 * ratio Framer designed the poster at (1200px / 684px = 1.75439).
 * That way the video is always shown at its full, uncropped composition,
 * full-bleed edge to edge with no side bars — same as the sub-1920 poster,
 * just proportionally taller on very wide screens.
 */
@media (min-width: 1920px) {
	.framer-JaRx7 .framer-lyubw3,
	.framer-JaRx7 .framer-r23lf0-container,
	.framer-lyubw3[data-framer-name="07 - Footer"],
	.framer-lyubw3[data-framer-name="07 - Footer"] > div,
	.framer-lyubw3 .framer-r23lf0-container {
		width: 100% !important;
		max-width: none !important;
		aspect-ratio: 1.75439 / 1 !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		background-color: rgb(0, 0, 0) !important;
		overflow: hidden !important;
	}

	.framer-lyubw3 .framer-FUZJ2.framer-6dehdy,
	.framer-lyubw3 .framer-FUZJ2.framer-v-ibuqgj.framer-6dehdy {
		aspect-ratio: 1.75439 / 1 !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		overflow: hidden !important;
	}

	/* ibuqgj active variant: same alignment as gwopi4 poster on desktop */
	.framer-lyubw3 .framer-FUZJ2.framer-g2VRf.framer-lT3eR.framer-Zwot9.framer-vLRT3.framer-6dehdy.framer-v-ibuqgj {
		align-items: center !important;
		justify-content: center !important;
	}

	/* Headline: keep Framer's native top-anchored offset (110px / 216px from
	   the top of the box) instead of the bottom, so it sits near the top of
	   the growing footer band. */
	.framer-lyubw3 .framer-FUZJ2 .framer-3222yt,
	.framer-lyubw3 .framer-FUZJ2 .framer-uces6i {
		position: absolute !important;
		bottom: auto !important;
	}

	/*
	 * Wipe video/poster: fill the box exactly. Since the box now shares the
	 * video's own aspect ratio, object-fit: cover never has to crop the car
	 * vertically — at most it trims a little off the left/right (the video's
	 * native ratio is slightly wider than 1.75439:1).
	 */
	.framer-lyubw3 .framer-FUZJ2 .framer-1d1d1b5-container,
	.framer-lyubw3 .framer-FUZJ2 .framer-19oihwz {
		width: 100% !important;
		max-width: none !important;
		height: 100% !important;
		overflow: hidden !important;
	}

	.framer-lyubw3 .framer-FUZJ2 .framer-1d1d1b5-container video,
	.framer-lyubw3 .framer-FUZJ2 .framer-19oihwz img,
	.framer-lyubw3 .framer-FUZJ2 .framer-19oihwz [data-framer-background-image-wrapper] img {
		object-fit: cover !important;
		object-position: 50% 50% !important;
	}

	.framer-lyubw3 .framer-FUZJ2 .framer-1qb39bh,
	.framer-lyubw3 .framer-FUZJ2.framer-v-ibuqgj .framer-1qb39bh,
	.framer-lyubw3 .framer-FUZJ2.framer-v-gwopi4 .framer-1qb39bh {
		width: fit-content !important;
		max-width: 100%;
		left: 0 !important;
		transform: translateX(0) !important;
		z-index: 4;
	}
}

/*
 * Blog page hero: "Image Animation Wrap" (.framer-1xn6oyc — red car + sky
 * background behind the featured post).
 *
 * Same root cause as the footer wipe box: .framer-1xn6oyc has a FIXED
 * height (726px / 959px depending on breakpoint) while the image inside it
 * (.framer-eqxfzt / .framer-xv20cs / .framer-1cnzxch) is sized by a 4:3
 * aspect-ratio driven by the fluid viewport width — so the two grow at
 * different rates and one crops the other more and more as the width
 * changes within each breakpoint bucket:
 *   - 810–1511.98px: image is bottom-anchored → growing height crops the
 *     TOP (sky) more and more as width approaches 1512px.
 *   - 1512–1919.98px: image is top-anchored → growing height crops the
 *     BOTTOM (car) more and more as width approaches 1920px.
 *   - ≥1920px: overflow:visible + a fixed top:-481px offset (tuned only
 *     for exactly 1920px) falls further out of sync as width grows past
 *     1920px, so the image increasingly spills into/gets covered by the
 *     footer below.
 *
 * Fix: make the box's height (and the section's reserved flow space) track
 * the same 4:3 ratio as the image at every width ≥810px, so the container
 * is always exactly the image's size — nothing to crop, nothing to spill,
 * regardless of viewport width. (Mobile ≤809.98px is untouched — already
 * correct per the user.)
 */
@media (min-width: 810px) {
	.framer-wDTYX .framer-1xn6oyc {
		aspect-ratio: 4 / 3 !important;
		height: auto !important;
		bottom: 0 !important;
		overflow: hidden !important;
	}

	.framer-wDTYX .framer-eqxfzt,
	.framer-wDTYX .framer-xv20cs,
	.framer-wDTYX .framer-1cnzxch {
		height: 100% !important;
		top: 0 !important;
		bottom: auto !important;
	}

	.framer-wDTYX .framer-1cii0wq {
		height: min-content !important;
		min-height: 0 !important;
		padding-bottom: 75% !important;
	}
}