/* Home Page — front-end design system.
   Every colour, width and size below comes from the custom properties written
   by the Design tab, so one change there moves the whole page. */
/* Sections: layout, cards, accordions and carousels. */
/* ==========================================================================
   Home Page — front-end design system
   Every section shares one container, one type scale, one colour system.
   ========================================================================== */

.hp-section,
.hp-section * {
	box-sizing: border-box;
}

.hp-section {
	--hp-gap: 26px;
	position: relative;
	width: 100%;
	padding-block: var(--hp-pad, 88px);
	color: var(--hp-body, #5b6472);
	font-size: var(--hp-text, 16px);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

/* One container for all six sections — this is what keeps them aligned. */
.hp-container {
	width: 100%;
	max-width: calc(var(--hp-container, 1200px) + 40px);
	margin-inline: auto;
	padding-inline: 20px;
}

/* Consecutive sections with the same background collapse their padding a
   little so the page reads as one rhythm rather than stacked blocks. */
.hp-stack > .hp-section + .hp-section {
	padding-top: calc(var(--hp-pad, 88px) * 0.82);
}

/* --------------------------------------------------------------- Headings */

.hp-head {
	margin-bottom: 48px;
	max-width: 720px;
}

.hp-head.is-center {
	margin-inline: auto;
	text-align: center;
}

.hp-head.is-left {
	margin-inline: 0;
	text-align: left;
}

.hp-eyebrow {
	display: inline-block;
	margin-bottom: 14px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--hp-accent-soft, #FEF9E7);
	color: var(--hp-accent, #B8922D);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	line-height: 1.4;
}

.hp-title {
	margin: 0;
	color: var(--hp-heading, #111827);
	font-size: clamp(26px, 4.2vw, var(--hp-h2, 38px));
	font-weight: 750;
	line-height: 1.16;
	letter-spacing: -0.022em;
}

.hp-sub {
	margin: 16px 0 0;
	font-size: clamp(14px, 2vw, calc(var(--hp-text, 16px) + 1px));
	line-height: 1.7;
	color: var(--hp-body, #5b6472);
}

.hp-head.is-center .hp-sub {
	margin-inline: auto;
}

/* --------------------------------------------------------------- Primitives */

.hp-card {
	background: var(--hp-card-bg, #fff);
	border: 1px solid var(--hp-border, #e6e9ee);
	border-radius: var(--hp-radius, 16px);
	box-shadow: var(--hp-shadow, none);
}

.hp-ph {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #eef1f5, #e2e7ee);
}

.hp-empty {
	padding: 28px;
	border: 1px dashed var(--hp-border, #e6e9ee);
	border-radius: var(--hp-radius, 16px);
	text-align: center;
	color: var(--hp-body);
	font-size: 14px;
}

.hp-empty a {
	color: var(--hp-accent, #B8922D);
	font-weight: 600;
}

.hp-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	color: var(--hp-heading, #111827);
	transition: transform .28s cubic-bezier(.2, .8, .2, 1), background-color .28s, color .28s;
}

.hp-arrow svg {
	width: 17px;
	height: 17px;
}

/* --------------------------------------------------------------- Carousel shell */

.hp-carousel .swiper {
	overflow: hidden;
	padding-block: 4px;
}

.hp-carousel.is-static .swiper-wrapper {
	display: grid;
	grid-template-columns: repeat(var(--hp-cols, 3), minmax(0, 1fr));
	gap: var(--hp-gap);
	transform: none !important;
}

.hp-carousel.is-static .swiper-slide {
	width: auto !important;
	margin: 0 !important;
	height: auto;
}

.hp-carousel .swiper-slide {
	height: auto;
	display: flex;
}

.hp-carousel .swiper-slide > * {
	width: 100%;
}

.hp-nav {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: 34px;
}

.hp-carousel.has-nav .hp-nav {
	display: flex;
}

.hp-nav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--hp-border, #e6e9ee);
	border-radius: 50%;
	background: var(--hp-card-bg, #fff);
	color: var(--hp-heading, #111827);
	cursor: pointer;
	transition: background-color .25s, color .25s, border-color .25s, transform .25s;
}

.hp-nav-btn svg {
	width: 19px;
	height: 19px;
}

.hp-nav-btn:hover {
	background: var(--hp-accent, #B8922D);
	border-color: var(--hp-accent, #B8922D);
	color: #fff;
}

.hp-nav-btn:disabled,
.hp-nav-btn.swiper-button-disabled {
	opacity: .35;
	cursor: default;
	transform: none;
}

.hp-nav-btn:disabled:hover,
.hp-nav-btn.swiper-button-disabled:hover {
	background: var(--hp-card-bg, #fff);
	border-color: var(--hp-border, #e6e9ee);
	color: var(--hp-heading, #111827);
}

.hp-dots {
	display: flex;
	align-items: center;
	gap: 7px;
}

.hp-dots .swiper-pagination-bullet {
	width: 7px;
	height: 7px;
	margin: 0 !important;
	border-radius: 999px;
	background: var(--hp-border, #e6e9ee);
	opacity: 1;
	transition: width .3s, background-color .3s;
}

.hp-dots .swiper-pagination-bullet-active {
	width: 26px;
	background: var(--hp-accent, #B8922D);
}

/* ==========================================================================
   1 — DESTINATIONS
   ========================================================================== */

.hp-dest-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, border-color .35s;
}

a.hp-dest-card:hover {
	transform: translateY(-6px);
	border-color: color-mix(in srgb, var(--hp-accent, #B8922D) 30%, var(--hp-border, #e6e9ee));
	box-shadow: 0 18px 40px -14px rgba(16, 24, 40, .22);
}

.hp-dest-media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #eef1f5;
}

.hp-dest-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

a.hp-dest-card:hover .hp-dest-media img {
	transform: scale(1.06);
}

.hp-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 5px 11px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(6px);
	color: var(--hp-heading, #111827);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	line-height: 1.4;
}

.hp-dest-body {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 18px 20px 20px;
}

.hp-dest-name {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--hp-heading, #111827);
	font-size: calc(var(--hp-text, 16px) + 2px);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.35;
}

.hp-dest-sub {
	flex: 1 0 100%;
	order: 3;
	margin-top: 2px;
	font-size: 13px;
	color: var(--hp-body, #5b6472);
}

a.hp-dest-card:hover .hp-arrow {
	background: var(--hp-accent, #B8922D);
	color: #fff;
	transform: translateX(3px);
}

/* ==========================================================================
   2 — DELIGHT ACCORDION
   ========================================================================== */

.hp-delight-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 48px;
	align-items: start;
}

.hp-delight-grid.media-left .hp-delight-list {
	order: 2;
}

.hp-delight-grid.media-left .hp-delight-media {
	order: 1;
}

.hp-delight-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.hp-acc-item {
	background: var(--hp-card-bg, #fff);
	border: 1px solid var(--hp-border, #e6e9ee);
	border-radius: calc(var(--hp-radius, 16px) - 2px);
	overflow: hidden;
	transition: border-color .3s, box-shadow .3s, background-color .3s;
}

.hp-acc-item.is-open {
	border-color: color-mix(in srgb, var(--hp-accent, #B8922D) 42%, transparent);
	box-shadow: 0 10px 30px -14px color-mix(in srgb, var(--hp-accent, #B8922D) 55%, transparent);
}

.hp-acc-btn {
	display: flex;
	align-items: center;
	gap: 15px;
	width: 100%;
	padding: 18px 20px;
	border: 0;
	background: none;
	font: inherit;
	text-align: left;
	color: var(--hp-heading, #111827);
	cursor: pointer;
}

.hp-acc-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--hp-accent-soft, #FEF9E7);
	color: var(--hp-accent, #B8922D);
	transition: background-color .3s, color .3s;
}

.hp-acc-ico svg {
	width: 20px;
	height: 20px;
}

.hp-acc-item.is-open .hp-acc-ico {
	background: var(--hp-accent, #B8922D);
	color: #fff;
}

.hp-acc-label {
	flex: 1 1 auto;
	min-width: 0;
	font-size: calc(var(--hp-text, 16px) - 1px);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1.45;
}

.hp-acc-chev {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--hp-body, #5b6472);
	transition: transform .32s cubic-bezier(.2, .8, .2, 1), color .3s;
}

.hp-acc-chev svg {
	width: 19px;
	height: 19px;
}

.hp-acc-item.is-open .hp-acc-chev {
	transform: rotate(180deg);
	color: var(--hp-accent, #B8922D);
}

.hp-acc-panel {
	overflow: hidden;
	height: 0;
	transition: height .34s cubic-bezier(.2, .8, .2, 1);
}

.hp-acc-panel[hidden] {
	display: block;
	height: 0;
}

.hp-acc-inner {
	padding: 0 20px 20px 75px;
	font-size: calc(var(--hp-text, 16px) - 1px);
}

.hp-acc-inner > *:first-child {
	margin-top: 0;
}

.hp-acc-inner > *:last-child {
	margin-bottom: 0;
}

.hp-acc-inner ul {
	margin: 10px 0 0;
	padding-left: 18px;
}

.hp-acc-inner li {
	margin-bottom: 6px;
}

.hp-acc-inner a {
	color: var(--hp-accent, #B8922D);
	font-weight: 600;
}

/* Inline image only used on small screens */
.hp-acc-media-inline {
	display: none;
	margin-top: 16px;
	border-radius: calc(var(--hp-radius, 16px) - 4px);
	overflow: hidden;
}

.hp-acc-media-inline img {
	width: 100%;
	height: auto;
	display: block;
}

.hp-delight-media {
	position: sticky;
	top: 24px;
}

.hp-delight-frame {
	position: relative;
	aspect-ratio: 5 / 4;
	border-radius: calc(var(--hp-radius, 16px) + 4px);
	overflow: hidden;
	background: #eef1f5;
	box-shadow: 0 24px 60px -22px rgba(16, 24, 40, .34);
}

.hp-delight-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity .32s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
}

.hp-delight-frame.is-swapping .hp-delight-img {
	opacity: 0;
	transform: scale(1.03);
}

/* ==========================================================================
   3 — FEATURE GRID
   ========================================================================== */

.hp-feat-grid {
	display: grid;
	grid-template-columns: repeat(var(--hp-feat-cols, 5), minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hp-feat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 26px 16px;
	border-radius: var(--hp-radius, 16px);
	text-align: center;
	transition: background-color .3s, transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, border-color .3s;
}

.hp-feat-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--hp-accent-soft, #FEF9E7);
	color: var(--hp-accent, #B8922D);
	transition: background-color .3s, color .3s, transform .35s cubic-bezier(.2, .8, .2, 1);
}

.hp-feat-ico svg {
	width: 24px;
	height: 24px;
}

.hp-feat-title {
	color: var(--hp-heading, #111827);
	font-size: calc(var(--hp-text, 16px) - 1px);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.005em;
}

.hp-feat-desc {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--hp-body, #5b6472);
}

.hp-feat:hover .hp-feat-ico {
	background: var(--hp-accent, #B8922D);
	color: #fff;
	transform: translateY(-3px);
}

/* style variants */
.hp-feat-grid.style-card .hp-feat {
	background: var(--hp-card-bg, #fff);
	border: 1px solid var(--hp-border, #e6e9ee);
}

.hp-feat-grid.style-card .hp-feat:hover {
	transform: translateY(-5px);
	box-shadow: var(--hp-shadow, none);
	border-color: color-mix(in srgb, var(--hp-accent, #B8922D) 32%, var(--hp-border, #e6e9ee));
}

.hp-feat-grid.style-tile .hp-feat {
	background: color-mix(in srgb, var(--hp-accent-soft, #FEF9E7) 55%, transparent);
}

.hp-feat-grid.style-tile .hp-feat:hover {
	background: var(--hp-accent-soft, #FEF9E7);
	transform: translateY(-4px);
}

.hp-feat-grid.style-bubble .hp-feat:hover {
	background: color-mix(in srgb, var(--hp-accent-soft, #FEF9E7) 45%, transparent);
}

/* ==========================================================================
   4 — PROMO BENTO
   ========================================================================== */

.hp-bento {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: minmax(128px, auto);
	gap: 18px;
}

.hp-bento-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px 26px;
	border-radius: var(--hp-radius, 16px);
	background: var(--hp-accent-soft, #FEF9E7);
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	isolation: isolate;
	transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s;
}

a.hp-bento-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 44px -18px rgba(16, 24, 40, .28);
}

.hp-bento-card.is-tall {
	grid-row: span 2;
}

.hp-bento-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

.hp-bento-title {
	color: var(--hp-heading, #111827);
	font-size: calc(var(--hp-text, 16px) + 3px);
	font-weight: 750;
	line-height: 1.3;
	letter-spacing: -0.015em;
}

.hp-bento-desc {
	font-size: 14px;
	line-height: 1.6;
	color: var(--hp-body, #5b6472);
	max-width: 44ch;
}

a.hp-bento-card:hover .hp-arrow {
	transform: translateX(4px);
}

.hp-bento-art {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	margin-top: auto;
	padding-top: 18px;
}

.hp-bento-art img {
	width: 100%;
	max-width: 260px;
	height: auto;
	display: block;
}

/* full-bleed image card */
.hp-bento-card.is-cover {
	justify-content: flex-end;
	min-height: 260px;
	padding: 22px;
	background: #e9edf2;
}

.hp-bento-cover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
	transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

a.hp-bento-card.is-cover:hover .hp-bento-cover {
	transform: scale(1.05);
}

.hp-bento-scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(10, 14, 22, 0) 38%, rgba(10, 14, 22, .58) 100%);
}

.hp-bento-card.is-cover .hp-bento-title {
	color: #fff;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}

.hp-bento-card.is-cover .hp-bento-desc {
	color: rgba(255, 255, 255, .88);
}

.hp-bento-pill {
	align-self: stretch;
	margin-top: 14px;
	padding: 13px 18px;
	border-radius: 999px;
	background: #fff;
	color: var(--hp-heading, #111827);
	font-size: 14.5px;
	font-weight: 700;
	text-align: center;
	line-height: 1.4;
	box-shadow: 0 8px 24px -10px rgba(16, 24, 40, .4);
	transition: background-color .28s, color .28s;
}

a.hp-bento-card:hover .hp-bento-pill {
	background: var(--hp-accent, #B8922D);
	color: #fff;
}

/* ==========================================================================
   5 — REVIEWS
   ========================================================================== */

.hp-review {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	height: 100%;
	margin: 0;
	padding: 30px 28px 26px;
	overflow: hidden;
}

.hp-quote {
	position: absolute;
	top: -18px;
	right: 16px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 110px;
	line-height: 1;
	color: var(--hp-accent-soft, #FEF9E7);
	pointer-events: none;
	user-select: none;
}

.hp-stars {
	display: flex;
	gap: 3px;
}

.hp-star {
	width: 17px;
	height: 17px;
	fill: #dfe4ea;
}

.hp-star.is-on {
	fill: #f5b016;
}

.hp-review-text {
	flex: 1 1 auto;
	margin: 0;
	font-size: calc(var(--hp-text, 16px) - 1px);
	line-height: 1.7;
	color: var(--hp-heading, #111827);
}

.hp-review-text p {
	margin: 0 0 10px;
}

.hp-review-text p:last-child {
	margin-bottom: 0;
}

.hp-review-foot {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 18px;
	border-top: 1px solid var(--hp-border, #e6e9ee);
}

.hp-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--hp-accent-soft, #FEF9E7);
	color: var(--hp-accent, #B8922D);
}

.hp-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hp-avatar-ini {
	font-size: 17px;
	font-weight: 700;
	text-transform: uppercase;
}

.hp-review-meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 auto;
}

.hp-review-name {
	color: var(--hp-heading, #111827);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
}

.hp-review-role {
	font-size: 13px;
	color: var(--hp-body, #5b6472);
	line-height: 1.4;
}

.hp-review-src {
	flex: 0 0 auto;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--hp-accent-soft, #FEF9E7);
	color: var(--hp-accent, #B8922D);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .03em;
	white-space: nowrap;
}

/* ==========================================================================
   6 — FAQ
   ========================================================================== */

.hp-faq-grid {
	display: grid;
	gap: 12px;
}

.hp-faq-grid.layout-narrow {
	max-width: 860px;
	margin-inline: auto;
}

.hp-faq-grid.layout-two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: 12px 20px;
}

.hp-faq-item {
	background: var(--hp-card-bg, #fff);
	border: 1px solid var(--hp-border, #e6e9ee);
	border-radius: calc(var(--hp-radius, 16px) - 2px);
	overflow: hidden;
	transition: border-color .3s, box-shadow .3s;
}

.hp-faq-item.is-open {
	border-color: color-mix(in srgb, var(--hp-accent, #B8922D) 38%, transparent);
	box-shadow: 0 10px 28px -16px rgba(16, 24, 40, .3);
}

.hp-faq-btn {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
	padding: 20px 22px;
	border: 0;
	background: none;
	font: inherit;
	text-align: left;
	color: var(--hp-heading, #111827);
	cursor: pointer;
}

.hp-faq-q {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.hp-faq-cat {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hp-accent, #B8922D);
}

.hp-faq-qtext {
	font-size: calc(var(--hp-text, 16px));
	font-weight: 650;
	line-height: 1.5;
	letter-spacing: -0.008em;
}

.hp-faq-plus {
	position: relative;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--hp-accent-soft, #FEF9E7);
	transition: background-color .3s, transform .35s cubic-bezier(.2, .8, .2, 1);
}

.hp-faq-plus::before,
.hp-faq-plus::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--hp-accent, #B8922D);
	border-radius: 2px;
	transform: translate(-50%, -50%);
	transition: opacity .3s, background-color .3s;
}

.hp-faq-plus::before {
	width: 13px;
	height: 2px;
}

.hp-faq-plus::after {
	width: 2px;
	height: 13px;
}

.hp-faq-item.is-open .hp-faq-plus {
	background: var(--hp-accent, #B8922D);
	transform: rotate(180deg);
}

.hp-faq-item.is-open .hp-faq-plus::before,
.hp-faq-item.is-open .hp-faq-plus::after {
	background: #fff;
}

.hp-faq-item.is-open .hp-faq-plus::after {
	opacity: 0;
}

.hp-faq-panel {
	overflow: hidden;
	height: 0;
	transition: height .32s cubic-bezier(.2, .8, .2, 1);
}

.hp-faq-panel[hidden] {
	display: block;
	height: 0;
}

.hp-faq-inner {
	padding: 0 22px 22px;
	font-size: calc(var(--hp-text, 16px) - 1px);
	line-height: 1.72;
}

.hp-faq-inner > *:first-child {
	margin-top: 0;
}

.hp-faq-inner > *:last-child {
	margin-bottom: 0;
}

.hp-faq-inner a {
	color: var(--hp-accent, #B8922D);
	font-weight: 600;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1100px) {
	.hp-section {
		--hp-gap: 20px;
	}

	.hp-delight-grid {
		gap: 36px;
	}

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

@media (max-width: 980px) {
	.hp-section {
		padding-block: calc(var(--hp-pad, 88px) * 0.72);
	}

	.hp-head {
		margin-bottom: 36px;
	}

	.hp-delight-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.hp-delight-grid.media-left .hp-delight-list,
	.hp-delight-grid.media-left .hp-delight-media {
		order: 0;
	}

	/* On tablet/mobile the image lives inside the open panel instead. */
	.hp-delight-media {
		display: none;
	}

	.hp-acc-media-inline {
		display: block;
	}

	.hp-acc-inner {
		padding-left: 20px;
	}

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

	.hp-faq-grid.layout-two {
		grid-template-columns: minmax(0, 1fr);
		max-width: 860px;
		margin-inline: auto;
	}
}

@media (max-width: 720px) {
	.hp-container {
		padding-inline: 16px;
	}

	.hp-section {
		padding-block: calc(var(--hp-pad, 88px) * 0.6);
		--hp-gap: 14px;
	}

	.hp-head {
		margin-bottom: 28px;
		text-align: left;
	}

	.hp-head.is-center {
		text-align: left;
	}

	.hp-head.is-center .hp-sub {
		margin-inline: 0;
	}

	.hp-sub {
		margin-top: 12px;
	}

	/* Carousels take over: one card plus a peek of the next. */
	.hp-carousel.is-static .swiper-wrapper {
		display: flex;
		gap: 0;
	}

	.hp-nav {
		margin-top: 24px;
		justify-content: flex-start;
	}

	.hp-nav-btn {
		display: none;
	}

	.hp-carousel.has-nav .hp-nav {
		display: flex;
	}

	.hp-feat-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.hp-feat {
		padding: 20px 10px;
		gap: 10px;
	}

	.hp-feat-ico {
		width: 48px;
		height: 48px;
	}

	.hp-feat-ico svg {
		width: 21px;
		height: 21px;
	}

	.hp-bento {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: auto;
		gap: 12px;
	}

	.hp-bento-card.is-tall {
		grid-row: span 1;
	}

	.hp-bento-card {
		padding: 20px 22px;
	}

	.hp-bento-card.is-cover {
		min-height: 300px;
	}

	.hp-acc-btn {
		padding: 16px 16px;
		gap: 12px;
	}

	.hp-acc-ico {
		width: 36px;
		height: 36px;
		border-radius: 10px;
	}

	.hp-acc-ico svg {
		width: 18px;
		height: 18px;
	}

	.hp-acc-inner {
		padding: 0 16px 18px;
	}

	.hp-faq-btn {
		padding: 17px 16px;
		gap: 12px;
	}

	.hp-faq-inner {
		padding: 0 16px 18px;
	}

	.hp-review {
		padding: 24px 22px 22px;
	}

	.hp-review-src {
		display: none;
	}

	.hp-dest-body {
		padding: 15px 16px 17px;
	}
}

@media (max-width: 420px) {
	.hp-feat-title {
		font-size: 13.5px;
	}

	.hp-acc-label {
		font-size: 13px;
	}
}

/* ==========================================================================
   MOTION / A11Y
   ========================================================================== */

.hp-acc-btn:focus-visible,
.hp-faq-btn:focus-visible,
.hp-nav-btn:focus-visible,
.hp-dest-card:focus-visible,
.hp-bento-card:focus-visible {
	outline: 2px solid var(--hp-accent, #B8922D);
	outline-offset: 3px;
	border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
	.hp-section *,
	.hp-section *::before,
	.hp-section *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}


/* Responsive system. Every mobile slider is CSS scroll-snap, so a section
   can never disappear because a script failed to run. */
/* ======================================================================
   RESPONSIVE SYSTEM (PURE CSS, NO JS DEPENDENCY)
   Theme colour: #B8922D  |  Soft: #FEF9E7
   The mobile slider uses scroll-snap, so it can never fail to render.
   ====================================================================== */

:root {
	--hp-gold: var(--hp-accent, #B8922D);
	--hp-gold-dark: var(--hp-accent-dark, #9A7826);
	--hp-gold-soft: var(--hp-accent-soft, #FEF9E7);
	--hp-gold-line: var(--hp-accent-line, rgba(184, 146, 45, .28));
	--hp-ink: var(--hp-heading, #1F2430);
	--hp-muted: var(--hp-body, #6B7280);
	--hp-card: var(--hp-card-bg, #ffffff);
	--hp-line: var(--hp-border, #E8E6E1);
	--hp-peek: 86%;
}

/* ======================================================================
   WHY CHOOSE US — FEATURE GRID
   Desktop: 4 per row, extras wrap onto the next row.
   Mobile: horizontal scroll-snap slider, 1 full card + a peek of the next.
   ====================================================================== */

.hp-feat-grid,
.hp-feat-grid.style-card,
.hp-feat-grid.style-tile,
.hp-feat-grid.style-bubble {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
}

.hp-feat {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	background: var(--hp-card);
	border: 1px solid var(--hp-line);
	border-radius: 14px;
	padding: 30px 20px;
	overflow: hidden;
	transition: border-color .28s ease, box-shadow .28s ease, transform .28s ease;
}

.hp-feat::after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--hp-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .32s cubic-bezier(.4, 0, .2, 1);
}

.hp-feat:hover {
	border-color: var(--hp-gold);
	box-shadow: 0 14px 34px rgba(184, 146, 45, .16);
	transform: translateY(-4px);
}

.hp-feat:hover::after {
	transform: scaleX(1);
}

.hp-feat-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 14px;
	background: var(--hp-gold-soft);
	color: var(--hp-gold);
	transition: background .28s ease, color .28s ease, transform .28s ease;
}

.hp-feat-ico svg {
	width: 26px;
	height: 26px;
	stroke: currentColor;
	color: currentColor;
}

.hp-feat:hover .hp-feat-ico {
	background: var(--hp-gold);
	color: #fff;
	transform: scale(1.08);
}

.hp-feat-title {
	display: block;
	font-size: 16px;
	font-weight: 600;
	color: var(--hp-ink);
	line-height: 1.35;
	transition: color .28s ease;
}

.hp-feat:hover .hp-feat-title {
	color: var(--hp-gold);
}

.hp-feat-desc {
	display: block;
	font-size: 14px;
	line-height: 1.65;
	color: var(--hp-muted);
}

/* ---------------------------------------------------------------- arrow */

.hp-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: var(--hp-gold);
	flex-shrink: 0;
	transition: transform .28s ease;
}

.hp-arrow svg {
	width: 20px;
	height: 20px;
}

.hp-dest-card:hover .hp-arrow {
	transform: translateX(4px);
}

/* ======================================================================
   TABLET
   ====================================================================== */

@media (max-width: 1100px) {
	.hp-feat-grid,
	.hp-feat-grid.style-card,
	.hp-feat-grid.style-tile,
	.hp-feat-grid.style-bubble {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 16px;
	}
}

@media (max-width: 900px) {
	.hp-feat-grid,
	.hp-feat-grid.style-card,
	.hp-feat-grid.style-tile,
	.hp-feat-grid.style-bubble {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.hp-feat {
		padding: 24px 16px;
	}
}

/* ======================================================================
   MOBILE — SCROLL-SNAP SLIDER
   ====================================================================== */

@media (max-width: 680px) {

	.hp-feat-grid,
	.hp-feat-grid.style-card,
	.hp-feat-grid.style-tile,
	.hp-feat-grid.style-bubble {
		display: flex !important;
		grid-template-columns: none !important;
		flex-wrap: nowrap;
		gap: 12px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		padding-bottom: 14px;
		margin-bottom: -6px;
	}

	.hp-feat-grid::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}

	.hp-feat {
		flex: 0 0 var(--hp-peek);
		width: var(--hp-peek);
		max-width: var(--hp-peek);
		scroll-snap-align: start;
		scroll-snap-stop: always;
		padding: 24px 18px;
	}

	.hp-feat-ico {
		width: 50px;
		height: 50px;
	}

	.hp-feat-ico svg {
		width: 23px;
		height: 23px;
	}

	.hp-feat-title {
		font-size: 15px;
	}

	.hp-feat-desc {
		font-size: 13px;
	}

	/* Hover lift feels wrong on touch. */
	.hp-feat:hover {
		transform: none;
	}
}

/* Very small phones — wider card, smaller peek. */
@media (max-width: 400px) {
	:root {
		--hp-peek: 89%;
	}
}

/* ======================================================================
   SWIPE HINT — shown only under the mobile slider
   ====================================================================== */

.hp-swipe-hint {
	display: none;
}

@media (max-width: 680px) {
	.hp-swipe-hint {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 7px;
		margin-top: 12px;
		font-size: 12px;
		font-weight: 500;
		color: var(--hp-gold);
		letter-spacing: .2px;
	}

	.hp-swipe-hint::before,
	.hp-swipe-hint::after {
		content: "";
		width: 22px;
		height: 1px;
		background: var(--hp-gold-line);
	}
}

/* ======================================================================
   DARK MODE
   ====================================================================== */

@media (prefers-color-scheme: dark) {
	.hp-feat {
		background: #16181D;
		border-color: #2C2F36;
	}

	.hp-feat-title {
		color: #F3F4F6;
	}

	.hp-feat-desc {
		color: #A8ADB8;
	}

	.hp-feat-ico {
		background: rgba(184, 146, 45, .16);
	}
}

/* ======================================================================
   REDUCED MOTION
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {
	.hp-feat,
	.hp-feat::after,
	.hp-feat-ico,
	.hp-arrow {
		transition: none !important;
	}

	.hp-feat:hover {
		transform: none;
	}
}


/* Blog cards. */
/* ======================================================================
   FORTUNE HOME — BLOG SLIDER CARDS
   Layout: featured image, then title, 3-line description, Read More.
   Nothing is overlaid on the image.
   ====================================================================== */

.hp-blog-carousel {
	position: relative;
	width: 100%;
}

.hp-blog-carousel .swiper {
	width: 100%;
	padding-bottom: 4px;
}

/* ---- No-JS fallback ------------------------------------------------
   Until the script adds .is-ready, the slides lay out as a plain grid.
   If Swiper never loads, this is what the visitor sees — the posts are
   already in the HTML, so the section is never empty. ---------------- */

.hp-blog-carousel:not(.is-ready) .swiper {
	overflow: visible;
}

.hp-blog-carousel:not(.is-ready) .swiper-wrapper {
	display: grid;
	grid-template-columns: repeat(var(--hp-blog-cols, 4), minmax(0, 1fr));
	gap: 24px;
	transform: none !important;
}

.hp-blog-carousel:not(.is-ready) .swiper-slide {
	width: auto !important;
	margin: 0 !important;
}

.hp-blog-carousel:not(.is-ready) .hp-nav {
	display: none;
}

@media (max-width: 1200px) {
	.hp-blog-carousel:not(.is-ready) .swiper-wrapper {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 980px) {
	.hp-blog-carousel:not(.is-ready) .swiper-wrapper {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px;
	}
}

@media (max-width: 680px) {
	.hp-blog-carousel:not(.is-ready) .swiper-wrapper {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}
}

/* ---- Swiper active ---- */

.hp-blog-carousel.is-ready .swiper {
	overflow: hidden;
}

/* Slides stretch so every card in view matches the tallest one. */
.hp-blog-carousel .swiper-wrapper {
	align-items: stretch;
}

.hp-blog-carousel .swiper-slide {
	height: auto;
	display: flex;
}

/* ---------------------------------------------------------------- card */

.hp-blog-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--hp-card, #fff);
	border: 1px solid var(--hp-line, #E8E6E1);
	border-radius: 14px;
	overflow: hidden;
	transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.hp-blog-card:hover {
	border-color: var(--hp-gold, #B8922D);
	box-shadow: 0 16px 38px rgba(31, 36, 48, .13);
	transform: translateY(-4px);
}

/* ---------------------------------------------------------------- image */

.hp-blog-media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--hp-gold-soft, #FEF9E7);
	flex-shrink: 0;
}

.hp-blog-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.hp-blog-card:hover .hp-blog-img {
	transform: scale(1.05);
}

.hp-blog-img-empty {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--hp-gold, #B8922D);
	opacity: .3;
}

.hp-blog-img-empty svg {
	width: 40px;
	height: 40px;
}

/* ---------------------------------------------------------------- body */

.hp-blog-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 20px 18px 18px;
}

.hp-blog-chip {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	padding: 5px 11px;
	margin-bottom: 11px;
	border-radius: 999px;
	background: var(--hp-gold-soft, #FEF9E7);
	color: var(--hp-gold-dark, #9A7826);
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .5px;
	text-transform: uppercase;
}

.hp-blog-title {
	margin: 0 0 9px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--hp-ink, #1F2430);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hp-blog-title a {
	color: inherit;
	text-decoration: none;
	transition: color .26s ease;
}

.hp-blog-card:hover .hp-blog-title a {
	color: var(--hp-gold, #B8922D);
}

/* Description — exactly three lines, then ellipsis. */
.hp-blog-excerpt {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.65;
	color: var(--hp-muted, #6B7280);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(3 * 1.65em);
}

/* ---------------------------------------------------------------- button */

.hp-blog-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	align-self: flex-start;
	margin-top: auto;
	padding: 11px 22px;
	border-radius: 999px;
	background: var(--hp-gold, #B8922D);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background .26s ease, gap .26s ease, box-shadow .26s ease;
}

.hp-blog-btn svg {
	width: 15px;
	height: 15px;
}

.hp-blog-btn:hover,
.hp-blog-btn:focus-visible {
	background: var(--hp-gold-dark, #9A7826);
	color: #fff;
	gap: 11px;
	box-shadow: 0 6px 16px rgba(184, 146, 45, .3);
}

/* ---------------------------------------------------------------- message */

.hp-blog-msg {
	width: 100%;
	box-sizing: border-box;
	padding: 44px 20px;
	text-align: center;
	border: 1px dashed var(--hp-gold-line, rgba(184, 146, 45, .28));
	border-radius: 14px;
	background: var(--hp-gold-soft, #FEF9E7);
	color: var(--hp-muted, #6B7280);
	font-size: 14px;
}

/* ---------------------------------------------------------------- nav */

.hp-blog-carousel .hp-nav {
	display: none;
}

.hp-blog-carousel.is-ready.has-nav .hp-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 26px;
}

/* ---------------------------------------------------------------- mobile */

@media (max-width: 680px) {
	.hp-blog-body {
		padding: 17px 15px 15px;
	}

	.hp-blog-title {
		font-size: 16px;
	}

	.hp-blog-excerpt {
		font-size: 13.5px;
		margin-bottom: 15px;
	}

	.hp-blog-btn {
		padding: 10px 20px;
	}

	.hp-blog-card:hover {
		transform: none;
	}
}

/* ---------------------------------------------------------------- dark */

@media (prefers-color-scheme: dark) {
	.hp-blog-card {
		background: #16181D;
		border-color: #2C2F36;
	}

	.hp-blog-title {
		color: #F3F4F6;
	}

	.hp-blog-excerpt {
		color: #A8ADB8;
	}

	.hp-blog-chip {
		background: rgba(184, 146, 45, .16);
		color: #D8B653;
	}

}

/* ---------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
	.hp-blog-card,
	.hp-blog-img,
	.hp-blog-title a,
	.hp-blog-btn {
		transition: none !important;
	}

	.hp-blog-card:hover {
		transform: none;
	}

	.hp-blog-card:hover .hp-blog-img {
		transform: none;
	}

}


/* Reveal on scroll. */
/* ======================================================================
   FORTUNE HOME - LAZY LOADING ANIMATIONS
   Professional fade-in, slide-up, and stagger effects
   ====================================================================== */

/* ======================================================================
   ANIMATION KEYFRAMES
   ====================================================================== */

@keyframes hp-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes hp-slide-up {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes hp-slide-in-left {
	from {
		opacity: 0;
		transform: translateX(-24px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes hp-scale-in {
	from {
		opacity: 0;
		transform: scale(0.95);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* ======================================================================
   LAZY LOAD STATE
   Initial state - hidden and ready for animation
   ====================================================================== */

.hp-lazy {
	opacity: 0;
	transform: translateY(24px);
	will-change: opacity, transform;
}

/* ======================================================================
   LOADED STATE - Apply animation
   ====================================================================== */

.hp-loaded {
	animation: hp-slide-up 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
	animation-delay: var(--hp-animation-delay, 0ms);
}

/* ======================================================================
   SECTION-SPECIFIC ANIMATIONS
   ====================================================================== */

/* Feature Boxes - Slide up with stagger */
.hp-feat-grid.style-card .hp-feat.hp-lazy {
	opacity: 0;
	transform: translateY(30px);
}

.hp-feat-grid.style-card .hp-feat.hp-loaded {
	animation: hp-slide-up 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Destination Cards - Fade in */
.hp-dest-card.hp-lazy {
	opacity: 0;
	transform: translateY(20px);
}

.hp-dest-card.hp-loaded {
	animation: hp-slide-up 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Delight Items - Slide in from left */
.hp-delight-item.hp-lazy {
	opacity: 0;
	transform: translateX(-24px);
}

.hp-delight-item.hp-loaded {
	animation: hp-slide-in-left 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Review Cards - Fade and scale */
.hp-review-card.hp-lazy {
	opacity: 0;
	transform: scale(0.95) translateY(12px);
}

.hp-review-card.hp-loaded {
	animation: hp-scale-in 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* FAQ Items - Slide up */
.hp-faq-item.hp-lazy {
	opacity: 0;
	transform: translateY(16px);
}

.hp-faq-item.hp-loaded {
	animation: hp-slide-up 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ======================================================================
   RESPONSIVE ADJUSTMENTS
   ====================================================================== */

@media (max-width: 768px) {
	.hp-lazy {
		transform: translateY(16px);
	}

	.hp-loaded {
		animation-duration: 0.6s;
	}

	.hp-blog-image {
		height: 160px;
	}

	.hp-blog-content {
		padding: 16px;
	}

	.hp-blog-title {
		font-size: 14px;
	}

	.hp-blog-excerpt {
		font-size: 13px;
		-webkit-line-clamp: 2;
	}
}

/* ======================================================================
   REDUCED MOTION SUPPORT
   Respect user's motion preferences
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {
	.hp-lazy {
		opacity: 1;
		transform: none;
	}

	.hp-loaded {
		animation: none;
	}

	.hp-blog-card,
	.hp-blog-link {
		transition: none;
	}

	.hp-blog-card:hover {
		transform: none;
	}
}

/* ======================================================================
   LOADING SKELETON (Optional)
   Show during loading before lazy animation
   ====================================================================== */

.hp-loading-skeleton {
	background: linear-gradient(
		90deg,
		#f0f0f0 25%,
		#e0e0e0 50%,
		#f0f0f0 75%
	);
	background-size: 200% 100%;
	animation: hp-loading-pulse 1.5s infinite;
}

@keyframes hp-loading-pulse {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

/* ======================================================================
   STAGGER EFFECT HELPER
   For use with [data-hp-stagger] attribute
   ====================================================================== */

[data-hp-stagger] .hp-lazy {
	animation: hp-slide-up 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ======================================================================
   DARK MODE SUPPORT
   ====================================================================== */

@media (prefers-color-scheme: dark) {
	.hp-blog-card {
		background: #1a1a1a;
		border-color: #333333;
	}

	.hp-blog-card:hover {
		border-color: #B8922D;
		box-shadow: 0 12px 32px rgba(184, 146, 45, 0.2);
	}

	.hp-blog-category {
		background: rgba(184, 146, 45, 0.15);
		color: #C4A237;
	}

	.hp-blog-title {
		color: #ffffff;
	}

	.hp-blog-excerpt {
		color: #cccccc;
	}

	.hp-blog-meta {
		border-top-color: #333333;
	}

	.hp-blog-date {
		color: #888888;
	}

	.hp-loading-skeleton {
		background: linear-gradient(
			90deg,
			#2a2a2a 25%,
			#333333 50%,
			#2a2a2a 75%
		);
	}
}


/* Hero slider. */
.hp-hero,
.hp-hero * {
	box-sizing: border-box;
}

.hp-hero {
	--hp-hero-desktop-height: 650px;
	--hp-hero-mobile-height: 560px;
	--hp-hero-transition: 900ms;
	--hp-hero-booking-width: 1180px;
	--hp-hero-booking-overlap: 42px;
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: none;
}

.hp-hero-full-bleed {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.hp-hero-stage {
	position: relative;
	height: var(--hp-hero-desktop-height);
	min-height: 300px;
	overflow: hidden;
	background: #1b1b1b;
}

.hp-hero-slides,
.hp-hero-slide,
.hp-hero-media,
.hp-hero-media img,
.hp-hero-media video,
.hp-hero-overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.hp-hero-slide {
	z-index: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--hp-hero-transition) ease, visibility var(--hp-hero-transition) ease;
}

.hp-hero-slide.is-active {
	z-index: 1;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.hp-hero-media img,
.hp-hero-media video {
	object-fit: cover;
	object-position: center;
}

.hp-hero-overlay {
	z-index: 1;
}

.hp-hero-content-wrap {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	width: min(1180px, calc(100% - 48px));
	height: 100%;
	margin: 0 auto;
}

.hp-hero-content {
	width: min(560px, 100%);
	text-shadow: 0 2px 12px rgba(0, 0, 0, .2);
}

.hp-hero-align-left {
	justify-content: flex-start;
	text-align: left;
}

.hp-hero-align-center {
	justify-content: center;
	text-align: center;
}

.hp-hero-align-right {
	justify-content: flex-end;
	text-align: right;
}

.hp-hero-content h2 {
	margin: 0 0 16px;
	color: inherit;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: clamp(38px, 5vw, 72px);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -.025em;
}

.hp-hero-content p {
	margin: 0 0 24px;
	color: inherit;
	font-size: clamp(14px, 1.25vw, 18px);
	line-height: 1.65;
}

.hp-hero-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 12px 24px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .12em;
	text-decoration: none;
	text-transform: uppercase;
	transition: transform .2s ease, filter .2s ease;
}

.hp-hero-button:hover,
.hp-hero-button:focus {
	color: inherit;
	filter: brightness(.94);
	transform: translateY(-2px);
}

.hp-hero-arrow {
	position: absolute;
	z-index: 5;
	top: 50%;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid rgba(255,255,255,.55);
	border-radius: 50%;
	background: rgba(0,0,0,.2);
	color: #fff;
	font-family: Arial, sans-serif;
	font-size: 34px;
	line-height: 1;
	cursor: pointer;
	transform: translateY(-50%);
	transition: background .2s ease;
}

.hp-hero-arrow:hover,
.hp-hero-arrow:focus {
	background: rgba(0,0,0,.55);
}

.hp-hero-prev { left: 20px; }
.hp-hero-next { right: 20px; }

.hp-hero-dots {
	position: absolute;
	z-index: 5;
	left: 50%;
	bottom: 24px;
	display: flex;
	gap: 9px;
	transform: translateX(-50%);
}

.hp-hero-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 1px solid #fff;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.hp-hero-dot.is-active {
	background: #fff;
}

.hp-hero-booking-wrap {
	position: relative;
	z-index: 10;
	width: min(var(--hp-hero-booking-width), calc(100% - 48px));
	margin: calc(var(--hp-hero-booking-overlap) * -1) auto 0;
}

.hp-hero-booking-card {
	width: 100%;
	
}

.hp-hero-booking-card > :first-child {
	margin-top: 0;
}

.hp-hero-booking-card > :last-child {
	margin-bottom: 0;
}

.hp-hero-admin-notice {
	padding: 12px 16px;
	border-left: 4px solid #d63638;
	background: #fff;
}

@media (max-width: 767px) {
	.hp-hero-full-bleed {
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}

	.hp-hero-stage {
		height: var(--hp-hero-mobile-height);
	}

	.hp-hero-content-wrap {
		width: calc(100% - 40px);
		padding-top: 24px;
		padding-bottom: 70px;
	}

	.hp-hero-content h2 {
		font-size: clamp(34px, 11vw, 52px);
	}

	.hp-hero-align-left,
	.hp-hero-align-center,
	.hp-hero-align-right {
		justify-content: flex-start;
		text-align: left;
	}

	.hp-hero-arrow {
		top: auto;
		bottom: 18px;
		width: 40px;
		height: 40px;
		transform: none;
	}

	.hp-hero-prev { left: 20px; }
	.hp-hero-next { right: 20px; }

	.hp-hero-dots {
		bottom: 34px;
	}

	.hp-hero-booking-wrap {
		width: calc(100% - 28px);
		margin-top: calc(min(var(--hp-hero-booking-overlap), 28px) * -1);
	}

	.hp-hero-booking-card {
		padding: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hp-hero-slide,
	.hp-hero-button,
	.hp-hero-arrow {
		transition: none;
	}
}


/* A shortcode row from the layout. It sits in the same rhythm as the sections
   around it, or runs edge to edge when that is what the content wants. */
.hp-custom > .hp-container > *:first-child { margin-top: 0; }
.hp-custom.is-full { padding-left: 0; padding-right: 0; }
.hp-custom.is-full > .hp-head { padding-inline: clamp(18px, 5vw, 40px); }
.hp-custom img,
.hp-custom iframe,
.hp-custom video { max-width: 100%; }
.hp-custom iframe { border: 0; }

a {
    text-decoration: none !important;
}
a,
a:hover,
a:focus,
a:active,
a:visited {
    text-decoration: none !important;
}