.villa-hero .shade {
	background: var(--color-cta-shade);
}

.villa-hero .hero-text h1,
.villa-hero .hero-text p,
.villa-intro p,
.villa-offer h2,
.villa-offer h3,
.villa-offer p,
.villa-gallery h2,
.villa-gallery p,
.villa-around h2,
.villa-around p,
.booking-bar p,
.villa-location h2,
.villa-location p,
.villa-cta p {
	margin: 0;
}

.villa-hero-title {
	color: var(--color-white);
	position: absolute;
	bottom: 53px;
	left: var(--spacing-page);
}

.villa-hero .villa-hero-caption {
	color: var(--color-white);
	width: 274px;
	position: absolute;
	right: var(--spacing-page);
	bottom: 62px;
}

.villa-intro {
	background: var(--color-cream);
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	padding: 125px 0 100px var(--spacing-page);
}

.villa-intro-img {
	aspect-ratio: 712 / 1119;
	flex-shrink: 0;
	width: 50.5682%;
}

.is-bold .villa-intro-img .cover {
	object-position: 33.44% 50%;
}

.villa-intro-right {
	min-width: 0;
	padding: 0 var(--spacing-page) 0 clamp(24px, 4.4444vw, 64px);
	flex-direction: column;
	flex: 1 1 0;
	align-items: flex-end;
	gap: 103px;
	display: flex;
}

.villa-intro-side {
	aspect-ratio: 339 / 408;
	width: 56.5%;
}

.villa-intro-body {
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	width: 100%;
	min-height: 520px;
	display: flex;
	container-type: inline-size;
}

.villa-intro-body > p {
	max-width: 373px;
}

.villa-specs {
	flex-direction: column;
	gap: 40px;
	display: flex;
}

.villa-amenities {
	flex-direction: column;
	gap: 20px;
	display: flex;
}

.feature-grid {
	grid-template-columns: repeat(2, max-content);
	justify-content: start;
	gap: 16px clamp(32px, 8.6806vw, 125px);
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
}

@container (width<=440px) {
	.feature-grid {
		grid-template-columns: max-content;
	}
}

.feature-grid li {
	color: var(--color-muted);
	white-space: nowrap;
	align-items: center;
	gap: 12px;
	font-size: var(--fs-14);
	line-height: 1.4;
	display: flex;
}

.icon20 {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	position: relative;
	overflow: hidden;
}

.icon20-box,
.icon20-inner {
	position: absolute;
}

.icon20-box {
	inset: var(--icon-box, 0);
}

.icon20-inner {
	inset: var(--icon-inner, 0);
}

.icon20 img {
	width: 100%;
	max-width: none;
	height: 100%;
	position: absolute;
	inset: 0;
}

.icon20.is-guests {
	--icon-box: 19.53% 10.99% 17.46% 12.5%;
	--icon-inner: -3.97% -3.27%;
}

.icon20.is-bedrooms {
	--icon-box: 32.5% 12.5% 22.5% 12.5%;
	--icon-inner: -5.56% -3.33%;
}

.icon20.is-bathrooms {
	--icon-box: 17.38% 12.5% 12.5% 12.5%;
	--icon-inner: -3.57% -3.33%;
}

.icon20.is-pool {
	--icon-box: 16.02% 10% 17.49% 12.5%;
	--icon-inner: -3.76% -3.23%;
}

.icon20.is-shower {
	--icon-box: 12.5% 30% 12.5% 20%;
	--icon-inner: -3.33% -5%;
}

.icon20.is-kitchen {
	--icon-box: 17.5% 10% 15% 10%;
	--icon-inner: -3.7% -3.13%;
}

.icon20.is-air {
	--icon-box: 24.45% 12.5% 16.52% 12.5%;
	--icon-inner: -4.24% -3.33%;
}

.icon20.is-housekeeping {
	--icon-box: 12.5% 30% 12.5% 27.5%;
	--icon-inner: -3.33% -5.88%;
}

.icon20.is-security {
	--icon-box: 12.5% 20%;
	--icon-inner: -3.33% -4.17%;
}

.villa-duo {
	background: var(--color-cream);
	flex-direction: row;
	align-items: flex-start;
	gap: 16px;
	padding: 50px var(--spacing-page) 100px;
}

.villa-duo-a {
	aspect-ratio: 448 / 280;
	flex-shrink: 0;
	width: 32.5581%;
}

.villa-duo-b {
	aspect-ratio: 912 / 590;
	flex: 1 1 0;
}

.villa-offer {
	background: var(--color-white);
	align-items: stretch;
	gap: 72px;
	padding: 100px 0 0 var(--spacing-page);
}

.villa-offer-head {
	padding-right: var(--spacing-page);
}

.villa-offer-head h2 {
	max-width: 382px;
}

.villa-offer-stack {
	align-items: stretch;
	display: flex;
}

.villa-offer-text {
	flex: 1 1 0;
	min-width: 0;
	padding: 25.5682% 24px 25.5682% 0;
}

.villa-offer-sticky {
	height: 0;
	position: sticky;
	top: 50vh;
}

.villa-offer-sticky > .villa-offer-inner {
	margin: 0 auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	transform: translateY(-50%);
}

.villa-offer-inner {
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
	width: min(468px, 100%);
	display: flex;
}

.villa-offer-copy {
	flex-direction: column;
	gap: 16px;
	display: flex;
}

.villa-offer-stack .villa-offer-copy p {
	max-width: 372px;
}

.villa-offer-images {
	flex-direction: column;
	flex-shrink: 0;
	width: 51.1364%;
	display: flex;
}

.villa-offer-img {
	aspect-ratio: 1;
	width: 100%;
}

.villa-offer.is-bold .villa-offer-images > :first-child .cover,
.villa-offer.is-bold .villa-offer-type:first-child .cover {
	object-position: 46% 50%;
}

.villa-offer-mobile {
	display: none;
}

.swap-stack {
	display: grid;
}

.swap-item {
	opacity: 0;
	visibility: hidden;
	grid-area: 1 / 1;
	transition: opacity .3s, visibility 0s linear .3s;
}

.swap-item.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity .3s;
}

.villa-offer .swap-item {
	transition-duration: .5s;
}

.villa-location {
	background: var(--color-cream);
	flex-direction: row;
	align-items: center;
	gap: clamp(40px, 8.3333vw, 120px);
	padding: 100px var(--spacing-page);
}

.villa-map {
	aspect-ratio: 1;
	color: var(--color-black);
	background: var(--color-map);
	flex-shrink: 0;
	place-items: center;
	width: 49.4186%;
	display: grid;
}

.villa-location-text {
	flex-direction: column;
	flex: 0 576px;
	align-items: flex-start;
	gap: 72px;
	min-width: 0;
	display: flex;
}

.villa-location-head {
	flex-direction: column;
	gap: 32px;
	display: flex;
}

.villa-location-head .eyebrow.brxe-text-basic {
	color: var(--color-muted);
}

.villa-location-head h2 {
	max-width: 420px;
}

.villa-location-text > p {
	max-width: 464px;
}

.villa-cta .media-box {
	left: -.2778%;
	top: -16.1963%;
	width: 100.5556%;
	height: 118.5276%;
}

.villa-cta .shade {
	background: var(--color-shade);
}

.villa-cta .image-cta-inner {
	gap: 56px;
}

.villa-cta-text {
	flex-direction: column;
	align-items: center;
	gap: 40px;
	display: flex;
}

.villa-cta h2,
.villa-cta .text-link {
	color: var(--color-cream);
}

.villa-cta .t72.cta-title {
	max-width: 506px;
}

.villa-cta-copy {
	max-width: 482px;
}

@media (width<=1279px) {
	.villa-intro-body {
		min-height: 0;
	}

	.villa-specs > .rule {
		display: none;
	}

	.villa-intro .feature-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 16px;
	}

	.villa-intro .feature-grid li {
		white-space: normal;
	}

	.villa-offer-head {
		padding-right: 0;
	}

	.villa-offer-stack {
		display: none;
	}

	.villa-offer-mobile,
	.villa-offer-type {
		display: flex;
		flex-direction: column;
	}

	.villa-cta .t72.cta-title {
		max-width: 600px;
	}
}

@media (width>=768px) and (width<=1279px) {
	.villa-hero {
		height: 1040px;
		min-height: 0;
	}

	.villa-hero-title {
		bottom: 48px;
	}

	.villa-hero .villa-hero-caption {
		width: 256px;
		bottom: 56px;
	}

	.villa-intro {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 56px 24px;
		padding: 120px var(--spacing-page);
		display: grid;
	}

	.villa-intro-right,
	.villa-intro-body {
		display: contents;
	}

	.villa-intro-img {
		aspect-ratio: 381 / 540;
		grid-area: 1 / 1;
		width: 100%;
	}

	.villa-intro-side {
		aspect-ratio: 381 / 400;
		grid-area: 1 / 2;
		align-self: end;
		width: 100%;
	}

	.villa-intro-body > p {
		grid-area: 2 / 1;
		max-width: 327px;
	}

	.villa-specs {
		grid-area: 2 / 2;
		gap: 64px;
	}

	.villa-duo {
		gap: 24px;
		padding: 0 var(--spacing-page) 120px;
	}

	.villa-duo-a {
		aspect-ratio: 254 / 330;
		width: 32.3155%;
	}

	.villa-duo-b {
		aspect-ratio: 508 / 560;
	}

	.villa-offer {
		gap: 56px;
		padding: 100px var(--spacing-page) 120px;
	}

	.villa-offer-mobile {
		gap: 72px;
	}

	.villa-offer-type {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
		gap: 32px 24px;
		display: grid;
	}

	.villa-offer-type .villa-offer-inner,
	.villa-offer-type .villa-offer-copy {
		display: contents;
	}

	.villa-offer-type .villa-offer-img {
		aspect-ratio: 786 / 520;
		grid-area: 1 / 1 / 2 / 3;
	}

	.villa-offer-type h3 {
		grid-area: 2 / 1;
		font-size: var(--fs-s32);
	}

	.villa-offer-type p {
		grid-area: 2 / 2;
	}

	.villa-offer-type .text-link {
		grid-area: 3 / 2;
		justify-self: start;
		margin-top: -8px;
	}

	.villa-location {
		flex-direction: column;
		align-items: stretch;
		gap: 48px;
		padding: 0 var(--spacing-page) 120px;
	}

	.villa-map {
		aspect-ratio: 786 / 480;
		width: 100%;
	}

	.villa-location-text {
		flex: none;
		grid-template-columns: minmax(0, 1fr) 343px;
		align-items: start;
		gap: 24px 62px;
		display: grid;
	}

	.villa-location-head {
		grid-area: 1 / 1 / 3 / 2;
		gap: 16px;
	}

	.villa-location-head h2 {
		max-width: 286px;
	}

	.villa-location-text > p {
		grid-area: 1 / 2;
	}

	.villa-location-text > .text-link {
		grid-area: 2 / 2;
		justify-self: start;
	}
}

@media (width<=767px) {
	.villa-hero {
		height: 720px;
		min-height: 0;
	}

	.villa-hero-title {
		bottom: 100px;
	}

	.villa-hero .villa-hero-caption {
		width: auto;
		max-width: min(287px, calc(100% - 2 * var(--spacing-page)));
		left: var(--spacing-page);
		right: auto;
		bottom: 32px;
	}

	.villa-intro {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
		padding: 96px var(--spacing-page);
	}

	.villa-intro-img {
		aspect-ratio: 350 / 440;
		width: 100%;
	}

	.villa-intro-right {
		gap: 32px;
		width: 100%;
		padding: 0;
	}

	.villa-intro-side {
		aspect-ratio: 350 / 250;
		width: 100%;
	}

	.villa-intro-body {
		container-type: normal;
	}

	.villa-specs {
		gap: 64px;
	}

	.villa-duo {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		padding: 0 var(--spacing-page) 96px;
	}

	.villa-duo-a {
		aspect-ratio: 350 / 240;
		width: 100%;
	}

	.villa-duo-b {
		aspect-ratio: 350 / 330;
		flex: none;
		width: 100%;
	}

	.villa-offer {
		gap: 40px;
		padding: 96px var(--spacing-page);
	}

	.villa-offer-mobile {
		gap: 100px;
	}

	.villa-offer-type {
		gap: 24px;
	}

	.villa-location {
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
		padding: 96px var(--spacing-page);
	}

	.villa-map {
		width: 100%;
	}

	.villa-location-text {
		flex: none;
		gap: 32px;
	}

	.villa-location-head {
		gap: 20px;
	}

	.villa-location-head h2 {
		max-width: 247px;
	}

	.villa-cta .image-cta-inner {
		gap: 40px;
	}

	.villa-cta-text {
		gap: 24px;
	}

	.villa-cta .t72.cta-title {
		max-width: 292px;
	}

	.villa-cta-copy {
		max-width: 288px;
	}
}

.villa-gallery {
	flex-direction: column;
	align-items: stretch;
	padding-bottom: 100px;
	display: flex;
	overflow: hidden;
}

.villa-gallery-head {
	flex-direction: column;
	align-items: flex-end;
	gap: 24px;
	padding: 125px var(--spacing-page) 64px;
	display: flex;
}

.villa-gallery-head .sec-head {
	width: 100%;
}

.villa-gallery-head h2 {
	max-width: 450px;
}

.villa-gallery-text {
	max-width: 270px;
}

.lines {
	white-space: pre-line;
}

.nowrap {
	white-space: nowrap;
}

.gallery-viewport {
	touch-action: pan-y;
	cursor: grab;
	-webkit-user-select: none;
	user-select: none;
	width: 100%;
	overflow: hidden;
}

.gallery-viewport.is-dragging {
	cursor: grabbing;
}

html:not(.azuma-js) .gallery-viewport {
	overflow-x: auto;
}

.gallery-track {
	will-change: transform;
	gap: 16px;
	width: max-content;
	max-width: none;
	display: flex;
}

.gallery-img {
	appearance: none;
	aspect-ratio: 583 / 410;
	color: inherit;
	font: inherit;
	cursor: zoom-in;
	border: 0;
	flex: 0 0 40.4861vw;
	width: auto;
	max-width: none;
	padding: 0;
	display: block;
}

.gallery-viewport.is-dragging .gallery-img {
	cursor: grabbing;
}

.gallery-img img {
	pointer-events: none;
	-webkit-user-drag: none;
}

.gallery-img .shade {
	background: rgba(0, 0, 0, .05);
}

.villa-around {
	background: var(--color-cream);
	flex-direction: row;
	align-items: flex-start;
	gap: clamp(40px, 15.625vw, 225px);
	padding: 100px var(--spacing-page);
	display: flex;
}

.around-left {
	flex-direction: column;
	flex-shrink: 0;
	gap: 72px;
	width: 34.375%;
	display: flex;
}

.around-head {
	flex-direction: column;
	gap: 24px;
	display: flex;
}

.around-text {
	max-width: 260px;
}

.around-img {
	aspect-ratio: 473 / 541;
	width: 100%;
}

.swap-fade {
	opacity: 0;
	transition: opacity .3s;
}

.swap-fade.is-active {
	opacity: 1;
}

.villa-around.is-bold .swap-fade:nth-child(1) {
	object-position: 50% 31.5%;
}

.villa-around.is-bold .swap-fade:nth-child(3) {
	object-position: 50% 30%;
}

.around-right {
	flex-direction: column;
	flex: 1 1 0;
	justify-content: space-between;
	gap: 48px;
	min-width: 0;
	min-height: 685px;
	padding-top: 40px;
	display: flex;
}

.around-tabs,
.around-tab-item {
	flex-direction: column;
	gap: 16px;
	display: flex;
}

.around-tab {
	appearance: none;
	color: var(--color-tab);
	text-align: left;
	cursor: pointer;
	background: none;
	border: 0;
	min-height: 44px;
	padding: 0;
	transition: color .3s;
}

.around-tab:hover {
	color: var(--color-tab-hover);
}

.around-tab.is-active {
	color: var(--color-ink);
}

.around-panel {
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
	display: flex;
}

.around-panel .swap-item {
	max-width: 362px;
}

html:not(.azuma-js) .around-panel .swap-stack {
	gap: 16px;
}

html:not(.azuma-js) .around-panel .swap-item {
	opacity: 1;
	visibility: visible;
	grid-area: auto;
}

.booking-bar {
	z-index: 40;
	border-top: .5px solid var(--color-header-border);
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s ease, translate .6s var(--ease-slide), visibility 0s linear .6s;
	background: var(--color-white);
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	width: auto;
	padding: 20px var(--spacing-page);
	display: flex;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	translate: 0 100%;
	box-shadow: 0 -2px 6px #0000000f;
}

.booking-bar.is-visible {
	opacity: 1;
	visibility: visible;
	transition: opacity .5s ease, translate .6s var(--ease-slide);
	translate: 0;
}

.booking-summary {
	align-items: center;
	gap: 64px;
	display: flex;
}

.booking-name {
	font-family: var(--font-display);
	letter-spacing: -.005em;
	white-space: nowrap;
	font-size: 40px;
	line-height: 1.1;
}

.booking-price {
	flex-direction: column;
	gap: 6px;
	display: flex;
}

.booking-bar .booking-label {
	color: var(--color-sand);
}

.booking-amount {
	letter-spacing: .01em;
	white-space: nowrap;
	font-size: 16px;
	line-height: normal;
}

.booking-dates {
	align-items: center;
	gap: 32px;
	display: flex;
}

.booking-bar .booking-field {
	color: inherit;
	cursor: pointer;
	flex-direction: column;
	gap: 12px;
	width: 216px;
	margin: 0;
	padding: 0;
	display: flex;
}

.booking-control {
	border-bottom: .5px solid var(--color-ink);
	letter-spacing: .01em;
	justify-content: space-between;
	align-items: center;
	height: 22.5px;
	padding-bottom: 8px;
	font-size: 14px;
	line-height: normal;
	display: flex;
	position: relative;
}

.booking-control:focus-within {
	outline: 1px solid var(--color-ink);
	outline-offset: 4px;
}

.booking-chevron {
	width: 9.85px;
	height: 5.77px;
	margin-right: 5px;
}

.booking-input {
	opacity: 0;
	cursor: pointer;
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
}

.booking-input::-webkit-calendar-picker-indicator {
	cursor: pointer;
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
}

#brx-header:has(.menu-overlay.is-open) .site-header.is-hidden {
	translate: none;
}

.lightbox {
	z-index: 100;
	color: var(--color-white);
	opacity: 0;
	visibility: hidden;
	transition: opacity .45s, visibility 0s linear .45s;
	background: var(--color-lightbox);
	flex-direction: column;
	display: flex;
	position: fixed;
	inset: 0;
}

.lightbox.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity .45s;
}

.lightbox button {
	appearance: none;
	color: inherit;
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0;
}

.lightbox-bar {
	flex-shrink: 0;
	justify-content: space-between;
	align-items: center;
	height: var(--header-height);
	padding: 0 var(--spacing-page);
	display: flex;
}

.lightbox-count {
	color: var(--color-lightbox-count);
	font-family: var(--font-body);
	font-size: var(--fs-14);
}

.lightbox-stage {
	touch-action: pan-y;
	cursor: zoom-out;
	flex: 1 1 0;
	justify-content: center;
	align-items: center;
	min-height: 0;
	padding: 0 calc(var(--spacing-page) + 56px) calc(var(--header-height) - 24px);
	display: flex;
}

.lightbox-img {
	object-fit: contain;
	cursor: default;
	min-width: 0;
	max-width: 100%;
	max-height: 100%;
	animation: lightbox-in .5s var(--ease-slide);
}

@keyframes lightbox-in {
	0% {
		opacity: 0;
	}
}

.lightbox-arrow {
	place-items: center;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	display: grid;
	position: absolute;
	top: 50%;
}

.lightbox-arrow.is-prev {
	left: calc(var(--spacing-page) - 14px);
}

.lightbox-arrow.is-next {
	right: calc(var(--spacing-page) - 14px);
}

.chevron {
	place-items: center;
	width: 15px;
	height: 12px;
	display: grid;
}

.chevron:before {
	content: "";
	background: url(../images/a8ab7.svg) center / contain no-repeat;
	width: 9.85px;
	height: 5.77px;
}

.chevron.is-next:before {
	transform: rotate(-90deg);
}

.chevron.is-prev:before {
	transform: rotate(90deg);
}

@media (max-width: 1279px) {
	.booking-summary {
		gap: clamp(32px, 7.674vw, 64px);
	}

	.booking-name {
		font-size: 30px;
	}

	.booking-dates {
		gap: 20px;
	}

	.booking-bar .booking-field {
		width: 150px;
	}

	.around-right {
		min-height: 0;
		padding-top: 0;
	}
}

@media (min-width: 768px) and (max-width: 1279px) {
	.villa-gallery {
		padding-bottom: 120px;
	}

	.villa-gallery-head {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		padding: 100px var(--spacing-page) 48px;
	}

	.villa-gallery-head .sec-head {
		width: auto;
	}

	.villa-gallery-text {
		max-width: 286px;
	}

	.gallery-img {
		aspect-ratio: 400 / 300;
		flex-basis: 400px;
	}

	.villa-around {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 48px;
		padding: 100px var(--spacing-page) 120px;
		display: grid;
	}

	.around-left {
		display: contents;
	}

	.around-head {
		grid-area: 1 / 1 / 2 / 3;
	}

	.around-img {
		aspect-ratio: 369 / 512;
		grid-area: 2 / 1;
	}

	.around-right {
		grid-area: 2 / 2;
		width: auto;
	}
}

@media (max-width: 767px) {
	.villa-gallery {
		padding-bottom: 96px;
	}

	.villa-gallery-head {
		align-items: flex-start;
		padding: 96px var(--spacing-page) 40px;
	}

	.villa-gallery-head h2 {
		max-width: 254px;
	}

	.villa-gallery-text {
		max-width: none;
	}

	.gallery-track {
		gap: 12px;
	}

	.gallery-img {
		aspect-ratio: 290 / 210;
		flex-basis: 290px;
	}

	.villa-around {
		flex-direction: column;
		gap: 48px;
		padding: 56px var(--spacing-page) 96px;
	}

	.around-left,
	.around-right {
		gap: 40px;
		width: 100%;
	}

	.around-right {
		flex: none;
	}

	.around-img {
		aspect-ratio: 350 / 420;
	}

	.around-tabs,
	.around-tab-item {
		gap: 8px;
	}

	.booking-bar {
		padding: 14px var(--spacing-page);
	}

	.booking-summary {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.booking-name {
		font-size: 22px;
	}

	.booking-from,
	.booking-dates {
		display: none;
	}

	.booking-amount {
		font-size: 12px;
	}

	.lightbox-stage {
		padding: 0 0 72px;
	}

	.lightbox-arrow {
		margin-top: 0;
		top: auto;
		bottom: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.swap-item,
	.swap-item.is-active,
	.swap-fade,
	.booking-bar,
	.booking-bar.is-visible,
	.lightbox,
	.lightbox.is-open {
		transition-duration: .01ms;
		transition-delay: 0s;
	}

	.lightbox-img {
		animation-duration: .01ms;
	}
}
