/* ==========================================================================
   Fonts — Tiller comes from the Adobe Fonts kit enqueued in functions.php;
   Source Sans Variable is self-hosted in assets/fonts.
   ========================================================================== */

@font-face {
	font-family: "Source Sans Variable";
	src: url("../fonts/SourceSansVariable-Roman.otf") format("opentype");
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
}


/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
	--hw-surface-primary: #eae4d8;
	--hw-surface-secondary: #a07c28;
	--hw-surface-invert: #020202;
	--hw-surface-green: #3b4743;
	--hw-text-primary: #020202;
	--hw-text-invert: #eae4d8;
	--hw-text-brand: #f9f9da;

	--hw-font-display: "tiller", sans-serif;
	--hw-font-body: "Source Sans Variable", "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;

	--hw-sml: 30px;
	--hw-med: 60px;
	--hw-lrg: 130px;
	--hw-nav-height: 71px;
}

@media (max-width: 767px) {
	:root {
		--hw-sml: 20px;
		--hw-med: 40px;
		--hw-lrg: 60px;
	}
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: var(--hw-nav-height);
}

/* Hide the scrollbars on the page and the registration popup; both still scroll. */
html,
.hw-register {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

html::-webkit-scrollbar,
.hw-register::-webkit-scrollbar {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	margin: 0;
	/* Nothing should ever make the page scroll sideways on a phone. */
	overflow-x: clip;
	/* Only Tiller Medium and Source Sans Light are used: never fake bold or italic. */
	font-synthesis: none;
	background: var(--hw-surface-primary);
	color: var(--hw-text-primary);
	font-family: var(--hw-font-body);
	font-weight: 300;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img {
	display: block;
	max-width: 100%;
}

h1,
h2,
h3,
p,
ul,
address {
	margin: 0;
	padding: 0;
}

address {
	font-style: normal;
}

ul {
	list-style: none;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
}

a:focus-visible,
button:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 4px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Type
   ========================================================================== */

.hw-subhead {
	font-family: var(--hw-font-body);
	font-size: 16px;
	font-weight: 300;
	line-height: 1;
	text-transform: uppercase;
}

.hw-h1 {
	font-family: var(--hw-font-display);
	font-size: 36px;
	font-weight: 500;
	line-height: 1.09;
	text-box: trim-both cap alphabetic;
}

.hw-body {
	font-family: var(--hw-font-body);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.2;
	text-box: trim-both cap alphabetic;
}

@media (max-width: 767px) {
	.hw-h1 {
		font-size: 30px;
	}
}

/* ==========================================================================
   Button
   ========================================================================== */

/* inline-block, not flex: text-box trimming only applies to block containers. */
.hw-button {
	display: inline-block;
	flex-shrink: 0;
	padding: 15px 20px;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	text-box: trim-both cap alphabetic;
	transition: background-color 0.2s ease, color 0.2s ease;
	/* The CTAs are <button>s when they open the popup: drop the browser's button styles. */
	margin: 0;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	appearance: none;
}

/* Browsers without text-box trimming: keep the 41px design height. */
@supports not (text-box: trim-both cap alphabetic) {
	.hw-button {
		padding-top: 11px;
		padding-bottom: 11px;
	}
}

.hw-button--dark {
	background: var(--hw-surface-invert);
	color: var(--hw-text-invert);
}

.hw-button--dark:hover {
	background: var(--hw-surface-green);
}

.hw-button--light {
	background: var(--hw-surface-primary);
	color: var(--hw-text-primary);
}

.hw-button--light:hover {
	background: var(--hw-text-brand);
}

/* ==========================================================================
   Rotator controls ("1 / 5" and arrows)
   ========================================================================== */

.hw-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 209px;
	flex-shrink: 0;
}

.hw-controls__count {
	white-space: nowrap;
	text-align: right;
}

.hw-controls--light {
	color: var(--hw-text-invert);
}

/* 72px frame from the design: previous arrow on the left edge, next on the right. */
.hw-controls__arrows {
	position: relative;
	width: 72.218px;
	height: 12px;
}

/* Each button is a 36 × 40 hit area; the arrow is drawn by ::before. */
.hw-controls__prev,
.hw-controls__next {
	position: absolute;
	top: -14px;
	width: 36px;
	height: 40px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.hw-controls__prev:hover,
.hw-controls__next:hover {
	opacity: 0.6;
}

.hw-controls__prev::before,
.hw-controls__next::before {
	content: "";
	position: absolute;
	top: 13.64px;
	width: 8px;
	height: 13px;
	background: currentColor;
	-webkit-mask: var(--hw-icon) no-repeat 0 0 / 8px 13px;
	mask: var(--hw-icon) no-repeat 0 0 / 8px 13px;
}

.hw-controls__prev {
	left: -14px;
	--hw-icon: url("../img/icon-previous.svg");
}

.hw-controls__prev::before {
	left: 13.29px;
}

.hw-controls__next {
	right: -14px;
	--hw-icon: url("../img/icon-next.svg");
}

.hw-controls__next::before {
	left: 15.54px;
}

/* ==========================================================================
   Crossfade slides
   ========================================================================== */

.hw-fade {
	position: relative;
	overflow: hidden;
}

.hw-fade__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.6s ease;
}

.hw-fade__slide.is-active {
	opacity: 1;
}

.hw-fade__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.hw-nav {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--hw-nav-height);
	padding: 15px var(--hw-sml);
	background: var(--hw-surface-primary);
}

.admin-bar .hw-nav {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.hw-nav__logo {
	flex-shrink: 0;
}

.hw-nav__logo img {
	width: 224.998px;
	height: auto;
}

/* Desktop: links then the button, 40px apart (Figma). */
.hw-nav__menu {
	margin-left: auto;
}

.hw-nav__links {
	display: flex;
	align-items: center;
	gap: 40px;
}

/* Hover: a thin underline set below the descenders, fading in. */
.hw-nav__links a {
	display: block;
	white-space: nowrap;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
	text-decoration-skip-ink: auto;
	transition: text-decoration-color 0.2s ease;
}

.hw-nav__links a:hover,
.hw-nav__links a:focus-visible {
	text-decoration-color: currentColor;
}

.hw-nav__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-left: auto;
}

.hw-nav__menu + .hw-nav__actions {
	margin-left: 40px;
}

.hw-nav__menu-cta,
.hw-nav__toggle {
	display: none;
}

/* Tablets and phones: links move into a dropdown behind the menu icon. */
@media (max-width: 1024px) {
	.hw-nav__menu + .hw-nav__actions {
		margin-left: auto;
	}

	.hw-nav__toggle {
		position: relative;
		display: block;
		flex-shrink: 0;
		width: 32px;
		height: 32px;
		margin-right: -4px;
		padding: 0;
		background: none;
		border: 0;
		cursor: pointer;
	}

	.hw-nav__toggle-bars,
	.hw-nav__toggle-bars::before,
	.hw-nav__toggle-bars::after {
		position: absolute;
		left: 4px;
		width: 24px;
		height: 1px;
		background: var(--hw-text-primary);
		transition: transform 0.25s ease, background-color 0.25s ease;
	}

	.hw-nav__toggle-bars {
		top: 50%;
	}

	.hw-nav__toggle-bars::before,
	.hw-nav__toggle-bars::after {
		content: "";
		left: 0;
	}

	.hw-nav__toggle-bars::before {
		top: -7px;
	}

	.hw-nav__toggle-bars::after {
		top: 7px;
	}

	.hw-nav.is-open .hw-nav__toggle-bars {
		background: transparent;
	}

	.hw-nav.is-open .hw-nav__toggle-bars::before {
		transform: translateY(7px) rotate(45deg);
	}

	.hw-nav.is-open .hw-nav__toggle-bars::after {
		transform: translateY(-7px) rotate(-45deg);
	}

	.hw-nav__menu {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--hw-sml);
		margin: 0;
		padding: var(--hw-sml) var(--hw-sml) var(--hw-med);
		background: var(--hw-surface-primary);
		border-top: 1px solid rgba(2, 2, 2, 0.1);
	}

	.hw-nav.is-open .hw-nav__menu {
		display: flex;
	}

	.hw-nav__links {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--hw-sml);
	}
}

@media (max-width: 767px) {
	.hw-nav {
		gap: 16px;
	}

	.hw-nav__logo img {
		width: clamp(110px, 36vw, 170px);
	}
}

/* Very narrow phones: the logo, button and menu icon don't fit on one row,
   so the button moves into the dropdown. */
@media (max-width: 359px) {
	.hw-nav__menu ~ .hw-nav__actions .hw-button {
		display: none;
	}

	.hw-nav__menu-cta {
		display: block;
	}
}

/* ==========================================================================
   Hero — two images with the centred card
   ========================================================================== */

.hw-hero {
	position: relative;
	padding-bottom: var(--hw-lrg);
}

.hw-hero__media {
	display: grid;
	grid-template-columns: 1fr 1fr;
	height: max(600px, 46.6vw);
}

.hw-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hw-hero__left {
	object-position: 6% 50%;
}

.hw-hero__card {
	position: absolute;
	left: 50%;
	bottom: var(--hw-lrg);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--hw-sml);
	width: 398px;
	height: 487px;
	padding: 0 var(--hw-sml) var(--hw-med);
	background: var(--hw-surface-secondary);
	text-align: center;
	transform: translateX(-50%);
}

.hw-hero__monogram {
	width: 108.661px;
	height: auto;
}

.hw-hero__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--hw-sml);
}

@media (max-width: 900px) {
	.hw-hero__media {
		height: 62vw;
		min-height: 260px;
	}

	.hw-hero__card {
		position: static;
		width: auto;
		height: auto;
		padding: var(--hw-med) var(--hw-sml);
		transform: none;
	}

	.hw-hero__intro {
		max-width: 400px;
	}
}

/* ==========================================================================
   Community — text + rotator (large image = current, small = next)
   ========================================================================== */

.hw-community {
	display: flex;
	align-items: flex-start;
	gap: var(--hw-med);
	padding: 0 0 var(--hw-lrg) var(--hw-sml);
}

.hw-community__text {
	display: flex;
	flex: 0 0 368px;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--hw-sml);
	padding-top: var(--hw-med);
}

.hw-community__media {
	display: grid;
	flex: 1 1 0;
	min-width: 0;
	grid-template-columns: minmax(0, 1fr) 239px;
	column-gap: clamp(30px, 12.08vw, 174px);
	height: clamp(480px, 48.68vw, 940px);
}

.hw-community__main {
	height: 100%;
}

.hw-community__aside {
	display: flex;
	flex-direction: column;
	gap: var(--hw-med);
	padding-right: var(--hw-sml);
}

.hw-community__next {
	display: flex;
	flex-direction: column;
	gap: var(--hw-sml);
}

.hw-community__peek {
	height: 266px;
}

/* Captions follow the current slide. Stacked in one grid cell so the
   column keeps the height of the longest caption. */
.hw-community__captions {
	display: grid;
}

.hw-community__captions > p {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease, visibility 0.6s;
}

.hw-community__captions > p.is-active {
	opacity: 1;
	visibility: visible;
}

@media (max-width: 1100px) {
	.hw-community {
		flex-direction: column;
		padding-right: var(--hw-sml);
	}

	.hw-community__text {
		flex-basis: auto;
		max-width: 560px;
		padding-top: 0;
	}

	.hw-community__media {
		width: 100%;
		height: auto;
		column-gap: var(--hw-sml);
	}

	.hw-community__main {
		height: auto;
		aspect-ratio: 569 / 701;
	}

	.hw-community__aside {
		padding-right: 0;
	}
}

@media (max-width: 640px) {
	.hw-community__media {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--hw-sml);
	}

	.hw-community__main {
		aspect-ratio: 4 / 5;
	}

	.hw-community__aside {
		gap: var(--hw-sml);
	}

	/* The small "next slide" preview doesn't fit beside the counter on a phone. */
	.hw-community__peek {
		display: none;
	}

	.hw-community__next .hw-controls {
		width: 100%;
	}
}

/* ==========================================================================
   Neighbourhood — full-width banner rotator
   ========================================================================== */

.hw-banner {
	padding-bottom: var(--hw-lrg);
}

/* The gold strip under the banner runs into the gold Townhomes section. */
.hw-banner:has(+ .hw-townhomes) {
	background: var(--hw-surface-secondary);
}

/* Phones: no strip, the banner meets Townhomes directly. */
@media (max-width: 767px) {
	.hw-banner:has(+ .hw-townhomes) {
		padding-bottom: 0;
	}
}

.hw-banner__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	height: max(520px, 54.3vw);
	padding: var(--hw-med) var(--hw-sml);
	color: var(--hw-text-invert);
}

.hw-banner__slides {
	position: absolute;
	inset: 0;
}

.hw-banner__inner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.3);
	pointer-events: none;
}

.hw-banner__label,
.hw-banner__footer {
	position: relative;
	z-index: 1;
}

.hw-banner__label {
	text-align: center;
}

.hw-banner__footer {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--hw-sml);
	width: 100%;
}

@media (max-width: 640px) {
	.hw-banner__footer {
		flex-direction: column;
		align-items: flex-start;
	}

	.hw-banner__footer .hw-controls {
		width: 100%;
	}
}

/* ==========================================================================
   Townhomes — text left, image right
   ========================================================================== */

.hw-townhomes {
	display: grid;
	grid-template-columns: minmax(0, 633fr) minmax(0, 687fr);
	gap: var(--hw-med);
	height: max(640px, 54.3vw);
	padding: 0 var(--hw-sml) var(--hw-med);
	background: var(--hw-surface-secondary);
}

/* Gap before the footer when Floorplans and Team are both hidden. */
.hw > .hw-townhomes:last-child {
	margin-bottom: var(--hw-med);
}

.hw-townhomes__text {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--hw-med);
	padding-top: var(--hw-med);
}

.hw-townhomes__intro {
	display: flex;
	flex-direction: column;
	gap: var(--hw-sml);
	max-width: 500px;
}

.hw-townhomes__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--hw-sml);
	width: 282px;
	max-width: 100%;
	margin-left: auto;
}

.hw-townhomes__media {
	position: relative;
}

.hw-townhomes__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 1100px) {
	.hw-townhomes {
		grid-template-columns: minmax(0, 1fr);
		height: auto;
	}

	.hw-townhomes__body {
		width: 420px;
		margin-left: 0;
	}

	.hw-townhomes__media {
		aspect-ratio: 4 / 3;
	}
}

/* ==========================================================================
   Floorplans — carousel of cards
   ========================================================================== */

.hw-floorplans {
	--hw-per-view: 3;
	display: flex;
	flex-direction: column;
	gap: var(--hw-sml);
	padding: 0 var(--hw-sml) var(--hw-lrg);
}

/* Every other section already ends with a 130px gap. */
.hw-townhomes + .hw-floorplans,
.hw > .hw-floorplans:first-child {
	padding-top: var(--hw-lrg);
}

.hw-floorplans__viewport {
	overflow: hidden;
}

.hw-floorplans__track {
	display: flex;
	gap: 30px;
}

.hw-floorplans__track.is-animating {
	transition: transform 0.5s ease;
}

.hw-floorplan {
	display: flex;
	flex: 0 0 calc((100% - (var(--hw-per-view) - 1) * 30px) / var(--hw-per-view));
	flex-direction: column;
	align-items: center;
	gap: var(--hw-sml);
	aspect-ratio: 440 / 582;
	padding: var(--hw-sml) var(--hw-med) var(--hw-med);
	background: #fff;
	text-align: center;
}

.hw-floorplan__image {
	position: relative;
	flex: 1 1 0;
	width: 100%;
	min-height: 0;
}

.hw-floorplan__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.hw-floorplans__footer {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--hw-sml);
}

.hw-floorplans__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--hw-sml);
	width: 326px;
}

@media (max-width: 1024px) {
	.hw-floorplans {
		--hw-per-view: 2;
	}
}

@media (max-width: 640px) {
	.hw-floorplans {
		--hw-per-view: 1;
	}

	.hw-floorplan {
		padding: var(--hw-sml) var(--hw-sml) var(--hw-med);
	}

	.hw-floorplans__footer {
		flex-direction: column-reverse;
	}

	.hw-floorplans__text {
		width: auto;
	}

	.hw-floorplans__footer .hw-controls {
		width: 100%;
	}
}

/* ==========================================================================
   Team — City Park
   ========================================================================== */

.hw-team {
	padding: 0 var(--hw-sml) var(--hw-med);
}

/* Spacing when the section that normally comes before is hidden. */
.hw-townhomes + .hw-team {
	padding-top: var(--hw-lrg);
}

.hw > .hw-team:first-child {
	padding-top: var(--hw-sml);
}

.hw-team__box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hw-med);
	min-height: 368px;
	padding: var(--hw-med) clamp(30px, 6.95vw, 100px);
	background: var(--hw-surface-green);
	border-radius: 20px;
	color: #fff;
}

.hw-team__logo {
	flex-shrink: 1;
	width: 437px;
	min-width: 0;
	max-width: 40%;
	height: auto;
}

.hw-team__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--hw-sml);
	width: 500px;
	max-width: 100%;
}

@media (max-width: 900px) {
	.hw-team__box {
		flex-direction: column;
		align-items: flex-start;
		padding: var(--hw-med) var(--hw-sml);
	}

	.hw-team__logo {
		max-width: 100%;
	}
}

/* ==========================================================================
   Footer — matches the City Park footer used on bogarthills.com
   ========================================================================== */

.hw-footer {
	position: relative;
	color: #f9f9da;
	font-weight: 300;
}

/* Notched green panel, inset to the page margin like the sections above. */
.hw-footer__bg {
	position: absolute;
	inset: 0 var(--hw-sml) var(--hw-sml);
	pointer-events: none;
}

.hw-footer__bg svg {
	display: block;
	width: 100%;
	height: 100%;
}

.hw-footer__body {
	position: relative;
	padding: 36px calc(var(--hw-sml) + 28px) calc(var(--hw-sml) + 18px);
}

/* City Park logo in the notch, top right. */
.hw-footer__brand {
	position: absolute;
	top: 18px;
	right: calc(var(--hw-sml) + 16px);
	display: block;
	transition: opacity 0.2s ease;
}

a.hw-footer__brand:hover {
	opacity: 0.75;
}

.hw-footer__brand img {
	display: block;
	width: auto;
	height: 28px;
}

.hw-footer__brand-light {
	display: none !important;
}

.hw-footer__inner {
	max-width: 1280px;
	margin: 20px auto 10px;
}

.hw-footer__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 32px;
}

.hw-footer__cta {
	display: inline-block;
	margin: 0;
	padding: 11px 26px;
	background: #f9f9da;
	border: 1px solid #f9f9da;
	border-radius: 2em;
	color: #2f3a35;
	font-family: var(--hw-font-body);
	font-size: 14.4px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.02em;
	cursor: pointer;
	appearance: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.hw-footer__cta:hover,
.hw-footer__cta:focus-visible {
	background: transparent;
	color: #f9f9da;
}

/* Logo, address + socials, then each contact column, on one row. */
.hw-footer__cols {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 48px;
}

.hw-footer__col--logo {
	flex: 0 0 auto;
}

.hw-footer__logo {
	display: block;
	width: 269px;
	max-width: 100%;
	height: auto;
}

.hw-footer__col--primary {
	flex: 0 1 auto;
	min-width: 200px;
}

.hw-footer__col--contact {
	flex: 0 0 auto;
	min-width: 160px;
}

.hw-footer__address {
	margin-bottom: 18px;
	font-size: 13.6px;
	line-height: 1.65;
}

.hw-footer__col-label {
	margin: 0 0 12px;
	font-family: var(--hw-font-body);
	font-size: 16.8px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.02em;
}

.hw-footer__line {
	display: block;
	margin: 0 0 6px;
	font-size: 13.6px;
	line-height: 1.6;
	color: #f9f9da;
}

a.hw-footer__line:hover {
	text-decoration: underline;
}

.hw-footer__social {
	display: flex;
	align-items: center;
	gap: 25px;
}

.hw-footer__social a {
	display: block;
	transition: opacity 0.18s ease;
}

.hw-footer__social a:hover {
	opacity: 0.75;
}

/* Icons are uploaded in Site Settings; keep them at the design size. */
.hw-footer__social img {
	width: 22px;
	height: 22px;
	object-fit: contain;
}

.hw-footer__bottom {
	max-width: 1280px;
	margin: 0 auto;
	padding-top: 20px;
	border-top: 1px solid rgba(249, 249, 218, 0.18);
}

.hw-footer__copyright {
	font-size: 11.5px;
	line-height: 1.5;
	opacity: 0.85;
}

/* Tablets and phones: a solid green block, everything centred. */
@media (max-width: 900px) {
	.hw-footer__bg {
		display: none;
	}

	.hw-footer__body {
		padding: 36px 32px;
		background: var(--hw-surface-green);
		text-align: center;
	}

	.hw-footer__brand {
		position: static;
		display: flex;
		justify-content: center;
		margin-bottom: 24px;
	}

	.hw-footer__brand img {
		height: 22px;
	}

	.hw-footer__brand-dark {
		display: none !important;
	}

	.hw-footer__brand-light {
		display: block !important;
	}

	.hw-footer__inner {
		margin-top: 16px;
	}

	.hw-footer__ctas,
	.hw-footer__cols,
	.hw-footer__social {
		justify-content: center;
	}

	.hw-footer__cols {
		gap: 32px;
	}

	.hw-footer__col--logo {
		display: flex;
		flex: 0 0 100%;
		justify-content: center;
	}

	.hw-footer__col--primary,
	.hw-footer__col--contact {
		flex: 1 1 calc(50% - 16px);
		min-width: 0;
	}

	.hw-footer__bottom {
		margin-top: 8px;
	}
}

@media (max-width: 600px) {
	.hw-footer__body {
		padding: 36px 20px 32px;
	}

	.hw-footer__brand img {
		height: 20px;
	}

	.hw-footer__inner {
		margin-top: 24px;
	}

	.hw-footer__cols {
		flex-direction: column;
		align-items: center;
		gap: 24px;
	}

	.hw-footer__col--primary,
	.hw-footer__col--contact {
		flex: 0 0 auto;
		width: 100%;
	}

	.hw-footer__logo {
		width: 220px;
	}
}

/* ==========================================================================
   Registration popup (native <dialog>) and Gravity Forms — Figma "Form"
   ========================================================================== */

html:has(.hw-register[open]) {
	overflow: hidden;
}

.hw-register {
	--hw-register-pad-x: 35px;
	--hw-register-pad-y: 35px;
	width: min(720px, calc(100% - 2 * var(--hw-sml)));
	max-width: none;
	max-height: calc(100% - 2 * var(--hw-sml));
	padding: var(--hw-register-pad-y) var(--hw-register-pad-x);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--hw-surface-primary);
	border: 0;
	color: var(--hw-text-primary);
}

/* Opening focuses the popup itself (main.js), not the close button. */
.hw-register:focus {
	outline: none;
}

/* The design shows the page behind the popup undimmed. */
.hw-register::backdrop {
	background: transparent;
}

@media (prefers-reduced-motion: no-preference) {
	.hw-register[open] {
		animation: hw-register-in 0.3s ease;
	}
}

@keyframes hw-register-in {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
}

.hw-register__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 35px;
}

/* 22.5px box from the design; the icon is a plus turned 45° into an ×. */
.hw-register__close {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 22.5px;
	height: 22.5px;
	margin: -10px;
	padding: 10px;
	box-sizing: content-box;
	background: none;
	border: 0;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.hw-register__close:hover {
	opacity: 0.6;
}

.hw-register__close img {
	transform: rotate(-45deg);
}

.hw-register__text {
	margin: -10px 0 35px;
}

@media (max-width: 767px) {
	.hw-register {
		--hw-register-pad-x: var(--hw-sml);
		--hw-register-pad-y: var(--hw-med);
		width: 100%;
		height: 100%;
		max-height: none;
	}
}

/* Form ------------------------------------------------------------------ */

.hw-register .gform_heading,
.hw-register .gform_validation_container,
.hw-register .gfield--type-honeypot,
.hw-register .gform_hidden,
.hw-register .gfield_visibility_hidden {
	display: none !important;
}

/* Required fields: an asterisk straight after the label, e.g. "First Name*". */
.hw-register .gfield_required {
	margin-left: 1px;
}

.hw-register .gform_fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 25px;
}

.hw-register .gfield {
	grid-column: 1 / -1;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.hw-register .gfield--width-half {
	grid-column: span 1;
}

@media (max-width: 640px) {
	.hw-register .gfield--width-half {
		grid-column: 1 / -1;
	}
}

/* Body style labels, 13px above their input. */
.hw-register .gfield_label {
	display: block;
	margin-bottom: 13px;
	padding: 0;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.2;
	text-box: trim-both cap alphabetic;
}

.hw-register .hidden_label > .gfield_label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* Boxed inputs: 1px border, 30px tall. */
.hw-register input[type="text"],
.hw-register input[type="email"],
.hw-register input[type="tel"],
.hw-register select,
.hw-register textarea {
	display: block;
	width: 100%;
	height: 30px;
	margin: 0;
	padding: 0 8px;
	background: transparent;
	border: 1px solid var(--hw-text-primary);
	border-radius: 0;
	color: inherit;
	font: 300 16px/1.2 var(--hw-font-body);
	appearance: none;
}

.hw-register textarea {
	height: auto;
	min-height: 90px;
	padding: 6px 8px;
}

.hw-register input:focus-visible,
.hw-register select:focus-visible,
.hw-register textarea:focus-visible {
	outline: 1px solid var(--hw-text-primary);
	outline-offset: 0;
}

.hw-register .ginput_container_select {
	position: relative;
}

.hw-register .ginput_container_select::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 10px;
	width: 8px;
	height: 13px;
	background: currentColor;
	-webkit-mask: url("../img/icon-next.svg") no-repeat 0 0 / 8px 13px;
	mask: url("../img/icon-next.svg") no-repeat 0 0 / 8px 13px;
	transform: translateY(-50%) rotate(90deg);
	pointer-events: none;
}

.hw-register select {
	padding-right: 28px;
	cursor: pointer;
}

/* Yes / No choices and the consent line: 15px squares, 10px from their label. */
.hw-register .gfield_radio,
.hw-register .gfield_checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 40px;
}

.hw-register .gchoice,
.hw-register .ginput_container_consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.hw-register .gchoice label,
.hw-register .gfield_consent_label {
	font-size: 16px;
	line-height: 1.2;
	cursor: pointer;
}

.hw-register input[type="radio"],
.hw-register input[type="checkbox"] {
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	margin: 1px 0 0;
	background: transparent;
	border: 1px solid var(--hw-text-primary);
	border-radius: 0;
	cursor: pointer;
	appearance: none;
}

.hw-register input[type="radio"]:checked,
.hw-register input[type="checkbox"]:checked {
	background: var(--hw-text-primary);
	box-shadow: inset 0 0 0 2px var(--hw-surface-primary);
}

.hw-register input[type="radio"]:focus-visible,
.hw-register input[type="checkbox"]:focus-visible {
	outline: 1px solid var(--hw-text-primary);
	outline-offset: 2px;
}

/* 35px between the field grid and the consent line (the grid gap is 25px). */
.hw-register .gfield--type-consent {
	margin-top: 10px;
}

.hw-register .gfield_description {
	margin-top: 8px;
	font-size: 16px;
	line-height: 1.2;
}

/* Validation */
.hw-register .gform_validation_errors {
	margin-bottom: 25px;
}

/* Gravity Forms focuses the summary for screen readers; the text is visible already. */
.hw-register .gform_validation_errors:focus {
	outline: none;
}

.hw-register .gform_submission_error {
	margin: 0;
	font: 300 16px/1.2 var(--hw-font-body);
	color: #8a1c1c;
}

.hw-register .gfield_error input[type="text"],
.hw-register .gfield_error input[type="email"],
.hw-register .gfield_error input[type="tel"],
.hw-register .gfield_error select,
.hw-register .gfield_error input[type="radio"],
.hw-register .gfield_error input[type="checkbox"] {
	border-color: #8a1c1c;
}

.hw-register .validation_message,
.hw-register .gfield_validation_message {
	margin-top: 8px;
	font-size: 16px;
	line-height: 1.2;
	color: #8a1c1c;
}

/* Submit: left aligned, 35px below the consent line. When the form is taller
   than the screen it stays pinned to the bottom of the popup, over the
   scrolling fields, so it's always in reach. */
.hw-register .gform_footer {
	position: sticky;
	bottom: calc(-1 * var(--hw-register-pad-y));
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 15px calc(-1 * var(--hw-register-pad-x)) calc(-1 * var(--hw-register-pad-y));
	padding: 20px var(--hw-register-pad-x) var(--hw-register-pad-y);
	background: var(--hw-surface-primary);
}

/* Gravity Forms outputs an <input>, which doesn't inherit fonts. */
.hw-register .gform_footer .hw-button {
	font-family: var(--hw-font-body);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.2;
}

.hw-register .gform_ajax_spinner {
	width: 16px;
	height: 16px;
}

/* Confirmation */
.hw-register .gform_confirmation_message {
	font: 300 16px/1.2 var(--hw-font-body);
}

/* ==========================================================================
   Password page (Settings → Site Access)
   ========================================================================== */

.hw-gate {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	min-height: 100svh;
	padding: var(--hw-med) var(--hw-sml);
}

.hw-gate__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--hw-med);
	width: 100%;
	max-width: 440px;
	text-align: center;
}

.hw-gate__logo img {
	width: 224.998px;
	max-width: 100%;
	height: auto;
}

.hw-gate__text {
	display: flex;
	flex-direction: column;
	gap: var(--hw-sml);
}

.hw-gate__form {
	width: 100%;
	text-align: left;
}

/* Same field style as the registration form: label 13px above a boxed input. */
.hw-gate__label {
	display: block;
	margin-bottom: 13px;
}

.hw-gate__field {
	display: flex;
	gap: 10px;
}

.hw-gate__field input {
	flex: 1 1 auto;
	min-width: 0;
	height: 41px;
	margin: 0;
	padding: 0 10px;
	background: transparent;
	border: 1px solid var(--hw-text-primary);
	border-radius: 0;
	color: inherit;
	font: 300 16px/1.2 var(--hw-font-body);
	appearance: none;
}

.hw-gate__field input:focus-visible {
	outline: 1px solid var(--hw-text-primary);
	outline-offset: 0;
}

.hw-gate__field input[aria-invalid="true"] {
	border-color: #8a1c1c;
}

.hw-gate__error {
	margin-top: 13px;
	color: #8a1c1c;
}