/**
 * WSP HMP front-end stylesheet.
 *
 * Design tokens:
 *   green      #006837   dark green   #014d27   bright green #028a49
 *   lime       #d1d972   hero charcoal #1e2022   ink/body #333
 *   card text  #4c4c4c   navy         #0d1b33   red  #9e0c0f
 *   headings   Kumbh Sans   body       Work Sans   card copy Source Sans Pro
 *   layout     full-bleed rows with 40px gutters (reference page)
 */

/* ------------------------------------------------------------- base --- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

:root {
	--wsp-green: #006837;
	--wsp-green-dark: #014d27;
	--wsp-green-bright: #028a49;
	--wsp-lime: #d1d972;
	--wsp-hero: #1e2022;
	--wsp-ink: #333333;
	--wsp-body: #333333;
	--wsp-card: #4c4c4c;
	--wsp-navy: #0d1b33;
	--wsp-red: #9e0c0f;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: "Work Sans", Arial, sans-serif;
	font-size: 18px;
	line-height: 1.7;
	color: var(--wsp-body);
	background: #ffffff;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--wsp-green);
	text-decoration: none;
}

a:hover,
a:focus {
	color: var(--wsp-green-dark);
}

h1,
h2,
h3,
h4 {
	font-family: "Kumbh Sans", Arial, sans-serif;
	color: var(--wsp-ink);
	line-height: 1.25;
	margin: 0 0 0.6em;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	word-wrap: normal !important;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	background: var(--wsp-green);
	color: #ffffff;
	padding: 10px 18px;
}

.skip-link:focus {
	left: 0;
	color: #ffffff;
}

.wsp-hmp-container {
	margin: 0 auto;
	padding: 0 40px;
	width: 100%;
}

.wsp-hmp-main {
	display: block;
}

/* Section titles ------------------------------------------------------ */

.wsp-hmp-section-title {
	font-family: "Kumbh Sans", Arial, sans-serif;
	font-weight: 700;
	font-size: 30px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--wsp-ink);
	margin: 0 0 34px;
}

.wsp-hmp-section-title--center {
	text-align: center;
}

.wsp-hmp-btn {
	display: inline-block;
	background: var(--wsp-green);
	color: #ffffff;
	font-family: "Kumbh Sans", Arial, sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 14px 30px;
	border-radius: 4px;
	transition: background 0.2s ease;
}

.wsp-hmp-btn:hover,
.wsp-hmp-btn:focus {
	background: var(--wsp-green-dark);
	color: #ffffff;
}

/* ------------------------------------------------------------ header --- */

.wsp-hmp-header {
	position: sticky;
	top: 0;
	z-index: 500;
	background: #ffffff;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 0 2px 10px rgba(0, 0, 0, 0.06);
}

/* The sticky header must park itself *below* the fixed #wpadminbar (z-index
   99999, 32px high, 46px on small screens) instead of underneath it. */
body.admin-bar .wsp-hmp-header {
	top: var( --wp-admin--admin-bar--height, 32px );
}

@media screen and (max-width: 782px) {
	body.admin-bar .wsp-hmp-header {
		top: 46px;
	}
}

.wsp-hmp-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 88px;
	padding-top: 10px;
	padding-bottom: 10px;
	max-width: 1700px;
}

.wsp-hmp-header__brand {
	flex: 0 0 auto;
}

.wsp-hmp-header__brand a {
	display: inline-block;
	line-height: 0;
}

/* Fixed brand slot so the logo never pushes the tagline around. */
.wsp-hmp-header__brand-link {
	display: inline-block;
	width: 150px;
}

.wsp-hmp-header__brand img {
	max-height: 62px;
	width: auto;
}

.wsp-hmp-header__tagline {
	margin: 0;
	flex: 1 1 auto;
	font-size: 14px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wsp-body);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wsp-hmp-header__phone {
	flex: 0 0 auto;
	display: inline-block;
	background: var(--wsp-green);
	color: #ffffff;
	font-family: "Kumbh Sans", Arial, sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 14px 26px;
	border-radius: 4px;
	transition: background 0.2s ease;
	white-space: nowrap;
}

.wsp-hmp-header__phone:hover,
.wsp-hmp-header__phone:focus {
	background: var(--wsp-green-dark);
	color: #ffffff;
}

.wsp-hmp-header__phone i {
	margin-right: 8px;
}

/* Social icons sit after the phone button in the CTA bar. */
.wsp-hmp-header .wsp-hmp-social {
	margin-top: 0;
	gap: 8px;
}

.wsp-hmp-header .wsp-hmp-social a {
	width: 38px;
	height: 38px;
	font-size: 15px;
	border-color: rgba(51, 51, 51, 0.3);
}

/* Condense on scroll: 110px + 185x95 logo at the very top, 88px +
   153x78 logo once the page moves. Desktop only — <=720px keeps its
   fixed 72px/48px mobile sizes. Vertical padding drops to 0 in both
   states so border-box min-height alone yields the exact height. */
@media (min-width: 721px) {
	.wsp-hmp-header__inner {
		min-height: 110px;
		padding-top: 0;
		padding-bottom: 0;
		transition: min-height 0.25s ease;
	}

	.wsp-hmp-header__brand-link {
		width: 185px;
		transition: width 0.25s ease;
	}

	.wsp-hmp-header__brand img {
		width: 185px;
		height: 95px;
		max-height: 95px;
		object-fit: contain;
		transition: width 0.25s ease, height 0.25s ease;
	}

	.wsp-hmp-header.is-condensed .wsp-hmp-header__inner {
		min-height: 88px;
	}

	.wsp-hmp-header.is-condensed .wsp-hmp-header__brand-link {
		width: 153px;
	}

	.wsp-hmp-header.is-condensed .wsp-hmp-header__brand img {
		width: 153px;
		height: 78px;
		max-height: 78px;
	}
}

/* ------------------------------------------------------------- hero --- */

.wsp-hmp-hero {
	position: relative;
	background-color: var(--wsp-hero);
	background-size: cover;
	background-position: center;
	overflow: hidden;
	text-align: center;
}

.wsp-hmp-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

.wsp-hmp-hero__overlay {
	position: absolute;
	inset: 0;
	background: #000000;
	opacity: 0.5;
}

.wsp-hmp-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 848px;
	margin: 0 auto;
	padding: 161px 30px 160.5px;
}

.wsp-hmp-hero__title {
	font-family: "Kumbh Sans", Arial, sans-serif;
	font-weight: 700;
	font-size: 50px;
	line-height: 1.15;
	color: #ffffff;
	text-transform: uppercase;
	margin: 138px 0 8px;
}

.wsp-hmp-hero__address {
	margin: 0;
	font-size: 20px;
	line-height: 1.6;
	color: #ffffff;
	font-weight: 400;
}

.wsp-hmp-hero__address a {
	color: #ffffff;
	text-decoration: none;
}

.wsp-hmp-hero__address a:hover,
.wsp-hmp-hero__address a:focus {
	color: var(--wsp-lime);
}

/* ----------------------------------------------------- highlights --- */

.wsp-hmp-stats {
	background: rgba(0, 104, 55, 0.07);
	padding: 60px 0;
}

.wsp-hmp-stats__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	text-align: center;
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
}

.wsp-hmp-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.wsp-hmp-stat__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background-image: linear-gradient(to top, var(--wsp-green-dark) 28%, var(--wsp-green-bright) 100%);
	border: 0;
	box-shadow: 0 3px 11px rgba(0, 0, 0, 0.25);
	color: #ffffff;
	margin-bottom: 22px;
}

.wsp-hmp-stat__icon i {
	font-size: 40px;
	color: #ffffff;
}

.wsp-hmp-stat__value {
	font-family: "Work Sans", Arial, sans-serif;
	font-weight: 500;
	font-size: 30px;
	line-height: 1.3;
	color: var(--wsp-ink);
	margin-bottom: 4px;
}

.wsp-hmp-stat__label {
	font-family: "Work Sans", Arial, sans-serif;
	font-size: 18px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wsp-body);
}

/* ----------------------------------------------------- description --- */

.wsp-hmp-description {
	background: #ffffff;
	padding: 70px 0;
}

.wsp-hmp-description__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 30px;
	/* Text hugs the left gutter, photo runs flush to the right edge and
	   stretches to the height of the text column. */
	align-items: stretch;
	padding-right: 0;
}

.wsp-hmp-description__text {
	padding-right: 30px;
}

.wsp-hmp-description__text .wsp-hmp-section-title {
	margin-bottom: 26px;
}

.wsp-hmp-description__list {
	margin: 0;
	padding-left: 22px;
	color: var(--wsp-body);
	font-size: 16px;
	line-height: 1.5;
	list-style: disc;
}

.wsp-hmp-description__list li {
	margin-bottom: 2px;
}

.wsp-hmp-description__list strong {
	color: var(--wsp-ink);
}

.wsp-hmp-description__image {
	min-height: 320px;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-color: #ececec;
}

.wsp-hmp-description__image-empty {
	margin: 0;
	padding: 30px;
	background: #f5f5f5;
	border: 1px dashed #cccccc;
	color: #999999;
	text-align: center;
}

/* ------------------------------------------------------------- map --- */

.wsp-hmp-map {
	margin: 0;
	background: #ececec;
}

.wsp-hmp-map__frame {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.wsp-hmp-map__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.wsp-hmp-map__preview {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: #f2f4f5;
	border-top: 1px solid #e3e3e3;
	border-bottom: 1px solid #e3e3e3;
	color: #8a8f93;
	text-align: center;
	padding: 20px;
}

.wsp-hmp-map__preview i {
	font-size: 44px;
	color: var(--wsp-green);
}

.wsp-hmp-map__address {
	margin: 0;
	font-size: 17px;
	color: var(--wsp-ink);
}

.wsp-hmp-map__coords {
	margin: 0;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ----------------------------------------------------- grid sections --- */

.wsp-hmp-grid-section {
	background: #ffffff;
	padding: 74px 0;
}

.wsp-hmp-grid-section--gallery {
	padding-top: 70px;
	padding-bottom: 30px;
}

.wsp-hmp-grid-section--floorplans {
	padding-top: 100px;
	padding-bottom: 126px;
}

/* Fixed desktop thumbnails: 570x387 gallery, 585x390 floor plans. The
   column widths are pinned here (and marked !important so they beat the
   inline column count printed by inc/blocks.php) with the rows centred;
   under 1240px both grids drop back to fluid 2-up. */
.wsp-hmp-grid--gallery {
	grid-template-columns: repeat(auto-fill, 570px) !important;
	justify-content: center;
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
}

.wsp-hmp-grid--floorplans,
.wsp-hmp-grid.wsp-hmp-grid--floorplans {
	grid-template-columns: repeat(auto-fill, 585px) !important;
	justify-content: center;
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
}

.wsp-hmp-grid-section--units {
	background: #f7f7f7;
}

.wsp-hmp-grid-section__subtitle {
	margin: -22px 0 34px;
	text-align: center;
	color: var(--wsp-body);
	font-size: 16px;
}

.wsp-hmp-grid {
	display: grid;
	gap: 20px;
}

.wsp-hmp-grid__item {
	position: relative;
	display: block;
	margin: 0;
	overflow: hidden;
	border-radius: 3px;
	background: #ffffff;
}

.wsp-hmp-grid__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Reference thumbnails are a fixed 387px tall (gallery) and 390px tall
    (floor plans) rather than a ratio, with the ratio restored on mobile. */
.wsp-hmp-grid--gallery .wsp-hmp-grid__item img {
	height: 387px;
	aspect-ratio: auto;
}

.wsp-hmp-grid--gallery .wsp-hmp-grid__item a,
a.wsp-hmp-lightbox {
	cursor: pointer;
}

.wsp-hmp-grid--gallery .wsp-hmp-grid__item:hover img,
a.wsp-hmp-lightbox:hover img {
	transform: scale(1.03);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

.wsp-hmp-grid__item--contain {
	text-align: center;
}

.wsp-hmp-grid__item--contain img {
	object-fit: contain;
	background: #ffffff;
	height: 390px;
	aspect-ratio: auto;
	padding: 0;
}

.wsp-hmp-grid__caption {
	display: block;
	padding: 14px 10px 16px;
	font-family: "Work Sans", Arial, sans-serif;
	font-size: 18px;
	line-height: 1.4;
	color: #17252a;
	text-align: center;
}

/* Available units ----------------------------------------------------- */

.wsp-hmp-grid__item--unit {
	position: relative;
}

.wsp-hmp-grid__item--unit img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.wsp-hmp-units__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: rgba(0, 0, 0, 0.58);
	color: #ffffff;
	text-align: center;
}

.wsp-hmp-units__overlay i {
	font-size: 34px;
	color: var(--wsp-lime);
}

.wsp-hmp-units__overlay-text {
	font-family: "Kumbh Sans", Arial, sans-serif;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* --------------------------------------------------------- details --- */

.wsp-hmp-details {
	background: #ffffff;
	padding: 15px 0 0;
}

.wsp-hmp-details .wsp-hmp-section-title {
	margin-bottom: 20px;
}

.wsp-hmp-details__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
}

.wsp-hmp-detail-card {
	background: #ffffff;
	border-top: 4px solid var(--wsp-green);
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
	padding: 48px 32px;
	text-align: center;
}

.wsp-hmp-detail-card__title {
	font-family: "Source Sans Pro", "Work Sans", Arial, sans-serif;
	font-weight: 600;
	font-size: 25px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-align: center;
	color: var(--wsp-ink);
	margin: 0 0 18px;
}

.wsp-hmp-detail-card__body {
	font-family: "Source Sans Pro", "Work Sans", Arial, sans-serif;
	color: var(--wsp-card);
	font-size: 16px;
	line-height: 2.2;
	text-align: center;
}

.wsp-hmp-detail-card__body p {
	margin: 0 0 10px;
}

.wsp-hmp-detail-card__body p:last-child {
	margin-bottom: 0;
}

.wsp-hmp-detail-card__body ul,
.wsp-hmp-detail-card__body ol {
	margin: 0;
	padding-left: 22px;
	line-height: 2;
}

/* Gutenberg list blocks: markers sit directly in front of the text instead
   of out in a left gutter. */
.wsp-hmp-detail-card__body ul.wp-block-list,
.wsp-hmp-detail-card__body ol.wp-block-list {
	list-style-position: inside;
	padding-left: 0;
}

.wsp-hmp-detail-card__body li {
	margin-bottom: 8px;
}

.wsp-hmp-detail-card__body strong {
	color: var(--wsp-ink);
}

/* --------------------------------------------------- contact box --- */

/* Built by the wsp-hmp/connect page block (logo/address/portal on the
   left, "Let's Connect." + form area on the right). Full-bleed band with
   the faint footer texture, matched to the reference layout. */
.wsp-hmp-connect {
	position: relative;
	background: #fafafa url("../images/footer-bg.jpg") center / cover no-repeat;
	padding: 52px 0 140px;
	overflow: hidden;
	width: 100%;
}

/* ------------------------------------------------ contact form 7 --- */

/* Form container and field grid, styled after the reference form (id=#1391857661) */
.wsp-hmp-connect__form {
	margin: 0 0 0 16px;
}

.wsp-hmp-connect__form p {
	margin: 0;
}

.wsp-hmp-connect__form form,
.wsp-hmp-connect__form .wpcf7-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 34px;
}

.wsp-hmp-form-name {
	grid-column: 1;
}

.wsp-hmp-form-phone {
	grid-column: 2;
}

.wsp-hmp-form-email,
.wsp-hmp-form-message,
#wsp-hmp-form-send,
.wsp-hmp-connect__form .wpcf7-response-output {
	grid-column: 1 / -1;
}

.wsp-hmp-connect__form input:not([type="submit"]),
.wsp-hmp-connect__form textarea,
.wsp-hmp-connect__form select,
.wsp-hmp-form-name input,
.wsp-hmp-form-phone input,
.wsp-hmp-form-email input,
.wsp-hmp-form-message textarea {
	width: 100%;
	border: 1px solid #0d1b33;
	border-radius: 0;
	background-color: transparent;
	color: var(--wsp-ink, #333333);
	font-family: "Work Sans", Arial, sans-serif;
	font-size: 16px;
	padding: 0 14px;
	height: 40px;
	line-height: 38px;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	box-sizing: border-box;
}

.wsp-hmp-connect__form textarea,
.wsp-hmp-form-message textarea {
	height: 80px;
	padding: 12px 14px;
	line-height: 1.5;
	resize: vertical;
}

.wsp-hmp-connect__form input:not([type="submit"]):focus,
.wsp-hmp-connect__form textarea:focus,
.wsp-hmp-connect__form select:focus,
.wsp-hmp-form-name input:focus,
.wsp-hmp-form-phone input:focus,
.wsp-hmp-form-email input:focus,
.wsp-hmp-form-message textarea:focus {
	border-color: var(--wsp-green, #006837);
	box-shadow: 0 0 0 1px var(--wsp-green, #006837);
}

.wsp-hmp-connect__form input::placeholder,
.wsp-hmp-connect__form textarea::placeholder {
	color: #767676;
	opacity: 1;
}

#wsp-hmp-form-send {
	margin-top: 7px;
}

#wsp-hmp-form-send input[type="submit"],
#wsp-hmp-form-send button,
input#wsp-hmp-form-send,
button#wsp-hmp-form-send,
.wsp-hmp-connect__form input[type="submit"] {
	display: inline-block;
	background: #ffffff;
	border: 1px solid #333333;
	border-radius: 0;
	color: #333333;
	font-family: "Kumbh Sans", Arial, sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	min-width: 200px;
	height: 42px;
	padding: 12px 36px;
	cursor: pointer;
	text-align: center;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

#wsp-hmp-form-send input[type="submit"]:hover,
#wsp-hmp-form-send button:hover,
input#wsp-hmp-form-send:hover,
button#wsp-hmp-form-send:hover,
#wsp-hmp-form-send input[type="submit"]:focus,
#wsp-hmp-form-send button:focus,
input#wsp-hmp-form-send:focus,
button#wsp-hmp-form-send:focus,
.wsp-hmp-connect__form input[type="submit"]:hover,
.wsp-hmp-connect__form input[type="submit"]:focus {
	background: var(--wsp-green, #006837);
	border-color: var(--wsp-green, #006837);
	color: #ffffff;
}

.wsp-hmp-connect__form .wpcf7-not-valid-tip {
	font-size: 13px;
	color: var(--wsp-red, #9e0c0f);
	margin-top: 4px;
}

.wsp-hmp-connect__form .wpcf7-spinner {
	margin: 0 0 0 10px;
	vertical-align: middle;
}

/* Cloudflare Turnstile widget (Contact Form 7 integration) spans the
   full 2-column form grid; covers a bare div or a <p> wrapper. */
.wsp-hmp-connect__form .wpcf7-turnstile,
.wsp-hmp-connect__form .cf-turnstile,
.wsp-hmp-connect__form p:has(> .wpcf7-turnstile),
.wsp-hmp-connect__form p:has(> .cf-turnstile) {
	grid-column: 1 / -1;
}

@media (max-width: 600px) {
	.wsp-hmp-connect__form form,
	.wsp-hmp-connect__form .wpcf7-form {
		grid-template-columns: minmax(0, 1fr);
	}
	.wsp-hmp-form-name,
	.wsp-hmp-form-phone {
		grid-column: 1 / -1;
	}
}

.wsp-hmp-connect__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
	gap: 34px;
	max-width: 1250px;
	align-items: start;
}

.wsp-hmp-connect__info {
	color: var(--wsp-ink);
	font-size: 16px;
	line-height: 1.5;
}

.wsp-hmp-connect__logo a {
	display: block;
}

.wsp-hmp-connect__logo img {
	display: block;
	width: 270px;
	max-width: 100%;
	height: auto;
	margin: 12px auto 16px;
}

.wsp-hmp-connect__address {
	margin: 0 0 12px;
}

.wsp-hmp-connect__address a {
	color: var(--wsp-ink);
}

.wsp-hmp-connect__address a:hover {
	color: var(--wsp-green);
}

.wsp-hmp-connect__hours {
	margin: 0 0 13px;
	color: var(--wsp-ink);
}

.wsp-hmp-connect__phone {
	margin: 0 0 24px;
	font-size: 16px;
	font-weight: 500;
}

.wsp-hmp-connect__phone a {
	color: var(--wsp-ink);
}

.wsp-hmp-connect__phone a:hover {
	color: var(--wsp-green);
}

.wsp-hmp-connect__portal {
	background: rgba(0, 104, 55, 0.06);
	border: 1px solid rgba(0, 104, 55, 0.25);
	padding: 20px 24px;
	max-width: 340px;
}

.wsp-hmp-connect__portal h3 {
	color: var(--wsp-green);
	font-size: 24px;
	margin: 0 0 14px;
	line-height: 1.5;
}

.wsp-hmp-connect__portal-link {
	display: inline-block;
	background: var(--wsp-green);
	color: #ffffff;
	font-family: "Kumbh Sans", Arial, sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 11px 30px;
	border-radius: 3px;
	transition: background 0.2s ease, color 0.2s ease;
}

.wsp-hmp-connect__portal-link:hover,
.wsp-hmp-connect__portal-link:focus {
	background: var(--wsp-green-dark);
	color: #ffffff;
}

.wsp-hmp-connect__connect-title {
	font-family: "Kumbh Sans", Arial, sans-serif;
	font-weight: 700;
	font-size: 30px;
	color: var(--wsp-ink);
	text-transform: none;
	margin: 0 0 14px;
}

.wsp-hmp-connect__divider {
	border: 0;
	border-top: 2px solid var(--wsp-green);
	width: 54px;
	margin: 0 0 51px;
}

.wsp-hmp-social {
	display: flex;
	gap: 12px;
	margin-top: 12px;
}

.wsp-hmp-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid rgba(51, 51, 51, 0.45);
	border-radius: 50%;
	color: var(--wsp-ink);
	font-size: 17px;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.wsp-hmp-social a:hover,
.wsp-hmp-social a:focus {
	background: var(--wsp-green);
	border-color: var(--wsp-green);
	color: #ffffff;
}

/* ------------------------------------------------------------ footer --- */

.wsp-hmp-footer__bar {
	background: var(--wsp-ink);
	color: #ffffff;
	font-size: 14px;
	font-weight: 400;
	padding: 12px 0;
}

.wsp-hmp-footer__bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-align: left;
	gap: 24px;
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
}

.wsp-hmp-footer__bar-left p {
	margin: 0 0 6px;
	line-height: 1.7;
}

.wsp-hmp-footer__credit {
	color: rgba(255, 255, 255, 0.7);
}

.wsp-hmp-footer__credit a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: underline;
}

.wsp-hmp-footer__credit a:hover {
	color: var(--wsp-lime);
}

.wsp-hmp-footer__eho {
	width: 61px;
	height: auto;
	display: block;
}

/* -------------------------------------------------- page + fallback --- */

.wsp-hmp-page-content {
	padding-top: 60px;
	padding-bottom: 70px;
}

.wsp-hmp-setup {
	padding: 120px 0;
	text-align: center;
	background: #f7f7f7;
}

.wsp-hmp-setup__inner {
	max-width: 640px;
}

.wsp-hmp-setup h1 {
	font-size: 34px;
	text-transform: uppercase;
}

.wsp-hmp-setup .button {
	display: inline-block;
	margin: 8px 6px 0;
	padding: 12px 26px;
	background: var(--wsp-green);
	color: #ffffff;
	border: 0;
	border-radius: 4px;
	font-weight: 600;
	cursor: pointer;
}

.wsp-hmp-setup .button:hover {
	background: var(--wsp-green-dark);
	color: #ffffff;
}

.wsp-hmp-setup .button-primary {
	background: var(--wsp-navy);
}

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

@media (max-width: 1239px) {
	/* Two 570/585px thumbs plus gutters need ~1240px; below that the
	   gallery and floor plans go back to fluid 2-up columns. */
	.wsp-hmp-grid--gallery,
	.wsp-hmp-grid--floorplans {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 980px) {
	.wsp-hmp-header__tagline {
		display: none;
	}

	.wsp-hmp-description__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
		padding-right: 40px;
	}

	.wsp-hmp-description__text {
		padding-right: 0;
	}

	.wsp-hmp-details__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wsp-hmp-connect__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 44px;
	}

	.wsp-hmp-connect__form {
		margin-left: 0;
	}

	.wsp-hmp-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 720px) {
	.wsp-hmp-header__inner {
		min-height: 72px;
		gap: 14px;
	}

	.wsp-hmp-header__brand img {
		max-height: 48px;
	}

	.wsp-hmp-header__phone {
		padding: 11px 16px;
		font-size: 12px;
	}

	.wsp-hmp-header .wsp-hmp-social {
		gap: 6px;
	}

	.wsp-hmp-header .wsp-hmp-social a {
		width: 30px;
		height: 30px;
		font-size: 13px;
	}

	.wsp-hmp-container {
		padding: 0 20px;
	}

	.wsp-hmp-hero__inner {
		padding: 96px 6px 64px;
	}

	.wsp-hmp-hero__title {
		font-size: 32px;
		margin: 0 0 14px;
	}

	.wsp-hmp-hero__address {
		font-size: 16px;
	}

	.wsp-hmp-stats {
		padding: 46px 0;
	}

	.wsp-hmp-stats__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 38px;
	}

	.wsp-hmp-section-title {
		font-size: 26px;
	}

	.wsp-hmp-description,
	.wsp-hmp-grid-section,
	.wsp-hmp-details {
		padding-top: 54px;
		padding-bottom: 54px;
	}

	.wsp-hmp-grid-section--gallery {
		padding-bottom: 24px;
	}

	.wsp-hmp-grid-section--floorplans {
		padding-top: 24px;
	}

	.wsp-hmp-details__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Fixed desktop thumbnail heights become ratios again on small screens. */
	.wsp-hmp-grid--gallery .wsp-hmp-grid__item img,
	.wsp-hmp-grid__item--contain img {
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.wsp-hmp-connect {
		padding: 60px 0 54px;
	}

	.wsp-hmp-connect__connect-title {
		font-size: 26px;
	}

	.wsp-hmp-footer__bar-inner {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 14px;
	}
}

@media (max-width: 560px) {
	.wsp-hmp-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.wsp-hmp-hero__title {
		font-size: 27px;
	}
}