/*
 * Mbise Lodge & Garden — the theme stylesheet. Design: "Bold modern".
 *
 * Words, photos, links, colours, fonts and spacing all live in Elementor and
 * are edited there. This file only does what Elementor has no control for:
 * the header floating over the photos and turning solid as you scroll, the
 * colour wipe on buttons, the moving band of words, the room tabs, photos that
 * wipe into view, the phone menu and action bar, and dressing the booking
 * plugin in the lodge's colours.
 *
 * Colours come from Elementor's global colours (Site Settings), so changing
 * "Mbise Maroon" there changes it here too. The hex after each is only a
 * fallback for pages Elementor has not styled.
 */

:root {
	--mb-ink: var(--e-global-color-primary, #1d1a19);
	--mb-gold: var(--e-global-color-secondary, #c9931f);
	--mb-grey: var(--e-global-color-text, #6a625e);
	--mb-maroon: var(--e-global-color-accent, #8c1c2e);
	--mb-gold-deep: var(--e-global-color-mbgolddeep, #9a6a0e);
	--mb-white: var(--e-global-color-mbwhite, #ffffff);
	--mb-sand: var(--e-global-color-mbsand, #f5efe6);
	--mb-gold-soft: var(--e-global-color-mbgoldsoft, #f4e4be);
	--mb-maroon-deep: var(--e-global-color-mbmaroondeep, #6a1222);
	--mb-line: #e6ddd0;
	--mb-line-light: rgba(255, 255, 255, 0.22);
	--mb-display: "DM Serif Display", Georgia, "Times New Roman", serif;
	--mb-sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
	--mb-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--mb-header-h: 96px;

	/* Older names, kept for anything that still uses them. */
	--mb-black: var(--mb-ink);
	--mb-stone: var(--mb-grey);
	--mb-bone: var(--mb-white);
	--mb-serif: var(--mb-display);
	--mb-caps: var(--mb-sans);
}

/* ---------------------------------------------------------------- base */

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }

body.mbise {
	margin: 0;
	background: var(--mb-white);
	color: var(--mb-grey);
	font-family: var(--mb-sans);
	font-weight: 400;
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

.mbise img { max-width: 100%; height: auto; }
.mbise :focus-visible { outline: 2px solid var(--mb-gold); outline-offset: 3px; }

.mb-skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--mb-ink); color: var(--mb-white); padding: 10px 16px; }
.mb-skip:focus { top: 16px; }
.mbise .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Elementor's own margins inside text widgets, so containers alone set the rhythm. */
.mbise .elementor-widget-text-editor p { margin: 0 0 1em; max-width: 62ch; }
.mbise .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.mbise .elementor-heading-title { text-wrap: balance; }

/* ---------------------------------------------------------------- type */

.mb-eyebrow .elementor-heading-title { margin: 0 0 20px; }
.mb-eyebrow--plain .elementor-heading-title { margin: 0; }

/* A word or two in italic: type <em> around them in the heading.
   Maroon on white and sand; gold on photos and maroon. */
.mbise .elementor-heading-title em { font-style: italic; color: var(--mb-maroon); }
.mbise .mb-on-dark .elementor-heading-title em,
.mbise .mb-dark .elementor-heading-title em,
.mbise .mb-display .elementor-heading-title em,
.mbise .mb-karibu .elementor-heading-title em { color: var(--mb-gold); }

.mb-lede.mb-on-dark p { max-width: 46ch; }
.mb-on-dark.elementor-widget-text-editor:not(.mb-quote) { opacity: 0.86; }
.mb-small { font-size: 15px; }
.mb-caption, .mb-fineprint, .mb-note { font-size: 13px; }
.mb-section-aside p { max-width: 40ch; }
.mb-quote p { max-width: 34ch; }

/* ---------------------------------------------------------------- buttons */

/* Square, spaced capitals; on hover a second colour sweeps across. */
.mb-btn .elementor-button {
	border-radius: 0;
	min-height: 56px;
	padding: 0 30px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	border: 1.5px solid transparent;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: color 0.4s var(--mb-ease), border-color 0.4s var(--mb-ease);
}

.mb-btn:not(.mb-link) .elementor-button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.5s var(--mb-ease);
}

.mb-btn:not(.mb-link) .elementor-button:hover::before { transform: scaleX(1); transform-origin: left; }

.mb-btn--solid .elementor-button::before { background: var(--mb-ink); }
.mb-btn--gold .elementor-button::before { background: var(--mb-white); }
.mb-btn--gold .elementor-button:hover { color: var(--mb-ink) !important; }
.mb-btn--ghost .elementor-button { background: transparent; border-color: rgba(255, 255, 255, 0.6); }
.mb-btn--ghost .elementor-button::before { background: var(--mb-white); }
.mb-btn--ghost .elementor-button:hover { color: var(--mb-ink) !important; border-color: var(--mb-white); }
.mb-btn--line .elementor-button { background: transparent; border-color: var(--mb-ink); }
.mb-btn--line .elementor-button::before { background: var(--mb-ink); }
.mb-btn--line .elementor-button:hover { color: var(--mb-white) !important; }

/* A text link with a line under it and an arrow that moves on hover. */
.mb-link .elementor-button {
	background: transparent;
	min-height: 0;
	padding: 0 0 6px;
	border: 0;
	border-bottom: 1.5px solid currentColor;
	overflow: visible;
	transition: gap 0.4s var(--mb-ease), color 0.3s;
	white-space: nowrap;
}

.mb-link .elementor-button:hover { gap: 18px; color: var(--mb-maroon) !important; background: transparent; }
.mb-dark .mb-link .elementor-button:hover, .mb-on-dark .mb-link .elementor-button:hover { color: var(--mb-gold) !important; }
.mb-arrow { width: 18px; height: 10px; flex: none; }

/* ---------------------------------------------------------------- header */

.mb-site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 50;
	transition: background-color 0.45s var(--mb-ease), box-shadow 0.45s var(--mb-ease);
}

.admin-bar .mb-site-header { top: 32px; }

@media (max-width: 782px) {
	.admin-bar .mb-site-header { top: 46px; }
}

/* Pages without a photo at the top start below the header. */
body.mbise:not(.mb-has-hero) .mb-main { padding-top: var(--mb-header-h); }

/* Solid white: on scroll, and always on pages without a photo at the top. */
.mb-site-header.is-solid,
body:not(.mb-has-hero) .mb-site-header {
	background: var(--mb-white);
	box-shadow: 0 1px 0 var(--mb-line);
}

/* Once solid, the header slims down so it takes less of the page. */
.mbise .mb-header-bar > .e-con-inner { transition: padding 0.45s var(--mb-ease); }

@media (min-width: 1025px) {
	.mbise .mb-site-header.is-solid .mb-header-bar { --padding-top: 12px; --padding-bottom: 12px; }
}

@media (min-width: 768px) and (max-width: 1024px) {
	.mbise .mb-site-header.is-solid .mb-header-bar { --padding-top: 8px; --padding-bottom: 8px; }
}

/* Logo left, menu in the middle, phone and booking right, on one line. */
.mb-header-bar > .e-con-inner { flex-wrap: nowrap; }
.mbise .mb-brand { flex: 0 0 180px; --width: 180px; }
.mbise .mb-header-actions { --width: auto; flex: 0 0 auto; margin-left: auto; justify-content: flex-end; }
.mbise .mb-nav { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
.mb-nav ul { flex-wrap: nowrap; white-space: nowrap; }

@media (max-width: 767px) {
	.mbise .mb-brand { flex-basis: 140px; --width: 140px; }
}

/* The two logos: light over the photo, dark once the header is solid. */
.mb-brand { position: relative; }
.mb-logo img { width: 100%; display: block; transition: opacity 0.4s var(--mb-ease); }
.mb-logo--dark { position: absolute !important; inset: 0; opacity: 0; pointer-events: none; }
.mb-site-header.is-solid .mb-logo--light, body:not(.mb-has-hero) .mb-logo--light { opacity: 0; pointer-events: none; }
.mb-site-header.is-solid .mb-logo--dark, body:not(.mb-has-hero) .mb-logo--dark { opacity: 1; pointer-events: auto; }

/* The menu, from Appearance → Menus. */
.mb-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(16px, 1.9vw, 34px); }

/* Between a tablet and a wide screen there is room for the menu or the
   phone number, not both; the phone stays in the footer and the phone bar. */
@media (max-width: 1260px) {
	.mbise .mb-header-phone { display: none; }
}

.mbise .mb-nav a {
	color: var(--mb-white);
	text-decoration: none;
	font-family: var(--mb-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	position: relative;
	padding: 6px 0;
	display: block;
	transition: color 0.4s var(--mb-ease);
}

.mb-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1.5px;
	background: var(--mb-gold);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.45s var(--mb-ease);
}

.mb-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.mb-nav .widget_nav_menu, .mb-nav h5 { margin: 0; }
.mbise .mb-site-header.is-solid .mb-nav a, body.mbise:not(.mb-has-hero) .mb-nav a { color: var(--mb-ink); }

.mb-header-phone .elementor-button {
	background: transparent;
	padding: 0;
	min-height: 0;
	border: 0;
	font-family: var(--mb-sans);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: none;
	color: var(--mb-white) !important;
	font-variant-numeric: tabular-nums;
}

.mb-site-header.is-solid .mb-header-phone .elementor-button,
body:not(.mb-has-hero) .mb-header-phone .elementor-button { color: var(--mb-ink) !important; }

.mb-header-book .elementor-button { min-height: 48px; padding: 0 22px; white-space: nowrap; }

.mb-menu-toggle { display: none; }

.mb-menu-toggle .elementor-icon {
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	border: 1.5px solid rgba(255, 255, 255, 0.7);
	font-size: 18px;
	color: var(--mb-white);
}

.mb-site-header.is-solid .mb-menu-toggle .elementor-icon,
body:not(.mb-has-hero) .mb-menu-toggle .elementor-icon { border-color: var(--mb-ink); color: var(--mb-ink) !important; }

.mb-site-header.is-solid .mb-menu-toggle .elementor-icon svg,
body:not(.mb-has-hero) .mb-menu-toggle .elementor-icon svg { fill: var(--mb-ink) !important; }

/* Phone menu: built by mbise.js from the same menu and buttons. It sweeps
   down in maroon. */
.mb-menu-panel {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: var(--mb-maroon);
	color: var(--mb-white);
	display: flex;
	flex-direction: column;
	padding: calc(22px + env(safe-area-inset-top, 0px)) 20px calc(32px + env(safe-area-inset-bottom, 0px));
	clip-path: inset(0 0 100% 0);
	visibility: hidden;
	transition: clip-path 0.6s var(--mb-ease), visibility 0.6s;
}

.mb-menu-panel.is-open { clip-path: inset(0 0 0 0); visibility: visible; }
.mb-menu-panel__top { display: flex; justify-content: space-between; align-items: center; }
.mb-menu-panel__top img { width: 140px; }

.mb-menu-panel__close {
	background: none;
	border: 1.5px solid rgba(255, 255, 255, 0.6);
	color: var(--mb-white);
	width: 48px;
	height: 48px;
	font-size: 24px;
	cursor: pointer;
}

.mb-menu-panel nav { display: grid; gap: 2px; margin: auto 0; }
.mb-menu-panel nav a { font-family: var(--mb-display); font-size: 40px; color: var(--mb-white); text-decoration: none; line-height: 1.25; }
.mb-menu-panel nav a:hover, .mb-menu-panel nav a.is-book { color: var(--mb-gold-soft); }
.mb-menu-panel__contact { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.8); display: grid; gap: 4px; }
.mbise .mb-menu-panel__contact a { color: inherit; text-decoration: none; }

@media (max-width: 1024px) {
	.mbise .mb-nav, .mbise .mb-header-phone { display: none; }
	.mbise .mb-menu-toggle { display: block; }
}

@media (max-width: 767px) {
	.mbise .mb-header-book { display: none; }
}

/* Over the photo, a soft shade behind the header so the menu stays readable
   whatever the picture is. */
.mb-site-header::before {
	content: "";
	position: absolute;
	inset: 0 0 -60px 0;
	background: linear-gradient(180deg, rgba(29, 26, 25, 0.5), rgba(29, 26, 25, 0.18) 60%, rgba(29, 26, 25, 0));
	pointer-events: none;
	transition: opacity 0.45s var(--mb-ease);
}

.mb-site-header.is-solid::before, body:not(.mb-has-hero) .mb-site-header::before { opacity: 0; }

/* Plain header and footer, before the design is imported. */
.mb-fallback-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 20px; max-width: 1320px; margin: 0 auto; }
.mb-fallback-brand img { width: 180px; display: block; }
.mb-fallback-header .mb-nav a { color: var(--mb-ink); }
.mb-fallback-footer { background: var(--mb-sand); color: var(--mb-grey); padding: 40px 20px; text-align: center; font-size: 14px; }

/* ---------------------------------------------------------------- hero */

.mbise .mb-hero.e-con { --overflow: hidden; overflow: hidden; }

/* Darker on the left, where the words sit; Elementor's overlay does top to bottom. */
.mb-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(29, 26, 25, 0.42) 0%, rgba(29, 26, 25, 0.12) 50%, rgba(29, 26, 25, 0) 72%);
	pointer-events: none;
	z-index: 0;
}

.mb-hero > .e-con-inner { position: relative; z-index: 1; }
.mb-display .elementor-heading-title { max-width: 14ch; }

/* The big title rises into place as the page opens. */
.mb-hero .mb-display .elementor-heading-title { animation: mb-rise 1.2s var(--mb-ease) both; }
.mb-hero .mb-eyebrow { animation: mb-fade 1.2s var(--mb-ease) 0.5s both; }
.mb-hero .mb-lede { animation: mb-fade 1.2s var(--mb-ease) 0.7s both; }

@keyframes mb-rise { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
@keyframes mb-fade { from { opacity: 0; } to { opacity: 1; } }

/* The photo settles: it opens a touch close and eases back over two seconds.
   (Pages with one photo; the home page's photos zoom on their own.) */
.mb-hero { isolation: isolate; }

.mb-hero__photo {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-size: cover;
	background-repeat: no-repeat;
	pointer-events: none;
	transform: scale(1.06);
	animation: mb-settle 2.4s var(--mb-ease) forwards;
}

@keyframes mb-settle { to { transform: scale(1); } }

/* Which photo is showing, and how long until the next: added by mbise.js. */
.mb-slides-count {
	position: absolute;
	right: max(56px, calc((100% - 1320px) / 2 + 56px));
	bottom: 112px;
	z-index: 2;
	color: var(--mb-white);
	text-align: right;
	font-family: var(--mb-display);
	font-size: 20px;
	animation: mb-fade 1.2s var(--mb-ease) 0.8s both;
}

.mb-slides-count b { font-weight: 400; font-size: 40px; }
.mb-slides-count i { display: block; width: 200px; height: 2px; margin: 14px 0 0 auto; background: rgba(255, 255, 255, 0.28); overflow: hidden; }
.mb-slides-count i::after { content: ""; display: block; height: 100%; background: var(--mb-gold); transform: scaleX(0); transform-origin: left; }
.mb-slides-count.is-running i::after { animation: mb-bar var(--mb-slide, 6s) linear forwards; }
@keyframes mb-bar { to { transform: scaleX(1); } }

@media (max-width: 1024px) {
	.mb-slides-count { display: none; }
}

/* The round badge: the emblem, and the words turning slowly around it. */
.mbise .mb-hero-badge { position: absolute !important; right: max(56px, calc((100% - 1320px) / 2 + 56px)); top: 22%; width: 150px !important; z-index: 2; margin: 0 !important; }
.mb-badge { position: relative; width: 150px; height: 150px; border-radius: 50%; background: var(--mb-white); display: grid; place-items: center; box-shadow: 0 18px 44px -22px rgba(29, 26, 25, 0.55); animation: mb-pop 1s var(--mb-ease) 0.9s both; }
.mb-badge__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: mb-turn 30s linear infinite; }
.mb-badge__ring text { font: 700 10.5px var(--mb-sans); letter-spacing: 0.2em; text-transform: uppercase; fill: var(--mb-maroon); }
.mb-badge__emblem { width: 62px; height: auto; }
@keyframes mb-turn { to { transform: rotate(360deg); } }
@keyframes mb-pop { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: none; } }

@media (max-width: 1024px) {
	.mbise .mb-hero-badge { top: 116px; right: 40px; width: 112px !important; }
	.mb-badge { width: 112px; height: 112px; }
	.mb-badge__emblem { width: 46px; }
	.mb-badge__ring text { font-size: 10px; }
}

@media (max-width: 767px) {
	.mbise .mb-hero-badge { top: 96px; right: 20px; width: 92px !important; }
	.mb-badge { width: 92px; height: 92px; }
	.mb-badge__emblem { width: 38px; }
}

/* The woven band (after the diamond in the logo) along the edge of a section:
   add mb-band-top or mb-band-bottom to a section's CSS classes. */
.mbise .mb-band-top, .mbise .mb-band-bottom { position: relative; }
.mb-band-top::before, .mb-band-bottom::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 20px;
	z-index: 1;
	pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M20 2l8 8-8 8-8-8z' fill='%238C1C2E'/%3E%3Cpath d='M20 6.5l3.5 3.5-3.5 3.5-3.5-3.5z' fill='%23F5EFE6'/%3E%3Cpath d='M0 0h5L0 5zM40 0h-5l5 5zM0 20h5L0 15zM40 20h-5l5-5z' fill='%23C9931F'/%3E%3Ccircle cx='0' cy='10' r='2' fill='%23C9931F'/%3E%3Ccircle cx='40' cy='10' r='2' fill='%23C9931F'/%3E%3C/svg%3E") repeat-x center / 40px 20px;
	border-top: 1px solid var(--mb-gold);
	border-bottom: 1px solid var(--mb-gold);
	box-sizing: content-box;
	padding: 5px 0;
}
.mb-band-top::before { top: 0; }

/* Elementor draws a section's photo shade with the same ::before; these
   sections have none, so the band takes its place. */
.mbise .mb-band-top.e-con::before { content: "" !important; display: block !important; opacity: 1 !important; mix-blend-mode: normal !important; inset: 0 0 auto 0 !important; height: 20px !important; padding: 5px 0 !important; box-sizing: content-box !important; border-top: 1px solid var(--mb-gold) !important; border-bottom: 1px solid var(--mb-gold) !important; z-index: 1 !important; }
.mbise .mb-closing.mb-band-top.e-con::before { border-color: rgba(244, 228, 190, 0.6) !important; }
.mb-band-bottom::after { bottom: 0; }

/* On maroon, the band turns gold and pale gold. */
.mb-closing.mb-band-top::before, .mb-closing.mb-band-bottom::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M20 2l8 8-8 8-8-8z' fill='%23C9931F'/%3E%3Cpath d='M20 6.5l3.5 3.5-3.5 3.5-3.5-3.5z' fill='%238C1C2E'/%3E%3Cpath d='M0 0h5L0 5zM40 0h-5l5 5zM0 20h5L0 15zM40 20h-5l5-5z' fill='%23F4E4BE'/%3E%3Ccircle cx='0' cy='10' r='2' fill='%23F4E4BE'/%3E%3Ccircle cx='40' cy='10' r='2' fill='%23F4E4BE'/%3E%3C/svg%3E");
	border-color: rgba(244, 228, 190, 0.6);
}

/* ---------------------------------------------------------------- booking */

.mb-booking-wrap { position: relative; z-index: 5; }

/* The booking plugin's search, as one white card below the photos: rounded,
   lifted a little off the page, with the button inside it. */
.mb-booking .hpms {
	--hpms-accent: var(--mb-maroon);
	--hpms-accent-contrast: var(--mb-white);
	--hpms-text: var(--mb-ink);
	--hpms-muted: var(--mb-grey);
	--hpms-line: var(--mb-line);
	--hpms-surface: var(--mb-white);
	--hpms-surface-alt: var(--mb-sand);
	--hpms-radius: 0px;
	font-family: var(--mb-sans);
}

.mb-booking .hpms-search {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1.2fr)) repeat(2, minmax(0, 0.7fr)) minmax(0, 1.3fr) auto;
	gap: 0;
	align-items: stretch;
	background: var(--mb-white);
	border-radius: 24px;
	box-shadow: 0 30px 70px -40px rgba(29, 26, 25, 0.5), 0 0 0 1px rgba(29, 26, 25, 0.04);
	padding: 10px;
	border: 0;
	margin: 0;
}

.mb-booking .hpms-search .hpms-field {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	padding: 10px 20px;
	border-right: 1px solid var(--mb-line);
	min-width: 0;
	margin: 0;
}

.mb-booking .hpms-search .hpms-field label {
	font-family: var(--mb-sans);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mb-grey);
	margin: 0;
}

.mb-booking .hpms-search .hpms-field input,
.mb-booking .hpms-search .hpms-field select {
	border: 0;
	background: transparent;
	padding: 2px 0;
	min-height: 0;
	height: auto;
	box-shadow: none;
	font-family: var(--mb-sans);
	font-size: 16px;
	font-weight: 600;
	color: var(--mb-ink);
	width: 100%;
	min-width: 0;
	border-radius: 0;
}

.mb-booking .hpms-search .hpms-field:focus-within label { color: var(--mb-maroon); }
.mb-booking .hpms-search .hpms-field input:focus, .mb-booking .hpms-search .hpms-field select:focus { outline: none; }

.mb-booking .hpms-search .hpms-field--action { padding: 0; border-right: 0; display: flex; }

.mb-booking .hpms-search .hpms-field--action .hpms-button {
	height: 100%;
	min-height: 64px;
	width: 100%;
	padding: 0 30px;
	border-radius: 18px;
	border: 0;
	background: var(--mb-maroon);
	color: var(--mb-white);
	font-family: var(--mb-sans);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.02em;
	text-transform: none;
	white-space: nowrap;
	transition: background-color 0.4s var(--mb-ease), transform 0.3s var(--mb-ease);
}

.mb-booking .hpms-search .hpms-field--action .hpms-button:hover { background: var(--mb-maroon-deep); color: var(--mb-white); }
.mb-booking .hpms-search .hpms-field--action .hpms-button:active { transform: scale(0.98); }

/* The arrival facts just above the card, each after a small dot. */
.mb-facts p { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 !important; max-width: none !important; }
.mb-facts span { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--mb-grey); }
.mb-facts span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--mb-maroon); opacity: 0.55; flex: none; }

/* Results appear below the bar. */
.mb-booking .hpms-results,
.mb-booking .hpms-stay-summary,
.mb-booking .hpms-currencies,
.mb-booking .hpms-message { margin-top: 24px; }

.mb-booking .hpms-button--primary { border-radius: 0; }


@media (max-width: 1180px) {
	.mb-booking .hpms-search { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 20px; }
	.mb-booking .hpms-search .hpms-field { border-bottom: 1px solid var(--mb-line); padding: 12px 16px; }
	.mb-booking .hpms-search .hpms-field:nth-child(2n) { border-right: 0; }
	.mb-booking .hpms-search .hpms-field--residency { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
	.mb-booking .hpms-search .hpms-field--action { grid-column: 1 / -1; margin-top: 6px; }
	.mb-booking .hpms-search .hpms-field--action .hpms-button { min-height: 58px; border-radius: 14px; }
}

@media (max-width: 480px) {
	.mb-booking .hpms-search { padding: 8px; }
	.mb-booking .hpms-search .hpms-field { padding: 10px 12px; }
}

/* ---------------------------------------------------------------- moving band of words */

.mbise .mb-marquee-band.e-con { --overflow: hidden; overflow: hidden; }
.mb-marquee { width: 100%; }
.mb-marquee p { margin: 0 auto !important; max-width: none !important; text-align: center; font-style: italic; }

/* mbise.js turns the line into a band that moves slowly to the left. */
.mb-marquee.is-moving p { display: none; }
.mb-marquee__track { display: flex; width: max-content; animation: mb-slide 40s linear infinite; }
.mb-marquee__track span { font-style: italic; white-space: nowrap; display: inline-flex; align-items: center; gap: 40px; padding-right: 40px; line-height: 1.2; }
.mb-marquee__track span::after { content: ""; width: 11px; height: 11px; background: var(--mb-gold); transform: rotate(45deg); flex: none; }
@keyframes mb-slide { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------- welcome */

.mb-karibu .elementor-heading-title { line-height: 0.86 !important; }

/* Elementor puts every item on its own line on a phone. These few rows are
   meant to stay side by side. */
.mbise .mb-figures, .mbise .mb-pair, .mbise .mb-actions, .mbise .mb-action-bar,
.mbise .mb-figures > .e-con-inner, .mbise .mb-header-actions,
.mbise .mb-header-bar > .e-con-inner { flex-direction: row !important; flex-wrap: nowrap !important; }
.mbise .mb-header-actions > .elementor-element { --width: auto; }
.mbise .mb-figures > .e-con, .mbise .mb-pair > .elementor-element { --width: auto; flex: 1 1 0; min-width: 0; }
.mbise .mb-actions { flex-wrap: wrap !important; justify-content: center; }
.mbise .mb-actions > .elementor-element { --width: auto; }

.mb-figures { border-top: 1px solid var(--mb-line); margin-top: 26px; }
.mb-figures__item { padding: 26px 0 0 24px !important; border-left: 1px solid var(--mb-line); flex: 1 1 0; }
.mb-figures__item:first-child { padding-left: 0 !important; border-left: 0; }
.mb-figure .elementor-heading-title { font-variant-numeric: lining-nums; }
.mb-figure-label .elementor-heading-title { margin-top: 10px; }

@media (max-width: 480px) {
	.mb-figures__item { padding-left: 12px !important; }
	.mb-figure-label .elementor-heading-title { letter-spacing: 0.08em !important; font-size: 11px !important; }
}

/* ---------------------------------------------------------------- rooms */

/* The booking plugin's room list, as the lodge's room cards. Names, photos,
   descriptions and prices come from Hotel PMS → Room types, so they always
   match what guests book. */
.mb-rooms .hpms {
	--hpms-accent: var(--mb-maroon);
	--hpms-accent-contrast: var(--mb-white);
	--hpms-text: var(--mb-ink);
	--hpms-muted: var(--mb-grey);
	--hpms-line: var(--mb-line);
	--hpms-surface: transparent;
	--hpms-radius: 0px;
	font-family: var(--mb-sans);
}

.mb-rooms .hpms-rooms { gap: clamp(24px, 2.6vw, 40px); grid-template-columns: repeat(3, minmax(0, 1fr)); }

.mb-rooms .hpms-room { background: transparent; border: 0; box-shadow: none; padding: 0; display: flex; flex-direction: column; border-radius: 0; }

.mb-rooms .hpms-room__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mb-sand); border-radius: 0; margin: 0; }
.mb-rooms .hpms-room__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--mb-ease); border-radius: 0; display: block; }
.mb-rooms .hpms-room:hover .hpms-room__media img { transform: scale(1.045); }

/* A room type without photos yet: the emblem on maroon, not a gap. */
.mb-rooms .hpms-room:not(:has(.hpms-room__media))::before {
	content: "";
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--mb-maroon) url("../img/emblem-light.png") center / 26% no-repeat;
}

.mb-rooms .hpms-room__body { padding: 0; display: flex; flex-direction: column; flex: 1; }

.mb-rooms .hpms-room__meta {
	order: -1;
	font-family: var(--mb-sans);
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mb-maroon);
	margin: 26px 0 10px;
}

.mb-rooms .hpms-room__name { font-family: var(--mb-display); font-weight: 400; font-size: clamp(30px, 2.6vw, 38px); line-height: 1.05; color: var(--mb-ink); margin: 0 0 12px; letter-spacing: -0.01em; }
.mb-rooms .hpms-room__name a { color: inherit; text-decoration: none; }
.mb-rooms .hpms-room__name a:hover { color: var(--mb-maroon); }
.mb-rooms .hpms-room__description { color: var(--mb-grey); font-size: 16px; margin: 0 0 22px; }
.mb-rooms .hpms-room__amenities { display: none; }

.mb-rooms .hpms-room__footer {
	margin-top: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 14px 18px;
	padding-top: 18px;
	border-top: 1px solid var(--mb-line);
}

.mb-rooms .hpms-room__price { margin: 0; flex: 1 1 100%; font-size: 14px; color: var(--mb-grey); display: flex; flex-direction: row; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.mb-rooms .hpms-room__price-label { font-size: 13px; color: var(--mb-grey); }
.mb-rooms .hpms-room__price strong { font-family: var(--mb-display); font-size: 30px; font-weight: 400; color: var(--mb-maroon); font-variant-numeric: lining-nums tabular-nums; }

.mb-rooms .hpms-room__more,
.mb-rooms .hpms-room__footer .hpms-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 22px;
	border-radius: 0;
	font-family: var(--mb-sans);
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.4s var(--mb-ease), color 0.4s var(--mb-ease), border-color 0.4s var(--mb-ease);
}

.mb-rooms .hpms-room__more { border: 1.5px solid var(--mb-ink); color: var(--mb-ink); background: transparent; }
.mbise .mb-rooms .hpms-room__more:hover { background: var(--mb-ink); color: var(--mb-white); }
.mb-rooms .hpms-room__footer .hpms-button { background: var(--mb-maroon); color: var(--mb-white); border: 1.5px solid var(--mb-maroon); }
.mb-rooms .hpms-room__footer .hpms-button:hover { background: var(--mb-ink); border-color: var(--mb-ink); color: var(--mb-white); }

@media (max-width: 1024px) {
	.mb-rooms .hpms-rooms { grid-template-columns: minmax(0, 1fr) !important; gap: 56px; }
}

/* On the home page, one room at a time, chosen with tabs (built by mbise.js).
   Without the script, the cards simply sit side by side. */
.mb-room-tabs__list { display: flex; gap: 6px; margin: 0 0 34px; border-bottom: 1px solid var(--mb-line); overflow-x: auto; scrollbar-width: none; }
.mb-room-tabs__list::-webkit-scrollbar { display: none; }

.mb-room-tabs__list button {
	font: 700 13px/1 var(--mb-sans);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	background: none;
	border: 0;
	padding: 18px 20px;
	cursor: pointer;
	color: var(--mb-grey);
	position: relative;
	white-space: nowrap;
}

.mb-room-tabs__list button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--mb-maroon); transform: scaleX(0); transition: transform 0.5s var(--mb-ease); }
.mb-room-tabs__list button[aria-selected="true"] { color: var(--mb-ink); }
.mb-room-tabs__list button[aria-selected="true"]::after { transform: scaleX(1); }
.mb-room-tabs__list button:focus-visible { outline-offset: -3px; }

.mb-room-tabs.is-tabbed .hpms-rooms { display: block; }
.mb-room-tabs.is-tabbed .hpms-room { display: none; }

.mb-room-tabs.is-tabbed .hpms-room.is-on {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 64px);
	align-items: center;
}

.mb-room-tabs.is-tabbed .hpms-room.is-on::before { aspect-ratio: 4 / 3; }
.mb-room-tabs.is-tabbed .hpms-room.is-on .hpms-room__media,
.mb-room-tabs.is-tabbed .hpms-room.is-on::before { animation: mb-show 1s var(--mb-ease); }
.mb-room-tabs.is-tabbed .hpms-room.is-on .hpms-room__body > * { animation: mb-up 0.9s var(--mb-ease) both; }
.mb-room-tabs.is-tabbed .hpms-room.is-on .hpms-room__body > *:nth-child(2) { animation-delay: 0.06s; }
.mb-room-tabs.is-tabbed .hpms-room.is-on .hpms-room__body > *:nth-child(3) { animation-delay: 0.12s; }
.mb-room-tabs.is-tabbed .hpms-room.is-on .hpms-room__body > *:nth-child(4) { animation-delay: 0.18s; }
.mb-room-tabs.is-tabbed .hpms-room.is-on .hpms-room__body > *:nth-child(5) { animation-delay: 0.24s; }
@keyframes mb-show { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes mb-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.mb-room-tabs.is-tabbed .hpms-room__meta { margin-top: 0; }
.mb-room-tabs.is-tabbed .hpms-room__name { font-size: clamp(40px, 4vw, 60px); margin: 4px 0 16px; }

/* What is in the room, from Hotel PMS, with the diamond from the logo. */
.mb-room-tabs.is-tabbed .hpms-room__amenities { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; list-style: none; padding: 0; margin: 0 0 26px; }
.mb-room-tabs.is-tabbed .hpms-room__amenities li { display: flex; gap: 12px; align-items: center; font-weight: 600; font-size: 15px; color: var(--mb-ink); background: none; padding: 0; border: 0; }
.mb-room-tabs.is-tabbed .hpms-room__amenities li::before { content: ""; width: 8px; height: 8px; background: var(--mb-gold); transform: rotate(45deg); flex: none; }
.mb-room-tabs.is-tabbed .hpms-room__price strong { font-size: 46px; }
.mb-room-tabs.is-tabbed .hpms-room__footer { border-top: 0; padding-top: 0; justify-content: flex-start; }

@media (max-width: 1024px) {
	.mb-room-tabs.is-tabbed .hpms-room.is-on { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
	.mb-room-tabs__list button { padding: 14px 12px; font-size: 12px; letter-spacing: 0.08em; }
	.mb-room-tabs.is-tabbed .hpms-room__amenities { grid-template-columns: 1fr; }
	.mb-room-tabs.is-tabbed .hpms-room__price strong { font-size: 38px; }
}

/* ---------------------------------------------------------------- photos */

.mb-photo img { width: 100%; object-fit: cover; display: block; }
.mb-photo--tall img { aspect-ratio: 4 / 5; }
.mb-photo--wide img { aspect-ratio: 3 / 2; }
.mb-photo--square img { aspect-ratio: 1 / 1; }
.mb-photo--portrait img { aspect-ratio: 3 / 4; }
.mb-pair > .elementor-element { flex: 1 1 0; }
.mb-pair { max-width: 460px; }

@media (max-width: 1024px) {
	.mb-photo--tall img { aspect-ratio: 4 / 3; }
}

/* Photos fill their column at once, before they have loaded, so nothing
   below them jumps when they arrive. */
.mbise .mb-photo { width: 100%; --width: 100%; align-self: stretch; }
.mbise .mb-pair > .mb-photo, .mbise .mb-photo-row > .mb-photo, .mbise .mb-team-row > .mb-photo { width: auto; --width: auto; }
.mbise .mb-photo .elementor-widget-container, .mbise .mb-photo a { display: block; width: 100%; }

/* ---------------------------------------------------------------- photo beside a maroon panel */

.mbise .mb-split__photo { position: relative; overflow: hidden; min-height: 560px; }
.mbise .mb-photo--fill { position: absolute !important; inset: -8% 0; height: 116%; width: 100% !important; }
.mbise .mb-photo--fill .elementor-widget-container, .mbise .mb-photo--fill img { width: 100%; height: 100% !important; }
.mbise .mb-photo--fill img { object-fit: cover; aspect-ratio: auto; }
.mb-split__text .mb-quote { margin-top: -4px; }

@media (max-width: 1024px) {
	.mbise .mb-split__photo { min-height: 64vw; }
}

/* ---------------------------------------------------------------- garden */

.mb-garden .mb-card .elementor-heading-title { max-width: 14ch; }

@media (max-width: 767px) {
	/* On a phone the photo sits above the card instead of behind it. */
	.mbise .mb-garden { background-size: 100% auto !important; background-position: center top !important; background-repeat: no-repeat !important; }
}

/* ---------------------------------------------------------------- facilities */

.mb-facilities { border-top: 1px solid var(--mb-line); border-left: 1px solid var(--mb-line); }

.mb-facility {
	padding: 38px 34px 40px !important;
	border-right: 1px solid var(--mb-line);
	border-bottom: 1px solid var(--mb-line);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	transition: color 0.5s var(--mb-ease);
}

/* On hover the tile fills with maroon from below. */
.mb-facility::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--mb-maroon); transform: translateY(101%); transition: transform 0.6s var(--mb-ease); }
.mb-facility:hover::before { transform: none; }
.mb-facility .elementor-heading-title, .mb-facility .elementor-widget-text-editor { transition: color 0.5s var(--mb-ease); }
.mb-facility:hover .mb-h4 .elementor-heading-title, .mb-facility:hover .elementor-widget-text-editor { color: var(--mb-white) !important; }
.mb-num .elementor-heading-title { font-size: 18px !important; }
.mb-facility .mb-h4 { margin-top: 14px; }

@media (max-width: 767px) {
	.mb-facility { padding: 24px 18px 26px !important; }
	.mb-facility .mb-h4 .elementor-heading-title { font-size: 22px !important; }
}

/* ---------------------------------------------------------------- team */

.mbise .mb-team-row { flex-wrap: nowrap; }
.mbise .mb-team-row > .elementor-element { flex: 1 1 0; min-width: 0; }
.mbise .mb-team-row > .elementor-element:nth-child(even) { margin-top: 48px; }

@media (max-width: 767px) {
	.mbise .mb-team-row { flex-wrap: wrap !important; flex-direction: row !important; }
	.mbise .mb-team-row > .elementor-element { flex: 1 1 calc(50% - 6px); }
	.mbise .mb-team-row > .elementor-element:nth-child(even) { margin-top: 28px; }
}

/* ---------------------------------------------------------------- moving row of photos */

.mbise .mb-ribbon.e-con { --overflow: hidden; overflow: hidden; }
.mbise .mb-ribbon > .elementor-element, .mb-ribbon__track > .elementor-element { --width: auto; flex: 0 0 auto; }
.mbise .mb-ribbon__photo img { height: 300px !important; width: 400px !important; max-width: none; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.mb-ribbon__track { display: flex; gap: 18px; width: max-content; animation: mb-slide 70s linear infinite; }
.mb-ribbon:hover .mb-ribbon__track { animation-play-state: paused; }

@media (max-width: 767px) {
	.mbise .mb-ribbon__photo img { height: 200px !important; width: 267px !important; }
}

/* ---------------------------------------------------------------- closing */

.mb-closing { position: relative; overflow: hidden; }
.mb-closing .elementor-widget-heading, .mb-closing .elementor-widget-text-editor { text-align: center; }
.mb-closing .elementor-widget-text-editor p { margin-inline: auto; }
.mb-closing__title .elementor-heading-title { max-width: none; }
.mb-closing__contact { font-weight: 600; font-size: 15px; margin-top: 14px; }
.mbise .mb-closing__contact p { max-width: none; }
.mbise .mb-closing__contact a { color: inherit; text-decoration: none; }
.mbise .mb-closing__contact a:hover { color: var(--mb-gold-soft); }

/* Two thin diamonds, after the one in the logo (drawn as one background, so
   the woven band can use the section's edges). */
.mbise .mb-closing { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cpath d='M260 1L519 260 260 519 1 260z' fill='none' stroke='%23F4E4BE' stroke-opacity='0.18'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cpath d='M260 1L519 260 260 519 1 260z' fill='none' stroke='%23F4E4BE' stroke-opacity='0.18'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right -200px top -260px, left -240px bottom -300px; }

/* ---------------------------------------------------------------- footer */

.mb-footer .mb-footer-logo img { width: 190px; }
.mb-footer-list { font-size: 15px; line-height: 2; }
.mbise .mb-footer-list a, .mbise .mb-footer-small a { color: inherit; text-decoration: none; }
.mbise .mb-footer-list a:hover, .mbise .mb-footer-small a:hover { color: var(--mb-maroon); }
.mb-footer-bottom { border-top: 1px solid var(--mb-line); padding-top: 24px !important; }
.mb-footer-small { font-size: 13px; }
.mb-footer .mb-quote p { font-size: 22px; }

/* WhatsApp on a computer: appears once the visitor has left the top. */
.mb-chat {
	position: fixed !important;
	right: 24px;
	bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	z-index: 40;
	width: auto !important;
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
	transition: opacity 0.5s var(--mb-ease), transform 0.5s var(--mb-ease);
}

.mb-chat.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.mb-chat .elementor-button { box-shadow: 0 16px 36px -16px rgba(29, 26, 25, 0.6); min-height: 54px; }

/* On a phone: call, chat and book are always one thumb away. */
.mb-action-bar { display: none !important; }

@media (max-width: 767px) {
	.mb-chat { display: none !important; }

	.mb-action-bar {
		display: flex !important;
		position: fixed !important;
		inset: auto 0 0 0;
		z-index: 45;
		background: var(--mb-white);
		border-top: 1px solid var(--mb-line);
		padding-bottom: env(safe-area-inset-bottom, 0px) !important;
		width: 100% !important;
		--width: 100%;
	}

	.mbise .mb-action-bar > .elementor-element { --width: auto; }
	.mbise .mb-action-bar > .mb-action { flex: 1 1 0 !important; min-width: 0; }
	.mbise .mb-action-bar > .mb-action--book { flex: 1.4 1 0 !important; }
	.mb-action .elementor-button { width: 100%; min-height: 60px; padding: 0 8px; justify-content: center; font-size: 12px; letter-spacing: 0.12em; border: 0 !important; }
	.mb-action + .mb-action .elementor-button { border-left: 1px solid var(--mb-line) !important; }
	.mb-action .elementor-button-content-wrapper { justify-content: center; }
}

/* ---------------------------------------------------------------- plain pages */

.mb-prose { max-width: 760px; margin: 0 auto; padding: 96px 20px 128px; color: var(--mb-grey); }
.mb-prose--center { text-align: center; }
.mb-prose__title { font-family: var(--mb-display); font-weight: 400; font-size: clamp(42px, 6vw, 68px); line-height: 1.04; color: var(--mb-ink); margin: 0 0 28px; }
.mb-prose__eyebrow { font-family: var(--mb-sans); font-weight: 700; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mb-maroon); }
.mb-prose__body a, .mb-prose__link { color: var(--mb-ink); }

/* ---------------------------------------------------------------- motion */

.mb-reveal { opacity: 0; transform: translateY(30px); transition: opacity 1.1s var(--mb-ease), transform 1.1s var(--mb-ease); transition-delay: var(--mb-delay, 0s); }
.mb-reveal.is-in { opacity: 1; transform: none; }

/* Photos that wipe into view from the top. */
.mb-wipe.is-waiting { clip-path: inset(0 0 100% 0); }
.mb-wipe.is-waiting.is-in { clip-path: inset(0 0 0 0); transition: clip-path 1.4s var(--mb-ease); transition-delay: var(--mb-delay, 0s); }

/* Never hide or move anything inside the Elementor editor. */
.elementor-editor-active .mb-reveal { opacity: 1; transform: none; }
.elementor-editor-active .mb-wipe { clip-path: none; }
.elementor-editor-active .mb-chat { opacity: 1; transform: none; pointer-events: auto; position: relative !important; right: auto; bottom: auto; }
.elementor-editor-active .mb-action-bar { position: relative !important; }
.elementor-editor-active .mb-hero .elementor-heading-title, .elementor-editor-active .mb-hero .mb-eyebrow { animation: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.mb-reveal { opacity: 1; transform: none; transition: none; }
	.mb-wipe.is-waiting { clip-path: none; }
	.mb-hero__photo { animation: none; transform: none; }
	.mb-hero .elementor-heading-title, .mb-hero .mb-eyebrow, .mb-hero .mb-lede, .mb-slides-count { animation: none; }
	.mb-marquee__track, .mb-ribbon__track { animation: none; }
	.mbise * { transition-duration: 0.01ms !important; }
}

/* ================================================================ inner pages */

.mb-actions--left { justify-content: flex-start !important; }
.mb-display--page .elementor-heading-title { max-width: 18ch; }

/* A list with the gold diamond from the logo instead of a bullet. */
.mb-list .elementor-icon-list-icon { display: none; }
.mb-list .elementor-icon-list-item { position: relative; padding: 13px 0 13px 26px !important; border-bottom: 1px solid var(--mb-line); margin: 0 !important; }
.mb-list .elementor-icon-list-item::before { content: ""; position: absolute; left: 2px; top: 50%; width: 8px; height: 8px; margin-top: -4px; background: var(--mb-gold); transform: rotate(45deg); }
.mb-dark .mb-list .elementor-icon-list-item { border-color: var(--mb-line-light); }

.mbise .mb-photo-row { flex-wrap: nowrap; }
.mbise .mb-photo-row > .elementor-element { --width: auto; flex: 1 1 0; min-width: 0; }

@media (max-width: 767px) {
	.mbise .mb-photo-row { flex-direction: column !important; }
	.mb-photo--portrait img { aspect-ratio: 4 / 5; }
}

/* Gallery: square-cornered, evenly spaced, gently zooming on hover. */
.mb-gallery .gallery { margin: 0 !important; }
.mb-gallery .gallery-item { margin: 0 !important; overflow: hidden; }
.mb-gallery .gallery-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 0 !important; transition: transform 1.2s var(--mb-ease); }
.mb-gallery .gallery-item:hover img { transform: scale(1.05); }

/* Plain pages (policies, find my booking): a readable column under the header. */
.mb-plain > .e-con-inner { max-width: 820px !important; }
.mb-plain .mb-lede { margin: 24px 0 40px; }

/* ---------------------------------------------------------------- one room, from Hotel PMS */

.mb-room-detail .hpms {
	--hpms-accent: var(--mb-maroon);
	--hpms-accent-contrast: var(--mb-white);
	--hpms-text: var(--mb-ink);
	--hpms-muted: var(--mb-grey);
	--hpms-line: var(--mb-line);
	--hpms-surface: transparent;
	--hpms-radius: 0px;
	font-family: var(--mb-sans);
	color: var(--mb-grey);
}

/* The plugin's room panel sizes itself to its own width (a CSS container).
   Inside an Elementor column that made the browser measure it at one width
   and draw it at another, so on phones the panel ran past its box. The theme
   lays the panel out itself, so that self-sizing is switched off. */
.mbise .mb-room-detail .hpms-room-single { container-type: normal; }

.mb-room-detail .hpms-room-single { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; border: 0; background: none; padding: 0; }
.mb-room-detail .hpms-room-single__gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mb-room-detail .hpms-room-single__photo:first-child { grid-column: 1 / -1; }
.mb-room-detail .hpms-room-single__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; display: block; }
.mb-room-detail .hpms-room-single:not(:has(.hpms-room-single__gallery))::before { content: ""; display: block; aspect-ratio: 4 / 3; background: var(--mb-maroon) url("../img/emblem-light.png") center / 22% no-repeat; }
.mb-room-detail .hpms-room__name { font-family: var(--mb-display); font-weight: 400; font-size: clamp(40px, 4vw, 58px); line-height: 1.04; color: var(--mb-ink); margin: 0 0 14px; }
.mb-room-detail .hpms-room__meta { font-weight: 700; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mb-maroon); }
.mb-room-detail .hpms-room-single__heading { font-family: var(--mb-sans); font-weight: 700; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mb-maroon); margin: 32px 0 12px; }
.mb-room-detail .hpms-room__amenities { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.mb-room-detail .hpms-room__amenities li { padding: 10px 0 10px 22px; border-bottom: 1px solid var(--mb-line); position: relative; background: none; border-radius: 0; color: var(--mb-ink); font-weight: 500; }
.mb-room-detail .hpms-room__amenities li::before { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; background: var(--mb-gold); transform: rotate(45deg); }
.mb-room-detail .hpms-room__footer { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--mb-line); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.mb-room-detail .hpms-room__price { display: flex; flex-direction: row; gap: 8px; align-items: baseline; flex-wrap: wrap; margin: 0; }
.mb-room-detail .hpms-room__price strong { font-family: var(--mb-display); font-size: 40px; font-weight: 400; color: var(--mb-maroon); }
.mb-room-detail .hpms-button--primary { border-radius: 0; min-height: 56px; padding: 0 30px; background: var(--mb-maroon); color: var(--mb-white); border: 0; font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
.mb-room-detail .hpms-button--primary:hover { background: var(--mb-ink); color: var(--mb-white); }

@media (max-width: 1024px) {
	.mb-room-detail .hpms-room-single { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
	.mb-room-detail .hpms-room__amenities { grid-template-columns: 1fr; }
}

/* A room's own page opens on that room's first photo from Hotel PMS. */
.mbise .mb-room-hero--photo { background-image: var(--mb-room-photo) !important; }

/* The full booking page and find-my-booking, in the lodge's colours. */
.mb-booking--page .hpms-results, .mb-lookup .hpms { margin-top: 32px; }

.mb-lookup .hpms, .mb-booking .hpms-checkout, .mb-booking .hpms-basket {
	--hpms-accent: var(--mb-maroon);
	--hpms-accent-contrast: var(--mb-white);
	--hpms-text: var(--mb-ink);
	--hpms-muted: var(--mb-grey);
	--hpms-line: var(--mb-line);
	--hpms-surface: var(--mb-white);
	--hpms-surface-alt: var(--mb-sand);
	--hpms-radius: 0px;
	font-family: var(--mb-sans);
}

.mb-lookup .hpms-button, .mb-booking .hpms-button { border-radius: 0; }
.mb-booking-wrap--page .hpms-search { box-shadow: none; border: 1px solid var(--mb-line); }

/* ---------------------------------------------------------------- enquiry form */

.mb-enquiry__form { display: grid; gap: 18px; }
.mb-enquiry__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mb-enquiry .mb-field { margin: 0; display: grid; gap: 6px; }
.mb-enquiry label { font-family: var(--mb-sans); font-size: 11.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mb-maroon); }

.mb-enquiry input, .mb-enquiry select, .mb-enquiry textarea {
	width: 100%;
	box-sizing: border-box;
	background: var(--mb-white);
	border: 1px solid var(--mb-line);
	border-radius: 0;
	padding: 14px 16px;
	font-family: var(--mb-sans);
	font-size: 16px;
	font-weight: 500;
	color: var(--mb-ink);
}

.mb-enquiry input:focus, .mb-enquiry select:focus, .mb-enquiry textarea:focus { outline: none; border-color: var(--mb-maroon); box-shadow: 0 0 0 1px var(--mb-maroon); }

.mb-enquiry__send {
	min-height: 56px;
	padding: 0 32px;
	border: 0;
	border-radius: 0;
	background: var(--mb-maroon);
	color: var(--mb-white);
	font-family: var(--mb-sans);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.4s var(--mb-ease);
}

.mb-enquiry__send:hover { background: var(--mb-ink); }
.mb-enquiry__trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mb-enquiry__note { font-size: 13px; color: var(--mb-grey); margin: 0; }
.mbise .mb-enquiry__note a { color: var(--mb-ink); }
.mb-enquiry__done, .mb-enquiry__error { padding: 16px 20px; margin: 0 0 22px; border-left: 3px solid; background: var(--mb-sand); }
.mb-enquiry__done { border-color: #2f6b45; color: #2f6b45; }
.mb-enquiry__error { border-color: var(--mb-maroon); color: var(--mb-maroon); }

.mbise .mb-contact-list a { color: var(--mb-ink); }
.mb-contact-list strong { font-weight: 700; color: var(--mb-ink); }

@media (max-width: 600px) {
	.mb-enquiry__row { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- policies */

.mb-policies section { padding: 34px 0; border-top: 1px solid var(--mb-line); scroll-margin-top: 100px; }
.mb-policies h2 { font-family: var(--mb-display); font-weight: 400; font-size: 36px; line-height: 1.08; color: var(--mb-ink); margin: 0 0 14px; }
.mb-policies h3 { font-family: var(--mb-sans); font-weight: 700; font-size: 15px; color: var(--mb-ink); margin: 18px 0 6px; }
.mb-policies p { max-width: 64ch; }
.mb-policies__small { font-size: 14px; }