/* 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;
	--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;
}
.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 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 textarea:focus-visible { outline: none; border-color: var(--mk-accent); box-shadow: var(--mk-focus); }
.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; }
}

/* ---------- 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; }
}