/**
 * Estimate form: Fluent Forms #3 as a 3-step form (assets/js/estimate-steps.js), one shared design for
 * every page that embeds the form in an .estimate__card (homepage, service pages, future pages).
 * Presentation only: the fields, stored values, validation, spam protection, submission and Lead
 * Delivery are Fluent's and hydro-core's and are not touched here.
 *
 * The layout follows the card's own width (container queries), not the viewport, so the form fits any
 * column it is placed in: two-column service options and phone / email side by side only when the
 * card is wide enough; one column, a stacked progress header and full-width buttons when it is narrow
 * (also when text is enlarged, since the breakpoints are in rem).
 *
 * Contrast on white: ink 14.55:1, muted 7.4:1, ocean 11.5:1, error #B42318 6.57:1, placeholder
 * #5F6E83 5.19:1, field border #8795A6 3.05:1 (non-text needs 3:1); white on ocean 11.5:1.
 * Native radios and checkboxes stay visible (they also carry the state in forced-colors mode).
 */

/* ------------------------------------------------------------------ card */
.estimate__card {
	container: estimate-card / inline-size;
	box-sizing: border-box;
	width: 100%;
	max-width: 40rem;
	justify-self: end;
	--ef-pad: clamp(1rem, 4vw, 2.25rem);
	padding: var(--ef-pad);
}

.estimate__card .fluentform,
.estimate__card .fluentform form {
	margin: 0;
}

.estimate__card .hydro-step-hidden {
	display: none !important; /* Fluent sets display on some groups */
}

/* ------------------------------------------------------------------ progress: 1 Service — 2 Project — 3 Contact */
.estimate__card .hydro-progress {
	margin: 0 0 1.75rem;
}

.hydro-progress__count,
.hydro-progress__bar {
	display: none;
}

.hydro-progress__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.hydro-progress__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.55rem;
	min-width: 0;
	margin: 0;
	padding-right: 0.6rem;
	font: 600 0.9375rem/1.25 var(--sans);
	color: var(--muted);
}

/* The line to the next step. */
.hydro-progress__item:not(:last-child)::after {
	content: "";
	flex: 1;
	min-width: 0.75rem;
	height: 2px;
	border-radius: 1px;
	background: var(--line-cool);
}

.hydro-progress__num {
	position: relative;
	display: grid;
	flex: none;
	place-items: center;
	width: 1.875rem;
	height: 1.875rem;
	border: 2px solid var(--line);
	border-radius: 50%;
	background: #fff;
	font: 600 0.875rem/1 var(--display);
	color: var(--muted);
}

.hydro-progress__label {
	min-width: 0;
	overflow-wrap: break-word;
}

.hydro-progress__item.is-current {
	color: var(--ink);
}

.hydro-progress__item.is-current .hydro-progress__num {
	border-color: var(--navy);
	background: var(--navy);
	color: #fff;
}

.hydro-progress__item.is-done {
	color: var(--ink);
}

.hydro-progress__item.is-done::after {
	background: var(--ocean);
}

.hydro-progress__item.is-done .hydro-progress__num {
	border-color: var(--ocean);
	background: var(--ocean);
	color: transparent; /* the number is replaced by a check mark; screen readers hear "completed" */
}

.hydro-progress__item.is-done .hydro-progress__num::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.6rem;
	height: 0.32rem;
	border: solid #fff;
	border-width: 0 0 2px 2px;
	transform: translate(-50%, -65%) rotate(-45deg);
}

/* The narrowest cards (small phones, enlarged text): the label sits under its number and the line
   runs between the numbers, so "Service / Project / Contact" never get squeezed. Wider phones keep
   number and label side by side (compact sizes below, "phones: a compact step 1"). */
@container estimate-card (max-width: 19.25rem) {
	.hydro-progress__item {
		flex-direction: column;
		gap: 0.4rem;
		padding: 0;
		font-size: 0.875rem;
		text-align: center;
	}

	.hydro-progress__item:not(:last-child)::after {
		position: absolute;
		top: 0.9375rem;
		right: calc(-50% + 1.25rem);
		left: calc(50% + 1.25rem);
		min-width: 0;
		margin-top: -1px;
	}
}

/* Very narrow cards (a small phone with text enlarged to about 200 %): only the current step keeps its
   visible label; the others stay readable to screen readers. Option rows lose a little padding. */
@container estimate-card (max-width: 12rem) {
	.hydro-progress__item:not(.is-current) .hydro-progress__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.hydro-progress__item.is-current .hydro-progress__label {
		position: absolute;
		top: 100%;
		left: 50%;
		margin-top: 0.4rem;
		transform: translateX(-50%);
		white-space: nowrap;
	}

	.hydro-progress {
		padding-bottom: 1.6rem;
	}

	.estimate__card .fluentform :is(.ff_list_2col, .ff_list_inline) .ff-el-form-check-label {
		gap: 0.4rem;
		padding-inline: 0.45rem;
	}
}

/* ------------------------------------------------------------------ step headings */
.estimate__card .fluentform .hydro-step-start {
	margin-bottom: 1.25rem;
}

.estimate__card .hydro-step-title {
	margin: 0;
	font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--ink);
}

.estimate__card .hydro-step-title:focus {
	outline: none;
}

/* Design 03 shows the step title only. */
.estimate__card .hydro-step-lead {
	display: none;
}

/* ------------------------------------------------------------------ fields */
.estimate__card .fluentform .ff-el-group {
	position: relative;
	margin-bottom: 1.25rem;
}

.estimate__card .fluentform .ff-el-input--label {
	margin-bottom: 0.5rem;
	padding: 0;
	line-height: normal;
}

.estimate__card .fluentform .ff-el-input--label label {
	display: block;
	font: 600 0.9375rem/1.35 var(--sans);
	color: var(--ink);
}

.estimate__card .fluentform .ff-el-input--label.asterisk-right label::after {
	color: var(--c-error);
}

.estimate__card .fluentform .ff-el-form-control {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-height: 3rem;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--field-border);
	border-radius: var(--radius);
	background: #fff;
	box-shadow: none;
	font: 400 1rem/1.4 var(--sans); /* 16px: no zoom on focus in iOS Safari */
	color: var(--ink);
	transition: border-color 0.15s ease;
}


.estimate__card .fluentform .ff-el-form-control::placeholder {
	color: #5f6e83;
	opacity: 1;
}

.estimate__card .fluentform .ff-el-form-control:focus {
	border-color: var(--ocean);
	outline: 2px solid var(--ocean);
	outline-offset: 0;
	box-shadow: none;
}

.estimate__card .fluentform textarea.ff-el-form-control {
	min-height: 6.5rem;
	resize: vertical;
}

/* Phone and email side by side when the card is wide enough (the fieldset becomes a two-column grid in
   which every other block spans both columns; hidden steps take no cells). */
@container estimate-card (min-width: 30rem) {
	.estimate__card .fluentform form > fieldset {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 1rem;
	}

	.estimate__card .fluentform form > fieldset > * {
		grid-column: 1 / -1;
	}

	.estimate__card .fluentform form > fieldset > .ff-el-group:is(:has(input[name="phone"]), :has(input[name="email"])) {
		grid-column: auto;
	}
}

/* ------------------------------------------------------------------ option lists (native radios and checkboxes) */
.estimate__card .fluentform :is(.ff_list_2col, .ff_list_inline) .ff-el-form-check {
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
}

.estimate__card .fluentform :is(.ff_list_2col, .ff_list_inline) .ff-el-form-check-label {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	min-height: 2.875rem;
	margin: 0;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--line-cool);
	border-radius: var(--radius);
	background: #fff;
	font: 500 0.9375rem/1.3 var(--sans);
	color: var(--ink);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.estimate__card .fluentform :is(.ff_list_2col, .ff_list_inline) .ff-el-form-check-label > span {
	min-width: 0;
	overflow-wrap: break-word;
	hyphens: auto;
}

.estimate__card .fluentform :is(.ff_list_2col, .ff_list_inline) .ff-el-form-check-input {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	margin: 0;
	accent-color: var(--navy);
	cursor: pointer;
}

.estimate__card .fluentform :is(.ff_list_2col, .ff_list_inline) .ff-el-form-check-input:focus {
	outline: none; /* the ring is drawn around the whole option */
}

.estimate__card .fluentform :is(.ff_list_2col, .ff_list_inline) .ff-el-form-check-label:has(input:focus-visible) {
	outline: 3px solid var(--ocean);
	outline-offset: 2px;
}

/* Property type: a two-option segmented control (stacks when there is no room). */
.estimate__card .fluentform .ff_list_inline .ff-el-input--content {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.75rem), 1fr));
	gap: 0.25rem;
	padding: 0.25rem;
	border: 1px solid var(--line-cool);
	border-radius: var(--radius-lg);
	background: #f3f8fc;
}

.estimate__card .fluentform .ff_list_inline .ff-el-form-check-label {
	justify-content: center;
	gap: 0.5rem;
	padding-inline: 0.5rem;
	border-color: transparent;
	background: transparent;
	font-size: 1rem;
}

/* The two options stack (auto-fit above) before a word needs to break; only with very large text,
   where even one option per row is too narrow, may a word hyphenate. */
.estimate__card .fluentform .ff_list_inline .ff-el-form-check-label > span {
	hyphens: auto;
}


.estimate__card .fluentform .ff_list_inline .ff-el-form-check-label:has(input:checked) {
	border-color: var(--navy);
	background: #fff;
	box-shadow: 0 1px 2px rgb(var(--shade-rgb) / 0.12);
	font-weight: 600;
}

/* Services: selectable rows, two columns when the card is wide enough. */
.estimate__card .fluentform .ff_list_2col .ff-el-input--content {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.375rem;
}

@container estimate-card (min-width: 30rem) {
	.estimate__card .fluentform .ff_list_2col .ff-el-input--content {
		/* The right column holds the longest names (Commercial Pressure Washing): a little more room. */
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	}
}

.estimate__card .fluentform .ff_list_2col .ff-el-form-check-label {
	gap: 0.6rem;
	padding-inline: 0.7rem;
}


.estimate__card .fluentform .ff_list_2col .ff-el-form-check-label:has(input:checked) {
	border-color: var(--navy);
	background: var(--tint);
}

/* ------------------------------------------------------------------ validation */
.estimate__card .fluentform .ff-el-is-error .ff-el-form-control,
.estimate__card .fluentform .ff-el-is-error.ff_list_inline .ff-el-input--content {
	border-color: var(--c-error);
}

/* Services: a quieter cue on every row (the message under the list names the problem). */
.estimate__card .fluentform .ff-el-is-error.ff_list_2col .ff-el-form-check-label {
	border-color: #e3a49d;
}

/* Errors sit in the flow under their field (they may wrap to two lines on narrow screens). */
.estimate__card .fluentform .error,
.estimate__card .fluentform .text-danger {
	position: static;
	grid-column: 1 / -1;
	margin-top: 0.45rem;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--c-error);
}

/* Fluent's own messages after a failed submission (for example the rate limit). */
.estimate__card .ff-errors-in-stack {
	margin: 1rem 0 0;
	padding: 0.85rem 1rem;
	border-left: 3px solid var(--c-error);
	background: #fef3f2;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--c-error);
	list-style: none;
}

.estimate__card .ff-errors-in-stack .error {
	margin: 0;
}

/* Privacy note under the contact fields. */
.estimate__card .fluentform .hydro-form-note-wrap {
	margin-bottom: 0.25rem;
}

.estimate__card .hydro-form-note {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--muted);
}

.estimate__card .hydro-form-note::before {
	content: none;
}

/* ------------------------------------------------------------------ Back / Continue / Request my estimate */
.estimate__card .hydro-step-nav {
	display: flex;
	flex-wrap: wrap-reverse; /* when the buttons can't share a row, the main action goes on top */
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem;
	margin: 0.25rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--line-cool);
}

.estimate__card .hydro-step-nav:has(.hydro-step-back) {
	justify-content: space-between;
}

.estimate__card .fluentform .hydro-step-nav .ff_submit_btn_wrapper {
	margin: 0;
	padding: 0;
}

.hydro-step-btn,
.estimate__card .fluentform form .ff-btn-submit:not(.ff_btn_no_style) {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-width: 0;
	max-width: 100%;
	min-height: 3rem;
	padding: 0.75rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var(--radius);
	box-shadow: none;
	font: 700 1rem/1.2 var(--sans);
	white-space: normal; /* very large text: the label wraps inside the button instead of overflowing */
	text-align: center;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Primary: Continue and the submit button (overrides Fluent's inline button colour). */
.hydro-step-next,
.estimate__card .fluentform form .ff-btn-submit:not(.ff_btn_no_style) {
	border-color: var(--ocean);
	background-color: var(--ocean);
	color: #fff;
	opacity: 1; /* Fluent's default theme fades buttons on hover */
}

.hydro-step-next::after {
	content: "";
	width: 1.15em;
	height: 1.15em;
	background: currentColor;
	-webkit-mask: var(--i-arrow) center / contain no-repeat;
	mask: var(--i-arrow) center / contain no-repeat;
}

.estimate__card .fluentform form .ff-btn-submit:not(.ff_btn_no_style):focus {
	border-color: var(--ocean);
	background-color: var(--ocean);
	color: #fff;
	opacity: 1; /* Fluent fades the focused button */
}

/* Secondary: Back. */
.hydro-step-back {
	border-color: var(--line);
	background: #fff;
	color: var(--navy);
}


.hydro-step-btn:focus-visible,
.estimate__card .fluentform form .ff-btn-submit:focus-visible {
	outline: 3px solid var(--ocean);
	outline-offset: 3px;
}

/* While Fluent sends the request it disables the button (repeat clicks are ignored): show it. */
.estimate__card .fluentform form .ff-btn-submit:not(.ff_btn_no_style):is(.ff-working, :disabled) {
	border-color: var(--ocean);
	background-color: var(--ocean);
	color: #fff;
	opacity: 0.75;
	cursor: progress;
}

.estimate__card .fluentform form .ff-btn-submit.ff-working::after {
	content: "";
	width: 1em;
	height: 1em;
	border: 2px solid rgb(255 255 255 / 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: hydro-spin 0.8s linear infinite;
}

@keyframes hydro-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Narrow cards: the primary action fills the row (Back keeps its width). */
@container estimate-card (max-width: 30rem) {
	.estimate__card .hydro-step-nav > :last-child {
		flex: 1 1 auto;
	}

	.estimate__card .hydro-step-nav .hydro-step-btn,
	.estimate__card .fluentform .hydro-step-nav .ff-btn-submit {
		padding-inline: 1.1rem;
	}

	.estimate__card .fluentform .hydro-step-nav .ff-btn-submit {
		width: 100%;
	}

	.estimate__card .fluentform .hydro-step-nav .ff_submit_btn_wrapper {
		min-width: 0;
		max-width: 100%;
	}
}

/* ------------------------------------------------------------------ thank-you message */
.estimate__card .ff-message-success {
	margin: 0;
	padding: clamp(1rem, 3vw, 2rem) 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	text-align: center;
	color: var(--muted);
}

.estimate__card .ff-message-success:focus {
	outline: none;
}

.hydro-form-success::before {
	content: "";
	display: block;
	width: 3rem;
	height: 3rem;
	margin: 0 auto 1rem;
	background: var(--ocean);
	-webkit-mask: var(--i-check-circle) center / contain no-repeat;
	mask: var(--i-check-circle) center / contain no-repeat;
}

.hydro-form-success h3 {
	margin: 0 0 0.75rem;
	font-size: 1.3rem;
	color: var(--ink);
}

.hydro-form-success p {
	max-width: 28rem;
	margin: 0 auto;
}

/* ------------------------------------------------------------------ phones: a compact step 1 */
/* Cards narrower than 30rem (phones; tablets and desktop keep the layout above). Everything below only
   tightens spacing and puts the services in two columns where the labels fit: the controls, their
   labels and their behaviour are the same native Fluent ones. */
@container estimate-card (max-width: 29.99rem) {
	.estimate__card .hydro-progress {
		margin-bottom: 1.25rem;
	}

	.hydro-progress__item {
		gap: 0.4rem;
		padding-right: 0.4rem;
		font-size: 0.875rem;
	}

	.hydro-progress__item:not(:last-child)::after {
		min-width: 0.5rem;
	}

	.hydro-progress__num {
		width: 1.625rem;
		height: 1.625rem;
		font-size: 0.875rem;
	}

	.estimate__card .fluentform .hydro-step-start {
		margin-bottom: 1rem;
	}

	.estimate__card .fluentform .ff-el-group {
		margin-bottom: 1rem;
	}

	.estimate__card .fluentform .ff-el-input--label {
		margin-bottom: 0.4rem;
	}

	/* Property type: two options side by side down to the smallest phones. */
	.estimate__card .fluentform .ff_list_inline .ff-el-input--content {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.25rem), 1fr));
	}

	.estimate__card .fluentform .ff_list_inline .ff-el-form-check-label {
		gap: 0.45rem;
		min-height: 2.75rem;
		padding-block: 0.4rem;
		padding-inline: 0.4rem;
		font-size: 0.9375rem;
	}

	.estimate__card .fluentform :is(.ff_list_2col, .ff_list_inline) .ff-el-form-check-input {
		width: 1rem;
		height: 1rem;
	}

	/* Services: compact rows (one column on the smallest phones). */
	.estimate__card .fluentform .ff_list_2col .ff-el-form-check-label {
		min-height: 2.75rem;
		padding-block: 0.45rem;
	}
}

/* The smallest phones (a 320px screen): the two property options still fit side by side. */
@container estimate-card (max-width: 17rem) {
	.estimate__card .fluentform .ff_list_inline .ff-el-form-check-label {
		gap: 0.4rem;
		padding-inline: 0.125rem; /* the label is centred, so the side padding is not needed for room */
		font-size: 0.875rem;
	}
}

/* Services in two columns from about a 375px phone (a 19rem card): four rows instead of eight. The
   rows of a line share one height and long names wrap at spaces; below 19rem (360px and smaller
   phones, enlarged text) full-width rows keep the labels on one or two lines instead of three. */
@container estimate-card (min-width: 19rem) and (max-width: 29.99rem) {
	.estimate__card .fluentform .ff_list_2col .ff-el-input--content {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.375rem;
	}

	.estimate__card .fluentform .ff_list_2col .ff-el-form-check-label {
		gap: 0.45rem;
		padding-inline: 0.55rem;
		font-size: 0.875rem;
		line-height: 1.25;
	}
}

/* Step 1 on phones and tablets: its own Continue row stays at the bottom of the screen while the
   visitor works through the options (position: sticky inside the form, so it never leaves the form
   and never covers anything below it; it settles back into place at the end of the step). Steps 2
   and 3 keep their buttons in the normal flow, so the on-screen keyboard and the Back / submit row
   never compete. The site's own phone bar is hidden while the form is on screen (site.js). */
@media (max-width: 1099px) {
	.estimate__card .fluentform form[data-step="1"] .hydro-step-nav:not(.hydro-step-hidden) {
		position: sticky;
		bottom: 0;
		z-index: 3;
		margin-inline: calc(-1 * var(--ef-pad));
		padding: 0.75rem var(--ef-pad) calc(0.75rem + env(safe-area-inset-bottom));
		background: #fff;
		box-shadow: 0 -10px 16px -14px rgb(var(--shade-rgb) / 0.35);
	}

	/* Options reached with the keyboard scroll clear of the sticky row: the page keeps that much room
	   at the bottom while step 1 is shown (the browser only scrolls when a box would be covered). */
	html:has(.estimate__card form[data-step="1"]) {
		scroll-padding-bottom: calc(6rem + env(safe-area-inset-bottom));
	}

	.estimate__card .fluentform form[data-step="1"] input {
		scroll-margin-bottom: calc(5.5rem + env(safe-area-inset-bottom));
	}
}

/* Hover effects only where a pointer can hover, so a tap never leaves a control in its hover state. */
@media (hover: hover) {
	.estimate__card .fluentform .ff-el-form-control:hover {
		border-color: var(--ink);
	}

	.estimate__card .fluentform .ff_list_inline .ff-el-form-check-label:hover {
		background: #fff;
	}

	.estimate__card .fluentform .ff_list_2col .ff-el-form-check-label:hover {
		border-color: var(--field-border);
	}

	.hydro-step-back:hover {
		border-color: var(--navy);
	}

	.hydro-step-next:hover,
	.estimate__card .fluentform form .ff-btn-submit:not(.ff_btn_no_style):hover {
		border-color: var(--navy);
		background-color: var(--navy);
		color: #fff;
		opacity: 1;
	}
}

/* Focused fields stay clear of the sticky header (and of the phone keyboard). */
.estimate__card :is(input, textarea, select, button) {
	scroll-margin-top: calc(var(--hdr-h) + 1.5rem);
	scroll-margin-bottom: 2rem;
}

/* The section layout stacks below 1100px: the card then takes the full column. */
@media (max-width: 1099px) {
	.estimate__card {
		max-width: none;
		justify-self: stretch;
	}
}

@media (prefers-reduced-motion: reduce) {
	.estimate__card *,
	.estimate__card *::before,
	.estimate__card *::after {
		transition: none !important;
	}

	.estimate__card .fluentform form .ff-btn-submit.ff-working::after {
		animation: none;
	}
}

/* ------------------------------------------------------------------ no layout shift (R1.7, theme 1.18.0)
 * assets/js/estimate-steps.js inserts the progress indicator above step 1 after the first paint, which
 * pushed the visible fields down by the indicator's height (Contact Us: layout shift 0.09 to 0.10 at
 * 1440). Until the form is ready, step 1 keeps that space: the indicator's height plus its margin in
 * each card size (the container queries above), as a top margin on the first step heading (Fluent Forms
 * resets the fieldset's padding). Without JavaScript nothing is reserved. */
.js .estimate__card .fluentform form:not(.hydro-steps-ready) fieldset > .hydro-step-start:not(.hydro-step-start ~ .hydro-step-start) {
	margin-top: 3.625rem;
}

@container estimate-card (max-width: 29.99rem) {
	.js .estimate__card .fluentform form:not(.hydro-steps-ready) fieldset > .hydro-step-start:not(.hydro-step-start ~ .hydro-step-start) {
		margin-top: 2.875rem;
	}
}

@container estimate-card (max-width: 19.25rem) {
	.js .estimate__card .fluentform form:not(.hydro-steps-ready) fieldset > .hydro-step-start:not(.hydro-step-start ~ .hydro-step-start) {
		margin-top: 4.375rem;
	}
}