/*
	Business Retention and Expansion Survey — design layer
	choosecranbrook.ca · Gravity Forms 3.1 (gravity-theme markup)

	THESIS: A survey that assembles a visible record of the respondent's
	business, refusing the progress-bar wizard where completion is a number
	crawling across a screen.
	OWN-WORLD: Deep teal record rail (#004050) holding step list and a live
	dossier; white working pane; brand red (#840c1d) owns action and selection;
	orange (#e1832c) marks position; green (#6e9a35) marks done. myriad-pro
	300/400/600/900. Selectable cards with drawn indicators, no stock inputs.
	STORY: An operator sees their own answers accumulate into the record the
	City will read, so length is felt as substance rather than distance.
	FIRST VIEWPORT: Intro with duration and confidentiality stated plainly,
	then the teal rail left with seven steps and an empty record, the working
	pane right opening on "Your business".
	FORM: The record dossier — candidate 6 of 7, seed key 37147ec7.
	FINISH: unreviewed and undocumented is unfinished; this build ends with the
	finish review, the verdict, and DESIGN.md
*/

/* ==========================================================================
   Tokens
   ========================================================================== */

/* The confirmation renders in its own wrapper, outside .bre-form_wrapper, so
   the tokens are declared on it too or every var() there resolves to nothing. */
.bre-intro,
.gform_wrapper.gravity-theme.bre-form_wrapper,
.gform_confirmation_wrapper.bre-form,
.bre-thanks {
	--bre-red: #840c1d;
	--bre-red-deep: #620715;
	--bre-orange: #e1832c;
	--bre-orange-deep: #ae6119;
	--bre-teal: #004050;
	--bre-teal-lift: #0a5468;
	--bre-green: #6e9a35;
	--bre-ink: #2f2f31;
	--bre-body: #474749;
	--bre-muted: #5f5f62;
	--bre-rule: #dcdcd8;
	--bre-rule-soft: #ebebe7;
	--bre-field: #ffffff;
	--bre-ground: #f6f5f2;

	/* Tinted from the teal hue — never gray on a colored surface. */
	--bre-on-teal: #ffffff;
	--bre-on-teal-soft: #a9c8d1;
	--bre-on-teal-faint: #6d97a4;
	--bre-teal-rule: rgba(255, 255, 255, 0.16);

	--bre-shadow-sm: 0 1px 2px rgba(24, 20, 16, 0.05), 0 4px 12px -8px rgba(24, 20, 16, 0.18);
	--bre-shadow-md: 0 2px 4px rgba(24, 20, 16, 0.06), 0 14px 32px -18px rgba(24, 20, 16, 0.28);
	--bre-shadow-lg: 0 3px 6px rgba(24, 20, 16, 0.07), 0 28px 60px -28px rgba(24, 20, 16, 0.32);

	--bre-radius: 10px;
	--bre-radius-sm: 7px;

	/* Exponential ease-out. One curve for the whole surface. */
	--bre-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--bre-ease-soft: cubic-bezier(0.33, 1, 0.68, 1);

	--bre-step-1: 5.6px;
	--bre-step-2: 11.2px;
	--bre-step-3: 17.6px;
	--bre-step-4: 28px;
	--bre-step-5: 44px;
	--bre-step-6: 64px;
}

.bre-sr {
	position: absolute !important;
	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;
}

/* ==========================================================================
   Page intro
   ========================================================================== */

/* The theme's container is full-bleed with a 15px gutter and pins the root
   font size at 10px, so this component sets its own gutter to line up with the
   page h1 and sizes everything in px rather than inheriting a 62.5% rem. */
.bre-intro {
	box-sizing: border-box;
	max-width: 1111px;
	margin: 33px auto;
	padding: 0 15px;
	font-family: var(--mainFont, "myriad-pro", sans-serif);
}

.bre-intro__lead {
	margin: 0 0 var(--bre-step-4);
	font-size: clamp(17px, 15.84px + 0.32vw, 20px);
	font-weight: 400;
	line-height: 1.6;
	color: var(--bre-body);
}

/* The theme decorates every content list item with a ::before check glyph,
   which would take a grid cell and push the text into the icon column. */
.bre-intro ul.bre-intro__facts {
	display: grid;
	gap: var(--bre-step-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bre-intro li.bre-intro__fact {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	gap: var(--bre-step-2);
	align-items: start;
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 1.55;
	color: var(--bre-muted);
	list-style: none;
	background: none;
}

.bre-intro li.bre-intro__fact::before,
.bre-intro li.bre-intro__fact::after {
	content: none !important;
	display: none !important;
}

.bre-intro li.bre-intro__fact::marker {
	content: "";
}

.bre-intro__fact svg {
	margin-top: 0.15em;
	color: var(--bre-red);
}

.bre-intro__fact strong {
	font-weight: 600;
	color: var(--bre-ink);
}

/* ==========================================================================
   Shell
   ========================================================================== */

.gform_wrapper.gravity-theme.bre-form_wrapper {
	box-sizing: border-box;
	max-width: 1111px;
	margin: 33px auto;
	padding: 0 15px;
	font-family: var(--mainFont, "myriad-pro", sans-serif);
	font-size: 16px;
	color: var(--bre-body);
}

.gform_wrapper.gravity-theme.bre-form_wrapper *,
.gform_wrapper.gravity-theme.bre-form_wrapper *::before,
.gform_wrapper.gravity-theme.bre-form_wrapper *::after,
.bre-intro *,
.bre-intro *::before,
.bre-intro *::after {
	box-sizing: border-box;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gform_heading {
	display: none;
}

.gform_wrapper.gravity-theme.bre-form_wrapper form.bre-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--bre-step-4);
	align-items: start;
	margin: 0;
}

@media (min-width: 1024px) {
	.gform_wrapper.gravity-theme.bre-form_wrapper form.bre-form {
		grid-template-columns: 304px minmax(0, 1fr);
		gap: var(--bre-step-5);
	}
}

/* --------------------------------------------------------------------------
   The rail: step list plus the live record. JS moves .gf_page_steps in here;
   without JS the step list simply renders above the fields, still usable.
   -------------------------------------------------------------------------- */

.bre-rail {
	position: relative;
	border-radius: var(--bre-radius);
	background: var(--bre-teal);
	color: var(--bre-on-teal);
	box-shadow: var(--bre-shadow-md);
	overflow: hidden;
}

@media (min-width: 1024px) {
	.bre-rail {
		position: sticky;
		top: var(--bre-rail-top, 24px);
		max-height: calc(100vh - 48px);
		display: flex;
		flex-direction: column;
	}
}

/* Compact header, mobile only: the rail collapses to a summary you can open. */
.bre-rail__head {
	display: flex;
	align-items: center;
	gap: var(--bre-step-2);
	width: 100%;
	padding: var(--bre-step-3);
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.bre-rail__dial {
	position: relative;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
}

.bre-rail__dial svg {
	display: block;
	transform: rotate(-90deg);
}

.bre-rail__dial circle {
	fill: none;
	stroke-width: 3;
}

.bre-rail__dial .bre-dial-track {
	stroke: rgba(255, 255, 255, 0.18);
}

.bre-rail__dial .bre-dial-fill {
	stroke: var(--bre-orange);
	stroke-linecap: round;
	transition: stroke-dasharray 0.6s var(--bre-ease);
}

.bre-rail__dial b {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.bre-rail__headtext {
	flex: 1 1 auto;
	min-width: 0;
}

.bre-rail__stepnow {
	display: block;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--bre-on-teal);
}

.bre-rail__stepmeta {
	display: block;
	margin-top: 0.15em;
	font-size: 13px;
	font-weight: 400;
	color: var(--bre-on-teal-soft);
}

.bre-rail__chev {
	flex: 0 0 auto;
	color: var(--bre-on-teal-soft);
	transition: transform 0.4s var(--bre-ease);
}

.bre-rail[data-open="true"] .bre-rail__chev {
	transform: rotate(180deg);
}

@media (min-width: 1024px) {
	.bre-rail__head {
		cursor: default;
		padding: var(--bre-step-4) var(--bre-step-4) var(--bre-step-3);
	}

	.bre-rail__chev {
		display: none;
	}

	/* The step list below already names the active step; the head carries
	   position only. */
	.bre-rail__stepnow {
		display: none;
	}

	.bre-rail__stepmeta {
		margin-top: 0;
		font-size: 15px;
		font-weight: 600;
		letter-spacing: 0.01em;
		color: var(--bre-on-teal);
	}
}

.bre-rail__panel {
	display: none;
}

.bre-rail[data-open="true"] .bre-rail__panel {
	display: block;
	animation: bre-rail-open 0.45s var(--bre-ease) both;
}

@media (min-width: 1024px) {
	.bre-rail__panel {
		display: block !important;
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		animation: none !important;
	}
}

@keyframes bre-rail-open {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Step list (GF's own .gf_page_steps markup, restyled)
   -------------------------------------------------------------------------- */

.gform_wrapper.gravity-theme.bre-form_wrapper .gf_page_steps {
	margin: 0;
	padding: 0 var(--bre-step-3) var(--bre-step-3);
	border: 0;
	counter-reset: none;
}

@media (min-width: 1024px) {
	.gform_wrapper.gravity-theme.bre-form_wrapper .gf_page_steps {
		padding: 0 var(--bre-step-4) var(--bre-step-3);
	}
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gf_step {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	margin: 0;
	padding: 8px 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--bre-on-teal-faint);
	opacity: 1;
	transition: color 0.35s var(--bre-ease-soft);
}

/* The connecting thread between step markers. */
.gform_wrapper.gravity-theme.bre-form_wrapper .gf_step + .gf_step {
	background-image: linear-gradient(var(--bre-teal-rule), var(--bre-teal-rule));
	background-size: 1px 8px;
	background-position: 12px 0;
	background-repeat: no-repeat;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gf_step_number {
	position: relative;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border: 1px solid var(--bre-teal-rule);
	border-radius: 50%;
	background: transparent;
	font-size: 12px;
	font-weight: 600;
	color: inherit;
	transition: background-color 0.4s var(--bre-ease), border-color 0.4s var(--bre-ease),
		color 0.4s var(--bre-ease), transform 0.4s var(--bre-ease);
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gf_step_number::before,
.gform_wrapper.gravity-theme.bre-form_wrapper .gf_step_number::after {
	content: none;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gf_step_label {
	font: inherit;
	color: inherit;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gf_step_active {
	color: var(--bre-on-teal);
	font-weight: 600;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gf_step_active .gf_step_number {
	border-color: var(--bre-orange);
	background: var(--bre-orange);
	color: #26150a;
	transform: scale(1.06);
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gf_step_completed {
	color: var(--bre-on-teal-soft);
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gf_step_completed .gf_step_number {
	border-color: var(--bre-green);
	background: var(--bre-green);
	color: #ffffff;
	font-size: 0;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gf_step_completed .gf_step_number::after {
	content: "";
	display: block;
	width: 8.5px;
	height: 4.75px;
	margin-top: -1.92px;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	animation: bre-tick 0.4s var(--bre-ease) both;
}

@keyframes bre-tick {
	from {
		clip-path: inset(0 100% 0 0);
	}
	to {
		clip-path: inset(0);
	}
}

/* --------------------------------------------------------------------------
   The record
   -------------------------------------------------------------------------- */

.bre-record {
	padding: var(--bre-step-3);
	border-top: 1px solid var(--bre-teal-rule);
	background: rgba(0, 0, 0, 0.14);
}

@media (min-width: 1024px) {
	.bre-record {
		padding: var(--bre-step-3) var(--bre-step-4) var(--bre-step-4);
	}
}

.bre-rail .bre-record .bre-record__title {
	margin: 0 0 14.4px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--bre-on-teal-soft);
}

.bre-rail .bre-record .bre-record__empty {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--bre-on-teal-faint);
}

.bre-record__list {
	display: grid;
	gap: 11.2px;
	margin: 0;
}

.bre-record__row {
	display: grid;
	gap: 1.6px;
}

.bre-record__row dt {
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--bre-on-teal-faint);
}

.bre-record__row dd {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--bre-on-teal);
	overflow-wrap: anywhere;
}

.bre-record__row--fresh dd {
	animation: bre-record-in 0.55s var(--bre-ease) both;
}

@keyframes bre-record-in {
	from {
		opacity: 0;
		transform: translateY(4px);
		filter: blur(2px);
	}
	to {
		opacity: 1;
		transform: none;
		filter: blur(0);
	}
}

.bre-record__badge {
	display: inline-block;
	padding: 0.12em 0.55em;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
}

.bre-record__badge[data-tone="up"] {
	background: rgba(110, 154, 53, 0.22);
	color: #c3e08c;
}

.bre-record__badge[data-tone="flat"] {
	background: rgba(255, 255, 255, 0.14);
	color: var(--bre-on-teal);
}

.bre-record__badge[data-tone="down"] {
	background: rgba(225, 131, 44, 0.22);
	color: #f2bd84;
}

.bre-record__mix {
	display: flex;
	height: 8px;
	margin-top: 4.8px;
	border-radius: 999px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.12);
}

.bre-record__mix span {
	display: block;
	width: 0;
	transition: width 0.7s var(--bre-ease);
}

.bre-record__mix span:nth-child(1) { background: #7bdfef; }
.bre-record__mix span:nth-child(2) { background: #4bb9cf; }
.bre-record__mix span:nth-child(3) { background: var(--bre-green); }
.bre-record__mix span:nth-child(4) { background: var(--bre-orange); }
.bre-record__mix span:nth-child(5) { background: #b2675e; }

/* ==========================================================================
   Working pane
   ========================================================================== */

.gform_wrapper.gravity-theme.bre-form_wrapper .gform-body {
	min-width: 0;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gform_page {
	min-width: 0;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gform_page_fields {
	min-width: 0;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gform_fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--bre-step-3);
	row-gap: var(--bre-step-4);
	max-width: 840px;
	margin: 0;
	padding: 0;
}

@media (min-width: 700px) {
	.gform_wrapper.gravity-theme.bre-form_wrapper .gform_fields {
		grid-template-columns: repeat(10, minmax(0, 1fr));
	}
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gfield {
	min-width: 0;
	margin: 0;
	padding: 0;
	grid-column: 1 / -1;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .bre-half {
	grid-column: 1 / -1;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .bre-fifth {
	grid-column: span 1;
}

@media (min-width: 700px) {
	.gform_wrapper.gravity-theme.bre-form_wrapper .bre-full {
		grid-column: span 10;
	}

	.gform_wrapper.gravity-theme.bre-form_wrapper .bre-half {
		grid-column: span 5;
	}

	.gform_wrapper.gravity-theme.bre-form_wrapper .bre-fifth {
		grid-column: span 2;
	}
}

/* --------------------------------------------------------------------------
   Step heading
   -------------------------------------------------------------------------- */

.bre-stephead {
	max-width: 544px;
}

.bre-stephead .bre-stephead__title {
	margin: 0 0 var(--bre-step-2);
	font-size: clamp(28px, 20px + 1.7vw, 41.6px);
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -0.022em;
	text-wrap: balance;
	color: var(--bre-ink);
}

.bre-stephead .bre-stephead__lede {
	margin: 0;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--bre-muted);
	text-wrap: pretty;
}

/* Rule under the heading, tighter above the next question than below itself. */
.gform_wrapper.gravity-theme.bre-form_wrapper .gfield.bre-full:has(.bre-stephead) {
	padding-bottom: var(--bre-step-3);
	border-bottom: 1px solid var(--bre-rule-soft);
}

/* --------------------------------------------------------------------------
   Labels and descriptions
   -------------------------------------------------------------------------- */

.gform_wrapper.gravity-theme.bre-form_wrapper .gfield_label,
.gform_wrapper.gravity-theme.bre-form_wrapper legend.gfield_label {
	display: block;
	float: none;
	width: auto;
	margin: 0 0 var(--bre-step-2);
	padding: 0;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -0.006em;
	color: var(--bre-ink);
	text-wrap: pretty;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .bre-other .gfield_label,
.gform_wrapper.gravity-theme.bre-form_wrapper .bre-fifth .gfield_label {
	font-size: 15px;
	font-weight: 400;
	color: var(--bre-muted);
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gfield_required {
	color: var(--bre-red);
	font-weight: 400;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gfield_required_text {
	font-size: 13px;
	font-style: normal;
	letter-spacing: 0.01em;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gfield_description {
	padding: 0;
	margin: var(--bre-step-2) 0 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--bre-muted);
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gfield--type-choice .gfield_description {
	margin: -5.6px 0 var(--bre-step-2);
}

/* --------------------------------------------------------------------------
   Text, email, textarea, select, number
   -------------------------------------------------------------------------- */

.gform_wrapper.gravity-theme.bre-form_wrapper .gfield input[type="text"],
.gform_wrapper.gravity-theme.bre-form_wrapper .gfield input[type="email"],
.gform_wrapper.gravity-theme.bre-form_wrapper .gfield input[type="number"],
.gform_wrapper.gravity-theme.bre-form_wrapper .gfield textarea,
.gform_wrapper.gravity-theme.bre-form_wrapper .gfield select {
	width: 100%;
	max-width: 100%;
	padding: 11.52px 13.6px;
	border: 1px solid var(--bre-rule);
	border-radius: var(--bre-radius-sm);
	background: var(--bre-field);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.45;
	color: var(--bre-ink);
	box-shadow: inset 0 1px 2px rgba(24, 20, 16, 0.04);
	transition: border-color 0.25s var(--bre-ease-soft), box-shadow 0.25s var(--bre-ease-soft);
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gfield textarea {
	min-height: 152px;
	resize: vertical;
	line-height: 1.6;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gfield select {
	appearance: none;
	padding-right: 38.4px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23474749' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6.5 4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13.6px center;
	background-size: 16px 16px;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gfield input::placeholder,
.gform_wrapper.gravity-theme.bre-form_wrapper .gfield textarea::placeholder {
	color: #75757a;
	opacity: 1;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gfield input:hover,
.gform_wrapper.gravity-theme.bre-form_wrapper .gfield textarea:hover,
.gform_wrapper.gravity-theme.bre-form_wrapper .gfield select:hover {
	border-color: #bdbdb8;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gfield input:focus,
.gform_wrapper.gravity-theme.bre-form_wrapper .gfield textarea:focus,
.gform_wrapper.gravity-theme.bre-form_wrapper .gfield select:focus {
	outline: none;
	border-color: var(--bre-red);
	box-shadow: 0 0 0 3px rgba(132, 12, 29, 0.14), inset 0 1px 2px rgba(24, 20, 16, 0.04);
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gfield input:focus-visible,
.gform_wrapper.gravity-theme.bre-form_wrapper .gfield textarea:focus-visible,
.gform_wrapper.gravity-theme.bre-form_wrapper .gfield select:focus-visible {
	outline: 2px solid var(--bre-orange-deep);
	outline-offset: 2px;
}

/* "Other" continuation fields read as a follow-on, not a new question. */
.gform_wrapper.gravity-theme.bre-form_wrapper .bre-other {
	position: relative;
	padding-left: var(--bre-step-3);
	border-left: 1px solid var(--bre-rule-soft);
}

/* Percentage inputs */
/* Percentage cells: labels wrap to different depths, so the inputs are pushed
   to a shared baseline and the row reads as one instrument. */
.gform_wrapper.gravity-theme.bre-form_wrapper .bre-pct {
	display: flex;
	flex-direction: column;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .bre-pct .gfield_label {
	flex: 1 1 auto;
	margin-bottom: 8px;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .bre-pct .ginput_container {
	position: relative;
}

/* Gravity Forms puts its "enter a number from 0 to 100" instruction inside the
   input container, which would push the percent suffix below the field. The
   range is already carried by min/max, the suffix and the live total, so the
   text is hidden from sight but kept for screen readers. */
.gform_wrapper.gravity-theme.bre-form_wrapper .bre-pct .ginput_container .instruction {
	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;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .bre-pct .ginput_container::after {
	content: "%";
	position: absolute;
	top: 50%;
	right: 12.8px;
	transform: translateY(-50%);
	font-size: 15px;
	font-weight: 600;
	color: #85858a;
	pointer-events: none;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .bre-pct input[type="number"] {
	padding-right: 32px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .bre-pct input[type="number"]::-webkit-outer-spin-button,
.gform_wrapper.gravity-theme.bre-form_wrapper .bre-pct input[type="number"]::-webkit-inner-spin-button {
	margin: 0;
	appearance: none;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .bre-pct input[type="number"] {
	appearance: textfield;
}

/* ==========================================================================
   Choices
   ========================================================================== */

.gform_wrapper.gravity-theme.bre-form_wrapper .gfield_radio,
.gform_wrapper.gravity-theme.bre-form_wrapper .gfield_checkbox {
	display: grid;
	gap: 8.8px;
	margin: 0;
	padding: 0;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gchoice {
	position: relative;
	margin: 0;
	padding: 0;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gchoice input.gfield-choice-input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
	appearance: none;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gchoice > label {
	position: relative;
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	margin: 0;
	padding: 12.8px 15.2px;
	border: 1px solid var(--bre-rule);
	border-radius: var(--bre-radius-sm);
	background: var(--bre-field);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--bre-body);
	cursor: pointer;
	text-wrap: pretty;
	transition: border-color 0.22s var(--bre-ease-soft), background-color 0.22s var(--bre-ease-soft),
		box-shadow 0.22s var(--bre-ease-soft), transform 0.22s var(--bre-ease-soft);
}

/* The drawn indicator. */
.gform_wrapper.gravity-theme.bre-form_wrapper .gchoice > label::before {
	content: "";
	grid-column: 1;
	width: 20px;
	height: 20px;
	margin-top: 0.1em;
	border: 1.5px solid #b9b9b4;
	background-color: #fff;
	transition: border-color 0.22s var(--bre-ease-soft), background-color 0.22s var(--bre-ease-soft),
		background-size 0.24s var(--bre-ease);
}



.gform_wrapper.gravity-theme.bre-form_wrapper .gfield_radio .gchoice > label::before {
	border-radius: 50%;
	background-image: radial-gradient(circle at 50% 50%, #fff 0 32%, rgba(255, 255, 255, 0) 33%);
	background-size: 0 0;
	background-position: center;
	background-repeat: no-repeat;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gfield_checkbox .gchoice > label::before {
	border-radius: 4px;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gfield_checkbox .gchoice > label::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.4 3 3 6-6.4'/%3E%3C/svg%3E");
	background-size: 0 0;
	background-position: center;
	background-repeat: no-repeat;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gchoice:hover > label {
	border-color: #a8a8a2;
	box-shadow: var(--bre-shadow-sm);
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gchoice input:focus-visible + label {
	outline: 2px solid var(--bre-orange-deep);
	outline-offset: 2px;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gchoice input:checked + label {
	border-color: var(--bre-red);
	background: #fdf7f8;
	color: var(--bre-ink);
	font-weight: 600;
	box-shadow: var(--bre-shadow-sm);
}

/* background-color, never the background shorthand: the shorthand would reset
   the indicator's own dot/tick image back to none. */
.gform_wrapper.gravity-theme.bre-form_wrapper .gchoice input:checked + label::before {
	border-color: var(--bre-red);
	background-color: var(--bre-red);
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gfield_radio .gchoice input:checked + label::before {
	background-size: 100% 100%;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gfield_checkbox .gchoice input:checked + label::before {
	background-size: 15px 15px;
}

/* Gravity Forms keeps the "Other" text input in the DOM and disables it until
   the Other choice is picked, so disabled is the honest hook for hiding it. */
.gform_wrapper.gravity-theme.bre-form_wrapper .gchoice input.gchoice_other_control[disabled] {
	display: none;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gchoice input.gchoice_other_control {
	position: static;
	display: block;
	width: 100%;
	height: auto;
	margin-top: 8px;
	padding: 8px 12px;
	border: 1px solid var(--bre-rule);
	border-radius: 6px;
	opacity: 1;
	appearance: auto;
	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	color: var(--bre-ink);
}

/* Cards in one row share a height. */
.gform_wrapper.gravity-theme.bre-form_wrapper .bre-cards .gchoice,
.gform_wrapper.gravity-theme.bre-form_wrapper .bre-list .gchoice {
	display: flex;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .bre-cards .gchoice > label,
.gform_wrapper.gravity-theme.bre-form_wrapper .bre-list .gchoice > label {
	flex: 1 1 auto;
	align-content: start;
}

/* --- Layout variants ---------------------------------------------------- */

/* Cards: two across once there is room. */
@media (min-width: 620px) {
	.gform_wrapper.gravity-theme.bre-form_wrapper .bre-cards .gfield_radio,
	.gform_wrapper.gravity-theme.bre-form_wrapper .bre-cards .gfield_checkbox {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Chips: short answer sets sit inline. */
.gform_wrapper.gravity-theme.bre-form_wrapper .bre-chips .gfield_radio,
.gform_wrapper.gravity-theme.bre-form_wrapper .bre-chips .gfield_checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: 8.8px;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .bre-chips .gchoice {
	display: block;
	flex: 0 0 auto;
	max-width: 100%;
}

/* Chips size to their own content. Neither grid nor flex shrink-to-fit
   reports the label's horizontal padding up the chain here, which left the
   text overflowing the pill by exactly the padding. inline-block sizing is
   well defined and includes it. */
.gform_wrapper.gravity-theme.bre-form_wrapper .bre-chips .gchoice > label {
	display: inline-block;
	width: auto;
	max-width: 100%;
	padding: 10px 17px 10px 13px;
	border-radius: 999px;
	line-height: 20px;
	white-space: nowrap;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .bre-chips .gchoice > label::before {
	display: inline-block;
	vertical-align: top;
	margin: 0 10px 0 0;
}

@media (max-width: 419px) {
	.gform_wrapper.gravity-theme.bre-form_wrapper .bre-chips .gchoice > label {
		white-space: normal;
	}
}

/* Dense list: many options, scanning beats card weight. */
@media (min-width: 620px) {
	.gform_wrapper.gravity-theme.bre-form_wrapper .bre-list .gfield_checkbox {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2.4px 24px;
	}
}

.gform_wrapper.gravity-theme.bre-form_wrapper .bre-list .gchoice > label {
	padding: 8px 6.4px;
	border-color: transparent;
	background: transparent;
	box-shadow: none;
	font-size: 15px;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .bre-list .gchoice:hover > label {
	border-color: transparent;
	background: var(--bre-ground);
	box-shadow: none;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .bre-list .gchoice input:checked + label {
	border-color: transparent;
	background: #fdf7f8;
}

/* Scale: a five-point strip that reads as one instrument. */
.gform_wrapper.gravity-theme.bre-form_wrapper .bre-scale .gfield_radio {
	display: grid;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--bre-rule);
	border-radius: var(--bre-radius-sm);
	background: var(--bre-ground);
}

@media (min-width: 700px) {
	.gform_wrapper.gravity-theme.bre-form_wrapper .bre-scale .gfield_radio {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

.gform_wrapper.gravity-theme.bre-form_wrapper .bre-scale .gchoice > label {
	display: block;
	padding: 11.2px 8px;
	border: 0;
	border-radius: 5px;
	background: transparent;
	box-shadow: none;
	text-align: left;
	font-size: 15px;
}

@media (min-width: 700px) {
	.gform_wrapper.gravity-theme.bre-form_wrapper .bre-scale .gchoice > label {
		text-align: center;
	}
}

.gform_wrapper.gravity-theme.bre-form_wrapper .bre-scale .gchoice > label::before,
.gform_wrapper.gravity-theme.bre-form_wrapper .bre-scale .gchoice > label::after {
	content: none;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .bre-scale .gchoice:hover > label {
	background: rgba(0, 64, 80, 0.07);
	border-color: transparent;
	box-shadow: none;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .bre-scale .gchoice input:checked + label {
	background: var(--bre-teal);
	color: #fff;
	font-weight: 600;
	box-shadow: var(--bre-shadow-sm);
}

/* ==========================================================================
   Callouts — margin notes against the section that makes them relevant
   ========================================================================== */

.bre-callout {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: var(--bre-step-3);
	align-items: start;
	padding: var(--bre-step-3);
	border: 1px solid #d3ddde;
	border-radius: var(--bre-radius);
	background: linear-gradient(180deg, #f2f7f8 0%, #eaf2f3 100%);
}

@media (min-width: 700px) {
	.bre-callout {
		padding: var(--bre-step-3) var(--bre-step-4);
	}
}

.bre-callout__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--bre-teal);
	color: #cfeaf1;
}

.bre-callout__body {
	min-width: 0;
}

.bre-callout .bre-callout__title {
	margin: 0 0 4.8px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--bre-teal);
}

.bre-callout .bre-callout__text {
	margin: 0 0 11.2px;
	font-size: 15px;
	line-height: 1.55;
	color: #3d5257;
	text-wrap: pretty;
}

.bre-callout__link {
	display: inline-flex;
	align-items: center;
	gap: 6.4px;
	font-size: 15px;
	font-weight: 600;
	color: var(--bre-red);
	text-decoration: none;
	border-bottom: 1px solid rgba(132, 12, 29, 0.3);
	transition: color 0.2s var(--bre-ease-soft), border-color 0.2s var(--bre-ease-soft);
}

.bre-callout__link:hover,
.bre-callout__link:focus-visible {
	color: var(--bre-red-deep);
	border-color: var(--bre-red-deep);
}

.bre-callout__arrow {
	transition: transform 0.3s var(--bre-ease);
}

.bre-callout__link:hover .bre-callout__arrow {
	transform: translateX(3px);
}

/* ==========================================================================
   Confidentiality note
   ========================================================================== */

.bre-privacy {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	padding: var(--bre-step-3);
	border: 1px solid var(--bre-rule-soft);
	border-radius: var(--bre-radius);
	background: var(--bre-ground);
}

.bre-privacy svg {
	margin-top: 0.15em;
	color: var(--bre-green);
}

.bre-privacy p {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--bre-muted);
}

/* ==========================================================================
   Percentage meters
   ========================================================================== */

.bre-meter {
	padding-bottom: 4px;
}

.bre-meter .bre-meter__title {
	margin: 0 0 var(--bre-step-2);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--bre-ink);
	text-wrap: pretty;
}

.bre-meter__bar {
	display: flex;
	height: 9.6px;
	border-radius: 999px;
	overflow: hidden;
	background: var(--bre-rule-soft);
}

.bre-meter__seg {
	display: block;
	width: 0;
	transition: width 0.65s var(--bre-ease);
}

.bre-meter__seg[data-seg="0"] { background: #7bdfef; }
.bre-meter__seg[data-seg="1"] { background: #4bb9cf; }
.bre-meter__seg[data-seg="2"] { background: var(--bre-green); }
.bre-meter__seg[data-seg="3"] { background: var(--bre-orange); }
.bre-meter__seg[data-seg="4"] { background: #b2675e; }

.bre-meter__readout {
	margin: 8.8px 0 0;
	font-size: 15px;
	color: var(--bre-muted);
}

.bre-meter__total {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--bre-ink);
}

.bre-meter[data-state="over"] .bre-meter__total,
.bre-meter[data-state="over"] .bre-meter__unit {
	color: var(--bre-orange-deep);
}

.bre-meter[data-state="exact"] .bre-meter__total,
.bre-meter[data-state="exact"] .bre-meter__unit {
	color: #4a6d20;
}

/* ==========================================================================
   Footer, buttons, validation
   ========================================================================== */

.gform_wrapper.gravity-theme.bre-form_wrapper .gform-page-footer,
.gform_wrapper.gravity-theme.bre-form_wrapper .gform_footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bre-step-2) var(--bre-step-3);
	margin: var(--bre-step-5) 0 0;
	padding: var(--bre-step-3) 0 0;
	border-top: 1px solid var(--bre-rule-soft);
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gform-page-footer .gform_previous_button {
	order: -1;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gform-page-footer .gform_save_link {
	margin-left: auto;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gform-theme-button,
.gform_wrapper.gravity-theme.bre-form_wrapper input[type="submit"],
.gform_wrapper.gravity-theme.bre-form_wrapper button.button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 25.6px;
	border: 1.5px solid var(--bre-red);
	border-radius: 999px;
	background: var(--bre-red);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.005em;
	line-height: 1.2;
	color: #fff;
	cursor: pointer;
	box-shadow: var(--bre-shadow-sm);
	transition: background-color 0.22s var(--bre-ease-soft), border-color 0.22s var(--bre-ease-soft),
		transform 0.22s var(--bre-ease), box-shadow 0.22s var(--bre-ease);
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gform-theme-button:hover,
.gform_wrapper.gravity-theme.bre-form_wrapper input[type="submit"]:hover,
.gform_wrapper.gravity-theme.bre-form_wrapper button.button:hover {
	background: var(--bre-red-deep);
	border-color: var(--bre-red-deep);
	transform: translateY(-1px);
	box-shadow: var(--bre-shadow-md);
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gform-theme-button:active,
.gform_wrapper.gravity-theme.bre-form_wrapper input[type="submit"]:active {
	transform: translateY(0);
	box-shadow: var(--bre-shadow-sm);
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gform-theme-button:focus-visible {
	outline: 2px solid var(--bre-orange-deep);
	outline-offset: 3px;
}

/* Secondary: back and save. */
/* Back and Save are secondary. The primary rule reaches these through
   button.button, so these selectors carry an element too. */
/* Gravity Forms paints these through a variable defined in one of its
   stylesheets and consumed in another, so the white only appears when both
   are present and no single selector here reliably outranks it. The Save
   button was rendering white text on a white pill, i.e. invisible, so these
   three declarations are forced. */
.gform_wrapper.gravity-theme.bre-form_wrapper button.gform_previous_button,
.gform_wrapper.gravity-theme.bre-form_wrapper button.gform_save_link,
.gform_wrapper.gravity-theme.bre-form_wrapper button.gform-theme-button--secondary,
.gform_wrapper.gravity-theme.bre-form_wrapper .gform_previous_button,
.gform_wrapper.gravity-theme.bre-form_wrapper .gform_save_link,
.gform_wrapper.gravity-theme.bre-form_wrapper .gform-theme-button--secondary {
	border-color: var(--bre-rule) !important;
	background-color: #ffffff !important;
	color: var(--bre-body) !important;
	box-shadow: none;
}

.gform_wrapper.gravity-theme.bre-form_wrapper button.gform_previous_button:hover,
.gform_wrapper.gravity-theme.bre-form_wrapper button.gform_save_link:hover,
.gform_wrapper.gravity-theme.bre-form_wrapper button.gform-theme-button--secondary:hover,
.gform_wrapper.gravity-theme.bre-form_wrapper .gform_previous_button:hover,
.gform_wrapper.gravity-theme.bre-form_wrapper .gform_save_link:hover,
.gform_wrapper.gravity-theme.bre-form_wrapper .gform-theme-button--secondary:hover {
	border-color: var(--bre-red) !important;
	background-color: var(--bre-red) !important;
	color: #ffffff !important;
	box-shadow: var(--bre-shadow-sm);
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gform_save_link svg path {
	fill: currentColor !important;
}

.gform_wrapper.gravity-theme.bre-form_wrapper button.gform_save_link {
	font-weight: 400;
	font-size: 15px;
	min-height: 41.6px;
	padding: 8px 17.6px;
}

/* Validation */
.gform_wrapper.gravity-theme.bre-form_wrapper .gform_validation_errors {
	margin: 0 0 var(--bre-step-4);
	padding: var(--bre-step-3);
	border: 1px solid #e0b3ba;
	border-radius: var(--bre-radius);
	background: #fdf3f4;
	box-shadow: none;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gform_validation_errors > h2 {
	margin: 0 0 5.6px;
	font-size: 17px;
	font-weight: 600;
	color: var(--bre-red);
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gform_validation_errors ol {
	margin: 6.4px 0 0 17.6px;
	font-size: 15px;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gform_validation_errors a {
	color: var(--bre-red);
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gfield_error .gfield_label {
	color: var(--bre-red);
}

.gform_wrapper.gravity-theme.bre-form_wrapper .gfield_error input,
.gform_wrapper.gravity-theme.bre-form_wrapper .gfield_error textarea,
.gform_wrapper.gravity-theme.bre-form_wrapper .gfield_error select {
	border-color: var(--bre-red);
	background: #fffafb;
}

.gform_wrapper.gravity-theme.bre-form_wrapper .validation_message {
	margin-top: var(--bre-step-2);
	padding: 8px 11.2px;
	border: 0;
	border-radius: var(--bre-radius-sm);
	background: #fdf3f4;
	font-size: 15px;
	font-weight: 400;
	color: #6d0a18;
}

/* ==========================================================================
   Confirmation
   ========================================================================== */

.gform_confirmation_wrapper.bre-form {
	box-sizing: border-box;
	max-width: 1111px;
	margin: 33px auto;
	padding: 0 15px;
	font-family: var(--mainFont, "myriad-pro", sans-serif);
	font-size: 16px;
	color: var(--bre-body);
}

.bre-thanks {
	box-sizing: border-box;
	max-width: 608px;
	padding: var(--bre-step-5) 0;
	animation: bre-thanks-in 0.7s var(--bre-ease) both;
}

@keyframes bre-thanks-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.bre-thanks__mark {
	color: var(--bre-green);
	margin-bottom: var(--bre-step-3);
}

.bre-thanks__mark circle,
.bre-thanks__mark path {
	stroke-dasharray: 200;
	stroke-dashoffset: 200;
	animation: bre-draw 1s var(--bre-ease) 0.15s forwards;
}

.bre-thanks__mark path {
	animation-delay: 0.5s;
}

@keyframes bre-draw {
	to {
		stroke-dashoffset: 0;
	}
}

div.bre-thanks h2 {
	margin: 0 0 var(--bre-step-3);
	font-size: clamp(29.6px, 20.8px + 1.8vw, 44px);
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -0.022em;
	color: var(--bre-ink);
}

div.bre-thanks p {
	margin: 0 0 var(--bre-step-3);
	font-size: 17px;
	line-height: 1.6;
	color: var(--bre-body);
}

div.bre-thanks .bre-thanks__next {
	color: var(--bre-muted);
	font-size: 16px;
}

/* The theme paints every link brand red, which on the teal button was 1.5:1.
   Element+class selectors keep the text white; hover moves the field to red. */
div.bre-thanks a.bre-thanks__link,
div.bre-thanks a.bre-thanks__link:visited {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 12px 25.6px;
	border: 1.5px solid var(--bre-teal);
	border-radius: 999px;
	background-color: var(--bre-teal);
	font-size: 16px;
	font-weight: 600;
	color: #ffffff;
	text-decoration: none;
	box-shadow: var(--bre-shadow-sm);
	transition: background-color 0.22s var(--bre-ease-soft), border-color 0.22s var(--bre-ease-soft),
		transform 0.22s var(--bre-ease), box-shadow 0.22s var(--bre-ease);
}

div.bre-thanks a.bre-thanks__link:hover,
div.bre-thanks a.bre-thanks__link:focus,
div.bre-thanks a.bre-thanks__link:focus-visible,
div.bre-thanks a.bre-thanks__link:active {
	border-color: var(--bre-red);
	background-color: var(--bre-red);
	color: #ffffff;
	transform: translateY(-1px);
	box-shadow: var(--bre-shadow-md);
}

div.bre-thanks a.bre-thanks__link:focus-visible {
	outline: 2px solid var(--bre-orange-deep);
	outline-offset: 3px;
}

/* ==========================================================================
   The authored moment: a step arrives
   ========================================================================== */

.gform_wrapper.gravity-theme.bre-form_wrapper .bre-entering .gfield {
	animation: bre-field-in 0.62s var(--bre-ease) both;
	animation-delay: calc(var(--bre-i, 0) * 45ms);
}

@keyframes bre-field-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.gform_wrapper.gravity-theme.bre-form_wrapper *,
	.gform_wrapper.gravity-theme.bre-form_wrapper *::before,
	.gform_wrapper.gravity-theme.bre-form_wrapper *::after,
	.bre-intro * {
		animation-duration: 0.001ms !important;
		animation-delay: 0ms !important;
		transition-duration: 0.001ms !important;
	}

	.gform_wrapper.gravity-theme.bre-form_wrapper .gform-theme-button:hover {
		transform: none;
	}
}

/* ==========================================================================
   Hero — the page's own opening, carrying the featured image under a red field
   ========================================================================== */

.bre-hero {
	--bre-red: #840c1d;
	--bre-red-deep: #620715;
	--bre-orange: #e1832c;
	--bre-radius: 10px;
	--bre-ease: cubic-bezier(0.16, 1, 0.3, 1);

	position: relative;
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 44px;
	padding: clamp(52px, 5vw + 26px, 108px) 0;
	border-radius: 0;
	overflow: hidden;
	isolation: isolate;
	font-family: var(--mainFont, "myriad-pro", sans-serif);
	color: #fff;
	background-color: var(--bre-red-deep);
	box-shadow: 0 2px 4px rgba(24, 20, 16, 0.06), 0 18px 44px -22px rgba(24, 20, 16, 0.4);
}

.bre-hero *,
.bre-hero *::before,
.bre-hero *::after {
	box-sizing: border-box;
}

/* The photograph sits under a red field weighted to the reading side, so the
   white text keeps its contrast over the bright sunrise in the image. */
.bre-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(100deg, rgba(98, 7, 21, 0.97) 0%, rgba(132, 12, 29, 0.93) 42%, rgba(132, 12, 29, 0.7) 100%),
		url("https://www.choosecranbrook.ca/wp-content/uploads/2025/08/Screenshot-2025-08-06-094538.jpg");
	background-size: cover, cover;
	background-position: center, 60% 42%;
	background-repeat: no-repeat, no-repeat;
}

/* Full bleed band, but the words line up with the survey column below it.
   Two columns from 900px: the message left, the partner credit right, each
   centred against the other. */
.bre-hero__inner {
	position: relative;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 34px;
	align-items: center;
	max-width: 1111px;
	margin: 0 auto;
	padding: 0 15px;
}

@media (min-width: 900px) {
	.bre-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(210px, 300px);
		gap: 56px;
	}
}

.bre-hero__main {
	min-width: 0;
}

.bre-hero .bre-hero__title,
.bre-hero .bre-hero__lead,
.bre-hero ul.bre-hero__facts {
	max-width: 660px;
}

/* Partner credit */
.bre-hero__partner {
	min-width: 0;
}

.bre-hero .bre-hero__partner-label {
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.01em;
	color: rgba(255, 255, 255, 0.82);
}

.bre-hero .bre-hero__partner-logo {
	display: block;
	width: 100%;
	max-width: 268px;
	height: auto;
}

@media (min-width: 900px) {
	/* No justify-self here: it would shrink the column to its content and the
	   logo's width:100% would collapse with it. The track sizes the column;
	   the contents align inside it, flush left. */
	.bre-hero__partner {
		text-align: left;
	}

	.bre-hero .bre-hero__partner-logo {
		margin-left: 0;
	}
}

@media (max-width: 899px) {
	/* Stacked: a hairline keeps the credit from reading as part of the blurb. */
	.bre-hero__partner {
		padding-top: 28px;
		border-top: 1px solid rgba(255, 255, 255, 0.22);
	}

	.bre-hero .bre-hero__partner-logo {
		max-width: 220px;
	}
}

.bre-hero .bre-hero__title {
	margin: 0 0 clamp(14px, 1.2vw, 22px);
	font-size: clamp(30px, 2.2vw + 20px, 52px);
	font-weight: 900;
	line-height: 1.03;
	letter-spacing: -0.024em;
	text-transform: uppercase;
	text-wrap: balance;
	color: #fff;
}

.bre-hero .bre-hero__lead {
	margin: 0 0 clamp(20px, 2vw, 30px);
	font-size: clamp(16px, 0.4vw + 15px, 19px);
	font-weight: 400;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.93);
	text-wrap: pretty;
}

.bre-hero ul.bre-hero__facts {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bre-hero li.bre-hero__fact {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.88);
	list-style: none;
	background: none;
}

.bre-hero li.bre-hero__fact::before,
.bre-hero li.bre-hero__fact::after {
	content: none !important;
	display: none !important;
}

.bre-hero li.bre-hero__fact::marker {
	content: "";
}

.bre-hero .bre-hero__fact svg {
	margin-top: 0.15em;
	color: var(--bre-orange);
}

.bre-hero .bre-hero__fact strong {
	font-weight: 600;
	color: #fff;
}

@media (max-width: 640px) {
	.bre-hero {
		margin: 0 0 28px;
	}

	.bre-hero__media {
		background-image:
			linear-gradient(170deg, rgba(98, 7, 21, 0.96) 0%, rgba(132, 12, 29, 0.9) 100%),
			url("https://www.choosecranbrook.ca/wp-content/uploads/2025/08/Screenshot-2025-08-06-094538-1024x582.jpg");
	}
}

/* The theme prints its own page h1 above the content; the hero carries it now. */
body.page-id-3576 .mainContainer > .customContainerFull,
body.page-id-3576 .mainContainer > h2.sr-only {
	display: none;
}

/* Nothing between the nav and the hero band. */
body.page-id-3576 main,
body.page-id-3576 main > .bkgroundColor,
body.page-id-3576 .mainContainer {
	padding-top: 0;
	margin-top: 0;
}

body.page-id-3576 .bre-hero {
	margin-top: 0;
}

/* ==========================================================================
   Callouts lead their section
   ========================================================================== */

.gform_wrapper.gravity-theme.bre-form_wrapper .gfield:has(.bre-callout) {
	margin-top: 4px;
}

.bre-callout {
	border-color: #b9ccce;
	background: linear-gradient(180deg, #eef5f6 0%, #e2eef0 100%);
	box-shadow: 0 1px 2px rgba(0, 64, 80, 0.06), 0 10px 26px -16px rgba(0, 64, 80, 0.4);
}

@media (min-width: 700px) {
	.bre-callout {
		grid-template-columns: 3.25rem minmax(0, 1fr);
		gap: 22px;
		padding: 24px 28px;
	}
}

.bre-callout .bre-callout__icon {
	width: 52px;
	height: 52px;
}

.bre-callout .bre-callout__icon svg {
	width: 26px;
	height: 26px;
}

.bre-callout .bre-callout__title {
	margin-bottom: 6px;
	font-size: 19px;
	letter-spacing: -0.008em;
}

.bre-callout .bre-callout__text {
	font-size: 16px;
}

.bre-callout .bre-callout__link {
	font-size: 16px;
}

/* ==========================================================================
   Save and Continue
   ========================================================================== */

.form_saved_message,
.form_saved_message_sent,
.gform_confirmation_wrapper.bre-form .bre-saved {
	--bre-red: #840c1d;
	--bre-red-deep: #620715;
	--bre-orange-deep: #ae6119;
	--bre-teal: #004050;
	--bre-teal-lift: #0a5468;
	--bre-green: #6e9a35;
	--bre-ink: #2f2f31;
	--bre-body: #474749;
	--bre-muted: #5f5f62;
	--bre-rule: #dcdcd8;
	--bre-rule-soft: #ebebe7;
	--bre-ground: #f6f5f2;
	--bre-radius: 10px;
	--bre-radius-sm: 7px;
	--bre-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--bre-ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
	--bre-shadow-sm: 0 1px 2px rgba(24, 20, 16, 0.05), 0 4px 12px -8px rgba(24, 20, 16, 0.18);
	--bre-shadow-md: 0 2px 4px rgba(24, 20, 16, 0.06), 0 14px 32px -18px rgba(24, 20, 16, 0.28);
}

.form_saved_message,
.form_saved_message_sent {
	box-sizing: border-box;
	max-width: 1111px;
	margin: 33px auto;
	padding: 0 15px;
	border: 0;
	background: none;
	font-family: var(--mainFont, "myriad-pro", sans-serif);
}

.bre-saved {
	box-sizing: border-box;
	max-width: 620px;
	padding: 0;
	font-family: var(--mainFont, "myriad-pro", sans-serif);
	color: var(--bre-body);
	animation: bre-thanks-in 0.6s var(--bre-ease) both;
}

.bre-saved *,
.bre-saved *::before,
.bre-saved *::after {
	box-sizing: border-box;
}

.bre-saved .bre-saved__mark {
	margin-bottom: 18px;
	color: var(--bre-teal);
}

div.bre-saved h2 {
	margin: 0 0 14px;
	font-size: clamp(26px, 1.3vw + 20px, 38px);
	font-weight: 900;
	line-height: 1.06;
	letter-spacing: -0.022em;
	color: var(--bre-ink);
}

div.bre-saved h3 {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--bre-ink);
}

div.bre-saved p {
	margin: 0 0 16px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--bre-body);
}

/* The resume link is the whole point of this screen: make it copyable and
   unmistakable rather than a bare inline link. */
.bre-saved .bre-saved__link {
	margin: 0 0 26px;
	padding: 14px 16px;
	border: 1px solid #cfdde0;
	border-radius: var(--bre-radius-sm);
	background: #f0f6f7;
	font-size: 15px;
	line-height: 1.5;
	word-break: break-all;
	overflow-wrap: anywhere;
}

.bre-saved .bre-saved__link a,
.bre-saved .bre-saved__link a:visited {
	color: var(--bre-teal);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.bre-saved .bre-saved__link a:hover {
	color: var(--bre-red);
}

.bre-saved .bre-saved__email {
	padding: 22px;
	border: 1px solid var(--bre-rule-soft);
	border-radius: var(--bre-radius);
	background: var(--bre-ground);
}

.bre-saved .bre-saved__email p {
	margin-bottom: 14px;
	font-size: 15px;
	color: var(--bre-muted);
}

.bre-saved .bre-saved__note {
	font-size: 15px;
	color: var(--bre-muted);
}

/* Gravity Forms prints its own email input and button here. */
.bre-saved input[type="text"],
.bre-saved input[type="email"],
.form_saved_message input[type="text"],
.form_saved_message input[type="email"] {
	width: 100%;
	max-width: 340px;
	padding: 11px 14px;
	border: 1px solid var(--bre-rule);
	border-radius: var(--bre-radius-sm);
	background: #fff;
	font-family: inherit;
	font-size: 16px;
	color: var(--bre-ink);
}

.bre-saved input:focus,
.form_saved_message input:focus {
	outline: none;
	border-color: var(--bre-red);
	box-shadow: 0 0 0 3px rgba(132, 12, 29, 0.14);
}

.bre-saved input[type="submit"],
.bre-saved button,
.form_saved_message input[type="submit"],
.form_saved_message button {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	margin-top: 12px;
	padding: 12px 26px;
	border: 1.5px solid var(--bre-teal);
	border-radius: 999px;
	background-color: var(--bre-teal);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	color: #ffffff;
	cursor: pointer;
	box-shadow: var(--bre-shadow-sm);
	transition: background-color 0.22s var(--bre-ease-soft), border-color 0.22s var(--bre-ease-soft),
		transform 0.22s var(--bre-ease), box-shadow 0.22s var(--bre-ease);
}

.bre-saved input[type="submit"]:hover,
.bre-saved button:hover,
.form_saved_message input[type="submit"]:hover,
.form_saved_message button:hover {
	border-color: var(--bre-red);
	background-color: var(--bre-red);
	color: #ffffff;
	transform: translateY(-1px);
	box-shadow: var(--bre-shadow-md);
}

.bre-saved input[type="submit"]:focus-visible,
.form_saved_message input[type="submit"]:focus-visible {
	outline: 2px solid var(--bre-orange-deep);
	outline-offset: 3px;
}

/* ==========================================================================
   Required marker
   ========================================================================== */

.gform_wrapper.gravity-theme.bre-form_wrapper .gfield_required_text {
	color: var(--bre-red);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.01em;
}

/* ==========================================================================
   FOIPPA notice — fine print, legible not decorative
   ========================================================================== */

.bre-foippa {
	display: block;
	margin-top: -6px;
	padding: 18px 0 0;
	border-top: 1px solid var(--bre-rule-soft);
}

/* Fine print to the client's spec: full column width, line-height 1, #777777. */
.bre-foippa .bre-foippa__text {
	max-width: none;
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 1;
	color: #777777;
	text-wrap: pretty;
}