/* ==========================================================================
   Gravity Forms, wearing the static build's form design.

   Values are transcribed from new_html/assets/css/style.css §31 (form controls),
   §32 (file drop zone) and §36 (error summary) — the sections deliberately left out
   of sections.css because they described markup Gravity Forms does not produce.
   Here they are mapped onto the classes it does produce.

   Gravity Forms ships its own stylesheet on every page it renders, and it loads
   after the theme's, so several rules need one more class than feels necessary to
   win the tie.

   The selectors are scoped to .gform_wrapper only, so they hold whichever form theme
   is active — the blocks ask for the legacy `gravity-theme`, whose markup is simple
   enough to style directly; Orbital drives everything through its own custom
   properties and would have to be themed a different way.
   ========================================================================== */

/* ---------- the panel and its sections ---------- */

/* The reference has no grid gap: every .field carries its own 20px bottom margin
   (§31), and a hint below a control adds its 7px on top of that. Gravity Forms
   instead puts a 16px row gap on the grid, which stacked with the margin and made
   every row 36px apart. The gap is removed so the margins own the vertical rhythm,
   exactly as in the static build. */
.gform_wrapper.gform_wrapper.gform_wrapper .gform_fields {
	row-gap: 0;
}

.gform_wrapper.gform_wrapper.gform_wrapper .gfield {
	margin-bottom: 20px;
	padding: 0;
}

/* §31 .form__section. Owner's direction: no rule between steps, spacing alone. */
.gform_wrapper .gsection {
	padding-top: clamp(28px, 4vw, 44px);
	margin-top: clamp(28px, 4vw, 44px);
	margin-bottom: 22px;
	border-top: 0;
}

.gform_wrapper .gfield.gsection:first-of-type,
.gform_wrapper .gform_fields > .gsection:first-child {
	padding-top: 0;
	margin-top: 0;
	border-top: 0;
}

.gform_wrapper .gsection_title {
	margin: 0 0 8px;
	font-family: var(--ff-display);
	font-size: clamp(1.25rem, 2.2vw, 1.6rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--sb-navy);
}

.gform_wrapper .gsection_description {
	margin: 0 0 22px;
	max-width: 62ch;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--sb-text-subtle);
}

/* ---------- labels and hints (§31 .field > label, .field__hint) ---------- */

/* Gravity Forms sizes labels from a three-class selector printed after this file. */
.gform_wrapper.gform_wrapper.gform_wrapper .gfield_label {
	display: block;
	margin-bottom: 7px;
	font-family: var(--ff-display);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--sb-navy);
}

.gform_wrapper .gfield_required {
	color: var(--sb-red-deep);
	margin-left: 2px;
}

/* §31 .field__hint. Gravity Forms sets its own 15px type and a 13px top padding on
   this element from a three-class selector, so the reference values need the extra
   weight to land. */
.gform_wrapper.gform_wrapper.gform_wrapper .gfield .gfield_description {
	padding: 0;
	margin: -3px 0 7px;
	font-family: var(--ff-body);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.45;
	color: var(--sb-text-subtle);
	text-transform: none;
	letter-spacing: 0;
}

/* ---------- controls (§31) ---------- */

.gform_wrapper.gform_wrapper.gform_wrapper input[type="text"],
.gform_wrapper.gform_wrapper.gform_wrapper input[type="email"],
.gform_wrapper.gform_wrapper.gform_wrapper input[type="tel"],
.gform_wrapper.gform_wrapper.gform_wrapper input[type="number"],
.gform_wrapper.gform_wrapper.gform_wrapper input[type="date"],
.gform_wrapper.gform_wrapper.gform_wrapper select,
.gform_wrapper.gform_wrapper.gform_wrapper textarea {
	width: 100%;
	padding: 12px 14px;
	font-family: var(--ff-body);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--sb-text);
	background: var(--sb-bone);
	border: 1px solid var(--sb-line);
	border-radius: var(--radius-sm);
	transition: border-color 140ms var(--ease-out), background-color 140ms var(--ease-out),
		box-shadow 140ms var(--ease-out);
}

.gform_wrapper textarea {
	min-height: 112px;
	resize: vertical;
}

.gform_wrapper select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath fill='%2313254C' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 38px;
}

.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
	outline: none;
	background: var(--sb-white);
	border-color: var(--sb-red);
	box-shadow: 0 0 0 3px rgba(206, 55, 43, 0.14);
}

/* ---------- choice cards (§31 .choices / .choice) ----------
   Gravity Forms renders radios as <div class="gchoice"><input><label>. The
   reference wraps each in a card, so the gchoice becomes the card and the input is
   laid over it to keep the whole card clickable. */

.gform_wrapper .gfield--type-radio .ginput_container_radio {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.gform_wrapper .gfield--type-radio .gchoice {
	position: relative;
	display: block;
	margin: 0;
}

.gform_wrapper .gfield--type-radio .gchoice input[type="radio"] {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.gform_wrapper .gfield--type-radio .gchoice label {
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	margin: 0;
	padding: 18px 16px;
	background: var(--sb-white);
	border: 1px solid var(--sb-line);
	border-radius: var(--radius-md);
	font-family: var(--ff-display);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sb-navy);
	cursor: pointer;
	transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out),
		box-shadow 160ms var(--ease-out);
}

.gform_wrapper .gfield--type-radio .gchoice input:checked + label {
	border-color: var(--sb-red);
	background: rgba(206, 55, 43, 0.05);
	box-shadow: inset 0 0 0 1px var(--sb-red);
}

.gform_wrapper .gfield--type-radio .gchoice input:focus-visible + label {
	border-color: var(--sb-red);
	box-shadow: 0 0 0 3px rgba(206, 55, 43, 0.14);
}

/* the sentence after the em dash is the reference's .choice__sub */
.gform_wrapper .gfield--type-radio .gchoice label .sb-choice-sub {
	font-family: var(--ff-body);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: 0;
	text-transform: none;
	color: var(--sb-text-subtle);
}

/* ---------- consent and single checkboxes ---------- */

.gform_wrapper .gfield--type-consent .gfield_label,
.gform_wrapper .gfield--type-checkbox .gfield_label {
	margin-bottom: 10px;
}

.gform_wrapper .gfield--type-consent .gchoice,
.gform_wrapper .gfield--type-checkbox .gchoice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.gform_wrapper .gfield--type-consent .gchoice label,
.gform_wrapper .gfield--type-checkbox .gchoice label {
	font-size: 1rem;
	line-height: 1.5;
	color: var(--sb-text-muted);
}

/* ---------- date picker ----------
   The calendar prints "Press F1 for help" above the grid. Blanking the string is no
   use — the bundle falls back to a hardcoded copy of it — so the line is taken
   off-screen instead. The container also carries role="alert" and the full keyboard
   help, both of which a screen reader still reaches here; display:none would silence
   them. */

.gform_wrapper .gform-datepicker-calendar .monthMessage {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------- consent (§32 .check, without the rush hazard) ----------
   Owner's direction: a plain frame, not the rush card. The legend only repeats the
   sentence beside the box — and the required marker is typed into that sentence — so
   it is left to assistive technology rather than printed twice. */

.gform_wrapper.gform_wrapper.gform_wrapper .gfield.gfield--type-consent {
	padding: 16px;
	background: var(--sb-white);
	border: 1px solid var(--sb-line);
	border-radius: var(--radius-md);
}

.gform_wrapper .gfield--type-consent > .gfield_label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.gform_wrapper .gfield--type-consent .ginput_container_consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.gform_wrapper.gform_wrapper .gfield--type-consent input[type="checkbox"] {
	width: 22px;
	height: 22px;
	flex: none;
	margin: 1px 0 0;
	accent-color: var(--sb-red);
	cursor: pointer;
}

.gform_wrapper.gform_wrapper .gfield--type-consent .gfield_consent_label {
	font-family: var(--ff-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	color: var(--sb-text-muted);
	cursor: pointer;
}

/* ---------- rush checkbox (§32 .check--rush) ----------
   The reference is a single bordered card: hazard stripe down the left, a 22px box at
   the top left, then a bold title over muted body copy. Gravity Forms splits that text
   across the field label, the choice label and the description, and nests the input
   three wrappers deep — so the wrappers are collapsed with display:contents and the
   pieces are placed on the card's own grid. */

.gform_wrapper.gform_wrapper.gform_wrapper .gfield.rush-checkbox {
	position: relative;
	overflow: hidden;
	padding: 16px 16px 16px 26px;
	background: var(--sb-white);
	border: 1px solid var(--sb-line);
	border-radius: var(--radius-md);
}

.gform_wrapper .gfield.rush-checkbox::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 10px;
	background-image: repeating-linear-gradient(
		-45deg,
		var(--sb-red) 0 10px,
		var(--sb-black) 10px 20px
	);
}

.gform_wrapper .gfield.rush-checkbox .ginput_container_checkbox,
.gform_wrapper .gfield.rush-checkbox .gfield_checkbox,
.gform_wrapper .gfield.rush-checkbox .gchoice {
	display: contents;
}

/* Hidden on this field but still in the flow, so it must not add a margin between the
   box and the title below it. */
.gform_wrapper .gfield.rush-checkbox > .gfield_label {
	margin-bottom: 0;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* The box keeps to the first line however many pieces of text the field carries. */
.gform_wrapper.gform_wrapper .gfield.rush-checkbox input[type="checkbox"] {
	display: block;
	width: 22px;
	height: 22px;
	margin: 1px 0 8px;
	accent-color: var(--sb-red);
	cursor: pointer;
}

/* The body copy is set in the display face, upper case, in the reference too. */
.gform_wrapper.gform_wrapper.gform_wrapper .gfield.rush-checkbox .gfield_description {
	margin: 0;
	font-family: var(--ff-display);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--sb-text-muted);
}

/* The field label is hidden on this field, so the choice text is the card's title —
   the reference's <strong> line — and the description carries the body copy. */
.gform_wrapper.gform_wrapper.gform_wrapper .gfield.rush-checkbox .gchoice label {
	display: block;
	margin-bottom: 3px;
	font-family: var(--ff-display);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sb-navy);
	cursor: pointer;
}

.gform_wrapper.gform_wrapper.gform_wrapper .gfield.rush-checkbox .gfield_description {
	margin: 0;
}

.gform_wrapper .gfield.rush-checkbox:has(input:checked) {
	border-color: var(--sb-red);
	background: rgba(206, 55, 43, 0.05);
}

/* ---------- file upload (§32 .drop) ---------- */

.gform_wrapper.gform_wrapper .gform_drop_area {
	position: relative;
	padding: 30px 24px;
	text-align: center;
	background: var(--sb-bone);
	border: 2px dashed var(--sb-line);
	border-radius: var(--radius-md);
	transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}

.gform_wrapper.gform_wrapper .gform_drop_area:hover,
.gform_wrapper.gform_wrapper .gform_drop_area.gform_drop_area_hover {
	border-color: var(--sb-red);
	background: rgba(206, 55, 43, 0.04);
}

/* the reference leads the zone with a 42px red mark */
.gform_wrapper .gform_drop_area::before {
	content: "";
	display: block;
	width: 42px;
	height: 42px;
	margin: 0 auto 14px;
	background-color: var(--sb-red);
	--sb-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5'/%3E%3Cpath d='M4 15v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E");
	-webkit-mask: var(--sb-up) no-repeat center / contain;
	mask: var(--sb-up) no-repeat center / contain;
}

.gform_wrapper .gform_drop_instructions {
	display: block;
	font-family: var(--ff-display);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sb-navy);
}

.gform_wrapper .gform_button_select_files {
	margin-top: 12px;
}

.gform_wrapper .gform_fileupload_rules {
	display: block;
	margin: 8px auto 0;
	max-width: 46ch;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--sb-text-subtle);
}

/* uploaded files read as the reference's .chip list */
.gform_wrapper .ginput_preview,
.gform_wrapper .gform_delete_file {
	font-size: 1rem;
}

.gform_wrapper .ginput_preview {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 16px 0 0;
	padding: 10px 12px;
	background: var(--sb-white);
	border: 1px solid var(--sb-line);
	border-left: 3px solid var(--sb-red);
	border-radius: var(--radius-sm);
}

/* ---------- validation (§31 .field.is-invalid, §36 .errors) ---------- */

.gform_wrapper .gform_validation_errors {
	margin-bottom: 26px;
	padding: 20px 22px;
	background: rgba(206, 55, 43, 0.06);
	border: 1px solid rgba(206, 55, 43, 0.4);
	border-left: 4px solid var(--sb-red);
	border-radius: var(--radius-sm);
	box-shadow: none;
}

.gform_wrapper .gform_validation_errors > h2 {
	margin: 0 0 10px;
	font-family: var(--ff-display);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--sb-red-deep);
}

.gform_wrapper .gform_validation_errors ol {
	margin: 0;
	padding-left: 20px;
}

.gform_wrapper .gform_validation_errors li,
.gform_wrapper .gform_validation_errors a {
	font-size: 1rem;
	margin-bottom: 5px;
	color: var(--sb-red-deep);
}

.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea {
	border-left: 3px solid var(--sb-red);
	background: rgba(206, 55, 43, 0.04);
}

.gform_wrapper .validation_message {
	margin-top: 7px;
	padding: 0;
	background: none;
	border: 0;
	font-size: 0.875rem;
	color: var(--sb-red-deep);
}

/* ---------- submit (§31 .form__submit) ---------- */

.gform_wrapper .gform_footer {
	margin-top: clamp(28px, 4vw, 40px);
	padding-top: clamp(24px, 3vw, 32px);
	border-top: 1px solid var(--sb-border);
}

.gform_wrapper .gform_footer .gform_button {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 16px 32px;
	border: 2px solid transparent;
	border-radius: var(--radius-sm);
	background: var(--sb-red);
	color: var(--sb-white);
	font-family: var(--ff-display);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 140ms var(--ease-out), transform 140ms var(--ease-out),
		box-shadow 140ms var(--ease-out);
}

.gform_wrapper .gform_footer .gform_button:hover {
	background: var(--sb-red-deep);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

/* Field widths are Gravity Forms' own: the 12-column grid on .gform_fields plus the
   Field Size and Field Width controls in the form editor. Nothing here overrides
   them — an earlier version did, which forced every field to full width and left the
   short dimension inputs looking arbitrarily cropped. */

@media (max-width: 639px) {
	.gform_wrapper .gfield--type-radio .ginput_container_radio {
		grid-template-columns: 1fr;
	}
}
}

/* Gravity Forms' own drop-zone rule carries more weight than the block above; these
   restate the reference's 2px dashed bone zone at matching specificity. */
.gform_wrapper.gform_wrapper .gfield--type-fileupload .gform_drop_area {
	background: var(--sb-bone);
	border: 2px dashed var(--sb-line);
	border-radius: var(--radius-md);
	padding: 30px 24px;
	text-align: center;
}

.gform_wrapper.gform_wrapper .gfield--type-fileupload .gform_drop_area:hover,
.gform_wrapper.gform_wrapper .gfield--type-fileupload .gform_drop_area.gform_drop_area_hover {
	border-color: var(--sb-red);
	background: rgba(206, 55, 43, 0.04);
}

/* ==========================================================================
   .sb-choices — the choice-card row, set as a custom CSS class on the field.
   The reference lays these four out in a single row (§31 .choices) with the blade
   drawing above each label.
   ========================================================================== */

.gform_wrapper .sb-choices .ginput_container_radio {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

/* the drawing sits above the label text, as .choice__body svg does */
.gform_wrapper .sb-choices--blade .gchoice label::before {
	content: "";
	display: block;
	order: -1;
	width: 84px;
	height: 42px;
	margin-bottom: 2px;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 84px 42px;
}

.gform_wrapper .sb-choices--blade .gchoice:nth-child(1) label::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 10 132 62'%3E%3Cpath fill='none' stroke='%2313254C' stroke-width='2.5' d='M6 30 126 16v40L6 70z'/%3E%3Cpath fill='none' stroke='%23CE372B' stroke-width='2' d='M6 62 126 48'/%3E%3Cg fill='none' stroke='%2313254C' stroke-width='2'%3E%3Crect x='24.5' y='37.4' width='7' height='20' rx='3.5'/%3E%3Crect x='50.5' y='34.4' width='7' height='20' rx='3.5'/%3E%3Crect x='76.5' y='31.4' width='7' height='20' rx='3.5'/%3E%3Crect x='102.5' y='28.3' width='7' height='20' rx='3.5'/%3E%3C/g%3E%3C/svg%3E"); }
.gform_wrapper .sb-choices--blade .gchoice:nth-child(2) label::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 10 132 62'%3E%3Cpath fill='none' stroke='%2313254C' stroke-width='2.5' d='M6 30 126 16v40L6 70z'/%3E%3Cpath fill='none' stroke='%23CE372B' stroke-width='2' d='M6 62 126 48'/%3E%3Cg fill='none' stroke='%2313254C' stroke-width='2'%3E%3Ccircle cx='28' cy='47.4' r='6'/%3E%3Ccircle cx='54' cy='44.4' r='6'/%3E%3Ccircle cx='80' cy='41.4' r='6'/%3E%3Ccircle cx='106' cy='38.3' r='6'/%3E%3C/g%3E%3C/svg%3E"); }
.gform_wrapper .sb-choices--blade .gchoice:nth-child(3) label::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 10 132 62'%3E%3Cpath fill='none' stroke='%2313254C' stroke-width='2.5' d='M6 30 126 16v40L6 70z'/%3E%3Cpath fill='none' stroke='%23CE372B' stroke-width='2' d='M6 62 126 48'/%3E%3Cpath fill='none' stroke='%2313254C' stroke-width='1.5' stroke-dasharray='4 4' d='M6 46 126 32'/%3E%3Cpath fill='none' stroke='%2313254C' stroke-width='1.5' d='M6 22v-8M126 8v8M6 18h120'/%3E%3C/svg%3E"); }

/* the fourth choice skips the measurements, so it carries a document mark instead */
.gform_wrapper .sb-choices--blade .gchoice:nth-child(4) label::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2313254C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M9 13h6M9 17h6'/%3E%3C/svg%3E");
	background-size: 34px 34px;
	background-position: left center;
}

@media (max-width: 1023px) {
	.gform_wrapper .sb-choices .ginput_container_radio,
	.gform_wrapper .sb-choices:not(.sb-choices--blade) .ginput_container_radio {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 639px) {
	.gform_wrapper .sb-choices .ginput_container_radio,
	.gform_wrapper .sb-choices:not(.sb-choices--blade) .ginput_container_radio {
		grid-template-columns: 1fr;
	}
}

/* the cards share a row, so they share its height */
.gform_wrapper .sb-choices .gchoice {
	display: flex;
}

.gform_wrapper .sb-choices .gchoice label {
	flex: 1 1 auto;
}

/* Gravity Forms nests the choices one level deeper than the container: the grid
   belongs on .gfield_radio, whose children are the .gchoice cards. */
.gform_wrapper .sb-choices .ginput_container_radio {
	display: block;
}

.gform_wrapper .sb-choices .gfield_radio {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

/* the card is a column: drawing, title, then the sub-line */
.gform_wrapper .sb-choices .gchoice label.gform-field-label,
.gform_wrapper .sb-choices .gchoice > label {
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 100%;
}

@media (max-width: 1023px) {
	.gform_wrapper .sb-choices .gfield_radio,
	.gform_wrapper .sb-choices--edge .gfield_radio {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 639px) {
	.gform_wrapper .sb-choices .gfield_radio,
	.gform_wrapper .sb-choices--edge .gfield_radio {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Step headings — the reference's .form__legend (§31), rebuilt on the HTML fields
   the owner authored: a small red step label on the same baseline as the heading,
   with the section rule above it and an optional hint beneath.
   ========================================================================== */

.gform_wrapper .gfield--type-html.sb-step {
	margin-bottom: 22px;

	/* the legend row: step chip and heading share a baseline */
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px;

	/* the heading itself is a bare text node, so the field carries its type */
	font-family: var(--ff-display);
	font-size: clamp(1.25rem, 2.2vw, 1.6rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--sb-navy);
}

/* The divider goes on every step after the first. Keying it to a preceding sibling
   rather than :first-child makes it independent of where Gravity Forms puts its
   honeypot and validation containers in the field list. */
.gform_wrapper .sb-step ~ .sb-step {
	padding-top: clamp(28px, 4vw, 44px);
	margin-top: clamp(28px, 4vw, 44px);
}

/* §31 .form__step */
.gform_wrapper .sb-step .step-form {
	font-family: var(--ff-display);
	font-size: 0.75rem; /* micro label */
	font-weight: 800;
	letter-spacing: 0.16em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--sb-red-deep);
	font-variant-numeric: tabular-nums;
}

/* §31 .form__hint — a full-width line under the legend */
.gform_wrapper .sb-step .step-form__hint {
	flex: 1 0 100%;
	margin: 0;
	max-width: 62ch;
	font-family: var(--ff-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.55;
	letter-spacing: 0;
	color: var(--sb-text-subtle);
}

/* Edge style: four sketches, transcribed from the reference's inline SVGs
   (viewBox 0 0 120 46) — navy outline with the red cutting edge, and a dashed
   box for "other / not sure". */
.gform_wrapper .sb-choices--edge .gfield_radio {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gform_wrapper .sb-choices--edge .gchoice label::before {
	content: "";
	display: block;
	order: -1;
	width: 96px;
	height: 37px;
	margin-bottom: 2px;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 96px 37px;
}

.gform_wrapper .sb-choices--edge .gchoice:nth-child(1) label::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 46'%3E%3Cpath fill='none' stroke='%2313254C' stroke-width='2.2' d='M6 8h108l-14 30H20z'/%3E%3Cpath fill='none' stroke='%23CE372B' stroke-width='2' d='M20 38h80'/%3E%3C/svg%3E"); }
.gform_wrapper .sb-choices--edge .gchoice:nth-child(2) label::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 46'%3E%3Cpath fill='none' stroke='%2313254C' stroke-width='2.2' d='M14 8h108l-14 30H0z'/%3E%3Cpath fill='none' stroke='%23CE372B' stroke-width='2' d='M8 38h94'/%3E%3C/svg%3E"); }
.gform_wrapper .sb-choices--edge .gchoice:nth-child(3) label::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 46'%3E%3Cpath fill='none' stroke='%2313254C' stroke-width='2.2' d='M6 8h108v30H20z'/%3E%3Cpath fill='none' stroke='%23CE372B' stroke-width='2' d='M20 38h94'/%3E%3C/svg%3E"); }
.gform_wrapper .sb-choices--edge .gchoice:nth-child(4) label::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 46'%3E%3Cpath fill='none' stroke='%2313254C' stroke-width='2.2' stroke-dasharray='6 5' d='M6 8h108v30H6z'/%3E%3Cpath fill='none' stroke='%2313254C' stroke-width='2' d='M52 23h16M60 15v16'/%3E%3C/svg%3E"); }

/* Gravity Forms caps a choice label at calc(100% - 32px), reserving room for the
   radio input beside it. Here the input is hidden and laid over the whole card, so
   that reserve became dead space at the right of every card and read as a wider gap
   than the reference's 14px. */
.gform_wrapper.gform_wrapper .sb-choices .gfield_radio .gchoice label {
	max-width: 100%;
	width: 100%;
}