/* NTW 2026 forms. Visual language follows the samples form (dc-sample-form/assets/picker.css):
   centred white card, 8px quiet controls, pill choices, 3px green buttons, "#" required marker.
   Every rule is scoped to dc-ntw forms so other Gravity forms on the same page are untouched. */
.gform_wrapper.dc-ntw-form_wrapper,
form.dc-ntw-form {
	--ntw-green: #4a524c;
	--ntw-green-dark: #3a413c;
	--ntw-tint: #e9ebe9;
	--ntw-ink: #26231d;
	--ntw-muted: #6f695c;
	--ntw-control-line: #ccc;
	--ntw-card-line: #e6e1d5;
	--ntw-cream: #faf8f3;
}

/* The Elementor kit sets 71px paragraph spacing at the widescreen breakpoint (2400px+), which opened
   big gaps in the save-and-continue message and the HTML blurbs. Keep the theme's normal spacing. */
.gform_wrapper.dc-ntw-form_wrapper p {
	margin-block-end: 0.9rem;
}

/* GF 3.1 sets the Orbital primary (GF blue) in an ID-scoped block on the wrapper, which beats a
   class selector, so the source colours need !important for everything derived from them to
   follow: upload "Select files" button, checkbox and radio ticks, focus rings. Same fix as the
   samples form (picker.css). */
.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital {
	--gf-color-primary: #4a524c !important;
	--gf-color-primary-rgb: 74, 82, 76 !important;
	--gf-color-primary-darker: #3a413c !important;
	--gf-color-primary-lighter: #e9ebe9 !important;
	--gf-color-primary-contrast: #ffffff !important;
	--gf-color-primary-contrast-rgb: 255, 255, 255 !important;
	/* GF 3.1.2 also hard-codes the in-control primaries (check marks, radio dots) to blue. */
	--gf-color-in-ctrl-primary: #4a524c !important;
	--gf-color-in-ctrl-primary-rgb: 74, 82, 76 !important;
	--gf-color-in-ctrl-primary-darker: #3a413c !important;
	--gf-color-in-ctrl-primary-lighter: #e9ebe9 !important;
	--gf-color-in-ctrl-primary-contrast: #ffffff !important;
	--gf-color-in-ctrl-primary-contrast-rgb: 255, 255, 255 !important;
	--gf-ctrl-label-color-primary: #26231d !important;
	--gf-ctrl-border-color-focus: #4a524c;
	--gf-ctrl-checkbox-check-bg-color: #4a524c;
	--gf-ctrl-radio-check-bg-color: #4a524c;
	max-width: 860px;
	margin: 32px auto;
}

/* ---- Card (samples form: .gform-body card). On a single-page form the submit row sits
   outside .gform-body, so the card goes on the form to keep the button inside it. ---- */
.gform_wrapper.dc-ntw-form_wrapper form.dc-ntw-form {
	padding: 40px;
	border: 1px solid var(--ntw-card-line);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(38, 35, 29, 0.08);
}

@media (max-width: 680px) {
	.gform_wrapper.dc-ntw-form_wrapper form.dc-ntw-form {
		padding: 26px 18px;
	}
}

/* ---- Fields ---- */
.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital .gform_fields {
	row-gap: 22px;
}

.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital .gfield_label {
	font-size: 16px;
	font-weight: 600;
	color: var(--ntw-ink);
}

/* Required marker "#": small, as on the samples form */
.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital .gfield_required {
	font-size: 0.85em;
	padding-left: 2px;
}

/* GF's "# indicates required fields" line: hidden visually, kept for screen readers */
.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital .gform_required_legend {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital input[type=text],
.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital input[type=email],
.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital input[type=tel],
.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital input[type=number],
.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital select,
.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital textarea {
	border-color: var(--ntw-control-line);
	border-radius: 8px;
	background-color: #fff;
}

.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital .gfield textarea {
	height: 120px;
	min-height: 120px;
}

/* GF gives error messages the gfield_description class too, so exclude them here */
.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital .gfield_description:not(.gfield_validation_message) {
	font-size: 13px;
	color: var(--ntw-muted);
}

/* The quiet control border above would otherwise hide GF's red error border */
.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital .gfield_error input[type=text],
.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital .gfield_error input[type=email],
.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital .gfield_error input[type=tel],
.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital .gfield_error input[type=number],
.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital .gfield_error select,
.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital .gfield_error textarea {
	border-color: #b3261e;
}

form.dc-ntw-form.dc-ntw-form .dc-ntw-postcode .ginput_counter {
	display: none;
}

/* Inline errors next to the field (brief 2.2) */
form.dc-ntw-form.dc-ntw-form .gfield_validation_message {
	margin-top: 6px;
	padding: 0;
	border: 0;
	background: none;
	color: #b3261e;
	font-size: .9em;
}

/* ---- Pill choices (samples form .dc-sf-pills) for every radio and checkbox group except the
   Contact router and the privacy consent. The input sits invisibly over its pill so the whole
   pill is the click target. GF 3.1 lays .gchoice out as a grid; the pill sizes to its text. ---- */
.gform_wrapper.dc-ntw-form_wrapper .gfield--type-radio:not(.dc-ntw-reasons) .gfield_radio,
.gform_wrapper.dc-ntw-form_wrapper .gfield--type-checkbox .gfield_checkbox {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	gap: 8px;
}

.gform_wrapper.dc-ntw-form_wrapper .gfield--type-radio:not(.dc-ntw-reasons) .gchoice,
.gform_wrapper.dc-ntw-form_wrapper .gfield--type-checkbox .gchoice {
	position: relative;
	display: block;
	width: auto;
	margin: 0;
}

.gform_wrapper.dc-ntw-form_wrapper .gfield--type-radio:not(.dc-ntw-reasons) .gchoice input,
.gform_wrapper.dc-ntw-form_wrapper .gfield--type-checkbox .gchoice input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.gform_wrapper.dc-ntw-form_wrapper .gfield--type-radio:not(.dc-ntw-reasons) .gchoice label,
.gform_wrapper.dc-ntw-form_wrapper .gfield--type-checkbox .gchoice label {
	display: inline-block;
	max-width: none;
	margin: 0;
	padding: 9px 16px;
	border: 1px solid var(--ntw-control-line);
	border-radius: 999px;
	background: #fff;
	color: var(--ntw-ink);
	font-size: 14.5px;
	line-height: 1.2;
	cursor: pointer;
}

/* Orbital draws its own box/dot beside the label; the pill replaces it */
.gform_wrapper.dc-ntw-form_wrapper .gfield--type-radio:not(.dc-ntw-reasons) .gchoice label::before,
.gform_wrapper.dc-ntw-form_wrapper .gfield--type-checkbox .gchoice label::before {
	content: none;
}

/* Selected: green pill plus a tick, so the state never relies on colour alone */
.gform_wrapper.dc-ntw-form_wrapper .gfield--type-radio:not(.dc-ntw-reasons) .gchoice input:checked + label,
.gform_wrapper.dc-ntw-form_wrapper .gfield--type-checkbox .gchoice input:checked + label {
	border-color: var(--ntw-green);
	background: var(--ntw-green);
	color: #fff;
	font-weight: 600;
}

.gform_wrapper.dc-ntw-form_wrapper .gfield--type-radio:not(.dc-ntw-reasons) .gchoice input:checked + label::before,
.gform_wrapper.dc-ntw-form_wrapper .gfield--type-checkbox .gchoice input:checked + label::before {
	content: '\2713';
	margin-right: 6px;
	font-weight: 700;
}

.gform_wrapper.dc-ntw-form_wrapper .gfield--type-radio:not(.dc-ntw-reasons) .gchoice input:focus-visible + label,
.gform_wrapper.dc-ntw-form_wrapper .gfield--type-checkbox .gchoice input:focus-visible + label {
	outline: 2px solid var(--ntw-green);
	outline-offset: 1px;
}

/* ---- Section headings on the longer forms: samples form subhead, divider between sections.
   Sibling selector, because GF 3.1 renders its hidden honeypot as the first field. ---- */
.gform_wrapper.dc-ntw-form_wrapper .gfield.dc-ntw-section ~ .gfield.dc-ntw-section {
	padding-top: 22px;
	border-top: 1px solid var(--ntw-card-line);
}

form.dc-ntw-form.dc-ntw-form .dc-ntw-section h3 {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--ntw-ink);
	font-family: inherit;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
}

form.dc-ntw-form.dc-ntw-form .dc-ntw-intro p {
	margin: 0;
	color: var(--ntw-muted);
	max-width: 60ch;
}

/* ---- Address lookup (places.js), styled like the samples form: Google's widget sits in front of
   the street field and must read as the same input. ---- */
.gform_wrapper.dc-ntw-form_wrapper .dc-ntw-address-manual {
	display: none !important;
}

gmp-place-autocomplete.dc-ntw-place-autocomplete {
	display: block;
	width: 100%;
	border: 1px solid var(--ntw-control-line);
	border-radius: 8px;
	background: #fff;
	/* No overflow:hidden here: it clips Google's suggestions dropdown. */
	--gmp-mat-color-surface: #fff;
	--gmp-mat-color-on-surface: #26231d;
	--gmp-mat-color-on-surface-variant: #757575;
	--gmp-mat-color-outline-decorative: transparent;
}

gmp-place-autocomplete.dc-ntw-place-autocomplete:focus-within {
	border-color: var(--ntw-green);
	outline: 2px solid var(--ntw-green);
	outline-offset: 1px;
}

.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital .dc-ntw-address-toggle,
.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital .dc-ntw-address-toggle:hover,
.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital .dc-ntw-address-toggle:focus {
	display: inline-block;
	width: auto;
	min-width: 0;
	min-height: 0;
	margin: 8px 0 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--ntw-muted);
	font-family: inherit;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	text-decoration: underline;
	cursor: pointer;
}

.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital .dc-ntw-address-toggle:hover {
	color: var(--ntw-green);
}

/* ---- Upload drop zone: one compact row (icon, "Drop files here or", button) instead of GF's
   tall box. GF sizes the zone from its --gf-ctrl-file-zone-* variables. ---- */
.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital {
	--gf-ctrl-file-zone-height: auto;
	--gf-ctrl-file-zone-padding-y: 10px;
	--gf-ctrl-file-zone-padding-x: 14px;
	--gf-ctrl-file-zone-icon-font-size: 22px;
	--gf-ctrl-file-zone-icon-margin-y-end: 0;
}

.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital .gform_drop_area {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 8px 12px;
	min-height: 0;
	border: 1px dashed var(--ntw-control-line);
	border-radius: 8px;
	background: var(--ntw-cream);
	text-align: left;
}

.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital .gform_drop_area::before {
	display: inline-block;
	margin: 0;
}

.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital .gform_drop_instructions {
	margin: 0;
}

.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital .gform_button_select_files {
	margin: 0;
}

/* ---- Buttons: samples form green, 3px corners, submit on the right ---- */
.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital .gform_footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
}

form.dc-ntw-form.dc-ntw-form .gform_button,
form.dc-ntw-form.dc-ntw-form .gform_button_select_files {
	border-radius: 3px !important;
	background: var(--ntw-green) !important;
	border-color: var(--ntw-green) !important;
}

/* ---- Contact router, step 1: reasons as a stacked list of selectable rows ---- */
form.dc-ntw-form.dc-ntw-form .dc-ntw-reasons .gfield_radio {
	display: grid !important;
	gap: 8px;
}

form.dc-ntw-form.dc-ntw-form .dc-ntw-reasons .gfield_label {
	display: block;
	margin-bottom: 12px;
}

/* GF 3.1 makes .gchoice a grid, which shrank each row's border to its text while the arrow
   stayed at the far right. A plain block lets the row fill the width again. */
form.dc-ntw-form.dc-ntw-form .dc-ntw-reasons .gchoice {
	position: relative;
	display: block;
	margin: 0;
}

form.dc-ntw-form.dc-ntw-form .dc-ntw-reasons .gchoice input[type=radio] {
	position: absolute;
	opacity: 0;
	inset: 0;
	margin: 0;
	cursor: pointer;
}

form.dc-ntw-form.dc-ntw-form .dc-ntw-reasons .gchoice label {
	display: block !important;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 14px 44px 14px 16px;
	border: 1px solid var(--ntw-control-line);
	border-radius: 8px;
	background: #fff;
	color: var(--ntw-ink);
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	transition: border-color .15s, background-color .15s;
}

form.dc-ntw-form.dc-ntw-form .dc-ntw-reasons .gchoice label::after {
	content: '';
	position: absolute;
	right: 18px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
	opacity: .5;
}

form.dc-ntw-form.dc-ntw-form .dc-ntw-reasons .gchoice label:hover {
	border-color: var(--ntw-green);
}

form.dc-ntw-form.dc-ntw-form .dc-ntw-reasons .gchoice input:checked + label {
	border-color: var(--ntw-green);
	background: var(--ntw-tint);
	color: var(--ntw-green);
}

form.dc-ntw-form.dc-ntw-form .dc-ntw-reasons .gchoice input:focus-visible + label {
	outline: 2px solid var(--ntw-green);
	outline-offset: 2px;
}

/* Form title inside the card (samples form heading + lede) */
form.dc-ntw-form.dc-ntw-form .dc-ntw-title h2 {
	margin: 0 0 4px;
	color: var(--ntw-ink);
	font-family: inherit;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.25;
}

form.dc-ntw-form.dc-ntw-form .dc-ntw-title p {
	margin: 0;
	color: var(--ntw-muted);
	max-width: 60ch;
}

/* Once a reason is chosen, step 1 collapses to a summary; the whole bar reopens it */
form.dc-ntw-form.dc-ntw-form .dc-ntw-chosen {
	cursor: pointer;
	transition: background-color .15s;
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	grid-column: 1 / -1;
	padding: 12px 16px;
	border-radius: 8px;
	background: var(--ntw-tint);
	color: var(--ntw-green);
	font-weight: 600;
}

form.dc-ntw-form.dc-ntw-has-reason .dc-ntw-chosen {
	display: flex !important;
}

form.dc-ntw-form.dc-ntw-form .dc-ntw-chosen:hover {
	background: #dfe2df;
}

/* After "Change": step 2 stays hidden until a reason is picked again */
form.dc-ntw-form.dc-ntw-choosing .gform_fields > .gfield:not(.dc-ntw-reasons):not(.dc-ntw-title),
form.dc-ntw-form.dc-ntw-choosing .gform_footer {
	display: none !important;
}

/* The whole step-1 field leaves the layout (an empty box still took a row gap above the
   summary). Hidden radios still submit; the summary bar names the choice. */
form.dc-ntw-form.dc-ntw-has-reason .dc-ntw-reasons {
	display: none !important;
}

form.dc-ntw-form.dc-ntw-form .dc-ntw-change {
	flex: none;
	min-height: 0 !important;
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: var(--ntw-green) !important;
	font: inherit;
	font-weight: 500;
	text-decoration: underline;
	cursor: pointer;
}

/* ---- Contact router, step 2 blurbs: same heading as the section headings, with room to breathe
   below the summary bar (plus the 22px field gap, about 40px) ---- */
form.dc-ntw-form.dc-ntw-form .dc-ntw-blurb h3 {
	margin: 18px 0 4px;
	padding: 0;
	border: 0;
	color: var(--ntw-ink);
	font-family: inherit;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
}

form.dc-ntw-form.dc-ntw-form .dc-ntw-blurb p {
	margin: 0 0 14px;
	color: var(--ntw-muted);
	max-width: 60ch;
}

form.dc-ntw-form.dc-ntw-form .dc-ntw-cta {
	display: inline-block;
	padding: 10px 18px;
	border-radius: 3px;
	background: var(--ntw-green);
	color: #fff !important;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none !important;
	transition: background-color .15s;
}

form.dc-ntw-form.dc-ntw-form .dc-ntw-cta:hover,
form.dc-ntw-form.dc-ntw-form .dc-ntw-cta:focus-visible {
	background: var(--ntw-green-dark);
}

form.dc-ntw-form.dc-ntw-form .dc-ntw-turnstile:empty {
	display: none;
}

/* ---- Step forms (class dc-ntw-steps, e.g. Warranty): samples form rail above the card, so the
   card moves from the form to .gform-body; Back left, Next/Submit right. ---- */
.gform_wrapper.dc-ntw-steps_wrapper form.dc-ntw-form {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.gform_wrapper.dc-ntw-steps_wrapper .gform-body {
	padding: 40px;
	border: 1px solid var(--ntw-card-line);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(38, 35, 29, 0.08);
}

@media (max-width: 680px) {
	.gform_wrapper.dc-ntw-steps_wrapper .gform-body {
		padding: 26px 18px;
	}
}

.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital .gf_page_steps {
	display: flex;
	gap: 8px;
	margin: 0 0 24px;
	padding: 0;
	border: 0;
}

.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital .gf_step {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 10px 14px;
	border: 1px solid #e0dbd0;
	border-radius: 8px;
	background: #fff;
	opacity: 1;
}

/* 32px circles, as the samples form renders (Orbital's 32px min-width beats its 24px) */
.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital .gf_step_number {
	display: grid;
	place-items: center;
	width: 32px;
	min-width: 32px;
	height: 32px;
	border: 1.5px solid #ccc;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 600;
}

.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital .gf_step_active {
	border-color: var(--ntw-green);
}

.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital .gf_step_active .gf_step_number {
	border-color: var(--ntw-green);
	background: var(--ntw-green);
	color: #fff;
}

.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital .gf_step_completed .gf_step_number {
	border-color: var(--ntw-green);
	background: var(--ntw-tint);
	color: var(--ntw-green);
}

/* GF's completed-step badge is a blue check laid over the number; the samples form drops it */
.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital .gf_step_completed .gf_step_number::after {
	display: none;
}

.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital .gf_step_label {
	font-size: 13px;
	font-weight: 600;
}

.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital .gform_page_footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
}

.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital .gform_previous_button {
	margin-right: auto;
}

form.dc-ntw-form.dc-ntw-form .gform_next_button,
form.dc-ntw-form.dc-ntw-form .gform_previous_button {
	border-radius: 3px !important;
}

/* Keep a step change from scrolling the form under the fixed header */
.gform_anchor {
	scroll-margin-top: 150px;
}

@media (max-width: 767px) {
	.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital .gf_page_steps {
		gap: 6px;
	}

	.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital .gf_step {
		gap: 6px;
		padding: 6px;
	}

	/* Four or more steps (Take-off) don't fit one row: only the current step keeps its label */
	.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital .gf_page_steps:has(.gf_step ~ .gf_step ~ .gf_step ~ .gf_step) .gf_step {
		flex: 0 0 auto;
	}

	.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital .gf_page_steps:has(.gf_step ~ .gf_step ~ .gf_step ~ .gf_step) .gf_step_active {
		flex: 1;
	}

	.gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital .gf_page_steps:has(.gf_step ~ .gf_step ~ .gf_step ~ .gf_step) .gf_step:not(.gf_step_active) .gf_step_label {
		display: none;
	}
}

/* ==== Layout options, chosen by a class on any container around the form (on live: the Elementor
   widget's CSS Classes). Default is the single-column card above. ==== */

/* The photo field only exists for the image layout */
.gform_wrapper.dc-ntw-form_wrapper .gfield.dc-ntw-visuals {
	display: none;
}

/* ---- .dc-ntw-layout--image (Contact v3): a photo per reason beside the form.
   router.js moves the photo field to be the form's second grid column and swaps the photo as the
   reason changes. No photo below 900px (and none is downloaded). ---- */
.dc-ntw-layout--image .gform_wrapper.dc-ntw-form_wrapper.gform-theme--orbital {
	max-width: 1100px;
}

@media (min-width: 900px) {
	.dc-ntw-layout--image form.dc-ntw-form {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 42%;
		grid-template-rows: auto 1fr;
		column-gap: 48px;
	}

	.dc-ntw-layout--image form.dc-ntw-form > * {
		grid-column: 1;
	}

	.dc-ntw-layout--image form.dc-ntw-form > .gform_footer {
		align-self: start;
	}

	.dc-ntw-layout--image form.dc-ntw-form > .gfield.dc-ntw-visuals {
		display: block;
		position: relative;
		grid-column: 2;
		grid-row: 1 / span 2;
		margin: 0;
		padding: 0;
		overflow: hidden;
		border-radius: 14px;
		background: white;
	}

	.dc-ntw-layout--image .dc-ntw-visuals-set,
	.dc-ntw-layout--image .dc-ntw-visuals-set img {
		position: absolute;
		inset: 0;
	}

	.dc-ntw-layout--image .dc-ntw-visuals-set img {
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: cover;
		opacity: 0;
		transition: opacity .45s ease;
	}

	.dc-ntw-layout--image .dc-ntw-visuals-set img.is-active {
		opacity: 1;
	}
}

/* Take-off colours filtered by range (colours.js); .gchoice has its own display, so [hidden] needs help. */
.gform_wrapper.dc-ntw-form_wrapper .dc-ntw-colours .gchoice[hidden] {
	display: none !important;
}