/**
 * Base: reset, elements, layout primitives and the components sections share.
 *
 * Nothing section-specific belongs here. If a rule is only ever true inside one
 * section, it goes in that section's own stylesheet instead.
 */

/* ===============================================================
 * 1. Reset
 * =============================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;

	/*
	 * The sideways backstop, and it has to be HERE as well as on body.
	 *
	 * Only the root element's overflow is propagated to the viewport. A clip
	 * set on body alone makes body its own scroll container instead, which
	 * Chrome honours but iOS Safari does not reliably - so a box overhanging
	 * the right edge still lets the whole page pan, and every section is then
	 * short of the screen it was measured against.
	 *
	 * clip, not hidden: hidden would make the root a scroll container and take
	 * position: sticky and the smooth scrolling above down with it. clip only
	 * paints less, and leaves vertical scrolling alone.
	 */
	overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	margin: 0;
	background: var(--mq-white);
	color: var(--mq-grey);
	font-family: var(--mq-body);
	font-size: var(--mq-fs-17);
	font-weight: 400;
	line-height: 1.72;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img,
video,
svg,
iframe { max-width: 100%; display: block; }

img { height: auto; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl { margin: 0; }

ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button { background: none; border: 0; cursor: pointer; }

/* ===============================================================
 * 2. Elements
 * =============================================================== */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--mq-display);
	font-weight: 400;
	line-height: 1.14;
	letter-spacing: var(--mq-track-display);
	color: var(--mq-ink);
}

h1 { font-size: var(--mq-h1); }
h2 { font-size: var(--mq-h2); }
h3 { font-size: var(--mq-h3); }
h4 { font-size: var(--mq-h4); }

strong, b { font-weight: 600; }

::selection {
	background: var(--mq-gold);
	color: var(--mq-black);
}

/* Focus. :focus-visible only - a bare :focus paints a ring on every tap
   target the moment a touch user presses it, and leaves it there. */
:focus { outline: none; }

:focus-visible {
	outline: 2px solid var(--mq-gold);
	outline-offset: 3px;
	border-radius: 1px;
}

.mq-on-dark :focus-visible { outline-color: var(--mq-gold); }

/* Visually hidden. Needs !important: form rules such as
   `.some-form input { width: 100% }` match at the same specificity and will
   otherwise inflate a hidden honeypot to full width and drag a horizontal
   scrollbar onto the page. */
.mq-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.mq-skip-link {
	position: absolute;
	top: -100px;
	left: var(--mq-gutter);
	z-index: 999;
	padding: 12px 22px;
	background: var(--mq-black);
	color: var(--mq-gold);
	font-size: var(--mq-fs-13);
	letter-spacing: var(--mq-track-btn);
	text-transform: uppercase;
}

.mq-skip-link:focus-visible { top: 12px; }

/* ===============================================================
 * 3. Layout primitives
 * =============================================================== */

.mq-shell {
	width: 100%;
	max-width: var(--mq-max);
	margin-inline: auto;
	padding-inline: var(--mq-gutter);
}

.mq-shell--wide { max-width: var(--mq-max-wide); }
.mq-shell--read { max-width: calc(var(--mq-max-read) + (var(--mq-gutter) * 2)); }

.mq-section { padding-block: var(--mq-pad-section); position: relative; }
.mq-section--tight { padding-block: var(--mq-pad-tight); }
.mq-section--flush { padding-block: 0; }

/* Grounds. A section declares which ground it sits on and inherits the right
   text colours from it, so no section has to restate them. */
.mq-ground-light { background: var(--mq-white); }
.mq-ground-cream { background: var(--mq-cream); }
.mq-ground-off   { background: var(--mq-off); }

.mq-ground-dark,
.mq-ground-band {
	color: rgba(255, 255, 255, 0.78);
}

.mq-ground-dark { background: var(--mq-black); }
.mq-ground-band { background: var(--mq-band); }

.mq-ground-dark h1, .mq-ground-dark h2, .mq-ground-dark h3, .mq-ground-dark h4,
.mq-ground-band h1, .mq-ground-band h2, .mq-ground-band h3, .mq-ground-band h4 {
	color: var(--mq-white);
}

/* ===============================================================
 * 4. Section header - eyebrow, ornament, heading, lead
 *
 * The three reference designs all open a section the same way: a small
 * letterspaced label, a rule or ornament, a serif heading, then a short
 * centred paragraph on a narrow measure. This is that pattern, once.
 * =============================================================== */

.mq-head {
	display: grid;
	justify-items: center;
	text-align: center;
	gap: 22px;
	max-width: var(--mq-max-read);
	margin-inline: auto;
}

.mq-head--start {
	justify-items: start;
	text-align: left;
	margin-inline: 0;
}

/*
 * The eyebrow, and it is deliberately not small any more.
 *
 * It ran at the 13px body step, which put it below the smallest thing on most
 * sections and left it reading as a caption attached to the heading rather than
 * as the line that introduces it. It is the first words of nearly every section
 * on the site, so it now scales with the viewport like the headings do and
 * carries real weight.
 *
 * Tracking comes DOWN as the size goes up. 0.24em is what holds 13px uppercase
 * together; the same value on 17px starts pulling the words into separate
 * letters, which is the failure mode wide-tracked labels have.
 *
 * Sections that need their own size still set one - the hero runs larger
 * still, and sections/cta/ recolours it to white for contrast reasons set out
 * in that file.
 */
.mq-eyebrow {
	font-family: var(--mq-body);
	font-size: clamp(14px, 1.05vw, 17px);
	font-weight: 700;
	line-height: 1.45;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--mq-gold-deep);
	margin: 0;
}

.mq-ground-dark .mq-eyebrow,
.mq-ground-band .mq-eyebrow,
.mq-on-dark .mq-eyebrow { color: var(--mq-gold); }

/* Ornament: hairline - diamond - hairline, the Post Oak divider motif. */
.mq-ornament {
	display: flex;
	align-items: center;
	gap: 14px;
	width: min(240px, 60%);
	color: var(--mq-gold-deep);
}

.mq-ornament::before,
.mq-ornament::after {
	content: "";
	flex: 1;
	height: 1px;
	background: currentColor;
	opacity: 0.55;
}

.mq-ornament i {
	width: 7px;
	height: 7px;
	background: currentColor;
	transform: rotate(45deg);
	flex: none;
}

.mq-ground-dark .mq-ornament,
.mq-ground-band .mq-ornament,
.mq-on-dark .mq-ornament { color: var(--mq-gold); }

/*
 * The section heading, one definition for the whole site.
 *
 * Uppercase, light weight, wide tracking, and deliberately NOT large. This is
 * the single trait every one of the reference sites shares - "ANYTHING BUT
 * ORDINARY", "CHAMPIONSHIP GOLF & MORE", "IDEAL SPACE" are all set this way,
 * and all of them are smaller than you expect. A big title-case serif reads as
 * a different class of site entirely, which is what this replaces.
 *
 * Sections do not override the size. If one needs to, that is a sign the
 * section is arguing with the design rather than using it.
 */
.mq-head__title {
	margin: 0;
	/* Runs 29 -> 49 on the documented scale. Wide tracking needs the size to
	   carry it; below about 29px an uppercase letterspaced serif stops reading
	   as a heading and starts reading as a label. */
	font-size: clamp(29px, 3.4vw, 49px);
	font-weight: 300;
	line-height: 1.26;
	letter-spacing: 0.085em;
	text-transform: uppercase;
	text-wrap: balance;
}

/*
 * One step up, and the only one.
 *
 * The rule above still stands: a section does not get to pick its own heading
 * size. This is a shared modifier rather than a licence to override, so there
 * is exactly one larger step on the site and it is defined here with the
 * standard one - not clamp values scattered through section files that drift
 * apart.
 *
 * It is for a heading that has to restart the page after a full-bleed or
 * dark band, where the reader has just been handed a strong visual break and
 * the next heading at the standard size reads as a continuation. Applied with
 * mq_section_head()'s `class` argument. If more than two or three placings ever
 * want it, the scale is wrong, not the sections.
 */
.mq-head--xl .mq-head__title { font-size: clamp(34px, 4.1vw, 60px); }

.mq-head__lead {
	max-width: 62ch;
	/* 17px is the body step in the brief's scale, and --mq-grey rather than
	   the soft grey - the lighter one was too faint against cream. */
	font-size: var(--mq-fs-17);
	font-weight: 400;
	line-height: 1.85;
	color: var(--mq-grey);
	margin: 0;
}

.mq-ground-dark .mq-head__lead,
.mq-ground-band .mq-head__lead,
.mq-on-dark .mq-head__lead { color: rgba(255, 255, 255, 0.86); }

/* A short gold rule used where an ornament would be too much. */
.mq-rule {
	width: 62px;
	height: 1px;
	background: var(--mq-gold-deep);
	border: 0;
	margin: 0;
}

.mq-ground-dark .mq-rule,
.mq-ground-band .mq-rule,
.mq-on-dark .mq-rule { background: var(--mq-gold); }

/* ===============================================================
 * 5. Buttons
 *
 * Three kinds only:
 *   .mq-btn            solid red, the primary booking action
 *   .mq-btn--ghost     hairline outline, the reference designs' quiet CTA
 *   .mq-link           underlined text link with a sliding rule
 *
 * Every one is qualified with its element (a.mq-btn, button.mq-btn) so a
 * plugin or editor reset at single-class specificity cannot outrank it.
 * =============================================================== */

a.mq-btn,
button.mq-btn,
input.mq-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 50px;
	padding: 14px 34px;
	border: 1px solid var(--mq-red);
	border-radius: 0;
	background: var(--mq-red);
	color: var(--mq-white);
	font-family: var(--mq-body);
	font-size: var(--mq-fs-13);
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: var(--mq-track-btn);
	text-align: center;
	cursor: pointer;
	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);
}

a.mq-btn--ghost,
button.mq-btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.62);
	color: var(--mq-white);
}

/* The ghost button on a light ground needs a dark hairline, not a white one. */
.mq-ground-light a.mq-btn--ghost,
.mq-ground-cream a.mq-btn--ghost,
.mq-ground-off   a.mq-btn--ghost,
a.mq-btn--ghost.is-dark {
	border-color: rgba(0, 0, 0, 0.34);
	color: var(--mq-ink);
}

a.mq-btn--wide,
button.mq-btn--wide { padding-inline: 52px; }

/* Hover is PAINTED here, so it is gated - a tapped button on a touch screen
   must not keep the hover state after the finger lifts. */
@media (hover: hover) and (pointer: fine) {

	a.mq-btn:hover,
	button.mq-btn:hover {
		background: var(--mq-red-light);
		border-color: var(--mq-red-light);
		color: var(--mq-white);
	}

	a.mq-btn--ghost:hover,
	button.mq-btn--ghost:hover {
		background: var(--mq-white);
		border-color: var(--mq-white);
		color: var(--mq-ink);
	}

	.mq-ground-light a.mq-btn--ghost:hover,
	.mq-ground-cream a.mq-btn--ghost:hover,
	.mq-ground-off   a.mq-btn--ghost:hover,
	a.mq-btn--ghost.is-dark:hover {
		background: var(--mq-ink);
		border-color: var(--mq-ink);
		color: var(--mq-white);
	}
}

a.mq-btn:active,
button.mq-btn:active { background: var(--mq-red-deep); border-color: var(--mq-red-deep); }

/* Underlined text link. The rule is a pseudo-element rather than
   text-decoration so it can animate its width. */
a.mq-link {
	position: relative;
	display: inline-block;
	padding-bottom: 7px;
	font-family: var(--mq-body);
	font-size: var(--mq-fs-13);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--mq-track-btn);
	color: var(--mq-ink);
}

.mq-ground-dark a.mq-link,
.mq-ground-band a.mq-link,
.mq-on-dark a.mq-link { color: var(--mq-white); }

a.mq-link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--mq-gold-deep);
	transform-origin: left center;
	transition: transform var(--mq-dur) var(--mq-ease);
}

.mq-ground-dark a.mq-link::after,
.mq-ground-band a.mq-link::after,
.mq-on-dark a.mq-link::after { background: var(--mq-gold); }

@media (hover: hover) and (pointer: fine) {
	a.mq-link:hover { color: var(--mq-gold-deep); }
	a.mq-link:hover::after { transform: scaleX(0.42); }

	.mq-ground-dark a.mq-link:hover,
	.mq-ground-band a.mq-link:hover,
	.mq-on-dark a.mq-link:hover { color: var(--mq-gold); }
}

/* A row of actions that centres on its own and wraps cleanly on a phone. */
.mq-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.mq-actions--center { justify-content: center; }

/* ===============================================================
 * 6. Media
 * =============================================================== */

/* A fixed-ratio image frame. The ratio is set per use with --r so a card row
   stays on one baseline whatever the source images measure. */
.mq-frame {
	/* display:block is load-bearing, not tidiness. .mq-frame is written on a
	   <span> so it can sit inside an <a>, and aspect-ratio, overflow and
	   absolute-positioned children are all ignored on an inline box - the frame
	   collapses to zero height and the photograph vanishes. */
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--r, 4 / 3);
	background: var(--mq-off);
}

.mq-frame > img,
.mq-frame > video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* `fixed` sizes a background to the viewport rather than the element and
	   serves a tight crop - object-fit keeps the element in charge. */
	transition: transform 1.1s var(--mq-ease);
}

@media (hover: hover) and (pointer: fine) {
	.mq-frame--zoom:hover > img { transform: scale(1.055); }
}

/* Caption sitting on the image, bottom-left, over a bottom-weighted scrim -
   the label treatment the reference mosaics use. */
.mq-frame__label {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	padding: clamp(18px, 2.4vw, 34px);
	background: var(--mq-scrim-soft);
	color: var(--mq-white);
	font-family: var(--mq-display);
	font-size: clamp(19px, 1.7vw, 29px);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.2;
	pointer-events: none;
}

/* ===============================================================
 * 6b. Elementor reset guard
 *
 * Elementor's frontend stylesheet ships:
 *
 *   .elementor img { height: auto; max-width: 100%; ... }
 *
 * at (0,1,1) specificity, and it is enqueued AFTER this file. Every image in
 * this design that fills a box sets height:100% at (0,1,0) or (0,1,1), so on
 * an Elementor page it loses the tie and the photograph collapses to its own
 * intrinsic height - filling only the top of its frame with dead space below.
 *
 * `inset: 0` does not rescue it. For a REPLACED element such as an <img>,
 * height:auto resolves to the intrinsic height and the `bottom` offset is
 * simply ignored, so top/bottom cannot stretch it the way they would a div.
 *
 * The brief listed this rule among the things that cost time on the previous
 * build. Doubling the class outranks it at (0,2,1) without reaching for
 * !important, and only the one contested property is restated.
 * =============================================================== */

.mq-frame.mq-frame > img,
.mq-frame.mq-frame > video,
.mq-hero__slide.mq-hero__slide,
.mq-hero__video.mq-hero__video,
.mq-hero__still.mq-hero__still,
.mq-showcase__img.mq-showcase__img,
.mq-story__media.mq-story__media img,
.mq-cta__media.mq-cta__media img {
	height: 100%;
}

/* ===============================================================
 * 6b. Page reveal
 *
 * Every page opens out of black, on arrival and on every reload. Three
 * quarters of a second, no logo, no spinner - long enough to read as a
 * curtain lifting and short enough that nobody waiting for content notices
 * they waited.
 *
 * FAIL-SAFE BY DESIGN. The resting state is invisible and the animation is
 * what makes it appear, rather than the other way round: no `both`, no
 * forwards fill. If the animation never runs - an ancient browser, animations
 * disabled, CSS half-applied - the element stays transparent and hidden, and
 * the page is simply there. The alternative (start opaque, animate to clear)
 * fails to a black screen over the whole site, which is not a risk worth a
 * fade.
 *
 * pointer-events: none so it can never swallow a click on the way out.
 * =============================================================== */

body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: var(--mq-black);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	animation: mq-page-reveal 0.75s var(--mq-ease);
}

@keyframes mq-page-reveal {
	from { opacity: 1; visibility: visible; }
	to   { opacity: 0; visibility: visible; }
}

@media (prefers-reduced-motion: reduce) {
	body::before { display: none; }
}

/* ===============================================================
 * 7. Reveal on scroll
 *
 * Opt-in with data-mq-reveal. site.js adds .is-in when the element enters the
 * viewport. If JS never runs the element must still be visible, so the
 * hidden state is applied only once JS has marked the document.
 * =============================================================== */

.mq-js [data-mq-reveal] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.8s var(--mq-ease), transform 0.8s var(--mq-ease);
}

.mq-js [data-mq-reveal].is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.mq-js [data-mq-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ===============================================================
 * 8. Carousel
 *
 * The track is a scroll-snap row, so swipe and trackpad work with no JS at
 * all. site.js only adds the arrows and dots on top of that.
 * =============================================================== */

.mq-carousel { position: relative; }

.mq-carousel__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: var(--slide, 33.333%);
	gap: var(--mq-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/* Room for a card's shadow, and a little breathing space at the ends so a
	   snapped slide is not flush against the viewport edge. */
	padding-block: 4px;
}

.mq-carousel__track::-webkit-scrollbar { display: none; }

.mq-carousel__track > * { scroll-snap-align: start; }

.mq-carousel__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: clamp(24px, 3vh, 40px);
}

button.mq-carousel__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--mq-line-light);
	color: var(--mq-ink);
	font-size: var(--mq-fs-17);
	line-height: 1;
	transition: border-color var(--mq-dur-sm) var(--mq-ease),
	            background var(--mq-dur-sm) var(--mq-ease),
	            color var(--mq-dur-sm) var(--mq-ease),
	            opacity var(--mq-dur-sm) var(--mq-ease);
}

.mq-ground-dark button.mq-carousel__btn,
.mq-ground-band button.mq-carousel__btn,
.mq-on-dark button.mq-carousel__btn {
	border-color: var(--mq-line-dark);
	color: var(--mq-white);
}

button.mq-carousel__btn[disabled] {
	opacity: 0.3;
	cursor: default;
}

@media (hover: hover) and (pointer: fine) {
	button.mq-carousel__btn:not([disabled]):hover {
		background: var(--mq-ink);
		border-color: var(--mq-ink);
		color: var(--mq-white);
	}

	.mq-ground-dark button.mq-carousel__btn:not([disabled]):hover,
	.mq-ground-band button.mq-carousel__btn:not([disabled]):hover,
	.mq-on-dark button.mq-carousel__btn:not([disabled]):hover {
		background: var(--mq-gold);
		border-color: var(--mq-gold);
		color: var(--mq-black);
	}
}

.mq-carousel__dots {
	display: flex;
	align-items: center;
	gap: 9px;
}

button.mq-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 1px solid var(--mq-gold-deep);
	border-radius: 50%;
	background: transparent;
	transition: background var(--mq-dur-sm) var(--mq-ease),
	            transform var(--mq-dur-sm) var(--mq-ease);
}

button.mq-dot.is-on {
	background: var(--mq-gold-deep);
	transform: scale(1.28);
}

.mq-ground-dark button.mq-dot,
.mq-ground-band button.mq-dot,
.mq-on-dark button.mq-dot { border-color: var(--mq-gold); }

.mq-ground-dark button.mq-dot.is-on,
.mq-ground-band button.mq-dot.is-on,
.mq-on-dark button.mq-dot.is-on { background: var(--mq-gold); }

/* ===============================================================
 * 9. Cross-fade carousel - shared behaviour
 *
 * Two sections use this (the package photographs and the reviews), so the
 * behaviour lives here. Each section styles its own controls, because a
 * button sitting on a photograph and a button sitting on a pale ground are
 * not the same object.
 *
 * Only opacity is shared. How the slides are stacked differs: the package
 * stacks them in a fixed .mq-frame, the reviews stack them in a grid cell.
 * =============================================================== */

.mq-fade { position: relative; }

.mq-fade__slide {
	opacity: 0;
	transition: opacity 0.9s var(--mq-ease);
}

.mq-fade__slide.is-on { opacity: 1; }

/* Before the script runs, the first slide carries .is-on from the markup, so
   there is always exactly one frame visible even with JS disabled. */

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

/* ===============================================================
 * 10. Social icons
 *
 * Used in the masthead and the footer, so the component lives here and each
 * of them only sets its own size and colour. The glyphs are inline SVG from
 * mq_social_icon() and inherit currentColor, so one rule recolours them.
 * =============================================================== */

.mq-social {
	display: flex;
	align-items: center;
}

.mq-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.mq-social .mq-icon {
	transition: color var(--mq-dur-sm) var(--mq-ease);
}

/* ===============================================================
 * 11. Prose - editor content on unmapped pages
 * =============================================================== */

.mq-prose { margin-top: 28px; }

.mq-prose > * + * { margin-top: 1.15em; }

.mq-prose h2, .mq-prose h3, .mq-prose h4 { margin-top: 1.8em; }

.mq-prose a {
	color: var(--mq-gold-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mq-prose ul, .mq-prose ol { padding-left: 1.3em; }
.mq-prose ul { list-style: disc; }
.mq-prose ol { list-style: decimal; }
.mq-prose li + li { margin-top: 0.45em; }

.mq-prose blockquote {
	padding-left: 22px;
	border-left: 2px solid var(--mq-gold);
	font-family: var(--mq-display);
	font-size: var(--mq-fs-23);
	font-style: italic;
	line-height: 1.5;
	color: var(--mq-ink);
}

.mq-postlist { display: grid; gap: 40px; margin-top: 46px; }

.mq-postlist__title { font-size: var(--mq-fs-29); margin-bottom: 6px; }

.mq-postlist__item + .mq-postlist__item {
	padding-top: 40px;
	border-top: 1px solid var(--mq-line-light);
}

/* ===============================================================
 * 12. Utilities
 * =============================================================== */

.mq-center { text-align: center; }
.mq-nowrap { white-space: nowrap; }

.mq-note {
	font-size: var(--mq-fs-15);
	line-height: 1.75;
	color: var(--mq-grey);
}

.mq-ground-dark .mq-note,
.mq-ground-band .mq-note,
.mq-on-dark .mq-note { color: rgba(255, 255, 255, 0.74); }

/* Small uppercase meta label, used for card kickers and spec keys. */
.mq-meta {
	font-size: var(--mq-fs-13);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--mq-grey);
}

.mq-ground-dark .mq-meta,
.mq-ground-band .mq-meta,
.mq-on-dark .mq-meta { color: rgba(255, 255, 255, 0.78); }