/* ==========================================================================
   HBP Showcase — main stylesheet
   Brand tokens taken from the House Builder Pro app (portal theme).
   ========================================================================== */

:root {
	/* HBP brand */
	--hbps-canvas: #f5f3ec;
	--hbps-card: #ffffff;
	--hbps-ink: #2e2e2d;
	--hbps-text: #1e1f1c;
	--hbps-muted: #5f5e57;
	--hbps-line: #e4e0d5;
	--hbps-green: #3aaa35;
	--hbps-green-btn: #2e8b2a;
	--hbps-green-dark: #24701f;
	--hbps-green-deep: #164213;
	--hbps-tint: #d9eed7;
	--hbps-grey: #706f6f;
	--hbps-white: #ffffff;
	--hbps-on-ink: #f5f3ec;
	--hbps-on-ink-muted: #b7b5ac;

	/* Type */
	--hbps-font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	--hbps-font-head: "Fraunces", Georgia, "Times New Roman", serif;
	--hbps-text-hero: 84px;
	--hbps-text-display: 64px;
	--hbps-text-value: 40px;
	--hbps-text-input: 28px;
	--hbps-text-card: 24px;
	--hbps-text-body: 18px;
	--hbps-text-nav: 17px;
	--hbps-text-sm: 15px;

	/* Layout */
	--hbps-container: 1280px;
	--hbps-edge: 40px;
	--hbps-header-h: 88px;
	--hbps-bar-h: 0px;
	--hbps-radius: 20px;
	--hbps-radius-sm: 10px;
	--hbps-pill: 100px;
	--hbps-shadow: 0 4px 16px rgb(46 46 45 / .12);
}

@media (max-width: 1024px) {
	:root { --hbps-text-hero: 60px; --hbps-text-display: 50px; --hbps-text-value: 34px; }
}
@media (max-width: 767px) {
	:root {
		--hbps-edge: 20px;
		--hbps-header-h: 72px;
		--hbps-text-hero: 40px;
		--hbps-text-display: 36px;
		--hbps-text-value: 28px;
		--hbps-text-input: 20px;
		--hbps-text-card: 20px;
		--hbps-text-body: 17px;
	}
}

/* Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	padding-top: calc(var(--hbps-header-h) + var(--hbps-bar-h));
	background: var(--hbps-canvas);
	color: var(--hbps-text);
	font-family: var(--hbps-font);
	font-size: var(--hbps-text-body);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--hbps-green); outline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--hbps-font-head); font-weight: 400; line-height: 1.1; color: var(--hbps-text); }

.hbps-edge { padding-inline: var(--hbps-edge); }
.hbps-container { max-width: var(--hbps-container); margin-inline: auto; }
.hbps-content { max-width: 820px; margin-inline: auto; }
.hbps-center { text-align: center; }
.hbps-visually-hidden {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hbps-skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--hbps-ink); color: var(--hbps-on-ink); padding: 8px 16px;
}
.hbps-skip-link:focus { left: 0; }

/* Display headings: regular weight with a bold, green key word ----------- */
.hbps-display {
	margin: 0 0 56px;
	font-size: var(--hbps-text-display);
	font-weight: 350;
	letter-spacing: -.02em;
	line-height: 1.02;
	overflow-wrap: break-word;
}
.hbps-display strong { font-weight: 650; color: var(--hbps-green-btn); }
.hbps-display em { font-style: italic; font-weight: 350; }
.hbps-eyebrow {
	margin: 0 0 14px;
	font-size: var(--hbps-text-sm);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hbps-green-btn);
}
.hbps-lead { max-width: 720px; margin: -28px auto 0; font-size: 20px; color: var(--hbps-muted); }

/* Buttons --------------------------------------------------------------- */
.hbps-pill,
.hbp_button,
div.hbp_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 200px;
	height: 46px;
	padding-inline: 28px;
	border: 1px solid var(--hbps-green-btn);
	border-radius: var(--hbps-pill);
	background: var(--hbps-green-btn);
	color: var(--hbps-white);
	font-family: var(--hbps-font);
	font-size: var(--hbps-text-nav);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.hbps-pill:hover,
.hbp_button:hover,
div.hbp_button:hover { background: var(--hbps-green-dark); border-color: var(--hbps-green-dark); color: var(--hbps-white); }
.hbps-pill--ghost { background: transparent; border-color: currentColor; color: var(--hbps-white); }
.hbps-pill--ghost:hover { background: var(--hbps-white); border-color: var(--hbps-white); color: var(--hbps-ink); }

.hbps-textlink {
	display: inline-flex; align-items: center; gap: 10px;
	font-weight: 700; text-decoration: none; color: var(--hbps-green-btn);
}
.hbps-textlink svg { width: 24px; height: 12px; transition: transform .2s ease; }
.hbps-textlink:hover svg { transform: translateX(6px); }
.hbps-more { margin: 48px 0 0; }

/* Header ---------------------------------------------------------------- */
.hbps-nav {
	position: fixed; inset: 0 0 auto 0; z-index: 50;
	display: flex;
	flex-direction: column;
	height: calc(var(--hbps-header-h) + var(--hbps-bar-h));
	background: var(--hbps-canvas);
	transition: transform .3s ease, box-shadow .25s ease;
}
.admin-bar .hbps-nav { top: 32px; }
@media (max-width: 782px) { .admin-bar .hbps-nav { top: 46px; } }
@media (max-width: 600px) { .admin-bar .hbps-nav { top: 0; } }
.hbps-nav.is-scrolled { box-shadow: var(--hbps-shadow); }
.hbps-nav.is-hidden { transform: translateY(-110%); }
.hbps-nav__inner { display: flex; align-items: center; flex: 0 0 var(--hbps-header-h); height: var(--hbps-header-h); padding-inline: var(--hbps-edge); }
.hbps-nav__logo-link { display: inline-flex; flex-shrink: 0; }
.hbps-logo { display: block; width: 190px; height: 54px; object-fit: contain; object-position: left center; }
@media (max-width: 767px) { .hbps-logo { width: 150px; height: 44px; } }
.hbps-nav__links { display: flex; align-items: center; gap: 36px; margin-left: auto; }
.hbps-nav__link { font-size: var(--hbps-text-nav); font-weight: 500; text-decoration: none; white-space: nowrap; }
.hbps-nav__link:hover,
.hbps-nav__link[aria-current="page"] {
	text-decoration: underline;
	text-decoration-color: var(--hbps-green);
	text-decoration-thickness: 2px;
	text-underline-offset: 8px;
}
.hbps-nav__contact { margin-left: 44px; min-width: 160px; height: 42px; }
.hbps-nav__hamburger {
	display: none; flex-direction: column; justify-content: center; gap: 7px;
	width: 40px; height: 40px; margin-left: auto; padding: 0;
	background: none; border: 0; cursor: pointer;
}
.hbps-nav__bar { display: block; width: 100%; height: 3px; border-radius: 2px; background: var(--hbps-ink); }
.hbps-nav__bar:nth-child(3) { width: 70%; margin-left: auto; background: var(--hbps-green); }

.hbps-panel {
	position: fixed; inset: 0 0 0 auto; z-index: 60;
	width: 420px; max-width: 100%;
	display: flex; flex-direction: column;
	background: var(--hbps-canvas);
	box-shadow: -4px 0 24px rgb(46 46 45 / .18);
	transform: translateX(100%);
	visibility: hidden;
	transition: transform .3s ease, visibility 0s linear .3s;
}
.hbps-panel.is-open { transform: none; visibility: visible; transition-delay: 0s; }
.hbps-panel__header { display: flex; justify-content: space-between; align-items: center; height: var(--hbps-header-h); padding-inline: var(--hbps-edge); }
.hbps-panel__close { width: 40px; height: 40px; padding: 6px; background: none; border: 0; cursor: pointer; color: var(--hbps-ink); }
.hbps-panel__items { list-style: none; margin: 0; padding: 24px 0; }
.hbps-panel__link {
	display: flex; align-items: center; height: 54px; padding-inline: var(--hbps-edge);
	font-size: 20px; text-decoration: none; transition: background-color .2s ease, color .2s ease;
}
.hbps-panel__link:hover { background: var(--hbps-green-btn); color: var(--hbps-white); }
.hbps-panel__link[aria-current="page"] { background: var(--hbps-tint); }
.hbps-panel__footer { padding: 8px var(--hbps-edge) 40px; }
.hbps-overlay { position: fixed; inset: 0; z-index: 55; background: rgb(46 46 45 / .5); }
@media (max-width: 1024px) {
	.hbps-nav__links, .hbps-nav__contact { display: none; }
	.hbps-nav__hamburger { display: flex; }
}
@media (min-width: 1025px) { .hbps-panel, .hbps-overlay { display: none !important; } }

/* Demonstration-site bar ---------------------------------------------- */
body.hbps-demo { --hbps-bar-h: 40px; }
.hbps-demo-bar {
	flex: 0 0 var(--hbps-bar-h);
	display: flex; align-items: center; justify-content: center; gap: 12px;
	padding-inline: var(--hbps-edge);
	background: var(--hbps-green-deep); color: var(--hbps-white);
	font-size: 14px; line-height: 1.2; text-align: center;
	white-space: nowrap; overflow: hidden;
}
.hbps-demo-bar strong {
	flex-shrink: 0; padding: 4px 10px; border-radius: var(--hbps-pill);
	background: var(--hbps-green); color: var(--hbps-white);
	font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
.hbps-demo-bar__more { overflow: hidden; text-overflow: ellipsis; }
/* Keep the demo notice on screen: don't auto-hide the header in demo mode */
.hbps-demo .hbps-nav.is-hidden { transform: none; }
@media (max-width: 900px) {
	.hbps-demo-bar__more { display: none; }
	.hbps-demo-bar::after { content: "Nothing is for sale."; overflow: hidden; text-overflow: ellipsis; }
}
.hbps-footer__demo {
	margin: 40px 0 0; padding: 14px 18px; max-width: 640px;
	border: 1px solid var(--hbps-green); border-radius: var(--hbps-radius-sm);
	font-size: var(--hbps-text-sm);
}
.hbps-footer__demo strong { color: var(--hbps-green); }

/* Hero ------------------------------------------------------------------ */
.hbps-hero {
	position: relative;
	height: calc(100svh - var(--hbps-header-h) - var(--hbps-bar-h));
	min-height: 560px;
	max-height: 1000px;
	overflow: hidden;
	color: var(--hbps-white);
}
.hbps-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hbps-hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(30 31 28 / .35), rgb(30 31 28 / .55)); }
.hbps-hero__content {
	position: relative; z-index: 1; height: 100%;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px;
	padding: 0 var(--hbps-edge) 80px; text-align: center;
}
.hbps-hero__title {
	margin: 0; max-width: 1050px;
	color: var(--hbps-white);
	font-size: var(--hbps-text-hero);
	font-weight: 350;
	letter-spacing: -.02em;
	line-height: 1.05;
	text-wrap: balance;
}
.hbps-hero__title strong { font-weight: 650; }
.hbps-hero__title strong::after {
	content: ""; display: block; width: 90px; height: 6px; margin: 28px auto 0;
	border-radius: 3px; background: var(--hbps-green);
}
.hbps-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.hbps-hero__cue {
	position: absolute; left: 50%; bottom: 40px; z-index: 1; transform: translateX(-50%);
	display: flex; flex-direction: column; align-items: center; gap: 12px;
	color: var(--hbps-white); text-decoration: none;
}
.hbps-hero__cue-label { font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.hbps-hero__cue-arrow { display: block; width: 40px; height: 21px; }
.hbps-hero__cue-arrow svg { display: block; width: 100%; height: 100%; }
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
	.hbps-hero__cue-arrow { animation: hbps-bob 2s ease-in-out infinite; }
	@keyframes hbps-bob { 50% { transform: translateY(10px); } }
}
@media (max-width: 767px) {
	.hbps-hero__cue { display: none; }
	.hbps-hero__content { padding-bottom: 0; }
}

/* Sections -------------------------------------------------------------- */
.hbps-section { padding-block: 96px 104px; scroll-margin-top: calc(var(--hbps-header-h) + var(--hbps-bar-h)); }
.hbps-section--tight-top { padding-top: 24px; }
.hbps-page-head { padding-block: 80px 56px; }
.hbps-page-head .hbps-display { margin-bottom: 0; }
.hbps-page-head .hbps-lead { margin-top: 24px; }
.hbps-subhead { margin-top: 104px; }
@media (max-width: 767px) {
	.hbps-section { padding-block: 60px; }
	.hbps-section--tight-top { padding-top: 12px; }
	.hbps-page-head { padding-block: 48px 36px; }
	.hbps-display { margin-bottom: 36px; }
}

/* Full-bleed image bands (subtle parallax on desktop) */
.hbps-band {
	height: clamp(260px, 42vw, 620px);
	background: var(--hbps-ink) var(--hbps-band) center / cover no-repeat;
}

/* Grids ----------------------------------------------------------------- */
.hbps-grid { display: grid; gap: 30px; }
.hbps-grid > * { min-width: 0; }
.hbps-grid--devs, .hbps-grid--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hbps-grid--count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hbps-grid--count-1 { grid-template-columns: 1fr; }

@media (max-width: 1280px) {
	/* Swipeable rows on smaller screens (home page rows only) */
	.hbps-grid:not(.hbps-grid--wrap):not(.hbps-grid--count-1) {
		display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
		margin-inline: calc(var(--hbps-edge) * -1); padding-inline: var(--hbps-edge);
		scroll-padding-inline: var(--hbps-edge);
	}
	.hbps-grid:not(.hbps-grid--wrap):not(.hbps-grid--count-1)::-webkit-scrollbar { display: none; }
	.hbps-grid:not(.hbps-grid--wrap):not(.hbps-grid--count-1) > * { flex: 0 0 44%; scroll-snap-align: start; }
	.hbps-grid--wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
	.hbps-grid:not(.hbps-grid--wrap):not(.hbps-grid--count-1) > * { flex-basis: 86%; }
}
@media (max-width: 640px) {
	.hbps-grid--wrap { grid-template-columns: 1fr; }
}

/* Development card ------------------------------------------------------ */
.hbps-dev-card {
	position: relative;
	border-radius: var(--hbps-radius);
	overflow: hidden;
	background: var(--hbps-ink);
	box-shadow: var(--hbps-shadow);
	transition: transform .25s ease, box-shadow .25s ease;
}
.hbps-dev-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgb(46 46 45 / .32); }
.hbps-dev-card__link { display: flex; flex-direction: column; height: 100%; color: var(--hbps-on-ink); text-decoration: none; }
.hbps-dev-card__link:focus-visible { outline-offset: -4px; }
.hbps-dev-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #3c3c3b; }
.hbps-dev-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.hbps-dev-card:hover .hbps-dev-card__media img { transform: scale(1.05); }
.hbps-dev-card__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; padding: 30px; }
.hbps-dev-card__name { margin: 0; color: var(--hbps-white); font-size: var(--hbps-text-input); font-weight: 450; line-height: 1.1; }
.hbps-dev-card__location { margin: 0; font-style: italic; color: var(--hbps-on-ink-muted); }
.hbps-dev-card__price { margin: 0; font-weight: 700; color: var(--hbps-green); }
.hbps-dev-card__cta {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	align-self: flex-start; width: 220px; height: 44px; margin-top: auto;
	border-radius: var(--hbps-pill); background: var(--hbps-green-btn); color: var(--hbps-white);
	font-weight: 700; white-space: nowrap; transition: background-color .2s ease;
}
.hbps-dev-card__body > p:last-of-type { margin-bottom: 18px; }
.hbps-dev-card__cta svg { width: 24px; height: 12px; transition: transform .2s ease; }
.hbps-dev-card:hover .hbps-dev-card__cta { background: var(--hbps-green-dark); }
.hbps-dev-card:hover .hbps-dev-card__cta svg { transform: translateX(8px); }

/* Single development: wide split card */
@media (min-width: 768px) {
	.hbps-grid--count-1 .hbps-dev-card__link { flex-direction: row-reverse; }
	.hbps-grid--count-1 .hbps-dev-card__media { flex: 0 0 55%; aspect-ratio: auto; min-height: 460px; }
	.hbps-grid--count-1 .hbps-dev-card__body { justify-content: center; gap: 18px; padding: 50px 60px; }
	.hbps-grid--count-1 .hbps-dev-card__name { font-size: var(--hbps-text-value); }
	.hbps-grid--count-1 .hbps-dev-card__cta { margin-top: 24px; }
}

.hbps-badge {
	position: absolute; top: 16px; right: 16px;
	display: inline-flex; align-items: center; height: 28px; padding-inline: 14px;
	border-radius: var(--hbps-pill);
	box-shadow: 0 4px 8px rgb(46 46 45 / .18);
	font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap;
}
.hbps-badge--soon { background: var(--hbps-tint); color: var(--hbps-green-deep); }
.hbps-badge--past { background: var(--hbps-ink); color: var(--hbps-white); }
.hbps-badge--price { background: var(--hbps-white); color: var(--hbps-text); }

/* Update / property card ----------------------------------------------- */
.hbps-update-card__link { display: block; text-decoration: none; }
.hbps-update-card__media {
	position: relative; display: block; aspect-ratio: 3 / 2; margin-bottom: 22px;
	border-radius: var(--hbps-radius); overflow: hidden; background: var(--hbps-tint);
}
.hbps-update-card__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.hbps-update-card__link:hover .hbps-update-card__img { transform: scale(1.05); }
.hbps-update-card__date {
	display: block; margin-bottom: 6px;
	font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hbps-green-btn);
}
.hbps-update-card__title { display: block; font-family: var(--hbps-font-head); font-size: var(--hbps-text-card); line-height: 1.2; }
.hbps-update-card__link:hover .hbps-update-card__title {
	text-decoration: underline; text-decoration-color: var(--hbps-green);
	text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.hbps-property-card__meta { display: block; margin-top: 8px; color: var(--hbps-muted); font-size: 16px; }

/* Testimonials ---------------------------------------------------------- */
.hbps-quotes { background: var(--hbps-tint); }
.hbps-quotes__cols {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 100px; align-items: center; padding-block: 80px;
}
.hbps-quotes__cols > * { min-width: 0; }
/* House-shaped photo — a nod to the HBP logomark */
.hbps-quotes__photo {
	display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
	clip-path: polygon(50% 0, 100% 42%, 100% 100%, 0 100%, 0 42%);
}
.hbps-quotes__photo-wrap { position: relative; }
.hbps-quotes__photo-wrap::after {
	content: ""; position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%);
	width: 30%; height: 8px; border-radius: 4px; background: var(--hbps-green);
}
.hbps-quotes .hbps-display { margin-bottom: 40px; }
.hbps-quotes__viewport { overflow: clip; }
.hbps-quotes__track { display: flex; transition: transform .45s ease; }
.hbps-quotes__quote {
	flex: 0 0 100%; min-width: 0; margin: 0;
	font-family: var(--hbps-font-head); font-size: 26px; font-style: italic; font-weight: 350; line-height: 1.3;
}
.hbps-quotes__quote p { margin: 0; }
.hbps-quotes__quote p::before { content: "\201C"; display: block; height: 44px; font-size: 90px; line-height: 1; font-style: normal; color: var(--hbps-green-btn); }
.hbps-dots { display: flex; gap: 10px; margin-top: 40px; }
.hbps-dot {
	width: 18px; height: 18px; padding: 0; cursor: pointer;
	border: 1.5px solid var(--hbps-ink); border-radius: 50%; background: transparent;
	transition: background-color .2s ease, width .2s ease;
}
.hbps-dot[aria-current="true"] { width: 40px; border-radius: 9px; background: var(--hbps-ink); }
@media (prefers-reduced-motion: reduce) { .hbps-quotes__track { transition: none; } }
@media (max-width: 1024px) {
	.hbps-quotes__cols { grid-template-columns: minmax(0, 1fr); gap: 60px; padding-block: 60px; }
	.hbps-quotes__photo-wrap { width: min(75%, 520px); margin-inline: auto; }
}

/* Feature rows ---------------------------------------------------------- */
.hbps-feature { padding-block: 104px; }
.hbps-feature--ink { background: var(--hbps-ink); color: var(--hbps-on-ink); }
.hbps-feature--ink .hbps-display { color: var(--hbps-on-ink); }
.hbps-feature--ink .hbps-display strong { color: var(--hbps-green); }
.hbps-feature--tint { background: var(--hbps-card); }
.hbps-feature__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 100px; align-items: center; }
.hbps-feature__cols > * { min-width: 0; }
.hbps-feature__narrow { max-width: 860px; text-align: center; }
.hbps-feature__narrow .hbps-prose { margin-inline: auto; }
.hbps-feature__heading { margin-bottom: 40px; }
.hbps-feature__img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--hbps-radius); }
.hbps-feature__cta { margin-top: 44px; }
.hbps-prose { line-height: 1.6; }
.hbps-prose p { margin: 0 0 1.1em; }
.hbps-prose p:last-child { margin-bottom: 0; }
.hbps-prose a { color: var(--hbps-green-btn); }
.hbps-feature--ink .hbps-prose a { color: var(--hbps-green); }
.hbps-plot-line { margin: -20px 0 28px; font-size: 20px; font-weight: 700; }
.hbps-ticks { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.hbps-ticks li { position: relative; padding-left: 32px; }
.hbps-ticks li::before {
	content: ""; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border-radius: 50%;
	background: var(--hbps-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
@media (max-width: 1024px) {
	.hbps-feature__cols { grid-template-columns: minmax(0, 1fr); gap: 56px; }
}
@media (max-width: 767px) {
	.hbps-feature { padding-block: 60px; }
	.hbps-ticks { grid-template-columns: 1fr; }
	.hbps-pill { min-width: 0; width: 100%; max-width: 320px; }
}

/* Newsletter ------------------------------------------------------------ */
.hbps-newsletter { background: var(--hbps-tint); padding: 96px var(--hbps-edge) 64px; }
.hbps-newsletter__inner {
	display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 100px; align-items: start;
	max-width: var(--hbps-container); margin-inline: auto;
}
.hbps-newsletter__heading { margin: 0; font-size: 52px; font-weight: 350; letter-spacing: -.02em; line-height: 1; }
.hbps-newsletter__heading strong { font-weight: 650; color: var(--hbps-green-btn); }
.hbps-signup { display: flex; }
.hbps-signup input {
	flex: 1 1 auto; min-width: 0; height: 60px; padding-inline: 22px;
	border: 1px solid var(--hbps-ink); border-right: 0; border-radius: var(--hbps-radius-sm) 0 0 var(--hbps-radius-sm);
	background: var(--hbps-canvas); color: var(--hbps-text);
	font: inherit; font-size: var(--hbps-text-input);
}
.hbps-signup input::placeholder { color: var(--hbps-grey); opacity: 1; }
.hbps-signup button {
	flex: 0 0 64px; display: flex; align-items: center; justify-content: center; cursor: pointer;
	border: 1px solid var(--hbps-ink); border-radius: 0 var(--hbps-radius-sm) var(--hbps-radius-sm) 0;
	background: var(--hbps-green-btn); color: var(--hbps-white); transition: background-color .2s ease;
}
.hbps-signup button:hover { background: var(--hbps-green-dark); }
.hbps-signup button svg { width: 26px; height: 13px; }
.hbps-signup__msg { min-height: 1.5em; margin: 10px 0 0; font-weight: 700; }
.hbps-newsletter__note { margin: 6px 0 0; font-size: var(--hbps-text-sm); }
@media (max-width: 1280px) { .hbps-newsletter__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1024px) {
	.hbps-newsletter { padding-block: 60px; }
	.hbps-newsletter__inner { grid-template-columns: 1fr; gap: 32px; }
	.hbps-newsletter__heading { font-size: 40px; }
}

/* Footer ---------------------------------------------------------------- */
.hbps-footer { background: var(--hbps-ink); color: var(--hbps-on-ink); padding: 60px var(--hbps-edge) 50px; line-height: 1.5; }
.hbps-footer__inner { display: flex; justify-content: space-between; gap: 60px; max-width: var(--hbps-container); margin-inline: auto; }
.hbps-footer__info { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.hbps-footer__logo img { display: block; width: 218px; height: auto; }
.hbps-footer__address { margin-top: 28px; font-style: normal; }
.hbps-footer__phone { margin-top: 28px; font-size: 22px; font-weight: 700; text-decoration: none; }
.hbps-footer__email { margin-top: 6px; text-decoration: none; }
.hbps-footer__phone:hover, .hbps-footer__email:hover { color: var(--hbps-green); }
.hbps-footer__socials { display: flex; gap: 28px; list-style: none; margin: 40px 0 0; padding: 0; }
.hbps-footer__socials a { display: block; width: 28px; height: 28px; transition: color .2s ease; }
.hbps-footer__socials a:hover { color: var(--hbps-green); }
.hbps-footer__socials svg { display: block; width: 100%; height: 100%; }
.hbps-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; margin: 40px 0 0; padding: 0; font-size: var(--hbps-text-sm); }
.hbps-footer__legal a { text-decoration: underline; text-underline-offset: 3px; }
.hbps-footer__copyright { margin: 14px 0 0; font-size: var(--hbps-text-sm); color: var(--hbps-on-ink-muted); }
.hbps-footer__aside { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 40px; }
.hbps-footer__label { margin: 0 0 14px; font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hbps-green); }
.hbps-footer__quick ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hbps-footer__quick a { text-decoration: none; }
.hbps-footer__quick a:hover { text-decoration: underline; text-decoration-color: var(--hbps-green); text-underline-offset: 4px; }
.hbps-footer__powered {
	display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px;
	border: 1px solid #494945; border-radius: var(--hbps-pill);
	font-size: 14px; text-decoration: none; color: var(--hbps-on-ink-muted);
	transition: border-color .2s ease, color .2s ease;
}
.hbps-footer__powered:hover { border-color: var(--hbps-green); color: var(--hbps-on-ink); }
.hbps-footer__powered img { width: 22px; height: 22px; }
@media (max-width: 1024px) {
	.hbps-footer__inner { flex-direction: column; gap: 48px; }
	.hbps-footer__aside { align-items: flex-start; }
}

/* Sticky enquire tab ---------------------------------------------------- */
.hbps-sticky-tab {
	position: fixed; right: 0; top: 50%; z-index: 40;
	display: flex; align-items: center; justify-content: center;
	width: 44px; height: 170px;
	background: var(--hbps-green-btn); color: var(--hbps-white);
	box-shadow: -4px 4px 16px rgb(46 46 45 / .25);
	font-weight: 700; letter-spacing: .06em; text-decoration: none;
	writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg);
	border-radius: 0 var(--hbps-radius-sm) var(--hbps-radius-sm) 0;
	transition: background-color .2s ease, opacity .3s ease, visibility .3s ease;
}
.hbps-sticky-tab:hover { background: var(--hbps-green-dark); color: var(--hbps-white); }
.hbps-sticky-tab.is-hidden { opacity: 0; visibility: hidden; }
@media (max-width: 767px) { .hbps-sticky-tab { width: 36px; height: 130px; font-size: 15px; } }

/* Pagination ------------------------------------------------------------ */
.hbps-pagination { margin-top: 60px; }
.hbps-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.hbps-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding-inline: 14px;
	border: 1px solid var(--hbps-line); border-radius: var(--hbps-pill); background: var(--hbps-card); text-decoration: none; font-weight: 700;
}
.hbps-pagination .page-numbers.current, .hbps-pagination a.page-numbers:hover { background: var(--hbps-ink); border-color: var(--hbps-ink); color: var(--hbps-white); }

/* Content / articles ---------------------------------------------------- */
.hbps-article { padding-bottom: 96px; }
.hbps-article__hero { margin-bottom: 56px; }
.hbps-content h2 { margin: 1.6em 0 .5em; font-size: 36px; }
.hbps-content h3 { margin: 1.4em 0 .5em; font-size: 28px; }
.hbps-content img { border-radius: var(--hbps-radius-sm); }
.hbps-content blockquote { margin: 1.5em 0; padding-left: 24px; border-left: 4px solid var(--hbps-green); font-family: var(--hbps-font-head); font-size: 22px; font-style: italic; }
.hbps-content input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.hbps-content textarea,
.hbps-content select {
	width: 100%; padding: 12px 16px; border: 1px solid var(--hbps-line); border-radius: var(--hbps-radius-sm);
	background: var(--hbps-card); font: inherit;
}
.hbps-content input[type="submit"], .hbps-content button[type="submit"] {
	min-width: 200px; height: 46px; padding-inline: 28px; cursor: pointer;
	border: 0; border-radius: var(--hbps-pill); background: var(--hbps-green-btn); color: var(--hbps-white);
	font: 700 var(--hbps-text-nav) var(--hbps-font);
}
.hbps-content input[type="submit"]:hover, .hbps-content button[type="submit"]:hover { background: var(--hbps-green-dark); }
.alignwide { max-width: 1100px; margin-inline: auto; }
.alignfull { width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); }

/* ==========================================================================
   House Builder Pro plugin templates & shortcodes
   (single development / plot / house type pages, carousels, modal form)
   ========================================================================== */
.hbps-hbp-single .hbps-main > article {
	max-width: var(--hbps-container);
	margin-inline: auto;
	padding: 72px var(--hbps-edge) 104px;
	box-sizing: content-box;
}
.hbps-hbp-single .entry-header { margin-bottom: 40px; text-align: center; }
.hbps-hbp-single .entry-title {
	margin: 0; font-size: var(--hbps-text-display); font-weight: 350; letter-spacing: -.02em; line-height: 1.02;
}
.hbps-hbp-single .entry-title::after {
	content: ""; display: block; width: 80px; height: 6px; margin: 24px auto 0; border-radius: 3px; background: var(--hbps-green);
}
.hbps-hbp-single .entry-content { line-height: 1.6; }
.hbps-hbp-single .entry-content h2 { font-size: 40px; margin: 1.4em 0 .6em; }
.hbps-hbp-single .entry-content h2 strong { color: var(--hbps-green-btn); }
.hbps-hbp-single .entry-content h3 { font-size: 28px; }
.hbps-hbp-single .entry-content img { border-radius: var(--hbps-radius); }
.hbps-hbp-single .entry-content p a,
.hbps-hbp-single .entry-content li > a:only-child:not([class]) { color: var(--hbps-green-btn); }

/* Plugin listing cards & their buttons */
div.hbp_content_list,
ul.housebuilderpro_properties_list li,
ul.housebuilderpro_developments_list li,
ul.housebuilderpro_latest_list li,
ul.housebuilderpro_pastdevelopments_list li { border-radius: var(--hbps-radius); overflow: hidden; }
div.hbp_content_list a,
ul.housebuilderpro_properties_list li a,
ul.housebuilderpro_latest_list li .content-box a,
ul.housebuilderpro_developments_list li .content-box a,
ul.housebuilderpro_pastdevelopments_list li .content-box a {
	border-radius: var(--hbps-pill) !important;
	background-color: var(--hbps-ink);
	color: var(--hbps-white) !important;
	font-family: var(--hbps-font) !important;
	text-transform: none !important;
	text-decoration: none;
	transition: background-color .2s ease;
}
div.hbp_content_list a:hover,
ul.housebuilderpro_properties_list li a:hover { background-color: #000; }
.hbps-main a.sold,
.hbps-main div.hbp_button_soldout { background-color: #9b3b33 !important; color: var(--hbps-white) !important; }
.hbps-main a.reserved { background-color: var(--hbps-grey) !important; }
.hbps-main a.comingsoon, .hbps-main div.comingsoon { background-color: var(--hbps-green-deep) !important; }
.hbps-main a.sold, .hbps-main a.reserved { cursor: default; }
div.hbp_button, .hbp_button { text-transform: none !important; }
.hbp-container { max-width: none; }
.hbp-fullwidth-block .hbp-inner h2 { font-family: var(--hbps-font-head); }

.hbp_feature .hbp_featuredcontent a,
#loadMore, .moreBtn,
.hbp_nodevelopments .moreBtn {
	background: var(--hbps-green-btn) !important;
	border-radius: var(--hbps-pill) !important;
	font-family: var(--hbps-font) !important;
	text-transform: none !important;
	color: var(--hbps-white) !important;
}
.hbp_feature .hbp_featuredcontent a:hover, #loadMore:hover, .moreBtn:hover { background: var(--hbps-green-dark) !important; }
div.hbp_button_soldout { border-radius: var(--hbps-pill); font-family: var(--hbps-font); text-transform: none; }
.our-other-carousel { border-top-color: var(--hbps-green) !important; }
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span { background: var(--hbps-green-btn) !important; }
.owl-theme .owl-nav [class*=owl-] { background: var(--hbps-ink) !important; border-radius: var(--hbps-pill) !important; }
.owl-theme .owl-nav [class*=owl-]:hover { background: var(--hbps-green-btn) !important; }

/* HBP enquiry modal */
.hbp_modal_body { font-family: var(--hbps-font); border-radius: var(--hbps-radius); }
.hbp_modal_body h2, .hbp_modal_body h3 { font-family: var(--hbps-font-head); }
.hbp_modal_body input, .hbp_modal_body textarea, .hbp_modal_body select { border-radius: var(--hbps-radius-sm); }
.hbp_modal_body button {
	border-radius: var(--hbps-pill) !important; background: var(--hbps-green-btn) !important; color: var(--hbps-white) !important;
	font-family: var(--hbps-font) !important; text-transform: none !important;
}
.hbp_modal_body label span { color: var(--hbps-green-dark); }