/*
 * BriteGhost scoped components. Every selector starts with a .bg-* class so nothing
 * outside BriteGhost-marked modules is affected (no bare h1/section/.button rules).
 */

/* Ghostlight emphasis span, e.g. the homepage H1 phrase "shouldn't either." */
.bg-ghostlight {
	color: var(--bg-ghostlight);
}

/* ---------- Focus colour by surface ----------
   Ghostlight on dark surfaces (default); Teal on Light on light surfaces. Add the class to a
   light Section/Row/module (or carry it in a light preset); .bg-on-dark restores Ghostlight
   for a dark block nested inside a light one. */
.bg-on-light {
	--bg-focus-color: var(--bg-teal-on-light);
}
.bg-on-dark {
	--bg-focus-color: var(--bg-ghostlight);
}

/* BG button presets (BG Primary, Secondary, Text Link) carry the class "bg-btn". */
.bg-btn:focus-visible,
.bg-btn .et_pb_button:focus-visible {
	outline: var(--bg-focus-width) solid var(--bg-focus-color);
	outline-offset: var(--bg-focus-offset);
}

/* ---------- BG button arrow (prototype .cta .arr / .text-link span) ----------
   The presets draw Divi's own "Arrow Up Right" icon (editable in the builder). Divi places it
   0.3em after the label with !important rules and has no size or gap setting, so this block
   only restores the prototype spacing: 24px gap on buttons, 12px on text links, in normal
   flow so the button's native padding sits after the arrow. Sizes match the measured ink box
   of the prototype arrow: Arial 24px ↗ = 14×12px → ETmodules 16px; text link 10×8px → 12px. */
body #page-container .et_pb_section .et_pb_button.bg-btn::after,
body #page-container .et_pb_section .et_pb_button.bg-btn:hover::after {
	position: static !important;
	display: inline-block !important;
	vertical-align: top;
	transform: none !important; /* Divi's translateY(-50%) is for its absolute icon; in flow it would lift the arrow 11px */
	margin-left: 24px !important;
	font-size: 16px !important;
	line-height: 22px !important; /* = the label line, so the 54px height is unchanged */
	opacity: 1 !important;
}
body #page-container .et_pb_section .et_pb_button.bg-text-link::after,
body #page-container .et_pb_section .et_pb_button.bg-text-link:hover::after {
	margin-left: 12px !important;
	font-size: 12px !important;
	line-height: 19px !important; /* = the text-link line */
}
/* Phone: full-width buttons put the arrow at the far edge (prototype hero/invitation CTAs). */
@media (max-width: 767px) {
	body #page-container .et_pb_section .et_pb_button.bg-btn:not(.bg-text-link) {
		text-align: left;
	}
	body #page-container .et_pb_section .et_pb_button.bg-btn:not(.bg-text-link)::after,
	body #page-container .et_pb_section .et_pb_button.bg-btn:not(.bg-text-link):hover::after {
		position: absolute !important;
		top: 50% !important;
		right: 24px;
		margin: 0 !important;
		transform: translateY(-50%) !important;
	}
}

/* ---------- Reveal Tabs (Divi Tabs module with CSS class "bg-tabs") ----------
   Fonts and colours (pills #B8D0D2 on a transparent tab; selected Ghostlight fill with
   Obsidian text, 12.3:1) come from the native "BG Reveal Tabs" preset. This block adds only
   the approved pill geometry that Divi has no native setting for (prototype .mode-pills). */
.bg-tabs .et_pb_tabs_controls {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 3px;
	margin: 0;
	padding: 4px !important; /* Divi's base CSS sets .et_pb_tabs_controls { padding: 0 !important } */
	list-style: none;
	background-color: var(--bg-tabs-track);
	border: 1px solid var(--bg-tabs-track-border);
	border-radius: 5px;
}
.bg-tabs .et_pb_tabs_controls li {
	float: none;
	margin: 0;
	border: 0;
	border-radius: 3px;
	/* D2: Divi's tabs script writes an inline height (43.8px, measured before our fonts apply)
	   on every tab to equalise them, which made the 36px pills 44px tall. */
	height: auto !important;
	align-self: flex-start;
}
.bg-tabs .et_pb_tabs_controls li a {
	display: block;
	padding: 10px 16px;
	border-radius: 3px;
	text-align: center;
}
@media (max-width: 640px) {
	.bg-tabs .et_pb_tabs_controls {
		display: flex;
		width: 100%;
	}
	.bg-tabs .et_pb_tabs_controls li {
		flex: 1 1 0;
	}
	.bg-tabs .et_pb_tabs_controls li a {
		padding: 12px 10px;
	}
}

/* Reduced motion: Divi cross-fades tab panels with jQuery (inline opacity steps). Pinning the
   opacity removes the fade for visitors who ask for less motion; Divi still switches the
   panels (one at a time), so behaviour and keyboard support are unchanged. CSS only. */
@media (prefers-reduced-motion: reduce) {
	.bg-tabs .et_pb_all_tabs > .et_pb_tab {
		opacity: 1 !important;
	}
}

/* Tab focus: the pill track is always dark, so the ring stays Ghostlight on any section. */
.bg-tabs .et_pb_tabs_controls [role="tab"]:focus-visible {
	outline: var(--bg-focus-width) solid var(--bg-ghostlight);
	outline-offset: 2px;
}
.bg-tabs .et_pb_tab[role="tabpanel"]:focus-visible {
	outline: var(--bg-focus-width) solid var(--bg-focus-color);
	outline-offset: var(--bg-focus-offset);
}

/* ---------- Visible / Invisible reveal (Row with class "bg-reveal") ----------
   Prototype .reveal-stage. The row, columns, borders, stage colour, fonts and all copy stay
   native Divi settings (Tabs module with the BG Reveal Tabs preset + note Groups). This block
   adds only what Divi Tabs cannot express: the bordered 320px "screen", one background per
   view, the 2x2 structure rows, the accent line, and (with JavaScript) the tab pills beside
   the label with one explanatory note at a time. Columns are addressed by position:
   column 1 = label + Tabs, column 2 = kicker + notes. */

/* Views — styled with or without JavaScript. */
.bg-reveal .et_pb_all_tabs {
	border: 1px solid var(--bg-reveal-line);
}
.bg-reveal .et_pb_all_tabs > .et_pb_tab {
	min-height: 318px; /* prototype screen: 320px including its 1px border */
	margin: 0 !important; /* Divi adds a 30px module bottom margin below desktop */
}
.bg-reveal .et_pb_all_tabs > .et_pb_tab:nth-child(1) {
	background: var(--bg-reveal-visible-bg);
}
.bg-reveal .et_pb_all_tabs > .et_pb_tab:nth-child(2) {
	background: var(--bg-reveal-invisible-bg);
}
body #page-container .bg-reveal .et_pb_tab .et_pb_tab_content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 25px;
	/* Centre the view in the screen: 318px minus the view padding set on the Tabs module
	   (38px desktop / 23px phone, prototype .view). */
	min-height: calc(318px - 76px);
}
body #page-container .bg-reveal .et_pb_tab .et_pb_tab_content > * {
	margin: 0;
	padding-bottom: 0;
}
/* Visible view: the statement (blockquote; size and colour from the Tabs module) with the
   110 x 4px Ghostlight accent line below it (prototype .big-line + .accent-line). */
body #page-container .bg-reveal .et_pb_tab blockquote {
	max-width: 450px;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}
body #page-container .bg-reveal .et_pb_tab blockquote p {
	padding: 0;
}
body #page-container .bg-reveal .et_pb_tab blockquote::after {
	content: "";
	display: block;
	width: 110px;
	height: 4px;
	margin-top: 25px;
	background: var(--bg-ghostlight);
}
/* Invisible view: a bold paragraph is the small Ghostlight header; the list is the 2x2 grid
   of bordered structure rows (prototype .sys-header / .sys-rows). */
body #page-container .bg-reveal .et_pb_tab p > strong:only-child {
	display: block;
	font-family: var(--bg-font-body);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bg-ghostlight);
}
body #page-container .bg-reveal .et_pb_tab ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin: 0;
	padding: 0 !important;
	list-style: none;
}
body #page-container .bg-reveal .et_pb_tab ul > li {
	margin: 0;
	padding: 12px;
	border: 1px solid var(--bg-reveal-row-line);
	border-radius: 3px;
	list-style: none;
}

/* Without JavaScript: show both views, stacked, and both notes, so no content is hidden. */
.bg-reveal:not(.is-enhanced) .et_pb_all_tabs > .et_pb_tab {
	display: block !important;
	opacity: 1 !important;
}
.bg-reveal:not(.is-enhanced) .bg-reveal-note + .bg-reveal-note {
	margin-top: 30px;
}

/* With JavaScript: label and pills share the top line, the screen sits 30px below. */
.bg-reveal.is-enhanced > .et_pb_column:first-child {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 15px;
	row-gap: 0;
}
.bg-reveal.is-enhanced > .et_pb_column:first-child > .et_pb_tabs {
	display: contents; /* lets the controls and the screen join the column grid */
}
.bg-reveal.is-enhanced > .et_pb_column:first-child > .et_pb_text {
	grid-area: 1 / 1;
}
.bg-reveal.is-enhanced .et_pb_tabs_controls {
	grid-area: 1 / 2;
	justify-self: end;
}
.bg-reveal.is-enhanced .et_pb_all_tabs {
	grid-area: 2 / 1 / 3 / 3;
	margin-top: 30px;
}
.bg-reveal-note[hidden] {
	display: none !important; /* Divi Groups are display:flex, which would beat [hidden] */
}

@media (max-width: 767px) {
	body #page-container .bg-reveal .et_pb_tab .et_pb_tab_content {
		min-height: calc(288px - 46px); /* prototype phone screen 290px; view padding 23px */
	}
	.bg-reveal .et_pb_all_tabs > .et_pb_tab {
		min-height: 288px;
	}
	body #page-container .bg-reveal .et_pb_tab ul {
		gap: 7px;
	}
	body #page-container .bg-reveal .et_pb_tab ul > li {
		padding: 8px;
	}
}
@media (max-width: 640px) {
	/* Prototype .reveal-top wraps: label, then a full-width pill track, then the screen. */
	.bg-reveal.is-enhanced > .et_pb_column:first-child {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 15px;
	}
	.bg-reveal.is-enhanced .et_pb_tabs_controls {
		grid-area: 2 / 1;
		justify-self: stretch;
	}
	.bg-reveal.is-enhanced .et_pb_all_tabs {
		grid-area: 3 / 1;
		margin-top: 5px;
	}
}

/* ---------- Before/after compare ([bg_compare] shortcode) ---------- */
.bg-compare {
	margin: 0;
	font-family: var(--bg-font-body);
}
.bg-compare__img {
	display: block;
	width: 100%;
	height: auto;
}
.bg-compare__pane {
	position: relative;
}
.bg-compare__tag {
	position: absolute;
	top: 12px;
	padding: 4px 10px;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bg-soft-white);
	background: rgba(5, 13, 16, 0.82);
}
.bg-compare__pane--before .bg-compare__tag { left: 12px; }
.bg-compare__pane--after .bg-compare__tag { right: 12px; }
.bg-compare__caption {
	margin-top: 12px;
	font-size: 0.875rem;
	color: var(--bg-muted-slate); /* dark surfaces: 10.39:1 on Obsidian */
}
/* Light surfaces: Muted Slate fails contrast on Soft White (axe, 0.1.3 harness); use Slate on Light. */
.bg-on-light .bg-compare__caption {
	color: var(--bg-slate-on-light);
}

/* No-JS fallback: both images, side by side (stacked on narrow screens), no slider. */
.bg-compare:not(.is-enhanced) .bg-compare__stage {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.bg-compare:not(.is-enhanced) .bg-compare__control,
.bg-compare:not(.is-enhanced) .bg-compare__handle {
	display: none;
}
@media (max-width: 767px) {
	.bg-compare:not(.is-enhanced) .bg-compare__stage {
		grid-template-columns: 1fr;
	}
}

/* Enhanced: after image overlaid on before, revealed from the right edge. */
.bg-compare.is-enhanced .bg-compare__stage {
	--bg-pos: 50%;
	position: relative;
	overflow: hidden;
	touch-action: pan-y; /* vertical page scroll still works on touch */
	cursor: ew-resize;
	user-select: none;
}
.bg-compare.is-enhanced .bg-compare__img {
	-webkit-user-drag: none; /* native image drag would cancel the pointer */
}
.bg-compare.is-enhanced .bg-compare__pane--after {
	position: absolute;
	inset: 0;
	clip-path: inset(0 0 0 var(--bg-pos));
}
.bg-compare.is-enhanced .bg-compare__pane--after .bg-compare__img {
	height: 100%;
	object-fit: cover;
}
.bg-compare.is-enhanced .bg-compare__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--bg-pos);
	width: 2px;
	margin-left: -1px;
	background: var(--bg-ghostlight);
	pointer-events: none;
}
.bg-compare.is-enhanced .bg-compare__handle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 36px;
	height: 36px;
	transform: translate(-50%, -50%);
	border: 2px solid var(--bg-ghostlight);
	border-radius: 50%;
	background: var(--bg-obsidian);
}
.bg-compare__control {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin-top: 12px;
}
.bg-compare__label {
	font-size: 0.875rem;
	color: inherit;
}
.bg-compare__range {
	flex: 1 1 200px;
	min-height: 44px; /* touch target */
	accent-color: var(--bg-ghostlight);
	/* Divi sets input { appearance: none }, which leaves a white field instead of a slider. */
	-webkit-appearance: auto;
	appearance: auto;
	background: transparent;
}
.bg-compare__range:focus-visible {
	outline: var(--bg-focus-width) solid var(--bg-focus-color);
	outline-offset: var(--bg-focus-offset);
}
.bg-compare-error {
	padding: 8px 12px;
	border: 1px dashed currentColor;
}

@media (prefers-reduced-motion: no-preference) {
	.bg-compare.is-enhanced.is-stepping .bg-compare__pane--after {
		transition: clip-path 160ms var(--bg-ease);
	}
	.bg-compare.is-enhanced.is-stepping .bg-compare__handle {
		transition: left 160ms var(--bg-ease);
	}
}

/* ── Theme Builder header and footer (0.1.5, Phase E) ──────────────────────────
   Scope: .et-l--header / .et-l--footer only. Classes set on the native modules:
   bg-site-header (header Section), bg-nav-desktop / bg-nav-mobile (Menu modules),
   bg-nav-cta (Button). Pairs with assets/js/bg-header-nav.js (toggle keyboard/ARIA).
   Values from the approved prototype (.site-header, .topnav, .burger, .mobile-menu). */

/* Divi removes link outlines; restore the BG focus ring in header and footer layouts. */
.et-l--header .et_pb_menu .mobile_menu_bar:focus-visible,
.et-l--header a:focus-visible,
.et-l--footer a:focus-visible {
	outline: var(--bg-focus-width) solid var(--bg-focus-color);
	outline-offset: 4px;
	border-radius: 4px;
}

/* Desktop nav: 38px between links and before the CTA (Divi: 22px and a -11px list margin), Ghostlight hover. */
.et-l--header .bg-nav-desktop .et-menu {
	margin-left: 0;
	margin-right: 0;
}
.et-l--header .bg-nav-desktop .et-menu > li {
	padding-left: 19px;
	padding-right: 19px;
}
.et-l--header .bg-nav-desktop .et-menu > li:first-child { padding-left: 0; }
.et-l--header .bg-nav-desktop .et-menu > li:last-child { padding-right: 0; }
.et-l--header .bg-nav-desktop .et-menu > li > a { padding-bottom: 0; }
.et-l--header .bg-nav-desktop .et-menu > li > a:hover {
	opacity: 1;
	color: var(--bg-ghostlight) !important;
}

/* 641–980px: the prototype keeps the full navigation; the burger is used only at ≤640px.
   Divi hides these modules at its own 980/767px breakpoints, so they are shown again here. */
@media (min-width: 641px) and (max-width: 980px) {
	.et-l--header .et_pb_menu.bg-nav-desktop { display: flex !important; }
	.et-l--header .bg-nav-desktop .et_pb_menu__menu { display: flex !important; }
	.et-l--header .bg-nav-desktop .et_mobile_nav_menu { display: none !important; }
	.et-l--header a.et_pb_button.bg-nav-cta { display: inline-block !important; }
	.et-l--header .et_pb_menu.bg-nav-mobile { display: none !important; }
}
/* 851–1170px prototype frame: 36px side gutters, 118px header height. */
@media (min-width: 851px) and (max-width: 1170px) {
	.et-l--header .bg-site-header { padding-left: 36px !important; padding-right: 36px !important; }
	.et-l--header .bg-site-header .et_pb_row { min-height: 118px !important; }
	.et-l--header .bg-site-header .et_pb_column { column-gap: 38px !important; }
}
/* ≤850px prototype sizing (logo 145px, 23px link gap, 12px type, 45px CTA). */
@media (min-width: 641px) and (max-width: 850px) {
	.et-l--header .bg-site-header { padding-left: 24px !important; padding-right: 24px !important; }
	.et-l--header .bg-site-header .et_pb_row { min-height: 98px !important; }
	.et-l--header .bg-site-header .et_pb_image { width: 145px !important; max-width: 145px !important; min-width: 145px !important; }
	.et-l--header .bg-site-header .et_pb_column { column-gap: 23px !important; }
	.et-l--header .bg-nav-desktop .et-menu > li { padding-left: 11.5px; padding-right: 11.5px; }
	.et-l--header .bg-nav-desktop .et-menu > li:first-child { padding-left: 0; }
	.et-l--header .bg-nav-desktop .et-menu > li:last-child { padding-right: 0; }
	.et-l--header .bg-nav-desktop .et-menu > li > a { font-size: 12px !important; }
	body #page-container .et-l--header .et_pb_section a.et_pb_button.bg-nav-cta {
		min-height: 0 !important;
		height: auto !important;
		padding: 11.5px 12px !important;
		font-size: 12px !important;
		text-align: left;
	}
	/* Keep the arrow beside the label (the ≤767px rule above places it at the far edge of full-width buttons). */
	body #page-container .et-l--header .et_pb_section a.et_pb_button.bg-nav-cta::after,
	body #page-container .et-l--header .et_pb_section a.et_pb_button.bg-nav-cta:hover::after {
		position: static !important;
		transform: none !important;
		margin: 0 0 0 24px !important;
	}
}

/* ≤640px: 46px bordered menu button and a full-width panel under the header. */
@media (max-width: 640px) {
	.et-l--header .bg-site-header { position: relative; z-index: 20; }
	.et-l--header .bg-site-header .et_pb_row,
	.et-l--header .bg-site-header .et_pb_column,
	.et-l--header .et_pb_menu.bg-nav-mobile,
	.et-l--header .bg-nav-mobile .et_pb_menu_inner_container,
	.et-l--header .bg-nav-mobile .et_pb_menu__wrap,
	.et-l--header .bg-nav-mobile .et_mobile_nav_menu,
	.et-l--header .bg-nav-mobile .mobile_nav {
		position: static;
	}
	.et-l--header .bg-nav-mobile .et_mobile_nav_menu { margin: 0; }
	.et-l--header .bg-nav-mobile .mobile_menu_bar {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
		padding: 0;
		border: 1px solid #355158;
		border-radius: 4px;
	}
	.et-l--header .bg-nav-mobile .mobile_menu_bar::before {
		position: static;
		font-size: 26px !important;
		line-height: 1;
	}
	.et-l--header .bg-nav-mobile .et_mobile_menu {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: auto;
		margin: 0;
		padding: 18px 20px 26px;
		border-top: 1px solid #2D555A;
		border-bottom: 1px solid #2D555A;
		background: #0D2026;
		box-shadow: none;
	}
	.et-l--header .bg-nav-mobile .et_mobile_menu li a {
		display: flex;
		align-items: center;
		min-height: 50px;
		padding: 0;
		border-bottom: 1px solid #315056;
		font-family: 'Space Grotesk', Arial, sans-serif;
		font-weight: 600;
		font-size: 17px;
		color: var(--bg-soft-white);
	}
	/* Last item = "Start a Project": the prototype's Ghostlight CTA block. */
	.et-l--header .bg-nav-mobile .et_mobile_menu li:last-child a {
		justify-content: center;
		min-height: 51px;
		margin-top: 10px;
		border: 0;
		background: var(--bg-ghostlight);
		color: var(--bg-obsidian) !important;
	}
}

/* ---------- Portfolio filter (0.1.6; Group .bg-filter, items .bg-filter-item) ----------
   Pill size, fonts and colours are native Button settings. This block adds only the pressed
   state (prototype .filter[aria-pressed=true]), the focus ring and hiding filtered items. */
.bg-filter-item[hidden] {
	display: none !important; /* Divi rows, columns and groups are display:flex/grid */
}
body #page-container .bg-filter .et_pb_button[aria-pressed="true"],
body #page-container .bg-filter .et_pb_button[aria-pressed="true"]:hover {
	background-color: var(--bg-deep-surface) !important;
	border-color: var(--bg-deep-surface) !important;
	color: var(--bg-soft-white) !important;
}
.bg-filter .et_pb_button:focus-visible {
	outline: var(--bg-focus-width) solid var(--bg-focus-color);
	outline-offset: 3px;
}

/* ---------- Project inquiry form (0.1.6; [bg_inquiry] shortcode) ----------
   Prototype .form-panel internals. The panel (Soft White card, Ghostlight top rule, offset
   shadow), heading and intro are native Divi modules around the shortcode. */
.bg-inquiry {
	--bg-inq-ink: #142E34;
	--bg-inq-line: #B7C9C7;
	--bg-inq-teal: #087F76;
	font-family: var(--bg-font-body);
	color: var(--bg-inq-ink);
}
.bg-inquiry form { margin: 0; }
.bg-inquiry fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.bg-inquiry legend {
	margin: 0 0 13px;
	padding: 0;
	font: 700 14px/1.4 var(--bg-font-display);
	letter-spacing: -0.02em;
	color: var(--bg-inq-ink);
}
.bg-inquiry__choice-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 9px;
}
.bg-inquiry__choice {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 55px;
	padding: 11px 13px;
	border: 1px solid #C2D1CF;
	border-radius: 4px;
	background: #fff;
	color: #203E43;
	font: 600 13px/1.3 var(--bg-font-display);
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s;
}
.bg-inquiry__choice:hover { border-color: #4A9990; }
.bg-inquiry__choice input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	margin: 0;
}
.bg-inquiry__dot {
	flex: none;
	width: 17px;
	height: 17px;
	border: 1.5px solid #849D9B;
	border-radius: 50%;
}
.bg-inquiry__choice:has(input:checked) {
	background: #D9F6F0;
	border-color: #0E8980;
}
.bg-inquiry__choice:has(input:checked) .bg-inquiry__dot {
	border-color: #127970;
	background: #127970;
	box-shadow: inset 0 0 0 4px #D9F6F0;
}
.bg-inquiry__choice:has(input:focus-visible) {
	outline: var(--bg-focus-width) solid var(--bg-teal-on-light);
	outline-offset: 3px;
}
.bg-inquiry__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 15px;
	margin-top: 24px;
}
.bg-inquiry__field {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.bg-inquiry__field--full { grid-column: 1 / -1; }
.bg-inquiry__field label {
	margin-bottom: 8px;
	font: 700 12px/1.4 var(--bg-font-body);
	color: #2B4B4F;
}
.bg-inquiry__req { color: var(--bg-inq-teal); }
body #page-container .bg-inquiry input[type="text"],
body #page-container .bg-inquiry input[type="email"],
body #page-container .bg-inquiry textarea {
	display: block;
	width: 100%;
	min-height: 49px;
	margin: 0;
	padding: 12px 13px;
	border: 1px solid var(--bg-inq-line);
	border-radius: 4px;
	background: #fff;
	color: #173337;
	font: 400 14px/1.35 var(--bg-font-body);
	box-shadow: none;
}
body #page-container .bg-inquiry textarea {
	min-height: 100px;
	resize: vertical;
}
.bg-inquiry input::placeholder,
.bg-inquiry textarea::placeholder {
	color: #6E8689; /* 4.6:1 on white */
	opacity: 1;
}
body #page-container .bg-inquiry input:focus,
body #page-container .bg-inquiry textarea:focus {
	border-color: #08877C;
	outline: var(--bg-focus-width) solid var(--bg-teal-on-light);
	outline-offset: 1px;
}
body #page-container .bg-inquiry [aria-invalid="true"] {
	border-color: #9B4136;
}
.bg-inquiry__help {
	margin: 6px 0 0;
	padding: 0;
	font-size: 11px;
	line-height: 1.5;
	color: #5F777B;
}
.bg-inquiry__error {
	margin: 6px 0 0;
	padding: 0;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.45;
	color: #9B4136; /* 6.4:1 on white */
}
.bg-inquiry__error[hidden],
.bg-inquiry__summary[hidden] { display: none; }
.bg-inquiry__summary {
	margin: 0 0 22px;
	padding: 14px 16px;
	border: 1px solid #C98E85;
	border-left: 4px solid #9B4136;
	border-radius: 4px;
	background: #FBF1EF;
	font-size: 13px;
	line-height: 1.5;
	color: #5A2A23;
}
.bg-inquiry__summary:focus-visible {
	outline: var(--bg-focus-width) solid var(--bg-teal-on-light);
	outline-offset: 3px;
}
.bg-inquiry__summary-title {
	margin: 0 0 6px;
	padding: 0;
	font-weight: 700;
}
.bg-inquiry__summary ul {
	margin: 0;
	padding: 0 0 0 18px !important;
	list-style: disc;
}
.bg-inquiry__summary a {
	color: #7E2F25;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.bg-inquiry__bottom {
	margin-top: 25px;
	padding-top: 19px;
	border-top: 1px solid #D2DEDB;
}
.bg-inquiry__submit {
	display: flex;
	width: 100%;
	min-height: 56px;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 14px 23px;
	border: 1px solid var(--bg-obsidian);
	border-radius: 4px;
	background: var(--bg-obsidian);
	color: var(--bg-soft-white);
	font: 700 14px/1.25 var(--bg-font-display);
	cursor: pointer;
	transition: background-color 0.15s;
}
.bg-inquiry__submit:hover:not(:disabled) { background: #16353A; }
.bg-inquiry__submit:disabled { cursor: not-allowed; opacity: 0.55; }
.bg-inquiry__submit:focus-visible {
	outline: var(--bg-focus-width) solid var(--bg-teal-on-light);
	outline-offset: 3px;
}
.bg-inquiry__arrow { font: 400 23px/1 Arial, sans-serif; }
.bg-inquiry__note {
	margin: 14px 0 0;
	padding: 0;
	font-size: 11px;
	line-height: 1.65;
	color: #5C7578;
}
.bg-inquiry__status:empty { display: none; }
.bg-inquiry__status {
	margin: 14px 0 0;
	padding: 12px 14px;
	border-left: 3px solid var(--bg-teal-on-light);
	background: #E3F4F1;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.55;
	color: #124D49;
}
@media (max-width: 620px) {
	.bg-inquiry__fields {
		grid-template-columns: 1fr;
		gap: 15px;
		margin-top: 19px;
	}
	.bg-inquiry__choice-grid { gap: 8px; }
	.bg-inquiry__choice { min-height: 53px; padding: 10px; font-size: 12px; }
	.bg-inquiry legend { font-size: 13px; }
}
@media (max-width: 345px) {
	.bg-inquiry__choice-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.bg-inquiry__choice,
	.bg-inquiry__submit { transition: none; }
}

/* Inquiry delivery states (0.1.7). Honeypot: off-screen for people, still a field for bots. */
.bg-inquiry__hp {
	position: absolute !important;
	left: -10000px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.bg-inquiry form { position: relative; }
.bg-inquiry__status.is-error {
	border-left-color: #9B4136;
	background: #FBF1EF;
	color: #7E2F25;
}
.bg-inquiry__form[aria-busy="true"] .bg-inquiry__submit {
	cursor: progress;
	opacity: 0.75;
}

/* ---------- Correction pass 1 (0.1.12) ---------- */
/* Breadcrumb links (Text module HTML, class "bg-crumb-link"): keep the crumb's own colour and
   size, Ghostlight on hover, and a 44px-tall hit area without moving the line. */
.bg-crumb-link,
.bg-crumb-link:visited {
	color: inherit;
	text-decoration: none;
	display: inline-block;
	padding: 15px 0;
	margin: -15px 0;
}
.bg-crumb-link:hover {
	color: var(--bg-ghostlight, #28E4D8);
}
.bg-crumb-link:focus-visible {
	outline: var(--bg-focus-width) solid var(--bg-focus-color);
	outline-offset: 2px;
}

/* Text links: Divi's unused ::before icon slot becomes an invisible hit area 12px above and
   below the link, so the target is at least 43px tall with no change to layout or underline. */
body #page-container .et_pb_section .et_pb_button.bg-text-link::before,
body #page-container .et_pb_section .et_pb_button.bg-text-link:hover::before {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	top: -12px !important;
	bottom: -12px !important;
	left: 0 !important;
	right: 0 !important;
	margin: 0 !important;
	transform: none !important;
	opacity: 0 !important;
}
/* Keep the arrow on the same line as the last word: an inline (not inline-block) arrow has
   no wrap opportunity before it, so a long label wraps as "… Maintenance ↗", never "↗" alone. */
body #page-container .et_pb_section .et_pb_button.bg-text-link::after,
body #page-container .et_pb_section .et_pb_button.bg-text-link:hover::after {
	display: inline !important;
}