/**
 * 438 Main — Components
 * ---------------------------------------------------------------------------
 * Buttons, header, navigation, media, cards, forms, footer.
 * Each component owns its own block and adapts to tone via the colour tokens.
 */

/* ===========================================================================
 * Buttons
 * ======================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	/* 44px minimum target: WCAG 2.5.8 target size. */
	min-height: 46px;
	padding-inline: 1.375rem;
	border: var(--hairline) solid currentColor;
	border-radius: var(--radius-pill);
	font-size: var(--fs-micro);
	font-weight: 500;
	letter-spacing: var(--ls-button);
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	cursor: pointer;
	transition:
		background-color var(--dur-base) var(--ease-in-out),
		color var(--dur-base) var(--ease-in-out),
		border-color var(--dur-base) var(--ease-in-out),
		transform var(--dur-base) var(--ease-out);
}

.btn .icon {
	width: 15px;
	height: 15px;
	transition: transform var(--dur-base) var(--ease-out);
}

.btn:hover .icon {
	transform: translateX(3px);
}

/* Solid — the primary action. */
.btn--solid {
	background-color: var(--c-forest);
	border-color: var(--c-forest);
	color: #fff;
}

.btn--solid:hover,
.btn--solid:focus-visible {
	background-color: var(--c-forest-deep);
	border-color: var(--c-forest-deep);
}

/* Light — the primary action on dark grounds. */
.btn--light {
	background-color: var(--c-white);
	border-color: var(--c-white);
	color: var(--c-forest);
}

.btn--light:hover,
.btn--light:focus-visible {
	background-color: #fff;
	transform: translateY(-1px);
}

/* Outline — secondary. Inherits the current tone's text colour. */
.btn--outline {
	color: var(--c-text);
	border-color: var(--c-line-strong);
	background-color: transparent;
}

.btn--outline:hover,
.btn--outline:focus-visible {
	border-color: currentColor;
	background-color: color-mix(in srgb, currentColor 8%, transparent);
}

/* Ghost — tertiary, for dense UI. */
.btn--ghost {
	border-color: transparent;
	color: var(--c-text);
	padding-inline: 0.75rem;
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
	background-color: color-mix(in srgb, currentColor 8%, transparent);
}

.btn--small {
	min-height: 38px;
	padding-inline: 1rem;
	font-size: 0.6875rem;
}

.btn--block {
	width: 100%;
}

.btn[aria-disabled="true"],
.btn:disabled {
	opacity: 0.45;
	pointer-events: none;
}

/* A quiet text link with an animated rule — used instead of buttons in prose. */
.link-underline {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--fs-small);
	text-decoration: none;
	padding-block: 0.35em;
	border-bottom: var(--hairline) solid var(--c-line-strong);
}

.link-underline:hover {
	border-bottom-color: currentColor;
}

/* ===========================================================================
 * Media
 * ======================================================================== */
.media {
	position: relative;
	margin: 0;
	overflow: hidden;
	background-color: var(--c-sand);
	/* Reserving the aspect ratio is what keeps CLS at zero. */
	aspect-ratio: var(--media-ratio, 4 / 5);
	border-radius: var(--radius-sm);
}

.media__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.001); /* Avoids a 1px edge seam during transforms. */
	transition: transform var(--dur-slow) var(--ease-soft);
	will-change: auto;
}

/* Restrained hover zoom — 1.03, not 1.15. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	a:hover .media__img,
	.media--zoom:hover .media__img {
		transform: scale(1.035);
	}
}

.media__label {
	position: absolute;
	inset-inline-start: var(--sp-4);
	inset-block-end: var(--sp-4);
	z-index: var(--z-content);
	padding: 0.5rem 0.7rem;
	background-color: rgba(250, 249, 246, 0.92);
	backdrop-filter: blur(6px);
	color: var(--c-ink);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1;
	border-radius: var(--radius-sm);
}

/*
 * Placeholder artwork.
 * A deliberate architectural abstraction rather than a grey box, so an
 * un-photographed slot still looks intentional during staging. Replace the
 * artwork and these disappear entirely.
 */
.media--placeholder {
	background-color: var(--c-sand);
}

.media__placeholder {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(
			160deg,
			rgba(41, 55, 47, 0.10) 0%,
			rgba(41, 55, 47, 0.02) 42%,
			rgba(41, 55, 47, 0.14) 100%
		),
		repeating-linear-gradient(
			90deg,
			transparent 0 11.5%,
			rgba(36, 37, 34, 0.09) 11.5% 12%,
			transparent 12% 24%
		),
		repeating-linear-gradient(
			0deg,
			transparent 0 17%,
			rgba(36, 37, 34, 0.07) 17% 17.5%,
			transparent 17.5% 34%
		);
}

.media__placeholder::after {
	content: attr(data-placeholder);
	position: absolute;
	inset-block-end: var(--sp-4);
	inset-inline-start: var(--sp-4);
	font-size: 0.625rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(36, 37, 34, 0.45);
}

/* ===========================================================================
 * Header
 * ======================================================================== */
.header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	min-height: var(--header-h);
	display: flex;
	align-items: center;
	background-color: var(--c-white);
	border-block-end: var(--hairline) solid var(--c-line);
	transition:
		background-color var(--dur-slow) var(--ease-in-out),
		border-color var(--dur-slow) var(--ease-in-out),
		color var(--dur-slow) var(--ease-in-out),
		transform var(--dur-slow) var(--ease-out);
}

/*
 * Over a hero the header is transparent and light. It becomes opaque as soon as
 * the user scrolls past the hero, which JS signals with .is-stuck.
 * Without JS the header simply stays opaque and legible from the start.
 */
.has-hero-header .header {
	position: fixed;
	inset-inline: 0;
	background-color: transparent;
	border-block-end-color: rgba(255, 255, 255, 0.2);
	color: #fff;
}

.has-hero-header .header.is-stuck {
	position: fixed;
	background-color: rgba(250, 249, 246, 0.93);
	backdrop-filter: saturate(140%) blur(14px);
	border-block-end-color: var(--c-line);
	color: var(--c-ink);
}

/* Hide-on-scroll-down, reveal-on-scroll-up. Keeps the CTA one gesture away
   without permanently eating vertical space on phones. */
.header.is-hidden {
	transform: translateY(-100%);
}

.header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-5);
	width: 100%;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	/* Padding, not just line-height: the brand is a link to the home page, and
	   WCAG 2.5.8 asks for a target of at least 24×24 CSS pixels. */
	padding-block: 0.4rem;
	min-height: 32px;
	font-family: var(--font-display);
	font-size: 1.4rem;
	letter-spacing: -0.01em;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.brand__logo img {
	max-height: 42px;
	width: auto;
}

.brand__tagline {
	display: none;
	font-family: var(--font-body);
	font-size: 0.625rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.7;
	padding-inline-start: var(--sp-3);
	border-inline-start: var(--hairline) solid currentColor;
}

@media (min-width: 1100px) {
	.brand__tagline { display: inline-block; }
}

/* --- Primary navigation --------------------------------------------------- */
.nav-primary {
	display: none;
}

.nav-primary__list {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 2rem);
}

.nav-primary a {
	position: relative;
	display: inline-block;
	font-size: var(--fs-small);
	text-decoration: none;
	padding-block: 0.5rem;
}

/* The underline grows from the left on hover — 240ms, no bounce. */
.nav-primary a::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0.15rem;
	height: 1px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--dur-base) var(--ease-in-out);
}

.nav-primary a:hover::after,
.nav-primary a:focus-visible::after,
.nav-primary .current-menu-item > a::after,
.nav-primary .current_page_item > a::after {
	transform: scaleX(1);
}

.header__actions {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
}

.header__cta {
	display: none;
}

@media (min-width: 940px) {
	.nav-primary,
	.header__cta { display: block; }
}

/* --- Menu toggle + drawer ------------------------------------------------- */
.nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: 44px;
	min-width: 44px;
	justify-content: center;
	font-size: var(--fs-micro);
	letter-spacing: var(--ls-button);
	text-transform: uppercase;
}

@media (min-width: 940px) {
	.nav-toggle { display: none; }
}

.nav-toggle__bars {
	position: relative;
	width: 22px;
	height: 10px;
}

.nav-toggle__bars span {
	position: absolute;
	inset-inline: 0;
	height: 1.5px;
	background-color: currentColor;
	transition: transform var(--dur-base) var(--ease-in-out),
		opacity var(--dur-fast) linear;
}

.nav-toggle__bars span:first-child { top: 0; }
.nav-toggle__bars span:last-child  { bottom: 0; }

[aria-expanded="true"] .nav-toggle__bars span:first-child {
	transform: translateY(4.25px) rotate(45deg);
}

[aria-expanded="true"] .nav-toggle__bars span:last-child {
	transform: translateY(-4.25px) rotate(-45deg);
}

.drawer {
	position: fixed;
	inset: 0;
	z-index: var(--z-drawer);
	display: flex;
	flex-direction: column;
	padding: calc(var(--header-h) + var(--sp-6)) var(--gutter) var(--sp-8);
	background-color: var(--c-forest);
	color: var(--c-text-on-dark);
	overflow-y: auto;
	overscroll-behavior: contain;
	/* Closed state. `visibility` keeps it out of the tab order. */
	visibility: hidden;
	opacity: 0;
	transform: translateY(-1.5rem);
	transition:
		opacity var(--dur-base) var(--ease-in-out),
		transform var(--dur-slow) var(--ease-out),
		visibility 0s linear var(--dur-slow);
}

.drawer.is-open {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition-delay: 0s;
}

.drawer__list {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

.drawer__list a {
	display: block;
	padding-block: var(--sp-3);
	font-family: var(--font-display);
	font-size: clamp(2rem, 9vw, 2.75rem);
	line-height: 1.1;
	letter-spacing: -0.03em;
	text-decoration: none;
	border-block-end: var(--hairline) solid var(--c-line-on-dark);
}

.drawer__footer {
	margin-block-start: auto;
	padding-block-start: var(--sp-7);
}

/*
 * No-JavaScript fallback.
 * Without JS there is no drawer to open, so the toggle stays hidden and the
 * primary navigation simply wraps onto a second line at every width. Mobile
 * visitors with JS disabled therefore still get complete navigation rather than
 * a button that does nothing.
 */
html:not(.js) .drawer {
	display: none;
}

html:not(.js) .nav-primary {
	display: block;
}

html:not(.js) .header__inner {
	flex-wrap: wrap;
	row-gap: var(--sp-2);
	padding-block: var(--sp-3);
}

html:not(.js) .nav-primary__list {
	flex-wrap: wrap;
	gap: var(--sp-4);
}

/* Locks the page behind an open drawer without a layout jump. */
body.is-nav-open {
	overflow: hidden;
	/* Compensates for the vanished scrollbar on desktop. */
	padding-inline-end: var(--scrollbar-w, 0px);
}

/* ===========================================================================
 * Live indicator
 * ======================================================================== */
.live {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	font-size: var(--fs-eyebrow);
	font-weight: 500;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--c-text);
}

.live__dot {
	width: 8px;
	height: 8px;
	border-radius: var(--radius-pill);
	background-color: var(--c-available);
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--c-available) 18%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
	.live__dot {
		animation: m438-pulse 2.8s var(--ease-in-out) infinite;
	}
}

@keyframes m438-pulse {
	0%, 100% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--c-available) 18%, transparent); }
	50%      { box-shadow: 0 0 0 9px color-mix(in srgb, var(--c-available) 6%, transparent); }
}

/* ===========================================================================
 * Facts band
 * ======================================================================== */
.facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border-block: var(--hairline) solid var(--c-line);
	margin-block-start: clamp(3rem, 6vw, 5rem);
}

.facts__item {
	padding: var(--sp-5) var(--sp-4);
	border-inline-end: var(--hairline) solid var(--c-line);
}

/* Remove the rule at the end of each visual row. */
.facts__item:nth-child(2n) { border-inline-end: 0; }

.facts__item:nth-child(-n + 2) {
	border-block-end: var(--hairline) solid var(--c-line);
}

@media (min-width: 700px) {
	.facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.facts__item:nth-child(2n)      { border-inline-end: var(--hairline) solid var(--c-line); }
	.facts__item:nth-child(4n),
	.facts__item:last-child          { border-inline-end: 0; }
	.facts__item:nth-child(-n + 2)   { border-block-end: 0; }
}

.facts__value {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	line-height: 1;
	margin: 0 0 var(--sp-2);
}

.facts__label {
	margin: 0;
}

/* ===========================================================================
 * Spec list (amenities, nearby, unit details)
 * ======================================================================== */
.specs {
	border-block-start: var(--hairline) solid var(--c-line);
}

.specs__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-5);
	padding-block: var(--sp-4);
	border-block-end: var(--hairline) solid var(--c-line);
}

.specs__term {
	font-size: var(--fs-body);
	font-weight: 400;
}

.specs__value {
	margin: 0;
	font-size: var(--fs-small);
	color: var(--c-text-muted);
	text-align: right;
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
}

/* Numbered variant used on the homepage amenity list. */
.specs--numbered .specs__value {
	font-family: var(--font-display);
	font-size: 0.9rem;
	letter-spacing: 0.06em;
	opacity: 0.55;
}

/* ===========================================================================
 * Floor-plan card
 * ======================================================================== */
.plan-card {
	display: flex;
	flex-direction: column;
	background-color: var(--c-white);
	color: var(--c-ink);
	border: var(--hairline) solid rgba(36, 37, 34, 0.1);
	border-radius: var(--radius-sm);
	overflow: hidden;
	transition: transform var(--dur-slow) var(--ease-out),
		box-shadow var(--dur-slow) var(--ease-out);
}

.plan-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.plan-card:hover {
		transform: translateY(-5px);
		box-shadow: 0 18px 44px -22px rgba(30, 41, 34, 0.4);
	}
}

.plan-card__media {
	border-radius: 0;
	background-color: var(--c-ivory);
}

/* Floor-plan drawings are line art: contain, never crop. */
.plan-card__media .media__img {
	object-fit: contain;
	padding: var(--sp-5);
	background-color: var(--c-ivory);
}

.plan-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	padding: var(--sp-5);
	margin-block-start: auto;
}

.plan-card__code  { margin: 0; }
.plan-card__name  { font-size: var(--fs-display-s); margin: 0; }
.plan-card__meta  { margin: 0; font-size: var(--fs-small); color: var(--c-text-muted); }
.plan-card__price { margin: 0; font-size: var(--fs-small); font-weight: 500; }

.plan-card__status {
	margin: var(--sp-2) 0 0;
	font-size: var(--fs-eyebrow);
	font-weight: 500;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.plan-card__status.is-available { color: var(--c-available); }
.plan-card__status.is-waitlist  { color: var(--c-text-muted); }

/* ===========================================================================
 * Residence (unit) card — one specific, rentable room, as opposed to a
 * floor-plan card which represents a shared layout.
 * ======================================================================== */
.unit-card {
	display: flex;
	flex-direction: column;
	background-color: var(--c-white);
	color: var(--c-ink);
	border: var(--hairline) solid rgba(36, 37, 34, 0.1);
	border-radius: var(--radius-sm);
	overflow: hidden;
	transition: transform var(--dur-slow) var(--ease-out),
		box-shadow var(--dur-slow) var(--ease-out);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.unit-card:hover {
		transform: translateY(-5px);
		box-shadow: 0 18px 44px -22px rgba(30, 41, 34, 0.4);
	}
}

.unit-card__media-link {
	display: block;
	cursor: pointer;
}

.unit-card__media {
	border-radius: 0;
	background-color: var(--c-ivory);
}

/* Floor-plan drawings are line art: contain, never crop. */
.unit-card__media .media__img {
	object-fit: contain;
	padding: var(--sp-5);
	background-color: var(--c-ivory);
}

.unit-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	padding: var(--sp-5);
	margin-block-start: auto;
}

.unit-card__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-3);
}

.unit-card__name { font-size: var(--fs-display-s); margin: 0; }
.unit-card__meta { margin: 0; font-size: var(--fs-small); color: var(--c-text-muted); }
.unit-card__price { margin: 0; font-size: var(--fs-small); font-weight: 500; }

.unit-card__status {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	margin: 0;
	font-size: var(--fs-eyebrow);
	font-weight: 500;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	white-space: nowrap;
}

.unit-card__status-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: currentColor;
}

.unit-card__status.is-available { color: var(--c-available); }
.unit-card__status.is-pending   { color: var(--c-pending); }
.unit-card__status.is-occupied  { color: var(--c-occupied); }

.unit-card .actions { margin-block-start: var(--sp-2); }

/* ===========================================================================
 * Forms
 * ======================================================================== */
.field {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

.field__label {
	font-size: var(--fs-small);
	font-weight: 500;
}

.field__hint {
	font-size: var(--fs-small);
	color: var(--c-text-muted);
}

.field__required {
	color: var(--c-pending);
	margin-inline-start: 0.15em;
}

.input,
.textarea,
.select {
	width: 100%;
	min-height: 50px;
	padding: 0.8rem 1rem;
	background-color: var(--c-white);
	color: var(--c-ink);
	border: var(--hairline) solid var(--c-line-strong);
	border-radius: var(--radius-sm);
	transition: border-color var(--dur-fast) var(--ease-in-out),
		box-shadow var(--dur-fast) var(--ease-in-out);
}

.textarea {
	min-height: 140px;
	resize: vertical;
	line-height: 1.6;
}

.select {
	appearance: none;
	padding-inline-end: 2.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23242522' stroke-width='1.4'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
}

.input:hover,
.textarea:hover,
.select:hover {
	border-color: var(--c-ink);
}

.input:focus,
.textarea:focus,
.select:focus {
	outline: 2px solid var(--c-focus);
	outline-offset: 1px;
	border-color: var(--c-ink);
}

.input[aria-invalid="true"],
.textarea[aria-invalid="true"] {
	border-color: #a3402f;
	box-shadow: inset 0 0 0 1px #a3402f;
}

.field__error {
	font-size: var(--fs-small);
	color: #8f3527;
	font-weight: 500;
}

.checkbox {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	font-size: var(--fs-small);
	line-height: 1.5;
	cursor: pointer;
}

.checkbox input {
	inline-size: 20px;
	block-size: 20px;
	margin-block-start: 0.15em;
	accent-color: var(--c-forest);
	flex-shrink: 0;
}

/* Honeypot: hidden from humans, present for bots. Not display:none, because
   some bots skip those; positioned off-canvas and removed from a11y tree. */
.field--trap {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form-notice {
	padding: var(--sp-4) var(--sp-5);
	border-inline-start: 3px solid var(--c-available);
	background-color: color-mix(in srgb, var(--c-available) 8%, transparent);
	border-radius: var(--radius-sm);
	font-size: var(--fs-small);
}

.form-notice--error {
	border-inline-start-color: #a3402f;
	background-color: rgba(163, 64, 47, 0.07);
}

/* ===========================================================================
 * Breadcrumbs
 * ======================================================================== */
.crumbs {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	font-size: var(--fs-small);
	color: var(--c-text-muted);
}

.crumbs a {
	text-decoration: none;
	display: inline-block;
	padding-block: 0.25rem;
	min-height: 24px;
}

.crumbs a:hover { text-decoration: underline; }
.crumbs__sep { opacity: 0.5; }

/* ===========================================================================
 * Contact list
 * ======================================================================== */
.contact {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}

.contact--inline {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--sp-5);
}

.contact__item {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	font-size: var(--fs-small);
}

.contact__item .icon {
	width: 17px;
	height: 17px;
	opacity: 0.6;
}

.contact__item a {
	text-decoration: none;
	/* Inline links in the footer and contact block are real navigation targets,
	   so they get a 24px-minimum box rather than a 16px line of text. */
	display: inline-block;
	padding-block: 0.25rem;
	min-height: 24px;
}

.contact__item a:hover { text-decoration: underline; }

/* ===========================================================================
 * Footer
 * ======================================================================== */
.footer {
	--c-bg: var(--c-forest-deep);
	--c-text: var(--c-text-on-dark);
	--c-text-muted: var(--c-text-on-dark-muted);
	--c-line: var(--c-line-on-dark);
	background-color: var(--c-bg);
	color: var(--c-text);
	padding-block: var(--section-y) var(--sp-7);
}

.footer__grid {
	display: grid;
	gap: var(--gap);
}

@media (min-width: 800px) {
	.footer__grid {
		grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 0.9fr));
	}
}

.footer__brand {
	font-family: var(--font-display);
	font-size: clamp(2rem, 4vw, 2.75rem);
	line-height: 1;
	letter-spacing: -0.03em;
}

.footer__title {
	font-size: var(--fs-eyebrow);
	font-weight: 500;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--c-text-muted);
	margin-block-end: var(--sp-4);
}

.footer__list {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	font-size: var(--fs-small);
}

.footer__list a {
	text-decoration: none;
	display: inline-block;
	padding-block: 0.3rem;
	min-height: 26px;
}

.footer__list a:hover { text-decoration: underline; }

.footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	margin-block-start: var(--section-y);
	padding-block-start: var(--sp-5);
	border-block-start: var(--hairline) solid var(--c-line);
	font-size: var(--fs-small);
	color: var(--c-text-muted);
}

.footer__social {
	display: flex;
	gap: var(--sp-4);
}

.footer__social a {
	text-decoration: none;
	font-size: var(--fs-small);
	display: inline-block;
	padding-block: 0.3rem;
	min-height: 26px;
}

.footer__social a:hover { text-decoration: underline; }

/* -----------------------------------------------------------------------
 * Lightbox — click-to-enlarge floor plan drawings.
 * -------------------------------------------------------------------- */

.lightbox-trigger {
	display: block;
	cursor: zoom-in;
}

.lightbox {
	position: fixed;
	inset: 0;
	z-index: var(--z-lightbox);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sp-4);
	padding: var(--sp-6);
	background-color: rgba(30, 33, 28, 0.92);
}

.lightbox[hidden] { display: none; }

.lightbox__img {
	max-width: min(92vw, 1400px);
	max-height: 82vh;
	width: auto;
	height: auto;
	object-fit: contain;
	background-color: var(--c-white);
	border-radius: var(--radius-sm);
}

.lightbox__caption {
	margin: 0;
	color: var(--c-text-on-dark);
	font-size: var(--fs-small);
	text-align: center;
}

.lightbox__caption[hidden] { display: none; }

.lightbox__close {
	position: absolute;
	top: var(--sp-5);
	right: var(--sp-5);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.75rem;
	line-height: 1;
	color: var(--c-text-on-dark);
	background-color: transparent;
	border: var(--hairline) solid var(--c-line-on-dark);
	border-radius: var(--radius-full, 999px);
	cursor: pointer;
}

.lightbox__close:hover,
.lightbox__close:focus-visible {
	background-color: rgba(255, 255, 255, 0.12);
}

html.lightbox-open {
	overflow: hidden;
}