/* Base font size */
html {
	font-size: 16px;
	/* 1 rem = 16 px */
}

/* =========================
   CSS VARIABLES & GLOBAL SETUP
========================= */
:root {
	/* Fonts – load these in your HTML for best performance */
	--font-primary: 'Poppins', sans-serif;
	--font-secondary: 'Nunito', sans-serif;
	--font-tertiary: 'Sulphur Point', sans-serif;
	--font-logo: 'Fugaz One', sans-serif;

	/* Colors */
	--color-white: #FFFFFF;
	--color-black: #000000;
	--color-primary: #003477;
	--color-primary-alt: #05668D;
	--color-primary-alt-hover: #0b536f;
	--color-primary-alt-medium: #4b92ae;
	--color-primary-alt-medium-light: #e8eef3;
	--color-primary-alt-light: #f5fbfe;
	--color-accent: #02C39A;
	--color-link: #028090;
	--color-link-hover: #02C39A;
	--color-light-gray: #FAFAFA;
	--color-medium-light-gray: #f3f3f3;
	--color-medium-gray: #aaaaaa;
	--color-dark-gray: #5B5B5B;
	--color-very-dark-gray: #303030;
	--color-sand: #E6D2AC;
	--border-color: #e0e0e0;
	--color-teal-bright: #03C3B1;
	--color-teal-bright-hover: #03A393;
	--color-cyan: #00CCCC;
	--color-cyan-light: #F0FFFF;
	--color-green: #0a0;
	--color-very-light-green: #f6fff6;
	--color-booking-blue: #003B96;
	--color-booking-blue-hover: #002B70;
	--color-vrbo-blue: #0E214B;
	--color-vrbo-blue-hover: #2d467b;
	--color-expedia-yellow: #FDDB33;
	--color-expedia-yellow-hover: #E0BF18;
	--color-airbnb-pink: #FE385C;
	--color-airbnb-pink-hover: #CD2E49;
	--color-expedia-text-dark: #191E3B;

	/* Transparent colors */
	--rgba-black-02: rgba(0, 0, 0, 0.2);
	--rgba-black-03: rgba(0, 0, 0, 0.3);
	--rgba-black-05: rgba(0, 0, 0, 0.5);
	--rgba-black-06: rgba(0, 0, 0, 0.6);
	--rgba-black-07: rgba(0, 0, 0, 0.7);
	--rgba-black-008: rgba(0, 0, 0, 0.08);
	--rgba-white-05: rgba(255, 255, 255, 0.5);
	--rgba-white-06: rgba(255, 255, 255, 0.6);
	--rgba-white-09: rgba(255, 255, 255, 0.9);

	/* Common font sizes - base: 16px */
	--font-size-small: 0.875rem;
	/* 14px */
	--font-size-95percent: .95rem;
	--font-size-base: 1rem;
	/* 16px */
	--font-size-large: 1.5rem;
	/* 24px */
	--font-size-double: 2rem;
	/* 24px */
	--font-size-xlarge: 2.25rem;
	/* 36px */
	--font-size-logo-footer: 3rem;

}

/* Global Box Sizing */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* =========================
   FONT FACE
========================= */
@font-face {
	font-family: 'Briston';
	src: url('fonts/briston.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Centra No2';
	src: url('https://a.travel-assets.com/egds/fonts/CentraNo2/CentraNo2-Book.woff2') format('woff2'),
		url('https://a.travel-assets.com/egds/fonts/CentraNo2/CentraNo2-Book.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	unicode-range: U+000-0FF;
}

/* =========================
   RESET & GLOBAL DEFAULTS
========================= */
html,
body {
	margin: 0;
	padding: 0;
	font-family: var(--font-primary);
	background-color: var(--color-white);
	overflow-x: hidden;
	/* prevent sideways scrolling */
}

/* --- Prevent horizontal scrolling within key containers --- */
.main,
.content,
.property-grid-wrapper,
.property-grid,
.carousel {
	overflow-x: hidden;
}

/* LINKS */
a:link,
a:visited {
	color: var(--color-link);
}

@media (min-width: 64.01rem) {

	a:hover,
	a:active {
		color: var(--color-link-hover);
	}
}

h1 {
	color: var(--color-primary);
	margin: 0 0 1rem 0;
}

/* =========================
   HEADER
========================= */
.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 3.75rem;
	/* 60px */
	background-color: var(--color-light-gray);
	background-image: url('/images/header/ocean-header-compressed.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 1.25rem;
	/* 20px */
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.header::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.2);
	z-index: 1;
}

.header-title {
	margin: 0;
	font-family: var(--font-logo);
	font-size: var(--font-size-xlarge);
	color: var(--color-sand);
	font-weight: bold;
	text-shadow: 2px 2px var(--color-primary);
	position: relative;
	top: -0.25rem;
}

.header-title-container {
	z-index: 1;
}

.header-title-container a {
	text-decoration: none;
	cursor: pointer;
	color: inherit;
}

/* Position the header-left container similarly to header-right */
.header-left {
	position: absolute;
	left: 1.25rem;
	/* 20px */
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	gap: 3.75rem;
	/* 60px */
	z-index: 2;
}

/* menu burger container */
.menu-burger-container {
	position: relative;
	display: flex;
	align-items: center;
	cursor: pointer;
	border: 2px solid var(--color-sand);
	/* 2px */
	border-radius: 0.3125rem;
	/* 5px */
	padding: .5em 0.5rem;
	/* 4px 8px */
	z-index: 2;
	transition: background-color 0.3s ease;
	background-color: rgba(0, 0, 0, 0.3);
}

@media (min-width: 64.01rem) {
	.menu-burger-container:hover {
		background-color: rgba(0, 0, 0, 0.6);
	}
}

/* Show the .menu-burger-icon only on mobile sizes;
   hide on larger screens so the burger icon appears strictly for mobile. */
@media (min-width: 64.01rem) {

	/* 1001px */
	.menu-burger-container {
		display: none;
	}

	/* Optionally, you can keep this rule for the icon too */
	.menu-burger-container .menu-burger-icon {
		display: none;
	}
}

@media (max-width: 64rem) {

	/* 1024px */
	.menu-burger-container .menu-burger-icon {
		display: inline-flex;
	}

	/* Darker hover background, matching .language-container:hover */
	.menu-burger-container .menu-burger-icon:hover {
		background-color: rgba(0, 0, 0, 0.6);
	}
}


/* Right-aligned container for temperature and language */

.header-right {
	position: absolute;
	right: 1.25rem;
	/* 20px */
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	gap: 3.75rem;
	/* 60px */
	z-index: 2;
}

/* --- Ensure language selector is always far right and temperature sits between logo and language --- */
.header-right {
	justify-content: flex-end;
	/* push children to the right edge */
}

/* Temperature appears first but grows leftward, language stays pinned right */
.header-right .temperature-container {
	order: 1;
	margin-right: auto;
	/* take up remaining space between logo and language */
}

.header-right .language-container {
	order: 2;
	/* always last (far right) */
}

/* Temperature container */
.temperature-container {
	display: flex;
	align-items: center;
	font-size: var(--font-size-base);
	/* 16px */
	color: var(--color-sand);
	white-space: nowrap;
	/* keep temp on a single line */
}

.temperature-container button {
	margin-left: 0.625rem;
	/* 10px */
	padding: 0.25em 0.5rem;
	/* 4px 8px */
	position: relative;
	display: flex;
	font-size: 0.75rem;
	/* 12px */
	align-items: center;
	cursor: pointer;
	border: 0.125em solid var(--color-sand);
	/* 2px */
	border-radius: 0.3125rem;
	/* 5px */
	z-index: 2;
	color: var(--color-sand);
	background-color: rgba(0, 0, 0, 0.2);
	transition: background-color 0.3s ease;
}

@media (min-width: 64.01rem) {
	.temperature-container button:hover {
		background-color: rgba(0, 0, 0, 0.6);
	}

	.temperature-container {
		position: absolute;
		top: 50%;
		right: 18vw;
		/* ≈30 % of viewport from the right edge */
		transform: translateY(-50%);
		/* keep vertical centering */
		margin: 0;
	}
}

/* Language container */
.language-container {
	position: relative;
	display: flex;
	align-items: center;
	cursor: pointer;
	border: 0.125em solid var(--color-sand);
	/* 2px */
	border-radius: 0.3125rem;
	/* 5px */
	padding: 0.25em 0.5rem;
	/* 4px 8px */
	z-index: 2;
	transition: background-color 0.3s ease;
	background-color: rgba(0, 0, 0, 0.2);
}

@media (min-width: 64.01rem) {
	.language-container:hover {
		background-color: rgba(0, 0, 0, 0.6);
	}
}

.language-text {
	margin-left: 0.5rem;
	/* 8px */
	font-size: 1.125rem;
	/* 18px */
	color: var(--color-sand);
}

.language-option.active-language {
	text-decoration: underline;
}

/* Icon styles */
/*.menu-burger-icon {
  display: inline-block;
  width: 1.5rem;           
  height: 1.5rem;          
  background-image: url("/icons/menu-tan.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}*/

.menu-burger-icon {
	/*    display: inline-flex;*/
	/*    justify-content: center;*/
	/*    align-items: center;*/
	/*    box-sizing: border-box; */
	/* include border and padding within set width/height */
	width: 1.5rem;
	/* 24px */
	height: 1.5rem;
	/* 24px */
	background-image: url("/icons/menu-tan.svg");
	/*    background-size: 60%;    */
	/* make the icon smaller inside the box */
	background-repeat: no-repeat;
	background-position: center;
	z-index: 1;
}

/*.sun-icon {
  display: inline-block;
  width: 1.3rem;     
  height: 1.3rem;     
  background-image: url("/icons/sun-tan.svg");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  color: red;
}*/

.globe-icon {
	display: inline-block;
	width: 1.5rem;
	/* 24px */
	height: 1.5rem;
	/* 24px */
	background-image: url("/icons/lang-globe-tan.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* Language menu (dropdown) */
.language-menu {
	position: absolute;
	top: 130%;
	/* as-is */
	left: 50%;
	transform: translateX(-50%);
	display: none;
	background-color: var(--color-primary);
	border: 0.125em solid var(--color-sand);
	/* 2px */
	border-radius: 0.3125rem;
	/* 5px */
	z-index: 1000;
}

@media (max-width: 34.38em) {

	/* 550px */
	.language-container .language-text {
		display: none;
	}

	.language-menu {
		left: 20%;
	}

	.language-container {
		padding: 0.5rem;
	}
}

.language-menu a {
	display: block;
	padding: 0.625rem;
	/* 10px */
	text-decoration: none;
	color: var(--color-sand);
	font-size: 1.125rem;
	/* 18px */
}

@media (min-width: 64.01rem) {
	.language-menu a:hover {
		background-color: var(--color-link);
	}
}

@media (max-width: 64rem) {

	/* 1100px */
	.temperature-container {
		display: none;
	}
}

.language-modal {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(6px);
	z-index: 3000;
	padding: 1.5rem;
}

.language-modal.is-open {
	display: flex;
}

.language-modal__dialog {
	background: linear-gradient(135deg, rgba(19, 18, 16, 0.4), rgba(19, 18, 16, 0.8)), url('/images/header/ocean-header-compressed.jpg') center/cover no-repeat;
	border: 1px solid var(--color-sand);
	border-radius: 0.75rem;
	padding: 1.25rem 1.5rem;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
	max-width: 24rem;
	width: min(100%, 24rem);
	text-align: center;
}

.language-modal__dialog p {
	margin: 0 0 0.75rem;
	font-size: 1.125rem;
	color: var(--color-sand);
	font-weight: 600;
}

.language-modal__brand {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.language-modal__logo {
	font-family: var(--font-logo);
	font-size: 1.8rem;
	color: var(--color-sand);
	text-shadow: 1px 1px var(--color-primary);
}

.language-modal__globe {
	width: 2rem;
	height: 2rem;
	display: inline-block;
	background: url("/icons/lang-globe-tan.svg") center/contain no-repeat;
	filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.35));
}

.language-modal__globe--inline {
	width: 1.4rem;
	height: 1.4rem;
	margin-right: 0.35rem;
	vertical-align: middle;
	position: relative;
	top: -0.15rem;
	transform: translateY(1px);
	filter: none;
}

.language-modal__dialog p {
	margin-bottom: 1.5rem;
}

.language-modal__actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
}

.language-modal .language-choice {
	border: 1px solid var(--color-sand);
	background: rgba(0, 0, 0, 0.2);
	color: var(--color-sand);
	font-size: 1rem;
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.15s ease;
}

@media (min-width: 64.01rem) {
	.language-modal .language-choice:hover {
		background: rgba(0, 0, 0, 0.35);
		transform: translateY(-1px);
	}
}

html.language-modal-open,
body.language-modal-open {
	overflow: hidden;
	height: 100%;
	touch-action: none;
}

/* =========================
   SIDEBAR
========================= */

#sidebar-container {
	height: 0px;
}

/* --- Sidebar shared base (mobile + desktop) ------------------------------ */
.menu {
	position: fixed;
	top: 3.75rem;
	/* 60px – below header */
	bottom: 0;
	width: 12.5rem;
	/* 200px */
	background: var(--color-primary);
	padding-top: 1.25rem;
	/* 20px */
	overflow-y: auto;
	z-index: 1500;
}

.menu a {
	display: block;
	color: var(--color-white);
	padding: 0.625rem;
	/* 10px */
	text-decoration: none;
	font-size: 120%;
}

.menu-item a {
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
}


/* === Rotating chevron for sidebar === */
.menu-item>a {
	position: relative;
}

.chevron-arrow,
.menu-arrow,
.toggle-icon {
	display: inline-block;
	position: relative;
	width: 0.75rem;
	height: 0.75rem;
	margin-left: 0.5rem;
}

.chevron-arrow::before,
.menu-arrow::before,
.toggle-icon::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translate(-50%, -55%) rotate(45deg);
	/* raise closed arrow ~1px */
	transition: transform 0.25s ease;
}

/* Rotate arrow when the header is open */
.accordion-header.open .chevron-arrow::before,
.accordion-header.active .chevron-arrow::before {
	transform: translate(-50%, -45%) rotate(-135deg);
	/* open (▼) */
}

.menu-item.open .chevron-arrow::before,
.chevron-arrow.open::before {
	transform: translate(-50%, -45%) rotate(-135deg);
	/* lower open arrow ~1px */
}

.submenu {
	display: none;
	background: var(--color-primary-alt);
	padding-left: 1.25rem;
	/* 20px */
}

.submenu a {
	display: block;
	color: var(--color-white);
	padding: 0.5rem;
	/* 8px */
	text-decoration: none;
}

/* ------------------------------------------------------------------------ */

@media (min-width: 64.01rem) {

	/* 1001px */
	.menu {
		left: 0;
	}

	.menu a:hover {
		background: var(--color-link);
	}

	.submenu a:hover {
		background: var(--color-link-hover);
	}
}

@media (max-width: 64rem) {

	/* 1001px */
	.menu {
		left: -12.5rem;
		/* -200px */
		transition: left 0.3s ease-in-out;
	}

	.menu a:hover {
		background: var(--color-link);
	}

	.submenu a:hover {
		background: var(--color-link-hover);
	}

	.menu.show {
		left: 0;
	}
}

.sidebar-title {
	text-align: center;
	color: var(--color-sand);
	font-size: 1.5rem;
	margin: 0 0 1rem 0;
	font-weight: 600;
}

.sidebar-title::after {
	content: "";
	display: block;
	width: 60%;
	height: .125rem;
	margin: 1rem auto 0;
	background-color: var(--color-sand);
	opacity: 0.4;
}

/* Dark overlay that appears behind the mobile sidebar */
.sidebar-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.6);
	z-index: 1499;
	/* just under the sidebar’s 1500 */
	/* 1 below the sidebar itself */
	display: none;
	/* shown only while sidebar is open on mobile */
}

/* Never show the overlay on tablet/desktop widths */
@media (min-width: 768px) {
	.sidebar-overlay {
		display: none !important;
	}
}

/* =========================
   CONTENT
========================= */
@media (min-width: 64.01rem) {

	/* 1001px */
	.content,
	.content-services {
		margin-left: 12.5rem;
		/* 200px */
		margin-top: 3.75rem;
		/* 60px */
		padding: 1.0rem;
		/* 20px */
		min-height: calc(100vh - 3.75em);
		/* 60px */
		transition: none;
	}

	.content-item {
		background-color: var(--color-light-gray);
		border: 0.125em solid var(--border-color);
		/* 2px */
		border-radius: 0.5rem;
		/* 8px */
		padding: 0.9375rem;
		/* 15px */
		margin-bottom: 0.9375rem;
		/* 15px */
		text-align: left;
	}

	.content-item h2 {
		font-size: 1.25rem;
		/* 20px */
		margin: 0 0 0.5em 0;
		/* 8px */
		color: var(--color-primary);
	}

	.content-item p {
		margin: 1em 0 2em;
	}
}

@media (max-width: 64rem) {

	/* 1001px */
	.content,
	.content-services {
		margin: 3.75rem 0 0 0;
		/* 60px top margin */
		padding: 1rem 1rem;
		/* 20px 10px */
		min-height: calc(100vh - 3.75em);
		transition: margin-left 0.3s ease-in-out;
	}

	.content-item {
		background-color: var(--color-light-gray);
		border: 0.125em solid var(--border-color);
		/* 2px */
		border-radius: 0.5rem;
		/* 8px */
		padding: 0.9375rem;
		/* 15px */
		margin-bottom: 0.9375rem;
		/* 15px */
		text-align: left;
	}

	.content-item h2 {
		font-size: 1.25rem;
		/* 20px */
		margin: 0 0 0.5em 0;
		/* 8px */
		color: var(--color-primary);
	}
}

/* =========================
   FILTERS & DROPDOWN
========================= */
.filters-container {
	padding: 0.25rem;
	background: var(--color-medium-light-gray);
	/* border: 0.125em solid var(--border-color); */
	border-radius: 0.625rem;
	margin-bottom: 1.0rem;
	display: flex;
	flex-direction: column;
	gap: 0.9375rem;
	align-items: flex-start;

}

.filter-section {
	display: flex;
	flex-wrap: wrap;
	/* allow items to drop to a new line */
	gap: 0.5rem;
	/* keep the existing gap */
	justify-content: flex-start;
	/* left‑aligned on desktop */
	align-items: center;
}

.filter-section label {
	color: var(--color-primary);
}

details>summary {
	cursor: pointer;
	transition: color 0.3s ease, background-color 0.3s ease;
}

@media (min-width: 64.01rem) {
	details>summary:hover {
		background-color: rgba(0, 0, 0, 0.1);
	}
}

details a {
	cursor: pointer;
	transition: color 0.3s ease, background-color 0.3s ease;
}

@media (min-width: 64.01rem) {
	details a:hover {
		color: var(--color-white);
		background-color: var(--color-primary);
	}
}

.dropdown {
	position: relative;
	display: flex;
	flex-direction: column;
}

.dropdown-button {
	display: inline-block;
	position: relative;
	border: 0.125em solid var(--border-color);
	/* 2px */
	border-radius: 0.5rem;
	/* 6px */
	background: var(--color-white);
	padding: 0.5em 0.75rem;
	/* 8px 12px */
	margin: 0;
	min-width: max-content;
}

.dropdown-button label {
	display: block;
	font-size: var(--font-size-small);
	/* 14px */
	/*  font-size: 0.875rem;  */
	color: var(--color-primary);
	margin-bottom: 0.25rem;
	/* 4px */
}

.dropdown-button select {
	display: block;
	width: auto;
	min-width: max-content;
	max-width: 12rem;
	/* 150px */
	border: none;
	outline: none;
	background: transparent;
	font-size: var(--font-size-base);
	/* 16px */
	color: var(--color-very-dark-gray);
	padding: 0.25em 0;
	/* 4px 0 */
	cursor: pointer;
	appearance: none;
	background: var(--color-white);
	border-radius: 0.25rem;
	/* 4px */
}

/* --- Filter dropdown: placeholder vs selected states --- */
/* Show placeholder (disabled selected option) in gray */
.dropdown-button select:has(option:checked[disabled]) {
	color: var(--color-medium-gray);
}

/* When a real option is selected: make button outline blue and background light blue */
.dropdown-button:has(select option:checked:not([disabled])) {
	border-color: var(--color-primary-alt-medium);
	/* blue outline */
	background: var(--color-primary-alt-light);
	/* light blue background */
}

/* And the selected text should be black */
.dropdown-button:has(select option:checked:not([disabled])) select {
	color: var(--color-dark-gray);
	background: transparent;
	/* let the light blue parent show through */
}

@media (min-width: 64.01rem) {

	.dropdown-button:hover,
	.dropdown-button:hover select {
		border-color: var(--color-primary-alt-medium);
		color: var(--color-primary-alt-medium);
		transition: border-color 0.2s, color 0.2s;
	}
}

select,
.filter-buttons button {
	padding: 0.75em 1.125rem;
	/* 12px 18px */
	font-size: var(--font-size-base);
	/* font-weight: 700; */
	border: 0.125em solid var(--color-primary);
	/* 2px */
	border-radius: 0.5rem;
	/* 8px */
	background: var(--color-white);
	color: var(--color-primary);
	cursor: pointer;
	transition: background 0.3s ease, color 0.3s ease;
}

@media (min-width: 64.01rem) {

	/* Hover styles for dropdown <select> */
	select:hover {
		color: var(--color-accent);
	}

	/* Hover styles for Apply / Clear buttons */
	.filter-buttons button:hover {
		background: var(--color-primary-alt-hover);
		border-color: var(--color-primary-alt-hover);
		color: var(--color-white);
	}
}

.filters-divider {
	width: 100%;
	height: 0.125rem;
	/* 2px */
	background: var(--border-color);
	margin: 0.625em 0;
	/* 10px */
}

.filter-buttons button.selected {
	background: var(--color-primary);
	color: var(--color-white);
}

.filter-buttons {
	display: flex;
	flex-wrap: wrap;
	/* wrap like booking buttons */
	gap: 0.5rem;
	margin-left: 0;
	/* remove desktop offset */
	justify-content: flex-start;
}

.filter-buttons button {
	font-weight: 700;
	background-color: var(--color-primary);
	color: var(--color-white)
}

/* --- Category buttons: mimic filter buttons --- */
.category-button {
	padding: 0.5em 0.5rem;
	/* 12px 18px */
	font-size: var(--font-size-95percent);
	border: 0.125em solid var(--color-primary);
	border-radius: 0.5rem;
	/* 8px */
	background: var(--color-light-gray);
	/* grey default */
	color: var(--color-primary);
	/* blue text default */
	cursor: pointer;
	font-weight: 700;
	text-decoration: none;
	/* remove underline for anchor usage */
	display: inline-flex;
	/* center text horizontally/vertically */
	align-items: center;
	justify-content: center;
	text-align: center;
	transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

a.category-button:link,
a.category-button:visited {
	color: var(--color-primary);
	text-decoration: none;
}

a.category-button:hover,
a.category-button:active,
a.category-button:focus {
	text-decoration: none;
}

/* Ensure active/selected anchor state is white text (overrides link/visited rules) */
a.category-button.active {
	color: var(--color-white);
}

/* Selected/active state (parity with .filter-buttons button.selected) */

.category-button.selected,
.category-button.active,
.category-button[aria-current="true"] {
	background: var(--color-primary);
	color: var(--color-white);
	border-color: var(--color-primary);
}

/* Category button icon: sizing + color inheritance */
.category-button .attribute-icon {
	width: 1.5rem;
	height: 1.5rem;
	display: inline-block;
	flex: 0 0 auto;
	margin-right: 0.5rem;
	vertical-align: middle;
	pointer-events: none;
	/* keep entire button clickable */
}

/* Desktop hover behavior (parity with .filter-buttons button:hover) */
@media (min-width: 64.01rem) {
	.category-button:hover {
		background: var(--color-primary-alt-hover);
		border-color: var(--color-primary-alt-hover);
		color: var(--color-white);
	}
}


/* Mobile sizing (parity with .filter-buttons button in mobile rules) */
@media (max-width: 64rem) {
	.category-button {
		width: auto;
		max-width: none;
		flex: 0 0 auto;
		/* same wrap behavior as booking/filter buttons */
	}
}

/* Mobile layout for category buttons (apply on all mobile widths; enforce equal widths on very small screens) */
@media (max-width: 64rem) {
	.mobile-top-nav {
		width: 100%;
		display: flex;
		justify-content: center;
		text-align: center;
		/* padding: 0.35rem 0.4rem; */
		gap: 0.3rem;
	}

	/* Gap handles spacing; zero margins keep widths compact on small screens */
	.mobile-top-nav>.category-button {
		margin: 0;
	}

	.mobile-top-nav .category-button {
		/* default mobile: let buttons size naturally but share space */
		flex: 1 1 auto;
		min-width: 0;
		padding: 0.6em 0.4rem;
		border-radius: 0.75rem;
		border-color: rgba(0, 52, 119, 0.18);
		background: linear-gradient(180deg, #ffffff, #eef3ff);
		box-shadow: 0 10px 20px -12px rgba(5, 102, 141, 0.45);
		transition: transform 0.15s ease, box-shadow 0.25s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
	}

	.mobile-top-nav .category-button:active {
		transform: translateY(1px);
		box-shadow: 0 6px 12px -10px rgba(0, 52, 119, 0.45);
	}

	.mobile-top-nav .category-button.active {
		background: linear-gradient(135deg, var(--color-primary), var(--color-primary-alt));
		color: var(--color-white);
		border-color: var(--color-primary);
		box-shadow: 0 14px 28px -16px rgba(0, 52, 119, 0.65);
	}
}

/* Narrow phones: stack buttons full‑width with equal side margins and vertical spacing */
@media (max-width: 380px) {
	.mobile-top-nav {
		justify-content: center;
		/* keep row centered while stacking */
	}

	.mobile-top-nav .category-button {
		flex: 1 1 100%;
		width: calc(100% - 1rem);
		/* account for 0.5rem side margins on both sides */
		margin: 0.25rem;
		/* vertical spacing + equal left/right margins */
	}
}

@media (max-width: 64rem) {

	/* 1001px */
	.filters-container {
		/* width: 96%; */
		max-width: 35rem;
		margin: 1rem auto 1rem auto;
		padding: 0.5rem;
		box-sizing: border-box;
		flex-direction: column;
	}

	.filter-section {
		flex-direction: row;
		/* horizontal like desktop */
		flex-wrap: wrap;
		justify-content: center;
		/* center on mobile */
		align-items: center;
		width: 100%;
		gap: 0.625rem;
		/* keep mobile gap */
		margin-top: 0.625rem;
		/* 10px */
	}

	.dropdown-button,
	.dropdown-button select {
		width: auto;
		max-width: none;
		box-sizing: border-box;
	}

	.filter-buttons {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		/* center the buttons on mobile */
		gap: 0.625rem;
		margin-left: 0;
		/* cancel desktop offset on mobile */
	}

	select {
		width: 100%;
		max-width: 100%;
	}

	.filter-buttons button {
		width: auto;
		max-width: none;
		flex: 0 0 auto;
		/* same wrap behaviour as booking buttons */
	}

	.filters-container details {
		width: 100%;
		border: 0.125em solid var(--border-color);
		/* 2px */
		border-radius: 0.625rem;
		/* 10px */
		margin-bottom: 0.625rem;
		/* 10px */
		padding: 0.625rem;
		/* 10px */
		box-sizing: border-box;
	}

	.filters-container summary {
		font-size: 1.125rem;
		/* 18px */
		font-weight: bold;
		cursor: pointer;
		margin: 0;
		padding: 0;
	}

	.filters-container summary::-webkit-details-marker {
		display: none;
	}
}

#popup-message {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 300px;
	height: 200px;
	background-color: rgba(0, 0, 0, 0.7);
	/*  border: 0.125em solid rgba(0, 0, 0, 0.75);*/
	color: white;
	font-size: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border-radius: 1rem;
	/*  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);*/
	z-index: 1000;
	opacity: 0;
	transition: opacity 0.3s ease-out;
	pointer-events: none;
	/* Allow clicks to pass through */
}

/* Custom accordion styles for filters and collections */
@media (min-width: 64.01rem) {

	/* 1001px */
	.mobile-filter-section .accordion-header {
		font-size: 1.25rem;
		background-color: var(--color-light-gray);
		color: var(--color-primary);
		border-bottom: 2px solid var(--border-color);
		/* 2px thick, solid, black border */
		border-radius: 0px;
		cursor: default;
		padding: 0.3rem;
		margin-bottom: 0.2rem;
	}

	.mobile-filter-section .accordion-content {
		padding: 10px;
		display: none;
		border-radius: 5px;
	}

	.mobile-filter-section .toggle-icon {
		display: none
	}
}

@media (max-width: 64rem) {

	/* 1001px */
	.mobile-filter-section {
		width: 100%;
	}

	.mobile-filter-section .accordion-header {
		font-size: 1.25rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.mobile-filter-section .accordion-content {
		padding: 10px;
		display: none;
		border-radius: 5px;
	}

	.mobile-filter-section .chevron-arrow {
		margin-left: auto;
		margin-right: 0.5rem;
		/* add breathing room on the right */
		width: 0.75rem;
		height: 0.75rem;
	}
}

/* =========================
   GRID / CAROUSEL
========================= */
.property-grid-wrapper {
	/*  width: 95%;*/
	margin: 0 auto;
}

.property-grid {
	display: grid;
	/* Each tile can shrink down to 18.75 rem (~300 px),
       then grows to fill the remaining space evenly.   */
	grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
	gap: 1rem;
	/* visual breathing room between tiles */
	justify-items: stretch;
	/* make tiles stretch to full column */
	justify-content: start;
	/* keep grid left‑aligned */
}


.property {
	/* border: 0.125em solid var(--border-color); */
	/* 2px */
	border-radius: 0.5rem;
	/* 8px */
	padding: 0.9375rem;
	/* 15px */
	padding-bottom: 2.1875rem;
	/* 35px */
	background-color: var(--color-medium-light-gray);
	position: relative;
	/* margin: 1.2em 0 0; */
	width: 100%;
	max-width: 35rem;
	display: flex;
	flex-direction: column;
}

/* 
@media (max-width: 767px) {
	.property {
		width: 100%;
		max-width: 28.125rem;
		margin-left: auto;
		margin-right: auto;
	}
} */

.property-info-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}

.property-info-row p {
	margin: 0;
}

.property.highlighted {
	border: 0.25em solid var(--color-cyan);
	background-color: var(--color-cyan-light);
}

.share-button {
	all: unset;
	height: 2.25rem;
	width: 2.25rem;
	cursor: pointer;
	border-radius: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s;
}

/* Context‑specific placement for the shared share button */
.property .share-button {
	align-self: center;
	margin-left: auto;
}


.generic-item-accordion .share-button {
	position: absolute;
	right: 2.75rem;
	top: 50%;
	transform: translateY(-50%);
}

/* Share button placement next to restaurant titles in curated lists */
.curated-list-item .share-button,
.remodel-item .share-button {
	/* keep the button inline and give it spacing */
	display: inline-flex;
	/* inline so it sits on the same line as the h2 text */
	margin-left: 1rem;
	/* 1 rem gap after the restaurant name */
	vertical-align: middle;
	/* baseline‑friendly alignment */
	position: static;
	/* ensure no absolute positioning overrides apply */
}

.share-button:hover,
.share-button:focus {
	background-color: rgba(0, 0, 0, 0.08);
	/* light gray behind the icon */
}

.share-button::before {
	content: '';
	display: block;
	width: 67%;
	height: 67%;
	background: url('/icons/share-box-black.png') center/contain no-repeat;
	opacity: 0.5;
	transition: opacity .2s;
}

.share-button:hover::before {
	opacity: 1;
}

.share-button.copied::before {
	background: url('/icons/check-black.png') center/contain no-repeat;
	opacity: 0.5;
}

/* Copied state for share button: disables pointer and removes gray square */
.share-button.copied {
	cursor: default;
	background-color: transparent;
	pointer-events: none;
}

/* prevent gray hover square while in copied state */
.share-button.copied:hover,
.share-button.copied:focus {
	background-color: transparent;
}


/* ---------------------------------------------------------
   Mobile-only: keep share button flush right on restaurant list pages
   --------------------------------------------------------- */
@media (max-width: 64rem) {

	/* ≤ ~1000 px */
	/* Make sure the heading occupies full width and behaves as a flex row */
	.curated-list-item h2,
	.curated-text h2,
	.remodel-item h2 {
		display: flex;
		align-items: center;
		position: static;
		/* override any earlier relative/absolute positioning */
	}

	/* Push the share button to the far right while staying inline */
	.curated-list-item .share-button,
	.curated-text h2 .share-button,
	.remodel-item .share-button {
		position: static !important;
		/* cancel absolute rules from earlier patches */
		margin-left: auto;
		/* flex‑push to edge */
		transform: none !important;
		/* remove vertical centering transform */
	}
}

.collection-header {
	margin: 0;
	min-height: 1.2rem;
	position: relative;
	font-size: 1.1rem;
	letter-spacing: 0.0625rem;
	/* 1px */
	color: var(--color-teal-bright);
	/* Prevent wrap & show ellipsis like property titles */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
	/* allow shrink inside flex/grid */
}

.collection-header::after {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	/* background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.6), transparent); */
	/* transform: skewX(-25deg); */
	/* animation: shine 10s infinite; */
	pointer-events: none;
}

.collection-header a {
	cursor: pointer;
	color: inherit;
	text-decoration: none;
}

@media (min-width: 64.01rem) {
	.collection-header a:hover {
		/* color: #A2862A; */
		color: var(--color-teal-bright-hover);
	}
}

@media (max-width: 64rem) {
	.collection-header {
		font-size: 1.1rem;
	}
}

@keyframes shine {
	0% {
		left: -100%;
	}

	50% {
		left: 100%;
	}

	100% {
		left: 100%;
	}
}

.collection-description {
	/*  border: 0.125em solid var(--border-color); */
	border-radius: 0.5rem;
	/*  padding: 0.9375rem;      */
	/*  background-color: var(--color-light-gray);*/
	position: relative;
	margin: 0rem auto 1rem;
	/* This centers the element horizontally */
	width: 100%;
}

@media (max-width: 64rem) {
	.collection-description {
		width: 95%;
	}
}

.collection-description p {
	margin: 0.25rem 0rem 0rem;
}

/* Hide collection headers inside .property-grid by default */
.property-grid .collection-header {
	display: none;
}

/* Show them only when the body has the 'filter-all' class */
body.filter-all .property-grid .collection-header {
	display: block;
}

/* Ensure property cards don’t clip pill tooltips */
.property,
.property-content {
	overflow: visible;
}

/* ==========================================================
       PROPERTY FEATURE PILLS
       ========================================================== */
.property-attributes {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	/* allow pills to wrap like booking buttons */
	align-items: center;
	gap: 0.5rem;
	overflow: visible;
	padding: 0.25rem 0;
	/* no arrow gutters */
	justify-content: center;
	/* center every line */
	width: 100%;
}



.property-attributes::-webkit-scrollbar {
	display: none;
	/* Chrome, Safari, Edge */
}

.pill {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem 0.75rem;
	border-radius: 9999px;
	background-color: var(--color-white);
	font-size: 0.857rem;
	/* ≈12 px @14 px base */
	cursor: default;
	/* no longer clickable */
	position: relative;
	white-space: nowrap;
	flex: 0 0 auto;
	scroll-snap-align: start;
	border: 0.125em solid var(--border-color);
}

/* Scrap scroll arrows completely */
.pill-arrow {
	display: none !important;
}

.pill img.attribute-icon {
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 0rem;
}

.pill .tooltip {
	display: none;
	position: absolute;
	bottom: 125%;
	left: 50%;
	transform: translateX(-50%);
	background-color: #333;
	color: #fff;
	padding: 0.25rem 0.5rem;
	font-size: 0.75rem;
	border-radius: 4px;
	white-space: nowrap;
	z-index: 1000;
	/* ensure tooltip floats over location text */
}

.pill:hover .tooltip,
.pill.show-info .tooltip {
	display: block;
}

/* Make sure the pill strip is the positioning context */
.property-attributes {
	position: relative;
	/* already present—leave it */
}

.property-attributes::before,
.property-attributes::after {
	background: transparent;
	/* was #fff */
}

/* Base arrow styling */
.pill-arrow {
	display: none;
	position: sticky;
	width: 1.5rem;
	height: 1.5rem;
	align-items: center;
	justify-content: center;
	font-size: 1;
	color: black;
	cursor: pointer;
	user-select: none;
	z-index: 10;
}

.pill-arrow.left {
	left: -2.25rem;
	/* transform: translate(calc(-100% - 0.5rem), -50%); */
	/* shift width‑wise out of strip, with extra gap */
}

.pill-arrow.right {
	right: -2.25rem;
	/* transform: translate(calc(100% + 0.5rem), -50%); */
	/* shift width‑wise out of strip, with extra gap */
}

.pill-list {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: .5rem 0 1rem;
}

.carousel {
	position: relative;
	width: 100%;
	max-width: 100%;
	flex: 1 1 100%;
	/* 400px */
	height: 15.625rem;
	/* 250px */
	margin-bottom: 0.625rem;
	/* 10px */
	overflow: hidden;
	border-radius: 0.25rem;
	/* no rounded corners */
}

.carousel-slide {
	width: 100%;
	height: 100%;
	display: none;
}

.carousel-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	/* no rounded corners */
}

/* Carousel arrows and dots default (desktop): hidden, fade in on hover */
.arrow,
.carousel-dots {
	opacity: 0;
	transition: opacity 0.3s ease;
}

/* Show controls on hover for ANY carousel (not just within .property) */
.carousel:hover .arrow,
.carousel:hover .carousel-dots {
	opacity: 1;
}

/* Make first slide visible by default so there’s no blank frame before JS */
.carousel .carousel-slide:first-child {
	display: block;
}

/* Always show carousel arrows and dots on mobile (width ≤ 1001px) */
@media (max-width: 64rem) {

	.property .arrow,
	.property .carousel-dots {
		opacity: 1 !important;
	}

	.property-grid {
		/* grid-template-columns: 1fr !important; */
		/* single column */
		width: 100% !important;
		justify-items: center;
	}

	.property-grid .property {
		/* width: 96% !important; */
		max-width: 35rem !important;
		box-sizing: border-box;
		/* include padding in width */
	}

	.property-grid .carousel {
		width: 100% !important;
		max-width: 100% !important;
	}

	.property-grid .carousel-slide img {
		width: 100% !important;
		height: auto !important;
		/* preserve aspect ratio */
		max-width: 100% !important;
	}
}

.property:hover .arrow,
.property:hover .carousel-dots {
	opacity: 1;
}

.carousel .arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.5rem;
	color: var(--color-white);
	background: rgba(0, 0, 0, 0.3);
	border-radius: 50%;
	width: 2.5rem;
	/* 40px */
	height: 2.5rem;
	/* 40px */
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 2;
}

.carousel .arrow.left {
	left: 0.625rem;
	/* 10px */
}

.carousel .arrow.right {
	right: 0.625rem;
	/* 10px */
}

.carousel-dots {
	position: absolute;
	bottom: 0.625rem;
	/* 10px */
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 0.5rem;
	/* 8px */
}

.carousel-dots .dot {
	width: 0.625rem;
	/* 10px */
	height: 0.625rem;
	/* 10px */
	background: rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	cursor: pointer;
}

.carousel-dots .dot.active {
	background: rgba(255, 255, 255, 0.9);
}

.property img {
	width: 100%;
	border-radius: 0;
	/* no rounded corners */
}

.property .links {
	display: flex;
	justify-content: center;
	gap: 1rem;
	align-items: flex-end;
	text-decoration: none;
	color: var(--color-black);
	font-weight: bold;
	margin-top: auto;
	padding-top: 0.5rem;
}

/* Let the card and its inner column shrink, so the <h2> can overflow */
.property,
.property .property-content {
	min-width: 0;
}

.property-grid h2 {
	font-size: 1.4rem;
	margin: 0;
	color: var(--color-black);
	display: block;
	/* flex item remains but may shrink */
	flex: 1 1 auto;
	/* allow grow & shrink */
	min-width: 0;
	/* key to enable shrinking in flexbox */
	white-space: nowrap;
	/* keep single line */
	overflow: hidden;
	/* hide overflow */
	text-overflow: ellipsis;
	/* show … */
	padding-bottom: 5px;
}

.property-grid p {
	margin-top: 0.5rem;
}

/* Mobile override – must come after the base rule so it wins */
@media (max-width: 64rem) {
	.property-grid h2 {
		font-size: 1.4rem;
	}
}

.property-grid .links {
	text-align: center;
}

.property-location {
	color: var(--color-dark-gray);
	margin-bottom: 0.5rem;
}

/* Booking buttons */
.booking-button {
	display: flex;
	/* Change from inline-block */
	align-items: center;
	/* Vertical centering */
	justify-content: center;
	/* Horizontal centering */
	padding: 0.625em 0.9375rem;
	border-radius: 0.5rem;
	text-decoration: none;
	font-weight: bold;
	transition: background-color 0.3s ease;
	font-size: var(--font-size-base);
	height: 1.25rem;
	box-sizing: content-box;
}

/* Booking buttons behave like centered text: wrap naturally one‑by‑one */
.property .links {
	display: flex;
	flex-wrap: wrap;
	/* allow wrapping */
	justify-content: center;
	/* center each line */
	gap: 0.5rem;
	/* same gap as desktop */
}

.property .links .booking-button {
	flex: 0 0 auto;
	/* keep each button’s natural width */
}

.best-deal-vertical {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* margin-right: 0.5rem; */
}

.best-deal-label {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	/* aligns items to the bottom */
	margin-bottom: 0.2rem;
	gap: 0.2em;
}

.best-deal-label span {
	color: var(--color-accent);
	font-size: 0.85rem;
	font-weight: 500;
	font-style: italic;
	letter-spacing: 0.03em;
	white-space: nowrap;
	margin: 0;
	/* margin-bottom: 50%; */
	/* raises the text 20% of its line-height above the icon */
}

/* Bold “best deal” label only when the direct‑booking button itself is hovered */
.best-deal-vertical:has(.direct-booking:hover) .best-deal-label span {
	font-weight: 700;
	/* bold */
}

.best-deal-arrow {
	display: inline-block;
	width: 1rem;
	height: 1rem;
	background: url('/icons/arrow-curved-4-aqua.png') no-repeat center center;
	background-size: contain;
	margin: 0;
	vertical-align: middle;
}

/* @media (max-width: 64rem) {
	.best-deal-label {
		gap: 0.2em;
	}

	.best-deal-arrow {
		width: 12px;
		height: 10px;
	}
} */

.direct-booking {
	background-color: var(--color-white);
	color: var(--color-black) !important;
	border: 0.125em solid var(--color-black);
	/* 2px */
}

@media (min-width: 64.01rem) {
	.direct-booking:hover {
		background-color: var(--color-white);
		/* keep white background */
		color: var(--color-accent) !important;
		/* accent text */
		border: 0.125em solid var(--color-accent);
		/* accent border */
	}
}

.airbnb {
	background-color: var(--color-airbnb-pink);
	color: var(--color-white) !important;
	font-family: var(--font-secondary);
	font-weight: 700;
	border: 0.125em solid var(--color-airbnb-pink);
	/* 2px */
}

@media (min-width: 64.01rem) {
	.airbnb:hover {
		background-color: var(--color-airbnb-pink-hover);
		border: 0.125em solid var(--color-airbnb-pink-hover);
		/* 2px */
	}
}

.vrbo {
	background-color: var(--color-vrbo-blue);
	color: var(--color-white) !important;
	font-family: var(--font-primary);
	border: 0.125em solid var(--color-vrbo-blue);
	/* 2px */
}

@media (min-width: 64.01rem) {
	.vrbo:hover {
		background-color: var(--color-vrbo-blue-hover);
		border: 0.125em solid var(--color-vrbo-blue-hover);
		/* 2px */
	}
}

/* Scale inline icons (e.g., Vrbo) so they sit at text height inside booking buttons */
.booking-button .booking-icon {
	height: 2rem;
	/* matches current font-size (≈16 px) */
	width: auto;
}

.booking-com {
	background-color: var(--color-booking-blue);
	color: var(--color-white) !important;
	font-family: var(--font-primary);
	border: 0.125em solid var(--color-booking-blue);
	/* 2px */
}

@media (min-width: 64.01rem) {
	.booking-com:hover {
		background-color: var(--color-booking-blue-hover);
		border: 0.125em solid var(--color-booking-blue-hover);
		/* 2px */
	}
}

.expedia {
	background-color: var(--color-expedia-yellow);
	color: var(--color-expedia-text-dark) !important;
	font-family: 'Centra No2', sans-serif;
	border: 0.125em solid var(--color-expedia-yellow);
}

@media (min-width: 64.01rem) {
	.expedia:hover {
		background-color: var(--color-expedia-yellow-hover);
		border: 0.125em solid var(--color-expedia-yellow-hover);
		/* 2px */
	}
}

.lease {
	background-color: var(--color-primary-alt);
	color: var(--color-white) !important;
	border: 0.125em solid var(--color-primary-alt);
	/* 2px */
	font-weight: 500;
}

@media (min-width: 64.01rem) {
	.lease:hover {
		background-color: #044B67;
		border: 0.125em solid #044B67;
		/* 2px */
	}
}

.temperature {
	position: absolute;
	top: 0.625rem;
	/* 10px */
	right: 1.25rem;
	/* 20px */
	font-size: var(--font-size-base);
	/* 16px */
	font-weight: bold;
	color: var(--color-black);
}

.toggle {
	position: absolute;
	top: 2.5rem;
	/* 40px */
	right: 1.25rem;
	/* 20px */
	font-size: var(--font-size-small);
	/* 14px */
	cursor: pointer;
	background: var(--color-link);
	color: var(--color-white);
	border: none;
	padding: 0.3125em 0.625rem;
	/* 5px 10px */
	border-radius: 0.3125rem;
	/* 5px */
}

@media (max-width: 64rem) {

	/* 1001px */
	.temperature-container {
		display: none;
	}
}

.property-title {
	color: var(--color-black);
	font-weight: bold;
}

.address {
	font-size: var(--font-size-small);
	/* 14px */
	color: var(--color-black);
}

/* =========================
   ACCORDION
========================= */
.accordion {
	max-width: 37.5rem;
	/* 600px */
	margin: auto;
}

.accordion-item {
	margin-bottom: 0.625rem;
	/* 10px */
	border: 0.125em solid var(--border-color);
	/* 2px */
	border-radius: 0.3125rem;
	/* 5px */
}

.accordion-header {
	background: var(--color-primary);
	color: var(--color-white);
	padding: 0.625rem;
	/* 10px */
	cursor: pointer;
	text-align: left;
	font-weight: bold;
	border-radius: 0.3125rem;
	/* 5px */
}

.accordion-content {
	display: none;
	padding: 0.625rem;
	/* 10px */
	/* background: var(--color-light-gray); */
	text-align: left;
}

.accordion-content h3 {
	color: var(--color-primary);
}

.accordion-item.active .accordion-content {
	display: block;
}

.accordion-header {
	transition: background-color 150ms ease, box-shadow 150ms ease;
}

.accordion-header:hover {
	filter: brightness(1.2);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

.page-content {
	margin-left: 12.5rem;
	/* 200px */
	margin-top: 5rem;
	/* 80px */
	padding: 1.25rem;
	/* 20px */
}

.accordion-main-container {
	display: flex;
	flex-wrap: wrap;
}

.left-column {
	flex: 1 1 18.75rem;
	/* 300px */
}

.right-column {
	flex: 1 1 25rem;
	/* 400px */
}

/* 1 rem gap between the two columns */
.left-column {
	margin-right: 1rem;
}

/* desktop / tablet */
@media (max-width: 768px) {
	.left-column {
		margin-right: 0;
	}

	/* stack on mobile → no side gap */
	.right-column {
		margin-top: 1rem;
	}

	/* keep vertical spacing on mobile */
}

#map {
	width: 100%;
	height: 25rem;
	/* 400px */
	background-color: var(--color-light-gray);
	border-radius: 0.3125rem;
	/* 5px */
}

.map-card {
	margin: 1.5rem 0;
	padding: 1rem;
	background: #fff;
	border: 1px solid var(--color-light-gray);
	border-radius: 0.75rem;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
}

.map-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.75rem;
}

.map-action-btn {
	padding: 0.65rem 1.1rem;
	background: var(--color-primary);
	color: #fff;
	border: none;
	border-radius: 0.5rem;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
	transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
}

.map-action-btn:hover {
	opacity: 0.95;
	transform: translateY(-1px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}

.map-distance {
	margin: 0;
	color: #2c2c2c;
	font-size: 0.95rem;
}

.map-note {
	margin-top: 0.75rem;
	padding: 0.85rem 1rem;
	background: var(--color-light-gray);
	border: 1px solid var(--color-light-gray);
	border-radius: 0.625rem;
	color: #2c2c2c;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
	line-height: 1.5;
}

.category-pin {
	height: 1.5625rem;
	/* 25px */
	vertical-align: middle;
}

.no-results-message {
	margin: 4rem auto;
	text-align: center;
	font-size: 1.125rem;
}

@media (min-width: 64.01rem) {
	.no-results-message {
		margin-right: 12.5rem;
		width: calc(100% - 12.5rem);
		text-align: center;
	}
}

/* Show "clear filters" message only on mobile, hide on desktop */
.mobile-clear-filters-message {
	display: none;
}

@media (max-width: 1000px) {
	.mobile-clear-filters-message {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		margin: 2rem 0 1.5rem 0;
		font-size: 1.1rem;
		font-weight: 500;
		text-align: center;
	}

	.mobile-clear-filters-message a {
		color: var(--color-link, #0088cc);
		text-decoration: underline;
		cursor: pointer;
		font-weight: 600;
	}
}

#image-about {
	max-height: 25rem;
	/* 400px */
	display: block;
	margin: 0 auto;
	width: 100%;
	object-fit: cover;
}

#description {
	height: 9.375rem;
	/* 150px */
}

/* =========================
   ABOUT US
========================= */
.content-about {
	border-radius: 0.5rem;
	/* 8px */
	padding: 0.9375rem;
	/* 15px */
	margin: 1.25em auto;
	/* 20px */
	background-color: var(--color-medium-light-gray);
	/* border: 0.125em solid var(--border-color); */
	/* 2px */
}

.content-about h2 {
	font-size: 1.25rem;
	/* 20px */
	margin: 0 0 0.5em 0;
	/* 8px */
	color: var(--color-primary);
}

.content-about p {
	margin: 0;
}

.content-about img {
	border-radius: 0.5rem;
}

.about-eyebrow {
	margin: 0;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-primary);
	font-weight: 700;
}

.about-image-block {
	float: right;
	width: min(20rem, 55%);
	margin: 0 0 0.75rem 1.25rem;
	text-align: center;
}

.about-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.6rem;
	margin-top: 0.75rem;
	justify-items: center;
}

.about-stat {
	background: var(--color-white);
	border: 1px solid var(--color-medium-light-gray);
	border-radius: 0.6rem;
	padding: 0.55rem 0.85rem;
	min-width: 9rem;
	text-align: center;
}

.about-stat-number {
	display: block;
	font-weight: 800;
	color: var(--color-primary);
}

.about-stat-label {
	display: block;
	font-size: 0.95rem;
	color: var(--color-text, #1e1e1e);
}

.content-about::after {
	content: "";
	display: block;
	clear: both;
}

@media (max-width: 768px) {
	.about-image-block {
		float: none;
		width: 100%;
		max-width: 22rem;
		margin: 1rem auto;
	}

	.about-stats {
		grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	}
}

/* =========================
   CONTACT FORMS
========================= */
.content form {
	display: flex;
	flex-direction: column;
	max-width: 37.5rem;
	padding: 1.25rem;
	background: var(--color-light-gray);
	border-radius: 0.5rem;
	border: 0.125em solid var(--border-color);
}

.content form label {
	margin-bottom: 0.3125rem;
	/* 5px */
}

.content form input,
.content form textarea,
.content form select {
	padding: 0.625rem;
	/* 10px */
	font-size: var(--font-size-base);
	/* 16px */
	border: 0.0625em solid var(--color-medium-gray);
	/* 1px */
	border-radius: 0.25rem;
	/* 4px */
	width: 100%;
	margin: 0.3125em 0 0.9375em 0;
	/* 5px 0 15px 0 */
}

.content form button[type="submit"] {
	width: 100%;
	padding: 0.75rem;
	/* 12px */
	background-color: var(--color-primary-alt);
	color: var(--color-white);
	border: none;
	border-radius: 0.25rem;
	/* 4px */
	font-size: var(--font-size-base);
	/* 16px */
	cursor: pointer;
	transition: background 0.3s ease;
}

@media (min-width: 64.01rem) {
	.content form button[type="submit"]:hover {
		background-color: var(--color-primary-alt-hover);
	}
}

button[type="submit"][disabled] {
	background-color: var(--color-medium-gray) !important;
	cursor: not-allowed !important;
}

@media (max-width: 37.5em) {

	/* 600px */
	.content form {
		padding: 0.9375rem;
		/* 15px */
	}

	.content form input,
	.content form textarea,
	.content form select {
		font-size: var(--font-size-small);
		/* 14px */
	}

	.content form button[type="submit"] {
		font-size: var(--font-size-small);
		/* 14px */
	}
}

.contact-type-container {
	display: flex;
	gap: 0.625rem;
	/* 10px */
	justify-content: center;
	margin-bottom: 0.9375rem;
	/* 15px */
}

.contact-type-btn {
	flex: 1;
	padding: 0.75rem;
	/* 12px */
	background-color: var(--color-medium-gray);
	border: none;
	border-radius: 0.25rem;
	/* 4px */
	font-size: var(--font-size-base);
	/* 16px */
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.contact-type-btn.selected {
	background-color: var(--color-primary-alt);
	color: var(--color-white);
}

.checkbox-container {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	/* 10px */
	margin-bottom: 0.9375rem;
	/* 15px */
}

.checkbox-item {
	display: flex;
	align-items: center;
	width: 0.625rem;
	/* 10px */
}

.checkbox-item input[type="checkbox"] {
	margin-right: 0.5rem;
	/* 8px */
}

.existing-platforms {
	border: 0.125em solid var(--color-medium-gray);
	/* 2px */
}

/* =========================
   MODAL
========================= */
.modal {
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	display: none;
	justify-content: center;
	align-items: center;
	padding: 10px;
}

.modal.show {
	display: flex;
}

.modal-body {
	position: relative;
	max-width: 100%;
	max-height: 100%;
}

.modal-image-container {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 100%;
	max-height: 100%;
}

.modal-content {
	max-width: 100%;
	max-height: 80vh;
	/* Avoid covering too much vertical space */
	object-fit: contain;
	border-radius: 0.5rem;
}

.modal-close,
.modal-prev,
.modal-next {
	position: absolute;
	color: white;
	font-size: 2.125rem;
	cursor: pointer;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 4px;
	user-select: none;
	z-index: 1001;
	display: none;
}

.modal-close.show,
.modal-prev.show,
.modal-next.show {
	display: block;
}

.modal-close {
	padding: 0px 12px;
	top: 10px;
	right: 10px;
}

@media (min-width: 64.01rem) {

	.modal-close:hover,
	.modal-prev:hover,
	.modal-next:hover {
		color: var(--color-link-hover);
		background-color: rgba(0, 0, 0, 0.5);
	}
}

.modal-prev {
	padding: 5px 10px;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
}

.modal-next {
	padding: 5px 10px;
	/*    right: 10px;*/
	top: 50%;
	transform: translateY(-50%);
}

/* Overlay prev/next arrows on mobile */
@media (max-width: 768px) {

	.modal-prev {
		left: 10px !important;
	}

	.modal-next {
		right: 10px !important;
		/*        left: auto; */
		/*left: 30px !important;*/
	}
}


.remodel-item img {
	cursor: pointer;
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.05);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.remodel-item img:hover {
	transform: translateY(-3px) scale(1.01);
	border-color: var(--color-primary-alt-medium);
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.14);
}

/* ========================= */
/* #region SPLASH PAGE MODAL */
/* ========================= */

.modal-overlay {
	position: fixed;
	inset: 0;
	background: radial-gradient(circle at 20% 20%, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.8));
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	/* above any site chrome */
}

.property-modal {
	position: relative;
	z-index: 1;
	width: 80vw;
	height: 90vh;
	padding: clamp(1.5rem, 2vw, 2.5rem);
	border-radius: 1rem;
	border: 0.15rem solid rgba(255, 255, 255, 0.35);
	color: var(--color-white);
	background-size: cover;
	background: transparent;
	/* box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.75); */
	overflow: hidden;
	/* clip pseudo‑element */
}

.property-modal .modal-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 0.8s ease-in-out;
	z-index: -2;
	will-change: opacity;
}

.property-modal .modal-bg.active {
	opacity: 1;
}

.suppress-splash .modal-overlay {
	display: none !important;
}

/* Use dynamic viewport height on browsers that support it (e.g., Safari iOS 15.4+) */
@supports (height: 100dvh) {
	.property-modal {
		height: 90dvh;
	}
}

/* dimmed veil over background image */
.property-modal::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, rgba(21, 20, 17, 0.72) 0%, rgba(21, 20, 17, 0.6) 10%, rgba(21, 20, 17, 0.25) 20%);
	z-index: -1;
	/* behind text & buttons but above bg images */
	/* sits under text but above BG image */
}

.property-modal-content {
	max-width: 560px;
	background: rgba(21, 20, 17, 0.6);
	backdrop-filter: blur(6px);
	border-radius: 0.85rem;
	padding: clamp(1.25rem, 2vw, 1.75rem);
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.45);
}

.property-modal h2 {
	margin: 0.35rem 0 0.5rem;
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	letter-spacing: 0.01em;
}

.property-modal .eyebrow {
	margin: 0;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.78);
}

.property-modal .lede {
	margin: 0 0 0.75rem;
	font-size: 1.05rem;
	color: rgba(255, 255, 255, 0.9);
}

.property-modal ul {
	list-style: none;
	padding-left: 0;
	margin: 1rem 0 0;
	line-height: 1.55;
}

.property-modal ul li {
	position: relative;
	padding-left: 1.6rem;
	margin-bottom: 0.5rem;
	font-size: 1.05rem;
	color: rgba(255, 255, 255, 0.9);
}

.property-modal ul li::before {
	content: "";
	position: absolute;
	width: 0.6rem;
	height: 0.6rem;
	left: 0;
	top: 0.4rem;
	border-radius: 999px;
	background: linear-gradient(135deg, #ffc163, #f4e5c8);
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08);
}

/* Ensure links remain readable against the dark backdrop */
.property-modal a {
	color: var(--color-white);
	text-decoration: underline;
	text-decoration-thickness: 0.12em;
	text-underline-offset: 0.2em;
}

.property-modal .cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-top: 1.25rem;
	padding: 0.85rem 1.5rem;
	background: linear-gradient(135deg, #f2cb83, #e9b764);
	color: #1e1a14;
	border: none;
	border-radius: 999px;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.3s ease;
}

.property-modal .cta-btn::after {
	content: "→";
	font-size: 1.05rem;
}

.property-modal .cta-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 32px rgba(0, 0, 0, 0.3);
	background: linear-gradient(135deg, #ffd58f, #f2c172);
}

.property-modal .cta-btn:active {
	transform: translateY(0);
}

.splash-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	padding: 0.35rem 0.75rem;
	background: rgba(0, 0, 0, 0.45);
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: var(--color-white);
	font-size: 1.6rem;
	cursor: pointer;
	font-weight: 700;
	border-radius: 0.65rem;
	transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.splash-close:hover {
	background: rgba(0, 0, 0, 0.6);
	border-color: rgba(255, 255, 255, 0.55);
	transform: translateY(-1px);
}

/* ---------------- Mobile (≤1001 px) font tuning for splash modal ------------- */
@media (max-width: 64rem) {

	.property-modal h2 {
		font-size: 1.2rem;
	}

	.property-modal ul li {
		font-size: 1rem;
	}

	.property-modal .cta-btn {
		font-size: 0.9rem;
	}

	.property-modal {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		padding: 1.25rem;
		align-items: flex-end;
		background-position: center 25%;
		gap: 0.75rem;
	}

	.property-modal .splash-close {
		z-index: 3;
	}

	.property-modal-content {
		margin-top: 0.75rem;
		max-width: none;
		width: 100%;
	}
}

/* Additional tighten-up for very small screens (≤450px) */
@media (max-width: 28.125rem) {

	.property-modal h2 {
		font-size: 1.05rem;
	}

	.property-modal .eyebrow {
		font-size: 0.733rem;
	}

	.property-modal .lede {
		font-size: 0.883rem;
	}

	.property-modal ul li {
		font-size: 0.833rem;
	}

	.property-modal .cta-btn {
		font-size: 0.733rem;
	}

	.property-modal .splash-close {
		font-size: 1.433rem;
	}
}

.property-modal.fade-out {
	transition: opacity 0.2s ease;
	opacity: 0.85;
}

/* ========================= */
/* #endregion SPLASH PAGE MODAL */
/* ========================= */



/* ========================= */
/* #region FOOTER */
/* ========================= */

/* Root footer */
.footer {
	background: var(--color-primary);
	color: var(--color-sand);
	padding: 1rem 2rem;
	width: 100%;
	font-size: 0.9rem;
}

.footer a:link,
.footer a:visited {
	color: var(--color-sand);
	text-decoration: none;
	transition: color 0.2s ease-in-out;
}

@media (min-width: 64.01rem) {
	.footer a:hover {
		color: var(--color-link-hover);
	}
}

/* Layout */
.footer-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem 2rem;
	align-items: start;
}

@media (min-width: 64.01rem) {
	.footer-inner {
		grid-template-columns: minmax(320px, 2fr) minmax(0, 3fr);
	}
}

/* Branding */
.footer-brand {
	text-align: left;
}

.footer-logo {
	margin: 0 0 0.75rem 0;
	font-family: var(--font-logo);
	font-size: var(--font-size-xlarge);
	color: var(--color-sand);
	font-weight: bold;
	text-shadow: 2px 2px var(--color-primary-alt);
	display: block;
	max-width: 220px;
	height: auto;
}

.footer-summary {
	margin: 0 0 1.25rem 0;
}

.footer-contact {
	margin: 0;
}

/* Navigation columns */
.footer-nav {
	width: 100%;
}

.footer-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: 1rem 2rem;
}

/* --- Desktop overrides: right‑align exactly three columns as a group --- */
@media (min-width: 64.01rem) {

	/* When the container has .three-cols, pack three columns to the right */
	.footer-columns.three-cols {
		display: grid;
		grid-template-columns: repeat(3, max-content);
		justify-content: end;
		gap: 0.5rem;
	}

	/* Keep text inside each column left-aligned and readable */
	.footer-columns.three-cols .footer-col {
		min-width: 12rem;
		/* reasonable min width per column */
		text-align: left;
	}
}

/* --- Desktop: keep links & socials on one row; socials right-aligned --- */
@media (min-width: 64.01rem) {

	/* Do not wrap the row that contains links/socials */
	.footer-meta-row:not(.footer-copy) {
		flex-wrap: nowrap;
	}

	/* Ensure the two clusters lay out horizontally with appropriate spacing */
	.footer-meta-row .footer-links {
		display: flex;
		gap: 1rem;
	}

	.footer-meta-row .footer-social {
		margin-left: auto;
		/* push socials to the right */
		display: flex;
		gap: 0.75rem;
		/* compact spacing between icons */
	}
}

.footer-col h3 {
	font-size: 1rem;
	margin: 0 0 0.5rem 0;
}

.footer-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-col li {
	margin: 0 0 0.4rem 0;
}

.footer-col a {
	color: var(--color-sand);
}

@media (min-width: 64.01rem) {
	.footer-col a:hover {
		color: var(--color-accent);
	}
}

/* Utility */
.hide-on-mobile {
	display: block;
}

@media (max-width: 64rem) {
	.hide-on-mobile {
		display: none !important;
	}
}

/* Footer meta */
.footer-meta {
	margin-top: 1.25rem;
}

.footer-meta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.25rem 0;
	flex-wrap: wrap;
	text-align: left;
}

.footer-meta-row ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.footer-meta-row.footer-copy {
	justify-content: flex-start;
}

.footer-meta-row.footer-copy p {
	margin: 0.5rem 0 0 0;
}

/* Copyright paragraph as direct child */
.footer>p {
	text-align: left;
	margin-top: 2rem;
	font-size: 0.9rem;
}

/* Desktop offset to clear the fixed 200px sidebar */
@media (min-width: 64.01rem) {

	.footer-inner,
	.footer-meta,
	.footer>p {
		padding-left: 12.5rem;
	}
}

/* Mobile tweaks */
@media (max-width: 64rem) {
	.footer-meta-row {
		justify-content: center;
		text-align: center;
	}

	.footer-meta-row ul {
		justify-content: center;
	}

	/* Center brand content on mobile */
	.footer-brand {
		text-align: center;
	}

	.footer-logo {
		margin-left: auto;
		margin-right: auto;
	}

	.footer-meta-row.footer-copy p {
		margin: 0.5rem 0 0 0;
		width: 100%;
		text-align: center;
	}
}

/* #endregion FOOTER */

/* =========================
   SERVICES
========================= */
.service-item {
	background-color: var(--color-medium-light-gray);
	/* border: 0.125em solid var(--border-color); */
	border-radius: 0.5rem;
	padding: 0.9375rem;
	margin-bottom: 0.9375rem;
	text-align: left;
	min-height: 9.375rem;
}

.service-item h2 {
	font-size: 1.25rem;
	/* 20px */
	margin: 0 0 0.5em 0;
	/* 8px */
	color: var(--color-primary);
}

.service-item p {
	margin: 0;
	line-height: 1.4;
	color: #333;
}

.services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(25em, 1fr));
	/* 400px = 25em */
	gap: 0 1.0rem;
	/* 20px */
	margin: 1em 0 0;
}

@media (max-width: 64rem) {

	/* 1001px */
	.services-grid {
		grid-template-columns: repeat(auto-fit, minmax(18.75em, 1fr));
		/* 300px = 18.75em */
	}
}

/* =========================
   REMODEL
========================= */
.remodel-hero {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 1.5rem;
	padding: 1.5rem;
	margin: 0 0 1rem;
	border-radius: 1rem;
	color: var(--color-white);
	background: linear-gradient(135deg, rgba(0, 52, 119, 0.92), rgba(2, 195, 154, 0.9)), url('/images/remodel/maru-patio1-0.jpg') center/cover no-repeat;
	position: relative;
	overflow: hidden;
}

.remodel-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.08), transparent 40%),
		radial-gradient(circle at 80% 0%, rgba(255, 255, 255, 0.08), transparent 35%);
}

.remodel-hero__copy {
	position: relative;
	z-index: 1;
}

.remodel-hero__copy h1 {
	color: var(--color-white);
}

.remodel-hero__card {
	position: relative;
	z-index: 1;
	background: var(--color-white);
	color: var(--color-very-dark-gray);
	border-radius: 0.9rem;
	padding: 1.25rem;
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.12);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.remodel-kicker {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.85rem;
	margin: 0 0 0.35rem;
	color: var(--color-cyan);
	font-weight: 700;
}

.remodel-lede {
	margin: 0 0 0.75rem;
	max-width: 48ch;
	color: var(--color-white);
	line-height: 1.6;
}

.remodel-hero__actions {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-bottom: 0.5rem;
}

.remodel-primary-btn,
.remodel-secondary-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.7em 1.15rem;
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
	cursor: pointer;
}

.remodel-primary-btn {
	background: var(--color-white);
	color: var(--color-primary);
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
	border: 0.125em solid transparent;
}

.remodel-secondary-btn {
	background: rgba(255, 255, 255, 0.12);
	border: 0.125em solid rgba(255, 255, 255, 0.3);
	color: var(--color-white);
}

.remodel-primary-btn:hover,
.remodel-primary-btn:focus {
	transform: translateY(-1px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.remodel-secondary-btn:hover,
.remodel-secondary-btn:focus {
	background: rgba(255, 255, 255, 0.2);
	transform: translateY(-1px);
}

.remodel-hero__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.25rem;
}

.meta-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.35em 0.8rem;
	border-radius: 999px;
	font-size: 0.95rem;
	background: rgba(255, 255, 255, 0.18);
	color: var(--color-white);
	border: 0.125em solid rgba(255, 255, 255, 0.35);
}

.meta-pill.accent {
	background: var(--color-white);
	color: var(--color-primary);
	border-color: transparent;
}

.remodel-hero__card h3 {
	margin: 0;
	color: var(--color-primary);
}

.remodel-hero__list {
	margin: 0;
	padding-left: 1.1rem;
	color: var(--color-dark-gray);
	display: grid;
	gap: 0.35rem;
}

.remodel-hero__cta-row {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.remodel-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.5em 0.85rem;
	border-radius: 0.75rem;
	background: var(--color-primary-alt-medium-light);
	color: var(--color-primary);
	font-weight: 700;
	width: fit-content;
}

.remodel-caption {
	font-size: 0.95rem;
	color: var(--color-dark-gray);
}

.remodel-intro-note {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	margin: 0 0 1rem;
	background: var(--color-medium-light-gray);
	/* border: 0.0625em solid rgba(0, 52, 119, 0.12); */
	border-radius: 0.65rem;
	color: var(--color-dark-gray);
	font-weight: 500;
	font-size: 0.97rem;
}

.remodel-intro-note::before {
	content: "i";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 999px;
	background: var(--color-white);
	color: var(--color-primary);
	font-weight: 700;
	font-size: 0.95rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
}

@media (max-width: 64rem) {
	.remodel-hero {
		grid-template-columns: 1fr;
	}

	.remodel-hero__copy h1 {
		margin: 0 0 0.25rem;
	}
}

.remodel-list {
	display: grid;
	gap: 1.25rem;
}

.remodel-item {
	background: var(--color-medium-light-gray);
	/* border: 0.0625em solid var(--border-color); */
	border-radius: 0.75rem;
	padding: 1.25rem;
	margin: 0;
	text-align: left;
	/* box-shadow: 0 16px 36px rgba(0, 0, 0, 0.06); */
}

/* Highlighted remodel item */
.remodel-item.highlighted {
	border: 0.25em solid var(--color-cyan);
	background-color: var(--color-cyan-light);
	scroll-margin-top: 70px;
}


.remodel-item p {
	margin: 0;
	font-size: var(--font-size-base);
	/* 14px */
	line-height: 1.5;
	color: var(--color-very-dark-gray);
}

.remodel-item h2 {
	margin: 0 0 0.75rem 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--color-primary);
	letter-spacing: 0.01em;
}

.remodel-images-horizontal {
	display: flex;
	gap: 0.625rem;
	/* 10px */
	flex-wrap: wrap;
	margin-top: 0.5rem;
}

.remodel-images-vertical {
	display: flex;
	gap: 0.625rem;
	/* 10px */
	flex-wrap: wrap;
	margin-top: 0.5rem;
}

.remodel-images-horizontal img {
	min-width: 5rem;
	/* 80px */
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 0.35rem;
}

/* Desktop‑only: limit remodel images heights */
@media (min-width: 64.01rem) {
	.remodel-images-horizontal img {
		max-height: 13.125rem;
		/* 210px */
	}

	.remodel-images-vertical img {
		max-height: 22.5rem;
		/* 360 px */
	}
}

.remodel-images-vertical img {
	min-width: 5rem;
	/* 80px */
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 0.35rem;
}

/* ---------------------------------------------
   Mobile (≤1001 px): center remodel image sets
---------------------------------------------- */
@media (max-width: 64rem) {

	/* ≤1001 px */
	.remodel-images-horizontal,
	.remodel-images-vertical {
		justify-content: center;
		/* center thumbnails row */
		flex-wrap: wrap;
		/* allow wrapping */
	}

	/* Horizontal image set — two‑column grid on mobile */
	.remodel-images-horizontal {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0.625rem;
		/* same 10 px gap desktop uses */
		justify-items: start;
		/* keep columns tight left */
		justify-content: start;
		/* prevent grid from centering, leftover space stays on the right */
		align-items: start;
	}

	/* ----- Mobile image width adjustments based on orientation ----- */
	/* Two vertical images side‑by‑side */
	.remodel-images-vertical img {
		width: 48%;
		max-width: 48%;
		min-width: 48%;
	}

	/* Horizontal images can be 1‑up or 2‑up (maintain aspect ratio) */
	.remodel-images-horizontal img {
		width: 100%;
		/* fill grid cell */
		height: auto;
		max-width: 100%;
		object-fit: contain;
	}
}

/* =========================
   CORPORATE TRAVEL
========================= */

.corporate-travel h2 {
	font-size: 1.25rem;
	margin: 0 0 0.5em 0;
	color: var(--color-primary);
}

.corporate-travel h3 {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

.corporate-travel {
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}

.corporate-travel figure {
	margin: 0;
}

.corporate-travel figure figcaption {
	text-align: center;
	font-size: .9rem;
	margin-top: .5rem;
}

.corporate-travel .grid-3 {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

.corporate-travel .card {
	background-color: var(--color-light-gray);
	border: 0.125em solid var(--border-color);
	border-radius: 0.5rem;
	padding: 0.9375rem;
	margin-bottom: 0.9375rem;
	text-align: left;
}

.corporate-travel .cta {
	border: 0.2rem solid var(--color-green);
	border-radius: 0.5rem;
	padding: 1rem;
	/* margin: 2rem 0; */
	background: var(--color-very-light-green);

	margin: 0 0 1rem 0;
	/* background-color: var(--color-light-gray); */
	/* border: 0.2em solid var(--border-color); */
	/* border-radius: 0.5rem; */
	text-align: left;
}

.corporate-travel .cta h2 {
	color: var(--color-black);
}

.corporate-travel section {
	margin-top: 1rem;
}

.corporate-travel ul {
	margin-top: 0rem;
}

.hero {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
	align-items: center;
	margin: 1rem 0 2rem;
}

.hero img {
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.hero .hero-text {
	padding: 0.5rem 0;
}

@media (min-width: 768px) {
	.corporate-travel .hero {
		grid-template-columns: 1.2fr 1fr;
	}

	.corporate-travel .grid-3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* =========================
   GUIDE ITEMS
========================= */
.guide-content h1 {
	/* Custom styles if needed */
	margin: 0;
}

/* =========================
   CONTRACTOR SERVICE RECOMMENDATIONS
========================= */
.contractor-item {
	background-color: var(--color-light-gray);
	border: 0.125em solid var(--border-color);
	/* 2px */
	border-radius: 0.5rem;
	/* 8px */
	padding: 0.9375rem;
	/* 15px */
	margin-bottom: 0.9375rem;
	/* 15px */
	text-align: left;
	scroll-margin-top: 70px;
}

.contractor-item h2 {
	font-size: 1.25rem;
	/* 20px */
	margin: 0 0 0.5rem 0;
	/* 8px */
	color: var(--color-primary);
}

.contractor-item h3 {
	font-size: 1rem;
	margin: 0 0.5rem 0.5rem 0;
	font-weight: 600;
}

.contractor-item p {
	margin: 0 0 1rem 0;
}

/* =========================
   HOUSE RULES
========================= */
.houserules-content h1 {
	color: var(--color-black);
}

.houserules-item {
	background-color: var(--color-light-gray);
	border: 0.125em solid var(--border-color);
	/* 2px */
	border-radius: 0.5rem;
	/* 8px */
	padding: 0.9375rem;
	/* 15px */
	margin-bottom: 0.9375rem;
	/* 15px */
	text-align: left;
}

.houserules-item h2 {
	font-size: 1.25rem;
	/* 20px */
	margin: 0 0 0.5em 0;
	/* 8px */
}

/* =========================
   CURATED LISTS
========================= */
.curated-list-content h1 {
	color: var(--color-black);
}

.curated-list-item {
	background-color: var(--color-medium-light-gray);
	/* border: 0.125em solid var(--border-color); */
	/* 2px */
	border-radius: 0.5rem;
	/* 8px */
	padding: 0.9375rem;
	/* 15px */
	margin-bottom: 0.9375rem;
	/* 15px */
	text-align: left;
	/* scroll-margin-top: 70px; */

}

.curated-list-item h2 {
	font-size: 1.25rem;
	/* 20px */
	margin: 0 0 0.5em 0;
	/* 8px */
	display: flex;
	align-items: center;
}

.curated-list-item h3 {
	color: var(--color-dark-gray);
	font-weight: normal;
	margin: 0rem;
}

.curated-list-item.with-images {
	display: flex;
	flex-wrap: nowrap;
	/* Always side-by-side on desktop */
	gap: 20px;
}

.curated-list-item.highlighted {
	border: 0.25em solid var(--color-cyan);
	background-color: var(--color-cyan-light);
	scroll-margin-top: 70px;
}

.curated-text {
	flex: 1 1 60%;
	/* Prefer 60% width */
	min-width: 50%;
	/* Never smaller than 50% */
	max-width: 60%;
	/* Never larger than 60% */
}

.curated-images {
	display: flex;
	flex-wrap: nowrap;
	/* Always inline images */
	justify-content: center;
	align-items: center;
	gap: 10px;
	flex: 1 1 40%;
	/* Prefer 40% width */
	min-width: 35%;
	/* Never smaller than 35% */
	max-width: 40%;
	/* Never larger than 40% */
}

.curated-images img {
	flex: 1 1 48%;
	/* Two images side-by-side */
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 0.5rem;
	max-width: 50%;
	min-width: 33%;
}

/* Mobile: Stack vertically */
@media (max-width: 1001px) {
	.curated-list-item.with-images {
		flex-direction: column;
	}

	.curated-text,
	.curated-images {
		flex: 1 1 100%;
		min-width: 100%;
		max-width: 100%;
	}

	.curated-images {
		flex-wrap: wrap;
		justify-content: center;
	}

	.curated-images img {
		width: 48%;
		max-width: unset;
		min-width: unset;
	}
}

/* =========================
   AI Assitant
========================= */

.content-assistant {
	text-align: center;
	max-width: 720px;
	margin: 3.5rem auto;
	font-family: 'Poppins', sans-serif;
	/* ensure space above sticky/regular footer */
	padding-bottom: 3.5rem;
}

.content-assistant h1 {
	font-weight: 700;
	font-size: 2.25rem;
	margin-bottom: 1rem;
	/* font-family: 'Fugaz One', cursive; */
}

.content-assistant p {
	font-weight: 400;
	font-size: 1.05rem;
	margin-bottom: 1.5rem;
	color: #3a3a3a;
}

.assistant-card {
	background: var(--color-white);
	border: 1px solid var(--color-primary-alt-light);
	border-radius: 1.25rem;
	padding: 2.25rem 2.5rem;
	box-shadow: 0 10px 35px rgba(0, 0, 0, 0.05);
}

.assistant-eyebrow {
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-primary-alt);
	margin-bottom: 0.5rem;
}

.assistant-lead {
	font-size: 1.1rem;
	color: #2b2b2b;
	margin-bottom: 1.75rem;
}

.assistant-highlights {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	text-align: left;
	display: grid;
	gap: 0.85rem;
}

.assistant-highlights li {
	background: var(--color-primary-alt-light);
	border-radius: 0.85rem;
	padding: 0.85rem 1rem;
	font-size: 0.98rem;
	line-height: 1.5;
	color: #1f2a36;
}

.assistant-highlights span {
	display: block;
	font-weight: 700;
	color: var(--color-primary);
	margin-bottom: 0.25rem;
}

.assistant-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-width: 230px;
	box-shadow: 0 12px 30px rgba(0, 52, 119, 0.25);
}

/* Smaller, non-fixed disclosure that stays inside main and avoids footer overlap */
.disclosure {
	font-size: 0.75rem;
	/* a little smaller */
	color: #999;
	text-align: center;
	margin-top: 2rem;
	margin-bottom: 0;
	/* avoid extra bottom push */
	line-height: 1.4;
	/* remove fixed positioning */
	position: static;
	/* clean out any previous overrides */
	left: auto;
	bottom: auto;
	transform: none;
	width: auto;
}

/* Optional: tighten on very small screens */
@media (max-width: 420px) {
	.content-assistant {
		padding-bottom: 4.5rem;
		/* extra breathing room above footer on small phones */
	}

	.assistant-card {
		padding: 1.75rem 1.5rem;
	}

	.disclosure {
		font-size: 0.72rem;
	}
}

/* =========================
   GENERIC ITEMS
========================= */

.generic-button {
	padding: 0.75em 1.125rem;
	font-size: var(--font-size-base);
	border: 0.125em solid var(--color-primary);
	border-radius: 0.5rem;
	background: var(--color-primary);
	color: var(--color-white) !important;
	cursor: pointer;
	transition: background 0.3s ease, color 0.3s ease;
	text-decoration: none;
	font-weight: 700;
}

@media (min-width: 64.01rem) {

	select:hover {
		color: var(--color-accent);
	}

	.generic-button:hover {
		background: var(--color-primary-alt-hover);
		border-color: var(--color-primary-alt-hover);
		color: var(--color-white);
	}
}

/* =========================
   GENERIC ITEM – WITH IMAGES
   (same layout as curated-list-item with-images)
========================= */
.generic-item {
	background-color: var(--color-medium-light-gray);
	/* border: 0.125em solid var(--border-color); */
	/* 2px */
	border-radius: 0.5rem;
	/* 8px */
	padding: 0.9375rem;
	/* 15px */
	margin-bottom: 0.9375rem;
	/* 15px */
	text-align: left;
}

.generic-item h2 {
	font-size: 1.5rem;
	/* 20px */
	margin: 0 0 0.5em 0;
	/* 8px */
	display: flex;
	align-items: center;
}

.generic-item h3 {
	color: var(--color-dark-gray);
	font-weight: normal;
	margin: 0rem;
}

.generic-item.with-images {
	display: flex;
	flex-wrap: nowrap;
	/* Always side-by-side on desktop */
	gap: 20px;
}

.generic-item.highlighted {
	border: 0.25em solid var(--color-cyan);
	background-color: var(--color-cyan-light);
	scroll-margin-top: 70px;
}

.generic-item-text {
	flex: 1 1 60%;
	/* Prefer 60% width */
	min-width: 50%;
	/* Never smaller than 50% */
	max-width: 60%;
	/* Never larger than 60% */
}

.generic-item-images {
	display: flex;
	flex-wrap: nowrap;
	/* Always inline images */
	justify-content: center;
	align-items: center;
	gap: 10px;
	flex: 1 1 40%;
	/* Prefer 40% width */
	min-width: 35%;
	/* Never smaller than 35% */
	max-width: 40%;
	/* Never larger than 40% */
}

.generic-item-images img {
	flex: 1 1 48%;
	/* Two images side-by-side */
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 0.5rem;
	max-width: 50%;
	min-width: 33%;
}

/* Mobile: Stack vertically */
@media (max-width: 1001px) {
	.generic-item.with-images {
		flex-direction: column;
	}

	.generic-item-text,
	.generic-item-images {
		flex: 1 1 100%;
		min-width: 100%;
		max-width: 100%;
	}

	.generic-item-images {
		flex-wrap: wrap;
		justify-content: center;
	}

	.generic-item-images img {
		width: 48%;
		max-width: unset;
		min-width: unset;
	}
}

/* FAQ Accordion Styles */

.generic-item-accordion-nav {
	color: var(--color-primary);
	scroll-margin-top: 70px;
	margin-bottom: 0.5rem;
}


.generic-item-accordion {
	margin: 0 0 1rem 0;
	background-color: var(--color-light-gray);
	border: 0.2em solid var(--border-color);
	border-radius: 0.5rem;
	text-align: left;
	/* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); */
	/* transition: box-shadow 0.25s ease, border-color 0.25s ease; */
	transition: border-color 0.25s ease;
	scroll-margin-top: 70px;
}

.generic-item-accordion:hover {
	/* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); */
	/* border: 0.25em solid var(--color-link); */
	border-color: var(--color-primary-alt-medium);
}

.generic-item-accordion.active {
	border-color: var(--color-primary-alt-medium);
	background-color: var(--color-primary-alt-light);
	/* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
}

.generic-item-accordion h3 {
	cursor: pointer;
	font-size: 1.125rem;
	margin: 0;
	padding: 1rem 6rem 1rem 1rem;
	font-weight: 600;
	color: var(--color-primary-alt);
	position: relative;
}

.generic-item-accordion h4 {
	font-weight: bold;
	/* font-size: 1.1em; */
	padding: 0 1rem;
	color: var(--color-dark-gray);
	margin: 0 0 0 0;
}

.generic-item-accordion h3::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 1.25rem;
	width: 0.75rem;
	height: 0.75rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
	transition: transform 0.25s ease;
}

.generic-item-accordion.active h3::after {
	transform: translateY(-50%) rotate(-135deg);
}

.generic-item-accordion p {
	display: none;
	padding: 0 1.0rem 1.0rem;
	margin: 0;
	line-height: 1.6;
	color: var(--color-dark-gray);
}

.generic-item-accordion.active p {
	display: block;
}

.generic-item-accordion ul,
.generic-item-accordion ol {
	padding: 0 1.25rem 1.25rem 2.5rem;
	margin: 0;
	color: var(--color-dark-gray);
}

.generic-item-accordion.active ul,
.generic-item-accordion.active ol {
	display: block;
}

.generic-item-accordion ol {
	margin-left: 2rem;
	margin-right: 2rem;
	/* Adjust indentation as needed */
	padding-left: 1rem;
	/* Adds space between numbers and text */
}

/* Hide all children except h3 by default, show them when active */
.generic-item-accordion:not(.active)>*:not(h3) {
	display: none !important;
}


.generic-item-accordion figure {
	max-width: 35rem;
	width: 100%;
	display: block;
	margin: 0 auto 1rem auto;
	text-align: center;
}

.generic-item-accordion figure img {
	/* Let the browser scale naturally */
	width: auto;
	/* no forced stretch */
	height: auto;

	/* Ensure wide images always leave 1 rem padding on each side */
	max-width: min(100%, calc(100% - 2rem));
	/* never overflow horizontally */
	max-height: 25rem;
	/* trim very tall portraits (≈240 px) */

	object-fit: contain;
	/* preserve aspect ratio inside those limits */
	display: block;
	/* keep centring margins intact */
	margin: 0 auto;
	border-radius: 0.5rem;
}

.generic-item-accordion figcaption {
	font-size: 0.9rem;
	color: var(--color-dark-gray);
	margin-top: 0.5rem;
}


/* --- lightweight toast --- */
#toast {
	position: fixed;
	bottom: 1.5rem;
	left: 50%;
	transform: translateX(-50%) translateY(1rem);
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	padding: 0.75rem 1.25rem;
	border-radius: 0.5rem;
	font-size: 0.875rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.3s ease;
	z-index: 2000;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	/* prevent text from wrapping */
	max-width: 90vw;
	/* widen up to almost full viewport on small screens */
}

#toast.show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

#toast::after {
	content: "";
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	margin-left: 1em;
	background-image: url("/icons/check-circle-aqua.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* =========================
   THANK YOU POP UP
========================= */
#thankYouPopup {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	z-index: 1000;
	align-items: center;
	justify-content: center;
}

#thankYouPopup .popup-content {
	background: white;
	padding: 40px 30px;
	border-radius: 12px;
	text-align: center;
	max-width: 340px;
	margin: auto;
	animation: popupFade 0.4s ease;
	box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
}

#thankYouPopup .popup-icon {
	width: 50px;
	height: 50px;
	background-image: url("/icons/check-circle-aqua.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin: 0 auto 20px;
	display: block;
}

#thankYouPopup h2 {
	margin-bottom: 10px;
	font-size: 1.5rem;
	color: #333;
}

#thankYouPopup p {
	font-size: 1.125rem;
	color: #555;
}

#thankYouPopup button {
	margin-top: 25px;
	padding: 10px 20px;
	background-color: var(--color-primary-alt);
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 1.125rem;
}

@media (min-width: 64.01rem) {
	#thankYouPopup button:hover {
		background-color: var(--color-primary-alt-hover);
	}
}

/* Fade-in animation */
@keyframes popupFade {
	from {
		transform: scale(0.7);
		opacity: 0;
	}

	to {
		transform: scale(1);
		opacity: 1;
	}
}


/* =========================
   TOC + INTRO LAYOUT
========================= */
.toc {
	margin: 1rem 0 1.5rem;
	padding: 0.75rem 1rem;
	background: var(--color-medium-light-gray, #f7f7f7);
	border-radius: 8px;
	font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
	font-size: var(--font-size-small);
}

.toc h2 {
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
	font-family: inherit;
}

.toc ul {
	margin: 0;
	padding-left: 0rem;
	/* list-style: disc; */
	list-style-type: none;
}

.toc ul li {
	margin: 0.5rem 0;
}

/* Summary + TOC wrapper */
.intro-and-toc {
	margin: 0.5rem 0 1rem;
}

/* Desktop: side-by-side (summary left, TOC right) */
@media (min-width: 64.01rem) {
	.intro-and-toc {
		display: flex;
		align-items: flex-start;
		gap: 2rem;
	}

	.intro-and-toc .intro-summary {
		flex: 1 1 65%;
	}

	.intro-and-toc .toc {
		flex: 1 1 35%;
		margin: 0;
	}

	.intro-and-toc .toc ul {
		/* padding-left: 1.25rem; */
	}
}

/* =========================
   OTHER MISC.
========================= */

/* Show only when the sidebar is hidden (≤ ~1001px) */
.mobile-only {
	display: block;
}

@media (min-width: 64.01rem) {
	.mobile-only {
		display: none !important;
	}
}

/* Show the Filters accordion toggle whenever the grid is one column
   (≈ < 1001 px) but the global .mobile-only rule has already hidden it */
@media (max-width: 64rem) {
	.mobile-filter-section .accordion-header.mobile-only {
		display: flex !important;
		/* restore button visibility */
	}
}

/* Broad rule when jumping sections to move below header (70px) */
section[id] {
	scroll-margin-top: 70px;
}

/* Disable double-tap zoom while still allowing normal scrolling */
html,
body {
	touch-action: manipulation;
	/* blocks double-tap-to-zoom; pan still works */
}

.red-bold {
	color: red;
	font-weight: bold;
}

.hidden {
	display: none;
}

.content-coming-soon {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	min-height: 100vh;
	padding: 3.33rem 1rem 1rem 1rem;
	/* push content ~1/3 from top, 1rem padding sides */
	box-sizing: border-box;
}

.content-coming-soon h2 {
	font-size: 1.5rem;
	font-weight: bold;
	background-color: var(--color-light-gray);
	/* light gray */
	color: var(--color-very-dark-gray);
	border: 2px solid var(--color-medium-gray);
	/* dark gray border */
	border-radius: 10px;
	padding: 1rem 2rem;
	text-align: center;
	max-width: 100%;
}

/* Unstyled lists for contact info, inline formatting */
ul.no-bullets {
	list-style-type: none;
	padding-left: 0;
	margin: 0 0 1rem 0;
}

ul.no-bullets li {
	margin: 0 0 0.25rem 0;
}

/* Only apply hover effects on devices with a mouse */
/* Fix bug that requires two taps for buttons with links on mobile */
/* @media (hover: hover) and (pointer: fine) {

	.booking-button:hover {
		background-color: #444;
		color: #fff;
		transform: scale(1.02);
	}
} */

.curated-list-feedback p {
	margin-bottom: 0;
}

.page-ending p {
	margin-bottom: 0;
}

.breadcrumb {
	font-size: var(--font-size-small);
	/* 0.875rem ≈ 14 px */
	margin: 0 0 0.5rem 0;
	/* space below breadcrumb */
	color: var(--color-dark-gray);
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	/* small gap around ">" */
	align-items: baseline;
}

.breadcrumb a {
	text-decoration: none;
	color: var(--color-link);
}

@media (hover: hover) and (pointer: fine) {
	.breadcrumb a:hover {
		color: var(--color-link-hover);
		text-decoration: underline;
	}
}

.breadcrumb span {
	/* color: var(--color-primary); */
	/* highlight current page */
	font-weight: 500;
}

/* Dev-only visibility for Damisela 5 (localhost only) */
#damisela5 .dev-only {
	display: none;
}

.is-dev #damisela5 .dev-only {
	display: block;
}




/* TEST BELOW - DELETE WHEN DONE*/
:root {
	--dbp-bg: #ffffff;
	--dbp-text: var(--color-text, #1f2937);
	--dbp-muted: #6b7280;
	--dbp-primary: var(--color-primary, #0a4d63);
	--dbp-accent: var(--color-link, #0a4d63);
	--dbp-sand: var(--color-sand, #f5efe6);
	--dbp-border: rgba(0, 0, 0, 0.08);
	--sidebar-width: 12.5rem;
	/* width of fixed sidebar (200px) */
}

/* Layout */
.dbp-wrap {
	/* max-width: 1120px;
	margin: 0 auto; */
	padding: 1rem;
	background: var(--dbp-bg);
	color: var(--dbp-text);
}

/* Hero */
.dbp-hero {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 2rem;
	align-items: center;
	margin-top: 1rem;
}

/* .dbp-hero-title {
	font-family: var(--heading-font, "Poppins", system-ui);
	font-size: clamp(1.75rem, 2.5vw, 2.5rem);
	margin: 0 0 0.25rem 0;
} */

.dbp-hero-sub {
	font-size: 1rem;
	color: var(--dbp-muted);
	margin: 1rem 0 1rem 0;
}

.dbp-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.dbp-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	border: 1px solid var(--dbp-border);
	background: #fff;
	padding: 0.375rem 0.6rem;
	border-radius: 999px;
	font-size: 0.9rem;
	white-space: nowrap;
}

.dbp-hero-media {
	position: relative;
	/* border-radius: 0.75rem; */
	overflow: hidden;
	/* box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
	aspect-ratio: 4 / 3;
	background: var(--dbp-sand); */
}

.dbp-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dbp-cta-row {
	display: flex;
	gap: 0.75rem;
	margin-top: 1rem;
	flex-wrap: wrap;
}

.dbp-btn {
	display: inline-block;
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	text-decoration: none;
	font-weight: 700;
	line-height: 1;
	border: 2px solid var(--dbp-primary);
}

.dbp-btn-primary {
	background: var(--dbp-primary);
	color: #fff;
}

.dbp-btn-secondary {
	background: transparent;
	color: var(--dbp-primary);
}

.dbp-btn:hover {
	opacity: 0.92;
}

/* Sections */
.dbp-section {
	margin-top: 2.5rem;
}

.dbp-section h2 {
	font-size: clamp(1.25rem, 2vw, 1.75rem);
	margin: 0 0 0.75rem 0;
}

.dbp-section p {
	color: var(--dbp-text);
}

/* Grid utilities */
.dbp-grid {
	display: grid;
	gap: 1rem;
}

.dbp-grid-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dbp-grid-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Features */
.dbp-feature {
	border: 1px solid var(--dbp-border);
	border-radius: 0.6rem;
	padding: 0.875rem;
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	background: #fff;
}

.dbp-feature i {
	color: var(--dbp-accent);
	margin-top: 0.15rem;
}

.dbp-feature h3 {
	margin: 0 0 0.25rem 0;
	font-size: 1rem;
}

.dbp-feature p {
	margin: 0;
	color: var(--dbp-muted);
	font-size: 0.95rem;
}

/* Booking widget */
.dbp-widget-card {
	border: 1px solid var(--dbp-border);
	border-radius: 0.75rem;
	padding: 0.75rem;
	background: #fff;
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}

.dbp-widget-note {
	color: var(--dbp-muted);
	font-size: 0.95rem;
	margin: 0.5rem 0 0 0;
}

.dbp-widget {
	width: 100%;
	min-height: 920px;
	/* safe default; adjust per Hospitable embed */
	border: 0;
	border-radius: 0.6rem;
	background: #fff;
}

/* Policy & FAQ */
.dbp-faq details {
	border: 1px solid var(--dbp-border);
	border-radius: 0.6rem;
	padding: 0.75rem 0.9rem;
	background: #fff;
}

.dbp-faq details+details {
	margin-top: 0.75rem;
}

.dbp-faq summary {
	font-weight: 700;
	cursor: pointer;
}

.dbp-faq p {
	margin: 0.5rem 0 0 0;
	color: var(--dbp-muted);
}

/* Trust row */
.dbp-trust {
	display: flex;
	gap: 1rem;
	align-items: center;
	flex-wrap: wrap;
	color: var(--dbp-muted);
	font-size: 0.95rem;
}

.dbp-trust i {
	color: var(--dbp-accent);
}

/* Responsive */
@media (max-width: 960px) {
	.dbp-hero {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.dbp-grid-3 {
		grid-template-columns: 1fr;
	}

	.dbp-grid-2 {
		grid-template-columns: 1fr;
	}

	.dbp-widget {
		min-height: 1080px;
	}
}

/* ───── Property gallery (carousel) ───── */
.dbp-gallery {
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 0.75rem;
}

.dbp-gallery-strip {
	display: flex;
	gap: 0.5rem;
	height: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

.dbp-gallery-strip::-webkit-scrollbar {
	display: none;
}

.dbp-gallery-strip {
	scrollbar-width: none;
}

.dbp-gallery-strip>img {
	flex: 0 0 100%;
	height: 100%;
	object-fit: cover;
	scroll-snap-align: center;
	border-radius: 0.75rem;
	cursor: zoom-in;
	user-select: none;
}

/* Optional thumbnails (hidden by default; can be enabled later) */
.dbp-thumbs {
	display: none;
}

/* ───── Fullscreen modal for gallery ───── */
.modal,
.gallery-modal {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	display: none;
	z-index: 9999;
}

.modal.show,
.gallery-modal.show {
	display: block;
}

.modal-body,
.gallery-body {
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	padding: 1rem;
}

.modal-image-container,
.gallery-image-container {
	position: relative;
	max-width: min(1200px, 92vw);
	max-height: 88vh;
}

.modal-content,
.gallery-image {
	max-width: 100%;
	max-height: 88vh;
	display: block;
	border-radius: 0.5rem;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.modal-close,
.gallery-close {
	position: absolute;
	top: -16px;
	right: -16px;
	font-size: 32px;
	color: #fff;
	cursor: pointer;
	opacity: 0.9;
}

.modal-prev,
.modal-next,
.gallery-prev,
.gallery-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 40px;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	padding: 0.25rem 0.5rem;
	border-radius: 0.25rem;
	user-select: none;
}

.modal-prev,
.gallery-prev {
	left: -56px;
}

.modal-next,
.gallery-next {
	right: -56px;
}

@media (max-width: 960px) {

	.modal-prev,
	.gallery-prev {
		left: 8px;
	}

	.modal-next,
	.gallery-next {
		right: 8px;
	}

	.modal-close,
	.gallery-close {
		top: 8px;
		right: 12px;
	}
}

/* Remodel fullscreen modal */
.remodel-modal,
.gallery-modal {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1.5rem;
	background: radial-gradient(circle at 20% 20%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.8));
	backdrop-filter: blur(6px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.remodel-modal.show,
.gallery-modal.show {
	display: flex;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.remodel-modal .modal-body,
.gallery-modal .gallery-body {
	width: min(1200px, 96vw);
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 3vw, 1.75rem);
}

.remodel-modal .modal-image-container,
.gallery-modal .gallery-image-container {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: clamp(0.25rem, 1.5vw, 0.75rem);
	box-shadow: none;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}

@media (min-width: 769px) {

	.remodel-modal .modal-image-container,
	.gallery-modal .gallery-image-container {
		margin-top: 4rem;
	}
}

.remodel-modal .modal-content,
.gallery-modal .gallery-image {
	width: 100%;
	height: auto;
	max-height: 80vh;
	object-fit: contain;
	border-radius: 0.65rem;
}

/* .gallery-modal:not(.gallery-vertical) .gallery-image {
	max-width: 96vw;
	max-height: 78vh;
} */

.remodel-modal .modal-caption,
.gallery-modal .gallery-caption {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100%;
	gap: 0.75rem;
	color: #fff;
	font-size: 0.95rem;
	letter-spacing: 0.01em;
	padding: 0.25rem 0 0.125rem 0;
}

.remodel-modal .modal-description,
.gallery-modal .gallery-description {
	flex: 1;
	text-align: center;
	margin: 0 auto;
}

.remodel-modal .modal-indicator,
.gallery-modal .gallery-indicator {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	color: #dfe8ef;
	min-width: 4.5rem;
	text-align: right;
}

.remodel-modal .modal-close,
.remodel-modal .modal-prev,
.remodel-modal .modal-next,
.gallery-modal .gallery-close,
.gallery-modal .gallery-prev,
.gallery-modal .gallery-next {
	display: none;
	background: rgba(0, 0, 0, 0.75);
	border: none;
	color: #fff;
	width: 4.125rem;
	height: 4.125rem;
	border-radius: 999px;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(4px);
	transition: background-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.remodel-modal .modal-close.show,
.remodel-modal .modal-prev.show,
.remodel-modal .modal-next.show,
.gallery-modal .gallery-close.show,
.gallery-modal .gallery-prev.show,
.gallery-modal .gallery-next.show {
	display: inline-flex;
}

.remodel-modal .modal-close,
.gallery-modal .gallery-close {
	position: absolute;
	top: -3.5rem;
	right: -3.5rem;
	font-size: 1.5rem;
	line-height: 1;
	padding: 0.35rem;
	width: 2.9rem;
	height: 2.9rem;
	border-radius: 0.75rem;
}

.remodel-modal .modal-prev,
.remodel-modal .modal-next,
.gallery-modal .gallery-prev,
.gallery-modal .gallery-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.8rem;
}

.gallery-modal .gallery-close:active,
.gallery-modal .gallery-prev:active,
.gallery-modal .gallery-next:active {
	background: rgba(255, 255, 255, 0.12);
	color: #f0f4f8;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2);
}

.remodel-modal .modal-prev.is-disabled,
.remodel-modal .modal-next.is-disabled,
.gallery-modal .gallery-prev.is-disabled,
.gallery-modal .gallery-next.is-disabled {
	background: rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.35);
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2);
	opacity: 0.55;
	filter: grayscale(1);
	cursor: not-allowed;
	pointer-events: auto;
}

.remodel-modal .modal-prev,
.gallery-modal .gallery-prev {
	left: -5.25rem;
}

.remodel-modal .modal-next,
.gallery-modal .gallery-next {
	right: -5.25rem;
}

.remodel-modal .modal-prev:hover,
.remodel-modal .modal-next:hover,
.gallery-modal .gallery-prev:hover,
.gallery-modal .gallery-next:hover {
	background: rgba(0, 0, 0, 0.78);
	transform: translateY(-50%) scale(1.05);
}

.remodel-modal .modal-close:hover,
.gallery-modal .gallery-close:hover {
	background: rgba(0, 0, 0, 0.82);
	transform: scale(1.05);
	color: #ff4d4f;
}

/* Visual cues for gallery interactions */
.gallery-image.gallery-change-cue {
	animation: gallerySwapCue 0.22s ease;
}

.gallery-modal.gallery-close-cue {
	animation: galleryModalFade 0.22s ease forwards;
}

.gallery-modal.gallery-close-cue .gallery-image-container {
	animation: galleryCloseCard 0.22s ease forwards;
}

@keyframes gallerySwapCue {
	0% {
		transform: scale(0.995) translateY(2px);
		filter: brightness(0.97) saturate(0.96);
	}

	50% {
		transform: scale(1.008) translateY(0);
		filter: brightness(1.03) saturate(1.03);
	}

	100% {
		transform: scale(1);
		filter: none;
	}
}

@keyframes galleryCloseCard {
	from {
		transform: scale(1);
		opacity: 1;
		filter: blur(0px);
	}

	to {
		transform: scale(0.97);
		opacity: 0;
		filter: blur(2px);
	}
}

@keyframes galleryModalFade {
	from {
		opacity: 1;
		backdrop-filter: blur(6px);
	}

	to {
		opacity: 0;
		backdrop-filter: blur(3px);
	}
}

@media (max-width: 768px) {

	.remodel-modal,
	.gallery-modal {
		padding: 1rem;
	}

	.remodel-modal .modal-body,
	.gallery-modal .gallery-body {
		flex-direction: column;
		gap: 0.75rem;
		padding: 0.5rem 1rem 0.75rem;
	}

	.remodel-modal .modal-image-container,
	.gallery-modal .gallery-image-container {
		position: relative;
		padding: 0.75rem;
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		grid-template-areas:
			"close close close"
			"image image image"
			"caption caption caption"
			"prev indicator next";
		justify-items: center;
		row-gap: 0.85rem;
	}

	.remodel-modal .modal-prev,
	.remodel-modal .modal-next,
	.remodel-modal .modal-close,
	.gallery-modal .gallery-prev,
	.gallery-modal .gallery-next,
	.gallery-modal .gallery-close {
		width: 6.1875rem;
		height: 6.1875rem;
		font-size: 2.4rem;
		z-index: 3;
		pointer-events: auto;
	}

	.remodel-modal .modal-prev,
	.remodel-modal .modal-next,
	.gallery-modal .gallery-prev,
	.gallery-modal .gallery-next {
		position: static;
		transform: none;
		margin: 0 0.35rem;
		left: auto;
		right: auto;
		align-self: center;
		justify-self: center;
		box-shadow: none;
	}

	.remodel-modal .modal-close,
	.gallery-modal .gallery-close {
		position: static;
		align-self: flex-end;
		margin-bottom: 0.25rem;
		top: auto;
		right: auto;
		justify-self: end;
		width: 4.35rem;
		height: 4.35rem;
		border-radius: 0.9rem;
		font-size: 2rem;
		z-index: 3;
	}

	.remodel-modal .modal-content,
	.gallery-modal .gallery-image {
		grid-area: image;
	}

	.remodel-modal .modal-close,
	.gallery-modal .gallery-close {
		grid-area: close;
	}

	.gallery-modal .gallery-indicator {
		position: absolute;
		left: 0rem;
		top: 5rem;
		margin: 0;
		transform: none;
		line-height: 1.25;
		z-index: 2;
	}

	.remodel-modal .modal-caption,
	.gallery-modal .gallery-caption {
		grid-area: caption;
		flex-direction: column;
		gap: 0.35rem;
	}

	.remodel-modal .modal-description,
	.remodel-modal .modal-indicator,
	.gallery-modal .gallery-description,
	.gallery-modal .gallery-indicator {
		width: 100%;
		text-align: center;
	}

	.remodel-modal .modal-indicator,
	.gallery-modal .gallery-indicator {
		width: auto;
	}

	.remodel-modal .modal-prev,
	.gallery-modal .gallery-prev {
		grid-area: prev;
	}

	.remodel-modal .modal-next,
	.gallery-modal .gallery-next {
		grid-area: next;
	}

	.remodel-modal .modal-prev:hover,
	.remodel-modal .modal-next:hover,
	.gallery-modal .gallery-prev:hover,
	.gallery-modal .gallery-next:hover {
		background: rgba(0, 0, 0, 0.75);
		transform: none;
	}

	.remodel-modal .modal-prev.is-disabled,
	.remodel-modal .modal-next.is-disabled,
	.gallery-modal .gallery-prev.is-disabled,
	.gallery-modal .gallery-next.is-disabled {
		background: rgba(0, 0, 0, 0.3);
		color: rgba(255, 255, 255, 0.55);
	}

	.gallery-modal.gallery-vertical .gallery-image-container {
		margin-top: -3rem;
		/* padding-top: 0.75rem; */
	}

	.gallery-modal.gallery-vertical .gallery-image {
		max-height: 76vh;
	}
}

html.gallery-open,
body.gallery-open {
	overflow: hidden;
	height: 100%;
	overscroll-behavior: contain;
	touch-action: none;
}

/* ───── Inline gallery arrows + dots (desktop hover) ───── */
.dbp-gallery-controls {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.dbp-arrow,
.dbp-dots {
	display: none;
}

.dbp-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	font-size: 22px;
	line-height: 36px;
	text-align: center;
	cursor: pointer;
	pointer-events: auto;
	user-select: none;
}

.dbp-arrow:hover {
	background: rgba(0, 0, 0, 0.6);
}

.dbp-arrow.dbp-left {
	left: 8px;
}

.dbp-arrow.dbp-right {
	right: 8px;
}

.dbp-dots {
	position: absolute;
	left: 50%;
	bottom: 10px;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	pointer-events: auto;
}

.dbp-dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.65);
	border: 1px solid rgba(0, 0, 0, 0.25);
	display: inline-block;
}

.dbp-dot.active {
	background: #fff;
}

@media (hover: hover) and (pointer: fine) and (min-width: 961px) {

	.dbp-hero-media:hover .dbp-arrow,
	.dbp-hero-media:hover .dbp-dots {
		display: block;
	}
}

/* Modal explicit close button */
.modal-close-btn {
	position: absolute;
	top: 10px;
	left: 12px;
	padding: 0.5rem 0.75rem;
	border-radius: 0.4rem;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.35);
	cursor: pointer;
	font-weight: 700;
}

.modal-close-btn:hover {
	background: rgba(0, 0, 0, 0.7);
}

/* =========================
   #region DIRECT BOOKING PAGE (DBP)
   ========================= */

/* --- Title bar (aligned with page content) --- */
.dbp-title-bar {
	margin: 0 0 0.5rem 0;
	padding: 0 0 0.25rem 0;
}

/* Desktop: title aligns with main content (no extra left offset) */
@media (min-width: 64.01rem) {
	.dbp-title-bar {
		padding-left: 0;
		box-sizing: border-box;
	}
}

/* --- Collage gallery (left hero + right 2×2), capped height --- */
.dbp-wrap .dbp-gallery {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-rows: 1fr 1fr;
	gap: 0.75rem;
	margin-top: 0.75rem;
	align-items: stretch;
	/* height: 36rem; */
	max-height: 30rem;
	overflow: hidden;
	border-radius: 0.25rem;
}

.dbp-wrap .dbp-gallery .main {
	grid-row: 1 / -1;
	/* hero spans both rows */
	height: 100%;
	/* match the grid area height */
	overflow: hidden;
	border-radius: 0.25rem;
}

.dbp-wrap .dbp-gallery .main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	/* crop/zoom to fill without distortion */
	cursor: pointer;
	display: block;
}

.dbp-wrap .dbp-gallery .thumb-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* two columns */
	grid-template-rows: 1fr 1fr;
	/* two equal-height rows */
	gap: 0.75rem;
	/* vertical gap counts toward the 36rem total */
	height: 100%;
	/* fill the full 36rem */
	align-items: stretch;
	/* children fill each row */
	grid-row: 1 / -1;
	/* span both rows to match the hero */
}

.dbp-wrap .dbp-gallery .thumb {
	position: relative;
	overflow: hidden;
	border-radius: 0.25rem;
	height: 100%;
}

.dbp-wrap .dbp-gallery .thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	cursor: pointer;
}

/* --- Overview grid and sticky booking (desktop) --- */
.dbp-main-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 18rem;
	/* 18rem = 288px widget column */
	gap: 1rem;
	align-items: start;
	margin-top: 1rem;
}

/* Booking sidebar width locked to widget width */
.dbp-right {
	width: 18rem;
	/* 288px */
	min-width: 18rem;
	max-width: 18rem;
	align-self: start;
}

.dbp-sticky-booking {
	position: sticky;
	top: 5rem;
	/* start below the site header */
	align-self: start;
	/* avoid stretch to enable sticky correctly */
}

.dbp-widget-card {
	margin: 0;
}

/* --- Map embed --- */
.dbp-map-wrap {
	width: 100%;
	aspect-ratio: 16/10;
	border: 1px solid var(--border-color);
	border-radius: .5rem;
	overflow: hidden;
}

.dbp-map-wrap iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

/* --- Hide non-modal captions under collage --- */
.carousel-subtitle {
	display: none !important;
}

/* --- Quick facts & Amenities --- */
.dbp-quickfacts {
	margin: 0 0 .75rem 0;
}

.dbp-quickfacts .facts-title {
	font-weight: 700;
	color: var(--color-very-dark-gray);
	margin: 1.0rem 0 0 0;
}

.dbp-quickfacts .facts-line {
	color: var(--color-dark-gray);
	margin: 0 0 1.0rem 0;

}

#amenities h2 {
	margin-top: 1rem;
}

/* --- Amenities: two-column grid managed by JS; disables CSS masonry --- */
.amenities-grid {
	display: block;
	/* JS-managed layout; no CSS masonry */
	position: relative;
	/* keep fade overlay positioning */
}

/* Stable two-column layout applied by JS */
.amenities-grid.columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1rem 2rem;
	align-items: start;
}

.amenities-col {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	/* space between groups in each column */
	min-width: 0;
	/* prevent overflow in narrow viewports */
}

@media (max-width: 64rem) {
	.amenities-grid.columns {
		grid-template-columns: 1fr;
	}
}

.amenity-group {
	margin: 0 0 1rem 0;
}

.amenity-group h3 {
	margin: .25rem 0 .5rem;
	font-size: 1rem;
	color: var(--color-primary);
}

.amenity-group ul {
	list-style: none;
	margin: 0 0 .75rem 0;
	padding: 0;
}

.amenity-group li {
	position: relative;
	padding-left: 1rem;
	margin: .25rem 0;
}

.amenity-group li::before {
	content: "•";
	position: absolute;
	left: 0;
	color: var(--color-primary-alt);
}

@media (max-width: 64rem) {
	.amenities-grid.columns {
		grid-template-columns: 1fr;
	}
}

/* --- Mobile layout overrides --- */
@media (max-width: 64rem) {

	/* Show only the hero and make it full‑bleed across viewport */
	.dbp-wrap .dbp-gallery {
		grid-template-columns: 1fr;
		width: 100vw;
		/* full‑bleed */
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		height: auto;
		max-height: none;
		border-radius: 0;
		/* edge-to-edge */
	}

	.dbp-wrap .dbp-gallery .thumb-grid {
		display: none !important;
	}

	.dbp-wrap .dbp-gallery .main {
		height: auto;
	}

	.dbp-wrap .dbp-gallery .main img {
		width: 100%;
		height: auto;
	}

	.dbp-main-grid {
		grid-template-columns: 1fr;
	}

	.dbp-right {
		width: 100%;
		min-width: 0;
		max-width: none;
	}

	.dbp-sticky-booking {
		position: static;
		top: auto;
	}

	body {
		padding-bottom: 3.5rem;
	}

	/* space for mobile bar */
	.dbp-mobile-reserve-bar {
		display: flex;
	}
}

/* --- Mobile reserve bar --- */
.dbp-mobile-reserve-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	display: none;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: .75rem 1rem;
	background: var(--color-white);
	border-top: 1px solid var(--border-color);
	z-index: 1200;
}

.dbp-mobile-reserve-bar .dbp-reserve-btn {
	display: inline-block;
	padding: .625rem 1rem;
	border-radius: .5rem;
	background: var(--color-primary-alt);
	color: var(--color-white);
	text-decoration: none;
	font-weight: 700;
}


/* --- Amenities: collapsed preview + Show all toggle --- */
/* --- Amenities section styling --- */
#amenities {
	position: relative;
	border-radius: 0.5rem;
	background-color: var(--color-medium-light-gray);
	padding: 1rem;
}

#amenities .amenities-grid {
	position: relative;
	display: none;
	/* hide grouped amenities in preview; shown in modal only */
}

#amenities .amenities-grid.collapsed .amenity-item--hidden {
	display: none;
}

#amenities .amenities-grid.collapsed .amenity-group--hidden {
	display: none;
}

/* Subtle fade at bottom when collapsed (helps cue more content) */
#amenities .amenities-grid.collapsed::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.25rem;
	height: 3rem;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--dbp-bg));
}

/* Preview list (7 items, no headers) */
#amenities .amenities-preview {
	list-style: none;
	margin: 0;
	padding: 0;
}

#amenities .amenities-preview li {
	position: relative;
	padding-left: 1rem;
	margin: 0.25rem 0;
}

#amenities .amenities-preview li::before {
	content: "•";
	position: absolute;
	left: 0;
	color: var(--color-primary-alt);
}

/* Amenities modal panel */
#amenitiesModal .modal-body {
	place-items: center;
}

.amenities-modal-container {
	background: #fff;
	color: var(--dbp-text);
	max-width: min(900px, 92vw);
	max-height: 88vh;
	width: 100%;
	overflow: auto;
	border-radius: 0.5rem;
	padding: 1rem 1.25rem;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
}

.amenities-modal-container h2 {
	margin-top: 0;
}

.amenities-modal-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem 2rem;
}

@media (max-width: 64rem) {
	.amenities-modal-content {
		grid-template-columns: 1fr;
	}
}

/* Toggle button */
.amenities-toggle {
	margin-top: 0.5rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 0.875rem;
	border-radius: 0.5rem;
	border: 1px solid var(--dbp-border);
	background: #fff;
	color: var(--dbp-primary);
	font-weight: 700;
	cursor: pointer;
}

@media (min-width: 64.01rem) {
	.amenities-toggle:hover {
		color: var(--color-link-hover);
		border-color: var(--color-link-hover);
	}
}



/* =========================
   #endregion DIRECT BOOKING PAGE (DBP)
   ========================= */