/**
 * Site-wide stainless steel (plugin fallback when theme custom/ is not deployed).
 */
:root {
	--lay-steel-base: #c4c8cc;
	/* Soft radial highlights + vertical falloff (no diagonal banding). */
	--lay-steel-gradient:
		radial-gradient(ellipse 125% 90% at 18% 10%, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0) 58%),
		radial-gradient(ellipse 115% 85% at 82% 88%, rgba(120, 126, 134, 0.28) 0%, rgba(120, 126, 134, 0) 54%),
		radial-gradient(ellipse 95% 75% at 52% 45%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 62%),
		radial-gradient(ellipse 80% 55% at 68% 22%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 48%),
		linear-gradient(180deg, #e8ebef 0%, #d3d7db 32%, #c5c9cd 58%, #d0d4d8 100%);
	--lay-steel-surface: transparent;
	--lay-steel-filter-bg: transparent;
	--lay-steel-project-bg: #cacdd1;
	--lay-steel-project-gradient:
		radial-gradient(ellipse 125% 90% at 18% 10%, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 58%),
		radial-gradient(ellipse 115% 85% at 82% 88%, rgba(120, 126, 134, 0.32) 0%, rgba(120, 126, 134, 0) 54%),
		radial-gradient(ellipse 95% 75% at 52% 45%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 62%),
		linear-gradient(180deg, #e6e9ed 0%, #d0d4d8 35%, #c2c6ca 60%, #ccced2 100%);
}

html.lay-steel-bg,
html.lay-steel-bg body {
	background-color: var(--lay-steel-base) !important;
	background-image: var(--lay-steel-gradient) !important;
	background-attachment: fixed !important;
	background-size: cover !important;
	background-repeat: no-repeat !important;
}

/* iOS/mobile: fixed body backgrounds often fail; paint steel on a fixed pseudo-layer. */
@media (max-width: 781px) {
	html.lay-steel-bg {
		position: relative;
	}

	html.lay-steel-bg::before {
		content: "";
		position: fixed;
		inset: 0;
		z-index: -1;
		pointer-events: none;
		background-color: var(--lay-steel-base);
		background-image: var(--lay-steel-gradient);
		background-size: cover;
		background-repeat: no-repeat;
	}

	html.lay-steel-bg,
	html.lay-steel-bg body {
		background-color: transparent !important;
		background-image: none !important;
		background-attachment: scroll !important;
	}
}

html.lay-steel-bg body .lay-background-image,
html.lay-steel-bg body .lay-background-video {
	display: none !important;
}

html.lay-steel-bg .hascover #footer-region,
html.lay-steel-bg .cover-content,
html.lay-steel-bg .cover-region,
html.lay-steel-bg .lay-content,
html.lay-steel-bg #grid,
html.lay-steel-bg .grid,
html.lay-steel-bg .grid-inner,
html.lay-steel-bg #rows-region,
html.lay-steel-bg .row,
html.lay-steel-bg .row-inner,
html.lay-steel-bg .col,
html.lay-steel-bg .column-wrap,
html.lay-steel-bg .col.type-rowscroll,
html.lay-steel-bg .lay-rowscroll,
html.lay-steel-bg .lay-rowscroll-viewport,
html.lay-steel-bg .lay-rowscroll-row,
html.lay-steel-bg .lay-rowscroll-track,
html.lay-steel-bg .lay-rowscroll-track-inner,
html.lay-steel-bg .lay-rowscroll-list,
html.lay-steel-bg .lay-rowscroll-filters,
html.lay-steel-bg .lay-rowscroll-filters.lay-thumbnailgrid-filter-wrap {
	background-color: transparent !important;
	background-image: none !important;
}

html.lay-steel-bg .lay-rowscroll-project-modal__backdrop,
html.lay-steel-bg .lay-rowscroll-project-modal__panel,
html.lay-steel-bg .lay-rowscroll-project-modal__scroll,
html.lay-steel-bg #lay-project-overlay-background,
html.lay-steel-bg #lay-project-overlay,
html.lay-steel-bg.show-project-overlay #lay-project-overlay,
html.lay-steel-bg.show-project-overlay #lay-project-overlay > .lay-content {
	background-color: var(--lay-steel-project-bg) !important;
	background-image: var(--lay-steel-project-gradient) !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
	background-attachment: scroll !important;
}

html.lay-steel-bg .lay-rowscroll-project-modal__scroll .lay-content,
html.lay-steel-bg .lay-rowscroll-project-modal__scroll .grid,
html.lay-steel-bg .lay-rowscroll-project-modal__scroll .grid-inner,
html.lay-steel-bg .lay-rowscroll-project-modal__scroll .row,
html.lay-steel-bg .lay-rowscroll-project-modal__scroll .col,
html.lay-steel-bg #lay-project-overlay .grid,
html.lay-steel-bg #lay-project-overlay .grid-inner,
html.lay-steel-bg #lay-project-overlay .row,
html.lay-steel-bg #lay-project-overlay .row-inner,
html.lay-steel-bg #lay-project-overlay .col,
html.lay-steel-bg #lay-project-overlay .column-wrap {
	background-color: transparent !important;
	background-image: none !important;
}

/* TENKO: desktop .sitetitle + phone .mobile-title above Lay overlay / rowscroll modal. */
html.show-project-overlay .sitetitle,
html.show-project-overlay .mobile-title,
html.lay-rowscroll-modal-open .sitetitle,
html.lay-rowscroll-modal-open .mobile-title,
body.lay-keep-sitetitle-above-overlay.show-project-overlay .sitetitle,
body.lay-keep-sitetitle-above-overlay.show-project-overlay .mobile-title {
	position: fixed !important;
	z-index: 2147483646 !important;
	pointer-events: auto !important;
	visibility: visible !important;
	opacity: 1 !important;
}

html.show-project-overlay .sitetitle .sitetitle-txt-inner,
html.lay-rowscroll-modal-open .sitetitle .sitetitle-txt-inner,
html.show-project-overlay .mobile-title > span,
html.lay-rowscroll-modal-open .mobile-title > span {
	position: relative;
	z-index: 2147483646 !important;
}

html.show-project-overlay .lay-thumbnailgrid-filter-wrap,
html.lay-rowscroll-modal-open .lay-thumbnailgrid-filter-wrap {
	z-index: 2147483645 !important;
}