/**
 * LOVSETTI Home page styles. Enqueued only on the front page (see
 * lovsetti_theme_home_assets() in functions.php).
 *
 * Section map: Hero (Stage 11.5) / How It Works (step-list.php, styled in
 * components.css) / Indoor+Outdoor split / Featured Projects / Custom
 * Furniture / Foshan Manufacturing / Materials & Craftsmanship (Stage
 * 11.7) / Trusted by Clients (Stage 11.7) / Final CTA (Stage 11.7 —
 * replaced the Stage 11.6 editorial-split version with a short full-bleed
 * banner). Product/project cards, buttons, links, section headings and
 * the image placeholder system are all shared sitewide in components.css
 * — this file only holds what's genuinely unique to Home's own layout.
 *
 * All motion here is pure CSS (animation on load), not the JS-driven
 * scroll-reveal system — the Hero must render fully visible with zero
 * JavaScript, and prefers-reduced-motion removes the animation entirely
 * rather than leaving anything permanently hidden.
 */

/* ===== Hero =====
 * Full-screen background video/poster hero (Stage 11.5). The section is
 * pulled up by the sticky header's own height (margin-top) and padded back
 * down by the same amount (padding-top) so the video fills the space
 * behind the transparent Home header while the content column still
 * centers itself in the space below it — see the "Header over Hero"
 * block further down for the header's own transparent state.
 */
.ls-home-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: 100svh;
	margin-top: calc(-1 * var(--ls-header-height));
	padding-top: var(--ls-header-height);
	padding-bottom: var(--ls-space-8);
	color: var(--ls-white);
}

@media (min-width: 768px) {
	.ls-home-hero {
		min-height: 720px;
		height: 100svh;
	}
}

@media (min-width: 1024px) {
	.ls-home-hero {
		margin-top: calc(-1 * var(--ls-header-height-desktop));
		padding-top: var(--ls-header-height-desktop);
	}
}

/* Poster image / video / overlay: all fill the section behind the content. */
.ls-home-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.ls-home-hero__poster,
.ls-home-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.ls-home-hero__poster--neutral {
	background: var(--ls-black);
}

.ls-home-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(20, 20, 20, 0.48) 0%,
		rgba(20, 20, 20, 0.28) 45%,
		rgba(20, 20, 20, 0.14) 100%
	);
}

@media (prefers-reduced-motion: reduce) {
	.ls-home-hero__video {
		display: none;
	}
}

/* Stage 19: the hero video is desktop-only -- the inline script in
   front-page.php refuses to attach a src below 1024px -- but the element was
   still being laid out on phones, and a laid-out <video> fetches its poster
   attribute. That poster is a fixed 1536x864 file (151KB) which is not
   responsive, so every mobile visit paid for a full-size still of a video
   that never plays, on top of the 62KB the <img> beneath had already chosen
   from its srcset.

   display:none removes the element from the mobile render entirely, so the
   poster is never requested. Deliberately CSS rather than dropping the poster
   attribute: the video is absolutely positioned over .ls-home-hero__poster,
   and a poster-less, src-less <video> is painted inconsistently across
   browsers, which risked covering the image underneath. Mirrors the
   reduced-motion rule directly above, which hides it for the same reason. */
@media (max-width: 1023.98px) {
	.ls-home-hero__video {
		display: none;
	}
}

/* Content column: left-aligned, above the media layer. */
.ls-home-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
}

.ls-home-hero__content {
	max-width: 600px;
}

@media (min-width: 1024px) {
	.ls-home-hero__content {
		max-width: 680px;
	}
}

.ls-home-hero .ls-eyebrow {
	color: rgba(255, 255, 255, 0.72);
}

.ls-home-hero__title {
	color: var(--ls-white);
	font-size: 36px;
	margin-bottom: var(--ls-space-5);
}

@media (min-width: 768px) {
	.ls-home-hero__title {
		font-size: 48px;
	}
}

@media (min-width: 1024px) {
	.ls-home-hero__title {
		font-size: 60px;
	}
}

.ls-home-hero__text {
	color: rgba(255, 255, 255, 0.82);
	max-width: 46ch;
	margin-bottom: var(--ls-space-6);
}

.ls-home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ls-space-4);
	margin-bottom: var(--ls-space-4);
}

.ls-home-hero__tertiary {
	margin-top: var(--ls-space-2);
	color: rgba(255, 255, 255, 0.82);
}

/* Primary/secondary CTAs: light buttons for a dark video background. */
.ls-home-hero .ls-btn-primary {
	background: var(--ls-white);
	color: var(--ls-black);
	border-color: var(--ls-white);
}

.ls-home-hero .ls-btn-secondary {
	background: transparent;
	color: var(--ls-white);
	border-color: var(--ls-white);
}

.ls-home-hero .ls-btn-secondary:hover,
.ls-home-hero .ls-btn-secondary:focus-visible {
	background: var(--ls-white);
	color: var(--ls-black);
}

@media (prefers-reduced-motion: no-preference) {
	.ls-home-hero__content {
		animation: ls-home-fade-up 700ms ease both;
	}
}

@keyframes ls-home-fade-up {
	from {
		opacity: 0;
		transform: translateY(14px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ===== Header over Hero (Home only, before scroll) =====
 * .is-scrolled is the existing sitewide toggle from theme.js. body.home is
 * WordPress core's own is_front_page() class (see get_body_class() in
 * wp-includes/post-template.php) — not a class this theme defines — so
 * this needs no PHP changes and stays correctly scoped to the front page
 * even if a separate posts page is configured later (that gets .blog, a
 * different class, from is_home()).
 */
body.home .ls-site-header:not(.is-scrolled) {
	background: transparent;
	border-bottom-color: transparent;
}

body.home .ls-site-header:not(.is-scrolled) .ls-site-title,
body.home .ls-site-header:not(.is-scrolled) .ls-nav-link {
	color: var(--ls-white);
}

body.home .ls-site-header:not(.is-scrolled) .ls-nav-link:hover,
body.home .ls-site-header:not(.is-scrolled) .ls-nav-link:focus-visible {
	border-bottom-color: var(--ls-white);
}

body.home .ls-site-header:not(.is-scrolled) .ls-menu-toggle__bars,
body.home .ls-site-header:not(.is-scrolled) .ls-menu-toggle__bars::before,
body.home .ls-site-header:not(.is-scrolled) .ls-menu-toggle__bars::after {
	background: var(--ls-white);
}

body.home .ls-site-header:not(.is-scrolled) .ls-btn-primary {
	background: var(--ls-white);
	color: var(--ls-black);
	border-color: var(--ls-white);
}

/* ===== Indoor + Outdoor split =====
 * Large image panels with text-over-image, same media/overlay/content
 * layering approach as the Hero (see .ls-home-hero__media above) but
 * bottom-anchored and sized as two fixed-height panels, not full-screen.
 */
.ls-home-worlds__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ls-space-6);
}

@media (min-width: 1024px) {
	.ls-home-worlds__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--ls-space-7);
	}
}

.ls-home-world-panel {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	min-height: 460px;
	overflow: hidden;
	color: var(--ls-white);
}

@media (min-width: 1024px) {
	.ls-home-world-panel {
		min-height: 620px;
	}
}

.ls-home-world-panel__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.ls-home-world-panel__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.ls-home-world-panel__image--neutral {
	background: var(--ls-black);
}

.ls-home-world-panel__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(20, 20, 20, 0.75) 0%,
		rgba(20, 20, 20, 0.25) 50%,
		rgba(20, 20, 20, 0.05) 100%
	);
}

.ls-home-world-panel__content {
	position: relative;
	z-index: 1;
	padding: var(--ls-space-6);
}

@media (min-width: 1024px) {
	.ls-home-world-panel__content {
		padding: var(--ls-space-8);
	}
}

.ls-home-world-panel__title {
	margin-bottom: var(--ls-space-3);
}

.ls-home-world-panel__title a {
	color: var(--ls-white);
}

.ls-home-world-panel__text {
	color: rgba(255, 255, 255, 0.82);
	max-width: 38ch;
	margin-bottom: var(--ls-space-4);
}

.ls-home-world-panel__link {
	color: var(--ls-white);
	border-bottom-color: rgba(255, 255, 255, 0.4);
}

.ls-home-world-panel__link:hover,
.ls-home-world-panel__link:focus-visible {
	border-color: var(--ls-white);
}

/* ===== Featured Projects =====
 * Horizontal scroll-snap carousel (Stage 11.8), replacing the old static
 * 4-column .ls-card-grid. Structure: .ls-container-capped header (heading
 * + controls) / full-bleed __viewport (overflow-x:auto) / __track (flex,
 * the thing that's actually wider than the viewport). The track's own
 * left inset is calculated to match .ls-container's *computed* left edge
 * (its padding plus however much its margin-inline:auto centering adds
 * beyond --ls-container-max) rather than living inside .ls-container
 * itself, so the first card lines up with the heading above it while
 * later cards are free to run past the container's right edge for the
 * intentional "partial next card" peek.
 */
.ls-home-projects__header {
	display: flex;
	flex-direction: column;
	gap: var(--ls-space-4);
	margin-bottom: var(--ls-space-7);
}

@media (min-width: 768px) {
	.ls-home-projects__header {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--ls-space-6);
	}
}

.ls-home-projects__heading-group .ls-section-heading {
	margin-bottom: var(--ls-space-3);
}

.ls-home-projects__intro {
	color: var(--ls-text-muted);
	max-width: 52ch;
	margin: 0;
}

.ls-home-projects__controls {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--ls-space-6);
}

.ls-home-projects__head-link {
	white-space: nowrap;
}

.ls-home-projects__arrows {
	display: flex;
	gap: var(--ls-space-3);
	flex-shrink: 0;
}

.ls-home-projects__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 1px solid var(--ls-black);
	border-radius: 50%;
	background: transparent;
	color: var(--ls-black);
	transition: background var(--ls-transition-fast), color var(--ls-transition-fast),
		opacity var(--ls-transition-fast);
}

.ls-home-projects__arrow svg {
	width: 18px;
	height: 18px;
}

.ls-home-projects__arrow:hover,
.ls-home-projects__arrow:focus-visible {
	background: var(--ls-black);
	color: var(--ls-white);
}

.ls-home-projects__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.ls-home-projects__arrow:disabled:hover {
	background: transparent;
	color: var(--ls-black);
}

.ls-home-projects__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.ls-home-projects__viewport::-webkit-scrollbar {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.ls-home-projects__viewport {
		scroll-behavior: auto;
	}
}

.ls-home-projects__track {
	display: flex;
	gap: var(--ls-space-6);
	padding-inline-start: var(--ls-container-padding);
	padding-inline-end: var(--ls-container-padding);
	padding-block: var(--ls-space-2);
}

@media (min-width: 768px) {
	.ls-home-projects__viewport {
		/* A max-width cap alone still lets the viewport's own right edge
		   (its clientWidth, which is what clips scrolled content) land
		   40px past where a normal .ls-container's content actually ends,
		   since padding on an overflow container doesn't pull in the
		   at-rest clip boundary the way margin does. Matching .ls-container
		   with a real inset on both sides -- via margin, not padding --
		   makes the carousel's visible width equal that section's content
		   width exactly, on both edges. Flat here below the container's own
		   cap point; replaced with true centering once that cap is reached
		   (below). */
		margin-inline: var(--ls-container-padding);
	}

	.ls-home-projects__track {
		/* Start inset now comes from the viewport's own margin above --
		   without zeroing this out, card 1 would be pushed in twice. This
		   rule must load after the base .ls-home-projects__track block
		   above so it wins the cascade at equal specificity. */
		padding-inline-start: 0;
	}
}

@media (min-width: 1320px) {
	.ls-home-projects__viewport {
		/* Once .ls-container itself is cap-and-centered rather than just
		   padded, mirror that exactly: a fixed content width, centered with
		   a real auto margin. 100vw-based calc() was tried here first, but
		   vw doesn't subtract the scrollbar while margin:auto does, so it
		   drifted a few px off .ls-container's true centered position. */
		max-width: calc(var(--ls-container-max) - 2 * var(--ls-container-padding));
		margin-inline: auto;
	}
}

.ls-home-projects__card {
	flex: 0 0 auto;
	width: 84vw;
	scroll-snap-align: start;
}

@media (min-width: 768px) {
	.ls-home-projects__card {
		width: 375px;
	}
}

@media (min-width: 1320px) {
	.ls-home-projects__card {
		/* Recalculated for the corrected ~1240px content width (1320px
		   container minus 40px inset each side) with a 30px gap: 3 full
		   cards + ~19% peek of the 4th. */
		width: 360px;
	}

	.ls-home-projects__track {
		/* Scoped to this component only -- var(--ls-space-6) elsewhere
		   (e.g. Materials) stays 32px. Slightly tighter gap here makes
		   360px cards land inside the 15-30% peek target. */
		gap: 30px;
	}
}

.ls-home-projects__image-link {
	display: block;
}

/* Taller than the shared .ls-ratio-4-3 (used elsewhere, e.g. Materials,
   which must not change) -- overridden here for this element specifically
   rather than touching that shared class. Loads after components.css, so
   this wins on equal specificity without needing !important. Mobile gets a
   milder ratio than desktop so a full-width card doesn't turn into an
   overly tall column; the editorial 4:5 feel is reserved for the wider
   tablet/desktop cards where there's room for it. */
.ls-home-projects__image {
	aspect-ratio: 1 / 1.1;
}

@media (min-width: 768px) {
	.ls-home-projects__image {
		aspect-ratio: 4 / 5;
	}
}

.ls-home-projects__image img {
	transition: transform 300ms ease;
}

.ls-home-projects__card:hover .ls-home-projects__image img,
.ls-home-projects__card:focus-within .ls-home-projects__image img {
	transform: scale(1.02);
}

.ls-home-projects__title {
	margin: var(--ls-space-4) 0 0;
	font-size: 18px;
	font-weight: var(--ls-font-weight-regular);
	color: var(--ls-text);
}

@media (min-width: 1024px) {
	.ls-home-projects__title {
		font-size: 20px;
	}
}

.ls-home-projects__title a {
	color: inherit;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size var(--ls-transition-base);
}

.ls-home-projects__card:hover .ls-home-projects__title a,
.ls-home-projects__card:focus-within .ls-home-projects__title a {
	background-size: 100% 1px;
}

/* ===== Custom Furniture / Final CTA shared editorial split ===== */
.ls-home-editorial-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ls-space-7);
	align-items: center;
}

@media (min-width: 1024px) {
	.ls-home-editorial-split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--ls-space-9);
	}
}

/* ===== Custom Furniture: idea -> reference -> finished piece ===== */
.ls-home-custom__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ls-space-8);
	align-items: center;
}

@media (min-width: 1024px) {
	.ls-home-custom__layout {
		/* Text ~33% / visuals+finished ~67% combined at this tier. */
		grid-template-columns: minmax(0, 33fr) minmax(0, 27fr) minmax(0, 40fr);
		gap: var(--ls-space-6);
	}
}

@media (min-width: 1440px) {
	.ls-home-custom__layout {
		/* Full three-zone split: text 28% / sketch+phone 27% / finished 45%.
		   The section itself now shares Featured Projects' 1320px
		   .ls-container (1240px content), so these ratios apply to that
		   fixed width rather than the wider .ls-container-wide box used
		   previously -- finished still gets the largest share. */
		grid-template-columns: minmax(0, 28fr) minmax(0, 27fr) minmax(0, 45fr);
		gap: var(--ls-space-8);
	}
}

.ls-home-custom__heading {
	font-size: 34px;
}

@media (min-width: 768px) {
	.ls-home-custom__heading {
		font-size: 40px;
	}
}

@media (min-width: 1024px) {
	.ls-home-custom__heading {
		font-size: 46px;
	}
}

@media (min-width: 1440px) {
	.ls-home-custom__heading {
		font-size: 54px;
	}
}

.ls-home-custom__text {
	color: var(--ls-text-muted);
	max-width: 460px;
	line-height: 1.6;
}

.ls-home-custom__text--last {
	margin-bottom: var(--ls-space-6);
}

/* ----- Center: sketch + phone ----- */
.ls-home-custom__visuals {
	position: relative;
	max-width: 300px;
	margin-inline: auto;
	padding-bottom: var(--ls-space-8);
}

@media (min-width: 1024px) {
	.ls-home-custom__visuals {
		max-width: none;
		margin-inline: 0;
		padding-bottom: 0;
	}
}

.ls-home-custom__sketch {
	max-width: 260px;
	margin-inline: auto;
	background: var(--ls-surface);
	padding: var(--ls-space-3) var(--ls-space-3) var(--ls-space-5);
	border-radius: 3px;
	box-shadow: 0 20px 44px rgba(32, 31, 31, 0.14);
	transform: rotate(-3deg);
}

@media (min-width: 1024px) {
	.ls-home-custom__sketch {
		max-width: 250px;
		margin-inline: 0;
	}
}

@media (min-width: 1440px) {
	.ls-home-custom__sketch {
		max-width: 290px;
	}
}

/* Phone: normal flow with an overlap-suggesting negative margin below
   1024px (safer than absolute positioning at unpredictable stack heights);
   true absolute overlap over the sketch's lower-right once there's room. */
.ls-home-custom__phone {
	position: relative;
	z-index: 1;
	width: 180px;
	margin: calc(var(--ls-space-6) * -1) 0 0 auto;
	background: var(--ls-black);
	border-radius: 20px;
	padding: 10px 8px;
	box-shadow: 0 16px 32px rgba(32, 31, 31, 0.22);
	transform: rotate(5deg);
}

.ls-home-custom__phone::before {
	content: "";
	display: block;
	width: 40px;
	height: 5px;
	margin: 0 auto 8px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.35);
}

@media (min-width: 1024px) {
	.ls-home-custom__phone {
		position: absolute;
		width: 170px;
		right: 4%;
		bottom: 4%;
		margin: 0;
	}
}

@media (min-width: 1440px) {
	.ls-home-custom__phone {
		width: 210px;
		right: 2%;
		bottom: 6%;
	}
}

.ls-home-custom__phone-screen {
	background: var(--ls-bg);
	border-radius: 12px;
	overflow: hidden;
}

.ls-home-custom__phone-image {
	aspect-ratio: 3 / 4;
}

.ls-home-custom__phone-message {
	padding: var(--ls-space-2) var(--ls-space-2) var(--ls-space-3);
}

.ls-home-custom__phone-bubble {
	display: block;
	max-width: 92%;
	margin-top: 6px;
	padding: 6px 10px;
	border: 1px solid var(--ls-border-light);
	border-radius: 10px;
	background: var(--ls-surface);
	color: var(--ls-text);
	font-size: 11px;
	line-height: 1.4;
}

.ls-home-custom__phone-bubble--meta {
	color: var(--ls-text-muted);
}

/* ----- Right: finished piece, the strongest visual in the section ----- */
.ls-home-custom__finished {
	aspect-ratio: 8 / 7;
	border-radius: 3px;
}

/* ===== Foshan Manufacturing =====
 * Full-width dark band, same media/overlay layering approach as the Hero
 * but with a flat overlay (content is centered, not directional) and a
 * plain dark background when no photo is configured.
 */
.ls-home-manufacturing {
	position: relative;
	isolation: isolate;
	color: var(--ls-white);
	padding-block: var(--ls-space-9);
}

.ls-home-manufacturing__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: var(--ls-black);
}

.ls-home-manufacturing__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.ls-home-manufacturing__overlay {
	position: absolute;
	inset: 0;
	background: rgba(20, 20, 20, 0.55);
}

.ls-home-manufacturing__inner {
	position: relative;
	z-index: 1;
}

.ls-home-manufacturing__head {
	text-align: center;
	max-width: var(--ls-container-narrow-max);
	margin-inline: auto;
	margin-bottom: var(--ls-space-8);
}

.ls-home-manufacturing__heading {
	color: var(--ls-white);
	margin-bottom: var(--ls-space-3);
}

.ls-home-manufacturing__text {
	color: rgba(255, 255, 255, 0.78);
	margin: 0;
}

.ls-home-manufacturing__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ls-space-6);
	text-align: center;
}

@media (min-width: 640px) {
	.ls-home-manufacturing__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1024px) {
	.ls-home-manufacturing__grid {
		grid-template-columns: repeat(5, 1fr);
		gap: var(--ls-space-5);
	}
}

.ls-home-manufacturing__icon {
	display: block;
	width: 32px;
	height: 32px;
	margin: 0 auto var(--ls-space-3);
	color: var(--ls-white);
}

.ls-home-manufacturing__icon svg {
	width: 100%;
	height: 100%;
}

.ls-home-manufacturing__item-title {
	font-size: 13px;
	letter-spacing: var(--ls-tracking-nav);
	text-transform: uppercase;
	color: var(--ls-white);
	font-weight: var(--ls-font-weight-medium);
	margin: 0 0 var(--ls-space-1);
}

.ls-home-manufacturing__item-text {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.68);
	margin: 0;
}

/* ===== Materials & Craftsmanship =====
 * Image-led card grid, deliberately no icons — just a 4:3 photo (see the
 * .ls-ratio-4-3 addition in components.css) and a label below, reusing
 * the sitewide .ls-ratio/.ls-placeholder system.
 */
.ls-home-materials__head {
	text-align: center;
	max-width: var(--ls-container-narrow-max);
	margin-inline: auto;
	margin-bottom: var(--ls-space-7);
}

.ls-home-materials__intro {
	color: var(--ls-text-muted);
	margin: 0;
}

.ls-home-materials__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ls-space-5);
}

@media (min-width: 640px) {
	.ls-home-materials__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1024px) {
	.ls-home-materials__grid {
		grid-template-columns: repeat(5, 1fr);
		gap: var(--ls-space-6);
	}
}

.ls-home-material__media {
	margin-bottom: var(--ls-space-3);
}

.ls-home-material__media img {
	transition: transform var(--ls-transition-base);
}

.ls-home-material:hover .ls-home-material__media img,
.ls-home-material:focus-within .ls-home-material__media img {
	transform: scale(1.04);
}

.ls-home-material__label {
	font-size: 12px;
	letter-spacing: var(--ls-tracking-nav);
	text-transform: uppercase;
	text-align: center;
	font-weight: var(--ls-font-weight-medium);
	color: var(--ls-text);
	margin: 0;
}

/* ===== Trusted by Clients Worldwide =====
 * Light neutral band (soft surface tint, not dark like Manufacturing) of
 * capability points — not statistics/testimonials, none are verified yet
 * (see front-page.php). Dividers are desktop-only (5-in-a-row); removed
 * below that tier since a divider mid-wrapped-row reads as a layout bug.
 */
.ls-home-trust {
	background: var(--ls-surface-soft);
	padding-block: var(--ls-space-8);
}

.ls-home-trust__head {
	text-align: center;
	max-width: var(--ls-container-narrow-max);
	margin-inline: auto;
	margin-bottom: var(--ls-space-7);
}

.ls-home-trust__intro {
	color: var(--ls-text-muted);
	margin: 0;
}

.ls-home-trust__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ls-space-7);
	text-align: center;
}

@media (min-width: 640px) {
	.ls-home-trust__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--ls-space-6);
	}
}

@media (min-width: 1024px) {
	.ls-home-trust__grid {
		grid-template-columns: repeat(5, 1fr);
		gap: 0;
	}
}

.ls-home-trust__item {
	padding-inline: var(--ls-space-2);
}

@media (min-width: 1024px) {
	.ls-home-trust__item {
		padding-inline: var(--ls-space-5);
		border-left: 1px solid var(--ls-border-light);
	}

	.ls-home-trust__item:first-child {
		border-left: none;
	}
}

.ls-home-trust__icon {
	display: block;
	width: 30px;
	height: 30px;
	margin: 0 auto var(--ls-space-3);
	color: var(--ls-text);
}

.ls-home-trust__icon svg {
	width: 100%;
	height: 100%;
}

.ls-home-trust__item-title {
	font-size: 14px;
	font-weight: var(--ls-font-weight-medium);
	margin: 0 0 var(--ls-space-2);
}

.ls-home-trust__item-text {
	font-size: 13px;
	color: var(--ls-text-muted);
	margin: 0;
}

/* ===== Final CTA =====
 * Short full-bleed banner (Stage 11.7 — replaces the Stage 11.6 50/50
 * editorial split). Same media/overlay/content layering as the Hero, but
 * centered and much shorter. min-height only, no hard height, so it
 * grows for content instead of clipping (same reasoning as the Hero's
 * own mobile behavior). Mobile stays content-driven at 280px (unchanged).
 * The 768/1024/1440 tiers below are set to match Trusted by Clients
 * Worldwide's own real rendered height at each of those widths (406px /
 * 465px / 586px there, measured live -- not the section's own original
 * 320/300/260 values) so the two sections read as equal height; Trusted
 * itself is untouched, its 5-card grid wraps to 2 rows at 768px which is
 * why that tier is taller than 1024's.
 */
.ls-home-final-cta {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 280px;
	overflow: hidden;
	color: var(--ls-white);
	text-align: center;
	padding-block: var(--ls-space-6);
}

@media (min-width: 768px) {
	.ls-home-final-cta {
		min-height: 586px;
	}
}

@media (min-width: 1024px) {
	.ls-home-final-cta {
		min-height: 465px;
	}
}

@media (min-width: 1440px) {
	.ls-home-final-cta {
		min-height: 406px;
	}
}

.ls-home-final-cta__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.ls-home-final-cta__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.ls-home-final-cta__image--neutral {
	background: var(--ls-black);
}

.ls-home-final-cta__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
}

.ls-home-final-cta__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 720px;
}

.ls-home-final-cta__heading {
	color: var(--ls-white);
	margin-bottom: var(--ls-space-3);
}

.ls-home-final-cta__text {
	color: rgba(255, 255, 255, 0.85);
	margin: 0 0 var(--ls-space-2);
}

.ls-home-final-cta__subtext {
	color: rgba(255, 255, 255, 0.68);
	margin: 0 0 var(--ls-space-5);
}

.ls-home-final-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ls-space-4);
}

.ls-home-final-cta .ls-btn-primary {
	background: var(--ls-white);
	color: var(--ls-black);
	border-color: var(--ls-white);
}

.ls-home-final-cta .ls-btn-secondary {
	background: transparent;
	color: var(--ls-white);
	border-color: var(--ls-white);
}

.ls-home-final-cta .ls-btn-secondary:hover,
.ls-home-final-cta .ls-btn-secondary:focus-visible {
	background: var(--ls-white);
	color: var(--ls-black);
}

/* ===== Footer spacing fix (Home only) =====
 * .ls-site-footer's sitewide margin-top: var(--ls-space-9) (components.css)
 * is intentional breathing room after a normal padded content section, and
 * every other page still wants it. Home's last section is now the
 * full-bleed Final CTA banner above, which already ends in its own dark
 * padding-bottom — stacking the extra 96px margin on top of that read as
 * an unintended blank band between the CTA and the Footer. Zeroed here
 * for Home only; the global rule (and every other page's footer spacing)
 * is untouched.
 */
body.home .ls-site-footer {
	margin-top: 0;
}