/**
 * LOVSETTI Indoor Furniture page styles. Enqueued only on the
 * page-indoor-furniture.php template (see lovsetti_theme_indoor_furniture_assets()
 * in functions.php).
 *
 * Reuses sitewide primitives (.ls-container, .ls-btn, .ls-eyebrow,
 * .ls-section-heading, .ls-ratio-*, the placeholder system) from
 * base/layout/components.css rather than redefining them -- this file only
 * holds what's unique to this page's own eight sections.
 *
 * Section map: 01 Hero / 02 Explore by Category / 03 Featured Furniture
 * (carousel) / 04 Why Choose LOVSETTI / 05 Services We Offer / 06 Custom
 * Furniture Process / 07 How We Support Your Project / 08 Final CTA.
 */

/* ===== 01 Hero ===== */
.ls-indoor-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: 560px;
	color: var(--ls-white);
	padding-block: var(--ls-space-8) var(--ls-space-7);
}

@media (min-width: 768px) {
	.ls-indoor-hero {
		min-height: 650px;
	}
}

@media (min-width: 1024px) {
	.ls-indoor-hero {
		min-height: 820px;
	}
}

@media (min-width: 1440px) {
	.ls-indoor-hero {
		min-height: 820px;
	}
}

.ls-indoor-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

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

.ls-indoor-hero__image--neutral {
	background: var(--ls-black);
}

.ls-indoor-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.52) 0%, rgba(0, 0, 0, 0.40) 52%, rgba(0, 0, 0, 0.28) 100%);
}

/* .ls-indoor-hero above is a flex container, so this .ls-container is a
 * flex item and would otherwise shrink-wrap to its content and then centre
 * itself on its own margin-inline: auto -- pushing the hero copy hundreds
 * of pixels in from the left edge every section below it starts on. The
 * explicit width restores ordinary .ls-container behaviour (max-width,
 * auto margins, container padding) so the hero copy shares that left edge.
 * This hero is used by Indoor Furniture, Outdoor and the Projects archive
 * -- all three want the aligned treatment. */
.ls-indoor-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
}

.ls-indoor-hero__content {
	max-width: 560px;
}

.ls-indoor-hero .ls-eyebrow {
	color: rgba(255, 255, 255, 0.9);
}

.ls-indoor-hero__title {
	color: var(--ls-white);
	font-size: 36px;
	font-weight: var(--ls-font-weight-light);
	line-height: 1.14;
	margin: var(--ls-space-4) 0 var(--ls-space-5);
}

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

@media (min-width: 1440px) {
	.ls-indoor-hero__title {
		font-size: 56px;
	}
}

.ls-indoor-hero__text {
	color: rgba(255, 255, 255, 0.9);
	max-width: 480px;
}

.ls-indoor-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ls-space-4);
	margin-top: var(--ls-space-6);
}

.ls-indoor-hero .ls-btn-secondary {
	border-color: rgba(255, 255, 255, 0.7);
	color: var(--ls-white);
}

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

/* ===== 02 Explore by Category ===== */
.ls-indoor-category__head {
	max-width: var(--ls-container-narrow-max);
	margin-bottom: var(--ls-space-7);
}

.ls-indoor-category__intro {
	color: var(--ls-text-muted);
	margin: 0;
}

.ls-indoor-category__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ls-space-4);
}

@media (min-width: 768px) {
	.ls-indoor-category__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--ls-space-5);
	}
}

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

.ls-indoor-category__card {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 3px;
}

.ls-indoor-category__image img,
.ls-indoor-category__image .ls-placeholder {
	transition: transform 400ms ease;
}

.ls-indoor-category__card:hover .ls-indoor-category__image img,
.ls-indoor-category__card:focus-visible .ls-indoor-category__image img {
	transform: scale(1.02);
}

.ls-indoor-category__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.58) 100%);
	pointer-events: none;
}

.ls-indoor-category__label {
	position: absolute;
	left: var(--ls-space-4);
	right: var(--ls-space-4);
	bottom: var(--ls-space-4);
	color: var(--ls-white);
	font-size: 15px;
	font-weight: var(--ls-font-weight-medium);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* ===== 03 Explore Interior Styles (carousel) =====
 * Same viewport/track mechanics as the Home Featured Projects carousel
 * (proven across several rounds of sizing fixes there) -- full-bleed
 * section, only the header lives inside .ls-container, so the track can
 * bleed to the right for the "partial next card" peek. Duplicated rather
 * than sharing selectors so that section's CSS stays untouched. Cards are
 * wider than a typical product carousel (515px desktop, ~2 full + peek
 * rather than ~3 + peek) since these are large editorial lifestyle images,
 * not product photography, and carry no link/CTA -- purely inspirational.
 */
.ls-indoor-styles__header {
	display: flex;
	flex-direction: column;
	gap: var(--ls-space-4);
	margin-bottom: var(--ls-space-7);
}

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

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

.ls-indoor-styles__intro {
	color: var(--ls-text-muted);
	max-width: 56ch;
	margin: 0;
}

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

.ls-indoor-styles__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--ls-border);
	background: transparent;
	color: var(--ls-text);
	cursor: pointer;
	transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.ls-indoor-styles__arrow:hover:not(:disabled),
.ls-indoor-styles__arrow:focus-visible:not(:disabled) {
	background: var(--ls-black);
	border-color: var(--ls-black);
	color: var(--ls-white);
}

.ls-indoor-styles__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

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

.ls-indoor-styles__viewport::-webkit-scrollbar {
	display: none;
}

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

.ls-indoor-styles__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-indoor-styles__viewport {
		margin-inline: var(--ls-container-padding);
	}

	.ls-indoor-styles__track {
		padding-inline-start: 0;
	}
}

@media (min-width: 1320px) {
	.ls-indoor-styles__viewport {
		max-width: calc(var(--ls-container-max) - 2 * var(--ls-container-padding));
		margin-inline: auto;
	}
}

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

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

@media (min-width: 1320px) {
	.ls-indoor-styles__card {
		/* ~2 full cards + ~28% of a 3rd within the capped ~1240px content
		   width (40px inset each side, 32px gap) -- wider than the previous
		   360px product-card width per this section's new "large editorial
		   lifestyle image" brief. */
		width: 515px;
	}
}

.ls-indoor-styles__image {
	aspect-ratio: 4 / 3;
}

.ls-indoor-styles__image img {
	transition: transform 300ms ease;
}

.ls-indoor-styles__card:hover .ls-indoor-styles__image img {
	transform: scale(1.02);
}

.ls-indoor-styles__title {
	margin: var(--ls-space-4) 0 0;
	font-size: 17px;
	font-weight: var(--ls-font-weight-regular);
	color: var(--ls-text);
}

/* ===== 04 Why Choose LOVSETTI ===== */
.ls-indoor-why__head {
	max-width: var(--ls-container-narrow-max);
	margin-bottom: var(--ls-space-7);
}

.ls-indoor-why__head .ls-section-heading {
	margin-bottom: 24px;
}

.ls-indoor-why__intro {
	color: var(--ls-text-muted);
	margin: 0;
}

.ls-indoor-why__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ls-space-5);
}

/* The right stack (title + paragraph + 4-item list, twice) turns out to be
   the more wrap-sensitive column, not the left one -- its actual text
   width is only ~60% of an already-narrower-than-1440 grid column, and
   because the grid's align-items: stretch matches both columns to the
   tallest one, extra wrapping on the right inflates the left column too.
   An even 1fr/1fr split at this narrower width keeps both right-hand cards
   close to their desktop (1280+) line-wrap pattern; the wider 1.15fr/1fr
   split that favors the left column only kicks back in at 1280, where
   there's enough absolute width for both sides to wrap the same regardless. */
@media (min-width: 1024px) {
	.ls-indoor-why__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--ls-space-6);
		align-items: stretch;
	}
}

@media (min-width: 1280px) {
	.ls-indoor-why__grid {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	}
}

.ls-indoor-why__card {
	background: var(--ls-surface-soft);
	border-radius: 4px;
	overflow: hidden;
}

.ls-indoor-why__card--large {
	display: flex;
	flex-direction: column;
}

.ls-indoor-why__card--large .ls-indoor-why__image {
	aspect-ratio: 4 / 3;
}

/* A raw 4:3 ratio stays fine at mobile width, but once the card is close to
   full container width (>=768, still stacked single-column) or is the
   dedicated left column (>=1024) it produces a very tall image -- ~500-700px
   unstretched -- so both tiers get an explicit compact height instead.
   object-fit: cover (see .ls-ratio in components.css) fills either box
   with no distortion. */
@media (min-width: 768px) {
	.ls-indoor-why__card--large .ls-indoor-why__image {
		aspect-ratio: auto;
		height: 420px;
	}
}

@media (min-width: 1024px) {
	.ls-indoor-why__card--large .ls-indoor-why__image {
		height: 324px;
	}
}

.ls-indoor-why__card--large .ls-indoor-why__body {
	padding: 28px 32px;
}

.ls-indoor-why__stack {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

@media (min-width: 1024px) {
	.ls-indoor-why__stack {
		height: 100%;
	}
}

.ls-indoor-why__card--small {
	display: flex;
	flex-direction: row-reverse;
	align-items: stretch;
	flex: 1;
}

.ls-indoor-why__card--small .ls-indoor-why__body {
	flex: 1 1 60%;
	padding: var(--ls-space-5);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Tighter desktop-only padding: below 1024 the small cards are stacked
   full-width (not compact right-hand cards), so the roomier original
   padding reads fine there and shouldn't be pulled in just to hit the
   desktop 1+2 layout's own target. */
@media (min-width: 1024px) {
	.ls-indoor-why__card--small .ls-indoor-why__body {
		padding: 30px 34px;
	}
}

.ls-indoor-why__card--small .ls-indoor-why__image {
	flex: 0 0 38%;
	aspect-ratio: unset;
	height: auto;
}

.ls-indoor-why__title {
	margin: 0 0 var(--ls-space-3);
	font-size: 20px;
	font-weight: var(--ls-font-weight-regular);
}

.ls-indoor-why__card--small .ls-indoor-why__title {
	font-size: 17px;
}

.ls-indoor-why__text {
	color: var(--ls-text-muted);
	line-height: 1.5;
	margin: 0 0 var(--ls-space-3);
}

.ls-indoor-why__card--small .ls-indoor-why__text {
	font-size: 13px;
	margin-bottom: var(--ls-space-2);
}

.ls-indoor-why__tags {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--ls-space-2);
	margin: 18px 0 0;
	padding: 0;
}

.ls-indoor-why__tags li {
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ls-text-soft);
	border: 1px solid var(--ls-border-light);
	border-radius: 20px;
	padding: 6px 14px;
}

.ls-indoor-why__list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 13px;
	color: var(--ls-text-muted);
}

.ls-indoor-why__list li {
	position: relative;
	padding-left: 14px;
	margin-bottom: 4px;
}

.ls-indoor-why__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 5px;
	height: 1px;
	background: var(--ls-text-soft);
}

.ls-indoor-page .ls-indoor-why .ls-indoor-why__card {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	background: var(--ls-black);
	overflow: hidden;
}

.ls-indoor-page .ls-indoor-why .ls-indoor-why__card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.08) 0%,
			rgba(0, 0, 0, 0.18) 42%,
			rgba(0, 0, 0, 0.62) 78%,
			rgba(0, 0, 0, 0.78) 100%
		);
}

.ls-indoor-page .ls-indoor-why .ls-indoor-why__card--large {
	min-height: 560px;
}

@media (min-width: 768px) {
	.ls-indoor-page .ls-indoor-why .ls-indoor-why__card--large {
		min-height: 620px;
	}
}

@media (min-width: 1024px) {
	.ls-indoor-page .ls-indoor-why .ls-indoor-why__card--large {
		min-height: 100%;
	}
}

.ls-indoor-page .ls-indoor-why .ls-indoor-why__card--small {
	min-height: 236px;
}

.ls-indoor-page .ls-indoor-why .ls-indoor-why__image {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
}

.ls-indoor-page .ls-indoor-why .ls-indoor-why__image img,
.ls-indoor-page .ls-indoor-why .ls-indoor-why__image .ls-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ls-indoor-page .ls-indoor-why .ls-indoor-why__body {
	position: relative;
	z-index: 2;
	width: 100%;
	background: transparent;
	color: var(--ls-white);
}

.ls-indoor-page .ls-indoor-why .ls-indoor-why__card--small .ls-indoor-why__body {
	flex: 1 1 auto;
	justify-content: flex-end;
}

.ls-indoor-page .ls-indoor-why .ls-indoor-why__title {
	color: var(--ls-white);
}

.ls-indoor-page .ls-indoor-why .ls-indoor-why__text,
.ls-indoor-page .ls-indoor-why .ls-indoor-why__list {
	color: rgba(255, 255, 255, 0.88);
}

.ls-indoor-page .ls-indoor-why .ls-indoor-why__list li::before {
	background: rgba(255, 255, 255, 0.72);
}

.ls-indoor-page .ls-indoor-why .ls-indoor-why__tags li {
	color: var(--ls-white);
	background: rgba(0, 0, 0, 0.18);
	border-color: rgba(255, 255, 255, 0.42);
}

/* ===== 05 Services We Offer ===== */
.ls-indoor-services {
	background: var(--ls-surface-soft);
}

.ls-indoor-services__head {
	max-width: var(--ls-container-narrow-max);
	margin-bottom: var(--ls-space-7);
}

.ls-indoor-services__intro {
	color: var(--ls-text-muted);
	margin: 0;
}

.ls-indoor-services__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ls-space-4);
}

@media (min-width: 768px) {
	.ls-indoor-services__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

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

.ls-indoor-services__card {
	background: var(--ls-surface);
	border-radius: 4px;
	padding: var(--ls-space-6);
}

.ls-indoor-services__icon {
	display: flex;
	justify-content: center;
	width: 54px;
	height: 54px;
	margin: 0 auto var(--ls-space-5);
	color: var(--ls-text);
}

@media (min-width: 768px) {
	.ls-indoor-services__icon {
		width: 58px;
		height: 58px;
	}
}

@media (min-width: 1024px) {
	.ls-indoor-services__icon {
		width: 64px;
		height: 64px;
	}
}

.ls-indoor-services__icon svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

.ls-indoor-services__title {
	font-size: 17px;
	font-weight: var(--ls-font-weight-medium);
	text-align: center;
	margin: 0 0 var(--ls-space-4);
}

.ls-indoor-services__divider {
	display: block;
	width: 40px;
	height: 1px;
	margin: 0 auto 20px;
	background: var(--ls-text);
}

.ls-indoor-services__text {
	color: var(--ls-text-muted);
	font-size: 14px;
	margin: 0;
}

/* ----- Icon animation -----
 * Each of the six icons is a distinct multi-part illustration (see
 * lovsetti_theme_indoor_services_icon() in inc/indoor-furniture.php), so
 * each gets its own @keyframes rather than one shared animation. Duration
 * and delay come from per-card custom properties so the six read as loosely
 * organic rather than mechanically synchronized; negative delays start each
 * loop already mid-cycle instead of all six visibly resetting together at
 * page load. Nothing animates until .is-visible is added by
 * indoor-services-icons.js (IntersectionObserver, first viewport entry).
 */
.ls-indoor-services__card:nth-child(1) { --ls-svc-duration: 3.2s; --ls-svc-delay: 0s; }
.ls-indoor-services__card:nth-child(2) { --ls-svc-duration: 3.6s; --ls-svc-delay: -0.5s; }
.ls-indoor-services__card:nth-child(3) { --ls-svc-duration: 3.4s; --ls-svc-delay: -1s; }
.ls-indoor-services__card:nth-child(4) { --ls-svc-duration: 4s; --ls-svc-delay: -1.4s; }
.ls-indoor-services__card:nth-child(5) { --ls-svc-duration: 3.8s; --ls-svc-delay: -0.8s; }
.ls-indoor-services__card:nth-child(6) { --ls-svc-duration: 4.1s; --ls-svc-delay: -1.7s; }

/* Icon 1 -- Furniture Solutions: pencil drifts diagonally, ruler stays put. */
@keyframes ls-svc-pencil-drift {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(1.2px, -1.2px); }
}

.ls-indoor-services.is-visible .ls-svc-i__pencil {
	animation: ls-svc-pencil-drift var(--ls-svc-duration, 3.5s) ease-in-out infinite;
	animation-delay: var(--ls-svc-delay, 0s);
}

/* Icon 2 -- Complete Furniture Set Support: chair/lamp rise+fade slightly
   out of phase with each other; room outline stays static. */
@keyframes ls-svc-furniture-rise {
	0%, 100% { transform: translateY(0); opacity: 0.7; }
	50% { transform: translateY(-1.2px); opacity: 1; }
}

.ls-indoor-services.is-visible .ls-svc-i__chair {
	animation: ls-svc-furniture-rise var(--ls-svc-duration, 3.5s) ease-in-out infinite;
	animation-delay: var(--ls-svc-delay, 0s);
}

.ls-indoor-services.is-visible .ls-svc-i__lamp {
	animation: ls-svc-furniture-rise var(--ls-svc-duration, 3.5s) ease-in-out infinite;
	animation-delay: calc(var(--ls-svc-delay, 0s) + 0.3s);
}

/* Icon 3 -- Design & Development: compass legs swing a few degrees around
   the hinge. Each leg is pre-translated to the hinge point in its markup so
   `transform-origin: 0 0` is exactly the pivot, no fill-box guesswork. */
.ls-svc-i__compass-leg-l,
.ls-svc-i__compass-leg-r {
	transform-origin: 0 0;
}

@keyframes ls-svc-compass-leg-l {
	0%, 100% { transform: rotate(0deg); }
	50% { transform: rotate(-3deg); }
}

@keyframes ls-svc-compass-leg-r {
	0%, 100% { transform: rotate(0deg); }
	50% { transform: rotate(3deg); }
}

.ls-indoor-services.is-visible .ls-svc-i__compass-leg-l {
	animation: ls-svc-compass-leg-l var(--ls-svc-duration, 3.5s) ease-in-out infinite;
	animation-delay: var(--ls-svc-delay, 0s);
}

.ls-indoor-services.is-visible .ls-svc-i__compass-leg-r {
	animation: ls-svc-compass-leg-r var(--ls-svc-duration, 3.5s) ease-in-out infinite;
	animation-delay: var(--ls-svc-delay, 0s);
}

/* Icon 4 -- Material & Finish Support: outer two swatches fan open a few
   degrees around their shared base point; middle swatch anchors, unanimated. */
.ls-svc-i__swatch-1,
.ls-svc-i__swatch-2,
.ls-svc-i__swatch-3 {
	transform-origin: 0 0;
}

@keyframes ls-svc-swatch-out {
	0%, 100% { transform: rotate(0deg); }
	50% { transform: rotate(-4deg); }
}

@keyframes ls-svc-swatch-out-rev {
	0%, 100% { transform: rotate(0deg); }
	50% { transform: rotate(4deg); }
}

.ls-indoor-services.is-visible .ls-svc-i__swatch-1 {
	animation: ls-svc-swatch-out var(--ls-svc-duration, 3.5s) ease-in-out infinite;
	animation-delay: var(--ls-svc-delay, 0s);
}

.ls-indoor-services.is-visible .ls-svc-i__swatch-3 {
	animation: ls-svc-swatch-out-rev var(--ls-svc-duration, 3.5s) ease-in-out infinite;
	animation-delay: var(--ls-svc-delay, 0s);
}

/* Icon 5 -- Sample Support: checkmark draws in, holds, retracts, repeats.
   Box body is unanimated so the icon is never less than mostly-static. */
.ls-svc-i__check {
	stroke-dasharray: 9;
	stroke-dashoffset: 9;
}

@keyframes ls-svc-check-draw {
	0% { stroke-dashoffset: 9; }
	30% { stroke-dashoffset: 0; }
	70% { stroke-dashoffset: 0; }
	100% { stroke-dashoffset: 9; }
}

.ls-indoor-services.is-visible .ls-svc-i__check {
	animation: ls-svc-check-draw var(--ls-svc-duration, 3.8s) ease-in-out infinite;
	animation-delay: var(--ls-svc-delay, 0s);
}

/* Icon 6 -- Factory Visit: roof reveals first, door/window details follow.
   Opacity only ever dips to 0.4-0.55, never to 0, so the shape never flashes
   or fully disappears. */
@keyframes ls-svc-factory-roof {
	0%, 15% { opacity: 0.55; }
	45%, 100% { opacity: 1; }
}

@keyframes ls-svc-factory-detail {
	0%, 35% { opacity: 0.4; }
	65%, 100% { opacity: 1; }
}

.ls-indoor-services.is-visible .ls-svc-i__factory-roof {
	animation: ls-svc-factory-roof var(--ls-svc-duration, 4s) ease-in-out infinite;
	animation-delay: var(--ls-svc-delay, 0s);
}

.ls-indoor-services.is-visible .ls-svc-i__factory-detail {
	animation: ls-svc-factory-detail var(--ls-svc-duration, 4s) ease-in-out infinite;
	animation-delay: var(--ls-svc-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
	.ls-indoor-services__icon,
	.ls-indoor-services__icon * {
		animation: none !important;
		transition: none !important;
		transform: none !important;
	}
}

/* ===== 06 Custom Furniture Process =====
 * Interactive tablist + single-detail-panel pattern (six real tabpanels in
 * the DOM, only the active one visible via the `hidden` attribute -- this
 * also gates image loading for the inactive five: a hidden ancestor means
 * their loading="lazy" images never fetch until the panel is unhidden, so
 * "load when selected" needs no extra JS). See assets/js/indoor-process-tabs.js.
 */
.ls-indoor-process__head {
	max-width: var(--ls-container-narrow-max);
	margin-bottom: var(--ls-space-7);
}

.ls-indoor-process__intro {
	color: var(--ls-text-muted);
	margin: 0;
}

/* ----- Top: step navigation ----- */
.ls-indoor-process__nav {
	display: flex;
	gap: var(--ls-space-3);
	margin-bottom: var(--ls-space-7);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.ls-indoor-process__nav::-webkit-scrollbar {
	display: none;
}

@media (min-width: 1024px) {
	.ls-indoor-process__nav {
		justify-content: space-between;
		gap: var(--ls-space-4);
		overflow-x: visible;
	}
}

.ls-indoor-process__nav-item {
	flex: 0 0 auto;
	width: 128px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	padding: 0 0 var(--ls-space-3);
	cursor: pointer;
	text-align: left;
	color: var(--ls-text-soft);
	transition: color 200ms ease, border-color 200ms ease;
}

@media (min-width: 1024px) {
	.ls-indoor-process__nav-item {
		flex: 1 1 0;
		width: auto;
		max-width: 200px;
	}
}

.ls-indoor-process__nav-item:hover {
	color: var(--ls-text-muted);
}

.ls-indoor-process__nav-item.is-active {
	color: var(--ls-text);
	border-bottom-color: var(--ls-text);
}

.ls-indoor-process__nav-item:focus-visible {
	outline: 2px solid var(--ls-text);
	outline-offset: 3px;
}

.ls-indoor-process__nav-icon {
	display: block;
	width: 24px;
	height: 24px;
	margin-bottom: var(--ls-space-3);
}

.ls-indoor-process__nav-icon svg {
	width: 100%;
	height: 100%;
	stroke-width: 1.5;
	transition: stroke-width 200ms ease;
}

.ls-indoor-process__nav-item.is-active .ls-indoor-process__nav-icon svg {
	stroke-width: 1.85;
}

.ls-indoor-process__nav-number {
	display: block;
	font-size: 12px;
	letter-spacing: 0.06em;
	margin-bottom: var(--ls-space-2);
}

.ls-indoor-process__nav-item.is-active .ls-indoor-process__nav-number {
	font-weight: var(--ls-font-weight-medium);
}

.ls-indoor-process__nav-label {
	display: block;
	font-size: 13px;
	line-height: 1.3;
}

.ls-indoor-process__nav-item.is-active .ls-indoor-process__nav-label {
	font-weight: var(--ls-font-weight-medium);
}

/* ----- Bottom: active-step detail panel ----- */
.ls-indoor-process__panel {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ls-space-6);
	animation: ls-indoor-process-fade-in 220ms ease;
}

/* Bug fix: an unconditional `display: grid` on the class above is an
   author-stylesheet rule, and author rules always beat the browser's
   default user-agent rule `[hidden] { display: none; }` regardless of
   specificity or source order -- so all 6 panels rendered stacked despite
   5 of them correctly carrying the `hidden` attribute. This raises the
   selector's specificity (class+attribute beats class alone) so `hidden`
   is respected again. */
.ls-indoor-process__panel[hidden] {
	display: none;
}

@media (min-width: 1024px) {
	.ls-indoor-process__panel {
		/* 1.35fr/1fr measures out to ~55% of the full panel width once the
		   gap is accounted for, within the 54-56% target (1.2fr measured
		   ~52.4%, just under it). */
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		gap: var(--ls-space-7);
		align-items: center;
	}
}

@keyframes ls-indoor-process-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ls-indoor-process__panel {
		animation: none;
	}
}

.ls-indoor-process__image {
	aspect-ratio: 3 / 2;
	border-radius: 4px;
	box-shadow: 0 8px 24px rgba(32, 31, 31, 0.08);
}

.ls-indoor-process__content {
	max-width: 480px;
}

@media (min-width: 1024px) {
	.ls-indoor-process__content {
		max-width: none;
	}
}

.ls-indoor-process__title {
	font-size: 22px;
	font-weight: var(--ls-font-weight-regular);
	margin: 0 0 var(--ls-space-4);
}

@media (min-width: 1024px) {
	.ls-indoor-process__title {
		font-size: 26px;
	}
}

.ls-indoor-process__body {
	color: var(--ls-text);
	line-height: 1.7;
	margin: 0 0 var(--ls-space-3);
}

.ls-indoor-process__support {
	color: var(--ls-text-muted);
	font-size: 14px;
	line-height: 1.7;
	margin: 0 0 var(--ls-space-6);
}

.ls-indoor-process__cta {
	width: 100%;
}

@media (min-width: 1024px) {
	.ls-indoor-process__cta {
		width: auto;
	}
}

/* ===== 07 How We Support Your Project ===== */
.ls-indoor-support__head {
	max-width: var(--ls-container-narrow-max);
	margin-bottom: var(--ls-space-7);
}

.ls-indoor-support__intro {
	color: var(--ls-text-muted);
	margin: 0;
}

.ls-indoor-support__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ls-space-4);
}

@media (min-width: 768px) {
	.ls-indoor-support__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

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

.ls-indoor-support__card {
	border: 1px solid var(--ls-border-light);
	border-radius: 4px;
	padding: var(--ls-space-6);
}

.ls-indoor-support__icon-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 82px;
	height: 82px;
	margin: 0 auto 20px;
	border: 1px solid #2F506D;
	border-radius: 50%;
}

.ls-indoor-support__icon {
	display: block;
	width: 38px;
	height: 38px;
	color: #2F506D;
}

.ls-indoor-support__icon svg {
	width: 100%;
	height: 100%;
}

.ls-indoor-support__title {
	font-size: 16px;
	font-weight: var(--ls-font-weight-medium);
	text-align: center;
	margin: 0 0 var(--ls-space-4);
}

.ls-indoor-support__divider {
	display: block;
	width: 40px;
	height: 1px;
	margin: 0 auto 20px;
	background: #2F506D;
}

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

/* The CTA is the last section before the Footer -- same "no unintended
   blank band" fix Home needed, since .ls-site-footer's sitewide
   margin-top (components.css) would otherwise leave a gap here too. */
body.page-id-36 .ls-site-footer {
	margin-top: 0;
}