/*
 * header.css: the site header (template-parts/site-header.php, header-mega-menu.php,
 * header-mobile.php). Loaded on every page.
 *
 * Breakpoints are the old site's: the desktop bar shows from 1025px, the phone and
 * tablet bar at 1024px and below; 1366px and below is "tablet extra", where the mega
 * menu opens on click instead of hover and some spacing changes; 767px and below is phone.
 * Sizes, colours and timings were measured from the Elementor header, not guessed.
 */

/* ---------- Shared ---------- */

/* The old menu plugin set this on every page, so nothing wider than the window (the
   1500px destinations row, the slide-out menu) ever gives the page a sideways scroll. */
body {
	overflow-x: hidden;
}

/* Off-screen text for screen readers, positioned exactly as the old widgets did. */
.chrome-sr-only {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	top: -10000em;
	width: 1px;
}

/* The base theme styles narrow .site-header boxes; this header is full width. */
header.site-header.design-region {
	display: block;
	margin: 0;
	max-width: none;
	padding: 0;
	width: auto;
}

/* ---------- Desktop bar (1025px and up) ---------- */

.site-header__bar {
	background-color: #161615;
	display: flex;
	flex-direction: column;
	max-width: 100%;
	position: relative;
	width: 100%;
	z-index: 100;
}

.site-header__top {
	background-color: #161615;
	display: flex;
	flex-direction: row;
	padding: 10px 15px 14px;
	position: relative;
	width: 100%;
	z-index: 100;
}

.site-header__main {
	align-items: center;
	display: flex;
	flex: 0 1 auto;
	flex-direction: row;
	gap: 20px;
	justify-content: flex-start;
	min-width: 0;
	padding: 23px 0 5px;
	position: relative;
	width: 100%;
	z-index: 100;
}

.site-header__nav-row {
	align-items: center;
	display: flex;
	flex: 0 1 auto;
	flex-direction: row;
	gap: 20px;
	justify-content: flex-start;
	min-width: 0;
	position: relative;
	width: 100%;
	z-index: 100;
}

.site-header__spacer {
	flex: 0 1 auto;
	height: 28px;
	min-width: 0;
	width: 110px;
}

.site-header__spacer--strip {
	width: 130px;
}

.site-header__logo {
	display: block;
	left: 11px;
	line-height: 0;
	position: absolute;
	top: 0;
	width: 118px;
	z-index: 2;
}

.site-header__logo img {
	display: inline-block;
	vertical-align: middle;
	width: 118px;
}

.site-header__actions {
	align-items: center;
	display: flex;
	flex: 0 1 auto;
	flex-direction: row;
	gap: 20px;
	justify-content: flex-end;
	min-width: 0;
	position: relative;
	width: 19%;
	z-index: 100;
}

/* Quick Quote: the site's button style (radius, shadow bloom). The hover fill and its
   transitions are shared by every button: base.css, section 7. */
.site-header__quote-wrap {
	min-width: 0;
	position: relative;
	text-align: left;
	z-index: 1;
}

.site-header__quote {
	background-color: #1B8ACF;
	border-radius: var(--button-radius);
	color: #fff;
	display: inline-block;
	fill: #fff;
	font-family: "brother-1816", Sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	padding: 10px 40px;
	text-align: center;
}

.site-header__quote:visited {
	color: #fff;
}

/* A click leaves focus behind; the old button turned white then. */
.site-header__quote:focus {
	background-color: #fff;
	color: #161615;
}

.site-header__quote:hover,
.site-header__quote:focus-visible {
	box-shadow: 0 8px 24px -6px rgba(27, 138, 207, .55);
	color: #fff;
}

.site-header__quote:focus-visible {
	outline: 2px solid #3171B5;
	outline-offset: 3px;
}

.site-header__quote:active {
	box-shadow: 0 2px 8px -3px rgba(27, 138, 207, .5);
	transition-duration: .08s;
}

@media (max-width: 1366px) {
	.site-header__actions {
		width: 23%;
	}
}

/* Blue strip: call line and search. */
.site-header__strip {
	background-color: #1B8ACF;
	display: flex;
	flex-direction: row;
	padding: 15px;
	position: relative;
	width: 100%;
	z-index: 99;
}

.site-header__strip-start,
.site-header__strip-end {
	align-items: center;
	display: flex;
	flex: 0 1 auto;
	flex-direction: row;
	gap: 20px;
	min-width: 0;
	position: relative;
	z-index: 99;
}

.site-header__strip-start {
	justify-content: flex-start;
	width: 70%;
}

.site-header__strip-end {
	justify-content: flex-end;
	width: 30%;
}

.site-header__call {
	align-items: center;
	display: flex;
	margin: 0;
	min-width: 0;
	position: relative;
}

.site-header__call-icon {
	display: flex;
	position: relative;
}

.site-header__call-icon svg {
	fill: #fff;
	height: 14px;
	margin: 0 3.5px 0 0;
	transition: fill .3s;
	width: 14px;
}

.site-header__call-text {
	align-self: center;
	color: #fff;
	font-family: "brother-1816", Sans-serif;
	font-weight: 400;
	padding-inline-start: 5px;
	transition: color .3s;
}

.site-header__search-icon {
	display: block;
	line-height: 1.5;
	min-width: 0;
	position: relative;
	text-align: center;
}

.site-header__search-icon svg {
	display: inline-block;
	fill: #fff;
	height: 13px;
	position: relative;
	vertical-align: baseline;
	width: 13px;
}

/* Header search: hotels only (a site-wide rule elsewhere limits every search to hotels). */
.header-search {
	display: flex;
	flex: 0 0 auto;
	max-width: 210px;
	min-width: 0;
	position: relative;
	width: 210px;
}

.header-search__label {
	display: flex;
	line-height: 1;
	position: relative;
	vertical-align: middle;
	z-index: 10;
}

.header-search__field {
	display: flex;
	flex: 1;
	flex-direction: column;
	position: relative;
	transition: .3s;
}

.header-search .header-search__input,
.header-search .header-search__input:focus {
	background-color: transparent;
	border: none;
	border-radius: 3px;
	color: #fff;
	display: block;
	height: 100%; /* not auto: Chrome places the text 1px lower with an explicit height */
	min-height: 24px;
	outline: none;
	padding: 0;
	transition: padding-inline 0s;
	width: 100%;
}

.header-search .header-search__input:focus {
	transition: .3s;
}

.header-search__input::placeholder {
	color: #fff;
}

.header-search__input::-webkit-search-cancel-button,
.header-search__input::-webkit-search-decoration,
.header-search__input::-webkit-search-results-button,
.header-search__input::-webkit-search-results-decoration {
	display: none;
}

/* Suggestions as you type (header-search.js): a white card under the box, wider than it
   and lined up with its right edge, destinations as pills, hotels with a thumbnail. */
.header-search__panel {
	background: #fff;
	border-radius: 13px;
	box-shadow: 0 0 0 1px rgba(22, 22, 21, .06), 0 28px 56px -24px rgba(22, 22, 21, .45);
	color: #161615;
	font-family: "brother-1816", Sans-serif;
	inset-inline-end: 0;
	max-height: min(70vh, 560px);
	overflow-y: auto;
	padding: 14px 10px 10px;
	position: absolute;
	text-align: start;
	top: calc(100% + 14px);
	width: 380px;
	z-index: 2000;
}

.header-search__panel:not([hidden]) {
	animation: search-suggest-in .22s cubic-bezier(.2, .7, .2, 1);
}

@keyframes search-suggest-in {
	from { opacity: 0; translate: 0 -6px; }
}

.search-suggest__label {
	color: #3171B5;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .22em;
	line-height: 1;
	margin: 4px 8px 10px;
	text-transform: uppercase;
}

.search-suggest__places,
.search-suggest__hotels {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
}

.search-suggest__places {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0 8px;
}

.site-header .search-suggest__place {
	border: 1px solid #C9D9E6;
	border-radius: 999px;
	color: #161615;
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	padding: 9px 14px;
	transition: background-color .2s, border-color .2s, color .2s;
}

.search-suggest__place span {
	color: #6E6F70;
	font-weight: 400;
	margin-inline-start: 4px;
	transition: color .2s;
}

.site-header .search-suggest__place:hover,
.site-header .search-suggest__place:focus-visible {
	background: #161615;
	border-color: #161615;
	color: #fff;
	outline: 0;
}

.search-suggest__place:hover span,
.search-suggest__place:focus-visible span {
	color: #C9CBCC;
}

.site-header .search-suggest__hotel {
	align-items: center;
	border-radius: 10px;
	color: #161615;
	display: flex;
	gap: 12px;
	padding: 7px 8px;
	transition: background-color .2s;
}

.site-header .search-suggest__hotel:hover,
.site-header .search-suggest__hotel:focus-visible {
	background: #F4F7F9;
	outline: 0;
}

.site-header .search-suggest__hotel:focus-visible {
	box-shadow: inset 0 0 0 2px #1B8ACF;
}

.search-suggest__thumb {
	background: #E8F3FB;
	border-radius: 8px;
	flex: none;
	height: 48px;
	object-fit: cover;
	width: 48px;
}

.search-suggest__text {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.search-suggest__name {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
}

.search-suggest__where {
	color: #3171B5;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .18em;
	line-height: 1;
	text-transform: uppercase;
}

.site-header .search-suggest__all {
	border-top: 1px solid #E3E8EC;
	color: #3171B5;
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .18em;
	line-height: 1;
	margin: 0 -10px -10px;
	padding: 16px 18px;
	text-transform: uppercase;
	transition: background-color .2s, color .2s;
}

.site-header .search-suggest__all::after {
	content: " \2192";
}

.site-header .search-suggest__all:hover,
.site-header .search-suggest__all:focus-visible {
	background: #161615;
	color: #fff;
	outline: 0;
}

.search-suggest__none {
	color: #4A4F52;
	font-size: 14px;
	line-height: 1.5;
	margin: 2px 8px 6px;
}

@media (prefers-reduced-motion: reduce) {
	.header-search__panel:not([hidden]) {
		animation: none;
	}
}

.header-search__submit {
	background-color: #2d2d2d;
	border-radius: 0;
	color: #fff;
	padding: 24px;
}

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

.mega-menu {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	max-width: 100%;
	min-width: 0;
	position: relative;
	width: 0;
}

.mega-menu__list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mega-menu__item {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: left;
}

.mega-menu__title {
	align-items: center;
	color: #fff;
	display: flex;
	flex-direction: row;
	font-family: "brother-1816", Sans-serif;
	font-weight: 700;
	padding: 8px 16px;
	position: relative;
	text-transform: uppercase;
	user-select: none;
	white-space: nowrap;
}

.mega-menu__title-label {
	align-items: center;
	align-self: center;
	color: #1B8ACF;
	cursor: default;
	display: flex;
	gap: 5px;
}

a.mega-menu__title-label {
	cursor: pointer;
}

.mega-menu__title-text {
	align-items: center;
	color: #fff;
	display: flex;
	font-size: 14px;
	line-height: 1.5;
}

.mega-menu__title:hover .mega-menu__title-text {
	color: #1B8ACF;
}

.mega-menu__toggle,
.mega-menu__toggle:hover,
.mega-menu__toggle:focus {
	align-self: center;
	background-color: transparent;
	border: none;
	border-radius: 3px;
	color: inherit;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	font-size: 16px;
	font-weight: 400;
	height: 21px;
	justify-content: center;
	line-height: 1.5;
	margin: 0 0 0 5px;
	padding: 0;
	position: relative;
	text-align: center;
	transition: all .3s;
	user-select: none;
	white-space: nowrap;
	width: fit-content;
}

.mega-menu__toggle:focus:not(:focus-visible) {
	outline: none;
}

.mega-menu__caret {
	display: flex;
}

.mega-menu__caret svg {
	fill: #fff;
	height: 14px;
	transition: all .3s;
	width: 14px;
}

.mega-menu__title:hover .mega-menu__caret svg {
	fill: #1B8ACF;
}

.mega-menu__toggle[aria-expanded="false"] .mega-menu__caret--open,
.mega-menu__toggle[aria-expanded="true"] .mega-menu__caret--closed {
	display: none;
}

/* The dropdown spans the whole window under the header. Its top 77px is a transparent
   bridge (the panel's top margin) that keeps the panel open while the pointer crosses
   the rest of the header. header.js sets --mega-left and --mega-width. */
.mega-menu__dropdown {
	background-color: transparent;
	display: flex;
	flex-direction: column;
	left: var(--mega-left, -145px);
	min-width: 0;
	position: absolute;
	top: 100%;
	width: var(--mega-width, 100vw);
	z-index: 2147483620;
}

.mega-menu__panel {
	background-color: #161615;
	border-bottom: 3px solid #1B8ACF;
	box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .42);
	display: none;
	flex-direction: column;
	margin-top: 77px;
	max-width: 100%;
	opacity: 0;
	position: relative;
	transition: opacity .18s ease-in, display .18s allow-discrete;
	width: 100%;
}

/* Opening (Luke, 10 October 2026, replacing Elementor's plain 200ms fade): the panel
   unrolls downwards from under the header, its columns rise into place one after another,
   then the phone strip fades in. Closing fades out over 180ms; browsers that cannot
   transition display close at once, as before. The resting state is unchanged. */
.mega-menu__item.is-open .mega-menu__panel {
	animation: mega-menu-unroll .6s cubic-bezier(.22, 1, .36, 1);
	display: flex;
	opacity: 1;
}

/* A closing panel no longer catches the pointer, nor does the empty bridge above it. */
.mega-menu__item:not(.is-open) .mega-menu__dropdown {
	pointer-events: none;
}

.mega-menu__item.is-open .mega-destinations__column,
.mega-menu__item.is-open .mega-experiences__column {
	animation: mega-menu-rise .6s cubic-bezier(.16, 1, .3, 1) backwards;
	animation-delay: calc(.08s + var(--mega-step, 0) * .05s);
}

.mega-destinations__column:nth-child(2), .mega-experiences__column:nth-child(2) { --mega-step: 1; }
.mega-destinations__column:nth-child(3), .mega-experiences__column:nth-child(3) { --mega-step: 2; }
.mega-destinations__column:nth-child(4), .mega-experiences__column:nth-child(4) { --mega-step: 3; }
.mega-destinations__column:nth-child(5), .mega-experiences__column:nth-child(5) { --mega-step: 4; }
.mega-destinations__column:nth-child(n+6), .mega-experiences__column:nth-child(n+6) { --mega-step: 5; }

.mega-menu__item.is-open .mega-menu__strip {
	animation: mega-menu-fade .5s ease-out .3s backwards;
}

@keyframes mega-menu-unroll {
	from { clip-path: inset(0 -20px 100% -20px); opacity: 0; }
	35% { opacity: 1; }
	to { clip-path: inset(0 -20px -20px -20px); opacity: 1; }
}

@keyframes mega-menu-rise {
	from { opacity: 0; translate: 0 16px; }
}

@keyframes mega-menu-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.mega-menu__item.is-open .mega-menu__panel,
	.mega-menu__item.is-open .mega-destinations__column,
	.mega-menu__item.is-open .mega-experiences__column,
	.mega-menu__item.is-open .mega-menu__strip {
		animation: none;
	}
}

.mega-menu__panel--destinations {
	align-items: center;
	z-index: 10;
}

.mega-menu__panel--experiences {
	padding: 0;
	z-index: 100;
}

/* Image + link, as the old image widget (inline-block link, middle-aligned image). */
.mega-menu__image {
	line-height: 1.5;
	position: relative;
	text-align: center;
}

.mega-menu__image a {
	display: inline-block;
}

.mega-menu__image img {
	border-bottom: 3px solid #1B8ACF;
	display: inline-block;
	vertical-align: middle;
}

.mega-menu__heading {
	color: #fff;
	font-family: "brother-1816", Sans-serif;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 3.9px;
	line-height: 1;
	margin: 0;
	padding: 0;
	text-align: left;
	text-transform: uppercase;
}

.mega-menu__heading a {
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

.mega-menu__heading a:hover,
.mega-menu__heading a:focus {
	color: #1B8ACF;
}

@media (max-width: 1366px) {
	.mega-menu__heading {
		font-size: 16px;
	}
}

@media (max-width: 767px) {
	.mega-menu__heading {
		font-size: 20px;
		line-height: 1.4em;
	}
}

/* Destinations panel: five columns, then the grey call bar. */
.mega-destinations {
	display: flex;
	flex: 0 1 auto;
	flex-direction: row;
	gap: 20px;
	min-width: 0;
	padding: 50px 0;
	position: relative;
	width: 1500px;
	z-index: 10;
}

.mega-destinations__column {
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	min-width: 0;
	position: relative;
	width: 100%;
	z-index: 10;
}

.mega-destinations__body {
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
	padding: 30px 20px 20px;
	position: relative;
	width: 100%;
	z-index: 10;
}

@media (max-width: 1366px) {
	.mega-destinations {
		padding: 50px 20px;
		width: 100%;
	}

	.mega-destinations__body {
		padding: 30px 0 0;
	}
}

.mega-destinations__menu {
	display: block;
}

.mega-destinations__list {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 2;
}

.mega-destinations__list li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

.mega-destinations__list a {
	align-items: center;
	color: #fff;
	display: flex;
	fill: #fff;
	font-family: "brother-1816", Sans-serif;
	font-weight: 400;
	line-height: 20px;
	padding: 5px 0;
	position: relative;
	width: fit-content;
}

.mega-destinations__list a:hover,
.mega-destinations__list a:focus {
	color: #1B8ACF;
	fill: #1B8ACF;
}

.mega-destinations__list .current-menu-item > a {
	color: #B6E2FD;
}

.mega-menu__strip {
	background-color: #3F484D;
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	position: relative;
	width: 100%;
	z-index: 10;
}

.mega-menu__strip-inner {
	display: flex;
	flex-direction: row;
	gap: 20px;
	justify-content: center;
	margin: 0 auto;
	max-width: min(100%, 1300px);
	padding: 15px 0;
	width: 100%;
}

.mega-menu__strip-clip {
	min-width: 0;
	overflow: hidden;
	position: relative;
}

.mega-menu__strip-list {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0 -8px;
	padding: 0;
}

.mega-menu__strip-list li {
	align-items: center;
	display: flex;
	margin: 0 8px;
	padding: 0;
	position: relative;
	text-align: left;
	word-break: break-word;
}

.mega-menu__strip-list a {
	align-items: center;
	color: #1B8ACF;
	display: flex;
	font-family: "brother-1816", Sans-serif;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 1.8px;
	text-transform: uppercase;
}

.mega-menu__strip-icon {
	display: flex;
	padding-inline-end: 11px;
	position: relative;
}

.mega-menu__strip-icon svg {
	fill: #fff;
	height: 14px;
	margin: 0 3.5px 0 0;
	transition: fill .3s;
	width: 14px;
}

.mega-menu__strip-text {
	color: #fff;
	transition: color .3s;
}

.mega-menu__strip-text--first {
	align-self: center;
	padding-inline-start: 5px;
}

/* Experiences panel: four columns of image, heading, text and a text link. */
.mega-experiences {
	display: flex;
	flex-direction: row;
	gap: 30px;
	margin: 0 auto;
	max-width: min(100%, 1400px);
	padding: 60px 0;
	width: 100%;
}

@media (max-width: 1366px) {
	.mega-menu__panel--experiences {
		padding: 0 20px;
	}
}

.mega-experiences__column {
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
	position: relative;
	width: 25%;
	z-index: 100;
}

.mega-experiences__text {
	color: #F1F1F1;
	font-family: "brother-1816", Sans-serif;
	font-weight: 400;
	margin-bottom: -15px;
}

.mega-experiences__text p {
	margin-block: 0 .9rem;
}

.mega-experiences__more {
	align-self: flex-start;
	line-height: 1.5;
}

.mega-experiences__button {
	background-color: transparent;
	border-radius: 3px;
	color: #B6E2FD;
	display: inline-block;
	fill: #B6E2FD;
	font-family: "brother-1816", Sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	padding: 0;
	text-align: center;
	transition: all .3s;
}

.mega-experiences__button:hover,
.mega-experiences__button:focus {
	color: #1B8ACF;
	fill: #1B8ACF;
}

.mega-experiences__button-inner {
	display: flex;
	flex-direction: row-reverse;
	gap: 10px;
	justify-content: center;
}

.mega-experiences__button-icon {
	align-items: center;
	display: flex;
}

.mega-experiences__button-icon svg {
	height: 1em;
	transition: translate .35s cubic-bezier(.22, 1, .36, 1);
	width: 1em;
}

.mega-experiences__button:hover .mega-experiences__button-icon svg,
.mega-experiences__button:focus-visible .mega-experiences__button-icon svg {
	translate: 4px 0;
}

.mega-experiences__button-text {
	display: inline-block;
}

/* ---------- Phone and tablet bar (1024px and below) ---------- */

.mobile-header {
	display: none;
}

@media (max-width: 1024px) {
	.site-header__bar {
		display: none;
	}

	/* Stays at the top of the screen as the page scrolls, as the old header did. */
	header.site-header.design-region {
		position: sticky;
		top: 0;
		z-index: 99;
	}

	/* A slimmer bar (Luke, 10 October 2026): the logo smaller and the call line reduced to
	   the number with a phone icon, on one line. 68px tall on tablets, 60px on phones. */
	.mobile-header {
		background-color: #161615;
		display: flex;
		flex-direction: column;
		max-width: 100%;
		padding: 0 18px;
		position: relative;
		width: 100%;
	}

	.mobile-header__inner {
		align-items: center;
		display: flex;
		gap: 16px;
		justify-content: space-between;
		margin: 0 auto;
		max-width: min(100%, 1024px);
		min-height: 68px;
		padding: 8px 0;
		width: 100%;
	}

	.mobile-header__brand {
		flex: none;
	}

	.mobile-header__logo a {
		display: block;
	}

	.mobile-header__logo img {
		display: block;
		height: auto;
		width: 52px;
	}

	.mobile-header__end {
		align-items: center;
		display: flex;
		gap: 14px;
		min-width: 0;
	}

	.mobile-header__call {
		align-items: center;
		color: #1B8ACF;
		display: inline-flex;
		font-family: "brother-1816", Sans-serif;
		font-size: 16px;
		font-weight: 600;
		gap: 9px;
		letter-spacing: .02em;
		line-height: 1;
		padding: 12px 0;
		white-space: nowrap;
	}

	.mobile-header__call-icon {
		fill: currentColor;
		flex: none;
		height: 14px;
		width: 14px;
	}

	.mobile-menu {
		display: flex;
		flex: none;
		position: relative;
	}

	.mobile-menu__toggle,
	.mobile-menu__toggle:hover,
	.mobile-menu__toggle:focus {
		align-items: center;
		background-color: transparent;
		border: none;
		border-radius: 3px;
		color: #fff;
		cursor: pointer;
		display: flex;
		height: 44px;
		justify-content: center;
		margin: 0 -11px 0 0;
		padding: 0;
		position: relative;
		width: 44px;
	}

	.mobile-menu__toggle svg {
		fill: #fff;
		width: 22px;
	}

	/* ---------- The full-screen menu (Luke, 10 October 2026) ----------
	   Replaces the old 360px slide-out. Black, with the logo's blue keyline inset around
	   the screen. It unrolls downwards like the mega menu panels, its links rise in one
	   after another, and Destinations and Experiences open their own screens, which slide
	   in from the right. Closing fades out. Reduced motion switches the movement off. */
	.mobile-menu__panel {
		background-color: #161615;
		display: none;
		flex-direction: column;
		height: 100vh;
		height: 100dvh;
		inset: 0;
		opacity: 0;
		position: fixed;
		transition: opacity .25s ease-in, display .25s allow-discrete;
		z-index: 1000;
	}

	.mobile-menu__panel.is-open {
		animation: mobile-menu-unroll .6s cubic-bezier(.22, 1, .36, 1);
		display: flex;
		opacity: 1;
	}

	.mobile-menu__panel::before {
		border: 1px solid rgba(27, 138, 207, .6);
		content: "";
		inset: 12px;
		pointer-events: none;
		position: absolute;
		z-index: 3;
	}

	.mobile-menu__panel.is-open::before {
		animation: mobile-menu-fade .8s ease-out .3s backwards;
	}

	/* Logo (or Back) on the left, close on the right. */
	.mobile-menu__bar {
		align-items: center;
		display: flex;
		flex: none;
		justify-content: space-between;
		min-height: 64px;
		padding: 28px 30px 0;
		position: relative;
		z-index: 2;
	}

	.mobile-menu__logo {
		display: block;
		transition: opacity .3s, visibility 0s;
	}

	.mobile-menu__logo img {
		display: block;
		height: auto;
		width: 64px;
	}

	.mobile-menu__back,
	.mobile-menu__back:hover,
	.mobile-menu__back:focus,
	.mobile-menu__close,
	.mobile-menu__close:hover,
	.mobile-menu__close:focus {
		align-items: center;
		background-color: transparent;
		border: 1px solid rgba(255, 255, 255, .28);
		border-radius: 999px;
		color: #fff;
		cursor: pointer;
		display: inline-flex;
		justify-content: center;
		margin: 0;
		min-height: 46px;
		padding: 0;
		transition: background-color .25s, border-color .25s, color .25s, opacity .3s;
	}

	.mobile-menu__close {
		width: 46px;
	}

	.mobile-menu__close svg {
		fill: currentColor;
		width: 16px;
	}

	.mobile-menu__back {
		font-family: "brother-1816", Sans-serif;
		font-size: 12px;
		font-weight: 600;
		gap: 8px;
		left: 30px;
		letter-spacing: .24em;
		opacity: 0;
		padding: 0 20px 0 14px;
		position: absolute;
		text-transform: uppercase;
		visibility: hidden;
	}

	.mobile-menu__back svg {
		fill: currentColor;
		width: 14px;
	}

	.mobile-menu__panel.is-on .mobile-menu__back {
		opacity: 1;
		visibility: visible;
	}

	.mobile-menu__panel.is-on .mobile-menu__logo {
		opacity: 0;
		visibility: hidden;
		transition: opacity .2s, visibility 0s linear .2s;
	}

	.mobile-menu__back:hover,
	.mobile-menu__back:focus-visible,
	.mobile-menu__close:hover,
	.mobile-menu__close:focus-visible {
		background-color: #fff;
		border-color: #fff;
		color: #161615;
	}

	.mobile-menu__back:focus-visible,
	.mobile-menu__close:focus-visible {
		outline: 2px solid #1B8ACF;
		outline-offset: 3px;
	}

	/* The screens. Each scrolls on its own and centres its content when it fits. */
	.mobile-menu__views {
		flex: 1;
		min-height: 0;
		overflow: hidden;
		position: relative;
	}

	/* A soft fade along the bottom edge hints that a long screen scrolls. */
	.mobile-menu__views::after {
		background: linear-gradient(rgba(22, 22, 21, 0), #161615);
		bottom: 0;
		content: "";
		height: 44px;
		left: 0;
		pointer-events: none;
		position: absolute;
		right: 0;
		z-index: 1;
	}

	.mobile-menu__view {
		display: flex;
		flex-direction: column;
		inset: 0;
		opacity: 0;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 24px 32px 48px;
		position: absolute;
		text-align: center;
		transition: translate .5s cubic-bezier(.22, 1, .36, 1), opacity .3s ease, visibility 0s linear .5s;
		translate: 22% 0;
		visibility: hidden;
	}

	.mobile-menu__view.is-active {
		opacity: 1;
		transition: translate .5s cubic-bezier(.22, 1, .36, 1), opacity .4s ease .05s, visibility 0s;
		translate: none;
		visibility: visible;
	}

	.mobile-menu__panel.is-on .mobile-menu__view--root {
		translate: -22% 0;
	}

	.mobile-menu__inner {
		margin: auto 0;
		width: 100%;
	}

	/* Items rise into place one after another whenever their screen comes on. */
	.mobile-menu__view.is-active .mobile-menu__stagger > * {
		animation: mobile-menu-rise .6s cubic-bezier(.22, 1, .36, 1) backwards;
		animation-delay: calc(var(--mobile-menu-start, .12s) + var(--mobile-menu-step, 0) * .05s);
	}

	.mobile-menu__view--root {
		--mobile-menu-start: .22s;
	}

	.mobile-menu__stagger > :nth-child(2) { --mobile-menu-step: 1; }
	.mobile-menu__stagger > :nth-child(3) { --mobile-menu-step: 2; }
	.mobile-menu__stagger > :nth-child(4) { --mobile-menu-step: 3; }
	.mobile-menu__stagger > :nth-child(5) { --mobile-menu-step: 4; }
	.mobile-menu__stagger > :nth-child(6) { --mobile-menu-step: 5; }
	.mobile-menu__stagger > :nth-child(7) { --mobile-menu-step: 6; }
	.mobile-menu__stagger > :nth-child(n+8) { --mobile-menu-step: 7; }

	/* First screen: centred, a touch bigger than before. */
	.mobile-menu__list,
	.mobile-menu__sublist {
		align-items: center;
		display: flex;
		flex-direction: column;
		gap: 4px;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.mobile-menu__list li,
	.mobile-menu__sublist li {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.mobile-menu__link,
	.mobile-menu__link:hover,
	.mobile-menu__link:focus {
		align-items: center;
		background-color: transparent;
		border: 0;
		border-radius: 0;
		color: #fff;
		cursor: pointer;
		display: inline-flex;
		font-family: "brother-1816", Sans-serif;
		font-size: 24px;
		font-weight: 600;
		gap: 14px;
		justify-content: center;
		letter-spacing: .16em;
		line-height: 1.2;
		margin: 0;
		min-height: 56px;
		padding: 10px 8px;
		text-transform: uppercase;
		transition: color .25s;
		white-space: normal;
	}

	.mobile-menu__link svg {
		fill: #1B8ACF;
		transition: translate .3s cubic-bezier(.22, 1, .36, 1);
		width: 9px;
	}

	.mobile-menu__link:hover,
	.mobile-menu__link:focus-visible {
		color: #1B8ACF;
	}

	.mobile-menu__link:hover svg,
	.mobile-menu__link:focus-visible svg {
		translate: 4px 0;
	}

	.mobile-menu__link:focus-visible,
	.mobile-menu__button:focus-visible,
	.mobile-menu__region-title:focus-visible,
	.mobile-menu__countries a:focus-visible,
	.mobile-menu__card:focus-visible,
	.mobile-menu__call-number:focus-visible {
		outline: 2px solid #1B8ACF;
		outline-offset: 4px;
	}

	.mobile-menu__link[aria-current="page"],
	.mobile-menu__countries a[aria-current="page"],
	.mobile-menu__region-title[aria-current="page"] {
		color: #B6E2FD;
	}

	.mobile-menu__link--small,
	.mobile-menu__link--small:hover,
	.mobile-menu__link--small:focus {
		font-size: 20px;
		min-height: 52px;
	}

	.mobile-menu__quote {
		margin-top: 26px;
	}

	.mobile-menu__button {
		background-color: #1B8ACF;
		border-radius: var(--button-radius, 999px);
		color: #fff;
		display: inline-block;
		font-family: "brother-1816", Sans-serif;
		font-size: 15px;
		font-weight: 600;
		letter-spacing: .16em;
		padding: 18px 40px;
		text-transform: uppercase;
	}

	.mobile-menu__button:hover,
	.mobile-menu__button:focus-visible {
		box-shadow: 0 8px 24px -6px rgba(27, 138, 207, .55);
		color: #fff;
	}

	.mobile-menu__list .mobile-menu__call {
		margin-top: 40px;
	}

	.mobile-menu__call-label {
		color: #C9CBCC;
		display: block;
		font-family: "brother-1816", Sans-serif;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: .3em;
		text-transform: uppercase;
	}

	.mobile-menu__call-number {
		color: #1B8ACF;
		display: inline-block;
		font-family: "brother-1816", Sans-serif;
		font-size: 22px;
		font-weight: 600;
		letter-spacing: .06em;
		margin-top: 8px;
		padding: 6px;
	}

	/* Second screens. */
	.mobile-menu__eyebrow {
		color: #1B8ACF;
		font-family: "brother-1816", Sans-serif;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: .34em;
		margin: 0 0 22px;
		text-transform: uppercase;
	}

	.mobile-menu__region {
		border-top: 1px solid rgba(255, 255, 255, .1);
		margin: 0 auto;
		max-width: 520px;
		padding: 20px 0 16px;
	}

	.mobile-menu__eyebrow + .mobile-menu__region {
		border-top: 0;
		padding-top: 0;
	}

	.mobile-menu__region-title {
		color: #fff;
		display: inline-block;
		font-family: "brother-1816", Sans-serif;
		font-size: 19px;
		font-weight: 600;
		letter-spacing: .2em;
		padding: 8px;
		text-transform: uppercase;
	}

	.mobile-menu__countries {
		display: flex;
		flex-wrap: wrap;
		gap: 0 6px;
		justify-content: center;
		list-style: none;
		margin: 4px 0 0;
		padding: 0;
	}

	.mobile-menu__countries li {
		list-style: none;
		margin: 0;
	}

	.mobile-menu__countries a {
		color: #C9CBCC;
		display: inline-block;
		font-family: "brother-1816", Sans-serif;
		font-size: 17px;
		line-height: 1.3;
		padding: 11px 10px;
	}

	.mobile-menu__region-title:hover,
	.mobile-menu__region-title:focus-visible,
	.mobile-menu__countries a:hover,
	.mobile-menu__countries a:focus-visible {
		color: #1B8ACF;
	}

	/* Destinations (Luke, 10 October 2026): left aligned, each region's countries in two
	   columns. Every country keeps a tap target of at least 44px. */
	.mobile-menu__inner--regions {
		max-width: 560px;
		text-align: left;
	}

	.mobile-menu__inner--regions .mobile-menu__region {
		margin: 0;
		max-width: none;
	}

	.mobile-menu__inner--regions .mobile-menu__region-title {
		padding: 8px 0;
	}

	.mobile-menu__inner--regions .mobile-menu__countries {
		display: grid;
		gap: 0 20px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mobile-menu__inner--regions .mobile-menu__countries a {
		min-height: 44px;
		padding: 12px 0;
	}

	/* Focus moved to a screen after a tap draws no ring. */
	.mobile-menu__panel:focus,
	.mobile-menu__view:focus {
		outline: none;
	}

	/* Experiences: image cards, as in the mega menu panel. */
	.mobile-menu__cards {
		display: grid;
		gap: 26px 18px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		list-style: none;
		margin: 0 auto;
		max-width: 560px;
		padding: 0;
	}

	.mobile-menu__cards li {
		list-style: none;
		margin: 0;
	}

	.mobile-menu__card {
		color: #fff;
		display: block;
		font-family: "brother-1816", Sans-serif;
		font-size: 14px;
		font-weight: 600;
		letter-spacing: .18em;
		line-height: 1.35;
		text-transform: uppercase;
		transition: color .25s;
	}

	.mobile-menu__card img {
		aspect-ratio: 4 / 3;
		border-bottom: 3px solid #1B8ACF;
		display: block;
		height: auto;
		margin-bottom: 14px;
		object-fit: cover;
		transition: opacity .3s;
		width: 100%;
	}

	.mobile-menu__card:hover,
	.mobile-menu__card:focus-visible {
		color: #1B8ACF;
	}

	.mobile-menu__card:hover img {
		opacity: .85;
	}

	.mobile-menu__sublist {
		margin-top: 18px;
	}
}

@media (max-width: 767px) {
	header.site-header.design-region {
		z-index: 100;
	}

	.mobile-header {
		padding: 0 14px;
	}

	.mobile-header__inner {
		gap: 12px;
		min-height: 60px;
		padding: 7px 0;
	}

	.mobile-header__logo img {
		width: 46px;
	}

	.mobile-header__end {
		gap: 10px;
	}

	.mobile-header__call {
		font-size: 15px;
		gap: 8px;
	}
}

@keyframes mobile-menu-unroll {
	from { clip-path: inset(0 0 100% 0); }
	to { clip-path: inset(0 0 0 0); }
}

@keyframes mobile-menu-rise {
	from { opacity: 0; translate: 0 18px; }
}

@keyframes mobile-menu-fade {
	from { opacity: 0; }
}

@media (max-width: 767px) {
	.mobile-menu__bar {
		padding: 24px 24px 0;
	}

	.mobile-menu__back {
		left: 24px;
	}

	.mobile-menu__logo img {
		width: 56px;
	}

	.mobile-menu__view {
		padding: 20px 26px 44px;
	}

	.mobile-menu__link,
	.mobile-menu__link:hover,
	.mobile-menu__link:focus {
		font-size: 21px;
		min-height: 52px;
	}

	.mobile-menu__link--small,
	.mobile-menu__link--small:hover,
	.mobile-menu__link--small:focus {
		font-size: 18px;
	}

	.mobile-menu__region-title {
		font-size: 17px;
	}

	.mobile-menu__countries a {
		font-size: 16px;
	}

	.mobile-menu__cards {
		gap: 22px 14px;
	}

	.mobile-menu__card {
		font-size: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mobile-menu__panel.is-open,
	.mobile-menu__panel.is-open::before,
	.mobile-menu__view.is-active .mobile-menu__stagger > * {
		animation: none;
	}

	.mobile-menu__view,
	.mobile-menu__panel.is-on .mobile-menu__view--root {
		translate: none;
	}
}