/* Marketing site styles — theme tokens are runtime-resolved from the Hospitality Settings Single
   (theme_primary_color, theme_accent_color, theme_font_heading, ...) by www/marketing.py and
   emitted as CSS custom properties in an inline <style> that overrides this :root. Re-skinning
   = changing tokens, never editing the rules below. The values here are the baked defaults that
   also make this stylesheet valid on its own (it is served static, not Jinja-rendered). */
:root {
	--mk-primary: #C9A24B;
	--mk-accent: #D8B565;
	--mk-bg: #14110F;
	--mk-surface: #211C17;
	--mk-ink: #F3ECE0;
	--mk-muted: #A99C86;
	--mk-font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
	--mk-font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;

	/* Banding + hairline tokens — runtime overridden by the inline <style>; derived here as a
	   safety net so alternating section tones render even without the inline override. */
	--mk-bg-alt: #1C1815;
	--mk-line: rgba(243, 236, 224, 0.12);

	/* Derived layout tokens (constant; tweak once, not per-skin). */
	--mk-maxw: 1120px;
	--mk-gap: 1.5rem;
	--mk-radius: 18px;
	--mk-radius-sm: 12px;
	/* The select caret, as a shape. Used through mask-image, which discards the SVG's own colour and
	   takes background-color instead — so the stroke here is arbitrary and the arrow follows the
	   palette. See .mk-form .mk-field:has(select)::after. */
	--mk-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	--mk-pad-section: clamp(3.5rem, 8vw, 6.5rem);
	--mk-shadow: 0 18px 44px -26px color-mix(in srgb, var(--mk-ink) 60%, transparent);
	--mk-shadow-sm: 0 8px 24px -16px color-mix(in srgb, var(--mk-ink) 45%, transparent);
	--mk-focus: 0 0 0 3px color-mix(in srgb, var(--mk-accent) 45%, transparent);
}

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

html { scroll-behavior: smooth; }

.mk-body {
	margin: 0;
	font-family: var(--mk-font-body);
	color: var(--mk-ink);
	background: var(--mk-bg);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
	font-family: var(--mk-font-heading);
	line-height: 1.08;
	letter-spacing: -0.01em;
	font-weight: 600;
	color: var(--mk-ink);
	margin: 0;
}

a { color: var(--mk-ink); text-decoration: none; }

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

/* Eyebrow — the small uppercase kicker above section titles that signals "editorial". */
.mk-eyebrow {
	font-size: 0.8rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--mk-accent);
	margin: 0 0 0.6rem;
}

/* Accessibility: visible skip link + clear focus rings on every interactive element. */
.mk-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--mk-primary);
	color: #fff;
	padding: 0.75rem 1rem;
	border-radius: 0 0 var(--mk-radius-sm) 0;
	z-index: 100;
}
.mk-skip-link:focus { left: 0; }

a:focus-visible,
.mk-btn:focus-visible {
	outline: none;
	box-shadow: var(--mk-focus);
	border-radius: 6px;
}

.mk-container {
	width: 100%;
	max-width: var(--mk-maxw);
	margin: 0 auto;
	padding-inline: clamp(1.25rem, 5vw, 3rem);
}

/* ---------- Sticky nav ---------- */
/* Every in-page anchor has to clear the sticky header. Without this, the hotels anchor, the
   book anchor and every
   other nav link scrolls its section to y=0, which is UNDER the nav: the first row of whatever you
   navigated to sits behind the header. Set on the section rather than per anchor so a section added
   later inherits it. */
.mk-section { scroll-margin-top: 84px; }

.mk-nav {
	position: sticky;
	top: 0;
	z-index: 30;
	backdrop-filter: blur(10px);
	background: color-mix(in srgb, var(--mk-bg) 82%, transparent);
	border-bottom: 1px solid var(--mk-line);
}
.mk-nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 72px;
}
.mk-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	font-family: var(--mk-font-heading);
	font-size: 1.35rem;
	font-weight: 600;
}
.mk-brand__dot {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--mk-primary);
	color: var(--mk-bg);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9rem;
}

/* An uploaded brand logo, in place of the glyph. Height-constrained with width:auto so any
   aspect ratio fits the header without distortion. The white plate is deliberate: most hotel
   logos are lockups drawn on white, and both the header and the footer here are dark, so a
   bare transparent drop would leave dark-on-dark artwork unreadable. */
.mk-brand__logo {
	height: 34px;
	width: auto;
	max-width: 160px;
	object-fit: contain;
	display: inline-block;
	vertical-align: middle;
	background: #fff;
	border-radius: 6px;
	padding: 3px 5px;
}
.mk-nav__links {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	margin-left: auto;
}
.mk-nav__actions {
	display: inline-flex;
	align-items: center;
	gap: 0.9rem;
	margin-left: 1.1rem;
}
/* Mobile menu toggle + hamburger — hidden on desktop, revealed by the responsive block below. */
.mk-nav__toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.mk-nav__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0 10px;
	cursor: pointer;
	border-radius: 10px;
}
.mk-nav__burger span {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--mk-ink);
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.2s ease;
}
.mk-nav__links a {
	color: var(--mk-muted);
	font-size: 0.95rem;
	font-weight: 500;
	transition: color 0.2s ease;
}
.mk-nav__links a:hover { color: var(--mk-primary); }
.mk-nav__links a { white-space: nowrap; }
/* Nav CTA is a COMPACT pill, not the 52px hero button — sized to sit beside the text links
   without dominating them, and never wrapping ("Book a stay" stays one line). The .mk-nav
   qualifier lifts specificity above .mk-btn (same class-count, later in source) which sets 52px. */
.mk-nav .mk-nav__cta {
	color: #fff;
	height: 40px;
	padding: 0 1.15rem;
	font-size: 0.9rem;
	white-space: nowrap;
}

/* ---------- Buttons ---------- */
.mk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--mk-font-body);
	font-weight: 600;
	font-size: 0.97rem;
	text-decoration: none;
	cursor: pointer;
	border: none;
	height: 52px;
	padding: 0 1.7rem;
	border-radius: 999px;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.mk-btn--primary {
	background: var(--mk-primary);
	color: #fff;
	box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--mk-primary) 75%, transparent);
}
.mk-btn--primary:hover {
	transform: translateY(-2px);
	background: color-mix(in srgb, var(--mk-primary) 88%, black);
}
.mk-btn--accent {
	background: var(--mk-accent);
	color: #fff;
}
.mk-btn--accent:hover { transform: translateY(-2px); }
.mk-btn--outline {
	background: transparent;
	color: var(--mk-ink);
	border: 1.5px solid var(--mk-ink);
}
.mk-btn--outline:hover { background: var(--mk-ink); color: var(--mk-bg); }
.mk-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* ---------- Sections ---------- */
.mk-section {
	position: relative;
	padding-block: var(--mk-pad-section);
}
.mk-tone-alt { background: var(--mk-bg-alt); }

.mk-section__head {
	max-width: 40rem;
	margin: 0 0 2.8rem;
}
.mk-section__title {
	font-size: clamp(1.9rem, 4vw, 3rem);
	margin: 0;
}
.mk-section__subtext {
	color: var(--mk-muted);
	font-size: 1.1rem;
	margin: 0.9rem 0 0;
}

/* ---------- Hero ---------- */
.mk-hero {
	overflow: hidden;
	padding-block: clamp(4rem, 9vw, 7rem);
}
.mk-hero__inner {
	position: relative;
	z-index: 1;
}
.mk-hero__title {
	font-size: clamp(2.4rem, 6.5vw, 4.6rem);
	margin: 0 0 1rem;
}
.mk-hero__title em { font-style: italic; color: var(--mk-primary); }
.mk-hero__subtext {
	color: var(--mk-muted);
	font-size: clamp(1.1rem, 2.2vw, 1.3rem);
	max-width: 34ch;
	margin: 0 0 2rem;
}
.mk-hero__cta { display: flex; gap: 0.85rem; flex-wrap: wrap; }

/* Hero with media or art-directed aside — asymmetric split (text-only hero stays centered). */
.mk-hero--media .mk-hero__inner,
.mk-hero--art .mk-hero__inner {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(1.5rem, 5vw, 3.5rem);
	align-items: center;
}
.mk-hero__media img {
	width: 100%;
	border-radius: var(--mk-radius);
	box-shadow: var(--mk-shadow);
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

/* Art direction (no photo): a warm radial glow behind the hero + an "arch" pedestal. The
   site looks designed without stock imagery — the same trick the salon exemplar used. */
.mk-hero--art::before {
	content: "";
	position: absolute;
	inset: -25% -10% auto -10%;
	height: 90%;
	background:
		radial-gradient(55% 65% at 28% 22%, color-mix(in srgb, var(--mk-accent) 36%, transparent), transparent 60%),
		radial-gradient(50% 60% at 82% 30%, color-mix(in srgb, var(--mk-primary) 32%, transparent), transparent 60%);
	filter: blur(22px);
	z-index: 0;
}
.mk-arch {
	aspect-ratio: 3 / 4;
	border-radius: 220px 220px 28px 28px;
	background: linear-gradient(160deg, color-mix(in srgb, var(--mk-accent) 80%, var(--mk-surface)), var(--mk-primary) 75%, color-mix(in srgb, var(--mk-primary) 70%, black));
	box-shadow: var(--mk-shadow);
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	padding: 1.6rem;
}
.mk-arch::after {
	content: "";
	position: absolute;
	inset: 1rem;
	border: 1.5px solid color-mix(in srgb, #fff 45%, transparent);
	border-radius: 200px 200px 18px 18px;
}
.mk-arch__chip {
	position: relative;
	background: color-mix(in srgb, var(--mk-surface) 92%, transparent);
	border-radius: 14px;
	padding: 0.75rem 1rem;
	font-size: 0.9rem;
	color: var(--mk-ink);
	box-shadow: var(--mk-shadow-sm);
}
.mk-arch__chip strong { display: block; font-family: var(--mk-font-heading); font-size: 1.05rem; }

/* ---------- Card grids (features / services / team / pricing / testimonials) ---------- */
.mk-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--mk-gap);
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.mk-card {
	background: var(--mk-surface);
	border: 1px solid var(--mk-line);
	border-radius: var(--mk-radius);
	padding: 1.75rem;
	box-shadow: var(--mk-shadow-sm);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mk-card:hover { transform: translateY(-4px); box-shadow: var(--mk-shadow); }
.mk-card__icon {
	display: inline-flex;
	font-size: 1.6rem;
	margin-bottom: 0.6rem;
}
.mk-card__title { font-size: 1.25rem; margin: 0 0 0.5rem; }
.mk-card__text { color: var(--mk-muted); margin: 0; }
.mk-card__role { color: var(--mk-accent); font-weight: 600; margin: 0 0 0.5rem; }

/* Card imagery (features/services with an image render as media cards). Clip so the image
   can zoom under the card on hover without spilling past the rounded corners. */
.mk-card__img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: calc(var(--mk-radius) - 6px);
	margin: -0.25rem 0 1rem;
	display: block;
	transition: transform 0.45s ease;
}
.mk-cards--media .mk-card { padding: 1rem; overflow: hidden; }
.mk-cards--media .mk-card:hover .mk-card__img { transform: scale(1.05); }

/* ---------- Full-bleed bands (services layout: "bands") ----------
   Each item is an edge-to-edge row: image on one half, text on the other, alternating sides. */
.mk-grid-section--bands .mk-section__head { margin-bottom: 2rem; }
.mk-bands { display: grid; }
.mk-band {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	min-height: min(70vh, 540px);
}
.mk-band__media { position: relative; overflow: hidden; min-height: 320px; }
.mk-band__media img,
.mk-band__ph {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}
.mk-band:hover .mk-band__media img { transform: scale(1.04); }
.mk-band__ph {
	background: linear-gradient(135deg, color-mix(in srgb, var(--mk-primary) 24%, var(--mk-surface)), color-mix(in srgb, var(--mk-accent) 24%, var(--mk-surface)));
}
.mk-band__body {
	display: flex;
	align-items: center;
	padding: clamp(2rem, 5vw, 5rem);
	background: var(--mk-bg);
}
.mk-band__inner { max-width: 34rem; }
.mk-band__title { font-size: clamp(1.7rem, 3.2vw, 2.6rem); margin: 0 0 0.75rem; }
.mk-band__text { color: var(--mk-muted); font-size: 1.08rem; margin: 0; }
.mk-band__price { color: var(--mk-primary); font-family: var(--mk-font-heading); font-weight: 700; font-size: 1.4rem; margin: 1rem 0 0; }
.mk-band__inner .mk-btn { margin-top: 1.75rem; }
/* Alternate: image on the right for even bands. */
.mk-band:nth-child(even) .mk-band__media { order: 2; }
.mk-band:nth-child(even) .mk-band__body { order: 1; }

@media (max-width: 760px) {
	.mk-band { grid-template-columns: 1fr; }
	.mk-band__media { min-height: 240px; }
	.mk-band:nth-child(even) .mk-band__media,
	.mk-band:nth-child(even) .mk-band__body { order: 0; }
}

/* ---------- Editorial menu (list layout for services/features) ---------- */
.mk-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem 3.5rem;
}
.mk-menu__row {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--mk-line);
}
.mk-menu__main { display: flex; flex-direction: column; }
.mk-menu__name { font-family: var(--mk-font-heading); font-size: 1.2rem; }
.mk-menu__meta { font-size: 0.85rem; color: var(--mk-muted); margin-top: 0.15rem; }
.mk-menu__lead { flex: 1; border-bottom: 1px dotted var(--mk-line); transform: translateY(-4px); }
.mk-menu__price { font-weight: 700; color: var(--mk-primary); white-space: nowrap; }

/* ---------- Team avatars ---------- */
.mk-card--team { text-align: left; }
.mk-avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: linear-gradient(150deg, var(--mk-accent), var(--mk-primary));
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--mk-font-heading);
	font-size: 1.5rem;
	margin-bottom: 1rem;
}

/* ---------- Pricing ---------- */
.mk-card--price {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.mk-card--featured {
	border-color: var(--mk-primary);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--mk-primary) 30%, transparent), var(--mk-shadow);
}
.mk-card__price {
	font-family: var(--mk-font-heading);
	font-size: 2.1rem;
	font-weight: 700;
	color: var(--mk-primary);
	margin: 0;
}
.mk-card__features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.4rem;
	color: var(--mk-ink);
}
.mk-card__features li::before {
	content: "✓";
	color: var(--mk-accent);
	font-weight: 700;
	margin-right: 0.5rem;
}
.mk-card--price .mk-btn { margin-top: auto; }

/* ---------- Testimonials ---------- */
.mk-card--quote {
	background: var(--mk-bg-alt);
	border: none;
	border-left: 4px solid var(--mk-accent);
}
.mk-quote { margin: 0; }
.mk-quote__text { font-size: 1.15rem; margin: 0 0 1rem; quotes: "\201C" "\201D"; }
.mk-quote__author { display: flex; flex-direction: column; }
.mk-quote__name { font-weight: 600; }
.mk-quote__role { color: var(--mk-muted); font-size: 0.9rem; }

/* ---------- About / split ---------- */
.mk-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: center;
}
.mk-about__lead { font-size: 1.2rem; color: var(--mk-ink); margin: 0.5rem 0 0; }
.mk-about__para { color: var(--mk-muted); margin: 1rem 0 0; }
.mk-about .mk-btn { margin-top: 1.5rem; }
.mk-about__card {
	background: var(--mk-surface);
	border: 1px solid var(--mk-line);
	border-radius: var(--mk-radius);
	padding: 2rem;
	box-shadow: var(--mk-shadow);
}
.mk-about__list { list-style: none; margin: 1rem 0 0; padding: 0; }
.mk-about__list li { padding: 0.7rem 0; border-bottom: 1px solid var(--mk-line); color: var(--mk-muted); }
.mk-about__list strong { color: var(--mk-ink); font-family: var(--mk-font-heading); }

/* ---------- Gallery ---------- */
.mk-gallery__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--mk-gap);
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.mk-gallery__cell {
	overflow: hidden;
	border-radius: var(--mk-radius);
}
.mk-gallery__cell img,
.mk-gallery__ph {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--mk-radius);
	transition: transform 0.45s ease;
}
.mk-gallery__cell:hover img { transform: scale(1.06); }
.mk-gallery__ph {
	background: linear-gradient(135deg, color-mix(in srgb, var(--mk-primary) 24%, var(--mk-surface)) 0%, color-mix(in srgb, var(--mk-accent) 24%, var(--mk-surface)) 100%);
}
.mk-gallery__cap { margin: 0.6rem 0 0; color: var(--mk-muted); font-size: 0.95rem; }

/* ---------- Property index (multi-property groups) ----------

   No cards. The page's own language is full-bleed imagery, hairlines and type on the background,
   and that is what a hotel group index wants too: Aman and Six Senses both let the photograph be
   the unit and set the name underneath on the page itself. A bordered, shadowed card grid would be
   a component borrowed from a different site.

   Portrait 4:5 crops, deliberately not the gallery's 1:1, so the two grids read as different
   things on the same page rather than as one grid that changed its mind. */
.mk-properties__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.75rem);
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.mk-property__link {
	display: block;
	text-decoration: none;
	color: inherit;
}
.mk-property__media {
	display: block;
	overflow: hidden;
	border-radius: var(--mk-radius);
	margin-bottom: 1rem;
}
.mk-property__media img,
.mk-property__ph {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform 0.6s ease;
}
.mk-property__link:hover .mk-property__media img,
.mk-property__link:focus-visible .mk-property__media img { transform: scale(1.04); }
.mk-property__ph {
	/* A lettered placeholder, never another hotel's photograph. An index that borrows imagery is
	   telling a visitor something untrue about a building they may be about to book. */
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--mk-font-heading);
	font-size: clamp(3rem, 8vw, 5rem);
	color: color-mix(in srgb, var(--mk-primary) 70%, transparent);
	background: linear-gradient(150deg, var(--mk-surface) 0%, color-mix(in srgb, var(--mk-primary) 14%, var(--mk-surface)) 100%);
}
.mk-property__place {
	margin: 0 0 0.3rem;
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mk-primary);
}
.mk-property__name {
	font-family: var(--mk-font-heading);
	font-size: clamp(1.35rem, 2.2vw, 1.7rem);
	font-weight: 600;
	margin: 0;
	/* The hairline is the only chrome, and it only exists on hover: the restraint IS the treatment
	   on a page this dark. */
	padding-bottom: 0.5rem;
	border-bottom: 1px solid transparent;
	transition: border-color 0.25s ease;
	display: inline-block;
}
.mk-property__link:hover .mk-property__name,
.mk-property__link:focus-visible .mk-property__name { border-bottom-color: var(--mk-primary); }
.mk-property__tag {
	margin: 0.55rem 0 0;
	color: var(--mk-muted);
	font-size: 0.97rem;
	line-height: 1.55;
}
.mk-property__link:focus-visible {
	outline: 2px solid var(--mk-primary);
	outline-offset: 6px;
	border-radius: var(--mk-radius-sm);
}

/* ---------- Gallery lightbox ---------- */
.mk-gallery__open {
	display: block;
	cursor: zoom-in;
	border-radius: inherit;
}
.mk-gallery__open:focus-visible {
	outline: 2px solid var(--mk-primary);
	outline-offset: 3px;
}
.mk-lightbox {
	border: 0;
	padding: 0;
	max-width: 100vw;
	max-height: 100vh;
	width: 100%;
	height: 100%;
	background: transparent;
	overflow: hidden;
	/* The grid puts the figure in the middle cell with the two arrows either side, so the arrows
	   never overlap the picture and never need a z-index fight with it. */
	display: none;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(0.25rem, 2vw, 1.5rem);
}
.mk-lightbox[open] { display: grid; }
.mk-lightbox::backdrop {
	/* Deeper than the page itself, so the photograph is the only lit thing on screen. */
	background: rgba(8, 6, 5, 0.94);
}
.mk-lightbox__figure {
	grid-column: 2;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.9rem;
	max-height: 100vh;
	padding-block: clamp(3.5rem, 8vh, 5rem);
}
.mk-lightbox__img {
	max-width: 100%;
	max-height: calc(100vh - 11rem);
	width: auto;
	object-fit: contain;
	border-radius: var(--mk-radius-sm);
}
.mk-lightbox__cap {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 1rem;
	color: var(--mk-ink);
	font-size: 0.95rem;
	text-align: center;
}
.mk-lightbox__count {
	font-family: var(--mk-font-heading);
	color: var(--mk-primary);
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
}
.mk-lightbox__nav,
.mk-lightbox__close {
	background: transparent;
	border: 0;
	color: var(--mk-ink);
	cursor: pointer;
	line-height: 1;
	opacity: 0.65;
	transition: opacity 0.18s ease;
	/* At or above the 44px touch floor, which the page's own primary button misses. */
	min-width: 48px;
	min-height: 48px;
}
.mk-lightbox__nav:hover,
.mk-lightbox__close:hover,
.mk-lightbox__nav:focus-visible,
.mk-lightbox__close:focus-visible { opacity: 1; }
.mk-lightbox__nav:focus-visible,
.mk-lightbox__close:focus-visible { outline: 2px solid var(--mk-primary); outline-offset: 2px; }
.mk-lightbox__nav { font-size: clamp(2rem, 5vw, 3rem); padding: 0 clamp(0.25rem, 2vw, 1rem); }
.mk-lightbox__nav--prev { grid-column: 1; }
.mk-lightbox__nav--next { grid-column: 3; }
.mk-lightbox__close {
	position: absolute;
	top: clamp(0.5rem, 2vh, 1.25rem);
	right: clamp(0.5rem, 2vw, 1.25rem);
	font-size: 2.25rem;
}
@media (max-width: 680px) {
	/* The arrows stop flanking the picture and sit under it, so a phone gives the photograph the
	   full width instead of surrendering a third of it to two chevrons. */
	.mk-lightbox[open] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; }
	.mk-lightbox__figure { grid-column: 1 / -1; grid-row: 1; padding-block: 3.5rem 0.5rem; }
	.mk-lightbox__img { max-height: calc(100vh - 12rem); }
	.mk-lightbox__nav--prev { grid-column: 1; grid-row: 2; justify-self: end; }
	.mk-lightbox__nav--next { grid-column: 2; grid-row: 2; justify-self: start; }
	.mk-lightbox__nav { padding-bottom: 1.5rem; }
}

/* ---------- CTA banner ---------- */
.mk-cta { background: var(--mk-primary); color: #fff; text-align: center; }
.mk-cta__title { color: #fff; font-size: clamp(1.8rem, 4vw, 2.8rem); margin: 0 0 0.75rem; }
.mk-cta__subtext { color: color-mix(in srgb, #fff 85%, transparent); max-width: 50ch; margin: 0 auto 2rem; }

/* ---------- Footer ---------- */
.mk-footer { background: var(--mk-ink); color: color-mix(in srgb, #fff 78%, transparent); padding-block: 3.5rem; }
.mk-footer__inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; align-items: center; }
.mk-footer__brand { font-family: var(--mk-font-heading); font-weight: 700; color: #fff; margin: 0 0 0.4rem; display: flex; align-items: center; gap: 0.5rem; }
.mk-footer__brand .mk-brand__dot { background: var(--mk-accent); }
.mk-footer__text { margin: 0; font-size: 0.95rem; }
.mk-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.25rem; }
.mk-footer__links a { color: color-mix(in srgb, #fff 78%, transparent); }
.mk-footer__links a:hover { color: #fff; text-decoration: underline; }

/* ---------- On-page capture form ---------- */
.mk-form-section { background: var(--mk-bg-alt); }
.mk-form__inner { display: grid; gap: 0; }
.mk-form { display: grid; gap: 1rem; max-width: 620px; grid-template-columns: 1fr 1fr; }
.mk-field { display: grid; gap: 0.35rem; }
.mk-field label { font-weight: 600; font-size: 0.95rem; }
.mk-form input,
.mk-form select,
.mk-form textarea {
	font: inherit;
	color: var(--mk-ink);
	background: var(--mk-surface);
	border: 1.5px solid var(--mk-line);
	border-radius: var(--mk-radius-sm);
	padding: 0.75rem 0.9rem;
	width: 100%;
}
/* Full-width rows for the message + submit; the paired inputs sit two-up on the grid. */
.mk-form .mk-field:has(textarea),
.mk-form .mk-btn,
.mk-form .mk-form__status { grid-column: 1 / -1; }
.mk-form input:focus-visible,
.mk-form select:focus-visible,
.mk-form textarea:focus-visible { outline: none; border-color: var(--mk-accent); box-shadow: var(--mk-focus); }
/* The native select, dressed as the inputs beside it. appearance:none drops the platform chrome
   (which ignores every colour above and renders light-on-light on the dark palettes), so the caret
   has to be drawn here.

   It is a MASK on the wrapper, not a background-image on the control, because a CSS custom property
   cannot be interpolated into a `data:` URI — a caret drawn as an image has to hardcode its stroke,
   and that one colour would then be the only thing on this page that does not follow a re-skin. At
   #999 on the shipped dark palette it reads fine and on a light `--mk-surface` it falls to ~2.9:1,
   under the 3:1 WCAG 1.4.11 floor for a control indicator. A mask discards the SVG's own colour and
   takes `background-color`, so the arrow tracks `--mk-muted` like every other secondary mark.

   `option` is styled explicitly because the popup is drawn by the OS and inherits the PAGE's
   colours on Linux/Windows Firefox — without it the list reads as dark text on a dark sheet. */
.mk-form select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.4rem;
	cursor: pointer;
}
.mk-form .mk-field:has(select) { position: relative; }
.mk-form .mk-field:has(select)::after {
	content: "";
	position: absolute;
	right: 0.9rem;
	bottom: 1.05rem;
	width: 0.75rem;
	height: 0.5rem;
	pointer-events: none;
	background-color: var(--mk-muted);
	-webkit-mask: var(--mk-caret) no-repeat center / contain;
	mask: var(--mk-caret) no-repeat center / contain;
}
.mk-form select option,
.mk-form select optgroup { background: var(--mk-surface); color: var(--mk-ink); }
.mk-form .mk-btn { justify-self: start; }
.mk-form__status { margin: 0; font-size: 0.95rem; }
.mk-form__status--ok { color: color-mix(in srgb, var(--mk-primary) 80%, var(--mk-ink)); font-weight: 600; }
.mk-form__status--err { color: #b00020; }

/* ---------- Scroll-reveal motion ----------
   Only hides content when JS is present (.mk-js) AND the body opted in (.mk-motion); the
   script re-adds .in. No-JS visitors, crawlers, and reduced-motion users always see content. */
.mk-js .mk-motion .mk-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}
/* Show rule MUST match the hide rule's specificity (0,3,0) or higher — otherwise the hide
   rule keeps winning even after JS adds .in and every revealed section stays invisible. */
.mk-js .mk-motion .mk-reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.mk-js .mk-motion .mk-reveal { opacity: 1; transform: none; transition: none; }
	* { animation: none !important; scroll-behavior: auto !important; }
}

/* Footer clearance for the chat launcher.

   The launcher is position:fixed bottom-right and the vendor hardcodes its own offsets — Intercom
   and Crisp both expose padding for exactly this reason and Typebot does not. The only content it
   can ever sit on top of is whatever is at the bottom of the page, so the fix belongs on the
   footer rather than in a set of offsets that drift the moment the launcher size changes. Applied
   at all widths (the links wrap to their own row well before 680px) and sized to the 52px button
   plus its offset. The enquiry form's submit is left-aligned, so nothing mid-page needs this.

   Scoped to .mk-has-chat, which the body only carries when the bubble actually renders. The
   first version applied this unconditionally, so every property with chat OFF — the default —
   paid 76px of unexplained footer whitespace for a launcher that was never there. */
.mk-has-chat .mk-footer { padding-bottom: calc(3.5rem + 76px); }

/* Not styled here: the launcher's corner radius.

   Every other button on this page is border-radius 999px and the launcher is a 16px squircle,
   which is a real inconsistency. It is left alone on purpose. The radius comes from a Tailwind
   class baked into the widget's own markup, NOT from --typebot-button-border-radius: setting
   that property does reach the button and nothing reads it. The only lever left is injecting a
   stylesheet into the vendor's shadow root, which a class rename in any 0.10.x patch would
   break silently, leaving no failure anyone would notice. The launcher already carries this
   page's identity through the two seams that ARE stable and supported: colours from the
   resolved theme, and a 52px diameter matching .mk-btn's height. */

/* ---------- Archetype overrides ----------
   Fonts + palette come from the theme tokens (set per archetype by /factory-marketing). These
   classes tune shape/weight so each style reads distinctly even on the same content. */
.mk-style--bold { --mk-radius: 8px; --mk-radius-sm: 6px; }
.mk-style--bold .mk-hero__title { font-weight: 700; letter-spacing: -0.02em; }
.mk-style--bold .mk-btn { border-radius: 10px; }
.mk-style--bold .mk-tone-alt { background: var(--mk-ink); color: var(--mk-bg); }
.mk-style--bold .mk-tone-alt .mk-section__subtext,
.mk-style--bold .mk-tone-alt .mk-card__text { color: color-mix(in srgb, var(--mk-bg) 75%, transparent); }

.mk-style--minimal { --mk-radius: 10px; --mk-shadow: none; --mk-shadow-sm: none; }
.mk-style--minimal .mk-card { border: 1px solid var(--mk-line); }
.mk-style--minimal .mk-hero--art::before { opacity: 0.5; }
.mk-style--minimal .mk-eyebrow { color: var(--mk-muted); }

.mk-style--classic { --mk-radius: 6px; --mk-radius-sm: 4px; }
.mk-style--classic .mk-btn { border-radius: 6px; }
.mk-style--classic .mk-arch { border-radius: 12px; }
.mk-style--classic .mk-arch::after { border-radius: 8px; }

/* ---------- Cinematic (full-bleed dark luxe) ----------
   Film-poster hero: the image is a full-bleed background layer under a dark gradient wash with
   oversized display type over it; sections go dark, imagery gets larger, CTAs turn gold. Pairs
   with a dark palette (bg espresso, ink cream, primary/accent gold). */
.mk-style--cinematic { --mk-radius: 4px; --mk-radius-sm: 3px; }

/* Full-bleed hero — the image escapes the container by positioning to .mk-hero, not the inner box. */
.mk-style--cinematic .mk-hero { position: relative; min-height: 92vh; display: flex; align-items: flex-end; padding-block: 0; overflow: hidden; }
.mk-style--cinematic .mk-hero--media .mk-hero__inner,
.mk-style--cinematic .mk-hero--art .mk-hero__inner { position: static; display: block; grid-template-columns: none; width: 100%; padding-block: clamp(3rem, 9vh, 7rem); }
.mk-style--cinematic .mk-hero__content { max-width: 46rem; position: relative; z-index: 2; }
.mk-style--cinematic .mk-hero__media { position: absolute; inset: 0; z-index: 0; margin: 0; pointer-events: none; }
.mk-style--cinematic .mk-hero__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; aspect-ratio: auto; }
/* Gradient wash lives INSIDE the media layer (z-index 0) so the hero content + CTAs (z-index 2)
   always sit above it — never dimmed or click-blocked by the overlay. */
.mk-style--cinematic .mk-hero__media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(10, 8, 6, 0.34) 0%, rgba(10, 8, 6, 0.10) 38%, rgba(10, 8, 6, 0.92) 100%); }
.mk-style--cinematic .mk-hero__title { font-size: clamp(2.9rem, 8.5vw, 6rem); font-weight: 600; color: #FBF7EF; max-width: 16ch; letter-spacing: -0.015em; }
.mk-style--cinematic .mk-hero__subtext { color: color-mix(in srgb, #FBF7EF 82%, transparent); max-width: 44ch; }

/* Nav floats over the hero instead of sitting on a bar. */
.mk-style--cinematic .mk-nav { background: linear-gradient(180deg, rgba(10, 8, 6, 0.55), transparent); border-bottom: none; }
.mk-style--cinematic .mk-nav__links a { color: color-mix(in srgb, #FBF7EF 78%, transparent); }
.mk-style--cinematic .mk-nav__links a:hover { color: var(--mk-primary); }
.mk-style--cinematic .mk-brand { color: #FBF7EF; }

/* Gold CTAs take dark ink, not white. */
.mk-style--cinematic .mk-btn--primary { color: #14110F; }
.mk-style--cinematic .mk-btn--outline { color: #FBF7EF; border-color: color-mix(in srgb, #FBF7EF 55%, transparent); }
.mk-style--cinematic .mk-btn--outline:hover { background: #FBF7EF; color: #14110F; }

/* Larger imagery + cream titles on the dark sections. */
.mk-style--cinematic .mk-cards--media { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.mk-style--cinematic .mk-card__img { aspect-ratio: 4 / 3; }
.mk-style--cinematic .mk-card__title,
.mk-style--cinematic .mk-section__title { color: #FBF7EF; }

/* Gallery as a tight, edge-to-edge film strip. */
.mk-style--cinematic .mk-gallery__grid { gap: 6px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.mk-style--cinematic .mk-gallery__cell,
.mk-style--cinematic .mk-gallery__cell img { border-radius: 2px; }

/* Footer inverts (base uses --mk-ink as its background, which is cream in a dark theme). */
.mk-style--cinematic .mk-footer { background: #0D0B09; color: color-mix(in srgb, var(--mk-ink) 66%, transparent); }
.mk-style--cinematic .mk-footer__brand { color: #FBF7EF; }
.mk-style--cinematic .mk-footer__links a { color: color-mix(in srgb, var(--mk-ink) 66%, transparent); }
.mk-style--cinematic .mk-footer__links a:hover { color: #FBF7EF; }
/* Lighter error red so the form status stays legible on the dark form band. */
.mk-style--cinematic .mk-form__status--err { color: #FF8A80; }

@media (max-width: 860px) {
	.mk-style--cinematic .mk-hero { min-height: 86vh; }
}

/* ---------- Homestay (the estate at dusk) ----------
   A nocturnal world, and the dark ground is a working decision rather than a mood.

   These photographs were taken on a phone by the family that lives in the house. On cream
   they sat in mats that drew the eye to their edges, which is where a phone photo is weakest:
   a flat overcast sky, a white balance that drifts indoors, sensor noise in the corners. On a
   dark field the opposite happens. The eye goes to the lit part of the frame and the weak
   edges fall away into the ground, so the picture reads as a window into a house at dusk
   rather than as a snapshot pinned to paper.

   The palette is the brand's own, re-weighted: the logo's forest green stops being an accent
   and becomes the ground the whole page stands on. Terracotta is the single accent and is
   lightened from the logo's #903000, which is 1.5:1 on this ground and would be invisible.
   Every pair below was measured before it was written down.

   SHAPE RULE: 2px on everything. On a dark page a radius reads as a highlight on the edge,
   so the softer the corner the more plastic the object looks. Near-square keeps the
   photographs looking like photographs. Buttons keep the inherited pill; they are the only
   things on the page meant to look pressable. */
.mk-style--homestay {
	--mk-radius: 2px;
	--mk-radius-sm: 2px;
	--mk-amber: #E0A355;          /* 7.33:1 on the ground. Moonlight, used only in the scene */
	--mk-leaf: #587C60;           /* 3.43:1. Hairlines and the sprig's leaves */
	--mk-ease: cubic-bezier(0.23, 1, 0.32, 1);
	--mk-lift: 0.15s;
	/* Shadows on a dark page cannot be "a darker version of the background" - there is nothing
	   darker left. They work as absence instead: a deep, wide, almost-black pool that lets the
	   lit object sit above the ridge line. */
	--mk-shadow: 0 32px 70px -34px rgba(0, 0, 0, 0.9);
	--mk-shadow-sm: 0 14px 34px -18px rgba(0, 0, 0, 0.75);
}

/* Archivo, expanded. A dusk scene wants a horizon, and an expanded grotesque IS a horizon:
   it runs wide rather than tall, so the headline lies along the ridge line instead of
   standing up against it. Negative tracking because expanded faces open up on their own. */
.mk-style--homestay h1,
.mk-style--homestay h2,
.mk-style--homestay h3 {
	font-stretch: expanded;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.06;
	text-wrap: balance;
}
.mk-style--homestay .mk-body,
.mk-style--homestay p { text-wrap: pretty; }

/* ----- Nav ----- */
/* The glass bar earns its place here. Over a dark scene a blurred panel reads as depth, which
   is the one thing it cannot do over flat cream. */
.mk-style--homestay .mk-nav {
	background: color-mix(in srgb, var(--mk-bg) 72%, transparent);
	backdrop-filter: blur(14px) saturate(120%);
	-webkit-backdrop-filter: blur(14px) saturate(120%);
	border-bottom: 1px solid color-mix(in srgb, var(--mk-ink) 12%, transparent);
}
@supports (prefers-reduced-transparency: reduce) {
	@media (prefers-reduced-transparency: reduce) {
		.mk-style--homestay .mk-nav { background: var(--mk-bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
	}
}
/* The mark is drawn for a cream field, so on this ground it gets its own disc of that cream
   back. Without it the dark green of the ring dissolves into the page and the roundel loses
   its outline entirely. */
.mk-style--homestay .mk-brand__logo {
	height: 42px;
	width: auto;
	max-width: none;
	background: #F2EDE0;
	border-radius: 50%;
	padding: 2px;
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--mk-ink) 14%, transparent);
}
.mk-style--homestay .mk-brand {
	gap: 0.8rem;
	font-size: 1.05rem;
	font-stretch: expanded;
	font-weight: 600;
	letter-spacing: 0.01em;
}
.mk-style--homestay .mk-nav__links a { color: var(--mk-muted); font-weight: 500; }
.mk-style--homestay .mk-nav__links a:hover { color: var(--mk-ink); }

/* ----- Buttons ----- */
/* The base paints every filled button's label #fff. White on this terracotta is 2.1:1, so the
   label takes the ground colour instead and lands at 4.99:1. The same correction has to reach
   the skip link, which is a filled button nobody looks at until they need it most. */
.mk-style--homestay .mk-btn--primary,
.mk-style--homestay .mk-btn--accent,
.mk-style--homestay .mk-skip-link { color: var(--mk-bg); }
.mk-style--homestay .mk-btn--primary {
	box-shadow: 0 16px 36px -18px color-mix(in srgb, var(--mk-primary) 85%, transparent);
}
.mk-style--homestay .mk-btn--outline {
	color: var(--mk-ink);
	border: 1px solid color-mix(in srgb, var(--mk-ink) 34%, transparent);
}
.mk-style--homestay .mk-btn--outline:hover { background: var(--mk-ink); color: var(--mk-bg); }
/* The hero's secondary CTA carries its OWN ground, because it cannot know what is behind it.
   The dusk range is drawn across the hero at z-index 0 and its ridges reach the button row at
   every width measured (1440: the far ridge; 390: far AND mid, which is darker still). A
   transparent button there put ink #23201A on ridge #183620 -- 1.3:1, against a 4.5:1 floor --
   so the words were gone while the button stayed clickable. The claim this rule must stay true
   of: the label is legible whether the backdrop is the page cream or any ridge, which a
   translucent cream ground guarantees and an ink swap would not (an ink chosen for the ridge
   fails on cream the moment the scene shifts). */
.mk-style--homestay .mk-hero .mk-btn--outline {
	background: color-mix(in srgb, var(--mk-bg) 88%, transparent);
	border-color: color-mix(in srgb, var(--mk-ink) 22%, transparent);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.mk-style--homestay .mk-hero .mk-btn--outline:hover {
	background: var(--mk-ink);
	color: var(--mk-bg);
}
.mk-style--homestay .mk-btn {
	font-weight: 600;
	transition: transform 0.16s var(--mk-ease), box-shadow 0.16s var(--mk-ease), background 0.16s var(--mk-ease);
}
.mk-style--homestay .mk-btn:active { transform: scale(0.98); }

/* ----- The dusk scene ----- */
.mk-style--homestay .mk-hero { position: relative; overflow: hidden; padding-block: clamp(3rem, 6vw, 5rem) clamp(5rem, 10vw, 8rem); }
.mk-style--homestay .mk-hero__inner { position: relative; z-index: 1; }
.mk-dusk {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	/* Softened at the TOP only, where the scene would otherwise run up under the sticky nav.
	   The first version faded the other way, to transparent at 55%, which erased the ridges
	   entirely: they are drawn across the bottom third of the viewBox, which is exactly the
	   part that gradient threw away. The scene rendered and could not be seen. */
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%);
	mask-image: linear-gradient(180deg, transparent 0%, #000 16%);
}
.mk-dusk__sky { width: 100%; height: 100%; display: block; }
/* Lifts the range off the baseline so the headline and subtext clear it. It does NOT clear the
   button row -- measured, not assumed: at 1440 the far ridge spans y 449-797 against a CTA at
   496-548, and at 390 the far and mid ridges both cross it. The hero's outline button carries
   its own ground for that reason; do not re-tune this offset to fix contrast. */
.mk-dusk__range { transform: translateY(70px); }
.mk-dusk__moon { opacity: 0.85; }
.mk-dusk__mist { fill: #E8E3D6; opacity: 0.05; filter: blur(14px); }
/* Darker as it comes forward. The far hills keep the last of the light. */
.mk-dusk__ridge--far { fill: #183620; }
.mk-dusk__ridge--mid { fill: #122816; }
.mk-dusk__ridge--near { fill: #08130C; }
.mk-dusk__flies { fill: var(--mk-amber); opacity: 0; }

/* ----- Hero ----- */
.mk-style--homestay .mk-hero--media .mk-hero__inner { grid-template-columns: 1.15fr 1fr; align-items: center; }
.mk-style--homestay .mk-hero__title {
	/* Expanded faces eat horizontal room, so the measure has to be wider than it would be for
	   a normal-width grotesque at the same size. At 14ch this headline wrapped to three lines;
	   the rule is two, and a third line is always a measure or size error, never a copy one. */
	/* The binding constraint was the GRID COLUMN, not this max-width: at 19ch the measure was
	   never reached because the column ran out first, so the headline kept breaking to three
	   lines however wide the max-width was set. The column was widened to 1.15fr and the size
	   brought down to what 16 expanded characters actually fit in it. */
	font-size: clamp(2.2rem, 4.4vw, 3.4rem);
	max-width: 19ch;
	margin-bottom: 1.1rem;
}
.mk-style--homestay .mk-hero__subtext {
	max-width: 36ch;
	font-size: clamp(1.02rem, 1.5vw, 1.15rem);
	color: var(--mk-muted);
}
.mk-style--homestay .mk-hero .mk-eyebrow {
	color: var(--mk-amber);
	letter-spacing: 0.24em;
	font-size: 0.72rem;
}
/* The photograph bleeds off the right edge. Nothing on this page sits in a mat any more:
   a mounted print is a daylight object, and the point here is a lit window in a dark wall. */
.mk-style--homestay .mk-hero__media {
	margin-right: -12vw;
	background: none;
	padding: 0;
	border: 0;
	box-shadow: none;
}
.mk-style--homestay .mk-hero__media,
.mk-style--homestay .mk-gallery__open,
.mk-style--homestay .mk-band__media { position: relative; }
/* An optical vignette, not a retouch: it darkens the photograph's own edge INTO the page
   rather than altering what the photograph shows. The room a guest walks into is still the
   room in the frame. */
.mk-style--homestay .mk-hero__media::after,
.mk-style--homestay .mk-gallery__open::after,
.mk-style--homestay .mk-band__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: var(--mk-radius);
	box-shadow: inset 0 0 64px 14px color-mix(in srgb, var(--mk-bg) 82%, transparent);
}
.mk-style--homestay .mk-hero__media img {
	aspect-ratio: 7 / 5;
	border-radius: var(--mk-radius);
	box-shadow: var(--mk-shadow), 0 0 0 1px color-mix(in srgb, var(--mk-ink) 11%, transparent);
}

/* ----- Section heads ----- */
/* A coffee sprig in place of a rule: a hairline, two leaves and a cherry, which is exactly
   what the brand mark is built from. Inline SVG as a data URI rather than markup, so the
   shared template gains nothing for this one tenant. Decorative, so it is drawn on ::before
   and carries no text. */
.mk-style--homestay .mk-section__head::before {
	content: "";
	display: block;
	width: 104px;
	height: 26px;
	margin-bottom: 1.3rem;
	background: no-repeat left center / contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 26' fill='none'%3E%3Cpath d='M0 13h44' stroke='%23D4764A' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M50 13c5-10 16-10 21 0-5 10-16 10-21 0z' fill='%23587C60'/%3E%3Cpath d='M50 13h21' stroke='%2310251A' stroke-width='1.2'/%3E%3Ccircle cx='93' cy='13' r='6' fill='%23D4764A'/%3E%3C/svg%3E");
}
.mk-style--homestay .mk-section__head .mk-eyebrow {
	color: var(--mk-muted);
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	margin-bottom: 0.5rem;
}
.mk-style--homestay .mk-section__title { font-size: clamp(1.9rem, 3.8vw, 2.7rem); }
.mk-style--homestay .mk-section__subtext { max-width: 46ch; color: var(--mk-muted); }

/* ----- Gallery: lit plates ----- */
.mk-style--homestay .mk-gallery__grid {
	grid-template-columns: repeat(12, 1fr);
	gap: clamp(1rem, 2vw, 1.75rem);
	align-items: start;
}
.mk-style--homestay .mk-gallery__cell {
	background: none;
	padding: 0;
	border: 0;
	border-radius: var(--mk-radius);
}
.mk-style--homestay .mk-gallery__cell img {
	aspect-ratio: 4 / 3;
	border-radius: var(--mk-radius);
	box-shadow: var(--mk-shadow-sm), 0 0 0 1px color-mix(in srgb, var(--mk-ink) 10%, transparent);
}
.mk-style--homestay .mk-gallery__cell:nth-child(6n + 1) { grid-column: span 7; }
.mk-style--homestay .mk-gallery__cell:nth-child(6n + 2) { grid-column: span 5; }
.mk-style--homestay .mk-gallery__cell:nth-child(6n + 3) { grid-column: span 5; }
.mk-style--homestay .mk-gallery__cell:nth-child(6n + 4) { grid-column: span 7; }
.mk-style--homestay .mk-gallery__cell:nth-child(6n + 5) { grid-column: span 7; }
.mk-style--homestay .mk-gallery__cell:nth-child(6n + 6) { grid-column: span 5; }
.mk-style--homestay .mk-gallery__cell:nth-child(6n + 2) img,
.mk-style--homestay .mk-gallery__cell:nth-child(6n + 3) img,
.mk-style--homestay .mk-gallery__cell:nth-child(6n + 6) img { aspect-ratio: 4 / 5; }
.mk-style--homestay .mk-gallery__cell:nth-child(6n + 5) img { aspect-ratio: 16 / 10; }
.mk-style--homestay .mk-gallery__cell:last-child:nth-child(6n + 1),
.mk-style--homestay .mk-gallery__cell:last-child:nth-child(6n + 3),
.mk-style--homestay .mk-gallery__cell:last-child:nth-child(6n + 5) { grid-column: 1 / -1; }
.mk-style--homestay .mk-gallery__cell:last-child:nth-child(6n + 1) img,
.mk-style--homestay .mk-gallery__cell:last-child:nth-child(6n + 3) img,
.mk-style--homestay .mk-gallery__cell:last-child:nth-child(6n + 5) img { aspect-ratio: 21 / 9; }
.mk-style--homestay .mk-gallery__cap {
	font-size: 0.74rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mk-muted);
	margin-top: 0.8rem;
}

/* ----- Bands + rooms ----- */
.mk-style--homestay .mk-bands { gap: clamp(2.5rem, 5vw, 4rem); }
.mk-style--homestay .mk-band { align-items: center; gap: clamp(1.5rem, 4vw, 3rem); }
.mk-style--homestay .mk-band__media { min-height: 0; background: none; padding: 0; border: 0; }
.mk-style--homestay .mk-band__media img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--mk-radius);
	box-shadow: var(--mk-shadow-sm), 0 0 0 1px color-mix(in srgb, var(--mk-ink) 10%, transparent);
}
.mk-style--homestay .mk-band__title { font-size: clamp(1.5rem, 2.6vw, 2.05rem); }
.mk-style--homestay .mk-band__text { color: var(--mk-muted); }
.mk-style--homestay .mk-rooms__grid {
	list-style: none; margin: 0; padding: 0; display: grid;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.mk-style--homestay .mk-room {
	background: var(--mk-surface);
	border: 1px solid color-mix(in srgb, var(--mk-ink) 10%, transparent);
	border-radius: var(--mk-radius);
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--mk-shadow-sm);
}
.mk-style--homestay .mk-room__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 0; }
.mk-style--homestay .mk-room__body { padding: 1.35rem 1.35rem 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.mk-style--homestay .mk-room__name { font-size: 1.25rem; margin: 0; }
.mk-style--homestay .mk-room__desc { color: var(--mk-muted); margin: 0; font-size: 1rem; }
.mk-style--homestay .mk-room__specs {
	list-style: none; margin: 0.2rem 0 0; padding: 0; display: flex; flex-wrap: wrap;
	gap: 0.4rem 1.1rem; font-size: 0.84rem; color: var(--mk-muted);
}
.mk-style--homestay .mk-room__price { font-stretch: expanded; font-weight: 600; font-size: 1.4rem; color: var(--mk-ink); margin: 0.4rem 0 0; }
.mk-style--homestay .mk-room__price-note { font-size: 0.8rem; color: var(--mk-muted); margin: 0.1rem 0 0; }
.mk-style--homestay .mk-room__cta { margin-top: auto; padding-top: 1rem; color: var(--mk-primary); font-weight: 600; }
.mk-style--homestay .mk-room__cta:hover { text-decoration: underline; }

/* ----- Enquiry form ----- */
.mk-style--homestay .mk-form input,
.mk-style--homestay .mk-form select,
.mk-style--homestay .mk-form textarea {
	background-color: color-mix(in srgb, var(--mk-ink) 6%, transparent);
	color: var(--mk-ink);
	border-radius: var(--mk-radius);
	border: 1px solid color-mix(in srgb, var(--mk-ink) 20%, transparent);
	transition: border-color 0.14s var(--mk-ease), box-shadow 0.14s var(--mk-ease), background 0.14s var(--mk-ease);
}
.mk-style--homestay .mk-form input::placeholder,
.mk-style--homestay .mk-form textarea::placeholder { color: color-mix(in srgb, var(--mk-ink) 45%, transparent); }
.mk-style--homestay .mk-form input:focus-visible,
.mk-style--homestay .mk-form select:focus-visible,
.mk-style--homestay .mk-form textarea:focus-visible {
	border-color: var(--mk-primary);
	background-color: color-mix(in srgb, var(--mk-ink) 9%, transparent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-primary) 28%, transparent);
}
.mk-style--homestay .mk-field label { font-size: 0.88rem; font-weight: 600; }
/* The base error red is #b00020, which is 1.6:1 here and effectively unreadable. */
.mk-style--homestay .mk-form__status--err { color: #FF9B8A; }
.mk-style--homestay .mk-form__status--ok { color: var(--mk-amber); }

/* ----- Footer ----- */
/* The base paints the footer in --mk-ink, which is now bone. Left alone it would end a dark
   page with a bright slab, which is the page-theme break this world exists to avoid. */
.mk-style--homestay .mk-footer {
	background: #07120C;
	color: color-mix(in srgb, var(--mk-ink) 72%, transparent);
	border-top: 1px solid color-mix(in srgb, var(--mk-ink) 10%, transparent);
}
.mk-style--homestay .mk-footer__brand { color: var(--mk-ink); gap: 0.7rem; font-stretch: expanded; }
.mk-style--homestay .mk-footer .mk-brand__logo { height: 38px; }
.mk-style--homestay .mk-footer__links a { color: color-mix(in srgb, var(--mk-ink) 72%, transparent); }
.mk-style--homestay .mk-footer__links a:hover { color: var(--mk-ink); }

/* ----- Motion -----
   Three loops, and each one has a job. The mist drifts because still mist is painted scenery.
   The fireflies breathe because a dusk estate is not empty. The moon glow pulses once every
   twelve seconds because a completely static light source reads as a gradient, not a moon.
   Everything else on the page moves only when a person asks it to. All three animate
   transform or opacity only, so none of them touch layout. */
@keyframes mk-drift { from { transform: translate3d(-5%, 0, 0); } to { transform: translate3d(5%, 0, 0); } }
@keyframes mk-breathe { 0%, 100% { opacity: 0; } 45% { opacity: 0.55; } }
@keyframes mk-glow { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }

.mk-style--homestay .mk-dusk__mist {
	animation: mk-drift 54s ease-in-out infinite alternate;
	will-change: transform;
}
.mk-style--homestay .mk-dusk__flies circle { animation: mk-breathe 7s ease-in-out infinite; }
.mk-style--homestay .mk-dusk__flies circle:nth-child(2) { animation-duration: 9s; animation-delay: 1.4s; }
.mk-style--homestay .mk-dusk__flies circle:nth-child(3) { animation-duration: 6.5s; animation-delay: 2.9s; }
.mk-style--homestay .mk-dusk__flies circle:nth-child(4) { animation-duration: 8.5s; animation-delay: 0.7s; }
.mk-style--homestay .mk-dusk__flies circle:nth-child(5) { animation-duration: 7.5s; animation-delay: 3.6s; }
.mk-style--homestay .mk-dusk__flies circle:nth-child(6) { animation-duration: 10s; animation-delay: 2.1s; }
.mk-style--homestay .mk-dusk__glow { animation: mk-glow 12s ease-in-out infinite; }

/* The ridges drift apart as the page scrolls, far slower than the near one, which is the
   whole of parallax. Scroll-driven, so it is the compositor's job and not a scroll handler's.
   Behind @supports: where the timeline is unsupported the ridges simply hold still. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		@keyframes mk-ridge-far { to { transform: translate3d(0, -18px, 0); } }
		@keyframes mk-ridge-mid { to { transform: translate3d(0, -40px, 0); } }
		@keyframes mk-ridge-near { to { transform: translate3d(0, -72px, 0); } }
		.mk-style--homestay .mk-dusk__ridge--far { animation: mk-ridge-far linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
		.mk-style--homestay .mk-dusk__ridge--mid { animation: mk-ridge-mid linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
		.mk-style--homestay .mk-dusk__ridge--near { animation: mk-ridge-near linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
	}
}

.mk-style--homestay.mk-motion .mk-reveal,
.mk-js .mk-style--homestay.mk-motion .mk-reveal {
	transform: translateY(14px);
	transition: opacity 0.45s var(--mk-ease), transform 0.45s var(--mk-ease);
}
.mk-js .mk-style--homestay.mk-motion .mk-gallery__cell:nth-child(even) { transition-delay: 70ms; }

/* One transition list for the cell, for the reason set out at length in the previous
   iteration of this block and worth restating: the reveal rule is four classes deep and
   `transition` is a shorthand, so any separately-written hover rule is erased rather than
   merged. The reveal owns transform, the hover owns translate and the glow, and because
   those are different properties neither can take the other's timing. */
.mk-style--homestay .mk-gallery__cell,
.mk-style--homestay .mk-room,
.mk-style--homestay .mk-hero__media { --mk-lift: 0.15s; }
@media (hover: hover) and (pointer: fine) {
	.mk-js .mk-style--homestay.mk-motion .mk-gallery__cell,
	.mk-js .mk-style--homestay.mk-motion .mk-room,
	.mk-style--homestay .mk-gallery__cell,
	.mk-style--homestay .mk-room {
		transition:
			opacity 0.45s var(--mk-ease),
			transform 0.45s var(--mk-ease),
			translate var(--mk-lift) var(--mk-ease),
			box-shadow var(--mk-lift) var(--mk-ease);
	}
	/* Hovering lights the plate: the ring warms from bone to amber and the pool deepens.
	   On a dark page that reads as the picture catching more light, which is a truer
	   response than a card rising off paper. */
	.mk-style--homestay .mk-gallery__cell:hover,
	.mk-style--homestay .mk-room:hover { --mk-lift: 0.22s; translate: 0 -3px; }
	.mk-style--homestay .mk-gallery__cell:hover img {
		box-shadow: var(--mk-shadow), 0 0 0 1px color-mix(in srgb, var(--mk-amber) 42%, transparent);
	}
	.mk-style--homestay .mk-gallery__cell img { transition: box-shadow 0.22s var(--mk-ease); }
	.mk-style--homestay .mk-gallery__cell:hover img { transform: none; }
}

/* ----- Lightbox -----
   A <dialog> driven by showModal() moves between display:none and display:grid and in and out
   of the top layer, neither of which is normally animatable. @starting-style supplies the
   state to animate from and transition-behavior:allow-discrete holds the discrete properties
   until the end. Where either is unsupported it opens instantly, as it did before.
   transform-origin stays centred: this is a modal, not a popover. */
.mk-style--homestay .mk-lightbox {
	opacity: 0;
	transition: opacity 0.14s var(--mk-ease), display 0.14s allow-discrete, overlay 0.14s allow-discrete;
}
.mk-style--homestay .mk-lightbox[open] { opacity: 1; transition-duration: 0.22s; }
@starting-style { .mk-style--homestay .mk-lightbox[open] { opacity: 0; } }
.mk-style--homestay .mk-lightbox::backdrop {
	background: rgba(4, 9, 6, 0.96);
	opacity: 0;
	transition: opacity 0.14s var(--mk-ease), display 0.14s allow-discrete, overlay 0.14s allow-discrete;
}
.mk-style--homestay .mk-lightbox[open]::backdrop { opacity: 1; transition-duration: 0.22s; }
@starting-style { .mk-style--homestay .mk-lightbox[open]::backdrop { opacity: 0; } }
.mk-style--homestay .mk-lightbox__figure { transform: scale(0.96); transition: transform 0.22s var(--mk-ease); }
.mk-style--homestay .mk-lightbox[open] .mk-lightbox__figure { transform: scale(1); }
@starting-style { .mk-style--homestay .mk-lightbox[open] .mk-lightbox__figure { transform: scale(0.96); } }
.mk-style--homestay .mk-gallery__open { transition: transform 0.14s var(--mk-ease); }
.mk-style--homestay .mk-gallery__open:active { transform: scale(0.99); }

/* ----- Reduced motion -----
   Less movement, not no transition. The fades stay because they aid comprehension; every
   loop, drift and parallax stops. The discrete phases are zeroed rather than removed, because
   allow-discrete still runs a timed phase. */
@media (prefers-reduced-motion: reduce) {
	.mk-style--homestay .mk-dusk__mist,
	.mk-style--homestay .mk-dusk__flies circle,
	.mk-style--homestay .mk-dusk__glow,
	.mk-style--homestay .mk-dusk__ridge { animation: none; transform: none; }
	/* The fireflies animate FROM zero opacity, so simply stopping them would erase them. */
	.mk-style--homestay .mk-dusk__flies { opacity: 0.4; }
	.mk-style--homestay .mk-gallery__cell:hover,
	.mk-style--homestay .mk-room:hover { translate: none; }
	.mk-style--homestay .mk-btn,
	.mk-style--homestay .mk-gallery__open,
	.mk-style--homestay .mk-gallery__cell,
	.mk-style--homestay .mk-gallery__cell img,
	.mk-style--homestay .mk-room,
	.mk-style--homestay .mk-form input,
	.mk-style--homestay .mk-form select,
	.mk-style--homestay .mk-form textarea { transition: none; }
	.mk-style--homestay .mk-btn:active,
	.mk-style--homestay .mk-gallery__open:active { transform: none; }
	.mk-js .mk-style--homestay.mk-motion .mk-gallery__cell:nth-child(even) { transition-delay: 0s; }
	.mk-style--homestay .mk-lightbox,
	.mk-style--homestay .mk-lightbox[open],
	.mk-style--homestay .mk-lightbox::backdrop,
	.mk-style--homestay .mk-lightbox[open]::backdrop { transition-duration: 0.01s; }
	.mk-style--homestay .mk-lightbox__figure,
	.mk-style--homestay .mk-lightbox[open] .mk-lightbox__figure { transform: none; transition: none; }
}

/* ----- Responsive -----
   Every multi-column and bleed rule above is undone by name. Being later in the file is not
   enough against the nth-child selectors, which carry one more class than a bare cell rule. */
@media (max-width: 860px) {
	.mk-style--homestay .mk-hero--media .mk-hero__inner { grid-template-columns: 1fr; }
	.mk-style--homestay .mk-hero__title { max-width: none; }
	/* The bleed is a desktop composition. At phone width it would just crop the house. */
	.mk-style--homestay .mk-hero__media { margin-right: 0; }
	.mk-style--homestay .mk-hero__media img { aspect-ratio: 3 / 2; }
	.mk-style--homestay .mk-gallery__grid { grid-template-columns: 1fr; }
	.mk-style--homestay .mk-gallery__cell,
	.mk-style--homestay .mk-gallery__cell:nth-child(6n + 1),
	.mk-style--homestay .mk-gallery__cell:nth-child(6n + 2),
	.mk-style--homestay .mk-gallery__cell:nth-child(6n + 3),
	.mk-style--homestay .mk-gallery__cell:nth-child(6n + 4),
	.mk-style--homestay .mk-gallery__cell:nth-child(6n + 5),
	.mk-style--homestay .mk-gallery__cell:nth-child(6n + 6),
	.mk-style--homestay .mk-gallery__cell:last-child:nth-child(6n + 1),
	.mk-style--homestay .mk-gallery__cell:last-child:nth-child(6n + 3),
	.mk-style--homestay .mk-gallery__cell:last-child:nth-child(6n + 5) { grid-column: 1 / -1; }
	.mk-style--homestay .mk-gallery__cell img,
	.mk-style--homestay .mk-gallery__cell:nth-child(6n + 2) img,
	.mk-style--homestay .mk-gallery__cell:nth-child(6n + 3) img,
	.mk-style--homestay .mk-gallery__cell:nth-child(6n + 5) img,
	.mk-style--homestay .mk-gallery__cell:nth-child(6n + 6) img,
	.mk-style--homestay .mk-gallery__cell:last-child:nth-child(6n + 1) img,
	.mk-style--homestay .mk-gallery__cell:last-child:nth-child(6n + 3) img,
	.mk-style--homestay .mk-gallery__cell:last-child:nth-child(6n + 5) img { aspect-ratio: 4 / 3; }
	/* The scene is drawn for a wide frame. On a phone the ridges would be cropped to a
	   meaningless slope, so it keeps only the glow and the mist. */
	.mk-dusk { mask-image: linear-gradient(180deg, #000 45%, transparent 95%); -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 95%); }
	.mk-dusk__sky { height: 70%; }
}
@media (max-width: 520px) {
	.mk-style--homestay .mk-brand__name { display: none; }
	.mk-style--homestay .mk-brand__logo { height: 40px; }
	.mk-style--homestay .mk-nav__cta { padding: 0 1.2rem; }
	.mk-style--homestay .mk-footer__brand .mk-brand__name { display: inline; }
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
	.mk-hero--media .mk-hero__inner,
	.mk-hero--art .mk-hero__inner { grid-template-columns: 1fr; }
	.mk-hero__aside { display: none; }
	.mk-split,
	.mk-menu { grid-template-columns: 1fr; }
}
/* Nav collapses to a hamburger across the whole tablet range: below ~900px the full link row +
   CTA no longer fit comfortably, so instead of a cramped, overflowing bar it becomes a hamburger.
   The CTA stays in the bar; the section links + login move into a full-width dropdown. No JS
   required for open/close. */
@media (max-width: 900px) {
	.mk-nav__burger { display: inline-flex; }
	.mk-nav__links {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		margin-left: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0.25rem 1.25rem 1.25rem;
		background: var(--mk-bg);
		border-bottom: 1px solid var(--mk-line);
		box-shadow: var(--mk-shadow);
		display: none;
	}
	.mk-nav__toggle:checked ~ .mk-nav__links { display: flex; }
	.mk-nav__links a {
		padding: 0.85rem 0.25rem;
		font-size: 1.05rem;
		border-bottom: 1px solid color-mix(in srgb, var(--mk-line) 55%, transparent);
	}
	.mk-nav__links a:last-child { border-bottom: none; }
	.mk-nav__login { color: var(--mk-ink); }
	/* Hamburger morphs to an X when the menu is open. */
	.mk-nav__toggle:checked ~ .mk-nav__actions .mk-nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.mk-nav__toggle:checked ~ .mk-nav__actions .mk-nav__burger span:nth-child(2) { opacity: 0; }
	.mk-nav__toggle:checked ~ .mk-nav__actions .mk-nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (max-width: 680px) {
	.mk-cards { grid-template-columns: 1fr; }
	.mk-form { grid-template-columns: 1fr; }
}