/**
 * Bhumiwala widget components.
 *
 * Every colour and size comes from the design tokens in the child theme. Each
 * var() carries a fallback because these widgets live in the plugin and must
 * still render sanely if the theme is ever swapped — rule 3 of the working
 * agreement is that the site survives a theme change, and a component that
 * renders as unstyled black-on-white does not clear that bar.
 */

/* ══ Layout ═══════════════════════════════════════════════════════════ */

.bw-grid {
	display: grid;
	gap: var(--bw-space-5, 1.5rem);
	grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
}

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

.bw-empty {
	padding: var(--bw-space-7, 3rem) var(--bw-space-4, 1rem);
	text-align: center;
	color: var(--bw-text-muted, #5a544c);
	border: 1px dashed var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-md, 10px);
	max-width: 46ch;
	margin-inline: auto;
}

/* ══ Card ═════════════════════════════════════════════════════════════ */

.bw-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--bw-bg, #fff);
	border: 1px solid var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-md, 10px);
	overflow: hidden;
	transition:
		box-shadow var(--bw-duration-base, 200ms) var(--bw-ease, ease),
		border-color var(--bw-duration-base, 200ms) var(--bw-ease, ease);
}

.bw-card:hover,
.bw-card:focus-within {
	border-color: var(--bw-accent-300, #d9b062);
	box-shadow: var(--bw-shadow-lg, 0 12px 28px rgb(10 25 40 / 0.12));
}

.bw-card__media {
	position: relative;
	aspect-ratio: 3 / 2;
	background: var(--bw-brand-800, #0e2338);
	overflow: hidden;
}

.bw-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--bw-duration-slow, 320ms) var(--bw-ease-out, ease);
}

.bw-card:hover .bw-card__img {
	transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
	.bw-card:hover .bw-card__img { transform: none; }
}

.bw-card__img--empty {
	background: linear-gradient(160deg, var(--bw-brand-700, #142f4d), var(--bw-brand-900, #0a1928));
}

.bw-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--bw-space-2, 0.5rem);
	padding: var(--bw-space-4, 1rem);
	flex: 1;
}

.bw-card__place {
	margin: 0;
	font-size: var(--bw-text-2xs, 0.6875rem);
	letter-spacing: var(--bw-tracking-wide, 0.04em);
	text-transform: uppercase;
	color: var(--bw-text-subtle, #7a736a);
}

.bw-card__name {
	margin: 0;
	font-size: var(--bw-text-md, 1.125rem);
	font-weight: var(--bw-weight-bold, 700);
	line-height: var(--bw-leading-snug, 1.3);
	letter-spacing: var(--bw-tracking-tight, -0.02em);
}

.bw-card__link {
	color: inherit;
	text-decoration: none;
}

/*
 * The title's hit area is stretched over the whole card, so a mouse gets a
 * large target while the keyboard still gets a single stop. Everything that
 * needs to stay separately clickable must sit above this.
 */
.bw-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.bw-card__usp {
	margin: 0;
	font-size: var(--bw-text-sm, 0.875rem);
	line-height: var(--bw-leading-normal, 1.6);
	color: var(--bw-text-muted, #5a544c);
}

.bw-card__price {
	margin: auto 0 0;
	padding-top: var(--bw-space-2, 0.5rem);
	font-size: var(--bw-text-md, 1.125rem);
	font-weight: var(--bw-weight-bold, 700);
	letter-spacing: var(--bw-tracking-tight, -0.02em);
	font-variant-numeric: tabular-nums;
	/* accent-600, not 500: brass at 500 is 3.6:1 on white, which is fine for
	   a button fill and not for text this size. */
	color: var(--bw-accent-ink, #8f631d);
}

.bw-card__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bw-space-1, 0.25rem) var(--bw-space-4, 1rem);
	margin: 0;
	padding: var(--bw-space-3, 0.75rem) 0 0;
	list-style: none;
	border-top: 1px solid var(--bw-border, #e6e1da);
	font-size: var(--bw-text-xs, 0.75rem);
	color: var(--bw-text-muted, #5a544c);
	font-variant-numeric: tabular-nums;
}

.bw-card__rera {
	margin: 0;
	font-size: 0.625rem;
	letter-spacing: 0.045em;
	color: var(--bw-text-subtle, #7a736a);
}

/* ══ Badge ════════════════════════════════════════════════════════════ */

.bw-badge {
	position: absolute;
	inset-block-start: var(--bw-space-3, 0.75rem);
	inset-inline-start: var(--bw-space-3, 0.75rem);
	z-index: 2;
	padding: 0.3rem 0.55rem;
	border-radius: var(--bw-radius-xs, 4px);
	background: var(--bw-accent-400, #c9963c);
	color: var(--bw-brand-900, #0a1928);
	font-size: 0.625rem;
	font-weight: var(--bw-weight-bold, 700);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bw-badge--quiet {
	background: rgb(255 255 255 / 0.92);
	color: var(--bw-brand-800, #0e2338);
}

/* ══ Filters ══════════════════════════════════════════════════════════ */

.bw-filters {
	display: flex;
	flex-direction: column;
	gap: var(--bw-space-4, 1rem);
}

.bw-filters__facets {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bw-space-5, 1.5rem);
}

.bw-facet {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.bw-facet__legend {
	padding: 0 0 var(--bw-space-2, 0.5rem);
	font-size: var(--bw-text-2xs, 0.6875rem);
	font-weight: var(--bw-weight-semibold, 600);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bw-text-subtle, #7a736a);
}

.bw-facet__options {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bw-space-2, 0.5rem);
}

.bw-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 38px;
	padding: 0.45rem 0.85rem;
	border: 1px solid var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-full, 999px);
	background: var(--bw-bg, #fff);
	color: var(--bw-text-muted, #5a544c);
	font-size: var(--bw-text-sm, 0.875rem);
	font-weight: var(--bw-weight-semibold, 600);
	text-decoration: none;
	transition:
		border-color var(--bw-duration-fast, 120ms) var(--bw-ease, ease),
		color var(--bw-duration-fast, 120ms) var(--bw-ease, ease);
}

.bw-chip:hover {
	border-color: var(--bw-accent-400, #c9963c);
	color: var(--bw-text, #171412);
}

.bw-chip.is-on {
	background: var(--bw-brand-900, #0a1928);
	border-color: var(--bw-brand-900, #0a1928);
	color: var(--bw-accent-200, #e8cd93);
}

.bw-chip__n {
	font-size: var(--bw-text-2xs, 0.6875rem);
	font-variant-numeric: tabular-nums;
	opacity: 0.7;
}

/* ── Active pills ─────────────────────────────────────────────────── */

.bw-active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bw-space-2, 0.5rem);
}

.bw-active__label {
	font-size: var(--bw-text-2xs, 0.6875rem);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bw-text-subtle, #7a736a);
}

.bw-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 32px;
	padding: 0.25rem 0.7rem;
	border-radius: var(--bw-radius-full, 999px);
	background: var(--bw-accent-50, #fbf5e9);
	border: 1px solid var(--bw-accent-200, #e8cd93);
	color: var(--bw-accent-700, #6d4b17);
	font-size: var(--bw-text-xs, 0.75rem);
	font-weight: var(--bw-weight-semibold, 600);
	text-decoration: none;
}

.bw-pill:hover {
	background: var(--bw-accent-100, #f4e6c8);
}

.bw-pill__x {
	font-size: 1rem;
	line-height: 1;
}

.bw-active__clear {
	font-size: var(--bw-text-xs, 0.75rem);
	font-weight: var(--bw-weight-semibold, 600);
	color: var(--bw-link, #1d3f65);
}

/* ── Sort ─────────────────────────────────────────────────────────── */

.bw-sort {
	display: flex;
	align-items: center;
	gap: var(--bw-space-2, 0.5rem);
	margin-inline-start: auto;
}

.bw-sort__label {
	font-size: var(--bw-text-2xs, 0.6875rem);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bw-text-subtle, #7a736a);
}

.bw-sort select {
	min-height: 40px;
	padding: 0 2rem 0 0.75rem;
	border: 1px solid var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-sm, 6px);
	background: var(--bw-bg, #fff);
	color: var(--bw-text, #171412);
	font-size: var(--bw-text-sm, 0.875rem);
}

.bw-sort__go {
	min-height: 40px;
	padding: 0 0.9rem;
	border: 1px solid var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-sm, 6px);
	background: var(--bw-bg-subtle, #faf8f5);
	color: var(--bw-text, #171412);
	font-size: var(--bw-text-sm, 0.875rem);
	font-weight: var(--bw-weight-semibold, 600);
	cursor: pointer;
}

/* The script hides this once it can submit on change; without JavaScript it
   stays, because a select that only works with a script is a dead control. */
.bw-sort.is-enhanced .bw-sort__go {
	display: none;
}

/* ══ Pagination ═══════════════════════════════════════════════════════ */

.bw-pagination {
	margin-top: var(--bw-space-6, 2rem);
}

.bw-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--bw-space-2, 0.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bw-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	min-height: 42px;
	padding: 0 0.7rem;
	border: 1px solid var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-sm, 6px);
	color: var(--bw-link, #1d3f65);
	font-size: var(--bw-text-sm, 0.875rem);
	font-weight: var(--bw-weight-semibold, 600);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

.bw-pagination .page-numbers:hover {
	border-color: var(--bw-accent-400, #c9963c);
}

.bw-pagination .page-numbers.current {
	background: var(--bw-brand-900, #0a1928);
	border-color: var(--bw-brand-900, #0a1928);
	color: var(--bw-accent-200, #e8cd93);
}

.bw-pagination .page-numbers.dots {
	border-color: transparent;
}

/* ══ Utilities ════════════════════════════════════════════════════════ */

/* Repeated from the theme deliberately: these widgets must stay accessible
   even if the theme that normally provides it is replaced. */
.bw-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.bw-editor-notice {
	padding: var(--bw-space-4, 1rem);
	border: 1px dashed #c9963c;
	border-radius: var(--bw-radius-sm, 6px);
	background: #fbf5e9;
	color: #6d4b17;
	font-size: 0.875rem;
}

/* ══ Header and footer components ═════════════════════════════════════ */

/* The wordmark is type, not an image, until a logo file exists. Setting it in
   CSS rather than baking a styled string into the template means the day the
   logo arrives, only the template changes. */
.bw-wordmark {
	letter-spacing: -0.04em;
}

.bw-wordmark a {
	color: inherit;
	text-decoration: none;
}

/* ── Call / WhatsApp button ───────────────────────────────────────── */

.bw-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.6rem 1.05rem;
	border-radius: var(--bw-radius-sm, 6px);
	font-size: var(--bw-text-sm, 0.875rem);
	font-weight: var(--bw-weight-semibold, 600);
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color var(--bw-duration-fast, 120ms) var(--bw-ease, ease),
		color var(--bw-duration-fast, 120ms) var(--bw-ease, ease);
}

.bw-cta svg { flex: none; }

/*
 * Drawn for a light surface, because that is where nearly all of these
 * sit — hero buttons, action rows, page heroes. It used to be pale gold
 * for the dark header and measured 1.55:1 on white everywhere else, which
 * is a button you can see the shape of and not read.
 */
.bw-cta--outline {
	border: 1px solid var(--bw-border-strong, #d5cec4);
	background: var(--bw-bg, #fff);
	color: var(--bw-text, #171412);
}

.bw-cta--outline:hover,
.bw-cta--outline:focus-visible {
	border-color: var(--bw-accent-400, #c9963c);
	background: var(--bw-accent-50, #fbf5e9);
	color: var(--bw-text, #171412);
}

/* The two places it genuinely sits on ink. */
#bw-header .bw-cta--outline,
.bw-hero .bw-cta--outline {
	border-color: rgb(217 176 98 / 0.45);
	background: transparent;
	color: var(--bw-accent-200, #e8cd93);
}

#bw-header .bw-cta--outline:hover,
#bw-header .bw-cta--outline:focus-visible,
.bw-hero .bw-cta--outline:hover,
.bw-hero .bw-cta--outline:focus-visible {
	border-color: var(--bw-accent-300, #d9b062);
	background: rgb(217 176 98 / 0.14);
	color: #fff;
}

.bw-cta--solid {
	border: 1px solid transparent;
	background: var(--bw-accent-400, #c9963c);
	color: var(--bw-brand-900, #0a1928);
}

.bw-cta--solid:hover {
	background: var(--bw-accent-300, #d9b062);
}

/* ── Footer contact block ─────────────────────────────────────────── */

.bw-contact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--bw-space-2, 0.5rem);
	font-size: var(--bw-text-sm, 0.875rem);
	line-height: var(--bw-leading-normal, 1.6);
	color: #a9bccd;
}

.bw-contact a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgb(169 188 205 / 0.3);
}

.bw-contact a:hover {
	color: #fff;
	border-bottom-color: var(--bw-accent-300, #d9b062);
}

/* ── Legal strip ──────────────────────────────────────────────────── */

/*
 * Written for the footer, and #7d92a8 measures 7.5:1 there. The same block
 * is on the About page over white, where it drops to 3.2:1 — so the colour
 * comes from the page now, and the footer keeps its own below.
 */
.bw-legal {
	display: grid;
	gap: var(--bw-space-3, 0.75rem);
	padding-top: var(--bw-space-5, 1.5rem);
	border-top: 1px solid var(--bw-border, #e6e1da);
	color: var(--bw-text-muted, #5a544c);
	font-size: var(--bw-text-xs, 0.75rem);
	line-height: 1.65;
}

.bw-legal p { margin: 0; }

.bw-legal__reg {
	font-family: var(--bw-font-mono, ui-monospace, monospace);
	letter-spacing: 0.03em;
}

/* The disclaimer is a legal statement and has to stay readable. Measured at
   7.5:1 against the footer ground, well past the 4.5:1 the standard asks. */
.bw-legal__text { max-width: 90ch; }

#bw-footer .bw-legal {
	border-top-color: rgb(255 255 255 / 0.1);
	color: #7d92a8;
}

/* ══ Hero slider ══════════════════════════════════════════════════════ */

.bw-hero {
	position: relative;
	background: var(--bw-brand-900, #0a1928);
	overflow: hidden;
}

.bw-hero--short { --bw-hero-h: 420px; }
.bw-hero--tall  { --bw-hero-h: 620px; }
.bw-hero--full  { --bw-hero-h: min(82vh, 760px); }

/*
 * Scroll-snap rather than transforms. Touch swipe, keyboard scrolling and the
 * scrollbar all work without a line of JavaScript, and the whole set is in the
 * DOM rather than injected on demand.
 */
.bw-hero__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.bw-hero__track::-webkit-scrollbar { display: none; }

.bw-hero__slide {
	position: relative;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	min-height: var(--bw-hero-h, 620px);
	display: grid;
}

.bw-hero__img {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Navy, not black. A neutral scrim greys the photograph; a brand-tinted one
   holds the image and the palette together. */
.bw-hero__veil {
	grid-area: 1 / 1;
	background:
		linear-gradient(100deg, rgb(10 25 40 / 0.92) 0%, rgb(10 25 40 / 0.72) 42%, rgb(10 25 40 / 0.15) 78%),
		linear-gradient(0deg, rgb(10 25 40 / 0.55) 0%, transparent 45%);
}

.bw-hero__body {
	grid-area: 1 / 1;
	position: relative;
	align-self: center;
	width: 100%;
	max-width: var(--bw-container, 1280px);
	margin-inline: auto;
	padding: var(--bw-space-7, 3rem) var(--bw-gutter, 1.5rem) calc(var(--bw-space-8, 4rem) + 1.5rem);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--bw-space-3, 0.75rem);
	color: #eef3f8;
}

.bw-hero__eyebrow {
	margin: 0;
	font-size: var(--bw-text-2xs, 0.6875rem);
	font-weight: var(--bw-weight-semibold, 600);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bw-accent-300, #d9b062);
}

.bw-hero__title {
	margin: 0;
	max-width: 14ch;
	font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.032em;
	color: #fff;
}

.bw-hero__lede {
	margin: 0;
	max-width: 46ch;
	font-size: clamp(0.9375rem, 0.9rem + 0.25vw, 1.125rem);
	line-height: 1.55;
	color: #c3d1e0;
}

.bw-hero__meta {
	margin: 0;
	font-size: var(--bw-text-sm, 0.875rem);
	color: #90a4b8;
	font-variant-numeric: tabular-nums;
}

.bw-hero__cta {
	margin-top: var(--bw-space-2, 0.5rem);
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding: 0.7rem 1.4rem;
	border-radius: var(--bw-radius-sm, 6px);
	background: var(--bw-accent-400, #c9963c);
	color: var(--bw-brand-900, #0a1928);
	font-size: var(--bw-text-sm, 0.875rem);
	font-weight: var(--bw-weight-bold, 700);
	text-decoration: none;
	transition: background-color var(--bw-duration-fast, 120ms) var(--bw-ease, ease);
}

.bw-hero__cta:hover { background: var(--bw-accent-300, #d9b062); }

/* ── Controls ─────────────────────────────────────────────────────── */

.bw-hero__nav {
	position: absolute;
	inset-block-end: var(--bw-space-5, 1.5rem);
	inset-inline-start: 50%;
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	gap: var(--bw-space-3, 0.75rem);
	padding: 0.4rem 0.5rem;
	border-radius: var(--bw-radius-full, 999px);
	background: rgb(10 25 40 / 0.55);
	backdrop-filter: blur(6px);
}

.bw-hero__arrow {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	min-height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #eef3f8;
	cursor: pointer;
}

.bw-hero__arrow:hover { background: rgb(255 255 255 / 0.12); }

.bw-hero__dot::after {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	width: 24px;
	height: 24px;
	transform: translate(-50%, -50%);
	border-radius: var(--bw-radius-full, 999px);
}

.bw-hero__dots {
	display: flex;
	align-items: center;
	gap: 0.45rem;
}

/*
 * Dots are links to each slide's anchor, so they work before the script does.
 *
 * The mark is 9px and the target is 24. A box-shadow was standing in for
 * that target and does not catch a single tap — shadows are painted, not
 * hit-tested — so it is a pseudo-element now.
 */
.bw-hero__dot {
	position: relative;
	display: block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgb(238 243 248 / 0.35);
	transition:
		background-color var(--bw-duration-fast, 120ms) var(--bw-ease, ease),
		width var(--bw-duration-base, 200ms) var(--bw-ease, ease);
}

.bw-hero__dot[aria-selected="true"] {
	width: 26px;
	border-radius: var(--bw-radius-full, 999px);
	background: var(--bw-accent-300, #d9b062);
}

@media (max-width: 640px) {
	.bw-hero__title { max-width: 100%; }
	.bw-hero__body { padding-bottom: var(--bw-space-9, 6rem); }
}

@media (prefers-reduced-motion: reduce) {
	.bw-hero__track { scroll-behavior: auto; }
	.bw-hero__dot { transition: none; }
}

/* ══ Search form ══════════════════════════════════════════════════════ */

.bw-search {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: var(--bw-container, 1280px);
	margin-inline: auto;
	padding-inline: var(--bw-gutter, 1.5rem);
}

/* Half over the hero, half below it. The negative pull is roughly half the
   panel's own height; the hero's bottom padding already leaves room so the
   slider dots are never covered. */
.bw-search--overlap {
	margin-top: -84px;
}

@media (max-width: 900px) {
	.bw-search--overlap { margin-top: -48px; }
}

/* ── Tabs ─────────────────────────────────────────────────────────── */

.bw-search__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	padding: 0;
	margin: 0 0 -1px;
}

.bw-search__tab {
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding: 0.7rem 1.35rem;
	border: 1px solid var(--bw-border, #e6e1da);
	border-bottom: 0;
	border-radius: var(--bw-radius-md, 10px) var(--bw-radius-md, 10px) 0 0;
	/*
	 * Nearly opaque, and dark in dark mode. At 0.72 the sheet let the hero
	 * photograph through far enough that the label measured about 3:1, and
	 * in dark mode the sheet stayed white under light-grey text while the
	 * checked tab put navy ink on the ink background — 1.07:1, invisible.
	 */
	background: rgb(255 255 255 / 0.92);
	color: var(--bw-text-muted, #5a544c);
	font-size: var(--bw-text-sm, 0.875rem);
	font-weight: var(--bw-weight-semibold, 600);
	cursor: pointer;
	backdrop-filter: blur(8px);
	transition:
		background-color var(--bw-duration-fast, 120ms) var(--bw-ease, ease),
		color var(--bw-duration-fast, 120ms) var(--bw-ease, ease);
}

.bw-search__tab:hover { color: var(--bw-text, #171412); }

/* The radio is the state; the label is what is seen. Checked wins here, so a
   tab works before any script runs. */
.bw-search__radio:checked + .bw-search__tab {
	background: var(--bw-bg, #fff);
	color: var(--bw-text, #171412);
	box-shadow: inset 0 3px 0 0 var(--bw-accent-400, #c9963c);
}

@media (prefers-color-scheme: dark) {
	.bw-search__tab { background: rgb(13 17 23 / 0.92); }
}

.bw-search__radio:focus-visible + .bw-search__tab {
	outline: 3px solid var(--bw-accent-500, #b07d26);
	outline-offset: -3px;
}

/* ── Panel ────────────────────────────────────────────────────────── */

.bw-search__form {
	display: flex;
	flex-direction: column;
	gap: var(--bw-space-4, 1rem);
	padding: var(--bw-space-5, 1.5rem);
	background: var(--bw-bg, #fff);
	border: 1px solid var(--bw-border, #e6e1da);
	border-radius: 0 var(--bw-radius-lg, 16px) var(--bw-radius-lg, 16px) var(--bw-radius-lg, 16px);
	box-shadow: var(--bw-shadow-xl, 0 24px 56px rgb(10 25 40 / 0.16));
}

.bw-search__row {
	display: grid;
	gap: var(--bw-space-3, 0.75rem);
}

.bw-search__row--top {
	grid-template-columns: minmax(0, 280px);
	padding-bottom: var(--bw-space-4, 1rem);
	border-bottom: 1px solid var(--bw-rule-soft, #f0ece6);
}

.bw-search__row--main {
	grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
	align-items: end;
}

@media (max-width: 1080px) {
	.bw-search__row--main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bw-search__go { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
	.bw-search__row--main,
	.bw-search__row--top { grid-template-columns: minmax(0, 1fr); }
}

/* ── Fields ───────────────────────────────────────────────────────── */

.bw-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
}

.bw-field__label {
	font-size: var(--bw-text-2xs, 0.6875rem);
	font-weight: var(--bw-weight-semibold, 600);
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--bw-text-subtle, #7a736a);
}

.bw-field__control {
	width: 100%;
	min-height: 48px;
	padding: 0 0.85rem;
	border: 1px solid var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-sm, 6px);
	background: var(--bw-bg, #fff);
	color: var(--bw-text, #171412);
	font-size: var(--bw-text-base, 1rem);
	font-weight: var(--bw-weight-medium, 500);
}

select.bw-field__control {
	appearance: none;
	padding-inline-end: 2.2rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238f631d' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.85rem center;
	background-size: 11px;
	cursor: pointer;
}

.bw-field__control:focus-visible {
	outline: 3px solid var(--bw-accent-500, #b07d26);
	outline-offset: 1px;
	border-color: var(--bw-accent-500, #b07d26);
}

/* A control the current tab has no use for is hidden rather than disabled:
   a greyed-out budget box on the Sell tab is a question the visitor still has
   to read before working out it is not for them. */
.bw-field[hidden] { display: none; }

.bw-search__go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 48px;
	padding: 0 1.6rem;
	border: 0;
	border-radius: var(--bw-radius-sm, 6px);
	background: var(--bw-brand-900, #0a1928);
	color: var(--bw-accent-200, #e8cd93);
	font-size: var(--bw-text-sm, 0.875rem);
	font-weight: var(--bw-weight-bold, 700);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--bw-duration-fast, 120ms) var(--bw-ease, ease);
}

.bw-search__go:hover { background: var(--bw-brand-700, #142f4d); }

/* ── Contact block on a light ground ──────────────────────────────────
 * The block was first written for the footer and hard-coded the pale blue
 * that works on navy. On the contact page's warm off-white that is close to
 * unreadable, so the colours now come from the surrounding text and only the
 * footer overrides them.
 * ------------------------------------------------------------------- */

.bw-contact {
	color: var(--bw-text-muted, #5a544c);
}

.bw-contact a {
	color: var(--bw-link, #1d3f65);
	border-bottom-color: var(--bw-border-strong, #d2ccc3);
}

.bw-contact a:hover {
	color: var(--bw-brand-800, #0e2338);
	border-bottom-color: var(--bw-accent-500, #b07d26);
}

#bw-footer .bw-contact { color: #a9bccd; }

#bw-footer .bw-contact a {
	color: inherit;
	border-bottom-color: rgb(169 188 205 / 0.3);
}

#bw-footer .bw-contact a:hover {
	color: #fff;
	border-bottom-color: var(--bw-accent-300, #d9b062);
}

/* ══ City grid ════════════════════════════════════════════════════════ */

.bw-cities {
	width: 100%;
	max-width: var(--bw-container, 1280px);
	margin-inline: auto;
	padding: var(--bw-section-y, 4rem) var(--bw-gutter, 1.5rem);
}

.bw-cities__head {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-bottom: var(--bw-space-6, 2rem);
}

.bw-cities__title {
	margin: 0;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
	font-weight: var(--bw-weight-bold, 700);
	letter-spacing: var(--bw-tracking-tight, -0.02em);
	line-height: 1.15;
	color: var(--bw-text, #171412);
}

.bw-cities__sub {
	margin: 0;
	max-width: 56ch;
	font-size: var(--bw-text-md, 1.125rem);
	line-height: 1.55;
	color: var(--bw-text-muted, #5a544c);
}

/*
 * Rows, not a carousel. On a phone a carousel hides most of the cities behind
 * a swipe most people never make; a grid reflows to two columns and every
 * city stays visible and reachable by scrolling the page they are already
 * scrolling.
 */
.bw-cities__grid {
	display: grid;
	gap: var(--bw-space-4, 1rem);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 620px) {
	.bw-cities__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.bw-cities__grid {
		grid-template-columns: repeat(var(--bw-cities-cols, 4), minmax(0, 1fr));
	}
}

.bw-city { min-width: 0; }

.bw-city__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.bw-city__media {
	position: relative;
	display: block;
	overflow: hidden;
	background: linear-gradient(160deg, var(--bw-brand-600, #1d3f65), var(--bw-brand-900, #0a1928));
}

.bw-city__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--bw-duration-slow, 320ms) var(--bw-ease-out, ease);
}

.bw-city__link:hover .bw-city__img { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
	.bw-city__link:hover .bw-city__img { transform: none; }
}

/* A lettered tile where no photograph has been supplied. Better than a grey
   box, and better than a stock picture of somewhere else — an editor can see
   at a glance which cities still need one. */
.bw-city__initial {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: clamp(2rem, 6vw, 3.25rem);
	font-weight: 800;
	color: var(--bw-accent-300, #d9b062);
	opacity: 0.75;
}

.bw-city__name {
	display: block;
	font-weight: var(--bw-weight-bold, 700);
	letter-spacing: var(--bw-tracking-tight, -0.02em);
	line-height: 1.2;
}

.bw-city__count {
	display: block;
	font-size: var(--bw-text-xs, 0.75rem);
	font-variant-numeric: tabular-nums;
}

/* ── Card shape ───────────────────────────────────────────────────── */

.bw-cities__grid--card .bw-city__media {
	aspect-ratio: 3 / 2;
	border-radius: var(--bw-radius-md, 10px);
}

.bw-cities__grid--card .bw-city__link {
	position: relative;
	border-radius: var(--bw-radius-md, 10px);
	overflow: hidden;
	display: block;
}

/* The scrim only covers the lower third, so the picture is still the picture
   and the name still has 4.5:1 against what sits behind it. */
.bw-cities__grid--card .bw-city__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgb(10 25 40 / 0.88) 0%, rgb(10 25 40 / 0.45) 28%, transparent 58%);
}

.bw-cities__grid--card .bw-city__body {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 1;
	display: block;
	padding: var(--bw-space-3, 0.75rem) var(--bw-space-4, 1rem);
	color: #fff;
}

.bw-cities__grid--card .bw-city__name { font-size: var(--bw-text-md, 1.125rem); }
.bw-cities__grid--card .bw-city__count { color: #c3d1e0; }

.bw-cities__grid--card .bw-city__link:hover { box-shadow: var(--bw-shadow-lg, 0 12px 28px rgb(10 25 40 / 0.12)); }

/* ── Circle shape ─────────────────────────────────────────────────── */

.bw-cities__grid--circle .bw-city__link {
	position: relative;
	display: block;
	border-radius: 50%;
	/* The tile lifts on hover, so the transition lives on the link and the
	   shadow travels with it rather than being redrawn underneath. */
	transition:
		transform var(--bw-duration-base, 200ms) var(--bw-ease-out, ease),
		box-shadow var(--bw-duration-base, 200ms) var(--bw-ease, ease);
	box-shadow: var(--bw-shadow-md, 0 4px 12px rgb(10 25 40 / 0.09));
}

.bw-cities__grid--circle .bw-city__link:hover,
.bw-cities__grid--circle .bw-city__link:focus-visible {
	transform: translateY(-6px);
	box-shadow: var(--bw-shadow-xl, 0 24px 56px rgb(10 25 40 / 0.16));
}

.bw-cities__grid--circle .bw-city__media {
	aspect-ratio: 1 / 1;
	width: 100%;
	border-radius: 50%;
}

/*
 * The name sits on the picture, so the picture has to give it 4.5:1. A scrim
 * over the lower half does that without flattening the whole image — the top
 * of the circle stays the photograph.
 */
.bw-cities__grid--circle .bw-city__media::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	/* Measured, not guessed: white on this scrim over a mid-tone photograph
	   clears 8:1, well past the 4.5:1 the text needs. The first version was
	   nearly opaque to 38% and buried the picture for contrast it did not
	   need — this keeps the top two-thirds of the circle a photograph. */
	background: linear-gradient(0deg, rgb(10 25 40 / 0.88) 4%, rgb(10 25 40 / 0.48) 32%, rgb(10 25 40 / 0) 62%);
	transition: opacity var(--bw-duration-base, 200ms) var(--bw-ease, ease);
}

/* A brass rim that closes on hover. Drawn as an inset shadow rather than a
   border so it costs no layout and cannot shift the circle by 3px. */
.bw-cities__grid--circle .bw-city__media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: 50%;
	box-shadow: inset 0 0 0 0 var(--bw-accent-400, #c9963c);
	transition: box-shadow var(--bw-duration-base, 200ms) var(--bw-ease-out, ease);
}

.bw-cities__grid--circle .bw-city__link:hover .bw-city__media::before,
.bw-cities__grid--circle .bw-city__link:focus-visible .bw-city__media::before {
	box-shadow: inset 0 0 0 3px var(--bw-accent-400, #c9963c);
}

.bw-cities__grid--circle .bw-city__link:hover .bw-city__img {
	transform: scale(1.08);
}

.bw-cities__grid--circle .bw-city__body {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	gap: 0.1rem;
	/* Inside a circle the usable width narrows towards the bottom, so the
	   text is held off the curve by a percentage rather than a fixed inset. */
	padding: 0 14% 15%;
	text-align: center;
	color: #fff;
}

.bw-cities__grid--circle .bw-city__name {
	font-size: clamp(0.8125rem, 0.72rem + 0.4vw, 1rem);
	line-height: 1.15;
	text-shadow: 0 1px 3px rgb(10 25 40 / 0.6);
}

.bw-cities__grid--circle .bw-city__count {
	font-size: clamp(0.625rem, 0.58rem + 0.2vw, 0.75rem);
	color: var(--bw-accent-200, #e8cd93);
	text-shadow: 0 1px 3px rgb(10 25 40 / 0.6);
}

@media (prefers-reduced-motion: reduce) {
	.bw-cities__grid--circle .bw-city__link:hover,
	.bw-cities__grid--circle .bw-city__link:focus-visible {
		transform: none;
	}

	.bw-cities__grid--circle .bw-city__link:hover .bw-city__img {
		transform: none;
	}
}

/* ── Footer link ──────────────────────────────────────────────────── */

.bw-cities__all {
	margin: var(--bw-space-5, 1.5rem) 0 0;
	font-size: var(--bw-text-sm, 0.875rem);
	font-weight: var(--bw-weight-semibold, 600);
}

.bw-cities__all a { color: var(--bw-link, #1d3f65); }

/* ── Hero page heading, when shown ────────────────────────────────── */

.bw-hero__pagetitle:not(.bw-sr-only) {
	position: relative;
	z-index: 2;
	max-width: var(--bw-container, 1280px);
	margin: 0 auto;
	padding: var(--bw-space-5, 1.5rem) var(--bw-gutter, 1.5rem) 0;
	font-size: var(--bw-text-lg, 1.375rem);
	font-weight: var(--bw-weight-semibold, 600);
	line-height: 1.3;
	color: #c3d1e0;
}

/* ── Search tabs on a narrow screen ───────────────────────────────────
 * The tabs are drawn as a single row sitting on top of the panel: no bottom
 * border, pulled down a pixel so the active one joins the panel below it.
 * Wrapped onto two rows that reads as broken — the first row's tabs lose
 * their bottom edge against nothing.
 *
 * So on narrow screens they stay on one row and scroll sideways instead,
 * which is what a phone user expects from a tab strip anyway. The strip
 * scrolls, not the page: overscroll-behavior keeps the swipe inside it.
 * ------------------------------------------------------------------- */

@media (max-width: 720px) {
	.bw-search__tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		/* Room for the focus ring on the first and last tab, which would
		   otherwise be clipped by the scroll container. */
		padding-inline: 3px;
		margin-inline: -3px;
	}

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

	.bw-search__tab {
		flex: 0 0 auto;
		padding-inline: 1rem;
		font-size: var(--bw-text-xs, 0.75rem);
	}
}

/* ══ Goal explorer ════════════════════════════════════════════════════ */

.bw-goals {
	width: 100%;
	max-width: var(--bw-container, 1280px);
	margin-inline: auto;
	padding: var(--bw-section-y, 4rem) var(--bw-gutter, 1.5rem);
}

.bw-goals__head {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-bottom: var(--bw-space-5, 1.5rem);
}

.bw-goals__title {
	margin: 0;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
	font-weight: var(--bw-weight-bold, 700);
	letter-spacing: var(--bw-tracking-tight, -0.02em);
	line-height: 1.15;
	color: var(--bw-text, #171412);
}

.bw-goals__sub {
	margin: 0;
	max-width: 62ch;
	font-size: var(--bw-text-md, 1.125rem);
	line-height: 1.55;
	color: var(--bw-text-muted, #5a544c);
}

/* ── City tabs ────────────────────────────────────────────────────── */

.bw-goals__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bw-space-2, 0.5rem);
	margin-bottom: var(--bw-space-5, 1.5rem);
}

/* Rendered by the script only. Without it the tabs would be controls that
   control nothing, so they stay out of the document until they work. */
.bw-goals__tabs { display: none; }
.bw-goals.is-enhanced .bw-goals__tabs { display: flex; }

.bw-goals__tab {
	appearance: none;
	min-height: 42px;
	padding: 0.55rem 1.2rem;
	border: 1px solid var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-full, 999px);
	background: var(--bw-bg, #fff);
	color: var(--bw-text-muted, #5a544c);
	font: inherit;
	font-size: var(--bw-text-sm, 0.875rem);
	font-weight: var(--bw-weight-semibold, 600);
	cursor: pointer;
	transition:
		background-color var(--bw-duration-fast, 120ms) var(--bw-ease, ease),
		border-color var(--bw-duration-fast, 120ms) var(--bw-ease, ease),
		color var(--bw-duration-fast, 120ms) var(--bw-ease, ease);
}

.bw-goals__tab:hover {
	border-color: var(--bw-accent-400, #c9963c);
	color: var(--bw-text, #171412);
}

.bw-goals__tab[aria-selected="true"] {
	background: var(--bw-brand-900, #0a1928);
	border-color: var(--bw-brand-900, #0a1928);
	color: var(--bw-accent-200, #e8cd93);
}

/* ── Panels ───────────────────────────────────────────────────────── */

.bw-goals__panel + .bw-goals__panel {
	margin-top: var(--bw-space-6, 2rem);
}

.bw-goals.is-enhanced .bw-goals__panel + .bw-goals__panel {
	margin-top: 0;
}

.bw-goals__panel[hidden] { display: none; }

/* The per-panel city name exists for the no-script case, where the panels are
   a stacked list. Once the tabs work it is the tab that names the panel, and
   repeating it would be saying the same word twice. */
.bw-goals__panelname {
	margin: 0 0 var(--bw-space-3, 0.75rem);
	font-size: var(--bw-text-2xs, 0.6875rem);
	font-weight: var(--bw-weight-semibold, 600);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bw-text-subtle, #7a736a);
}

.bw-goals.is-enhanced .bw-goals__panelname { display: none; }

.bw-goals__none {
	margin: 0;
	padding: var(--bw-space-6, 2rem);
	text-align: center;
	color: var(--bw-text-muted, #5a544c);
	border: 1px dashed var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-md, 10px);
}

/* ── Cards ────────────────────────────────────────────────────────── */

.bw-goals__cards {
	display: grid;
	gap: var(--bw-space-3, 0.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

@media (min-width: 1024px) {
	.bw-goals__cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.bw-goals__cardlink {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--bw-space-2, 0.5rem);
	height: 100%;
	padding: var(--bw-space-5, 1.5rem) var(--bw-space-3, 0.75rem);
	border: 1px solid var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-md, 10px);
	background: var(--bw-bg, #fff);
	text-align: center;
	text-decoration: none;
	color: inherit;
	transition:
		transform var(--bw-duration-base, 200ms) var(--bw-ease-out, ease),
		box-shadow var(--bw-duration-base, 200ms) var(--bw-ease, ease),
		border-color var(--bw-duration-base, 200ms) var(--bw-ease, ease);
}

.bw-goals__cardlink:hover,
.bw-goals__cardlink:focus-visible {
	transform: translateY(-4px);
	border-color: var(--bw-accent-300, #d9b062);
	box-shadow: var(--bw-shadow-lg, 0 12px 28px rgb(10 25 40 / 0.12));
}

.bw-goals__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: var(--bw-radius-md, 10px);
	background: var(--bw-accent-50, #fbf5e9);
	color: var(--bw-accent-ink, #8f631d);
	transition: background-color var(--bw-duration-base, 200ms) var(--bw-ease, ease);
}

.bw-goals__cardlink:hover .bw-goals__icon {
	background: var(--bw-accent-100, #f4e6c8);
}

.bw-goals__cardname {
	font-size: var(--bw-text-sm, 0.875rem);
	font-weight: var(--bw-weight-bold, 700);
	line-height: 1.25;
	letter-spacing: var(--bw-tracking-tight, -0.015em);
	color: var(--bw-text, #171412);
	text-wrap: balance;
}

.bw-goals__cardmeta {
	font-size: var(--bw-text-xs, 0.75rem);
	color: var(--bw-text-muted, #5a544c);
	font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
	.bw-goals__cardlink:hover,
	.bw-goals__cardlink:focus-visible { transform: none; }
}

/* ══ Why us ═══════════════════════════════════════════════════════════ */

.bw-why {
	width: 100%;
	background: var(--bw-bg-subtle, #faf8f5);
}

/* The section is full-bleed but its contents are not, so the padding does the
   containing rather than a second wrapper element. */
.bw-why__head,
.bw-why__grid {
	max-width: var(--bw-container, 1280px);
	margin-inline: auto;
	padding-inline: var(--bw-gutter, 1.5rem);
}

.bw-why__head {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding-top: var(--bw-section-y, 4rem);
	margin-bottom: var(--bw-space-6, 2rem);
}

.bw-why__heading {
	margin: 0;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
	font-weight: var(--bw-weight-bold, 700);
	letter-spacing: var(--bw-tracking-tight, -0.02em);
	line-height: 1.15;
	color: var(--bw-text, #171412);
}

.bw-why__sub {
	margin: 0;
	max-width: 62ch;
	font-size: var(--bw-text-md, 1.125rem);
	line-height: 1.55;
	color: var(--bw-text-muted, #5a544c);
}

.bw-why__grid {
	display: grid;
	gap: var(--bw-space-4, 1rem);
	margin: 0;
	padding-bottom: var(--bw-section-y, 4rem);
	list-style: none;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
	.bw-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.bw-why__grid {
		grid-template-columns: repeat(var(--bw-why-cols, 4), minmax(0, 1fr));
	}
}

.bw-why__item {
	display: flex;
	align-items: flex-start;
	gap: var(--bw-space-3, 0.75rem);
	padding: var(--bw-space-5, 1.5rem);
	border: 1px solid var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-md, 10px);
	background: var(--bw-bg, #fff);
}

.bw-why__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: var(--bw-radius-sm, 6px);
	background: var(--bw-brand-50, #eef3f8);
	color: var(--bw-brand-600, #1d3f65);
}

.bw-why__body {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
}

.bw-why__title {
	font-size: var(--bw-text-base, 1rem);
	font-weight: var(--bw-weight-bold, 700);
	line-height: 1.3;
	letter-spacing: var(--bw-tracking-tight, -0.015em);
	color: var(--bw-text, #171412);
	text-wrap: balance;
}

.bw-why__text {
	font-size: var(--bw-text-sm, 0.875rem);
	line-height: 1.6;
	color: var(--bw-text-muted, #5a544c);
}

/* ══ Projects section ═════════════════════════════════════════════════ */

/*
 * The grid widget's own wrapper. On the archive it is a bare grid inside a
 * page that already has a heading and a width; on the homepage it is a
 * section in its own right, so the width and the rhythm live here rather
 * than in the Elementor container.
 */
.bw-projects {
	width: 100%;
	max-width: var(--bw-container, 1280px);
	margin-inline: auto;
	padding: var(--bw-section-y, 4rem) var(--bw-gutter, 1.5rem);
}

.bw-projects__head {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-bottom: var(--bw-space-5, 1.5rem);
}

.bw-projects__title {
	margin: 0;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
	font-weight: var(--bw-weight-bold, 700);
	letter-spacing: var(--bw-tracking-tight, -0.02em);
	line-height: 1.15;
	color: var(--bw-text, #171412);
}

.bw-projects__sub {
	margin: 0;
	max-width: 62ch;
	font-size: var(--bw-text-md, 1.125rem);
	line-height: 1.55;
	color: var(--bw-text-muted, #5a544c);
}

.bw-projects__all {
	margin: var(--bw-space-5, 1.5rem) 0 0;
	font-size: var(--bw-text-sm, 0.875rem);
	font-weight: var(--bw-weight-semibold, 600);
}

.bw-projects__all a { color: var(--bw-link, #1d3f65); }

/* ══ FAQ ══════════════════════════════════════════════════════════════ */

.bw-faq {
	width: 100%;
	max-width: var(--bw-container, 1280px);
	margin-inline: auto;
	padding: var(--bw-section-y, 4rem) var(--bw-gutter, 1.5rem);
}

.bw-faq__head {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-bottom: var(--bw-space-5, 1.5rem);
}

.bw-faq__title {
	margin: 0;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
	font-weight: var(--bw-weight-bold, 700);
	letter-spacing: var(--bw-tracking-tight, -0.02em);
	line-height: 1.15;
	color: var(--bw-text, #171412);
}

.bw-faq__sub {
	margin: 0;
	max-width: 62ch;
	font-size: var(--bw-text-md, 1.125rem);
	line-height: 1.55;
	color: var(--bw-text-muted, #5a544c);
}

/*
 * align-items: start matters more than it looks. Without it, opening one
 * answer stretches its neighbour's box to the same height and the reader
 * watches an unrelated question grow a foot of empty space.
 */
.bw-faq__list {
	display: grid;
	gap: var(--bw-space-3, 0.75rem);
	align-items: start;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
	.bw-faq__list {
		grid-template-columns: repeat(var(--bw-faq-cols, 2), minmax(0, 1fr));
		column-gap: var(--bw-space-5, 1.5rem);
	}
}

.bw-faq__item {
	border: 1px solid var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-md, 10px);
	background: var(--bw-bg, #fff);
	transition: border-color var(--bw-duration-base, 200ms) var(--bw-ease, ease);
}

.bw-faq__item[open] {
	border-color: var(--bw-accent-300, #d9b062);
}

.bw-faq__q {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--bw-space-3, 0.75rem);
	padding: var(--bw-space-4, 1rem);
	cursor: pointer;
	font-size: var(--bw-text-base, 1rem);
	font-weight: var(--bw-weight-semibold, 600);
	line-height: 1.4;
	color: var(--bw-text, #171412);
	list-style: none;
}

/* Safari still paints its own disclosure triangle without this. */
.bw-faq__q::-webkit-details-marker { display: none; }

.bw-faq__q:hover { color: var(--bw-accent-700, #6d4b17); }

.bw-faq__q:focus-visible {
	outline: 2px solid var(--bw-accent-500, #b07d26);
	outline-offset: 2px;
	border-radius: var(--bw-radius-sm, 6px);
}

.bw-faq__qtext { min-width: 0; }

/* The marker is drawn rather than typed: a glyph would inherit the font and
   sit differently in every fallback stack. */
.bw-faq__mark {
	position: relative;
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 0.15em;
	border-radius: var(--bw-radius-full, 999px);
	background: var(--bw-accent-50, #fbf5e9);
}

.bw-faq__mark::before,
.bw-faq__mark::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	width: 10px;
	height: 2px;
	border-radius: 1px;
	background: var(--bw-accent-ink, #8f631d);
	transform: translate(-50%, -50%);
	transition: transform var(--bw-duration-base, 200ms) var(--bw-ease-out, ease);
}

.bw-faq__mark::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.bw-faq__item[open] .bw-faq__mark::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

@media (prefers-reduced-motion: reduce) {
	.bw-faq__mark::before,
	.bw-faq__mark::after { transition: none; }
}

.bw-faq__a {
	padding: 0 var(--bw-space-4, 1rem) var(--bw-space-4, 1rem);
	font-size: var(--bw-text-sm, 0.875rem);
	line-height: 1.65;
	color: var(--bw-text-muted, #5a544c);
}

.bw-faq__a p { margin: 0 0 0.75em; }
.bw-faq__a p:last-child { margin-bottom: 0; }
.bw-faq__a a { color: var(--bw-link, #1d3f65); }

/* ══ Phone layout ═════════════════════════════════════════════════════ */

/* ── City circles, five to a row ──────────────────────────────────── */

/*
 * Five circles across a 375px screen leaves each one about 60px — the size of
 * a story ring, and far too small to hold a city name legibly on top of a
 * photograph. So on the phone the label steps out from under the scrim and
 * sits below the circle in the page's own text colour. Same information, read
 * at a size a person can actually read.
 */
@media (max-width: 619px) {
	.bw-cities__grid--circle {
		grid-template-columns: repeat(var(--bw-cities-cols-m, 5), minmax(0, 1fr));
		column-gap: 0.4rem;
		row-gap: var(--bw-space-4, 1rem);
	}

	/* No text on the picture any more, so nothing to darken it for. */
	.bw-cities__grid--circle .bw-city__media::after { display: none; }

	.bw-cities__grid--circle .bw-city__body {
		position: static;
		padding: 0.35rem 0 0;
		gap: 0;
		color: inherit;
	}

	.bw-cities__grid--circle .bw-city__name {
		font-size: 0.625rem;
		line-height: 1.2;
		letter-spacing: -0.01em;
		text-shadow: none;
		color: var(--bw-text, #171412);
		/* "Jewar Airport" is wider than its circle; it breaks rather than
		   pushing the column out of line. */
		overflow-wrap: anywhere;
	}

	.bw-cities__grid--circle .bw-city__count {
		font-size: 0.5625rem;
		line-height: 1.25;
		text-shadow: none;
		color: var(--bw-text-subtle, #7a736a);
	}

	/* The lift and the deep shadow were sized for a 200px tile; at 60px they
	   look like a bug. The rim on tap is enough. */
	.bw-cities__grid--circle .bw-city__link {
		box-shadow: var(--bw-shadow-sm, 0 2px 6px rgb(10 25 40 / 0.08));
	}

	.bw-cities__grid--circle .bw-city__link:hover,
	.bw-cities__grid--circle .bw-city__link:focus-visible {
		transform: none;
		box-shadow: var(--bw-shadow-md, 0 4px 12px rgb(10 25 40 / 0.09));
	}

	.bw-city__initial { font-size: 1.5rem; }
}

/* ── Header on a phone ────────────────────────────────────────────── */

/*
 * Below Elementor's dropdown breakpoint the header is two things: the
 * wordmark and the toggle. Three items on one row wrapped, which is what put
 * the advisor button on a line of its own and left the toggle stranded in the
 * middle of the bar. The button is not lost — it moves inside the menu, as
 * the two call items at the bottom of it.
 */
@media (max-width: 1024px) {
	/* The row lives on the boxed container's inner element, not on the
	   container itself. */
	#bw-header > .e-con-inner {
		flex-wrap: nowrap;
		align-items: center;
		/*
		 * 24px between three things is generous on a laptop and eight pixels
		 * too many at 390. Measured after the flag went on the number: the
		 * toggle finished at 402 in a 390 bar and the page grew a sideways
		 * scroll. The gap is what gives — it is the one thing in the row
		 * nobody is looking at.
		 */
		column-gap: 12px;
	}

	/* Number and toggle travel together on the right, rather than being
	   spread across the bar by space-between. */
	#bw-header .elementor-widget-bw-call-button {
		margin-inline-start: auto;
	}

	/* Tighter on the tablet, where the pair shares the bar with a toggle. */
	#bw-header .bw-callblock {
		gap: 0.4rem;
	}

	/* Elementor's toggle is 33px square. Thumbs are not. */
	#bw-header .elementor-menu-toggle {
		width: 44px;
		height: 44px;
		justify-content: flex-end;
	}

	/*
	 * Elementor leaves the closed dropdown in the flow at max-height 0, so it
	 * still claims its full width — 239px of invisible menu, which is what
	 * pushed the nav widget onto a second row and left the toggle stranded in
	 * the middle of the bar. Taking the dropdown out of the flow collapses
	 * the widget to the toggle, and the toggle then sits in the corner
	 * because the row is spaced between two items.
	 */
	#bw-header .bw-nav {
		flex: 0 0 auto;
		width: auto;
		/*
		 * The call block is written after the nav in the template, so without
		 * this the toggle lands between the wordmark and the number instead of
		 * in the corner. Sending the nav last puts the toggle where a thumb
		 * reaches for it, with the number beside it.
		 */
		order: 1;
		/*
		 * Elementor makes every widget a positioned box, which would make the
		 * absolute dropdown below anchor to the toggle and open 44px wide.
		 * Standing the widget down hands that job to the header bar, so the
		 * menu spans the screen.
		 */
		position: static;
	}

	#bw-header .bw-nav .elementor-nav-menu--dropdown {
		position: absolute;
		inset-inline: 0;
		top: 100%;
		z-index: 1;
	}
}

/*
 * The call block stays in the bar down to the tablet: a tablet has width to
 * spare beside the wordmark and the toggle, and a number nobody has to open
 * a menu to find is worth the room. On a phone there is no such room — three
 * things in a 375px bar is what wrapped the header in the first place — so
 * below the tablet the block steps aside and the menu carries the number
 * instead. The whole widget goes, not just the anchor inside it: Elementor's
 * wrapper stays in the row otherwise, and its padding pushed the toggle 24px
 * in from the corner.
 */
@media (max-width: 767px) {
	/*
	 * On a phone the bar is the wordmark, the number and the toggle, spread
	 * across it. The consultation button is the one that goes: two full
	 * buttons and a toggle do not fit in 375px, and the menu carries it.
	 *
	 * Note it is the button that is hidden, never the widget: the enquiry
	 * dialog is rendered inside this widget, and display:none on the widget
	 * takes the dialog with it — which is how the menu's "Book a free
	 * consultant" once opened something 0 by 0 pixels.
	 */
	#bw-header .bw-callblock > .bw-cta {
		display: none;
	}

	/* No auto margin here: the row is spaced between three items, and that
	   is what puts the number in the middle. */
	/*
	 * Never shrink. Left shrinkable the widget's box was squeezed to 78px
	 * around a 117px button, so the number spilled out of its own container
	 * and sat over the toggle — with room to spare in the bar, which is why
	 * it looked like a spacing problem rather than a shrinking one.
	 */
	#bw-header .elementor-widget-bw-call-button {
		flex: 0 0 auto;
		margin: 0;
		padding: 0;
	}

	/*
	 * Compact enough to sit between them. The flag stays — it is the clearest
	 * thing on the button at this size — and so does the chevron, because the
	 * button has to say it opens something. Only the padding gives.
	 */
	#bw-header .bw-callchoice__btn {
		gap: 0.32rem;
		padding: 0.5rem 0.55rem;
		font-size: 0.8125rem;
	}

	#bw-header .bw-callchoice__btn .bw-flag {
		width: 17px;
		height: 11px;
	}

	/*
	 * 21px of wordmark plus a number plus a toggle is a squeeze at 360px.
	 * The size is set in the template, so Elementor writes it with three
	 * classes; an ID is what takes it back.
	 */
	#bw-header .bw-wordmark,
	#bw-header .bw-wordmark .elementor-heading-title {
		font-size: 1.1875rem;
	}

	/*
	 * And it must not be the thing that gives. Left to shrink, the flex row
	 * squeezed the wordmark until the brand name broke across two lines as
	 * "Bhumiwal / a", which is worse than a tight bar by some distance.
	 */
	#bw-header .bw-wordmark {
		flex: 0 0 auto;
		white-space: nowrap;
	}
}

/* Small phones: the same three things, with less room to put them in. */
@media (max-width: 380px) {
	#bw-header .bw-callchoice__btn {
		padding: 0.4rem 0.45rem;
		font-size: 0.75rem;
	}
}

/*
 * The open menu has to win against the page it covers. It did not: the hero
 * sits in its own stacking context and painted its veil straight over the
 * bottom of the menu, so the last items were there but neither readable nor
 * tappable. A bar that overlays the page needs to say so once, here, rather
 * than out-bidding each section it happens to meet.
 */
#bw-header {
	position: relative;
	z-index: 1000;
}

/*
 * The call block exists for the menu, not for the bar: on a wide screen the
 * advisor button is already sitting in the header, and repeating the number
 * as nav links would crowd it. Hidden by which nav they are in rather than
 * by viewport, so they follow the menu wherever it collapses.
 */
#bw-header .elementor-nav-menu--main .bw-menu-call {
	/* An ID, because Elementor sets display on its own menu items with a
	   selector this would otherwise only tie with — and it loads later. */
	display: none;
}

/* The number, above the button and in brass — the thing most people on a
   phone actually want from a menu on a property site. */
#bw-header .elementor-nav-menu--dropdown .bw-menu-call--number > a {
	color: var(--bw-accent-300, #d9b062);
	font-size: 1.25rem;
	font-weight: var(--bw-weight-bold, 700);
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

/* The button was landing flush against the bottom edge of the panel, which
   reads as the menu having been cut off rather than finished. */
#bw-header .elementor-nav-menu--dropdown .bw-menu-call--cta {
	padding-bottom: 0.6rem;
}

#bw-header .elementor-nav-menu--dropdown .bw-menu-call--cta > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.6rem 1.1rem;
	border-radius: var(--bw-radius-sm, 6px);
	background: var(--bw-accent-400, #c9963c);
	color: var(--bw-brand-900, #0a1928);
	font-size: var(--bw-text-sm, 0.875rem);
	font-weight: var(--bw-weight-semibold, 600);
	/* Elementor upper-cases its menu items. A button is not a nav label. */
	text-transform: none;
	letter-spacing: 0;
}

#bw-header .elementor-nav-menu--dropdown .bw-menu-call--cta > a:hover,
#bw-header .elementor-nav-menu--dropdown .bw-menu-call--cta > a:focus {
	background: var(--bw-accent-300, #d9b062);
	color: var(--bw-brand-900, #0a1928);
}

/* A rule above the block, so it reads as a way to reach us and not as two
   more pages. */
#bw-header .elementor-nav-menu--dropdown .bw-menu-call--first {
	border-top: 1px solid rgb(217 176 98 / 0.28);
	margin-top: 0.4rem;
	padding-top: 0.5rem;
}

/* ── Number above the button ──────────────────────────────────────── */

/*
 * A number a visitor can read without clicking anything. On a property site
 * that is not decoration: plenty of people ring rather than fill in a form,
 * and a number they have to open a menu to find is a number they do not ring.
 */
/*
 * Two buttons of the same kind, side by side. Stacking them made the bar
 * 121px tall for two lines that sit on one perfectly well, and a header that
 * deep eats the top of every page for no gain.
 */
.bw-callblock {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
}

.bw-callblock .bw-cta {
	justify-content: center;
}

/*
 * Nothing here touches colour or weight: the number is the same button as
 * the one below it and takes its look from .bw-cta. All that is left is what
 * is true of a number and not of a label — digits of even width, and no
 * wrapping mid-number.
 */
.bw-callblock__num {
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

/* ── The number as a two-way button ───────────────────────────────── */

.bw-callchoice {
	position: relative;
}

.bw-callchoice__btn {
	cursor: pointer;
	/* summary is display: list-item, which would put a triangle beside the
	   number and break the button's centring. */
	list-style: none;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

.bw-callchoice__btn::-webkit-details-marker { display: none; }

.bw-callchoice__chev {
	transition: transform var(--bw-duration-base, 200ms) var(--bw-ease-out, ease);
}

.bw-callchoice[open] .bw-callchoice__chev {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.bw-callchoice__chev { transition: none; }
}

.bw-callchoice__menu {
	position: absolute;
	inset-inline-end: 0;
	top: calc(100% + 0.4rem);
	z-index: 20;
	display: flex;
	flex-direction: column;
	min-width: max(100%, 190px);
	padding: 0.3rem;
	border-radius: var(--bw-radius-md, 10px);
	border: 1px solid var(--bw-brand-700, #142f4d);
	background: var(--bw-brand-800, #0e2338);
	box-shadow: var(--bw-shadow-xl, 0 24px 56px rgb(10 25 40 / 0.16));
}

.bw-callchoice__opt {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 44px;
	padding: 0.5rem 0.7rem;
	border-radius: var(--bw-radius-sm, 6px);
	color: #eef3f8;
	font-size: var(--bw-text-sm, 0.875rem);
	font-weight: var(--bw-weight-semibold, 600);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--bw-duration-fast, 120ms) var(--bw-ease, ease);
}

.bw-callchoice__opt:hover,
.bw-callchoice__opt:focus-visible {
	background: var(--bw-brand-700, #142f4d);
	color: #fff;
}

.bw-callchoice__opt svg { flex: none; opacity: 0.85; }

/* The same pair of options in the phone menu, where a popup inside a popup
   would be one layer too many: they are simply the next two rows. */
#bw-header .elementor-nav-menu--dropdown .bw-menu-call--wa > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.6rem 1.1rem;
	border-radius: var(--bw-radius-sm, 6px);
	border: 1px solid rgb(217 176 98 / 0.45);
	color: var(--bw-accent-200, #e8cd93);
	font-size: var(--bw-text-sm, 0.875rem);
	font-weight: var(--bw-weight-semibold, 600);
	text-transform: none;
	letter-spacing: 0;
}

#bw-header .elementor-nav-menu--dropdown .bw-menu-call--wa > a:hover,
#bw-header .elementor-nav-menu--dropdown .bw-menu-call--wa > a:focus {
	background: rgb(217 176 98 / 0.14);
	color: #fff;
}

/* ══ Enquiry modal ════════════════════════════════════════════════════ */

/*
 * A native <dialog>. The browser gives us the backdrop, the focus trap,
 * Escape, and returning focus to the button that opened it — the parts a
 * keyboard or screen-reader user depends on, and the parts home-made modals
 * usually get wrong.
 */
.bw-modal {
	width: min(30rem, calc(100vw - 2rem));
	max-height: min(42rem, calc(100dvh - 2rem));
	padding: 0;
	border: 1px solid var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-lg, 14px);
	background: var(--bw-bg, #fff);
	color: var(--bw-text, #171412);
	box-shadow: var(--bw-shadow-xl, 0 24px 56px rgb(10 25 40 / 0.16));
	overflow: visible;
}

.bw-modal::backdrop {
	background: rgb(10 25 40 / 0.55);
	backdrop-filter: blur(2px);
}

.bw-modal__x {
	position: absolute;
	inset-block-start: 0.6rem;
	inset-inline-end: 0.6rem;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: var(--bw-radius-full, 999px);
	background: transparent;
	color: var(--bw-text-subtle, #7a736a);
	cursor: pointer;
}

.bw-modal__x:hover,
.bw-modal__x:focus-visible {
	background: var(--bw-bg-subtle, #faf8f5);
	color: var(--bw-text, #171412);
}

.bw-modal__title {
	margin: 0;
	padding-inline-end: 2.5rem;
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	font-weight: var(--bw-weight-bold, 700);
	letter-spacing: var(--bw-tracking-tight, -0.02em);
	line-height: 1.2;
}

.bw-modal__intro {
	margin: 0;
	font-size: var(--bw-text-sm, 0.875rem);
	line-height: 1.55;
	color: var(--bw-text-muted, #5a544c);
}

/* ── The form inside it ───────────────────────────────────────────── */

.bw-lf {
	display: flex;
	flex-direction: column;
	gap: var(--bw-space-3, 0.75rem);
	/* The form scrolls, not the dialog, so the close button stays put. */
	max-height: inherit;
	overflow-y: auto;
	padding: var(--bw-space-5, 1.5rem);
}

.bw-lf__field {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.bw-lf__label {
	font-size: var(--bw-text-2xs, 0.6875rem);
	font-weight: var(--bw-weight-semibold, 600);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bw-text-subtle, #7a736a);
}

.bw-lf__opt {
	text-transform: none;
	letter-spacing: 0;
	font-weight: var(--bw-weight-normal, 400);
	opacity: 0.8;
}

.bw-lf__control {
	width: 100%;
	min-height: 44px;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-sm, 6px);
	background: var(--bw-bg, #fff);
	color: var(--bw-text, #171412);
	font: inherit;
	font-size: var(--bw-text-base, 1rem);
}

/* 1rem, not smaller: iOS Safari zooms the page when a field under 16px
   takes focus, and it does not zoom back out afterwards. */
.bw-lf__control:focus-visible {
	outline: 2px solid var(--bw-accent-500, #b07d26);
	outline-offset: 1px;
	border-color: var(--bw-accent-400, #c9963c);
}

textarea.bw-lf__control {
	min-height: 84px;
	resize: vertical;
	line-height: 1.5;
}

.bw-lf__submit {
	justify-content: center;
	margin-top: 0.2rem;
}

.bw-lf__note {
	margin: 0;
	font-size: var(--bw-text-xs, 0.75rem);
	line-height: 1.45;
	color: var(--bw-text-subtle, #7a736a);
}

.bw-lf__status {
	margin: 0;
	font-size: var(--bw-text-sm, 0.875rem);
	line-height: 1.5;
}

/* Nothing to say yet: an empty paragraph must not leave a gap that reads as
   a missing line. */
.bw-lf__status:empty {
	display: none;
}

.bw-lf__status[data-state="ok"] {
	color: var(--bw-accent-700, #6d4b17);
	font-weight: var(--bw-weight-semibold, 600);
}

.bw-lf__status[data-state="error"] {
	color: #a3261d;
	font-weight: var(--bw-weight-semibold, 600);
}

.bw-lf.is-sending .bw-lf__submit {
	opacity: 0.6;
	pointer-events: none;
}

/*
 * Off the screen rather than display:none. A bot that skips hidden fields
 * checks for display:none first; this one is invisible and unreachable by
 * tab or by pointer, but still a field as far as a script filling everything
 * in is concerned.
 */
.bw-lf__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ══ Images that must fill their box ══════════════════════════════════ */

/*
 * Elementor ships `.elementor img { height: auto }`. That is one class and
 * one element, which out-ranks a single class of ours, so every `height:100%`
 * on an image in this stylesheet was being thrown away — silently, because an
 * image at its natural ratio looks like a decision rather than a fault.
 *
 * It showed on the hero: at 375px the slide is 620px tall and the photograph
 * rendered 211, leaving four hundred pixels of navy under it with the heading
 * sitting on the flat colour instead of on the picture. The card and circle
 * images got away with it only because their sources happen to be cut to the
 * ratio their boxes ask for — the same fault, waiting for one image that is
 * not.
 *
 * Two classes each, so they win on their own terms rather than by !important.
 */
.bw-hero .bw-hero__img,
.bw-card .bw-card__img,
.bw-city .bw-city__img {
	height: 100%;
}

/* ── The hero scrim on a narrow screen ────────────────────────────── */

/*
 * The wide scrim runs left to right: dark where the text is, clear by three
 * quarters across, so the photograph survives on the right. That works at
 * 1280px. At 375px the same slide is a portrait crop and the text lands
 * wherever the picture happens to be — over a bright sky on one slide and a
 * dark road on the next.
 *
 * So below the tablet the scrim runs bottom to top instead, and the text
 * comes down to meet it. The alpha under the text is set from the worst case
 * a photograph can be — pure white — where 0.94 navy still gives the heading
 * 8:1 and the sub-line 5.8:1. On a real photograph it is better than that.
 */
@media (max-width: 1023px) {
	.bw-hero__veil {
		background: linear-gradient(
			0deg,
			rgb(10 25 40 / 0.95) 0%,
			rgb(10 25 40 / 0.94) 52%,
			rgb(10 25 40 / 0.55) 74%,
			rgb(10 25 40 / 0.10) 92%
		);
	}

	.bw-hero__body {
		align-self: end;
	}

	/* Too dim to survive a bright photograph: on the wide layout this sits
	   on a flat dark ground, here it does not. */
	.bw-hero__meta {
		color: #c3d1e0;
	}
}

/*
 * The narrowest phones still in use, around 320px. At that width the three
 * things in the bar were 12px wider than the bar, so the number sat on top of
 * the toggle. Everything gives a little — the gutter, the wordmark and the
 * number — rather than one thing giving a lot.
 */
@media (max-width: 340px) {
	#bw-header > .e-con-inner {
		padding-inline: 0.75rem;
	}

	#bw-header .bw-wordmark,
	#bw-header .bw-wordmark .elementor-heading-title {
		font-size: 1.0625rem;
	}

	#bw-header .bw-callchoice__btn {
		padding: 0.4rem 0.35rem;
		font-size: 0.6875rem;
	}
}

/* ── Add Property ─────────────────────────────────────────────────── */

/* One question, so the panel is narrower than the enquiry form. */
.bw-modal--tight {
	width: min(24rem, calc(100vw - 2rem));
}

.bw-addprop__ask {
	margin: 0.35rem 0 0;
	font-size: var(--bw-text-md, 1.125rem);
	font-weight: var(--bw-weight-semibold, 600);
	line-height: 1.3;
	color: var(--bw-text, #171412);
}

.bw-addprop__why {
	margin: 0;
	font-size: var(--bw-text-sm, 0.875rem);
	line-height: 1.5;
	color: var(--bw-text-muted, #5a544c);
}

/*
 * The country code is a label beside the box, not a value inside it: a
 * prefix typed into the field is a prefix somebody can delete, and then ten
 * digits arrive with no country on them.
 */
.bw-phonebox {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-sm, 6px);
	background: var(--bw-bg, #fff);
	overflow: hidden;
}

.bw-phonebox:focus-within {
	outline: 2px solid var(--bw-accent-500, #b07d26);
	outline-offset: 1px;
	border-color: var(--bw-accent-400, #c9963c);
}

.bw-phonebox__cc {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	flex: none;
	padding: 0 0.7rem;
	border-inline-end: 1px solid var(--bw-border, #e6e1da);
	background: var(--bw-bg-subtle, #faf8f5);
	color: var(--bw-text, #171412);
	font-size: var(--bw-text-base, 1rem);
	font-weight: var(--bw-weight-semibold, 600);
	font-variant-numeric: tabular-nums;
}

.bw-phonebox__flag {
	display: flex;
	border-radius: 2px;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgb(10 25 40 / 0.12);
}

/* The box draws the border and the focus ring now, so the input inside must
   draw neither. */
.bw-phonebox__input.bw-lf__control {
	border: 0;
	border-radius: 0;
	background: transparent;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
}

.bw-phonebox__input.bw-lf__control:focus-visible {
	outline: none;
}

/*
 * In the header this widget renders only its dialog — the button lives in the
 * menu. A zero-width box keeps it out of the row without display:none, which
 * would take the dialog with it. An open dialog is position: fixed and does
 * not care what size its parent is.
 */
#bw-header .elementor-widget-bw-add-property {
	flex: 0 0 auto;
	width: 0;
	margin: 0;
	padding: 0;
}

/* The Add Property entry is a button too, outlined so the pair reads as two
   different offers rather than the same one twice. */
#bw-header .elementor-nav-menu--dropdown .bw-menu-call--addprop > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.6rem 1.1rem;
	border-radius: var(--bw-radius-sm, 6px);
	border: 1px solid rgb(217 176 98 / 0.45);
	color: var(--bw-accent-200, #e8cd93);
	font-size: var(--bw-text-sm, 0.875rem);
	font-weight: var(--bw-weight-semibold, 600);
	text-transform: none;
	letter-spacing: 0;
}

#bw-header .elementor-nav-menu--dropdown .bw-menu-call--addprop > a:hover,
#bw-header .elementor-nav-menu--dropdown .bw-menu-call--addprop > a:focus {
	background: rgb(217 176 98 / 0.14);
	color: #fff;
}

#bw-header .elementor-nav-menu--dropdown .bw-menu-call--addprop {
	padding-bottom: 0.6rem;
}

/* ── The sent state ───────────────────────────────────────────────── */

/*
 * Once it is sent there is nothing left to fill in, so everything but the
 * confirmation and the close button stands down. Hiding the fields rather
 * than leaving a filled-in form under a one-line message is what stops
 * somebody sending the same number twice while the box is closing.
 */
.bw-lf.is-sent {
	align-items: center;
	text-align: center;
	min-height: 8rem;
	justify-content: center;
}

.bw-lf.is-sent > *:not(.bw-lf__status):not(.bw-modal__x) {
	display: none;
}

.bw-lf.is-sent .bw-lf__status {
	font-size: var(--bw-text-md, 1.125rem);
	line-height: 1.45;
	max-width: 26ch;
}

.bw-lf.is-sent .bw-lf__status::before {
	content: "✓";
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin: 0 auto 0.7rem;
	border-radius: var(--bw-radius-full, 999px);
	background: var(--bw-accent-400, #c9963c);
	color: var(--bw-brand-900, #0a1928);
	font-size: 1.5rem;
	line-height: 1;
}

/* ══ Listing page ═════════════════════════════════════════════════════ */

/* ── Head ─────────────────────────────────────────────────────────── */

.bw-arhead {
	display: flex;
	flex-direction: column;
	gap: var(--bw-space-3, 0.75rem);
}

.bw-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--bw-text-xs, 0.75rem);
	color: var(--bw-text-subtle, #7a736a);
}

.bw-crumbs li + li::before {
	content: "/";
	margin-inline-end: 0.35rem;
	opacity: 0.55;
}

.bw-crumbs a {
	color: inherit;
	text-decoration: none;
}

.bw-crumbs a:hover { text-decoration: underline; }

.bw-crumbs [aria-current] {
	color: var(--bw-accent-ink, #8f631d);
	font-weight: var(--bw-weight-semibold, 600);
}

.bw-arhead__title {
	margin: 0;
	font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem);
	font-weight: 800;
	letter-spacing: var(--bw-tracking-tight, -0.025em);
	line-height: 1.1;
	color: var(--bw-text, #171412);
}

.bw-arhead__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--bw-space-3, 0.75rem);
	padding: var(--bw-space-3, 0.75rem) var(--bw-space-4, 1rem);
	border: 1px solid var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-md, 10px);
	background: var(--bw-bg, #fff);
}

.bw-arhead__count {
	margin: 0;
	font-size: var(--bw-text-sm, 0.875rem);
	font-weight: var(--bw-weight-semibold, 600);
	color: var(--bw-text, #171412);
	font-variant-numeric: tabular-nums;
}

.bw-arhead__tools {
	display: flex;
	align-items: center;
	gap: var(--bw-space-3, 0.75rem);
}

/* ── Sort ─────────────────────────────────────────────────────────── */

.bw-sort {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.bw-sort__label {
	font-size: var(--bw-text-2xs, 0.6875rem);
	font-weight: var(--bw-weight-semibold, 600);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bw-text-subtle, #7a736a);
}

.bw-sort__select {
	min-height: 38px;
	padding: 0.35rem 0.6rem;
	border: 1px solid var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-sm, 6px);
	background: var(--bw-bg, #fff);
	color: var(--bw-text, #171412);
	font: inherit;
	font-size: var(--bw-text-sm, 0.875rem);
}

.bw-sort__go {
	min-height: 38px;
	padding: 0.35rem 0.7rem;
	border: 1px solid var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-sm, 6px);
	background: var(--bw-bg-subtle, #faf8f5);
	color: var(--bw-text, #171412);
	font: inherit;
	font-size: var(--bw-text-sm, 0.875rem);
	cursor: pointer;
}

/* Hidden once the script submits on change; before that it is the only way
   to apply the sort at all. */
.bw-sort.is-enhanced .bw-sort__go { display: none; }

/* ── Grid / list switch ───────────────────────────────────────────── */

/* Drawn only once the script has run: a switch that changes nothing is worse
   than no switch. */
.bw-view {
	gap: 2px;
	padding: 2px;
	border: 1px solid var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-sm, 6px);
	background: var(--bw-bg-subtle, #faf8f5);
	display: none;
}

.bw-view.is-enhanced { display: inline-flex; }

.bw-view__btn {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--bw-text-muted, #5a544c);
	cursor: pointer;
}

.bw-view__btn[aria-pressed="true"] {
	background: var(--bw-brand-900, #0a1928);
	color: var(--bw-accent-200, #e8cd93);
}

/* ── Layout ───────────────────────────────────────────────────────── */

/*
 * One column. The filters used to hold a 280px rail down the side of every
 * listing page, which spent a third of the width on a control most visitors
 * never touch; they are a button now, and the grid has the page.
 */
#bw-listing {
	display: flex;
	flex-direction: column;
	gap: var(--bw-space-5, 1.5rem);
}

/* ── Filter panel ─────────────────────────────────────────────────── */

.bw-fp {
	border: 1px solid var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-md, 10px);
	background: var(--bw-bg, #fff);
}

.bw-fp__toggle {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 48px;
	padding: 0.7rem var(--bw-space-4, 1rem);
	cursor: pointer;
	list-style: none;
	font-size: var(--bw-text-sm, 0.875rem);
	font-weight: var(--bw-weight-semibold, 600);
	color: var(--bw-text, #171412);
	border-radius: var(--bw-radius-md, 10px);
	transition: background-color var(--bw-duration-fast, 120ms) var(--bw-ease, ease);
}

/* Safari draws its own triangle and ignores list-style on the summary. */
.bw-fp__toggle::-webkit-details-marker { display: none; }

.bw-fp__toggle:hover { background: var(--bw-bg-subtle, #faf8f5); }

.bw-fp__toggle:focus-visible {
	outline: 2px solid var(--bw-accent-400, #c9963c);
	outline-offset: -2px;
}

.bw-fp__togglelabel { flex: 1 1 auto; }

.bw-fp__count {
	display: inline-grid;
	place-items: center;
	min-width: 22px;
	height: 22px;
	padding: 0 0.4rem;
	border-radius: var(--bw-radius-full, 999px);
	background: var(--bw-accent-400, #c9963c);
	color: var(--bw-brand-900, #0a1928);
	font-size: var(--bw-text-2xs, 0.6875rem);
	font-weight: var(--bw-weight-bold, 700);
	font-variant-numeric: tabular-nums;
}

.bw-fp__togglechev {
	flex: none;
	color: var(--bw-text-subtle, #7a736a);
	transition: transform var(--bw-duration-base, 200ms) var(--bw-ease-out, ease);
}

.bw-fp[open] .bw-fp__togglechev { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
	.bw-fp__togglechev { transition: none; }
}

/*
 * The panel drops below the button and pushes the grid down rather than
 * floating over it. An overlay this tall would run off the bottom of a
 * phone with nowhere to scroll, and clip against every stacking context
 * Elementor puts in the way.
 */
.bw-fp__form {
	display: grid;
	gap: var(--bw-space-4, 1rem);
	padding: var(--bw-space-4, 1rem);
	border-block-start: 1px solid var(--bw-border, #e6e1da);
	grid-template-columns: minmax(0, 1fr);
	align-items: end;
}

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

@media (min-width: 1000px) {
	.bw-fp__form { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* The things that are not one field wide. */
/* A switch is one cell like any other field; only these two want the row. */
.bw-fp__head,
.bw-fp__fold { grid-column: 1 / -1; }

.bw-fp__head {
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: 0.5rem;
	order: 99;
}

.bw-fp__go {
	justify-content: center;
	grid-column: 1 / -1;
	justify-self: start;
}

@media (min-width: 1000px) {
	.bw-fp__go { grid-column: auto; justify-self: stretch; }
}

.bw-fp__field {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.bw-fp__label {
	font-size: var(--bw-text-2xs, 0.6875rem);
	font-weight: var(--bw-weight-semibold, 600);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bw-text-subtle, #7a736a);
}

.bw-fp__control {
	width: 100%;
	min-height: 42px;
	padding: 0.5rem 0.7rem;
	border: 1px solid var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-sm, 6px);
	background: var(--bw-bg, #fff);
	color: var(--bw-text, #171412);
	font: inherit;
	/* 1rem, not smaller: iOS Safari zooms the page when a field under 16px
	   takes focus, and it does not zoom back out afterwards. */
	font-size: var(--bw-text-base, 1rem);
}

.bw-fp__control:focus-visible {
	outline: 2px solid var(--bw-accent-500, #b07d26);
	outline-offset: 1px;
	border-color: var(--bw-accent-400, #c9963c);
}

/* ── Switches ─────────────────────────────────────────────────────── */

.bw-fp__switchrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	min-height: 40px;
}

.bw-fp__switchlabel {
	font-size: var(--bw-text-sm, 0.875rem);
	color: var(--bw-text, #171412);
	cursor: pointer;
}

.bw-fp__switch {
	position: relative;
	flex: none;
	width: 44px;
	height: 26px;
}

/*
 * The checkbox itself is what the browser and the keyboard use, so it is
 * still there, still focusable and still the thing that carries the state —
 * it is simply invisible over the track it draws.
 */
.bw-fp__switch input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 1;
}

.bw-fp__track {
	position: absolute;
	inset: 0;
	border-radius: var(--bw-radius-full, 999px);
	background: var(--bw-border, #e6e1da);
	transition: background-color var(--bw-duration-fast, 120ms) var(--bw-ease, ease);
}

.bw-fp__track::after {
	content: "";
	position: absolute;
	inset-block-start: 3px;
	inset-inline-start: 3px;
	width: 20px;
	height: 20px;
	border-radius: var(--bw-radius-full, 999px);
	background: #fff;
	box-shadow: 0 1px 3px rgb(10 25 40 / 0.25);
	transition: transform var(--bw-duration-base, 200ms) var(--bw-ease-out, ease);
}

.bw-fp__switch input:checked ~ .bw-fp__track {
	background: var(--bw-accent-400, #c9963c);
}

.bw-fp__switch input:checked ~ .bw-fp__track::after {
	transform: translateX(18px);
}

.bw-fp__switch input:focus-visible ~ .bw-fp__track {
	outline: 2px solid var(--bw-accent-500, #b07d26);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.bw-fp__track,
	.bw-fp__track::after { transition: none; }
}

/* ── The fold ─────────────────────────────────────────────────────── */

.bw-fp__fold {
	border-top: 1px solid var(--bw-border, #e6e1da);
	padding-top: var(--bw-space-3, 0.75rem);
}

.bw-fp__foldbtn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	min-height: 40px;
	list-style: none;
	cursor: pointer;
	font-size: var(--bw-text-sm, 0.875rem);
	font-weight: var(--bw-weight-semibold, 600);
	color: var(--bw-text, #171412);
}

.bw-fp__foldbtn::-webkit-details-marker { display: none; }

.bw-fp__chev {
	transition: transform var(--bw-duration-base, 200ms) var(--bw-ease-out, ease);
}

.bw-fp__fold[open] .bw-fp__chev { transform: rotate(180deg); }

.bw-fp__foldbody {
	display: flex;
	flex-direction: column;
	gap: var(--bw-space-3, 0.75rem);
	padding-top: var(--bw-space-2, 0.5rem);
}

.bw-fp__go {
	justify-content: center;
	margin-top: 0.2rem;
}

/* ── Card additions ───────────────────────────────────────────────── */

.bw-card__type {
	position: absolute;
	inset-block-end: var(--bw-space-3, 0.75rem);
	inset-inline-start: var(--bw-space-3, 0.75rem);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	padding: 0.3rem 0.6rem;
	border-radius: var(--bw-radius-xs, 4px);
	background: rgb(255 255 255 / 0.94);
	color: var(--bw-brand-900, #0a1928);
	font-size: var(--bw-text-xs, 0.75rem);
	font-weight: var(--bw-weight-semibold, 600);
}

.bw-card__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.6rem;
}

.bw-card__deal {
	flex: none;
	padding: 0.2rem 0.5rem;
	border-radius: var(--bw-radius-xs, 4px);
	background: var(--bw-accent-50, #fbf5e9);
	color: var(--bw-accent-700, #6d4b17);
	font-size: var(--bw-text-2xs, 0.6875rem);
	font-weight: var(--bw-weight-semibold, 600);
	white-space: nowrap;
}

.bw-card__place {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--bw-text-xs, 0.75rem);
}

.bw-card__place .bw-pin { flex: none; opacity: 0.75; }

.bw-card__foot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.6rem;
	margin-top: auto;
	padding-top: var(--bw-space-2, 0.5rem);
}

.bw-card__foot .bw-card__price { margin: 0; padding: 0; }
.bw-card__foot .bw-card__rera { text-align: end; }

/* ── List view ────────────────────────────────────────────────────── */

/*
 * The same cards, laid on their side. A separate template would be a second
 * place to keep the card honest; one class that changes the box is not.
 */
@media (min-width: 720px) {
	.bw-grid.is-list {
		grid-template-columns: minmax(0, 1fr);
	}

	.bw-grid.is-list .bw-card {
		flex-direction: row;
	}

	.bw-grid.is-list .bw-card__media {
		flex: 0 0 34%;
		max-width: 300px;
		aspect-ratio: auto;
	}

	.bw-grid.is-list .bw-card__body {
		padding: var(--bw-space-5, 1.5rem);
	}

	.bw-grid.is-list .bw-card__usp {
		max-width: 70ch;
	}
}

/* ══ Single property ══════════════════════════════════════════════════ */


/* ── Gallery ──────────────────────────────────────────────────────── */

.bw-pg {
	display: flex;
	flex-direction: column;
	gap: var(--bw-space-2, 0.5rem);
}

/*
 * One large picture with the rest beside it. Below 900px they drop under it
 * in two columns — beside it they would each be about 80px wide, which shows
 * nothing.
 */
.bw-pg__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bw-space-2, 0.5rem);
}

.bw-pg__aside,
.bw-pg__asidein {
	display: flex;
	flex-direction: column;
	gap: var(--bw-space-2, 0.5rem);
	min-width: 0;
}

.bw-pg__tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bw-space-2, 0.5rem);
}

.bw-pg__main,
.bw-pg__tile {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--bw-radius-md, 10px);
	background: var(--bw-brand-800, #0e2338);
}

.bw-pg__main { aspect-ratio: 16 / 10; }
.bw-pg__tile { aspect-ratio: 4 / 3; }

@media (min-width: 900px) {
	.bw-pg__grid { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }

	/*
	 * The large picture alone sets the height of the row. The column beside it
	 * is taken out of the flow and stretched over that height, so its tiles
	 * divide whatever is left once the ask bar has had its own — two stack,
	 * three stack, four go two by two, and the column always finishes level
	 * with the picture. Left in flow the tiles sized themselves from their own
	 * proportions, overran the picture by about 140px, and left the gap under
	 * it that this is here to close.
	 */
	.bw-pg__aside { position: relative; display: block; }

	.bw-pg__asidein { position: absolute; inset: 0; }

	.bw-pg__tiles {
		flex: 1;
		min-height: 0;
		grid-template-columns: repeat(var(--bw-pg-tcols, 2), minmax(0, 1fr));
		grid-auto-rows: 1fr;
	}

	.bw-pg__tile { aspect-ratio: auto; min-height: 0; }
}

.bw-pg .bw-pg__mainimg,
.bw-pg .bw-pg__tileimg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--bw-duration-slow, 320ms) var(--bw-ease-out, ease);
}

.bw-pg__main:hover .bw-pg__mainimg,
.bw-pg__tile:hover .bw-pg__tileimg { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
	.bw-pg__main:hover .bw-pg__mainimg,
	.bw-pg__tile:hover .bw-pg__tileimg { transform: none; }
}

.bw-pg__badge {
	position: absolute;
	inset-block-end: var(--bw-space-3, 0.75rem);
	inset-inline-end: var(--bw-space-3, 0.75rem);
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.7rem;
	border-radius: var(--bw-radius-full, 999px);
	background: rgb(10 25 40 / 0.78);
	color: #fff;
	font-size: var(--bw-text-xs, 0.75rem);
	font-weight: var(--bw-weight-semibold, 600);
}

/* "+6" over the last tile when the mosaic cannot hold them all. */
.bw-pg__plus {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgb(10 25 40 / 0.62);
	color: #fff;
	font-size: var(--bw-text-lg, 1.125rem);
	font-weight: var(--bw-weight-bold, 700);
}

/* ── Ask for photographs ──────────────────────────────────────────── */

.bw-pg__ask {
	display: flex;
	flex: 0 0 auto;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	padding: 0.7rem var(--bw-space-3, 0.75rem);
	border: 1px solid var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-md, 10px);
	background: var(--bw-bg-subtle, #faf8f5);
}

.bw-pg__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 15rem;
	padding: var(--bw-space-5, 1.5rem);
	text-align: center;
	border: 1px dashed var(--bw-border-strong, #d5cec4);
	border-radius: var(--bw-radius-md, 10px);
	background: var(--bw-bg-subtle, #faf8f5);
}

.bw-pg__asktitle,
.bw-pg__emptytitle {
	margin: 0;
	font-size: var(--bw-text-sm, 0.875rem);
	font-weight: var(--bw-weight-semibold, 600);
	color: var(--bw-text, #171412);
}

.bw-pg__emptytitle { font-size: var(--bw-text-lg, 1.125rem); }

.bw-pg__emptynote {
	margin: 0;
	max-width: 34rem;
	font-size: var(--bw-text-sm, 0.875rem);
	color: var(--bw-text-muted, #5a544c);
}

/*
 * WhatsApp's own green rather than the site's ink: the button says which app
 * it opens before the label is read. The darker of the two brand greens,
 * because white on #25D366 is 1.9:1 and on #128C7E still only 4.1:1 —
 * this one clears 4.5:1, which is the line a 14px label has to clear.
 */
.bw-pg__asklink {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 40px;
	padding: 0.45rem 0.95rem;
	border-radius: var(--bw-radius-full, 999px);
	background: #0f7f72;
	color: #fff;
	font-size: var(--bw-text-sm, 0.875rem);
	font-weight: var(--bw-weight-semibold, 600);
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--bw-duration-fast, 120ms) var(--bw-ease, ease);
}

.bw-pg__asklink:hover,
.bw-pg__asklink:focus-visible { background: #0a5f55; color: #fff; }

.bw-pg__asklink svg { flex: none; }

/* ── Viewer ───────────────────────────────────────────────────────── */

.bw-pgv {
	width: 100vw;
	max-width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	padding: 0;
	border: 0;
	background: rgb(10 25 40 / 0.97);
}

.bw-pgv::backdrop { background: rgb(10 25 40 / 0.9); }

.bw-pgv__stage {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	padding: 3.5rem 1rem;
}

.bw-pgv__slide { margin: 0; }
.bw-pgv__slide[hidden] { display: none; }

.bw-pgv .bw-pgv__img {
	max-width: min(100%, 1400px);
	max-height: calc(100dvh - 7rem);
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

.bw-pgv__x,
.bw-pgv__nav {
	position: absolute;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: var(--bw-radius-full, 999px);
	background: rgb(255 255 255 / 0.1);
	color: #fff;
	cursor: pointer;
	transition: background-color var(--bw-duration-fast, 120ms) var(--bw-ease, ease);
}

.bw-pgv__x:hover,
.bw-pgv__nav:hover { background: rgb(255 255 255 / 0.22); }

.bw-pgv__x {
	inset-block-start: 0.9rem;
	inset-inline-end: 0.9rem;
	z-index: 2;
}

.bw-pgv__nav { inset-block-start: 50%; transform: translateY(-50%); }
.bw-pgv__nav--prev { inset-inline-start: 0.9rem; }
.bw-pgv__nav--next { inset-inline-end: 0.9rem; }

.bw-pgv__count {
	position: absolute;
	inset-block-end: 1rem;
	inset-inline: 0;
	margin: 0;
	text-align: center;
	color: rgb(255 255 255 / 0.8);
	font-size: var(--bw-text-sm, 0.875rem);
	font-variant-numeric: tabular-nums;
}

/* ── Detail ───────────────────────────────────────────────────────── */

.bw-pd {
	display: flex;
	flex-direction: column;
	gap: var(--bw-space-4, 1rem);
}

.bw-pd__head {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.bw-pd__title {
	margin: 0;
	font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
	font-weight: 800;
	letter-spacing: var(--bw-tracking-tight, -0.025em);
	line-height: 1.12;
	color: var(--bw-text, #171412);
}

.bw-pd__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
}

.bw-pd__place {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	font-size: var(--bw-text-sm, 0.875rem);
	color: var(--bw-text-muted, #5a544c);
}

.bw-pd__price {
	margin: 0.2rem 0 0;
	font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem);
	font-weight: 800;
	letter-spacing: var(--bw-tracking-tight, -0.02em);
	font-variant-numeric: tabular-nums;
	color: var(--bw-accent-ink, #8f631d);
}

.bw-pd__by {
	margin: 0;
	font-size: var(--bw-text-sm, 0.875rem);
	color: var(--bw-text-muted, #5a544c);
}

/*
 * Section headings, centred, with a short brass rule under them.
 *
 * Centred text with nothing beneath it reads as a line that has lost its
 * column; the rule turns it into a section marker, which is what these are.
 *
 * The size deliberately stops short of the scale the home page uses for its
 * section titles (up to 2.125rem). Those sit alone in their sections — here
 * ten of them share a column with a 2.4rem H1, and at the home-page size
 * they argue with it. This clamp is plainly a section heading and plainly
 * under the project's name, which is the order a reader needs.
 */
.bw-pd__h {
	margin: var(--bw-space-7, 3rem) 0 var(--bw-space-4, 1rem);
	font-size: clamp(1.375rem, 1.15rem + 0.85vw, 1.75rem);
	font-weight: var(--bw-weight-bold, 700);
	letter-spacing: var(--bw-tracking-tight, -0.02em);
	line-height: 1.2;
	text-align: center;
	text-wrap: balance;
	color: var(--bw-text, #171412);
}

.bw-pd__h::after {
	content: "";
	display: block;
	width: 3rem;
	height: 3px;
	margin: 0.7rem auto 0;
	border-radius: var(--bw-radius-full, 999px);
	background: var(--bw-accent-400, #c9963c);
}

/* ── Facts ────────────────────────────────────────────────────────── */

/*
 * Laid out as a wrapping row rather than a fixed grid. A grid leaves the
 * last row short when a project is missing a fact, and the gap-as-border
 * trick paints that empty cell in the border colour — a hole in the middle
 * of the panel. Wrapped flex items share the last row out between them
 * instead, so the block is always a clean rectangle however many facts a
 * project actually has.
 */
.bw-pd__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	margin: var(--bw-space-2, 0.5rem) 0 0;
	padding: 0;
	border: 1px solid var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-md, 10px);
	background: var(--bw-border, #e6e1da);
	overflow: hidden;
}

.bw-pd__fact { flex: 1 1 calc(50% - 1px); }

@media (min-width: 640px) {
	.bw-pd__fact { flex: 1 1 calc(33.333% - 1px); }
}

.bw-pd__fact {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: var(--bw-space-3, 0.75rem) var(--bw-space-4, 1rem);
	background: var(--bw-bg, #fff);
}

.bw-pd__fact dt {
	font-size: var(--bw-text-2xs, 0.6875rem);
	font-weight: var(--bw-weight-semibold, 600);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bw-text-subtle, #7a736a);
}

.bw-pd__fact dd {
	margin: 0;
	font-size: var(--bw-text-base, 1rem);
	font-weight: var(--bw-weight-semibold, 600);
	color: var(--bw-text, #171412);
}

/* ── Prose and lists ──────────────────────────────────────────────── */

.bw-pd__prose {
	font-size: var(--bw-text-base, 1rem);
	line-height: 1.65;
	color: var(--bw-text-muted, #5a544c);
	max-width: 72ch;
}

.bw-pd__prose p { margin: 0 0 0.9em; }
.bw-pd__prose p:last-child { margin-bottom: 0; }

.bw-pd__ticks {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
	.bw-pd__ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.bw-pd__ticks li {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: var(--bw-text-sm, 0.875rem);
	line-height: 1.5;
	color: var(--bw-text, #171412);
}

.bw-pd__ticks svg {
	flex: none;
	margin-top: 0.15em;
	color: var(--bw-accent-ink, #8f631d);
}

.bw-pd__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bw-pd__chip {
	padding: 0.4rem 0.75rem;
	border: 1px solid var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-full, 999px);
	background: var(--bw-bg-subtle, #faf8f5);
	font-size: var(--bw-text-sm, 0.875rem);
	color: var(--bw-text, #171412);
}

.bw-pd__note {
	margin: 0;
	font-size: var(--bw-text-xs, 0.75rem);
	line-height: 1.5;
	color: var(--bw-text-subtle, #7a736a);
}

.bw-pd__address {
	display: flex;
	align-items: flex-start;
	gap: 0.4rem;
	margin: 0;
	font-size: var(--bw-text-sm, 0.875rem);
	line-height: 1.5;
	color: var(--bw-text-muted, #5a544c);
}

.bw-pd__address .bw-pin { flex: none; margin-top: 0.2em; }

.bw-pd__near {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-md, 10px);
	overflow: hidden;
}

.bw-pd__near li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.6rem var(--bw-space-4, 1rem);
	font-size: var(--bw-text-sm, 0.875rem);
}

.bw-pd__near li + li { border-top: 1px solid var(--bw-border, #e6e1da); }

.bw-pd__nearname { color: var(--bw-text, #171412); }

.bw-pd__neardist {
	flex: none;
	color: var(--bw-text-muted, #5a544c);
	font-variant-numeric: tabular-nums;
}

/* ── RERA ─────────────────────────────────────────────────────────── */

.bw-pd__rera {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bw-pd__rera li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.6rem var(--bw-space-4, 1rem);
	border: 1px solid var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-sm, 6px);
	font-size: var(--bw-text-sm, 0.875rem);
}

.bw-pd__rerastatus {
	font-weight: var(--bw-weight-semibold, 600);
	color: var(--bw-text, #171412);
}

.bw-pd__reraphase { color: var(--bw-text-muted, #5a544c); }

.bw-pd__reranum {
	margin-inline-start: auto;
	font-variant-numeric: tabular-nums;
	color: var(--bw-text-muted, #5a544c);
}

.bw-pd__reranum a { color: var(--bw-link, #1d3f65); }

/* ══ Submit property ══════════════════════════════════════════════════ */

.bw-sp {
	width: 100%;
	max-width: 46rem;
	margin-inline: auto;
}

.bw-sp__form {
	display: flex;
	flex-direction: column;
	gap: var(--bw-space-5, 1.5rem);
	padding: var(--bw-space-5, 1.5rem);
	border: 1px solid var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-lg, 14px);
	background: var(--bw-bg, #fff);
}

.bw-sp__title {
	margin: 0;
	font-size: clamp(1.4rem, 1.15rem + 1.2vw, 2rem);
	font-weight: 800;
	letter-spacing: var(--bw-tracking-tight, -0.025em);
	line-height: 1.15;
	color: var(--bw-text, #171412);
}

.bw-sp__intro {
	margin: -0.9rem 0 0;
	max-width: 62ch;
	font-size: var(--bw-text-sm, 0.875rem);
	line-height: 1.6;
	color: var(--bw-text-muted, #5a544c);
}

.bw-sp__set {
	margin: 0;
	padding: 0;
	border: 0;
}

.bw-sp__legend {
	padding: 0 0 var(--bw-space-3, 0.75rem);
	font-size: var(--bw-text-2xs, 0.6875rem);
	font-weight: var(--bw-weight-semibold, 600);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bw-text-subtle, #7a736a);
}

.bw-sp__grid {
	display: grid;
	gap: var(--bw-space-3, 0.75rem);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 620px) {
	.bw-sp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bw-sp__field--wide { grid-column: 1 / -1; }
}

.bw-sp__field {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
}

.bw-sp__label {
	font-size: var(--bw-text-2xs, 0.6875rem);
	font-weight: var(--bw-weight-semibold, 600);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bw-text-subtle, #7a736a);
}

.bw-sp__opt {
	text-transform: none;
	letter-spacing: 0;
	font-weight: var(--bw-weight-normal, 400);
	opacity: 0.8;
}

.bw-sp__control {
	width: 100%;
	min-height: 44px;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-sm, 6px);
	background: var(--bw-bg, #fff);
	color: var(--bw-text, #171412);
	font: inherit;
	/* 1rem, not smaller: iOS Safari zooms the page when a field under 16px
	   takes focus, and it does not zoom back out afterwards. */
	font-size: var(--bw-text-base, 1rem);
}

textarea.bw-sp__control {
	min-height: 72px;
	resize: vertical;
	line-height: 1.5;
}

.bw-sp__control:focus-visible {
	outline: 2px solid var(--bw-accent-500, #b07d26);
	outline-offset: 1px;
	border-color: var(--bw-accent-400, #c9963c);
}

.bw-sp__file {
	width: 100%;
	padding: var(--bw-space-4, 1rem);
	border: 1px dashed var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-md, 10px);
	background: var(--bw-bg-subtle, #faf8f5);
	font: inherit;
	font-size: var(--bw-text-sm, 0.875rem);
	color: var(--bw-text, #171412);
	cursor: pointer;
}

.bw-sp__file:focus-visible {
	outline: 2px solid var(--bw-accent-500, #b07d26);
	outline-offset: 2px;
}

.bw-sp__hint {
	margin: 0;
	font-size: var(--bw-text-xs, 0.75rem);
	line-height: 1.5;
	color: var(--bw-text-subtle, #7a736a);
}

.bw-sp__go {
	justify-content: center;
	width: 100%;
}

.bw-sp__note {
	margin: -0.9rem 0 0;
	font-size: var(--bw-text-xs, 0.75rem);
	line-height: 1.5;
	color: var(--bw-text-subtle, #7a736a);
}

/* ── The answer ───────────────────────────────────────────────────── */

.bw-sp__result {
	margin: 0 0 var(--bw-space-4, 1rem);
	padding: var(--bw-space-4, 1rem);
	border-radius: var(--bw-radius-md, 10px);
	font-size: var(--bw-text-base, 1rem);
	font-weight: var(--bw-weight-semibold, 600);
	line-height: 1.5;
}

.bw-sp__result[data-state="ok"] {
	border: 1px solid var(--bw-accent-300, #d9b062);
	background: var(--bw-accent-50, #fbf5e9);
	color: var(--bw-accent-700, #6d4b17);
}

.bw-sp__result[data-state="error"] {
	border: 1px solid #e3b4ae;
	background: #fdf1ef;
	color: #8f2119;
}

/* The country box is shared with the Add Property dialog; here it sits in a
   taller field, so the input must fill it rather than sit at its own height. */
.bw-sp__field .bw-phonebox { align-items: stretch; }
.bw-sp__field .bw-phonebox__input { min-height: 44px; }

/* ══ Builders ═════════════════════════════════════════════════════════ */

.bw-bgrid {
	display: grid;
	gap: var(--bw-space-5, 1.5rem);
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}

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

/*
 * A brass rule around the whole card, the way the reference frames each
 * project. Drawn as a border rather than an outline so the rounded corner
 * follows it.
 */
.bw-bcard {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--bw-accent-400, #c9963c);
	border-radius: var(--bw-radius-md, 10px);
	background: var(--bw-brand-900, #0a1928);
	transition:
		transform var(--bw-duration-base, 200ms) var(--bw-ease-out, ease),
		box-shadow var(--bw-duration-base, 200ms) var(--bw-ease, ease);
}

.bw-bcard:hover,
.bw-bcard:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--bw-shadow-xl, 0 24px 56px rgb(10 25 40 / 0.16));
}

@media (prefers-reduced-motion: reduce) {
	.bw-bcard:hover,
	.bw-bcard:focus-within { transform: none; }
}

/* ── The picture ──────────────────────────────────────────────────── */

.bw-bcard__media {
	position: relative;
	display: grid;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: linear-gradient(160deg, var(--bw-brand-700, #142f4d), var(--bw-brand-900, #0a1928));
}

.bw-bcard .bw-bcard__img {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--bw-duration-slow, 320ms) var(--bw-ease-out, ease);
}

.bw-bcard:hover .bw-bcard__img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
	.bw-bcard:hover .bw-bcard__img { transform: none; }
}

/* No project photograph yet: the logo, centred, not stretched. */
.bw-bcard .bw-bcard__logoimg {
	grid-area: 1 / 1;
	place-self: center;
	max-width: 60%;
	max-height: 60%;
	width: auto;
	height: auto;
	object-fit: contain;
	opacity: 0.9;
}

.bw-bcard__blank { grid-area: 1 / 1; }

/*
 * The name sits on the picture, so the picture has to give it contrast. A
 * scrim over the lower half does that without flattening the photograph:
 * measured, gold on this ground clears 7:1 against the worst case a
 * photograph can be.
 */
.bw-bcard__media::after {
	content: "";
	grid-area: 1 / 1;
	background: linear-gradient(0deg, rgb(10 25 40 / 0.92) 6%, rgb(10 25 40 / 0.55) 38%, rgb(10 25 40 / 0.08) 70%);
}

.bw-bcard__name {
	grid-area: 1 / 1;
	align-self: end;
	z-index: 1;
	margin: 0;
	padding: var(--bw-space-4, 1rem);
	font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);
	font-weight: 800;
	letter-spacing: 0.015em;
	line-height: 1.15;
	text-transform: uppercase;
	text-shadow: 0 2px 6px rgb(10 25 40 / 0.7);
	color: var(--bw-accent-300, #d9b062);
}

.bw-bcard__link {
	color: inherit;
	text-decoration: none;
}

/* The name's hit area covers the card, so a mouse gets a large target while
   the keyboard still gets one stop. */
.bw-bcard__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* ── The stage label ──────────────────────────────────────────────── */

/*
 * Top-left, red, the way the reference marks a stage. Red is not in the
 * brand palette on purpose: this is a state, not a decoration, and it has to
 * read as one from across a grid.
 */
.bw-bcard__stage {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	z-index: 1;
	padding: 0.4rem 0.8rem;
	border-end-end-radius: var(--bw-radius-sm, 6px);
	background: #c0281c;
	color: #fff;
	font-size: var(--bw-text-2xs, 0.6875rem);
	font-weight: var(--bw-weight-bold, 700);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ── The facts under it ───────────────────────────────────────────── */

.bw-bcard__facts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: var(--bw-space-4, 1rem);
}

.bw-bcard__fact {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
}

.bw-bcard__fact dt {
	flex: 0 0 4.5rem;
	font-size: var(--bw-text-2xs, 0.6875rem);
	font-weight: var(--bw-weight-semibold, 600);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #8fa3b8;
}

.bw-bcard__fact dd {
	margin: 0;
	min-width: 0;
	font-size: var(--bw-text-sm, 0.875rem);
	line-height: 1.4;
	color: #eef3f8;
}

.bw-bcard__count {
	margin: 0;
	padding: 0.7rem var(--bw-space-4, 1rem);
	border-top: 1px solid rgb(217 176 98 / 0.28);
	font-size: var(--bw-text-xs, 0.75rem);
	font-weight: var(--bw-weight-semibold, 600);
	font-variant-numeric: tabular-nums;
	color: var(--bw-accent-300, #d9b062);
}

/* ── Builder search bar ───────────────────────────────────────────── */

.bw-bsearch {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--bw-space-2, 0.5rem);
	width: 100%;
}

/*
 * The stage dropdown leads, the search box takes the rest. On a phone they
 * stack, because a 375px row split three ways gives a search box nobody can
 * type a builder's name into.
 */
.bw-bsearch__stage { flex: 0 0 100%; }
.bw-bsearch__field { flex: 1 1 100%; }

@media (min-width: 640px) {
	.bw-bsearch__stage { flex: 0 0 210px; }
	.bw-bsearch__field { flex: 1 1 12rem; }
}

.bw-bsearch__select,
.bw-bsearch__input {
	width: 100%;
	min-height: 46px;
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-sm, 6px);
	background: var(--bw-bg, #fff);
	color: var(--bw-text, #171412);
	font: inherit;
	/* 1rem, not smaller: iOS Safari zooms the page when a field under 16px
	   takes focus, and it does not zoom back out afterwards. */
	font-size: var(--bw-text-base, 1rem);
}

.bw-bsearch__select:focus-visible,
.bw-bsearch__input:focus-visible {
	outline: 2px solid var(--bw-accent-500, #b07d26);
	outline-offset: 1px;
	border-color: var(--bw-accent-400, #c9963c);
}

.bw-bsearch__go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	flex: 0 0 auto;
	min-height: 46px;
	padding: 0.6rem 1.2rem;
	border: 1px solid transparent;
	border-radius: var(--bw-radius-sm, 6px);
	background: var(--bw-accent-400, #c9963c);
	color: var(--bw-brand-900, #0a1928);
	font: inherit;
	font-size: var(--bw-text-sm, 0.875rem);
	font-weight: var(--bw-weight-bold, 700);
	cursor: pointer;
	transition: background-color var(--bw-duration-fast, 120ms) var(--bw-ease, ease);
}

.bw-bsearch__go:hover { background: var(--bw-accent-300, #d9b062); }

@media (max-width: 639px) {
	.bw-bsearch__go { flex: 1 1 100%; }
}

.bw-bsearch__clear {
	margin: var(--bw-space-2, 0.5rem) 0 0;
	font-size: var(--bw-text-xs, 0.75rem);
	font-weight: var(--bw-weight-semibold, 600);
}

.bw-bsearch__clear a { color: var(--bw-link, #1d3f65); }

/* ── The full-details button on a builder card ────────────────────── */

/*
 * Above the card's invisible click overlay, or the overlay swallows it and
 * the button looks broken while doing exactly what the card does.
 */
.bw-bcard__more {
	position: relative;
	z-index: 3;
	justify-content: center;
	margin: 0 var(--bw-space-4, 1rem) var(--bw-space-4, 1rem);
}

/* ══ Builder profile ══════════════════════════════════════════════════ */

.bw-bp {
	display: flex;
	flex-direction: column;
	gap: var(--bw-space-4, 1rem);
}

.bw-bp__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bw-space-4, 1rem);
}

.bw-bp__logo {
	display: grid;
	place-items: center;
	flex: none;
	width: 120px;
	height: 84px;
	padding: 0.6rem;
	border: 1px solid var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-md, 10px);
	background: var(--bw-bg, #fff);
}

/* contain, not cover: a cropped logo is a different logo. */
.bw-bp .bw-bp__logoimg {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

.bw-bp__titles {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
}

.bw-bp__name {
	margin: 0;
	font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
	font-weight: 800;
	letter-spacing: var(--bw-tracking-tight, -0.025em);
	line-height: 1.12;
	color: var(--bw-text, #171412);
}

.bw-bp__place {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	font-size: var(--bw-text-sm, 0.875rem);
	color: var(--bw-text-muted, #5a544c);
}

.bw-bp__stats {
	display: grid;
	gap: 1px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-md, 10px);
	background: var(--bw-border, #e6e1da);
	overflow: hidden;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 720px) {
	.bw-bp__stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

.bw-bp__stat {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: var(--bw-space-3, 0.75rem) var(--bw-space-4, 1rem);
	background: var(--bw-bg, #fff);
}

.bw-bp__stat dt {
	font-size: var(--bw-text-2xs, 0.6875rem);
	font-weight: var(--bw-weight-semibold, 600);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bw-text-subtle, #7a736a);
}

.bw-bp__stat dd {
	margin: 0;
	font-size: var(--bw-text-lg, 1.375rem);
	font-weight: 800;
	letter-spacing: var(--bw-tracking-tight, -0.02em);
	font-variant-numeric: tabular-nums;
	color: var(--bw-text, #171412);
}

/* Whose number it is, said quietly rather than left to be assumed. */
.bw-bp__note {
	margin: 0;
	font-size: 0.625rem;
	line-height: 1.35;
	color: var(--bw-text-subtle, #7a736a);
}

.bw-bp__h {
	margin: var(--bw-space-3, 0.75rem) 0 0;
	font-size: var(--bw-text-lg, 1.375rem);
	font-weight: var(--bw-weight-bold, 700);
	letter-spacing: var(--bw-tracking-tight, -0.02em);
	color: var(--bw-text, #171412);
}

/* The location row's label is a pin, so it needs the label column's width
   without the label's letter-spacing pushing the icon off-centre. */
.bw-bcard__fact dt .bw-pin {
	display: block;
	color: var(--bw-accent-300, #d9b062);
}

/* ── Fact strip with icons ────────────────────────────────────────── */

.bw-pd__fact {
	flex-direction: row;
	align-items: flex-start;
	gap: 0.6rem;
}

.bw-pd__facticon {
	display: grid;
	place-items: center;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: var(--bw-radius-sm, 6px);
	background: var(--bw-accent-50, #fbf5e9);
	color: var(--bw-accent-ink, #8f631d);
}

/* ── Unit table ───────────────────────────────────────────────────── */

/* The table scrolls inside its own box rather than pushing the page
   sideways, which is what a four-column table does on a phone. */
.bw-pd__tablewrap {
	overflow-x: auto;
	border: 1px solid var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-md, 10px);
}

.bw-pd__table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--bw-text-sm, 0.875rem);
}

.bw-pd__table th,
.bw-pd__table td {
	padding: 0.7rem var(--bw-space-4, 1rem);
	text-align: start;
	white-space: nowrap;
}

.bw-pd__table thead th {
	background: var(--bw-bg-subtle, #faf8f5);
	font-size: var(--bw-text-2xs, 0.6875rem);
	font-weight: var(--bw-weight-semibold, 600);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bw-text-subtle, #7a736a);
}

.bw-pd__table tbody tr + tr th,
.bw-pd__table tbody tr + tr td {
	border-top: 1px solid var(--bw-border, #e6e1da);
}

.bw-pd__table tbody th {
	font-weight: var(--bw-weight-semibold, 600);
	color: var(--bw-text, #171412);
}

.bw-pd__table tbody td {
	color: var(--bw-text-muted, #5a544c);
	font-variant-numeric: tabular-nums;
}

/* ── Video ────────────────────────────────────────────────────────── */

.bw-pd__video {
	position: relative;
	display: grid;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--bw-radius-md, 10px);
	background: var(--bw-brand-900, #0a1928);
}

.bw-pd .bw-pd__videoimg,
.bw-pd__video iframe {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
	display: block;
}

.bw-pd__play {
	grid-area: 1 / 1;
	place-self: center;
	display: grid;
	place-items: center;
	width: 68px;
	height: 68px;
	padding: 0;
	border: 0;
	border-radius: var(--bw-radius-full, 999px);
	background: rgb(255 255 255 / 0.92);
	color: var(--bw-brand-900, #0a1928);
	cursor: pointer;
	transition:
		transform var(--bw-duration-base, 200ms) var(--bw-ease-out, ease),
		background-color var(--bw-duration-fast, 120ms) var(--bw-ease, ease);
}

.bw-pd__play:hover {
	transform: scale(1.06);
	background: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.bw-pd__play:hover { transform: none; }
}

/* ── About the developer ──────────────────────────────────────────── */

.bw-pd__dev {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--bw-space-4, 1rem);
	padding: var(--bw-space-4, 1rem);
	border: 1px solid var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-md, 10px);
	background: var(--bw-bg-subtle, #faf8f5);
}

.bw-pd__devlogo {
	display: grid;
	place-items: center;
	flex: none;
	width: 108px;
	height: 72px;
	padding: 0.5rem;
	border-radius: var(--bw-radius-sm, 6px);
	background: var(--bw-bg, #fff);
}

.bw-pd .bw-pd__devlogoimg {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

.bw-pd__devbody { flex: 1 1 16rem; min-width: 0; }

.bw-pd__devmore {
	margin: 0.6rem 0 0;
	font-size: var(--bw-text-sm, 0.875rem);
	font-weight: var(--bw-weight-semibold, 600);
}

.bw-pd__devmore a { color: var(--bw-link, #1d3f65); }

/* ══ Brochure dialog ══════════════════════════════════════════════════ */

.bw-broch {
	width: min(56rem, calc(100vw - 2rem));
	max-width: none;
	padding: 0;
	overflow: hidden;
}

/*
 * The picture beside the form on a wide screen, and gone on a phone — a
 * 375px column has no room for a decorative half, and the form is what the
 * dialog is for.
 */
.bw-broch__side { display: none; }

@media (min-width: 800px) {
	/*
	 * [open] is load-bearing. A dialog is hidden by the browser's own
	 * `dialog:not([open]) { display: none }`, and any display declaration
	 * that does not say [open] beats it — which put a closed 896px dialog in
	 * the page flow and gave every project page 500px of sideways scroll.
	 */
	.bw-broch[open] {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.bw-broch__side {
		display: block;
		background: var(--bw-brand-900, #0a1928);
	}

	.bw-broch .bw-broch__img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}
}

.bw-broch__x {
	inset-block-start: 0.5rem;
	inset-inline-end: 0.5rem;
	background: var(--bw-bg, #fff);
	z-index: 2;
}

.bw-broch__form {
	gap: var(--bw-space-2, 0.5rem);
	padding: var(--bw-space-6, 2rem) var(--bw-space-5, 1.5rem);
	text-align: center;
	align-items: stretch;
}

.bw-broch__title {
	margin: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
	font-weight: 400;
	letter-spacing: 0.06em;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--bw-text, #171412);
}

.bw-broch__badge {
	align-self: center;
	margin: 0.6rem 0 0;
	padding: 0.4rem 0.9rem;
	border-radius: var(--bw-radius-xs, 4px);
	background: var(--bw-accent-400, #c9963c);
	color: var(--bw-brand-900, #0a1928);
	font-size: var(--bw-text-sm, 0.875rem);
	font-weight: var(--bw-weight-bold, 700);
}

.bw-broch__intro {
	margin: 0 0 0.4rem;
	font-size: var(--bw-text-sm, 0.875rem);
	color: var(--bw-text-muted, #5a544c);
}

.bw-broch__form .bw-lf__control { text-align: start; }
.bw-broch__form .bw-lf__submit { margin-top: 0.4rem; }

.bw-broch__file {
	justify-content: center;
	margin-top: 0.4rem;
}

/* ══ Single project — added blocks ════════════════════════════════════ */

/* The highlights read as a bordered panel rather than loose text, which is
   what separates them from the overview above. */
.bw-pd__panel {
	padding: var(--bw-space-4, 1rem);
	border: 1px solid var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-md, 10px);
	background: var(--bw-bg-subtle, #faf8f5);
}

/* A quiet label above a list — "Connectivity", "RERA registration". */
.bw-pd__sub {
	margin: var(--bw-space-3, 0.75rem) 0 0.4rem;
	font-size: var(--bw-text-2xs, 0.6875rem);
	font-weight: var(--bw-weight-semibold, 600);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bw-text-subtle, #7a736a);
}

/* ── Specifications ───────────────────────────────────────────────── */

.bw-pd__specs {
	display: grid;
	gap: 0;
	margin: var(--bw-space-2, 0.5rem) 0 0;
	padding: 0;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
	.bw-pd__specs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--bw-space-6, 2rem); }
}

.bw-pd__spec {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--bw-space-4, 1rem);
	padding: 0.6rem 0;
	border-block-end: 1px dashed var(--bw-border, #e6e1da);
}

.bw-pd__spec dt {
	font-size: var(--bw-text-sm, 0.875rem);
	color: var(--bw-text-muted, #5a544c);
}

.bw-pd__spec dd {
	margin: 0;
	font-size: var(--bw-text-sm, 0.875rem);
	font-weight: var(--bw-weight-semibold, 600);
	color: var(--bw-text, #171412);
	text-align: end;
}

/* ── Floor plans ──────────────────────────────────────────────────── */

.bw-pd__plans {
	display: grid;
	gap: var(--bw-space-4, 1rem);
	margin: var(--bw-space-2, 0.5rem) 0 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
}

.bw-pd__plan {
	border: 1px solid var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-md, 10px);
	overflow: hidden;
	background: var(--bw-bg, #fff);
}

.bw-pd__plan > a { display: block; }

.bw-pd .bw-pd__planimg {
	width: 100%;
	aspect-ratio: 4 / 3;
	/* A plan is a drawing: cropping it loses the corner that matters, so it
	   is fitted inside the frame rather than filled to it. */
	object-fit: contain;
	background: var(--bw-bg-subtle, #faf8f5);
	display: block;
}

.bw-pd__plantitle {
	margin: 0;
	padding: 0.6rem var(--bw-space-3, 0.75rem) 0;
	font-size: var(--bw-text-sm, 0.875rem);
	font-weight: var(--bw-weight-semibold, 600);
	color: var(--bw-text, #171412);
}

.bw-pd__planarea {
	margin: 0;
	padding: 0.15rem var(--bw-space-3, 0.75rem) 0.7rem;
	font-size: var(--bw-text-xs, 0.75rem);
	color: var(--bw-text-muted, #5a544c);
}

/* ── Payment plan ─────────────────────────────────────────────────── */

.bw-pd__pay {
	margin: var(--bw-space-2, 0.5rem) 0 0;
	padding: 0;
	list-style: none;
	counter-reset: bw-pay;
}

.bw-pd__pay li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--bw-space-4, 1rem);
	padding: 0.65rem 0;
	border-block-end: 1px dashed var(--bw-border, #e6e1da);
}

.bw-pd__paystage {
	font-size: var(--bw-text-sm, 0.875rem);
	color: var(--bw-text, #171412);
}

.bw-pd__paypc {
	flex: none;
	font-size: var(--bw-text-sm, 0.875rem);
	font-weight: var(--bw-weight-bold, 700);
	font-variant-numeric: tabular-nums;
	color: var(--bw-accent-ink, #8f631d);
}

/* ── Address block ────────────────────────────────────────────────── */

.bw-pd__addr {
	margin-top: var(--bw-space-2, 0.5rem);
	padding: var(--bw-space-4, 1rem);
	border: 1px solid var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-md, 10px);
	background: var(--bw-bg-subtle, #faf8f5);
}

.bw-pd__addrlabel {
	margin: 0 0 0.3rem;
	font-size: var(--bw-text-2xs, 0.6875rem);
	font-weight: var(--bw-weight-semibold, 600);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bw-text-subtle, #7a736a);
}

.bw-pd__maps {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin-top: 0.6rem;
	min-height: 32px;
	font-size: var(--bw-text-sm, 0.875rem);
	font-weight: var(--bw-weight-semibold, 600);
	color: var(--bw-link, #1d3f65);
}

/* ── Share ────────────────────────────────────────────────────────── */

.bw-cta__out { font-size: 0.9em; }

/* display beats the UA sheet [hidden] rule, so it has to be taken back
   explicitly — otherwise "Link copied" is on the page from the start. */
.bw-share__said[hidden] { display: none; }

.bw-share__said {
	display: inline-block;
	margin-inline-start: 0.5rem;
	font-size: var(--bw-text-xs, 0.75rem);
	font-weight: var(--bw-weight-semibold, 600);
	color: var(--bw-accent-ink, #8f631d);
}

/* ── The action row under the gallery ─────────────────────────────── */

#bw-proj-actions {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bw-space-3, 0.75rem);
}

#bw-proj-actions > .elementor-element { width: auto; flex: 0 0 auto; }

/*
 * The outline button was drawn for the dark hero, where pale gold reads.
 * On this white row the same colour is a 1.6:1 contrast — visible in a
 * screenshot, unreadable on a screen — so here it takes the page's own ink.
 */

/* ══ The site-visit dialog ════════════════════════════════════════════ */

/*
 * The brochure form centres itself around a title and a badge. This one is
 * a form to fill in, so it reads left like a form: labels above their boxes,
 * the button across the foot.
 */
.bw-broch__form--visit {
	text-align: start;
	gap: var(--bw-space-4, 1rem);
	padding: var(--bw-space-6, 2rem) var(--bw-space-5, 1.5rem);
}

.bw-broch__eyebrow {
	margin: 0;
	font-size: var(--bw-text-2xs, 0.6875rem);
	font-weight: var(--bw-weight-semibold, 600);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bw-text-subtle, #7a736a);
}

.bw-broch__form--visit .bw-broch__title {
	margin: 0.35rem 0 0;
	font-family: inherit;
	font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
	font-weight: var(--bw-weight-bold, 700);
	letter-spacing: var(--bw-tracking-tight, -0.02em);
	text-transform: none;
}

.bw-broch__sub {
	margin: 0.25rem 0 0.4rem;
	font-size: var(--bw-text-sm, 0.875rem);
	color: var(--bw-text-muted, #5a544c);
}

/* Sentence case here: an uppercase, letterspaced label over every box turns
   a three-field form into a wall of small caps. */
.bw-lf__label--plain {
	font-size: var(--bw-text-sm, 0.875rem);
	font-weight: var(--bw-weight-semibold, 600);
	letter-spacing: 0;
	text-transform: none;
	color: var(--bw-text, #171412);
}

.bw-lf__req { color: var(--bw-accent-ink, #8f631d); }

.bw-lf__area {
	min-height: 76px;
	padding-top: 0.6rem;
	padding-bottom: 0.6rem;
	resize: vertical;
	font: inherit;
	line-height: 1.45;
}

.bw-broch__form--visit .bw-lf__submit {
	justify-content: center;
	width: 100%;
	margin-top: 0.2rem;
}

/* ══ Slot picker ══════════════════════════════════════════════════════ */

/* The day and the time sit side by side once there is room for both. */
.bw-lf__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bw-space-4, 1rem);
}

@media (min-width: 480px) {
	.bw-lf__row { grid-template-columns: 1fr 1fr; }
}

.bw-lf__hint {
	margin: -0.4rem 0 0;
	font-size: var(--bw-text-xs, 0.75rem);
	color: var(--bw-text-muted, #5a544c);
}

select.bw-lf__control {
	appearance: none;
	padding-inline-end: 2.2rem;
	/* The arrow is a background image so the control keeps its own border
	   and focus ring rather than the platform's. */
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: right 1.05rem center, right 0.75rem center;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

select.bw-lf__control:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

/* ══ Button motion ════════════════════════════════════════════════════ */

/*
 * A press worth making should feel like one. The button lifts a little and
 * takes a shadow on hover, and a highlight sweeps across the solid variant
 * once — a sweep that repeats or runs on its own is decoration, and reads as
 * a banner ad rather than a control.
 *
 * All of it is transform, opacity and shadow, so it stays on the compositor
 * and never reflows the row it sits in.
 */
.bw-cta {
	position: relative;
	overflow: hidden;
	will-change: transform;
	transition:
		background-color var(--bw-duration-fast, 120ms) var(--bw-ease, ease),
		color var(--bw-duration-fast, 120ms) var(--bw-ease, ease),
		border-color var(--bw-duration-fast, 120ms) var(--bw-ease, ease),
		transform var(--bw-duration-base, 200ms) var(--bw-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
		box-shadow var(--bw-duration-base, 200ms) var(--bw-ease-out, ease);
}

.bw-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px -8px rgb(10 25 40 / 0.45);
}

.bw-cta:active {
	transform: translateY(0);
	box-shadow: 0 2px 6px -4px rgb(10 25 40 / 0.5);
	transition-duration: 60ms;
}

.bw-cta::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 -60%;
	width: 45%;
	pointer-events: none;
	background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.42), transparent);
	transform: skewX(-18deg) translateX(0);
	opacity: 0;
}

.bw-cta:hover::after,
.bw-cta:focus-visible::after {
	opacity: 1;
	animation: bw-sheen 720ms var(--bw-ease-out, ease) 1;
}

@keyframes bw-sheen {
	from { transform: skewX(-18deg) translateX(0); }
	to   { transform: skewX(-18deg) translateX(420%); }
}

/* The icon leans into the direction the button is going. */
.bw-cta svg {
	transition: transform var(--bw-duration-base, 200ms) var(--bw-ease-out, ease);
}

.bw-cta:hover svg { transform: translateY(1px); }
.bw-cta[data-bw-share]:hover svg,
.bw-broch__open:hover svg { transform: translateY(1px) scale(1.06); }

@media (prefers-reduced-motion: reduce) {
	.bw-cta,
	.bw-cta:hover,
	.bw-cta:active { transform: none; transition: background-color 120ms ease, color 120ms ease; }

	.bw-cta:hover svg { transform: none; }

	.bw-cta::after,
	.bw-cta:hover::after { display: none; animation: none; }
}

/* ══ The prose runs the width of the page ═════════════════════════════ */

.bw-pd__prose { max-width: none; }

/* The two mid-page action rows sit centred under the section they follow,
   because the headings above them are centred and a left-hung pair of
   buttons under a centred heading reads as a mistake. */
#bw-proj-actions-mid,
#bw-proj-actions-low {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--bw-space-3, 0.75rem);
	margin-top: var(--bw-space-2, 0.5rem);
}

#bw-proj-actions-mid > .elementor-element,
#bw-proj-actions-low > .elementor-element { width: auto; flex: 0 0 auto; }


/* The closing pair, under the questions. */
#bw-proj-actions-end {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--bw-space-3, 0.75rem);
	margin-top: var(--bw-space-4, 1rem);
}

#bw-proj-actions-end > .elementor-element { width: auto; flex: 0 0 auto; }


/* ══ Page hero ════════════════════════════════════════════════════════ */

.bw-phero {
	display: flex;
	flex-direction: column;
	gap: var(--bw-space-6, 2rem);
}

.bw-phero__body {
	display: flex;
	flex-direction: column;
	gap: var(--bw-space-3, 0.75rem);
	max-width: 46rem;
}

.bw-phero__eyebrow {
	margin: 0;
	font-size: var(--bw-text-2xs, 0.6875rem);
	font-weight: var(--bw-weight-semibold, 600);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bw-accent-ink, #8f631d);
}

.bw-phero__title {
	margin: 0;
	font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
	font-weight: 800;
	letter-spacing: var(--bw-tracking-tight, -0.025em);
	line-height: 1.08;
	text-wrap: balance;
	color: var(--bw-text, #171412);
}

.bw-phero__intro {
	margin: 0;
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
	line-height: 1.6;
	color: var(--bw-text-muted, #5a544c);
}

.bw-phero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bw-space-3, 0.75rem);
	margin-top: 0.4rem;
}

/* The figures read as one strip rather than four cards: they are a fact
   about the same business, not four separate claims. */
.bw-phero__figs {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-md, 10px);
	background: var(--bw-border, #e6e1da);
	overflow: hidden;
}

.bw-phero__fig {
	flex: 1 1 calc(50% - 1px);
	padding: var(--bw-space-4, 1rem) var(--bw-space-5, 1.5rem);
	background: var(--bw-bg, #fff);
}

@media (min-width: 720px) {
	.bw-phero__fig { flex: 1 1 calc(25% - 1px); }
}

.bw-phero__fig dt {
	font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.9rem);
	font-weight: var(--bw-weight-bold, 700);
	letter-spacing: var(--bw-tracking-tight, -0.02em);
	color: var(--bw-text, #171412);
}

.bw-phero__fig dd {
	margin: 0.2rem 0 0;
	font-size: var(--bw-text-sm, 0.875rem);
	color: var(--bw-text-muted, #5a544c);
}

/* ══ Steps ════════════════════════════════════════════════════════════ */

.bw-steps {
	display: flex;
	flex-direction: column;
	gap: var(--bw-space-5, 1.5rem);
}

.bw-steps__head {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	text-align: center;
}

.bw-steps__heading {
	margin: 0;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
	font-weight: var(--bw-weight-bold, 700);
	letter-spacing: var(--bw-tracking-tight, -0.02em);
	line-height: 1.15;
	color: var(--bw-text, #171412);
}

.bw-steps__sub {
	margin: 0 auto;
	max-width: 46rem;
	font-size: var(--bw-text-base, 1rem);
	color: var(--bw-text-muted, #5a544c);
}

.bw-steps__list {
	display: grid;
	gap: var(--bw-space-4, 1rem);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: bw-step;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.bw-steps__item {
	position: relative;
	counter-increment: bw-step;
	padding: var(--bw-space-5, 1.5rem) var(--bw-space-4, 1rem) var(--bw-space-4, 1rem);
	border: 1px solid var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-md, 10px);
	background: var(--bw-bg, #fff);
}

/* The number is drawn, not typed: inserting a step in the middle must not
   leave every step after it lying about its position. */
.bw-steps__item::before {
	content: counter(bw-step, decimal-leading-zero);
	position: absolute;
	inset-block-start: var(--bw-space-4, 1rem);
	inset-inline-end: var(--bw-space-4, 1rem);
	font-size: var(--bw-text-lg, 1.125rem);
	font-weight: var(--bw-weight-bold, 700);
	color: var(--bw-accent-300, #d9b062);
}

.bw-steps__title {
	margin: 0 3rem 0.4rem 0;
	font-size: var(--bw-text-base, 1rem);
	font-weight: var(--bw-weight-semibold, 600);
	color: var(--bw-text, #171412);
}

.bw-steps__text {
	margin: 0;
	font-size: var(--bw-text-sm, 0.875rem);
	line-height: 1.55;
	color: var(--bw-text-muted, #5a544c);
}

/* ══ Inline enquiry form ══════════════════════════════════════════════ */

.bw-ef {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: var(--bw-space-5, 1.5rem);
	border: 1px solid var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-md, 10px);
	background: var(--bw-bg-subtle, #faf8f5);
}

.bw-ef__heading {
	margin: 0;
	font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
	font-weight: var(--bw-weight-bold, 700);
	letter-spacing: var(--bw-tracking-tight, -0.02em);
	color: var(--bw-text, #171412);
}

.bw-ef__intro {
	margin: 0 0 0.4rem;
	font-size: var(--bw-text-sm, 0.875rem);
	color: var(--bw-text-muted, #5a544c);
}

.bw-ef__form {
	gap: var(--bw-space-4, 1rem);
	align-items: stretch;
	text-align: start;
}

.bw-ef__form .bw-lf__submit {
	justify-content: center;
	align-self: flex-start;
}

/* ══ Insights grid ════════════════════════════════════════════════════ */

.bw-pgrid {
	display: flex;
	flex-direction: column;
	gap: var(--bw-space-5, 1.5rem);
}

.bw-pgrid__heading {
	margin: 0;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
	font-weight: var(--bw-weight-bold, 700);
	letter-spacing: var(--bw-tracking-tight, -0.02em);
	color: var(--bw-text, #171412);
}

.bw-pgrid__list {
	display: grid;
	gap: var(--bw-space-5, 1.5rem);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
	.bw-pgrid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
	.bw-pgrid__list { grid-template-columns: repeat(var(--bw-pgrid-cols, 3), minmax(0, 1fr)); }
}

.bw-pcard {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-md, 10px);
	background: var(--bw-bg, #fff);
	transition:
		transform var(--bw-duration-base, 200ms) var(--bw-ease-out, ease),
		box-shadow var(--bw-duration-base, 200ms) var(--bw-ease-out, ease);
}

.bw-pcard:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -14px rgb(10 25 40 / 0.5);
}

@media (prefers-reduced-motion: reduce) {
	.bw-pcard,
	.bw-pcard:hover { transform: none; transition: none; }
}

.bw-pcard__media { display: block; }

.bw-pgrid .bw-pcard__img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}

.bw-pcard__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.5rem;
	padding: var(--bw-space-4, 1rem);
}

.bw-pcard__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	font-size: var(--bw-text-xs, 0.75rem);
	color: var(--bw-text-subtle, #7a736a);
}

.bw-pcard__title {
	margin: 0;
	font-size: var(--bw-text-md, 1.125rem);
	font-weight: var(--bw-weight-bold, 700);
	letter-spacing: var(--bw-tracking-tight, -0.02em);
	line-height: 1.25;
	text-wrap: balance;
}

.bw-pcard__title a {
	color: var(--bw-text, #171412);
	text-decoration: none;
}

.bw-pcard__title a:hover,
.bw-pcard__title a:focus-visible { color: var(--bw-accent-ink, #8f631d); }

.bw-pcard__excerpt {
	margin: 0;
	font-size: var(--bw-text-sm, 0.875rem);
	line-height: 1.55;
	color: var(--bw-text-muted, #5a544c);
}

/* Pushed to the foot so cards of different lengths line their links up. */
.bw-pcard__more {
	margin: auto 0 0;
	padding-top: 0.6rem;
	font-size: var(--bw-text-sm, 0.875rem);
	font-weight: var(--bw-weight-semibold, 600);
}

.bw-pcard__more a { color: var(--bw-link, #1d3f65); }

.bw-pgrid__empty {
	margin: 0;
	padding: var(--bw-space-6, 2rem);
	text-align: center;
	border: 1px dashed var(--bw-border-strong, #d5cec4);
	border-radius: var(--bw-radius-md, 10px);
	color: var(--bw-text-muted, #5a544c);
}

/* ══ Testimonials ═════════════════════════════════════════════════════ */

.bw-tm {
	display: flex;
	flex-direction: column;
	gap: var(--bw-space-5, 1.5rem);
	/* A flex item is sized by its content unless told otherwise, and the
	   content here is a track six cards wide. Without this the section
	   pushes the whole page sideways instead of scrolling inside itself. */
	min-width: 0;
}

.bw-tm__head {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	text-align: center;
}

.bw-tm__heading {
	margin: 0;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
	font-weight: var(--bw-weight-bold, 700);
	letter-spacing: var(--bw-tracking-tight, -0.02em);
	line-height: 1.15;
	color: var(--bw-text, #171412);
}

.bw-tm__sub {
	margin: 0 auto;
	max-width: 46rem;
	font-size: var(--bw-text-base, 1rem);
	color: var(--bw-text-muted, #5a544c);
}

/*
 * One card in view, the next one snapping in behind it. A scroll container
 * is the slider — swipe, trackpad, arrow keys and the scrollbar all work
 * before a line of script runs.
 */
.bw-tm__track {
	display: flex;
	min-width: 0;
	max-width: 100%;
	gap: var(--bw-space-4, 1rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding: 2px;
	margin: -2px;
}

.bw-tm__track::-webkit-scrollbar { display: none; }

.bw-tm__track:focus-visible {
	outline: 2px solid var(--bw-accent-400, #c9963c);
	outline-offset: 2px;
	border-radius: var(--bw-radius-md, 10px);
}

@media (prefers-reduced-motion: reduce) {
	.bw-tm__track { scroll-behavior: auto; }
}

/*
 * Positioned on purpose. The star rating carries a visually hidden
 * "Rated 4 out of 5" for screen readers, and that is absolutely
 * positioned. With no positioned ancestor inside the scroller it escapes
 * the overflow entirely and lands at its page co-ordinate — which, for the
 * sixth card, was 7,937px, and gave the whole home page that much
 * horizontal scroll.
 */
.bw-tm__card {
	position: relative;
	display: flex;
	flex: 0 0 100%;
	flex-direction: column;
	align-items: center;
	gap: var(--bw-space-3, 0.75rem);
	margin: 0;
	padding: var(--bw-space-6, 2rem) var(--bw-space-5, 1.5rem);
	scroll-snap-align: center;
	text-align: center;
	border: 1px solid var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-md, 10px);
	background: var(--bw-bg, #fff);
}

.bw-tm__mark { color: var(--bw-accent-300, #d9b062); }

.bw-tm__stars {
	margin: 0;
	font-size: var(--bw-text-md, 1.125rem);
	letter-spacing: 0.12em;
	color: var(--bw-accent-500, #a8762a);
}

.bw-tm__quote {
	margin: 0;
	max-width: 44rem;
	font-size: clamp(1.05rem, 1rem + 0.35vw, 1.3rem);
	line-height: 1.6;
	color: var(--bw-text, #171412);
	text-wrap: pretty;
}

.bw-tm__by {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2rem;
	margin-top: 0.3rem;
}

.bw-tm__name {
	font-size: var(--bw-text-sm, 0.875rem);
	font-weight: var(--bw-weight-bold, 700);
	color: var(--bw-text, #171412);
}

.bw-tm__where {
	font-size: var(--bw-text-sm, 0.875rem);
	color: var(--bw-text-muted, #5a544c);
}

.bw-tm__badge {
	margin-top: 0.3rem;
	padding: 0.25rem 0.6rem;
	border-radius: var(--bw-radius-full, 999px);
	background: var(--bw-bg-subtle, #faf8f5);
	border: 1px solid var(--bw-border, #e6e1da);
	font-size: var(--bw-text-2xs, 0.6875rem);
	font-weight: var(--bw-weight-semibold, 600);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bw-text-subtle, #7a736a);
}

/* ── Arrows and dots ──────────────────────────────────────────────── */

.bw-tm__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--bw-space-4, 1rem);
}

.bw-tm__arrow {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--bw-border-strong, #d5cec4);
	border-radius: var(--bw-radius-full, 999px);
	background: var(--bw-bg, #fff);
	color: var(--bw-text, #171412);
	cursor: pointer;
	transition:
		border-color var(--bw-duration-fast, 120ms) var(--bw-ease, ease),
		background-color var(--bw-duration-fast, 120ms) var(--bw-ease, ease);
}

.bw-tm__arrow:hover,
.bw-tm__arrow:focus-visible {
	border-color: var(--bw-accent-400, #c9963c);
	background: var(--bw-accent-50, #fbf5e9);
}

.bw-tm__dots {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

/*
 * The dot is 8px but the button is 32px: a target you can hit on a phone
 * without a magnifying glass, with the mark drawn inside it.
 */
.bw-tm__dot {
	position: relative;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.bw-tm__dot::after {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	width: 8px;
	height: 8px;
	transform: translate(-50%, -50%);
	border-radius: var(--bw-radius-full, 999px);
	background: var(--bw-border-strong, #d5cec4);
	transition:
		background-color var(--bw-duration-fast, 120ms) var(--bw-ease, ease),
		width var(--bw-duration-base, 200ms) var(--bw-ease-out, ease);
}

.bw-tm__dot[aria-selected="true"]::after {
	width: 22px;
	border-radius: var(--bw-radius-full, 999px);
	background: var(--bw-accent-400, #c9963c);
}

.bw-tm__dot:hover::after { background: var(--bw-accent-300, #d9b062); }

.bw-tm__dot:focus-visible {
	outline: 2px solid var(--bw-accent-400, #c9963c);
	outline-offset: -4px;
	border-radius: var(--bw-radius-full, 999px);
}

@media (prefers-reduced-motion: reduce) {
	.bw-tm__dot::after { transition: none; }
}

/* ══ Footer atmosphere ════════════════════════════════════════════════
 *
 * A night sky behind the navy footer: two drifting clouds of brand colour,
 * three star layers at three speeds, an occasional comet and a travelling
 * line along the top edge. Six empty spans and this block — no script, no
 * canvas. Everything animated here moves only transform, opacity or
 * background-position, so it stays on the compositor and never asks the main
 * thread for a frame; a mid-range phone runs it at no measurable cost.
 *
 * The whole layer is aria-hidden in the markup and inert to the pointer, and
 * it stops completely under prefers-reduced-motion at the end of the block.
 */

#bw-footer {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/*
 * Elementor's boxed container puts the children inside .e-con-inner, which is
 * capped at 1280px. Left positioned, it would become the containing block and
 * the sky would only cover the middle of the footer — so it is taken out of
 * the positioning chain and inset:0 resolves against #bw-footer instead.
 */
#bw-footer > .e-con-inner { position: static; }

#bw-footer .elementor-widget-bw-footer-atmos {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	width: auto;
	pointer-events: none;
}

/*
 * Absolutely positioned siblings paint above non-positioned ones whatever the
 * source order, so the columns have to be lifted deliberately rather than
 * left to sit behind the wallpaper.
 */
#bw-footer > .e-con-inner > *:not(.elementor-widget-bw-footer-atmos) {
	position: relative;
	z-index: 1;
}

.bw-atmos {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

/* ── Drifting glow ──────────────────────────────────────────────────── */

.bw-atmos__glow {
	position: absolute;
	border-radius: var(--bw-radius-full, 999px);
	filter: blur(70px);
	will-change: transform;
}

.bw-atmos__glow--a {
	top: -180px;
	left: -160px;
	width: 620px;
	height: 460px;
	background: radial-gradient(closest-side, rgb(201 150 60 / 0.28), rgb(201 150 60 / 0));
	animation: bw-atmos-glow-a 28s ease-in-out infinite;
}

.bw-atmos__glow--b {
	right: -140px;
	bottom: -200px;
	width: 560px;
	height: 420px;
	background: radial-gradient(closest-side, rgb(96 148 196 / 0.24), rgb(96 148 196 / 0));
	animation: bw-atmos-glow-b 36s ease-in-out infinite;
}

@keyframes bw-atmos-glow-a {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	50%      { transform: translate3d(70px, 44px, 0) scale(1.14); }
}

@keyframes bw-atmos-glow-b {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1.06); }
	50%      { transform: translate3d(-80px, -34px, 0) scale(1); }
}

/*
 * The third cloud, which only the tricolour palette renders. Given its own
 * geometry here rather than only in the header's overrides, so the widget
 * stands up wherever it is dropped — and its own drift, because two clouds
 * moving either side of one that does not is the kind of thing you cannot
 * name but can see.
 */
.bw-atmos__glow--c {
	top: -30%;
	left: 28%;
	width: 40%;
	height: 160%;
	animation: bw-atmos-glow-c 31s ease-in-out infinite;
}

@keyframes bw-atmos-glow-c {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	50%      { transform: translate3d(-36px, 0, 0) scale(1.12); }
}

/* ── Stars ──────────────────────────────────────────────────────────── */

/*
 * Each layer is one tiled background of tiny radial gradients, scrolled by
 * animating background-position. The travel distance on every layer is an
 * exact whole number of tiles, or the loop would jump on restart: near moves
 * four tiles, mid three, far two — same idea as a parallax backdrop, and the
 * difference in speed is what sells the depth.
 */
.bw-atmos__stars {
	position: absolute;
	inset: 0;
	background-repeat: repeat;
	will-change: background-position;
}

.bw-atmos__stars--near {
	background-image:
		radial-gradient(1.6px 1.6px at 30px 40px, rgb(255 255 255 / 0.85), transparent),
		radial-gradient(1.4px 1.4px at 150px 120px, rgb(255 255 255 / 0.6), transparent),
		radial-gradient(1.5px 1.5px at 210px 60px, rgb(233 199 134 / 0.75), transparent);
	background-size: 260px 200px;
	opacity: 0.85;
	animation: bw-atmos-near 60s linear infinite;
}

.bw-atmos__stars--mid {
	background-image:
		radial-gradient(1.2px 1.2px at 70px 150px, rgb(255 255 255 / 0.5), transparent),
		radial-gradient(1px 1px at 250px 40px, rgb(255 255 255 / 0.45), transparent);
	background-size: 340px 260px;
	opacity: 0.6;
	animation: bw-atmos-mid 110s linear infinite;
}

.bw-atmos__stars--far {
	background-image:
		radial-gradient(2.2px 2.2px at 120px 90px, rgb(201 150 60 / 0.6), transparent),
		radial-gradient(1.8px 1.8px at 330px 230px, rgb(169 188 205 / 0.5), transparent);
	background-size: 420px 320px;
	opacity: 0.5;
	animation:
		bw-atmos-far 190s linear infinite,
		bw-atmos-twinkle 7s ease-in-out infinite;
}

@keyframes bw-atmos-near {
	from { background-position: 0 0; }
	to   { background-position: -1040px -800px; }
}

@keyframes bw-atmos-mid {
	from { background-position: 0 0; }
	to   { background-position: -1020px -780px; }
}

@keyframes bw-atmos-far {
	from { background-position: 0 0; }
	to   { background-position: -840px -640px; }
}

@keyframes bw-atmos-twinkle {
	0%, 100% { opacity: 0.5; }
	50%      { opacity: 0.22; }
}

/* ── Comet ──────────────────────────────────────────────────────────── */

/*
 * Visible for about a fifth of its cycle. A streak that crosses constantly
 * reads as a bug in the page; one that crosses now and then reads as weather.
 */
.bw-atmos__comet {
	position: absolute;
	top: 14%;
	left: -18%;
	width: 160px;
	height: 2px;
	border-radius: var(--bw-radius-full, 999px);
	background: linear-gradient(90deg, rgb(255 255 255 / 0), rgb(255 255 255 / 0.9));
	opacity: 0;
	will-change: transform, opacity;
	animation: bw-atmos-comet 18s ease-in-out infinite;
}

@keyframes bw-atmos-comet {
	0%, 74%  { opacity: 0; transform: translate3d(0, 0, 0) rotate(16deg); }
	78%      { opacity: 0.9; }
	94%, 100% { opacity: 0; transform: translate3d(128vw, 44vh, 0) rotate(16deg); }
}

/* ── Horizon ────────────────────────────────────────────────────────── */

.bw-atmos__horizon {
	position: absolute;
	inset: 0 auto auto 0;
	width: 46%;
	height: 1px;
	background: linear-gradient(90deg,
		rgb(201 150 60 / 0),
		rgb(201 150 60 / 0.75) 50%,
		rgb(201 150 60 / 0));
	will-change: transform;
	animation: bw-atmos-horizon 11s ease-in-out infinite;
}

@keyframes bw-atmos-horizon {
	0%, 100% { transform: translate3d(-100%, 0, 0); }
	50%      { transform: translate3d(220%, 0, 0); }
}

/* ── The credit line ────────────────────────────────────────────────── */

.bw-legal__credit {
	display: flex;
	align-items: center;
	gap: 0.4em;
}

.bw-legal__heart {
	color: #e0554f;
	font-size: 0.95em;
	line-height: 1;
	animation: bw-atmos-heart 2.4s ease-in-out infinite;
}

@keyframes bw-atmos-heart {
	0%, 100% { transform: scale(1); }
	14%      { transform: scale(1.24); }
	28%      { transform: scale(1); }
	42%      { transform: scale(1.14); }
}

/*
 * One switch for the lot. Somebody who has asked their device for reduced
 * motion has asked for a still page, and a drifting starfield is exactly the
 * kind of ambient movement that request is about — the sky stays, it simply
 * stops moving.
 */
@media (prefers-reduced-motion: reduce) {
	.bw-atmos__glow,
	.bw-atmos__stars,
	.bw-atmos__comet,
	.bw-atmos__horizon,
	.bw-legal__heart {
		animation: none;
	}

	.bw-atmos__comet { display: none; }
}

/* ══ Legal documents ══════════════════════════════════════════════════
 *
 * Privacy, terms, disclaimer and cookies. Long prose that people read under
 * duress, usually on a phone, usually looking for one paragraph — so the
 * measure is short, the headings are heavy enough to scan against, and the
 * type is the same size as the rest of the site rather than the shrunken
 * grey a legal page normally gets.
 */

.bw-doc {
	max-width: 68ch;
	margin-inline: auto;
	padding-block: var(--bw-space-6, 2rem) var(--bw-space-9, 4rem);
	color: var(--bw-text, #171412);
	font-size: var(--bw-text-base, 1rem);
	line-height: 1.75;
}

/* The theme prints the H1 above the content; centre it over the same measure. */
.site-main:has(.bw-doc) .page-header,
.site-main:has(.bw-doc) .entry-header {
	max-width: 68ch;
	margin-inline: auto;
	padding-top: var(--bw-space-8, 3rem);
}

.bw-doc__lede {
	font-size: var(--bw-text-lg, 1.125rem);
	line-height: 1.65;
	color: var(--bw-text, #171412);
}

.bw-doc__meta {
	margin-block: var(--bw-space-3, 0.75rem) var(--bw-space-7, 2.5rem);
	padding-bottom: var(--bw-space-5, 1.5rem);
	border-bottom: 1px solid var(--bw-border, #e6e1da);
	color: var(--bw-text-subtle, #6e675e);
	font-size: var(--bw-text-sm, 0.875rem);
}

.bw-doc h2 {
	margin-block: var(--bw-space-8, 3rem) var(--bw-space-4, 1rem);
	font-size: var(--bw-text-xl, 1.25rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
	scroll-margin-top: var(--bw-space-8, 3rem);
}

.bw-doc h3 {
	margin-block: var(--bw-space-6, 2rem) var(--bw-space-2, 0.5rem);
	font-size: var(--bw-text-base, 1rem);
	font-weight: 700;
}

.bw-doc p,
.bw-doc ul,
.bw-doc ol { margin-block: 0 var(--bw-space-4, 1rem); }

.bw-doc ul,
.bw-doc ol { padding-left: 1.35em; }

.bw-doc li { margin-bottom: var(--bw-space-2, 0.5rem); }

.bw-doc a {
	color: var(--bw-accent-ink, #8f631d);
	text-underline-offset: 0.18em;
}

.bw-doc a:hover { text-decoration-thickness: 2px; }

.bw-doc code {
	padding: 0.1em 0.4em;
	border-radius: var(--bw-radius-xs, 4px);
	background: var(--bw-bg-subtle, #faf8f5);
	font-family: var(--bw-font-mono, ui-monospace, monospace);
	font-size: 0.9em;
}

/* The cookie table is the one place a legal page earns a table. On a phone it
   scrolls inside its own box rather than pushing the page sideways. */
.bw-doc__table {
	display: block;
	width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	margin-bottom: var(--bw-space-5, 1.5rem);
	font-size: var(--bw-text-sm, 0.875rem);
	line-height: 1.6;
}

.bw-doc__table th,
.bw-doc__table td {
	padding: var(--bw-space-3, 0.75rem);
	border: 1px solid var(--bw-border, #e6e1da);
	text-align: left;
	vertical-align: top;
}

.bw-doc__table th {
	background: var(--bw-bg-subtle, #faf8f5);
	font-weight: 700;
}

.bw-doc__table td:first-child { white-space: nowrap; }

@media (max-width: 600px) {
	.bw-doc { padding-inline: var(--bw-space-4, 1rem); }
	.bw-doc__table td:first-child { white-space: normal; }
}

/* The bridge from the short notice to the long one. */
.bw-legal__more {
	color: var(--bw-accent-ink, #8f631d);
	white-space: nowrap;
}

#bw-footer .bw-legal__more {
	color: #d9b062;
	text-decoration-color: rgb(217 176 98 / 0.45);
}

#bw-footer .bw-legal__more:hover { text-decoration-color: currentColor; }

/* Four columns is one more than the footer was drawn for, so the two link
   lists get a slightly tighter rhythm to stop them running long on a laptop. */
@media (min-width: 1025px) {
	#bw-footer .elementor-nav-menu--layout-vertical .elementor-item { line-height: 1.45; }
}

/* ══ Header behaviour ═════════════════════════════════════════════════
 *
 * Four things, and none of them cost a layout:
 *
 *   fixed       the bar stays at the top of every screen, at every width
 *   glass       past the fold it turns translucent, blurs what is behind it
 *               and casts a shadow, so it reads as a layer above the page
 *               rather than a stripe painted on it
 *   progress    a brass hairline along the bottom edge showing how far
 *               through a long project page or article you are
 *
 * Everything animated here moves transform, opacity, background-colour or a
 * shadow. Nothing changes the header's height, so nothing below it ever
 * shifts — a shrinking bar is the old way of doing this and it moves the
 * whole document under the reader's thumb.
 *
 * The bar does not retract on the way down. It was written to, and it is the
 * fashion, but the one control a visitor wants within reach the whole way
 * down a six-thousand-pixel project page is the call button — and a bar that
 * removes it whenever a thumb moves the wrong way is not a header, it is a
 * header you have to go looking for.
 *
 * The pinning is plain CSS on the wrapper, so it holds with the script
 * blocked. Only the progress line and the sliding underline need JavaScript,
 * and both are decoration.
 */

/*
 * Elementor's header wrapper, not #bw-header itself. A sticky element can
 * only travel inside its own parent's box, and #bw-header's parent is the
 * 73px-tall wrapper — so sticking it there does nothing at all. The wrapper's
 * parent is <body>, which is as tall as the document. Measured, not guessed.
 */
.elementor-location-header {
	position: sticky;
	top: 0;
	z-index: 1000;
}

/* The admin bar is fixed above 782px and scrolls away below it. */
body.admin-bar .elementor-location-header { top: 32px; }

@media (max-width: 782px) {
	body.admin-bar .elementor-location-header { top: 0; }
}

#bw-header {
	transition:
		background-color 320ms ease,
		border-color 320ms ease,
		box-shadow 320ms ease;
}

.elementor-location-header.is-stuck #bw-header {
	/*
	 * 0.82, not the 0.7 that looks best in a screenshot. At 0.72 a white
	 * section passing behind the bar drags the nav links down to 4.57:1 —
	 * over the line, but with nothing in hand. At 0.82 the same worst case
	 * measures 6.6:1 and the blur still reads as glass.
	 */
	background-color: rgb(10 25 40 / 0.82);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	backdrop-filter: blur(18px) saturate(160%);
	border-bottom-color: rgb(201 150 60 / 0.3);
	box-shadow: 0 12px 32px -14px rgb(3 10 18 / 0.8);
}

/*
 * Without backdrop-filter a translucent bar is just a bar you can read the
 * page through, which is worse than an opaque one. Fall back to near-solid.
 */
@supports not (backdrop-filter: blur(1px)) {
	.elementor-location-header.is-stuck #bw-header {
		background-color: rgb(10 25 40 / 0.97);
	}
}

/*
 * The wordmark tightens by six per cent once you are past the fold. It is a
 * transform, so the header's box does not move and neither does the page —
 * the bar only looks more compact.
 */
#bw-header .bw-wordmark {
	transform-origin: left center;
	transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

.elementor-location-header.is-stuck #bw-header .bw-wordmark { transform: scale(0.94); }

/* ── Reading progress ───────────────────────────────────────────────── */

.bw-head__progress {
	position: absolute;
	inset: auto 0 -1px 0;
	height: 2px;
	transform: scaleX(0);
	transform-origin: left center;
	background: linear-gradient(90deg, var(--bw-accent-600, #8f631d), var(--bw-accent-300, #d9b062));
	opacity: 0;
	pointer-events: none;
	transition: opacity 260ms ease;
}

.elementor-location-header.is-stuck .bw-head__progress { opacity: 1; }

/* ── The sliding underline ──────────────────────────────────────────── */

/*
 * One bar that travels between the items, rather than Elementor's separate
 * underline per item fading in and out. The travel is what makes a menu feel
 * built rather than assembled — and it is one element, so the width it
 * animates is the cheapest layout there is.
 */
#bw-header .elementor-nav-menu--main .elementor-nav-menu { position: relative; }

.bw-navline {
	position: absolute;
	left: 0;
	bottom: 4px;
	width: 0;
	height: 2px;
	border-radius: var(--bw-radius-full, 999px);
	background: var(--bw-accent-400, #c9963c);
	opacity: 0;
	pointer-events: none;
	transition:
		transform 340ms cubic-bezier(0.4, 0, 0.2, 1),
		width 340ms cubic-bezier(0.4, 0, 0.2, 1),
		opacity 200ms ease;
}

.bw-navline.is-on { opacity: 1; }

#bw-header .elementor-nav-menu--main .elementor-item {
	transition: color 200ms ease;
}

/* ── The mobile panel ───────────────────────────────────────────────── */

/*
 * The items arrive one after another rather than all at once. Forty
 * milliseconds apart is under the threshold where it reads as a delay and
 * over the one where it reads as a single block appearing.
 */
.elementor-location-header.is-menuopen #bw-header .elementor-nav-menu--dropdown .elementor-item {
	animation: bw-head-item 360ms both cubic-bezier(0.2, 0.7, 0.3, 1);
}

.elementor-location-header.is-menuopen #bw-header .elementor-nav-menu--dropdown li:nth-child(1) .elementor-item { animation-delay: 20ms; }
.elementor-location-header.is-menuopen #bw-header .elementor-nav-menu--dropdown li:nth-child(2) .elementor-item { animation-delay: 60ms; }
.elementor-location-header.is-menuopen #bw-header .elementor-nav-menu--dropdown li:nth-child(3) .elementor-item { animation-delay: 100ms; }
.elementor-location-header.is-menuopen #bw-header .elementor-nav-menu--dropdown li:nth-child(4) .elementor-item { animation-delay: 140ms; }
.elementor-location-header.is-menuopen #bw-header .elementor-nav-menu--dropdown li:nth-child(5) .elementor-item { animation-delay: 180ms; }
.elementor-location-header.is-menuopen #bw-header .elementor-nav-menu--dropdown li:nth-child(6) .elementor-item { animation-delay: 220ms; }
.elementor-location-header.is-menuopen #bw-header .elementor-nav-menu--dropdown li:nth-child(7) .elementor-item { animation-delay: 260ms; }
.elementor-location-header.is-menuopen #bw-header .elementor-nav-menu--dropdown li:nth-child(n+8) .elementor-item { animation-delay: 300ms; }

@keyframes bw-head-item {
	from { opacity: 0; transform: translate3d(0, -8px, 0); }
	to   { opacity: 1; transform: none; }
}

/* The burger turns into its cross rather than swapping for it. */
#bw-header .elementor-menu-toggle {
	transition: transform 280ms cubic-bezier(0.34, 1.4, 0.64, 1);
}

#bw-header .elementor-menu-toggle.elementor-active { transform: rotate(180deg); }

/*
 * Pinning and glass are position and colour, not motion, so both survive
 * here. What goes is the travel: the underline jumps to its item, the
 * wordmark resizes without easing, the panel items simply appear.
 */
@media (prefers-reduced-motion: reduce) {
	#bw-header,
	#bw-header .bw-wordmark,
	.bw-navline,
	#bw-header .elementor-menu-toggle {
		transition: none;
	}

	.elementor-location-header.is-menuopen #bw-header .elementor-nav-menu--dropdown .elementor-item {
		animation: none;
	}

	#bw-header .elementor-menu-toggle.elementor-active { transform: none; }
}

/* ── The tricolour ribbon ───────────────────────────────────────────
 *
 * Three millimetres of India along the top edge of the bar: kesari, white
 * and green in the flag's own hues and equal thirds, unfurling once from the
 * left on first paint and catching a slow band of light every eleven
 * seconds — the way light travels across silk.
 *
 * What it deliberately is not is the flag. No Ashoka Chakra, no rectangle,
 * no staff. The Flag Code of India and the Prevention of Insults to National
 * Honour Act both take a dim view of the flag itself being used to decorate
 * a commercial page, and animating the Chakra as ornament would be the part
 * that offends. The three colours as a ribbon are a different thing — the
 * cue every Indian reads instantly, carrying none of that. So: the colours,
 * yes; the emblem, never.
 *
 * It rides on #bw-header::after because ::before already belongs to
 * Elementor's container overlay, and on a pseudo-element because a brand
 * ribbon should not depend on a script or a template import to exist.
 */

#bw-header::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background-image:
		/* the light travelling along the top… */
		linear-gradient(100deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 0.8) 50%, rgb(255 255 255 / 0) 100%),
		/* …over the bands themselves… */
		linear-gradient(90deg, #ff9933 0 33.34%, #ffffff 33.34% 66.67%, #138808 66.67% 100%),
		/* …and the same pair along the bottom, its light running the other way. */
		linear-gradient(100deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 0.7) 50%, rgb(255 255 255 / 0) 100%),
		linear-gradient(90deg, #ff9933 0 33.34%, #ffffff 33.34% 66.67%, #138808 66.67% 100%);
	background-size: 18% 3px, 100% 3px, 18% 3px, 100% 3px;
	background-repeat: no-repeat;
	background-position: -25% top, 0 top, 125% bottom, 0 bottom;
	transform-origin: left center;
	animation:
		bw-tri-unfurl 900ms cubic-bezier(0.22, 1, 0.36, 1) both,
		bw-tri-sheen 11s ease-in-out 1.4s infinite;
}

@keyframes bw-tri-unfurl {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/*
 * Parked for three quarters of the cycle, then across in about two and a
 * half seconds. A shine that never stops is a loading bar, not a flourish.
 * The two lights cross in the middle: the top one runs left to right, the
 * bottom one right to left.
 */
@keyframes bw-tri-sheen {
	0%, 76% { background-position: -25% top, 0 top, 125% bottom, 0 bottom; }
	100%    { background-position: 125% top, 0 top, -25% bottom, 0 bottom; }
}

/* ── The atmosphere inside the bar ──────────────────────────────────
 *
 * The same widget the footer runs, on the tricolour palette and resized for
 * a bar seventy-three pixels tall: kesari warming the left, a white haze
 * through the middle, green cooling the right, a sparse drift of stars over
 * all three, and a streak of light across it every so often.
 *
 * z-index -1 puts it above the bar's own background and below every word in
 * it, without touching the positioning of a single widget — #bw-header is
 * the stacking context and .e-con-inner is static, so a negative layer here
 * lands exactly between the two.
 */
#bw-header .elementor-widget-bw-footer-atmos {
	position: absolute;
	inset: 0;
	z-index: -1;
	margin: 0;
	width: auto;
	pointer-events: none;
}

#bw-header .bw-atmos { transition: opacity 320ms ease; }

/*
 * This is the whole reason the wash is allowed to be as strong as it is.
 * Once the bar turns to glass the page shows through it, and most of this
 * site is white; measured, the menu text over the overlap of the kesari and
 * white clouds fell to 3.67:1 against a white section, under the 4.5 the
 * standard asks. At a third it measures 5.35:1 there and 5.80:1 at the top
 * of the page, where the bar is still solid navy and the wash is full.
 */
.elementor-location-header.is-stuck #bw-header .bw-atmos { opacity: 0.34; }

#bw-header .bw-atmos__glow {
	top: -70%;
	bottom: auto;
	height: 240%;
	filter: blur(26px);
}

#bw-header .bw-atmos__glow--a { left: -6%; right: auto; width: 44%; }
#bw-header .bw-atmos__glow--c { left: 28%; right: auto; width: 40%; }
#bw-header .bw-atmos__glow--b { left: auto; right: -6%; width: 44%; }

/* A tile the height of the bar, so the stars read as a band and not as the
   top slice of a sky that has been cropped off. */
#bw-header .bw-atmos__stars--near { background-size: 190px 74px; }
#bw-header .bw-atmos__stars--mid  { background-size: 250px 74px; }
#bw-header .bw-atmos__stars--far  { background-size: 320px 74px; }

/*
 * The footer's comet falls 44vh on its way across, which in a bar seventy-
 * three pixels tall means it leaves through the floor before anybody sees
 * it. Here it runs almost flat and drops sixteen pixels in the whole
 * crossing — a streak along the bar rather than a dive through it.
 */
#bw-header .bw-atmos__comet {
	top: 26%;
	width: 120px;
	height: 1px;
	animation-name: bw-atmos-comet-bar;
	animation-duration: 16s;
}

@keyframes bw-atmos-comet-bar {
	0%, 80%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(4deg); }
	84%       { opacity: 0.85; }
	97%, 100% { opacity: 0; transform: translate3d(135vw, 16px, 0) rotate(4deg); }
}

/* ── The tricolour palette ──────────────────────────────────────────── */

.bw-atmos--tricolour .bw-atmos__glow--a {
	background: radial-gradient(closest-side, rgb(255 153 51 / 0.22), transparent);
}

.bw-atmos--tricolour .bw-atmos__glow--c {
	background: radial-gradient(closest-side, rgb(255 255 255 / 0.09), transparent);
}

.bw-atmos--tricolour .bw-atmos__glow--b {
	background: radial-gradient(closest-side, rgb(19 136 8 / 0.26), transparent);
}

/* Stars tinted from the same three, rather than the footer's brass. */
.bw-atmos--tricolour .bw-atmos__stars--near {
	background-image:
		radial-gradient(1.4px 1.4px at 30px 22px, rgb(255 255 255 / 0.8), transparent),
		radial-gradient(1.2px 1.2px at 120px 52px, rgb(255 204 153 / 0.6), transparent),
		radial-gradient(1.3px 1.3px at 165px 14px, rgb(255 255 255 / 0.55), transparent);
}

.bw-atmos--tricolour .bw-atmos__stars--mid {
	background-image:
		radial-gradient(1.1px 1.1px at 60px 38px, rgb(255 255 255 / 0.5), transparent),
		radial-gradient(1px 1px at 200px 12px, rgb(168 214 160 / 0.5), transparent);
}

.bw-atmos--tricolour .bw-atmos__stars--far {
	background-image:
		radial-gradient(1.8px 1.8px at 95px 30px, rgb(255 153 51 / 0.45), transparent),
		radial-gradient(1.6px 1.6px at 255px 58px, rgb(19 136 8 / 0.5), transparent);
}

@media (prefers-reduced-motion: reduce) {
	#bw-header::after { animation: none; }
} { animation: none; }
}

/* ══ The featured row that turns ══════════════════════════════════════
 *
 * Five cards on screen, the rest a swipe or ten seconds away, and the page
 * no longer than one set. A scroll-snap strip: with the script blocked it is
 * still a slider you can drag and swipe, because that is what an overflowing
 * scroll container already is.
 */

.bw-rot { position: relative; }

.bw-rot__track {
	display: flex;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	/* Room for the cards' own shadows, which overflow: auto would otherwise
	   shave off along the top and bottom edges. */
	padding-block: 4px 10px;
}

.bw-rot__track::-webkit-scrollbar { display: none; }

.bw-rot__track:focus-visible {
	outline: 2px solid var(--bw-accent-400, #c9963c);
	outline-offset: 4px;
	border-radius: var(--bw-radius-md, 10px);
}

.bw-rot__page {
	flex: 0 0 100%;
	min-width: 0;
	scroll-snap-align: start;
}

/* ── Controls ───────────────────────────────────────────────────────── */

.bw-rot__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--bw-space-3, 0.75rem);
	margin-top: var(--bw-space-5, 1.5rem);
}

.bw-rot__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-full, 999px);
	background: var(--bw-bg, #fff);
	color: var(--bw-text, #171412);
	cursor: pointer;
	transition:
		border-color var(--bw-duration-fast, 120ms) var(--bw-ease, ease),
		background-color var(--bw-duration-fast, 120ms) var(--bw-ease, ease);
}

.bw-rot__arrow:hover {
	border-color: var(--bw-accent-400, #c9963c);
	background: var(--bw-bg-subtle, #faf8f5);
}

.bw-rot__arrow:focus-visible {
	outline: 2px solid var(--bw-accent-400, #c9963c);
	outline-offset: 2px;
}

.bw-rot__dots {
	display: flex;
	align-items: center;
	gap: 2px;
}

/*
 * The button is 28px so the tap target clears the 24px the standard asks
 * for; the dot you can see inside it is 8px. A target you can only hit with
 * a stylus is not a control, it is an ornament.
 */
.bw-rot__dot {
	position: relative;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: var(--bw-radius-full, 999px);
	background: none;
	cursor: pointer;
}

.bw-rot__dot::after {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	width: 8px;
	height: 8px;
	transform: translate(-50%, -50%);
	border-radius: var(--bw-radius-full, 999px);
	background: var(--bw-border-strong, #d5cec4);
	transition:
		background-color var(--bw-duration-fast, 120ms) var(--bw-ease, ease),
		width var(--bw-duration-base, 200ms) var(--bw-ease-out, ease);
}

.bw-rot__dot[aria-selected="true"]::after {
	width: 22px;
	background: var(--bw-accent-400, #c9963c);
}

.bw-rot__dot:hover::after { background: var(--bw-accent-300, #d9b062); }

.bw-rot__dot:focus-visible {
	outline: 2px solid var(--bw-accent-400, #c9963c);
	outline-offset: -4px;
	border-radius: var(--bw-radius-full, 999px);
}

@media (prefers-reduced-motion: reduce) {
	.bw-rot__track { scroll-behavior: auto; }
	.bw-rot__dot::after,
	.bw-rot__arrow { transition: none; }
}

/* ══ The corner notice ════════════════════════════════════════════════
 *
 * Bottom-left, above everything, out of the way of everything. It is a card
 * and not a dialog on purpose: the page keeps working underneath it, the
 * keyboard is never trapped in it, and nothing has to be dismissed before a
 * visitor can carry on reading.
 *
 * Bottom-LEFT rather than right because the right is where a floating call or
 * WhatsApp button goes on this kind of site, and a notice that lands on the
 * one button somebody was reaching for is worse than no notice.
 */

.bw-notice {
	position: fixed;
	left: var(--bw-space-4, 1rem);
	bottom: var(--bw-space-4, 1rem);
	z-index: 1200;
	display: flex;
	align-items: stretch;
	max-width: min(360px, calc(100vw - 2rem));
	border: 1px solid var(--bw-border, #e6e1da);
	border-radius: var(--bw-radius-md, 10px);
	background: var(--bw-bg, #fff);
	box-shadow: var(--bw-shadow-xl, 0 24px 56px rgb(10 25 40 / 0.16));
	overflow: hidden;
}

/*
 * The card's resting state is visible, and the movement is an animation
 * layered over it rather than a transition out of opacity:0. A transition
 * needs a rendered frame to start from, which means unhiding, waiting a
 * frame, then adding a class — and in a background tab that frame never
 * arrives, so the card sits there at opacity 0 and 14px low, present in the
 * page and invisible on it. Caught exactly that. Written this way the worst
 * a throttled tab can do is skip the flourish.
 */
.bw-notice.is-in { animation: bw-notice-in 320ms var(--bw-ease-out, ease); }

.bw-notice.is-out { animation: bw-notice-out 260ms ease both; }

@keyframes bw-notice-in {
	from { opacity: 0; transform: translate3d(0, 14px, 0); }
	to   { opacity: 1; transform: none; }
}

@keyframes bw-notice-out {
	from { opacity: 1; transform: none; }
	to   { opacity: 0; transform: translate3d(0, 14px, 0); }
}

.bw-notice__link {
	display: flex;
	align-items: center;
	gap: var(--bw-space-3, 0.75rem);
	padding: var(--bw-space-3, 0.75rem);
	padding-right: var(--bw-space-6, 2rem);
	text-decoration: none;
	color: inherit;
	min-width: 0;
}

.bw-notice__link:hover .bw-notice__title { text-decoration: underline; }

.bw-notice__img {
	flex: none;
	width: 72px;
	height: 72px;
	border-radius: var(--bw-radius-sm, 6px);
	object-fit: cover;
	background: var(--bw-bg-subtle, #faf8f5);
}

.bw-notice__text {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.bw-notice__tag {
	font-size: var(--bw-text-2xs, 0.6875rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bw-accent-ink, #8f631d);
}

.bw-notice__title {
	font-size: var(--bw-text-sm, 0.875rem);
	font-weight: 700;
	line-height: 1.35;
	color: var(--bw-text, #171412);
	/* Two lines is a notice; four is an article somebody has to read. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bw-notice__meta {
	font-size: var(--bw-text-xs, 0.75rem);
	line-height: 1.4;
	color: var(--bw-text-subtle, #6e675e);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * 28px, so the target clears the 24px the standard asks for even though the
 * cross inside it is small. It sits over the card rather than in the flow, so
 * the picture and the words keep the full width.
 */
.bw-notice__close {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: var(--bw-radius-full, 999px);
	background: none;
	color: var(--bw-text-subtle, #6e675e);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.bw-notice__close:hover {
	background: var(--bw-bg-subtle, #faf8f5);
	color: var(--bw-text, #171412);
}

.bw-notice__close:focus-visible,
.bw-notice__link:focus-visible {
	outline: 2px solid var(--bw-accent-400, #c9963c);
	outline-offset: -3px;
	border-radius: var(--bw-radius-sm, 6px);
}

/* On a phone it spans the width rather than perching in a corner too small
   to read it in. */
@media (max-width: 520px) {
	.bw-notice {
		left: var(--bw-space-3, 0.75rem);
		right: var(--bw-space-3, 0.75rem);
		bottom: var(--bw-space-3, 0.75rem);
		max-width: none;
	}

	.bw-notice__img { width: 60px; height: 60px; }
}

@media (prefers-reduced-motion: reduce) {
	.bw-notice.is-in,
	.bw-notice.is-out { animation-duration: 1ms; }
}

/* ── The number, its flag, and what it opens ─────────────────────────
 *
 * The number is the loudest thing on the button on a phone, because it is
 * the thing somebody is looking for. The flag sits in front of it: beside a
 * +91 the country is worth a mark, and a phone glyph on a button that is
 * already a phone number says nothing twice.
 */

.bw-callchoice__num {
	font-weight: 800;
	letter-spacing: 0.01em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/*
 * The flag across the whole number, in three equal bands.
 *
 * The green is lifted off the flag's own #138808, which measures 3.85:1 on
 * the navy bar — under the 4.5 the standard asks, which would have made a
 * third of the phone number the third nobody could read. #2fb84a measures
 * 6.83:1. Kesari is the flag's own and measures 8.33:1; the white band,
 * 17.76:1.
 */
#bw-header .bw-num__band--1 { color: #ff9933; }
#bw-header .bw-num__band--2 { color: #ffffff; }
#bw-header .bw-num__band--3 { color: #2fb84a; }

/* The border and the chevron stay brass, so the control still reads as one
   of the outline buttons rather than becoming its own species. */
#bw-header .bw-callchoice__btn:hover .bw-num__band--2,
#bw-header .bw-callchoice__btn:focus-visible .bw-num__band--2 { color: #ffffff; }

/* A white flag on a dark bar needs an edge, or it bleeds into the navy. */
.bw-flag {
	flex: none;
	border-radius: 1.5px;
	box-shadow: 0 0 0 1px rgb(255 255 255 / 0.25);
}

#bw-header .bw-flag { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.35); }

/* The third option is a different kind of thing from a call and a message —
   it asks something of the visitor rather than offering something — so it
   sits under a rule of its own. */
.bw-callchoice__opt--add {
	border-top: 1px solid var(--bw-border, #e6e1da);
}

/* The smallest phones: the gap and the flag both give a little more. */
@media (max-width: 380px) {
	#bw-header > .e-con-inner { column-gap: 8px; }

	#bw-header .bw-callchoice__btn .bw-flag {
		width: 15px;
		height: 10px;
	}
}

/* ══ The desktop row stays a row ══════════════════════════════════════
 *
 * The template asks for 14px menu items and Elementor never writes it:
 * typography_menu_item_font_size is not one of its control names, so the
 * generated post-214.css carries the colour and the padding for these items
 * and no size at all, and they fall back to the theme's 16px. Two pixels
 * across seven items is sixty pixels the row was never drawn for — which is
 * what put "Contact Us" on a second line and took the bar from 73px to 116.
 *
 * Owned here now, beside the rest of the header, so a control name shifting
 * under us cannot quietly make the header three rows again.
 */
#bw-header .elementor-nav-menu--main .elementor-item {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
}

/* And the row is a row by instruction, not by luck. */
#bw-header .elementor-nav-menu--main .elementor-nav-menu { flex-wrap: nowrap; }

/*
 * Between the point the full menu appears and the point the bar is wide
 * enough to be comfortable, the padding gives first and then the type. The
 * wordmark and the call block are fixed widths either side of it, so the
 * menu is the only thing with any give at all.
 */
@media (min-width: 1025px) and (max-width: 1240px) {
	#bw-header .elementor-nav-menu--main .elementor-item {
		padding-left: 7px;
		padding-right: 7px;
	}
}

@media (min-width: 1025px) and (max-width: 1120px) {
	#bw-header > .e-con-inner { column-gap: 16px; }

	#bw-header .elementor-nav-menu--main .elementor-item {
		padding-left: 5px;
		padding-right: 5px;
		font-size: 13px;
	}
}

/* ══ The lead popup ═══════════════════════════════════════════════════
 *
 * The same .bw-modal every other dialog on the site uses, with three
 * differences: it is a little wider, it folds the site-visit fields away
 * until somebody wants them, and on a phone it sits at the bottom of the
 * screen rather than the middle — a sheet, where a thumb already is, rather
 * than a box in the centre with the close button furthest from the hand.
 */

.bw-popup { max-width: 460px; }

.bw-popup .bw-modal__intro { margin-bottom: var(--bw-space-5, 1.5rem); }

/* ── The site-visit half ────────────────────────────────────────────── */

.bw-popup__visit {
	margin-bottom: var(--bw-space-4, 1rem);
	border-top: 1px solid var(--bw-border, #e6e1da);
	padding-top: var(--bw-space-4, 1rem);
}

.bw-popup__visitsum {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	cursor: pointer;
	list-style: none;
	font-size: var(--bw-text-sm, 0.875rem);
	font-weight: 600;
	color: var(--bw-accent-ink, #8f631d);
}

.bw-popup__visitsum::-webkit-details-marker { display: none; }

/* A chevron drawn in CSS rather than another inline SVG: it is one glyph
   that has to rotate, and a border triangle rotates for free. */
.bw-popup__visitsum::before {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform var(--bw-duration-base, 200ms) var(--bw-ease, ease);
}

.bw-popup__visit[open] > .bw-popup__visitsum::before { transform: rotate(45deg); }

.bw-popup__visitsum:focus-visible {
	outline: 2px solid var(--bw-accent-400, #c9963c);
	outline-offset: 3px;
	border-radius: var(--bw-radius-xs, 4px);
}

.bw-popup__visit[open] > .bw-popup__visitsum { margin-bottom: var(--bw-space-3, 0.75rem); }

/* ── On a phone it is a sheet ───────────────────────────────────────── */

@media (max-width: 560px) {
	.bw-popup {
		/* Pinned to the bottom edge, full width, square along the bottom so it
		   reads as part of the screen rather than a card floating on it. */
		margin: auto auto 0;
		max-width: none;
		width: 100%;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		/* Room for a long form on a short screen, and its own scroll rather
		   than the page's. */
		max-height: 88dvh;
		overflow-y: auto;
	}
}

/* ── Tablet ─────────────────────────────────────────────────────────── */

@media (min-width: 561px) and (max-width: 900px) {
	.bw-popup { max-width: 420px; }
}

@media (prefers-reduced-motion: reduce) {
	.bw-popup__visitsum::before { transition: none; }
}