/* ==========================================================================
   VPAAL Templates — single + archive layouts
   Brand tokens sampled from VPAAL Logo.png. No font-family is declared
   anywhere in this file: typography families are handled globally.
   ========================================================================== */

.vpaal-tpl {
	--vp-gold: #C9992E;
	--vp-gold-deep: #B48418;
	--vp-gold-light: #E4B448;
	--vp-forest: #0F2A16;
	--vp-green-mid: #1C4A2B;
	--vp-ink: #0C0C0C;
	--vp-muted: #5A5A55;
	--vp-base: #FFFFFF;
	--vp-warm: #FBF9F4;
	--vp-line: rgba(12, 12, 12, .12);
	--vp-line-soft: rgba(12, 12, 12, .07);
	--vp-line-inv: rgba(255, 255, 255, .16);

	--vp-grad: linear-gradient(99deg, #B48418 0%, #E4B448 55%, #C9992E 100%);

	--vp-wrap: 1140px;
	--vp-gut: 10px;

	--vp-r: 10px;
	--vp-r-lg: 16px;

	--vp-1: 4px;
	--vp-2: 8px;
	--vp-3: 12px;
	--vp-4: 16px;
	--vp-5: 24px;
	--vp-6: 32px;
	--vp-7: 48px;
	--vp-8: 64px;
	--vp-9: 96px;
	--vp-10: 128px;

	--vp-ease: cubic-bezier(.22, 1, .36, 1);
}

@media (min-width: 768px) {
	.vpaal-tpl { --vp-gut: 32px; }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

.vpaal-tpl .vp-tpl {
	color: var(--vp-ink);
	background: var(--vp-base);
	overflow-x: clip;
}

.vpaal-tpl .vp-tpl *,
.vpaal-tpl .vp-tpl *::before,
.vpaal-tpl .vp-tpl *::after { box-sizing: border-box; }

.vpaal-tpl .vp-tpl img { max-width: 100%; height: auto; display: block; }

/* ONE page width, everywhere.
   The Elementor global kit sets container_width 1140px with 10px mobile
   gutters. Every wrapper below resolves to exactly that, so these templates
   line up with the homepage and every Elementor-built page.
   `min()` keeps the 10px gutter on anything narrower than 1160 without
   introducing a second, different width. */
.vp-wrap {
	width: min(var(--vp-wrap), 100% - 20px);
	max-width: none;
	margin-inline: auto;
	padding-inline: 0;
}

/* --wide used to be 1440px, which is what broke the alignment. It is now the
   same 1140 as everything else; the class is kept so existing markup works. */
.vp-wrap--wide {
	width: min(var(--vp-wrap), 100% - 20px);
	max-width: none;
}

/* The only deliberate exception: long-form reading measure, centred inside
   the same 1140 column. */
.vp-wrap--narrow {
	width: min(760px, 100% - 20px);
	max-width: none;
}

.vp-sec { padding-block: clamp(56px, 8vw, 112px); }
.vp-sec--warm { background: var(--vp-warm); }
.vp-sec--dark { background: var(--vp-forest); color: #fff; }
.vp-sec--tight { padding-block: clamp(40px, 5vw, 72px); }

/* --------------------------------------------------------------------------
   Type primitives (sizes only — families inherit from the global kit)
   -------------------------------------------------------------------------- */

.vp-eyebrow {
	display: inline-block;
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--vp-gold-deep);
	font-weight: 500;
	margin-bottom: var(--vp-3);
}

.vp-sec--dark .vp-eyebrow,
.vp-cta .vp-eyebrow { color: var(--vp-gold-light); }

.vp-h1 {
	font-size: clamp(38px, 6.2vw, 78px);
	line-height: 1.02;
	letter-spacing: -.03em;
	font-weight: 700;
	margin: 0;
}

.vp-h2 {
	font-size: clamp(30px, 4vw, 52px);
	line-height: 1.06;
	letter-spacing: -.025em;
	font-weight: 700;
	margin: 0;
}

.vp-h3 {
	font-size: clamp(21px, 2.2vw, 28px);
	line-height: 1.18;
	letter-spacing: -.015em;
	font-weight: 700;
	margin: 0;
}

.vp-lede {
	font-size: clamp(17px, 1.5vw, 21px);
	line-height: 1.6;
	color: var(--vp-muted);
	max-width: 62ch;
	margin: var(--vp-4) 0 0;
}

.vp-sec--dark .vp-lede,
.vp-cta .vp-lede { color: rgba(255, 255, 255, .74); }

.vp-prose { font-size: 17px; line-height: 1.72; color: #232320; max-width: 68ch; }
.vp-prose > * + * { margin-top: 1.1em; }
.vp-prose h2 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.16; letter-spacing: -.02em; margin-top: 1.9em; }
.vp-prose h3 { font-size: clamp(19px, 2vw, 23px); line-height: 1.25; margin-top: 1.6em; }
.vp-prose a { color: var(--vp-gold-deep); text-underline-offset: 3px; }
.vp-prose ul, .vp-prose ol { padding-left: 1.15em; }
.vp-prose li + li { margin-top: .45em; }
.vp-prose blockquote {
	margin: 1.8em 0;
	padding: 0 0 0 var(--vp-5);
	border-left: 2px solid var(--vp-gold);
	font-size: clamp(19px, 2vw, 24px);
	line-height: 1.42;
	letter-spacing: -.015em;
	color: var(--vp-ink);
}
.vp-prose img { border-radius: var(--vp-r); margin-block: 1.6em; }

/* --------------------------------------------------------------------------
   Media
   -------------------------------------------------------------------------- */

.vp-media { width: 100%; height: 100%; object-fit: cover; }

.vp-media--empty {
	display: grid;
	place-items: center;
	background: linear-gradient(140deg, #16341f, #0F2A16 60%, #1C4A2B);
	color: rgba(255, 255, 255, .5);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: .04em;
	min-height: 160px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.vpaal-tpl .vp-btn {
	--btn-bg: var(--vp-ink);
	--btn-fg: #fff;
	--btn-edge: var(--vp-gold-deep);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 26px;
	border: 0;
	border-radius: 12px;
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .01em;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 4px 0 0 var(--btn-edge);
	transform: translateY(0);
	transition: transform .18s var(--vp-ease), box-shadow .18s var(--vp-ease), background .18s var(--vp-ease);
}

.vpaal-tpl .vp-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 0 var(--btn-edge); }
.vpaal-tpl .vp-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 0 var(--btn-edge); }
.vpaal-tpl .vp-btn:focus-visible { outline: 2px solid var(--vp-gold); outline-offset: 3px; }

.vpaal-tpl .vp-btn--gold { --btn-bg: var(--vp-gold); --btn-fg: #1a1405; --btn-edge: var(--vp-gold-deep); }
.vpaal-tpl .vp-btn--ghost {
	--btn-bg: transparent;
	--btn-fg: var(--vp-ink);
	box-shadow: inset 0 0 0 1px var(--vp-line);
}
.vpaal-tpl .vp-btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--vp-ink); transform: translateY(-2px); }
.vpaal-tpl .vp-btn--block { width: 100%; }

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */

.vp-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.vp-crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .4; }
.vp-crumbs a { color: inherit; opacity: .65; text-decoration: none; }
.vp-crumbs a:hover { opacity: 1; }
.vp-crumbs [aria-current] { opacity: .45; }

/* --------------------------------------------------------------------------
   Filters
   -------------------------------------------------------------------------- */

.vp-filters {
	display: flex;
	align-items: center;
	gap: var(--vp-4);
	flex-wrap: wrap;
	padding-block: var(--vp-4);
}

.vp-filters__label {
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--vp-muted);
	flex: 0 0 auto;
}

.vp-filters__pills { display: flex; gap: 8px; flex-wrap: wrap; }

.vp-pill {
	appearance: none;
	border: 1px solid var(--vp-line);
	background: transparent;
	color: var(--vp-ink);
	border-radius: 999px;
	padding: 9px 16px;
	font-size: 13.5px;
	font-weight: 500;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	text-decoration: none;
	transition: background .2s var(--vp-ease), border-color .2s var(--vp-ease), color .2s var(--vp-ease);
}
.vp-pill:hover { border-color: var(--vp-ink); }
.vp-pill.is-active { background: var(--vp-ink); border-color: var(--vp-ink); color: #fff; }
.vp-pill__n { font-size: 11px; opacity: .5; }
.vp-pill.is-active .vp-pill__n { opacity: .65; }

.vp-filterbar {
	position: sticky;
	top: 0;
	z-index: 20;
	background: rgba(255, 255, 255, .88);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--vp-line-soft);
}

.vp-empty {
	display: none;
	padding: var(--vp-9) 0;
	text-align: center;
	color: var(--vp-muted);
}
.vp-empty.is-on { display: block; }

.vp-more { display: flex; justify-content: center; padding-top: var(--vp-7); }
.vp-count { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--vp-muted); }

/* --------------------------------------------------------------------------
   Enquiry / booking card
   -------------------------------------------------------------------------- */

.vp-book {
	background: var(--vp-base);
	border: 1px solid var(--vp-line);
	border-radius: var(--vp-r-lg);
	padding: var(--vp-6);
	box-shadow: 0 24px 60px -34px rgba(12, 12, 12, .35);
}

.vp-book--sticky { position: sticky; top: 24px; }
.vp-book--warm { background: var(--vp-warm); }

.vp-book__head { margin-bottom: var(--vp-5); }
.vp-book__title { font-size: 22px; line-height: 1.2; letter-spacing: -.02em; font-weight: 700; margin: 0; }
.vp-book__title em { font-style: italic; color: var(--vp-gold-deep); }

.vp-book__facts {
	display: grid;
	gap: 0;
	margin: 0 0 var(--vp-5);
	border-top: 1px solid var(--vp-line-soft);
}
.vp-book__facts > div {
	display: flex;
	justify-content: space-between;
	gap: var(--vp-4);
	padding: 11px 0;
	border-bottom: 1px solid var(--vp-line-soft);
}
.vp-book__facts dt { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--vp-muted); margin: 0; }
.vp-book__facts dd { margin: 0; font-size: 14.5px; font-weight: 600; text-align: right; }

.vp-book__alt {
	display: flex;
	gap: var(--vp-4);
	flex-wrap: wrap;
	margin-top: var(--vp-5);
	padding-top: var(--vp-4);
	border-top: 1px solid var(--vp-line-soft);
}
.vp-book__link { font-size: 13px; color: var(--vp-muted); text-decoration: none; border-bottom: 1px solid var(--vp-line); }
.vp-book__link:hover { color: var(--vp-gold-deep); border-color: var(--vp-gold); }

.vp-field { margin-bottom: var(--vp-4); }
.vp-field label {
	display: block;
	font-size: 11.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--vp-muted);
	margin-bottom: 6px;
}
.vpaal-tpl .vp-field input,
.vpaal-tpl .vp-field textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--vp-line);
	border-radius: 8px;
	background: #fff;
	color: var(--vp-ink);
	font-size: 15px;
	font-family: inherit;
	transition: border-color .18s var(--vp-ease), box-shadow .18s var(--vp-ease);
}
.vpaal-tpl .vp-field input:focus,
.vpaal-tpl .vp-field textarea:focus {
	outline: none;
	border-color: var(--vp-gold);
	box-shadow: 0 0 0 3px rgba(201, 153, 46, .16);
}
.vpaal-tpl .vp-field textarea { resize: vertical; min-height: 84px; }
.vp-field--split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--vp-3); }

.vp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.vp-form__status { font-size: 13.5px; margin: var(--vp-3) 0 0; min-height: 1em; }
.vp-form__status.is-ok { color: var(--vp-green-mid); }
.vp-form__status.is-err { color: #a3312a; }
.vp-form.is-sending { opacity: .6; pointer-events: none; }

/* --------------------------------------------------------------------------
   Related rail
   -------------------------------------------------------------------------- */

.vp-rail { padding-block: clamp(56px, 7vw, 96px); }
.vp-rail--warm { background: var(--vp-warm); }
.vp-rail__head { margin-bottom: var(--vp-6); }

.vp-rail__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(240px, 1fr);
	gap: var(--vp-4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: var(--vp-3);
	scrollbar-width: thin;
}
.vp-rail__track > * { scroll-snap-align: start; }

.vp-rcard { text-decoration: none; color: inherit; display: block; }
.vp-rcard__media {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--vp-r);
	background: var(--vp-warm);
}
.vp-rcard__media .vp-media { transition: transform .7s var(--vp-ease); }
.vp-rcard:hover .vp-rcard__media .vp-media { transform: scale(1.05); }
.vp-rcard__body { display: flex; justify-content: space-between; gap: var(--vp-3); align-items: baseline; padding-top: var(--vp-3); }
.vp-rcard__body h3 { font-size: 16px; line-height: 1.25; letter-spacing: -.01em; font-weight: 600; margin: 0; }
.vp-rcard__go { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--vp-muted); flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   Trust strip
   -------------------------------------------------------------------------- */

.vp-trust { border-block: 1px solid var(--vp-line-soft); background: var(--vp-warm); }
.vp-trust ul {
	list-style: none;
	margin: 0;
	padding: var(--vp-5) 0;
	display: grid;
	gap: var(--vp-3) var(--vp-6);
	grid-template-columns: repeat(2, 1fr);
	font-size: 12.5px;
	letter-spacing: .04em;
	color: var(--vp-muted);
}
.vp-trust li { position: relative; padding-left: 18px; }
.vp-trust li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .52em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--vp-gold);
}
@media (min-width: 900px) { .vp-trust ul { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------------------------
   Scroll reveal
   -------------------------------------------------------------------------- */

.vp-rv {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .7s var(--vp-ease), transform .7s var(--vp-ease);
	/* Failsafe: if the script ever fails to load, content still appears. */
	animation: vp-rv-failsafe 0s linear 2.5s forwards;
}
.vp-rv.is-in { opacity: 1; transform: none; }
@keyframes vp-rv-failsafe { to { opacity: 1; transform: none; } }
@media (scripting: none) { .vp-rv { opacity: 1; transform: none; animation: none; } }

@media (prefers-reduced-motion: reduce) {
	.vpaal-tpl * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
	.vp-rv { opacity: 1; transform: none; }
}


/* ==========================================================================
   1. SAFARI — single: cinematic expedition dossier
   ========================================================================== */

.vp-shero { position: relative; min-height: min(58vh, 505px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; }
.vp-shero__bg { position: absolute; inset: 0; }
.vp-shero__bg .vp-media { width: 100%; height: 100%; }
.vp-shero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(12,12,12,.5) 0%, rgba(12,12,12,.1) 35%, rgba(12,12,12,.82) 100%);
}
.vp-shero__inner { position: relative; width: 100%; padding-block: clamp(27px, 4vw, 54px); }
.vp-shero__tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--vp-4); }
.vp-tag {
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 6px 12px;
	border: 1px solid rgba(255,255,255,.34);
	border-radius: 999px;
	backdrop-filter: blur(6px);
}
.vp-shero .vp-h1 { max-width: 15ch; }
.vp-shero__sub { margin-top: var(--vp-4); max-width: 56ch; font-size: clamp(16px,1.5vw,19px); line-height: 1.55; color: rgba(255,255,255,.8); }

.vp-facts { border-bottom: 1px solid var(--vp-line); background: var(--vp-base); }
.vp-facts__grid { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; }
.vp-facts__grid > div { padding: var(--vp-5) 0; border-bottom: 1px solid var(--vp-line-soft); }
.vp-facts__grid > div + div { border-left: 1px solid var(--vp-line-soft); padding-left: var(--vp-5); }
.vp-facts dt { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--vp-muted); margin-bottom: 6px; }
.vp-facts dd { margin: 0; font-size: clamp(17px, 1.8vw, 22px); font-weight: 700; letter-spacing: -.02em; }
@media (min-width: 860px) {
	.vp-facts__grid { grid-template-columns: repeat(4, 1fr); }
	.vp-facts__grid > div { border-bottom: 0; padding-left: var(--vp-5); }
	.vp-facts__grid > div:first-child { padding-left: 0; }
}

.vp-split { display: grid; gap: var(--vp-8); align-items: start; }
@media (min-width: 1000px) {
	.vp-split { grid-template-columns: minmax(0, 1fr) 366px; gap: var(--vp-9); }
}

.vp-hl { list-style: none; margin: 0; padding: 0; counter-reset: hl; border-top: 1px solid var(--vp-line-soft); }
.vp-hl li {
	counter-increment: hl;
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: var(--vp-4);
	padding: var(--vp-4) 0;
	border-bottom: 1px solid var(--vp-line-soft);
	font-size: 16.5px;
	line-height: 1.5;
}
.vp-hl li::before {
	content: counter(hl, decimal-leading-zero);
	font-size: 12px;
	letter-spacing: .1em;
	color: var(--vp-gold-deep);
	font-weight: 600;
	padding-top: .35em;
}

.vp-itin { position: relative; padding-left: var(--vp-6); }
.vp-itin::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--vp-line); }
.vp-itin .vp-prose h3,
.vp-itin .vp-prose h4 { position: relative; }
.vp-itin .vp-prose h3::before,
.vp-itin .vp-prose h4::before {
	content: "";
	position: absolute;
	left: calc(var(--vp-6) * -1 + 1px);
	top: .5em;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--vp-gold);
	box-shadow: 0 0 0 4px var(--vp-base);
}
.vp-itin .vp-prose h3 { margin-top: 2.2em; }
.vp-itin .vp-prose > *:first-child { margin-top: 0; }

.vp-inex { display: grid; gap: var(--vp-6); }
@media (min-width: 720px) { .vp-inex { grid-template-columns: 1fr 1fr; gap: var(--vp-8); } }
.vp-inex ul { list-style: none; margin: var(--vp-4) 0 0; padding: 0; }
.vp-inex li { position: relative; padding: 9px 0 9px 28px; border-bottom: 1px solid var(--vp-line-soft); font-size: 15.5px; line-height: 1.5; }
.vp-inex li::before {
	position: absolute;
	left: 0;
	top: 9px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 11px;
	font-weight: 700;
}
.vp-inex--in li::before { content: "\2713"; background: rgba(28, 74, 43, .1); color: var(--vp-green-mid); }
.vp-inex--ex li::before { content: "\00d7"; background: rgba(12, 12, 12, .06); color: var(--vp-muted); }
.vp-inex--ex li { color: var(--vp-muted); }

.vp-block + .vp-block { margin-top: clamp(48px, 6vw, 80px); }
.vp-block__head { margin-bottom: var(--vp-5); }

.vp-anchors {
	position: sticky;
	top: 0;
	z-index: 15;
	background: rgba(255,255,255,.9);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--vp-line-soft);
}
.vp-anchors__inner { display: flex; gap: var(--vp-5); overflow-x: auto; scrollbar-width: none; }
.vp-anchors__inner::-webkit-scrollbar { display: none; }
.vp-anchors a {
	flex: 0 0 auto;
	padding: 16px 0;
	font-size: 12.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--vp-muted);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color .2s var(--vp-ease), border-color .2s var(--vp-ease);
}
.vp-anchors a:hover, .vp-anchors a.is-on { color: var(--vp-ink); border-color: var(--vp-gold); }


/* ==========================================================================
   1b. SAFARI — archive: asymmetric editorial index
   ========================================================================== */

.vp-ahead { padding-block: clamp(37px, 4.7vw, 69px) clamp(16px, 2vw, 27px); }
.vp-ahead__row { display: grid; gap: var(--vp-5); }
@media (min-width: 900px) { .vp-ahead__row { grid-template-columns: 1.35fr 1fr; align-items: end; gap: var(--vp-8); } }

.vp-sgrid { display: grid; gap: var(--vp-7) var(--vp-5); }
@media (min-width: 760px) { .vp-sgrid { grid-template-columns: 1fr 1fr; } }

.vp-scard { position: relative; text-decoration: none; color: inherit; display: block; }
.vp-scard--wide { grid-column: 1 / -1; }
.vp-scard__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--vp-r);
	background: var(--vp-warm);
	aspect-ratio: 4 / 3;
}
.vp-scard--wide .vp-scard__media { aspect-ratio: 16 / 8; }
.vp-scard__media .vp-media { transition: transform .8s var(--vp-ease); }
.vp-scard:hover .vp-scard__media .vp-media { transform: scale(1.045); }

.vp-scard__idx {
	position: absolute;
	top: var(--vp-4);
	left: var(--vp-4);
	z-index: 2;
	font-size: 11px;
	letter-spacing: .16em;
	color: #fff;
	mix-blend-mode: difference;
}
.vp-scard__price {
	position: absolute;
	right: var(--vp-4);
	bottom: var(--vp-4);
	z-index: 2;
	background: rgba(255,255,255,.94);
	color: var(--vp-ink);
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: -.01em;
}
.vp-scard__body { padding-top: var(--vp-4); display: grid; gap: 10px; }
.vp-scard__meta { display: flex; gap: var(--vp-3); flex-wrap: wrap; font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--vp-muted); }
.vp-scard__meta span + span::before { content: "\00b7"; margin-right: var(--vp-3); opacity: .5; }
.vp-scard__title { font-size: clamp(20px, 2.2vw, 27px); line-height: 1.14; letter-spacing: -.025em; font-weight: 700; margin: 0; }
.vp-scard--wide .vp-scard__title { font-size: clamp(26px, 3.4vw, 42px); }
.vp-scard__x { font-size: 15px; line-height: 1.55; color: var(--vp-muted); max-width: 54ch; }
.vp-scard__go {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 12px; letter-spacing: .13em; text-transform: uppercase;
	color: var(--vp-ink);
}
.vp-scard__go::after { content: "\2192"; transition: transform .3s var(--vp-ease); }
.vp-scard:hover .vp-scard__go::after { transform: translateX(5px); }

.vp-hidden { display: none !important; }


/* ==========================================================================
   2. DESTINATION — single: split atlas
   ========================================================================== */

.vp-dhero { background: var(--vp-warm); border-bottom: 1px solid var(--vp-line-soft); }
.vp-dhero__grid { display: grid; gap: 0; }
@media (min-width: 980px) { .vp-dhero__grid { grid-template-columns: 1.05fr 1fr; min-height: 48vh; } }
.vp-dhero__media { position: relative; overflow: hidden; aspect-ratio: 16/9; }
@media (min-width: 980px) { .vp-dhero__media { aspect-ratio: auto; } }
.vp-dhero__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(24px, 3.4vw, 51px) var(--vp-gut);
	max-width: 620px;
}
@media (min-width: 980px) { .vp-dhero__body { padding-left: clamp(40px, 5vw, 72px); } }
.vp-dhero__country { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--vp-gold-deep); font-weight: 600; }
.vp-dhero .vp-h1 { margin-top: var(--vp-3); }
.vp-dhero__stats { display: flex; gap: var(--vp-7); flex-wrap: wrap; margin: var(--vp-6) 0 0; padding-top: var(--vp-5); border-top: 1px solid var(--vp-line); }
.vp-dhero__stats dt { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--vp-muted); }
.vp-dhero__stats dd { margin: 5px 0 0; font-size: 17px; font-weight: 700; letter-spacing: -.015em; }

.vp-dcols { display: grid; gap: var(--vp-8); align-items: start; }
@media (min-width: 980px) { .vp-dcols { grid-template-columns: 240px minmax(0,1fr); gap: var(--vp-9); } }
.vp-dcols__aside h2 { font-size: clamp(24px,2.6vw,34px); line-height: 1.08; letter-spacing: -.025em; margin: 0; }
@media (min-width: 980px) { .vp-dcols__aside { position: sticky; top: 24px; } }

.vp-hlgrid { display: grid; gap: var(--vp-4); list-style: none; margin: 0; padding: 0; }
@media (min-width: 700px) { .vp-hlgrid { grid-template-columns: 1fr 1fr; } }
.vp-hlgrid li {
	background: #fff;
	border: 1px solid var(--vp-line-soft);
	border-radius: var(--vp-r);
	padding: calc(var(--vp-5) + 18px) var(--vp-5) var(--vp-5);
	font-size: 15.5px;
	line-height: 1.5;
	position: relative;
}
.vp-hlgrid li::before {
	content: "";
	position: absolute;
	top: var(--vp-5);
	left: var(--vp-5);
	width: 22px;
	height: 2px;
	background: var(--vp-gold);
}

.vp-map { border-radius: var(--vp-r-lg); overflow: hidden; border: 1px solid var(--vp-line); aspect-ratio: 16/9; background: var(--vp-warm); }
.vp-map iframe { width: 100%; height: 100%; border: 0; display: block; }


/* ==========================================================================
   2b. DESTINATION — archive: mosaic tiles
   ========================================================================== */

.vp-mos { display: grid; gap: var(--vp-4); }
@media (min-width: 700px) { .vp-mos { grid-template-columns: repeat(6, 1fr); } }

.vp-tile {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--vp-r);
	text-decoration: none;
	color: #fff;
	background: var(--vp-forest);
	aspect-ratio: 4/3;
}
@media (min-width: 700px) {
	.vp-tile { aspect-ratio: auto; }
	.vp-tile--lg { grid-column: span 4; min-height: 460px; }
	.vp-tile--md { grid-column: span 2; min-height: 460px; }
	.vp-tile--sm { grid-column: span 2; min-height: 320px; }
}
.vp-tile .vp-media { position: absolute; inset: 0; transition: transform .9s var(--vp-ease); }
.vp-tile:hover .vp-media { transform: scale(1.06); }
.vp-tile__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(12,12,12,.05) 30%, rgba(12,12,12,.78) 100%);
}
.vp-tile__body { position: absolute; inset: auto 0 0 0; padding: var(--vp-5); z-index: 2; }
.vp-tile__c { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--vp-gold-light); }
.vp-tile__t { font-size: clamp(20px, 2.4vw, 30px); line-height: 1.08; letter-spacing: -.025em; font-weight: 700; margin: 8px 0 0; }
.vp-tile__n { font-size: 12.5px; color: rgba(255,255,255,.72); margin: 8px 0 0; }


/* ==========================================================================
   3. EXPERIENCE — single: centred poster
   ========================================================================== */

.vp-xhero { background: var(--vp-warm); padding-block: clamp(32px, 4vw, 61px) 0; text-align: center; }
.vp-xhero .vp-crumbs ol { justify-content: center; }
.vp-xhero .vp-h1 { max-width: 18ch; margin-inline: auto; }
.vp-xhero__chips { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: var(--vp-5); }
.vp-chip {
	font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
	padding: 8px 15px; border-radius: 999px;
	background: #fff; border: 1px solid var(--vp-line-soft); color: var(--vp-muted);
}
.vp-chip strong { color: var(--vp-ink); font-weight: 600; }
.vp-xhero__media {
	margin-top: clamp(21px, 2.7vw, 37px);
	aspect-ratio: 32/9;
	overflow: hidden;
	border-radius: var(--vp-r-lg) var(--vp-r-lg) 0 0;
	background: var(--vp-forest);
	min-height: 150px;
}

.vp-xbody { display: grid; gap: var(--vp-8); align-items: start; }
@media (min-width: 1000px) { .vp-xbody { grid-template-columns: minmax(0,1fr) 320px; gap: var(--vp-9); } }

.vp-quick { border-top: 2px solid var(--vp-ink); margin: 0; }
.vp-quick > div { display: flex; justify-content: space-between; gap: var(--vp-4); padding: 13px 0; border-bottom: 1px solid var(--vp-line-soft); }
.vp-quick dt { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--vp-muted); margin: 0; }
.vp-quick dd { margin: 0; font-size: 14.5px; font-weight: 600; text-align: right; }

.vp-chips { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; margin: var(--vp-4) 0 0; padding: 0; }
.vp-chips li {
	font-size: 14px;
	padding: 10px 16px;
	border-radius: 999px;
	background: var(--vp-warm);
	border: 1px solid var(--vp-line-soft);
}


/* ==========================================================================
   3b. EXPERIENCE — archive: bento
   ========================================================================== */

.vp-bento { display: grid; gap: var(--vp-4); grid-auto-flow: dense; }
@media (min-width: 700px) { .vp-bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; } }

.vp-bcard {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	border-radius: var(--vp-r-lg);
	text-decoration: none;
	color: #fff;
	background: var(--vp-forest);
	padding: var(--vp-5);
	min-height: 280px;
}
@media (min-width: 700px) {
	.vp-bcard { min-height: 0; }
	.vp-bcard--a { grid-column: span 2; grid-row: span 2; }
	.vp-bcard--b { grid-column: span 2; grid-row: span 1; }
	.vp-bcard--c { grid-column: span 1; grid-row: span 1; }
}
.vp-bcard .vp-media { position: absolute; inset: 0; transition: transform .9s var(--vp-ease); }
.vp-bcard::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(12,12,12,.08) 25%, rgba(12,12,12,.8) 100%);
}
.vp-bcard:hover .vp-media { transform: scale(1.06); }
.vp-bcard__in { position: relative; z-index: 2; }
.vp-bcard__k { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--vp-gold-light); }
.vp-bcard__t { font-size: clamp(19px, 2vw, 27px); line-height: 1.1; letter-spacing: -.022em; font-weight: 700; margin: 9px 0 0; }
.vp-bcard__m { font-size: 13px; color: rgba(255,255,255,.74); margin-top: 9px; display: flex; gap: var(--vp-3); flex-wrap: wrap; }
.vp-bcard__m span + span::before { content: "\00b7"; margin-right: var(--vp-3); opacity: .55; }


/* ==========================================================================
   4. HOTEL — single: gallery mosaic + anchored sections
   ========================================================================== */

.vp-hgal { display: grid; gap: 8px; }
@media (min-width: 820px) { .vp-hgal { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; height: 42vh; max-height: 375px; } }
.vp-hgal__item { overflow: hidden; border-radius: var(--vp-r); background: var(--vp-warm); aspect-ratio: 16/10; margin: 0; }
@media (min-width: 820px) {
	.vp-hgal__item { aspect-ratio: auto; }
	.vp-hgal__item:first-child { grid-row: span 2; }
}
.vp-hgal__item .vp-media { transition: transform .8s var(--vp-ease); }
.vp-hgal__item:hover .vp-media { transform: scale(1.04); }

.vp-hbar { border-bottom: 1px solid var(--vp-line); }
.vp-hbar__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--vp-5); padding-block: var(--vp-6); }
.vp-hbar__stars { color: var(--vp-gold); font-size: 15px; letter-spacing: .18em; }
.vp-hbar__loc { font-size: 13.5px; color: var(--vp-muted); margin-top: 6px; display: flex; gap: var(--vp-3); flex-wrap: wrap; }
.vp-hbar__r { display: flex; align-items: center; gap: var(--vp-5); flex-wrap: wrap; }
.vp-hbar__price { text-align: right; margin: 0; }
.vp-hbar__price dt { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--vp-muted); }
.vp-hbar__price dd { margin: 4px 0 0; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }

.vp-hgrid { display: grid; gap: 0 var(--vp-6); list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px) { .vp-hgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .vp-hgrid { grid-template-columns: repeat(3, 1fr); } }
.vp-hgrid li {
	display: flex;
	align-items: flex-start;
	gap: var(--vp-3);
	padding: var(--vp-4) 0;
	border-bottom: 1px solid var(--vp-line-soft);
	font-size: 15px;
	line-height: 1.45;
}
.vp-hgrid li::before { content: ""; flex: 0 0 auto; width: 5px; height: 5px; margin-top: .55em; border-radius: 50%; background: var(--vp-gold); }


/* ==========================================================================
   4b. HOTEL — archive: dense directory rows
   ========================================================================== */

.vp-rows { border-top: 1px solid var(--vp-line); }
.vp-row {
	display: grid;
	gap: var(--vp-4);
	grid-template-columns: 96px minmax(0,1fr);
	align-items: center;
	padding: var(--vp-4) 0;
	border-bottom: 1px solid var(--vp-line-soft);
	text-decoration: none;
	color: inherit;
	transition: background .25s var(--vp-ease);
}
@media (min-width: 860px) {
	.vp-row { grid-template-columns: 150px minmax(0,1fr) 200px 130px; gap: var(--vp-6); padding: var(--vp-5) var(--vp-4); margin-inline: calc(var(--vp-4) * -1); border-radius: var(--vp-r); }
	.vp-row:hover { background: var(--vp-warm); }
}
.vp-row__media { aspect-ratio: 4/3; overflow: hidden; border-radius: 8px; background: var(--vp-warm); }
.vp-row__t { font-size: clamp(17px, 1.7vw, 21px); line-height: 1.2; letter-spacing: -.02em; font-weight: 700; margin: 0; }
.vp-row__s { font-size: 13.5px; color: var(--vp-muted); margin: 7px 0 0; line-height: 1.5; }
.vp-row__tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.vp-row__tag { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--vp-muted); border: 1px solid var(--vp-line); border-radius: 999px; padding: 4px 10px; }
.vp-row__stars { color: var(--vp-gold); font-size: 13px; letter-spacing: .16em; }
.vp-row__price { font-size: 14px; font-weight: 700; }
.vp-row__cta { text-align: right; font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: var(--vp-muted); margin-top: 6px; }
.vp-row__c { display: none; }
@media (min-width: 860px) { .vp-row__c { display: block; } }


/* ==========================================================================
   5. BLOG — single: editorial
   ========================================================================== */

.vp-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--vp-grad); z-index: 9999; }

.vp-bhero { padding-block: clamp(32px, 4vw, 64px) clamp(19px, 2vw, 29px); }
.vp-bhero__meta { display: flex; gap: var(--vp-4); flex-wrap: wrap; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--vp-muted); margin-top: var(--vp-5); }
.vp-bhero .vp-h1 { font-size: clamp(33px, 4.6vw, 60px); max-width: 20ch; }
.vp-bhero__img { aspect-ratio: 24/8; overflow: hidden; border-radius: var(--vp-r-lg); background: var(--vp-warm); margin-top: clamp(19px, 2vw, 29px); }

.vp-article { display: grid; gap: var(--vp-6); }
@media (min-width: 1000px) { .vp-article { grid-template-columns: 72px minmax(0,1fr); gap: var(--vp-8); } }
.vp-share { display: flex; gap: var(--vp-3); }
@media (min-width: 1000px) { .vp-share { position: sticky; top: 40px; flex-direction: column; align-self: start; } }
.vp-share__b {
	width: 40px; height: 40px;
	display: grid; place-items: center;
	border: 1px solid var(--vp-line);
	border-radius: 50%;
	font-size: 12px; font-weight: 600;
	color: var(--vp-muted);
	text-decoration: none;
	cursor: pointer;
	background: transparent;
	transition: border-color .2s var(--vp-ease), color .2s var(--vp-ease);
}
.vp-share__b:hover { border-color: var(--vp-ink); color: var(--vp-ink); }


/* ==========================================================================
   5b. BLOG — archive: magazine
   ========================================================================== */

.vp-lead { display: grid; gap: var(--vp-6); text-decoration: none; color: inherit; }
@media (min-width: 900px) { .vp-lead { grid-template-columns: 1.25fr 1fr; align-items: center; gap: var(--vp-8); } }
.vp-lead__media { aspect-ratio: 16/10; overflow: hidden; border-radius: var(--vp-r-lg); background: var(--vp-warm); }
.vp-lead__media .vp-media { transition: transform .8s var(--vp-ease); }
.vp-lead:hover .vp-lead__media .vp-media { transform: scale(1.04); }
.vp-lead__t { font-size: clamp(26px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -.028em; font-weight: 700; margin: var(--vp-4) 0 0; }
.vp-lead__x { font-size: 16px; line-height: 1.6; color: var(--vp-muted); margin-top: var(--vp-4); max-width: 52ch; }

.vp-plist { border-top: 1px solid var(--vp-line); margin-top: clamp(48px, 6vw, 80px); }
.vp-pitem {
	display: grid;
	gap: var(--vp-4);
	grid-template-columns: 1fr;
	padding: var(--vp-6) 0;
	border-bottom: 1px solid var(--vp-line-soft);
	text-decoration: none;
	color: inherit;
}
@media (min-width: 800px) { .vp-pitem { grid-template-columns: 150px minmax(0,1fr) 190px; gap: var(--vp-7); align-items: start; } }
.vp-pitem__date { font-size: 11.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--vp-muted); padding-top: 6px; }
.vp-pitem__t { font-size: clamp(20px, 2.1vw, 27px); line-height: 1.16; letter-spacing: -.022em; font-weight: 700; margin: 0; transition: color .2s var(--vp-ease); }
.vp-pitem:hover .vp-pitem__t { color: var(--vp-gold-deep); }
.vp-pitem__x { font-size: 15px; line-height: 1.6; color: var(--vp-muted); margin: 10px 0 0; max-width: 60ch; }
.vp-pitem__media { aspect-ratio: 4/3; overflow: hidden; border-radius: 8px; background: var(--vp-warm); }
.vp-pitem__k { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--vp-gold-deep); margin-bottom: 9px; }

.vp-pag { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding-top: var(--vp-8); }
.vp-pag .page-numbers {
	min-width: 42px; height: 42px;
	display: grid; place-items: center;
	padding: 0 12px;
	border: 1px solid var(--vp-line);
	border-radius: 999px;
	font-size: 14px;
	text-decoration: none;
	color: var(--vp-ink);
}
.vp-pag .page-numbers.current { background: var(--vp-ink); border-color: var(--vp-ink); color: #fff; }
.vp-pag .page-numbers:hover { border-color: var(--vp-ink); }

/* --------------------------------------------------------------------------
   Closing CTA (shared, dark)
   -------------------------------------------------------------------------- */

.vp-cta { background: var(--vp-forest); color: #fff; padding-block: clamp(56px, 7vw, 104px); }
.vp-cta__in { display: grid; gap: var(--vp-6); align-items: center; }
@media (min-width: 900px) { .vp-cta__in { grid-template-columns: 1.3fr auto; gap: var(--vp-8); } }
.vp-cta .vp-h2 { max-width: 18ch; }
.vp-cta__acts { display: flex; gap: var(--vp-3); flex-wrap: wrap; }
.vpaal-tpl .vp-cta .vp-btn--ghost { --btn-fg: #fff; box-shadow: inset 0 0 0 1px var(--vp-line-inv); }
.vpaal-tpl .vp-cta .vp-btn--ghost:hover { box-shadow: inset 0 0 0 1px #fff; }


/* ==========================================================================
   SPECIFICITY HARDENING
   The Elementor global kit styles bare elements (.elementor-kit-6 h2, p, a,
   button, li) at 0,1,1 — which outranks a single utility class at 0,1,0.
   Everything below re-declares our own scale at 0,2,x or higher so the
   templates keep their typography, colour and controls. Font FAMILIES are
   never set here: those stay global.
   ========================================================================== */

/* --- Headings: colour by context ---------------------------------------- */
.vpaal-tpl .vp-tpl h1,
.vpaal-tpl .vp-tpl h2,
.vpaal-tpl .vp-tpl h3,
.vpaal-tpl .vp-tpl h4,
.vpaal-tpl .vp-tpl h5,
.vpaal-tpl .vp-tpl h6 { color: var(--vp-ink); }

.vpaal-tpl .vp-shero h1,
.vpaal-tpl .vp-shero h2,
.vpaal-tpl .vp-tile h2,
.vpaal-tpl .vp-tile h3,
.vpaal-tpl .vp-bcard h2,
.vpaal-tpl .vp-bcard h3,
.vpaal-tpl .vp-cta h1,
.vpaal-tpl .vp-cta h2,
.vpaal-tpl .vp-cta h3,
.vpaal-tpl .vp-sec--dark h1,
.vpaal-tpl .vp-sec--dark h2,
.vpaal-tpl .vp-sec--dark h3 { color: #fff; }

/* --- Display scale ------------------------------------------------------ */
.vpaal-tpl .vp-tpl .vp-h1 {
	font-size: clamp(38px, 6.2vw, 78px);
	line-height: 1.02;
	letter-spacing: -.03em;
	font-weight: 700;
	margin: 0;
}
.vpaal-tpl .vp-tpl .vp-h2 {
	font-size: clamp(30px, 4vw, 52px);
	line-height: 1.06;
	letter-spacing: -.025em;
	font-weight: 700;
	margin: 0;
}
.vpaal-tpl .vp-tpl .vp-h3 {
	font-size: clamp(21px, 2.2vw, 28px);
	line-height: 1.18;
	letter-spacing: -.015em;
	font-weight: 700;
	margin: 0;
}
.vpaal-tpl .vp-shero .vp-h1 { color: #fff; }

/* --- Card / row / tile titles ------------------------------------------- */
.vpaal-tpl .vp-tpl .vp-scard__title {
	font-size: clamp(20px, 2.2vw, 27px);
	line-height: 1.14;
	letter-spacing: -.025em;
	font-weight: 700;
	color: var(--vp-ink);
	margin: 0;
}
.vpaal-tpl .vp-tpl .vp-scard--wide .vp-scard__title { font-size: clamp(26px, 3.4vw, 42px); }

.vpaal-tpl .vp-tpl .vp-tile__t {
	font-size: clamp(19px, 2.2vw, 29px);
	line-height: 1.08;
	letter-spacing: -.025em;
	font-weight: 700;
	color: #fff;
	margin: 8px 0 0;
}

.vpaal-tpl .vp-tpl .vp-bcard__t {
	font-size: clamp(18px, 1.7vw, 24px);
	line-height: 1.12;
	letter-spacing: -.022em;
	font-weight: 700;
	color: #fff;
	margin: 9px 0 0;
}
.vpaal-tpl .vp-tpl .vp-bcard--c .vp-bcard__t { font-size: clamp(16px, 1.3vw, 19px); }

.vpaal-tpl .vp-tpl .vp-row__t {
	font-size: clamp(17px, 1.7vw, 21px);
	line-height: 1.2;
	letter-spacing: -.02em;
	font-weight: 700;
	color: var(--vp-ink);
	margin: 0;
}

.vpaal-tpl .vp-tpl .vp-lead__t {
	font-size: clamp(26px, 3.4vw, 44px);
	line-height: 1.08;
	letter-spacing: -.028em;
	font-weight: 700;
	color: var(--vp-ink);
	margin: 16px 0 0;
}

.vpaal-tpl .vp-tpl .vp-pitem__t {
	font-size: clamp(20px, 2.1vw, 27px);
	line-height: 1.16;
	letter-spacing: -.022em;
	font-weight: 700;
	color: var(--vp-ink);
	margin: 0;
}

.vpaal-tpl .vp-tpl .vp-book__title {
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: -.02em;
	font-weight: 700;
	color: var(--vp-ink);
	margin: 0;
}

.vpaal-tpl .vp-tpl .vp-rcard__body h3 {
	font-size: 16px;
	line-height: 1.25;
	letter-spacing: -.01em;
	font-weight: 600;
	color: var(--vp-ink);
	margin: 0;
}

.vpaal-tpl .vp-tpl .vp-dcols__aside h2 {
	font-size: clamp(24px, 2.6vw, 34px);
	line-height: 1.08;
	letter-spacing: -.025em;
	margin: 0;
}

/* --- Body copy ---------------------------------------------------------- */
.vpaal-tpl .vp-tpl .vp-lede {
	font-size: clamp(17px, 1.5vw, 21px);
	line-height: 1.6;
	color: var(--vp-muted);
	max-width: 62ch;
}
.vpaal-tpl .vp-cta .vp-lede,
.vpaal-tpl .vp-sec--dark .vp-lede { color: rgba(255, 255, 255, .74); }
.vpaal-tpl .vp-shero .vp-shero__sub { color: rgba(255, 255, 255, .82); }

.vpaal-tpl .vp-tpl .vp-prose { font-size: 17px; line-height: 1.72; color: #232320; }
.vpaal-tpl .vp-tpl .vp-prose h2 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.16; letter-spacing: -.02em; }
.vpaal-tpl .vp-tpl .vp-prose h3 { font-size: clamp(19px, 2vw, 23px); line-height: 1.25; }
.vpaal-tpl .vp-tpl .vp-prose p { font-size: inherit; line-height: inherit; color: inherit; }

.vpaal-tpl .vp-tpl .vp-scard__x,
.vpaal-tpl .vp-tpl .vp-pitem__x,
.vpaal-tpl .vp-tpl .vp-lead__x,
.vpaal-tpl .vp-tpl .vp-row__s { color: var(--vp-muted); }

.vpaal-tpl .vp-tpl .vp-eyebrow {
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--vp-gold-deep);
}
.vpaal-tpl .vp-cta .vp-eyebrow,
.vpaal-tpl .vp-sec--dark .vp-eyebrow { color: var(--vp-gold-light); }

/* --- Links: cards are anchors, so kill the global link colour inside ----- */
.vpaal-tpl .vp-tpl .vp-scard,
.vpaal-tpl .vp-tpl .vp-tile,
.vpaal-tpl .vp-tpl .vp-bcard,
.vpaal-tpl .vp-tpl .vp-row,
.vpaal-tpl .vp-tpl .vp-rcard,
.vpaal-tpl .vp-tpl .vp-lead,
.vpaal-tpl .vp-tpl .vp-pitem { color: inherit; text-decoration: none; }

.vpaal-tpl .vp-tpl .vp-crumbs a { color: inherit; }

/* --- Filter pills: layout only. vpEye supplies the look. ----------------- */
.vpaal-tpl .vp-tpl .vp-filters__pills { display: flex; gap: 10px; flex-wrap: wrap; }

/* --- vpEye (snippet 871, LOCKED) owns every button and pill site-wide ----
   It rewrites .vp-btn and .vp-pill into eye-follow buttons and wins with
   `html body ... !important`. We do NOT fight it. The only thing we add is a
   selected-state ring, so the active filter is still readable once every pill
   has become an identical dark capsule. Additive only — 871 is untouched.    */
html body.vpaal-tpl .vp-pill.is-active {
	box-shadow: 0 0 0 2px var(--vp-gold), 0 3px 6px rgba(0,0,0,.12), 0 10px 20px rgba(0,0,0,.16) !important;
}
html body.vpaal-tpl .vp-pill.is-active .vpEye-lab { color: var(--vp-gold-light) !important; }

/* --- Share buttons ------------------------------------------------------ */
.vpaal-tpl .vp-tpl .vp-share__b {
	background: transparent;
	color: var(--vp-muted);
	border: 1px solid var(--vp-line);
	box-shadow: none;
	padding: 0;
	font-size: 12px;
	transform: none;
}
.vpaal-tpl .vp-tpl .vp-share__b:hover { background: transparent; border-color: var(--vp-ink); color: var(--vp-ink); transform: none; }

/* --- Lists inside our components ---------------------------------------- */
.vpaal-tpl .vp-tpl .vp-hl li,
.vpaal-tpl .vp-tpl .vp-inex li,
.vpaal-tpl .vp-tpl .vp-hgrid li,
.vpaal-tpl .vp-tpl .vp-chips li,
.vpaal-tpl .vp-tpl .vp-hlgrid li,
.vpaal-tpl .vp-tpl .vp-trust li { color: inherit; margin: 0; }

/* --- Empty-image placeholder: keep it quiet ----------------------------- */
.vpaal-tpl .vp-tpl .vp-media--empty { color: rgba(255, 255, 255, .22); font-size: 22px; }
.vpaal-tpl .vp-tpl .vp-bcard .vp-media--empty,
.vpaal-tpl .vp-tpl .vp-tile .vp-media--empty { background: linear-gradient(140deg, #16341f, #0F2A16 60%, #1C4A2B); }

/* --- Definition lists --------------------------------------------------- */
.vpaal-tpl .vp-tpl dl,
.vpaal-tpl .vp-tpl dd,
.vpaal-tpl .vp-tpl dt { margin: 0; }
.vpaal-tpl .vp-tpl .vp-facts dd { font-size: clamp(17px, 1.8vw, 22px); font-weight: 700; letter-spacing: -.02em; color: var(--vp-ink); }
.vpaal-tpl .vp-tpl .vp-book__facts dd,
.vpaal-tpl .vp-tpl .vp-quick dd { font-size: 14.5px; font-weight: 600; text-align: right; color: var(--vp-ink); }

/* --- Form controls ------------------------------------------------------ */
.vpaal-tpl .vp-tpl .vp-field input,
.vpaal-tpl .vp-tpl .vp-field textarea { box-shadow: none; text-transform: none; letter-spacing: 0; }


/* ==========================================================================
   LAYOUT CORRECTIONS
   ========================================================================== */

/* Hotel gallery: when a property only has one photo the single figure must
   fill the mosaic instead of overflowing it and colliding with the bar below. */
.vpaal-tpl .vp-hgal { overflow: hidden; }
.vpaal-tpl .vp-hgal > .vp-hgal__item:only-child {
	grid-column: 1 / -1;
	grid-row: 1 / -1;
	aspect-ratio: auto;
	height: 100%;
	min-height: 215px;
}

/* Fact strip values must wrap, not run out of their column. */
.vpaal-tpl .vp-facts__grid > div { min-width: 0; padding-right: var(--vp-4); }
.vpaal-tpl .vp-facts dd { overflow-wrap: anywhere; white-space: normal; }

/* The image placeholder is a mood, not a monogram — drop the letters. */
.vpaal-tpl .vp-media--empty > span { display: none; }

/* Stronger scrim so overlaid text stays readable on bright photography. */
.vpaal-tpl .vp-bcard::after {
	background: linear-gradient(180deg, rgba(12,12,12,.15) 0%, rgba(12,12,12,.55) 55%, rgba(12,12,12,.88) 100%);
}
.vpaal-tpl .vp-tile__scrim {
	background: linear-gradient(180deg, rgba(12,12,12,.12) 0%, rgba(12,12,12,.5) 55%, rgba(12,12,12,.86) 100%);
}

/* Meta rows: never start a wrapped line with a separator. */
.vpaal-tpl .vp-scard__meta,
.vpaal-tpl .vp-bcard__m,
.vpaal-tpl .vp-hbar__loc { column-gap: var(--vp-4); row-gap: 2px; }
.vpaal-tpl .vp-scard__meta span + span::before,
.vpaal-tpl .vp-bcard__m span + span::before { content: none; }
.vpaal-tpl .vp-scard__meta span + span,
.vpaal-tpl .vp-bcard__m span + span { position: relative; padding-left: var(--vp-4); }
.vpaal-tpl .vp-scard__meta span + span::after,
.vpaal-tpl .vp-bcard__m span + span::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 50%;
	width: 3px;
	height: 3px;
	margin-top: -1.5px;
	border-radius: 50%;
	background: currentColor;
	opacity: .45;
}

/* Hotel name is the page title — give it room next to the price/CTA. */
.vpaal-tpl .vp-hbar__row > div:first-child { flex: 1 1 320px; min-width: 0; }
.vpaal-tpl .vp-hbar__r { flex: 0 0 auto; }

/* Bento: keep long titles inside their tile. */
.vpaal-tpl .vp-bcard__in { max-width: 100%; }
.vpaal-tpl .vp-bcard__t { overflow-wrap: anywhere; }


/* ==========================================================================
   THE SHARED HERO
   One hero on every single and every archive. No breadcrumbs by design.
   ========================================================================== */

.vpaal-tpl .vp-hero .vp-count { color: rgba(255, 255, 255, .72); margin-top: 22px; }
.vpaal-tpl .vp-hero .vp-shero__tags { margin-bottom: 22px; }
.vpaal-tpl .vp-hero .vp-media--empty { min-height: 100%; }

/* Hero sits directly under the fixed site header, so give the copy room. */
.vpaal-tpl .vp-shero__inner { padding-block: clamp(38px, 4.7vw, 64px); }

/* Hotel "around the camp" gallery — the featured photo is the hero, so this
   block only ever shows the four attached photos. */
.vpaal-tpl .vp-gal4 { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .vpaal-tpl .vp-gal4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .vpaal-tpl .vp-gal4 { grid-template-columns: repeat(4, 1fr); } }

.vpaal-tpl .vp-gal4__item {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--vp-r);
	background: var(--vp-warm);
}
.vpaal-tpl .vp-gal4__item .vp-media { transition: transform .8s var(--vp-ease); }
.vpaal-tpl .vp-gal4__item:hover .vp-media { transform: scale(1.05); }


/* ==========================================================================
   ARCHIVE SEARCH BAR
   Replaces the pill rows — they did not scale past a handful of terms.
   Search field + category dropdown + live count.
   ========================================================================== */

.vpaal-tpl .vp-searchbar {
	border-bottom: 1px solid var(--vp-line-soft);
	background: var(--vp-base);
}

.vpaal-tpl .vp-search {
	display: grid;
	gap: var(--vp-3);
	padding-block: var(--vp-5);
	grid-template-columns: 1fr;
	align-items: center;
}

@media (min-width: 860px) {
	.vpaal-tpl .vp-search {
		grid-template-columns: minmax(0, 1fr) 260px auto;
		gap: var(--vp-4);
	}
}

/* Text field */
.vpaal-tpl .vp-search__field {
	position: relative;
	display: flex;
	align-items: center;
}

.vpaal-tpl .vp-search__field svg {
	position: absolute;
	left: 16px;
	width: 17px;
	height: 17px;
	stroke: var(--vp-muted);
	fill: none;
	stroke-width: 2;
	pointer-events: none;
}

.vpaal-tpl .vp-search input[type="search"] {
	width: 100%;
	padding: 14px 44px 14px 44px;
	border: 1px solid var(--vp-line);
	border-radius: 999px;
	background: #fff;
	color: var(--vp-ink);
	appearance: none;
	-webkit-appearance: none;
	transition: border-color .18s var(--vp-ease), box-shadow .18s var(--vp-ease);
}

.vpaal-tpl .vp-search input[type="search"]::-webkit-search-cancel-button { display: none; }

.vpaal-tpl .vp-search input[type="search"]:focus {
	outline: none;
	border-color: var(--vp-gold);
	box-shadow: 0 0 0 3px rgba(201, 153, 46, .16);
}

/* Select */
.vpaal-tpl .vp-search__select { position: relative; display: flex; align-items: center; }

.vpaal-tpl .vp-search select {
	width: 100%;
	padding: 14px 42px 14px 18px;
	border: 1px solid var(--vp-line);
	border-radius: 999px;
	background: #fff;
	color: var(--vp-ink);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color .18s var(--vp-ease), box-shadow .18s var(--vp-ease);
}

.vpaal-tpl .vp-search select:focus {
	outline: none;
	border-color: var(--vp-gold);
	box-shadow: 0 0 0 3px rgba(201, 153, 46, .16);
}

.vpaal-tpl .vp-search__select::after {
	content: "";
	position: absolute;
	right: 18px;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--vp-muted);
	border-bottom: 2px solid var(--vp-muted);
	transform: translateY(-2px) rotate(45deg);
	pointer-events: none;
}

/* Right-hand cluster: count + clear */
.vpaal-tpl .vp-search__meta {
	display: flex;
	align-items: center;
	gap: var(--vp-4);
	justify-content: space-between;
}

.vpaal-tpl .vp-search__clear {
	appearance: none;
	border: 0;
	background: none;
	padding: 0;
	cursor: pointer;
	color: var(--vp-muted);
	border-bottom: 1px solid var(--vp-line);
	white-space: nowrap;
}

.vpaal-tpl .vp-search__clear:hover { color: var(--vp-gold-deep); border-color: var(--vp-gold); }

/* The searchbar sits right under the hero, so give the grid a little air. */
.vpaal-tpl .vp-searchbar + .vp-sec { padding-top: clamp(32px, 4vw, 56px); }

/* ==========================================================================
   THE SAME HERO ON ELEMENTOR-BUILT INNER PAGES  (About, Contact, ...)
   ==========================================================================
   The CPT + blog templates render vp_hero() in PHP. Elementor pages cannot,
   so instead their existing hero container is given the classes
   `vp-shero vp-shero--el` and a background image, and the rules below make it
   resolve to the identical composition: full-bleed photo, the same three-stop
   scrim, content bottom-left inside the same 1140 column.

   Two things to know if you edit this:
   - The scrim lives here, not in Elementor's own overlay control, so it is
     byte-identical to .vp-shero__scrim. The Elementor editor therefore shows
     the photo without the scrim; the front end is correct.
   - Elementor puts CSS classes on the widget WRAPPER, so every rule that has
     to reach the real <h1>/<p> also targets .elementor-heading-title and the
     widget container.
   ========================================================================== */

html body.vpaal-tpl .vp-shero--el {
	position: relative;
	min-height: min(58vh, 505px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	overflow: hidden;
	color: #fff;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	padding: clamp(27px, 4vw, 54px) 0 !important;
}

html body.vpaal-tpl .vp-shero--el::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(12,12,12,.5) 0%, rgba(12,12,12,.1) 35%, rgba(12,12,12,.82) 100%);
}

/* Every direct child becomes a row of the same 1140 column. */
html body.vpaal-tpl .vp-shero--el > * {
	position: relative;
	z-index: 1;
	width: min(var(--vp-wrap), 100% - 20px) !important;
	max-width: none !important;
	margin-inline: auto !important;
	text-align: left !important;
}

/* Eyebrow -> the same pill used by vp_hero()'s tags. */
html body.vpaal-tpl .vp-shero--el .vp-shero__tag .elementor-heading-title {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid rgba(255,255,255,.34);
	border-radius: 999px;
	backdrop-filter: blur(6px);
	color: #fff !important;
}
html body.vpaal-tpl .vp-shero--el .vp-shero__tag { margin-bottom: var(--vp-4); }

html body.vpaal-tpl .vp-shero--el .vp-h1 .elementor-heading-title {
	max-width: 15ch;
	color: #fff !important;
}

/* The lede. Elementor's text-editor may or may not wrap the copy in <p>, so
   cap the measure on the widget container as well as on any paragraph. */
html body.vpaal-tpl .vp-shero--el .vp-shero__sub .elementor-widget-container,
html body.vpaal-tpl .vp-shero--el .vp-shero__sub p {
	max-width: 56ch !important;
	color: rgba(255,255,255,.82) !important;
}
html body.vpaal-tpl .vp-shero--el .vp-shero__sub { margin-top: var(--vp-4); }

@media (max-width: 767px) {
	html body.vpaal-tpl .vp-shero--el { min-height: min(48vh, 375px); }
}

/* --------------------------------------------------------------------------
   Experience single — close the gap beneath the body column.

   vp_related_rail() early-returns when an experience has no linked
   destinations, so on most experiences the body section's padding-bottom and
   the enquiry section's padding-top sit directly against each other — two full
   clamp(56px, 8vw, 112px) paddings, up to 224px of empty space. Halving both
   brings that to a maximum of 112px. Where a rail IS rendered the adjacent
   sibling rule stops matching, so those pages keep their full spacing.
   -------------------------------------------------------------------------- */
.vp-tpl--experience .vp-sec:has(.vp-xbody) { padding-bottom: clamp(28px, 4vw, 56px); }
.vp-tpl--experience .vp-sec + .vp-sec { padding-top: clamp(28px, 4vw, 56px); }

/* --------------------------------------------------------------------------
   Destination single — align the body columns to the facts strip.

   .vp-facts__grid is repeat(4, 1fr) inside .vp-wrap, so its second column
   begins at exactly 25% and insets its text by var(--vp-5). The .vp-dcols
   grid below it used a fixed 240px aside plus a gap, which landed the body
   copy at an arbitrary point that did not line up with anything above.

   Matching 25% + the same inset puts "Why go", "Highlights" and "Getting
   there" all on the same vertical as the BEST TIME column. Desktop only —
   below 980px .vp-dcols is a single column and is left alone.
   -------------------------------------------------------------------------- */
@media (min-width: 980px) {
	.vp-tpl--destination .vp-dcols {
		grid-template-columns: 25% minmax(0, 1fr);
		gap: 0;
	}
	.vp-tpl--destination .vp-dcols__aside { padding-right: var(--vp-5); }
	.vp-tpl--destination .vp-dcols__aside + * { padding-left: var(--vp-5); }
}

/* --------------------------------------------------------------------------
   Homepage experience slider — stop long meta text widening a card.

   .vp-exp-card is a flex item sized flex: 0 0 calc(50% - 16px), but flex items
   default to min-width:auto, so they refuse to shrink below their content's
   min-content width. The location meta renders on a single nowrap line, and a
   long value (the Mount Kenya / Kilimanjaro route list) forced that card to
   1012px against 554px for its neighbours, dragging its 16/10 image frame up
   with it.

   Letting these shrink restores a uniform card width whatever the text length;
   the meta ellipsises instead of blowing out the track.
   -------------------------------------------------------------------------- */
.vp-exp .vp-exp-card,
.vp-exp .vp-exp-card__row { min-width: 0; }
.vp-exp .vp-exp-card__meta {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}