/* ==========================================================================
   Imahodophile – travel packages
   1. Brand tokens
   2. Package cards grid  ([packages] shortcode + /packages/ archive)
   3. Archive page        (/packages/)
   4. Trip page           (/packages/<trip>/)  – matches imagiadventure-desktop/phone.html
   5. Info page           (Page template "Info page") – reuses the trip page styles
   6. Contact page        (Page template "Contact page")

   Mobile-first: base styles = phone design; @media (min-width: 1024px) = desktop design.
   Everything is prefixed "tp-" so Elementor/Hello global styles don't clash.
   ========================================================================== */

/* 1. Brand tokens ---------------------------------------------------------- */
:root {
	--tp-ground: #FFFFFF;
	--tp-navy: #14161C;
	--tp-body: #2B2F36;
	--tp-muted: #6B7280;
	--tp-script: #2F6690;
	--tp-btn: #4A80B8;
	--tp-gold: #2F6690;
	--tp-heart: #EBB24B;
	--tp-peach: #EEF1F4;
	--tp-band: #F7E9DC;
	--tp-line: #E5E7EB;
	--tp-shadow-soft: 0 8px 24px rgba(15, 22, 38, .08);

	--tp-font-body: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
	--tp-font-serif: "Playfair Display", "Noto Serif Display", Georgia, serif;
	--tp-font-script: "Caveat", "Mynerve", cursive; /* Mynerve: Greek letters only */
}

/* 2. Package cards grid ---------------------------------------------------- */
.tp-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	font-family: var(--tp-font-body);
}
@media (min-width: 640px) {
	.tp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.tp-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

.tp-card {
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--tp-shadow-soft);
	transition: transform .2s ease, box-shadow .2s ease;
}
.tp-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 32px rgba(15, 22, 38, .12);
}
.tp-card .tp-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}
.tp-card__media {
	aspect-ratio: 4 / 3;
	background: linear-gradient(150deg, var(--tp-btn), var(--tp-navy));
	overflow: hidden;
}
.tp-card .tp-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.tp-card__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 18px 20px;
	flex: 1;
}
.tp-card .tp-card__destination {
	margin: 0;
	font-family: var(--tp-font-script);
	font-size: 20px;
	font-weight: 600;
	color: var(--tp-script);
	line-height: 1.1;
}
.tp-card .tp-card__title {
	margin: 0;
	font-family: var(--tp-font-serif);
	font-size: 22px;
	font-weight: 900;
	line-height: 1.15;
	color: var(--tp-navy);
}
.tp-card .tp-card__duration {
	margin: 2px 0 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tp-btn);
}
.tp-card .tp-card__price {
	margin: auto 0 0;
	padding-top: 12px;
	font-size: 14px;
	color: var(--tp-muted);
}
.tp-card__price strong {
	font-size: 19px;
	color: var(--tp-navy);
}
/* Home page cards: [packages featured="true" layout="featured"] – matches the Home design */
.tp-grid.tp-grid--featured { grid-template-columns: 1fr; gap: 24px; }
.tp-grid--featured .tp-card { border-radius: 20px; box-shadow: 0 10px 30px rgba(15, 22, 38, .08); }
.tp-grid--featured .tp-card__media { aspect-ratio: auto; height: 220px; }
.tp-grid--featured .tp-card__body { gap: 0; padding: 20px 22px; }
.tp-grid--featured .tp-card .tp-card__title { font-size: 22px; font-weight: 800; }
.tp-grid--featured .tp-card .tp-card__meta {
	margin: 6px 0 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--tp-script);
}
@media (min-width: 1025px) {
	.tp-grid.tp-grid--featured { grid-template-columns: repeat(2, 1fr); }
	.tp-grid--featured .tp-card__media { height: 260px; }
}

.tp-empty {
	font-family: var(--tp-font-body);
	color: var(--tp-muted);
}

/* 3. Archive page ---------------------------------------------------------- */
.tp-archive {
	max-width: 1440px;
	margin: 0 auto;
	padding: 32px 18px 56px;
	font-family: var(--tp-font-body);
}
.tp-archive .tp-archive__title {
	margin: 0 0 24px;
	font-family: var(--tp-font-serif);
	font-size: 36px;
	font-weight: 900;
	letter-spacing: -.015em;
	color: var(--tp-navy);
}
.tp-archive .navigation { margin-top: 32px; }
.tp-archive .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-archive .page-numbers {
	padding: 8px 14px;
	border-radius: 999px;
	color: var(--tp-muted);
	text-decoration: none;
	box-shadow: 0 1px 3px rgba(15, 22, 38, .1);
}
.tp-archive .page-numbers.current { background: var(--tp-btn); color: #fff; }
@media (min-width: 1024px) {
	.tp-archive { padding: 48px 44px 72px; }
	.tp-archive .tp-archive__title { font-size: 48px; }
}
/* /packages/ page numbers (trip-filters.js): ‹ 1 2 3 › */
.tp-pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 32px;
	font-family: var(--tp-font-body);
}
.tp-pager[hidden] { display: none; }
.tp-pager .tp-pager__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--tp-line);
	border-radius: 999px;
	background: #fff;
	color: var(--tp-navy);
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}
.tp-pager .tp-pager__btn:hover:not(.is-disabled),
.tp-pager .tp-pager__btn:focus-visible { border-color: var(--tp-btn); background: #F4F8FC; color: var(--tp-navy); }
.tp-pager .tp-pager__btn.is-current { border-color: var(--tp-btn); background: var(--tp-btn); color: #fff; }
.tp-pager .tp-pager__btn.is-disabled { opacity: .35; cursor: default; }
.tp-pager .tp-pager__btn:not(.is-current):first-child,
.tp-pager .tp-pager__btn:not(.is-current):last-child { font-size: 22px; }

/* /packages/ cards: the trip photo is always 3:4 (portrait, e.g. 1200 × 1600 px) on phones, tablets and
   computers, so one photo size suits every screen. The card is the photo plus its text underneath.
   Phones: 1 per row (scroll down for the next trip); tablets: 2 per row; computers: 3 per row. */
.tp-archive .tp-card__media { aspect-ratio: 3 / 4; }
@media (max-width: 1023px) {
	.tp-archive .tp-grid { grid-template-columns: 1fr; gap: 18px; }
	.tp-archive .tp-card { border-radius: 20px; }
	.tp-archive .tp-card__body { padding: 16px 20px 20px; }
	.tp-archive .tp-card .tp-card__title { font-size: 24px; }
	.tp-archive .tp-card__price strong { font-size: 21px; }
}

/* 4. Trip page ============================================================= */
.tp-trip {
	position: relative;
	overflow: hidden;
	max-width: 1440px;
	margin: 0 auto;
	background: var(--tp-ground);
	color: var(--tp-body);
	font-family: var(--tp-font-body);
	line-height: normal; /* Hello's reset sets 1.5; the design uses the browser default. */
	-webkit-font-smoothing: antialiased;
}
.tp-trip *,
.tp-trip *::before,
.tp-trip *::after { box-sizing: border-box; }

/* Undo Hello's heading reset (line-height 1.2, weight 500) inside the trip page. */
.tp-trip h1,
.tp-trip h2,
.tp-trip h3,
.tp-trip h4,
.tp-trip h5 { line-height: normal; font-weight: 700; }

.tp-trip .tp-icon { display: inline-block; flex: 0 0 auto; }

/* Decorative background: palms + dashed flight path */
.tp-decor { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tp-decor svg { position: absolute; display: block; }
.tp-palm { color: #C8DCEE; }
.tp-palm--left { left: -70px; top: 150px; width: 200px; opacity: .4; }
.tp-palm--right { right: -78px; top: 600px; width: 210px; opacity: .35; }
.tp-flightpath { display: none !important; }
@media (min-width: 1024px) {
	.tp-palm--left { left: -48px; top: 70px; width: 330px; opacity: .5; }
	.tp-palm--right { right: -60px; top: 40px; width: 380px; opacity: .45; }
	.tp-flightpath { display: block !important; left: 14px; top: 640px; width: 270px; opacity: .75; }
}

/* ---- Hero ---------------------------------------------------------------- */
.tp-hero {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	padding: 26px 18px 0;
}
@media (min-width: 1024px) {
	.tp-hero {
		display: grid;
		grid-template-columns: minmax(0, 60fr) minmax(0, 37fr);
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"head side"
			"body side";
		column-gap: 58px;
		padding: 44px 44px 34px;
		align-items: start;
	}
	.tp-hero__head { grid-area: head; }
	.tp-hero__side { grid-area: side; }
	.tp-hero__body { grid-area: body; }
}

.tp-trip .tp-eyebrow {
	margin: 0;
	font-family: var(--tp-font-script);
	font-size: 22px;
	font-weight: 600;
	color: var(--tp-script);
}
.tp-trip .tp-title {
	position: relative;
	margin: 6px 0 0;
	font-family: var(--tp-font-serif);
	font-size: 44px;
	font-weight: 900;
	line-height: .98;
	letter-spacing: -.022em;
	color: var(--tp-navy);
	text-wrap: balance;
}
/* The hand-drawn swoosh under the title (always centred: see "Title underline" at the end of this file).
   Phone: "Los Angeles" / "Las Vegas", swoosh under the second line. */
.tp-trip .tp-title { padding-bottom: .25em; }
.tp-title__dash--start { display: none; }
.tp-title__swoosh {
	position: relative;
	display: inline-block;
}
.tp-title__swoosh::after {
	content: "";
	position: absolute;
	top: calc(100% - .1em);
	left: 0;
	width: 186px;
	max-width: 100%;
	height: .38em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 290 26' preserveAspectRatio='none'%3E%3Cpath d='M4 17C70 5 196 3 286 13' stroke='%23E2A33C' stroke-width='7' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.tp-trip .tp-subtitle {
	margin: 10px 0 0;
	font-family: var(--tp-font-script);
	font-size: 27px;
	font-weight: 600;
	color: var(--tp-script);
}
@media (min-width: 1024px) {
	.tp-trip .tp-eyebrow { font-size: 27px; }
	.tp-trip .tp-title { font-size: 78px; }
	.tp-trip .tp-title { padding-bottom: .26em; }
	.tp-title__dash--end { display: none; }
	.tp-title__dash--start { display: inline; }
	/* Design: swoosh starts just past the middle of the line and runs beyond its end
	   (for "– Las Vegas": 290px wide, starting 212px in). Percentages keep it right for any title. */
	.tp-title__swoosh::after { top: calc(100% - 6px); left: 53%; width: 73%; max-width: none; height: 26px; }
	.tp-trip .tp-subtitle { font-size: 38px; }
}

/* Date pill */
.tp-datewrap { margin-top: 18px; }
.tp-datepill {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 12px 22px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 8px 26px rgba(15, 22, 38, .13);
}
.tp-datepill__icon { color: var(--tp-btn); }
.tp-datepill__txt b {
	display: block;
	font-size: 19px;
	font-weight: 700;
	color: var(--tp-navy);
	font-variant-numeric: tabular-nums;
	letter-spacing: .01em;
}
.tp-datepill__txt i {
	display: block;
	margin-top: 1px;
	font-style: normal;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--tp-btn);
}
@media (min-width: 1024px) {
	.tp-datewrap {
		position: relative;
		z-index: 4;
		display: flex;
		justify-content: flex-end;
		margin: 0 0 -26px;
	}
	.tp-datepill { display: inline-flex; width: auto; }
}

/* Hero photo (plain Featured Image) */
.tp-photo {
	position: relative;
	height: 400px;
	margin-top: 14px;
	border-radius: 18px;
	overflow: hidden;
	background: #0B1B3A;
	box-shadow: 0 18px 44px rgba(15, 22, 38, .24);
}
.tp-trip .tp-photo__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
@media (min-width: 1024px) {
	.tp-photo { height: 660px; margin-top: 0; }
}

/* Call-to-action pill (hero, closing band, booking popup) */
.tp-trip .tp-cta {
	display: block;
	margin-top: 16px;
	padding: 14px 18px;
	border-radius: 999px;
	background: var(--tp-btn);
	color: #fff;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 12px 28px rgba(61, 124, 178, .34);
	transition: filter .15s ease;
}
.tp-trip .tp-cta:hover,
.tp-trip .tp-cta:focus { color: #fff; filter: brightness(1.06); }
.tp-cta b { display: block; font-size: 19px; font-weight: 700; }
.tp-cta i {
	display: block;
	margin-top: 3px;
	font-style: normal;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	opacity: .88;
}
@media (min-width: 1024px) {
	.tp-trip .tp-cta { margin-top: 22px; padding: 16px 20px; }
	.tp-cta b { font-size: 23px; }
	.tp-cta i { font-size: 11.5px; }
}

/* Intro copy + peach callout */
.tp-copy {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin-top: 20px;
}
.tp-trip .tp-copy p { margin: 0; font-size: 15.5px; line-height: 1.62; }
.tp-callout {
	position: relative;
	display: flex;
	margin: 24px 0 0;
}
/* Phones: the band sticks out 45px on the right, so keep the callout 45px narrower than the screen. */
@media (max-width: 1023px) {
	.tp-callout { max-width: calc(100% - 45px); }
}
.tp-callout__band {
	position: absolute;
	top: 2px;
	bottom: 2px;
	left: -5px;
	right: -45px;
	z-index: 0;
	background: var(--tp-band);
	border-radius: 34% 66% 40% 60% / 58% 44% 56% 42%;
}
.tp-callout__lines {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	gap: 12px;
	padding: 10px 6px;
	font-family: var(--tp-font-script);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.24;
	color: var(--tp-navy);
}
.tp-callout__lines span { display: block; }
.tp-callout__heart { color: var(--tp-heart); }
@media (min-width: 1024px) {
	.tp-copy { gap: 19px; margin-top: 26px; max-width: 66ch; }
	.tp-trip .tp-copy p { font-size: 16.5px; }
	.tp-callout {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 385px;
		min-height: 101px;
		margin: 34px 0 0 -5px;
	}
	.tp-callout__band { left: 0; right: 0; }
	.tp-callout__lines { align-items: center; padding: 12px 8px; font-size: 31px; }
}

/* ---- Perks row ------------------------------------------------------------ */
.tp-perks {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px 8px;
	margin: 0 18px;
	padding: 22px 0 24px;
	border-top: 1px solid var(--tp-line);
}
.tp-perk {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	color: var(--tp-navy);
}
.tp-perk .tp-icon { width: 24px; height: 24px; }
@media (min-width: 1024px) {
	.tp-perk .tp-icon { width: 27px; height: 27px; }
}
.tp-trip .tp-perk p {
	margin: 0;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	line-height: 1.5;
	text-align: center;
	text-transform: uppercase;
	color: var(--tp-navy);
}
@media (min-width: 1024px) {
	.tp-perks { grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0 44px; padding: 26px 0 30px; }
	.tp-perk + .tp-perk { border-left: 1px solid var(--tp-line); }
	.tp-trip .tp-perk p { font-size: 11px; }
}

/* ---- Sections ------------------------------------------------------------- */
.tp-section {
	position: relative;
	z-index: 2;
	margin: 0 18px;
	padding: 30px 0;
	border-top: 1px solid var(--tp-line);
}
.tp-trip .tp-section__eyebrow {
	margin: 0;
	font-family: var(--tp-font-script);
	font-size: 19px;
	font-weight: 600;
	color: var(--tp-script);
}
.tp-trip .tp-section__title {
	margin: 2px 0 0;
	font-family: var(--tp-font-serif);
	font-size: 27px;
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -.015em;
	color: var(--tp-navy);
}
.tp-trip .tp-note { margin: 16px 0 1em; font-size: 12.5px; line-height: 1.6; color: var(--tp-muted); }
.tp-card-box { background: #fff; border-radius: 16px; box-shadow: var(--tp-shadow-soft); padding: 18px; }
@media (min-width: 1024px) {
	.tp-section { margin: 0 44px; padding: 40px 0; }
	.tp-section__head { max-width: 640px; }
	.tp-trip .tp-section__eyebrow { font-size: 22px; }
	.tp-trip .tp-section__title { font-size: 38px; }
	.tp-trip .tp-note { font-size: 13.5px; }
	.tp-card-box { padding: 22px; }
}

/* ---- Highlights carousel -------------------------------------------------- */
.tp-hl-track { overflow-x: auto; margin-top: 24px; padding-bottom: 4px; scroll-snap-type: x mandatory; }
.tp-hl-track.is-scrolling { overflow: hidden; scroll-snap-type: none; }
.tp-hl-track__inner { display: flex; width: max-content; }
.tp-hl-track.is-scrolling .tp-hl-track__inner { animation: tp-hl-scroll 26s linear infinite; }
.tp-hl-track.is-scrolling:hover .tp-hl-track__inner { animation-play-state: paused; }
.tp-hl-dup { display: contents; }
@keyframes tp-hl-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
.tp-trip .tp-hl-slide {
	display: block;
	flex: 0 0 auto;
	width: 140px;
	margin-right: 12px;
	overflow: hidden;
	border-radius: 16px;
	background: #fff;
	box-shadow: var(--tp-shadow-soft);
	text-decoration: none;
	scroll-snap-align: start;
}
.tp-hl-img { position: relative; display: block; height: 100px; overflow: hidden; }
.tp-trip .tp-hl-img img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.tp-hl-cap { display: block; padding: 10px 12px; font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--tp-navy); }
@media (min-width: 1024px) {
	.tp-trip .tp-hl-slide { width: 320px; margin-right: 24px; }
	.tp-hl-track.is-scrolling .tp-hl-track__inner { animation-duration: 34s; }
	.tp-hl-img { height: 190px; }
	.tp-hl-cap { padding: 14px 16px; font-size: 15px; }
}
/* Colour fallbacks for highlights without a photo */
.tp-hl-g1 { background: linear-gradient(150deg, #F9D3A4, #E88B6B); }
.tp-hl-g2 { background: linear-gradient(150deg, #4A80B8, #14161C); }
.tp-hl-g3 { background: linear-gradient(150deg, #FDE6C4, #8A5A88); }
.tp-hl-g4 { background: linear-gradient(150deg, #EEF1F4, #2F6690); }
.tp-hl-g5 { background: linear-gradient(150deg, #20407C, #080F26); }
.tp-hl-g6 { background: linear-gradient(150deg, #2F6690, #4A80B8); }
.tp-hl-g7 { background: linear-gradient(150deg, #6B7280, #14161C); }

/* ---- Popups (highlights + booking): CSS only, opened with #id links ------- */
.tp-modal { display: none; position: fixed; inset: 0; z-index: 9990; }
.tp-modal:target { display: block; }
.tp-trip .tp-modal__backdrop { position: absolute; inset: 0; display: block; background: rgba(15, 22, 38, .55); }
.tp-trip .tp-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 2px 8px rgba(15, 22, 38, .2);
	color: var(--tp-navy);
	font-size: 20px;
	line-height: 1;
	text-decoration: none;
}
.tp-hl-modal__card {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 48px);
	max-width: 360px;
	overflow: hidden;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 30px 60px rgba(15, 22, 38, .35);
}
.tp-hl-modal__card .tp-hl-img { height: 180px; }
.tp-trip .tp-hl-modal__card h3 { margin: 18px 20px 0; font-family: var(--tp-font-body); font-size: 19px; font-weight: 700; color: var(--tp-navy); }
.tp-trip .tp-hl-modal__card p { margin: 8px 20px 20px; font-size: 14px; line-height: 1.6; color: var(--tp-muted); }

/* ---- Day by Day accordion ------------------------------------------------- */
.tp-acc { margin-top: 28px; border-top: 1px solid var(--tp-line); }
.tp-acc details { border-bottom: 1px solid var(--tp-line); }
.tp-acc summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 15px 2px;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--tp-navy);
	cursor: pointer;
	list-style: none;
}
.tp-acc summary::-webkit-details-marker { display: none; }
.tp-acc summary > span:first-of-type { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.tp-acc__daytag { font-family: var(--tp-font-script); font-size: 16px; font-weight: 700; color: var(--tp-script); }
.tp-acc__plus {
	position: relative;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border: 1.5px solid var(--tp-line);
	border-radius: 50%;
}
.tp-acc__plus::before,
.tp-acc__plus::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--tp-btn);
}
.tp-acc__plus::before { width: 10px; height: 1.6px; }
.tp-acc__plus::after { width: 1.6px; height: 10px; }
.tp-acc details[open] .tp-acc__plus::after { display: none; }
.tp-acc__body { padding: 0 2px 16px; font-size: 14px; line-height: 1.65; color: var(--tp-muted); }
.tp-trip .tp-acc__body p { margin: 0 0 10px; }
.tp-trip .tp-acc__body p:last-child { margin-bottom: 0; }
.tp-trip .tp-acc__body ul { margin: 6px 0 10px; padding-left: 18px; }
.tp-trip .tp-acc__body li { margin-bottom: 6px; }
@media (min-width: 1024px) {
	.tp-acc summary { padding: 18px 2px; font-size: 16px; }
	.tp-acc__daytag { font-size: 19px; }
	.tp-acc__body { max-width: 78ch; padding-bottom: 20px; font-size: 15px; }
}

/* ---- City tabs (pricing + flights): CSS only, radio buttons --------------- */
.tp-tabs { margin-top: 24px; }
.tp-trip .tp-tabs > input { position: absolute; opacity: 0; pointer-events: none; }
.tp-trip .tp-tabs > label {
	display: inline-block;
	margin: 0 8px 8px 0;
	padding: 10px 20px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(15, 22, 38, .1);
	font-size: 13.5px;
	font-weight: 700;
	line-height: normal; /* Hello's reset gives labels line-height: 1. */
	vertical-align: baseline;
	color: var(--tp-muted);
	cursor: pointer;
}
.tp-trip .tp-tabs > input:checked + label { background: var(--tp-btn); color: #fff; }
.tp-trip .tp-tabs > input:focus-visible + label { outline: 2px solid var(--tp-btn); outline-offset: 2px; }
.tp-tabs__panel { display: none; }
/* The Nth radio shows the Nth panel (up to 8 departure cities). */
.tp-tabs > input:nth-of-type(1):checked ~ .tp-tabs__panel:nth-of-type(1),
.tp-tabs > input:nth-of-type(2):checked ~ .tp-tabs__panel:nth-of-type(2),
.tp-tabs > input:nth-of-type(3):checked ~ .tp-tabs__panel:nth-of-type(3),
.tp-tabs > input:nth-of-type(4):checked ~ .tp-tabs__panel:nth-of-type(4),
.tp-tabs > input:nth-of-type(5):checked ~ .tp-tabs__panel:nth-of-type(5),
.tp-tabs > input:nth-of-type(6):checked ~ .tp-tabs__panel:nth-of-type(6),
.tp-tabs > input:nth-of-type(7):checked ~ .tp-tabs__panel:nth-of-type(7),
.tp-tabs > input:nth-of-type(8):checked ~ .tp-tabs__panel:nth-of-type(8) { display: block; }

/* ---- Pricing -------------------------------------------------------------- */
.tp-trip .tp-ptable { width: 100%; margin: 18px 0 0; border: 0; border-collapse: collapse; }
.tp-trip .tp-ptable th,
.tp-trip .tp-ptable td {
	padding: 10px 6px;
	border: 0;
	border-bottom: 1px solid var(--tp-line);
	background: none;
	font-size: 13px;
	text-align: left;
}
.tp-trip .tp-ptable th { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tp-muted); }
.tp-ptable td b { color: var(--tp-navy); }
@media (min-width: 1024px) {
	.tp-trip .tp-ptable th,
	.tp-trip .tp-ptable td { padding: 12px 10px; font-size: 14.5px; }
	.tp-trip .tp-ptable th { font-size: 11px; }
}

/* Payment notes (from Trip Page Settings): h4 = heading, h5 = script sub-heading */
.tp-paynotes { margin-top: 24px; }
.tp-trip .tp-paynotes h4 { margin: 20px 0 6px; line-height: 1.6; font-family: var(--tp-font-body); font-size: 15px; font-weight: 700; color: var(--tp-navy); }
.tp-trip .tp-paynotes h4:first-child { margin-top: 0; }
.tp-trip .tp-paynotes h5 { margin: 14px 0 2px; line-height: 1.6; font-family: var(--tp-font-script); font-size: 19px; font-weight: 700; color: var(--tp-script); }
.tp-trip .tp-paynotes p { margin: 0 0 4px; font-size: 13.5px; line-height: 1.6; color: var(--tp-muted); }
@media (min-width: 1024px) {
	.tp-trip .tp-paynotes h4 { font-size: 16.5px; }
	.tp-trip .tp-paynotes h5 { font-size: 22px; }
	.tp-trip .tp-paynotes p { font-size: 14.5px; }
}

/* ---- Flights + baggage ---------------------------------------------------- */
.tp-flightgrid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 26px; }
.tp-fcard__lbl { display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tp-script); }
.tp-fseg {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
	padding: 9px 0;
	border-top: 1px solid var(--tp-line);
	font-size: 12.5px;
}
.tp-fcard__lbl + .tp-fseg { padding-top: 12px; border-top: 0; }
.tp-fseg__route { font-weight: 700; color: var(--tp-navy); }
.tp-fseg__arrow { font-weight: 700; color: var(--tp-gold); }
.tp-fseg__meta { color: var(--tp-muted); }
.tp-bagrow { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 26px; }
.tp-bag { display: flex; align-items: center; gap: 12px; }
.tp-bag .tp-ic { color: var(--tp-script); }
.tp-bag b { display: block; font-size: 14px; color: var(--tp-navy); }
.tp-bag span span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--tp-muted); }
@media (min-width: 700px) {
	.tp-flightgrid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
	.tp-flightgrid { gap: 24px; }
	.tp-fcard__lbl { font-size: 11px; }
	.tp-fseg { font-size: 13.5px; }
	.tp-bagrow { gap: 28px; }
}
/* Phones: the baggage items side by side in one row, each centred with a bigger icon above its text. */
@media (max-width: 767px) {
	.tp-bagrow { flex-wrap: nowrap; justify-content: space-around; gap: 10px; }
	.tp-bag { flex: 1 1 0; flex-direction: column; gap: 8px; min-width: 0; text-align: center; }
	.tp-bag .tp-ic { width: 30px; height: 30px; }
	.tp-bag b { font-size: 13.5px; }
}

/* ---- Hotels + optional activities ----------------------------------------- */
.tp-cardgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
	margin-top: 26px;
}
.tp-hcard__stars { font-size: 13px; letter-spacing: 2px; color: var(--tp-gold); }
.tp-trip .tp-hcard h3,
.tp-trip .tp-ocard h3 { margin: 8px 0 0; font-family: var(--tp-font-body); font-size: 16px; font-weight: 700; color: var(--tp-navy); }
.tp-hcard__meta { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--tp-script); }
.tp-ocard__top { display: flex; align-items: center; justify-content: space-between; }
.tp-ocard__meta { font-size: 12.5px; font-weight: 700; color: var(--tp-script); }
.tp-ocard__price { font-weight: 700; color: var(--tp-btn); }
.tp-trip .tp-hcard p,
.tp-trip .tp-ocard p { margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--tp-muted); }
@media (min-width: 1024px) {
	.tp-cardgrid { gap: 20px; }
}

/* Important notes under the activities (from Trip Page Settings) */
.tp-actnotes {
	margin-top: 22px;
	padding: 18px 20px;
	border-radius: 14px;
	background: var(--tp-peach);
}
.tp-trip .tp-actnotes h4 { margin: 0 0 10px; font-family: var(--tp-font-body); font-size: 15px; font-weight: 700; color: var(--tp-navy); }
.tp-trip .tp-actnotes ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tp-trip .tp-actnotes li,
.tp-trip .tp-actnotes p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--tp-muted); }
.tp-actnotes strong { color: var(--tp-navy); }
@media (min-width: 1024px) {
	.tp-actnotes { padding: 20px 24px; }
	.tp-trip .tp-actnotes h4 { font-size: 16.5px; }
	.tp-trip .tp-actnotes li,
	.tp-trip .tp-actnotes p { font-size: 14.5px; }
}

/* ---- Must Have / Good to Know -------------------------------------------- */
.tp-trip .tp-ilist { display: flex; flex-direction: column; gap: 14px; margin: 24px 0 0; padding: 0; list-style: none; }
.tp-trip .tp-ilist li { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--tp-body); }
.tp-ilist .tp-ic { margin-top: 1px; color: var(--tp-script); }
@media (min-width: 1024px) {
	.tp-trip .tp-ilist li { font-size: 14.5px; }
}

/* ---- Closing CTA ------------------------------------------------------------- */
.tp-trip .tp-cta-band .tp-cta { max-width: 420px; margin: 0 auto; }

/* ---- Booking popup -------------------------------------------------------- */
.tp-bk-modal { z-index: 9995; }
.tp-bk-modal .tp-modal__backdrop { background: rgba(15, 22, 38, .6); }
.tp-bk-card {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 32px);
	max-width: 520px;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	padding: 30px 22px;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 30px 60px rgba(15, 22, 38, .35);
}
.tp-trip .tp-bk-title { margin: 0 28px 18px 0; font-family: var(--tp-font-serif); font-size: 24px; font-weight: 900; color: var(--tp-navy); }
.tp-bk-total { margin-bottom: 22px; padding: 16px; border-radius: 14px; background: var(--tp-peach); text-align: center; }
.tp-bk-total__lbl { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tp-muted); }
.tp-bk-total__amt { display: block; margin-top: 2px; font-family: var(--tp-font-serif); font-size: 34px; font-weight: 900; color: var(--tp-navy); }
.tp-trip .tp-bk-h { margin: 20px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tp-muted); }
.tp-bk-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-trip .tp-bk-pills input { position: absolute; opacity: 0; pointer-events: none; }
.tp-trip .tp-bk-pills label {
	padding: 9px 16px;
	border: 1px solid var(--tp-line);
	border-radius: 999px;
	background: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: normal;
	color: var(--tp-muted);
	cursor: pointer;
}
.tp-trip .tp-bk-pills input:checked + label { border-color: var(--tp-btn); background: var(--tp-btn); color: #fff; }
.tp-bk-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 0;
	border-top: 1px solid var(--tp-line);
}
.tp-bk-row:first-child { border-top: 0; }
.tp-bk-row__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tp-bk-row__info b { font-size: 14.5px; color: var(--tp-navy); }
.tp-bk-row__info span { font-size: 12.5px; color: var(--tp-muted); }
.tp-bk-stepper { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; }
.tp-trip .tp-bk-step {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid var(--tp-line);
	border-radius: 50%;
	background: #fff;
	font-family: inherit;
	font-size: 16px;
	line-height: 1;
	color: var(--tp-navy);
	cursor: pointer;
}
.tp-trip .tp-bk-step:hover,
.tp-trip .tp-bk-step:focus { border-color: var(--tp-btn); background: var(--tp-btn); color: #fff; }
.tp-bk-step-val { min-width: 16px; font-size: 14.5px; font-weight: 700; text-align: center; color: var(--tp-navy); }
.tp-bk-traveler { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--tp-line); }
.tp-bk-traveler:first-child { margin-top: 14px; padding-top: 0; border-top: 0; }
.tp-trip .tp-bk-traveler__h { margin: 0 0 10px; font-size: 12.5px; font-weight: 700; color: var(--tp-navy); }
.tp-bk-traveler__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tp-bk-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tp-bk-field--full { grid-column: 1 / -1; }
.tp-bk-field > span { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tp-muted); }
.tp-trip .tp-bk-field input,
.tp-trip .tp-bk-field select {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--tp-line);
	border-radius: 10px;
	background: #fff;
	font-family: inherit;
	font-size: 13.5px;
	color: var(--tp-body);
}
.tp-trip .tp-bk-field input:focus,
.tp-trip .tp-bk-field select:focus { outline: 2px solid var(--tp-btn); outline-offset: 1px; }
.tp-bk-phone { display: flex; gap: 8px; }
.tp-trip .tp-bk-phone select { flex: 0 0 auto; width: auto; max-width: 132px; }
.tp-trip .tp-bk-phone input { flex: 1; min-width: 0; }
.tp-trip .tp-bk-empty { margin: 14px 0 0; font-size: 13px; color: var(--tp-muted); }
.tp-bk-cta { margin-top: 26px; }
@media (min-width: 1024px) {
	.tp-bk-card { width: calc(100% - 48px); padding: 30px 26px; }
}

/* ---- Order summary (full-screen) ----------------------------------------- */
html.tp-no-scroll { overflow: hidden; }
.tp-checkout { display: none; position: fixed; inset: 0; z-index: 9999; overflow-y: auto; background: var(--tp-ground); }
.tp-checkout.is-active { display: block; }
.tp-checkout__inner { max-width: 640px; margin: 0 auto; padding: 32px 24px 60px; }
.tp-checkout__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.tp-checkout__brand { font-family: var(--tp-font-script); font-size: 26px; font-weight: 700; color: var(--tp-navy); }
.tp-trip .tp-checkout__back { font-size: 13.5px; font-weight: 700; white-space: nowrap; text-decoration: none; color: var(--tp-btn); }
.tp-trip .tp-checkout__title { margin: 0; font-family: var(--tp-font-serif); font-size: 32px; font-weight: 900; color: var(--tp-navy); }
.tp-trip .tp-checkout__sub { margin: 6px 0 0; font-size: 14px; color: var(--tp-muted); }
.tp-checkout__block { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--tp-line); }
.tp-trip .tp-checkout__block h3 { margin: 0 0 10px; font-family: var(--tp-font-body); font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tp-muted); }
.tp-trip .tp-co-line { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 6px 0; font-size: 14px; color: var(--tp-body); }
.tp-co-line b { text-align: right; color: var(--tp-navy); }
.tp-trip .tp-co-empty { margin: 0; font-size: 13px; color: var(--tp-muted); }
.tp-trip .tp-co-flight-leg { margin: 10px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tp-script); }
.tp-trip .tp-co-flight-leg:first-child { margin-top: 0; }
.tp-checkout__total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 26px;
	padding: 18px 20px;
	border-radius: 14px;
	background: var(--tp-peach);
}
.tp-checkout__amt { font-family: var(--tp-font-serif); font-size: 28px; font-weight: 900; color: var(--tp-navy); }
.tp-trip .tp-checkout .tp-cta { margin-top: 26px; }

/* ---- Order summary: payment options + confirmation ------------------------ */
.tp-pay__options { display: flex; flex-direction: column; gap: 10px; }
.tp-trip .tp-pay__option {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 18px;
	border: 1.5px solid var(--tp-line);
	border-radius: 14px;
	background: #fff;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}
.tp-trip .tp-pay__option:hover { border-color: var(--tp-btn); }
.tp-trip .tp-pay__option input { position: absolute; opacity: 0; pointer-events: none; }
.tp-pay__radio {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border: 2px solid var(--tp-line);
	border-radius: 50%;
	background: #fff;
}
.tp-trip .tp-pay__option:has(input:checked) { border-color: var(--tp-btn); background: #F4F8FC; }
.tp-pay__option input:checked + .tp-pay__radio { border: 6px solid var(--tp-btn); }
.tp-pay__option input:focus-visible + .tp-pay__radio { outline: 2px solid var(--tp-btn); outline-offset: 2px; }
.tp-pay__text { display: flex; flex-direction: column; gap: 3px; }
.tp-pay__text b { font-size: 15.5px; color: var(--tp-navy); }
.tp-pay__text span { font-size: 13px; line-height: 1.45; color: var(--tp-muted); }
.tp-trip .tp-pay__option.is-disabled { cursor: not-allowed; opacity: .55; }
.tp-pay__amounts { margin: 2px 0 4px 34px; }
.tp-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.tp-trip .tp-co-error {
	margin: 18px 0 0;
	padding: 12px 16px;
	border-radius: 10px;
	background: #FDECEC;
	color: #A12C2C;
	font-size: 14px;
	font-weight: 600;
}
.tp-trip .tp-bk-field .is-invalid { border-color: #D14343; background: #FFF7F7; }
.tp-trip button.tp-cta--button {
	width: 100%;
	border: 0;
	font-family: inherit;
	cursor: pointer;
}
.tp-trip button.tp-cta--button:disabled { opacity: .7; cursor: wait; }
.tp-trip .tp-confirmed p { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--tp-body); }
.tp-trip .tp-confirmed .tp-confirmed__ref { margin-top: 14px; font-size: 16px; }
.tp-trip .tp-confirmed .tp-confirmed__small,
.tp-trip .tp-confirmed .tp-confirmed__note { font-size: 13.5px; color: var(--tp-muted); }
.tp-trip .tp-confirmed__note { padding: 14px 16px; border-radius: 12px; background: var(--tp-peach); }

/* Bank transfer: amount + reference box, copy buttons */
.tp-trip .tp-confirmed .tp-confirmed__lead { margin-top: 8px; font-size: 16.5px; font-weight: 600; color: var(--tp-navy); }
.tp-confirmed__key {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 18px;
	padding: 20px 22px;
	border: 1.5px solid var(--tp-btn);
	border-radius: 16px;
	background: #F4F8FC;
}
.tp-confirmed__key-row { display: flex; flex-direction: column; gap: 4px; }
.tp-trip .tp-confirmed__hint { font-size: 12.5px; color: var(--tp-muted); }
.tp-copyval { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 10px; }
.tp-confirmed__key .tp-copyval { justify-content: flex-start; }
.tp-copyval__value { font-weight: 700; color: var(--tp-navy); }
.tp-copyval--big .tp-copyval__value { font-family: var(--tp-font-serif); font-size: 30px; font-weight: 900; letter-spacing: .01em; }
.tp-copyval--mono .tp-copyval__value,
.tp-trip b.tp-copyval--mono { font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace; letter-spacing: .04em; }
.tp-copyval--big.tp-copyval--mono .tp-copyval__value { font-size: 24px; font-weight: 700; }
.tp-trip .tp-copyval__btn {
	padding: 5px 12px;
	border: 1px solid var(--tp-btn);
	border-radius: 999px;
	background: #fff;
	font-family: var(--tp-font-body);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--tp-btn);
	cursor: pointer;
}
.tp-trip .tp-copyval__btn:hover,
.tp-trip .tp-copyval__btn:focus { background: var(--tp-btn); color: #fff; }
.tp-trip .tp-copyval__btn.is-copied { border-color: #2E7D4F; background: #2E7D4F; color: #fff; }
.tp-trip .tp-confirmed .tp-cta { margin-top: 22px; }
.tp-trip .tp-confirmed__more {
	display: block;
	margin-top: 16px;
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	color: var(--tp-btn);
}
.tp-trip .tp-confirmed__more b { font-weight: 700; }

/* Trip recap under the title */
.tp-trip .tp-confirmed .tp-confirmed__recap {
	margin-top: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--tp-script);
}

/* What happens next: numbered steps */
.tp-trip .tp-next__steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}
.tp-trip .tp-next__steps li {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--tp-body);
}
.tp-next__num {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--tp-peach);
	font-family: var(--tp-font-script);
	font-size: 19px;
	font-weight: 700;
	color: var(--tp-btn);
}
@media (min-width: 640px) {
	.tp-trip .tp-next__steps { grid-template-columns: repeat(2, 1fr); gap: 12px 20px; }
}

/* Save / print button (secondary, outlined) */
.tp-trip .tp-confirmed__print {
	display: block;
	width: 100%;
	margin-top: 14px;
	padding: 12px 18px;
	border: 1.5px solid var(--tp-line);
	border-radius: 999px;
	background: #fff;
	font-family: var(--tp-font-body);
	font-size: 14px;
	font-weight: 700;
	color: var(--tp-navy);
	cursor: pointer;
}
.tp-trip .tp-confirmed__print:hover,
.tp-trip .tp-confirmed__print:focus { border-color: var(--tp-btn); color: var(--tp-btn); background: #fff; }

/* Printing / saving as PDF after a booking: only the confirmation, on one page, no buttons.
   Everything else is removed from the layout (display: none), so no blank pages follow. */
@media print {
	/* No page margin = browsers don't add their own date / title / URL / page number. */
	@page { margin: 0; }
	html.tp-has-confirmation,
	html.tp-has-confirmation body { height: auto !important; overflow: visible !important; background: #fff !important; }
	html.tp-has-confirmation body > *:not(main),
	html.tp-has-confirmation main.tp-trip > *:not(.tp-checkout),
	html.tp-has-confirmation .tp-checkout > *:not(#tp-confirmed) { display: none !important; }
	html.tp-has-confirmation main.tp-trip { max-width: none; margin: 0; overflow: visible; }
	html.tp-has-confirmation .tp-checkout { position: static; display: block; overflow: visible; }
	html.tp-has-confirmation #tp-confirmed { max-width: none; margin: 0; padding: 14mm 16mm; }
	/* Hello's print style writes each link's address after it, e.g. "(https://…)": not here. */
	html.tp-has-confirmation a[href]::after { content: none !important; }
	html.tp-has-confirmation #tp-confirmed .tp-cta,
	html.tp-has-confirmation #tp-confirmed .tp-copyval__btn,
	html.tp-has-confirmation #tp-confirmed .tp-confirmed__print,
	html.tp-has-confirmation #tp-confirmed .tp-confirmed__more { display: none !important; }
	html.tp-has-confirmation .tp-confirmed__key,
	html.tp-has-confirmation .tp-checkout__block { break-inside: avoid; }
	/* Keep the light backgrounds (amount box, note) when printing. */
	html.tp-has-confirmation #tp-confirmed * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* 5. Info page ============================================================== */

/* Hero: title + intro, with the "On this page" card beside it on desktop */
.tp-info-hero {
	position: relative;
	z-index: 2;
	padding: 26px 18px 30px;
}
.tp-info-toc {
	margin-top: 26px;
	padding: 20px 22px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 8px 26px rgba(15, 22, 38, .13);
}
.tp-trip .tp-info-toc__label {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tp-btn);
}
.tp-trip .tp-info-toc ul { margin: 0; padding: 0; list-style: none; }
.tp-trip .tp-info-toc li { margin: 0; border-top: 1px solid var(--tp-line); }
.tp-trip .tp-info-toc li:first-child { border-top: 0; }
.tp-trip .tp-info-toc a {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--tp-navy);
	text-decoration: none;
}
.tp-trip .tp-info-toc a span { color: var(--tp-btn); }
.tp-trip .tp-info-toc a:hover { color: var(--tp-btn); }
@media (min-width: 1024px) {
	.tp-info-hero {
		display: grid;
		grid-template-columns: minmax(0, 60fr) minmax(0, 37fr);
		column-gap: 58px;
		align-items: start;
		padding: 44px 44px 40px;
	}
	.tp-info-toc { margin-top: 44px; padding: 22px 26px; }
}

/* Anchor links land below the top edge, not glued to it */
.tp-info .tp-section { scroll-margin-top: 24px; }

/* How it works: numbered steps */
.tp-trip .tp-steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}
.tp-trip .tp-step { margin: 0; }
.tp-step__num {
	display: block;
	font-family: var(--tp-font-script);
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	color: var(--tp-btn);
}
.tp-trip .tp-step h3 { margin: 8px 0 0; font-family: var(--tp-font-body); font-size: 16px; color: var(--tp-navy); }
.tp-trip .tp-step p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--tp-muted); }
@media (min-width: 640px) {
	.tp-trip .tp-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.tp-trip .tp-steps { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
}

/* Travel info: topic cards with an icon */
.tp-topic__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--tp-peach);
	color: var(--tp-script);
}
.tp-trip .tp-topic h3 { margin: 14px 0 0; font-family: var(--tp-font-body); font-size: 16px; color: var(--tp-navy); }
.tp-topic__text { margin-top: 8px; font-size: 13.5px; line-height: 1.55; color: var(--tp-muted); }
.tp-trip .tp-topic__text p { margin: 0 0 8px; }
.tp-trip .tp-topic__text p:last-child { margin-bottom: 0; }
.tp-trip .tp-topic__text ul { margin: 6px 0 0; padding-left: 18px; }
.tp-trip .tp-topic__text li { margin-bottom: 4px; }
.tp-topic__text strong { color: var(--tp-navy); }

/* Contact box */
.tp-info-contact {
	padding: 30px 22px;
	border-radius: 20px;
	background: var(--tp-peach);
	text-align: center;
}
.tp-trip .tp-info-contact p { max-width: 52ch; margin: 10px auto 0; font-size: 14.5px; line-height: 1.6; color: var(--tp-muted); }
.tp-trip .tp-info-contact .tp-cta { max-width: 420px; margin: 20px auto 0; }
@media (min-width: 1024px) {
	.tp-info-contact { padding: 40px; }
	.tp-trip .tp-info-contact p { font-size: 16px; }
}

/* 6. Contact page =========================================================== */
.tp-contact__hero {
	position: relative;
	z-index: 2;
	padding: 26px 18px 10px;
}
.tp-trip .tp-contact__intro {
	max-width: 60ch;
	margin: 18px 0 0;
	font-size: 15.5px;
	line-height: 1.62;
}
.tp-contact__cards {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin: 0 18px;
	padding: 20px 0 40px;
}
.tp-trip .tp-contact__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 24px 22px;
	color: var(--tp-navy);
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease;
}
.tp-trip .tp-contact__card:hover,
.tp-trip .tp-contact__card:focus {
	transform: translateY(-3px);
	box-shadow: 0 14px 32px rgba(15, 22, 38, .12);
	color: var(--tp-navy);
}
.tp-contact__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 8px;
	border-radius: 50%;
	background: var(--tp-peach);
	color: var(--tp-script);
}
.tp-contact__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tp-btn);
}
.tp-contact__value {
	font-size: 20px;
	font-weight: 700;
	overflow-wrap: anywhere;
	color: var(--tp-navy);
}
@media (min-width: 640px) {
	.tp-contact__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; }
}
@media (min-width: 1024px) {
	.tp-contact__hero { padding: 44px 44px 16px; }
	.tp-trip .tp-contact__intro { font-size: 16.5px; }
	.tp-contact__cards { gap: 20px; margin: 0 44px; padding: 24px 0 56px; }
	.tp-trip .tp-contact__card { padding: 30px 28px; }
	.tp-contact__value { font-size: 23px; }
}

/* ---- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.tp-hl-track.is-scrolling { overflow-x: auto; scroll-snap-type: x mandatory; }
	.tp-hl-track.is-scrolling .tp-hl-track__inner { animation: none; }
	.tp-hl-dup { display: none; }
	.tp-card,
	.tp-trip .tp-cta { transition: none; }
}

/* Order summary: section heading with an "Edit" link (Contact person, Travellers) */
.tp-checkout__block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.tp-trip .tp-checkout__block-head h3 { margin: 0; }
.tp-trip .tp-co-edit { font-size: 13px; font-weight: 700; color: var(--tp-btn); text-decoration: none; }
.tp-trip .tp-co-edit:hover,
.tp-trip .tp-co-edit:focus { text-decoration: underline; color: var(--tp-btn); }
.tp-trip #tp-co-contact .tp-co-line b { max-width: 65%; overflow-wrap: anywhere; }

/* Page 2 of the printout: full booking details (copy of the Order Summary). Only shown when printing. */
.tp-print-details { display: none; }
@media print {
	html.tp-has-confirmation .tp-print-details { display: block; break-before: page; page-break-before: always; padding-top: 14mm; }
	html.tp-has-confirmation .tp-print-details .tp-co-flight-leg { margin: 10px 0 4px; font-size: 11px; color: var(--tp-script); }
	html.tp-has-confirmation .tp-print-details .tp-co-empty,
	html.tp-has-confirmation .tp-print-details .tp-checkout__sub { font-size: 13px; }
	html.tp-has-confirmation .tp-print-details .tp-checkout__title { font-size: 26px; }
	html.tp-has-confirmation .tp-print-details .tp-checkout__block { margin-top: 16px; padding-top: 12px; }
	html.tp-has-confirmation .tp-print-details .tp-co-line { padding: 3px 0; font-size: 13px; }
}

/* Home page Featured Trips with 3+ trips: auto-scrolling carousel (like the trip Highlights).
   Cards are sized from the carousel's own width: 2 per view on desktop, 1 + a peek on phones. */
.tp-feat-carousel {
	container-type: inline-size;
	overflow: hidden;
	padding: 6px 0 34px; /* Room for the card shadows. */
	font-family: var(--tp-font-body);
}
.tp-feat-carousel__track {
	display: flex;
	width: max-content;
	animation: tp-feat-scroll 30s linear infinite; /* Duration is set per number of trips. */
}
.tp-feat-carousel:hover .tp-feat-carousel__track,
.tp-feat-carousel:focus-within .tp-feat-carousel__track { animation-play-state: paused; }
.tp-feat-carousel__dup { display: contents; }
@keyframes tp-feat-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
.tp-feat-carousel .tp-card {
	flex: 0 0 auto;
	width: 85vw; /* Older browsers */
	width: 85cqw;
	margin-right: 24px;
	border-radius: 20px;
	box-shadow: 0 10px 30px rgba(15, 22, 38, .08);
}
.tp-feat-carousel .tp-card__media { aspect-ratio: auto; height: 220px; }
.tp-feat-carousel .tp-card__body { gap: 0; padding: 20px 22px; }
.tp-feat-carousel .tp-card .tp-card__title { font-size: 22px; font-weight: 800; }
.tp-feat-carousel .tp-card .tp-card__meta { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: var(--tp-script); }
@media (min-width: 1025px) {
	.tp-feat-carousel .tp-card { width: calc((100cqw - 24px) / 2); }
	.tp-feat-carousel .tp-card__media { height: 260px; }
}
/* No animation for visitors who turn it off: a swipe / scroll row instead. */
@media (prefers-reduced-motion: reduce) {
	.tp-feat-carousel { overflow-x: auto; scroll-snap-type: x mandatory; }
	.tp-feat-carousel__track { animation: none; }
	.tp-feat-carousel__dup { display: none; }
	.tp-feat-carousel .tp-card { scroll-snap-align: start; }
}

/* Carousels run by site-menu.js (.is-live): the script scrolls them, so people can swipe / drag them
   too. No CSS animation, no scrollbar, no snapping (it would fight the slow scrolling). */
.tp-hl-track.is-scrolling.is-live,
.tp-feat-carousel.is-live {
	overflow-x: auto;
	scroll-snap-type: none;
	scrollbar-width: none;
	cursor: grab;
	-webkit-overflow-scrolling: touch;
}
.tp-hl-track.is-live::-webkit-scrollbar,
.tp-feat-carousel.is-live::-webkit-scrollbar { display: none; }
.tp-hl-track.is-live .tp-hl-track__inner,
.tp-feat-carousel.is-live .tp-feat-carousel__track { animation: none; }
.tp-hl-track.is-live .tp-hl-slide,
.tp-feat-carousel.is-live .tp-card { scroll-snap-align: none; }
.tp-hl-track.is-dragging,
.tp-feat-carousel.is-dragging { cursor: grabbing; user-select: none; }
.tp-hl-track.is-dragging a,
.tp-feat-carousel.is-dragging a { pointer-events: none; }

/* Trip cards: label on the photo ("Sold out" / "New") and dates */
.tp-card__media { position: relative; }
.tp-card__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 1;
	padding: 6px 12px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 4px 14px rgba(15, 22, 38, .18);
	font-family: var(--tp-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--tp-navy);
}
.tp-card__badge--new { background: var(--tp-btn); color: #fff; }
.tp-card__badge--soldout { background: var(--tp-navy); color: #fff; }
.tp-card.is-soldout .tp-card__image { filter: grayscale(.6); opacity: .85; }
.tp-card .tp-card__dates {
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--tp-muted);
	font-variant-numeric: tabular-nums;
}

/* [next_departures]: slim strip of the next trips (e.g. under the Home hero) */
.tp-nextdep {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	padding: 14px 18px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 8px 26px rgba(15, 22, 38, .10);
	font-family: var(--tp-font-body);
}
.tp-nextdep__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tp-muted);
}
.tp-nextdep ul { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0; padding: 0; list-style: none; }
.tp-nextdep li { margin: 0; }
.tp-nextdep a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid var(--tp-line);
	border-radius: 999px;
	font-size: 14px;
	color: var(--tp-navy);
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease;
}
.tp-nextdep a:hover,
.tp-nextdep a:focus { border-color: var(--tp-btn); background: #F4F8FC; color: var(--tp-navy); }
.tp-nextdep b { font-weight: 700; }
.tp-nextdep__date { color: var(--tp-muted); font-variant-numeric: tabular-nums; }
.tp-nextdep__badge { font-size: 12px; font-weight: 700; color: var(--tp-btn); }
.tp-nextdep__badge--soldout { color: var(--tp-muted); }
.tp-nextdep__badge--new { color: var(--tp-btn); }
.tp-nextdep__arrow { color: var(--tp-btn); font-weight: 700; }

/* Trip cards: gentle photo zoom + "View trip →" on hover */
.tp-card[hidden] { display: none !important; }
.tp-card__media { overflow: hidden; }
.tp-card__image { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.tp-card__link::after {
	content: attr(data-view);
	position: absolute;
	right: 20px;
	bottom: 18px;
	font-family: var(--tp-font-body);
	font-size: 13px;
	font-weight: 700;
	color: var(--tp-btn);
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity .25s ease, transform .25s ease;
}
.tp-card__link { position: relative; }
@media (hover: hover) {
	.tp-card:hover .tp-card__image { transform: scale(1.05); }
	.tp-card:hover .tp-card__link::after { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.tp-card__image, .tp-card__link::after { transition: none; }
	.tp-card:hover .tp-card__image { transform: none; }
}

/* /packages/ Where / When filter pills */
.tp-filters { display: grid; gap: 12px; margin: 0 0 28px; font-family: var(--tp-font-body); }
.tp-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tp-filter__label {
	min-width: 56px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tp-muted);
}
.tp-filter__pill {
	padding: 8px 16px;
	border: 1px solid var(--tp-line);
	border-radius: 999px;
	background: #fff;
	color: var(--tp-navy);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.tp-filter__pill:hover,
.tp-filter__pill:focus { border-color: var(--tp-btn); background: #F4F8FC; color: var(--tp-navy); }
.tp-filter__pill[aria-pressed="true"] { border-color: var(--tp-btn); background: var(--tp-btn); color: #fff; }
.tp-filters__none { margin: 0 0 28px; color: var(--tp-muted); font-family: var(--tp-font-body); }
/* Phones: each group scrolls sideways instead of wrapping onto many lines. */
@media (max-width: 767px) {
	.tp-filter { flex-wrap: nowrap; overflow-x: auto; padding: 2px 0; scrollbar-width: none; }
	.tp-filter::-webkit-scrollbar { display: none; }
	.tp-filter__pill, .tp-filter__label { flex: 0 0 auto; }
}

/* /packages/ When dropdown (month + year), next to the search box; same look as the search box. */
.tp-filters--when { margin: 0; }
.tp-filter--select { flex-wrap: nowrap; gap: 12px; margin: 0; }
.tp-filter--select .tp-filter__label { min-width: 0; }
.tp-filter__select {
	min-width: 210px;
	padding: 10px 42px 10px 18px;
	border: 1px solid var(--tp-line);
	border-radius: 999px;
	background: #fff 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 1.5 6 6.5l5-5' fill='none' stroke='%234A80B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center;
	color: var(--tp-navy);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}
.tp-filter__select:hover { border-color: var(--tp-btn); }
.tp-filter__select:focus { border-color: var(--tp-btn); outline: 3px solid rgba(74, 128, 184, .2); outline-offset: 0; }
.tp-archive .tp-map-top { justify-content: flex-start; margin-bottom: 28px; }
@media (max-width: 767px) {
	/* Phones: the dropdown fills its line under the search box. */
	.tp-filters--when { flex: 1 1 100%; }
	.tp-filter--select { overflow: visible; }
	.tp-filter--select .tp-filter__select { flex: 1 1 auto; min-width: 0; }
}
/* Home "Why travel with us": [trip_perks] */
.tp-perks-home { font-family: var(--tp-font-body); }
.tp-perks-home .tp-perks { margin: 0; padding: 0; border: 0; gap: 14px; }
.tp-perks-home .tp-perk {
	gap: 14px;
	padding: 24px 14px;
	border: 0 !important;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(15, 22, 38, .08);
}
.tp-perks-home .tp-perk .tp-icon {
	box-sizing: content-box;
	width: 26px;
	height: 26px;
	padding: 14px;
	border-radius: 50%;
	background: #EEF4FA;
	color: var(--tp-btn);
}
.tp-perks-home .tp-perk p {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
	color: var(--tp-navy);
}
@media (min-width: 1024px) {
	.tp-perks-home .tp-perks { gap: 20px; }
	.tp-perks-home .tp-perk { padding: 30px 18px; }
	.tp-perks-home .tp-perk p { font-size: 16px; }
}

/* [trip_signup]: "Get first dibs on new trips" */
.tp-signup { display: flex; flex-wrap: wrap; gap: 10px; max-width: 520px; margin: 0 auto; font-family: var(--tp-font-body); }
.tp-signup .tp-signup__email {
	flex: 1 1 240px;
	min-width: 0;
	padding: 14px 20px;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 999px;
	background: #fff;
	color: var(--tp-navy);
	font: inherit;
	font-size: 16px;
}
.tp-signup .tp-signup__email:focus { outline: 3px solid rgba(255, 255, 255, .55); outline-offset: 1px; }
.tp-signup .tp-signup__btn {
	flex: 0 0 auto;
	padding: 14px 26px;
	border: 0;
	border-radius: 999px;
	background: var(--tp-navy);
	color: #fff;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}
.tp-signup__btn:hover,
.tp-signup__btn:focus { background: #000; color: #fff; }
.tp-signup__btn[disabled] { opacity: .6; cursor: default; }
.tp-signup__msg { flex: 1 1 100%; margin: 2px 0 0; min-height: 1.4em; color: #fff; font-size: 15px; font-weight: 600; text-align: center; }
.tp-signup__msg.is-error { color: #FFE1D6; }
.tp-signup.is-done .tp-signup__email,
.tp-signup.is-done .tp-signup__btn { display: none; }
.tp-signup.is-done .tp-signup__msg { font-size: 17px; }
@media (max-width: 480px) {
	.tp-signup__btn { flex: 1 1 100%; }
}

/* [trips_map] (Home): dotted world (assets/img/map-*.svg) + a pin per continent, then per trip */
.tp-map {
	position: relative;
	margin: 0 0 30px;
	padding: 18px 10px;
	border-radius: 20px;
	font-family: var(--tp-font-body);
}
.tp-map__inner { position: relative; margin: 0 auto; } /* Exactly the map's size: pins are placed in % of it. */
.tp-map__world { display: block; width: 100%; height: auto; }
.tp-map__pin {
	position: absolute;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: -7px; /* Centres the dot (not the label) on the spot. */
	transform: translateY(-50%);
	color: var(--tp-navy);
	text-decoration: none;
}
.tp-map__pin.is-left { flex-direction: row-reverse; margin-left: 7px; transform: translate(-100%, -50%); }
.tp-map__pin:hover,
.tp-map__pin:focus-visible { z-index: 2; color: var(--tp-navy); }
.tp-map__dot {
	position: relative;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--tp-btn);
	box-shadow: 0 2px 8px rgba(15, 22, 38, .3);
}
.tp-map__dot::after {
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	background: var(--tp-btn);
	opacity: .5;
	animation: tp-map-pulse 2.4s ease-out infinite;
	animation-delay: var(--tp-delay, 0s);
}
@keyframes tp-map-pulse {
	0% { transform: scale(1); opacity: .5; }
	100% { transform: scale(3.2); opacity: 0; }
}
.tp-map__label {
	display: flex;
	flex-direction: column;
	padding: 6px 12px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 6px 18px rgba(15, 22, 38, .14);
	white-space: nowrap;
	line-height: 1.25;
	transition: box-shadow .15s ease;
}
.tp-map__label b { font-size: 14px; font-weight: 700; }
.tp-map__label small {
	display: none;
	margin-top: 2px;
	font-size: 12px;
	font-weight: 600;
	color: var(--tp-muted);
	font-variant-numeric: tabular-nums;
}
.tp-map__pin:hover .tp-map__label,
.tp-map__pin:focus-visible .tp-map__label { box-shadow: 0 0 0 2px var(--tp-btn), 0 8px 22px rgba(15, 22, 38, .18); }
.tp-map__pin:hover .tp-map__label small,
.tp-map__pin:focus-visible .tp-map__label small { display: block; }
/* Every screen: the world map shows a blue pin + name per continent that has trips (instead of the
   trips themselves); pressing one opens that continent's map with the trips named, and
   "← All continents" goes back. (.tp-map--continents: trips on 2+ continents; with one continent
   the world map simply shows the trips.) Sizes: phones first, then tablets and computers. */
.tp-map { --tp-pin: 26px; background: #EEF4FA; }
.tp-map__world { filter: brightness(.82) saturate(1.3); } /* Dots a little stronger, as in the design. */
.tp-map--continents [data-view="world"] .tp-map__pin,
.tp-map--continents [data-view="world"] .tp-map__routes { display: none; }
.tp-map__continent {
	position: absolute;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--tp-navy);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.15;
	transform: translate(calc(var(--tp-pin) / -2), -50%); /* The pin (not the name) sits on the spot. */
	cursor: pointer;
}
.tp-map__continent:hover,
.tp-map__continent:focus { background: none; color: var(--tp-btn); }
.tp-map__continent[hidden] { display: none; }
.tp-map__continent b { max-width: 70px; font-weight: 600; text-align: left; white-space: normal; }
/* Americas: the name on the left of the pin. */
.tp-map__continent.is-west { flex-direction: row-reverse; transform: translate(calc(-100% + var(--tp-pin) / 2), -50%); }
.tp-map__continent.is-west b { text-align: right; }
.tp-map__marker {
	position: relative;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: var(--tp-pin);
	height: var(--tp-pin);
	color: #1F5FA8;
}
.tp-map__marker::before { /* Soft glow behind the pin. */
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: calc(var(--tp-pin) * 2.5);
	height: calc(var(--tp-pin) * 2.5);
	margin: calc(var(--tp-pin) * -1.25) 0 0 calc(var(--tp-pin) * -1.25);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(74, 128, 184, .26) 0, rgba(74, 128, 184, .12) 45%, rgba(74, 128, 184, 0) 72%);
	animation: tp-glow 2.8s ease-in-out infinite;
}
.tp-map__marker svg {
	position: relative;
	display: block;
	width: calc(var(--tp-pin) * .85);
	height: auto;
	filter: drop-shadow(0 2px 3px rgba(15, 22, 38, .25));
}
.tp-map__continent:nth-of-type(2n) .tp-map__marker::before { animation-delay: -1.4s; }
@keyframes tp-glow {
	0%, 100% { transform: scale(.9); opacity: .85; }
	50% { transform: scale(1.12); opacity: 1; }
}
.tp-map__count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* For the search; not shown. */
.tp-map__back {
	position: absolute;
	top: 12px;
	left: 10px;
	z-index: 4;
	display: inline-block;
	padding: 6px 12px;
	border: 0;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 3px 10px rgba(15, 22, 38, .16);
	color: var(--tp-btn);
	font: inherit;
	font-size: 12.5px;
	font-weight: 700;
	cursor: pointer;
}
.tp-map__back:hover,
.tp-map__back:focus { background: #fff; color: var(--tp-navy); }
.tp-map__hint { margin: 6px 0 0; font-size: 12.5px; font-weight: 600; text-align: center; color: var(--tp-muted); }
/* The hint only under the world map, the back button only on a continent map. */
.tp-map:has([data-view="world"][hidden]) .tp-map__hint { visibility: hidden; }
.tp-map:has([data-view="world"]:not([hidden])) .tp-map__back { display: none; }
@media (max-width: 767px) {
	.tp-map { margin: 0 0 24px; padding: 10px 0 8px; border-radius: 18px; }
	/* Continent maps: small, readable trip names. */
	.tp-map__label { padding: 3px 8px; border-radius: 8px; }
	.tp-map__label b { font-size: 11.5px; }
	.tp-map__dot { width: 12px; height: 12px; border-width: 2px; }
	.tp-map__pin { margin-left: -6px; }
	.tp-map__pin.is-left { margin-left: 6px; }
	.tp-map__city { font-size: 24px; }
}
@media (min-width: 768px) {
	/* Tablets: larger pins and names; the names stay on one line. */
	.tp-map { --tp-pin: 34px; }
	.tp-map__continent { gap: 6px; font-size: 16px; }
	.tp-map__continent b { max-width: none; white-space: nowrap; }
	.tp-map__back { top: 18px; left: 18px; padding: 8px 16px; font-size: 14px; }
	.tp-map__hint { margin-top: 8px; font-size: 14px; }
}
@media (min-width: 1024px) {
	.tp-map { --tp-pin: 42px; }
	.tp-map__continent { gap: 8px; font-size: 19px; }
	.tp-map__back { top: 22px; left: 22px; font-size: 15px; }
	.tp-map__hint { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
	.tp-map__marker::before { animation: none; }
	.tp-map__dot::after { animation: none; opacity: 0; }
}
/* Continent maps are taller than the world map: a little narrower, so the page doesn't jump as much. */
.tp-map__inner[data-view]:not([data-view="world"]) { max-width: 940px; }
.tp-map__inner[hidden] { display: none; }
.tp-map__inner { animation: tp-map-in .45s ease; }
@keyframes tp-map-in {
	from { opacity: 0; transform: scale(.97); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.tp-map__inner { animation: none; }
}
/* Label that would overlap another one: hidden until the pin is hovered / focused. */
/* A label moved a little lower to avoid another one. */
.tp-map__pin.is-low .tp-map__label { position: relative; top: 26px; }
.tp-map__pin.is-quiet .tp-map__label { opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.tp-map__pin.is-quiet:hover .tp-map__label,
.tp-map__pin.is-quiet:focus-visible .tp-map__label { opacity: 1; }

/* Above the Home map: the search box (left) and "View all destinations ›" (right); on phones the link
   comes first, on its own line. Above the /packages/ trips: just the search box. */
.tp-map-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin: 0 0 16px;
}
.tp-map-top__all {
	margin-left: auto;
	font-family: var(--tp-font-body);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--tp-script);
	text-decoration: none;
}
.tp-map-top__all:hover,
.tp-map-top__all:focus { color: var(--tp-navy); }
.tp-search {
	position: relative;
	display: flex;
	align-items: center;
	flex: 0 1 300px;
	font-family: var(--tp-font-body);
}
.tp-search__icon { position: absolute; left: 15px; color: var(--tp-muted); pointer-events: none; }
.tp-search .tp-search__input {
	width: 100%;
	padding: 10px 16px 10px 42px;
	border: 1px solid var(--tp-line);
	border-radius: 999px;
	background: #fff;
	color: var(--tp-navy);
	font: inherit;
	font-size: 15px;
}
.tp-search .tp-search__input:focus { border-color: var(--tp-btn); outline: 3px solid rgba(74, 128, 184, .2); outline-offset: 0; }
.tp-map__pin.is-off { display: none; }
@media (max-width: 767px) {
	/* Phones: the search box gets its own full-width line, under the link. */
	.tp-search { flex: 1 1 100%; }
	.tp-map-top__all { order: -1; flex: 1 1 100%; margin-left: 0; font-size: 15px; }
}

/* Trips map: routes of multi-city trips (template-parts/trips-map.php) */
.tp-map__routes {
	position: absolute;
	inset: 0;
	z-index: 1; /* Under the pins. */
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
}
.tp-map__leg {
	fill: none;
	stroke: var(--tp-btn);
	stroke-width: 2.6px;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
	pointer-events: stroke;
}
.tp-map__leg--flight { stroke-dasharray: 7 7; }
.tp-map__leg--train { stroke-dasharray: .5 7; stroke-width: 4px; }
.tp-map__leg--boat { stroke-dasharray: 14 7; }
.tp-map__stop { fill: #fff; stroke: var(--tp-btn); stroke-width: 2.5px; vector-effect: non-scaling-stroke; }
.tp-map__city {
	font-family: var(--tp-font-body);
	font-size: 15px;
	font-weight: 700;
	text-anchor: middle;
	fill: var(--tp-navy);
	paint-order: stroke;
	stroke: #EEF4FA; /* The map's background. */
	stroke-width: 4px;
	opacity: 0;
	transition: opacity .2s ease;
}
/* The route draws itself in, from the first stop to the last. */
.tp-map__draw {
	fill: none;
	stroke: #fff;
	stroke-width: 40px;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: tp-route-draw 1.6s ease-in-out forwards;
	animation-delay: var(--tp-delay, .3s);
}
@keyframes tp-route-draw {
	to { stroke-dashoffset: 0; }
}
.tp-map__route.is-off { display: none; }
.tp-map__route-names { display: none; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--tp-btn); }
/* Pointing at a trip: its route and city names stand out, the other trips fade. */
.tp-map__route,
.tp-map__pin { transition: opacity .2s ease; }
.tp-map.is-focus .tp-map__route:not(.is-hot),
.tp-map.is-focus .tp-map__pin:not(.is-hot) { opacity: .25; }
.tp-map__route.is-hot .tp-map__leg { stroke-width: 3.4px; }
.tp-map__route.is-hot .tp-map__city { opacity: 1; }
.tp-map__pin.is-hot .tp-map__route-names,
.tp-map__pin:hover .tp-map__route-names,
.tp-map__pin:focus-visible .tp-map__route-names { display: block; }
@media (prefers-reduced-motion: reduce) {
	.tp-map__draw { animation: none; stroke-dashoffset: 0; }
}

/* ---- Route ribbon (multi-city trips; template-parts/trip/route.php) ------------ */
.tp-route {
	position: relative;
	z-index: 2;
	margin: 6px 18px 0;
	padding: 22px 20px;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(15, 22, 38, .08);
	font-family: var(--tp-font-body);
}
.tp-route__eyebrow {
	margin: 0 0 14px;
	font-family: var(--tp-font-script);
	font-size: 21px;
	font-weight: 600;
	color: var(--tp-script);
}
.tp-route__stops { margin: 0; padding: 0; list-style: none; }
.tp-route__stop {
	position: relative;
	display: grid;
	grid-template-columns: 34px 1fr;
	column-gap: 12px;
	margin: 0;
}
.tp-route__num {
	grid-row: span 3;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--tp-btn);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
}
.tp-route__city { font-family: var(--tp-font-serif); font-size: 21px; font-weight: 900; line-height: 1.2; color: var(--tp-navy); }
.tp-route__nights { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tp-btn); }
.tp-route__dates { font-size: 14px; color: var(--tp-muted); font-variant-numeric: tabular-nums; }
/* Phones: a vertical timeline; the leg between two stops is a line with the transport icon. */
.tp-route__leg {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 54px;
	margin: 4px 0;
	padding-left: 3px;
	color: var(--tp-btn);
}
.tp-route__leg::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 16px;
	border-left: 2.5px dashed #BFD3E8;
}
.tp-route__leg--car::before,
.tp-route__leg--bus::before { border-left-style: solid; }
.tp-route__leg--train::before { border-left-style: dotted; border-left-width: 3px; }
.tp-route__way {
	position: relative;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #EEF4FA;
}
@media (min-width: 1024px) {
	.tp-route { margin: 10px 44px 0; padding: 26px 34px 30px; }
	.tp-route__eyebrow { font-size: 23px; }
	.tp-route__stops { display: flex; align-items: flex-start; }
	.tp-route__stop {
		flex: 0 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		max-width: 220px;
		text-align: center;
	}
	.tp-route__num { width: 40px; height: 40px; margin-bottom: 10px; font-size: 16px; }
	.tp-route__city { font-size: 24px; }
	.tp-route__nights { margin-top: 4px; }
	.tp-route__dates { margin-top: 2px; }
	/* Desktop: the leg is a horizontal line between the stop numbers, icon in the middle. */
	.tp-route__leg {
		flex: 1 1 0;
		justify-content: center;
		min-width: 70px;
		min-height: 40px;
		margin: 0 -40px; /* Run under the stops' sides up to their numbers. */
		padding: 0;
	}
	.tp-route__leg::before {
		top: 50%;
		right: 64px;
		bottom: auto;
		left: 64px;
		border-left: 0;
		border-top: 2.5px dashed #BFD3E8;
	}
	.tp-route__leg--car::before,
	.tp-route__leg--bus::before { border-top-style: solid; }
	.tp-route__leg--train::before { border-top-style: dotted; border-top-width: 3px; }
	.tp-route__way { width: 34px; height: 34px; }
}
@media print {
	.tp-route { box-shadow: none; border: 1px solid var(--tp-line); }
}
/* A highlighted trip always shows its label (even one hidden to avoid overlaps). */
.tp-map__pin.is-hot { z-index: 3; }
.tp-map__pin.is-quiet.is-hot .tp-map__label { opacity: 1; }
/* City names only on continent maps (on the world map nearby cities would collide). */
[data-view="world"] .tp-map__route.is-hot .tp-map__city { opacity: 0; }

/* ---- Flights: journey lines (template-parts/trip/journey.php) -------------------- */
.tp-journey {
	margin-top: 18px;
	padding: 20px 18px 22px;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(15, 22, 38, .08);
	font-family: var(--tp-font-body);
	color: var(--tp-navy);
}
.tp-journey__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 6px 16px;
	margin-bottom: 18px;
}
.tp-journey__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tp-script);
}
.tp-journey__total { font-size: 14px; font-weight: 700; color: var(--tp-navy); }
.tp-journey__track { margin: 0; padding: 0; list-style: none; }
.tp-journey__track > li { margin: 0; }
.tp-journey__airport { display: flex; flex-direction: column; }
.tp-journey__time { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tp-journey__plus { margin-left: 2px; font-size: 11px; font-weight: 700; color: #C46A12; }
.tp-journey__code { font-family: var(--tp-font-serif); font-size: 26px; font-weight: 900; line-height: 1.1; letter-spacing: .02em; }
.tp-journey__city { font-size: 13px; color: var(--tp-muted); }
.tp-journey__layover {
	align-self: flex-start;
	margin-top: 6px;
	padding: 3px 10px;
	border: 1.5px dashed #E0A63B;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	color: #A9670C;
	white-space: nowrap;
}
.tp-journey__line { position: relative; display: block; }
.tp-journey__plane {
	position: absolute;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	background: #fff; /* Same as the card: leaves a gap in the line on each side of the plane. */
	color: var(--tp-navy);
	transition: opacity .35s ease;
}
.tp-journey__plane .tp-icon { width: 24px; height: 24px; }
.tp-journey__dur { font-size: 14px; font-weight: 700; }
.tp-journey__no { font-size: 12.5px; color: var(--tp-muted); }

/* Phones: top to bottom and centred: each airport (with the flight that leaves from it under the
   city), then the flight line down the middle with the plane pointing down and the flight time beside it. */
@media (max-width: 767px) {
	.tp-journey__airport { align-items: center; text-align: center; }
	.tp-journey__airport .tp-journey__no--at { margin-top: 4px; }
	.tp-journey__layover { align-self: center; }
	.tp-journey__flight {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 92px;
		margin: 8px 0;
		padding-left: calc(50% + 28px);
	}
	.tp-journey__flight .tp-journey__no { display: none; } /* Shown under the city instead. */
	.tp-journey__line { position: absolute; top: 0; bottom: 0; left: calc(50% - 1.25px); border-left: 2.5px solid #BFD3E8; }
	.tp-journey__plane { top: calc(50% - 19px); left: -20px; }
	.tp-journey__plane .tp-icon { transform: rotate(180deg); } /* Nose down. */
}

/* Tablets and computers: one line, each flight as long as its flight time. */
@media (min-width: 768px) {
	.tp-journey { padding: 22px 28px 24px; }
	.tp-journey__track { display: flex; align-items: flex-start; }
	/* Every airport: time, code and city centred on the airport. */
	.tp-journey__airport { flex: 0 0 auto; align-items: center; min-width: 76px; max-width: 170px; text-align: center; }
	.tp-journey__flight {
		flex: 1 1 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		min-width: 160px;
		margin: 0 20px;
		padding-top: 34px; /* Lines up with the airport codes. */
		text-align: center;
	}
	.tp-journey__line { width: 100%; height: 0; margin-bottom: 20px; border-top: 2.5px solid #BFD3E8; }
	.tp-journey__plane { top: -20px; left: calc(50% - 19px); }
	.tp-journey__plane .tp-icon { transform: rotate(90deg); } /* Nose right. */
	.tp-journey__no--at { display: none; } /* Phones only. */
}
/* Tablets: the same line, tightened so a journey with 2 stops still fits across the screen
   (flights can get shorter; the flight number and airline may wrap onto two lines). */
@media (min-width: 768px) and (max-width: 1023px) {
	.tp-journey { padding: 20px 18px 22px; }
	.tp-journey__airport { min-width: 64px; max-width: 120px; }
	.tp-journey__code { font-size: 23px; }
	.tp-journey__time { font-size: 13.5px; }
	.tp-journey__city { font-size: 12px; }
	.tp-journey__layover { padding: 2px 8px; font-size: 11px; }
	.tp-journey__flight { min-width: 84px; margin: 0 8px; } /* Short flights keep room for their time and airline. */
	.tp-journey__line { margin-bottom: 16px; }
	.tp-journey__dur { font-size: 13px; }
	.tp-journey__no { font-size: 11.5px; line-height: 1.3; }
}
/* While a plane flies the whole journey (trip-booking.js), the settled planes wait hidden. */
.tp-journey__track { position: relative; }
.tp-journey.is-flying .tp-journey__plane:not(.tp-journey__traveller) { opacity: 0; }
.tp-journey__traveller {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	background: transparent;
	pointer-events: none;
	will-change: transform;
}
/* The dashed trail the flying plane leaves behind. */
.tp-journey__trail {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}
.tp-journey__trail path {
	fill: none;
	stroke: var(--tp-navy);
	stroke-width: 1.8;
	stroke-dasharray: 6 7;
	stroke-linecap: round;
	opacity: .55;
}
.tp-journey__traveller.is-landed,
.tp-journey__trail.is-landed { opacity: 0; transition: opacity .6s ease; }
@media (prefers-reduced-motion: reduce) {
	.tp-journey__plane { transition: none; }
}

/* ==== Trip page top, design v2 (light-blue backdrop, one-line title, gold swoosh, ===============
   perks in the text column, quote line). Overrides the hero rules above. */
/* The light-blue backdrop runs the full width of the window (the page itself is max 1440px). */
body.single-package { background: linear-gradient(180deg, #EBF3FB 0, #F3F7FC 900px, var(--tp-ground) 1500px) no-repeat, var(--tp-ground); }
/* Windows wider than the page (1440px): palms and background image reach the window edges. */
@media (min-width: 1441px) {
	body.single-package { overflow-x: clip; }
	body.single-package #content.tp-trip > .tp-decor,
	body.single-package .tp-herobg { margin: 0 calc(720px - 50vw); }
}
body.single-package .tp-trip { background: transparent; overflow: visible; }
body.single-package #content.tp-trip > .tp-decor { overflow: hidden; }

/* Optional background image (Hero tab): softly faded behind the top of the page. */
.tp-herobg {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 0;
	height: 760px;
	overflow: hidden;
	pointer-events: none;
}
.tp-trip .tp-herobg__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	opacity: .5;
	filter: saturate(.55);
}
.tp-herobg::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Lighter behind the text, fading into the page at the bottom. */
	background:
		radial-gradient(ellipse 62% 58% at 42% 42%, rgba(240, 246, 252, .92) 0, rgba(240, 246, 252, .7) 55%, rgba(240, 246, 252, .25) 100%),
		linear-gradient(180deg, rgba(235, 243, 251, .35) 0, rgba(243, 247, 252, .6) 60%, #F3F7FC 100%);
}

/* More palm trees when there is no background image. */
.tp-palm--left2,
.tp-palm--right2 { display: none; }
@media (min-width: 1024px) {
	.tp-palm--left { left: -60px; top: 60px; width: 380px; opacity: .55; }
	.tp-palm--right { right: -70px; top: 30px; width: 420px; opacity: .5; }
	.tp-palm--left2 { display: block; left: -40px; top: 640px; width: 280px; opacity: .4; }
	.tp-palm--right2 { display: block; right: -30px; top: 700px; width: 300px; opacity: .4; }
	.tp-herobg { height: 1100px; }
}

/* Perks: in the text column (both layouts), bolder icons. */
.tp-hero__body .tp-perks { margin: 28px 0 0; padding: 20px 0 22px; border-bottom: 1px solid var(--tp-line); }
.tp-perk .tp-icon { color: var(--tp-navy); }
.tp-perk .tp-icon path,
.tp-perk .tp-icon circle,
.tp-perk .tp-icon rect { stroke-width: 2.1; }
.tp-trip .tp-hero__body .tp-perk p { font-size: 11px; letter-spacing: .06em; }

/* Quote line under the hero: “ Some places change your view. ” with a line on each side. */
.tp-trip .tp-heroquote {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 26px 0 0;
	font-family: var(--tp-font-serif);
	font-size: 17px;
	font-style: italic;
	font-weight: 400;
	line-height: 1.4;
	text-align: center;
	color: var(--tp-navy);
}
.tp-heroquote::before,
.tp-heroquote::after { content: ""; flex: 1 1 0; min-width: 24px; border-top: 1px solid #C9D6E3; }
.tp-heroquote span::before { content: "\201C\00A0"; color: var(--tp-btn); }
.tp-heroquote span::after { content: "\00A0\201D"; color: var(--tp-btn); }

/* "More than a trip": a slanted brush stroke. */
.tp-callout__band {
	border-radius: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 110' preserveAspectRatio='none'%3E%3Cpath d='M14 22 C70 8 160 12 230 9 C300 6 352 4 392 12 C386 34 396 58 388 80 C392 92 380 100 360 99 C290 104 200 98 120 103 C80 106 40 102 12 98 C18 84 4 66 10 52 C4 40 16 32 14 22Z' fill='%23F7E3CF'/%3E%3Cpath d='M30 16 C120 10 260 8 380 14' stroke='%23FBEFE2' stroke-width='3' fill='none'/%3E%3Cpath d='M24 96 C140 102 260 98 372 94' stroke='%23F2D9C0' stroke-width='3' fill='none'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

@media (min-width: 1024px) {
	.tp-hero {
		grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
		grid-template-areas:
			"head side"
			"body side"
			"quote quote";
		max-width: 1260px;
		margin: 0 auto;
		padding: 36px 44px 30px;
		column-gap: 52px;
	}
	.tp-heroquote { grid-area: quote; }

	/* Title on one line with the gold swoosh under its middle. */
	.tp-trip .tp-title { display: inline-block; font-size: 64px; padding-bottom: .22em; }
	.tp-title__dash--end { display: inline; }
	.tp-title__dash--start { display: none; }
	.tp-title__swoosh::after { display: none; }
	.tp-trip .tp-title::after {
		content: "";
		position: absolute;
		bottom: .02em;
		left: 27%;
		width: 38%;
		height: 24px;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 290 26' preserveAspectRatio='none'%3E%3Cpath d='M4 19C70 7 196 3 286 11' stroke='%23E2A33C' stroke-width='7' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
	}
	.tp-trip .tp-subtitle { margin-top: 4px; }

	/* Text: bigger, the full column width. */
	.tp-copy { max-width: none; gap: 16px; margin-top: 20px; }
	.tp-trip .tp-copy p { font-size: 18px; line-height: 1.5; color: #22283A; }

	.tp-callout { width: 440px; min-height: 120px; margin: 30px 0 0 40px; transform: rotate(-5deg); }
	.tp-callout__lines { font-size: 33px; }

	/* Photo column: date badge centred over the top of a tall photo. */
	.tp-datewrap { justify-content: center; }
	.tp-photo { height: 640px; }

	.tp-hero__body .tp-perks { grid-template-columns: repeat(4, 1fr); margin: 34px 0 0; padding: 18px 0 20px; }
	.tp-perk .tp-icon { width: 30px; height: 30px; }
	.tp-trip .tp-hero__body .tp-perk p { font-size: 12px; }
	.tp-trip .tp-heroquote { margin-top: 30px; font-size: 19px; }
}

/* ==== Tablets (768–1023px) =====================================================================
   Between the phone and desktop layouts: the phone's stacked sections with roomier side margins,
   and the trips list 2 cards per row (a page of 8 = 2 × 4). */
@media (min-width: 768px) and (max-width: 1023px) {
	main.tp-trip { padding-left: 22px; padding-right: 22px; } /* + the sections' own 18px = 40px each side. */
	.tp-archive,
	body .tp-archive.site-main { max-width: none; padding: 36px 40px 64px; } /* Beats Hello's body:not(...) .site-main cap (600–800px). */
	.tp-archive .tp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
	.tp-archive .tp-card__price strong { font-size: 21px; }
	.tp-trip .tp-section__title { font-size: 34px; }
}

/* ==== One photo shape everywhere: 3:4 portrait (e.g. 1200 × 1600 px) =============================
   Every framed photo on the site - trip cards (/packages/, Home Featured Trips), the trip page's hero
   photo, the Highlights slides and their popup - is shown as 3:4 on phones, tablets and computers, so
   one photo size works everywhere. (Not affected: the faded full-width background behind a trip's top,
   the logo, the maps and the videos.) Placed last so it wins over the older fixed heights above. */
.tp-card__media,
.tp-grid--featured .tp-card__media,
.tp-feat-carousel .tp-card__media { height: auto; aspect-ratio: 3 / 4; }

/* Home Featured Trips: with tall photos, more cards fit side by side
   (phones 1 + a peek, tablets 2, computers 4 per view). */
@media (min-width: 768px) {
	.tp-feat-carousel .tp-card { width: calc((100cqw - 24px) / 2); }
	.tp-grid.tp-grid--featured { grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; }
}
@media (min-width: 1025px) {
	.tp-feat-carousel .tp-card { width: calc((100cqw - 72px) / 4); }
}

/* Trip page hero photo */
.tp-photo,
.tp-hero .tp-photo { height: auto; aspect-ratio: 3 / 4; }
/* Tablets: two columns, like on computers - the title block centred across the top, then the intro text on the left and
   the 3:4 photo on the right (date badge on its top edge, "Join the trip" under it), then the one-line
   callout centred and the 4 perks in one row, both across the full width. */
@media (min-width: 768px) and (max-width: 1023px) {
	.tp-hero {
		display: grid;
		grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
		grid-template-areas:
			"head head"
			"copy side"
			"callout callout"
			"perks perks"
			"quote quote";
		column-gap: 32px;
		align-items: start;
		padding: 30px 18px 24px;
	}
	/* The title block centred; the text pieces become grid items so the perks can run across both columns. */
	.tp-hero__head { grid-area: head; margin-bottom: 26px; text-align: center; }
	.tp-hero__side { grid-area: side; }
	.tp-hero__body { display: contents; }
	.tp-hero .tp-copy { grid-area: copy; }
	.tp-hero .tp-callout { grid-area: callout; justify-self: center; max-width: calc(100% - 45px); margin-top: 30px; } /* Its own row, so the one line fits (also in Greek). */
	.tp-hero__body .tp-perks { grid-area: perks; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 30px 0 0; padding: 20px 0 22px; border-bottom: 1px solid var(--tp-line); }
	.tp-hero__body .tp-perk + .tp-perk { border-left: 1px solid var(--tp-line); }
	/* "More than a trip. A story you'll always tell." on one line. */
	.tp-callout__lines { align-items: center; font-size: 21px; white-space: nowrap; }
	.tp-callout__lines > span > span { display: inline; }
	.tp-callout__lines > span > span + span::before { content: " "; }
	.tp-heroquote { grid-area: quote; }
	.tp-datewrap { position: relative; z-index: 4; display: flex; justify-content: center; margin: 0 0 -26px; }
	.tp-datepill { display: inline-flex; width: auto; padding: 10px 18px; }
	.tp-datepill__txt b { font-size: 17px; }
	.tp-photo { margin-top: 0; }
	.tp-hero__side .tp-cta { margin-top: 16px; }
	.tp-copy { margin-top: 0; }
	.tp-trip .tp-copy p { font-size: 16px; line-height: 1.55; }
}

/* Trip Highlights slides and popup */
.tp-hl-img,
.tp-hl-modal__card .tp-hl-img { height: auto; aspect-ratio: 3 / 4; }
@media (min-width: 768px) {
	.tp-trip .tp-hl-slide { width: 200px; }
}
@media (min-width: 1024px) {
	.tp-trip .tp-hl-slide { width: 240px; }
}
/* The popup is narrow enough for the 3:4 photo and its text to fit the screen height. */
.tp-hl-modal__card { max-width: min(360px, calc((100vh - 260px) * .75)); max-width: min(360px, calc((100svh - 260px) * .75)); }
/* Tablets and computers: a bigger popup - the 3:4 photo as large as the screen height allows
   (up to 640px wide), with its title and text still on screen underneath. */
@media (min-width: 768px) {
	.tp-hl-modal__card { max-width: min(640px, calc((100vh - 230px) * .75)); max-width: min(640px, calc((100svh - 230px) * .75)); }
	.tp-trip .tp-hl-modal__card h3 { margin: 20px 24px 0; font-size: 21px; }
	.tp-trip .tp-hl-modal__card p { margin: 8px 24px 22px; font-size: 15px; }
}
/* Phones: the title block (small line, title, subtitle) centred; a title like "Los Angeles – Las Vegas"
   shows on two lines without the dash. */
@media (max-width: 767px) {
	.tp-hero__head { text-align: center; }
	.tp-title .tp-title__dash { display: none; }
	/* The date badge sits centred on the photo's top edge, as on tablets and computers. */
	.tp-datewrap { position: relative; z-index: 4; display: flex; justify-content: center; margin: 22px 0 -26px; }
	.tp-datepill { display: inline-flex; width: auto; padding: 10px 18px; }
	.tp-datepill__txt b { font-size: 17px; }
	/* "More than a trip. A story you'll always tell." as one line (site-menu.js fits its size). */
	.tp-callout__lines { align-items: center; }
	.tp-callout__lines > span > span { display: inline; }
	.tp-callout__lines > span > span + span::before { content: " "; }
	/* The quote under the perks: no side lines, so its one line can be bigger. */
	.tp-trip .tp-heroquote { justify-content: center; }
	.tp-heroquote::before,
	.tp-heroquote::after { display: none; }
	.tp-hero { padding-bottom: 24px; } /* Space between the quote and the line under it, as on tablets. */
}

/* ==== Title underline (gold swoosh): always centred under the title ===========================
   Phones: under the second line (which is centred). Tablets and computers: the title is one line, so
   the swoosh sits under its middle. Placed last so it wins over the older offsets above. */
.tp-title__swoosh::after { left: 50%; transform: translateX(-50%); }
@media (min-width: 768px) and (max-width: 1023px) {
	.tp-title__swoosh::after { display: none; }
	.tp-trip .tp-title { display: inline-block; }
	.tp-trip .tp-title::after {
		content: "";
		position: absolute;
		bottom: .02em;
		left: 50%;
		width: 40%;
		height: 20px;
		transform: translateX(-50%);
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 290 26' preserveAspectRatio='none'%3E%3Cpath d='M4 19C70 7 196 3 286 11' stroke='%23E2A33C' stroke-width='7' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
	}
}
@media (min-width: 1024px) {
	.tp-trip .tp-title::after { left: 50%; transform: translateX(-50%); }
}

/* ==== Eyebrow + subtitle: one line on every screen, without JavaScript ===========================
   hero.php gives each line its length (--tp-chars). The font size is the smaller of the normal size
   (--tp-fs) and what fits: the title block's width / (characters × the script font's average letter width,
   --tp-k: Caveat for English, the wider Mynerve for Greek). site-menu.js then fine-tunes it. */
.tp-hero__head { container-type: inline-size; }
.tp-hero .tp-eyebrow { --tp-fs: 22px; }
.tp-hero .tp-subtitle { --tp-fs: 27px; }
@media (min-width: 1024px) {
	.tp-hero .tp-eyebrow { --tp-fs: 27px; }
	.tp-hero .tp-subtitle { --tp-fs: 38px; }
}
.tp-hero .tp-eyebrow[style*="--tp-chars"],
.tp-hero .tp-subtitle[style*="--tp-chars"] {
	--tp-k: .42;
	font-size: min(var(--tp-fs), calc(100cqi / (var(--tp-chars) * var(--tp-k))));
	white-space: nowrap;
}
.tp-hero .tp-eyebrow:lang(el)[style*="--tp-chars"],
.tp-hero .tp-subtitle:lang(el)[style*="--tp-chars"] { --tp-k: .5; }

/* Section eyebrows ("Make the most of your free time."): sized to fit one line the same way (never below
   13px here - a longer line wraps instead); site-menu.js fine-tunes it. */
.tp-trip .tp-section__head,
.tp-info-contact { container-type: inline-size; } /* The width the headings are fitted to. */
.tp-trip .tp-section__eyebrow { --tp-fs: 19px; --tp-k: .42; }
.tp-trip .tp-section__eyebrow:lang(el) { --tp-k: .5; }
@media (min-width: 1024px) {
	.tp-trip .tp-section__eyebrow { --tp-fs: 22px; }
}
.tp-trip .tp-section__eyebrow[style*="--tp-chars"] { font-size: max(13px, min(var(--tp-fs), calc(100cqi / (var(--tp-chars) * var(--tp-k))))); }

/* Section headings ("Optional Activities", "Προαιρετικές δραστηριότητες"): sized to fit one line the same
   way (never below 18px here - a longer heading wraps instead); site-menu.js fine-tunes it. */
.tp-trip .tp-section__title { --tp-fs: 27px; --tp-k: .6; }
.tp-trip .tp-section__title:lang(el) { --tp-k: .64; }
@media (min-width: 768px) and (max-width: 1023px) {
	.tp-trip .tp-section__title { --tp-fs: 34px; }
}
@media (min-width: 1024px) {
	.tp-trip .tp-section__title { --tp-fs: 38px; }
}
.tp-trip .tp-section__title[style*="--tp-chars"] { font-size: max(18px, min(var(--tp-fs), calc(100cqi / (var(--tp-chars) * var(--tp-k))))); }

/* Title underline: 6px lower than the original position (every screen). */
.tp-title__swoosh::after { top: calc(100% - .1em + 6px); }
@media (min-width: 768px) {
	.tp-trip .tp-title::after { bottom: calc(.02em - 6px); }
}

/* Phones and tablets: "More than a trip…" centred inside its band (the band no longer sticks out on the right). */
@media (max-width: 1023px) {
	.tp-callout,
	.tp-hero .tp-callout { max-width: none; justify-content: center; }
	.tp-callout__band { left: 0; right: 0; }
	.tp-callout__lines { padding-left: 16px; padding-right: 16px; }
}

/* Computers: the perks row across the full width under both columns, centred like the quote below it
   (as on tablets). The text pieces become grid items so the perks can leave the left column. */
@media (min-width: 1024px) {
	.tp-hero {
		grid-template-rows: auto auto 1fr auto auto;
		grid-template-areas:
			"head side"
			"copy side"
			"callout side"
			"perks perks"
			"quote quote";
	}
	.tp-hero__body { display: contents; }
	.tp-hero .tp-copy { grid-area: copy; }
	.tp-hero .tp-callout { grid-area: callout; align-self: start; }
	.tp-hero__body .tp-perks { grid-area: perks; }
}