/* ==========================================================================
   Krystal Tours - hand-written overrides.
   Loaded AFTER krystal.css (which is generated from the mockups), so edits
   here survive any regeneration of that file.
   ========================================================================== */

/* --- Full-width header & footer -------------------------------------- */
.site-header .nav-row { max-width: none; }
.site-footer > .wrap  { max-width: none; }

/* --- Real photography ------------------------------------------------- */
/* Destination / homepage cards */
.frame .frame-photo img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover; display: block;
}

/* Destination page hero */
.dest-hero.has-photo { background-image: none; }
.dest-hero .hero-photo {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover; object-position: center;
	z-index: 0; display: block;
}
.dest-hero::after { z-index: 1; }
.dest-hero .hero-content { z-index: 2; }

/* Homepage hero slides */
.hero-slider .slide-media img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover; display: block;
}

/* Resort + office cards, for when those photos land */
.resort-photo img,
.loc-photo img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover; display: block; z-index: 0;
}
.resort-photo > div,
.resort-photo .stars,
.resort-photo h3,
.loc-photo h4,
.loc-photo .loc-tag { position: relative; z-index: 2; }

/* Stronger scrim when a real photo backs the hero, so white text stays legible
   across bright imagery (sky/water). The generated gradient is too light. */
.dest-hero.has-photo::after {
	background: linear-gradient(
		180deg,
		rgba(8, 44, 63, .58) 0%,
		rgba(8, 44, 63, .52) 45%,
		rgba(8, 44, 63, .82) 100%
	);
}
.dest-hero.has-photo .hero-content {
	text-shadow: 0 2px 18px rgba(8, 44, 63, .55);
}

/* Same treatment for homepage slides once they carry photos. */
.hero-slider .slide-media:has(img)::after {
	background: linear-gradient(
		180deg,
		rgba(8, 44, 63, .58) 0%,
		rgba(8, 44, 63, .52) 45%,
		rgba(8, 44, 63, .84) 100%
	);
}

/* Extra vignette directly behind the hero copy - keeps the headline readable
   even where the photo is brightest (sky, open water). */
.dest-hero.has-photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: radial-gradient(
		62% 48% at 50% 52%,
		rgba(8, 44, 63, .55) 0%,
		rgba(8, 44, 63, .28) 55%,
		transparent 100%
	);
	pointer-events: none;
}

/* --- Attraction photography in the explore gallery ------------------- */
.g-item.has-photo { background-image: none; }
.g-item.has-photo img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover; display: block; z-index: 0;
}
.g-item.has-photo::after {
	content: "";
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(180deg, rgba(0,0,0,0) 42%, rgba(8,44,63,.78) 100%);
}
.g-item .g-caption { position: relative; z-index: 2; }

.photo-credits {
	margin-top: 18px;
	font-size: .74rem;
	color: rgba(10, 34, 51, .55);
	text-align: right;
}

/* Disclosure when a resort card uses an area photo rather than the property */
.resort-photo-note {
	margin: 8px 0 0;
	font-size: .72rem;
	font-style: italic;
	color: rgba(10, 34, 51, .55);
}

/* --- Package tiles inherit resort / destination photography ---------- */
.pkg-photo.has-photo { background-image: none; }
.pkg-photo.has-photo img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover; display: block; z-index: 0;
}
/* keep badges and the price tag above the photo */
.pkg-photo.has-photo::after {
	content: "";
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(180deg, rgba(8,44,63,.30) 0%, rgba(8,44,63,.10) 45%, rgba(8,44,63,.72) 100%);
}
.pkg-photo .pkg-photo-badges,
.pkg-photo .pkg-price-tag,
.pkg-photo .motif { position: absolute; z-index: 2; }

/* Editor-only marker for resort cards with no photography yet */
.resort-photo-todo {
	margin: 8px 0 0;
	padding: 5px 9px;
	font-size: .72rem;
	font-weight: 700;
	color: #7a4a00;
	background: #fff3d6;
	border: 1px dashed #e0b357;
	border-radius: 5px;
}
.resort-photo-todo a { color: #7a4a00; text-decoration: underline; }

/* ==========================================================================
   Brand logo - header and footer
   ========================================================================== */
.kt-logo { display: inline-flex; align-items: center; line-height: 0; }
.kt-logo__img { display: block; width: auto; height: auto; }

/* Header: sits on the white bar, so the artwork runs full-bleed. */
.site-header .kt-logo--header { padding: 0; }
.site-header .kt-logo--header .kt-logo__img {
	height: 54px;
	max-width: 100%;
	transition: opacity .2s ease;
}
.site-header .kt-logo--header:hover .kt-logo__img { opacity: .85; }

/* Footer: navy ground would swallow the magenta, so give it a light chip. */
.site-footer .kt-logo--footer {
	background: #fff;
	padding: 12px 18px;
	border-radius: 10px;
	box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .55);
}
.site-footer .kt-logo--footer .kt-logo__img { height: 50px; max-width: 100%; }

@media (max-width: 860px) {
	.site-header .kt-logo--header .kt-logo__img { height: 42px; }
	.site-footer .kt-logo--footer .kt-logo__img { height: 44px; }
	.site-footer .kt-logo--footer { padding: 10px 14px; }
}
@media (max-width: 480px) {
	.site-header .kt-logo--header .kt-logo__img { height: 36px; }
}

/* ==========================================================================
   Full-bleed header & footer
   Hello Elementor caps .site-header/.site-footer at 1140px and centres them
   (assets/css/theme.css, min-width:1200px), which boxed the bars with gutters.
   The .header-full-width / .footer-full-width classes are the theme's own
   escape hatch; these rules make it explicit and cover every breakpoint.
   ========================================================================== */
.site-header,
header.site-header,
.site-header:not(.dynamic-header),
.site-footer,
footer.site-footer,
.site-footer:not(.dynamic-footer) {
	max-width: 100%;
	width: 100%;
	margin-inline: 0;
	padding-inline: 0;
}

/* The bars run edge to edge; their contents keep breathing room. */
.site-header .nav-row {
	max-width: none;
	width: 100%;
	margin-inline: 0;
	padding-inline: clamp(20px, 4vw, 56px);
}
.site-footer > .wrap {
	max-width: none;
	width: 100%;
	margin-inline: 0;
	padding-inline: clamp(20px, 4vw, 56px);
}

/* Breathing room so the logo never crowds the first nav item. */
.site-header .nav-row { gap: clamp(22px, 3.5vw, 64px); }
.site-header .kt-logo--header { flex: 0 0 auto; }

/* Mobile: centre the logo, pin the burger to the right.
   The mockup turns .primary-nav into a fixed off-canvas drawer below 900px and
   hides .nav-cta, so the logo is the only in-flow child once the toggle is
   taken out of the flow - centring it is then just justify-content. */
@media (max-width: 900px) {
	.site-header .nav-row {
		position: relative;
		justify-content: center;
		gap: 0;
	}
	.site-header .menu-toggle {
		position: absolute;
		inset-inline-end: clamp(16px, 4vw, 40px);
		top: 50%;
		transform: translateY(-50%);
		z-index: 3;
	}
	.site-header .kt-logo--header { margin-inline: auto; }
}

/* ==========================================================================
   BRAND PALETTE - re-skinned to the Krystal Tours logo
   Logo colours: blue #0078C0, magenta #B42460.
   The mockup CSS drives everything through these custom properties, so
   redefining them here (loaded after krystal.css) re-themes the whole site
   without touching the generated file.
   ========================================================================== */
:root {
	/* raw brand values */
	--brand-blue:          #0078C0;
	--brand-blue-deep:     #005A93;
	--brand-blue-light:    #4FB3E8;
	--brand-magenta:       #B42460;
	--brand-magenta-light: #E0629C;

	/* remapped mockup tokens */
	--navy:      #084C7C;
	--navy-deep: #062F4D;
	--teal:      #0078C0;   /* primary */
	--turquoise: #4FB3E8;   /* primary light */
	--gold:      #D6367C;   /* accent - bright enough to read as text on navy */
	--coral:     #E0629C;
	--sand:      #F8F5F0;
	--sand-dim:  #ECE7DE;
	--ink:       #08243A;
	--line:      rgba(8, 76, 124, .14);
	--shadow:    0 20px 40px -18px rgba(6, 47, 77, .38);

	/* Per-page accent pair. krystal.css declares these in a SECOND :root block
	   (--pc-a/--pc-b, hardcoded teal) and they drive the explore-row icons, the
	   "Good to know" panel and the destination hero fallback - none of which
	   picked up the token remap until they were overridden here too. */
	--pc-a: #0078C0;
	--pc-b: #4FB3E8;
}

/* Two gradients in krystal.css hardcode the old teal instead of using tokens. */
.hero-photo-card .hp-img {
	background-image:
		linear-gradient(135deg, var(--brand-blue), var(--brand-blue-light));
}
.find-us {
	background-image:
		linear-gradient(135deg, var(--brand-blue-deep), var(--navy-deep) 75%);
}

/* --- Buttons: gradient, inner highlight, coloured glow ------------------ */
.btn { position: relative; overflow: hidden; isolation: isolate; }

.btn-primary {
	background: linear-gradient(135deg, var(--brand-blue-light) 0%, var(--brand-blue) 45%, var(--brand-blue-deep) 100%);
	box-shadow:
		0 10px 24px -10px rgba(0, 120, 192, .70),
		inset 0 1px 0 rgba(255, 255, 255, .38);
}
.btn-primary:hover {
	box-shadow:
		0 16px 32px -10px rgba(0, 120, 192, .78),
		inset 0 1px 0 rgba(255, 255, 255, .45);
}

.btn-gold {
	background: linear-gradient(135deg, var(--brand-magenta-light) 0%, var(--gold) 45%, var(--brand-magenta) 100%);
	color: var(--white);
	box-shadow:
		0 10px 24px -10px rgba(180, 36, 96, .70),
		inset 0 1px 0 rgba(255, 255, 255, .34);
}
.btn-gold:hover {
	color: var(--white);
	box-shadow:
		0 16px 32px -10px rgba(180, 36, 96, .78),
		inset 0 1px 0 rgba(255, 255, 255, .42);
}

/* A single restrained sheen sweep on hover - the "shine". */
.btn-primary::after,
.btn-gold::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 -60%;
	width: 45%;
	z-index: -1;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .40), transparent);
	transform: skewX(-18deg);
	transition: left .55s cubic-bezier(.4, 0, .2, 1);
}
.btn-primary:hover::after,
.btn-gold:hover::after { left: 115%; }

@media (prefers-reduced-motion: reduce) {
	.btn-primary::after, .btn-gold::after { transition: none; }
	.btn-primary:hover::after, .btn-gold:hover::after { left: -60%; }
}

.btn-ghost:hover { border-color: var(--brand-blue); color: var(--brand-blue); }

/* --- Premium finish on key surfaces ------------------------------------ */
/* Hairline brand gradient under the header. */
.site-header {
	border-bottom: 1px solid transparent;
	border-image: linear-gradient(90deg, var(--brand-blue), var(--gold), var(--brand-blue)) 1;
}
/* Footer gets the same rule as a top accent. */
.site-footer {
	background-image: linear-gradient(180deg, rgba(0, 120, 192, .16), transparent 220px);
	border-top: 3px solid transparent;
	border-image: linear-gradient(90deg, var(--brand-blue), var(--gold), var(--brand-blue)) 1;
}

/* Soft brand wash + lift on cards. */
.resort-card, .pkg-tile, .region-card, .location-card {
	box-shadow: 0 14px 34px -20px rgba(6, 47, 77, .42);
	transition: transform .25s ease, box-shadow .25s ease;
}
.resort-card:hover, .pkg-tile:hover {
	transform: translateY(-3px);
	box-shadow: 0 22px 44px -20px rgba(6, 47, 77, .52);
}

/* Price tag reads as a brand chip.
   This previously set the price to var(--white), but the chip behind it is
   rgba(255,255,255,.96) - white on white, so no price was visible on any tile. */
.pkg-price-tag .now { color: var(--brand-burgundy); }

/* ==========================================================================
   Mobile footer - was one tall column with big gaps and a lot of dead space.
   Brand block and contact span full width; the two short link lists sit
   side by side, which roughly halves the footer height.
   ========================================================================== */
@media (max-width: 620px) {
	footer.site-footer { padding: 30px 0 18px; }

	.footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 26px 20px;
		padding-bottom: 22px;
	}
	.footer-brand,
	.footer-newsletter { grid-column: 1 / -1; }

	.footer-brand p {
		margin-top: 10px;
		max-width: none;
		font-size: .86rem;
		line-height: 1.5;
	}
	.footer-col h5 { margin-bottom: 10px; font-size: .72rem; }
	.footer-col ul { gap: 9px; }
	.footer-col a { font-size: .88rem; }

	.footer-newsletter p { font-size: .84rem !important; margin-bottom: 6px; }
	.footer-newsletter ul { gap: 6px; }

	.footer-bottom {
		padding-top: 16px;
		gap: 10px;
		font-size: .74rem;
		/* clear the floating cookie button so the legal links stay tappable */
		padding-bottom: 56px;
	}
	.footer-bottom .legal-links { gap: 14px; flex-wrap: wrap; }

	.site-footer .kt-logo--footer { padding: 9px 13px; border-radius: 8px; }
	.site-footer .kt-logo--footer .kt-logo__img { height: 40px; }
}

/* Very narrow phones: keep two columns but ease the type down. */
@media (max-width: 380px) {
	.footer-grid { gap: 22px 14px; }
	.footer-col a { font-size: .84rem; }
}

/* ==========================================================================
   Page header photography (About / Packages / Destinations)
   .hero is already full-bleed and min-height:calc(100vh - 108px); these rules
   let a real photo fill it edge to edge instead of the gradient.
   ========================================================================== */
.hero { width: 100%; max-width: none; }

.hero.has-photo,
.contact-hero.has-photo { background-image: none; }
.hero.has-photo .hero-photo,
.contact-hero.has-photo .hero-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
	display: block;
}
/* Stronger scrim than the gradient version - headline sits over bright water/sky. */
.hero.has-photo::after,
.contact-hero.has-photo::after {
	z-index: 1;
	background: linear-gradient(
		180deg,
		rgba(6, 47, 77, .52) 0%,
		rgba(6, 47, 77, .40) 40%,
		rgba(6, 47, 77, .80) 100%
	);
}
.hero.has-photo .hero-inner,
.contact-hero.has-photo .hero-inner {
	position: relative;
	z-index: 2;
	text-shadow: 0 2px 18px rgba(6, 47, 77, .55);
}

/* --- Homepage slider: slides must fill the slider ---------------------- */
/* .hero-slider carries min-height:calc(100vh - 108px), but each .slide was
   only as tall as its own content (567px of a 792px slider), leaving a dead
   band below the photo. Inherit the height and centre the copy inside it.
   The JS sets display:none inline on hidden slides, which still wins. */
.hero-slider .slide {
	min-height: inherit;
	display: flex;
	align-items: center;
}
.hero-slider .slide-body {
	position: relative;
	z-index: 2;
	width: 100%;
}

/* ==========================================================================
   Packages page - destination accordion headers
   The mockup set --dest-gradient inline on every block; our template doesn't,
   so the variable was undefined, the background-image shorthand was invalid,
   and white text landed on the white card. Blue by default, magenta on hover.
   ========================================================================== */
.dest-block-header {
	position: relative;
	isolation: isolate;
	--dest-gradient: linear-gradient(120deg,
		var(--brand-blue-deep) 0%,
		var(--brand-blue) 55%,
		var(--brand-blue-light) 130%);
}

/* Magenta layer cross-fades in on hover - gradients can't transition directly. */
.dest-block-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0;
	transition: opacity .28s ease;
	background-image:
		linear-gradient(120deg,
			var(--brand-magenta) 0%,
			var(--gold) 55%,
			var(--brand-magenta-light) 130%);
}
.dest-block-header:hover::before,
.dest-block-header:focus-visible::before { opacity: 1; }

.dest-block-header:focus-visible {
	outline: 3px solid var(--brand-blue-light);
	outline-offset: -3px;
}

/* Keep the label, count and chevron above the hover layer. */
.dest-block-header .pin-icon,
.dest-block-header .dest-title,
.dest-block-header .pkg-count,
.dest-block-header .chev { position: relative; z-index: 1; }

/* Slight lift so the row reads as clickable. */
.dest-block { transition: box-shadow .25s ease, transform .25s ease; }
.dest-block:hover { box-shadow: 0 20px 42px -20px rgba(6, 47, 77, .48); }

/* ==========================================================================
   SECTION HEADS
   krystal.css carries five separate .section-head blocks merged from the
   seven mockups. The last one wins on whatever it declares, so the live
   result was a mash-up: a flex row with space-between (from one mockup)
   inside a 680px centred, centre-aligned box (from another). Three children
   pushed to the edges of a narrow centred box is what read as "just placed".
   One authoritative definition, matching the homepage mockup: eyebrow on its
   own line, then the heading left and the description right.
   ========================================================================== */
.section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	column-gap: clamp(24px, 4vw, 48px);
	row-gap: 10px;
	max-width: none;
	margin: 0 0 clamp(28px, 3.5vw, 40px);
	text-align: left;
}
.section-head > .eyebrow { flex: 0 0 100%; }
.section-head > h2 {
	flex: 1 1 420px;
	max-width: 640px;
	margin-top: 4px;
	font-size: clamp(1.9rem, 3.4vw, 2.6rem);
}
.section-head > p {
	flex: 0 1 420px;
	max-width: 420px;
	margin-top: 0;
	color: #42586A;
	font-size: 1rem;
}
@media (max-width: 860px) {
	.section-head > h2,
	.section-head > p { flex-basis: 100%; max-width: none; }
	.section-head > p { margin-top: 4px; }
}

/* The contact page's "find us" band is a centred full-bleed banner, so its
   head stays centred and keeps the light-on-dark colours. */
.find-us .section-head {
	justify-content: center;
	text-align: center;
	max-width: 640px;
	margin-inline: auto;
}
.find-us .section-head > * { flex-basis: 100%; max-width: none; }
.find-us .section-head > .eyebrow { color: rgba(255, 255, 255, .8); }
.find-us .section-head > p { color: rgba(255, 255, 255, .85); margin-top: 12px; }

/* ==========================================================================
   CTA BANNERS
   Same shape of problem: .cta-inner is a space-between flex row that assumes
   the copy is wrapped in one element with the buttons as the second child.
   Our templates emit eyebrow / h3 / p / .hero-actions as flat siblings, so
   they were spread across the banner instead of stacking on the left.
   ========================================================================== */
.cta-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: repeat(3, auto);
	align-items: center;
	column-gap: clamp(24px, 4vw, 44px);
	row-gap: 6px;
}
.cta-inner > * { grid-column: 1; }
.cta-inner > .eyebrow { color: rgba(255, 255, 255, .75); }
.cta-inner > .hero-actions {
	grid-column: 2;
	grid-row: 1 / -1;
	align-self: center;
	justify-content: flex-end;
	margin-top: 0;
}
@media (max-width: 820px) {
	.cta-inner {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		row-gap: 10px;
	}
	.cta-inner > .hero-actions {
		grid-column: 1;
		grid-row: auto;
		justify-content: flex-start;
		margin-top: 8px;
	}
}

/* The About page's final band inherits the global navy heading colour, which
   put navy text on a navy banner. */
.final-cta h3,
.final-cta h2 { color: var(--white); font-size: clamp(2rem, 4vw, 3rem); }
.final-cta p { color: rgba(255, 255, 255, .85); margin-top: 12px; }

/* ==========================================================================
   MOCKUP-SUPPLIED GRADIENT VARIABLES
   The mockups set --pg / --vg / --sg / --cat-gradient inline on each element.
   Our templates render from the database and never set them, so every
   background-image that referenced one was an invalid declaration: no paint
   at all, which left white text on white cards. Brand defaults for each.
   ========================================================================== */
:root {
	--kt-grad-blue:  linear-gradient(135deg, var(--brand-blue-deep), var(--brand-blue) 55%, var(--brand-blue-light));
	--kt-grad-pink:  linear-gradient(135deg, var(--brand-magenta), var(--gold) 55%, var(--brand-magenta-light));
	--kt-grad-mixed: linear-gradient(135deg, var(--brand-blue-deep), var(--brand-magenta) 120%);
}

/* Photo placeholders: shown wherever a card has no image yet. */
.frame .frame-photo,
.pkg-photo,
.g-item,
.story-photo,
.loc-photo { --pg: var(--kt-grad-blue); }

/* Hero slide backdrop, behind the photo and visible while it decodes. */
.slide-media { --sg: var(--kt-grad-mixed); }

/* FAQ category headers: white text that was landing on a white card. */
.faq-block-header {
	--cat-gradient: var(--kt-grad-blue);
	border-radius: 22px 22px 0 0;
}
.faq-block-header .cat-icon { color: var(--white); }

/* The chevrons only rotate once the icons actually carry the .chev class. */
.faq-q .chev,
.dest-block-header .chev { transition: transform .25s ease; }
.faq-item.is-open .faq-q .chev,
.faq-q[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* ==========================================================================
   VIBE PICKER
   Without --vg these were blank grey tiles with an invisible label sitting
   under the scrim. Alternating brand gradients plus a label above it.
   ========================================================================== */
.vibe-card { --vg: var(--kt-grad-blue); }
.vibe-card:nth-child(2n) { --vg: var(--kt-grad-pink); }
.vibe-card:nth-child(3n) { --vg: var(--kt-grad-mixed); }
.vibe-card > span,
.vibe-card span.v-label {
	position: relative;
	z-index: 2;
	font-weight: 800;
	font-size: .98rem;
	color: var(--white);
}
.vibe-card .v-icon {
	position: absolute;
	top: 14px;
	right: 14px;
	opacity: .6;
	z-index: 2;
	color: var(--white);
}

/* ==========================================================================
   CONTACT: OFFICE CARDS
   .locations-grid had no rule at all, so the two offices stacked full width.
   ========================================================================== */
.locations-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(20px, 3vw, 28px);
	max-width: 900px;
	margin: 0 auto;
	text-align: left;
}
.locations-grid .loc-photo { display: flex; flex-direction: column; }

/* ==========================================================================
   ABOUT PAGE
   .story-grid and .portfolio-grid are hard-coded to two columns but our
   templates render a single column of copy, leaving half the row empty.
   auto-fit lets one child fill the row and two children still split it.
   ========================================================================== */
.story-grid,
.portfolio-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}

/* The hero badge is only styled inside .hero-photo-card, which this page
   does not render, so it came out as unstyled body text. */
.hero-inner .hp-caption {
	display: inline-block;
	margin-top: 22px;
	padding: 7px 15px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .3);
	color: var(--white);
	font-family: 'Source Serif 4', Georgia, serif;
	font-style: italic;
	font-size: .9rem;
}

/* .find-us paints a dark scrim with ::after and lifts its content with
   .find-us-inner, which this template does not render - so the scrim was
   sitting on top of the office cards and muting them. */
.find-us > .wrap { position: relative; z-index: 2; }
.locations-grid .loc-body,
.locations-grid .loc-body a { color: #42586A; }

/* ==========================================================================
   PACKAGE PRICES
   Burgundy, drawn from the logo's magenta but deepened so it holds up as
   small text on the near-white price chip (8.6:1 against white).
   ========================================================================== */
:root { --brand-burgundy: #8E1D4C; }

.pkg-price-tag .now {
	color: var(--brand-burgundy);
	font-weight: 700;
}
.pkg-price-tag .was { color: #A6899A; }
.pkg-price-tag .unit { color: #7A6470; }

/* The same treatment on the single package page, where the price is the
   heading of the "What's included" column. Scoped to single-product: the
   destination pages reuse .about-grid for their "About <place>" heading,
   which must stay navy. */
body.single-product .about-grid .eyebrow + h2 { color: var(--brand-burgundy); }
body.single-product .about-grid .eyebrow + h2 small { color: #7A6470; }

/* WooCommerce's own price output (cart, checkout, mini-cart, add-to-cart area). */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price,
.woocommerce-Price-amount { color: var(--brand-burgundy); }

/* ==========================================================================
   MOBILE HEADER LOGO
   The bar is ~100px tall but the logo was only 36px, the same visual weight
   as the hamburger beside it, leaving a band of empty white. Roughly double
   it and trim the row padding so the logo fills the bar the header already
   occupies rather than making the header taller.
   ========================================================================== */
@media (max-width: 860px) {
	.site-header .nav-row { padding-block: 10px; }
	.site-header .kt-logo--header .kt-logo__img { height: 72px; }
}
@media (max-width: 480px) {
	.site-header .kt-logo--header .kt-logo__img { height: 68px; }
}
/* Small phones: keep clear of the hamburger. */
@media (max-width: 360px) {
	.site-header .kt-logo--header .kt-logo__img { height: 60px; }
}

/* ==========================================================================
   MOBILE MENU: CLOSING
   The drawer is z-index 200 and covers the hamburger, so once it was open
   there was no way back out. The drawer already reserves 90px of top padding;
   the close button sits in it, roughly where the hamburger was.
   ========================================================================== */
.nav-close { display: none; }

@media (max-width: 900px) {
	.nav-close {
		display: block;
		position: absolute;
		top: 26px;
		inset-inline-end: 22px;
		width: 44px;
		height: 44px;
		padding: 0;
		border: none;
		border-radius: 50%;
		background: var(--sand, #F8F5F0);
		cursor: pointer;
		transition: background .2s ease, transform .2s ease;
	}
	.nav-close:hover { background: #EFE7EE; }
	.nav-close:active { transform: scale(.94); }
	.nav-close:focus-visible {
		outline: 3px solid var(--brand-blue);
		outline-offset: 2px;
	}
	/* Two bars crossed into an X, matching the hamburger's stroke. */
	.nav-close span {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 20px;
		height: 2.5px;
		margin: -1.25px 0 0 -10px;
		border-radius: 2px;
		background: var(--navy-deep);
	}
	.nav-close span:first-child { transform: rotate(45deg); }
	.nav-close span:last-child  { transform: rotate(-45deg); }

	/* Tap-anywhere-else to dismiss.
	   The drawer's z-index:200 is scoped to .site-header's own stacking context
	   (position:sticky, z-index:100), so a backdrop above 100 at the root would
	   cover the drawer and swallow every tap. Lift the whole header above the
	   backdrop while the menu is open instead. */
	.nav-backdrop {
		position: fixed;
		inset: 0;
		z-index: 199;
		background: rgba(6, 47, 77, .48);
		backdrop-filter: blur(2px);
		border: 0;
	}
	body.nav-is-open .site-header { z-index: 300; }
	/* The drawer is fixed, so let the page behind it stay put while it is open. */
	body.nav-is-open { overflow: hidden; }
}

/* ==========================================================================
   VIBE CARD PHOTOGRAPHY
   The tiles fall back to the brand gradient; where a term has an image set
   it fills the square and the existing ::after scrim carries the label.
   ========================================================================== */
.vibe-card { overflow: hidden; }
.vibe-card > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.vibe-card:hover > img { transform: scale(1.06); }

/* Photos need a deeper scrim than the flat gradient did to keep the label
   readable over bright water and sky. */
.vibe-card.has-photo::after {
	background: linear-gradient(180deg, rgba(6, 47, 77, 0) 30%, rgba(6, 47, 77, .78) 100%);
}
.vibe-card.has-photo .v-label {
	text-shadow: 0 1px 12px rgba(6, 47, 77, .55);
}
.vibe-card.has-photo .v-icon {
	opacity: .85;
	filter: drop-shadow(0 1px 6px rgba(6, 47, 77, .5));
}

/* ==========================================================================
   SINGLE PACKAGE PAGE
   Was a full-height empty gradient hero over a thin, mostly blank column:
   no package carries a description, so the content well had nothing in it,
   and WooCommerce's default purple add-to-cart sat in the middle of it.
   Now: a photo hero, a facts strip, the linked resort as the story, and a
   sticky booking card carrying the price and the buy action.
   ========================================================================== */

/* A product page does not need a full-viewport hero. */
.pkg-hero {
	min-height: min(52vh, 460px);
	align-items: flex-end;
	text-align: left;
	padding-bottom: clamp(28px, 4vw, 48px);
}
.pkg-hero .wrap { position: relative; z-index: 2; width: 100%; }
.pkg-hero .hero-content { max-width: 780px; padding: 0; margin: 0; }
.pkg-hero .hero-content h1 { font-size: clamp(1.9rem, 3.6vw, 3.1rem); line-height: 1.08; }
.pkg-hero .hero-content .tagline { margin-left: 0; margin-right: 0; }
.pkg-hero .breadcrumb { color: rgba(255, 255, 255, .78); }
.pkg-hero .breadcrumb a { color: rgba(255, 255, 255, .92); }
.pkg-hero .breadcrumb a:hover { color: var(--white); text-decoration: underline; }
.pkg-hero .breadcrumb .current { color: var(--white); }
.pkg-hero .breadcrumb .sep { color: rgba(255, 255, 255, .5); }

/* Two columns: the story on the left, the booking box pinned on the right. */
.pkg-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 370px;
	gap: clamp(26px, 3.5vw, 46px);
	align-items: start;
}
.pkg-main { display: flex; flex-direction: column; gap: clamp(22px, 3vw, 34px); }

.pkg-panel h2 {
	font-size: clamp(1.3rem, 2.2vw, 1.7rem);
	margin-bottom: 16px;
}

/* Inclusions read as a checklist rather than a scatter of tiny chips. */
.inc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 10px 22px;
}
.inc-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: .92rem;
	color: #33495B;
	line-height: 1.4;
}
.inc-list .inc-tick {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--brand-blue);
}

.pkg-resort-panel .resort-card { box-shadow: 0 14px 34px -20px rgba(6, 47, 77, .42); }
.pkg-resort-panel .resort-photo { height: 230px; }
.pkg-resort-panel .resort-body { display: flex; flex-direction: column; gap: 14px; }
.pkg-resort-panel .resort-body p { font-size: .95rem; color: #33495B; line-height: 1.65; }

.pkg-copy p { font-size: .98rem; color: #33495B; line-height: 1.7; }
.pkg-copy p + p { margin-top: 14px; }

/* ---- Booking card ---- */
.pkg-aside { position: sticky; top: 130px; }
.booking-card {
	background: var(--white);
	border: 1.5px solid var(--line);
	border-radius: 22px;
	padding: clamp(22px, 2.5vw, 28px);
	box-shadow: 0 20px 44px -26px rgba(6, 47, 77, .45);
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.booking-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.booking-price { display: flex; flex-direction: column; gap: 2px; }
.booking-price .bp-now {
	font-family: 'Source Serif 4', Georgia, serif;
	font-weight: 700;
	font-size: clamp(2rem, 3.4vw, 2.5rem);
	line-height: 1.05;
	color: var(--brand-burgundy);
}
.booking-price .bp-now del { font-size: .5em; font-weight: 500; color: #A6899A; margin-right: 8px; }
.booking-price .bp-now ins { text-decoration: none; }
.booking-price .bp-unit {
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #7A6470;
}
.booking-actions { display: flex; flex-direction: column; gap: 10px; }
.btn-block { width: 100%; justify-content: center; }

/* WooCommerce's own add-to-cart markup, brought into the design system.
   Left alone it renders as a small default-purple button beside a bare
   number input. */
.booking-actions form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
	margin: 0;
}
.booking-actions .quantity { flex: 0 0 92px; }
.booking-actions .quantity input.qty {
	width: 100%;
	height: 100%;
	min-height: 48px;
	padding: 10px 6px 10px 12px;
	border: 1.5px solid var(--line);
	border-radius: 12px;
	background: var(--sand-dim, #F8F5F0);
	font-family: inherit;
	font-weight: 700;
	font-size: .95rem;
	color: var(--navy-deep);
	text-align: center;
}
.booking-actions .quantity input.qty:focus {
	outline: none;
	border-color: var(--brand-blue);
	background: var(--white);
}
.booking-actions button.single_add_to_cart_button {
	flex: 1 1 160px;
	min-height: 48px;
	padding: 12px 22px;
	border: none;
	border-radius: 999px;
	background: linear-gradient(120deg, var(--brand-magenta), var(--gold));
	color: var(--white);
	font-family: inherit;
	font-weight: 800;
	font-size: .92rem;
	letter-spacing: .01em;
	cursor: pointer;
	box-shadow: 0 12px 26px -12px rgba(180, 36, 96, .6);
	transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.booking-actions button.single_add_to_cart_button:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 32px -12px rgba(180, 36, 96, .7);
	filter: saturate(1.08);
}
.booking-actions button.single_add_to_cart_button:active { transform: translateY(0); }

.booking-note {
	font-size: .78rem;
	color: #7A8B99;
	line-height: 1.5;
	padding-top: 2px;
}
.booking-reassure {
	list-style: none;
	margin: 0;
	padding-top: 16px;
	border-top: 1px solid var(--line);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.booking-reassure li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: .8rem;
	color: #5A7182;
	line-height: 1.45;
}
.booking-reassure .br-icon { flex-shrink: 0; margin-top: 1px; color: var(--brand-blue); }

@media (max-width: 980px) {
	.pkg-layout { grid-template-columns: 1fr; }
	.pkg-aside { position: static; order: -1; }
}

/* ==========================================================================
   MOTION LAYER
   The stylesheet had exactly one keyframe animation and nothing responded to
   scrolling, which is most of why the site read as static. Two pieces:
   content that rises into place as you reach it, and a slow drift on the hero.

   Everything here is gated on .kt-motion, which an inline script in the head
   adds only when the browser supports IntersectionObserver and the visitor has
   not asked for reduced motion. No class, no hiding - so a failure or an older
   browser shows the page exactly as before rather than a blank screen.
   ========================================================================== */

.kt-motion .kt-reveal {
	opacity: 0;
	transform: translateY(38px);
	transition:
		opacity   .9s cubic-bezier(.22, .8, .24, 1),
		transform .9s cubic-bezier(.22, .8, .24, 1);
	transition-delay: var(--kt-delay, 0ms);
	will-change: opacity, transform;
}
.kt-motion .kt-reveal.is-in {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Grid children come in slightly from the side as well, so a row of tiles
   cascades rather than all sliding straight up together. */
.kt-motion .kt-reveal.kt-reveal--tile { transform: translateY(46px) scale(.955); }
.kt-motion .kt-reveal--tile.is-in     { transform: none; }

/* ---- Hero: slow drift on the active slide ---------------------------------
   The slider cross-fades between stills. A 24s push in (or pull out, alternating
   per slide) makes it read as film rather than a carousel. */
@keyframes kt-drift-in {
	from { transform: scale(1.02) translate3d(0, 0, 0); }
	to   { transform: scale(1.24) translate3d(-3.5%, -2.5%, 0); }
}
@keyframes kt-drift-out {
	from { transform: scale(1.24) translate3d(3.5%, 2%, 0); }
	to   { transform: scale(1.02) translate3d(0, 0, 0); }
}
.kt-motion .hero-slider .slide.is-active .slide-media img {
	animation: kt-drift-in 19s ease-out forwards;
}
.kt-motion .hero-slider .slide:nth-child(even).is-active .slide-media img {
	animation-name: kt-drift-out;
}

/* Hero copy settles in behind the photo. */
@keyframes kt-rise {
	from { opacity: 0; transform: translateY(30px); }
	to   { opacity: 1; transform: none; }
}
.kt-motion .hero-slider .slide.is-active .slide-inner > * {
	animation: kt-rise .95s cubic-bezier(.22, .8, .24, 1) both;
}
.kt-motion .hero-slider .slide.is-active .slide-inner > *:nth-child(1) { animation-delay: .10s; }
.kt-motion .hero-slider .slide.is-active .slide-inner > *:nth-child(2) { animation-delay: .20s; }
.kt-motion .hero-slider .slide.is-active .slide-inner > *:nth-child(3) { animation-delay: .30s; }
.kt-motion .hero-slider .slide.is-active .slide-inner > *:nth-child(4) { animation-delay: .40s; }

/* Static-hero pages get the same settling, without the drift. */
.kt-motion .hero .hero-inner > *,
.kt-motion .dest-hero .hero-content > * {
	animation: kt-rise .95s cubic-bezier(.22, .8, .24, 1) both;
}
.kt-motion .hero .hero-inner > *:nth-child(2),
.kt-motion .dest-hero .hero-content > *:nth-child(2) { animation-delay: .08s; }
.kt-motion .hero .hero-inner > *:nth-child(3),
.kt-motion .dest-hero .hero-content > *:nth-child(3) { animation-delay: .16s; }
.kt-motion .hero .hero-inner > *:nth-child(4),
.kt-motion .dest-hero .hero-content > *:nth-child(4) { animation-delay: .24s; }

/* Nothing above is negotiable against an explicit accessibility preference. */
@media (prefers-reduced-motion: reduce) {
	.kt-motion .kt-reveal,
	.kt-motion .kt-reveal.kt-reveal--tile {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.kt-motion .hero-slider .slide.is-active .slide-media img,
	.kt-motion .hero-slider .slide.is-active .slide-inner > *,
	.kt-motion .hero .hero-inner > *,
	.kt-motion .dest-hero .hero-content > * {
		animation: none !important;
	}
}

/* ==========================================================================
   TRUST STRIP
   Four decades of credentials were buried on the About page. This puts them
   directly under the hero, with the numeric ones counting up on reveal.
   ========================================================================== */
.trust-strip {
	position: relative;
	background: var(--white);
	border-bottom: 1px solid var(--line);
	padding: clamp(26px, 3.5vw, 40px) 0;
}
.trust-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: clamp(18px, 3vw, 38px);
	align-items: start;
	text-align: center;
}
.trust-item { position: relative; }
.trust-item + .trust-item::before {
	content: "";
	position: absolute;
	inset-inline-start: calc(clamp(18px, 3vw, 38px) / -2);
	top: 12%;
	height: 76%;
	border-inline-start: 1px solid var(--line);
}
.trust-num {
	display: block;
	font-family: 'Source Serif 4', Georgia, serif;
	font-weight: 600;
	font-size: clamp(1.9rem, 3.4vw, 2.7rem);
	line-height: 1;
	letter-spacing: -.02em;
	background: linear-gradient(120deg, var(--brand-blue-deep), var(--brand-blue) 55%, var(--brand-blue-light));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.trust-item.is-accent .trust-num {
	background-image: linear-gradient(120deg, var(--brand-magenta), var(--gold) 70%);
}
.trust-label {
	display: block;
	margin-top: 8px;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #8A97A2;
}
@media (max-width: 560px) {
	.trust-item + .trust-item::before { display: none; }
}

/* ==========================================================================
   DESTINATION MARQUEE
   A full-bleed band of destination names drifting past. Editorial, and it
   reads as a travel brand rather than a brochure.
   ========================================================================== */
.marquee {
	position: relative;
	overflow: hidden;
	padding: clamp(22px, 3vw, 34px) 0;
	background:
		linear-gradient(120deg, var(--navy-deep), var(--brand-blue-deep) 70%, var(--brand-magenta) 160%);
	color: var(--white);
	user-select: none;
}
.marquee::before,
.marquee::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: clamp(40px, 8vw, 120px);
	z-index: 2;
	pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--navy-deep), transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--brand-magenta), transparent); opacity: .55; }

.marquee-track {
	display: flex;
	width: max-content;
	animation: kt-marquee 48s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
	display: inline-flex;
	align-items: center;
	gap: clamp(20px, 3vw, 38px);
	padding-inline-end: clamp(20px, 3vw, 38px);
	font-family: 'Source Serif 4', Georgia, serif;
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.5rem, 3.2vw, 2.6rem);
	line-height: 1.1;
	white-space: nowrap;
	color: rgba(255, 255, 255, .92);
	text-decoration: none;
	transition: color .25s ease;
}
.marquee-item:hover { color: var(--gold); }
.marquee-item .dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--gold);
	flex-shrink: 0;
	opacity: .8;
}
@keyframes kt-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* ==========================================================================
   TEXTURE
   Flat CSS gradients are the single most reliable "template" tell. A fine
   grain over the dark bands makes them read as printed rather than generated.
   Uses ::before deliberately - .cta-inner, .final-cta, .find-us and .marquee
   all already spend their ::after on scrims and edge fades.
   ========================================================================== */
.kt-grain { position: relative; }
.kt-grain > * { position: relative; z-index: 2; }
.kt-grain::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: .16;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* ==========================================================================
   WAVE DIVIDER
   Caribbean brand, and softer than a hard edge between bands.
   ========================================================================== */
.wave-divider {
	position: relative;
	display: block;
	width: 100%;
	height: clamp(34px, 5vw, 64px);
	margin-bottom: -1px;
	color: var(--white);           /* set per use to match the section below */
	pointer-events: none;
}
.wave-divider svg { display: block; width: 100%; height: 100%; }
.wave-divider path { fill: currentColor; }

@media (prefers-reduced-motion: reduce) {
	.marquee-track { animation: none; transform: none; }
}

/* ==========================================================================
   WAVE EDGES ON THE MARQUEE
   The marquee is the only hard colour break on the homepage: sand above,
   dark band, white below. Curved edges there do real work; waves on every
   boundary would just read as a template. Each wave is painted the colour of
   the section it faces, so it reads as that section spilling over the band.
   z-index 3 puts it above the grain (1), the track (2) and the edge fades (2).
   ========================================================================== */
.marquee > .wave-divider {
	position: absolute;
	left: -1px;
	right: -1px;
	width: calc(100% + 2px);
	height: clamp(20px, 3vw, 42px);
	z-index: 3;
	margin: 0;
}
.marquee > .wave-divider.is-top    { top: -1px; }
.marquee > .wave-divider.is-bottom { bottom: -1px; transform: scaleY(-1); }

/* The band needs room so the curves do not crop the type. */
.marquee {
	padding-top: clamp(38px, 5.5vw, 62px);
	padding-bottom: clamp(38px, 5.5vw, 62px);
}

/* The fades must stop short of the curves, or they tint them. */
.marquee::before,
.marquee::after {
	top: clamp(20px, 3vw, 42px);
	bottom: clamp(20px, 3vw, 42px);
}

@media (max-width: 600px) {
	.marquee > .wave-divider { height: 16px; }
	.marquee::before, .marquee::after { top: 16px; bottom: 16px; }
}

/* ==========================================================================
   HOW IT WORKS - tightened
   The 01/02/03 numerals were the loudest thing in each column and pushed the
   headings a long way down. An icon chip does the same job quietly, and the
   spacing is pulled in so the three steps read as one band rather than three
   tall, half-empty columns.
   ========================================================================== */
.how-section { padding: clamp(52px, 6vw, 74px) 0; }
.how-grid {
	margin-top: 32px;
	gap: clamp(26px, 3vw, 46px);
	align-items: start;
}

.how-step { display: flex; flex-direction: column; }
.how-step .how-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 16px;
	border-radius: 14px;
	color: var(--brand-blue);
	background: linear-gradient(135deg, rgba(0, 120, 192, .10), rgba(79, 179, 232, .22));
	box-shadow: inset 0 0 0 1px rgba(0, 120, 192, .14);
	flex-shrink: 0;
}
.how-step h4 {
	font-size: 1.12rem;
	line-height: 1.25;
	margin-bottom: 8px;
	color: var(--navy-deep);
}
.how-step p {
	font-size: .92rem;
	line-height: 1.6;
	color: #42586A;
	max-width: 34ch;
}

/* The numerals are gone from the markup; this keeps any stale one from
   reappearing if the block is ever duplicated. */
.how-step .step-index { display: none; }

@media (max-width: 820px) {
	.how-grid { gap: 26px; }
	.how-step { flex-direction: row; align-items: flex-start; gap: 16px; }
	.how-step .how-icon { margin-bottom: 0; width: 42px; height: 42px; border-radius: 12px; }
	.how-step p { max-width: none; }
}

/* ==========================================================================
   DESTINATION MAP  (v2)
   Dark chart rather than a pale atlas: navy ocean, wireframe coastlines, a
   faint graticule, and route arcs radiating from Trinidad - which is the
   actual story, since every one of these is a route Krystal flies people on.
   Geometry is Natural Earth 50m, projected at build time. No map library,
   no tiles, nothing phoning out.
   ========================================================================== */
.dest-map-wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 190px;
	gap: 14px;
	margin: 0 0 clamp(26px, 3.5vw, 40px);
	align-items: stretch;
}

.dest-map,
.dest-map-inset {
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 22% 8%, rgba(79, 179, 232, .13), transparent 62%),
		linear-gradient(165deg, #072639 0%, #051C2D 45%, #02101C 100%);
	box-shadow: inset 0 0 0 1px rgba(79, 179, 232, .18), 0 22px 48px -28px rgba(4, 22, 36, .85);
}
.dest-map svg,
.dest-map-inset svg { display: block; width: 100%; height: auto; }

/* grain, reusing the texture already defined for the dark bands */
.dest-map::after,
.dest-map-inset::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	opacity: .20;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.dm-grid line { stroke: rgba(79, 179, 232, .14); stroke-width: 1; }

.dm-land {
	fill: rgba(140, 200, 235, .07);
	stroke: rgba(142, 206, 244, .7);
	stroke-width: 1.2;
	stroke-linejoin: round;
}

/* ---- route arcs from Trinidad ------------------------------------------- */
.dm-route {
	fill: none;
	stroke: rgba(150, 212, 246, .62);
	stroke-width: 1.7;
	stroke-dasharray: 6 5;
	stroke-linecap: round;
}
.dm-pin:hover ~ .dm-routes .dm-route { opacity: .25; }
.dm-route.is-lit {
	stroke: var(--gold, #D6367C);
	stroke-width: 2;
	opacity: 1;
	animation: dm-flow 1.1s linear infinite;
}
@keyframes dm-flow { to { stroke-dashoffset: -24; } }

.dm-origin { fill: #fff; }
.dm-origin-ring { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.2; }
.dm-origin-label {
	fill: rgba(255, 255, 255, .62);
	font-family: 'Source Sans 3', system-ui, sans-serif;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .08em;
}

/* ---- pins ---------------------------------------------------------------- */
.dm-pin { cursor: pointer; }
.dm-hit { fill: transparent; }
.dm-dot {
	fill: var(--brand-magenta, #B42460);
	stroke: rgba(255, 255, 255, .92);
	stroke-width: 2;
	transition: r .22s cubic-bezier(.22,.8,.24,1), fill .22s ease;
	filter: drop-shadow(0 0 6px rgba(214, 54, 124, .85));
}
.dm-ring {
	fill: none;
	stroke: var(--brand-blue-light, #4FB3E8);
	stroke-width: 2;
	opacity: 0;
	transition: opacity .25s ease, r .25s cubic-bezier(.22,.8,.24,1);
}
.dm-pin:hover .dm-dot,
.dm-pin:focus-visible .dm-dot,
.dm-pin.is-active .dm-dot { r: 10; fill: var(--brand-blue-light, #4FB3E8); filter: drop-shadow(0 0 10px rgba(79,179,232,.95)); }
.dm-pin:hover .dm-ring,
.dm-pin:focus-visible .dm-ring,
.dm-pin.is-active .dm-ring { opacity: .8; r: 19; }
.dm-pin:focus { outline: none; }
.dm-pin:focus-visible .dm-ring { opacity: 1; stroke-width: 3; }

.dm-label { opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.dm-pin:hover .dm-label,
.dm-pin:focus-visible .dm-label,
.dm-pin.is-active .dm-label { opacity: 1; }
.dm-label rect {
	fill: rgba(6, 31, 49, .94);
	stroke: rgba(79, 179, 232, .6);
	stroke-width: 1;
	rx: 8;
}
.dm-label text {
	fill: #fff;
	font-family: 'Source Sans 3', system-ui, sans-serif;
	font-weight: 800;
	font-size: 19px;
	dominant-baseline: middle;
}

.dm-pin { transition: opacity .3s ease; }
.dm-pin.is-dimmed { opacity: .14; pointer-events: none; }

/* ---- inset --------------------------------------------------------------- */
.dest-map-inset { display: flex; flex-direction: column; }
.dm-inset-head {
	position: absolute;
	top: 11px;
	left: 12px;
	right: 12px;
	z-index: 3;
	font-size: .6rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(126, 196, 236, .75);
}
/* the box on the main map showing what the inset magnifies */
.dm-inset-box {
	fill: rgba(79, 179, 232, .06);
	stroke: rgba(126, 196, 236, .5);
	stroke-width: 1.2;
	stroke-dasharray: 4 4;
}

.dest-map-note {
	position: absolute;
	right: 13px;
	bottom: 10px;
	z-index: 3;
	font-size: .6rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(126, 196, 236, .5);
}

@media (max-width: 860px) {
	.dest-map-wrap { grid-template-columns: 1fr; }
	.dest-map-inset { display: none; }
	.dm-label text { font-size: 26px; }
	.dest-map-note { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.dm-route.is-lit { animation: none; }
	.dm-dot, .dm-ring, .dm-label, .dm-pin { transition: none; }
}

/* ==========================================================================
   DESTINATION HERO SLIDER
   Same treatment as the homepage - cross-fading imagery, drift on the active
   slide, dots underneath - but the copy layer stays put. Rotating the heading
   would mean three <h1>s on one page, so only the pictures move.
   ========================================================================== */
.dest-hero .dest-hero-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}
.dest-hero .dest-hero-media .slide {
	position: absolute;
	inset: 0;
	display: block;
	padding: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .85s ease;
}
.dest-hero .dest-hero-media .slide.is-active {
	position: absolute;      /* the homepage rule flips this to relative */
	opacity: 1;
	visibility: visible;
}
/* Works whether or not the section also carries .hero-slider, so a destination
   with a single image still gets a properly covered backdrop. */
.dest-hero .slide-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
/* .dest-hero already lays a scrim over everything; the slide's own one would
   double it up and crush the photograph. */
.dest-hero .dest-hero-media .slide-media::after { display: none; }

.dest-hero > .wrap { position: relative; z-index: 2; }
.dest-hero .slider-nav { z-index: 3; }

/* drift, matching the homepage, only when motion is wanted */
.kt-motion .dest-hero .dest-hero-media .slide.is-active .slide-media img {
	animation: kt-drift-in-soft 32s ease-out forwards;
}
.kt-motion .dest-hero .dest-hero-media .slide:nth-child(even).is-active .slide-media img {
	animation-name: kt-drift-out-soft;
}
@media (prefers-reduced-motion: reduce) {
	.dest-hero .dest-hero-media .slide { transition: none; }
	.kt-motion .dest-hero .dest-hero-media .slide.is-active .slide-media img { animation: none; }
}

/* Gentler drift for destination heroes: about a third of the homepage
   travel, and a touch slower so the smaller move does not read as faster. */
@keyframes kt-drift-in-soft {
	from { transform: scale(1.01) translate3d(0, 0, 0); }
	to   { transform: scale(1.085) translate3d(-1.2%, -0.9%, 0); }
}
@keyframes kt-drift-out-soft {
	from { transform: scale(1.085) translate3d(1.2%, 0.8%, 0); }
	to   { transform: scale(1.01) translate3d(0, 0, 0); }
}

/* ==========================================================================
   Shared hero media slider.
   Same rules as the destination hero, unscoped so the destinations archive
   (.hero) gets them too without duplicating the block.
   ========================================================================== */
.hero .dest-hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero .dest-hero-media .slide {
	position: absolute;
	inset: 0;
	display: block;
	padding: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .85s ease;
}
.hero .dest-hero-media .slide.is-active { position: absolute; opacity: 1; visibility: visible; }
.hero .slide-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.hero .dest-hero-media .slide-media::after { display: none; }
.hero > .wrap { position: relative; z-index: 2; }
.hero .slider-nav { z-index: 3; }

.kt-motion .hero .dest-hero-media .slide.is-active .slide-media img {
	animation: kt-drift-in-soft 32s ease-out forwards;
}
.kt-motion .hero .dest-hero-media .slide:nth-child(even).is-active .slide-media img {
	animation-name: kt-drift-out-soft;
}
@media (prefers-reduced-motion: reduce) {
	.hero .dest-hero-media .slide { transition: none; }
	.kt-motion .hero .dest-hero-media .slide.is-active .slide-media img { animation: none; }
}

/* ==========================================================================
   PACKAGES ARCHIVE: SORT + FILTER TOOLBAR
   ========================================================================== */
.pkg-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--line);
}
.pkg-toolbar-label {
	font-size: .66rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #8A97A2;
	margin-inline-end: 2px;
}
.pkg-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip-sm { padding: 7px 14px; font-size: .78rem; }
.chip[aria-pressed="true"] {
	background: linear-gradient(120deg, var(--brand-blue-deep), var(--brand-blue));
	border-color: transparent;
	color: #fff;
}
.chip-sale[aria-pressed="true"] {
	background: linear-gradient(120deg, var(--brand-magenta), var(--gold));
}

.pkg-sort { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.pkg-sort label {
	font-size: .66rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #8A97A2;
}
.pkg-sort select {
	appearance: none;
	padding: 8px 34px 8px 13px;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A7182' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 13px center;
	font-family: inherit;
	font-weight: 700;
	font-size: .82rem;
	color: var(--navy-deep);
	cursor: pointer;
}
.pkg-sort select:focus-visible { outline: 3px solid var(--brand-blue); outline-offset: 2px; }

.pkg-result-count {
	flex-basis: 100%;
	margin: 0;
	font-size: .8rem;
	color: #5A7182;
}
.pkg-result-count strong { color: var(--navy-deep); }

/* ---- "from" price in the accordion header ------------------------------- */
.dest-block-header .pkg-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}
.dest-block-header .pkg-from {
	font-size: .82rem;
	font-weight: 700;
	color: rgba(255, 255, 255, .85);
	white-space: nowrap;
}
.dest-block-header .pkg-from strong {
	font-family: 'Source Serif 4', Georgia, serif;
	font-weight: 600;
	font-size: 1.12rem;
	color: #fff;
	margin-inline-start: 3px;
}
@media (max-width: 620px) {
	.dest-block-header .pkg-from { display: none; }
	.pkg-sort { margin-inline-start: 0; }
}

/* a destination with nothing left after filtering drops out entirely */
.dest-block[hidden] { display: none; }
.pkg-tile[hidden]   { display: none; }

/* a filter that would empty the page is shown as unavailable, not clicked into */
.pkg-filters .chip[disabled] {
	opacity: .35;
	cursor: not-allowed;
	pointer-events: auto;
}
.pkg-filters .chip[disabled]:hover { border-color: var(--line); color: var(--navy-deep); }
.pkg-empty { padding: 8px 0 4px; }

/* ==========================================================================
   DEALS ROW
   Only packages WooCommerce holds an actual sale price for, sorted by how
   much is saved. No editorial promotion, so the saving is never invented.
   ========================================================================== */
.deals-section { padding-bottom: 0; }
.deals-grid { align-items: start; }

.deal-item { position: relative; }
.deal-save {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 4;
	padding: 6px 12px;
	border-radius: 999px;
	background: linear-gradient(120deg, var(--brand-magenta), var(--gold));
	color: #fff;
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .02em;
	white-space: nowrap;
	box-shadow: 0 8px 18px -8px rgba(180, 36, 96, .75);
	pointer-events: none;
}
/* the tile's own badges sit top-left, so the two never collide */
.deal-item .pkg-photo-badges { max-width: calc(100% - 118px); }

@media (max-width: 520px) {
	.deal-save { top: 9px; right: 9px; padding: 5px 10px; font-size: .64rem; }
}

/* ==========================================================================
   SPECIALISTS' PICKS
   Deliberately not styled as loudly as the deals row: this is a quiet human
   recommendation, not a markdown, and it should not compete with price.
   ========================================================================== */
.picks-section { padding-bottom: 0; }
.pick-item { position: relative; }
.pick-flag {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(6, 31, 49, .88);
	border: 1px solid rgba(126, 196, 236, .5);
	color: #fff;
	font-size: .66rem;
	font-weight: 800;
	letter-spacing: .03em;
	white-space: nowrap;
	backdrop-filter: blur(3px);
	pointer-events: none;
}
.pick-flag svg { color: var(--brand-blue-light); flex-shrink: 0; }
.pick-item .pkg-photo-badges { max-width: calc(100% - 132px); }

@media (max-width: 520px) {
	.pick-flag { top: 9px; right: 9px; padding: 5px 9px; font-size: .6rem; }
}

/* ==========================================================================
   COMPARE
   Pick up to three packages and see them side by side. The useful part is
   the inclusions matrix: what one has that another does not is the question
   people actually ring up to ask.
   ========================================================================== */
.cmp-toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 14px;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	background: var(--white);
	color: var(--navy-deep);
	font-family: inherit;
	font-weight: 700;
	font-size: .78rem;
	cursor: pointer;
	white-space: nowrap;
	transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.cmp-toggle:hover { border-color: var(--brand-blue); color: var(--brand-blue); }
.cmp-toggle[aria-pressed="true"] {
	background: linear-gradient(120deg, var(--brand-blue-deep), var(--brand-blue));
	border-color: transparent;
	color: #fff;
}
.cmp-toggle[disabled] { opacity: .4; cursor: not-allowed; }
.cmp-box {
	width: 15px; height: 15px;
	border: 2px solid currentColor;
	border-radius: 4px;
	flex-shrink: 0;
	position: relative;
}
.cmp-toggle[aria-pressed="true"] .cmp-box::after {
	content: "";
	position: absolute;
	left: 3px; top: 0;
	width: 5px; height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.pkg-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---- floating tray ---- */
.cmp-tray {
	position: fixed;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%) translateY(140%);
	z-index: 400;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px 12px 20px;
	border-radius: 999px;
	background: rgba(6, 31, 49, .97);
	box-shadow: 0 20px 44px -18px rgba(4, 22, 36, .9);
	color: #fff;
	transition: transform .35s cubic-bezier(.22,.8,.24,1);
	max-width: calc(100vw - 24px);
}
.cmp-tray.is-up { transform: translateX(-50%) translateY(0); }
.cmp-tray-count { font-size: .82rem; font-weight: 700; white-space: nowrap; }
.cmp-tray-count strong { color: var(--brand-blue-light); }
.cmp-tray .btn-sm { padding: 9px 18px; }
.cmp-clear {
	background: none; border: none; cursor: pointer;
	color: rgba(255,255,255,.6); font-family: inherit; font-size: .78rem; font-weight: 700;
	text-decoration: underline; padding: 4px;
}
.cmp-clear:hover { color: #fff; }

/* ---- panel ---- */
.cmp-panel[hidden] { display: none !important; }
.cmp-panel {
	position: fixed;
	inset: 0;
	z-index: 500;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: clamp(10px, 3vw, 40px);
	background: rgba(6, 31, 49, .72);
	backdrop-filter: blur(3px);
	overflow: auto;
}
.cmp-inner {
	position: relative;
	width: 100%;
	max-width: 1040px;
	background: var(--white);
	border-radius: 22px;
	padding: clamp(20px, 3vw, 32px);
	box-shadow: 0 30px 70px -30px rgba(4, 22, 36, .8);
}
.cmp-inner h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 4px; }
.cmp-sub { color: #5A7182; font-size: .9rem; margin-bottom: 20px; }
.cmp-close {
	position: absolute; top: 16px; right: 16px;
	width: 40px; height: 40px; border-radius: 50%;
	border: none; background: var(--sand-dim, #F2ECDD);
	cursor: pointer;
}
.cmp-close::before, .cmp-close::after {
	content: ""; position: absolute; top: 50%; left: 50%;
	width: 17px; height: 2.5px; margin: -1.25px 0 0 -8.5px;
	background: var(--navy-deep); border-radius: 2px;
}
.cmp-close::before { transform: rotate(45deg); }
.cmp-close::after  { transform: rotate(-45deg); }

.cmp-scroll { overflow-x: auto; }
.cmp-table { width: 100%; border-collapse: collapse; min-width: 520px; }
.cmp-table th, .cmp-table td {
	text-align: left;
	vertical-align: top;
	padding: 12px 14px;
	border-bottom: 1px solid var(--line);
	font-size: .88rem;
}
.cmp-table thead th { border-bottom: 2px solid var(--line); }
.cmp-table tbody th {
	width: 148px;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #8A97A2;
	white-space: nowrap;
}
.cmp-col-img {
	width: 100%; height: 108px; object-fit: cover;
	border-radius: 12px; display: block; margin-bottom: 10px;
}
.cmp-col-name { font-weight: 800; line-height: 1.3; color: var(--navy-deep); }
.cmp-price { font-family: 'Source Serif 4', Georgia, serif; font-weight: 700; font-size: 1.3rem; color: var(--brand-burgundy); }
.cmp-price del { display: block; font-size: .72rem; font-weight: 500; color: #A6899A; }
.cmp-yes { color: #1E7A4C; font-weight: 800; }
.cmp-no  { color: #C9CFD4; }
.cmp-row-diff { background: rgba(0, 120, 192, .045); }

@media (max-width: 620px) {
	.cmp-tray { gap: 10px; padding-left: 14px; }
	.cmp-tray-count { font-size: .74rem; }
}
@media (prefers-reduced-motion: reduce) {
	.cmp-tray { transition: none; }
}

/* WooCommerce ships `.woocommerce img { height: auto }`, which outspecifies a
   single class, so the compare thumbnails need a two-class selector to hold
   their height. cmp-col-img fix. */
.cmp-table th .cmp-col-img {
	height: 108px;
	width: 100%;
	object-fit: cover;
}
.cmp-table thead th { vertical-align: top; }
.cmp-no { color: #9AA6AF; }

/* cmp-price del fix: the struck former price is a sibling of .cmp-price. */
.cmp-table td del {
	display: block;
	font-size: .74rem;
	font-weight: 500;
	color: #A6899A;
	margin-bottom: 1px;
}
.cmp-table td small { color: #6B7E8C; font-size: .72rem; }

/* cmp sticky labels */
.cmp-table tbody th,
.cmp-table thead tr > td:first-child {
	position: sticky;
	left: 0;
	z-index: 2;
	background: var(--white);
}
.cmp-table tbody tr:nth-child(even) th { background: #FAFBFC; }
.cmp-table .cmp-row-diff th { background: #F2F7FB; }

@media (max-width: 620px) {
	.cmp-table tbody th { width: 104px; white-space: normal; }
	.cmp-table th, .cmp-table td { padding: 10px; }
}
/* cmp sticky collapse fix */
.cmp-table {
	border-collapse: separate;
	border-spacing: 0;
}
.cmp-table tbody th { box-shadow: 6px 0 10px -8px rgba(6, 31, 49, .22); }
/* ==========================================================================
   MAP ON THE PACKAGES PAGE
   Same map as the destinations archive; here it is a navigation control for
   the accordion below, so the destination block has to answer back.
   ========================================================================== */
.map-section .dest-map-wrap { margin-top: 26px; }

.dest-block.is-mapped,
.dest-block.is-targeted {
	border-color: var(--brand-blue);
	box-shadow: 0 0 0 3px rgba(0, 120, 192, .14);
}
.dest-block.is-targeted { animation: kt-dest-flash 1.8s ease-out 1; }

@keyframes kt-dest-flash {
	0%   { box-shadow: 0 0 0 3px rgba(0, 120, 192, .34); }
	100% { box-shadow: 0 0 0 3px rgba(0, 120, 192, 0); }
}

/* The map is a link target here, so the pins should read as clickable. */
[data-map-link="anchor"] .dm-pin { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
	.dest-block.is-targeted { animation: none; }
}

/* The map's pins are anchors into the accordion; the header is sticky, so the
   target needs to clear it. JS publishes the live header height. */
.dest-block { scroll-margin-top: calc(var(--kt-header-h, 96px) + 16px); }

/* reset.css hover: Hello Elementor paints every bare button pink on hover,
   so each of these has to state its own hover background, not just its
   resting one. */
.cmp-toggle:hover,
.cmp-toggle:focus {
	background: var(--white);
	border-color: var(--brand-blue);
	color: var(--brand-blue);
}
.cmp-toggle[aria-pressed="true"]:hover,
.cmp-toggle[aria-pressed="true"]:focus {
	background: linear-gradient(120deg, var(--brand-blue-deep), var(--brand-blue));
	border-color: transparent;
	color: #fff;
}
.cmp-clear:hover,
.cmp-clear:focus {
	background: none;
	color: #fff;
}
.cmp-close:hover,
.cmp-close:focus {
	background: var(--sand-dim, #E7DFCC);
}

/* Book and Compare share the row; matching their heights stops the pair
   looking ragged when the booking label wraps to two lines. */
.pkg-foot { align-items: stretch; }
.pkg-foot .btn { flex: 1 1 auto; }
.pkg-foot .cmp-toggle { flex: 0 0 auto; justify-content: center; }

/* ==========================================================================
   PAGE HEADER + COMMERCE
   Cart, Checkout, My Account, Terms and Privacy render through the fallback
   page template. WooCommerce's own block and account markup arrives with its
   default look, so it is brought onto the site's type, colour and spacing
   here rather than by overriding a dozen templates.
   ========================================================================== */
.page-head {
	background: linear-gradient(120deg, var(--brand-blue-deep, #063F63), var(--brand-blue, #0078C0));
	color: #fff;
	padding: clamp(40px, 7vw, 74px) 0 clamp(34px, 6vw, 58px);
}
.page-head .eyebrow { color: rgba(255, 255, 255, .74); }
.page-head h1 {
	color: #fff;
	margin: 8px 0 0;
	font-size: clamp(1.9rem, 4vw, 2.9rem);
	line-height: 1.12;
}
.page-body { padding-top: clamp(32px, 5vw, 56px); }
.page-body > .wrap > h2:first-child { margin-top: 0; }

/* Woo prints its own page title inside the content on some screens. */
.page-body .wc-block-components-title.wc-block-cart__empty-cart__title,
.page-body .wp-block-woocommerce-cart h1:first-child { margin-top: 0; }

/* ---- buttons: Woo's blocks default to black ---- */
.wc-block-components-button:not(.is-link),
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	background: linear-gradient(120deg, var(--brand-blue-deep, #063F63), var(--brand-blue, #0078C0));
	color: #fff;
	border: none;
	border-radius: 999px;
	font-family: inherit;
	font-weight: 700;
	letter-spacing: .01em;
	padding: 14px 26px;
	line-height: 1.2;
	transition: filter .2s ease, transform .2s ease;
}
.wc-block-components-button:not(.is-link):hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: linear-gradient(120deg, var(--brand-blue-deep, #063F63), var(--brand-blue, #0078C0));
	color: #fff;
	filter: brightness(1.08);
}
.wc-block-components-button:not(.is-link):disabled { opacity: .5; }

/* The place-order button is the one that matters most. */
.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button {
	background: linear-gradient(120deg, var(--brand-burgundy-deep, #7A1038), var(--brand-burgundy, #A4164C));
	padding: 16px 30px;
	font-size: 1rem;
}

/* ---- cart + checkout blocks ---- */
.wc-block-components-product-name { font-weight: 700; color: var(--navy-deep, #0B2B40); }
.wc-block-components-product-name:hover { color: var(--brand-blue, #0078C0); }
.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
	border-radius: 10px;
}
.wc-block-components-totals-item__value,
.wc-block-components-order-summary-item__total-price { font-weight: 700; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: 'Source Serif 4', Georgia, serif;
	color: var(--brand-burgundy, #A4164C);
}
.wc-block-components-sidebar,
.wc-block-components-order-summary {
	background: var(--white, #fff);
	border: 1px solid var(--line, #E3E8EC);
	border-radius: 16px;
	padding: 20px;
}
.wc-block-components-text-input input,
.wc-block-components-select select,
.wc-block-components-textarea {
	border-radius: 10px;
	font-family: inherit;
}

/* ---- My Account ---- */
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.woocommerce-MyAccount-navigation ul li a {
	display: inline-block;
	padding: 10px 18px;
	border: 1.5px solid var(--line, #E3E8EC);
	border-radius: 999px;
	background: var(--white, #fff);
	color: var(--navy-deep, #0B2B40);
	font-weight: 700;
	font-size: .86rem;
	text-decoration: none;
	transition: border-color .2s ease, color .2s ease;
}
.woocommerce-MyAccount-navigation ul li a:hover {
	border-color: var(--brand-blue, #0078C0);
	color: var(--brand-blue, #0078C0);
}
.woocommerce-MyAccount-navigation ul li.is-active a {
	background: linear-gradient(120deg, var(--brand-blue-deep, #063F63), var(--brand-blue, #0078C0));
	border-color: transparent;
	color: #fff;
}
.woocommerce-MyAccount-content { min-height: 180px; }
.woocommerce-MyAccount-content p { max-width: 68ch; }

/* ---- account forms ---- */
.woocommerce form.woocommerce-form-login,
.woocommerce form.woocommerce-form-register,
.woocommerce-EditAccountForm,
.woocommerce-address-fields {
	background: var(--white, #fff);
	border: 1px solid var(--line, #E3E8EC);
	border-radius: 16px;
	padding: clamp(20px, 3vw, 30px);
	max-width: 560px;
}
.woocommerce form .form-row { margin-bottom: 16px; }
.woocommerce form .form-row label { font-weight: 700; font-size: .86rem; margin-bottom: 6px; display: block; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	width: 100%;
	padding: 12px 14px;
	border: 1.5px solid var(--line, #E3E8EC);
	border-radius: 10px;
	font-family: inherit;
	font-size: .95rem;
	background: var(--white, #fff);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	outline: none;
	border-color: var(--brand-blue, #0078C0);
	box-shadow: 0 0 0 3px rgba(0, 120, 192, .14);
}
.woocommerce-form-login__rememberme { font-weight: 500; }

/* The two columns on the logged-out account page read better side by side. */
@media (min-width: 860px) {
	.woocommerce-account:not(.logged-in) .page-body .u-columns.col2-set {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 24px;
		align-items: start;
	}
	.woocommerce-account:not(.logged-in) .page-body .u-columns.col2-set .col-1,
	.woocommerce-account:not(.logged-in) .page-body .u-columns.col2-set .col-2 { width: auto; float: none; }
}

/* ---- orders table ---- */
.woocommerce table.woocommerce-orders-table,
.woocommerce table.shop_table {
	border: 1px solid var(--line, #E3E8EC);
	border-radius: 14px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	width: 100%;
}
.woocommerce table.shop_table th {
	background: var(--sand, #F7F3EA);
	font-size: .72rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #6B7E8C;
	padding: 12px 14px;
	text-align: left;
}
.woocommerce table.shop_table td { padding: 14px; border-top: 1px solid var(--line, #E3E8EC); }

/* ---- notices ---- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-radius: 12px;
	border: 1px solid var(--line, #E3E8EC);
	border-top: 3px solid var(--brand-blue, #0078C0);
	background: var(--white, #fff);
	padding: 14px 18px;
	margin-bottom: 20px;
	list-style: none;
}
.woocommerce-error { border-top-color: var(--brand-burgundy, #A4164C); }

/* ---- order received ---- */
.woocommerce-order .woocommerce-thankyou-order-received {
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 1.35rem;
	color: var(--navy-deep, #0B2B40);
}
.woocommerce ul.order_details {
	list-style: none;
	padding: 20px;
	margin: 0 0 24px;
	background: var(--white, #fff);
	border: 1px solid var(--line, #E3E8EC);
	border-radius: 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
}
.woocommerce ul.order_details li {
	font-size: .72rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #6B7E8C;
	border: none;
	padding: 0;
	margin: 0;
}
.woocommerce ul.order_details li strong {
	display: block;
	margin-top: 4px;
	font-size: 1rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--navy-deep, #0B2B40);
}

/* alignwide fix: Woo's cart and checkout blocks carry alignwide, and its
   negative margin pulls them outside the page wrap. */
.page-body .alignwide,
.page-body .alignfull {
	max-width: 100%;
	width: auto;
	margin-left: 0;
	margin-right: 0;
}

/* WooCommerce notices region. Nothing in the theme printed notices, so
   every confirmation and every error was invisible. */
.kt-notices { padding: 22px 0 0; }
.kt-notices .woocommerce-message,
.kt-notices .woocommerce-info,
.kt-notices .woocommerce-error { margin-bottom: 0; }
.woocommerce-message .button,
.woocommerce-info .button {
	float: right;
	margin-left: 16px;
	padding: 8px 18px;
	font-size: .82rem;
}


/* ==========================================================================
   ABOUT: PHOTO BEHIND THE CLOSING BAND
   .final-cta already brings position:relative, overflow:hidden and an
   ::after scrim, so the photo drops in underneath both. The stock scrim
   (.1 -> .55 alpha) was mixed against a flat navy gradient and is far too
   light to carry white text over a real photograph, so .has-photo deepens
   it. The band's own striped background stays as the paint behind the
   image while it decodes.
   ========================================================================== */
.final-cta .cta-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
}
.final-cta.has-photo::after {
	background:
		linear-gradient(180deg, rgba(8, 44, 63, .66), rgba(8, 44, 63, .8)),
		linear-gradient(115deg, rgba(8, 44, 63, .4), rgba(8, 44, 63, 0) 62%);
}


/* ==========================================================================
   MAP: DESTINATIONS WITH NO PACKAGES YET
   These pin on the packages map but link out to their own page instead of
   anchoring, so they must not read as a bookable stop on the itinerary:
   hollow dot, no magenta glow. The anchor script needs no guard - it already
   bails when there is no #dest- block to open, leaving native navigation.
   ========================================================================== */
.dm-pin-soon .dm-dot {
	fill: rgba(8, 44, 63, .55);
	stroke: rgba(255, 255, 255, .8);
	stroke-width: 2;
	filter: none;
}
.dm-pin-soon:hover .dm-dot,
.dm-pin-soon:focus-visible .dm-dot,
.dm-pin-soon.is-active .dm-dot {
	fill: var(--brand-blue-light, #4FB3E8);
	filter: drop-shadow(0 0 8px rgba(79, 179, 232, .8));
}
.dm-pin-soon .dm-label rect { stroke: rgba(255, 255, 255, .34); }


/* ==========================================================================
   CONTACT: PHOTOGRAPHY
   .find-us already carries position:relative, overflow:hidden and an ::after
   scrim, so a photo drops in underneath exactly as on .final-cta. This band
   holds white text AND two white cards, so the scrim has to go heavier than
   the About one or the cards stop reading as raised.
   .loc-photo img is already styled further up this file; what it lacked was a
   scrim strong enough to hold the office name over a real photograph, and the
   building glyph is a placeholder affordance that the template now drops once
   a photo exists.
   ========================================================================== */
.find-us .findus-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
}
.find-us.has-photo::after {
	background:
		linear-gradient(180deg, rgba(8, 44, 63, .72), rgba(8, 44, 63, .86)),
		linear-gradient(115deg, rgba(8, 44, 63, .45), rgba(8, 44, 63, 0) 60%);
}

/* A 110px strip crops a real photograph to almost nothing. Raised for both
   cards, not just the one with a picture, so the two bodies stay aligned. */
.locations-grid .loc-photo { height: 150px; }
.locations-grid .loc-photo.has-photo::after {
	background: linear-gradient(180deg,
		rgba(0, 0, 0, .18) 0%,
		rgba(0, 0, 0, .28) 42%,
		rgba(0, 0, 0, .74) 100%);
}


/* ==========================================================================
   ABOUT: STORY PANEL SPACING
   .story-quote follows .story-grid inside the same .wrap and carried no
   margin of its own, so the dark panel's top edge sat flush against the
   credentials strip - measured at exactly 0px. Picks up the same rhythm
   the credentials row already uses above it (34px + 28px).
   ========================================================================== */
.story-quote { margin-top: clamp(28px, 4vw, 44px); }


/* ==========================================================================
   FOOTER: BUILD CREDIT
   .footer-bottom is a two-child space-between row (copyright left, legal
   links right). The credit is grouped with the copyright rather than added
   as a third child, which would have pushed it into the centre.
   ========================================================================== */
.footer-bottom .footer-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 14px;
}
.footer-bottom .site-credit { opacity: .68; }


/* ==========================================================================
   DESTINATION: EXPLORE SECTION WITH NO PHOTOGRAPHY
   .explore-grid is a two-column layout: photo mosaic beside the tabbed
   list. A destination whose attractions have not been shot yet has no
   mosaic to show, so it runs as a single column rather than leaving an
   empty half.
   ========================================================================== */
.explore-grid-solo { grid-template-columns: 1fr; }