/*
 * Layout variants from the approved bathroom page design (Figma "Bathroom
 * Remodeling · Fairfax · Revize", 1440 / 1024 / 390):
 *
 *   .pi-cs--photos     photo cards, one may span the row      (pi-mini)
 *   .pi-cs--carousel   photo cards in a track, dots + arrows  (pi-mini)
 *   .pi-cs--slider     frosted card slider over a photograph  (pi-mini)
 *   .pi-cs--split      before / after photos beside a list    (pi-mini)
 *   .pi-process--rail  photo rail between heading and steps   (pi-process)
 *   .pi-estimate--photo  photo instead of the form            (pi-estimate)
 *   .pi-blk--photo     photograph behind a card section       (pi-cards …)
 *
 * Every rule is scoped to one of those classes, so the pages that use the
 * plain layouts render exactly as before. Sizes are the design's; the widget
 * Style tabs override them per instance.
 *
 * Buttons: the Elementor kit paints every <button> red at (0,1,1) and
 * repaints :hover/:focus at (0,2,1), so each control here is declared with
 * three classes and every state.
 */

/* ======================================================= shared head ===== */

.pi-cs .pi-head { max-width: none; }
.pi-cs .pi-head .pi-cs__title { margin: 0; }
.pi-cs .pi-head .pi-cs__lede { margin: 16px 0 0; }

/* ====================================================== photo cards ===== */

.pi-cs__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

/* .pi-svc sizes itself by position in the home bento (nth-child); in these
   layouts every card is sized by the widget instead. */
.pi-cs .pi-svc.pi-cs__card,
.pi-cs .pi-svc.pi-cs__card:nth-child(n) {
	grid-column: auto;
	height: 360px;
}
.pi-cs .pi-svc.pi-cs__card.is-wide,
.pi-cs .pi-svc.pi-cs__card.is-wide:nth-child(n) {
	grid-column: 1 / -1;
	height: 300px;
}
.pi-cs .pi-svc.pi-cs__card img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border-radius: 0;
}
.pi-cs .pi-svc.pi-cs__card p {
	color: #fff;
	max-width: 500px;
	margin: 0;
}

/* The design's scrim is about half the home bento's, so the photograph
   reads brighter; a soft shadow keeps white type legible on pale tile. */
.pi-cs .pi-svc.pi-cs__card::after {
	background: linear-gradient(0deg, rgba(16, 13, 10, .51) 0%, rgba(16, 13, 10, .43) 26%,
	                                  rgba(16, 13, 10, .18) 60%, rgba(16, 13, 10, 0) 88%);
}
.pi-cs .pi-svc.pi-cs__card h3,
.pi-cs .pi-svc.pi-cs__card p { text-shadow: 0 1px 14px rgba(16, 13, 10, .5); }

/* The lighter scrim: clear at the top, deepening over the lower half. */
.pi-cs--soft .pi-svc.pi-cs__card {
	background: var(--pi-cream-3, #efe9dd);
	border-radius: 12px;
	padding: 24px 24px 15px 18px;
}
.pi-cs--soft .pi-svc.pi-cs__card::after {
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0) 48.8%, rgba(40, 40, 40, .19) 66.9%,
		                        rgba(0, 0, 0, .63) 79%, rgba(0, 0, 0, .69) 100%),
		linear-gradient(180deg, rgba(16, 13, 10, 0) 30%, rgba(16, 13, 10, .24) 68%,
		                        rgba(16, 13, 10, .46) 100%);
}
.pi-cs--soft .pi-svc.pi-cs__card p,
.pi-cs--carousel .pi-svc.pi-cs__card p {
	font-size: .9375rem;
	line-height: 1.65;
}
.pi-cs--soft .pi-svc.pi-cs__card h3,
.pi-cs--carousel .pi-svc.pi-cs__card h3 { margin-bottom: 7px; }
.pi-cs--soft .pi-svc.pi-cs__card h3::after,
.pi-cs--carousel .pi-svc.pi-cs__card h3::after { margin-top: 7px; }
.pi-cs--soft .pi-svc.pi-cs__card h3 + p,
.pi-cs--carousel .pi-svc.pi-cs__card h3 + p { margin-top: 1px; }

/* ========================================================= carousel ===== */

.pi-section.pi-cs--carousel { padding: 40px 0; }
.pi-cs--carousel .pi-shell { max-width: calc(1200px + 2 * var(--pi-gutter)); }
.pi-cs--carousel .pi-eyebrow { margin-bottom: 12px; }
.pi-cs.pi-cs--carousel .pi-head { margin-bottom: 8px; }

.pi-cs__viewport { overflow: hidden; }

.pi-cs__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 548px;
	gap: 24px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.pi-cs__track::-webkit-scrollbar { display: none; }
.pi-cs__track:focus-visible { outline: 2px solid var(--pi-red, #e20e20); outline-offset: 4px; }

.pi-cs--carousel .pi-svc.pi-cs__card::after {
	background: linear-gradient(0deg, rgba(16, 13, 10, .51) 0%, rgba(16, 13, 10, .43) 10%,
	                                  rgba(16, 13, 10, .18) 23.1%, rgba(16, 13, 10, 0) 33.8%);
}
.pi-cs--carousel .pi-svc.pi-cs__card,
.pi-cs--carousel .pi-svc.pi-cs__card:nth-child(n) {
	height: 422px;
	border-radius: 12px;
	padding: 24px;
	scroll-snap-align: start;
	box-shadow: inset 0 0 0 1px #dee0e3;
}

.pi-cs__controls {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 24px;
}
.pi-cs__rule { flex: 1 1 auto; }
.pi-cs__arrows { display: flex; gap: 12px; flex: none; }

.pi-cs__dots {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
}

.pi-page .pi-cs .pi-cs__dot,
.pi-page .pi-cs .pi-cs__dot:hover,
.pi-page .pi-cs .pi-cs__dot:focus,
.pi-page .pi-cs .pi-cs__dot:active {
	width: 9px;
	height: 9px;
	min-width: 0;
	min-height: 0;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 100px;
	background: #c7c9cf;
	box-shadow: none;
	cursor: pointer;
	font-size: 0;
	line-height: 0;
	transition: width .3s var(--pi-ease, ease), background-color .3s var(--pi-ease, ease);
}
.pi-page .pi-cs .pi-cs__dot.is-active,
.pi-page .pi-cs .pi-cs__dot.is-active:hover,
.pi-page .pi-cs .pi-cs__dot.is-active:focus {
	width: 27px;
	background: var(--pi-red, #e20e20);
}
.pi-page .pi-cs .pi-cs__dot:focus-visible { outline: 2px solid var(--pi-ink, #1e1b16); outline-offset: 2px; }

.pi-page .pi-cs .pi-cs__arrow,
.pi-page .pi-cs .pi-cs__arrow:hover,
.pi-page .pi-cs .pi-cs__arrow:focus,
.pi-page .pi-cs .pi-cs__arrow:active {
	width: 44px;
	height: 44px;
	min-width: 0;
	min-height: 0;
	padding: 0;
	margin: 0;
	display: grid;
	place-items: center;
	border-radius: 100px;
	border: 1.5px solid var(--pi-ink, #1e1b16);
	background: #fff;
	color: var(--pi-ink, #1e1b16);
	box-shadow: none;
	cursor: pointer;
	line-height: 0;
	font-size: 0;
	transition: background-color .25s var(--pi-ease, ease), color .25s var(--pi-ease, ease), opacity .25s ease;
}
.pi-page .pi-cs .pi-cs__arrow:hover {
	background: var(--pi-ink, #1e1b16);
	color: #fff;
}
.pi-page .pi-cs .pi-cs__arrow:focus-visible { outline: 2px solid var(--pi-red, #e20e20); outline-offset: 2px; }
.pi-page .pi-cs .pi-cs__arrow[disabled] { opacity: .35; cursor: default; background: #fff; color: var(--pi-ink, #1e1b16); }
.pi-cs__arrow svg { width: 16px; height: 16px; display: block; }

/* =========================================================== slider ===== */

.pi-section.pi-cs--slider {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 640px;
	display: flex;
	align-items: center;
	padding: 60px 0;
	background: var(--pi-ink-2, #211d17);
}
.pi-cs--slider .pi-shell {
	width: 100%;
	max-width: calc(1192px + 2 * var(--pi-gutter));
}
.pi-cs img.pi-cs__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
.pi-cs--slider::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(38, 33, 29, .55) 0%, rgba(38, 33, 29, .12) 60%, rgba(38, 33, 29, 0) 100%),
		linear-gradient(90deg, rgba(16, 13, 10, .78) 0%, rgba(16, 13, 10, .35) 62%, rgba(16, 13, 10, .12) 100%);
}
.pi-cs.pi-cs--slider .pi-head { max-width: 639px; margin-bottom: 48px; }
.pi-cs--slider .pi-head .pi-cs__title { color: #fff; }
.pi-cs--slider .pi-head .pi-cs__lede { color: rgba(255, 255, 255, .86); }

.pi-cs__glass {
	width: 560px;
	max-width: 100%;
	padding: 38px 40px 40px;
	border-radius: 24px;
	background: rgba(244, 241, 234, .18);
	box-shadow: inset 0 0 0 1px rgba(224, 214, 196, .28);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: #fff;
}
.pi-cs--slider .pi-cs__track {
	grid-auto-columns: 100%;
	gap: 0;
	align-items: start;
}
.pi-cs__slide { scroll-snap-align: start; min-width: 0; }
.pi-cs__slide h3 {
	font-family: var(--pi-font-display);
	font-size: 1.0625rem;
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -.012em;
	color: #fff;
	margin: 0;
}
.pi-cs__slide h3::after {
	content: '';
	display: block;
	height: 3px;
	margin-top: 12px;
	border-radius: 2px;
	background: var(--pi-red, #e20e20);
}
.pi-cs__slide p {
	font-size: .9375rem;
	line-height: 1.65;
	color: #fff;
	margin: 18px 0 0;
}
.pi-cs--slider .pi-cs__dots { margin-top: 18px; }
.pi-page .pi-cs--slider .pi-cs__dot,
.pi-page .pi-cs--slider .pi-cs__dot:hover,
.pi-page .pi-cs--slider .pi-cs__dot:focus { width: 8px; height: 8px; }
.pi-page .pi-cs--slider .pi-cs__dot.is-active,
.pi-page .pi-cs--slider .pi-cs__dot.is-active:hover,
.pi-page .pi-cs--slider .pi-cs__dot.is-active:focus { width: 24px; }

/* ============================================================ split ===== */

.pi-cs__split {
	display: grid;
	grid-template-columns: minmax(0, 591px) 360px;
	column-gap: 58px;
	align-items: start;
}
.pi-cs__media { display: flex; flex-direction: column; gap: 48px; }
.pi-cs__shot {
	position: relative;
	margin: 0;
	height: 307px;
	overflow: hidden;
	background: var(--pi-cream-3, #efe9dd);
}
.pi-cs .pi-cs__shot img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center 60%;
	display: block;
}
.pi-cs__label {
	position: absolute;
	top: 20px;
	left: 20px;
	padding: 6px 13px 7px;
	border-radius: 999px;
	background: #fff;
	color: #000;
	box-shadow: inset 0 0 0 1px var(--pi-red, #e20e20), 0 2px 10px rgba(16, 13, 10, .18);
	font-family: var(--pi-font-display);
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: .01em;
}
.pi-cs__label.is-accent {
	background: var(--pi-red, #e20e20);
	color: #fff;
	box-shadow: 0 2px 10px rgba(16, 13, 10, .18);
}

.pi-cs__list { display: flex; flex-direction: column; gap: 20px; }
.pi-cs__item { padding: 21px 24px 22px; min-height: 156px; box-sizing: border-box; }
.pi-cs__item h3 {
	font-family: var(--pi-font-display);
	font-size: 1.0625rem;
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -.012em;
	color: var(--pi-ink, #1e1b16);
	margin: 0;
}
.pi-cs__item h3::after {
	content: '';
	display: block;
	width: 30px;
	height: 3px;
	margin-top: 7px;
	border-radius: 2px;
	background: var(--pi-red, #e20e20);
}
.pi-cs__item p {
	font-size: .9375rem;
	line-height: 1.65;
	color: var(--pi-muted, #5c554a);
	margin: 7px 0 0;
}

/* ===================================================== process rail ===== */

.pi-section.pi-process--rail { padding-top: calc(var(--pi-section-y) + 30px); }
.pi-process--rail .pi-head.pi-head--row { margin-bottom: 12px; align-items: flex-end; }
.pi-process--rail .pi-head--row > div:first-child { max-width: 639px; }
.pi-process--rail .pi-process__title { margin: 0; }
.pi-process--rail .pi-rail { padding-top: 16px; padding-bottom: 16px; }

/* One hairline that is both the timeline behind the numbers and the rail's
   scroll progress. It sits in the flow before the steps and is pulled down
   to the centre of the number discs. */
.pi-steps__bar {
	position: relative;
	z-index: 0;
	height: 1px;
	margin: 12px 0 -1px;
	transform: translateY(23px);
	background: var(--pi-line-2, #e0d6c4);
	overflow: hidden;
}
.pi-steps__bar span {
	display: block;
	width: calc(25% + 10px);
	height: 100%;
	background: var(--pi-red, #e20e20);
	will-change: transform;
}
.pi-process--rail .pi-steps::before { display: none; }

@media (max-width: 1024px) {
	.pi-steps__bar span { width: 12.1%; }
}

@media (max-width: 899px) {
	/* The steps wrap to two columns here, so the timeline cannot run
	   behind them; it becomes the progress bar under the rail. */
	.pi-steps__bar {
		height: 3px;
		margin: 0 0 16px;
		transform: none;
		border-radius: 3px;
		background: var(--pi-cream-3, #efe9dd);
	}
	.pi-steps__bar span { width: max(16px, 4.6%); border-radius: 3px; }
}

/* ===================================================== estimate photo ===== */

.pi-estimate--photo .pi-split--estimate {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0;
	align-items: center;
}
.pi-estimate--photo .pi-estimate__title { margin-bottom: 0; }
/* The design keeps the copy at the measure it had beside the form. */
.pi-estimate--photo .pi-estimate__lead { margin: 19px 0 0; max-width: 497px; }
.pi-estimate--photo .pi-contact { margin-top: 19px !important; padding: 13px 40px; }
.pi-estimate__actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 19px; }
.pi-estimate__media { min-width: 0; }
.pi-estimate .pi-estimate__photo {
	display: block;
	width: 100%;
	height: 675px;
	max-width: none;
	object-fit: cover;
}

/* ======================================================= photo ground ===== */

.pi-blk.pi-blk--photo {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--pi-ink, #1e1b16);
	color: #fff;
}
.pi-blk--photo img.pi-blk__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
.pi-blk.pi-blk--photo::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(0deg, rgba(16, 13, 10, .51) 0%, rgba(16, 13, 10, .43) 26%,
		                      rgba(16, 13, 10, .18) 60%, rgba(16, 13, 10, 0) 88%),
		linear-gradient(rgba(16, 13, 10, .66), rgba(16, 13, 10, .66));
}
.pi-blk--photo .pi-blk__eyebrow,
.pi-blk--photo .pi-blk__title,
.pi-blk--photo .pi-blk__lede { color: #fff; }

.pi-blk--photo .pi-blk__card {
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .28);
}
.pi-blk--photo .pi-blk__card h3 { color: #fff; }
.pi-blk--photo .pi-blk__card p { color: #fff; line-height: 1.65; }
.pi-blk--photo .pi-blk__media { border-bottom-color: rgba(255, 255, 255, .2); }
.pi-blk--photo .pi-blk__chips { margin: 16px 0 0 !important; }
.pi-blk--photo .pi-blk__more { padding-top: 18px; }
.pi-blk.pi-blk--photo .pi-blk__more a,
.pi-blk.pi-blk--photo .pi-blk__more a:visited {
	color: #fff;
	border-bottom: 0;
	padding-bottom: 0;
}
.pi-blk.pi-blk--photo .pi-blk__more a:hover { color: #fbdddf; }
.pi-blk--photo .pi-blk__hint { color: rgba(255, 255, 255, .72); }

/* ======================================================== tablet ===== */

@media (max-width: 1024px) {
	.pi-section.pi-cs--carousel { padding: 64px 0; }
	.pi-cs--carousel .pi-shell { max-width: none; padding-inline: 56px; }
	.pi-cs.pi-cs--carousel .pi-head { margin-bottom: 22px; }
	.pi-cs--carousel .pi-cs__track { gap: 20px; }
	.pi-cs--carousel .pi-svc.pi-cs__card,
	.pi-cs--carousel .pi-svc.pi-cs__card:nth-child(n) { height: 400px; }

	.pi-section.pi-cs--slider { padding: 50px 0; }
	.pi-cs--slider .pi-shell { padding-inline: 24px; }

	.pi-cs__split { grid-template-columns: minmax(0, 1fr) 360px; column-gap: 24px; }

	.pi-estimate--photo .pi-estimate__photo { height: 675px; }
}

/* ======================================================== mobile ===== */

@media (max-width: 767px) {
	.pi-cs__grid { grid-template-columns: 1fr; gap: 16px; }
	.pi-cs .pi-svc.pi-cs__card,
	.pi-cs .pi-svc.pi-cs__card:nth-child(n),
	.pi-cs .pi-svc.pi-cs__card.is-wide,
	.pi-cs .pi-svc.pi-cs__card.is-wide:nth-child(n) {
		grid-column: auto;
		height: 268px;
	}

	.pi-section.pi-cs--carousel { padding: 48px 0; }
	.pi-cs--carousel .pi-shell { padding-inline: 20px; }
	.pi-cs--carousel .pi-eyebrow { margin-bottom: 8px; }
	.pi-cs.pi-cs--carousel .pi-head { margin-bottom: 8px; }
	.pi-cs--carousel .pi-cs__track { grid-auto-columns: calc(100% - 24px); gap: 12px; }
	.pi-cs--carousel .pi-svc.pi-cs__card,
	.pi-cs--carousel .pi-svc.pi-cs__card:nth-child(n) { height: 238px; padding: 16px; }
	.pi-cs--carousel .pi-svc.pi-cs__card h3 { font-size: 1rem; }
	.pi-cs--carousel .pi-svc.pi-cs__card p { font-size: .8125rem; line-height: 1.5; }
	.pi-cs__controls { margin-top: 20px; }
	.pi-page .pi-cs .pi-cs__dot,
	.pi-page .pi-cs .pi-cs__dot:hover,
	.pi-page .pi-cs .pi-cs__dot:focus { width: 7px; height: 7px; }
	.pi-page .pi-cs .pi-cs__dot.is-active,
	.pi-page .pi-cs .pi-cs__dot.is-active:hover,
	.pi-page .pi-cs .pi-cs__dot.is-active:focus { width: 21px; }

	.pi-section.pi-cs--slider { min-height: 0; padding: 48px 0; }
	.pi-cs--slider .pi-shell { padding-inline: 16px; }
	.pi-cs__glass { width: 100%; }

	.pi-cs__split { grid-template-columns: 1fr; row-gap: 32px; }
	.pi-cs__media { gap: 16px; }
	.pi-cs__shot { height: 268px; border-radius: 18px; }
	.pi-cs__item { padding: 21px 24px 22px 0; }

	/* The rail's arrows drop under the progress bar and shrink; the
	   heading, rail, bar, arrows and steps stack in that order. */
	.pi-process--rail .pi-shell { display: flex; flex-direction: column; }
	.pi-process--rail .pi-head.pi-head--row { display: contents; }
	.pi-process--rail .pi-head--row > div:first-child { order: 1; margin-bottom: 12px; }
	.pi-process--rail .pi-rail { order: 2; padding-top: 16px; padding-bottom: 32px; }
	.pi-process--rail .pi-steps__bar { order: 3; margin: 12px 0; }
	.pi-process--rail .pi-rail__nav {
		order: 4;
		display: flex;
		justify-content: flex-end;
		gap: 6px;
		padding: 7px 0;
		margin-bottom: 12px;
	}
	.pi-page .pi-process--rail .pi-rail__btn { width: 31px; height: 31px; }
	.pi-process--rail .pi-rail__btn svg { width: 13px; height: 13px; }
	.pi-process--rail .pi-steps { order: 5; }

	.pi-estimate--photo .pi-split--estimate { grid-template-columns: 1fr; row-gap: 32px; }
	.pi-estimate--photo .pi-estimate__lead { margin-top: 13px; }
	.pi-estimate--photo .pi-contact { padding: 19px 20px 19px 40px; margin-top: 13px !important; }
	.pi-estimate--photo .pi-estimate__actions { margin-top: 13px; }
	.pi-estimate__actions { flex-wrap: nowrap; gap: 10px; }
	.pi-estimate__actions .pi-btn { padding: 13px 16px; font-size: .8125rem; line-height: 1.4; flex: 1 1 auto; }
	.pi-estimate--photo .pi-estimate__photo { height: 279px; }
}