/**
 * Site chrome, top.
 *
 * Everything here is scoped under .mq-masthead or .mq-drawer.
 */

/* ===============================================================
 * Masthead shell
 * =============================================================== */

.mq-masthead {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 200;
	background: var(--mq-black);
	transition: background var(--mq-dur) var(--mq-ease),
	            box-shadow var(--mq-dur) var(--mq-ease);
}

/*
 * Over a hero the bar has no ground of its own - the scrim below does the work.
 *
 * The gradient used to be this element's `background`, which meant it could
 * only ever be as tall as the bar: it reached transparent exactly at the
 * header's bottom edge, so there was a visible horizontal seam where the wash
 * stopped, and the page title sitting just under the header got no help from it
 * at all. On the interior pages that matters most, because their hero is short
 * and the h1 sits close under the chrome.
 */
.mq-has-hero .mq-masthead {
	background: transparent;
}

/*
 * The scrim, deliberately taller than the bar it sits behind.
 *
 * It runs the full height of the masthead PLUS a tail below it, and fades to
 * nothing across the whole distance - so there is no edge anywhere, the nav
 * keeps its contrast at the top, and the title underneath is lifted off the
 * photograph without a band being drawn across it.
 *
 * z-index: -1 puts it behind the bar's own contents. It is still above the
 * page, because .mq-masthead has z-index: 200 and therefore its own stacking
 * context - the negative index only sends it to the back of THAT.
 *
 * pointer-events: none matters: the tail hangs over the top of the hero, and
 * without it the scrim would swallow clicks on whatever is up there.
 */
.mq-has-hero .mq-masthead::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	z-index: -1;
	height: calc(100% + clamp(80px, 11vh, 170px));
	background: linear-gradient(180deg,
		rgba(0, 0, 0, 0.72) 0%,
		rgba(0, 0, 0, 0.54) 34%,
		rgba(0, 0, 0, 0.30) 62%,
		rgba(0, 0, 0, 0.10) 84%,
		rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
	transition: opacity var(--mq-dur) var(--mq-ease);
}

/* Once the bar is stuck it paints solid black, and the tail hanging below it
   would be a smudge under a hard edge rather than a fade into anything. */
.mq-has-hero .mq-masthead.is-stuck::before { opacity: 0; }

.mq-masthead.is-stuck {
	background: var(--mq-black);
	box-shadow: 0 1px 0 var(--mq-line-dark), 0 14px 34px rgba(0, 0, 0, 0.34);
}

/* Pages without a hero need the content pushed clear of the fixed chrome. */
body:not(.mq-has-hero) .mq-main { padding-top: var(--mq-header-h); }

.mq-masthead__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mq-gap);
	width: 100%;
	max-width: var(--mq-max-wide);
	height: 100%;
	margin-inline: auto;
	padding-inline: var(--mq-gutter);
}

/* ===============================================================
 * The bar
 * =============================================================== */

.mq-masthead__bar {
	height: 118px;
	transition: height var(--mq-dur) var(--mq-ease);
}

.mq-masthead.is-stuck .mq-masthead__bar { height: 76px; }

/* The two flanks are equal-width so the lockup between them sits on the true
   centre of the page, not on the centre of whatever is left over. */
.mq-masthead__side {
	display: flex;
	align-items: center;
	gap: 18px;
	flex: 1 1 0;
	min-width: 0;
}

.mq-masthead__side--end { justify-content: flex-end; }

.mq-masthead__label {
	font-size: var(--mq-fs-14);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mq-white);
	white-space: nowrap;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}

/* --- Social icons, top bar, left flank --- */

.mq-social--bar { gap: 10px; }

/*
 * Ringed rather than bare. A 20px glyph on its own gets lost against a
 * photograph at this size; the hairline circle gives it an edge to read
 * against and echoes the BOOK NOW pill on the opposite flank.
 */
.mq-social--bar a {
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 50%;
	transition: background var(--mq-dur-sm) var(--mq-ease),
	            border-color var(--mq-dur-sm) var(--mq-ease);
}

.mq-social--bar .mq-icon {
	width: 19px;
	height: 19px;
	color: var(--mq-white);
}

@media (hover: hover) and (pointer: fine) {
	.mq-social--bar a:hover {
		background: var(--mq-white);
		border-color: var(--mq-white);
	}

	.mq-social--bar a:hover .mq-icon { color: var(--mq-black); }
}

/* The short gold rule between a label and the thing it introduces. */
.mq-masthead__dash {
	flex: none;
	width: 28px;
	height: 1px;
	background: var(--mq-gold);
	opacity: 0.9;
}

.mq-masthead__phone {
	font-family: var(--mq-display);
	font-size: clamp(21px, 1.6vw, 29px);
	font-weight: 500;
	letter-spacing: 0.03em;
	color: var(--mq-white);
	white-space: nowrap;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
	transition: color var(--mq-dur-sm) var(--mq-ease);
}

/* --- The pill --- */

a.mq-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 12px 30px;
	border: 1px solid rgba(255, 255, 255, 0.72);
	border-radius: 999px;
	font-family: var(--mq-body);
	font-size: var(--mq-fs-14);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mq-white);
	white-space: nowrap;
	transition: background var(--mq-dur-sm) var(--mq-ease),
	            border-color var(--mq-dur-sm) var(--mq-ease),
	            color var(--mq-dur-sm) var(--mq-ease);
}

@media (hover: hover) and (pointer: fine) {
	.mq-masthead__phone:hover { color: var(--mq-gold); }

	a.mq-pill:hover {
		background: var(--mq-gold);
		border-color: var(--mq-gold);
		color: var(--mq-black);
	}
}

/* ===============================================================
 * The lockup
 * =============================================================== */

.mq-brand {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	display: block;
	line-height: 0;
}

/* Not smaller than this: below about 160px the strapline inside the artwork
   stops resolving and reads as a smudge under the wordmark. */
.mq-brand__lockup {
	width: 164px;
	height: auto;
	transition: width var(--mq-dur) var(--mq-ease);
}

.mq-masthead.is-stuck .mq-brand__lockup { width: 108px; }

/* Burger and the phone shortcut are mobile-only. */
.mq-burger,
.mq-masthead__tel { display: none; }

/* ===============================================================
 * Navigation row
 * =============================================================== */

.mq-masthead__nav {
	height: 44px;
	transition: height var(--mq-dur) var(--mq-ease);
}

.mq-masthead.is-stuck .mq-masthead__nav { height: 42px; }

/* The hairlines belong to the inner container, not the band, so they stop at
   the content width instead of running edge to edge. */
.mq-masthead__nav .mq-masthead__inner {
	justify-content: center;
	border-block: 1px solid rgba(255, 255, 255, 0.2);
}

.mq-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(14px, 1.7vw, 30px);
	height: 100%;
}

.mq-nav__item { position: relative; height: 100%; }

/* Full white and semi-bold. Light grey type at 12px over a photograph is the
   first thing that disappears, whatever the scrim is doing behind it. */
.mq-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 100%;
	font-size: var(--mq-fs-14);
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--mq-white);
	white-space: nowrap;
	/* Over a bright frame of the hero the scrim alone is not always enough. */
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
	transition: color var(--mq-dur-sm) var(--mq-ease);
}

.mq-nav__link[aria-current="page"] { color: var(--mq-gold); }

.mq-nav__caret {
	width: 5px;
	height: 5px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

/* Locations dropdown. */
.mq-subnav {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 5;
	width: 292px;
	padding: 8px 0;
	background: var(--mq-black);
	border: 1px solid var(--mq-line-dark);
	border-top: 2px solid var(--mq-gold);
	box-shadow: var(--mq-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 8px);
	transition: opacity var(--mq-dur-sm) var(--mq-ease),
	            transform var(--mq-dur-sm) var(--mq-ease),
	            visibility var(--mq-dur-sm) var(--mq-ease);
}

.mq-subnav a {
	display: grid;
	gap: 3px;
	padding: 11px 22px;
	color: var(--mq-white);
}

.mq-subnav__name {
	font-size: var(--mq-fs-15);
	font-weight: 600;
	letter-spacing: 0.03em;
}

.mq-subnav__meta {
	font-size: var(--mq-fs-12);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.68);
}

/* Keyboard users get the dropdown from focus; pointer users get it from hover,
   gated so a tap does not leave it stuck open. */
.mq-nav__item:focus-within .mq-subnav {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

@media (hover: hover) and (pointer: fine) {

	.mq-nav__link:hover { color: var(--mq-gold); }

	.mq-nav__item--has-children:hover .mq-subnav {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, 0);
	}

	.mq-subnav a:hover { background: rgba(212, 175, 55, 0.1); color: var(--mq-white); }
	.mq-subnav a:hover .mq-subnav__meta { color: var(--mq-gold); }
}

/* ===============================================================
 * Between 1024 and 1320: the flanks lose their labels first
 *
 * Nine navigation items and two flanking blocks do not fit a laptop at full
 * size. Dropping the two labels keeps the number and the pill - the useful
 * halves - rather than wrapping the whole bar onto two lines.
 * =============================================================== */

@media (max-width: 1320px) {
	.mq-masthead__label,
	.mq-masthead__dash { display: none; }

	.mq-nav { gap: 15px; }
	.mq-nav__link { font-size: var(--mq-fs-13); letter-spacing: 0.08em; }

	/*
	 * Each flank is a third of the row, and three 38px rings plus the number
	 * outgrow that before the drawer takes over at 1024. Shrinking the rings
	 * keeps the number beside them rather than wrapping it under.
	 */
	.mq-social--bar { gap: 8px; }
	.mq-social--bar a { width: 32px; height: 32px; }
	.mq-social--bar .mq-icon { width: 17px; height: 17px; }
}

@media (max-width: 1120px) {
	.mq-nav { gap: 12px; }
	.mq-nav__link { font-size: var(--mq-fs-12); letter-spacing: 0.05em; }
	.mq-masthead__phone { font-size: 21px; }
}

/* ===============================================================
 * Under 1024px: nav row goes, drawer arrives
 * =============================================================== */

@media (max-width: 1024px) {

	.mq-masthead__nav,
	.mq-masthead__side { display: none; }

	.mq-masthead__bar { height: var(--mq-header-h); }
	.mq-masthead.is-stuck .mq-masthead__bar { height: 72px; }

	.mq-burger,
	.mq-masthead__tel {
		display: inline-flex;
		align-items: center;
		color: var(--mq-white);
	}

	/*
	 * A finger-sized target, without moving the mark.
	 *
	 * The button was the three bars plus whatever padding the UA gives a
	 * <button> - 36x18, against the 44x44 a touch target wants and the 24x24
	 * WCAG asks for as a minimum. It is the only way to reach the navigation
	 * on a phone, so it is the last control on the site that should be a near
	 * miss.
	 *
	 * The box grows right and down into empty bar rather than around the
	 * centre: flex-start keeps the bars at the same x, and the bar is 78px
	 * tall so 44px of height still centres inside it. Nothing visibly moves.
	 */
	.mq-burger {
		justify-content: flex-start;
		min-width: 44px;
		min-height: 44px;
		padding-block: 0;
	}

	/*
	 * An outlined pill, matching BOOK NOW on the desktop bar - so the one
	 * action in the mobile masthead is recognisably the same kind of thing as
	 * the one action on the wide one, rather than a lone symbol.
	 *
	 * DRAWN SMALL, HIT BIG. It carried min-height: 44px for the touch target,
	 * which is the right floor but the wrong way to reach it here: it made the
	 * pill the tallest object in the bar, heavier than the burger opposite it
	 * and than the lockup between them, so the least important control looked
	 * like the most important one. The ::after below restores the 44px target
	 * without drawing any of it - the same trick the hero's indicator lines and
	 * the carousel dots already use.
	 *
	 * Everything else is a size down from the first attempt: 11px rather than
	 * 12, tighter tracking, less padding, a 13px glyph.
	 */
	.mq-masthead__tel {
		position: relative;
		gap: 6px;
		margin-left: auto;
		padding: 5px 12px;
		border: 1px solid rgba(255, 255, 255, 0.3);
		border-radius: 999px;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		white-space: nowrap;
	}

	/* The target, not the pill: ~30px drawn, 44px tappable. */
	.mq-masthead__tel::after {
		content: "";
		position: absolute;
		inset: -7px -6px;
	}

	/* Optically centred: the handset's mass sits low in its box. */
	.mq-masthead__tel-icon {
		flex: none;
		width: 13px;
		height: 13px;
		transform: translateY(-0.5px);
	}

	@media (hover: hover) and (pointer: fine) {
		.mq-masthead__tel:hover {
			border-color: var(--mq-gold);
			color: var(--mq-gold);
		}
	}

	/*
	 * The three bars, and the cross they become.
	 *
	 * Not a grid any more: the bars are absolutely positioned inside a fixed
	 * box so they can travel to the middle and rotate. A grid would collapse
	 * its rows as they move and the whole button would jump.
	 *
	 * 2px, not 1px. A hairline is right for a rule on a page; as the only
	 * control in the left flank of a black bar it was thin enough to look
	 * unfinished, and it is the primary navigation on a phone.
	 */
	.mq-burger__box {
		position: relative;
		width: 24px;
		height: 16px;
	}

	.mq-burger__box i {
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background: currentColor;
		/* Transform and opacity only, so the morph runs on the compositor and
		   never reflows the bar around it. */
		transition: transform var(--mq-dur) var(--mq-ease),
		            opacity var(--mq-dur-sm) var(--mq-ease),
		            width var(--mq-dur) var(--mq-ease);
	}

	.mq-burger__box i:nth-child(1) { top: 0; }
	.mq-burger__box i:nth-child(2) { top: 7px; width: 70%; }
	.mq-burger__box i:nth-child(3) { top: 14px; }

	/*
	 * Open: the outer two slide to the centre line and cross, the middle one
	 * fades out from the right so the shortened bar does not appear to shrink
	 * towards nothing.
	 *
	 * .is-open is set on the BUTTON by site.js alongside aria-expanded, so the
	 * mark always agrees with what assistive tech is being told.
	 */
	.mq-burger.is-open .mq-burger__box i:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.mq-burger.is-open .mq-burger__box i:nth-child(2) {
		width: 0;
		opacity: 0;
	}

	.mq-burger.is-open .mq-burger__box i:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	/* Someone who asked for less movement still gets the cross - it is state,
	   not decoration - but it arrives without the travel. */
	@media (prefers-reduced-motion: reduce) {
		.mq-burger__box i { transition: none; }
	}

	.mq-brand__lockup { width: 104px; }
	.mq-masthead.is-stuck .mq-brand__lockup { width: 86px; }
}

@media (max-width: 420px) {
	.mq-brand__lockup { width: 88px; }
}

/* ===============================================================
 * Drawer
 * =============================================================== */

.mq-drawer {
	position: fixed;
	inset: 0;
	z-index: 300;
	background: rgba(0, 0, 0, 0.62);
	opacity: 0;
	transition: opacity var(--mq-dur) var(--mq-ease);
}

.mq-drawer[hidden] { display: none; }
.mq-drawer.is-open { opacity: 1; }

/*
 * IT OPENS FROM THE LEFT, because the button that opens it is on the left.
 *
 * This slid in from the right while the hamburger sat in the left flank of the
 * bar, so the panel arrived from the opposite side of the screen to the thing
 * that summoned it and covered the button as it came. A drawer should appear
 * from under the control that opens it - that is the one bit of feedback
 * telling a visitor the two are connected.
 */
.mq-drawer__panel {
	position: absolute;
	inset: 0 auto 0 0;
	display: flex;
	flex-direction: column;
	width: min(420px, 100%);
	/*
	 * NO HEIGHT AT ALL - top and bottom are both pinned by the inset above, so
	 * the panel is exactly as tall as .mq-drawer, which is fixed to the
	 * viewport. That is measured rather than guessed.
	 *
	 * It was `height: 100svh`. svh is the SMALL viewport height - the height
	 * with the browser chrome expanded - and iOS Safari reports it against the
	 * layout viewport, not the space visible at that instant. With the toolbar
	 * in its collapsed state the panel came up short and left a band of the
	 * backdrop showing along the bottom of the screen, which is the gap in the
	 * client's screenshot. Any viewport unit has the same problem; pinning both
	 * edges has none, because there is no unit involved.
	 */
	padding: 26px var(--mq-gutter) 32px;
	background: var(--mq-black);
	border-right: 1px solid var(--mq-line-dark);
	overflow-y: auto;
	transform: translateX(-100%);
	transition: transform var(--mq-dur) var(--mq-ease);
}

.mq-drawer.is-open .mq-drawer__panel { transform: none; }

/*
 * The drawer's top bar - close on the left, social on the right.
 *
 * flex-none so it keeps its height while .mq-drawer__nav takes the slack: the
 * panel is a column flexbox and the nav is the only part that should grow.
 */
.mq-drawer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex: none;
}

/* Follows the panel to the other side. */
.mq-drawer__close {
	width: 42px;
	height: 42px;
	/* Pulled out to the panel's padding edge so the glyph, not its box, lines
	   up with the menu labels beneath it. */
	margin-left: -10px;
	font-size: 30px;
	line-height: 1;
	color: var(--mq-white);
}

.mq-drawer__nav {
	flex: 1;
	margin-top: 12px;
}

/*
 * The row holds the label and, on the one item that has children, the toggle.
 * The rule now lives on the ROW rather than the link, so the chevron sits
 * inside the same ruled band instead of hanging below it.
 */
.mq-drawer__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	border-bottom: 1px solid var(--mq-line-dark);
}

.mq-drawer__row > a {
	display: block;
	flex: 1;
	padding: 14px 0;
	font-family: var(--mq-display);
	font-size: var(--mq-fs-29);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mq-white);
}

/* --- The Locations toggle --- */

/*
 * Hidden until JavaScript says otherwise. With no JS the sub-list is simply
 * open, so a control that cannot collapse anything must not be on screen.
 */
.mq-drawer__toggle { display: none; }

.mq-js .mq-drawer__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44px square: this is the one control on the row and it is next to a link
	   that fills the rest of it, so the target has to be unmistakable. */
	width: 44px;
	height: 44px;
	margin-right: -10px;
	color: var(--mq-white);
	cursor: pointer;
}

.mq-drawer__chev {
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	/* Pointing down when closed. The box is rotated, so it is nudged up by a
	   couple of pixels to sit on the row's optical centre. */
	transform: translateY(-3px) rotate(45deg);
	transition: transform var(--mq-dur) var(--mq-ease);
}

.mq-drawer__toggle[aria-expanded="true"] .mq-drawer__chev {
	transform: translateY(1px) rotate(-135deg);
}

/* --- The collapsing list --- */

/*
 * 1fr to 0fr on a grid row, rather than a max-height guess.
 *
 * max-height animation needs a number larger than the content will ever be,
 * which makes the close look fast and the open look slow, and breaks outright
 * the day a seventh venue is added. A grid row animates to the content's real
 * height and needs no number at all.
 */
.mq-js .mq-drawer__subwrap {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--mq-dur) var(--mq-ease);
}

.mq-js .mq-drawer__item.is-open .mq-drawer__subwrap { grid-template-rows: 1fr; }

/*
 * The child has to clip, or it spills while closed - and it needs min-height:0
 * or it never closes at all.
 *
 * A grid item's automatic minimum size is its content, so `0fr` cannot take the
 * row below the height of the list inside it. Without this the collapsed state
 * still reserved the sub-list's padding and left a band of dead space under
 * Locations that looked like a spacing bug rather than a stuck animation.
 */
.mq-js .mq-drawer__subwrap > * {
	overflow: hidden;
	min-height: 0;
}

@media (prefers-reduced-motion: reduce) {
	.mq-js .mq-drawer__subwrap { transition: none; }
	.mq-drawer__chev { transition: none; }
}

/*
 * NO VERTICAL PADDING ON THIS ELEMENT. It is the child of the collapsing grid
 * row, and padding on a clipped child cannot be crushed: at `0fr` the row's
 * content box goes to zero but the 8px and 14px stay, so the closed state kept
 * reserving 22px and left a band of dead space under Locations. min-height: 0
 * fixes the content height and does nothing about padding.
 *
 * The spacing it used to provide is on the first and last rows instead, where
 * it collapses with everything else.
 */
.mq-drawer__sub { padding: 0; }

.mq-drawer__sub li:first-child { padding-top: 8px; }
.mq-drawer__sub li:last-child  { padding-bottom: 14px; }

.mq-drawer__sub a {
	display: block;
	/* The 14px indent moved here from the list's padding-left for the same
	   reason, and on the link rather than the item so the whole indented row
	   is tappable. */
	padding: 8px 0 8px 14px;
	font-size: var(--mq-fs-15);
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.82);
}

.mq-drawer__foot {
	display: grid;
	justify-items: center;
	gap: 12px;
	padding-top: 22px;
	border-top: 1px solid var(--mq-line-dark);
}

.mq-drawer__contact {
	font-size: var(--mq-fs-15);
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.86);
}

/* No top margin now it sits in the top bar rather than under a list. */
.mq-social--drawer { gap: 10px; }

.mq-social--drawer a {
	width: 44px;
	height: 44px;
	border: 1px solid var(--mq-line-dark);
}

.mq-social--drawer .mq-icon {
	width: 20px;
	height: 20px;
	color: rgba(255, 255, 255, 0.82);
}

@media (hover: hover) and (pointer: fine) {
	.mq-social--drawer a:hover {
		background: rgba(212, 175, 55, 0.12);
		border-color: var(--mq-gold);
	}

	.mq-social--drawer a:hover .mq-icon { color: var(--mq-gold); }
}

/* Locks the page behind the open drawer. */
body.mq-drawer-open { overflow: hidden; }

/* ===============================================================
 * Footer reuses .mq-brand, but centring it absolutely is a masthead
 * behaviour. Reset it back into the flow down there.
 * =============================================================== */

.mq-brand--footer {
	position: static;
	transform: none;
}