/* FriedoFix contact form.
   One design system for the whole three-step inquiry: a single scale for field
   height, radius, gutter and section rhythm, so no element needs a private
   exception. Density changes are driven by container queries on the card
   itself, never by the viewport: the same block sits on the contact page at
   roughly 700px and inside the narrow homepage CTA column at roughly 330px, and
   a viewport rule would wrongly split that narrow column into two. Browsers
   without container queries keep the compact single-column layout. */

.ff-contact-form,
.ff-contact-form *,
.ff-contact-form *::before,
.ff-contact-form *::after {
	box-sizing: border-box;
}

.ff-contact-form {
	--ff-form-navy: #0f2742;
	--ff-form-deep: #081c30;
	--ff-form-sage: #879f88;
	--ff-form-accent: #4a7050;
	--ff-form-accent-soft: #eef3ec;
	--ff-form-mist: #dce6de;
	--ff-form-sand: #f4f0e9;
	--ff-form-white: #faf8f3;
	--ff-form-border: #c8d2ca;
	--ff-form-muted: #5c6873;
	--ff-form-error: #8d2528;
	--ff-form-success: #2e6240;

	/* One metric scale for every field, tile, button and gap. */
	--ff-form-field-size: 3.375rem;
	--ff-form-radius-card: 24px;
	--ff-form-radius-tile: 12px;
	--ff-form-radius-field: 10px;
	--ff-form-gutter: clamp(0.85rem, 1.6vw, 1.25rem);
	--ff-form-row-gap: clamp(1rem, 1.8vw, 1.35rem);
	--ff-form-block-gap: clamp(1.5rem, 2.6vw, 2.25rem);

	width: min(100%, 1280px);
	max-width: 100%;
	min-inline-size: 0;
	max-inline-size: 100%;
	padding: clamp(1.25rem, 3.2vw, 2.75rem);
	border: 1px solid var(--ff-form-border);
	border-radius: var(--ff-form-radius-card);
	background: #fff;
	box-shadow: 0 18px 48px rgb(8 28 48 / 7%);
	container-type: inline-size;
}

.ff-contact-form form,
.ff-contact-form__header {
	min-inline-size: 0;
	max-inline-size: 100%;
}

.ff-icon {
	display: block;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	flex: 0 0 auto;
}

/* --- Card header ------------------------------------------------------------
   Heading, one calm sub line and a deliberately quiet required-fields hint. */
.ff-contact-form__header {
	max-width: 46rem;
	margin-bottom: var(--ff-form-block-gap);
}

.ff-contact-form__header h2 {
	margin: 0 0 0.6rem;
	color: var(--ff-form-deep);
	font-size: clamp(1.55rem, 1.1rem + 1.5vw, 2.3rem);
	line-height: 1.15;
}

.ff-contact-form__intro {
	margin: 0;
	color: var(--ff-form-muted);
	font-size: 1.05rem;
	line-height: 1.55;
}

.ff-form-required {
	margin: 0.7rem 0 0;
	color: var(--ff-form-muted);
	font-size: 0.875rem;
	line-height: 1.5;
}

/* --- Step sections ----------------------------------------------------------- */
.ff-form-section {
	min-inline-size: 0;
	max-inline-size: 100%;
	margin: 0;
	padding: 0;
	border: 0;

	/* Opening a step focuses it, which scrolls it flush against the viewport top
	   where the sticky site header would cover its heading. */
	scroll-margin-top: var(--ff-header-clearance, 6rem);
}

/* Only relevant without JavaScript, where all three sections are stacked. */
.ff-form-section + .ff-form-section {
	margin-block-start: var(--ff-form-block-gap);
	padding-block-start: var(--ff-form-block-gap);
	border-block-start: 1px solid var(--ff-form-mist);
}

.ff-form-section__legend {
	box-sizing: border-box;
	width: 100%;
	padding: 0;
	margin-block-end: clamp(1rem, 1.8vw, 1.4rem);
	color: var(--ff-form-deep);
	font-size: clamp(1.15rem, 0.95rem + 0.7vw, 1.4rem);
	font-weight: 750;
	line-height: 1.25;
}

.ff-form-section__legend > span {
	display: inline-grid;
	width: 2.25rem;
	height: 2.25rem;
	place-items: center;
	margin-right: 0.55rem;
	border-radius: 50%;
	background: var(--ff-form-mist);
	color: var(--ff-form-navy);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
}

/* --- Field grid --------------------------------------------------------------
   Bottom-aligned rows keep every input on one line even when a single label
   needs two, which is what used to make the object step look ragged. */
.ff-form-grid {
	display: grid;
	min-inline-size: 0;
	max-inline-size: 100%;
	grid-template-columns: minmax(0, 1fr);
	align-items: end;
	gap: var(--ff-form-row-gap) var(--ff-form-gutter);
}

.ff-form-field {
	display: flex;
	min-inline-size: 0;
	max-inline-size: 100%;
	flex-direction: column;
}

.ff-form-field--wide {
	grid-column: 1 / -1;
}

.ff-form-field label,
.ff-form-sublegend {
	display: block;
	margin-bottom: 0.45rem;
	color: var(--ff-form-deep);
	font-size: 0.95rem;
	font-weight: 650;
	line-height: 1.35;
}

.ff-form-field label span,
.ff-form-sublegend span {
	color: var(--ff-form-muted);
	font-size: 0.85em;
	font-weight: 450;
}

.ff-form-field input,
.ff-form-field select,
.ff-form-field textarea {
	box-sizing: border-box;
	inline-size: 100%;
	min-inline-size: 0;
	max-inline-size: 100%;
	min-block-size: var(--ff-form-field-size);
	padding: 0.85rem 1rem;
	border: 1px solid var(--ff-form-border);
	border-radius: var(--ff-form-radius-field);
	background: var(--ff-form-white);
	color: #1d2732;
	font: inherit;
	font-size: 1rem;
	transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

/* A uniform chevron instead of six different native select renderings. */
.ff-form-field select {
	padding-inline-end: 2.75rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f2742' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 1.15rem;
	appearance: none;
}

.ff-form-field textarea {
	min-block-size: 8.5rem;
	line-height: 1.55;
	resize: vertical;
}

.ff-form-field small {
	margin-block-start: 0.45rem;
	color: var(--ff-form-muted);
	font-size: 0.85rem;
	line-height: 1.5;
}

.ff-form-field input:hover,
.ff-form-field select:hover,
.ff-form-field textarea:hover {
	border-color: var(--ff-form-sage);
}

.ff-form-field input:focus-visible,
.ff-form-field select:focus-visible,
.ff-form-field textarea:focus-visible,
.ff-form-consent input:focus-visible,
.ff-contact-form button:focus-visible {
	outline: 3px solid var(--ff-form-sage);
	outline-offset: 2px;
}

/* --- Service selection -------------------------------------------------------
   The whole card is the label, so the entire area is clickable. The native
   checkbox stays the control and carries the state; it is only restyled into
   the indicator in the top right corner, never replaced by a decorative box. */
.ff-service-picker {
	min-inline-size: 0;
	max-inline-size: 100%;
}

/* The selection is permanently open, so this is a plain heading row rather than
   a disclosure control: no pointer cursor, no chevron, no open/closed state. */
.ff-service-picker__head {
	display: grid;
	min-inline-size: 0;
	max-inline-size: 100%;
	align-items: baseline;
	grid-template-areas: "label count";
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.75rem;
	padding: 0 0 0.9rem;
}

.ff-service-picker__label {
	grid-area: label;
	min-inline-size: 0;
	color: var(--ff-form-deep);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
	overflow-wrap: break-word;
}

.ff-service-picker__optional {
	display: block;
	margin-block-start: 0.15rem;
	color: var(--ff-form-muted);
	font-size: 0.875rem;
	font-weight: 450;
}

.ff-service-picker__count {
	grid-area: count;
	min-inline-size: 0;
	max-inline-size: 12rem;
	color: var(--ff-form-muted);
	font-size: 0.9rem;
	text-align: right;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ff-service-picker__panel,
.ff-form-fieldset {
	min-inline-size: 0;
	max-inline-size: 100%;
	margin: 0;
	padding: 0;
	border: 0;
}

.ff-service-cards {
	display: grid;
	min-inline-size: 0;
	grid-template-columns: repeat(2, minmax(0, 1fr));

	/* Equal rows keep the whole selection on one visual baseline even though the
	   labels differ in length. */
	grid-auto-rows: 1fr;
	gap: var(--ff-form-gutter);
}

.ff-service-card {
	position: relative;
	display: flex;
	min-inline-size: 0;

	/* Comfortable card, always well above the 44px touch target. */
	min-block-size: 6.25rem;
	flex-direction: column;
	justify-content: space-between;
	gap: 0.8rem;
	padding: 1rem;
	border: 1px solid var(--ff-form-border);
	border-radius: var(--ff-form-radius-tile);
	background: var(--ff-form-white);
	cursor: pointer;
	transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.ff-service-card__icon {
	display: inline-flex;
	color: var(--ff-form-accent);
}

.ff-service-card__icon .ff-icon {
	inline-size: 1.85rem;
	block-size: 1.85rem;
	stroke-width: 1.5;
}

/* German compounds are long. The rendered label carries <wbr> break
   opportunities at the compound boundaries, so it wraps as
   "Treppenhaus / reinigung" instead of hyphenating mid-syllable. Word breaking
   stays available purely as an overflow safety net. */
.ff-service-card__label {
	min-inline-size: 0;
	color: var(--ff-form-deep);
	font-size: 0.975rem;
	font-weight: 600;
	line-height: 1.3;
	hyphens: none;
	overflow-wrap: break-word;
}

.ff-service-card__control {
	position: absolute;
	inset-block-start: 0.9rem;
	inset-inline-end: 0.9rem;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	margin: 0;
	border: 1.5px solid var(--ff-form-border);
	border-radius: 6px;
	background-color: #fff;
	cursor: pointer;
	appearance: none;
	transition: border-color 160ms ease, background-color 160ms ease;
}

.ff-service-card__control:checked {
	border-color: var(--ff-form-accent);
	background-color: var(--ff-form-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.6 4.6 4.6L19 7.4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 0.95rem;
}

.ff-service-card:hover {
	border-color: var(--ff-form-sage);
	background: var(--ff-form-sand);
}

/* Selected state: border, tint and the filled control. Browsers without :has()
   still show the filled checkbox, so the state is never carried by the card
   background alone. */
.ff-service-card:has(input:checked) {
	border-color: var(--ff-form-accent);
	background: var(--ff-form-accent-soft);
	box-shadow: inset 0 0 0 1px var(--ff-form-accent);
}

.ff-service-card:has(input:focus-visible) {
	outline: 3px solid var(--ff-form-sage);
	outline-offset: 2px;
}

@media (forced-colors: active) {
	.ff-service-card__control {
		appearance: auto;
		background-image: none;
	}
}

/* --- Interval ---------------------------------------------------------------- */
.ff-form-grid--interval {
	margin-block-start: var(--ff-form-block-gap);
}

/* --- Consent and send panel --------------------------------------------------- */
.ff-form-submit-panel {
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	margin-block-start: var(--ff-form-block-gap);
	padding: clamp(1.1rem, 2.2vw, 1.5rem);
	border: 1px solid var(--ff-form-mist);
	border-radius: var(--ff-form-radius-tile);
	background: var(--ff-form-sand);
}

.ff-form-submit-panel__icon {
	display: inline-flex;
	margin-block-start: 0.35rem;
	color: var(--ff-form-accent);
}

.ff-form-submit-panel__icon .ff-icon {
	inline-size: 1.4rem;
	block-size: 1.4rem;
}

.ff-form-consent {
	min-inline-size: 0;
	flex: 1 1 auto;
}

.ff-form-consent label {
	display: flex;
	min-inline-size: 0;
	max-inline-size: 100%;
	min-height: 2.75rem;
	align-items: flex-start;
	gap: 0.75rem;
	cursor: pointer;
}

.ff-form-consent label > span {
	min-inline-size: 0;
	color: var(--ff-form-deep);
	font-size: 1rem;
	line-height: 1.5;
	overflow-wrap: break-word;
}

.ff-form-consent input {
	flex: 0 0 auto;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	margin: 0.1rem 0 0;
	accent-color: var(--ff-form-accent);
	cursor: pointer;
}

/* --- Progress ----------------------------------------------------------------
   Ships hidden and is revealed by view.js. Without JavaScript it never appears
   and the form stays one plain page. */
.ff-form-progress {
	display: grid;
	min-inline-size: 0;
	grid-auto-columns: 1fr;
	grid-auto-flow: column;
	margin: 0 0 var(--ff-form-block-gap);
	padding: 0;
	list-style: none;
}

.ff-form-progress__item {
	position: relative;
	display: flex;
	min-inline-size: 0;
	flex-direction: column;
	align-items: center;
	gap: 0.55rem;
	text-align: center;
}

/*
 * Alle drei Schritte stehen auf einer Linie.
 *
 * Die Schrittliste ist ein ol innerhalb von .ff-prose, wird hier aber als
 * Grid nebeneinander gesetzt. Die Prosaregel ".ff-prose li + li" vergibt
 * gestapelten Listenpunkten einen Abstand nach oben von 0,55rem. In der
 * Zeilenanordnung schob dieser Abstand Schritt 2 und 3 um 8,8px nach unten,
 * waehrend Schritt 1 als erstes Kind unberuehrt blieb -- die Kreise standen
 * dadurch sichtbar nicht auf gleicher Hoehe.
 */
.ff-form-progress__item + .ff-form-progress__item {
	margin-block-start: 0;
}

/* The connector is drawn behind the markers so the numbers stay legible. */
.ff-form-progress__item + .ff-form-progress__item::before {
	position: absolute;
	z-index: 0;
	inset-block-start: 1.4rem;
	inset-inline-end: 50%;
	block-size: 2px;
	inline-size: 100%;
	background: var(--ff-form-border);
	content: "";
}

.ff-form-progress__marker {
	position: relative;
	z-index: 1;
	display: grid;
	block-size: 2.8rem;
	inline-size: 2.8rem;
	border: 2px solid var(--ff-form-border);
	border-radius: 50%;
	background: #fff;
	color: var(--ff-form-muted);
	font-size: 1.05rem;
	font-weight: 700;
	place-items: center;
}

.ff-form-progress__marker .ff-icon {
	display: none;
	inline-size: 1.3rem;
	block-size: 1.3rem;
}

.ff-form-progress__label {
	min-inline-size: 0;
	color: var(--ff-form-muted);
	font-size: 0.9rem;
	line-height: 1.3;
	overflow-wrap: break-word;
}

/* The current and the completed steps are marked by fill, weight, glyph and
   aria-current, never by colour alone. */
.ff-form-progress__item.is-current .ff-form-progress__marker {
	border-color: var(--ff-form-accent);
	background: var(--ff-form-accent);
	color: #fff;
}

.ff-form-progress__item.is-current .ff-form-progress__label,
.ff-form-progress__item.is-complete .ff-form-progress__label {
	color: var(--ff-form-deep);
}

.ff-form-progress__item.is-current .ff-form-progress__label {
	font-weight: 700;
}

.ff-form-progress__item.is-complete .ff-form-progress__marker {
	border-color: var(--ff-form-accent);
	background: var(--ff-form-accent-soft);
	color: var(--ff-form-accent);
}

.ff-form-progress__item.is-complete .ff-form-progress__number {
	display: none;
}

.ff-form-progress__item.is-complete .ff-form-progress__marker .ff-icon {
	display: block;
}

/* --- Navigation row -----------------------------------------------------------
   One row for the whole form: back on the left, the primary action on the
   right. Both wizard buttons ship hidden, the submit button ships visible, so
   without JavaScript this is simply the send row of one long form. */
.ff-form-nav {
	display: flex;
	min-inline-size: 0;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-block-start: var(--ff-form-block-gap);
	padding-block-start: clamp(1.25rem, 2.2vw, 1.75rem);
	border-block-start: 1px solid var(--ff-form-mist);
}

.ff-form-nav__forward {
	display: flex;
	min-inline-size: 0;
	margin-inline-start: auto;
	gap: 0.75rem;
}

.ff-contact-form .ff-form-nav__back,
.ff-contact-form .ff-form-nav__next,
.ff-contact-form .ff-form-nav__submit {
	display: inline-flex;
	min-block-size: var(--ff-form-field-size);
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 0.8rem 1.6rem;
	border-radius: 999px;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 650;
	line-height: 1.25;
	text-align: center;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.ff-contact-form .ff-form-nav__back {
	border: 1px solid var(--ff-form-border);
	background: transparent;
	color: var(--ff-form-deep);
}

.ff-contact-form .ff-form-nav__back:hover {
	border-color: var(--ff-form-navy);
	background: var(--ff-form-sand);
}

.ff-contact-form .ff-form-nav__next,
.ff-contact-form .ff-form-nav__submit {
	border: 0;
	background: var(--ff-form-navy);
	color: #fff;
}

.ff-contact-form .ff-form-nav__next:hover,
.ff-contact-form .ff-form-nav__submit:hover {
	background: var(--ff-form-deep);
}

.ff-form-nav__icon .ff-icon {
	inline-size: 1.15rem;
	block-size: 1.15rem;
}

.ff-contact-form button[disabled] {
	cursor: wait;
	opacity: 0.7;
}

/* --- Notices ------------------------------------------------------------------ */
.ff-form-notice {
	margin-block: 1rem;
	padding: 0.9rem 1rem;
	border: 0;
	border-left: 0.3rem solid;
	border-radius: 0 12px 12px 0;
}

.ff-form-notice > :last-child {
	margin-bottom: 0;
}

.ff-form-notice[hidden] {
	display: none;
}

.ff-form-notice ul {
	margin-block: 0.65rem 0;
	padding-inline-start: 1.25rem;
}

.ff-form-notice li + li {
	margin-top: 0.35rem;
}

.ff-form-notice a {
	color: inherit;
	font-weight: 650;
	text-underline-offset: 0.15em;
}

.ff-contact-form [aria-invalid="true"] {
	border-color: var(--ff-form-error);
	box-shadow: 0 0 0 1px var(--ff-form-error);
}

.ff-form-notice--success {
	border-color: var(--ff-form-success);
	background: #eef8f1;
}

.ff-form-notice--error {
	border-color: var(--ff-form-error);
	background: #fff3f3;
}

.ff-form-notice--preview {
	border-color: #9a5d00;
	background: #fff8e5;
}

.ff-contact-form--preview {
	border-color: #c6923d;
}

.ff-contact-alternatives {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.ff-contact-alternatives a {
	color: var(--ff-form-navy);
	font-weight: 700;
}

.ff-contact-alternatives .ff-phone-link a {
	display: inline-flex;
	min-height: 2.75rem;
	align-items: center;
	overflow-wrap: normal;
	white-space: nowrap;
	word-break: normal;
}

.ff-honeypot {
	position: absolute !important;
	inline-size: 1px !important;
	block-size: 1px !important;
	overflow: hidden !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
}

/* Object-type driven conditional fields: the [hidden] attribute set by the
   progressive-enhancement script must always win over the grid display, and a
   hidden field must not reserve a grid cell. */
.ff-form-grid [data-ff-field][hidden] {
	display: none;
}

.ff-contact-form--editor .ff-contact-form__editor-preview {
	padding: 1.25rem;
	border: 1px dashed var(--ff-form-border);
	border-radius: 14px;
	background: var(--ff-form-sand);
}

/* A hidden step, button or navigation must stay hidden: fieldsets and flex
   containers would otherwise override the attribute. */
.ff-contact-form .ff-form-section[hidden],
.ff-contact-form .ff-form-progress[hidden],
.ff-contact-form .ff-form-nav[hidden],
.ff-contact-form .ff-form-nav__back[hidden],
.ff-contact-form .ff-form-nav__next[hidden],
.ff-contact-form .ff-form-nav__submit[hidden] {
	display: none;
}

/* While the wizard runs only one section is visible, so the rule that separates
   the stacked sections would float above an otherwise empty area. */
form[data-ff-step] .ff-form-section + .ff-form-section {
	margin-block-start: 0;
	padding-block-start: 0;
	border-block-start: 0;
}

/* In wizard mode the progress list already numbers the steps, so the 01/02/03
   badge in the legend would say it twice. It stays in the accessible name and
   returns as an orientation aid in the stacked no-JavaScript form. */
form[data-ff-step] .ff-form-section__legend > span[aria-hidden="true"] {
	display: none;
}

/* The step fieldset receives focus after every step change; it is a programmatic
   target, not a tab stop, so it must not paint a permanent outline. */
.ff-form-section:focus {
	outline: none;
}

.ff-form-section:focus-visible {
	outline: 3px solid var(--ff-form-sage);
	outline-offset: 4px;
}

/* --- Container-driven density -------------------------------------------------
   Everything below reacts to the width the card actually has. */

/* Two comfortable field columns as soon as the card is wide enough that a
   half-width field still fits a full label on one or two lines. */
@container (min-width: 34rem) {
	.ff-form-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* The interval is a short answer; a full-width select would read as an
	   unfinished row. */
	.ff-form-grid--interval {
		grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
	}

	.ff-service-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Four columns only once a column is genuinely wide enough for the longest
   current service names; narrower columns wrap every card into three lines and
   end up taller than three columns. */
@container (min-width: 56rem) {
	.ff-service-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Narrow card: stack the navigation and give the primary action the full width,
   and drop the selection to one column before the labels start to break. */
@container (max-width: 26rem) {
	.ff-form-nav {
		align-items: stretch;
		flex-direction: column;
	}

	.ff-form-nav__forward {
		margin-inline-start: 0;
	}

	.ff-form-nav__forward > * {
		flex: 1 1 auto;
	}

	.ff-service-picker__head {
		grid-template-areas:
			"label label"
			"count count";
		grid-template-columns: minmax(0, 1fr);
		gap: 0.2rem 0.65rem;
	}

	.ff-service-picker__count {
		max-inline-size: 100%;
		text-align: left;
	}
}

/* Two cards per row on a phone stay the goal, so the card gives its label back
   the room the padding took rather than shrinking the type. */
@container (max-width: 24rem) {
	.ff-service-card {
		min-block-size: 5.5rem;
		gap: 0.6rem;
		padding: 0.8rem;
	}

	.ff-service-card__icon .ff-icon {
		inline-size: 1.6rem;
		block-size: 1.6rem;
	}

	.ff-service-card__control {
		inset-block-start: 0.75rem;
		inset-inline-end: 0.75rem;
		inline-size: 1.35rem;
		block-size: 1.35rem;
	}
}

@container (max-width: 17.5rem) {
	.ff-service-cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.ff-service-card {
		min-block-size: 0;
	}
}

/* Viewport fallbacks for the smallest phones, also covering browsers without
   container query support. */
@media (max-width: 400px) {
	.ff-contact-form {
		border-radius: 18px;
	}

	.ff-form-progress__marker {
		block-size: 2.5rem;
		inline-size: 2.5rem;
		font-size: 0.95rem;
	}

	.ff-form-progress__item + .ff-form-progress__item::before {
		inset-block-start: 1.25rem;
	}

	.ff-form-progress__label {
		font-size: 0.8rem;
	}

	.ff-service-picker__optional {
		display: inline;
		margin-inline-start: 0.35rem;
	}
}

/* Below this width two cards would leave under 105px for the label, which is
   where the longest compound stops fitting even with its break opportunities. */
@media (max-width: 360px) {
	.ff-service-cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.ff-service-card {
		min-block-size: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ff-contact-form *,
	.ff-contact-form *::before,
	.ff-contact-form *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}