/**
 * Mirador theme styles.
 *
 * 1. Tokens
 * 2. Base
 * 3. Header and menu
 * 4. Elementor building blocks (md-* classes set on widgets and containers)
 * 5. Sections and layouts
 * 6. Forms and theme widgets
 * 7. Journal, articles and plain pages
 * 8. Footer
 * 9. Responsive and motion preferences
 *
 * The bundled fonts (Instrument Serif, Rosario, Archivo Expanded, Pinyon Script) are
 * declared in theme.json, so WordPress loads them on the site and in the
 * editors. The scroll effects are styled by the Mirador Suite plugin.
 */

/* 1. Tokens ------------------------------------------------------------ */

:root,
body {
	/*
	 * Colours and fonts follow Theme Options (Colours, Typography), which set
	 * the --wp--preset-- values on <body>; the tokens are declared on body too
	 * so they pick up those changes. The fallbacks are the theme defaults.
	 */
	--md-paper: var(--wp--preset--color--base, #f2ede3);
	--md-ink: var(--wp--preset--color--contrast, #1c2a21);
	--md-ink-soft: var(--wp--preset--color--contrast-soft, #6e6f63);
	--md-brand: var(--wp--preset--color--brand, #1c2a21);
	--md-accent: var(--wp--preset--color--accent, #6e2632);
	--md-deep: var(--wp--preset--color--deep, #22382a);
	--md-dark: var(--wp--preset--color--dark, #17231b);
	--md-light: #fff;
	--md-rule: color-mix(in srgb, var(--md-ink) 16%, transparent);
	--md-rule-light: rgba(255, 255, 255, 0.32);

	--md-serif: var(--wp--preset--font-family--serif, "Instrument Serif", Georgia, serif);
	--md-text: var(--wp--preset--font-family--text, Rosario, "Helvetica Neue", Arial, sans-serif);
	--md-sans: var(--wp--preset--font-family--sans, "Archivo Expanded", "Helvetica Neue", Arial, sans-serif);
	--md-script: var(--wp--preset--font-family--script, "Pinyon Script", cursive);
	--md-serif-weight: var(--heading-weight, 400);
	--md-text-size: var(--wp--preset--font-size--medium, 16px);

	--md-gutter: clamp(18px, 2.6vw, 40px);
	--md-header-h: 88px;
	--md-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--md-shade: 0.4;
	--md-footer-shade: 0.45;

	/* Mirador Suite reads these for its accent and curtains. */
	--mm-accent: var(--md-accent);
}

/* 2. Base -------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background-color: var(--md-paper);
	color: var(--md-ink);
	font-family: var(--md-text);
	font-size: var(--md-text-size);
	font-weight: 400;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.md-menu-open {
	overflow: hidden;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--md-serif);
	font-weight: var(--md-serif-weight);
	line-height: 1.08;
	letter-spacing: 0;
	text-wrap: balance;
}

h1,
h2,
h3 {
	text-transform: uppercase;
}

p,
li {
	text-wrap: pretty;
}

:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 4px;
}

::selection {
	background-color: var(--md-accent);
	color: var(--md-light);
}

.md-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 12px 20px;
	background-color: var(--md-accent);
	color: var(--md-light);
	font: 500 11px/1 var(--md-sans);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.md-skip:focus {
	left: 12px;
	top: 12px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* Small spaced capitals: labels above headings, footer titles. */
.md-eyebrow-text,
.md-label {
	margin: 0 0 1.2em;
	color: var(--md-accent);
	font: 500 10px/1.6 var(--md-sans);
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* Jumps to a section land below the header. */
.md-main [id] {
	scroll-margin-top: var(--md-header-h);
}

/* 3. Header and menu --------------------------------------------------- */

/*
 * The header floats over the page with no background. Its text is dark over
 * light sections and white over dark ones: Mirador Suite sets
 * data-mm-header-tone from the section under it, and the theme sets the
 * first value from the page content so there is no flash.
 */
.md-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: start;
	gap: 24px;
	padding: 0 var(--md-gutter);
	color: var(--md-brand);
	pointer-events: none;
	transition: color 0.45s var(--md-ease);
}

.md-header[data-mm-header-tone="dark"] {
	color: var(--md-light);
}

.md-header a,
.md-header button {
	pointer-events: auto;
}

body:not(.md-sticky-header) .md-header {
	position: absolute;
}

body.admin-bar .md-header {
	top: 32px;
}

/* A soft wash behind the header once the page moves, so links stay readable over text. */
.md-header::before {
	content: "";
	position: absolute;
	inset: 0 0 -24px;
	z-index: -1;
	background: linear-gradient(180deg, var(--md-paper) 0%, color-mix(in srgb, var(--md-paper) 0%, transparent) 100%);
	opacity: 0;
	transition: opacity 0.45s var(--md-ease);
}

body.md-scrolled .md-header[data-mm-header-tone="light"]::before {
	opacity: 0.9;
}

.md-header__logo {
	justify-self: start;
}

.md-header__end {
	grid-column: 3;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: clamp(20px, 2.4vw, 40px);
	min-height: 60px;
}

/* Logo badge: the name set in a coloured block hanging from the top edge. */
.md-wordmark {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	color: inherit;
	line-height: 1;
	text-decoration: none;
	text-align: center;
}

.md-wordmark:not(.is-badge) {
	padding-top: 22px;
}

.md-wordmark.is-badge {
	justify-content: flex-end;
	min-width: 64px;
	min-height: calc(var(--logo-height, 96px) * 0.8);
	padding: 16px 12px 12px;
	box-sizing: border-box;
	background-color: var(--md-deep);
	color: var(--md-light);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.md-wordmark__name {
	font: 600 var(--logo-text-size, 18px)/0.95 var(--md-sans);
	letter-spacing: calc(0.04em + var(--logo-spacing, 0) * 0.01em);
	text-transform: uppercase;
	white-space: nowrap;
}

.md-wordmark__sub {
	margin-top: 8px;
	font: 500 7px/1.2 var(--md-sans);
	letter-spacing: 0.22em;
	margin-right: -0.22em;
	text-transform: uppercase;
	opacity: 0.85;
}

/* An uploaded logo image. */
.site-logo {
	display: inline-block;
	padding-top: 18px;
	line-height: 0;
}

.site-logo img {
	display: block;
	width: auto;
	height: calc(var(--logo-height, 96px) * 0.5);
}

/* Main menu: one centred line of small capitals. */
.md-nav {
	display: none;
}

.md-nav__list {
	display: flex;
	justify-content: center;
	gap: clamp(22px, 2.6vw, 48px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.md-nav__list li,
.md-header__inquire {
	position: relative;
	margin: 0;
}

.md-nav__list a,
.md-header__inquire a,
.md-header__language {
	display: block;
	padding: 24px 0;
	color: inherit;
	font: 400 10px/12px var(--md-sans);
	letter-spacing: 0.14em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.md-header__language {
	margin: 0;
}

.md-nav__list a:hover,
.md-header__inquire a:hover {
	opacity: 0.6;
}

/* The dot beside the section on screen (scroll spy) or the current page. */
.md-nav__list li::before,
.md-header__inquire::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -12px;
	width: 5px;
	height: 5px;
	margin-top: -2.5px;
	border-radius: 50%;
	background-color: currentColor;
	opacity: 0;
	transform: scale(0);
	transition: opacity 0.35s var(--md-ease), transform 0.35s var(--md-ease);
}

.md-nav__list li.is-current::before,
.md-nav__list li.current-menu-item:not(:has(a[href*="#"]))::before,
.md-header__inquire.is-current::before {
	opacity: 1;
	transform: none;
}

.md-header:has(.is-current) .md-nav__list li.current-menu-item:not(.is-current)::before {
	opacity: 0;
	transform: scale(0);
}

/*
 * The theme's own buttons are <button> elements, and Elementor's Site
 * Settings > Buttons style every <button> on the page. "body button.class"
 * keeps them in the theme's design.
 */
body button.md-menu-toggle {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: 400 10px/1 var(--md-sans);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
}

body button.md-menu-toggle:hover,
body button.md-menu-toggle:focus {
	background: none;
	color: inherit;
}

.md-menu-toggle__icon {
	position: relative;
	width: 24px;
	height: 7px;
	border-top: 1px solid currentColor;
}

.md-menu-toggle__icon::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 15px;
	border-top: 1px solid currentColor;
}

.md-menu-toggle__icon.is-close {
	width: 18px;
	height: 18px;
	border-top: 0;
}

.md-menu-toggle__icon.is-close::before,
.md-menu-toggle__icon.is-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 18px;
	border-top: 1px solid currentColor;
	transform: rotate(45deg);
}

.md-menu-toggle__icon.is-close::after {
	transform: rotate(-45deg);
}

@media (min-width: 1100px) {
	.md-nav {
		display: block;
	}

	.md-header .md-menu-toggle {
		display: none;
	}
}

@media (max-width: 1099px) {
	.md-header__inquire,
	.md-header__language {
		display: none;
	}
}

/* Menu panel for smaller screens: full screen, dark, large names. */
.md-menu {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	background-color: var(--md-dark);
	color: var(--md-light);
	opacity: 0;
	transition: opacity 0.45s var(--md-ease);
}

.md-menu[hidden] {
	display: none;
}

.md-menu.is-open {
	opacity: 1;
}

body.admin-bar .md-menu {
	top: 32px;
}

.md-menu__bar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 0 var(--md-gutter);
}

.md-menu__bar .md-menu-toggle {
	margin-top: 22px;
}

.md-menu__nav {
	flex: 1 0 auto;
	display: flex;
	align-items: center;
	padding: 48px var(--md-gutter);
}

.md-menu__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.md-menu__list > li {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.5s var(--md-ease), transform 0.5s var(--md-ease);
}

.md-menu.is-open .md-menu__list > li {
	opacity: 1;
	transform: none;
}

.md-menu__list a {
	display: block;
	padding: 6px 0;
	color: inherit;
	font-family: var(--md-serif);
	font-size: clamp(34px, 8vw, 56px);
	line-height: 1.1;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 0.3s var(--md-ease);
}

.md-menu__list a:hover,
.md-menu__list .current-menu-item > a {
	color: var(--md-accent);
}

.md-menu__details {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 28px var(--md-gutter) 40px;
	border-top: 1px solid var(--md-rule-light);
	font: 400 11px/1.7 var(--md-sans);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.md-menu__details p {
	margin: 0;
}

.md-menu__details a {
	color: inherit;
	text-decoration: none;
}

.md-menu__details a:hover {
	color: var(--md-accent);
}

.md-menu__inquire {
	display: inline-block;
	margin-bottom: 14px;
	padding: 12px 22px;
	border: 1px solid currentColor;
	border-radius: 999px;
}

.md-menu__social {
	display: flex;
	gap: 22px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

/* 4. Elementor building blocks ---------------------------------------- */

/* No words left alone; headings fill their lines evenly. */
.elementor-widget-heading .elementor-heading-title {
	text-wrap: balance;
}

/* Display: the uppercase serif of the headlines. */
.md-display .elementor-heading-title {
	color: inherit;
	font-family: var(--md-serif);
	font-weight: var(--md-serif-weight);
	line-height: 1.02;
	letter-spacing: 0;
	text-transform: uppercase;
}

/* Statement: large light capitals in the label font ("Our vision..."). */
.md-statement .elementor-heading-title,
.md-statement p {
	color: inherit;
	font-family: var(--md-sans);
	font-weight: 300;
	line-height: 1.18;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

/* Eyebrow: the small spaced label above a heading. */
.md-eyebrow .elementor-heading-title {
	color: var(--md-accent);
	font: 500 10px/1.6 var(--md-sans);
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.md-eyebrow.is-plain .elementor-heading-title,
[data-mm-tone="dark"] .md-eyebrow .elementor-heading-title {
	color: inherit;
}

/* Script: the handwritten accent word (Theme Options > Typography > Script font). */
.md-script .elementor-heading-title {
	color: inherit;
	font-family: var(--md-script);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
}

/*
 * Lockup: a club-style title on the home page, in this order:
 *   NAME     md-lockup-label  wide label in the label font
 *   Script   md-script        a line in the script font
 *   TITLE    md-display       the large heading in capitals
 *   Text     md-lockup-text   a short paragraph in the text font
 * Each part is its own Elementor widget with its own font and colour.
 */
.md-lockup-label .elementor-heading-title {
	color: inherit;
	font: 600 15px/1.4 var(--md-sans);
	letter-spacing: 0.32em;
	text-transform: uppercase;
}

.md-lockup-label {
	margin-bottom: 22px;
}

.md-lockup-script {
	margin-bottom: 4px;
}

.md-lockup-title .elementor-heading-title {
	letter-spacing: 0.01em;
	line-height: 1;
}

.md-lockup-text {
	width: min(100%, 640px);
	margin-top: 4px;
}

/* Set on the widget, so Elementor's Typography and Text Color still win. */
.md-lockup-text {
	color: inherit;
	font-family: var(--md-text);
	font-size: 15px;
	line-height: 1.55;
	text-align: center;
	text-wrap: balance;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
}

@media (max-width: 767px) {
	.md-lockup-label .elementor-heading-title {
		font-size: 11px;
		letter-spacing: 0.26em;
	}

	.md-lockup-label {
		margin-bottom: 14px;
	}

	.md-lockup-text {
		font-size: 14px;
	}
}

/* Small capitals paragraph in the label font (add md-lockup-caps). */
.md-lockup-text.md-lockup-caps {
	width: min(100%, 560px);
	font-family: var(--md-sans);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

@media (max-width: 767px) {
	.md-lockup-text.md-lockup-caps {
		font-size: 10.5px;
	}
}

/* Light text on a dark panel colour (add md-on-dark to the section). */
.md-on-dark {
	color: var(--md-light);
}

.md-on-dark .md-eyebrow .elementor-heading-title {
	color: inherit;
}

/* Ghost: the faded last line of a heading pair. */
.md-ghost .elementor-heading-title {
	opacity: 0.45;
}

/* Running text in the book serif. */
.md-text,
.elementor-widget-text-editor {
	font-family: var(--md-text);
}

.md-text p,
.md-text li {
	color: inherit;
	line-height: 1.85;
}

.md-text p:last-child,
.md-small p:last-child,
.md-facts p:last-child {
	margin-bottom: 0;
}

/*
 * Long text (the "Text page" layout): headings inside a Text Editor are sized
 * in em and inherit the colour, so the widget's Typography and Text Color
 * settings change them too.
 */
.md-prose h2,
.md-prose h3 {
	margin: 1.6em 0 0.6em;
	color: inherit;
	line-height: 1.15;
}

.md-prose h2 {
	font-size: 1.9em;
}

.md-prose h3 {
	font-size: 1.3em;
}

.md-prose > .elementor-widget-container > :first-child,
.md-prose h2:first-child {
	margin-top: 0;
}

.md-prose ul {
	margin: 0 0 1.4em;
	padding-left: 1.1em;
	line-height: 1.85;
}

/*
 * Small capitals in the label font: contact lines, captions, short notes.
 * Set on the widget (and through the Labels global font variables when the
 * widget is linked to it), so Elementor's Typography and Text Color win.
 */
.md-small {
	--e-global-typography-accent-font-size: 10px;
	--e-global-typography-accent-font-weight: 400;
	--e-global-typography-accent-line-height: 1.7;
	--e-global-typography-accent-letter-spacing: 0.08em;
	font: 400 10px/1.7 var(--md-sans);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.md-small a {
	text-decoration: none;
}

.md-small a:hover {
	color: var(--md-accent);
}

/*
 * Facts: a Text Editor with one fact per paragraph, the label and value
 * each in a span ("<span>Rooms</span><span>24 suites</span>").
 */
.md-facts {
	--e-global-typography-accent-font-size: 10px;
	--e-global-typography-accent-font-weight: 400;
	--e-global-typography-accent-line-height: 1.6;
	--e-global-typography-accent-letter-spacing: 0.1em;
	font: 400 10px/1.6 var(--md-sans);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.md-facts p {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	margin: 0;
	padding: 7px 0;
	border-bottom: 1px solid var(--md-rule);
}

/* The label is a lighter shade of the widget's own text colour. */
.md-facts p span:first-child {
	opacity: 0.68;
}

[data-mm-tone="dark"] .md-facts p {
	border-bottom-color: var(--md-rule-light);
}

[data-mm-tone="dark"] .md-facts p span:first-child {
	opacity: 0.7;
}

/*
 * Buttons. Elementor's default button look is replaced by a thin pill.
 * Every rule stays below the specificity of Elementor's own widget styles,
 * so colours and sizes set in the Elementor panel always win.
 */
.elementor-widget-button .elementor-button {
	display: inline-flex;
	align-items: center;
	padding: 13px 26px;
	border: 1px solid currentColor;
	border-radius: 999px;
	background-color: transparent;
	color: inherit;
	fill: currentColor;
	font: 400 10px/1 var(--md-sans);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transition: background-color 0.35s var(--md-ease), color 0.35s var(--md-ease), border-color 0.35s var(--md-ease);
}

/* Theme Options > Colours: main buttons on the page and over photos. */
:where(.md-btn-page-outline-dark) .elementor-widget-button .elementor-button,
:where(.md-btn-page-solid-dark) .elementor-widget-button .elementor-button:hover {
	background-color: transparent;
	border-color: var(--md-ink);
	color: var(--md-ink);
}

:where(.md-btn-page-solid-dark) .elementor-widget-button .elementor-button,
:where(.md-btn-page-outline-dark) .elementor-widget-button .elementor-button:hover {
	background-color: var(--md-ink);
	border-color: var(--md-ink);
	color: var(--md-paper);
}

:where(.md-btn-page-outline-light) .elementor-widget-button .elementor-button,
:where(.md-btn-page-solid-light) .elementor-widget-button .elementor-button:hover {
	background-color: transparent;
	border-color: var(--md-accent);
	color: var(--md-accent);
}

:where(.md-btn-page-solid-light) .elementor-widget-button .elementor-button,
:where(.md-btn-page-outline-light) .elementor-widget-button .elementor-button:hover {
	background-color: var(--md-accent);
	border-color: var(--md-accent);
	color: var(--md-light);
}

:where(.md-btn-photo-outline-light, .md-btn-photo-solid-light) :where([data-mm-tone="dark"], .md-hero) .elementor-widget-button .elementor-button {
	background-color: transparent;
	border-color: var(--md-light);
	color: var(--md-light);
}

:where(.md-btn-photo-solid-light) :where([data-mm-tone="dark"], .md-hero) .elementor-widget-button .elementor-button,
:where(.md-btn-photo-outline-light) :where([data-mm-tone="dark"], .md-hero) .elementor-widget-button .elementor-button:hover {
	background-color: var(--md-light);
	color: var(--md-dark);
}

:where(.md-btn-photo-outline-dark, .md-btn-photo-solid-dark) :where([data-mm-tone="dark"], .md-hero) .elementor-widget-button .elementor-button {
	background-color: var(--md-dark);
	border-color: var(--md-dark);
	color: var(--md-light);
}

/* Elementor > Button > Button style: one button, any section. */
div.md-btn-is-solid-dark.md-btn-is-solid-dark a.elementor-button,
div.md-btn-is-outline-dark.md-btn-is-outline-dark a.elementor-button:hover {
	background-color: var(--md-ink);
	border-color: var(--md-ink);
	color: var(--md-paper);
}

div.md-btn-is-outline-dark.md-btn-is-outline-dark a.elementor-button,
div.md-btn-is-solid-dark.md-btn-is-solid-dark a.elementor-button:hover {
	background-color: transparent;
	border-color: var(--md-ink);
	color: var(--md-ink);
}

div.md-btn-is-solid-light.md-btn-is-solid-light a.elementor-button,
div.md-btn-is-outline-light.md-btn-is-outline-light a.elementor-button:hover {
	background-color: var(--md-light);
	border-color: var(--md-light);
	color: var(--md-dark);
}

div.md-btn-is-outline-light.md-btn-is-outline-light a.elementor-button,
div.md-btn-is-solid-light.md-btn-is-solid-light a.elementor-button:hover {
	background-color: transparent;
	border-color: var(--md-light);
	color: var(--md-light);
}

/*
 * Arrow link: small capitals followed by a disc with an arrow
 * ("Available rooms", "See location"). Set md-arrow on a Button widget;
 * md-arrow-dark gives a dark disc and text.
 */
div.md-arrow.md-arrow a.elementor-button {
	gap: 14px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--md-accent);
}

div.md-arrow.md-arrow a.elementor-button::after {
	content: "";
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--md-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12h10m-4-4 4 4-4 4' fill='none' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E") center / 24px no-repeat;
	transition: transform 0.35s var(--md-ease);
}

div.md-arrow.md-arrow a.elementor-button:hover {
	background: none;
	color: var(--md-accent);
}

div.md-arrow.md-arrow a.elementor-button:hover::after {
	transform: translateX(4px);
}

div.md-arrow-dark.md-arrow-dark a.elementor-button,
div.md-arrow-dark.md-arrow-dark a.elementor-button:hover {
	color: var(--md-ink);
}

div.md-arrow-dark.md-arrow-dark a.elementor-button::after {
	background-color: var(--md-ink);
}

[data-mm-tone="dark"] div.md-arrow.md-arrow a.elementor-button {
	color: var(--md-light);
}

/* Images: ratios, fill and black and white, set by class. */
.md-img img,
.md-fill img {
	display: block;
	width: 100%;
}

.md-ratio-34 img { aspect-ratio: 3 / 4; object-fit: cover; }
.md-ratio-45 img { aspect-ratio: 4 / 5; object-fit: cover; }
.md-ratio-11 img { aspect-ratio: 1; object-fit: cover; }
.md-ratio-32 img { aspect-ratio: 3 / 2; object-fit: cover; }
.md-ratio-169 img { aspect-ratio: 16 / 9; object-fit: cover; }

/* Fill: the image takes the full height of its container. */
.elementor-widget-image.md-fill {
	align-self: stretch;
	height: 100%;
}

.md-fill .elementor-widget-container,
.md-fill figure,
.md-fill a {
	height: 100%;
}

.md-fill img {
	height: 100%;
	min-height: 240px;
	object-fit: cover;
}

.md-bw img {
	filter: grayscale(1);
}

.elementor-widget-image .widget-image-caption {
	margin-top: 10px;
	font: 400 9.5px/1.6 var(--md-sans);
	letter-spacing: 0.1em;
	text-align: left;
	text-transform: uppercase;
}

/* 5. Sections and layouts --------------------------------------------- */

/*
 * Hero: a full-screen photo (the container's background image) with a light
 * shade so white words read anywhere on it.
 */
.e-con.md-hero {
	position: relative;
	isolation: isolate;
	color: var(--md-light);
}

.e-con.md-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: rgba(0, 0, 0, calc(var(--md-shade) * 0.6));
	pointer-events: none;
}

.md-shade-none { --md-shade: 0; }
.md-shade-light { --md-shade: 0.4; }
.md-shade-medium { --md-shade: 0.7; }
.md-shade-strong { --md-shade: 1; }

.md-hero .elementor-heading-title,
.md-hero .elementor-widget-text-editor {
	color: inherit;
}

/* Black and white background photo on a container. */
.e-con.md-bw-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	backdrop-filter: grayscale(1);
	pointer-events: none;
}

/*
 * Sandwich: a heading, a small photo and a faded heading stacked so the
 * photo slips between the lines ("Play, rest and dine like a member").
 * Set md-sandwich on the container; the photo can carry a scroll speed.
 */
.e-con.md-sandwich {
	align-items: center;
	overflow: hidden;
	overflow: clip;
	text-align: center;
}

.md-sandwich > .elementor-widget-heading,
.md-sandwich > .e-con-inner > .elementor-widget-heading {
	position: relative;
	z-index: 2;
}

.md-sandwich .elementor-widget-image {
	position: relative;
	z-index: 1;
	width: min(320px, 22vw);
	margin-top: -0.6em;
	margin-bottom: -0.55em;
}

.md-sandwich .elementor-widget-image img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.md-sandwich .md-ghost {
	z-index: 0;
}

/* Rules: a hairline under a heading block. */
.md-rule-below {
	padding-bottom: 18px;
	border-bottom: 1px solid var(--md-rule);
}

/* Contact line at the foot of the hero ("Call us today"). */
.md-callout {
	gap: 28px;
}

/* Inner page head built in Elementor: tall paper band with a centred title. */
.e-con.md-page-intro {
	padding-top: calc(var(--md-header-h) + 60px);
	text-align: center;
}

/* 6. Forms and theme widgets ------------------------------------------ */

.mirador-form .wpcf7-form {
	display: grid;
	gap: 26px;
}

.mirador-form .form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px 32px;
}

.mirador-form .form-field {
	margin: 0;
}

.mirador-form .form-field.is-wide {
	grid-column: 1 / -1;
}

.mirador-form .form-field label {
	display: block;
}

.mirador-form .form-field br {
	display: none;
}

.mirador-form .form-label,
.mirador-contact__label,
.mirador-title__eyebrow {
	display: block;
	margin-bottom: 8px;
	color: var(--md-ink-soft);
	font: 400 10px/1.6 var(--md-sans);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.mirador-form .form-label em {
	font-style: normal;
	letter-spacing: 0.04em;
	text-transform: none;
}

.mirador-form .wpcf7-form-control-wrap {
	display: block;
}

.mirador-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.mirador-form select,
.mirador-form textarea {
	width: 100%;
	min-height: 44px;
	padding: 8px 0;
	border: 0;
	border-bottom: 1px solid var(--md-rule);
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: 400 15px/1.5 var(--md-text);
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}

.mirador-form select {
	padding-right: 22px;
	background: linear-gradient(45deg, transparent 50%, currentColor 50%) right 7px center / 5px 5px no-repeat,
		linear-gradient(-45deg, transparent 50%, currentColor 50%) right 2px center / 5px 5px no-repeat;
}

.mirador-form textarea {
	min-height: 8rem;
	resize: vertical;
}

.mirador-form input:focus,
.mirador-form select:focus,
.mirador-form textarea:focus {
	border-bottom-color: currentColor;
	outline: none;
}

.mirador-form ::placeholder {
	color: var(--md-ink-soft);
	opacity: 0.8;
}

.mirador-form .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.mirador-form .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: var(--md-ink-soft);
	font-size: 14px;
}

.mirador-form .wpcf7-acceptance input {
	margin-top: 5px;
	accent-color: var(--md-accent);
}

body .mirador-form input.wpcf7-submit,
.md-button {
	justify-self: start;
	display: inline-block;
	padding: 15px 30px;
	border: 1px solid var(--md-ink);
	border-radius: 999px;
	background-color: var(--md-ink);
	color: var(--md-paper);
	font: 400 10px/1 var(--md-sans);
	letter-spacing: 0.16em;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.35s var(--md-ease), color 0.35s var(--md-ease), border-color 0.35s var(--md-ease);
}

body .mirador-form input.wpcf7-submit:hover,
body .mirador-form input.wpcf7-submit:focus,
.md-button:hover {
	border-color: var(--md-accent);
	background-color: var(--md-accent);
	color: var(--md-light);
}

.mirador-form .wpcf7-spinner {
	margin: 0 0 0 16px;
}

.mirador-form .wpcf7-not-valid-tip {
	margin-top: 6px;
	color: #a2412c;
	font-size: 13px;
}

.mirador-form .wpcf7 form .wpcf7-response-output {
	margin: 0;
	padding: 14px 18px;
	border: 1px solid var(--md-rule);
	font-size: 14px;
}

.mirador-form .wpcf7 form.sent .wpcf7-response-output {
	border-color: #5d7d5f;
}

.mirador-form .wpcf7 form.invalid .wpcf7-response-output,
.mirador-form .wpcf7 form.failed .wpcf7-response-output {
	border-color: #a2412c;
}

/* Contact Details and Social Links widgets. */
.mirador-contact {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mirador-contact p {
	margin: 0;
	color: inherit;
}

.mirador-contact a,
.mirador-social a {
	color: inherit;
	text-decoration: none;
}

.mirador-contact a:hover,
.mirador-social a:hover {
	color: var(--md-accent);
}

.mirador-social {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
	font: 400 10px/1.7 var(--md-sans);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.mirador-social.is-vertical {
	flex-direction: column;
}

.mirador-social.is-icons svg {
	display: block;
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* Section Title widget. */
.mirador-title {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.mirador-title.is-align-center {
	align-items: center;
	text-align: center;
}

.mirador-title__eyebrow,
.mirador-title__heading,
.mirador-title__text {
	margin: 0;
}

.mirador-title__eyebrow {
	color: var(--md-accent);
}

.mirador-title__heading {
	font-size: clamp(30px, 3.4vw, 54px);
	line-height: 1.04;
}

.mirador-title.is-small .mirador-title__heading {
	font-size: clamp(22px, 1.9vw, 30px);
}

.mirador-title.is-hero .mirador-title__heading {
	font-size: clamp(42px, 6.4vw, 104px);
	line-height: 1.02;
}

.mirador-title__text {
	max-width: 40rem;
	color: var(--md-ink-soft);
}

.mirador-title.is-light,
.mirador-title.is-light .mirador-title__text,
.mirador-title.is-light .mirador-title__eyebrow {
	color: var(--md-light);
}

/* FAQ and Price List widgets. */
.mirador-faq__title,
.mirador-prices__title {
	margin: 0 0 12px;
	font-size: clamp(24px, 2.2vw, 34px);
}

.mirador-faq__item,
.mirador-prices__item {
	border-bottom: 1px solid var(--md-rule);
}

.mirador-faq__question {
	position: relative;
	padding: 20px 44px 20px 0;
	font: 400 11px/1.6 var(--md-sans);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	list-style: none;
	cursor: pointer;
}

.mirador-faq__question::-webkit-details-marker {
	display: none;
}

.mirador-faq__question::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 22px;
	height: 22px;
	margin-top: -11px;
	border-radius: 50%;
	background: var(--md-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M11 6v10M6 11h10' fill='none' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E") center / 22px no-repeat;
	transition: transform 0.35s var(--md-ease);
}

.mirador-faq__item[open] .mirador-faq__question::after {
	transform: rotate(45deg);
}

.mirador-faq__answer {
	padding-bottom: 22px;
	color: var(--md-ink-soft);
}

.mirador-faq__answer > :last-child {
	margin-bottom: 0;
}

.mirador-prices__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mirador-prices__item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	padding: 16px 0;
}

.mirador-prices__main {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.mirador-prices__name {
	font: 400 11px/1.6 var(--md-sans);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.mirador-prices__desc {
	color: var(--md-ink-soft);
	font-size: 14px;
}

.mirador-prices__price {
	flex: 0 0 auto;
	white-space: nowrap;
	font-variant-numeric: lining-nums tabular-nums;
}

.mirador-editor-note {
	padding: 12px 16px;
	border: 1px dashed currentColor;
	font-size: 13px;
}

/* 7. Journal, articles and plain pages -------------------------------- */

.md-page-head {
	max-width: 960px;
	margin: 0 auto;
	padding: calc(var(--md-header-h) + clamp(60px, 8vw, 110px)) var(--md-gutter) clamp(48px, 6vw, 80px);
	text-align: center;
}

.md-page-head--tall {
	min-height: 70vh;
	box-sizing: border-box;
}

.md-page-head__title {
	margin: 0;
	font-size: clamp(36px, 5vw, 76px);
	line-height: 1.02;
}

.md-page-head__title em {
	font-style: normal;
	color: var(--md-accent);
}

.md-page-head__lede {
	max-width: 34em;
	margin: 28px auto 0;
	font: 300 clamp(15px, 1.3vw, 19px)/1.4 var(--md-sans);
	text-transform: uppercase;
}

.md-page-head .md-button {
	margin-top: 36px;
}

.md-journal {
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 var(--md-gutter) 140px;
}

.md-journal__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 64px 28px;
}

.md-journal__grid.is-columns-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 72px 40px;
}

.md-journal-card__link {
	display: block;
	text-decoration: none;
}

.md-journal-card__image {
	margin: 0 0 22px;
	overflow: hidden;
}

.md-journal-card__image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform 1.2s var(--md-ease);
}

.md-journal-card__link:hover img {
	transform: scale(1.04);
}

.md-journal-card__title {
	margin: 0 0 10px;
	font-size: clamp(20px, 1.7vw, 26px);
}

.md-journal-card__excerpt {
	margin: 0;
	color: var(--md-ink-soft);
}

.md-journal__empty {
	text-align: center;
}

.md-journal .navigation {
	margin-top: 80px;
	text-align: center;
}

.md-journal .nav-links {
	display: flex;
	justify-content: center;
	gap: 18px;
	font: 400 10px/1 var(--md-sans);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.md-journal .nav-links a {
	text-decoration: none;
}

.md-journal .nav-links .current {
	color: var(--md-accent);
}

.md-article__image {
	max-width: 1360px;
	margin: 0 auto 80px;
	padding: 0 var(--md-gutter);
	box-sizing: border-box;
}

.md-article__image img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.md-prose {
	max-width: 720px;
	margin: 0 auto;
	padding: 0 var(--md-gutter) 120px;
}

.md-prose h2 {
	margin: 2em 0 0.6em;
	font-size: clamp(26px, 2.4vw, 36px);
}

.md-prose h3 {
	margin: 1.8em 0 0.6em;
	font-size: clamp(20px, 1.8vw, 26px);
}

.md-prose a:hover {
	color: var(--md-accent);
}

.md-prose blockquote {
	margin: 2em 0;
	padding: 0;
	font: 300 clamp(18px, 1.8vw, 24px)/1.35 var(--md-sans);
	text-transform: uppercase;
}

.md-prose img,
.md-prose figure {
	max-width: 100%;
	height: auto;
}

.md-article__nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: baseline;
	gap: 24px;
	max-width: 720px;
	margin: -40px auto 0;
	padding: 0 var(--md-gutter) 140px;
	font: 400 10px/1.5 var(--md-sans);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.md-article__nav p {
	margin: 0;
}

.md-article__back {
	grid-column: 2;
	text-align: center;
}

.md-article__next {
	grid-column: 3;
	text-align: right;
}

.md-article__nav a {
	text-decoration: none;
}

.md-article__nav a:hover {
	color: var(--md-accent);
}

/* 8. Footer ------------------------------------------------------------ */

/*
 * The photo sits behind the footer at full screen. With "Hold the photo
 * still" on, it is fixed and clipped to the footer, so the footer scrolls
 * up over a photo that does not move.
 */
.md-footer {
	position: relative;
	isolation: isolate;
	min-height: 100vh;
	padding: clamp(80px, 9vw, 120px) var(--md-gutter) 48px;
	box-sizing: border-box;
	background-color: var(--md-dark);
	color: var(--md-light);
	text-align: center;
	clip-path: inset(0);
}

.md-footer__photo {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.md-footer.is-held .md-footer__photo {
	position: fixed;
}

.md-footer__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Shade over the footer photo, darkest behind the words in the middle. */
.md-footer__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient(ellipse 70% 65% at 50% 45%, rgba(0, 0, 0, calc(var(--md-footer-shade) * 0.55)), transparent 75%),
		rgba(0, 0, 0, var(--md-footer-shade));
}

.md-footer__inner {
	max-width: 1360px;
	margin: 0 auto;
}

.md-footer__call {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 32px;
	border-bottom: 1px solid var(--md-rule-light);
}

.md-footer__title {
	margin: 0 0 30px;
	font-size: clamp(30px, 3vw, 46px);
	line-height: 1;
}

.md-footer__line {
	max-width: 60em;
	margin: 34px 0 0;
	font: 300 clamp(13px, 1.25vw, 17px)/1.4 var(--md-sans);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* Circle button: a disc in the accent colour with a small label. */
.md-circle {
	display: inline-grid;
	place-items: center;
	width: 92px;
	height: 92px;
	border-radius: 50%;
	background-color: var(--md-accent);
	color: var(--md-light);
	font: 400 9.5px/1.2 var(--md-sans);
	letter-spacing: 0.12em;
	text-decoration: none;
	text-transform: uppercase;
	transition: transform 0.5s var(--md-ease), background-color 0.35s var(--md-ease);
}

.md-circle:hover {
	transform: scale(1.08);
}

/* Large statements in the heading font (Theme Options > Typography). */
.md-statement-serif .md-statement .elementor-heading-title,
.md-statement-serif .md-statement p {
	font-family: var(--md-serif);
	font-weight: var(--md-serif-weight);
	letter-spacing: 0.01em;
}

/* Large statements in wide spaced capitals, like the name on the home page. */
.md-statement-wide .md-statement .elementor-heading-title,
.md-statement-wide .md-statement p {
	font-family: var(--md-sans);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.18em;
}

/* Logo name in the heading font (Theme Options > Logo > Name font). */
.md-logo-serif .md-wordmark__name {
	font-family: var(--md-serif);
	font-weight: var(--md-serif-weight);
	letter-spacing: calc(0.06em + var(--logo-spacing, 0) * 0.01em);
}

/* Footer text link: the quieter choice for the footer button. */
.md-footer__link {
	padding-bottom: 6px;
	border-bottom: 1px solid currentcolor;
	color: inherit;
	font: 400 11px/1.4 var(--md-sans);
	letter-spacing: 0.22em;
	text-decoration: none;
	text-transform: uppercase;
	transition: opacity 0.35s var(--md-ease);
}

.md-footer__link:hover {
	opacity: 0.65;
}

/* Heading letters "As typed" (Theme Options > Typography). */
.md-case-typed :is(h1, h2, h3),
.md-case-typed .md-display .elementor-heading-title,
.md-case-typed .md-statement .elementor-heading-title,
.md-case-typed .md-statement p,
.md-case-typed .md-footer__title,
.md-case-typed .md-menu__list a {
	text-transform: none;
}

.md-case-typed .md-display .elementor-heading-title {
	line-height: 1.06;
}

.md-footer__details {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	padding-top: 32px;
	font: 400 10px/1.6 var(--md-sans);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.md-footer__group p,
.md-footer__base p {
	margin: 0;
}

.md-footer__label {
	opacity: 0.7;
}

.md-footer a {
	color: inherit;
	text-decoration: none;
}

.md-footer a:hover {
	color: var(--md-accent);
}

.md-footer__menu {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.md-footer__social {
	justify-content: center;
}

.md-footer .site-logo {
	padding: 0;
}

/* 9. Responsive and motion preferences --------------------------------- */

@media (max-width: 1024px) {
	:root,
	body {
		--md-header-h: 72px;
	}

	.md-journal__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.md-sandwich .elementor-widget-image {
		width: min(280px, 46vw);
	}
}

@media (max-width: 782px) {
	body.admin-bar .md-header,
	body.admin-bar .md-menu {
		top: 46px;
	}
}

@media (max-width: 767px) {
	.md-wordmark.is-badge {
		min-height: calc(var(--logo-height-mobile, 64px) * 0.9);
		padding: 12px 10px 10px;
	}

	.md-wordmark__name {
		font-size: var(--logo-text-size-mobile, 17px);
	}

	.site-logo img {
		height: calc(var(--logo-height-mobile, 64px) * 0.5);
	}

	.md-journal__grid,
	.md-journal__grid.is-columns-2,
	.mirador-form .form-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.md-article__nav {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.md-article__back,
	.md-article__next {
		grid-column: auto;
		text-align: center;
	}

	.md-footer {
		min-height: 0;
	}
}

/* iOS draws fixed images inside clipped boxes poorly: let the photo scroll there. */
@supports (-webkit-touch-callout: none) {
	.md-footer.is-held .md-footer__photo {
		position: absolute;
	}
}

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

	.md-header,
	.md-menu,
	.md-menu__list > li,
	.md-journal-card__image img,
	.md-circle {
		transition: none;
	}
}

/* Page fade while the page loads; the Elementor editor always shows the page. */
html.md-loading .md-main {
	opacity: 0;
}

.md-main {
	transition: opacity 0.6s var(--md-ease);
}

.elementor-editor-active .md-main,
html.md-loading .elementor-editor-active .md-main {
	opacity: 1;
}

/* Thumb: a small photo beside a short text, a fixed size on every screen. */
.elementor-widget-image.md-thumb {
	flex: 0 0 clamp(150px, 15vw, 240px);
}

/* 10. Photo look (inc/photo-look.php) ------------------------------------ */

/*
 * Tone: one filter for every photo. Low specificity, so a widget's own CSS
 * filter in Elementor still wins.
 */
:where(.md-main, .md-footer__photo) img {
	filter: var(--md-photo-filter, none);
}

:where(.md-main) .md-bw img {
	filter: var(--md-photo-filter, brightness(1)) grayscale(1);
}

/* Full-screen background photos get the same tone through their shade layer. */
.e-con.md-hero::before {
	-webkit-backdrop-filter: var(--md-photo-filter, none);
	backdrop-filter: var(--md-photo-filter, none);
}

/*
 * Grain: a tiling texture over each photo. Elementor 3.24 and newer leave
 * out the widget's inner container ("Optimized markup"), so the texture then
 * sits on the image widget itself, under the reveal curtain (z-index 2).
 * Position rules use :where() so Elementor's own positioning always wins.
 */
:where(.md-has-grain .elementor-widget-image .elementor-widget-container),
:where(.md-has-grain .elementor-widget-image:not(:has(> .elementor-widget-container))),
.md-has-grain .md-footer__photo,
.md-has-grain .md-journal-card__image,
.md-has-grain .mr-card__photo {
	position: relative;
}

.md-has-grain .elementor-widget-image .elementor-widget-container::after,
.md-has-grain .elementor-widget-image:not(:has(> .elementor-widget-container))::before,
.md-has-grain .md-footer__photo::before,
.md-has-grain .md-journal-card__image::after,
.md-has-grain .mr-card__photo::after,
.md-has-grain .e-con.md-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image: var(--md-grain-image);
	background-size: var(--md-grain-size, 256px) var(--md-grain-size, 256px);
	mix-blend-mode: overlay;
	opacity: var(--md-grain-opacity, 0);
	pointer-events: none;
}

/*
 * Per-section switches, added in Elementor under Advanced > CSS Classes.
 * md-no-grain removes the grain; md-no-look shows the photos as they are.
 */
.md-no-grain {
	--md-grain-opacity: 0;
}

.md-no-look {
	--md-photo-filter: brightness(1);
	--md-grain-opacity: 0;
}

@media print {
	.md-has-grain *::after {
		background-image: none;
	}
}

/* 11. Emblem (inc/emblem.php) ------------------------------------------- */

/* A line drawing in the colour of the text around it. */
.md-emblem {
	display: inline-flex;
	width: var(--md-emblem-size, 44px);
	height: var(--md-emblem-size, 44px);
	color: inherit;
	line-height: 0;
}

.md-emblem svg,
.md-emblem img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.md-emblem-widget {
	display: flex;
	justify-content: center;
}

.md-footer__emblem {
	--md-emblem-size: 40px;
	margin-bottom: 18px;
}

/* Phones: half the extra letter spacing, so a wide name never meets the menu. */
@media (max-width: 767px) {
	.md-wordmark__name {
		letter-spacing: calc(0.04em + var(--logo-spacing, 0) * 0.005em);
	}
}

/*
 * Wide: a heading in the label font, in wide spaced capitals like the name
 * on the home page. Add md-wide next to md-display; the size still comes from
 * the widget, so Elementor's Typography controls keep working.
 */
.md-display.md-wide .elementor-heading-title {
	font-family: var(--md-sans);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: 0.28em;
	text-transform: uppercase;
}

/* Running text in wide spaced capitals of the label font (add md-run-wide). */
.md-run-wide .mm-run {
	font-family: var(--md-sans);
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: uppercase;
}

/* Footer title in wide spaced capitals (Theme Options > Footer > Title font). */
.md-footer-wide .md-footer__title {
	font-family: var(--md-sans);
	font-size: clamp(16px, 1.6vw, 22px);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

/* Text link at the right foot of the hero, mirroring "Call us today". */
.md-callout-end {
	justify-content: flex-end;
	text-align: right;
}

/* The hero lockup sits a little above the middle, so it reads as centred. */
@media (min-width: 768px) {
	.md-hero .md-lockup {
		margin-top: -7vh;
	}
}

.md-has-grain .md-footer__photo::before {
	z-index: 2;
}

/*
 * Global fonts on linked widgets. A widget linked to one of Elementor's global
 * fonts (Theme Options > Typography) takes family and weight from it; its size,
 * line height, spacing and capitals come from these values, which each text
 * style sets for itself. Pick a custom font in the widget to override them.
 */
.elementor-widget {
	--e-global-typography-accent-text-transform: uppercase;
}

.elementor-widget-button {
	--e-global-typography-accent-font-size: 12px;
	--e-global-typography-accent-line-height: 1;
	--e-global-typography-accent-letter-spacing: 0.3em;
}

.md-lockup-caps {
	--e-global-typography-accent-font-size: 12px;
	--e-global-typography-accent-line-height: 1.6;
	--e-global-typography-accent-letter-spacing: 0.06em;
}

@media (max-width: 767px) {
	.md-lockup-caps {
		--e-global-typography-accent-font-size: 10.5px;
	}
}

/* Buttons of the scroll effects and room widgets, in the label font. */
button.mm-expand,
button.mr-pill {
	font-family: var(--md-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

button.mm-expand {
	line-height: 1.2;
}

button.mr-pill {
	line-height: 1;
}