/*
 * CM Training Oy — child theme styles.
 *
 * Loaded after the Louhosteema bundle. Tokens first (they re-brand the
 * parent's components too), then the site's own components, mobile first.
 * Source of truth for the look: Figma "WEBLAYOUT_CM-Training", page V1.
 *
 * Breakpoints: 768px (md), 1024px (lg), 1280px (xl — full header nav).
 */

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
	/* Louhosteema tokens */
	--louhos-primary: #b2a075;
	--louhos-primary-rgb: 178, 160, 117;
	--louhos-primary-dark: #6e5d31;
	--louhos-accent: #e8dbae;
	--louhos-link-color: #6e5d31;
	--louhos-headings: #111111;
	--louhos-body-color: #5e584e;
	--louhos-grey: #eee9e0;
	--louhos-border: #e2dbcd;
	--louhos-border-rgb: 226, 219, 205;
	--louhos-dark-1: #141414;
	--louhos-dark-1-rgb: 20, 20, 20;
	--louhos-dark-2: #0a0908;
	--louhos-dark-2-rgb: 10, 9, 8;
	--louhos-header-height: 148px;
	--louhos-radius: 12px;
	--louhos-radius-lg: 24px;
	--louhos-font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	/* CM tokens */
	--cm-font-display: "Unbounded", "Manrope", system-ui, sans-serif;
	--cm-ink: #111111;
	--cm-text: #5e584e;
	--cm-text-strong: #3a362f;
	--cm-gold: #b2a075;
	--cm-gold-ink: #6e5d31; /* #7a6838 in Figma; darkened for 4.5:1 on the sand background */
	--cm-gold-soft: #d8c58f;
	--cm-gold-pale: #e8dbae;
	--cm-bg: #f6f3ee;
	--cm-bg-sand: #eee9e0;
	--cm-dark: #141414;
	--cm-line: #e2dbcd;
	--cm-card-line: rgba(17, 17, 17, 0.1);
	--cm-radius-card: 24px;
	/* Figma's gold gradient runs at 35° in each shape's own unit box, so the
	   visible angle depends on the shape: almost horizontal on wide pills,
	   diagonal on circles and squares, steeper on tall cards. */
	--cm-gold-stops: #9c8350 0%, #dcc994 38%, #b9a06a 68%, #e8dbae 100%;
	--cm-gold-stops-hover: #a89265 0%, #e0cfa1 38%, #c1ab7c 68%, #ebdfb8 100%;
	--cm-gold-gradient: linear-gradient(100deg, var(--cm-gold-stops));
	--cm-gold-gradient-hover: linear-gradient(100deg, var(--cm-gold-stops-hover));
	--cm-gold-gradient-round: linear-gradient(125deg, var(--cm-gold-stops));
	--cm-gold-gradient-round-hover: linear-gradient(125deg, var(--cm-gold-stops-hover));
	--cm-gold-gradient-card: linear-gradient(133deg, var(--cm-gold-stops));
	/* Gold text gradient (Figma). Applied per line, so the gradient spans
	   the words rather than the full container width. */
	--cm-gold-text: linear-gradient(90deg, #7e683a 0%, #b49b5f 50%, #86703f 100%);
	--cm-gold-text-light: linear-gradient(90deg, #b9a06a 0%, #f0e3b6 50%, #c2a96f 100%);
	--cm-shadow-gold: 0 10px 24px rgba(122, 104, 56, 0.38), 0 2px 4px rgba(17, 17, 17, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 3px rgba(92, 77, 40, 0.25);
	--cm-shadow-gold-hover: 0 16px 38px rgba(122, 104, 56, 0.57), 0 8px 18px rgba(17, 17, 17, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 3px rgba(92, 77, 40, 0.25), 0 0 22px rgba(219, 191, 115, 0.35);
	--cm-shadow-soft: 0 10px 24px rgba(17, 17, 17, 0.22), 0 2px 4px rgba(17, 17, 17, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.35);
	--cm-shadow-soft-hover: 0 16px 38px rgba(17, 17, 17, 0.33), 0 8px 18px rgba(17, 17, 17, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 22px rgba(219, 191, 115, 0.35);

	/* Layout */
	--cm-gutter: 20px;
	--cm-container: 1300px;
	--cm-section-y: 64px;
	--cm-head-gap: 40px;
	/* Distance from the container edge to the viewport edge, used by
	   carousels that bleed to the right edge of the page. */
	--cm-page-max: 2200px;
	/* Page width: the viewport, capped at --cm-page-max on very wide screens. */
	--cm-page: min(100vw, var(--cm-page-max));
	--cm-bleed: max(var(--cm-gutter), calc((var(--cm-page) - var(--cm-container)) / 2));
	--cm-section-bg: var(--cm-bg);
}

@media (min-width: 768px) {
	:root {
		--cm-gutter: 32px;
		--cm-section-y: 80px;
		--cm-head-gap: 48px;
	}
}

@media (min-width: 1280px) {
	:root {
		--cm-gutter: 56px;
		--cm-section-y: 96px;
		--cm-head-gap: 64px;
	}
}

/* ==========================================================================
   Base
   ========================================================================== */

html,
body {
	overflow-x: clip;
}

html {
	background: #e7e1d6;
}

body {
	position: relative;
	max-width: var(--cm-page-max);
	margin-inline: auto;
	background: var(--cm-bg);
	color: var(--cm-text);
	font-family: var(--louhos-font-family);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
	color: var(--cm-ink);
	font-family: var(--cm-font-display);
}

a {
	color: var(--cm-gold-ink);
}

a:hover {
	color: var(--cm-ink);
}

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

.skip-link {
	background: var(--cm-ink);
	color: #fff;
}

:focus-visible {
	outline: 3px solid var(--cm-gold-ink);
	outline-offset: 3px;
}

.cm-section--dark :focus-visible,
.cm-footer :focus-visible,
.cm-service :focus-visible {
	outline-color: var(--cm-gold-pale);
}

.cm-container {
	width: min(var(--cm-container), 100% - 2 * var(--cm-gutter));
	margin-inline: auto;
}

.cm-container--wide {
	width: min(1640px, 100% - 2 * var(--cm-gutter));
}

.cm-gold-text {
	background: var(--cm-gold-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.cm-section--dark .cm-gold-text,
.cm-footer .cm-gold-text {
	background-image: var(--cm-gold-text-light);
}

/* Prose (WYSIWYG output) */
.cm-prose > * + * {
	margin-top: 1rem;
}

.cm-prose > :first-child {
	margin-top: 0;
}

.cm-prose > :last-child {
	margin-bottom: 0;
}

.cm-prose p,
.cm-prose ul,
.cm-prose ol {
	margin-bottom: 0;
}

.cm-prose strong {
	color: var(--cm-ink);
	font-weight: 700;
}

.cm-prose + .cm-prose {
	margin-top: 1rem;
}

.cm-prose--lg {
	font-size: 1.0625rem;
	line-height: 1.65;
}

@media (min-width: 1024px) {
	.cm-prose--lg {
		font-size: 1.125rem;
	}
}

/* Line icons (partials/icons.twig). Sized per component below. */
.cm-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.cm-icon {
	display: inline-block;
	fill: none;
	stroke: currentColor;
	width: 1em;
	height: 1em;
	flex: none;
	vertical-align: middle;
}

.cm-btn__icon .cm-icon,
.cm-float__icon .cm-icon {
	width: 17px;
	height: 17px;
}

.cm-arrow .cm-icon {
	width: 20px;
	height: 20px;
}

.cm-chip__icon .cm-icon,
.cm-topbar__book .cm-icon {
	width: 12px;
	height: 12px;
}

.cm-checklist__mark .cm-icon {
	width: 13px;
	height: 13px;
}

.cm-checklist--lg .cm-checklist__mark .cm-icon {
	width: 17px;
	height: 17px;
}

.cm-service__tag-icon .cm-icon,
.cm-topbar__mail .cm-icon {
	width: 15px;
	height: 15px;
}

.cm-footer__list .cm-icon,
.cm-plan__footnote .cm-icon,
.cm-contact__badge .cm-icon {
	width: 16px;
	height: 16px;
}

.cm-footer__list .cm-icon {
	color: var(--cm-gold);
}

.cm-input-wrap .cm-icon,
.cm-ti__email .cm-icon {
	width: 18px;
	height: 18px;
}

.cm-channel__icon .cm-icon,
.cm-lightbox__close .cm-icon,
.cm-carousel__pause .cm-icon {
	width: 20px;
	height: 20px;
}

.cm-carousel__pause .cm-icon {
	width: 14px;
	height: 14px;
}

.cm-highlight__icon .cm-icon {
	width: 22px;
	height: 22px;
}

.cm-gallery__zoom .cm-icon {
	width: 24px;
	height: 24px;
}

.cm-zenfit__icon .cm-icon {
	width: 30px;
	height: 30px;
}

.cm-video-card__play .cm-icon {
	width: 14px;
	height: 14px;
}

.cm-review__mark {
	width: 34px;
	height: 26px;
}

.cm-review__stars .cm-icon {
	width: 15px;
	height: 15px;
}

.cm-post-card__more .cm-icon,
.cm-pill .cm-icon {
	width: 16px;
	height: 16px;
}

/* Icons Figma strokes with the gold gradient */
.cm-btn--gold .cm-btn__icon .cm-icon,
.cm-topbar__mail .cm-icon,
.cm-ti__email .cm-icon,
.cm-input-wrap .cm-icon,
.cm-footer__list .cm-icon,
.cm-channel__icon .cm-icon,
.cm-highlight:not(.is-featured) .cm-highlight__icon .cm-icon {
	stroke: url(#cm-gold-stroke);
}

.cm-review__mark,
.cm-review__stars .cm-icon {
	fill: url(#cm-gold-fill);
	stroke: none;
}

.cm-video-card__play .cm-icon,
.cm-carousel__pause .cm-icon {
	fill: currentColor;
	stroke: none;
}

/* ==========================================================================
   Components: eyebrow, heading, buttons, pills, checklists
   ========================================================================== */

.cm-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 9px 18px 9px 16px;
	border: 1px solid rgba(178, 160, 117, 0.55);
	border-radius: 999px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(250, 245, 232, 0.85));
	box-shadow: 0 4px 14px rgba(122, 105, 56, 0.1);
	color: var(--cm-gold-ink);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.cm-eyebrow__dot {
	width: 8px;
	height: 8px;
	flex: none;
	border-radius: 50%;
	background: var(--cm-gold-gradient-round);
	box-shadow: 0 0 6px rgba(219, 201, 148, 0.9);
}

.cm-eyebrow--dark {
	border-color: rgba(178, 160, 117, 0.45);
	background: rgba(178, 160, 117, 0.1);
	box-shadow: none;
	color: var(--cm-gold-pale);
}

.cm-heading {
	margin: 0;
	color: var(--cm-ink);
	font-family: var(--cm-font-display);
	font-size: clamp(1.25rem, 0.25rem + 4.1vw, 3.25rem);
	font-weight: 700;
	line-height: 1.25;
	text-transform: uppercase;
	overflow-wrap: break-word;
	hyphens: auto;
}

.cm-heading__line {
	display: block;
}

.cm-heading__line.cm-gold-text,
.cm-quote__mark {
	width: fit-content;
	max-width: 100%;
}

/* The gradient is clipped to the text box; umlaut dots (Ä, Ö) reach above
   it at tight line heights. Extend the box upwards without moving the line. */
.cm-heading__line.cm-gold-text {
	margin-top: -0.18em;
	padding-top: 0.18em;
}

.cm-heading--hero {
	letter-spacing: -0.01em;
}

/* Front page hero: the main heading keeps growing on large screens so it
   stands apart from the rest of the content (52px at 1024 → 76px at 1920+) */
@media (min-width: 1024px) {
	.cm-hero:not(.cm-hero--page, .cm-hero--compact) .cm-heading--hero {
		font-size: clamp(2.875rem, 0.875rem + 3.15vw, 4.75rem);
		line-height: 1.28;
		/* Each line stays whole: no hyphenation of HENKILÖKOHTAINEN */
		hyphens: manual;
		white-space: nowrap;
	}

	.cm-hero:not(.cm-hero--page, .cm-hero--compact) .cm-hero__content {
		max-width: min(1060px, 64vw);
	}
}

.cm-section--dark .cm-heading {
	color: #fff;
}

/* Buttons --------------------------------------------------------------- */

.cm-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 56px;
	padding: 0 10px 0 28px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--cm-gold-gradient);
	box-shadow: var(--cm-shadow-gold);
	color: var(--cm-ink);
	font-family: var(--cm-font-display);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.cm-btn:hover,
.cm-btn:focus-visible {
	background: var(--cm-gold-gradient-hover);
	box-shadow: var(--cm-shadow-gold-hover);
	color: var(--cm-ink);
	transform: translateY(-1px);
}

.cm-btn__label {
	padding-block: 8px;
}

.cm-btn__icon {
	display: inline-grid;
	width: 38px;
	height: 38px;
	flex: none;
	place-items: center;
	border-radius: 50%;
	background: var(--cm-ink);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 4px rgba(0, 0, 0, 0.18);
	color: var(--cm-gold-pale);
	font-size: 0.95rem;
	transition: transform 0.25s ease;
}

.cm-btn:hover .cm-btn__icon,
.cm-btn:focus-visible .cm-btn__icon {
	transform: rotate(-8deg) scale(1.05);
}

.cm-btn--light {
	border-color: rgba(17, 17, 17, 0.18);
	background: rgba(255, 255, 255, 0.7);
	box-shadow: var(--cm-shadow-soft);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}

.cm-btn--light:hover,
.cm-btn--light:focus-visible {
	border-color: var(--cm-gold);
	background: rgba(255, 255, 255, 0.85);
	box-shadow: var(--cm-shadow-soft-hover);
}

.cm-btn--light .cm-btn__icon,
.cm-btn--dark .cm-btn__icon,
.cm-btn--ghost .cm-btn__icon {
	background: var(--cm-gold-gradient);
	color: var(--cm-ink);
}

.cm-btn--dark {
	background: var(--cm-ink);
	box-shadow: var(--cm-shadow-soft);
	color: #fff;
}

.cm-btn--dark:hover,
.cm-btn--dark:focus-visible {
	background: #2e2e2e;
	box-shadow: var(--cm-shadow-soft-hover);
	color: #fff;
}

.cm-btn--ghost {
	border-color: #3a3a3a;
	background: rgba(17, 17, 17, 0.35);
	box-shadow: var(--cm-shadow-soft);
	color: #fff;
}

.cm-btn--ghost:hover,
.cm-btn--ghost:focus-visible {
	border-color: var(--cm-gold);
	background: rgba(178, 160, 117, 0.18);
	box-shadow: var(--cm-shadow-soft-hover);
	color: #fff;
}

/* Gradient fills sit under a 1px transparent border: start them at the
   border edge, or the gradient tiles and shows a 1px strip at the top. */
/* Gold fills have no border at all: the inset highlight (Figma's inner
   shadow) is drawn inside the border, so a transparent border would leave
   a 1px gold row above the highlight. Padding makes up the 1px. */
.cm-btn--gold,
.cm-nav__item.is-active .cm-nav__link,
.cm-pill.is-active {
	border-width: 0;
}

.cm-btn--gold {
	padding: 0 11px 0 29px;
}

.cm-nav__item.is-active .cm-nav__link {
	padding: 11px 19px;
}

.cm-pill.is-active {
	padding: 9px 19px;
}

.cm-btn,
.cm-nav__link,
.cm-pill,
.cm-arrow,
.cm-topbar__book,
.cm-plan__tag {
	background-origin: border-box;
}

/* Round arrow buttons (carousels) */
.cm-arrow {
	display: inline-grid;
	width: 56px;
	height: 56px;
	place-items: center;
	border: 1px solid var(--cm-line);
	border-radius: 50%;
	background: transparent;
	color: var(--cm-ink);
	transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.cm-arrow:hover,
.cm-arrow:focus-visible {
	background: #fff;
	box-shadow: 0 6px 16px rgba(122, 105, 56, 0.18);
}

.cm-arrow--gold {
	border: 0;
	background: var(--cm-gold-gradient-round);
	box-shadow: 0 0 0 rgba(178, 160, 117, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.cm-arrow--gold:hover,
.cm-arrow--gold:focus-visible {
	background: var(--cm-gold-gradient-round-hover);
	box-shadow: 0 6px 14px rgba(178, 160, 117, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 22px rgba(219, 191, 115, 0.35);
}

.cm-arrow:disabled {
	opacity: 0.4;
	cursor: default;
}

/* Generic pill link (blog filter, pagination) */
.cm-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 8px 18px;
	border: 1px solid var(--cm-line);
	border-radius: 999px;
	background: #fff;
	color: var(--cm-ink);
	font-weight: 600;
	text-decoration: none;
}

.cm-pill:hover,
.cm-pill:focus-visible {
	border-color: var(--cm-gold);
	color: var(--cm-ink);
}

.cm-pill.is-active {
	border-color: transparent;
	background: var(--cm-gold-gradient);
	box-shadow: var(--cm-shadow-gold);
	font-weight: 700;
}

/* Checklist with gold check marks */
.cm-checklist {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cm-checklist li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 500;
	line-height: 1.4;
}

.cm-checklist__mark {
	display: inline-grid;
	width: 22px;
	height: 22px;
	flex: none;
	place-items: center;
	border-radius: 50%;
	background: var(--cm-gold-gradient-round);
	color: var(--cm-ink);
	font-size: 0.625rem;
}

.cm-checklist--lg {
	gap: 14px;
}

.cm-checklist--lg li {
	gap: 14px;
	color: #fff;
	font-weight: 600;
}

.cm-checklist--lg .cm-checklist__mark {
	width: 34px;
	height: 34px;
	font-size: 0.875rem;
}

.cm-checklist--soft li {
	gap: 14px;
	color: #cfcac1;
	font-size: 0.9375rem;
	font-weight: 400;
}

.cm-checklist--soft .cm-checklist__mark {
	background: rgba(178, 160, 117, 0.18);
	color: var(--cm-gold-soft);
}

/* ==========================================================================
   Sections
   ========================================================================== */

.cm-section {
	--cm-section-bg: var(--cm-bg);
	position: relative;
	padding-block: var(--cm-section-y);
	background: var(--cm-section-bg);
}

.cm-section--sand {
	--cm-section-bg: var(--cm-bg-sand);
}

.cm-section--dark {
	--cm-section-bg: var(--cm-dark);
	color: #a6a6a6;
}

.cm-section__head {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-bottom: var(--cm-head-gap);
}

/* Buttons in a stacked head keep their own width instead of stretching */
.cm-section__head > .cm-btn {
	align-self: flex-start;
}

.cm-section__title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.cm-section__title--center {
	align-items: center;
	text-align: center;
}

.cm-section__lead {
	max-width: 32.5rem;
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.6;
}

.cm-section__lead--narrow {
	max-width: 25rem;
}

.cm-section__lead--below {
	max-width: 40rem;
	margin-top: 32px;
}

@media (min-width: 1024px) {
	.cm-section__head {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 48px;
	}

	.cm-section__head > .cm-btn {
		align-self: auto;
	}

	.cm-section__lead {
		font-size: 1.125rem;
	}
}

/* ==========================================================================
   Header
   ========================================================================== */

.cm-header {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 100;
}

.cm-topbar {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	background: #111;
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 600;
}

.cm-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-height: 48px;
	padding: 6px var(--cm-gutter);
}

.cm-topbar__offer {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0;
	white-space: nowrap;
}

/* Phones: offer and button on one line; tighter type and button below 430px */
@media (max-width: 429px) {
	.cm-topbar {
		font-size: 0.75rem;
	}

	.cm-topbar__inner {
		padding-inline: 12px;
	}

	.cm-topbar__offer {
		gap: 8px;
	}

	/* Even padding once the calendar icon is gone; Unbounded's last glyph
	   needs a little extra room on the right. */
	.cm-topbar .cm-topbar__book {
		padding: 5px 15px 5px 14px;
	}

	.cm-topbar .cm-topbar__book .cm-icon {
		display: none;
	}
}

@media (max-width: 359px) {
	.cm-topbar {
		font-size: 0.6875rem;
	}

	.cm-topbar .cm-topbar__star {
		display: none;
	}

	.cm-topbar .cm-topbar__book {
		font-size: 0.625rem;
	}
}

.cm-topbar__star {
	color: var(--cm-gold);
	font-family: var(--cm-font-display);
	font-size: 0.875rem;
}

.cm-topbar__book {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 8px 5px 12px;
	border-radius: 999px;
	background: var(--cm-gold-gradient-round);
	color: #0d0d0d;
	font-family: var(--cm-font-display);
	font-size: 0.6875rem;
	font-weight: 600;
	text-decoration: none;
	transition: box-shadow 0.2s ease;
}

.cm-topbar__book:hover,
.cm-topbar__book:focus-visible {
	box-shadow: 0 0 14px rgba(219, 191, 115, 0.55);
	color: #0d0d0d;
}

.cm-topbar__contact {
	display: none;
	align-items: center;
	gap: 16px;
}

.cm-topbar__mail {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--cm-gold);
	text-decoration: none;
}

.cm-topbar__mail:hover,
.cm-topbar__mail:focus-visible {
	color: var(--cm-gold-pale);
}

.cm-topbar__divider {
	width: 1px;
	height: 18px;
	background: rgba(255, 255, 255, 0.2);
}

@media (min-width: 1024px) {
	.cm-topbar__inner {
		justify-content: space-between;
	}

	.cm-topbar__contact {
		display: flex;
	}
}

/* Social icons */
.cm-social {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cm-social__link {
	display: inline-grid;
	place-items: center;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.cm-social--topbar .cm-social__link {
	width: 28px;
	height: 28px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	font-size: 0.75rem;
}

.cm-social--topbar .cm-social__link:hover,
.cm-social--topbar .cm-social__link:focus-visible {
	border-color: var(--cm-gold);
	color: var(--cm-gold-pale);
}

.cm-social--footer {
	gap: 10px;
	margin-top: 20px;
}

.cm-social--footer .cm-social__link {
	width: 44px;
	height: 44px;
	border: 1px solid var(--cm-gold);
	border-radius: 12px;
	background: rgba(178, 160, 117, 0.08);
	color: #fff;
	font-size: 1rem;
}

.cm-social--footer .cm-social__link:hover,
.cm-social--footer .cm-social__link:focus-visible {
	background: var(--cm-gold-gradient);
	color: var(--cm-ink);
}

/* Main bar */
.cm-mainbar {
	background: linear-gradient(180deg, rgba(246, 243, 238, 0.9), rgba(246, 243, 238, 0));
	transition: background 0.3s ease, box-shadow 0.3s ease;
}

.cm-mainbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 76px;
	padding-inline: var(--cm-gutter);
}

.cm-header.is-stuck .cm-mainbar {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	max-width: var(--cm-page-max);
	margin-inline: auto;
	background: rgba(246, 243, 238, 0.94);
	box-shadow: 0 8px 24px rgba(17, 17, 17, 0.08);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	animation: cm-slide-down 0.3s ease;
}

.admin-bar .cm-header.is-stuck .cm-mainbar {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@keyframes cm-slide-down {
	from {
		transform: translateY(-100%);
	}
}

.cm-brand {
	display: inline-flex;
	flex: none;
}

.cm-brand__img {
	width: auto;
	height: 40px;
}

/* Logo hover: a gold sheen masked to the logo's own shape sweeps across,
   with a small lift. The logo URL comes in as --cm-logo. */
.cm-logo-link {
	position: relative;
	display: inline-flex;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.cm-logo-link::after {
	position: absolute;
	inset: 0;
	content: "";
	background: linear-gradient(128deg, transparent 40%, #f6e3a1 48%, #c9a14a 54%, transparent 62%) 130% 0 / 260% 100% no-repeat;
	-webkit-mask: var(--cm-logo) center / contain no-repeat;
	mask: var(--cm-logo) center / contain no-repeat;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease, background-position 0s 0.3s;
}

.cm-logo-link:hover,
.cm-logo-link:focus-visible {
	transform: translateY(-2px);
}

.cm-logo-link:hover::after,
.cm-logo-link:focus-visible::after {
	background-position: -30% 0;
	opacity: 1;
	transition: opacity 0.2s ease, background-position 1.5s cubic-bezier(0.45, 0, 0.25, 1);
}

@media (prefers-reduced-motion: reduce) {
	.cm-logo-link,
	.cm-logo-link::after {
		transition: none;
	}

	.cm-logo-link:hover,
	.cm-logo-link:focus-visible {
		transform: none;
	}

	.cm-logo-link:hover::after,
	.cm-logo-link:focus-visible::after {
		opacity: 0;
	}
}

.cm-brand__text {
	color: var(--cm-ink);
	font-family: var(--cm-font-display);
	font-weight: 700;
	text-transform: uppercase;
}

.cm-mainbar__cta {
	display: none;
}

/* Menu toggle: three bars that fold into an X (bars meet in the middle,
   then rotate; reversed on close). Gold when open. */
.cm-menu-toggle {
	position: relative;
	z-index: 3;
	display: inline-grid;
	width: 48px;
	height: 48px;
	place-items: center;
	padding: 0;
	border: 1px solid rgba(17, 17, 17, 0.12);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	box-shadow: 0 6px 16px rgba(17, 17, 17, 0.08);
	color: var(--cm-ink);
	cursor: pointer;
	transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.cm-menu-toggle:hover {
	border-color: rgba(178, 160, 117, 0.7);
}

.cm-menu-toggle[aria-expanded="true"] {
	/* No border under the gold: a transparent 1px border leaves a light strip at the top */
	border-width: 0;
	background: var(--cm-gold-gradient-round);
	box-shadow: var(--cm-shadow-gold);
}

.cm-menu-toggle__bars {
	position: relative;
	display: block;
	width: 20px;
	height: 14px;
}

.cm-menu-toggle__bars span {
	position: absolute;
	right: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: top 0.2s ease 0.2s, transform 0.2s ease, width 0.25s ease, opacity 0.15s ease 0.15s;
}

.cm-menu-toggle__bars span:nth-child(1) {
	top: 0;
}

.cm-menu-toggle__bars span:nth-child(2) {
	top: 6px;
	width: 60%;
}

.cm-menu-toggle__bars span:nth-child(3) {
	top: 12px;
}

.cm-menu-toggle:hover .cm-menu-toggle__bars span:nth-child(2) {
	width: 100%;
}

.cm-menu-toggle[aria-expanded="true"] .cm-menu-toggle__bars span {
	transition: top 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s, width 0.25s ease, opacity 0.1s ease;
}

.cm-menu-toggle[aria-expanded="true"] .cm-menu-toggle__bars span:nth-child(1) {
	top: 6px;
	transform: rotate(45deg);
}

.cm-menu-toggle[aria-expanded="true"] .cm-menu-toggle__bars span:nth-child(2) {
	width: 0;
	opacity: 0;
}

.cm-menu-toggle[aria-expanded="true"] .cm-menu-toggle__bars span:nth-child(3) {
	top: 6px;
	transform: rotate(-45deg);
}

.cm-mainbar {
	position: relative;
}

/* --------------------------------------------------------------------------
   Navigation, shared parts (desktop pill bar is the default)
   -------------------------------------------------------------------------- */

.cm-nav__list {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cm-nav__link {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 46px;
	padding: 10px 18px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: transparent;
	color: var(--cm-ink);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 26px;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.cm-nav__link:hover,
.cm-nav__link:focus-visible {
	border-color: rgba(178, 160, 117, 0.6);
	background: #fff;
	box-shadow: 0 6px 16px rgba(122, 105, 56, 0.18);
	color: var(--cm-ink);
}

.cm-nav__item.is-active > .cm-nav__link {
	background: var(--cm-gold-gradient);
	box-shadow: var(--cm-shadow-gold);
	font-weight: 700;
}

.cm-nav__item.is-active > .cm-nav__link:hover,
.cm-nav__item.is-active > .cm-nav__link:focus-visible {
	border-color: transparent;
	background: var(--cm-gold-gradient-hover);
	box-shadow: var(--cm-shadow-gold-hover);
}

/* Palvelut: a gold badge with a chevron that turns when the menu opens */
.cm-nav__caret {
	display: inline-grid;
	flex: none;
	width: 22px;
	height: 22px;
	place-items: center;
	border-radius: 50%;
	background: var(--cm-gold-gradient-round);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
	color: var(--cm-ink);
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease;
}

.cm-nav__caret .cm-icon {
	width: 11px;
	height: 11px;
	stroke: currentColor;
	transform: rotate(90deg);
}

.cm-nav__item.is-active > .cm-nav__link .cm-nav__caret {
	background: var(--cm-ink);
	color: var(--cm-gold-pale);
}

.cm-nav__item.is-open > .cm-nav__link .cm-nav__caret {
	transform: rotate(180deg);
}

.cm-nav__go,
.cm-nav__head,
.cm-nav__foot,
.cm-nav__back,
.cm-nav-backdrop {
	display: none;
}

/* Mega menu content (cards + promo), used in both layouts */
.cm-mega__title {
	margin: 0;
}

.cm-mega__list {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cm-mega__card {
	position: relative;
	display: grid;
	color: var(--cm-ink);
	text-decoration: none;
}

.cm-mega__media {
	display: block;
	overflow: hidden;
	background: var(--cm-bg-sand);
}

.cm-mega__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 25%;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.cm-mega__body {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.cm-mega__name {
	font-family: var(--cm-font-display);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	text-transform: uppercase;
}

.cm-mega__desc {
	color: var(--cm-text);
	font-size: 0.8125rem;
	line-height: 1.5;
}

.cm-mega__item.is-active .cm-mega__name {
	color: var(--cm-gold-ink);
}

.cm-mega__arrow {
	display: inline-grid;
	flex: none;
	width: 36px;
	height: 36px;
	place-items: center;
	border-radius: 50%;
	background: var(--cm-gold-gradient-round);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
	color: var(--cm-ink);
	transition: transform 0.3s ease;
}

.cm-mega__arrow .cm-icon {
	width: 15px;
	height: 15px;
	stroke: currentColor;
}

.cm-mega__card:hover .cm-mega__img,
.cm-mega__card:focus-visible .cm-mega__img {
	transform: scale(1.06);
}

.cm-mega__card:hover .cm-mega__arrow,
.cm-mega__card:focus-visible .cm-mega__arrow {
	transform: translateX(3px);
}

.cm-mega__promo {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	overflow: hidden;
	padding: 22px;
	border-radius: 20px;
	background:
		radial-gradient(120% 80% at 100% 0%, rgba(178, 160, 117, 0.35), transparent 60%),
		#111;
	color: #fff;
}

.cm-mega__promo-icon {
	display: inline-grid;
	width: 44px;
	height: 44px;
	place-items: center;
	border-radius: 50%;
	background: var(--cm-gold-gradient-round);
	color: var(--cm-ink);
}

.cm-mega__promo-icon .cm-icon {
	width: 20px;
	height: 20px;
	stroke: currentColor;
}

.cm-mega__promo-title {
	margin: 4px 0 0;
	color: #fff;
	font-family: var(--cm-font-display);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	text-transform: uppercase;
}

.cm-mega__promo-text {
	margin: 0;
	color: #c9c3b6;
	font-size: 0.875rem;
	line-height: 1.55;
}

.cm-mega__promo .cm-btn {
	margin-top: auto;
	min-height: 48px;
}

/* --------------------------------------------------------------------------
   Below 1280px: off-canvas drawer from the right, submenus as their own
   panel sliding in on top (drill-down)
   -------------------------------------------------------------------------- */

@media (max-width: 1279px) {
	html.cm-no-scroll {
		overflow: hidden;
	}

	/* While open, the toggle (now an X) sits in the drawer's top corner,
	   level with the logo and the back button. */
	.cm-header.is-menu-open .cm-menu-toggle {
		position: fixed;
		top: 16px;
		right: 20px;
	}

	.admin-bar .cm-header.is-menu-open .cm-menu-toggle {
		top: calc(16px + var(--wp-admin--admin-bar--height, 46px));
	}

	/* The stuck bar's backdrop-filter would trap the fixed drawer inside it */
	.cm-header.is-menu-open .cm-mainbar {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.cm-nav-backdrop {
		position: fixed;
		inset: 0;
		z-index: 1;
		display: block;
		background: rgba(10, 9, 8, 0.5);
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.35s ease, visibility 0s linear 0.35s;
	}

	.cm-header.is-menu-open .cm-nav-backdrop {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.35s ease;
	}

	.cm-nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
		display: flex;
		flex-direction: column;
		/* Leave a strip of the dimmed page visible on phones */
		width: min(420px, calc(100% - 48px));
		padding: 16px 20px 24px;
		overflow: hidden auto;
		border-radius: 28px 0 0 28px;
		background:
			radial-gradient(90% 40% at 100% 0%, rgba(178, 160, 117, 0.22), transparent 70%),
			radial-gradient(70% 30% at 0% 100%, rgba(178, 160, 117, 0.14), transparent 70%),
			var(--cm-bg);
		box-shadow: -24px 0 60px rgba(17, 17, 17, 0.25);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.5s;
	}

	.cm-nav.is-open {
		transform: none;
		visibility: visible;
		transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.cm-nav__head {
		display: flex;
		flex: none;
		align-items: center;
		min-height: 48px;
		margin-bottom: 20px;
		padding-right: 60px;
	}

	.cm-nav__head .cm-brand__img {
		height: 40px;
	}

	/* Main level: large rows with a round arrow */
	.cm-nav__list {
		gap: 0;
	}

	.cm-nav__list,
	.cm-nav__head,
	.cm-nav__foot {
		transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
	}

	/* Main level slides a little left while a sub panel covers it */
	.cm-nav.has-sub-open .cm-nav__head,
	.cm-nav.has-sub-open .cm-nav__foot,
	.cm-nav.has-sub-open .cm-nav__list > .cm-nav__item > .cm-nav__link {
		opacity: 0;
		transform: translateX(-30%);
	}

	.cm-nav__item {
		border-bottom: 1px solid var(--cm-line);
		opacity: 0;
		transform: translateX(24px);
		transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.cm-nav.is-open .cm-nav__item {
		opacity: 1;
		transform: none;
		transition-delay: calc(0.12s + var(--i, 0) * 0.05s);
	}

	.cm-nav__link,
	.cm-nav__link:hover,
	.cm-nav__link:focus-visible,
	.cm-nav__item.is-active > .cm-nav__link,
	.cm-nav__item.is-active > .cm-nav__link:hover {
		justify-content: space-between;
		width: 100%;
		min-height: 64px;
		padding: 12px 2px;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		font-family: var(--cm-font-display);
		font-size: 1.125rem;
		font-weight: 600;
		letter-spacing: 0.01em;
		text-align: left;
		text-transform: uppercase;
	}

	.cm-nav__link:hover,
	.cm-nav__link:focus-visible {
		color: var(--cm-gold-ink);
	}

	.cm-nav__link:focus-visible {
		outline: 2px solid var(--cm-gold-ink);
		outline-offset: -2px;
	}

	.cm-nav__item.is-active > .cm-nav__link {
		color: var(--cm-gold-ink);
	}

	.cm-nav__item.is-active > .cm-nav__link .cm-nav__label::before {
		display: inline-block;
		width: 8px;
		height: 8px;
		margin: 0 10px 2px 0;
		border-radius: 50%;
		background: var(--cm-gold-gradient-round);
		content: "";
		vertical-align: middle;
	}

	.cm-nav__go,
	.cm-nav__caret,
	.cm-nav__item.is-active > .cm-nav__link .cm-nav__caret {
		display: inline-grid;
		flex: none;
		width: 36px;
		height: 36px;
		place-items: center;
		border: 1px solid rgba(178, 160, 117, 0.55);
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.7);
		box-shadow: none;
		color: var(--cm-gold-ink);
		transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
	}

	.cm-nav__go .cm-icon,
	.cm-nav__caret .cm-icon {
		width: 13px;
		height: 13px;
		stroke: currentColor;
		transform: none;
	}

	.cm-nav__link:hover .cm-nav__go,
	.cm-nav__link:hover .cm-nav__caret,
	.cm-nav__link:focus-visible .cm-nav__go,
	.cm-nav__link:focus-visible .cm-nav__caret {
		border-width: 0;
		background: var(--cm-gold-gradient-round);
		color: var(--cm-ink);
		transform: translateX(2px);
	}

	.cm-nav__item.is-open > .cm-nav__link .cm-nav__caret {
		transform: none;
	}

	/* Sub panel: covers the drawer and slides in from the right */
	.cm-nav__sub {
		position: absolute;
		inset: 0;
		z-index: 2;
		display: flex;
		flex-direction: column;
		gap: 18px;
		padding: 16px 20px 24px;
		overflow: hidden auto;
		background:
			radial-gradient(90% 40% at 100% 0%, rgba(178, 160, 117, 0.22), transparent 70%),
			var(--cm-bg);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.45s;
	}

	.cm-nav__item.is-open > .cm-nav__sub {
		transform: none;
		visibility: visible;
		transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.cm-nav__back {
		display: inline-flex;
		align-self: flex-start;
		align-items: center;
		gap: 10px;
		min-height: 48px;
		padding: 6px 18px 6px 6px;
		border: 1px solid var(--cm-line);
		border-radius: 999px;
		background: #fff;
		color: var(--cm-ink);
		font-family: inherit;
		font-size: 0.9375rem;
		font-weight: 700;
		cursor: pointer;
	}

	.cm-nav__back-icon {
		display: inline-grid;
		width: 34px;
		height: 34px;
		place-items: center;
		border-radius: 50%;
		background: var(--cm-gold-gradient-round);
		color: var(--cm-ink);
	}

	.cm-nav__back-icon .cm-icon {
		width: 14px;
		height: 14px;
		stroke: currentColor;
	}

	.cm-nav__back:hover,
	.cm-nav__back:focus-visible {
		border-color: var(--cm-gold);
	}

	.cm-mega__title {
		margin-top: 4px;
		background: var(--cm-gold-text);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		font-family: var(--cm-font-display);
		font-size: 1.75rem;
		font-weight: 700;
		line-height: 1.2;
		text-transform: uppercase;
	}

	.cm-mega__card {
		grid-template-columns: 84px minmax(0, 1fr) auto;
		align-items: center;
		gap: 14px;
		padding: 10px 14px 10px 10px;
		border: 1px solid var(--cm-line);
		border-radius: 20px;
		background: #fff;
		box-shadow: 0 10px 24px rgba(122, 105, 56, 0.08);
	}

	.cm-mega__media {
		align-self: start;
		width: 84px;
		height: 84px;
		border-radius: 14px;
	}

	.cm-mega__item,
	.cm-mega__promo {
		opacity: 0;
		transform: translateX(24px);
		transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.cm-nav__item.is-open .cm-mega__item,
	.cm-nav__item.is-open .cm-mega__promo {
		opacity: 1;
		transform: none;
		transition-delay: calc(0.15s + var(--i, 0) * 0.06s);
	}

	.cm-mega__promo {
		margin-top: auto;
	}

	/* Footer of the drawer: CTA, contact, socials */
	.cm-nav__foot {
		display: grid;
		flex: none;
		gap: 18px;
		margin-top: auto;
		padding-top: 28px;
	}

	.cm-nav__foot .cm-btn {
		justify-content: space-between;
		width: 100%;
	}

	.cm-nav__contact {
		display: grid;
		gap: 4px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.cm-nav__contact a {
		display: inline-flex;
		align-items: center;
		gap: 12px;
		min-height: 40px;
		color: var(--cm-text-strong);
		font-weight: 600;
		text-decoration: none;
	}

	.cm-nav__contact a:hover,
	.cm-nav__contact a:focus-visible {
		color: var(--cm-gold-ink);
	}

	.cm-nav__contact .cm-icon {
		width: 18px;
		height: 18px;
		stroke: url(#cm-gold-stroke);
	}

	.cm-social--drawer {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.cm-social--drawer .cm-social__link {
		display: inline-grid;
		width: 42px;
		height: 42px;
		place-items: center;
		border: 1px solid rgba(178, 160, 117, 0.55);
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.7);
		color: var(--cm-ink);
		transition: background 0.2s ease, border-color 0.2s ease;
	}

	.cm-social--drawer .cm-social__link:hover,
	.cm-social--drawer .cm-social__link:focus-visible {
		border-width: 0;
		background: var(--cm-gold-gradient-round);
	}
}

@media (min-width: 1024px) {
	.cm-brand__img {
		height: 52px;
	}

	.cm-mainbar__inner {
		min-height: 100px;
	}

	.cm-header.is-stuck .cm-mainbar__inner {
		min-height: 80px;
	}
}

@media (min-width: 768px) {
	.cm-mainbar__cta {
		display: block;
		margin-left: auto;
	}
}

/* --------------------------------------------------------------------------
   From 1280px: pill bar and the Palvelut mega menu
   -------------------------------------------------------------------------- */

@media (min-width: 1280px) {
	.cm-menu-toggle {
		display: none;
	}

	.cm-mainbar__cta {
		margin-left: 0;
	}

	.cm-nav {
		position: relative;
		display: block;
		padding: 6px;
		border: 1px solid rgba(17, 17, 17, 0.12);
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.7);
		-webkit-backdrop-filter: blur(24px);
		backdrop-filter: blur(24px);
	}

	.cm-nav__list {
		display: flex;
		gap: 2px;
	}

	/* Mega panel, centred under the pill bar */
	.cm-mega {
		position: absolute;
		top: calc(100% + 14px);
		left: 50%;
		z-index: 5;
		display: grid;
		grid-template-columns: minmax(0, 1fr) 260px;
		gap: 16px;
		width: min(880px, calc(100vw - 64px));
		padding: 16px;
		border: 1px solid rgba(17, 17, 17, 0.08);
		border-radius: 28px;
		background: #fff;
		box-shadow: 0 32px 64px rgba(17, 17, 17, 0.18), 0 2px 8px rgba(17, 17, 17, 0.06);
		opacity: 0;
		visibility: hidden;
		transform: translate(-50%, 10px);
		transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.3s;
	}

	/* Bridge the gap so the menu stays open while the pointer moves down */
	.cm-mega::before {
		position: absolute;
		right: 0;
		bottom: 100%;
		left: 0;
		height: 16px;
		content: "";
	}

	.cm-nav__item.is-open > .cm-mega {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, 0);
		transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.cm-mega__title {
		display: none;
	}

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

	.cm-mega__card {
		height: 100%;
		align-content: start;
		gap: 14px;
		padding: 8px 8px 16px;
		border-radius: 22px;
		transition: background 0.25s ease;
	}

	.cm-mega__card:hover,
	.cm-mega__card:focus-visible {
		background: var(--cm-bg);
	}

	.cm-mega__card:focus-visible {
		outline: 2px solid var(--cm-gold-ink);
		outline-offset: 2px;
	}

	.cm-mega__media {
		aspect-ratio: 16 / 10;
		border-radius: 16px;
	}

	.cm-mega__body {
		padding: 0 8px;
	}

	.cm-mega__name {
		font-size: 1rem;
	}

	.cm-mega__desc {
		font-size: 0.875rem;
	}

	.cm-mega__arrow {
		position: absolute;
		top: 20px;
		right: 20px;
		width: 40px;
		height: 40px;
		box-shadow: 0 6px 16px rgba(17, 17, 17, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.55);
	}
}

/* Narrowest desktop: tighter pills so the CTA stays on one line */
@media (min-width: 1280px) and (max-width: 1439px) {
	.cm-mainbar__inner {
		gap: 12px;
	}

	.cm-nav__link {
		padding-inline: 13px;
	}

	.cm-mainbar__cta .cm-btn {
		white-space: nowrap;
	}
}

@media (min-width: 1280px) and (hover: hover) {
	.cm-nav__item--parent:hover > .cm-mega {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, 0);
		transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.cm-nav__item--parent:hover > .cm-nav__link .cm-nav__caret {
		transform: rotate(180deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cm-nav,
	.cm-nav__sub,
	.cm-nav__item,
	.cm-mega,
	.cm-mega__item,
	.cm-mega__promo,
	.cm-nav__list,
	.cm-nav__head,
	.cm-nav__foot,
	.cm-menu-toggle__bars span {
		transition: none !important;
	}
}

/* ==========================================================================
   Hero
   ========================================================================== */

.cm-hero {
	--cm-section-bg: var(--cm-bg);
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--cm-bg);
}

.cm-hero__media {
	position: relative;
	height: 380px;
	margin-top: 130px;
}

.cm-hero__media::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(246, 243, 238, 0) 55%, var(--cm-bg) 100%);
	content: "";
}

.cm-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 82% 30%;
}

.cm-hero__glow {
	position: absolute;
	top: 20%;
	left: -10%;
	width: 760px;
	height: 760px;
	border-radius: 50%;
	background: rgba(178, 160, 117, 0.22);
	filter: blur(220px);
	pointer-events: none;
}

.cm-hero__inner {
	position: relative;
	z-index: 1;
	padding: 0 var(--cm-gutter) 56px;
}

.cm-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 760px;
}

.cm-hero__heading {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.cm-hero__text {
	max-width: 34rem;
	margin-top: 18px;
	font-size: 1.0625rem;
}

.cm-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 18px 0 32px;
	list-style: none;
}

.cm-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 12px 4px 4px;
	border: 1px solid rgba(17, 17, 17, 0.18);
	border-radius: 999px;
	background: rgba(17, 17, 17, 0.07);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	color: var(--cm-ink);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 22px;
}

.cm-chip__icon {
	display: inline-grid;
	width: 24px;
	height: 24px;
	place-items: center;
	border-radius: 50%;
	background: var(--cm-gold-gradient-round);
	font-size: 0.6875rem;
}

.cm-hero__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding-bottom: 28px;
}

/* Video card */
.cm-video-card {
	display: flex;
	align-items: center;
	gap: 18px;
	width: 100%;
	max-width: 623px;
	padding: 10px;
	border: 1px solid var(--cm-line);
	border-radius: 24px;
	background: rgba(255, 255, 255, 0.88);
}

.cm-video-card__thumb {
	position: relative;
	display: grid;
	width: 140px;
	aspect-ratio: 196 / 112;
	flex: none;
	place-items: center;
	overflow: hidden;
	padding: 0;
	border: 1px solid rgba(17, 17, 17, 0.1);
	border-radius: 12px;
	background: #ddd6c8;
}

.cm-video-card__thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cm-video-card__thumb::after {
	position: absolute;
	inset: 0;
	background: rgba(17, 17, 17, 0.12);
	content: "";
}

.cm-video-card__play {
	position: relative;
	z-index: 1;
	display: inline-grid;
	width: 44px;
	height: 44px;
	place-items: center;
	border-radius: 50%;
	background: var(--cm-gold-gradient-round);
	box-shadow: 0 0 0 6px rgba(178, 160, 117, 0.25);
	color: var(--cm-ink);
	font-size: 0.875rem;
	transition: transform 0.25s ease;
}

button.cm-video-card__thumb:hover .cm-video-card__play,
button.cm-video-card__thumb:focus-visible .cm-video-card__play {
	transform: scale(1.1);
}

.cm-video-card__time {
	position: absolute;
	bottom: 8px;
	left: 8px;
	z-index: 1;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(246, 243, 238, 0.85);
	color: var(--cm-ink);
	font-size: 0.75rem;
	font-weight: 700;
}

.cm-video-card__text p {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
}

.cm-video-card__text .cm-video-card__title {
	color: var(--cm-ink);
	font-family: var(--cm-font-display);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.5;
}

@media (min-width: 768px) {
	.cm-video-card {
		padding-right: 24px;
	}

	.cm-video-card__thumb {
		width: 196px;
	}

	.cm-video-card__text p {
		font-size: 0.9375rem;
	}

	.cm-video-card__text .cm-video-card__title {
		font-size: 1.125rem;
	}
}

@media (min-width: 1024px) {
	.cm-hero {
		justify-content: flex-end;
		/* 1100/1920 of the width up to the 2200px page, so the image box
		   keeps Figma's 1920:1000 ratio and is never cropped at the top. */
		min-height: clamp(760px, 57.3vw, 1261px);
	}

	.cm-hero__media {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 91%;
		margin: 0;
	}

	.cm-hero__media::after {
		content: none;
	}

	/* Figma's overlay covers the whole section, not just the photo, so
	   the tint does not start at the photo's top edge. */
	.cm-hero:not(.cm-hero--compact, .cm-hero--page)::after {
		position: absolute;
		inset: 0;
		background:
			linear-gradient(90deg, rgba(246, 243, 238, 0.96) 0%, rgba(246, 243, 238, 0.7) 38%, rgba(246, 243, 238, 0) 50%),
			linear-gradient(180deg, rgba(238, 233, 224, 0.5) 0%, rgba(238, 233, 224, 0) 15%, rgba(246, 243, 238, 0) 80%, var(--cm-bg) 100%);
		content: "";
		pointer-events: none;
	}

	.cm-hero__media img {
		object-fit: cover;
		object-position: right bottom;
	}

	.cm-hero__inner {
		padding-bottom: clamp(64px, 5.7vw, 110px);
	}

	/* Front hero: content sits a little higher than the bottom edge. */
	.cm-hero:not(.cm-hero--compact, .cm-hero--page) .cm-hero__inner {
		padding-top: 172px;
		padding-bottom: clamp(120px, 9.5vw, 210px);
	}

	.cm-chips {
		padding-bottom: 36px;
	}
}

/* Compact hero: subpages and blog without a hero image */
.cm-hero--compact {
	padding-top: 172px;
	background:
		radial-gradient(60% 120% at 0% 0%, rgba(178, 160, 117, 0.18), transparent 70%),
		var(--cm-bg-sand);
}

.cm-hero--compact .cm-hero__inner {
	width: min(var(--cm-container), 100% - 2 * var(--cm-gutter));
	margin-inline: auto;
	padding: 0 0 56px;
}

.cm-hero--compact .cm-hero__content {
	max-width: 56rem;
}

@media (min-width: 1024px) {
	.cm-hero--compact {
		min-height: 0;
		padding-top: 220px;
	}

	.cm-hero--compact .cm-hero__inner {
		padding-bottom: 80px;
	}
}

/* Page hero: subpages get the front page treatment, a full-bleed photo on
   the right that fades into the page, text on the left. The studio photos
   have white backgrounds; multiply tints them to the page cream. */
.cm-hero--page .cm-heading {
	font-size: clamp(1.375rem, 0.3rem + 3.8vw, 3rem);
}

.cm-hero--page .cm-hero__buttons {
	padding: 28px 0 0;
}

.cm-hero--page .cm-hero__media {
	height: clamp(340px, 70vw, 520px);
}

.cm-hero--page .cm-hero__media img {
	/* Right-aligned: the person sits right of centre in every hero photo */
	object-position: 100% 12%;
	mix-blend-mode: multiply;
}

/* Post thumbnails can be anything, so below the desktop layout they stay centred */
@media (max-width: 1023px) {
	.cm-article__hero .cm-hero__media img {
		object-position: 50% 50%;
	}
}

/* Phones: the portrait shots fill the full width, which leaves the person
   small under empty wall; zoom in on head and shoulders. */
@media (max-width: 599px) {
	.cm-hero--page .cm-hero__media {
		overflow: hidden;
	}

	.cm-hero--page:not(.cm-hero--blog, .cm-article__hero) .cm-hero__media img {
		transform: scale(1.2);
		transform-origin: 55% 18%;
	}
}

/* Subpage hero text sits further in from the left edge than the front page */
@media (min-width: 600px) {
	.cm-hero--page .cm-hero__inner {
		padding-left: clamp(40px, 6vw, 140px);
	}
}

/* Bottom fade into the page, so the next section (e.g. Zenfit) meets it
   without a tone edge */
.cm-hero--page::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 140px;
	background: linear-gradient(180deg, rgba(246, 243, 238, 0), var(--cm-bg));
	content: "";
	pointer-events: none;
}

/* Blog: a food photo, not a studio shot, so no white-to-cream tint */
.cm-hero--blog .cm-hero__media img {
	mix-blend-mode: normal;
}

@media (min-width: 1024px) {
	.cm-hero--page {
		justify-content: center;
		min-height: clamp(640px, 46vw, 940px);
		padding-top: 150px;
	}

	.cm-hero--page .cm-hero__media {
		top: 0;
		right: 0;
		bottom: 0;
		width: 58%;
		height: auto;
		-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%), linear-gradient(180deg, #000 72%, transparent 100%);
		-webkit-mask-composite: source-in;
		mask-image: linear-gradient(90deg, transparent 0%, #000 40%), linear-gradient(180deg, #000 72%, transparent 100%);
		mask-composite: intersect;
	}

	.cm-hero--page .cm-hero__media img {
		object-position: 100% 14%;
	}

	.cm-hero--blog .cm-hero__media img {
		object-position: 100% 50%;
	}

	.cm-hero--page .cm-hero__inner {
		padding-bottom: clamp(64px, 6vw, 120px);
		padding-left: clamp(64px, 6vw, 140px);
	}

	.cm-hero--page .cm-hero__content {
		max-width: min(46%, 640px);
	}
}

/* 404 */
.cm-404 .cm-hero__content {
	max-width: 46rem;
}

.cm-404__code {
	margin: 0 0 8px;
	font-family: var(--cm-font-display);
	font-size: clamp(5rem, 3rem + 10vw, 10rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
}

.cm-404 .cm-hero__buttons {
	padding: 28px 0 0;
}

.cm-404__links ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.cm-heading--article {
	font-size: clamp(1.25rem, 0.6rem + 3.2vw, 2.75rem);
	overflow-wrap: anywhere;
}

/* ==========================================================================
   Content needed (placeholder for texts still to come)
   ========================================================================== */

.cm-needed__card {
	position: relative;
	display: grid;
	gap: 24px;
	padding: clamp(28px, 5vw, 64px);
	border: 2px dashed rgba(178, 160, 117, 0.7);
	border-radius: var(--cm-radius-card);
	background:
		repeating-linear-gradient(135deg, rgba(178, 160, 117, 0.06) 0 14px, transparent 14px 28px),
		#fff;
}

.cm-needed__icon {
	display: inline-grid;
	width: 64px;
	height: 64px;
	place-items: center;
	border-radius: 20px;
	background: var(--cm-gold-gradient-round);
	box-shadow: 0 0 0 8px rgba(178, 160, 117, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.55);
	color: var(--cm-ink);
}

.cm-needed__icon .cm-icon {
	width: 28px;
	height: 28px;
}

.cm-needed__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	min-width: 0;
}

.cm-needed__title.cm-heading {
	font-size: clamp(1rem, 0.45rem + 2.6vw, 2.25rem);
	overflow-wrap: anywhere;
}

.cm-needed__text {
	max-width: 42rem;
	margin: 0;
}

.cm-needed__list {
	display: grid;
	gap: 10px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

.cm-needed__item {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--cm-text-strong);
	font-weight: 600;
}

.cm-needed__check {
	display: inline-grid;
	flex: none;
	width: 28px;
	height: 28px;
	place-items: center;
	border: 1px solid rgba(178, 160, 117, 0.55);
	border-radius: 50%;
	color: var(--cm-gold-ink);
}

.cm-needed__check .cm-icon {
	width: 14px;
	height: 14px;
}

@media (min-width: 768px) {
	.cm-needed__card {
		grid-template-columns: auto minmax(0, 1fr);
		gap: 36px;
	}

	.cm-needed__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 32px;
	}
}

/* ==========================================================================
   Zenfit form
   ========================================================================== */

.cm-zenfit {
	padding-block: clamp(48px, 5vw, 72px);
	background: var(--cm-bg-sand);
}

/* Straight after the hero: start from the hero's cream and blend into
   sand, so there is no colour edge between the sections. */
.cm-hero + .cm-zenfit {
	background: linear-gradient(180deg, var(--cm-bg) 0%, var(--cm-bg-sand) clamp(220px, 24vw, 420px));
}

.cm-zenfit__card {
	display: grid;
	gap: 32px;
	padding: clamp(24px, 4vw, 48px);
	border: 1.5px solid transparent;
	border-radius: 24px;
	background:
		linear-gradient(rgba(178, 160, 117, 0.08), rgba(178, 160, 117, 0.08)) padding-box,
		linear-gradient(var(--cm-bg-sand), var(--cm-bg-sand)) padding-box,
		var(--cm-gold-gradient) border-box;
}

.cm-zenfit__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.cm-zenfit__intro .cm-eyebrow {
	margin: 4px 0 -8px;
}

/* Gold badge with a soft halo ring */
.cm-zenfit__icon {
	display: inline-grid;
	width: 68px;
	height: 68px;
	place-items: center;
	border-radius: 22px;
	background: var(--cm-gold-gradient-round);
	box-shadow: 0 0 0 8px rgba(178, 160, 117, 0.14), 0 14px 30px rgba(122, 104, 56, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 3px rgba(92, 77, 40, 0.25);
	color: var(--cm-ink);
	transform: rotate(-6deg);
}

.cm-zenfit__icon .cm-icon {
	transform: rotate(6deg);
}

.cm-zenfit__title.cm-heading {
	font-size: clamp(1.375rem, 0.8rem + 1.7vw, 2.25rem);
}

.cm-zenfit__text {
	max-width: 35rem;
	margin: 0;
}

.cm-zenfit__steps {
	display: grid;
	gap: 12px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

.cm-zenfit__step {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--cm-text-strong);
	font-weight: 600;
}

.cm-zenfit__step-num {
	display: inline-grid;
	flex: none;
	width: 34px;
	height: 34px;
	place-items: center;
	border: 1px solid rgba(178, 160, 117, 0.55);
	border-radius: 50%;
	background: #fff;
	color: var(--cm-gold-ink);
	font-family: var(--cm-font-display);
	font-size: 0.8125rem;
	font-weight: 700;
}

.cm-zenfit__form {
	min-height: 320px;
	padding: clamp(20px, 3vw, 36px);
	border: 1px solid var(--cm-card-line);
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 24px 48px rgba(122, 105, 56, 0.08);
}

/* Shown until the visitor accepts marketing cookies (Lenus) */
.cm-zenfit__consent {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	max-width: 32rem;
	margin: auto 0;
	padding: clamp(8px, 2vw, 24px) 0;
}

.cm-zenfit__form {
	display: flex;
	flex-direction: column;
}

.cm-zenfit__form.is-loaded .cm-zenfit__consent {
	display: none;
}

.cm-zenfit__consent-icon {
	display: inline-grid;
	width: 48px;
	height: 48px;
	place-items: center;
	border-radius: 14px;
	background: var(--cm-gold-gradient-round);
	color: var(--cm-ink);
}

.cm-zenfit__consent-title {
	margin: 4px 0 0;
	color: var(--cm-ink);
	font-family: var(--cm-font-display);
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	font-weight: 600;
	line-height: 1.25;
}

.cm-zenfit__consent-text,
.cm-zenfit__consent-alt {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
}

.cm-zenfit__consent .cm-btn {
	margin-top: 6px;
}

.cm-zenfit__consent-alt a {
	color: var(--cm-gold-ink);
	font-weight: 600;
}

@media (min-width: 1024px) {
	.cm-zenfit__card {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: center;
		gap: 64px;
	}
}

/* Lenus (Zenfit) form: restyle the embedded form to match the site. Lenus
   only ships stable "lenus-*" class names; the hashed styled-components
   classes change between releases, so they are never targeted. Lenus marks
   its own declarations !important, so these have to as well. */
.cm-zenfit .lenus-form {
	max-width: none !important;
	color: var(--cm-text) !important;
	font-family: var(--louhos-font-family) !important;
	font-size: 1rem !important;
}

.cm-zenfit .lenus-form * {
	font-family: inherit !important;
}

.cm-zenfit .lenus-form > header:has(.lenus-form-titles:empty) {
	display: none !important;
}

.cm-zenfit .lenus-progressbar {
	padding: 0 0 8px !important;
}

.cm-zenfit .lenus-progressbar > div > div {
	height: 8px !important;
	overflow: hidden !important;
	border-radius: 999px !important;
	background: rgba(17, 17, 17, 0.08) !important;
}

.cm-zenfit .lenus-progressbar > div > div > div {
	height: 100% !important;
	border-radius: 999px !important;
	background: var(--cm-gold-gradient) !important;
	transition: width 0.4s ease !important;
}

.cm-zenfit .lenus-step {
	padding: 16px 0 8px !important;
}

.cm-zenfit .lenus-step h6 {
	margin: 0 0 20px !important;
	color: var(--cm-ink) !important;
	font-family: var(--cm-font-display) !important;
	font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem) !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	text-align: left !important;
	text-transform: uppercase !important;
}

.cm-zenfit .lenus-step h6 + div {
	padding: 0 !important;
}

.cm-zenfit .lenus-option {
	position: relative !important;
	display: block !important;
	margin: 0 0 10px !important;
	border-radius: 999px !important;
	cursor: pointer !important;
}

.cm-zenfit .lenus-option > input {
	position: absolute !important;
	opacity: 0 !important;
}

.cm-zenfit .lenus-option > span {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 12px !important;
	min-height: 56px !important;
	padding: 12px 22px !important;
	border: 1px solid var(--cm-line) !important;
	border-radius: 999px !important;
	background: var(--cm-bg) !important;
	color: var(--cm-ink) !important;
	font-size: 0.9375rem !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-align: left !important;
	transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
}

.cm-zenfit .lenus-option > span::before {
	width: 18px !important;
	height: 18px !important;
	flex: none !important;
	border: 1.5px solid #c9bfa9 !important;
	border-radius: 50% !important;
	background: #fff !important;
	content: "" !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.cm-zenfit .lenus-option:hover > span {
	border-color: var(--cm-gold) !important;
	background: #fff !important;
	box-shadow: 0 6px 16px rgba(122, 105, 56, 0.14) !important;
}

.cm-zenfit .lenus-option > input:focus-visible + span {
	outline: 3px solid var(--cm-gold-ink) !important;
	outline-offset: 2px !important;
}

.cm-zenfit .lenus-option > input:checked + span {
	border-color: transparent !important;
	background: var(--cm-gold-gradient) !important;
	box-shadow: var(--cm-shadow-gold) !important;
}

.cm-zenfit .lenus-option > input:checked + span::before {
	border-color: var(--cm-ink) !important;
	box-shadow: inset 0 0 0 4px #fff !important;
	background: var(--cm-ink) !important;
}

.cm-zenfit :is(.lenus-input-text, .lenus-select-input, .lenus-textarea textarea, .react-tel-input .form-control) {
	width: 100% !important;
	height: auto !important;
	min-height: 56px !important;
	margin-bottom: 12px !important;
	padding: 14px 18px !important;
	border: 1px solid var(--cm-line) !important;
	border-radius: 12px !important;
	background: var(--cm-bg) !important;
	box-shadow: none !important;
	color: var(--cm-ink) !important;
	font-size: 1rem !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

.cm-zenfit .lenus-textarea textarea {
	min-height: 140px !important;
}

.cm-zenfit .react-tel-input .form-control {
	padding-left: 56px !important;
}

.cm-zenfit :is(.lenus-input-text, .lenus-select-input, .lenus-textarea textarea, .react-tel-input .form-control):focus {
	border-color: var(--cm-gold) !important;
	background: #fff !important;
	box-shadow: 0 0 0 4px rgba(178, 160, 117, 0.22) !important;
	outline: none !important;
}

.cm-zenfit .react-tel-input .flag-dropdown {
	border: 0 !important;
	border-radius: 12px 0 0 12px !important;
	background: transparent !important;
}

.cm-zenfit .react-tel-input .selected-flag {
	padding-left: 18px !important;
	border-radius: 12px 0 0 12px !important;
}

.cm-zenfit .react-tel-input .special-label {
	display: none !important;
}

.cm-zenfit .lenus-form-controls {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: flex-end !important;
	gap: 12px !important;
	margin-top: 16px !important;
}

.cm-zenfit .lenus-button {
	background-origin: border-box !important;
	border-width: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
	min-height: 52px !important;
	padding: 0 28px !important;
	border: 1px solid transparent !important;
	border-radius: 999px !important;
	background: var(--cm-gold-gradient) !important;
	box-shadow: var(--cm-shadow-gold) !important;
	color: var(--cm-ink) !important;
	font-family: var(--cm-font-display) !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: box-shadow 0.25s ease, background 0.25s ease, transform 0.25s ease, opacity 0.25s ease !important;
}

.cm-zenfit .lenus-button:hover:not(:disabled),
.cm-zenfit .lenus-button:focus-visible {
	background: var(--cm-gold-gradient-hover) !important;
	box-shadow: var(--cm-shadow-gold-hover) !important;
	transform: translateY(-1px) !important;
}

.cm-zenfit .lenus-button:disabled {
	border-width: 1px !important;
	border-color: var(--cm-line) !important;
	background: var(--cm-bg) !important;
	box-shadow: none !important;
	color: #8a8274 !important;
	cursor: not-allowed !important;
}

/* A back button, when Lenus shows one, gets the light style. */
.cm-zenfit .lenus-form-controls .lenus-button:not(:last-child) {
	border-width: 1px !important;
	border-color: rgba(17, 17, 17, 0.18) !important;
	background: #fff !important;
	box-shadow: var(--cm-shadow-soft) !important;
}

/* ==========================================================================
   Text + image (Miksi CM Training, Valmentaja)
   ========================================================================== */

.cm-ti__grid {
	display: grid;
	gap: 40px;
}

.cm-ti__media img {
	width: 100%;
	height: 100%;
	max-height: 560px;
	border: 1px solid var(--cm-card-line);
	border-radius: var(--cm-radius-card);
	object-fit: cover;
	object-position: center;
}

.cm-ti__body {
	display: flex;
	flex-direction: column;
}

/* Checklist under the text (e.g. Hyvinvointiluennot) */
.cm-ti__checklist {
	gap: 14px;
	margin-top: 28px;
	font-size: 1.0625rem;
}

.cm-ti__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 36px;
}

.cm-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: 40px 0;
	padding: 0;
	list-style: none;
}

.cm-stat {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px 28px;
	border: 1px solid var(--cm-card-line);
	border-radius: 20px;
	background: #fff;
}

.cm-stat__value {
	color: var(--cm-ink);
	font-family: var(--cm-font-display);
	font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
	font-weight: 700;
	line-height: 1;
}

.cm-stat__label {
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* Coach layout */
.cm-highlights {
	margin: 0 0 32px;
	padding: 0;
	border-top: 1px solid var(--cm-line);
	list-style: none;
}

.cm-highlight {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 4px 16px;
	padding: 18px;
	border-bottom: 1px solid var(--cm-line);
}

.cm-highlight.is-featured {
	border-bottom-width: 0;
	border-radius: 14px;
	background: var(--cm-gold-gradient);
}

/* No grey rules touching the filled row: the list's top rule when it
   comes first, and the rule of the row just above it. */
.cm-highlights:has(> .is-featured:first-child) {
	border-top: 0;
}

.cm-highlight:has(+ .is-featured) {
	border-bottom-color: transparent;
}

.cm-highlight__icon {
	display: inline-grid;
	width: 48px;
	height: 48px;
	grid-row: span 2;
	place-items: center;
	border-radius: 50%;
	background: rgba(178, 160, 117, 0.12);
	color: var(--cm-gold-ink);
	font-size: 1.125rem;
}

.cm-highlight.is-featured .cm-highlight__icon {
	background: rgba(17, 17, 17, 0.12);
	color: var(--cm-ink);
}

.cm-highlight__title {
	color: var(--cm-ink);
	font-family: var(--cm-font-display);
	font-size: clamp(1rem, 0.85rem + 0.6vw, 1.25rem);
	font-weight: 600;
	line-height: 1.4;
	text-transform: uppercase;
}

.cm-highlight__meta {
	font-size: 0.9375rem;
	font-weight: 600;
}

.cm-highlight.is-featured .cm-highlight__meta {
	color: var(--cm-ink);
}

.cm-ti__columns > .cm-prose + .cm-prose {
	margin-top: 0;
}

.cm-ti__columns {
	display: grid;
	gap: 16px 36px;
	font-size: 1.0625rem;
	line-height: 1.6;
}

.cm-ti__email {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 28px 0 0;
	color: var(--cm-ink);
	font-size: 1.125rem;
	font-weight: 600;
}

.cm-ti__email .cm-icon {
	color: var(--cm-gold);
}

.cm-ti__email a {
	color: var(--cm-gold-ink);
}

@media (min-width: 768px) {
	.cm-ti__columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cm-highlight {
		grid-template-columns: auto 1fr auto;
		gap: 20px;
		padding: 10px 18px;
		min-height: 95px;
	}

	.cm-highlight__icon {
		grid-row: auto;
	}
}

@media (min-width: 1024px) {
	.cm-ti__grid {
		grid-template-columns: 520fr 700fr;
		gap: 80px;
	}

	.cm-ti--coach .cm-ti__grid {
		grid-template-columns: 460fr 760fr;
	}

	.cm-ti__media img {
		max-height: none;
	}
}

/* ==========================================================================
   Services (Yksityisille / yrityksille)
   ========================================================================== */

.cm-services__grid {
	display: grid;
	gap: 24px;
}

.cm-service {
	position: relative;
	display: flex;
	min-height: 620px;
	align-items: flex-end;
	overflow: hidden;
	border-radius: 28px;
	background: #0a0908;
	box-shadow: 0 24px 48px rgba(18, 18, 18, 0.18);
	isolation: isolate;
}

.cm-service__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.8s ease;
}

.cm-service:hover .cm-service__bg {
	transform: scale(1.03);
}

.cm-service::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(10, 9, 8, 0) 0%, rgba(10, 9, 8, 0.05) 18%, rgba(10, 9, 8, 0.55) 36%, rgba(10, 9, 8, 0.82) 52%, rgba(10, 9, 8, 0.95) 100%),
		linear-gradient(90deg, rgba(10, 9, 8, 0.55) 0%, rgba(10, 9, 8, 0.25) 45%, rgba(10, 9, 8, 0) 75%);
	content: "";
}

.cm-service__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	max-width: 636px;
	padding: clamp(24px, 4vw, 48px);
	padding-top: 200px;
	color: #f0ece4;
}

.cm-service__tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 6px 14px 6px 6px;
	border: 1px solid rgba(178, 160, 117, 0.5);
	border-radius: 999px;
	background: rgba(13, 13, 10, 0.55);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.cm-service__tag-icon {
	display: inline-grid;
	width: 28px;
	height: 28px;
	place-items: center;
	border-radius: 50%;
	background: var(--cm-gold-gradient-round);
	color: var(--cm-ink);
	font-size: 0.75rem;
	letter-spacing: 0;
}

.cm-service__title {
	margin: 0;
	color: #fff;
	font-size: clamp(1.5rem, 1rem + 1.8vw, 2.375rem);
	font-weight: 700;
	line-height: 1.25;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
	text-transform: uppercase;
}

.cm-service__text {
	max-width: 540px;
	margin: 0;
	font-size: 1.0625rem;
}

.cm-service .cm-checklist li {
	color: #fff;
}

.cm-service__foot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	width: 100%;
	max-width: 540px;
	margin-top: 10px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.cm-service__note {
	margin: 0;
	color: var(--cm-gold-soft);
	font-size: 0.9375rem;
	font-weight: 600;
}

@media (min-width: 1024px) {
	.cm-services__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cm-service {
		min-height: 880px;
	}

	/* One card (Yksityisille page): heading and lead on the left, card on
	   the right instead of a half-empty two-column grid */
	.cm-services--single .cm-container {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
		gap: clamp(48px, 6vw, 100px);
	}

	.cm-services--single .cm-section__head {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		margin-bottom: 0;
	}

	.cm-services--single .cm-services__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.cm-services--single .cm-service {
		min-height: 760px;
	}
}

/* ==========================================================================
   Features (Mitä saat etävalmennuksesta)
   ========================================================================== */

.cm-features__grid {
	display: grid;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cm-feature {
	position: relative;
	display: flex;
	min-height: 440px;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	padding: clamp(24px, 3vw, 40px);
	border: 1px solid var(--cm-card-line);
	border-radius: var(--cm-radius-card);
	background: #fff;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.cm-feature:hover {
	box-shadow: 0 24px 48px rgba(17, 17, 17, 0.1);
	transform: translateY(-4px);
}

.cm-feature--gold {
	border-color: transparent;
	background: var(--cm-gold-gradient-card);
}

.cm-feature__image {
	position: absolute;
	top: -28px;
	left: 58%;
	width: 54%;
	height: auto;
	filter: drop-shadow(-6px 18px 15px rgba(51, 38, 13, 0.35));
}

.cm-feature:nth-child(2) .cm-feature__image {
	top: -60px;
	left: 37.6%;
	width: 79.1%;
	filter: drop-shadow(-10px 18px 18px rgba(51, 41, 20, 0.22));
}

.cm-feature:nth-child(3) .cm-feature__image {
	top: -40px;
	left: 35.3%;
	width: 81.5%;
	filter: none;
}

.cm-feature__num {
	color: var(--cm-text);
	font-family: var(--cm-font-display);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 24px;
}

.cm-feature__title {
	margin: 0;
	font-size: clamp(1.125rem, 0.8rem + 0.9vw, 1.625rem);
	font-weight: 700;
	line-height: 1.25;
	text-transform: uppercase;
	hyphens: manual;
}

.cm-feature__body p {
	margin: 16px 0 0;
	font-size: 1.0625rem;
	line-height: 1.6;
}

.cm-feature--gold .cm-feature__num,
.cm-feature--gold .cm-feature__body p {
	color: rgba(17, 17, 17, 0.78);
}

/* One column: width-based images grow with the card and run into the text,
   so size them by height and keep the text below a fixed image area. */
@media (max-width: 767.98px) {
	.cm-feature.has-image {
		min-height: 0;
		padding-top: 248px;
	}

	.cm-feature__image,
	.cm-feature:nth-child(n) .cm-feature__image {
		left: auto;
		width: auto;
	}

	.cm-feature:nth-child(1) .cm-feature__image {
		top: -28px;
		right: -16px;
		height: 260px;
	}

	.cm-feature:nth-child(2) .cm-feature__image {
		top: -58px;
		right: -56px;
		height: 290px;
	}

	.cm-feature:nth-child(3) .cm-feature__image {
		top: -36px;
		right: -44px;
		height: 270px;
	}
}

@media (min-width: 768px) {
	.cm-features__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Two columns: the odd last card spans the row instead of leaving a hole */
	.cm-features__grid > :last-child:nth-child(odd) {
		grid-column: 1 / -1;
		min-height: 360px;
	}

	.cm-features__grid > :last-child:nth-child(odd) .cm-feature__num,
	.cm-features__grid > :last-child:nth-child(odd) .cm-feature__body {
		max-width: 46%;
	}

	.cm-features__grid > :last-child:nth-child(odd) .cm-feature__image {
		top: -20px;
		left: 52%;
		width: 52%;
	}
}

@media (min-width: 1024px) {
	.cm-features__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.cm-feature,
	.cm-features__grid > :last-child:nth-child(odd) {
		grid-column: auto;
		min-height: 560px;
	}

	.cm-features__grid > :last-child:nth-child(odd) .cm-feature__num,
	.cm-features__grid > :last-child:nth-child(odd) .cm-feature__body {
		max-width: none;
	}

	.cm-features__grid > :last-child:nth-child(odd) .cm-feature__image {
		top: -40px;
		left: 35.3%;
		width: 81.5%;
	}
}

/* ==========================================================================
   Steps (Näin pääset alkuun)
   ========================================================================== */

.cm-steps__list {
	display: grid;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--cm-line);
	list-style: none;
	counter-reset: none;
}

.cm-step {
	padding: 40px 0;
	border-bottom: 1px solid var(--cm-line);
}

.cm-step__num {
	display: block;
	height: 56px;
	color: var(--cm-gold);
	font-family: var(--cm-font-display);
	font-size: 3.5rem;
	font-weight: 700;
	line-height: 1;
}

.cm-step__svg {
	display: block;
	width: auto;
	height: 100%;
	overflow: visible;
}

.cm-step__svg path {
	fill: transparent;
	fill-rule: evenodd;
	stroke: url(#cm-num-grad);
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
	transition: fill 0.35s ease;
}

.cm-step:hover .cm-step__svg path {
	fill: url(#cm-num-grad);
}

@media (min-width: 1024px) {
	.cm-step__num {
		height: 69px;
	}
}

.cm-step__title {
	margin: 28px 0 0;
	font-size: clamp(1.25rem, 1rem + 0.7vw, 1.5rem);
	font-weight: 700;
	line-height: 1.5;
	text-transform: uppercase;
}

.cm-step p {
	margin: 12px 0 0;
	font-size: 1.0625rem;
}

@media (min-width: 1024px) {
	.cm-steps__list {
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
	}

	.cm-step {
		padding: 48px 40px 0;
		border-bottom: 0;
		border-left: 1px solid var(--cm-line);
	}

	.cm-step:first-child {
		padding-left: 0;
		border-left: 0;
	}

	.cm-step p {
		font-size: 1.125rem;
	}
}

/* ==========================================================================
   Pricing
   ========================================================================== */

.cm-pricing .cm-section__lead {
	color: #a6a6a6;
}

.cm-pricing__grid {
	display: grid;
	gap: 24px;
}

.cm-plan {
	display: grid;
	gap: 36px;
	padding: clamp(28px, 4vw, 48px);
	border: 1px solid transparent;
	border-radius: var(--cm-radius-card);
	background:
		linear-gradient(135deg, rgba(178, 160, 117, 0.18), rgba(178, 160, 117, 0) 60%) padding-box,
		linear-gradient(#1b1b1b, #1b1b1b) padding-box,
		var(--cm-gold-gradient) border-box;
}

.cm-plan__price {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.cm-plan__tag {
	margin: 0;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--cm-gold-gradient);
	color: var(--cm-ink);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.cm-plan__title {
	margin: 0;
	color: #fff;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.25;
	text-transform: uppercase;
}

.cm-plan__amount {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin: 0;
	font-family: var(--cm-font-display);
	font-size: clamp(3rem, 2rem + 3vw, 4.5rem);
	font-weight: 700;
	line-height: 1;
}

.cm-plan__unit {
	color: #a9a399;
	font-family: var(--louhos-font-family);
	font-size: 1.125rem;
	font-weight: 600;
}

.cm-plan__note {
	margin: 0;
	color: #a9a399;
	font-size: 0.9375rem;
}

.cm-plan__rule {
	width: 100%;
	margin: 0;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	opacity: 1;
}

.cm-plan__footnote {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--cm-gold-soft);
	font-size: 0.875rem;
	font-weight: 600;
}

.cm-plan__details {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding-top: 32px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cm-plan__label {
	margin: 0 0 14px;
	color: var(--cm-gold-soft);
	font-family: var(--louhos-font-family);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.cm-pricing__side {
	position: relative;
	display: flex;
	min-height: 460px;
	align-items: flex-end;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--cm-radius-card);
	isolation: isolate;
}

.cm-pricing__side img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.cm-pricing__side::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(13, 13, 13, 0) 30%, rgba(13, 13, 13, 0.92) 100%);
	content: "";
}

.cm-pricing__side-body {
	padding: 36px;
}

.cm-pricing__side-title {
	margin: 0 0 12px;
	color: #fff;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
	text-transform: uppercase;
}

.cm-pricing__side-body p {
	margin: 0 0 24px;
	color: #d0d0d0;
}

/* Whole card as a link: the button's link covers the card. */
.cm-pricing__side.has-link {
	transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.cm-pricing__side.has-link img {
	transition: transform 0.6s ease;
}

.cm-pricing__side.has-link::before {
	transition: opacity 0.3s ease;
}

/* No transform on the button: it would become the containing block and
   shrink the stretched ::after to the button. The card lifts instead. */
.cm-pricing__side .cm-pricing__side-link,
.cm-pricing__side .cm-pricing__side-link:hover,
.cm-pricing__side .cm-pricing__side-link:focus-visible {
	transform: none;
}

.cm-pricing__side-link::after {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	content: "";
}

.cm-pricing__side.has-link:hover,
.cm-pricing__side.has-link:focus-within {
	border-color: rgba(178, 160, 117, 0.7);
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45), 0 0 28px rgba(219, 191, 115, 0.22);
	transform: translateY(-4px);
}

.cm-pricing__side.has-link:hover img,
.cm-pricing__side.has-link:focus-within img {
	transform: scale(1.04);
}

.cm-pricing__side.has-link:hover::before {
	opacity: 0.9;
}

/* The button shows its hover state while the card is hovered */
.cm-pricing__side.has-link:hover .cm-btn--ghost {
	border-color: var(--cm-gold);
	background: rgba(178, 160, 117, 0.18);
	box-shadow: var(--cm-shadow-soft-hover);
}

/* Keyboard focus outlines the card instead of only the small button */
.cm-pricing__side.has-link:focus-within {
	outline: 2px solid var(--cm-gold);
	outline-offset: 4px;
}

.cm-pricing__side-link:focus-visible {
	outline: none;
}

@media (min-width: 768px) {
	.cm-plan {
		grid-template-columns: minmax(0, 360fr) minmax(0, 398fr);
		gap: 0;
	}

	.cm-plan__price {
		padding-right: 44px;
	}

	.cm-plan__details {
		padding: 0 0 0 44px;
		border-top: 0;
		border-left: 1px solid rgba(255, 255, 255, 0.1);
	}
}

@media (min-width: 1024px) {
	.cm-pricing__grid {
		grid-template-columns: minmax(0, 856fr) minmax(0, 420fr);
	}
}

/* ==========================================================================
   Carousel (shared: meals, testimonials, latest posts)
   ========================================================================== */

.cm-carousel {
	position: relative;
	margin-top: 48px;
}

.cm-carousel__track {
	display: flex;
	gap: 24px;
	/* The strip runs from page edge to page edge. Without JS the first
	   slide still lines up with the container. */
	margin: 0 calc(-1 * var(--cm-bleed));
	padding: 4px var(--cm-bleed) 24px;
	overflow-x: auto;
	scroll-padding-left: var(--cm-bleed);
	list-style: none;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

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

.cm-carousel__track:focus-visible {
	outline-offset: -3px;
}

/* Soft fades where the cards run off the left and right edges of the page */
.cm-carousel::before,
.cm-carousel::after {
	position: absolute;
	top: 0;
	bottom: 88px;
	z-index: 1;
	width: min(320px, 18vw);
	background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--cm-section-bg) 55%, transparent) 45%, color-mix(in srgb, var(--cm-section-bg) 92%, transparent) 80%, var(--cm-section-bg) 100%);
	content: "";
	pointer-events: none;
}

.cm-carousel::before {
	left: calc(-1 * var(--cm-bleed));
	transform: scaleX(-1);
}

.cm-carousel::after {
	right: calc(-1 * var(--cm-bleed));
}

/* Narrow screens: the fades would cover too much of a single card. */
@media (max-width: 767.98px) {
	.cm-carousel::before,
	.cm-carousel::after {
		display: none;
	}
}

.cm-carousel.is-auto .cm-carousel__track {
	padding-inline: 0;
	scroll-behavior: auto;
	scroll-snap-type: none;
}

/* Mouse drag (child.js) */
@media (hover: hover) and (pointer: fine) {
	.cm-carousel.is-auto .cm-carousel__track {
		cursor: grab;
	}
}

.cm-carousel.is-dragging .cm-carousel__track {
	cursor: grabbing;
	user-select: none;
}

.cm-carousel.is-dragging .cm-carousel__track a,
.cm-carousel.is-dragging .cm-carousel__track button {
	cursor: grabbing;
}

.cm-carousel__slide {
	flex: 0 0 min(307px, 80vw);
	scroll-snap-align: start;
}

.cm-carousel__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 8px;
}

.cm-carousel__dots {
	display: none;
	flex-wrap: wrap;
	gap: 4px;
}

.cm-carousel__dot {
	display: inline-grid;
	width: 24px;
	height: 24px;
	place-items: center;
	padding: 0;
	border: 0;
	background: none;
}

.cm-carousel__dot::before {
	width: 8px;
	height: 8px;
	border-radius: 4px;
	background: #cfc7b8;
	content: "";
	transition: width 0.3s ease, background 0.3s ease;
}

.cm-carousel__dot[aria-current="true"] {
	width: 40px;
}

.cm-carousel__dot[aria-current="true"]::before {
	width: 28px;
	background: var(--cm-gold-gradient);
}

@media (min-width: 768px) {
	.cm-carousel__dots {
		display: flex;
	}
}

.cm-carousel__arrows {
	display: flex;
	gap: 12px;
	margin-left: auto;
}

.cm-carousel__pause {
	display: inline-grid;
	width: 40px;
	height: 40px;
	place-items: center;
	border: 1px solid var(--cm-line);
	border-radius: 50%;
	background: transparent;
	color: var(--cm-ink);
	font-size: 0.8125rem;
}

/* Meal cards */
.cm-meal {
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--cm-card-line);
	border-radius: var(--cm-radius-card);
	background: #fff;
}

.cm-meal__image {
	display: block;
	width: 100%;
	aspect-ratio: 307 / 360;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.cm-meal:hover .cm-meal__image {
	transform: scale(1.04);
}

.cm-meal__body {
	position: relative;
	padding: 22px 24px 26px;
	background: #fff;
}

.cm-meal__title {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.6;
	text-transform: uppercase;
}

.cm-meal__body p {
	margin: 0;
	font-size: 0.875rem;
}

/* ==========================================================================
   Testimonials
   ========================================================================== */

.cm-quote {
	display: grid;
	overflow: hidden;
	margin: var(--cm-head-gap) 0 0;
	border: 1px solid var(--cm-card-line);
	border-radius: var(--cm-radius-card);
	background: #fff;
}

.cm-quote__media {
	position: relative;
	display: grid;
	min-height: 240px;
	place-items: center;
	background: linear-gradient(135deg, #e8e2d6 0%, #f1ede6 60%, #e3d5b8 100%);
}

.cm-quote__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cm-quote__placeholder {
	color: #6b6458;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.cm-quote__body {
	padding: clamp(28px, 5vw, 64px);
}

.cm-quote__mark {
	display: block;
	height: 58px;
	margin-bottom: 28px;
	font-family: var(--cm-font-display);
	font-size: 6rem;
	line-height: 1;
}

.cm-quote__text {
	margin: 0;
}

.cm-quote__text p {
	margin: 0;
	color: var(--cm-ink);
	font-family: var(--cm-font-display);
	font-size: clamp(1.125rem, 0.9rem + 1vw, 1.625rem);
	font-weight: 500;
	line-height: 1.46;
}

.cm-quote__cite {
	margin-top: 28px;
	font-size: 1.125rem;
}

.cm-quote__cite strong {
	color: var(--cm-ink);
}

@media (min-width: 1024px) {
	.cm-quote {
		grid-template-columns: 480fr 820fr;
		min-height: 460px;
	}
}

.cm-carousel--testimonials {
	margin-top: 24px;
}

.cm-carousel--testimonials .cm-carousel__slide {
	flex-basis: min(417px, 85vw);
}

.cm-carousel--testimonials .cm-carousel__dot::before {
	background: #e0d8c8;
}

.cm-review {
	display: flex;
	height: 100%;
	min-height: 330px;
	flex-direction: column;
	margin: 0;
	padding: 32px 36px;
	border: 1px solid var(--cm-card-line);
	border-radius: var(--cm-radius-card);
	background: linear-gradient(160deg, #fff 0%, #fff 70%, #e3d5b8 100%);
}

.cm-review__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}

.cm-review__mark {
	color: var(--cm-gold);
	font-size: 1.75rem;
}

.cm-review__stars {
	display: flex;
	gap: 3px;
	color: var(--cm-gold);
	font-size: 0.875rem;
}

.cm-review__text {
	flex: 1;
	margin: 0;
}

.cm-review__text p {
	margin: 0;
	color: var(--cm-text-strong);
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.6;
}

.cm-review__person {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--cm-line);
	font-size: 0.875rem;
}

.cm-review__person strong {
	display: block;
	color: var(--cm-ink);
	font-size: 1rem;
}

.cm-review__avatar {
	display: inline-grid;
	width: 46px;
	height: 46px;
	flex: none;
	place-items: center;
	border-radius: 50%;
	background: var(--cm-gold-gradient-round);
	color: var(--cm-ink);
	font-family: var(--cm-font-display);
	font-size: 1.125rem;
	font-weight: 700;
}

/* ==========================================================================
   Gallery
   ========================================================================== */

.cm-gallery {
	overflow: hidden;
}

.cm-gallery__watermark {
	position: absolute;
	top: 58%;
	left: 50%;
	margin: 0;
	color: #eae3d5;
	font-family: var(--cm-font-display);
	font-size: clamp(5rem, 15.6vw, 18.75rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	white-space: nowrap;
	transform: translate(-50%, -50%);
	pointer-events: none;
	user-select: none;
}

.cm-gallery .cm-container {
	position: relative;
}

.cm-gallery__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: var(--cm-head-gap) 0 0;
	padding: 0;
	list-style: none;
}

.cm-gallery__item {
	min-height: 180px;
}

.cm-gallery__item--1,
.cm-gallery__item--4 {
	grid-column: span 2;
	min-height: 260px;
}

.cm-gallery__button {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	padding: 0;
	border: 1px solid var(--cm-card-line);
	border-radius: 20px;
	background: #ddd6c8;
	text-align: left;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.cm-gallery__button img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.cm-gallery__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(246, 243, 238, 0) 35%, rgba(246, 243, 238, 0.85) 100%),
		rgba(178, 160, 117, 0.18);
	opacity: 0;
	transition: opacity 0.35s ease;
}

.cm-gallery__zoom {
	position: absolute;
	top: 50%;
	left: 50%;
	display: inline-grid;
	width: 44px;
	height: 44px;
	place-items: center;
	border-radius: 50%;
	background: var(--cm-gold-gradient-round);
	color: var(--cm-ink);
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.8);
	transition: opacity 0.35s ease, transform 0.35s ease, width 0.35s ease, height 0.35s ease;
}

.cm-gallery__caption {
	position: absolute;
	right: 20px;
	bottom: 18px;
	left: 20px;
	color: var(--cm-ink);
	font-family: var(--cm-font-display);
	font-size: 0.9375rem;
	font-weight: 600;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.cm-gallery__button:hover,
.cm-gallery__button:focus-visible {
	border-color: var(--cm-gold);
	box-shadow: 0 0 0 1px var(--cm-gold);
}

.cm-gallery__button:hover img,
.cm-gallery__button:focus-visible img {
	transform: scale(1.06);
}

.cm-gallery__button:hover :is(.cm-gallery__overlay, .cm-gallery__caption),
.cm-gallery__button:focus-visible :is(.cm-gallery__overlay, .cm-gallery__caption) {
	opacity: 1;
	transform: none;
}

.cm-gallery__button:hover .cm-gallery__zoom,
.cm-gallery__button:focus-visible .cm-gallery__zoom {
	width: 68px;
	height: 68px;
	opacity: 1;
	transform: translate(-50%, -50%);
}

@media (min-width: 1024px) {
	/* Figma grid: 528 / 307 / 417 columns, rows aligned to 0-134-378-402-512-536-780 */
	.cm-gallery__grid {
		grid-template-columns: 528fr 307fr 417fr;
		grid-template-rows: 110fr 244fr 110fr 244fr;
		gap: 24px;
		aspect-ratio: 1300 / 780;
	}

	.cm-gallery__item {
		min-height: 0;
	}

	.cm-gallery__item--1 {
		grid-column: 1;
		grid-row: 1 / 4;
		min-height: 0;
	}

	.cm-gallery__item--2 {
		grid-column: 2;
		grid-row: 2 / 4;
	}

	.cm-gallery__item--3 {
		grid-column: 3;
		grid-row: 1 / 3;
	}

	.cm-gallery__item--4 {
		grid-column: 1 / 3;
		grid-row: 4;
		min-height: 0;
	}

	.cm-gallery__item--5 {
		grid-column: 3;
		grid-row: 3 / 5;
	}
}

/* Lightbox (gallery + hero video) */
.cm-lightbox {
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 32px);
	padding: 0;
	overflow: visible;
	border: 0;
	background: transparent;
}

.cm-lightbox::backdrop {
	background: rgba(10, 9, 8, 0.88);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.cm-lightbox__body {
	display: grid;
	place-items: center;
}

/* Images at their own size, only scaled down to fit the screen. */
.cm-lightbox__body img {
	display: block;
	width: auto;
	max-width: min(100vw - 160px, 100%);
	height: auto;
	max-height: calc(100vh - 120px);
	border-radius: 20px;
}

.cm-lightbox--video {
	width: min(1100px, 100vw - 32px);
}

.cm-lightbox__body video {
	display: block;
	width: 100%;
	max-height: calc(100vh - 140px);
	border-radius: 20px;
	background: #000;
}

/* Video player: the site's own control bar below the video */
.cm-player {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	width: 100%;
	gap: 12px;
}

/* minmax(0, 1fr): the video's intrinsic width must not widen the dialog */
.cm-lightbox--video .cm-lightbox__body {
	grid-template-columns: minmax(0, 1fr);
}

.cm-player__video {
	cursor: pointer;
}

.cm-player__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px 8px 8px;
	border: 1px solid rgba(178, 160, 117, 0.35);
	border-radius: 999px;
	background: rgba(20, 20, 20, 0.92);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
	color: #fff;
}

.cm-player__btn {
	display: inline-grid;
	flex: none;
	width: 40px;
	height: 40px;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	transition: background 0.2s ease, color 0.2s ease;
}

.cm-player__btn .cm-icon {
	width: 20px;
	height: 20px;
	stroke: currentColor;
}

.cm-player__btn:hover,
.cm-player__btn:focus-visible {
	background: rgba(255, 255, 255, 0.1);
	color: var(--cm-gold-pale);
}

.cm-player__btn--play {
	width: 44px;
	height: 44px;
	background: var(--cm-gold-gradient-round);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
	color: var(--cm-ink);
}

.cm-player__btn--play:hover,
.cm-player__btn--play:focus-visible {
	background: var(--cm-gold-gradient-round-hover);
	color: var(--cm-ink);
}

.cm-player__btn--play .cm-icon {
	width: 18px;
	height: 18px;
}

.cm-player__btn:focus-visible,
.cm-player__seek:focus-visible,
.cm-player__volume:focus-visible {
	outline: 2px solid var(--cm-gold);
	outline-offset: 2px;
}

.cm-player__time {
	flex: none;
	min-width: 3.2em;
	color: #e8e2d6;
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

/* Range inputs: gold fill up to the value (--cm-fill set in child.js) */
.cm-player__seek,
.cm-player__volume {
	--cm-fill: 0%;
	height: 20px;
	margin: 0;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.cm-player__seek {
	flex: 1 1 auto;
	min-width: 60px;
}

.cm-player__volume {
	display: none;
	flex: 0 0 80px;
}

.cm-player__seek::-webkit-slider-runnable-track,
.cm-player__volume::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--cm-gold-soft) var(--cm-fill), rgba(255, 255, 255, 0.22) var(--cm-fill));
}

.cm-player__seek::-moz-range-track,
.cm-player__volume::-moz-range-track {
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--cm-gold-soft) var(--cm-fill), rgba(255, 255, 255, 0.22) var(--cm-fill));
}

.cm-player__seek::-webkit-slider-thumb,
.cm-player__volume::-webkit-slider-thumb {
	width: 14px;
	height: 14px;
	margin-top: -5px;
	border: 0;
	border-radius: 50%;
	background: var(--cm-gold-pale);
	box-shadow: 0 0 0 3px rgba(232, 219, 174, 0.25);
	-webkit-appearance: none;
	appearance: none;
}

.cm-player__seek::-moz-range-thumb,
.cm-player__volume::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border: 0;
	border-radius: 50%;
	background: var(--cm-gold-pale);
	box-shadow: 0 0 0 3px rgba(232, 219, 174, 0.25);
}

/* Fullscreen: video fills the screen, bar floats at the bottom */
.cm-player:fullscreen {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 24px;
	background: #000;
}

.cm-player:fullscreen .cm-player__video {
	flex: 1 1 auto;
	min-height: 0;
	max-height: none;
	border-radius: 0;
	object-fit: contain;
}

/* Smallest phones: tighter bar and no duration, so the seek bar keeps room */
@media (max-width: 359px) {
	.cm-player__bar {
		gap: 6px;
		padding-right: 10px;
	}

	.cm-player__seek ~ .cm-player__time {
		display: none;
	}
}

@media (min-width: 768px) {
	.cm-player__bar {
		gap: 12px;
		padding-right: 18px;
	}

	.cm-player__volume {
		display: block;
	}
}

.cm-lightbox__caption {
	margin: 14px 0 0;
	color: #e8e2d6;
	font-size: 0.9375rem;
	text-align: center;
}

.cm-lightbox__close {
	position: fixed;
	top: 16px;
	right: 16px;
	z-index: 1;
	display: inline-grid;
	width: 48px;
	height: 48px;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: var(--cm-gold-gradient-round);
	color: var(--cm-ink);
}

.cm-lightbox__nav {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
}

.cm-lightbox__nav:not(.cm-arrow--gold) {
	border-color: transparent;
	background: rgba(255, 255, 255, 0.92);
}

.cm-lightbox__nav[hidden] {
	display: none;
}

.cm-lightbox__nav--prev {
	left: 16px;
}

.cm-lightbox__nav--next {
	right: 16px;
}

@media (min-width: 768px) {
	.cm-lightbox__nav--prev {
		left: 32px;
	}

	.cm-lightbox__nav--next {
		right: 32px;
	}
}

/* ==========================================================================
   Contact
   ========================================================================== */

.cm-contact__grid {
	display: grid;
	gap: 48px;
}

.cm-contact__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.cm-contact__text {
	margin-top: 28px;
}

.cm-contact__badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 40px 0 20px;
	padding: 8px 16px 8px 8px;
	border-radius: 999px;
	background: rgba(178, 160, 117, 0.18);
	color: var(--cm-ink);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
}

.cm-contact__badge > span {
	display: inline-grid;
	width: 28px;
	height: 28px;
	flex: none;
	place-items: center;
	border-radius: 50%;
	background: var(--cm-gold-gradient-round);
	font-size: 0.8125rem;
}

.cm-channels {
	display: grid;
	gap: 10px;
	width: 100%;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.cm-channel {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	border: 1px solid var(--cm-card-line);
	border-radius: 16px;
	background: #fff;
	color: var(--cm-text);
	font-size: 0.875rem;
	text-decoration: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

a.cm-channel:hover,
a.cm-channel:focus-visible {
	border-color: var(--cm-gold);
	box-shadow: 0 8px 20px rgba(122, 105, 56, 0.14);
	color: var(--cm-text);
	transform: translateX(4px);
}

.cm-channel strong {
	display: block;
	color: var(--cm-ink);
	font-size: 1rem;
}

.cm-channel__accent {
	color: var(--cm-gold-ink);
	overflow-wrap: anywhere;
}

.cm-channel__icon {
	display: inline-grid;
	width: 44px;
	height: 44px;
	flex: none;
	place-items: center;
	border-radius: 50%;
	background: var(--cm-ink);
	color: var(--cm-gold-pale);
	font-size: 1.0625rem;
}

/* Form */
.cm-form {
	display: grid;
	align-content: start;
	gap: 20px 24px;
	padding: clamp(24px, 4vw, 48px);
	border: 1px solid var(--cm-card-line);
	border-radius: var(--cm-radius-card);
	background: #fff;
}

.cm-form__field {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cm-form__field label {
	color: var(--cm-ink);
	font-size: 0.875rem;
	font-weight: 600;
}

.cm-input-wrap {
	position: relative;
	display: block;
}

.cm-input-wrap > .cm-icon {
	position: absolute;
	top: 50%;
	left: 18px;
	color: var(--cm-gold-ink);
	transform: translateY(-50%);
	pointer-events: none;
}

.cm-input-wrap .cm-input {
	padding-left: 46px;
}

.cm-input {
	width: 100%;
	min-height: 56px;
	padding: 14px 18px;
	border: 1px solid var(--cm-line);
	border-radius: 12px;
	background: var(--cm-bg);
	color: var(--cm-ink);
	font: inherit;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.cm-input::placeholder {
	color: #7a7366;
}

.cm-input:focus {
	border-color: var(--cm-gold);
	background: #fff;
	box-shadow: 0 0 0 4px rgba(178, 160, 117, 0.22);
	outline: none;
}

.cm-input[aria-invalid="true"] {
	border-color: #b3261e;
}

textarea.cm-input {
	min-height: 150px;
	resize: vertical;
}

/* Select: native list, own chevron (the sprite's right chevron turned down) */
.cm-select-wrap {
	position: relative;
	display: block;
}

.cm-select {
	padding-right: 48px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.cm-select-wrap > .cm-icon {
	position: absolute;
	top: 50%;
	right: 18px;
	width: 18px;
	height: 18px;
	color: var(--cm-gold-ink);
	stroke: currentColor;
	transform: translateY(-50%) rotate(90deg);
	pointer-events: none;
}

.cm-form__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.cm-form__privacy {
	max-width: 24rem;
	margin: 0;
	font-size: 0.875rem;
}

.cm-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cm-form__notice {
	padding: 14px 18px;
	border-radius: 12px;
	font-weight: 600;
}

.cm-form__notice--ok {
	background: #eaf3e6;
	color: #24481b;
}

.cm-form__notice--error {
	background: #fbe9e7;
	color: #8a1c13;
}

@media (min-width: 768px) {
	.cm-form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cm-form__field--full,
	.cm-form__foot,
	.cm-form__notice {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1024px) {
	.cm-contact__grid {
		grid-template-columns: 480fr 720fr;
		align-items: start;
		gap: 100px;
	}
}

/* ==========================================================================
   Blog: latest posts, index, single
   ========================================================================== */

.cm-latest .cm-carousel__slide {
	flex-basis: min(417px, 85vw);
}

.cm-post-card {
	position: relative;
	display: flex;
	height: 100%;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--cm-card-line);
	border-radius: var(--cm-radius-card);
	background: #fff;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.cm-post-card:hover,
.cm-post-card:focus-within {
	box-shadow: 0 24px 48px rgba(17, 17, 17, 0.1);
	transform: translateY(-4px);
}

.cm-post-card__media {
	aspect-ratio: 415 / 260;
	overflow: hidden;
	background: var(--cm-bg-sand);
}

.cm-post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Portrait thumbnails: keep heads in the landscape crop */
	object-position: 50% 15%;
	transition: transform 0.6s ease;
}

.cm-post-card:hover .cm-post-card__media img {
	transform: scale(1.05);
}

.cm-post-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 14px;
	padding: 28px 32px 32px;
}

.cm-post-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 0.875rem;
}

.cm-post-card__cat {
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(178, 160, 117, 0.18);
	color: var(--cm-ink);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-decoration: none;
	text-transform: uppercase;
}

.cm-post-card__title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.35;
	text-transform: uppercase;
}

.cm-post-card__title a {
	color: var(--cm-ink);
	text-decoration: none;
}

.cm-post-card__title a:focus-visible {
	outline: none;
}

.cm-post-card:has(.cm-post-card__title a:focus-visible) {
	outline: 3px solid var(--cm-gold-ink);
	outline-offset: 3px;
}

.cm-post-card__excerpt {
	flex: 1;
	margin: 0;
}

.cm-post-card__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--cm-gold-ink);
	font-size: 0.9375rem;
	font-weight: 700;
}

.cm-post-card__more .cm-icon {
	transition: transform 0.25s ease;
}

.cm-post-card:hover .cm-post-card__more .cm-icon {
	transform: translateX(4px);
}

@media (min-width: 1024px) {
	.cm-post-card__title {
		font-size: 1.25rem;
	}
}

.cm-blog__filter ul,
.cm-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cm-blog__filter {
	margin-bottom: 40px;
}

.cm-blog__grid {
	display: grid;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cm-pagination {
	margin-top: 48px;
}

/* In-place filtering (child.js): dim while loading, cards rise in after */
.cm-blog .cm-blog__grid,
.cm-blog .cm-pagination {
	transition: opacity 0.25s ease;
}

.cm-blog.is-loading .cm-blog__grid,
.cm-blog.is-loading .cm-pagination {
	opacity: 0.35;
	pointer-events: none;
}

.cm-blog.is-swapped .cm-blog__grid > li {
	animation: cm-card-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: calc(var(--i, 0) * 0.05s);
}

@keyframes cm-card-in {
	from {
		opacity: 0;
		transform: translateY(16px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cm-blog.is-swapped .cm-blog__grid > li {
		animation: none;
	}
}

@media (min-width: 768px) {
	.cm-blog__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.cm-blog__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   Blog post (single.twig)
   -------------------------------------------------------------------------- */

/* Reading progress: a gold bar driven by the page scroll timeline. */
.cm-read-progress {
	display: none;
}

@supports (animation-timeline: scroll()) {
	.cm-read-progress {
		position: fixed;
		z-index: 1100;
		inset: 0 0 auto;
		display: block;
		height: 3px;
		background: var(--cm-gold-gradient);
		transform: scaleX(0);
		transform-origin: 0 50%;
		animation: cm-read-progress linear both;
		animation-timeline: scroll(root);
	}

	@keyframes cm-read-progress {
		to {
			transform: scaleX(1);
		}
	}
}

.cm-article__crumbs {
	margin-bottom: 20px;
}

.cm-article__crumbs a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--cm-text-strong);
	font-size: 0.875rem;
	font-weight: 700;
	text-decoration: none;
}

.cm-article__crumbs .cm-icon {
	width: 14px;
	height: 14px;
	transition: transform 0.25s ease;
}

.cm-article__crumbs a:hover .cm-icon,
.cm-article__crumbs a:focus-visible .cm-icon {
	transform: translateX(-3px);
}

.cm-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	margin: 0 0 20px;
	color: var(--cm-text-strong);
	font-size: 0.875rem;
	font-weight: 600;
}

.cm-article__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.cm-article__meta-item .cm-icon {
	width: 15px;
	height: 15px;
	color: var(--cm-gold-ink);
}

.cm-article__hero .cm-heading--article {
	max-width: 22ch;
	font-size: clamp(1.5rem, 0.9rem + 2.6vw, 3rem);
	line-height: 1.2;
	overflow-wrap: break-word;
	hyphens: auto;
}

.cm-article__lead {
	max-width: 34rem;
	margin-top: 20px;
}

.cm-article__byline {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 28px;
}

.cm-article__avatar {
	width: 52px;
	height: 52px;
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--cm-gold), 0 6px 16px rgba(17, 17, 17, 0.15);
	object-fit: cover;
	object-position: 50% 20%;
}

.cm-article__byline p {
	display: flex;
	flex-direction: column;
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.4;
}

.cm-article__byline strong {
	color: var(--cm-ink);
	font-size: 1rem;
}

.cm-article__layout {
	display: grid;
	gap: 48px;
	padding-block: 40px var(--cm-section-y);
}

.cm-article__content {
	min-width: 0;
	max-width: 46rem;
}

/* Article typography: gold-ruled headings, gold bullets, quote card. */
.cm-article__content > * + h2,
.cm-article__content > * + h3 {
	margin-top: 2.75rem;
}

.cm-article__content h2,
.cm-page-text h2,
.cm-article__content h3,
.cm-page-text h3 {
	margin-top: 2.5rem;
	color: var(--cm-ink);
	font-family: var(--cm-font-display);
	font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	font-weight: 600;
	line-height: 1.3;
	text-transform: uppercase;
}

.cm-article__content h2::before {
	display: block;
	width: 40px;
	height: 3px;
	margin-bottom: 16px;
	border-radius: 2px;
	background: var(--cm-gold-gradient);
	content: "";
}

.cm-article__content h3 {
	font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem);
}

.cm-article__content > p:first-child {
	color: var(--cm-text-strong);
	font-size: 1.1875rem;
	line-height: 1.6;
}

.cm-article__content ul {
	padding-left: 0;
	list-style: none;
}

.cm-article__content ul li {
	position: relative;
	padding-left: 28px;
}

.cm-article__content ul li + li,
.cm-article__content ol li + li {
	margin-top: 0.5rem;
}

.cm-article__content ul li::before {
	position: absolute;
	top: 0.62em;
	left: 4px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--cm-gold-gradient-round);
	content: "";
}

.cm-article__content ol li::marker {
	color: var(--cm-gold-ink);
	font-weight: 700;
}

.cm-article__content blockquote {
	position: relative;
	margin: 2.5rem 0;
	padding: 28px 28px 28px 32px;
	border-left: 4px solid var(--cm-gold);
	border-radius: 0 var(--cm-radius-card) var(--cm-radius-card) 0;
	background: var(--cm-bg-sand);
	color: var(--cm-ink);
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.55;
}

.cm-article__content blockquote p {
	margin: 0;
}

.cm-article__content blockquote cite {
	display: block;
	margin-top: 12px;
	color: var(--cm-gold-ink);
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 700;
}

.cm-article__content a:not(.cm-btn) {
	color: var(--cm-gold-ink);
	font-weight: 600;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.cm-article__content figure,
.cm-article__content .wp-block-image {
	margin: 2.5rem 0;
}

.cm-article__content img {
	height: auto;
	border-radius: var(--cm-radius-card);
}

.cm-article__content figcaption {
	margin-top: 10px;
	font-size: 0.875rem;
	text-align: center;
}

/* Aside: author card + share links. */
.cm-article__aside {
	display: grid;
	align-content: start;
	gap: 20px;
}

.cm-author-card {
	overflow: hidden;
	border: 1px solid var(--cm-card-line);
	border-radius: var(--cm-radius-card);
	background: #fff;
}

.cm-author-card__media img {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
	object-position: 50% 18%;
}

.cm-author-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 24px;
}

.cm-author-card__name {
	margin: 0;
	color: var(--cm-ink);
	font-family: var(--cm-font-display);
	font-size: 1.25rem;
	font-weight: 600;
	text-transform: uppercase;
}

.cm-author-card__text {
	margin: 0 0 8px;
	font-size: 0.9375rem;
	line-height: 1.55;
}

.cm-author-card__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--cm-ink);
	font-size: 0.875rem;
	font-weight: 700;
	text-decoration: none;
}

.cm-author-card__more .cm-icon {
	width: 14px;
	height: 14px;
	color: var(--cm-gold-ink);
	transition: transform 0.25s ease;
}

.cm-author-card__more:hover .cm-icon,
.cm-author-card__more:focus-visible .cm-icon {
	transform: translateX(3px);
}

.cm-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px;
	border-radius: var(--cm-radius-card);
	background: var(--cm-dark);
}

.cm-share__title {
	margin: 0;
	color: #fff;
	font-size: 0.875rem;
	font-weight: 700;
}

.cm-share__list {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cm-share__link {
	display: inline-grid;
	width: 40px;
	height: 40px;
	place-items: center;
	border: 1px solid rgba(178, 160, 117, 0.6);
	border-radius: 50%;
	color: #fff;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.cm-share__link:hover,
.cm-share__link:focus-visible {
	border-color: transparent;
	background: var(--cm-gold-gradient-round);
	color: var(--cm-ink);
}

.cm-article__related {
	--cm-section-bg: var(--cm-bg-sand);
	background: var(--cm-bg-sand);
}

@media (min-width: 768px) and (max-width: 1023px) {
	.cm-author-card {
		display: grid;
		grid-template-columns: 40% minmax(0, 1fr);
	}

	.cm-author-card__media {
		position: relative;
		min-height: 240px;
	}

	.cm-author-card__media img {
		position: absolute;
		inset: 0;
		height: 100%;
	}
}

@media (min-width: 768px) {

	.cm-article__related-head {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}
}

@media (min-width: 1024px) {
	.cm-article__layout {
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: clamp(48px, 6vw, 96px);
		padding-top: 56px;
	}

	.cm-article__aside {
		position: sticky;
		top: 140px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cm-read-progress {
		display: none;
	}
}

.cm-page-text {
	max-width: 52rem;
	padding-block: 48px var(--cm-section-y);
}

/* ==========================================================================
   FAQ (accordion override)
   ========================================================================== */

.cm-faq__grid {
	display: grid;
	gap: 40px;
}

.cm-faq__list {
	border-top: 1px solid var(--cm-line);
}

.cm-faq__item {
	border-bottom: 1px solid var(--cm-line);
}

.cm-faq__q {
	margin: 0;
}

.cm-faq__button {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 24px 0;
	border: 0;
	background: none;
	color: var(--cm-ink);
	text-align: left;
}

.cm-faq__num {
	flex: none;
	width: 28px;
	color: var(--cm-gold-ink);
	font-family: var(--louhos-font-family);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

/* Body face in sentence case: uppercase Unbounded was hard to read in
   full-sentence questions. */
.cm-faq__question {
	flex: 1;
	font-family: var(--louhos-font-family);
	font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.375rem);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.01em;
	overflow-wrap: break-word;
}

.cm-faq__icon {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 40px;
	flex: none;
	border: 1px solid var(--cm-line);
	border-radius: 50%;
	transition: background 0.25s ease, border-color 0.25s ease;
}

.cm-faq__icon::before,
.cm-faq__icon::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 2px;
	border-radius: 2px;
	background: var(--cm-ink);
	content: "";
	transform: translate(-50%, -50%);
	transition: transform 0.25s ease;
}

.cm-faq__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.cm-faq__button:not(.collapsed) .cm-faq__icon {
	border-color: transparent;
	background: var(--cm-gold-gradient);
}

.cm-faq__button:not(.collapsed) .cm-faq__icon::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

.cm-faq__button:hover .cm-faq__icon,
.cm-faq__button:focus-visible .cm-faq__icon {
	border-color: var(--cm-gold);
}

.cm-faq__answer {
	padding: 0 0 28px 44px;
	font-size: 1rem;
}

.cm-faq__side {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	align-self: start;
	padding: 40px;
	border: 1px solid var(--cm-card-line);
	border-radius: var(--cm-radius-card);
	background: #fff;
}

.cm-faq__side-title {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
	text-transform: uppercase;
}

.cm-faq__side p {
	margin: 0;
}

.cm-facts {
	width: 100%;
	margin: 0;
}

.cm-facts__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--cm-line);
	font-size: 0.9375rem;
}

.cm-facts dt {
	font-weight: 400;
}

.cm-facts dd {
	margin: 0;
	color: var(--cm-ink);
	font-weight: 700;
	text-align: right;
}

@media (min-width: 768px) {
	.cm-faq__button {
		gap: 28px;
		padding: 28px 0;
	}

	.cm-faq__answer {
		padding: 0 68px 28px 56px;
	}
}

@media (min-width: 1024px) {
	.cm-faq__grid {
		grid-template-columns: 840fr 400fr;
		gap: 60px;
	}

	.cm-faq__grid--single {
		grid-template-columns: 1fr;
	}

	.cm-faq__side {
		position: sticky;
		top: 112px;
	}
}

/* ==========================================================================
   Footer + floating CTA
   ========================================================================== */

.cm-footer {
	position: relative;
	overflow: hidden;
	padding-top: clamp(64px, 6vw, 110px);
	border-top: 1px solid var(--cm-gold);
	background: #111;
	color: #a6a6a6;
	font-size: 0.9375rem;
}

.cm-footer__glow {
	position: absolute;
	top: 45%;
	left: 50%;
	width: min(1100px, 90vw);
	height: 420px;
	border-radius: 50%;
	background: rgba(178, 160, 117, 0.18);
	filter: blur(200px);
	transform: translateX(-50%);
	pointer-events: none;
}

.cm-footer__inner {
	position: relative;
}

.cm-footer__grid {
	display: grid;
	gap: 40px;
}

.cm-footer__brand img {
	width: 145px;
	height: auto;
}

.cm-footer__brand p {
	max-width: 340px;
	margin: 24px 0 0;
	line-height: 1.6;
}

.cm-footer__heading {
	margin: 0;
	color: var(--cm-gold);
	font-family: var(--louhos-font-family);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.cm-footer__list {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 20px 0 0;
	list-style: none;
}

.cm-footer__list li,
.cm-footer__list a {
	display: flex;
	align-items: center;
	gap: 10px;
}

.cm-footer a {
	color: #a6a6a6;
	text-decoration: none;
}

.cm-footer a:hover,
.cm-footer a:focus-visible {
	color: #fff;
}

.cm-footer .cm-footer__accent {
	color: var(--cm-gold);
}

.cm-footer__wordmark {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.24em;
	margin: clamp(48px, 5vw, 90px) 0 0;
	color: #fff;
	font-family: var(--cm-font-display);
	font-size: clamp(1.5rem, 8.2vw, 10.5rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	white-space: nowrap;
}

.cm-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	margin-top: clamp(40px, 4vw, 60px);
	/* Room at the bottom for the fixed cookie and call buttons (16px + 58px
	   tall on phones, 24px + 66px from 768px), so they never cover the text */
	padding: 32px 0 96px;
	border-top: 1px solid #2a2a2a;
	font-size: 0.75rem;
}

@media (min-width: 768px) {
	.cm-footer__bottom {
		padding-bottom: 112px;
	}
}

.cm-footer__bottom p {
	margin: 0;
}

.cm-footer__bottom a {
	color: var(--cm-gold);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cm-footer__sep {
	margin-inline: 8px;
	color: #5a564f;
}

@media (min-width: 768px) {
	.cm-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.cm-footer__grid {
		grid-template-columns: 368fr 263fr 263fr 263fr;
		justify-content: space-between;
		gap: 48px;
	}
}

/* Floating consultation button */
.cm-float {
	position: fixed;
	/* % of the viewport without the scrollbar, unlike 100vw */
	right: calc(max(0px, (100% - var(--cm-page-max)) / 2) + 16px);
	bottom: 16px;
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 6px 6px 6px 18px;
	border: 1px solid rgba(178, 160, 117, 0.5);
	border-radius: 999px;
	background: #111;
	box-shadow: 0 16px 36px rgba(17, 17, 17, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
	color: #fff;
	text-decoration: none;
	transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
}

.cm-float:hover,
.cm-float:focus-visible {
	box-shadow: 0 20px 44px rgba(17, 17, 17, 0.36), 0 0 22px rgba(219, 191, 115, 0.35);
	color: #fff;
	transform: translateY(-2px);
}

.cm-float.is-hidden {
	opacity: 0;
	transform: translateY(16px);
	pointer-events: none;
}

.cm-float__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	line-height: 1.2;
}

.cm-float__text strong {
	font-family: var(--cm-font-display);
	font-size: 0.8125rem;
	font-weight: 600;
}

.cm-float__text span {
	display: none;
	color: var(--cm-gold-soft);
	font-size: 0.75rem;
	font-weight: 600;
}

.cm-float__icon {
	display: inline-grid;
	width: 44px;
	height: 44px;
	place-items: center;
	border-radius: 50%;
	background: var(--cm-gold-gradient-round);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
	color: var(--cm-ink);
}

@media (min-width: 768px) {
	.cm-float {
		right: calc(max(0px, (100% - var(--cm-page-max)) / 2) + 24px);
		bottom: 24px;
		gap: 14px;
		padding: 8px 8px 8px 22px;
	}

	.cm-float__text strong {
		font-size: 0.875rem;
	}

	.cm-float__text span {
		display: block;
	}

	.cm-float__icon {
		width: 48px;
		height: 48px;
	}
}

/* ==========================================================================
   Cookie consent (Complianz)
   Complianz injects its banner CSS after this file, so selectors start from
   the container ids to win, and its variables are redefined on the
   containers rather than on :root.
   ========================================================================== */

#cmplz-cookiebanner-container .cmplz-cookiebanner,
#cmplz-manage-consent {
	--cmplz_banner_background_color: #fff;
	--cmplz_banner_border_color: var(--cm-line);
	--cmplz_text_color: var(--cm-text);
	--cmplz_hyperlink_color: var(--cm-gold-ink);
	--cmplz_slider_active_color: var(--cm-gold-ink);
	--cmplz_slider_inactive_color: #cfc6b4;
	--cmplz_slider_bullet_color: #fff;
	--cmplz_category_header_always_active_color: var(--cm-gold-ink);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner {
	right: 12px;
	bottom: 12px;
	left: 12px;
	width: auto;
	min-width: 0;
	max-height: calc(100dvh - 24px);
	padding: 22px 20px 18px;
	border: 1px solid var(--cm-line);
	border-radius: var(--cm-radius-card);
	background: #fff;
	box-shadow: 0 24px 60px rgba(17, 17, 17, 0.2), 0 4px 12px rgba(17, 17, 17, 0.08);
	font-family: var(--louhos-font-family);
	row-gap: 14px;
	animation: cm-consent-in 0.4s ease both;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show:hover {
	box-shadow: 0 24px 60px rgba(17, 17, 17, 0.2), 0 4px 12px rgba(17, 17, 17, 0.08);
}

@keyframes cm-consent-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-divider,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-logo {
	display: none;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header {
	grid-template-columns: 1fr auto;
	gap: 12px;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title {
	display: flex;
	align-items: center;
	gap: 10px;
	grid-column-start: 1;
	justify-self: start;
	color: var(--cm-ink);
	font-family: var(--cm-font-display);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
}

/* Gold cookie badge before the title, same icon as the manage consent button */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title::before {
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background:
		var(--cm-cookie-icon) center / 18px no-repeat,
		var(--cm-gold-gradient-round);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
	content: "";
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close {
	display: inline-grid;
	grid-column-start: 2;
	width: 36px;
	height: 36px;
	place-items: center;
	border-radius: 50%;
	background: var(--cm-bg-sand);
	color: var(--cm-ink);
	transition: background 0.2s ease;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close:focus-visible {
	background: var(--cm-gold-pale);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close svg {
	width: 14px;
	height: 14px;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body {
	min-width: 0;
	max-height: 50vh;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories {
	width: auto;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message {
	margin: 0;
	color: var(--cm-text);
	font-size: 0.875rem;
	line-height: 1.6;
}

/* Categories ("Muokkaa valintoja") */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories {
	margin-top: 14px;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category {
	border: 1px solid var(--cm-line);
	border-radius: 14px;
	background: var(--cm-bg);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category:not(:last-child) {
	margin-bottom: 8px;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category .cmplz-category-header {
	padding: 12px 14px;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category .cmplz-category-title {
	color: var(--cm-ink);
	font-size: 0.875rem;
	font-weight: 700;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category .cmplz-always-active {
	font-size: 0.75rem;
	font-weight: 700;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category .cmplz-icon.cmplz-open {
	display: inline-grid;
	place-items: center;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category .cmplz-icon.cmplz-open svg {
	fill: var(--cm-gold-ink);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category .cmplz-description {
	padding: 0 14px 14px;
	font-size: 0.8125rem;
	line-height: 1.55;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked + .cmplz-label::before {
	background: var(--cm-gold-gradient-round);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:focus-visible + .cmplz-label::before {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--cm-gold-ink);
}

/* Buttons: accept and deny side by side with equal weight, settings below */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
	flex-flow: row wrap;
	gap: 8px;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
	flex: 1 1 100%;
	width: auto;
	height: auto;
	min-height: 46px;
	padding: 10px 16px;
	border: 1px solid rgba(17, 17, 17, 0.18);
	border-radius: 999px;
	background: #fff;
	box-shadow: none;
	color: var(--cm-ink);
	font-family: var(--cm-font-display);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.3;
	white-space: normal;
	transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:focus-visible {
	border-color: var(--cm-gold);
	background: var(--cm-bg);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept {
	border-width: 0;
	padding-block: 11px;
	background: var(--cm-gold-gradient);
	box-shadow: 0 6px 16px rgba(122, 104, 56, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 3px rgba(92, 77, 40, 0.25);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:focus-visible {
	background: var(--cm-gold-gradient-hover);
	box-shadow: 0 10px 24px rgba(122, 104, 56, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 3px rgba(92, 77, 40, 0.25);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-view-preferences,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-save-preferences {
	flex-basis: 100%;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn:focus-visible,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close:focus-visible,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-link:focus-visible {
	outline: 2px solid var(--cm-gold-ink);
	outline-offset: 2px;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links ul {
	gap: 18px;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links .cmplz-link {
	color: var(--cm-gold-ink);
	font-size: 0.75rem;
	font-weight: 600;
	text-underline-offset: 3px;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links .cmplz-link:hover {
	color: var(--cm-ink);
}

/* Manage consent: a round cookie button, always visible bottom left, that
   opens to show its label on hover and keyboard focus. */
#cmplz-manage-consent button.cmplz-manage-consent {
	left: calc(max(0px, (100% - var(--cm-page-max)) / 2) + 16px);
	right: auto;
	bottom: 16px;
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	max-width: 44px;
	height: 44px;
	padding: 0 16px 0 0;
	overflow: hidden;
	border: 1px solid rgba(178, 160, 117, 0.5);
	border-radius: 999px;
	background: #111;
	box-shadow: 0 12px 28px rgba(17, 17, 17, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.18);
	color: #fff;
	font-family: var(--cm-font-display);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	animation: none;
	transition: max-width 0.35s ease, box-shadow 0.3s ease;
}

#cmplz-manage-consent button.cmplz-manage-consent::before {
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background:
		var(--cm-cookie-icon) center / 20px no-repeat,
		var(--cm-gold-gradient-round);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
	content: "";
}

#cmplz-manage-consent button.cmplz-manage-consent:hover,
#cmplz-manage-consent button.cmplz-manage-consent:focus-visible {
	max-width: 240px;
	border-color: rgba(178, 160, 117, 0.5);
	box-shadow: 0 16px 36px rgba(17, 17, 17, 0.32), 0 0 22px rgba(219, 191, 115, 0.35);
	animation: none;
}

#cmplz-manage-consent button.cmplz-manage-consent:focus-visible {
	outline: 2px solid var(--cm-gold);
	outline-offset: 3px;
}

/* Hidden while the banner itself is open */
#cmplz-manage-consent button.cmplz-manage-consent.cmplz-dismissed {
	display: none;
}

:root {
	/* Lucide "cookie", ink stroke */
	--cm-cookie-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5'/%3E%3Cpath d='M8.5 8.5v.01M16 15.5v.01M12 12v.01M11 17v.01M7 14v.01'/%3E%3C/svg%3E");
}

@media (min-width: 768px) {
	#cmplz-cookiebanner-container .cmplz-cookiebanner {
		right: auto;
		bottom: 24px;
		left: calc(max(0px, (100% - var(--cm-page-max)) / 2) + 24px);
		width: 480px;
		max-width: calc(100% - 48px);
		padding: 26px 24px 20px;
	}

	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message,
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories {
		width: auto;
	}

	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
		flex-direction: row;
	}

	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
		flex-basis: 140px;
		white-space: nowrap;
	}

	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-view-preferences,
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-save-preferences {
		flex-basis: 100%;
	}

	#cmplz-manage-consent button.cmplz-manage-consent {
		left: calc(max(0px, (100% - var(--cm-page-max)) / 2) + 24px);
		bottom: 24px;
		max-width: 50px;
		height: 50px;
	}

	#cmplz-manage-consent button.cmplz-manage-consent::before {
		width: 48px;
		height: 48px;
	}
}

/* Complianz documents (Evästeseloste, Tietosuojaseloste): page.twig gives
   them a plain layout, title and the document on a white card. */
.entry-content > .cm-legal {
	max-width: none;
	margin-inline: 0;
}

.cm-legal {
	padding-block: 172px var(--cm-section-y);
	background:
		radial-gradient(60% 40% at 0% 0%, rgba(178, 160, 117, 0.16), transparent 70%),
		var(--cm-bg);
}

@media (min-width: 1024px) {
	.cm-legal {
		padding-top: 210px;
	}
}

.cm-legal__title.cm-heading {
	margin-bottom: clamp(24px, 3vw, 40px);
	font-size: clamp(1.25rem, 0.6rem + 3vw, 3rem);
}

.cm-legal__card {
	max-width: 920px;
	padding: clamp(22px, 5vw, 56px);
	border: 1px solid var(--cm-line);
	border-radius: var(--cm-radius-card);
	background: #fff;
	box-shadow: 0 24px 48px rgba(122, 105, 56, 0.08);
}

#cmplz-document {
	max-width: none;
	color: var(--cm-text);
	font-size: 1rem;
	line-height: 1.7;
	overflow-wrap: break-word;
}

#cmplz-document > :first-child {
	margin-top: 0;
}

#cmplz-document p,
#cmplz-document li,
#cmplz-document span {
	font-size: inherit;
}

#cmplz-document ul {
	padding-left: 1.2em;
}

#cmplz-document li::marker {
	color: var(--cm-gold);
}

#cmplz-document h2 {
	margin: 2em 0 0.6em;
	color: var(--cm-ink);
	font-family: var(--cm-font-display);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
}

#cmplz-document h3,
#cmplz-document .cmplz-service-header h3 {
	color: var(--cm-ink);
	font-size: 1rem;
	font-weight: 700;
}

#cmplz-document a {
	color: var(--cm-gold-ink);
}

#cmplz-document details,
#cmplz-document .cmplz-dropdown {
	margin-bottom: 8px;
	border: 1px solid var(--cm-line);
	border-radius: 14px;
	background: var(--cm-bg);
}

#cmplz-manage-consent-container .cmplz-categories .cmplz-category,
#cmplz-document .cmplz-categories .cmplz-category {
	border: 1px solid var(--cm-line);
	border-radius: 14px;
	background: var(--cm-bg);
}

#cmplz-document details > :not(summary) {
	padding-inline: 20px;
}

#cmplz-document details > ul {
	padding-left: 40px;
}

#cmplz-manage-consent-container .cmplz-categories .cmplz-always-active,
#cmplz-document .cmplz-categories .cmplz-always-active {
	color: var(--cm-gold-ink);
}

#cmplz-manage-consent-container .cmplz-categories input[type="checkbox"],
#cmplz-document .cmplz-categories input[type="checkbox"] {
	accent-color: var(--cm-gold-ink);
}

#cmplz-document summary {
	padding: 14px 18px;
	color: var(--cm-ink);
	font-weight: 700;
	cursor: pointer;
}

/* Purpose dropdowns of the privacy statement: separate from the text
   above, quieter Manrope titles instead of the display font. */
#cmplz-document :not(details) + details.cmplz-dropdown {
	margin-top: 24px;
}

#cmplz-document details.cmplz-dropdown {
	margin-bottom: 10px;
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#cmplz-document details.cmplz-dropdown:hover,
#cmplz-document details.cmplz-dropdown[open] {
	border-color: rgba(178, 160, 117, 0.6);
	box-shadow: 0 10px 24px rgba(122, 105, 56, 0.08);
}

#cmplz-document details.cmplz-dropdown summary {
	padding: 16px 20px;
}

#cmplz-document details.cmplz-dropdown summary h3 {
	margin: 0;
	padding-right: 12px;
	color: var(--cm-ink);
	font-family: var(--louhos-font-family);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: 0;
	text-transform: none;
}

#cmplz-document details.cmplz-dropdown[open] summary {
	border-bottom: 1px solid var(--cm-line);
}

#cmplz-document details.cmplz-dropdown > h3 {
	margin: 18px 0 6px;
	color: var(--cm-text-strong);
	font-family: var(--louhos-font-family);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

#cmplz-document details.cmplz-dropdown > :last-child {
	margin-bottom: 18px;
}

/* In-page anchors (#aloita, #yhteys …) land below the sticky header with
   some breathing room. */
html {
	scroll-padding-top: 104px;
}

@media (min-width: 1024px) {
	html {
		scroll-padding-top: 136px;
	}
}

/* ==========================================================================
   Small screens
   ========================================================================== */

/* Grid items default to min-width: auto and would grow to their widest
   word or image; let them shrink to the column instead. */
.cm-ti__grid > *,
.cm-pricing__grid > *,
.cm-plan > *,
.cm-blog__grid > *,
.cm-faq__grid > *,
.cm-service__content,
.cm-video-card__text {
	min-width: 0;
}

/* Highlight rows: icon + title, meta below on phones and on the right
   from 768px (as in Figma); minmax keeps long titles from overflowing. */
.cm-highlight {
	grid-template-columns: auto minmax(0, 1fr);
}

/* Phones: smaller icon so ELÄMÄNTAPAMUUTOKSET fits on one line */
@media (max-width: 767px) {
	.cm-highlight {
		gap: 4px 12px;
		padding: 16px 14px;
	}

	.cm-highlight__icon {
		width: 36px;
		height: 36px;
	}

	.cm-highlight__icon .cm-icon {
		width: 18px;
		height: 18px;
	}
}

@media (max-width: 389px) {
	.cm-highlight__title {
		font-size: 0.9375rem;
	}
}

@media (min-width: 768px) {
	.cm-highlight {
		grid-template-columns: auto minmax(0, 1fr) auto;
	}

	.cm-highlight__meta {
		text-align: right;
	}
}

@media (max-width: 389px) {
	.cm-service__title {
		font-size: 1.25rem;
	}

	.cm-video-card {
		gap: 12px;
	}

	.cm-video-card__thumb {
		width: 112px;
	}
}

/* Below 375px the long Finnish words in Unbounded (HENKILÖKOHTAINEN,
   ETÄVALMENNUKSESTA) do not fit the column at the regular sizes. */
@media (max-width: 374px) {
	.cm-heading,
	.cm-zenfit__title.cm-heading,
	.cm-legal__title.cm-heading {
		font-size: 1.125rem;
	}

	.cm-service__title,
	.cm-plan__title,
	.cm-pricing__side-title {
		font-size: 1.0625rem;
	}


	.cm-heading.cm-heading--hero {
		font-size: 1.3rem;
	}

	.cm-highlight__title {
		font-size: 0.8125rem;
	}

	.cm-stat {
		padding: 20px 16px;
	}

	.cm-stat__value {
		font-size: 1.625rem;
	}
}

/* Smallest phones: the call button shrinks to its round icon so it does
   not cover the cookie button; the label stays for screen readers. */
@media (max-width: 374px) {
	.cm-float {
		gap: 0;
		padding: 6px;
	}

	.cm-float__text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

/* ==========================================================================
   Motion preferences
   ========================================================================== */

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

	.cm-feature:hover,
	.cm-post-card:hover,
	.cm-btn:hover {
		transform: none;
	}

	#cmplz-cookiebanner-container .cmplz-cookiebanner {
		animation: none;
	}

	.cm-pricing__side.has-link:hover,
	.cm-pricing__side.has-link:focus-within,
	.cm-pricing__side.has-link:hover img,
	.cm-pricing__side.has-link:focus-within img {
		transform: none;
	}

	#cmplz-manage-consent button.cmplz-manage-consent {
		transition: none;
	}
}

/* ==========================================================================
   Price list (cmtraining/price-list)
   ========================================================================== */

.cm-prices__group {
	display: grid;
	gap: 20px;
	padding: 24px 20px;
	border: 1px solid var(--cm-card-line);
	border-radius: var(--cm-radius-card);
	background: #fff;
}

.cm-prices__group + .cm-prices__group {
	margin-top: 20px;
}

.cm-prices__group-title {
	margin: 0;
	color: var(--cm-ink);
	font-family: var(--cm-font-display);
	font-size: clamp(1.125rem, 0.95rem + 0.7vw, 1.5rem);
	font-weight: 600;
	line-height: 1.3;
	text-transform: uppercase;
}

.cm-prices__group-title::before {
	display: block;
	width: 36px;
	height: 3px;
	margin-bottom: 14px;
	border-radius: 2px;
	background: var(--cm-gold-gradient);
	content: "";
}

.cm-prices__group-text {
	margin: 10px 0 0;
	font-size: 0.9375rem;
	line-height: 1.55;
}

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

.cm-prices__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 6px 20px;
	padding: 18px 16px;
	border-bottom: 1px solid var(--cm-line);
}

.cm-prices__item:last-child,
.cm-prices__item:has(+ .is-featured) {
	border-bottom-color: transparent;
}

.cm-prices__item.is-featured {
	border-bottom-width: 0;
	border-radius: 16px;
	background: var(--cm-gold-gradient);
	box-shadow: 0 10px 24px rgba(122, 104, 56, 0.22);
}

.cm-prices__name {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 0;
	color: var(--cm-ink);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.4;
}

.cm-prices__badge {
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--cm-dark);
	color: var(--cm-gold-pale);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cm-prices__desc {
	margin: 4px 0 0;
	font-size: 0.9375rem;
	line-height: 1.5;
}

/* Duration, area or start fee: one fact per line under the description */
.cm-prices__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 8px 0 0;
	color: var(--cm-gold-ink);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.45;
}

.cm-prices__item.is-featured .cm-prices__meta {
	color: var(--cm-ink);
}

.cm-prices__item.is-featured .cm-prices__desc {
	color: var(--cm-text-strong);
}

.cm-prices__price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	margin: 0;
	text-align: right;
	white-space: nowrap;
}

.cm-prices__price strong {
	color: var(--cm-ink);
	font-family: var(--cm-font-display);
	font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);
	font-weight: 600;
}

/* "Pyydä tarjous" and other prices without a number */
.cm-prices__price--text strong {
	font-size: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);
}

.cm-prices__price span {
	font-size: 0.8125rem;
	font-weight: 600;
}

.cm-prices__item.is-featured .cm-prices__price span {
	color: var(--cm-ink);
}

.cm-prices__foot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	margin-top: 32px;
}

.cm-prices__note {
	max-width: 40rem;
	margin: 0;
	font-size: 0.9375rem;
}

/* Phones: the price drops under the text so long names keep room. */
@media (max-width: 479px) {
	.cm-prices__item {
		grid-template-columns: minmax(0, 1fr);
	}

	.cm-prices__price {
		flex-direction: row;
		align-items: baseline;
		gap: 6px;
		margin-top: 6px;
	}
}

@media (min-width: 768px) {
	.cm-prices__group {
		padding: 32px;
	}

	.cm-prices__foot {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

@media (min-width: 1024px) {
	.cm-prices__group {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		gap: 48px;
		padding: 40px;
	}

	.cm-prices__item {
		padding: 20px 24px;
	}
}