@charset "UTF-8";
/* ==========================================================================
   Ceylon Paradise — section styles
   Loaded after theme.css, which holds the tokens these rules use.

   1. Hero
   2. Why travel with us
   3. Tour packages
   4. Destinations
   5. Our island
   6. Testimonials
   7. Journal
   8. Enquiry
   9. Inner pages
   10. Contact Form 7
   11. Lightbox
   ========================================================================== */

/* 1. Hero ================================================================== */

.cp-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: min(92vh, 900px);
	padding-top: calc(var(--cp-header-h) + 4rem);
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
	overflow: hidden;
	background: var(--cp-navy-900);
	isolation: isolate;
}

.cp-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.cp-hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(3, 27, 49, 0.92) 0%, rgba(3, 27, 49, 0.5) 38%, rgba(3, 27, 49, 0.15) 65%, rgba(3, 27, 49, 0.45) 100%),
		linear-gradient(to right, rgba(7, 48, 90, 0.55), transparent 65%);
}

.cp-hero__inner {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
	width: 100%;
}

.cp-hero__content {
	/* Wide enough for the longest line of the headline to stay on one line —
	   each line is its own masked span, so a wrap inside one breaks the
	   staggered reveal. */
	position: relative;
	max-width: 72rem;
	color: #fff;
}

/* One copy block per slide, stacked. The tallest one sets the height so the
   buttons below never jump as the headlines change length. */
.cp-hero__copy {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.55s var(--cp-ease), visibility 0.55s;
}

.cp-hero__copy.is-active {
	opacity: 1;
	visibility: visible;
}

.cp-hero__copies {
	display: grid;
	align-items: end;
}

@media (prefers-reduced-motion: reduce) {
	.cp-hero__copy {
		transition: none;
	}
}

.cp-hero__title {
	margin: 0 0 1.5rem;
	/* Stated here rather than inherited: only the first slide is an h1, and the
	   rest are paragraphs that must look identical to it. */
	font-family: var(--cp-font-display);
	font-optical-sizing: auto;
	font-size: var(--cp-fs-hero);
	font-weight: 600;
	line-height: 0.98;
	/* A serif needs more room than the grotesque this was tuned for, and
	   Fraunces has no width axis to squeeze. */
	letter-spacing: -0.018em;
	color: #fff;
	text-wrap: balance;
}

/* Each line is masked and slides up in turn. */
.cp-hero__line {
	display: block;
	/* line-height is 0.98, so the line box is shorter than the type itself and
	   this mask sliced 10px off the descenders of g, y and p at hero size. The
	   padding grows the clipping box; the matching negative margin gives the
	   space straight back, so the leading is unchanged. */
	padding-bottom: 0.18em;
	margin-bottom: -0.18em;
	overflow: hidden;
}

.cp-hero__line > span {
	display: block;
	/* 130%, not 105%: the offset has to clear the padding added above or the
	   top of each line shows through it before the reveal runs. */
	transform: translateY(130%);
	transition: transform 0.95s var(--cp-ease-out);
	transition-delay: calc(0.18s + var(--line) * 0.11s);
}

.cp-hero.is-ready .cp-hero__line > span {
	transform: none;
}

.cp-hero__text {
	max-width: 48ch;
	margin: 0 0 2rem;
	font-size: var(--cp-fs-lead);
	color: rgba(255, 255, 255, 0.86);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.8s var(--cp-ease-out) 0.5s, transform 0.8s var(--cp-ease-out) 0.5s;
}

.cp-hero.is-ready .cp-hero__text {
	opacity: 1;
	transform: none;
}

.cp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.8s var(--cp-ease-out) 0.62s, transform 0.8s var(--cp-ease-out) 0.62s;
}

.cp-hero.is-ready .cp-hero__actions {
	opacity: 1;
	transform: none;
}

/* Slideshow controls sit bottom right, clear of the headline and buttons. */
.cp-slides__controls--hero {
	padding-bottom: 0.5rem;
	opacity: 0;
	transition: opacity 0.8s var(--cp-ease-out) 0.7s;
}

.cp-hero.is-ready .cp-slides__controls--hero {
	opacity: 1;
}

@media (max-width: 719px) {
	.cp-hero__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.cp-slides__controls--hero {
		padding-bottom: 0;
		margin-top: 1.75rem;
	}
}

/* Trip finder */

.cp-hero__finder-wrap {
	position: relative;
	width: 100%;
	margin-top: clamp(2.5rem, 6vw, 4.5rem);
}

.cp-finder {
	display: grid;
	gap: 0.85rem;
	padding: 1.15rem;
	background: rgba(255, 255, 255, 0.97);
	border-radius: var(--cp-radius-lg);
	box-shadow: var(--cp-shadow-lg);
	backdrop-filter: blur(10px);
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.8s var(--cp-ease-out) 0.75s, transform 0.8s var(--cp-ease-out) 0.75s;
}

.cp-hero.is-ready .cp-finder {
	opacity: 1;
	transform: none;
}

@media (min-width: 720px) {
	.cp-finder {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1040px) {
	.cp-finder {
		grid-template-columns: repeat(4, 1fr) auto;
		align-items: end;
	}
}

.cp-finder__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
}

.cp-finder__field select {
	border-color: transparent;
	background-color: var(--cp-mist);
	font-weight: 500;
}

.cp-finder__field select:hover {
	background-color: var(--cp-mist-deep);
}

.cp-finder__submit {
	height: 44px;
	white-space: nowrap;
}

@media (max-width: 1039px) {
	.cp-finder__submit {
		grid-column: 1 / -1;
	}
}

/* 1b. Slideshow ============================================================
   Shared by the homepage hero and by tour and destination page headers.
   Photographs cross-fade rather than slide: the headline sits on top of them,
   and horizontal movement behind fixed type reads as a glitch.
   ========================================================================== */

.cp-slides__stage {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.cp-slides__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.2s var(--cp-ease);
}

.cp-slides__slide.is-active {
	opacity: 1;
}

.cp-slides__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A slow drift, so a still photograph does not sit dead behind the type. */
.cp-slides__slide.is-active .cp-slides__img {
	animation: cp-drift var(--cp-slide-interval, 6000ms) linear forwards;
}

/* One photograph on its own has all the time in the world. */
.cp-slides__slide:only-child .cp-slides__img {
	animation-duration: 14s;
}

@keyframes cp-drift {
	from { transform: scale(1.075); }
	to   { transform: scale(1); }
}

/* Controls: one bar per photograph, filling as its turn runs down. */
.cp-slides__controls {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	flex: none;
}

.cp-slides__bar {
	position: relative;
	display: grid;
	align-items: center;
	width: 40px;
	height: 26px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.cp-slides__bar::before {
	content: "";
	height: 3px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.34);
	transition: background-color 0.2s var(--cp-ease);
}

.cp-slides__bar:hover::before {
	background: rgba(255, 255, 255, 0.6);
}

.cp-slides__bar::after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 3px;
	border-radius: 2px;
	background: var(--cp-aqua);
	transform: translateY(-50%);
}

.cp-slides__bar[aria-current="true"]::after {
	animation: cp-bar-fill var(--cp-slide-interval, 6000ms) linear forwards;
}

[data-cp-slides].is-paused .cp-slides__bar[aria-current="true"]::after {
	animation-play-state: paused;
}

@keyframes cp-bar-fill {
	from { width: 0; }
	to   { width: 100%; }
}

.cp-slides__controls--page {
	margin-top: 1.75rem;
}

@media (prefers-reduced-motion: reduce) {
	.cp-slides__slide {
		transition: none;
	}

	.cp-slides__slide.is-active .cp-slides__img,
	.cp-slides__bar[aria-current="true"]::after {
		animation: none;
	}

	.cp-slides__bar[aria-current="true"]::after {
		width: 100%;
	}
}

/* 2. Why travel with us ==================================================== */

.cp-why__intro .cp-lead {
	margin-top: 1.1rem;
}

.cp-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.75rem 1.25rem;
	margin: 2.5rem 0 0;
	padding-top: 2rem;
	border-top: 1px solid var(--cp-line);
}

@media (min-width: 520px) {
	.cp-stats {
		/* One row of however many stats are set, rather than a hardcoded four —
		   removing one used to leave a dead cell and shove the rest left. */
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
	}
}

/* 1fr floors at min-content, so a long label would otherwise widen its column
   and push the row past the container. */
.cp-stat {
	min-width: 0;
}

.cp-stat__value {
	display: flex;
	align-items: baseline;
	gap: 0.05em;
	font-family: var(--cp-font-display);
	font-size: clamp(1.85rem, 3vw, 2.5rem);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--cp-navy);
}

.cp-stat__suffix {
	color: var(--cp-aqua);
}

.cp-stat__label {
	margin: 0.45rem 0 0;
	font-size: var(--cp-fs-xs);
	line-height: 1.35;
	color: var(--cp-muted);
	max-width: 15ch;
}

.cp-reasons {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.85rem;
}

.cp-reason {
	display: flex;
	gap: 1.1rem;
	padding: 1.4rem 1.5rem;
	background: var(--cp-paper);
	border: 1px solid transparent;
	border-radius: var(--cp-radius-lg);
	transition: transform 0.25s var(--cp-ease), box-shadow 0.25s var(--cp-ease),
		border-color 0.25s var(--cp-ease);
}

.cp-reason:hover {
	transform: translateY(-2px);
	box-shadow: var(--cp-shadow);
	border-color: var(--cp-aqua-200);
}

.cp-reason__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	flex: none;
	border-radius: 14px;
	background: var(--cp-aqua-100);
	color: var(--cp-teal);
}

.cp-reason__title {
	margin: 0 0 0.35rem;
	font-size: var(--cp-fs-h4);
	line-height: 1.25;
}

.cp-reason__text {
	margin: 0;
	font-size: var(--cp-fs-sm);
	color: var(--cp-muted);
}

/* 3. Tour packages ========================================================= */

/* Nine categories, nine columns on a wide screen — the row itself says
   "nine ways". Falls back to a wrapping grid as space runs out. */
.cp-types {
	list-style: none;
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
	gap: 0.55rem;
}

@media (min-width: 1180px) {
	.cp-types {
		grid-template-columns: repeat(9, minmax(0, 1fr));
	}
}

.cp-type {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.45rem;
	height: 100%;
	padding: 0.95rem 0.8rem;
	border: 1px solid var(--cp-line);
	border-radius: var(--cp-radius);
	background: var(--cp-paper);
	color: var(--cp-navy);
	text-decoration: none;
	transition: background-color 0.22s var(--cp-ease), border-color 0.22s var(--cp-ease),
		transform 0.22s var(--cp-ease);
}

.cp-type:hover {
	background: var(--cp-navy);
	border-color: var(--cp-navy);
	color: #fff;
	transform: translateY(-3px);
}

.cp-type__icon {
	color: var(--cp-teal);
	transition: color 0.22s var(--cp-ease);
}

.cp-type:hover .cp-type__icon {
	color: var(--cp-aqua);
}

.cp-type__label {
	font-weight: 600;
	font-size: 0.875rem;
	line-height: 1.22;
	letter-spacing: -0.01em;
}

.cp-type__count {
	font-family: var(--cp-font-mono);
	font-size: var(--cp-fs-mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cp-muted);
	transition: color 0.22s var(--cp-ease);
}

.cp-type:hover .cp-type__count {
	color: rgba(255, 255, 255, 0.7);
}

.cp-packages__chips {
	margin-bottom: 1.5rem;
}

.cp-packages__empty {
	margin-top: 2rem;
	text-align: center;
	color: var(--cp-muted);
}

/* The dark tile that opens the grid. */
.cp-promo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
	padding: clamp(1.5rem, 2.5vw, 2rem);
	border-radius: var(--cp-radius-lg);
	background:
		radial-gradient(120% 120% at 100% 0%, rgba(68, 208, 219, 0.28), transparent 60%),
		var(--cp-navy);
	color: rgba(255, 255, 255, 0.78);
}

.cp-promo .cp-eyebrow {
	color: var(--cp-aqua);
	margin-bottom: 0.35rem;
}

.cp-promo__title {
	margin: 0;
	font-size: var(--cp-fs-h3);
	color: #fff;
	line-height: 1.18;
}

.cp-promo__text {
	margin: 0;
	font-size: var(--cp-fs-sm);
}

.cp-promo .cp-btn {
	margin-top: auto;
}

.cp-card--tour .cp-route {
	margin-bottom: -0.15rem;
}

/* 4. Destinations ========================================================== */

.cp-carousel {
	position: relative;
}

.cp-carousel__track {
	display: flex;
	gap: var(--cp-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--cp-gutter);
	padding: 0.5rem var(--cp-gutter) 1.5rem;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.cp-carousel__track::-webkit-scrollbar {
	display: none;
}

/* Edge peek: the shell's margin plus a slice of the next card. */
@media (min-width: 1320px) {
	.cp-carousel__track {
		padding-inline: max(var(--cp-gutter), calc((100vw - var(--cp-max)) / 2));
		scroll-padding-left: max(var(--cp-gutter), calc((100vw - var(--cp-max)) / 2));
	}
}

.cp-dest {
	flex: 0 0 auto;
	width: min(76vw, 300px);
	scroll-snap-align: start;
}

.cp-dest__link {
	position: relative;
	display: block;
	height: 100%;
	border-radius: var(--cp-radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: #fff;
	background: var(--cp-navy);
}

.cp-dest__media {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
}

.cp-dest__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--cp-ease);
}

.cp-dest__link:hover .cp-dest__media img {
	transform: scale(1.06);
}

.cp-dest__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(3, 27, 49, 0.9) 6%, rgba(3, 27, 49, 0.28) 45%, transparent 72%);
}

.cp-dest__body {
	position: absolute;
	inset: auto 0 0;
	padding: 1.25rem 1.25rem 1.35rem;
}

.cp-dest__drive {
	display: inline-block;
	margin-bottom: 0.5rem;
	padding: 0.28rem 0.6rem;
	border-radius: var(--cp-radius-pill);
	background: rgba(255, 255, 255, 0.16);
	backdrop-filter: blur(6px);
	font-family: var(--cp-font-mono);
	font-size: var(--cp-fs-mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
}

.cp-dest__title {
	margin: 0 0 0.25rem;
	font-size: 1.4rem;
	color: #fff;
	line-height: 1.15;
}

.cp-dest__tagline {
	margin: 0 0 0.5rem;
	font-size: var(--cp-fs-sm);
	color: rgba(255, 255, 255, 0.8);
}

.cp-dest__count {
	margin: 0;
	font-family: var(--cp-font-mono);
	font-size: var(--cp-fs-mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cp-aqua);
}

.cp-destinations__items {
	margin-top: clamp(2rem, 3vw, 2.75rem);
}

.cp-destinations__foot {
	margin-top: clamp(1.75rem, 2.5vw, 2.25rem);
}

/* The trip count closes the card the way a price closes a tour card, so the
   two grids line up on the same baseline rather than one ending short. */
.cp-card--dest .cp-card__trips {
	margin: 0;
	font-family: var(--cp-font-mono);
	font-size: var(--cp-fs-mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cp-teal);
}

/* 5. Our island ============================================================ */

.cp-island {
	background:
		radial-gradient(80% 60% at 85% 15%, var(--cp-aqua-050), transparent 70%),
		var(--cp-paper);
	overflow: hidden;
}

.cp-island__layout {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4rem);
	align-items: center;
}

@media (min-width: 940px) {
	.cp-island__layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
	}
}

.cp-island__intro .cp-lead {
	margin-top: 1.1rem;
}

/* Month strip */

.cp-months {
	margin-top: 2rem;
}

.cp-months__label {
	margin: 0 0 0.6rem;
}

.cp-months__strip {
	display: flex;
	gap: 3px;
	padding: 5px;
	background: var(--cp-mist);
	border-radius: var(--cp-radius-pill);
	max-width: 560px;
}

.cp-month {
	flex: 1;
	min-width: 0;
	padding: 0.55rem 0.15rem;
	border: 0;
	border-radius: var(--cp-radius-pill);
	background: transparent;
	color: var(--cp-muted);
	font-family: var(--cp-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background-color 0.2s var(--cp-ease), color 0.2s var(--cp-ease);
}

.cp-month:hover {
	background: var(--cp-aqua-100);
	color: var(--cp-teal-600);
}

.cp-month[aria-pressed="true"] {
	background: var(--cp-navy);
	color: #fff;
}

.cp-months__key {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.75rem;
	margin: 0.85rem 0 0;
	font-size: var(--cp-fs-xs);
	color: var(--cp-muted);
}

.cp-months__swatch {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex: none;
}

.cp-months__swatch--on {
	background: var(--cp-aqua);
	box-shadow: 0 0 0 3px rgba(68, 208, 219, 0.25);
}

.cp-months__swatch--off {
	background: #c2ced6;
	margin-left: 0.5rem;
}

/* Facts */

.cp-facts {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.4rem 1.25rem;
	margin: 2.25rem 0 0;
	padding-top: 1.75rem;
	border-top: 1px solid var(--cp-line);
}

@media (min-width: 620px) {
	.cp-facts {
		grid-template-columns: repeat(4, 1fr);
	}
}

.cp-fact__value {
	font-family: var(--cp-font-display);
	font-size: 1.45rem;
	font-weight: 600;
	letter-spacing: -0.025em;
	color: var(--cp-teal);
	line-height: 1.05;
}

.cp-fact__label {
	margin: 0.3rem 0 0;
	font-size: var(--cp-fs-xs);
	line-height: 1.35;
	color: var(--cp-muted);
}

/* Map */

.cp-island__figure {
	position: relative;
}

.cp-island__map {
	position: relative;
	width: 100%;
	max-width: 420px;
	margin-inline: auto;
	aspect-ratio: 250 / 400;
}

.cp-island__svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

.cp-island__land {
	stroke: rgba(255, 255, 255, 0.5);
	stroke-width: 1;
	stroke-linejoin: round;
}

.cp-island__shadow {
	fill: rgba(7, 48, 90, 0.14);
	transform: translate(6px, 10px);
	filter: blur(6px);
}

/* Barely there — enough to read as high ground, not enough to be decoration.
   No outline: a dashed edge made it look like a control rather than terrain. */
.cp-island__highlands {
	fill: rgba(255, 255, 255, 0.055);
	stroke: none;
	filter: blur(7px);
}

.cp-island__pins {
	position: absolute;
	inset: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The wrapper is a zero-size anchor at the exact coordinate, so the dot —
   not the dot-plus-label — is what sits on the map position. */
.cp-island__pin-wrap {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: 0;
	height: 0;
}

.cp-island__pin {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 12px;
	height: 12px;
	transform: translate(-50%, -50%);
	text-decoration: none;
	transition: opacity 0.3s var(--cp-ease);
}

.cp-island__dot {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: var(--cp-aqua);
	border: 2px solid #fff;
	box-shadow: 0 0 0 3px rgba(68, 208, 219, 0.35);
	transition: transform 0.25s var(--cp-ease), background-color 0.25s var(--cp-ease),
		box-shadow 0.25s var(--cp-ease);
}

/* Labels appear on demand. Eleven always-on labels collide badly on an island
   this narrow, and the readout below the map already names what you touch. */
.cp-island__label {
	position: absolute;
	top: 50%;
	left: calc(100% + 9px);
	transform: translateY(-50%);
	font-family: var(--cp-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
	background: var(--cp-navy);
	padding: 0.2rem 0.45rem;
	border-radius: 5px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s var(--cp-ease);
	z-index: 2;
}

/* Western pins hang their label out to sea on the left. */
.cp-island__pin-wrap--left .cp-island__label {
	left: auto;
	right: calc(100% + 9px);
}

.cp-island__pin:hover,
.cp-island__pin:focus-visible {
	z-index: 3;
}

.cp-island__pin:hover .cp-island__dot,
.cp-island__pin:focus-visible .cp-island__dot {
	transform: scale(1.5);
	background: var(--cp-gold);
	box-shadow: 0 0 0 5px rgba(239, 163, 28, 0.3);
}

.cp-island__pin:hover .cp-island__label,
.cp-island__pin:focus-visible .cp-island__label {
	opacity: 1;
}

/* Off-season pins recede rather than disappear — the place still exists. */
.cp-island__pin.is-off-season {
	opacity: 0.45;
}

.cp-island__pin.is-off-season .cp-island__dot {
	background: #c2ced6;
	box-shadow: 0 0 0 3px rgba(194, 206, 214, 0.3);
}

.cp-island__readout {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin: 1.25rem 0 0;
	padding: 0.9rem 1.15rem;
	border-radius: var(--cp-radius);
	background: var(--cp-mist);
	text-align: center;
	min-height: 4.25rem;
	justify-content: center;
}

.cp-island__readout-name {
	font-family: var(--cp-font-display);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--cp-navy);
}

.cp-island__readout-note {
	font-family: var(--cp-font-mono);
	font-size: var(--cp-fs-mono);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--cp-teal);
}

/* 6. Testimonials ========================================================== */

.cp-testimonials {
	position: relative;
	overflow: hidden;
	background: var(--cp-paper);
}

.cp-mosaic {
	display: none;
	position: absolute;
	inset: 0 0 auto;
	height: 560px;
	gap: 12px;
	padding-inline: var(--cp-gutter);
	justify-content: center;
	align-items: flex-start;
	overflow: hidden;
	pointer-events: none;
	/* Dissolves into the page rather than stopping on a hard edge. */
	-webkit-mask-image: linear-gradient(to bottom, #000 48%, rgba(0, 0, 0, 0.35) 76%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 48%, rgba(0, 0, 0, 0.35) 76%, transparent 100%);
}

@media (min-width: 900px) {
	.cp-mosaic {
		display: flex;
	}

	/* Clears the two short middle columns, so the heading opens into a gap. */
	.cp-testimonials {
		padding-top: clamp(17rem, 24vw, 22rem);
	}
}

.cp-mosaic__col {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: clamp(112px, 11.5vw, 168px);
	flex: none;
	/* A gentle stagger keeps the rows from lining up like a spreadsheet. */
	transform: translateY(calc(var(--col) * 6px - 18px));
}

.cp-mosaic__tile {
	border-radius: 14px;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	background: var(--cp-mist-deep);
	flex: none;
}

.cp-mosaic__tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cp-mosaic__col:nth-child(even) .cp-mosaic__tile:first-child {
	aspect-ratio: 1 / 1;
}

.cp-testimonials__head {
	position: relative;
	text-align: center;
	max-width: 46rem;
	margin: 0 auto clamp(2.5rem, 5vw, 4rem);
	isolation: isolate;
}

/* A soft halo so the heading stays legible if a tile reaches this far. */
.cp-testimonials__head::before {
	content: "";
	position: absolute;
	inset: -3rem -6rem;
	z-index: -1;
	background: radial-gradient(60% 60% at 50% 50%, var(--cp-paper) 55%, rgba(255, 255, 255, 0) 100%);
}

.cp-testimonials__head .cp-eyebrow {
	margin-bottom: 1.25rem;
	background: var(--cp-paper);
}

.cp-reviews {
	position: relative;
}

.cp-review {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 0;
	padding: 1.75rem;
	background: var(--cp-paper);
	border: 1px solid var(--cp-line);
	border-radius: var(--cp-radius-lg);
}

.cp-review__quote {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: var(--cp-fs-sm);
	color: var(--cp-ink);
	line-height: 1.7;
}

.cp-review__quote p {
	margin: 0 0 0.8em;
}

.cp-review__quote p:last-child {
	margin-bottom: 0;
}

.cp-review__by {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid var(--cp-line);
}

.cp-review__avatar {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: 50%;
	overflow: hidden;
	background: var(--cp-navy);
	color: #fff;
	font-family: var(--cp-font-display);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.cp-review__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cp-review__who {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.cp-review__name {
	font-weight: 600;
	color: var(--cp-navy);
	font-size: var(--cp-fs-sm);
}

.cp-review__meta {
	font-size: var(--cp-fs-xs);
	color: var(--cp-muted);
}

/* 7. Journal =============================================================== */

.cp-journal__layout {
	display: grid;
	gap: var(--cp-gap);
}

@media (min-width: 960px) {
	.cp-journal__layout {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		align-items: start;
	}
}

.cp-journal__rest {
	display: grid;
	gap: 0.85rem;
}

/* Compact cards in the right column go side-on. */
@media (min-width: 560px) {
	.cp-journal__rest .cp-card--post {
		flex-direction: row;
	}

	.cp-journal__rest .cp-card__media {
		flex: 0 0 38%;
		aspect-ratio: auto;
	}

	.cp-journal__rest .cp-card__tags {
		display: none;
	}
}

.cp-card--featured .cp-card__media {
	aspect-ratio: 16 / 10;
}

.cp-card--featured .cp-card__title {
	font-size: var(--cp-fs-h3);
}

.cp-card__date {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	color: var(--cp-muted);
}

/* 8. Enquiry =============================================================== */

.cp-cta {
	position: relative;
	padding-block: clamp(4rem, 8vw, 7rem);
	background: var(--cp-navy-900);
	color: rgba(255, 255, 255, 0.82);
	isolation: isolate;
	overflow: hidden;
}

.cp-cta__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.cp-cta__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cp-cta__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(105deg, rgba(3, 27, 49, 0.96) 30%, rgba(7, 48, 90, 0.82) 60%, rgba(10, 117, 143, 0.62) 100%);
}

.cp-cta__inner {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4rem);
	align-items: center;
}

@media (min-width: 960px) {
	.cp-cta__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
	}
}

.cp-cta .cp-eyebrow {
	color: var(--cp-aqua);
}

.cp-cta .cp-title {
	color: #fff;
}

.cp-cta .cp-lead {
	color: rgba(255, 255, 255, 0.78);
	margin-top: 1.1rem;
}

.cp-assurances {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.7rem;
}

.cp-assurances li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--cp-fs-sm);
	color: rgba(255, 255, 255, 0.86);
}

.cp-assurances svg {
	color: var(--cp-aqua);
	flex: none;
}

.cp-enquiry {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--cp-paper);
	border-radius: var(--cp-radius-lg);
	box-shadow: var(--cp-shadow-lg);
	color: var(--cp-ink);
}

.cp-enquiry__title {
	margin: 0 0 0.5rem;
	font-size: var(--cp-fs-h3);
}

.cp-enquiry__text {
	font-size: var(--cp-fs-sm);
	color: var(--cp-muted);
	margin-bottom: 1.4rem;
}

.cp-enquiry__actions {
	display: grid;
	gap: 0.7rem;
}

.cp-enquiry__admin {
	margin: 1.25rem 0 0;
	padding-top: 1rem;
	border-top: 1px dashed var(--cp-line-strong);
	font-size: var(--cp-fs-xs);
	color: var(--cp-muted);
	font-style: italic;
}

/* 9. Inner pages =========================================================== */

.cp-page-hero {
	position: relative;
	padding-top: calc(var(--cp-header-h) + clamp(2.5rem, 5vw, 4rem));
	padding-bottom: clamp(2rem, 4vw, 3.25rem);
	background: var(--cp-mist);
	isolation: isolate;
}

.cp-page-hero--image {
	background: var(--cp-navy-900);
	color: rgba(255, 255, 255, 0.85);
	padding-top: calc(var(--cp-header-h) + clamp(4rem, 8vw, 7rem));
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

.cp-page-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.cp-page-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(3, 27, 49, 0.92), rgba(3, 27, 49, 0.55) 55%, rgba(3, 27, 49, 0.4));
}

.cp-page-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cp-page-hero__title {
	margin: 0;
	font-size: var(--cp-fs-h1);
}

.cp-page-hero--image .cp-page-hero__title {
	color: #fff;
}

.cp-page-hero--image .cp-eyebrow {
	color: var(--cp-aqua);
}

.cp-page-hero__lead {
	margin-top: 1rem;
}

.cp-page-hero--image .cp-page-hero__lead {
	color: rgba(255, 255, 255, 0.8);
}

.cp-page-hero__meta {
	margin-top: 1.5rem;
}

/* Breadcrumbs */

.cp-crumbs {
	margin-bottom: 1.1rem;
}

.cp-crumbs__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	font-family: var(--cp-font-mono);
	font-size: var(--cp-fs-mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cp-crumbs__item {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--cp-muted);
}

.cp-crumbs a {
	color: var(--cp-teal);
	text-decoration: none;
}

.cp-page-hero--image .cp-crumbs__item {
	color: rgba(255, 255, 255, 0.6);
}

.cp-page-hero--image .cp-crumbs a {
	color: var(--cp-aqua);
}

.cp-crumbs__sep {
	opacity: 0.5;
}

/* Pagination */

.cp-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.4rem;
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.cp-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 0.6rem;
	border: 1px solid var(--cp-line);
	border-radius: var(--cp-radius-pill);
	color: var(--cp-navy);
	text-decoration: none;
	font-size: var(--cp-fs-sm);
	font-weight: 500;
	transition: background-color 0.18s var(--cp-ease), border-color 0.18s var(--cp-ease),
		color 0.18s var(--cp-ease);
}

.cp-pagination .page-numbers:hover {
	border-color: var(--cp-teal);
	color: var(--cp-teal);
}

.cp-pagination .page-numbers.current {
	background: var(--cp-navy);
	border-color: var(--cp-navy);
	color: #fff;
}

.cp-pagination .page-numbers.dots {
	border-color: transparent;
}

/* Long-form content */

.cp-prose {
	font-size: var(--cp-fs-lead);
	line-height: 1.75;
}

.cp-prose > * + * {
	margin-top: 1.2em;
}

.cp-prose h2 {
	margin-top: 2em;
	font-size: var(--cp-fs-h3);
}

.cp-prose h3 {
	margin-top: 1.6em;
	font-size: var(--cp-fs-h4);
}

.cp-prose img,
.cp-prose figure {
	border-radius: var(--cp-radius);
	overflow: hidden;
}

.cp-prose ul,
.cp-prose ol {
	padding-left: 1.35em;
}

.cp-prose li + li {
	margin-top: 0.4em;
}

.cp-empty {
	max-width: 46ch;
	margin-inline: auto;
	text-align: center;
	padding-block: clamp(2rem, 5vw, 4rem);
}

.cp-empty__title {
	font-size: var(--cp-fs-h2);
}

.cp-empty .cp-lead {
	margin: 0 auto 1.75rem;
}

/* Widgets */

.cp-widget {
	padding: 1.4rem 1.5rem;
	background: var(--cp-mist);
	border-radius: var(--cp-radius-lg);
}

.cp-widget + .cp-widget {
	margin-top: 1rem;
}

.cp-widget__title {
	margin: 0 0 0.9rem;
	font-size: var(--cp-fs-h4);
}

.cp-widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
	font-size: var(--cp-fs-sm);
}

/* 10. Contact Form 7 =======================================================
   Every rule is scoped to both the enquiry section and the modal, so a form
   looks the same wherever it is rendered. ================================== */

.cp-enquiry .wpcf7-form,
.cp-modal .wpcf7-form {
	display: grid;
	gap: 0.9rem;
}

.cp-enquiry .wpcf7-form p,
.cp-modal .wpcf7-form p {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.cp-enquiry .wpcf7-form label,
.cp-modal .wpcf7-form label {
	font-family: var(--cp-font-mono);
	font-size: var(--cp-fs-mono);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cp-muted);
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.cp-enquiry .wpcf7-form input[type="submit"],
.cp-modal .wpcf7-form input[type="submit"] {
	width: 100%;
	padding: 1rem 1.6rem;
	border: 0;
	border-radius: var(--cp-radius-pill);
	background: var(--cp-gold);
	color: var(--cp-navy-900);
	font-family: var(--cp-font-body);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.18s var(--cp-ease), transform 0.18s var(--cp-ease);
}

.cp-enquiry .wpcf7-form input[type="submit"]:hover,
.cp-modal .wpcf7-form input[type="submit"]:hover {
	background: var(--cp-gold-600);
	transform: translateY(-2px);
}

.cp-enquiry .wpcf7-not-valid-tip,
.cp-modal .wpcf7-not-valid-tip {
	font-family: var(--cp-font-body);
	font-size: var(--cp-fs-xs);
	text-transform: none;
	letter-spacing: 0;
	color: #b3261e;
}

/* Hide the box only while it has nothing in it.
   It used to also match [aria-hidden="true"], but this version of Contact Form
   7 leaves that attribute in place even while showing a message — so the
   confirmation and the error were both being hidden from every visitor. */
.cp-enquiry .wpcf7-response-output:empty,
.cp-modal .wpcf7-response-output:empty {
	display: none !important;
}

.cp-enquiry .wpcf7-response-output,
.cp-modal .wpcf7-response-output {
	margin: 0.5rem 0 0 !important;
	padding: 0.85rem 1rem !important;
	border-width: 1px !important;
	border-radius: var(--cp-radius) !important;
	font-size: var(--cp-fs-sm);
}

.cp-enquiry .wpcf7 form.sent .wpcf7-response-output,
.cp-modal .wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--cp-teal);
	background: var(--cp-aqua-050);
	color: var(--cp-teal-600);
}

.cp-enquiry .wpcf7-spinner,
.cp-modal .wpcf7-spinner {
	margin-inline: auto;
}

.cp-enquiry .wpcf7-not-valid,
.cp-modal .wpcf7-not-valid {
	border-color: #b3261e;
}

/* Two columns for the short fields on the enquiry form, one for the rest. */
.cp-enquiry .cp-form__grid,
.cp-modal .cp-form__grid {
	display: grid;
	gap: 0.9rem;
}

@media (min-width: 30rem) {
	.cp-enquiry .cp-form__grid,
	.cp-modal .cp-form__grid {
		grid-template-columns: 1fr 1fr;
	}

	.cp-enquiry .cp-form__row--full,
	.cp-modal .cp-form__row--full {
		grid-column: 1 / -1;
	}
}

/* [hidden] is a UA rule of display:none, and the author rule above beats it —
   so hiding the grid on success left it on screen with the confirmation pushed
   below. This restores the attribute's meaning. */
.cp-enquiry .cp-form__grid[hidden],
.cp-modal .cp-form__grid[hidden] {
	display: none;
}

/* The label text and its required marker sit in one span, so the flex column
   above breaks between label and field rather than between the words and the
   asterisk. */
.cp-enquiry .cp-form__label,
.cp-modal .cp-form__label {
	display: block;
}

/* The required marker: an abbr, so it is announced rather than being a bare
   asterisk nobody can interpret. */
.cp-enquiry .wpcf7-form abbr,
.cp-modal .wpcf7-form abbr {
	color: #b3261e;
	text-decoration: none;
}

/* CF7 wraps hidden fields in a control wrap; it must not take up space. */
.cp-enquiry .wpcf7-form-control-wrap[data-name="trip-interest"],
.cp-modal .wpcf7-form-control-wrap[data-name="trip-interest"] {
	display: none;
}

/* 11. Lightbox ============================================================= */

.cp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: clamp(1rem, 4vw, 3rem);
	background: rgba(3, 20, 36, 0.94);
	backdrop-filter: blur(4px);
}

.cp-lightbox[hidden] {
	display: none;
}

.cp-lightbox__img {
	max-width: min(100%, 1200px);
	max-height: 88vh;
	object-fit: contain;
	border-radius: var(--cp-radius);
}

.cp-lightbox__close,
.cp-lightbox__nav {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	flex: none;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.18s var(--cp-ease);
}

.cp-lightbox__close:hover,
.cp-lightbox__nav:hover {
	background: rgba(255, 255, 255, 0.2);
}

.cp-lightbox__close {
	position: absolute;
	top: clamp(1rem, 3vw, 2rem);
	right: clamp(1rem, 3vw, 2rem);
}

/* Drawer sub-menu toggles ------------------------------------------------- */

.cp-drawer__menu li {
	position: relative;
}

.cp-drawer__toggle {
	position: absolute;
	top: 0.55rem;
	right: 0;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: transform 0.25s var(--cp-ease), background-color 0.2s var(--cp-ease);
}

.cp-drawer__toggle.is-open {
	transform: rotate(180deg);
	background: rgba(255, 255, 255, 0.12);
}

/* Mega menu -------------------------------------------------------------- */

.cp-mega {
	width: max-content;
	max-width: 560px;
}

.cp-mega__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(140px, 1fr));
	gap: 2px;
}

.cp-mega__list a {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.6rem 0.7rem;
	border-radius: 9px;
	color: var(--cp-navy);
	font-size: var(--cp-fs-sm);
	text-decoration: none;
	transition: background-color 0.16s var(--cp-ease);
}

.cp-mega__list a:hover {
	background: var(--cp-aqua-100);
}

.cp-mega__icon {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	flex: none;
	border-radius: 8px;
	background: var(--cp-mist);
	color: var(--cp-teal);
}

/* Star states ------------------------------------------------------------- */

.cp-stars .is-off {
	color: rgba(7, 48, 90, 0.18);
}

.cp-stars__value {
	margin-left: 0.35rem;
	font-weight: 600;
	color: var(--cp-navy);
	font-size: var(--cp-fs-xs);
}

/* Reviews carousel ========================================================= */

/* The track is a flex row, so the cards carry their own width. Three at a time
   on desktop, dropping to two then one; they keep that width rather than
   shrinking, so the track scrolls instead of squeezing nine reviews onto one
   screen. */
.cp-carousel__track.cp-reviews > .cp-review {
	flex: 0 0 calc((100% - var(--cp-gap) * 2) / 3);
	scroll-snap-align: start;
}

@media (max-width: 899px) {
	.cp-carousel__track.cp-reviews > .cp-review {
		flex-basis: calc((100% - var(--cp-gap)) / 2);
	}
}

@media (max-width: 639px) {
	.cp-carousel__track.cp-reviews > .cp-review {
		flex-basis: 85%;
	}
}

.cp-reviews__nav {
	display: flex;
	justify-content: center;
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}