/* Comp-specific service pages: installation, spring start up, and backflow. */

.service-redesign {
	--svc-navy: #061f49;
	--svc-blue: #0864c8;
	--svc-green: #3eaa3d;
	--svc-soft: #f6f7f3;
	--svc-line: #d9e2eb;
	--svc-text: #53637a;
	background: #fff;
	color: var(--svc-navy);
	overflow: hidden;
}

.svc-shell {
	margin-inline: auto;
	max-width: 1240px;
	width: calc(100% - 64px);
}

.svc-section { padding: 84px 0; }
.svc-section--soft { background: var(--svc-soft); }

.svc-eyebrow {
	color: var(--svc-blue);
	font-size: 12px;
	font-weight: 850;
	letter-spacing: .1em;
	line-height: 1.25;
	margin: 0 0 12px;
	text-transform: uppercase;
}

.svc-eyebrow::after {
	background: var(--svc-green);
	border-radius: 99px;
	content: "";
	display: block;
	height: 3px;
	margin-top: 10px;
	width: 30px;
}

.svc-heading {
	margin: 0 auto 38px;
	max-width: 860px;
	text-align: center;
}

.svc-heading .svc-eyebrow::after { margin-inline: auto; }
.svc-heading--left { margin-inline: 0; text-align: left; }
.svc-heading--left .svc-eyebrow::after { margin-inline: 0; }

.svc-heading h2,
.svc-copy h2 {
	color: var(--svc-navy);
	font-size: clamp(32px, 4vw, 50px);
	font-weight: 830;
	letter-spacing: -.045em;
	line-height: 1.02;
	margin: 0;
}

.svc-heading > p:last-child,
.svc-copy > p {
	color: var(--svc-text);
	font-size: 16px;
	line-height: 1.72;
	margin: 17px 0 0;
}

.svc-hero {
	min-height: 600px;
	position: relative;
}

.svc-hero__image,
.svc-hero__wash {
	height: 100%;
	inset: 0;
	position: absolute;
	width: 100%;
}

.svc-hero__image { object-fit: cover; }
.install-hero .svc-hero__image { object-position: center center; }
.startup-hero .svc-hero__image { object-position: center center; }
.backflow-hero .svc-hero__image { object-position: 58% center; }

.install-hero .svc-hero__wash {
	background: linear-gradient(90deg, #fff 0%, #fffffff4 34%, #ffffff8f 53%, #fff0 74%);
}

.startup-hero .svc-hero__wash {
	background: linear-gradient(90deg, #03142de8 0%, #061d3fbc 38%, #061d3f47 64%, #061d3f1f 100%);
}

.backflow-hero .svc-hero__wash {
	background: linear-gradient(90deg, #031b35fa 0%, #03223be8 39%, #041f363d 72%, #041f3629 100%);
}

.svc-hero__inner {
	align-items: center;
	display: flex;
	min-height: inherit;
	padding-block: 72px;
	position: relative;
	z-index: 1;
}

.svc-hero__copy { max-width: 650px; }

.svc-hero h1 {
	font-size: clamp(45px, 5.6vw, 73px);
	font-weight: 850;
	letter-spacing: -.06em;
	line-height: .96;
	margin: 0;
}

.svc-hero__copy > p:not(.svc-eyebrow) {
	font-size: 17px;
	line-height: 1.65;
	margin: 27px 0 0;
	max-width: 610px;
}

.startup-hero,
.backflow-hero { color: #fff; }
.startup-hero .svc-eyebrow,
.backflow-hero .svc-eyebrow { color: #72c73c; }
.startup-hero .svc-hero__copy > p:not(.svc-eyebrow),
.backflow-hero .svc-hero__copy > p:not(.svc-eyebrow) { color: #e3edf7; }

.svc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 27px;
}

.svc-button {
	align-items: center;
	border: 2px solid transparent;
	border-radius: 6px;
	display: inline-flex;
	font-size: 13px;
	font-weight: 850;
	gap: 8px;
	justify-content: center;
	letter-spacing: .01em;
	min-height: 48px;
	padding: 0 20px;
	text-transform: uppercase;
	transition: background .18s, color .18s, transform .18s;
}

.svc-button:hover { transform: translateY(-2px); }
.svc-button--green { background: var(--svc-green); color: #fff; }
.svc-button--green:hover { background: #318f31; }
.svc-button--outline-blue { background: #fff; border-color: var(--svc-blue); color: var(--svc-blue); }
.svc-button--outline-light { border-color: #fff; color: #fff; }
.svc-button--outline-light:hover { background: #fff; color: var(--svc-navy); }

.svc-check-list {
	display: grid;
	gap: 10px;
	list-style: none;
	margin: 25px 0 0;
	padding: 0;
}

.svc-check-list li {
	color: #243c5e;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.45;
	padding-left: 27px;
	position: relative;
}

.svc-check-list li::before {
	align-items: center;
	border: 2px solid var(--svc-green);
	border-radius: 50%;
	color: var(--svc-green);
	content: "✓";
	display: flex;
	font-size: 10px;
	font-weight: 900;
	height: 17px;
	justify-content: center;
	left: 0;
	position: absolute;
	top: 1px;
	width: 17px;
}

.svc-split {
	align-items: center;
	display: grid;
	gap: clamp(50px, 7vw, 95px);
	grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
}

.svc-split--image-first { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.svc-photo { margin: 0; }
.svc-photo img {
	border: 1px solid #d6e0e9;
	border-radius: 16px;
	box-shadow: 0 8px 0 #eef2f5;
	height: 390px;
	object-fit: cover;
	width: 100%;
}

.svc-photo--wide img { height: clamp(280px, 34vw, 460px); }
.install-intro__photo img { height: auto; object-fit: contain; }

.svc-feature-row {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	padding-bottom: 72px;
}

.svc-feature-row article {
	background: #fff;
	border: 1px solid #87a9d2;
	border-radius: 10px;
	box-shadow: 0 7px 15px #05204912;
	min-height: 150px;
	padding: 25px 20px 20px;
	position: relative;
	text-align: center;
}

.svc-feature-row article::before {
	background: var(--svc-green);
	content: "";
	height: 3px;
	left: 35%;
	position: absolute;
	right: 35%;
	top: 0;
}

.svc-feature-row svg { color: var(--svc-blue); margin: 0 auto 12px; }
.svc-feature-row h3 { font-size: 15px; font-weight: 820; margin: 0 0 6px; }
.svc-feature-row p { color: var(--svc-text); font-size: 12px; line-height: 1.55; margin: 0; }

.svc-photo-card-grid { display: grid; gap: 20px; }
.svc-photo-card-grid--six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.svc-photo-card-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.svc-photo-card-grid article {
	background: #fff;
	border: 1px solid #d7dee5;
	border-radius: 11px;
	box-shadow: 0 8px 16px #10274712;
	overflow: hidden;
	padding-bottom: 20px;
	text-align: center;
}

.svc-photo-card-grid img { height: 130px; object-fit: cover; width: 100%; }
.svc-photo-card-grid h3 { font-size: 15px; font-weight: 830; margin: 16px 13px 7px; }
.svc-photo-card-grid p { color: var(--svc-text); font-size: 11.5px; line-height: 1.55; margin: 0 14px; }

.svc-step-line {
	display: grid;
	gap: 0;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	list-style: none;
	margin: 52px 0 0;
	padding: 0;
	position: relative;
	text-align: center;
}

.svc-step-line::before {
	background: #b9cce2;
	content: "";
	height: 2px;
	left: 10%;
	position: absolute;
	right: 10%;
	top: 22px;
}

.svc-step-line li { padding: 0 16px; position: relative; }
.svc-step-line span {
	align-items: center;
	background: var(--svc-navy);
	border: 4px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 3px var(--svc-green);
	color: #fff;
	display: flex;
	font-size: 11px;
	font-weight: 850;
	height: 44px;
	justify-content: center;
	margin: 0 auto 21px;
	position: relative;
	width: 44px;
	z-index: 1;
}

.svc-step-line li:nth-child(3) span { background: var(--svc-green); }
.svc-step-line h3 { font-size: 14px; font-weight: 830; margin: 0 0 7px; }
.svc-step-line p { color: var(--svc-text); font-size: 11.5px; line-height: 1.55; margin: 0; }

.svc-mini-grid { display: grid; gap: 22px; grid-template-columns: 1fr 1fr; margin-top: 26px; }
.svc-mini-grid > div + div { border-left: 1px solid #d5dee6; padding-left: 22px; }
.svc-mini-grid small { color: var(--svc-green); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.svc-mini-grid h3 { font-size: 14px; font-weight: 830; margin: 7px 0 4px; }
.svc-mini-grid p { color: var(--svc-text); font-size: 11.5px; line-height: 1.5; margin: 0; }
.svc-ribbon { background: var(--svc-navy); border-radius: 5px; color: #fff !important; font-size: 11px !important; font-weight: 700; padding: 9px 14px; text-align: center; }

.svc-faq__grid { column-gap: 20px; display: grid; grid-template-columns: 1fr 1fr; }
.svc-faq details {
	align-self: start;
	background: #fff;
	border: 1px solid #c9d8e9;
	border-radius: 8px;
	box-shadow: 0 4px 12px #061f4910;
	margin-bottom: 13px;
	overflow: hidden;
}

.svc-faq summary {
	color: var(--svc-navy);
	cursor: pointer;
	font-size: 13px;
	font-weight: 800;
	list-style: none;
	padding: 16px 52px 16px 18px;
	position: relative;
}

.svc-faq summary::-webkit-details-marker { display: none; }
.svc-faq summary span {
	background: var(--svc-blue);
	border-radius: 50%;
	height: 24px;
	position: absolute;
	right: 14px;
	top: 12px;
	width: 24px;
}

.svc-faq summary span::before,
.svc-faq summary span::after { background: #fff; content: ""; height: 2px; left: 6px; position: absolute; top: 11px; width: 12px; }
.svc-faq summary span::after { transform: rotate(90deg); transition: transform .18s; }
.svc-faq details[open] summary span::after { transform: rotate(0); }
.svc-faq details p { border-top: 1px solid #e5ebf0; color: var(--svc-text); font-size: 12.5px; line-height: 1.65; margin: 0; padding: 0 18px 17px; padding-top: 13px; }

.svc-final-cta {
	align-items: center;
	background: var(--svc-navy);
	border-radius: 13px;
	color: #fff;
	display: flex;
	gap: 30px;
	justify-content: space-between;
	margin-top: 42px;
	padding: 32px 38px;
}

.svc-final-cta h2 { font-size: clamp(25px, 3vw, 38px); letter-spacing: -.04em; line-height: 1; margin: 0; }
.svc-final-cta .svc-eyebrow { color: #77ca45; }
.svc-final-cta .svc-actions { flex: 0 0 auto; margin: 0; }

/* Installation */
.install-intro { padding-block: 78px 42px; }

.install-timing { background: var(--svc-navy); border-left: 8px solid var(--svc-green); color: #fff; padding: 46px 0 38px; }
.install-timing .svc-heading { margin-bottom: 27px; }
.svc-heading--light h2 { color: #fff; }
.svc-heading--light > p:last-child { color: #bdcbe0; }
.svc-heading--light .svc-eyebrow { color: #65c339; }
.install-timing__grid { border-top: 1px solid #ffffff2e; display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0; padding: 23px 0; }
.install-timing__grid li { border-right: 1px solid #ffffff29; min-height: 95px; padding: 0 22px 0 52px; position: relative; }
.install-timing__grid li:last-child { border-right: 0; }
.install-timing__grid span { align-items: center; border: 2px solid var(--svc-green); border-radius: 50%; color: #8bd35e; display: flex; font-size: 10px; font-weight: 850; height: 35px; justify-content: center; left: 4px; position: absolute; top: 1px; width: 35px; }
.install-timing__grid small { color: #65c339; display: block; font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.install-timing__grid h3 { font-size: 14px; margin: 4px 0; }
.install-timing__grid p { color: #bdcbe0; font-size: 10.5px; line-height: 1.5; margin: 0; }
.install-timing__note { background: #102f5d; border-radius: 5px; color: #fff; font-size: 11px; font-weight: 700; margin: 0; padding: 9px; text-align: center; }

/* Start up */
.startup-hero { min-height: 720px; }
.startup-hero .svc-hero__copy { max-width: 530px; }
.startup-hero h1 { font-size: clamp(58px, 7vw, 91px); }
.startup-benefits__grid { display: grid; gap: 60px; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.6fr); }
.startup-benefits__cards { display: grid; grid-template-columns: repeat(4, 1fr); }
.startup-benefits__cards article { border-left: 1px solid #d3dde7; padding: 8px 24px; text-align: center; }
.startup-benefits__cards svg { color: var(--svc-green); margin: 0 auto 25px; }
.startup-benefits__cards h3 { font-size: 14px; line-height: 1.35; margin: 0 0 22px; text-transform: uppercase; }
.startup-benefits__cards p { color: var(--svc-text); font-size: 12px; line-height: 1.65; margin: 0; }

.startup-process { background: #f2f6fa; display: grid; grid-template-columns: .97fr 1.03fr; }
.startup-process__image img { height: 100%; min-height: 520px; object-fit: cover; width: 100%; }
.startup-process__copy { padding: 55px clamp(34px, 6vw, 90px); }
.startup-process__copy h2 { font-size: clamp(33px, 4vw, 49px); font-weight: 830; letter-spacing: -.05em; line-height: 1; margin: 0; }
.startup-process__copy > p:not(.svc-eyebrow) { color: var(--svc-text); font-size: 13px; line-height: 1.6; }
.startup-process__list { display: grid; gap: 17px 30px; grid-template-columns: 1fr 1fr; list-style: none; margin: 28px 0 0; padding: 0; }
.startup-process__list li { display: flex; gap: 11px; }
.startup-process__list li > span { align-items: center; background: var(--svc-green); border-radius: 50%; color: #fff; display: flex; flex: 0 0 auto; font-size: 10px; font-weight: 850; height: 25px; justify-content: center; width: 25px; }
.startup-process__list h3 { font-size: 12px; font-weight: 850; margin: 2px 0 3px; }
.startup-process__list p { color: var(--svc-text); font-size: 10.5px; line-height: 1.5; margin: 0; }
.startup-issues { border: 1px solid #cdd8e1; }
.svc-callout { align-items: center; background: #edf4fb; border-radius: 7px; color: #37526f; display: flex; font-size: 12px; gap: 15px; justify-content: center; margin: 30px auto 0; max-width: 900px; padding: 13px 18px; }
.svc-callout svg { color: var(--svc-blue); flex: 0 0 auto; }
.startup-found { align-items: flex-start; background: linear-gradient(135deg, #f6faee, #eef6e5); border: 1px solid #dfebd2; border-radius: 16px; display: flex; gap: 22px; padding: 34px; }
.startup-found > span { color: var(--svc-green); flex: 0 0 auto; }
.startup-found h3 { font-size: 23px; margin: 0 0 12px; }
.startup-found p:not(.svc-eyebrow) { color: var(--svc-text); font-size: 13px; line-height: 1.65; margin: 0; }
.startup-strip { background: #f1f5fb; padding: 24px 0; }
.startup-strip__grid { align-items: center; display: grid; grid-template-columns: 1fr 1fr auto; }
.startup-strip__grid > div { align-items: center; border-right: 1px solid #c9d6e5; display: flex; gap: 15px; padding: 0 28px; }
.startup-strip__grid > div:first-child { padding-left: 0; }
.startup-strip__grid > div:last-child { border: 0; display: grid; gap: 8px; padding-right: 0; text-align: center; }
.startup-strip svg { color: var(--svc-blue); flex: 0 0 auto; }
.startup-strip p { margin: 0; }
.startup-strip strong { display: block; font-size: 12px; text-transform: uppercase; }
.startup-strip span { color: var(--svc-text); display: block; font-size: 11px; line-height: 1.45; margin-top: 4px; }
.startup-strip__grid > div:last-child > a:last-child { align-items: center; color: var(--svc-blue); display: flex; font-size: 13px; font-weight: 850; gap: 6px; justify-content: center; }

/* Backflow */
.backflow-hero { min-height: 690px; }
.backflow-hero .svc-hero__copy { max-width: 700px; }
.backflow-hero h1 { font-size: clamp(45px, 5.4vw, 71px); }
.backflow-intro__copy { columns: 2; column-gap: 60px; margin: 0 auto 36px; max-width: 1040px; }
.backflow-intro__copy p { color: var(--svc-text); font-size: 15px; line-height: 1.75; margin: 0; }
.backflow-service-grid { display: grid; gap: 22px; grid-template-columns: repeat(3, 1fr); }
.backflow-service-grid article { background: #fff; border: 1px solid #d5dfe8; border-radius: 12px; display: flex; gap: 17px; padding: 28px; }
.backflow-service-grid article > span { align-items: center; background: #eaf5e4; border-radius: 50%; color: var(--svc-green); display: flex; flex: 0 0 auto; height: 52px; justify-content: center; width: 52px; }
.backflow-service-grid h3 { font-size: 19px; margin: 3px 0 8px; }
.backflow-service-grid p { color: var(--svc-text); font-size: 13px; line-height: 1.65; margin: 0; }
.backflow-freeze { background: var(--svc-navy); border-left: 6px solid var(--svc-green); border-radius: 13px; color: #fff; padding: 39px; }
.backflow-freeze h3 { font-size: 31px; letter-spacing: -.04em; line-height: 1.05; margin: 0 0 16px; }
.backflow-freeze > p:not(.svc-eyebrow) { color: #c9d7e7; font-size: 14px; line-height: 1.7; }
.backflow-freeze > a { color: #75cd47; display: inline-flex; font-size: 13px; font-weight: 800; gap: 8px; margin-top: 16px; }
.backflow-rules { background: #eef4f8; border-block: 1px solid #d9e3eb; padding: 64px 0; }
.backflow-rules__grid { align-items: center; display: grid; gap: 60px; grid-template-columns: .85fr 1.15fr; }
.backflow-rules h2 { font-size: clamp(32px, 4vw, 47px); letter-spacing: -.05em; line-height: 1; margin: 0; }
.backflow-rules__grid > div > p:last-child { color: var(--svc-text); font-size: 14px; line-height: 1.7; }
.backflow-referral { align-items: flex-start; background: #fff; border: 2px solid #91be72; border-radius: 15px; box-shadow: 0 13px 30px #112f4a12; display: flex; gap: 20px; padding: 31px; }
.backflow-referral > span { align-items: center; background: var(--svc-green); border-radius: 50%; color: #fff; display: flex; flex: 0 0 auto; height: 56px; justify-content: center; width: 56px; }
.backflow-referral h3 { font-size: 28px; margin: 0 0 8px; }
.backflow-referral p:not(.svc-eyebrow) { color: var(--svc-text); font-size: 13px; line-height: 1.6; margin: 0; }
.backflow-referral .svc-actions { margin-top: 20px; }
.backflow-choice-grid { display: grid; gap: 24px; grid-template-columns: 1fr 1fr; }
.backflow-choice-grid article { background: #fff; border: 1px solid #d6e0e8; border-radius: 13px; padding: 31px; }
.backflow-choice-grid h3 { font-size: 23px; margin: 0; }
.backflow-local .svc-feature-row { padding-bottom: 0; width: 100%; }

@media (max-width: 1080px) {
	.svc-photo-card-grid--six { grid-template-columns: repeat(3, 1fr); }
	.svc-feature-row { grid-template-columns: repeat(2, 1fr); }
	.startup-benefits__grid { grid-template-columns: 1fr; }
	.startup-benefits__cards article:first-child { border-left: 0; }
	.startup-strip__grid { grid-template-columns: 1fr 1fr; row-gap: 20px; }
	.startup-strip__grid > div:last-child { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
	.svc-shell { width: calc(100% - 36px); }
	.svc-section { padding: 62px 0; }
	.svc-hero { min-height: 620px; }
	.install-hero .svc-hero__wash { background: linear-gradient(90deg, #fffffff7 0%, #ffffffed 58%, #ffffff9c 100%); }
	.startup-hero .svc-hero__wash,
	.backflow-hero .svc-hero__wash { background: #041c38c7; }
	.svc-split,
	.svc-split--image-first,
	.startup-process,
	.backflow-rules__grid { grid-template-columns: 1fr; }
	.svc-split--image-first .svc-photo { order: 2; }
	.svc-feature-row,
	.svc-photo-card-grid--four,
	.backflow-service-grid { grid-template-columns: 1fr 1fr; }
	.svc-step-line { gap: 27px; grid-template-columns: 1fr 1fr; text-align: left; }
	.svc-step-line::before { display: none; }
	.svc-step-line li { padding: 0 0 0 58px; }
	.svc-step-line span { left: 0; margin: 0; position: absolute; top: 0; }
	.install-timing__grid { grid-template-columns: 1fr 1fr; row-gap: 25px; }
	.install-timing__grid li:nth-child(2) { border-right: 0; }
	.startup-benefits__cards { grid-template-columns: 1fr 1fr; }
	.startup-benefits__cards article:nth-child(odd) { border-left: 0; }
	.startup-benefits__cards article { border-top: 1px solid #d3dde7; padding-block: 25px; }
	.startup-process__image img { min-height: 410px; }
	.svc-faq__grid { grid-template-columns: 1fr; }
	.backflow-intro__copy { columns: 1; }
}

@media (max-width: 560px) {
	.svc-shell { width: calc(100% - 28px); }
	.svc-hero h1 { font-size: 43px; }
	.startup-hero h1 { font-size: 56px; }
	.svc-actions { align-items: stretch; flex-direction: column; }
	.svc-button { width: 100%; }
	.svc-feature-row,
	.svc-photo-card-grid--six,
	.svc-photo-card-grid--four,
	.svc-step-line,
	.startup-benefits__cards,
	.startup-process__list,
	.backflow-service-grid,
	.backflow-choice-grid,
	.install-timing__grid,
	.svc-mini-grid { grid-template-columns: 1fr; }
	.svc-mini-grid > div + div { border-left: 0; border-top: 1px solid #d5dee6; padding-left: 0; padding-top: 20px; }
	.install-timing__grid li { border-bottom: 1px solid #ffffff29; border-right: 0; padding-bottom: 20px; }
	.startup-benefits__cards article { border-left: 0; }
	.startup-process__copy { padding-inline: 24px; }
	.startup-strip__grid { grid-template-columns: 1fr; }
	.startup-strip__grid > div,
	.startup-strip__grid > div:first-child,
	.startup-strip__grid > div:last-child { border-bottom: 1px solid #c9d6e5; border-right: 0; grid-column: auto; padding: 18px 0; }
	.svc-final-cta { align-items: stretch; flex-direction: column; padding: 28px 24px; }
	.backflow-referral { flex-direction: column; padding: 24px; }
}