/*
 * BigSpace Premium — design system.
 *
 * Every rule here is either prefixed `bsp-` or scoped under `.bsp`. The live
 * theme is a compiled Tailwind v4 build, so a bare element selector (`a`,
 * `h2`, `ul`) would leak into every page on the site and an unlayered
 * `* { min-width: 0 }` would silently kill the theme's `min-w-*` utilities.
 * Nothing in this file selects an element without a `bsp-` ancestor.
 */

.bsp {
	/* Ink ------------------------------------------------------------- */
	--bsp-navy-950: #060f1c;
	--bsp-navy-900: #081829;
	--bsp-navy-800: #0e2540;
	--bsp-navy-700: #16355a;
	--bsp-navy-600: #24406a;

	/* Gold — used sparingly. A premium page earns its accent, it doesn't
	   spend it on every heading. */
	--bsp-gold-500: #c8871f;
	--bsp-gold-400: #e5a53a;
	--bsp-gold-300: #ecbe62;
	--bsp-gold-100: #faedcf;
	--bsp-gold-50: #fdf8ed;

	/* Neutrals — a warm grey ramp, not Tailwind's cool slate. Warm greys
	   sit better against navy and read as paper rather than screen. */
	--bsp-ink: #14181d;
	--bsp-body: #4a5561;
	--bsp-muted: #6b7684;
	--bsp-line: #e4e7ec;
	--bsp-line-soft: #eef0f3;
	--bsp-surface: #ffffff;
	--bsp-surface-2: #f8f9fb;
	--bsp-surface-3: #f2f4f7;

	--bsp-radius: 14px;
	--bsp-radius-lg: 20px;
	--bsp-radius-sm: 10px;

	/* Layered shadows. One shadow reads flat; three read like real light. */
	--bsp-shadow-1: 0 1px 2px rgba(8, 24, 41, .04), 0 1px 3px rgba(8, 24, 41, .06);
	--bsp-shadow-2: 0 2px 4px rgba(8, 24, 41, .04), 0 8px 16px -4px rgba(8, 24, 41, .08),
		0 1px 0 rgba(255, 255, 255, .6) inset;
	--bsp-shadow-3: 0 4px 8px rgba(8, 24, 41, .05), 0 18px 36px -10px rgba(8, 24, 41, .14),
		0 1px 0 rgba(255, 255, 255, .7) inset;
	--bsp-shadow-navy: 0 10px 30px -8px rgba(14, 37, 64, .45);

	--bsp-ease: cubic-bezier(.22, .61, .36, 1);

	color: var(--bsp-body);
	font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans", sans-serif;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Anything inside a .bsp block inherits the box model we expect. Scoped, so
   the rest of the Tailwind site is untouched. */
.bsp *,
.bsp *::before,
.bsp *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------------ primitives */

.bsp-shell {
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 16px;
}

.bsp-shell--wide {
	max-width: 1440px;
}

@media (min-width: 640px) {
	.bsp-shell { padding-inline: 24px; }
}

@media (min-width: 1024px) {
	.bsp-shell { padding-inline: 32px; }
}

/* Section rhythm. Tightened on request: the earlier 88px band made every
   section a scroll of its own. */
.bsp-section {
	padding-block: 36px;
}

@media (min-width: 1024px) {
	.bsp-section { padding-block: 52px; }
}

.bsp-section--tight { padding-block: 28px; }

/* A section head on one row: eyebrow + heading left, the section's CTA right.
   Headings are held to a single line from tablet up — the copy is written
   short enough — and wrap only on phones. */
.bsp-sechead {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 24px;
	margin-bottom: 22px;
}

.bsp-sechead > div { min-width: 0; }
.bsp-sechead .bsp-h2 { margin-top: 8px; }
.bsp-sechead p.bsp-lede { margin-top: 6px; font-size: .95rem; }

@media (min-width: 900px) {
	.bsp-sechead .bsp-h2 { white-space: nowrap; }
	.bsp-sechead .bsp-lede { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70ch; }
}

/* Type ------------------------------------------------------------------ */

.bsp h1, .bsp h2, .bsp h3, .bsp h4, .bsp h5 {
	color: var(--bsp-ink);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.15;
	text-wrap: balance;
	margin: 0;
}

.bsp p { margin: 0; }

.bsp-display {
	font-size: clamp(2.1rem, 1.35rem + 3.1vw, 3.9rem);
	letter-spacing: -.033em;
	line-height: 1.05;
}

.bsp-h2 {
	font-size: clamp(1.45rem, 1.1rem + 1.3vw, 2.05rem);
	letter-spacing: -.026em;
}

.bsp-h3 {
	font-size: clamp(1.2rem, 1.05rem + .55vw, 1.5rem);
	letter-spacing: -.02em;
}

.bsp-lede {
	font-size: clamp(1.02rem, .97rem + .3vw, 1.2rem);
	line-height: 1.62;
	color: var(--bsp-body);
	text-wrap: pretty;
}

.bsp-prose { line-height: 1.72; }
.bsp-prose > * + * { margin-top: 1.05em; }
.bsp-prose a {
	color: var(--bsp-navy-700);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(20, 64, 106, .35);
	transition: color .18s var(--bsp-ease), text-decoration-color .18s var(--bsp-ease);
}
.bsp-prose a:hover {
	color: var(--bsp-gold-500);
	text-decoration-color: currentColor;
}

/* An eyebrow with a rule, not a coloured pill. Quieter and more editorial. */
.bsp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: .69rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--bsp-gold-500);
}

.bsp-eyebrow::before {
	content: "";
	width: 22px;
	height: 1px;
	background: currentColor;
	opacity: .8;
}

.bsp-eyebrow--light { color: var(--bsp-gold-300); }

/* Buttons --------------------------------------------------------------- */

.bsp-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 22px;
	border: 1px solid transparent;
	border-radius: var(--bsp-radius-sm);
	font-size: .875rem;
	font-weight: 650;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: transform .18s var(--bsp-ease), box-shadow .18s var(--bsp-ease),
		background-color .18s var(--bsp-ease), border-color .18s var(--bsp-ease),
		color .18s var(--bsp-ease);
}

.bsp-btn:hover { transform: translateY(-1px); }
.bsp-btn:active { transform: translateY(0); }

.bsp-btn--primary {
	background: var(--bsp-navy-800);
	color: #fff;
	box-shadow: var(--bsp-shadow-navy);
}
.bsp-btn--primary:hover { background: var(--bsp-navy-900); }

.bsp-btn--gold {
	background: linear-gradient(180deg, var(--bsp-gold-400), var(--bsp-gold-500));
	color: var(--bsp-navy-950);
	box-shadow: 0 10px 24px -8px rgba(200, 135, 31, .6);
}
.bsp-btn--gold:hover { filter: brightness(1.05); }

.bsp-btn--ghost {
	background: transparent;
	border-color: var(--bsp-line);
	color: var(--bsp-ink);
}
.bsp-btn--ghost:hover {
	border-color: var(--bsp-navy-800);
	background: var(--bsp-surface-2);
}

.bsp-btn--on-dark {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .28);
	color: #fff;
	backdrop-filter: blur(6px);
}
.bsp-btn--on-dark:hover {
	background: rgba(255, 255, 255, .16);
	border-color: rgba(255, 255, 255, .55);
}

.bsp-btn--block { width: 100%; }
.bsp-btn--lg { padding: 16px 28px; font-size: .95rem; }

/* Focus is visible everywhere, including over navy. */
.bsp :focus-visible {
	outline: 2px solid var(--bsp-gold-400);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Chips / pills --------------------------------------------------------- */

.bsp-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 13px;
	border: 1px solid var(--bsp-line);
	border-radius: 999px;
	background: var(--bsp-surface);
	color: var(--bsp-body);
	font-size: .8rem;
	font-weight: 550;
	text-decoration: none;
	transition: all .18s var(--bsp-ease);
}

.bsp-chip:hover {
	border-color: var(--bsp-navy-800);
	background: var(--bsp-navy-800);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--bsp-shadow-2);
}

.bsp-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	border-radius: 6px;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1;
}

.bsp-badge--gold {
	background: var(--bsp-gold-100);
	color: var(--bsp-gold-700, #854f18);
	box-shadow: inset 0 0 0 1px rgba(200, 135, 31, .22);
}

.bsp-badge--navy {
	background: var(--bsp-navy-800);
	color: #fff;
}

.bsp-badge--glass {
	background: rgba(6, 15, 28, .62);
	color: #fff;
	backdrop-filter: blur(10px) saturate(140%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

.bsp-badge--verified {
	background: #ecfdf3;
	color: #05603a;
	box-shadow: inset 0 0 0 1px rgba(5, 96, 58, .18);
}

/* Cards ----------------------------------------------------------------- */

.bsp-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--bsp-surface);
	border: 1px solid var(--bsp-line);
	border-radius: var(--bsp-radius);
	overflow: hidden;
	transition: transform .28s var(--bsp-ease), box-shadow .28s var(--bsp-ease),
		border-color .28s var(--bsp-ease);
}

.bsp-card:hover {
	transform: translateY(-3px);
	border-color: var(--bsp-gold-400);
	box-shadow: var(--bsp-shadow-3);
}

/* Utility --------------------------------------------------------------- */

.bsp-sr {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.bsp-grid { display: grid; gap: 24px; }
.bsp-grid--2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.bsp-grid--3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.bsp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 700px) {
	.bsp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bsp-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.bsp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.bsp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
	.bsp *,
	.bsp *::before,
	.bsp *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ------------------------------------------------------------ form fields */

/* Shared by the homepage search card and by every enquiry form. These were
   originally in bsp-hero.css, which is only enqueued on the front page — the
   result was an enquiry form whose inputs collapsed to zero height on every
   other page, because nothing was setting their height, border or padding. */

.bsp-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }

.bsp-field__label {
	font-size: .69rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bsp-muted);
}

.bsp-field__control {
	position: relative;
	display: flex;
	align-items: center;
}

.bsp-field__control > svg {
	position: absolute;
	left: 13px;
	width: 17px;
	height: 17px;
	color: var(--bsp-muted);
	pointer-events: none;
}

.bsp-input,
.bsp-select {
	width: 100%;
	min-width: 0;
	height: 50px;
	padding: 0 14px 0 39px;
	border: 1px solid var(--bsp-line);
	border-radius: var(--bsp-radius-sm);
	background: var(--bsp-surface);
	color: var(--bsp-ink);
	font-size: .93rem;
	font-family: inherit;
	font-weight: 500;
	appearance: none;
	transition: border-color .18s var(--bsp-ease), box-shadow .18s var(--bsp-ease);
}

.bsp-input::placeholder { color: var(--bsp-muted); font-weight: 400; }

.bsp-input:hover,
.bsp-select:hover { border-color: #cfd5dd; }

.bsp-input:focus,
.bsp-select:focus {
	outline: none;
	border-color: var(--bsp-navy-700);
	box-shadow: 0 0 0 4px rgba(22, 53, 90, .1);
}

/* Native select caret, drawn rather than imported. */
.bsp-select {
	padding-right: 36px;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236b7684' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}


/* Inline icons -------------------------------------------------------------
   The icon set is drawn on a 24x24 viewBox with no width or height attribute,
   so an unsized <svg> stretches to fill its flex line — a phone glyph the size
   of the button it sits in. Anywhere an icon is decorative and inline, it gets
   an explicit box. The artwork and gallery SVGs are excluded: those are meant
   to fill their container. */

.bsp-btn > svg,
.bsp-chip > svg,
.bsp-eyebrow > svg {
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
}

.bsp-btn--lg > svg { width: 19px; height: 19px; }

/* ========================================================== search card ===
   Moved here from bsp-hero.css: the card is rendered by bsp_search_form() on
   the homepage, the property archive and every taxonomy archive, and only the
   homepage loads the hero sheet. */

/* ------------------------------------------------------------- search card */

.bsp-search {
	position: relative;
	margin-top: 40px;
	border-radius: var(--bsp-radius-lg);
	background: rgba(255, 255, 255, .97);
	box-shadow:
		0 2px 6px rgba(6, 15, 28, .2),
		0 28px 70px -18px rgba(6, 15, 28, .65),
		inset 0 0 0 1px rgba(255, 255, 255, .9);
	backdrop-filter: blur(14px) saturate(150%);
	overflow: hidden;
	color: var(--bsp-body);
}

@media (min-width: 1024px) {
	.bsp-search { margin-top: 52px; }
}

/* Type tabs ------------------------------------------------------------- */

.bsp-search__tabs {
	display: flex;
	gap: 2px;
	padding: 8px 8px 0;
	overflow-x: auto;
	scrollbar-width: none;
	background: linear-gradient(180deg, var(--bsp-surface-3), var(--bsp-surface-2));
	border-bottom: 1px solid var(--bsp-line);
}

.bsp-search__tabs::-webkit-scrollbar { display: none; }

.bsp-search__tab {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 17px;
	border: 0;
	border-radius: 10px 10px 0 0;
	background: transparent;
	color: var(--bsp-muted);
	font-size: .84rem;
	font-weight: 620;
	font-family: inherit;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	transition: color .18s var(--bsp-ease), background-color .18s var(--bsp-ease);
}

.bsp-search__tab svg {
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
	opacity: .75;
}

.bsp-search__tab:hover {
	color: var(--bsp-navy-800);
	background: rgba(255, 255, 255, .7);
}

.bsp-search__tab[aria-selected="true"] {
	background: var(--bsp-surface);
	color: var(--bsp-navy-800);
	box-shadow: 0 -2px 8px rgba(8, 24, 41, .06);
}

.bsp-search__tab[aria-selected="true"] svg { opacity: 1; color: var(--bsp-gold-500); }

/* The active tab sits on a gold rule that reads as a selected file tab. */
.bsp-search__tab[aria-selected="true"]::after {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--bsp-gold-400), var(--bsp-gold-500));
}

/* Fields --------------------------------------------------------------- */

/* .bsp-field / .bsp-input / .bsp-select live in bsp.css, because the enquiry
   form uses them on pages where this sheet is not loaded. Only the search
   card's own layout stays here. */

.bsp-search__body { padding: 18px; }

@media (min-width: 1024px) {
	.bsp-search__body { padding: 22px; }
}

.bsp-search__row {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr;
}

@media (min-width: 760px) {
	.bsp-search__row {
		grid-template-columns: 1.5fr 1fr 1fr auto;
		align-items: end;
	}
}

.bsp-search__submit {
	height: 50px;
	padding-inline: 26px;
}

@media (max-width: 759px) {
	.bsp-search__submit { width: 100%; }
}

/* Advanced row ----------------------------------------------------------- */

.bsp-search__more {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr 1fr;
	margin-top: 12px;
	padding-top: 14px;
	border-top: 1px dashed var(--bsp-line);
}

@media (min-width: 760px) {
	.bsp-search__more { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.bsp-search__more[hidden] { display: none; }

.bsp-search__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--bsp-navy-700);
	font-family: inherit;
	font-size: .82rem;
	font-weight: 620;
	cursor: pointer;
}

.bsp-search__toggle svg {
	width: 14px; height: 14px;
	transition: transform .22s var(--bsp-ease);
}

.bsp-search__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Popular searches ------------------------------------------------------- */

.bsp-search__quick {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 14px 18px;
	background: var(--bsp-surface-2);
	border-top: 1px solid var(--bsp-line);
}

.bsp-search__quick-label {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bsp-muted);
	margin-right: 2px;
}


/* A decorative icon that somehow reaches the page without a size still cannot
   break a layout. bsp_icon() emits a bare <svg> with only a viewBox, which in a
   flex row stretches to the full line height; the artwork and gallery SVGs all
   carry a class attribute and are excluded. */
.bsp svg:not([class]) {
	width: 1.05em;
	height: 1.05em;
	flex: 0 0 auto;
}

/* =========================================================================
   Timed lead modal (includes/popup.php)

   Everything is scoped under `.bsp-lead`. The field primitives themselves
   (.bsp-fl, .bsp-input, .bsp-fl__prefix with the +91 flag) are already
   defined in bsp-property.css, which is enqueued site-wide alongside this
   file — this block only lays them out.
   ========================================================================= */

.bsp-lead {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.bsp-lead[hidden] { display: none; }

.bsp-lead__veil {
	position: absolute;
	inset: 0;
	background: rgba(6, 15, 28, .62);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity .28s var(--bsp-ease);
}

.bsp-lead__dialog {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 100%;
	max-width: 940px;
	max-height: calc(100vh - 40px);
	max-height: calc(100dvh - 40px);
	overflow: hidden;
	border-radius: var(--bsp-radius-lg);
	background: var(--bsp-surface);
	box-shadow: 0 24px 70px -12px rgba(6, 15, 28, .55), 0 0 0 1px rgba(255, 255, 255, .06);
	opacity: 0;
	transform: translateY(14px) scale(.985);
	transition: opacity .3s var(--bsp-ease), transform .3s var(--bsp-ease);
}

.bsp-lead.is-open .bsp-lead__veil { opacity: 1; }

.bsp-lead.is-open .bsp-lead__dialog {
	opacity: 1;
	transform: none;
}

/* ------------------------------------------------ left: the trust panel */

.bsp-lead__aside {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 480px;
	background: var(--bsp-navy-900);
	overflow: hidden;
}

.bsp-lead__aside .bsp-lead__photo,
.bsp-lead__aside picture {
	position: absolute;
	inset: 0;
}

.bsp-lead__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The scrim is what makes the copy legible on any crop of the photograph.
   Two stops rather than one: a flat overlay greys the picture out. */
.bsp-lead__aside::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(6, 15, 28, .28) 0%, rgba(6, 15, 28, .72) 46%, rgba(6, 15, 28, .95) 100%);
}

.bsp-lead__aside-body {
	position: relative;
	z-index: 1;
	padding: 34px 30px 32px;
	color: #fff;
}

.bsp-lead__eyebrow {
	margin: 0 0 10px;
	color: var(--bsp-gold-300);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	line-height: 1.5;
}

.bsp-lead__aside-title {
	margin: 0 0 22px;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.24;
	letter-spacing: -.015em;
	color: #fff;
}

.bsp-lead__promises {
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 14px;
}

.bsp-lead__promise {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.bsp-lead__promise-ico {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: rgba(232, 175, 74, .14);
	border: 1px solid rgba(236, 190, 98, .3);
	color: var(--bsp-gold-300);
}

.bsp-lead__promise-ico svg { width: 17px; height: 17px; }

.bsp-lead__promise strong {
	display: block;
	color: #fff;
	font-size: .93rem;
	font-weight: 650;
	line-height: 1.3;
}

.bsp-lead__promise em {
	display: block;
	margin-top: 2px;
	color: rgba(255, 255, 255, .72);
	font-size: .8rem;
	font-style: normal;
	line-height: 1.45;
}

.bsp-lead__proof {
	margin: 0;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, .16);
	color: rgba(255, 255, 255, .78);
	font-size: .78rem;
	letter-spacing: .01em;
}

.bsp-lead__proof span { color: #fff; font-weight: 700; }
.bsp-lead__proof i { font-style: normal; padding: 0 6px; opacity: .5; }

/* ------------------------------------------------------ right: the form */

.bsp-lead__main {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 38px 34px;
	overflow-y: auto;
	background: var(--bsp-surface);
}

.bsp-lead__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--bsp-muted);
	cursor: pointer;
	transition: background .16s var(--bsp-ease), color .16s var(--bsp-ease);
}

.bsp-lead__close:hover { background: var(--bsp-surface-3); color: var(--bsp-ink); }
.bsp-lead__close svg { width: 17px; height: 17px; }

.bsp-lead__title {
	margin: 0 0 6px;
	color: var(--bsp-ink);
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.017em;
}

.bsp-lead__sub {
	margin: 0 0 22px;
	color: var(--bsp-muted);
	font-size: .875rem;
	line-height: 1.55;
}

.bsp-lead__fields {
	display: grid;
	gap: 14px;
	margin-bottom: 18px;
}

.bsp-lead__fields .bsp-fl > textarea { min-height: 92px; }

.bsp-lead__submit { margin-bottom: 14px; }

.bsp-lead__msg { margin: 0 0 12px; }

.bsp-lead__fine,
.bsp-lead__alt {
	margin: 0;
	color: var(--bsp-muted);
	font-size: .74rem;
	line-height: 1.5;
}

.bsp-lead__fine {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	margin-bottom: 10px;
}

.bsp-lead__fine svg {
	flex: none;
	width: 14px;
	height: 14px;
	margin-top: 1px;
	color: #12894f;
}

.bsp-lead__alt a {
	color: var(--bsp-navy-800);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid rgba(14, 37, 64, .25);
}

.bsp-lead__alt a:hover { border-bottom-color: var(--bsp-navy-800); }

/* The honeypot. Off-screen rather than display:none — some bots skip
   anything that is not rendered. */
.bsp-lead__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ------------------------------------------------------- success state */

.bsp-lead__done {
	text-align: center;
	padding: 8px 0;
}

.bsp-lead__done[hidden] { display: none; }

.bsp-lead__tick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	margin-bottom: 18px;
	border-radius: 50%;
	background: #e8f6ee;
	color: #12894f;
}

.bsp-lead__tick svg { width: 30px; height: 30px; }

.bsp-lead__done-copy {
	margin: 0 0 22px;
	color: var(--bsp-body);
	font-size: .95rem;
	line-height: 1.6;
}

/* ---------------------------------------------------------- responsive */

@media (max-width: 880px) {
	.bsp-lead { padding: 0; align-items: flex-end; }

	.bsp-lead__dialog {
		grid-template-columns: 1fr;
		max-width: none;
		max-height: 94dvh;
		border-radius: var(--bsp-radius-lg) var(--bsp-radius-lg) 0 0;
		transform: translateY(24px);
	}

	/* The photo panel collapses to a band. Keeping it 50/50 on a phone
	   pushes the first input below the fold, which is the whole point of
	   the modal. */
	.bsp-lead__aside {
		min-height: 0;
		height: 168px;
	}

	.bsp-lead__aside-body { padding: 20px 22px 18px; }
	.bsp-lead__aside-title { margin-bottom: 0; font-size: 1.16rem; }
	.bsp-lead__promises,
	.bsp-lead__proof { display: none; }

	.bsp-lead__main { padding: 26px 22px 30px; }
	.bsp-lead__title { font-size: 1.22rem; }
	.bsp-lead__sub { margin-bottom: 18px; }
}

@media (max-width: 380px) {
	.bsp-lead__aside { height: 128px; }
	.bsp-lead__eyebrow { display: none; }
}

/* Someone who has asked for less motion gets the modal, not the animation. */
@media (prefers-reduced-motion: reduce) {
	.bsp-lead__veil,
	.bsp-lead__dialog { transition: none; }
	.bsp-lead__dialog { transform: none; }
}

/* Scroll lock. Applied to <html> by bsp.js while the modal is open. */
.bsp-lead-lock,
.bsp-lead-lock body { overflow: hidden !important; }

/* On a phone the dialog is a bottom sheet and the form starts immediately
   under the photo band, so a close button in the white panel lands on the
   heading. Put it on the photograph instead. */
@media (max-width: 880px) {
	.bsp-lead__close {
		top: 10px;
		right: 10px;
		background: rgba(6, 15, 28, .5);
		color: #fff;
	}

	.bsp-lead__close:hover { background: rgba(6, 15, 28, .72); color: #fff; }
}

/* Lead CTA pair (bsp_lead_ctas) */
.bsp-leadcta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.bsp-leadcta .bsp-btn{flex:0 1 auto}
@media (max-width:480px){.bsp-leadcta .bsp-btn{flex:1 1 100%;justify-content:center}}
.bsp-pil__dedicated{display:inline-flex;gap:6px;align-items:center;margin-top:14px;font-weight:650;color:var(--bsp-ink);text-decoration:underline;text-underline-offset:3px}