/*!
 * Gravity Forms — overrides for the Vertragsvorlagen theme.
 *
 * Strategy: We let GF render its native DOM (orbital theme classes:
 *   .gform_wrapper, .gform_fields, .gfield, .gform_page, .gform_footer,
 *   .gform_next_button, .gform_previous_button, .gform_button)
 * and reskin them in our brand. We do NOT replace the markup — only style.
 *
 * Scoping: We wrap each form output in `.vv-gf-wrapper`. Every selector
 * starts there so we never bleed into other GF instances on the site.
 *
 * Selectors targeted (per GF docs):
 *   .vv-gf-wrapper .gform_wrapper            ← outer container
 *   .vv-gf-wrapper .gform_page               ← single wizard page
 *   .vv-gf-wrapper .gform_page_fields        ← fields on current page
 *   .vv-gf-wrapper .gfield                   ← one field row
 *   .vv-gf-wrapper .gfield_label             ← field label
 *   .vv-gf-wrapper .ginput_container input,
 *   .vv-gf-wrapper .ginput_container select,
 *   .vv-gf-wrapper .ginput_container textarea
 *   .vv-gf-wrapper .gfield_description       ← help text
 *   .vv-gf-wrapper .gfield_validation_message
 *   .vv-gf-wrapper .gform_footer / .gform_page_footer
 *   .vv-gf-wrapper .gform_next_button, .gform_previous_button, .gform_button
 *   .vv-gf-wrapper .gform_progress / .gf_progressbar  ← hidden, replaced by .vv-stepper
 */

/* ─────── Wrapper ─────── */
.vv-gf-wrapper {
	font-family: var(--vv-font-body);
	color: var(--vv-ink);
}

/* Hide GF's stock progress bar — we render our own .vv-stepper above. */
.vv-gf-wrapper .gf_progressbar_wrapper,
.vv-gf-wrapper .gf_progressbar,
.vv-gf-wrapper .gform_progress,
.vv-gf-wrapper .gform_progress_simple,
.vv-gf-wrapper .gf_progressbar_title,
.vv-gf-wrapper .gf_progressbar_percentage,
.vv-gf-wrapper .percentbar_blue,
.vv-gf-wrapper .percentbar_red,
.vv-gf-wrapper .percentbar_green,
.vv-gf-wrapper .percentbar_orange,
.vv-gf-wrapper .percentbar_gray,
.vv-gf-wrapper .percentbar_custom,
.gform_wrapper.gravity-theme .gf_progressbar_wrapper,
.gform_wrapper.gravity-theme .gf_progressbar,
.gform_wrapper.gravity-theme .gform_page_steps { display: none !important; }

/* Also nuke the "* indicates required fields" legend GF prints above the form */
.vv-gf-wrapper .gform_required_legend { display: none !important; }

/* Our stepper, injected by Vertragsvorlagen\Integrations\GravityForms */
.vv-stepper {
	display: flex; gap: 4px; align-items: center;
	margin-top: 4px;
}
.vv-stepper__step {
	display: flex; align-items: center; gap: 10px;
	flex-shrink: 0;
}
.vv-stepper__step + .vv-stepper__step::before {
	content: ""; flex: 1; min-width: 24px;
	height: 1px; background: var(--vv-border);
	margin: 0 8px;
}
.vv-stepper__step--done + .vv-stepper__step::before,
.vv-stepper__step--done::before { background: var(--vv-gold); }

.vv-stepper__num {
	width: 28px; height: 28px; border-radius: 99px;
	background: var(--vv-paper); border: 1px solid var(--vv-border);
	color: var(--vv-muted);
	display: inline-flex; align-items: center; justify-content: center;
	font: 700 .75rem/1 var(--vv-font-body);
}
.vv-stepper__step--done .vv-stepper__num { background: var(--vv-gold); border-color: var(--vv-gold); color: var(--vv-paper); }
.vv-stepper__step--active .vv-stepper__num { background: var(--vv-navy); border-color: var(--vv-navy); color: var(--vv-paper); }
.vv-stepper__label { font-size: .8125rem; font-weight: 500; color: var(--vv-muted); }
.vv-stepper__step--active .vv-stepper__label { color: var(--vv-navy); font-weight: 600; }
.vv-stepper__step--pending { opacity: .55; }

/* ─────── Strip GF chrome we don't want ─────── */
.vv-gf-wrapper .gform_heading,
.vv-gf-wrapper .gf_progressbar_wrapper,
.vv-gf-wrapper .gform_progress,
.vv-gf-wrapper .gform_progress_simple,
.vv-gf-wrapper .gf_progressbar,
.vv-gf-wrapper .gf_progressbar_title,
.vv-gf-wrapper .gf_progressbar_percentage,
.vv-gf-wrapper .percentbar_blue,
.vv-gf-wrapper .percentbar_red,
.vv-gf-wrapper .percentbar_green,
.vv-gf-wrapper .percentbar_orange,
.vv-gf-wrapper .percentbar_gray,
.vv-gf-wrapper .percentbar_custom,
.gform_wrapper.gravity-theme .gf_progressbar_wrapper,
.gform_wrapper.gravity-theme .gf_progressbar,
.gform_wrapper.gravity-theme .gform_page_steps,
.gform_wrapper .gform_heading,
.gform_wrapper .gf_progressbar_wrapper { display: none !important; }

.vv-gf-wrapper .gform_required_legend,
.gform_wrapper .gform_required_legend { display: none !important; }

/* ─────── Form panel (the white card) ─────── */
.vv-gf-wrapper .gform_wrapper {
	background: #ffffff !important;
	border: 1px solid var(--vv-border) !important;
	border-radius: var(--vv-radius-lg) !important;
	padding: 40px 44px !important;
	max-width: none !important;
	box-shadow: 0 1px 2px rgba(15, 30, 61, .04), 0 8px 24px -12px rgba(15, 30, 61, .08) !important;
}

.vv-gf-wrapper .gform_heading,
.vv-gf-wrapper .gform_title,
.vv-gf-wrapper .gform_description {
	font-family: var(--vv-font-display);
	color: var(--vv-navy);
}
.vv-gf-wrapper .gform_title { font-size: 1.75rem; margin: 0 0 8px; font-weight: 500; }
.vv-gf-wrapper .gform_description { font-family: var(--vv-font-body); font-size: .875rem; color: var(--vv-muted); }

/* Page wrapper */
.vv-gf-wrapper .gform_page { padding: 0; }
.vv-gf-wrapper .gform_page_fields,
.vv-gf-wrapper .gform_fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
	padding: 0;
	margin: 0;
	list-style: none;
}

/* Half-width and third-width fields via GF's standard classes */
.vv-gf-wrapper .gform_fields .gfield--width-half  { grid-column: span 6; }
.vv-gf-wrapper .gform_fields .gfield--width-third { grid-column: span 4; }
.vv-gf-wrapper .gform_fields .gfield--width-full  { grid-column: 1 / -1; }
.vv-gf-wrapper .gform_fields { grid-template-columns: repeat(12, 1fr); }
.vv-gf-wrapper .gform_fields > .gfield { grid-column: 1 / -1; }
.vv-gf-wrapper .gform_fields > .gfield.gfield--width-half  { grid-column: span 6; }
.vv-gf-wrapper .gform_fields > .gfield.gfield--width-third { grid-column: span 4; }

/* ─────── Section breaks ─────── */
.vv-gf-wrapper .gfield--type-section,
.vv-gf-wrapper .gsection {
	grid-column: 1 / -1;
	margin: 24px 0 8px;
	padding: 18px 22px;
	background: var(--vv-beige);
	border: 1px solid var(--vv-border);
	border-radius: var(--vv-radius);
}
.vv-gf-wrapper .gfield--type-section .gsection_title,
.vv-gf-wrapper .gfield--type-section h3.gsection_title,
.vv-gf-wrapper .gsection .gsection_title,
.gform_wrapper .gfield--type-section .gsection_title,
.gform_wrapper .gsection .gsection_title {
	display: none !important;
}
.vv-gf-wrapper .gfield--type-section + .gfield,
.vv-gf-wrapper .gsection + .gfield {
	margin-top: 8px;
}
.vv-gf-wrapper .gsection_title,
.vv-gf-wrapper .gfield--type-section h3,
.vv-gf-wrapper .gfield--type-section .gsection_title {
	font-family: var(--vv-font-display);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--vv-navy);
	margin: 0 0 6px;
	letter-spacing: -.005em;
	line-height: 1.3;
}
.vv-gf-wrapper .gsection_description,
.vv-gf-wrapper .gfield--type-section .gsection_description,
.gform_wrapper .gfield--type-section .gsection_description {
	font-size: .8125rem;
	color: var(--vv-muted);
	margin: 0;
	padding-bottom: 10px !important;
	border-bottom: 0 !important;
	line-height: 1.55;
}

/* ─────── HTML "explanation" blocks — used as inline section headers ─────── */
.vv-gf-wrapper .gfield--type-html {
	grid-column: 1 / -1;
	padding: 4px 0 12px;
	border-bottom: 1px solid var(--vv-border);
	margin-top: 8px;
}
.vv-gf-wrapper .gfield--type-html:first-child {
	margin-top: 0;
	padding-top: 0;
}
.vv-gf-wrapper .gfield--type-html .explanation_title {
	font-family: var(--vv-font-display);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--vv-navy);
	line-height: 1.3;
	margin: 0 0 4px;
	letter-spacing: -.005em;
}
.vv-gf-wrapper .gfield--type-html .explanation_body {
	font-size: .8125rem;
	color: var(--vv-muted);
	line-height: 1.55;
	margin: 0;
}

/* The first section break in a page sits flush with the top */
.vv-gf-wrapper .gform_page_fields > .gsection:first-child,
.vv-gf-wrapper .gform_fields > .gsection:first-child,
.vv-gf-wrapper .gform_page_fields > .gfield--type-section:first-child,
.vv-gf-wrapper .gform_fields > .gfield--type-section:first-child {
	margin-top: 0;
}

/* ─────── Single field ─────── */
.vv-gf-wrapper .gfield { margin: 0; }

/* Label row — asterisk + info-icon sit inline next to the label text. */
.vv-gf-wrapper .gfield_label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--vv-navy);
	margin-bottom: 8px;
	font-family: var(--vv-font-body);
}
.vv-gf-wrapper .gfield_required {
	color: var(--vv-gold);
	font-weight: 600;
}
/* Inline info-icon (injected by main.js for fields with a description).
   High specificity + !important to override Orbital's button styles which
   target generic .gform_wrapper button. */
.vv-gf-wrapper .gfield_label .vv-field-info,
.vv-gf-wrapper button.vv-field-info,
.vv-gf-wrapper .gform_wrapper button.vv-field-info {
	appearance: none !important;
	-webkit-appearance: none !important;
	box-sizing: border-box !important;
	width: 16px !important;
	height: 16px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: 16px !important;
	max-height: 16px !important;
	border-radius: 99px !important;
	border: 1px solid var(--vv-border) !important;
	background: var(--vv-paper) !important;
	color: var(--vv-muted) !important;
	font: 700 .625rem/1 var(--vv-font-body) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	padding: 0 !important;
	margin: 0 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	transition: all .15s ease;
	flex-shrink: 0;
}
.vv-gf-wrapper .vv-field-info:hover,
.vv-gf-wrapper .vv-field-info:focus-visible {
	border-color: var(--vv-navy) !important;
	color: var(--vv-navy) !important;
	background: var(--vv-paper) !important;
	outline: none;
}
/* Legacy data-vv-tooltip ⓘ pseudo — disabled, JS handles it now. */
.vv-gf-wrapper .gfield_label[data-vv-tooltip]::after { content: none !important; }

/* Inputs — broad selector so we match GF markup variants
   (Orbital theme drops .ginput_container on some field types). */
.vv-gf-wrapper input[type="text"],
.vv-gf-wrapper input[type="email"],
.vv-gf-wrapper input[type="tel"],
.vv-gf-wrapper input[type="number"],
.vv-gf-wrapper input[type="url"],
.vv-gf-wrapper input[type="date"],
.vv-gf-wrapper input[type="password"],
.vv-gf-wrapper input[type="search"],
.vv-gf-wrapper select,
.vv-gf-wrapper textarea {
	width: 100% !important;
	border: 1px solid #d8d1c4 !important;
	background: #ffffff !important;
	border-radius: var(--vv-radius-md) !important;
	padding: 12px 14px !important;
	font-family: var(--vv-font-body) !important;
	font-size: .9375rem !important;
	line-height: 1.35 !important;
	color: var(--vv-navy) !important;
	transition: border-color .15s ease, box-shadow .15s ease !important;
	box-shadow: var(--vv-shadow-sm);
	height: auto !important;
	min-height: 0 !important;
	box-sizing: border-box !important;
}
/* <select> needs an explicit appearance + custom arrow because Orbital/Foundation
   strip the native chevron via appearance:none and replace it with their own
   background-image, which we then overwrite above (background: #fff). Without
   restoring an arrow + leaving room for it, the selected value can render with
   zero contrast or get clipped behind the now-missing arrow box.
   Also force `height: auto` and a sane `line-height`: Orbital sets
   `line-height: 38px` + a fixed `height: 38px` on the select, which combined
   with our 12px vertical padding pushes the baseline below the visible box. */
.vv-gf-wrapper select {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	padding: 12px 40px 12px 14px !important;
	font-family: var(--vv-font-body) !important;
	font-size: .9375rem !important;
	line-height: 1.35 !important;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%230f1e3d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 12px 8px !important;
	background-color: #ffffff !important;
	color: var(--vv-navy) !important;
	height: auto !important;
	min-height: 0 !important;
	box-sizing: border-box !important;
}
.vv-gf-wrapper select option {
	color: var(--vv-navy);
	background: #ffffff;
}
.vv-gf-wrapper input:focus,
.vv-gf-wrapper select:focus,
.vv-gf-wrapper textarea:focus {
	outline: none !important;
	border-color: var(--vv-navy) !important;
	box-shadow: 0 0 0 3px rgba(15, 30, 61, .12) !important;
}
.vv-gf-wrapper textarea { min-height: 96px; resize: vertical; }
.vv-gf-wrapper input::placeholder,
.vv-gf-wrapper textarea::placeholder { color: #b8ad9e; }

/* Currency / unit suffix — when GF wraps with .ginput_container_number etc.
   Best results paired with field CSS class .vv-suffix-eur or .vv-suffix-percent
   set in the GF field admin. */
.vv-gf-wrapper .gfield.vv-suffix-eur     .ginput_container,
.vv-gf-wrapper .gfield.vv-suffix-percent .ginput_container {
	position: relative;
}
.vv-gf-wrapper .gfield.vv-suffix-eur     .ginput_container::after,
.vv-gf-wrapper .gfield.vv-suffix-percent .ginput_container::after {
	position: absolute;
	right: 14px; top: 50%; transform: translateY(-50%);
	color: var(--vv-muted); font-size: .875rem; font-weight: 500;
	pointer-events: none;
}
.vv-gf-wrapper .gfield.vv-suffix-eur     .ginput_container::after { content: "EUR"; }
.vv-gf-wrapper .gfield.vv-suffix-percent .ginput_container::after { content: "% p.a."; }
.vv-gf-wrapper .gfield.vv-suffix-eur     .ginput_container input,
.vv-gf-wrapper .gfield.vv-suffix-percent .ginput_container input { padding-right: 64px; }

/* Foundation / Orbital theme — kill default 30px field row-gap and use our 28px. */
.vv-gf-wrapper .gform-theme--foundation .gform_fields,
.vv-gf-wrapper.gform-theme--foundation .gform_fields,
.vv-gf-wrapper .gform-theme--orbital .gform_fields,
.vv-gf-wrapper.gform-theme--orbital .gform_fields {
	row-gap: 30px !important;
}

/* Radio / checkbox — restyle as cards (matches the design).
   Layout rules:
   - 1–3 choices: equal-width columns in a single row.
   - 4+ choices: stacked one per row (full width).
   We use CSS Grid (not flex) so column widths are dictated by the container
   template — child `width` rules from Orbital/Foundation can't push items
   to 100% and force-wrap them. */
.vv-gf-wrapper .gfield_radio,
.vv-gf-wrapper .gfield_checkbox,
.gform_wrapper .gfield_radio,
.gform_wrapper .gfield_checkbox {
	display: grid !important;
	grid-template-columns: 1fr !important;            /* fallback: 1 column */
	gap: 10px !important;
	list-style: none;
	padding: 0;
	margin: 0;
	width: 100%;
}
/* 2 choices → 2 columns */
.vv-gf-wrapper .gfield_radio:has(.gchoice:nth-child(2)):not(:has(.gchoice:nth-child(4))),
.vv-gf-wrapper .gfield_checkbox:has(.gchoice:nth-child(2)):not(:has(.gchoice:nth-child(4))),
.gform_wrapper .gfield_radio:has(.gchoice:nth-child(2)):not(:has(.gchoice:nth-child(4))),
.gform_wrapper .gfield_checkbox:has(.gchoice:nth-child(2)):not(:has(.gchoice:nth-child(4))) {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
/* 3 choices → 3 columns */
.vv-gf-wrapper .gfield_radio:has(.gchoice:nth-child(3)):not(:has(.gchoice:nth-child(4))),
.vv-gf-wrapper .gfield_checkbox:has(.gchoice:nth-child(3)):not(:has(.gchoice:nth-child(4))),
.gform_wrapper .gfield_radio:has(.gchoice:nth-child(3)):not(:has(.gchoice:nth-child(4))),
.gform_wrapper .gfield_checkbox:has(.gchoice:nth-child(3)):not(:has(.gchoice:nth-child(4))) {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
/* 4+ choices stay at the 1fr fallback (stacked). */
.vv-gf-wrapper .gfield_radio .gchoice,
.vv-gf-wrapper .gfield_checkbox .gchoice,
.gform_wrapper .gfield_radio .gchoice,
.gform_wrapper .gfield_checkbox .gchoice {
	position: relative;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	min-width: 0 !important;
	width: auto !important;
}
/* Hide the native input. Use both `display: none` (kills any Orbital/Foundation
   visual pseudo-elements like `.gchoice input::before`) AND screen-reader-safe
   positioning so the input still receives focus via label click. */
.vv-gf-wrapper .gfield_radio input,
.vv-gf-wrapper .gfield_checkbox input,
.vv-gf-wrapper .gchoice input[type="radio"],
.vv-gf-wrapper .gchoice input[type="checkbox"],
.gform_wrapper .gchoice input[type="radio"],
.gform_wrapper .gchoice input[type="checkbox"] {
	position: absolute !important;
	width: 1px !important; height: 1px !important;
	padding: 0 !important; margin: -1px !important;
	overflow: hidden !important; clip: rect(0,0,0,0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important; border: 0 !important;
	opacity: 0 !important; pointer-events: none !important;
	appearance: none !important; -webkit-appearance: none !important;
	background: none !important;
	background-image: none !important;
	box-shadow: none !important;
	outline: none !important;
}
/* Kill any Orbital/Foundation pseudo-elements they layer on top of the input. */
.vv-gf-wrapper .gchoice input[type="radio"]::before,
.vv-gf-wrapper .gchoice input[type="radio"]::after,
.vv-gf-wrapper .gchoice input[type="checkbox"]::before,
.vv-gf-wrapper .gchoice input[type="checkbox"]::after {
	display: none !important;
	content: none !important;
}
.vv-gf-wrapper .gfield_radio label,
.vv-gf-wrapper .gfield_checkbox label,
.gform_wrapper .gfield_radio label,
.gform_wrapper .gfield_checkbox label {
	display: flex !important;
	align-items: center; gap: 10px;
	padding: 13px 16px !important;
	margin: 0 !important;
	border: 1px solid var(--vv-border) !important;
	background: var(--vv-white) !important;
	border-radius: var(--vv-radius) !important;
	font-size: .8125rem; font-weight: 500; color: var(--vv-muted);
	cursor: pointer; user-select: none;
	width: 100%;
	box-sizing: border-box;
	transition: border-color .12s, background .12s, color .12s;
}
.vv-gf-wrapper .gfield_radio label::before,
.vv-gf-wrapper .gfield_checkbox label::before {
	content: "";
	width: 16px; height: 16px;
	border: 2px solid var(--vv-border);
	display: inline-flex; flex-shrink: 0;
	transition: border-color .12s, background .12s;
}
.vv-gf-wrapper .gfield_radio label::before    { border-radius: 99px; }
.vv-gf-wrapper .gfield_checkbox label::before { border-radius: 3px; }
/* Hover — subtle navy border tint */
.vv-gf-wrapper .gfield_radio label:hover,
.vv-gf-wrapper .gfield_checkbox label:hover,
.gform_wrapper .gfield_radio label:hover,
.gform_wrapper .gfield_checkbox label:hover {
	border-color: var(--vv-navy) !important;
	color: var(--vv-navy);
}
.vv-gf-wrapper .gfield_radio label:hover::before,
.vv-gf-wrapper .gfield_checkbox label:hover::before,
.gform_wrapper .gfield_radio label:hover::before,
.gform_wrapper .gfield_checkbox label:hover::before {
	border-color: var(--vv-navy);
}
.vv-gf-wrapper .gfield_radio input:checked + label,
.vv-gf-wrapper .gfield_checkbox input:checked + label {
	border-color: var(--vv-navy);
	background: var(--vv-beige);
	color: var(--vv-navy); font-weight: 600;
}
.vv-gf-wrapper .gfield_radio input:checked + label::before {
	border-color: var(--vv-navy);
	background: radial-gradient(circle, var(--vv-navy) 40%, transparent 45%);
}
.vv-gf-wrapper .gfield_checkbox input:checked + label::before {
	border-color: var(--vv-navy);
	background: var(--vv-navy);
	box-shadow: inset 0 0 0 3px var(--vv-navy);
}
.vv-gf-wrapper .gfield_radio input:focus-visible + label,
.vv-gf-wrapper .gfield_checkbox input:focus-visible + label {
	outline: 2px solid var(--vv-gold);
	outline-offset: 2px;
}

/* ─────── Field description / help text ───────
   Inline descriptions are surfaced in the side info-panel by JS.
   We hide them in the form column. */
.vv-gf-wrapper .gfield_description {
	display: none !important;
}
.vv-gf-wrapper .gfield { display: flex; flex-direction: column; }

/* Side info-panel (.vv-info-panel) — populated by main.js on focus.
   Matches the form card (white bg, same radius/shadow) with a left arrow
   that hugs the active field. JS sets transform: translateY(...) so the
   panel's top aligns with the focused field. */
.vv-konfigurator__aside { position: relative; }
.vv-info-panel {
	position: relative;
	background: #ffffff;
	border: 1px solid var(--vv-border);
	border-radius: var(--vv-radius-lg);
	padding: 22px 22px 24px;
	box-shadow: 0 1px 2px rgba(15, 30, 61, .04), 0 8px 24px -12px rgba(15, 30, 61, .08);
	transition: transform .25s cubic-bezier(.22, .61, .36, 1);
	--vv-info-arrow-y: 28px;
}
/* Arrow on the LEFT pointing at the form column. */
.vv-info-panel::before {
	content: "";
	position: absolute;
	left: -8px;
	top: var(--vv-info-arrow-y);
	width: 14px; height: 14px;
	background: #ffffff;
	border-left: 1px solid var(--vv-border);
	border-bottom: 1px solid var(--vv-border);
	transform: rotate(45deg);
	border-bottom-left-radius: 3px;
}
.vv-info-panel__eyebrow {
	font-family: var(--vv-font-body);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--vv-gold);
	margin: 0 0 10px;
}
.vv-info-panel__title {
	font-family: var(--vv-font-display);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--vv-navy);
	margin: 0 0 10px;
	line-height: 1.35;
	letter-spacing: -.005em;
}
.vv-info-panel__body {
	font-size: .8125rem;
	color: var(--vv-muted);
	line-height: 1.6;
}
.vv-info-panel__body p { margin: 0 0 .75em; }
.vv-info-panel.vv-info-panel--hidden {
	opacity: 0;
	pointer-events: none;
	transition: opacity .18s ease, transform .25s cubic-bezier(.22, .61, .36, 1);
}

/* ─────── Page footer buttons — brand colors with high specificity ─────── */
.vv-gf-wrapper .gform_page_footer .gform_next_button,
.vv-gf-wrapper .gform_page_footer .gform_button[type="submit"],
.vv-gf-wrapper .gform_footer .gform_button[type="submit"],
.vv-gf-wrapper button.gform_next_button,
.vv-gf-wrapper input.gform_next_button,
.vv-gf-wrapper button.gform_button[type="submit"],
.vv-gf-wrapper input.gform_button[type="submit"] {
	background: var(--vv-navy) !important;
	color: var(--vv-paper) !important;
	border: 1px solid var(--vv-navy) !important;
	box-shadow: none !important;
	text-shadow: none !important;
}
.vv-gf-wrapper .gform_page_footer .gform_next_button:hover,
.vv-gf-wrapper .gform_page_footer .gform_button[type="submit"]:hover,
.vv-gf-wrapper .gform_footer .gform_button[type="submit"]:hover,
.vv-gf-wrapper button.gform_next_button:hover,
.vv-gf-wrapper button.gform_button[type="submit"]:hover {
	background: var(--vv-navy-light) !important;
	border-color: var(--vv-navy-light) !important;
}
.vv-gf-wrapper .gform_page_footer .gform_previous_button,
.vv-gf-wrapper button.gform_previous_button,
.vv-gf-wrapper input.gform_previous_button {
	background: transparent !important;
	color: var(--vv-navy) !important;
	border: 1px solid var(--vv-border) !important;
	box-shadow: none !important;
}
.vv-gf-wrapper .gform_page_footer .gform_previous_button:hover,
.vv-gf-wrapper button.gform_previous_button:hover {
	background: var(--vv-beige) !important;
	border-color: var(--vv-navy) !important;
}

/* Validation */
.vv-gf-wrapper .gfield_error .gfield_label { color: var(--vv-error); }
.vv-gf-wrapper .gfield_error .ginput_container input,
.vv-gf-wrapper .gfield_error .ginput_container select,
.vv-gf-wrapper .gfield_error .ginput_container textarea {
	border-color: var(--vv-error);
	box-shadow: 0 0 0 3px rgba(179, 38, 30, .1);
}
.vv-gf-wrapper .gfield_validation_message,
.vv-gf-wrapper .validation_message {
	font-size: .75rem; color: var(--vv-error);
	margin-top: 6px;
}
.vv-gf-wrapper .gform_validation_errors {
	background: #fdf2f2; border-left: 3px solid var(--vv-error);
	border-radius: var(--vv-radius);
	padding: 14px 18px; margin-bottom: 24px;
	font-size: .8125rem; color: var(--vv-error);
}
.vv-gf-wrapper .gform_validation_errors h2 {
	font-size: .875rem; color: var(--vv-error);
	margin: 0 !important; font-family: var(--vv-font-body);
	text-transform: none; letter-spacing: 0;
}

/* Conditional reveal accent — opt-in via GF field CSS class .vv-conditional */
.vv-gf-wrapper .gfield.vv-conditional {
	background: var(--vv-beige);
	border-left: 3px solid var(--vv-gold);
	border-radius: var(--vv-radius);
	padding: 16px 20px;
}
.vv-gf-wrapper .gfield.vv-conditional .gfield_label::before {
	content: "↳ ";
	color: var(--vv-gold);
	margin-right: 4px;
}

/* HTML field — let admins drop callouts via CSS class .vv-callout */
.vv-gf-wrapper .gfield--type-html.vv-callout {
	background: var(--vv-beige);
	border-left: 3px solid var(--vv-gold);
	border-radius: var(--vv-radius);
	padding: 16px 20px;
}

/* ─────── Page footer (next / prev / submit) ─────── */
.vv-gf-wrapper .gform_page_footer,
.vv-gf-wrapper .gform_footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 28px;
	padding: 0;
	border: 0;
	gap: 12px;
	flex-wrap: wrap;
}

.vv-gf-wrapper .gform_previous_button,
.vv-gf-wrapper .gform_next_button,
.vv-gf-wrapper .gform_button,
.vv-gf-wrapper .gform_save_link {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 13px 24px;
	border-radius: var(--vv-radius);
	font: 600 .875rem/1 var(--vv-font-body);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s, color .15s, border-color .15s;
}

/* Primary — next & submit */
.vv-gf-wrapper .gform_next_button,
.vv-gf-wrapper .gform_button[type="submit"] {
	background: var(--vv-navy); color: var(--vv-paper); border-color: var(--vv-navy);
}
.vv-gf-wrapper .gform_next_button:hover,
.vv-gf-wrapper .gform_button[type="submit"]:hover {
	background: var(--vv-navy-light); border-color: var(--vv-navy-light);
}

/* Secondary — previous & save & continue */
.vv-gf-wrapper .gform_previous_button,
.vv-gf-wrapper .gform_save_link {
	background: transparent; color: var(--vv-navy); border-color: var(--vv-border);
}
.vv-gf-wrapper .gform_previous_button:hover,
.vv-gf-wrapper .gform_save_link:hover {
	background: var(--vv-beige); border-color: var(--vv-navy);
}

/* Push prev to the left, next/submit + save to the right */
.vv-gf-wrapper .gform_page_footer .gform_previous_button { margin-right: auto; }
.vv-gf-wrapper .gform_page_footer .gform_save_link       { margin-left: auto; }

/* Spinner — absolutely positioned so it doesn't shift the next/submit button */
.vv-gf-wrapper .gform_page_footer,
.vv-gf-wrapper .gform_footer { position: relative; }
.vv-gf-wrapper .gform_ajax_spinner {
	position: absolute !important;
	right: -32px; top: 50%;
	transform: translateY(-50%);
	margin: 0 !important;
	width: 18px; height: 18px;
	border: 2px solid var(--vv-border);
	border-top-color: var(--vv-gold);
	border-radius: 99px;
	animation: vv-spin .8s linear infinite;
}
@keyframes vv-spin { to { transform: rotate(360deg); } }

/* Confirmation */
.vv-gf-wrapper .gform_confirmation_wrapper {
	background: var(--vv-beige);
	border: 1px solid var(--vv-border);
	border-left: 3px solid var(--vv-success);
	border-radius: var(--vv-radius-lg);
	padding: 32px 36px;
	text-align: center;
}
.vv-gf-wrapper .gform_confirmation_message {
	font-size: 1.0625rem; color: var(--vv-navy);
	font-family: var(--vv-font-display);
}

/* Honeypot & GF system fields stay hidden */
.vv-gf-wrapper .gform_validation_container,
.vv-gf-wrapper .gfield_visibility_hidden { display: none !important; }

/* ─────── Reduced motion ─────── */
@media (prefers-reduced-motion: reduce) {
	.vv-gf-wrapper .gform_ajax_spinner { animation: none; }
}

/* ─────── Mobile ─────── */
@media (max-width: 600px) {
	.vv-gf-wrapper .gform_wrapper { padding: 22px 20px; }
	.vv-gf-wrapper .gform_fields > .gfield.gfield--width-half,
	.vv-gf-wrapper .gform_fields > .gfield.gfield--width-third { grid-column: 1 / -1; }
	/* On narrow screens, always stack choices regardless of count. */
	.vv-gf-wrapper .gfield_radio,
	.vv-gf-wrapper .gfield_checkbox,
	.gform_wrapper .gfield_radio,
	.gform_wrapper .gfield_checkbox {
		grid-template-columns: 1fr !important;
	}
	.vv-gf-wrapper .gfield_radio .gchoice,
	.vv-gf-wrapper .gfield_checkbox .gchoice,
	.gform_wrapper .gfield_radio .gchoice,
	.gform_wrapper .gfield_checkbox .gchoice {
		width: 100% !important;
		grid-column: 1 / -1 !important;
	}
	.vv-gf-wrapper .gfield_radio label,
	.vv-gf-wrapper .gfield_checkbox label,
	.gform_wrapper .gfield_radio label,
	.gform_wrapper .gfield_checkbox label {
		width: 100% !important;
	}
	.vv-gf-wrapper .gform_page_footer,
	.vv-gf-wrapper .gform_footer {
		flex-direction: column-reverse; align-items: stretch;
	}
	.vv-gf-wrapper .gform_previous_button,
	.vv-gf-wrapper .gform_next_button,
	.vv-gf-wrapper .gform_button,
	.vv-gf-wrapper .gform_save_link { width: 100%; margin: 0; }
	.vv-stepper { overflow-x: auto; padding-bottom: 8px; }
	.vv-stepper__label { display: none; }
}