:root {
	--campaign-ink: #191416;
	--campaign-muted: #6f6367;
	--campaign-surface: #ffffff;
	--campaign-paper: #f7f3f4;
	--campaign-blush: #fbf7f8;
	--campaign-night: #191416;
	--campaign-plum: #6f2340;
	--campaign-rose: #b8465f;
	--campaign-mint: #9dbdb3;
	--campaign-sky: #e7f0f2;
	--campaign-line: #e4d9dc;
}

html {
	scroll-behavior: smooth;
}

body {
	background: var(--campaign-paper);
	color: var(--campaign-ink);
	font-family: 'Inter', sans-serif;
	line-height: 1.6;
	text-rendering: optimizeLegibility;
}

a {
	text-decoration: none;
}

.campaign-nav {
	background: rgba(25, 20, 22, .92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.navbar-brand,
.campaign-nav .nav-link {
	color: white;
	font-weight: 700;
}

.navbar-brand {
	align-items: center;
	display: inline-flex;
	gap: .65rem;
}

.brand-mark {
	align-items: center;
	background: linear-gradient(135deg, var(--campaign-rose), var(--campaign-plum));
	border-radius: .4rem;
	box-shadow: 0 10px 22px rgba(0, 0, 0, .18);
	display: inline-flex;
	height: 2rem;
	justify-content: center;
	width: 2rem;
}

.campaign-nav .nav-link {
	color: rgba(255, 255, 255, .78);
	position: relative;
}

.campaign-nav .nav-link:hover {
	color: white;
}

.campaign-nav .nav-link::after {
	background: var(--campaign-rose);
	bottom: .2rem;
	content: "";
	height: 2px;
	left: .5rem;
	position: absolute;
	right: .5rem;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .2s ease;
}

.campaign-nav .nav-link:hover::after {
	transform: scaleX(1);
}

.navbar-toggler {
	border-color: rgba(255, 255, 255, .45);
}

.navbar-toggler-icon {
	filter: invert(1) grayscale(1);
}

.btn-primary {
	background: var(--campaign-plum);
	border-color: var(--campaign-plum);
	box-shadow: 0 16px 34px rgba(111, 35, 64, .26);
	color: white;
	font-weight: 800;
}

.btn-primary:hover,
.btn-primary:focus {
	background: var(--campaign-rose);
	border-color: var(--campaign-rose);
	color: white;
	transform: translateY(-1px);
}

.btn {
	border-radius: 999px;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.property-hero {
	background-image: radial-gradient(circle at 74% 18%, rgba(184, 70, 95, .42), transparent 31%), linear-gradient(90deg, rgba(25, 20, 22, .98), rgba(111, 35, 64, .72), rgba(25, 20, 22, .18)), url('/images/optimized/IMG_2812-HDR.webp');
	background-position: center;
	background-size: cover;
	color: white;
	isolation: isolate;
	position: relative;
}

.property-hero::after {
	background: linear-gradient(180deg, transparent, rgba(25, 20, 22, .32));
	bottom: 0;
	content: "";
	height: 34%;
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
}

.hero-content {
	gap: 2rem 0;
	position: relative;
	z-index: 1;
}

.property-hero h1 {
	font-size: clamp(3.05rem, 5.8vw, 5.65rem);
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1.08;
	margin-bottom: 1.35rem;
	max-width: 900px;
	text-wrap: balance;
}

.hero-copy {
	color: rgba(255, 255, 255, .84);
	font-size: clamp(1.08rem, 1.45vw, 1.28rem);
	line-height: 1.72;
	margin-bottom: 1.65rem;
	max-width: 690px;
}

.eyebrow {
	color: #ffc8d4;
	font-size: .8rem;
	font-weight: 800;
	letter-spacing: .08em;
	margin-bottom: .85rem;
	text-transform: uppercase;
}

.eyebrow.dark {
	color: var(--campaign-plum);
}

.quick-card,
.lead-form,
.agent-panel,
.detail-card {
	background: var(--campaign-surface);
	border: 1px solid var(--campaign-line);
	border-radius: .7rem;
	box-shadow: 0 22px 52px rgba(25, 20, 22, .11);
}

.quick-card {
	backdrop-filter: blur(18px);
	background: rgba(255, 255, 255, .9);
	border-color: rgba(255, 255, 255, .55);
	color: var(--campaign-ink);
	margin-bottom: .5rem;
	padding: 1.45rem;
}

.quick-card strong {
	display: block;
	font-size: 2rem;
	line-height: 1;
}

.quick-card span {
	color: var(--campaign-muted);
}

.quick-grid {
	display: grid;
	gap: .7rem;
	grid-template-columns: repeat(2, 1fr);
	margin-top: 1.25rem;
}

.quick-grid span {
	background: rgba(231, 240, 242, .82);
	border-radius: .55rem;
	color: var(--campaign-ink);
	font-weight: 700;
	padding: .7rem;
}

.section-pad {
	padding: clamp(4rem, 7vw, 7rem) 0;
}

.intro-band {
	background: var(--campaign-surface);
	border-bottom: 1px solid var(--campaign-line);
}

.section-heading {
	margin-bottom: 1.75rem;
	max-width: 760px;
}

.section-heading p:last-child {
	color: var(--campaign-muted);
	margin: .65rem 0 0;
}

h2 {
	font-size: clamp(2rem, 4vw, 3.4rem);
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1.08;
	text-wrap: balance;
}

.muted {
	background: #eee8ea;
}

.gallery-layout {
	display: grid;
	gap: .9rem;
	grid-template-columns: repeat(4, 1fr);
}

.gallery-layout img {
	aspect-ratio: 4 / 3;
	border-radius: .7rem;
	box-shadow: 0 18px 40px rgba(25, 20, 22, .1);
	height: 100%;
	object-fit: cover;
	width: 100%;
	transition: transform .24s ease, box-shadow .24s ease;
}

.gallery-layout img:hover {
	box-shadow: 0 24px 56px rgba(25, 20, 22, .16);
	transform: translateY(-3px);
}

.gallery-layout .feature-image {
	aspect-ratio: auto;
	grid-column: span 2;
	grid-row: span 2;
}

.detail-card {
	height: 100%;
	padding: 1.45rem;
	transition: transform .2s ease, box-shadow .2s ease;
}

.detail-card:hover {
	box-shadow: 0 24px 54px rgba(25, 20, 22, .15);
	transform: translateY(-3px);
}

.detail-card i {
	align-items: center;
	background: var(--campaign-sky);
	border-radius: .55rem;
	color: var(--campaign-plum);
	display: inline-flex;
	font-size: 1.35rem;
	height: 3rem;
	justify-content: center;
	margin-bottom: 1rem;
	width: 3rem;
}

.detail-card h3 {
	font-size: 1.1rem;
	font-weight: 800;
}

.detail-card p {
	color: var(--campaign-muted);
	margin: 0;
}

.media-strip {
	background: radial-gradient(circle at 85% 10%, rgba(184, 70, 95, .36), transparent 28%), linear-gradient(135deg, var(--campaign-night), #351624 52%, var(--campaign-plum));
	color: white;
	padding: clamp(4rem, 7vw, 7rem) 0;
}

.media-strip p:not(.eyebrow) {
	color: rgba(255, 255, 255, .82);
}

.video-preview {
	background: #100c0e;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: .95rem;
	box-shadow: 0 30px 70px rgba(0, 0, 0, .3);
	overflow: hidden;
	position: relative;
}

.video-preview img {
	aspect-ratio: 16 / 9;
	display: block;
	object-fit: cover;
	opacity: .8;
	width: 100%;
}

.video-preview span {
	align-items: center;
	background: var(--campaign-rose);
	border-radius: 50%;
	color: white;
	display: inline-flex;
	font-size: 2rem;
	height: 4.25rem;
	justify-content: center;
	left: 50%;
	padding-left: .2rem;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 4.25rem;
}

.lifestyle-image {
	border-radius: .9rem;
	box-shadow: 0 24px 56px rgba(25, 20, 22, .14);
	width: 100%;
}

.amenity-list {
	display: grid;
	gap: .75rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 1.5rem;
}

.amenity-list span {
	background: white;
	border: 1px solid var(--campaign-line);
	border-radius: .65rem;
	font-weight: 700;
	padding: .85rem;
}

.agent-panel,
.lead-form {
	padding: 1.65rem;
}

.agent-card {
	align-items: center;
	background: var(--campaign-sky);
	border-radius: .65rem;
	display: flex;
	gap: .9rem;
	margin-top: 1.5rem;
	padding: 1rem;
}

.agent-avatar {
	align-items: center;
	background: var(--campaign-plum);
	border-radius: 50%;
	color: white;
	display: inline-flex;
	font-weight: 800;
	height: 3rem;
	justify-content: center;
	width: 3rem;
}

.agent-card span {
	color: var(--campaign-muted);
	display: block;
}

.form-control,
.form-select {
	border-color: var(--campaign-line);
	border-radius: .65rem;
	padding: .8rem .9rem;
}

.form-control:focus,
.form-select:focus {
	border-color: var(--campaign-rose);
	box-shadow: 0 0 0 .2rem rgba(184, 70, 95, .14);
}

.campaign-footer {
	background: var(--campaign-night);
	color: rgba(255, 255, 255, .75);
	padding: 1.25rem 0;
	text-align: center;
}

@media (max-width: 767.98px) {
	.campaign-nav .nav-link::after {
		display: none;
	}

	.hero-copy {
		font-size: 1.05rem;
		line-height: 1.62;
	}

	.property-hero h1 {
		line-height: 1.1;
	}
}

.campaign-footer p {
	margin: 0;
}

@media (max-width: 991.98px) {
	.campaign-nav {
		position: static;
	}

	.property-hero .min-vh-100 {
		min-height: auto !important;
		padding-top: 4.5rem !important;
	}

	.property-hero h1 {
		font-size: clamp(2.55rem, 9vw, 4.35rem);
	}

	.gallery-layout {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 575.98px) {
	.quick-grid,
	.amenity-list,
	.gallery-layout {
		grid-template-columns: 1fr;
	}

	.gallery-layout .feature-image {
		grid-column: auto;
		grid-row: auto;
	}
}