/* generated shapes (masks) */
:root{
	--vb-mask-drips: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 140' preserveAspectRatio='none'%3E%3Cpath d='M0 140V104C70 96 120 106 190 98S310 84 380 94S470 104 520 98C560 92 590 90 620 84C660 66 700 36 736 14L748 8L762 12L774 8C800 26 830 58 866 78C900 92 960 96 1010 98S1120 104 1160 96S1190 92 1200 94V140Z'/%3E%3C/svg%3E");
	--vb-mask-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 140' preserveAspectRatio='none'%3E%3Cpath d='M0 140V84C90 74 150 96 240 88S380 60 460 74S560 96 640 84S780 56 880 70S1040 96 1120 84S1180 76 1200 80V140Z'/%3E%3C/svg%3E");
	--vb-mask-wave-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 140' preserveAspectRatio='none'%3E%3Cpath d='M0 140V104C70 96 120 106 190 98S310 84 380 94S470 104 520 98C560 92 590 90 620 84C660 66 700 36 736 14L748 8L762 12L774 8C800 26 830 58 866 78C900 92 960 96 1010 98S1120 104 1160 96S1190 92 1200 94V140Z'/%3E%3C/svg%3E");
	--vb-mask-ridge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 140' preserveAspectRatio='none'%3E%3Cpath d='M0 140V104C70 96 120 106 190 98S310 84 380 94S470 104 520 98C560 92 590 90 620 84C660 66 700 36 736 14L748 8L762 12L774 8C800 26 830 58 866 78C900 92 960 96 1010 98S1120 104 1160 96S1190 92 1200 94V140Z'/%3E%3C/svg%3E");
	--vb-mask-ridge-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 140' preserveAspectRatio='none'%3E%3Cpath d='M0 140V84C90 74 150 96 240 88S380 60 460 74S560 96 640 84S780 56 880 70S1040 96 1120 84S1180 76 1200 80V140Z'/%3E%3C/svg%3E");
}

/**
 * Two Little Monkeys — "vibrant" layer.
 *
 * Colour-forward, photo-first components shared by every page: a slideshow
 * hero, chocolate-drip and wave section edges, saturated colour bands, a
 * full-bleed photo strip, price/booking band and Tripadvisor band.
 * Palette stays the brand's (navy, cacao brown, leaf green, gold, cream);
 * what changes is how boldly it is used.
 */
:root {
	/* Identity palette sampled from the bar packaging (Arenal sky gradients) */
	--vb-night: #1B2440;
	--vb-lagoon: #1C628D;
	--vb-cyan: #2FA8D8;
	--vb-aqua: #8FDDEB;
	--vb-plum: #5E2751;
	--vb-berry: #B0325F;
	--vb-coral: #F0625E;
	--vb-tangerine: #F59A3B;
	--vb-sun: #FFC94D;
	--vb-leaf: #3E9B4F;
	--vb-sunset: linear-gradient(165deg, #4A2B6B 0%, #B0325F 38%, #F0625E 68%, #F8A445 100%);
	--vb-dusk: linear-gradient(160deg, #5E2751 0%, #9B2E62 45%, #E1505C 100%);
	--vb-lagoon-sky: linear-gradient(170deg, #1B2440 0%, #1C628D 48%, #2FA8D8 100%);
	--vb-brown: var(--vb-plum);
	--vb-brown-deep: var(--vb-night);
	--vb-green: var(--vb-lagoon);
	--vb-green-deep: #164B6B;
	--vb-gold: var(--tlm-gold, #DCA500);
	--vb-cream: var(--tlm-cream, #F7F0E2);
	--vb-ink: #1B1230;
}

/* Friendlier, rounder display face (Fraunces SOFT axis) on the new blocks. */
.vb h1, .vb h2, .vb h3,
.vb-hero h1 {
	font-family: var(--tlm-font-display);
	font-variation-settings: "SOFT" 100, "WONK" 1;
}

/* ------------------------------------------------------------------
 * Section edges: the next section's colour rises over the previous one
 * as the Arenal volcano silhouette (front ridge + a fainter back ridge).
 * Set --vb-edge to the colour of the section that carries the class.
 * ------------------------------------------------------------------ */
.vb-edge { position: relative; }

.vb-edge::before,
.vb-edge::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: var(--vb-edge-h, 150px);
	top: calc(var(--vb-edge-h, 150px) * -1 + 1px);
	pointer-events: none;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

.vb-edge::before {
	z-index: 4;
	background: var(--vb-edge, var(--vb-plum));
	-webkit-mask-image: var(--vb-mask-ridge);
	mask-image: var(--vb-mask-ridge);
}

.vb-edge::after {
	z-index: 3;
	top: calc(var(--vb-edge-h, 150px) * -1.3 + 1px);
	height: calc(var(--vb-edge-h, 150px) * 1.3);
	background: var(--vb-edge, var(--vb-plum));
	opacity: 0.4;
	-webkit-mask-image: var(--vb-mask-ridge-back);
	mask-image: var(--vb-mask-ridge-back);
}

@media (max-width: 700px) { .vb-edge { --vb-edge-h: 64px; } }

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.vb-edge::after { animation: vb-ridge-slide linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
	}
}

@keyframes vb-ridge-slide {
	from { transform: translateX(-4%); }
	to { transform: translateX(4%); }
}

/* Full-bleed sections (patterns are rendered inside constrained content). */
.vb-bleed {
	width: auto !important;
	max-width: none !important;
	margin-inline: calc(50% - 50vw) !important;
	margin-block: 0 !important;
}

.vb-wrap {
	max-width: var(--tlm-content-box, 1280px);
	margin-inline: auto;
	padding-inline: var(--tlm-section-px, 1.5rem);
}

/* Buttons */
.vb-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 3.25rem;
	padding: 0.8rem 1.75rem;
	border: 2px solid transparent;
	border-radius: 999px;
	font-family: var(--tlm-font-body);
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.1;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.25s var(--tlm-v3-ease-out, ease-out), background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.vb-btn svg { width: 1.15rem; height: 1.15rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; }

.vb a.vb-btn--gold { background: var(--vb-gold); color: var(--vb-ink); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.28); }
.vb a.vb-btn--gold:hover { background: #F0BB1F; color: var(--vb-ink); transform: translateY(-2px); }
.vb a.vb-btn--gold:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.28); }

.vb a.vb-btn--light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.85); }
.vb a.vb-btn--light:hover { background: #fff; color: var(--vb-ink); }

.vb a.vb-btn--dark { background: var(--vb-brown-deep); color: #fff; }
.vb a.vb-btn--dark:hover { background: var(--vb-ink); color: #fff; transform: translateY(-2px); }

.vb-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
	.vb-btn, .vb-btn:hover { transform: none; }
}

/* Small overline used above headings */
.vb-kicker {
	display: inline-block;
	margin: 0 0 0.9rem;
	padding: 0.35rem 0.9rem;
	background: var(--vb-gold);
	border-radius: 999px;
	color: var(--vb-ink);
	font-family: var(--tlm-font-body);
	font-size: 0.85rem;
	font-weight: 800;
	line-height: 1.2;
}

/* ==================================================================
 * Hero slideshow
 * ================================================================== */
.vb-hero {
	position: relative;
	isolation: isolate;
	min-height: clamp(640px, 100vh, 920px);
	display: flex;
	align-items: center;
	color: #fff;
	background: var(--vb-brown-deep);
	overflow: hidden;
	padding-bottom: 70px;
}

.vb-hero__slides,
.vb-hero__slide {
	position: absolute;
	inset: 0;
}

.vb-hero__slide {
	opacity: 0;
	transition: opacity 1.2s ease;
}

.vb-hero__slide.is-active { opacity: 1; }

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

@media (prefers-reduced-motion: no-preference) {
	.vb-hero__slide.is-active img { animation: vb-drift 14s ease-out both; }
}

@keyframes vb-drift {
	from { transform: scale(1.08); }
	to { transform: scale(1); }
}

.vb-hero__shade {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(20, 16, 46, 0.7) 0%, rgba(20, 16, 46, 0.36) 46%, rgba(20, 16, 46, 0) 78%),
		linear-gradient(0deg, rgba(20, 16, 46, 0.35) 0%, transparent 30%);
}

.vb-hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--tlm-content-box, 1280px);
	margin-inline: auto;
	padding: calc(var(--tlm-v3-header-h, 72px) + 2rem) var(--tlm-section-px, 1.5rem) 3rem;
}

.vb-hero h1 {
	max-width: 20ch;
	margin: 0 0 1.25rem;
	font-size: clamp(2.2rem, min(6.4vw, 9.5vh), 5.2rem);
	font-weight: 750;
	line-height: 0.98;
	letter-spacing: -0.025em;
	color: #fff;
	text-shadow: 0 4px 30px rgba(0, 0, 0, 0.35);
}

.vb-hero h1 em {
	font-style: normal;
	color: var(--vb-gold);
}

.vb-hero__lede {
	max-width: 44ch;
	margin: 0 0 1.25rem;
	font-size: clamp(1rem, min(1.5vw, 2.4vh), 1.3rem);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.95);
}

.vb-hero__price {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 1rem;
	margin: 0 0 1.75rem;
	padding: 0.65rem 1.25rem;
	background: rgba(255, 255, 255, 0.95);
	border-radius: 999px;
	color: var(--vb-ink);
	font-size: 1.05rem;
	font-weight: 800;
}

.vb-hero__price span { color: var(--vb-brown); font-weight: 700; }

.vb-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem 1rem;
}

.vb-hero__dots {
	position: absolute;
	z-index: 4;
	right: var(--tlm-section-px, 1.5rem);
	bottom: 96px;
	display: flex;
	gap: 0.55rem;
}

.vb-hero__dots button {
	box-sizing: border-box;
	width: 14px !important;
	height: 14px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	flex: none;
	padding: 0 !important;
	border: 2px solid #fff !important;
	border-radius: 50% !important;
	background: transparent !important;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.vb-hero__dots button[aria-current="true"] { background: var(--vb-gold) !important; border-color: var(--vb-gold) !important; transform: scale(1.2); }
.vb-hero__dots button:focus-visible { outline: 3px solid var(--vb-gold); outline-offset: 3px; }

@media (max-width: 700px) {
	.vb-hero { min-height: 92vh; padding-bottom: 50px; }
	.vb-hero__shade { background: linear-gradient(0deg, rgba(20, 16, 46, 0.86) 0%, rgba(20, 16, 46, 0.55) 55%, rgba(20, 16, 46, 0.25) 100%); }
	.vb-hero__dots { left: var(--tlm-section-px, 1.5rem); right: auto; bottom: 70px; }
	.vb-hero__content { padding-bottom: 5rem; }
}

/* ==================================================================
 * Facts band
 * ================================================================== */
.vb-facts {
	background: var(--vb-sunset);
	background-size: 160% 160%;
	animation: vb-sky 22s ease-in-out infinite alternate;
	color: #fff;
	padding: 2.75rem 0 3rem;
}

.vb-facts__row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.5rem 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vb-facts__row li {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	font-family: var(--tlm-font-display);
	font-variation-settings: "SOFT" 100;
	font-size: clamp(1.05rem, 1.5vw, 1.35rem);
	font-weight: 600;
	line-height: 1.2;
}

.vb-facts__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 3.4rem;
	height: 3.4rem;
	border-radius: 50%;
	background: var(--vb-gold);
	color: var(--vb-ink);
}

.vb-facts__icon svg { width: 1.7rem; height: 1.7rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 900px) { .vb-facts__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .vb-facts__row { grid-template-columns: minmax(0, 1fr); } }

/* ==================================================================
 * Intro (cream) — copy + framed photo collage
 * ================================================================== */
.vb-intro {
	background: var(--vb-cream);
	padding: calc(var(--tlm-section-py, 6rem) + 1rem) 0 var(--tlm-section-py, 6rem);
	color: var(--vb-ink);
}

.vb-intro__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: center;
}

.vb-intro h2 {
	margin: 0 0 1.25rem;
	font-size: clamp(2.2rem, 4.2vw, 3.8rem);
	font-weight: 750;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--vb-brown-deep);
}

.vb-intro__lead {
	margin: 0 0 1rem;
	font-size: clamp(1.15rem, 1.6vw, 1.4rem);
	font-weight: 600;
	line-height: 1.5;
	color: var(--vb-green);
}

.vb-intro p { line-height: 1.75; font-size: 1.08rem; color: #4a3a31; max-width: 52ch; }

.vb-intro__collage {
	position: relative;
	padding: 0 2.5rem 2.5rem 0;
}

.vb-intro__main {
	position: relative;
	margin: 0;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 18px 18px 0 var(--vb-coral);
	aspect-ratio: 4 / 5;
	background: var(--vb-brown);
}

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

.vb-intro__inset {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 46%;
	margin: 0;
	border: 6px solid var(--vb-cream);
	border-radius: 20px;
	overflow: hidden;
	aspect-ratio: 1;
	box-shadow: 0 14px 30px rgba(59, 32, 22, 0.35);
}

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

.vb-intro__seal {
	position: absolute;
	left: -1.75rem;
	top: 2rem;
	width: 7rem;
	height: 7rem;
	padding: 0.6rem;
	border-radius: 50%;
	background: var(--vb-green);
	border: 4px solid var(--vb-cream);
	box-shadow: 0 10px 24px rgba(31, 74, 52, 0.4);
}

.vb-intro__seal img { width: 100%; height: 100%; object-fit: contain; display: block; }

.vb-intro__pillars {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
	margin-top: clamp(3rem, 6vw, 5rem);
}

.vb-pillar { display: flex; gap: 1.1rem; align-items: flex-start; }

.vb-pillar__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	color: #fff;
}

.vb-pillar:nth-child(1) .vb-pillar__icon { background: var(--vb-green); }
.vb-pillar:nth-child(2) .vb-pillar__icon { background: var(--vb-brown); }
.vb-pillar:nth-child(3) .vb-pillar__icon { background: #C88A00; }
.vb-pillar__icon svg { width: 2rem; height: 2rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.vb-pillar h3 { margin: 0 0 0.35rem; font-size: 1.3rem; color: var(--vb-brown-deep); }
.vb-pillar p { margin: 0; font-size: 1rem; line-height: 1.6; }

@media (max-width: 900px) {
	.vb-intro__grid { grid-template-columns: minmax(0, 1fr); }
	.vb-intro__collage { max-width: 34rem; }
	.vb-intro__pillars { grid-template-columns: minmax(0, 1fr); }
}

/* ==================================================================
 * Photo strip — four full-bleed portrait tiles with captions
 * ================================================================== */
.vb-strip {
	background: var(--vb-brown-deep);
	padding: clamp(3.5rem, 6vw, 5.5rem) 0 0;
	color: #fff;
}

.vb-strip__head { text-align: center; max-width: 46rem; margin: 0 auto clamp(2rem, 4vw, 3rem); padding-inline: var(--tlm-section-px, 1.5rem); }
.vb-strip__head h2 { margin: 0 0 0.75rem; font-size: clamp(2.1rem, 4vw, 3.4rem); font-weight: 750; line-height: 1.05; color: #fff; }
.vb-strip__head p { margin: 0; font-size: 1.1rem; line-height: 1.6; color: rgba(255, 255, 255, 0.85); }

.vb-strip__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vb-strip__tile {
	position: relative;
	margin: 0;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--vb-brown);
}

.vb-strip__tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.7s var(--tlm-v3-ease-out, ease-out);
}

.vb-strip__tile:hover img { transform: scale(1.06); }

.vb-strip__tile figcaption {
	position: absolute;
	inset: auto 0 0 0;
	padding: 3rem 1.25rem 1.25rem;
	background: linear-gradient(0deg, rgba(20, 16, 46, 0.88), transparent);
	color: #fff;
}

.vb-strip__tile figcaption span { display: block; font-size: 0.85rem; font-weight: 800; color: var(--vb-gold); margin-bottom: 0.15rem; }
.vb-strip__tile figcaption strong { display: block; font-family: var(--tlm-font-display); font-size: 1.35rem; font-weight: 650; line-height: 1.15; }

@media (max-width: 900px) { .vb-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==================================================================
 * Family story
 * ================================================================== */
.vb-family {
	background: var(--vb-dusk);
	background-size: 160% 160%;
	animation: vb-sky 26s ease-in-out infinite alternate;
	color: #fff;
	padding: calc(var(--tlm-section-py, 6rem) + 2rem) 0 var(--tlm-section-py, 6rem);
}

.vb-family__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: center;
}

.vb-family__photo {
	margin: 0;
	border-radius: 28px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	box-shadow: -16px 16px 0 var(--vb-sun);
	background: var(--vb-green-deep);
}

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

.vb-family h2 { margin: 0 0 1.25rem; font-size: clamp(2.1rem, 4vw, 3.5rem); font-weight: 750; line-height: 1.05; color: #fff; }
.vb-family__lede { margin: 0 0 1rem; font-size: 1.3rem; font-weight: 600; line-height: 1.5; color: #FFE08A; }
.vb-family p { font-size: 1.1rem; line-height: 1.7; color: rgba(255, 255, 255, 0.92); max-width: 52ch; }
.vb-family__roles { margin: 1.25rem 0 1.75rem; padding: 1rem 1.25rem; background: rgba(0, 0, 0, 0.22); border-radius: 16px; font-size: 1rem !important; }

@media (max-width: 900px) { .vb-family__grid { grid-template-columns: minmax(0, 1fr); } .vb-family__photo { box-shadow: -10px 10px 0 var(--vb-sun); } }

/* ==================================================================
 * Price / booking band
 * ================================================================== */
.vb-price {
	background: linear-gradient(100deg, #F0625E 0%, #F59A3B 55%, #FFC94D 100%);
	background-size: 160% 160%;
	animation: vb-sky 18s ease-in-out infinite alternate;
	color: var(--vb-ink);
	padding: 2.75rem 0;
}

.vb-price__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem 2.5rem;
}

.vb-price__text {
	margin: 0;
	font-family: var(--tlm-font-display);
	font-variation-settings: "SOFT" 100;
	font-size: clamp(1.7rem, 3.4vw, 2.8rem);
	font-weight: 700;
	line-height: 1.1;
}

.vb-price__text small { display: block; margin-top: 0.4rem; font-family: var(--tlm-font-body); font-size: 1.05rem; font-weight: 700; color: rgba(36, 22, 15, 0.8); }

/* ==================================================================
 * Tripadvisor / reviews band
 * ================================================================== */
.vb-reviews {
	background: var(--vb-brown-deep);
	color: #fff;
	padding: clamp(3rem, 5vw, 4.5rem) 0;
	text-align: center;
}

.vb-reviews__inner { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.vb-reviews svg.vb-reviews__icon { width: 4.5rem; height: 4.5rem; color: #34E0A1; fill: currentColor; }
.vb-reviews h2 { margin: 0; font-size: clamp(1.8rem, 3.4vw, 2.8rem); font-weight: 750; line-height: 1.1; color: #fff; }
.vb-reviews p { margin: 0; max-width: 42rem; font-size: 1.1rem; color: rgba(255, 255, 255, 0.85); }

/* ==================================================================
 * Final call to action
 * ================================================================== */
.vb-final {
	position: relative;
	isolation: isolate;
	min-height: clamp(520px, 80vh, 760px);
	display: flex;
	align-items: center;
	color: #fff;
	text-align: center;
	background: var(--vb-brown-deep);
	padding: 6rem 0;
	overflow: hidden;
}

.vb-final__media { position: absolute; inset: 0; z-index: -2; }
.vb-final__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vb-final::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 50% 50%, rgba(20, 16, 46, 0.55), rgba(20, 16, 46, 0.8)); }

.vb-final__content { width: 100%; max-width: 52rem; margin-inline: auto; padding-inline: var(--tlm-section-px, 1.5rem); }
.vb-final h2 { margin: 0 0 2rem; font-size: clamp(2.4rem, 5.6vw, 4.8rem); font-weight: 750; line-height: 1.03; letter-spacing: -0.02em; color: #fff; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); }
.vb-final__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 1.5rem; }
.vb a.vb-final__link { color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: var(--vb-gold); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.vb a.vb-final__link:hover { color: var(--vb-gold); }

/* ==================================================================
 * Photo tiles (big labelled links)
 * ================================================================== */
.vb-tiles { background: var(--vb-brown-deep); }

.vb-tiles__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
}

.vb-tiles__tile {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	color: #fff;
	text-decoration: none;
	background: var(--vb-brown);
}

.vb-tiles__tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.7s var(--tlm-v3-ease-out, ease-out), filter 0.4s ease;
}

.vb-tiles__tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(20, 16, 46, 0.8) 0%, rgba(20, 16, 46, 0.1) 55%);
	transition: background-color 0.3s ease;
}

.vb-tiles__tile:hover img { transform: scale(1.07); }

.vb-tiles__label {
	position: absolute;
	z-index: 2;
	left: 1.5rem;
	right: 1.5rem;
	bottom: 1.75rem;
	font-family: var(--tlm-font-display);
	font-variation-settings: "SOFT" 100, "WONK" 1;
	font-size: clamp(1.8rem, 3vw, 2.8rem);
	font-weight: 750;
	line-height: 1.02;
	text-shadow: 0 3px 18px rgba(0, 0, 0, 0.45);
}

.vb-tiles__label::after {
	content: "";
	display: block;
	width: 3.5rem;
	height: 5px;
	margin-top: 0.75rem;
	border-radius: 3px;
	background: var(--vb-gold);
	transition: width 0.3s var(--tlm-v3-ease-out, ease-out);
}

.vb-tiles__tile:hover .vb-tiles__label::after { width: 6rem; }
.vb-tiles__tile:focus-visible { outline: 4px solid var(--vb-gold); outline-offset: -4px; }

@media (max-width: 900px) { .vb-tiles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==================================================================
 * Stage showcase (Home journey + Experience) — lush green stage
 * ================================================================== */
.vb-journey,
.tlm-showcase-section[data-tlm-stage-showcase] {
	background: var(--vb-lagoon-sky) !important;
	background-size: 160% 160% !important;
	animation: vb-sky 28s ease-in-out infinite alternate;
	color: #fff;
}

.vb-journey .tlm-showcase-inner,
.tlm-showcase-section[data-tlm-stage-showcase] .tlm-showcase-inner { position: relative; z-index: 4; }

.vb-journey { padding-top: calc(var(--tlm-section-py, 6rem) + 1.5rem) !important; }

[data-tlm-stage-showcase] .tlm-showcase-kicker {
	display: inline-block;
	width: fit-content;
	justify-self: start;
	padding: 0.35rem 0.9rem;
	border-radius: 999px;
	background: var(--vb-gold);
	color: var(--vb-ink);
	font-weight: 800;
}

[data-tlm-stage-showcase] .tlm-showcase-title,
[data-tlm-stage-showcase] .tlm-showcase-panel__title {
	color: #fff;
	font-variation-settings: "SOFT" 100, "WONK" 1;
	font-weight: 750;
}

[data-tlm-stage-showcase] .tlm-showcase-lede,
[data-tlm-stage-showcase] .tlm-showcase-panel__desc { color: rgba(255, 255, 255, 0.9); }

[data-tlm-stage-showcase] .tlm-showcase-panel__eyebrow { color: #FFE08A; font-weight: 800; }

[data-tlm-stage-showcase] .tlm-showcase-nav { border-bottom-color: rgba(255, 255, 255, 0.25); }

[data-tlm-stage-showcase] .tlm-showcase-tab { color: rgba(255, 255, 255, 0.78); }
[data-tlm-stage-showcase] .tlm-showcase-tab__num { color: var(--vb-gold); }
[data-tlm-stage-showcase] .tlm-showcase-tab:hover { color: #fff; }
[data-tlm-stage-showcase] .tlm-showcase-tab.is-active { color: #fff; border-bottom-color: var(--vb-gold); }

[data-tlm-stage-showcase] .tlm-showcase-media-frame {
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 14px 14px 0 var(--vb-coral);
}

[data-tlm-stage-showcase] .tlm-showcase-controls { border-top-color: rgba(255, 255, 255, 0.25); }
[data-tlm-stage-showcase] .tlm-showcase-nav-btn { color: #fff; }
[data-tlm-stage-showcase] .tlm-showcase-nav-btn:hover:not(:disabled) { color: var(--vb-gold); }
[data-tlm-stage-showcase] .tlm-showcase-counter { color: rgba(255, 255, 255, 0.85); }

/* FAQ on cream: warmer numerals and answers */
.tlm-faq-question { color: var(--vb-brown-deep); }

/* ==================================================================
 * Page heroes (Gallery, Shop, Contact, Story): colour + wave edge
 * ================================================================== */
body .tlm-gallery-opening,
body .tlm-shop-hero,
body .tlm-contact-hero {
	position: relative;
	isolation: isolate;
	padding-bottom: calc(clamp(3rem, 5vw, 4.5rem) + 48px);
}

body .tlm-gallery-opening { background: var(--vb-lagoon-sky); }
body .tlm-shop-hero { background: var(--vb-sunset); }
body .tlm-contact-hero { background: var(--vb-dusk); }

body .tlm-gallery-opening::after,
body .tlm-shop-hero::after,
body .tlm-contact-hero::after {
	content: "";
	position: absolute;
	z-index: 3;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 96px;
	background: var(--vb-cream);
	-webkit-mask: var(--vb-mask-ridge) no-repeat bottom / 100% 100%;
	mask: var(--vb-mask-ridge) no-repeat bottom / 100% 100%;
	pointer-events: none;
}

body .tlm-gallery-opening img,
body .tlm-shop-hero__figure img,
body .tlm-contact-hero__figure img {
	border-radius: 24px;
	box-shadow: 14px 14px 0 var(--vb-coral);
}

body .tlm-gallery-opening h1,
body .tlm-shop-hero__title,
body .tlm-contact-hero__title {
	font-variation-settings: "SOFT" 100, "WONK" 1;
	font-weight: 750;
	color: #fff;
}

body .tlm-gallery-opening .tlm-journal__kicker {
	display: inline-block;
	padding: 0.35rem 0.9rem;
	border-radius: 999px;
	background: var(--vb-gold);
	color: var(--vb-ink);
	font-weight: 800;
}

/* Primary buttons everywhere: same rounded gold "pressable" button. */
body .tlm-shop-hero__primary,
body .tlm-contact-hero__primary,
body .tlm-single-wa-btn,
body .tlm-shop-final-cta__button {
	border-radius: 999px;
	box-shadow: 0 6px 0 rgba(0, 0, 0, 0.28);
	font-weight: 800;
}

/* ==================================================================
 * Footer: deep cacao with cream drips
 * ================================================================== */
body .tlm-footer {
	background: var(--vb-night);
	position: relative;
	padding-top: 8px;
	margin-top: 96px;
}

body .tlm-footer::before {
	content: "";
	position: absolute;
	top: -95px;
	left: 0;
	right: 0;
	height: 96px;
	background: var(--vb-night);
	-webkit-mask: var(--vb-mask-ridge) no-repeat bottom / 100% 100%;
	mask: var(--vb-mask-ridge) no-repeat bottom / 100% 100%;
	pointer-events: none;
}

body .tlm-footer .tlm-footer__col-title { color: var(--vb-gold); font-weight: 750; font-variation-settings: "SOFT" 100; }

/* Shorter slideshow hero for inner pages */
.vb-hero--compact { min-height: clamp(560px, 88vh, 780px); }
.vb-hero--compact h1 { font-size: clamp(2.6rem, 5.6vw, 5rem); max-width: 16ch; }

/* Our Story hero */
body .tlm-story-hero-split {
	position: relative;
	isolation: isolate;
	background: var(--vb-lagoon-sky);
	padding-bottom: calc(var(--tlm-section-quiet, 4rem) + 48px);
}

body .tlm-story-hero-split::after {
	content: "";
	position: absolute;
	z-index: 3;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 96px;
	background: var(--vb-cream);
	-webkit-mask: var(--vb-mask-ridge) no-repeat bottom / 100% 100%;
	mask: var(--vb-mask-ridge) no-repeat bottom / 100% 100%;
	pointer-events: none;
}

body .tlm-story-hero-split__frame { border-radius: 24px !important; overflow: hidden; box-shadow: 14px 14px 0 var(--vb-coral) !important; }
body .tlm-story-hero-split__title { font-variation-settings: "SOFT" 100, "WONK" 1; font-weight: 750; color: #fff; }
body .tlm-story-hero-split__btn { border-radius: 999px; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.28); }
body .tlm-story-hero-split__badge { display: inline-block; padding: 0.35rem 0.9rem !important; border-radius: 999px; background: var(--vb-gold) !important; color: var(--vb-ink) !important; font-weight: 800; }

@media (max-width: 900px) {
	.vb-tiles__label { font-size: clamp(1.3rem, 5.4vw, 1.9rem); left: 1rem; right: 0.75rem; bottom: 1.25rem; overflow-wrap: normal; }
}

/* ==================================================================
 * Motion: drifting skies, hero words, scroll reveals, flavour ribbon
 * ================================================================== */
@keyframes vb-sky {
	from { background-position: 0% 30%; }
	to { background-position: 100% 70%; }
}

@media (prefers-reduced-motion: reduce) {
	.vb-facts, .vb-family, .vb-price, .vb-journey, .tlm-showcase-section[data-tlm-stage-showcase] { animation: none !important; }
}

/* Hero headline: words rise in one by one (JS wraps the words) */
.vb-anim .vb-hero h1 .vb-word {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	padding-bottom: 0.08em;
}

.vb-anim .vb-hero h1 .vb-word > span {
	display: inline-block;
	transform: translateY(110%);
	animation: vb-word-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	animation-delay: calc(var(--vb-w, 0) * 90ms + 200ms);
}

@keyframes vb-word-up { to { transform: none; } }

.vb-anim .vb-hero .vb-kicker,
.vb-anim .vb-hero__lede,
.vb-anim .vb-hero__price,
.vb-anim .vb-hero__actions {
	opacity: 0;
	transform: translateY(18px);
	animation: vb-fade-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.vb-anim .vb-hero .vb-kicker { animation-delay: 0.05s; }
.vb-anim .vb-hero__lede { animation-delay: 0.85s; }
.vb-anim .vb-hero__price { animation-delay: 1s; }
.vb-anim .vb-hero__actions { animation-delay: 1.15s; }

@keyframes vb-fade-up { to { opacity: 1; transform: none; } }

/* Scroll reveals */
.vb-anim [data-vb-reveal] {
	opacity: 0;
	transform: translateY(34px) scale(0.98);
	transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: calc(var(--vb-i, 0) * 110ms);
}

.vb-anim [data-vb-reveal].is-in { opacity: 1; transform: none; }

.vb-anim [data-vb-reveal="left"] { transform: translateX(-46px); }
.vb-anim [data-vb-reveal="right"] { transform: translateX(46px); }
.vb-anim [data-vb-reveal="left"].is-in,
.vb-anim [data-vb-reveal="right"].is-in { transform: none; }

@media (prefers-reduced-motion: reduce) {
	.vb-anim [data-vb-reveal], .vb-anim .vb-hero h1 .vb-word > span,
	.vb-anim .vb-hero .vb-kicker, .vb-anim .vb-hero__lede, .vb-anim .vb-hero__price, .vb-anim .vb-hero__actions {
		opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important;
	}
}

/* Floating photo motion (scroll-linked, progressive enhancement) */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.vb-intro__main img, .vb-family__photo img { animation: vb-parallax linear both; animation-timeline: view(); animation-range: cover; }
		.vb-intro__inset { animation: vb-float linear both; animation-timeline: view(); animation-range: cover; }
	}
}

@keyframes vb-parallax { from { transform: scale(1.12) translateY(-4%); } to { transform: scale(1.12) translateY(4%); } }
@keyframes vb-float { from { transform: translateY(40px) rotate(2deg); } to { transform: translateY(-40px) rotate(-2deg); } }

/* Flavour ribbon: each product's own colour */
.vb-flavors {
	background: var(--vb-night);
	padding: 1.75rem 0;
	overflow: hidden;
}

.vb-flavors__track {
	display: flex;
	gap: 1rem;
	width: max-content;
	animation: vb-marquee 46s linear infinite;
}

.vb-flavors:hover .vb-flavors__track { animation-play-state: paused; }

@keyframes vb-marquee { to { transform: translateX(-50%); } }

.vb-flavor {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.7rem 1.4rem;
	border-radius: 999px;
	background: var(--f-bg);
	color: var(--f-ink, #fff);
	font-family: var(--tlm-font-display);
	font-variation-settings: "SOFT" 100, "WONK" 1;
	font-size: 1.35rem;
	font-weight: 700;
	white-space: nowrap;
}

.vb-flavor::before {
	content: "";
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	background: var(--f-dot, #fff);
}

@media (prefers-reduced-motion: reduce) {
	.vb-flavors__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; padding-inline: 1rem; }
}

/* Products band and booking dossier take the identity gradients too */
body .tlm5-products {
	background: var(--vb-sunset);
	background-size: 160% 160%;
	animation: vb-sky 24s ease-in-out infinite alternate;
	color: #fff;
}

body .tlm-dossier-section {
	background: linear-gradient(160deg, #1B2440 0%, #3A2160 100%);
}

.vb-reviews { background: var(--vb-lagoon-sky); }

@media (prefers-reduced-motion: reduce) { body .tlm5-products { animation: none; } }

/* ==================================================================
 * Interior pages — identity gradients, bolder type, playful photos
 * ================================================================== */
:root {
	--vb-stage-1: linear-gradient(160deg, #FFE7D0, #FFC7BE 55%, #E5CBF3);
	--vb-stage-2: linear-gradient(160deg, #D8F1F8, #BFE5F2 55%, #F5D5E4);
	--vb-stage-3: linear-gradient(160deg, #FFF0C2, #FFD1A6 55%, #FFB7B0);
	--vb-stage-4: linear-gradient(160deg, #E8DCF7, #F6C5DA 55%, #FFD9B8);
	--vb-stage-5: linear-gradient(160deg, #D7F0DD, #C6E7F0 55%, #E6DAF6);
	--vb-stage-6: linear-gradient(160deg, #FFDCE3, #FFC9A8 55%, #FFE8A6);
	--vb-edge-pad: max(var(--tlm-section-px, 1.5rem), calc((100vw - var(--tlm-content-max, 1280px)) / 2));
}

/* Gradient headline text */
.tlm-xp-overview__header h2,
.tlm-xp-guests h2,
.tlm-story-timeline__head h2,
.tlm-sustainability__header h2,
.tlm-story-mosaic__heading-row h2 {
	background: var(--vb-dusk);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	font-variation-settings: "SOFT" 100, "WONK" 1;
	font-weight: 750;
}

/* Editorial rows: gradient spine */
.tlm-editorial-list__row,
.tlm-sustainability__card {
	position: relative;
	padding-left: 1.6rem !important;
	border: 0 !important;
}

.tlm-editorial-list__row::before,
.tlm-sustainability__card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35rem;
	bottom: 0.35rem;
	width: 6px;
	border-radius: 3px;
	background: linear-gradient(180deg, #F0625E, #B0325F 55%, #5E2751);
}

.tlm-editorial-list__row:nth-child(2)::before,
.tlm-sustainability__card:nth-child(2)::before { background: linear-gradient(180deg, #2FA8D8, #1C628D 60%, #1B2440); }
.tlm-editorial-list__row:nth-child(3)::before,
.tlm-sustainability__card:nth-child(3)::before { background: linear-gradient(180deg, #FFC94D, #F59A3B 55%, #F0625E); }

.tlm-editorial-list__row h3, .tlm-sustainability__card h3 { font-variation-settings: "SOFT" 100; font-weight: 700; }

/* Photos: rounded, offset colour, small playful tilt that straightens on hover */
.tlm-xp-guests__tall img, .tlm-xp-guests__top img, .tlm-xp-guests__bottom img,
.tlm-founders__diptych-photo img, .tlm-story-mosaic__item img,
.tlm-xp-family__photo img {
	border-radius: 22px;
	transition: transform 0.5s var(--tlm-v3-ease-out, ease-out), box-shadow 0.5s var(--tlm-v3-ease-out, ease-out);
}

.tlm-xp-guests__tall { transform: rotate(-2deg); }
.tlm-xp-guests__top { transform: rotate(1.6deg); }
.tlm-xp-guests__bottom { transform: rotate(-1.2deg); }
.tlm-xp-guests__tall img { box-shadow: 12px 12px 0 var(--vb-coral); }
.tlm-xp-guests__top img { box-shadow: -10px 10px 0 var(--vb-cyan); }
.tlm-xp-guests__bottom img { box-shadow: 10px 10px 0 var(--vb-sun); }
.tlm-xp-guests__tall, .tlm-xp-guests__top, .tlm-xp-guests__bottom { transition: transform 0.5s var(--tlm-v3-ease-out, ease-out); }
.tlm-xp-guests__tall:hover, .tlm-xp-guests__top:hover, .tlm-xp-guests__bottom:hover { transform: rotate(0) scale(1.03); }

.tlm-founders__diptych-photo:nth-child(1) img { box-shadow: 12px 12px 0 var(--vb-cyan); }
.tlm-founders__diptych-photo:nth-child(2) img { box-shadow: -12px 12px 0 var(--vb-coral); }

.tlm-story-mosaic__item:nth-child(3n+1) img { box-shadow: 10px 10px 0 var(--vb-coral); }
.tlm-story-mosaic__item:nth-child(3n+2) img { box-shadow: 10px 10px 0 var(--vb-cyan); }
.tlm-story-mosaic__item:nth-child(3n) img { box-shadow: 10px 10px 0 var(--vb-sun); }
.tlm-story-mosaic__item:hover img { transform: translateY(-6px) rotate(-1deg); }

/* Family band (Experience) — dusk gradient, full bleed */
.tlm-xp-family {
	width: auto !important;
	margin-inline: calc(50% - 50vw) !important;
	max-width: none !important;
	padding-inline: var(--vb-edge-pad) !important;
	background: var(--vb-dusk);
	background-size: 160% 160%;
	animation: vb-sky 26s ease-in-out infinite alternate;
	color: #fff;
	position: relative;
}

.tlm-xp-family h2, .tlm-xp-family .wp-block-heading { color: #fff !important; -webkit-text-fill-color: #fff; }
.tlm-xp-family p { color: rgba(255, 255, 255, 0.92) !important; }
.tlm-xp-family .tlm-journal__kicker { color: #FFE08A !important; }
.tlm-xp-family__link { color: #fff !important; text-decoration-color: var(--vb-sun) !important; }
.tlm-xp-family__photo img { box-shadow: -12px 12px 0 var(--vb-sun); }

/* Story: convergence quote as a dusk band, milestone years in gradient */
.tlm-founders__convergence {
	background: var(--vb-dusk) !important;
	color: #fff !important;
	border-radius: 32px;
	padding: clamp(2rem, 5vw, 4rem) !important;
	max-width: 62rem !important;
	margin-inline: auto !important;
	text-align: center;
}

.tlm-founders__convergence * { color: #fff !important; }
.tlm-founders__quote { font-size: clamp(1.5rem, 2.8vw, 2.4rem) !important; line-height: 1.25 !important; max-width: 34ch; margin-inline: auto; font-variation-settings: "SOFT" 100, "WONK" 1; }

.tlm-story-milestone__year, .tlm-story-milestone h3 { font-variation-settings: "SOFT" 100; }
.tlm-story-milestone__dot span {
	display: inline-block;
	padding: 0.15rem 0.85rem !important;
	border-radius: 999px;
	color: #fff !important;
	font-weight: 800;
}

.tlm-story-milestone:nth-child(1) .tlm-story-milestone__dot span { background: #1C628D !important; }
.tlm-story-milestone:nth-child(2) .tlm-story-milestone__dot span { background: #5E2751 !important; }
.tlm-story-milestone:nth-child(3) .tlm-story-milestone__dot span { background: #B0325F !important; }
.tlm-story-milestone:nth-child(4) .tlm-story-milestone__dot span { background: #D8464E !important; }
.tlm-story-milestone:nth-child(5) .tlm-story-milestone__dot span { background: #C77A12 !important; }

/* Story: closing band */
body .tlm-story-today {
	background: var(--vb-lagoon-sky) !important;
	background-size: 160% 160% !important;
	animation: vb-sky 28s ease-in-out infinite alternate;
	position: relative;
}

body .tlm-story-today::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -149px;
	height: 150px;
	background: #1B2440;
	-webkit-mask: var(--vb-mask-ridge) no-repeat bottom / 100% 100%;
	mask: var(--vb-mask-ridge) no-repeat bottom / 100% 100%;
	pointer-events: none;
}

body .tlm-story-today .tlm-cta-primary .wp-block-button__link,
body .tlm-xp-family .tlm-cta-primary .wp-block-button__link { border-radius: 999px; }

@media (prefers-reduced-motion: reduce) { .tlm-xp-family, body .tlm-story-today { animation: none; } }

/* ==================================================================
 * Shop, gallery, product, contact
 * ================================================================== */
/* Category / filter tabs become colourful pills */
body .tlm-shop-cat-nav__inner,
body .tlm-gallery-filters { background: none; gap: 0.6rem; padding-bottom: 0.5rem; }

body .tlm-shop-cat-nav__link,
body .tlm-gallery-filters__btn {
	padding: 0.65rem 1.25rem !important;
	border: 2px solid rgba(27, 36, 64, 0.14) !important;
	border-radius: 999px !important;
	background: #fff !important;
	color: var(--vb-night) !important;
	font-weight: 750;
	transition: transform 0.25s var(--tlm-v3-ease-out, ease-out), background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
}

body .tlm-shop-cat-nav__link:hover,
body .tlm-gallery-filters__btn:hover { transform: translateY(-3px) rotate(-1deg); border-color: var(--vb-coral) !important; }

body .tlm-shop-cat-nav__link.is-active,
body .tlm-gallery-filters__btn.is-active {
	background: var(--vb-sunset) !important;
	border-color: transparent !important;
	color: #fff !important;
	box-shadow: 0 6px 0 rgba(27, 18, 48, 0.25);
}

body .tlm-shop-cat-nav__count { color: inherit; opacity: 0.85; }

/* Product tiles: packshot printed on a colour stage (each tile its own gradient) */
body.woocommerce ul.products li.product a.ct-media-container,
body ul.products li.product a.ct-media-container {
	background: var(--vb-stage-1) !important;
	border-radius: 24px !important;
	transition: transform 0.45s var(--tlm-v3-ease-out, ease-out), box-shadow 0.45s var(--tlm-v3-ease-out, ease-out) !important;
}

body ul.products li.product:nth-child(6n+2) a.ct-media-container { background: var(--vb-stage-2) !important; }
body ul.products li.product:nth-child(6n+3) a.ct-media-container { background: var(--vb-stage-3) !important; }
body ul.products li.product:nth-child(6n+4) a.ct-media-container { background: var(--vb-stage-4) !important; }
body ul.products li.product:nth-child(6n+5) a.ct-media-container { background: var(--vb-stage-5) !important; }
body ul.products li.product:nth-child(6n+6) a.ct-media-container { background: var(--vb-stage-6) !important; }

body ul.products li.product a.ct-media-container img {
	mix-blend-mode: multiply;
	transition: transform 0.6s var(--tlm-v3-ease-out, ease-out) !important;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	body ul.products li.product:hover a.ct-media-container { transform: translateY(-8px) rotate(-1deg); box-shadow: 0 22px 0 -10px rgba(27, 36, 64, 0.18); }
	body ul.products li.product:hover a.ct-media-container img { transform: scale(1.05) rotate(1.5deg) !important; }
}

body ul.products li.product .woocommerce-loop-product__title { font-variation-settings: "SOFT" 100, "WONK" 1; font-weight: 700; }
body ul.products li.product .price { color: var(--vb-berry); font-weight: 800; }

body ul.products li.product .button {
	padding: 0.6rem 1.3rem !important;
	background: var(--vb-night) !important;
	border: 0 !important;
	border-radius: 999px !important;
	color: #fff !important;
	transition: background 0.3s ease, transform 0.25s ease !important;
}

body ul.products li.product .button:hover { background: var(--vb-berry) !important; color: #fff !important; transform: translateY(-2px) !important; }

/* Single product */
body.single-product .woocommerce-product-gallery {
	background: var(--vb-stage-1) !important;
	border-radius: 32px;
}

body.single-product .woocommerce-product-gallery figure.ct-media-container > img { mix-blend-mode: multiply; }
body.single-product .summary .product_title { background: var(--vb-dusk); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-variation-settings: "SOFT" 100, "WONK" 1; font-weight: 750; }
body.single-product .summary .price, body.single-product .summary .price .woocommerce-Price-amount { color: var(--vb-berry); }

/* Gallery wall */
.tlm-gallery-item__frame { border-radius: 20px !important; }
.tlm-gallery-item__frame img { border-radius: 20px; transition: transform 0.6s var(--tlm-v3-ease-out, ease-out); }
.tlm-gallery-item__frame:hover img { transform: scale(1.05); }
.tlm-gallery-item:nth-child(3n+1) .tlm-gallery-item__frame { box-shadow: 8px 8px 0 var(--vb-coral); }
.tlm-gallery-item:nth-child(3n+2) .tlm-gallery-item__frame { box-shadow: 8px 8px 0 var(--vb-cyan); }
.tlm-gallery-item:nth-child(3n) .tlm-gallery-item__frame { box-shadow: 8px 8px 0 var(--vb-sun); }
.tlm-gallery-item { margin-bottom: 1.6rem !important; }

.tlm-gallery-cta, .tlm-shop-final-cta { background: var(--vb-sunset) !important; }
.tlm-contact-cta { background: var(--vb-lagoon-sky) !important; }

/* Contact form */
body .tlm-contact-main .tlm-contact-main__form {
	border-radius: 28px;
	border-top: 10px solid transparent;
	background: linear-gradient(#fff, #fff) padding-box, var(--vb-sunset) border-box;
	box-shadow: 0 30px 60px -30px rgba(27, 18, 48, 0.35);
}

body .tlm-form-row input, body .tlm-form-row textarea, body .tlm-form-row select { border-radius: 14px !important; }
body .tlm-form-row input:focus, body .tlm-form-row textarea:focus { border-color: var(--vb-cyan) !important; box-shadow: 0 0 0 4px rgba(47, 168, 216, 0.22) !important; }
body .tlm-form-row .wpcf7-form-control[type="submit"] { border-radius: 999px !important; background: var(--vb-sunset) !important; color: #fff !important; box-shadow: 0 6px 0 rgba(27, 18, 48, 0.25); }

body.single-product .woocommerce-product-gallery .ct-media-container,
body.single-product .woocommerce-product-gallery .flexy-item,
body.single-product .woocommerce-product-gallery .flexy-view,
body.single-product .woocommerce-product-gallery .ct-product-gallery-container { background: transparent !important; isolation: auto !important; }
body.single-product .woocommerce-product-gallery .flexy-pills img, body.single-product .woocommerce-product-gallery .flexy-pills li { mix-blend-mode: multiply; }

/* The gallery slider items are transformed (own stacking context), so the
   colour stage lives on the item itself and the packshot multiplies into it. */
body.single-product .woocommerce-product-gallery { background: transparent !important; padding: 0 !important; overflow: visible; }
/* padding: without it, a photo tall enough to touch the box's own edges
   (a flatlay, not a slim bar bag) gets its own corners rounded off by the
   32px radius below — bites a curved notch out of real photo content. The
   padding keeps every photo, whatever its own shape, inside the straight
   part of the frame. */
body.single-product .woocommerce-product-gallery .flexy-item {
	background: var(--vb-stage-1) !important;
	padding: 12%;
	box-sizing: border-box;
	border-radius: 32px;
	overflow: hidden;
}
body.single-product .woocommerce-product-gallery figure.ct-media-container > img,
body.single-product .woocommerce-product-gallery .flexy-item img { mix-blend-mode: multiply !important; }

/* Push the packshot's off-white backdrop to pure white so it disappears when multiplied. */
body.single-product .woocommerce-product-gallery .flexy-item img,
body ul.products li.product a.ct-media-container img { filter: brightness(1.09) contrast(1.06) !important; }

/* Short, wide windows: tighter stack so the photo (and the faces) stay in view. */
@media (min-aspect-ratio: 16/7) {
	.vb-hero { min-height: 100vh; }
	.vb-hero__content { padding-top: calc(var(--tlm-v3-header-h, 72px) + 0.5rem); padding-bottom: 1.5rem; }
	.vb-hero__price { margin-bottom: 1rem; padding: 0.45rem 1rem; }
	.vb-hero .vb-kicker { margin-bottom: 0.5rem; }
	.vb-hero h1 { margin-bottom: 0.75rem; }
	.vb-hero__shade { background: linear-gradient(90deg, rgba(20, 16, 46, 0.66) 0%, rgba(20, 16, 46, 0.3) 40%, rgba(20, 16, 46, 0) 68%), linear-gradient(0deg, rgba(20, 16, 46, 0.3) 0%, transparent 28%); }
}

/* Bar reverse (hover swap): fades in on the same colour stage, everywhere. */
body ul.products li.product:nth-child(6n+1) a.ct-media-container { background: var(--vb-stage-1) !important; }
body ul.products li.product a.ct-media-container { position: relative; overflow: hidden !important; }

body ul.products li.product a.ct-media-container .ct-swap {
	display: block !important;
	position: absolute !important;
	inset: 0 !important;
	margin: auto !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	opacity: 0 !important;
	mix-blend-mode: multiply !important;
	filter: brightness(1.09) contrast(1.06) !important;
	transform: none !important;
	transition: opacity 0.5s ease, transform 0.6s var(--tlm-v3-ease-out, ease-out) !important;
	pointer-events: none !important;
}

body ul.products li.product a.ct-media-container .wp-post-image { transition: opacity 0.5s ease, transform 0.6s var(--tlm-v3-ease-out, ease-out) !important; }

@media (hover: hover) {
	body ul.products li.product a.ct-media-container:hover .ct-swap,
	body ul.products li.product a.ct-media-container:focus-visible .ct-swap { opacity: 1 !important; transform: scale(1.05) !important; }
	body ul.products li.product a.ct-media-container:hover .wp-post-image,
	body ul.products li.product a.ct-media-container:focus-visible .wp-post-image { opacity: 0 !important; }
}

/* ==================================================================
 * Legibility: larger base size and a floor for small text
 * ================================================================== */
html { font-size: 112.5%; }

body { font-size: 1rem; line-height: 1.7; }

.vb-btn,
body .tlm-single-wa-btn,
body .tlm-shop-hero__primary,
body .tlm-contact-hero__primary,
body .tlm-cta-primary .wp-block-button__link,
body .tlm-cta-secondary .wp-block-button__link,
body ul.products li.product .button { font-size: 1.02rem !important; }

.single-product .product_meta,
.single-product .product_meta *,
.single-product .sku_wrapper,
.woocommerce-result-count,
.tlm-gallery-item__caption,
.tlm-catalog-inquiry__shipping,
body ul.products li.product .entry-meta a,
body ul.products li.product .tlm-catalog-inquiry-link--loop { font-size: max(0.95rem, 15px) !important; }

.tlm-catalog-inquiry__shipping { line-height: 1.6; max-width: 48ch; }
.woocommerce-product-details__short-description { font-size: 1.1rem; }

.tlm-founders__diptych-photo img { object-position: center 22%; }

/* Reviews band: real quotes from the owners' previous shop */
.vb-reviews__sub { margin: 0; color: var(--vb-sun); font-weight: 800; }
.vb-reviews__btn-icon { width: 1.4rem; height: 1.4rem; fill: currentColor; }
.vb-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; width: 100%; margin: 0.5rem 0 1rem; text-align: left; }
.vb-quote { margin: 0; padding: 1.75rem; border-radius: 24px; background: rgba(255, 255, 255, 0.12); border: 2px solid rgba(255, 255, 255, 0.25); }
.vb-quote blockquote { margin: 0 0 1rem; padding: 0; border: 0; font-family: var(--tlm-font-display); font-variation-settings: "SOFT" 100, "WONK" 1; font-size: 1.3rem; font-weight: 600; line-height: 1.35; color: #fff; }
.vb-quote blockquote p { margin: 0; color: inherit; }
.vb-quote blockquote::before { content: "\201C"; display: block; font-size: 3.5rem; line-height: 0.6; color: var(--vb-sun); }
.vb-quote figcaption { font-weight: 800; color: var(--vb-sun); }
@media (max-width: 900px) { .vb-quotes { grid-template-columns: minmax(0, 1fr); } }

.vb-final__sub { max-width: 40rem; margin: -1rem auto 2rem; font-size: 1.15rem; line-height: 1.6; color: rgba(255, 255, 255, 0.92); }

.vb-hero h1 em { display: block; }

/* Product cards: the whole card is the link, so no button rows underneath, and the
   packshot sits fully inside its colour stage with breathing room (never cropped). */
body ul.products li.product .ct-woo-card-actions,
body ul.products li.product .tlm-catalog-inquiry-link--loop { display: none !important; }

body ul.products li.product a.ct-media-container { padding: 6% !important; box-sizing: border-box; }

body ul.products li.product .price { margin-bottom: 0.25rem; }

/* ==================================================================
 * Footer legibility: every line at a comfortable reading size
 * ================================================================== */
body .tlm-footer { font-size: 1.12rem; }
body .tlm-footer p,
body .tlm-footer li,
body .tlm-footer a,
body .tlm-footer address { font-size: 1.12rem; line-height: 1.55; }
body .tlm-footer .tlm-footer__tagline { font-size: 1.25rem; line-height: 1.5; }
body .tlm-footer .tlm-footer__col-title { font-size: 1.55rem; }
body .tlm-footer .tlm-footer__languages-notice,
body .tlm-footer .tlm-footer__drive-time { font-size: 1.05rem; color: rgba(255, 255, 255, 0.8); }
body .tlm-footer .tlm-footer__copyright { font-size: 1.12rem; color: rgba(255, 255, 255, 0.88); }
body .tlm-footer .tlm-footer__bottom a,
body .tlm-footer .tlm-footer__bottom p,
body .tlm-footer .tlm-footer__bottom span { font-size: 1.05rem; }

/* ==================================================================
 * 404: a cacao pod that wandered off
 * ================================================================== */
body .tlm-error-page {
	position: relative;
	margin-bottom: -96px; /* run under the footer ridge, no cream gap */
	padding: clamp(4rem, 8vw, 7rem) 0 calc(96px + clamp(3rem, 6vw, 5rem));
	min-height: 70vh;
	background:
		radial-gradient(60% 50% at 82% 8%, rgba(255, 201, 77, 0.5), transparent 70%),
		var(--vb-dusk);
	color: #fff;
	text-align: center;
}

.tlm-error-page__inner {
	max-width: 62rem;
	margin-inline: auto;
	padding-inline: var(--tlm-section-px, 1.5rem);
}

.tlm-error-page__code {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.04em;
	margin: 0 0 0.5rem;
	font-family: var(--tlm-font-display);
	font-variation-settings: "SOFT" 100, "WONK" 1;
	font-weight: 800;
	font-size: clamp(7rem, 24vw, 14rem);
	line-height: 0.9;
	letter-spacing: -0.04em;
	color: #fff;
	text-shadow: 0.05em 0.05em 0 rgba(27, 36, 64, 0.35);
}

.tlm-error-page__pod {
	width: 0.62em;
	height: 0.9em;
	filter: drop-shadow(0.05em 0.05em 0 rgba(27, 36, 64, 0.35));
	transform-origin: 50% 0;
	transform: rotate(14deg);
}

@media (prefers-reduced-motion: no-preference) {
	.tlm-error-page__pod { animation: tlm-pod-sway 4.5s ease-in-out infinite; }
	@keyframes tlm-pod-sway {
		0%, 100% { transform: rotate(14deg); }
		50% { transform: rotate(-9deg); }
	}
}

body .tlm-error-page__title {
	max-width: 18ch;
	margin: 0 auto 1rem;
	color: #fff;
	font-family: var(--tlm-font-display);
	font-variation-settings: "SOFT" 100, "WONK" 1;
	font-size: clamp(2rem, 4.6vw, 3.4rem);
	font-weight: 700;
	line-height: 1.06;
	text-wrap: balance;
}

.tlm-error-page__text {
	max-width: 44ch;
	margin: 0 auto 2rem;
	color: rgba(255, 255, 255, 0.92);
	font-size: 1.2rem;
	line-height: 1.6;
}

.tlm-error-page__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.85rem;
	margin-bottom: 2.5rem;
}

.tlm-error-page__search {
	display: flex;
	max-width: 30rem;
	margin: 0 auto 1.75rem;
	padding: 5px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 8px 0 rgba(27, 36, 64, 0.22);
}

.tlm-error-page__search input[type="search"] {
	flex: 1;
	min-width: 0;
	height: 3rem;
	padding: 0 1.25rem;
	border: 0 !important;
	border-radius: 999px;
	background: transparent !important;
	color: var(--vb-night);
	font-size: 1.05rem;
}

.tlm-error-page__search input[type="search"]::placeholder { color: rgba(27, 36, 64, 0.6); }
.tlm-error-page__search input[type="search"]:focus-visible { outline: 3px solid var(--vb-coral); outline-offset: 0; }

.tlm-error-page__search button {
	height: 3rem;
	padding: 0 1.6rem !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--vb-night) !important;
	color: #fff !important;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.tlm-error-page__search button:hover,
.tlm-error-page__search button:focus-visible { background: var(--vb-berry) !important; }

.tlm-error-page__help { margin: 0; color: rgba(255, 255, 255, 0.92); font-size: 1.05rem; }
.tlm-error-page__help a { color: var(--vb-sun); font-weight: 700; text-underline-offset: 3px; }
.tlm-error-page__help a:hover { color: #fff; }

/* Gallery viewer: photos speak for themselves, no caption strip under them
   (the alt text and the trigger's aria-label still describe each photo). */
.tlm-lightbox__caption { display: none !important; }

/* ==================================================================
 * Mobile drawer: a dusk sky over the volcano, links that rise in one by one.
 * Not scoped to .tlm-v3-page, so product and shop pages get it too
 * (they lacked that class, which left the drawer unstyled and invisible).
 * ================================================================== */
/* The drawer carries the class .ct-header, so the header's `position: sticky`
   rule reached it too: on pages without a hero (products, shop) it collapsed
   to 1px high and the hamburger looked dead. Keep it fixed and full height. */
body #offcanvas.ct-panel {
	position: fixed !important;
	inset: 0;
	height: 100%;
	background: var(--vb-night) !important;
}

body #offcanvas .ct-panel-inner {
	overflow: hidden;
	background:
		radial-gradient(70% 38% at 88% 6%, rgba(255, 201, 77, 0.45), transparent 70%),
		linear-gradient(175deg, #1B2440 0%, #5E2751 42%, #B0325F 74%, #F0625E 100%) !important;
	background-size: 100% 100%, 100% 160% !important;
	color: #fff;
}

/* Volcano ridges along the bottom of the panel */
body #offcanvas .ct-panel-inner::before,
body #offcanvas .ct-panel-inner::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	pointer-events: none;
	-webkit-mask: var(--vb-mask-ridge) no-repeat bottom / 100% 100%;
	mask: var(--vb-mask-ridge) no-repeat bottom / 100% 100%;
}

body #offcanvas .ct-panel-inner::before { height: 150px; background: rgba(27, 36, 64, 0.5); transform: translateY(-14px); }
body #offcanvas .ct-panel-inner::after { height: 110px; background: var(--vb-night); }

body #offcanvas .ct-panel-actions,
body #offcanvas .ct-panel-content { position: relative; z-index: 1; }

body #offcanvas .ct-toggle-close { color: #fff; }

body #offcanvas nav > ul { padding-block: 0.5rem; }

body #offcanvas nav li.menu-item { list-style: none; }

body #offcanvas nav li.menu-item:not(.tlm-lang-switch):not(.tlm-drawer-cta) > .ct-menu-link {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.55rem 0;
	color: #fff;
	font-family: var(--tlm-font-display);
	font-variation-settings: "SOFT" 100, "WONK" 1;
	font-size: clamp(1.9rem, 8.4vw, 2.5rem);
	font-weight: 700;
	line-height: 1.1;
	text-transform: none;
	letter-spacing: -0.01em;
	transition: transform 0.25s var(--tlm-v3-ease-out, ease-out), color 0.2s ease;
}

/* a coloured bead per link, in the packaging palette */
body #offcanvas nav li.menu-item:not(.tlm-lang-switch):not(.tlm-drawer-cta) > .ct-menu-link::before {
	content: "";
	flex: none;
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: var(--bead, var(--vb-sun));
	box-shadow: 0 0 0 0.16em rgba(255, 255, 255, 0.16);
}

body #offcanvas nav li.menu-item:nth-child(1) { --bead: var(--vb-sun); }
body #offcanvas nav li.menu-item:nth-child(2) { --bead: var(--vb-aqua); }
body #offcanvas nav li.menu-item:nth-child(3) { --bead: var(--vb-leaf); }
body #offcanvas nav li.menu-item:nth-child(4) { --bead: var(--vb-tangerine); }
body #offcanvas nav li.menu-item:nth-child(5) { --bead: var(--vb-coral); }

body #offcanvas nav li.menu-item > .ct-menu-link:hover,
body #offcanvas nav li.menu-item > .ct-menu-link:focus-visible { color: var(--vb-sun); transform: translateX(6px); }

body #offcanvas nav li.current-menu-item:not(.tlm-lang-switch) > .ct-menu-link { color: var(--vb-sun); }

/* language switch: a translucent pill, current language lit */
body #offcanvas nav li.tlm-lang-switch { margin-top: 1rem; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, 0.25); }
body #offcanvas nav li.tlm-lang-switch > a { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.4); }

/* Reserve button */
body #offcanvas nav li.tlm-drawer-cta { margin-top: 1.1rem; }
body #offcanvas nav li.tlm-drawer-cta > .ct-menu-link {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 3.4rem;
	padding: 0 1.5rem;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--vb-coral, #F0625E) 0%, var(--vb-tangerine, #F59A3B) 55%, var(--vb-sun, #FFC94D) 100%);
	color: var(--vb-night, #1B2440);
	font-family: var(--tlm-font-body);
	font-size: 1.1rem;
	font-weight: 800;
	box-shadow: 0 6px 0 rgba(0, 0, 0, 0.28);
}


@media (prefers-reduced-motion: no-preference) {
	@keyframes vb-drawer-in {
		from { opacity: 0; transform: translateX(28px); }
		to { opacity: 1; transform: none; }
	}
	@keyframes vb-drawer-sky {
		from { background-position: 0 0, 0 0; }
		to { background-position: 0 0, 0 100%; }
	}

	body #offcanvas.active .ct-panel-inner { animation: vb-drawer-sky 9s ease-in-out infinite alternate; }
	body #offcanvas.active nav li.menu-item { animation: vb-drawer-in 0.55s var(--tlm-v3-ease-out, ease-out) both; }
	body #offcanvas.active nav li.menu-item:nth-child(1) { animation-delay: 0.08s; }
	body #offcanvas.active nav li.menu-item:nth-child(2) { animation-delay: 0.15s; }
	body #offcanvas.active nav li.menu-item:nth-child(3) { animation-delay: 0.22s; }
	body #offcanvas.active nav li.menu-item:nth-child(4) { animation-delay: 0.29s; }
	body #offcanvas.active nav li.menu-item:nth-child(5) { animation-delay: 0.36s; }
	body #offcanvas.active nav li.menu-item:nth-child(6) { animation-delay: 0.43s; }
	body #offcanvas.active nav li.menu-item:nth-child(7) { animation-delay: 0.5s; }
}

/* Product gallery: never show the hover-zoom layer over the packshot. */
.woocommerce-product-gallery .zoomImg { display: none !important; }


/* ==================================================================
 * Gallery filters: an item filtered out must really disappear (a class
 * rule gave the figures display:block, which beat the [hidden] attribute).
 * ================================================================== */
.tlm-gallery-item[hidden],
[data-tlm-gallery-item][hidden] { display: none !important; }


/* ==================================================================
 * Reserve button at the top of every page.
 * Desktop: the last pill in the nav bar. Phone: a compact pill beside the
 * hamburger (inserted by tlm-vibrant.js). Sunset gradient + pressed shadow,
 * the same language as the .vb-btn buttons, with a soft attention ring
 * that is off under reduced motion.
 * ================================================================== */
.tlm-cta__short { display: none; }

.ct-header nav ul.menu > li.tlm-drawer-cta { margin-inline-start: 0.85rem; display: flex; align-items: center; }

.ct-header nav ul.menu > li.tlm-drawer-cta > .ct-menu-link,
.ct-header .tlm-top-reserve {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 44px;
	height: 44px;
	padding: 0 1.25rem;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--vb-coral, #F0625E) 0%, var(--vb-tangerine, #F59A3B) 55%, var(--vb-sun, #FFC94D) 100%);
	color: var(--vb-night, #1B2440) !important;
	font-family: var(--tlm-font-body, "Manrope", sans-serif);
	font-size: 0.95rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	line-height: 1;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 4px 0 rgba(27, 18, 48, 0.32);
	transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.ct-header nav ul.menu > li.tlm-drawer-cta > .ct-menu-link::after { content: none !important; }

.ct-header nav ul.menu > li.tlm-drawer-cta > .ct-menu-link::before {
	content: "";
	width: 1.05em;
	height: 1.05em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ct-header nav ul.menu > li.tlm-drawer-cta > .ct-menu-link:hover,
.ct-header .tlm-top-reserve:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(27, 18, 48, 0.32); filter: saturate(1.08); }

.ct-header nav ul.menu > li.tlm-drawer-cta > .ct-menu-link:active,
.ct-header .tlm-top-reserve:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(27, 18, 48, 0.32); }

.ct-header nav ul.menu > li.tlm-drawer-cta > .ct-menu-link:focus-visible,
.ct-header .tlm-top-reserve:focus-visible { outline: 3px solid var(--vb-night, #1B2440); outline-offset: 3px; }

/* the same pill, smaller, in the phone header */
.ct-header .tlm-top-reserve {
	min-height: 40px;
	height: 40px;
	padding: 0 1rem;
	margin-inline-end: 0.6rem;
	font-size: 0.9rem;
}

@media (prefers-reduced-motion: no-preference) {
	.ct-header nav ul.menu > li.tlm-drawer-cta > .ct-menu-link,
	.ct-header .tlm-top-reserve { animation: tlm-cta-ring 3.2s ease-out 1.6s infinite; }
}

@keyframes tlm-cta-ring {
	0%   { box-shadow: 0 4px 0 rgba(27, 18, 48, 0.32), 0 0 0 0 rgba(255, 201, 77, 0.65); }
	55%  { box-shadow: 0 4px 0 rgba(27, 18, 48, 0.32), 0 0 0 14px rgba(255, 201, 77, 0); }
	100% { box-shadow: 0 4px 0 rgba(27, 18, 48, 0.32), 0 0 0 0 rgba(255, 201, 77, 0); }
}


/* ==================================================================
 * Language button: one chip that shows only the language you switch to.
 * ================================================================== */
.ct-header .menu-item.tlm-lang-switch .tlm-lang__opt .tlm-lang__globe,
#offcanvas .ct-panel-content li.tlm-lang-switch .tlm-lang__opt .tlm-lang__globe,
body #offcanvas nav li.tlm-lang-switch .tlm-lang__opt .tlm-lang__globe {
	flex: none;
	width: 14px;
	height: 14px;
	margin-inline-end: 6px;
}

.ct-header .menu-item.tlm-lang-switch .tlm-lang__opt { min-width: 0; padding: 0 12px 0 10px; }


/* ==================================================================
 * Entrance animations for Our Story and Gallery (motion-safe: the
 * .vb-anim class is only added when the visitor has not asked for
 * reduced motion). Headline words rise, the supporting lines fade up,
 * and the photo slides in from the side.
 * ================================================================== */
.vb-anim .tlm-story-hero-split__title .vb-word,
.vb-anim .tlm-gallery-opening h1 .vb-word {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	padding-bottom: 0.08em;
}

.vb-anim .tlm-story-hero-split__title .vb-word > span,
.vb-anim .tlm-gallery-opening h1 .vb-word > span {
	display: inline-block;
	transform: translateY(110%);
	animation: vb-word-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	animation-delay: calc(var(--vb-w, 0) * 90ms + 250ms);
}

.vb-anim .tlm-story-hero-split__badge,
.vb-anim .tlm-story-hero-split__desc,
.vb-anim .tlm-story-hero-split__meta,
.vb-anim .tlm-gallery-opening .tlm-journal__kicker,
.vb-anim .tlm-gallery-opening__copy p:not(.tlm-journal__kicker) {
	opacity: 0;
	transform: translateY(18px);
	animation: vb-fade-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.vb-anim .tlm-story-hero-split__badge,
.vb-anim .tlm-gallery-opening .tlm-journal__kicker { animation-delay: 0.05s; }
.vb-anim .tlm-story-hero-split__desc,
.vb-anim .tlm-gallery-opening__copy p:not(.tlm-journal__kicker) { animation-delay: 0.8s; }
.vb-anim .tlm-story-hero-split__meta { animation-delay: 1s; }

.vb-anim .tlm-story-hero-split__frame,
.vb-anim .tlm-gallery-opening figure {
	opacity: 0;
	transform: translateX(56px) rotate(2.5deg) scale(0.96);
	animation: vb-frame-in 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards;
}

@keyframes vb-frame-in { to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
	.vb-anim .tlm-story-hero-split__frame,
	.vb-anim .tlm-gallery-opening figure { transform: translateY(40px) scale(0.96); }
}



/* ==================================================================
 * Desktop header fit: with the Reserve pill and the language chip in the
 * same row, Spanish labels ("Nuestra historia") need a little less room
 * or Blocksy folds the pill and language into a "More" menu.
 * ================================================================== */
@media (min-width: 1000px) {
	body .ct-header [data-device="desktop"] .ct-container { padding-inline: clamp(16px, 2.4vw, 40px) !important; }
	body .ct-header nav ul.menu > li:not(.tlm-drawer-cta):not(.tlm-lang-switch) > .ct-menu-link { font-size: 0.9rem !important; letter-spacing: 0.02em !important; padding-inline: 0.55rem !important; }
	body .ct-header nav ul.menu > li { margin-inline-end: clamp(0.25rem, 0.1rem + 0.25vw, 0.6rem); }
}

@media (min-width: 1280px) and (max-width: 1359px) {
	body .ct-header nav ul.menu > li:not(.tlm-drawer-cta):not(.tlm-lang-switch) > .ct-menu-link { font-size: 0.82rem !important; letter-spacing: 0.01em !important; padding-inline: 0.45rem !important; }
	.ct-header nav ul.menu > li.tlm-drawer-cta { margin-inline-start: 0.4rem; }
	.ct-header nav ul.menu > li.tlm-drawer-cta > .ct-menu-link { padding: 0 1rem; font-size: 0.9rem; }
	.ct-header .menu-item.tlm-lang-switch > .ct-menu-link { margin-inline-start: 0.2rem; }
}

/* Narrow laptops and tablets in landscape: not enough room for five
   labels + the pill + the language chip, so use the phone header
   (logo, Reserve, hamburger) up to 1279px instead of folding the pill
   into a "More" menu. */
@media (min-width: 1000px) and (max-width: 1279.98px) {
	body .ct-header [data-device="desktop"] { display: none !important; }
	body .ct-header [data-device="mobile"] { display: block !important; }
}


/* Phone header: logo and Reserve share the bar without touching. */
@media (max-width: 1279.98px) {
	body .ct-header [data-device="mobile"] .site-branding,
	body .ct-header [data-device="mobile"] .site-logo-container { max-width: clamp(118px, 44vw, 200px); }
	body .ct-header [data-device="mobile"] .site-logo-container img.default-logo,
	body .ct-header [data-device="mobile"] .site-logo-container img.tlm-v3-header-logo-light,
	body .ct-header [data-device="mobile"] .site-logo-container img.tlm-v3-header-logo-compact { height: auto !important; width: auto !important; max-width: clamp(112px, 44vw, 200px) !important; max-height: 40px !important; }
	body .ct-header [data-device="mobile"] [data-column="end"] [data-items] { align-items: center; }
}

@media (max-width: 480px) {
	.ct-header .tlm-top-reserve { min-height: 38px; height: 38px; padding: 0 0.8rem; margin-inline-end: 0.4rem; font-size: 0.82rem; }
}


/* ==================================================================
 * Language button, redesigned: ONE clean outlined pill — globe + the code
 * of the language you switch to. On hover a sun-gold fill wipes in from
 * the left and the globe makes one full turn; pressing sinks it slightly.
 * (Replaces the older pill-inside-a-pill look; the markup still carries
 * .tlm-lang__opt.is-current, which is reset here.)
 * ================================================================== */
.ct-header .menu-item.tlm-lang-switch,
#offcanvas li.tlm-lang-switch { --tlm-lang-fg: #FFFDF8; --tlm-lang-line: rgba(255, 253, 248, 0.55); }

.tlm-v3-page .ct-header.tlm-v3-header--solid .menu-item.tlm-lang-switch,
.tlm-v3-page:not(:has([data-tlm-theme="hero"])) .ct-header .menu-item.tlm-lang-switch { --tlm-lang-fg: var(--vb-night, #1B2440); --tlm-lang-line: rgba(27, 36, 64, 0.4); }

body .ct-header .menu-item.tlm-lang-switch > .ct-menu-link,
body #offcanvas li.tlm-lang-switch > .ct-menu-link {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	gap: 0;
	height: 40px;
	min-height: 40px;
	margin-inline-start: 0.6rem;
	padding: 0 1.05rem 0 0.85rem;
	border: 1.5px solid var(--tlm-lang-line);
	border-radius: 999px;
	background: linear-gradient(90deg, var(--vb-sun, #FFC94D) 0 50%, transparent 50% 100%) right center / 210% 100% no-repeat;
	color: var(--tlm-lang-fg);
	font-family: var(--tlm-font-body, "Manrope", sans-serif);
	font-size: 0.9rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1;
	text-decoration: none;
	transition: background-position 0.45s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

body .ct-header .menu-item.tlm-lang-switch > .ct-menu-link .tlm-lang__opt,
body #offcanvas li.tlm-lang-switch > .ct-menu-link .tlm-lang__opt,
body .ct-header .menu-item.tlm-lang-switch > .ct-menu-link .tlm-lang__opt.is-current,
body #offcanvas li.tlm-lang-switch > .ct-menu-link .tlm-lang__opt.is-current {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-width: 0;
	height: auto;
	padding: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	opacity: 1;
	transform: none;
}

body .ct-header .menu-item.tlm-lang-switch .tlm-lang__globe,
body #offcanvas li.tlm-lang-switch .tlm-lang__globe {
	width: 17px;
	height: 17px;
	margin: 0;
	transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

body .ct-header .menu-item.tlm-lang-switch > .ct-menu-link:hover,
body .ct-header .menu-item.tlm-lang-switch > .ct-menu-link:focus-visible,
body #offcanvas li.tlm-lang-switch > .ct-menu-link:hover,
body #offcanvas li.tlm-lang-switch > .ct-menu-link:focus-visible {
	background-position: left center;
	border-color: var(--vb-sun, #FFC94D);
	color: var(--vb-night, #1B2440);
	transform: translateY(-1px);
}

body .ct-header .menu-item.tlm-lang-switch > .ct-menu-link:hover .tlm-lang__globe,
body .ct-header .menu-item.tlm-lang-switch > .ct-menu-link:focus-visible .tlm-lang__globe,
body #offcanvas li.tlm-lang-switch > .ct-menu-link:hover .tlm-lang__globe { transform: rotate(360deg); }

body .ct-header .menu-item.tlm-lang-switch > .ct-menu-link:active,
body #offcanvas li.tlm-lang-switch > .ct-menu-link:active { transform: translateY(1px) scale(0.97); }

body .ct-header .menu-item.tlm-lang-switch > .ct-menu-link:focus-visible,
body #offcanvas li.tlm-lang-switch > .ct-menu-link:focus-visible { outline: 3px solid var(--vb-sun, #FFC94D); outline-offset: 3px; }

body .ct-header nav .menu-item.tlm-lang-switch > .ct-menu-link::after { content: none !important; }

/* drawer: a little larger, on the dusk sky */
body #offcanvas li.tlm-lang-switch > .ct-menu-link { height: 46px; min-height: 46px; margin-inline-start: 0; padding: 0 1.3rem 0 1.1rem; font-size: 1rem; }

/* entrance: the button pops in after the page settles, the globe spins once */
@media (prefers-reduced-motion: no-preference) {
	body .ct-header .menu-item.tlm-lang-switch > .ct-menu-link {
		animation: tlm-lang-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s backwards;
	}
	body .ct-header .menu-item.tlm-lang-switch .tlm-lang__globe {
		animation: tlm-globe-once 1.4s cubic-bezier(0.16, 1, 0.3, 1) 1.2s backwards;
	}
}

@keyframes tlm-lang-pop { from { opacity: 0; transform: scale(0.7) translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes tlm-globe-once { from { transform: rotate(-200deg); } to { transform: none; } }

/* Same button on the solid (cream) header: the older solid-state rule is more
   specific, so the fill-wipe background and border are restated here. */
.tlm-v3-page .ct-header.tlm-v3-header--solid .menu-item.tlm-lang-switch > .ct-menu-link,
.tlm-v3-page:not(:has([data-tlm-theme="hero"])) .ct-header .menu-item.tlm-lang-switch > .ct-menu-link {
	background: linear-gradient(90deg, var(--vb-sun, #FFC94D) 0 50%, transparent 50% 100%) right center / 210% 100% no-repeat;
	border-color: var(--tlm-lang-line);
}

.tlm-v3-page .ct-header.tlm-v3-header--solid .menu-item.tlm-lang-switch > .ct-menu-link:hover,
.tlm-v3-page .ct-header.tlm-v3-header--solid .menu-item.tlm-lang-switch > .ct-menu-link:focus-visible,
.tlm-v3-page:not(:has([data-tlm-theme="hero"])) .ct-header .menu-item.tlm-lang-switch > .ct-menu-link:hover,
.tlm-v3-page:not(:has([data-tlm-theme="hero"])) .ct-header .menu-item.tlm-lang-switch > .ct-menu-link:focus-visible {
	background-position: left center;
	border-color: var(--vb-sun, #FFC94D);
	color: var(--vb-night, #1B2440);
}