/* Uncommon Homes. Values come from Figma b4aqB52QLmciMXXNMsmoP1; node ids in comments.
   Pixel targets: 1440 and 390. Between them, sizes scale with clamp().
   Figma rounds each text line to whole pixels, so line-heights are px: round(size x multiplier). */

:root {
	--uh-plum: var(--wp--preset--color--plum);
	--uh-plum-deep: var(--wp--preset--color--plum-deep);
	--uh-gold: var(--wp--preset--color--gold);
	--uh-gold-deep: var(--wp--preset--color--gold-deep);
	--uh-teal: var(--wp--preset--color--teal);
	--uh-teal-tint: var(--wp--preset--color--teal-tint);
	--uh-cream: var(--wp--preset--color--cream);
	--uh-sand: var(--wp--preset--color--sand);
	--uh-body: var(--wp--preset--color--body);
	--uh-muted: var(--wp--preset--color--muted);
	--uh-charcoal: var(--wp--preset--color--charcoal);
	--uh-serif: var(--wp--preset--font-family--fraunces);
	--uh-sans: var(--wp--preset--font-family--inter);
	--uh-rust: var(--wp--preset--color--rust);
	--uh-placeholder-on-dark: #d9734d; /* Figma footer email blank */
	/* 22px at 390 to 64px at 1440 */
	--uh-gutter: clamp(22px, calc(6.4px + 4vw), 64px);
	/* Motion. Strong curves: built-in ease-out is too weak for UI. */
	--uh-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--uh-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* Reset */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, svg { display: block; max-width: 100%; height: auto; }
p, h1, h2, h3, h4, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
hr { border: 0; margin: 0; }

h1, h2, h3, h4, .uh-serif { font-variation-settings: "SOFT" 0, "WONK" 1; }

:focus-visible { outline: 2px solid var(--uh-teal); outline-offset: 3px; }

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

/* Copy that differs between the 1440 and 390 Figma frames: both are in the markup, one shows. */
.uh-only-m { display: none !important; }
@media (max-width: 1023px) {
	.uh-only-d { display: none !important; }
	.uh-only-m { display: revert !important; }
}

/* Shared text styles (Figma text styles; line-heights rounded per tokens.md) */
.uh-eyebrow { color: var(--uh-gold-deep); font-size: 12px; font-weight: 600; line-height: 14px; letter-spacing: 0.18em; white-space: pre-wrap; }
.uh-display { color: #fff; font-family: var(--uh-serif); font-size: 66px; font-weight: 600; line-height: 69px; letter-spacing: -0.015em; }
.uh-h2 { color: var(--uh-plum); font-family: var(--uh-serif); font-size: 38px; font-weight: 600; line-height: 43px; letter-spacing: -0.005em; }
.uh-h3 { color: var(--uh-charcoal); font-family: var(--uh-serif); font-size: 27px; font-weight: 600; line-height: 33px; letter-spacing: -0.002em; }
.uh-stat { color: var(--uh-plum); font-family: var(--uh-serif); font-size: 44px; font-weight: 600; line-height: 46px; letter-spacing: -0.01em; }
.uh-body-l { color: var(--uh-body); font-size: 18px; line-height: 31px; }
.uh-body { color: var(--uh-body); font-size: 16px; line-height: 28px; }
.uh-body-s { color: var(--uh-body); font-size: 14px; line-height: 23px; }
.uh-text-link { font-size: 15px; font-weight: 500; line-height: 18px; letter-spacing: 0.01em; white-space: pre-wrap; }
@media (hover: hover) and (pointer: fine) {
	.uh-text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
}
.uh-bar { display: block; width: 48px; height: 3px; background: var(--uh-gold); }

/* Velvet band: texture plus Plum Deep overlay at 0.58 */
.uh-band-velvet {
	position: relative;
	isolation: isolate;
	background: var(--uh-plum-deep) url("../img/texture-velvet.jpg") center / cover no-repeat;
}
.uh-band-velvet::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgb(58 15 66 / 0.58);
}

/* Buttons: Button/Primary 4:2, Outline Dark 4:4, Outline Light 4:6.
   Figma rounds the 15.6px text box to 16px, so line-height is 16px. Strokes sit inside the box. */
/* Figma ends a tracked line at the last glyph; the browser adds one more letter-space, so it comes off the right padding. */
.uh-btn {
	display: inline-flex;
	align-items: flex-start;
	padding: 19px calc(42px - 0.13em) 19px 42px;
	border: 0;
	border-radius: 2px;
	background: none;
	font-family: var(--uh-sans);
	font-size: 13px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 0.13em;
	white-space: nowrap;
	cursor: pointer;
	/* Color on hover; a small press on :active (real on touch, so not hover-gated). */
	transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--uh-ease-out);
}
.uh-btn:active { transform: scale(0.97); }
.uh-btn--primary { background: var(--uh-gold); color: var(--uh-plum-deep); }
/* Primary button recolored on the gold CTA band (12:122) */
.uh-btn--plum { background: var(--uh-plum); color: #fff; }
.uh-btn--outline-dark,
.uh-btn--outline-light { padding-block: 18px; box-shadow: inset 0 0 0 1.4px currentColor; }
.uh-btn--outline-dark { color: var(--uh-plum); }
.uh-btn--outline-light { color: var(--uh-gold); }
/* Touch fires a false hover on tap, so hover colors only apply to a real pointer. */
@media (hover: hover) and (pointer: fine) {
	.uh-btn--primary:hover { background: #d8ba78; }
	.uh-btn--plum:hover { background: var(--uh-plum-deep); }
	.uh-btn--outline-dark:hover { background: var(--uh-plum); color: #fff; }
	.uh-btn--outline-light:hover { background: var(--uh-gold); color: var(--uh-plum-deep); }
}

/* Tag/Healthy 4:8 */
.uh-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px calc(16px - 0.06em) 8px 14px;
	border-radius: 40px;
	background: var(--uh-teal-tint);
	color: var(--uh-teal);
	font-family: var(--uh-sans);
	font-size: 13px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 0.06em;
	white-space: nowrap;
}
.uh-tag__dot { width: 7px; height: 7px; flex: none; }

/* Header: Nav/Desktop 5:6, Nav/Mobile 20:715 */
.uh-nav {
	position: relative;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 84px;
	padding: 0 48px 0 64px;
	background: #fff;
	box-shadow: inset 0 0 0 1px #ece3d6; /* Figma inside stroke: no layout shift */
	font-family: var(--uh-sans);
	font-size: 15px;
	font-weight: 500;
	line-height: 18px;
	letter-spacing: 0.01em;
}
.uh-nav__logo picture { display: block; }
.uh-nav__logo img { width: 254px; height: 40px; object-fit: contain; }
.uh-nav__links { display: flex; align-items: center; gap: 20px; color: var(--uh-charcoal); }
/* Figma lays text out on whole-pixel widths; fixing the group to its Figma width (5:15) keeps each link within a pixel of the mockup. */
@media (min-width: 1200px) {
	.uh-nav__links { width: 508px; justify-content: space-between; gap: 0; }
}
.uh-nav__links a,
.uh-drawer nav a,
.uh-footer a,
.uh-nav__phone { transition: color 150ms ease; }
@media (hover: hover) and (pointer: fine) {
	.uh-nav__links a:hover { color: var(--uh-plum); }
}
.uh-nav__right { display: flex; align-items: center; gap: 22px; }
.uh-nav__phone { color: var(--uh-plum); white-space: nowrap; }
.uh-nav__toggle { display: none; width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; }
.uh-drawer { display: none; }

@media (max-width: 1199px) {
	.uh-nav__right .uh-nav__phone { display: none; }
}

@media (max-width: 1023px) {
	.uh-nav { height: 62px; padding: 0 22px; }
	.uh-nav__logo img { width: 191px; height: 30px; }
	.uh-nav__links,
	.uh-nav__right { display: none; }
	.uh-nav__toggle { display: block; }
	/* Drops out of the header: 220ms in, 160ms out. display transitions discretely so the exit can play. */
	.uh-drawer {
		position: absolute;
		top: 100%;
		left: -1px;
		right: -1px;
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
		padding: 28px 22px 32px;
		background: #fff;
		box-shadow: inset 1px 0 0 #ece3d6, inset -1px -1px 0 #ece3d6;
		opacity: 0;
		transform: translateY(-8px);
		transition: opacity 160ms var(--uh-ease-out), transform 160ms var(--uh-ease-out), display 160ms allow-discrete;
	}
	.uh-drawer:not([hidden]) {
		display: flex;
		opacity: 1;
		transform: none;
		transition-duration: 220ms;
	}
	@starting-style {
		.uh-drawer:not([hidden]) { opacity: 0; transform: translateY(-8px); }
	}
	.uh-drawer nav { display: flex; flex-direction: column; gap: 18px; color: var(--uh-charcoal); font-size: 18px; }
	.uh-drawer-open { overflow: hidden; }
}

/* Footer: Footer/Desktop 6:7, Footer/Mobile 20:724 */
.uh-footer {
	color: var(--uh-cream);
	font-family: var(--uh-sans);
	font-size: 14px;
	line-height: 23px;
}
.uh-footer__label {
	color: var(--uh-gold);
	font-size: 13px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 0.06em;
	white-space: nowrap;
}
.uh-footer__about { color: var(--uh-sand); }
.uh-footer__broker { display: flex; flex-direction: column; gap: 10px; }
.uh-footer__email { color: var(--uh-placeholder-on-dark); }
@media (hover: hover) and (pointer: fine) {
	.uh-footer a:hover { color: var(--uh-gold); }
}
.uh-footer__rule { height: 1px; width: 100%; }
.uh-footer__legal { color: var(--uh-muted); }
.uh-footer__newsletter label { color: var(--uh-sand); }
.uh-footer__newsletter input {
	height: 44px;
	padding: 0 16px;
	border: 1px solid rgb(255 255 255 / 0.35);
	border-radius: 4px;
	background: rgb(255 255 255 / 0.1);
	color: var(--uh-sand);
	font-size: 14px;
	line-height: 23px;
}
.uh-footer__newsletter input::placeholder { color: var(--uh-sand); opacity: 0.6; }

.uh-footer__desktop {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: 68px var(--uh-gutter) 40px;
}
.uh-footer__columns { display: flex; justify-content: space-between; gap: 32px; }
.uh-footer__desktop .uh-footer__brand { display: flex; flex-direction: column; gap: 20px; width: 380px; flex: none; }
.uh-footer__desktop .uh-footer__brand > img { width: 204px; height: 32px; object-fit: contain; }
.uh-footer__desktop .uh-footer__about { width: 340px; }
.uh-footer__broker img { object-fit: contain; }
.uh-footer__desktop .uh-footer__broker img { width: 88px; height: 46px; }
.uh-footer__col { display: flex; flex-direction: column; gap: 18px; white-space: nowrap; }
/* Column widths from Footer/Desktop 6:7 (Figma rounds text boxes to whole pixels). */
.uh-footer__columns > :nth-child(2) { width: 114px; }
.uh-footer__columns > :nth-child(3) { width: 145px; }
.uh-footer__columns > :nth-child(4) { width: 213px; }
.uh-footer__desktop .uh-footer__col ul { display: flex; flex-direction: column; gap: 13px; }
.uh-footer__desktop .uh-footer__col--visit ul { gap: 10px; }
.uh-footer__desktop .uh-footer__newsletter { display: flex; align-items: center; gap: 16px; }
.uh-footer__desktop .uh-footer__newsletter label { white-space: nowrap; }
.uh-footer__desktop .uh-footer__newsletter input { width: 300px; }
.uh-footer__desktop .uh-footer__rule { background: rgb(205 170 95 / 0.32); }
.uh-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.uh-footer__desktop .uh-footer__legal { white-space: nowrap; }
.uh-footer__meta { display: flex; align-items: center; gap: 24px; flex: none; }
.uh-footer__policies { display: flex; justify-content: space-between; width: 213px; color: var(--uh-sand); white-space: nowrap; }
.uh-footer__social { display: flex; gap: 12px; }
.uh-footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid #7d5b86;
	border-radius: 21px;
}
.uh-footer__social img { width: 20px; height: 20px; }

.uh-footer__mobile { display: none; }

@media (max-width: 1439px) {
	.uh-footer__desktop .uh-footer__legal { white-space: normal; }
}

@media (max-width: 1023px) {
	.uh-footer__desktop { display: none; }
	.uh-footer__mobile {
		display: flex;
		flex-direction: column;
		gap: 30px;
		padding: 48px 32px 32px;
	}
	.uh-footer__mobile .uh-footer__brand { display: flex; flex-direction: column; gap: 16px; }
	.uh-footer__mobile .uh-footer__brand > img { width: 216px; height: 34px; object-fit: contain; }
	.uh-footer__mobile .uh-footer__broker img { width: 80px; height: 42px; }
	.uh-footer__pair { display: flex; justify-content: space-between; }
	.uh-footer__pair .uh-footer__col { gap: 12px; }
	.uh-footer__pair .uh-footer__col ul { display: flex; flex-direction: column; gap: 12px; }
	.uh-footer__visit { display: flex; flex-direction: column; gap: 8px; }
	.uh-footer__mobile .uh-footer__newsletter { display: flex; flex-direction: column; gap: 12px; }
	.uh-footer__mobile .uh-footer__newsletter input { width: 100%; }
	.uh-footer__mobile .uh-btn { width: 100%; }
	.uh-footer__mobile .uh-footer__rule { background: rgb(205 170 95 / 0.3); }
	.uh-footer__mobile .uh-footer__legal:last-child { white-space: pre-wrap; }
}

/* Property Card 4:11 */
.uh-card {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: 4px;
	background: #fff;
}
/* Inside stroke drawn above the photo, as in Figma */
.uh-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid #e7ddd0;
	border-radius: inherit;
	pointer-events: none;
}
.uh-card__link { display: block; }
.uh-card__photo {
	position: relative;
	height: 268px;
	overflow: hidden;
	background-image: linear-gradient(128.52deg, #4b1455 10.714%, #0899ab 82.143%);
}
.uh-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 250ms var(--uh-ease-out); }
/* The photo leans in a touch under a real pointer: it says "this card opens". */
@media (hover: hover) and (pointer: fine) {
	.uh-card__link:hover .uh-card__img { transform: scale(1.03); }
}
.uh-card__scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0) 50%, rgb(0 0 0 / 0.5) 100%); }
.uh-card__badge {
	position: absolute;
	top: 16px;
	left: 16px;
	padding: 6px calc(12px - 0.06em) 6px 12px;
	border-radius: 2px;
	background: var(--uh-gold);
	color: var(--uh-plum-deep);
	font-size: 13px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 0.06em;
}
.uh-card__caption {
	position: absolute;
	top: 234px;
	left: 16px;
	color: #fff;
	opacity: 0.94;
	font-family: var(--uh-serif);
	font-size: 15px;
	font-style: italic;
	font-weight: 300;
	line-height: 24px;
	font-variation-settings: "SOFT" 0, "WONK" 1;
	white-space: nowrap;
}
.uh-card--feature .uh-card__photo { height: 806px; }
.uh-card--feature .uh-card__caption { top: 770px; }
.uh-card__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 24px; }
.uh-card__row { display: flex; align-items: center; justify-content: space-between; font-weight: 600; }
.uh-card__price { color: var(--uh-plum); font-size: 22px; line-height: 26px; }
.uh-card__status { color: var(--uh-gold-deep); font-size: 13px; line-height: 16px; letter-spacing: 0.06em; }
.uh-card__address { color: var(--uh-charcoal); font-size: 21px; line-height: 27px; }
.uh-card__city,
.uh-card__specs { font-size: 14px; line-height: 23px; }
.uh-card__city { color: var(--uh-muted); }
.uh-card__specs { color: var(--uh-body); white-space: pre; }
.uh-card__rule { display: block; height: 1px; background: var(--uh-sand); }
.uh-card__tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* QA-only component sheet (page "components"). Figma flattens component shots onto #E5E5E5. */
.uh-qa [data-qa="property-card"] { width: 384px; }
.uh-qa { background: #e5e5e5; padding: 40px var(--uh-gutter); display: flex; flex-direction: column; gap: 40px; align-items: flex-start; }

/* Reduced motion: keep the color and opacity fades that explain a change, drop everything that moves. */
@media (prefers-reduced-motion: reduce) {
	.uh-btn:active,
	.uh-card__link:hover .uh-card__img,
	.uh-drawer,
	.uh-drawer:not([hidden]) { transform: none !important; }
	html { scroll-behavior: auto; }
}

/* Tap targets: text links in lists and the footer are 17 to 21 px tall. Padding grows the tap area to 25 px or more and
   the equal negative margin keeps every line where Figma has it (WCAG 2.2 target size). */
.uh-footer a,
.uh-text-link,
.uh-crumb a,
.uh-contact__value a { padding-block: 4px; margin-block: -4px; }
/* Social icons are fixed 32 px boxes: already big enough, and padding would shrink the box. */
.uh-footer__social a { padding-block: 0; margin-block: 0; }
/* iOS zooms the page when a field under 16 px gets focus. Safari on iOS only (no effect on the 1440/390 Chromium match). */
@supports (-webkit-touch-callout: none) {
	.uh-footer__newsletter input { font-size: 16px; }
}

/* Lead forms (inc/forms.php). The honeypot sits off-screen; the status line shows only after a submit. */
.uh-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.uh-form-status { flex-basis: 100%; color: var(--uh-plum); font-size: 14px; font-weight: 600; line-height: 23px; }
.uh-footer .uh-form-status { color: var(--uh-sand); }
.uh-footer__desktop .uh-footer__newsletter { flex-wrap: wrap; }
form[aria-busy="true"] [type="submit"] { opacity: 0.6; cursor: progress; }

/* Kristin blanks: rust text from Figma. !important so no section color can hide a launch blocker.
   Every one also carries data-needs-kristin and a line in LAUNCH-BLOCKERS.md. */
.uh-rust { color: var(--uh-rust) !important; }