/**
 * Mytsys Travel — public styles.
 *
 * Every colour below is a fallback only. MTIPL_Appearance prints the resolved
 * palette inline after this file, so editing these values does nothing on a
 * live site — change them under Trips → Design instead.
 *
 * The plugin deliberately sets no filled background blocks and no fonts of
 * its own: a trip page sits inside the customer's theme and should look like
 * part of it, borrowing one accent colour and nothing else.
 */

:root {
	--tw-primary:    #1a6b4a;
	--tw-primary-dk: #134d36;
	--tw-primary-lt: #e6f0eb;
	--tw-on-primary: #ffffff;
	--tw-accent:     #f59e0b;
	--tw-accent-dk:  #b9730a;
	--tw-accent-txt: #8a6a2f;
	--tw-accent-lt:  #fdf0d8;
	--tw-on-accent:  #201603;
	--tw-text:       #1f2937;
	--tw-muted:      #6b7280;
	--tw-border:     #e5e7eb;
	--tw-bg:         #f9fafb;
	--tw-white:      #ffffff;
	--tw-surface:    #ffffff;
	--tw-red:        #dc2626;
	--tw-green:      #16a34a;
	--tw-radius:     6px;
	--tw-radius-lg:  10px;
	--tw-width:      1120px;
	--tw-gutter:     20px;
	--tw-font-heading: inherit;
	--tw-font-body:    inherit;
	--tw-line-soft:  #eef0f3;
	/* transparent in light so the page looks native to the theme; a real
	   colour in dark so the section never shows the theme's light page
	   behind light text. */
	--tw-paint:      transparent;
}

/* ── Shell ──────────────────────────────────────────────────────────────── */
.tw-wrap *,
.tw-wrap *::before,
.tw-wrap *::after { box-sizing: border-box; }

.tw-wrap {
	font-family: var(--tw-font-body, inherit);
	color: var(--tw-text);
	max-width: var(--tw-width);
	margin: 0 auto;
	padding-inline: var(--tw-gutter);
	background: var(--tw-paint);
}

/* A dark trip section owns its surface rather than borrowing the theme's,
   and needs breathing room so it reads as a deliberate band.

   The paint runs past the container on both sides. box-shadow spreads the
   colour outward without adding layout width, and the clip-path keeps that
   spread to the horizontal axis — so the band reaches the window edge
   whatever the theme wraps the page in, and nothing overflows. */
.tw-wrap.tw-scheme-dark {
	padding-block: 14px 30px;
	clip-path: inset(0 -100vmax);
	box-shadow: 0 0 0 100vmax var(--tw-paint);
}

@media (prefers-color-scheme: dark) {
	.tw-wrap.tw-scheme-auto {
		padding-block: 14px 30px;
		clip-path: inset(0 -100vmax);
		box-shadow: 0 0 0 100vmax var(--tw-paint);
	}
}

.tw-wrap h1,
.tw-wrap h2,
.tw-wrap h3,
.tw-wrap h4 {
	font-family: var(--tw-font-heading, inherit);
	color: var(--tw-text);
	line-height: 1.25;
	margin: 0;
}

.tw-wrap :focus-visible {
	outline: 2px solid var(--tw-primary);
	outline-offset: 2px;
}

/* ── Trip header ────────────────────────────────────────────────────────── */
.tw-head { padding-block: 18px 0; }

.tw-crumb { font-size: 13px; color: var(--tw-muted); margin: 0 0 8px; }
.tw-crumb a { color: var(--tw-muted); text-decoration: none; }
.tw-crumb a:hover { color: var(--tw-primary); }

.tw-title { font-size: clamp(24px, 4.2vw, 34px); letter-spacing: -.018em; }

.tw-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 7px 20px;
	margin-top: 12px;
	font-size: 13.5px;
	color: var(--tw-muted);
}
.tw-facts span { display: inline-flex; align-items: center; gap: 6px; }
/* The fact icons carry the accent, the way a brand's small marks usually
   do, while their labels stay muted and readable. */
.tw-facts svg { width: 15px; height: 15px; stroke: var(--tw-accent-txt, currentColor); fill: none; stroke-width: 1.6; flex: none; }

/* ── Gallery strip ──────────────────────────────────────────────────────── */
.tw-strip {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 5px;
	margin-top: 14px;
	height: 212px;
}
.tw-strip figure { margin: 0; overflow: hidden; border-radius: var(--tw-radius); background: var(--tw-bg); }
.tw-strip figure:first-child { grid-row: span 2; }
.tw-strip img { width: 100%; height: 100%; max-width: 100%; object-fit: cover; display: block; }

@media (max-width: 640px) {
	.tw-strip { grid-template-columns: 2fr 1fr; height: 150px; }
	.tw-strip figure:nth-child(n+4) { display: none; }
}

/* ── Tabs ───────────────────────────────────────────────────────────────── */
.tw-tabs {
	display: flex;
	gap: 2px;
	border-bottom: 1px solid var(--tw-border);
	margin-top: 20px;
	overflow-x: auto;
	/* Setting one axis to auto makes the other compute to auto as well, which
	   is where the stray vertical scrollbar beside the tabs came from. */
	overflow-y: hidden;
}
.tw-tabs button {
	flex: none;
	font: inherit;
	font-size: 14.5px;
	font-weight: 500;
	padding: 12px 15px;
	border: 0;
	background: none;
	color: var(--tw-muted);
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	white-space: nowrap;
}
.tw-tabs button:hover { color: var(--tw-text); }
.tw-tabs button[aria-selected="true"] { color: var(--tw-text); border-bottom-color: var(--tw-primary); }

.tw-pane { display: none; }
.tw-pane.is-on { display: block; }
.tw-lede { max-width: 64ch; }

/* ── Two-column body ────────────────────────────────────────────────────── */
.tw-cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: 26px;
	padding-block: 20px 44px;
}
@media (min-width: 960px) {
	.tw-cols { grid-template-columns: minmax(0, 1fr) 352px; gap: 40px; align-items: start; }
	.tw-rail { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 16px); }
}

/* ── Itinerary with the plane ───────────────────────────────────────────── */
.tw-routehead {
	font-size: 11.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--tw-accent-txt, var(--tw-muted));
	margin: 0 0 10px;
}

.tw-route { position: relative; padding-left: 44px; }

.tw-spine {
	position: absolute;
	left: 14px;
	top: 4px;
	bottom: 4px;
	width: 2px;
	background: var(--tw-border);
	border-radius: 2px;
}
.tw-spine i { display: block; width: 100%; height: 0; background: var(--tw-primary); border-radius: 2px; }

.tw-plane {
	position: absolute;
	left: -10px;
	top: 0;
	width: 22px;
	height: 22px;
	color: var(--tw-primary);
	transform: translateY(0);
	will-change: transform;
}
/* The icon is drawn nose-up; it flies down the spine, so turn it to face
   its direction of travel. */
.tw-plane svg { width: 100%; height: 100%; display: block; fill: currentColor; transform: rotate(180deg); }

.tw-day { position: relative; }
.tw-day[hidden] { display: none; }

.tw-day::before {
	content: "";
	position: absolute;
	left: -35px;
	top: 20px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--tw-surface);
	border: 2px solid var(--tw-border);
	transition: border-color .2s, background .2s;
}
.tw-day.is-passed::before { border-color: var(--tw-primary); background: var(--tw-primary); }

.tw-day__btn {
	display: flex;
	gap: 14px;
	align-items: baseline;
	width: 100%;
	text-align: left;
	font: inherit;
	background: none;
	border: 0;
	cursor: pointer;
	color: inherit;
	padding-block: 12px;
	border-bottom: 1px solid var(--tw-line-soft);
}
.tw-day:last-of-type .tw-day__btn { border-bottom: 0; }

.tw-day__n { flex: none; width: 42px; font-size: 12px; font-weight: 600; color: var(--tw-muted); letter-spacing: .03em; }
.tw-day__t { flex: 1; min-width: 0; }
.tw-day__t b { display: block; color: var(--tw-text); font-size: 15.5px; font-weight: 600; }
.tw-day__t small { color: var(--tw-muted); font-size: 13px; }
.tw-day__x { flex: none; color: var(--tw-muted); font-size: 17px; line-height: 1; transition: transform .2s; }
.tw-day.is-open .tw-day__x { transform: rotate(45deg); }

.tw-day__body { display: none; padding: 0 0 13px 56px; }
.tw-day.is-open .tw-day__body { display: block; }
.tw-day__body p { margin: 0 0 10px; max-width: 60ch; }

.tw-meals { display: flex; gap: 6px; flex-wrap: wrap; }
.tw-meals span {
	font-size: 12px;
	color: var(--tw-muted);
	border: 1px solid var(--tw-border);
	border-radius: 999px;
	padding: 2px 10px;
}

/* ── Inclusions ─────────────────────────────────────────────────────────── */
.tw-two { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 620px) { .tw-two { grid-template-columns: 1fr 1fr; gap: 34px; } }
.tw-two h4 { font-size: 13.5px; margin-bottom: 11px; }

.tw-ul { list-style: none; margin: 0; padding: 0; }
.tw-ul li { position: relative; padding-left: 24px; margin-bottom: 8px; font-size: 14.5px; }
.tw-ul li svg { position: absolute; left: 0; top: 4px; width: 15px; height: 15px; fill: none; stroke-width: 2; }

/* ── Booking widget ─────────────────────────────────────────────────────── */
.tw-book {
	border: 1px solid var(--tw-border);
	border-radius: var(--tw-radius);
	overflow: hidden;
	background: var(--tw-surface);
}

.tw-book__head { padding: 14px 15px 13px; border-bottom: 1px solid var(--tw-border); background: var(--tw-bg); }
.tw-book__head .tw-h { margin-bottom: 9px; }

/* ── Section heading: a short rule with a plane flying along it ────────── */
.tw-h { display: block; }

.tw-h__t {
	display: block;
	margin: 0;
	font-family: var(--tw-font-heading, inherit);
	font-size: 17.5px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--tw-text);
}

.tw-h__rule {
	display: block;
	position: relative;
	width: 82px;
	height: 12px;
	margin-top: 7px;
}
.tw-h__rule::before {
	content: "";
	position: absolute;
	inset: 50% 0 auto;
	height: 1px;
	background: var(--tw-accent);
	opacity: .6;
}
.tw-h__rule svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 12px;
	height: 12px;
	fill: var(--tw-primary);
	/* The icon is drawn nose-up; here it flies left to right. */
	transform: rotate(90deg);
	animation: tw-taxi 6s cubic-bezier(.42, 0, .22, 1) infinite;
}

/* Flies the rule, rests at the end, then returns unseen — a flourish that
   settles rather than a loop that keeps pulling the eye. */
@keyframes tw-taxi {
	0%   { left: 0;                 opacity: 0; }
	7%   { left: 2px;               opacity: 1; }
	45%  { left: calc(100% - 12px); opacity: 1; }
	62%  { left: calc(100% - 12px); opacity: 0; }
	100% { left: 0;                 opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.tw-h__rule svg { animation: none; left: calc(100% - 12px); opacity: 1; }
}
.tw-cost { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tw-cost b { font-size: 25px; color: var(--tw-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.tw-cost span { color: var(--tw-muted); font-size: 13px; }

.tw-steps { display: flex; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--tw-border); }
.tw-steps li {
	flex: 1;
	text-align: center;
	padding: 10px 4px;
	font-size: 12.5px;
	color: var(--tw-muted);
	position: relative;
}
.tw-steps li[aria-current] { color: var(--tw-text); font-weight: 600; }
.tw-steps li[aria-current]::after {
	content: "";
	position: absolute;
	inset: auto 0 -1px;
	height: 2px;
	background: var(--tw-primary);
}
.tw-steps li.is-done { color: var(--tw-green); }

.tw-book__body { padding: 15px; }
.tw-step { display: none; }
.tw-step.is-on { display: block; }

.tw-fld { margin-bottom: 11px; }
.tw-fld > label,
.tw-fld .tw-lab {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--tw-text);
	margin-bottom: 5px;
}
.tw-fld input,
.tw-fld select,
.tw-fld textarea {
	width: 100%;
	padding: 9px 10px;
	border: 1px solid var(--tw-border);
	border-radius: var(--tw-radius);
	font: inherit;
	font-size: 14.5px;
	color: var(--tw-text);
	background: var(--tw-surface);
}
.tw-fld textarea { resize: vertical; }

.tw-pair { display: flex; gap: 10px; flex-wrap: wrap; }
.tw-pair > * { flex: 1 1 130px; min-width: 0; }

/* length ranges, and the package lengths on a hand-picked date */
.tw-lens { display: flex; gap: 6px; flex-wrap: wrap; }
.tw-len,
.tw-pkg {
	flex: 1 1 auto;
	padding: 7px 10px;
	border: 1px solid var(--tw-border);
	border-radius: var(--tw-radius);
	background: var(--tw-surface);
	color: var(--tw-text);
	font: inherit;
	font-size: 13.5px;
	cursor: pointer;
	white-space: nowrap;
}
.tw-len[aria-pressed="true"],
.tw-pkg[aria-pressed="true"] {
	border-color: var(--tw-primary);
	background: var(--tw-primary-lt);
	font-weight: 600;
}

/* departures */
.tw-dates { display: flex; gap: 7px; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }

/* These two strips scroll sideways when they have to, but a scrollbar drawn
   across a booking widget reads as a broken control rather than an
   affordance. The scrolling stays; the chrome goes. */
.tw-tabs,
.tw-dates { scrollbar-width: none; -ms-overflow-style: none; }
.tw-tabs::-webkit-scrollbar,
.tw-dates::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* With the scrollbar gone, a departure cut off at the edge would look like a
   layout fault rather than more to see. The class is set only when the strip
   actually overflows, so a short list gets no fade. */
.tw-dates.is-more {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
	        mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
}
.tw-dt {
	flex: none;
	min-width: 112px;
	text-align: left;
	padding: 9px 11px;
	border: 1px solid var(--tw-border);
	border-radius: var(--tw-radius);
	background: var(--tw-surface);
	color: var(--tw-text);
	font: inherit;
	cursor: pointer;
}
.tw-dt[hidden] { display: none; }
.tw-dt b { display: block; font-size: 14.5px; font-weight: 600; }
.tw-dt em { display: block; font-style: normal; font-size: 12px; color: var(--tw-muted); }
.tw-dt small { font-size: 12px; color: var(--tw-muted); }
.tw-dt .tw-few { color: var(--tw-accent-txt, var(--tw-accent-dk)); }
.tw-dt[aria-pressed="true"] { border-color: var(--tw-primary); background: var(--tw-primary-lt); }
.tw-dt:disabled { opacity: .42; cursor: not-allowed; }

.tw-nodates { font-size: 13.5px; color: var(--tw-muted); padding-block: 6px; }

/* "My dates are different" — a quiet way out of the fixed departures. */
.tw-otherlink {
	font: inherit;
	font-size: 13px;
	background: none;
	border: 0;
	padding: 6px 0 0;
	color: var(--tw-primary);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.tw-otherlink:hover { color: var(--tw-primary-dk); }
.tw-otherlink[aria-expanded="true"] { color: var(--tw-muted); }

.tw-openwrap[hidden] { display: none; }
.tw-openwrap .tw-fine { text-align: left; margin: 2px 0 0; }
.tw-openwrap .tw-fld:last-of-type { margin-bottom: 8px; }

/* The dates the package actually covers, spelled out. */
.tw-span {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--tw-text);
	font-variant-numeric: tabular-nums;
}
.tw-span:empty { display: none; }

/* traveller steppers */
.tw-qty {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-block: 11px;
	border-bottom: 1px solid var(--tw-line-soft);
}
.tw-qty:last-of-type { border-bottom: 0; }
.tw-qty b { display: block; font-size: 14.5px; color: var(--tw-text); font-weight: 600; }
.tw-qty small { color: var(--tw-muted); font-size: 12.5px; }

.tw-stp { display: flex; align-items: center; gap: 11px; flex: none; }
.tw-stp button {
	width: 30px;
	height: 30px;
	border: 1px solid var(--tw-border);
	background: var(--tw-surface);
	border-radius: var(--tw-radius);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	color: var(--tw-text);
}
.tw-stp button:hover:not(:disabled) { border-color: var(--tw-primary); color: var(--tw-primary); }
.tw-stp button:disabled { opacity: .34; cursor: not-allowed; }
.tw-stp output {
	min-width: 16px;
	text-align: center;
	font-weight: 600;
	color: var(--tw-text);
	font-variant-numeric: tabular-nums;
}

.tw-tot { margin-top: 15px; font-size: 14px; }
.tw-tot div { display: flex; justify-content: space-between; gap: 12px; padding-block: 4px; color: var(--tw-muted); }
.tw-tot div.tw-grand {
	margin-top: 8px;
	padding-top: 10px;
	border-top: 1px solid var(--tw-border);
	color: var(--tw-text);
	align-items: baseline;
}
.tw-tot div.tw-grand b { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* buttons */
.tw-btn {
	display: block;
	width: 100%;
	padding: 11px;
	border: 0;
	border-radius: var(--tw-radius);
	background: var(--tw-primary);
	color: var(--tw-on-primary);
	font: inherit;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
}
.tw-btn:hover { background: var(--tw-primary-dk); color: var(--tw-on-primary); }
.tw-btn:disabled { background: var(--tw-border); color: var(--tw-muted); cursor: not-allowed; }

.tw-btn--ghost {
	background: none;
	border: 1px solid var(--tw-border);
	color: var(--tw-text);
	font-weight: 500;
}
.tw-btn--ghost:hover { background: var(--tw-bg); color: var(--tw-text); }

.tw-nav2 { display: flex; gap: 9px; margin-top: 15px; }
.tw-nav2 .tw-btn { margin: 0; }
.tw-nav2 .tw-btn--ghost { flex: 0 0 92px; }

.tw-fine { font-size: 12px; color: var(--tw-muted); text-align: center; margin: 10px 0 0; }

/* payment + recap */
.tw-pay {
	display: flex;
	gap: 10px;
	align-items: center;
	border: 1px solid var(--tw-border);
	border-radius: var(--tw-radius);
	padding: 10px 12px;
	margin-bottom: 8px;
	cursor: pointer;
	font-size: 14.5px;
}
.tw-pay label { margin: 0; font-weight: 400; font-size: 14.5px; cursor: pointer; }
.tw-pay[data-on="1"] { border-color: var(--tw-primary); background: var(--tw-primary-lt); }

.tw-recap {
	background: var(--tw-bg);
	border-radius: var(--tw-radius);
	padding: 12px 14px;
	margin-bottom: 14px;
	font-size: 14px;
}
.tw-recap div { display: flex; justify-content: space-between; gap: 12px; padding-block: 3px; }
.tw-recap div span:first-child { color: var(--tw-muted); }
.tw-recap--hl { background: var(--tw-accent-lt); }

.tw-chk { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; margin-bottom: 13px; }
.tw-chk input { margin-top: 3px; flex: none; }

/* ── Notices, reviews, FAQ ──────────────────────────────────────────────── */
.tw-empty { color: var(--tw-muted); font-size: 14.5px; padding-block: 14px; }

.tw-notice {
	padding: 11px 14px;
	border-radius: var(--tw-radius);
	border: 1px solid var(--tw-border);
	border-left-width: 3px;
	margin-bottom: 16px;
	font-size: 14.5px;
}
.tw-notice--error { border-left-color: var(--tw-red); }
.tw-notice--warning { border-left-color: var(--tw-accent); }
.tw-notice--success { border-left-color: var(--tw-green); }

.tw-faq { border-bottom: 1px solid var(--tw-border); }
.tw-faq summary {
	cursor: pointer;
	padding-block: 15px;
	font-weight: 600;
	color: var(--tw-text);
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 14px;
}
.tw-faq summary::-webkit-details-marker { display: none; }
.tw-faq summary::after { content: "+"; color: var(--tw-primary); font-size: 18px; line-height: 1; }
.tw-faq[open] summary::after { content: "\2013"; }
.tw-faq p { margin: 0 0 15px; max-width: 62ch; }

.tw-stars { color: var(--tw-accent-txt, var(--tw-accent)); letter-spacing: 2px; }

.tw-review { padding-block: 18px; border-bottom: 1px solid var(--tw-line-soft); }
.tw-review:last-child { border-bottom: 0; }
.tw-review__h { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.tw-review__av {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--tw-primary);
	color: var(--tw-on-primary);
	display: grid;
	place-items: center;
	font-size: 16px;
	flex: none;
}
.tw-verified { font-size: 12px; color: var(--tw-primary); }

/* ── Enquiry form ───────────────────────────────────────────────────────── */
.tw-enquiry { max-width: 640px; }
.tw-enquiry p { margin-bottom: 13px; }
.tw-enquiry label { display: block; font-size: 12.5px; font-weight: 600; color: var(--tw-text); margin-bottom: 5px; }
.tw-enquiry input,
.tw-enquiry textarea,
.tw-enquiry select {
	width: 100%;
	padding: 9px 10px;
	border: 1px solid var(--tw-border);
	border-radius: var(--tw-radius);
	font: inherit;
	font-size: 14.5px;
	color: var(--tw-text);
	background: var(--tw-surface);
}
.tw-consent { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; }
.tw-consent input { width: auto; flex: none; margin-top: 3px; }

/* ── "Not ready to book?" — the enquiry card beside the booking form ────── */
.tw-ask {
	margin-top: 12px;
	border: 1px solid var(--tw-border);
	border-radius: var(--tw-radius);
	background: var(--tw-surface);
	overflow: hidden;
}

.tw-ask__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 13px 15px;
	cursor: pointer;
	list-style: none;
	background: var(--tw-bg);
}
.tw-ask__head::-webkit-details-marker { display: none; }
.tw-ask__head small { display: block; font-size: 12.5px; color: var(--tw-muted); margin-top: 8px; }
.tw-ask__txt { min-width: 0; }

.tw-ask__cue {
	flex: none;
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var(--tw-border);
	color: var(--tw-primary);
	font-size: 16px;
	line-height: 1;
	background: var(--tw-surface);
	transition: transform .2s;
}
.tw-ask[open] .tw-ask__cue { transform: rotate(45deg); }

.tw-ask__body { padding: 14px 15px 16px; border-top: 1px solid var(--tw-border); }

/* The rail is narrow, so the enquiry runs in one column and loses the
   generous spacing it had when it ran the width of the page. */
.tw-ask .tw-enquiry { max-width: none; }
.tw-ask .tw-enquiry p { margin: 0 0 10px; }
.tw-ask .tw-enquiry textarea { min-height: 76px; }
.tw-ask .tw-enquiry .tw-btn,
.tw-ask .tw-enquiry button[type="submit"] { width: 100%; }
.tw-ask .tw-consent { font-size: 12.5px; }

/* A rail that sticks is helpful while it is short. Once the enquiry is open
   it can outgrow the viewport, and a pinned element taller than the screen
   hides its own end. */
.tw-rail.is-tall { position: static; }

/* ── Search and filters ─────────────────────────────────────────────────── */
.tw-find { padding-block: 22px 52px; }

.tw-find__bar {
	border: 1px solid var(--tw-border);
	border-radius: var(--tw-radius-lg);
	background: var(--tw-surface);
	padding: 12px;
}

.tw-find__row { display: flex; gap: 8px; flex-wrap: wrap; }

.tw-find__kw {
	position: relative;
	flex: 1 1 260px;
	display: flex;
	align-items: center;
	min-width: 0;
}
.tw-find__kw .tw-ic {
	position: absolute;
	left: 12px;
	width: 17px;
	height: 17px;
	color: var(--tw-muted);
	pointer-events: none;
}
.tw-find__kw input {
	width: 100%;
	padding: 11px 12px 11px 37px;
	border: 1px solid var(--tw-border);
	border-radius: var(--tw-radius);
	font: inherit;
	font-size: 14.5px;
	color: var(--tw-text);
	background: var(--tw-surface);
}

.tw-find__toggle,
.tw-find__go { flex: none; }

.tw-find__more { padding-top: 12px; }
.tw-find__more[hidden] { display: none; }

.tw-find__grid {
	display: grid;
	gap: 10px;
	grid-template-columns: 1fr;
}
@media (min-width: 560px) { .tw-find__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .tw-find__grid { grid-template-columns: repeat(3, 1fr); } }

.tw-find__grid label { display: block; min-width: 0; }
.tw-find__grid label > span {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	margin-bottom: 5px;
	color: var(--tw-text);
}
.tw-find__grid input,
.tw-find__grid select {
	width: 100%;
	padding: 9px 10px;
	border: 1px solid var(--tw-border);
	border-radius: var(--tw-radius);
	font: inherit;
	font-size: 14.5px;
	color: var(--tw-text);
	background: var(--tw-surface);
}

.tw-find__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding: 18px 2px 0;
}
.tw-find__head .tw-results-count { margin: 0; font-size: 13.5px; color: var(--tw-muted); }
.tw-find__sort select {
	padding: 7px 10px;
	border: 1px solid var(--tw-border);
	border-radius: var(--tw-radius);
	font: inherit;
	font-size: 13.5px;
	color: var(--tw-text);
	background: var(--tw-surface);
}

.tw-trips-none {
	text-align: center;
	padding: 54px 20px;
	color: var(--tw-muted);
}
.tw-trips-none__ic { display: block; width: 34px; height: 34px; margin: 0 auto 12px; color: var(--tw-accent); }
.tw-trips-none__ic svg { width: 100%; height: 100%; }
.tw-trips-none p { margin: 0; max-width: 40ch; margin-inline: auto; }

.tw-pagination { display: flex; gap: 6px; justify-content: center; padding-top: 26px; flex-wrap: wrap; }
.tw-page-btn {
	min-width: 36px;
	padding: 7px 10px;
	border: 1px solid var(--tw-border);
	border-radius: var(--tw-radius);
	background: var(--tw-surface);
	color: var(--tw-text);
	font: inherit;
	font-size: 13.5px;
	cursor: pointer;
}
.tw-page-btn.active { border-color: var(--tw-primary); background: var(--tw-primary-lt); font-weight: 600; }

/* ── The trip card ──────────────────────────────────────────────────────── */
/* One card, nine arrangements. Every layout below moves these same parts
   rather than printing different markup, so what a card says never depends
   on which layout is switched on. */

.tw-t {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--tw-surface);
	border: 1px solid var(--tw-border);
	border-radius: var(--tw-radius-lg);
	overflow: hidden;
	transition: transform .28s cubic-bezier(.2, .7, .3, 1), box-shadow .28s;
}
.tw-t:hover { transform: translateY(-3px); box-shadow: 0 10px 28px -18px rgba(0, 0, 0, .5); }

.tw-t__art {
	display: block;
	position: relative;
	aspect-ratio: 3 / 2;
	background: var(--tw-bg);
	overflow: hidden;
	flex: none;
}
.tw-t__art img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.tw-t:hover .tw-t__art img { transform: scale(1.045); }

/* No photograph: a drawn horizon rather than a broken-image icon. */
.tw-t__none {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--tw-border);
	background: var(--tw-bg);
}
.tw-t__none svg { width: 44%; max-width: 92px; height: auto; }

.tw-t__flag {
	position: absolute;
	left: 11px;
	top: 11px;
	background: var(--tw-accent);
	color: var(--tw-on-accent);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 999px;
}

.tw-t__b { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 15px 16px 16px; }

.tw-t__place {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 0 0 6px;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tw-accent-txt, var(--tw-muted));
}

.tw-t__t { font-size: 18px; line-height: 1.3; margin: 0 0 7px; }
.tw-t__t a { color: inherit; text-decoration: none; }
.tw-t__t a:hover { color: var(--tw-primary); }

.tw-t__x { margin: 0 0 12px; font-size: 14px; color: var(--tw-muted); }

.tw-t__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: 0 0 14px;
	font-size: 13px;
	color: var(--tw-muted);
}
.tw-t__meta span { display: inline-flex; align-items: center; gap: 5px; }

.tw-t__f {
	margin-top: auto;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	padding-top: 13px;
	border-top: 1px solid var(--tw-line-soft);
}
.tw-t__p { margin: 0; line-height: 1.25; }
.tw-t__p del { display: block; font-size: 12.5px; color: var(--tw-muted); }
.tw-t__p b { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tw-t__p .tw-t__poa { font-size: 16px; }
.tw-t__p small { display: block; font-size: 12px; color: var(--tw-muted); }

.tw-t__cta {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 13px;
	border-radius: var(--tw-radius);
	background: var(--tw-primary);
	color: var(--tw-on-primary);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.tw-t__cta:hover { background: var(--tw-primary-dk); color: var(--tw-on-primary); }

/* ── Icon motion ────────────────────────────────────────────────────────── */
/* Small, once, on hover. Each icon does the thing it depicts: the plane
   takes off, the pin drops, the clock ticks round. */

.tw-ic { display: inline-flex; width: 14px; height: 14px; flex: none; }
.tw-ic svg { width: 100%; height: 100%; display: block; }

.tw-ic--plane { width: 13px; height: 13px; fill: currentColor; }
.tw-t:hover .tw-ic--plane { animation: tw-ic-takeoff .62s cubic-bezier(.3, 0, .2, 1); }
@keyframes tw-ic-takeoff {
	0%   { transform: rotate(45deg) translate(0, 0);       opacity: 1; }
	45%  { transform: rotate(45deg) translate(9px, -9px);  opacity: 0; }
	46%  { transform: rotate(45deg) translate(-9px, 9px);  opacity: 0; }
	100% { transform: rotate(45deg) translate(0, 0);       opacity: 1; }
}
.tw-ic--plane svg { transform: none; }

.tw-t:hover .tw-ic--pin { animation: tw-ic-drop .6s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes tw-ic-drop {
	0%   { transform: translateY(-4px); }
	55%  { transform: translateY(1.5px); }
	100% { transform: translateY(0); }
}

.tw-t:hover .tw-ic--clock { animation: tw-ic-tick .7s cubic-bezier(.3, 1.3, .5, 1); }
@keyframes tw-ic-tick {
	0%   { transform: rotate(0); }
	60%  { transform: rotate(22deg); }
	100% { transform: rotate(0); }
}

.tw-t:hover .tw-ic--cal { animation: tw-ic-flip .6s ease; }
@keyframes tw-ic-flip {
	0%   { transform: perspective(60px) rotateX(0); }
	50%  { transform: perspective(60px) rotateX(-38deg); }
	100% { transform: perspective(60px) rotateX(0); }
}

/* Cards settle in as they arrive rather than appearing all at once. The
   index comes from the template, so the stagger follows reading order. */
.tw-trips .tw-t { animation: tw-t-in .5s cubic-bezier(.2, .7, .3, 1) backwards; animation-delay: calc(var(--tw-i, 0) * 45ms); }
@keyframes tw-t-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.tw-t,
	.tw-t__art img,
	.tw-trips .tw-t { transition: none; animation: none; }
	.tw-t:hover { transform: none; }
	.tw-t:hover .tw-t__art img { transform: none; }
	.tw-t:hover .tw-ic--plane,
	.tw-t:hover .tw-ic--pin,
	.tw-t:hover .tw-ic--clock,
	.tw-t:hover .tw-ic--cal { animation: none; }
}

/* ── Layout 1 · Grid ────────────────────────────────────────────────────── */
.tw-trips { padding-top: 20px; }

.tw-trips--grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .tw-trips--grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .tw-trips--grid { grid-template-columns: repeat(3, 1fr); } }

/* ── Layout 2 · List ────────────────────────────────────────────────────── */
.tw-trips--list { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 680px) {
	.tw-trips--list .tw-t { flex-direction: row; }
	.tw-trips--list .tw-t__art { width: 264px; aspect-ratio: auto; }
	.tw-trips--list .tw-t__b { padding: 18px 20px; }
	.tw-trips--list .tw-t__t { font-size: 20px; }
	.tw-trips--list .tw-t__x { max-width: 62ch; }
}

/* ── Layout 3 · Timeline ────────────────────────────────────────────────── */
.tw-trips--timeline { position: relative; display: flex; flex-direction: column; gap: 14px; padding-left: 38px; }

.tw-trips__spine {
	position: absolute;
	left: 13px;
	top: 26px;
	bottom: 26px;
	width: 2px;
	background: var(--tw-border);
	border-radius: 2px;
}
.tw-trips__spine i { display: block; width: 100%; height: 0; background: var(--tw-primary); border-radius: 2px; }

.tw-trips__plane {
	position: absolute;
	left: -10px;
	top: 0;
	width: 22px;
	height: 22px;
	color: var(--tw-primary);
	transform: translateY(0);
	will-change: transform;
}
.tw-trips__plane svg { width: 100%; height: 100%; display: block; fill: currentColor; transform: rotate(180deg); }

.tw-trips--timeline .tw-t::before {
	content: "";
	position: absolute;
	left: -30px;
	top: 26px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--tw-surface);
	border: 2px solid var(--tw-accent);
	z-index: 1;
	transition: background .25s, border-color .25s;
}
.tw-trips--timeline .tw-t.is-passed::before { border-color: var(--tw-primary); background: var(--tw-primary); }

@media (min-width: 860px) {
	.tw-trips--timeline { padding-left: 0; }
	.tw-trips__spine { left: 50%; margin-left: -1px; }
	.tw-trips--timeline .tw-t { width: calc(50% - 32px); }
	.tw-trips--timeline .tw-t:nth-of-type(even) { margin-left: auto; }
	.tw-trips--timeline .tw-t:nth-of-type(odd)::before  { left: auto; right: -38px; }
	.tw-trips--timeline .tw-t:nth-of-type(even)::before { left: -38px; right: auto; }
}

/* ── Layout 4 · Masonry ─────────────────────────────────────────────────── */
.tw-trips--masonry { columns: 1; column-gap: 20px; }
@media (min-width: 640px)  { .tw-trips--masonry { columns: 2; } }
@media (min-width: 1000px) { .tw-trips--masonry { columns: 3; } }
.tw-trips--masonry .tw-t { break-inside: avoid; margin-bottom: 20px; display: inline-flex; width: 100%; }
/* Varying the crop is what makes the columns stagger at all. */
.tw-trips--masonry .tw-t:nth-child(3n+1) .tw-t__art { aspect-ratio: 4 / 5; }
.tw-trips--masonry .tw-t:nth-child(3n+2) .tw-t__art { aspect-ratio: 3 / 2; }
.tw-trips--masonry .tw-t:nth-child(3n+3) .tw-t__art { aspect-ratio: 1 / 1; }

/* ── Layout 5 · Magazine ────────────────────────────────────────────────── */
.tw-trips--magazine { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 760px) {
	.tw-trips--magazine { grid-template-columns: 1fr 1fr; }
	.tw-trips--magazine .tw-t:first-child { grid-column: 1 / -1; flex-direction: row; }
	.tw-trips--magazine .tw-t:first-child .tw-t__art { width: 56%; aspect-ratio: auto; }
	.tw-trips--magazine .tw-t:first-child .tw-t__b { padding: 26px 28px; justify-content: center; }
	.tw-trips--magazine .tw-t:first-child .tw-t__t { font-size: 27px; }
	.tw-trips--magazine .tw-t:first-child .tw-t__x { font-size: 15px; max-width: 48ch; }
	/* Centre the feature's text rather than letting the auto margin strand
	   the price at the foot of a tall column. */
	.tw-trips--magazine .tw-t:first-child .tw-t__f { margin-top: 20px; }
}
@media (min-width: 1040px) { .tw-trips--magazine { grid-template-columns: repeat(3, 1fr); } }

/* ── Layout 6 · Carousel ────────────────────────────────────────────────── */
.tw-trips--carousel {
	display: flex;
	gap: 18px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	padding-bottom: 6px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.tw-trips--carousel::-webkit-scrollbar { width: 0; height: 0; display: none; }
.tw-trips--carousel .tw-t { flex: 0 0 min(300px, 82vw); scroll-snap-align: start; }

/* ── Layout 7 · Compact ─────────────────────────────────────────────────── */
.tw-trips--compact { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--tw-border); border-radius: var(--tw-radius-lg); overflow: hidden; }
.tw-trips--compact .tw-t { border: 0; border-radius: 0; border-bottom: 1px solid var(--tw-line-soft); flex-direction: row; align-items: stretch; }
.tw-trips--compact .tw-t:last-child { border-bottom: 0; }
.tw-trips--compact .tw-t:hover { transform: none; box-shadow: none; background: var(--tw-bg); }
.tw-trips--compact .tw-t__art { width: 104px; aspect-ratio: auto; }
.tw-trips--compact .tw-t__flag { left: 6px; top: 6px; font-size: 10px; padding: 2px 6px; }
.tw-trips--compact .tw-t__b { padding: 12px 15px; flex-direction: row; align-items: center; gap: 16px; flex-wrap: wrap; }
.tw-trips--compact .tw-t__x { display: none; }
.tw-trips--compact .tw-t__place { margin: 0; }
.tw-trips--compact .tw-t__t { flex: 1 1 180px; margin: 0; font-size: 16px; }
.tw-trips--compact .tw-t__meta { margin: 0; }
.tw-trips--compact .tw-t__f { margin: 0; padding: 0; border: 0; gap: 14px; align-items: center; }

/* ── Layout 8 · Postcard ────────────────────────────────────────────────── */
.tw-trips--postcard { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 620px)  { .tw-trips--postcard { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .tw-trips--postcard { grid-template-columns: repeat(3, 1fr); } }

.tw-trips--postcard .tw-t { border: 0; }
.tw-trips--postcard .tw-t__art { position: absolute; inset: 0; aspect-ratio: auto; width: 100%; height: 100%; }
.tw-trips--postcard .tw-t__art::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .34) 44%, rgba(0, 0, 0, .05) 100%);
}
.tw-trips--postcard .tw-t__b {
	position: relative;
	z-index: 1;
	min-height: 320px;
	justify-content: flex-end;
	padding: 18px;
	color: #fff;
}
.tw-trips--postcard .tw-t__t,
.tw-trips--postcard .tw-t__t a,
.tw-trips--postcard .tw-t__p b { color: #fff; }
.tw-trips--postcard .tw-t__place { color: var(--tw-accent); }
.tw-trips--postcard .tw-t__x,
.tw-trips--postcard .tw-t__meta,
.tw-trips--postcard .tw-t__p small { color: rgba(255, 255, 255, .84); }
/* The whole text block sits at the foot of the picture, where the gradient
   is darkest. Without this the auto margin on the footer strands the title
   up against the sky. */
.tw-trips--postcard .tw-t__f { margin-top: 14px; border-top-color: rgba(255, 255, 255, .26); }
.tw-trips--postcard .tw-t__x { margin-bottom: 10px; }
.tw-trips--postcard .tw-t__meta { margin-bottom: 0; }
.tw-trips--postcard .tw-t__flag { left: auto; right: 11px; }
.tw-trips--postcard .tw-t__none { color: rgba(255, 255, 255, .3); }

/* ── Layout 9 · Mosaic ──────────────────────────────────────────────────── */
.tw-trips--mosaic { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px) {
	/* A six-card cycle of 2-1-1-1-1-2 spans exactly two rows of four, so the
	   pattern repeats without leaving a hole at the end of a row. */
	.tw-trips--mosaic { grid-template-columns: repeat(4, 1fr); align-items: start; }
	.tw-trips--mosaic .tw-t { grid-column: span 1; }
	.tw-trips--mosaic .tw-t:nth-of-type(6n+1),
	.tw-trips--mosaic .tw-t:nth-of-type(6n+6) { grid-column: span 2; }
	.tw-trips--mosaic .tw-t:nth-of-type(6n+2) .tw-t__art,
	.tw-trips--mosaic .tw-t:nth-of-type(6n+3) .tw-t__art,
	.tw-trips--mosaic .tw-t:nth-of-type(6n+4) .tw-t__art,
	.tw-trips--mosaic .tw-t:nth-of-type(6n+5) .tw-t__art { aspect-ratio: 1 / 1; }
	.tw-trips--mosaic .tw-t:nth-of-type(6n+2) .tw-t__x,
	.tw-trips--mosaic .tw-t:nth-of-type(6n+3) .tw-t__x,
	.tw-trips--mosaic .tw-t:nth-of-type(6n+4) .tw-t__x,
	.tw-trips--mosaic .tw-t:nth-of-type(6n+5) .tw-t__x { display: none; }
}

/* ── The flight between the listing and a trip ──────────────────────────── */
/* Retimed in 1.8.2: the plane lands at 640ms and the page is asked for at
   720ms, with the target prefetched on hover, so the arrival and the new page
   coincide instead of one following the other. */

/* Fade the new page in from the overlay rather than flashing white between
   them. Browsers without cross-document view transitions ignore this. */
@view-transition { navigation: auto; }

.tw-fly {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: grid;
	place-items: center;
	background: var(--tw-bg);
	opacity: 0;
	visibility: hidden;
	transition: opacity .14s ease, visibility 0s linear .14s;
}
.tw-fly.is-on {
	opacity: 1;
	visibility: visible;
	transition: opacity .14s ease;
}

/* ── Sky ────────────────────────────────────────────────────────────────── */
.tw-fly__sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

.tw-fly__cloud {
	position: absolute;
	display: block;
	border-radius: 999px;
	background: var(--tw-surface);
	opacity: 0;
}
.tw-fly__cloud::before,
.tw-fly__cloud::after {
	content: "";
	position: absolute;
	bottom: 0;
	border-radius: 999px;
	background: inherit;
}
.tw-fly__cloud--1 { width: 190px; height: 44px; left: 4%;  top: 18%; }
.tw-fly__cloud--1::before { width: 96px; height: 96px; left: 28px; bottom: 8px; }
.tw-fly__cloud--1::after  { width: 64px; height: 64px; left: 104px; bottom: 14px; }
.tw-fly__cloud--2 { width: 140px; height: 34px; right: 6%; top: 30%; }
.tw-fly__cloud--2::before { width: 74px; height: 74px; left: 20px; bottom: 6px; }
.tw-fly__cloud--2::after  { width: 48px; height: 48px; left: 76px; bottom: 10px; }
.tw-fly__cloud--3 { width: 220px; height: 50px; left: 22%; bottom: 12%; }
.tw-fly__cloud--3::before { width: 108px; height: 108px; left: 34px; bottom: 8px; }
.tw-fly__cloud--3::after  { width: 72px; height: 72px; left: 128px; bottom: 16px; }

.tw-fly.is-on .tw-fly__cloud { animation: tw-fly-drift 1.5s cubic-bezier(.2, .7, .3, 1) forwards; }
.tw-fly.is-on .tw-fly__cloud--2 { animation-delay: .06s; }
.tw-fly.is-on .tw-fly__cloud--3 { animation-delay: .12s; }
@keyframes tw-fly-drift {
	0%   { opacity: 0;   transform: translateX(40px); }
	28%  { opacity: .55; }
	100% { opacity: .55; transform: translateX(-24px); }
}

/* ── Route ──────────────────────────────────────────────────────────────── */
.tw-fly__in { position: relative; width: min(460px, 86vw); text-align: center; }

.tw-fly__map { width: 100%; height: auto; display: block; overflow: visible; }

.tw-fly__arc {
	stroke: var(--tw-accent);
	stroke-width: 1.6;
	stroke-dasharray: 3 5;
	opacity: .75;
	stroke-dashoffset: 340;
}
.tw-fly.is-on .tw-fly__arc { animation: tw-fly-draw .6s cubic-bezier(.35, 0, .3, 1) forwards; }
@keyframes tw-fly-draw { to { stroke-dashoffset: 0; } }

.tw-fly__from { fill: var(--tw-muted); }

/* The inner group carries no translate attribute, so it is safe to scale
   from the pin's point rather than its middle. */
.tw-fly__pin { fill: var(--tw-primary); opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
.tw-fly__pinhole { fill: var(--tw-bg); }
.tw-fly.is-on .tw-fly__pin { animation: tw-fly-land .3s cubic-bezier(.3, 1.6, .5, 1) .44s forwards; }
@keyframes tw-fly-land {
	0%   { opacity: 0; transform: translateY(-11px) scale(.55); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

.tw-fly__plane {
	fill: var(--tw-primary);
	transform-box: fill-box;
	scale: 1.35;
	offset-path: path("M20 104 Q 170 6 300 66");
	offset-rotate: auto 90deg;
	offset-distance: 0%;
}
.tw-fly.is-on .tw-fly__plane { animation: tw-fly-go .64s cubic-bezier(.35, 0, .3, 1) forwards; }
@keyframes tw-fly-go {
	0%   { offset-distance: 0%;   opacity: 0; }
	14%  {                        opacity: 1; }
	86%  {                        opacity: 1; }
	100% { offset-distance: 100%; opacity: 0; }
}

/* Where offset-path is not available the plane simply crosses the map. The
   arc still draws and the pin still lands, so the moment reads the same. */
@supports not (offset-path: path("M0 0 L1 1")) {
	.tw-fly__plane { transform: translate(20px, 104px); }
	.tw-fly.is-on .tw-fly__plane { animation: tw-fly-cross .64s cubic-bezier(.35, 0, .3, 1) forwards; }
	@keyframes tw-fly-cross {
		0%   { transform: translate(20px, 104px) rotate(-38deg); opacity: 0; }
		14%  { opacity: 1; }
		86%  { opacity: 1; }
		100% { transform: translate(300px, 66px) rotate(22deg);  opacity: 0; }
	}
}

/* ── Boarding pass ──────────────────────────────────────────────────────── */
/* What used to be empty space. The same facts the card showed, so the moment
   confirms the choice rather than interrupting it. */

.tw-fly__pass {
	display: flex;
	align-items: stretch;
	gap: 0;
	margin-top: 10px;
	text-align: left;
	background: var(--tw-surface);
	border: 1px solid var(--tw-border);
	border-radius: var(--tw-radius-lg);
	overflow: hidden;
	box-shadow: 0 16px 40px -26px rgba(0, 0, 0, .55);
	opacity: 0;
}
.tw-fly.is-on .tw-fly__pass { animation: tw-fly-pass .42s cubic-bezier(.2, .8, .3, 1) .1s forwards; }
@keyframes tw-fly-pass {
	from { opacity: 0; transform: translateY(14px) scale(.985); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

.tw-fly__art {
	flex: none;
	width: 84px;
	background: var(--tw-bg) center / cover no-repeat;
}
.tw-fly__art.is-empty { background-image: linear-gradient(140deg, var(--tw-primary-lt), var(--tw-accent-lt)); }

.tw-fly__meat { flex: 1; min-width: 0; padding: 12px 14px; }

.tw-fly__route {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 4px;
	font-size: 11.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tw-muted);
}
.tw-fly__route b { color: var(--tw-text); font-weight: 700; letter-spacing: .06em; }
.tw-fly__route .tw-fly__from-l:empty { display: none; }

.tw-fly__dash { flex: 1; position: relative; height: 12px; min-width: 26px; }
.tw-fly__dash::before {
	content: "";
	position: absolute;
	inset: 50% 0 auto;
	height: 1px;
	border-top: 1px dashed var(--tw-border);
}
.tw-fly__dash svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 12px;
	height: 12px;
	fill: var(--tw-primary);
	transform: rotate(90deg);
}
.tw-fly.is-on .tw-fly__dash svg { animation: tw-fly-taxi .8s cubic-bezier(.4, 0, .3, 1) .16s forwards; }
@keyframes tw-fly-taxi {
	from { left: 0; }
	to   { left: calc(100% - 12px); }
}

.tw-fly__title {
	margin: 0 0 3px;
	font-family: var(--tw-font-heading, inherit);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--tw-text);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.tw-fly__meta { margin: 0; font-size: 12.5px; color: var(--tw-muted); }

/* The tear-off stub, because a boarding pass without one is a card. */
.tw-fly__stub {
	flex: none;
	width: 56px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 10px 6px;
	border-left: 1px dashed var(--tw-border);
	background: var(--tw-bg);
}
.tw-fly__bars {
	width: 26px;
	height: 30px;
	background: repeating-linear-gradient(
		90deg,
		var(--tw-text) 0 1px,
		transparent 1px 3px,
		var(--tw-text) 3px 5px,
		transparent 5px 6px
	);
	opacity: .7;
}
.tw-fly__seat { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--tw-muted); }
.tw-fly__seat:empty { display: none; }

@media (max-width: 420px) {
	.tw-fly__art  { width: 64px; }
	.tw-fly__stub { display: none; }
}

/* Belt and braces: the script bails out on reduced motion before it builds
   anything, and if it ever did not, nothing here would move. */
@media (prefers-reduced-motion: reduce) {
	.tw-fly { display: none; }
}

/* ── Photo strip: layouts for 1–5 photos, and the photo viewer ─────────── */
.tw-strip--1 { grid-template-columns: 1fr; grid-template-rows: 1fr; height: 300px; }
.tw-strip--2 { grid-template-columns: 2fr 1fr; }
.tw-strip--2 figure:nth-child(2) { grid-row: span 2; }
.tw-strip--3 { grid-template-columns: 2fr 1fr; }
.tw-strip--4 { grid-template-columns: 2fr 1fr 1fr; }
.tw-strip--4 figure:nth-child(4) { grid-row: span 2; grid-column: 3; grid-row-start: 1; }
.tw-strip__btn { all: unset; position: relative; display: block; width: 100%; height: 100%; cursor: zoom-in; }
.tw-strip__btn:focus-visible { outline: 3px solid var(--tw-primary); outline-offset: -3px; }
.tw-strip__btn img { transition: transform .35s ease; }
.tw-strip__btn:hover img { transform: scale(1.04); }
.tw-strip__more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.45); color: #fff; font-weight: 700; font-size: 1.05rem; }
@media (max-width: 640px) {
	.tw-strip--1 { height: 210px; }
	.tw-strip figure:nth-child(n+4) { display: none; }
	.tw-strip--4 figure:nth-child(4) { display: none; }
}

.tw-lightbox { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 48px 16px; background: rgba(12,10,10,.92); }
.tw-lightbox[hidden] { display: none; }
.tw-lightbox__fig { margin: 0; max-width: min(1100px, 100%); max-height: 100%; display: flex; flex-direction: column; align-items: center; }
.tw-lightbox__fig img { max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.tw-lightbox__count { margin-top: 10px; color: #e9e2df; font-size: .9rem; font-variant-numeric: tabular-nums; }
.tw-lightbox__close, .tw-lightbox__nav { border: 0; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; border-radius: 50%; line-height: 1; }
.tw-lightbox__close { position: absolute; top: 14px; right: 16px; width: 44px; height: 44px; font-size: 28px; }
.tw-lightbox__nav { flex: none; width: 48px; height: 48px; font-size: 32px; }
.tw-lightbox__close:hover, .tw-lightbox__nav:hover, .tw-lightbox__close:focus-visible, .tw-lightbox__nav:focus-visible { background: var(--tw-primary); outline: none; }
@media (max-width: 640px) {
	.tw-lightbox__nav { position: absolute; bottom: 18px; }
	.tw-lightbox__nav--prev { left: calc(50% - 60px); }
	.tw-lightbox__nav--next { right: calc(50% - 60px); }
}
.tw-strip { position: relative; }
.tw-strip__all { display: none; }
@media (max-width: 640px) {
	.tw-strip__all { display: block; position: absolute; right: 8px; bottom: 8px; border: 0; border-radius: 999px; padding: 6px 12px; background: rgba(0,0,0,.65); color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; }
	.tw-strip__more { display: none; }
}