/**
 * MLTK Maalaus design system.
 *
 * Elementor templates opt into components with `mltk-*` classes. Global rules
 * are scoped to `body.mltk-site` so the WordPress editor and third-party admin
 * interfaces are not affected.
 */

@layer reset, tokens, base, layout, components, elementor, utilities, overrides;

@layer tokens {
	:root {
		--mltk-color-ink: #191c18;
		--mltk-color-ink-muted: #42493e;
		--mltk-color-surface: #f9faf2;
		--mltk-color-surface-raised: #ffffff;
		--mltk-color-surface-soft: #edefe7;
		--mltk-color-border: #72796e;
		--mltk-color-border-soft: #c2c9bb;
		--mltk-color-primary: #154212;
		--mltk-color-primary-hover: #0d350b;
		--mltk-color-primary-soft: #bcf0ae;
		--mltk-color-primary-soft-ink: #002201;
		--mltk-color-accent: #ffc73a;
		--mltk-color-accent-hover: #e7ac00;
		--mltk-color-accent-ink: #251a00;
		--mltk-color-hero-surface: #123010;
		--mltk-color-hero-ink: #f7f4e8;
		--mltk-color-hero-sub: #cfe0c8;
		--mltk-gradient-foil: linear-gradient(
			115deg,
			#8a6a1c 0%,
			#f3d477 35%,
			#ffe9a8 50%,
			#f3d477 65%,
			#8a6a1c 100%
		);
		--mltk-color-error: #a81010;
		--mltk-color-error-soft: #ffdad6;
		--mltk-color-success: #1e5d1a;
		--mltk-color-success-soft: #d9f3d3;
		--mltk-font-body: "MLTK Hanken Grotesk", system-ui, -apple-system,
			"Segoe UI", sans-serif;
		--mltk-font-display: "MLTK EB Garamond", Georgia, "Times New Roman", serif;
		--mltk-text-xs: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
		--mltk-text-sm: clamp(0.9375rem, 0.91rem + 0.12vw, 1rem);
		--mltk-text-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
		--mltk-text-lead: clamp(1.125rem, 1.04rem + 0.4vw, 1.375rem);
		--mltk-text-h3: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
		--mltk-text-h2: clamp(2rem, 1.55rem + 2vw, 3.25rem);
		--mltk-text-h1: clamp(2.5rem, 1.75rem + 3.2vw, 4.75rem);
		--mltk-leading-tight: 1.08;
		--mltk-leading-body: 1.65;
		--mltk-space-1: clamp(0.5rem, 0.45rem + 0.2vw, 0.625rem);
		--mltk-space-2: clamp(0.75rem, 0.65rem + 0.4vw, 1rem);
		--mltk-space-3: clamp(1rem, 0.85rem + 0.65vw, 1.5rem);
		--mltk-space-4: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
		--mltk-space-5: clamp(2rem, 1.5rem + 2vw, 3.5rem);
		--mltk-space-6: clamp(3rem, 2rem + 4vw, 6rem);
		--mltk-section-space: clamp(1.5rem, 1rem + 2vw, 2.5rem);
		--mltk-gutter: clamp(1rem, 0.6rem + 1.8vw, 4rem);
		--mltk-container: 80rem;
		--mltk-content: 46rem;
		--mltk-measure: 68ch;
		--mltk-radius-sm: 0.25rem;
		--mltk-radius-md: 0.5rem;
		--mltk-radius-lg: 1rem;
		--mltk-shadow-sm: 0 0.0625rem 0.1875rem rgb(25 28 24 / 14%), 0 0.5rem 1.5rem rgb(25 28 24 / 14%);
		--mltk-shadow-lg: 0 0.0625rem 0.1875rem rgb(25 28 24 / 16%), 0 1.5rem 3.5rem rgb(25 28 24 / 24%);
		--mltk-focus-ring: 0 0 0 0.1875rem #ffffff,
			0 0 0 0.375rem var(--mltk-color-primary);
		--mltk-admin-bar-height: 0px;
		--mltk-header-height: 5rem;
		--mltk-motion-fast: 160ms;
		--mltk-motion-base: 240ms;
	}
}

@layer reset {
	body.mltk-site *,
	body.mltk-site *::before,
	body.mltk-site *::after {
		box-sizing: border-box;
	}

	body.mltk-site :where(img, picture, video, canvas, svg) {
		block-size: auto;
		display: block;
		max-inline-size: 100%;
	}

	body.mltk-site :where(button, input, select, textarea) {
		font: inherit;
	}

	body.mltk-site :where(h1, h2, h3, h4, p, figure, blockquote) {
		margin-block-start: 0;
	}
}

@layer base {
	html {
		scroll-padding-block-start: calc(
			var(--mltk-header-height) + env(safe-area-inset-top, 0px) + 1rem
		);
	}

	/*
	 * Soft, fixed gradient blobs behind the whole site. Every glass panel
	 * elsewhere (cards, FAQ, forms, the estimator) sits on this flat page
	 * color, not a photo, so without real texture behind them their blur
	 * has nothing to do and reads as a slightly duller solid color instead
	 * of glass. This gives them one.
	 */
	body.mltk-site {
		background-attachment: fixed;
		background-color: var(--mltk-color-surface);
		background-image:
			radial-gradient(circle at 12% 8%, rgb(21 66 18 / 16%), transparent 38%),
			radial-gradient(circle at 88% 6%, rgb(255 199 58 / 20%), transparent 34%),
			radial-gradient(circle at 82% 78%, rgb(21 66 18 / 14%), transparent 42%),
			radial-gradient(circle at 10% 82%, rgb(255 199 58 / 14%), transparent 38%),
			radial-gradient(circle at 50% 45%, rgb(21 66 18 / 8%), transparent 55%);
		color: var(--mltk-color-ink);
		font-family: var(--mltk-font-body);
		font-size: var(--mltk-text-base);
		line-height: var(--mltk-leading-body);
		margin: 0;
		min-block-size: 100vh;
		min-block-size: 100svh;
		text-rendering: optimizeLegibility;
	}

	@media (prefers-reduced-motion: reduce), (forced-colors: active) {
		body.mltk-site {
			background-attachment: scroll;
		}
	}

	@media (forced-colors: active) {
		body.mltk-site {
			background-image: none;
		}
	}

	body.mltk-site.admin-bar {
		--mltk-admin-bar-height: 2rem;
	}

	@media (max-width: 48.875rem) {
		body.mltk-site.admin-bar {
			--mltk-admin-bar-height: 2.875rem;
		}
	}

	body.mltk-site :where(main, header, footer, section, article, aside, nav) {
		min-inline-size: 0;
	}

	body.mltk-site :where(h1, h2, h3, h4) {
		color: var(--mltk-color-primary);
		font-family: var(--mltk-font-display);
		font-weight: 600;
		hyphens: auto;
		letter-spacing: -0.015em;
		line-height: var(--mltk-leading-tight);
		overflow-wrap: anywhere;
		text-wrap: balance;
	}

	body.mltk-site h1 {
		font-size: var(--mltk-text-h1);
		margin-block-end: var(--mltk-space-4);
	}

	body.mltk-site h2 {
		font-size: var(--mltk-text-h2);
		margin-block-end: var(--mltk-space-3);
	}

	body.mltk-site h3 {
		font-size: var(--mltk-text-h3);
		margin-block-end: var(--mltk-space-2);
	}

	body.mltk-site :where(p, li, dd) {
		hyphens: auto;
		overflow-wrap: break-word;
	}

	body.mltk-site p {
		margin-block-end: var(--mltk-space-3);
		max-inline-size: var(--mltk-measure);
	}

	body.mltk-site a {
		color: var(--mltk-color-primary);
		text-decoration-skip-ink: auto;
		text-decoration-thickness: 0.08em;
		text-underline-offset: 0.2em;
	}

	body.mltk-site a:hover {
		text-decoration-thickness: 0.14em;
	}

	body.mltk-site :where(a, button, input, select, textarea, summary):focus-visible {
		border-radius: var(--mltk-radius-sm);
		box-shadow: var(--mltk-focus-ring);
		outline: 0.125rem solid transparent;
		outline-offset: 0.1875rem;
	}

	body.mltk-site ::selection {
		background: var(--mltk-color-primary-soft);
		color: var(--mltk-color-primary-soft-ink);
	}

	body.mltk-site :target {
		scroll-margin-block-start: calc(var(--mltk-header-height) + 1rem);
	}

	body.mltk-site :where(.mltk-section[id], main [id]) {
		scroll-margin-block-start: calc(var(--mltk-header-height) + 1rem);
	}
}

@layer layout {
	.mltk-container {
		inline-size: min(
			calc(100% - (2 * var(--mltk-gutter))),
			var(--mltk-container)
		);
		margin-inline: auto;
	}

	.mltk-container--content {
		max-inline-size: var(--mltk-content);
	}

	.mltk-section {
		padding-block: var(--mltk-section-space);
	}

	.mltk-section--compact {
		padding-block: clamp(1rem, 0.75rem + 1.5vw, 1.75rem);
	}

	.mltk-flow > * {
		margin-block: 0;
	}

	.mltk-flow > * + * {
		margin-block-start: var(--flow-space, var(--mltk-space-3));
	}

	.mltk-stack {
		display: flex;
		flex-direction: column;
		gap: var(--mltk-space-3);
	}

	.mltk-cluster {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		gap: var(--mltk-space-2);
	}

	.mltk-grid {
		display: grid;
		gap: var(--mltk-space-4);
		grid-template-columns: repeat(
			auto-fit,
			minmax(min(100%, var(--mltk-grid-min, 18rem)), 1fr)
		);
	}

	.mltk-split {
		align-items: center;
		display: grid;
		gap: var(--mltk-space-5);
		grid-template-columns: minmax(0, 1fr);
	}

	@media (min-width: 48rem) {
		.mltk-split {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}
}

@layer components {
	.skip-link,
	.mltk-skip-link {
		background: var(--mltk-color-surface-raised);
		border: 0.125rem solid var(--mltk-color-primary);
		color: var(--mltk-color-primary);
		font-weight: 700;
		inset-block-start: max(0.5rem, env(safe-area-inset-top, 0px));
		inset-inline-start: max(0.5rem, env(safe-area-inset-left, 0px));
		padding: 0.75rem 1rem;
		position: fixed;
		transform: translateY(-200%);
		z-index: 100000;
	}

	.skip-link:focus,
	.mltk-skip-link:focus {
		transform: translateY(0);
	}

	.mltk-site-header {
		background: rgb(18 48 16 / 62%);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		border-block-end: 0.0625rem solid rgb(255 255 255 / 14%);
		box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 14%);
		inset-block-start: 0;
		position: sticky;
		z-index: 1000;
	}

	@media (forced-colors: active) {
		.mltk-site-header {
			backdrop-filter: none;
			background: Canvas;
			border-color: CanvasText;
		}
	}

	.admin-bar .mltk-site-header {
		inset-block-start: var(--mltk-admin-bar-height);
	}

	.mltk-header__inner {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		gap: var(--mltk-space-2);
		justify-content: space-between;
		margin-inline: auto;
		max-inline-size: var(--mltk-container);
		min-block-size: var(--mltk-header-height);
		padding-block: 0.75rem;
		padding-inline: max(var(--mltk-gutter), env(safe-area-inset-left, 0px))
			max(var(--mltk-gutter), env(safe-area-inset-right, 0px));
	}

	.mltk-site-brand {
		align-items: center;
		color: var(--mltk-color-hero-ink);
		display: inline-flex;
		flex: 0 1 auto;
		font-weight: 700;
		gap: 0.75rem;
		max-inline-size: min(65vw, 19rem);
		min-block-size: 3rem;
		text-decoration: none;
	}

	.mltk-site-brand :where(img, svg) {
		max-block-size: 3.5rem;
		object-fit: contain;
		inline-size: auto;
	}

	.mltk-navigation-slot {
		flex: 0 1 auto;
		margin-inline-start: auto;
		min-inline-size: 0;
	}

	.mltk-navigation-slot .elementor-shortcode {
		min-inline-size: 0;
	}

	.mltk-menu-toggle {
		align-items: center;
		background: transparent;
		border: 0.125rem solid var(--mltk-color-hero-ink);
		border-radius: var(--mltk-radius-sm);
		color: var(--mltk-color-hero-ink);
		cursor: pointer;
		display: none !important;
		flex: 0 0 auto;
		font-weight: 700;
		gap: 0.5rem;
		justify-content: center;
		min-block-size: 3rem;
		min-inline-size: 3rem;
		padding: 0.625rem 0.875rem;
	}

	.mltk-menu-toggle__icon {
		block-size: 1.5rem;
		inline-size: 1.5rem;
		position: relative;
	}

	.mltk-menu-toggle__icon::before,
	.mltk-menu-toggle__icon::after,
	.mltk-menu-toggle__line {
		background: currentColor;
		block-size: 0.125rem;
		inline-size: 1.5rem;
		inset-inline-start: 0;
		position: absolute;
		transition:
			transform var(--mltk-motion-fast) ease,
			opacity var(--mltk-motion-fast) ease;
	}

	.mltk-menu-toggle__icon::before {
		content: "";
		inset-block-start: 0.25rem;
	}

	.mltk-menu-toggle__line {
		inset-block-start: 0.6875rem;
	}

	.mltk-menu-toggle__icon::after {
		content: "";
		inset-block-start: 1.125rem;
	}

	[data-mltk-menu-enhanced="true"][data-mltk-menu-state="open"]
		.mltk-menu-toggle__icon::before {
		transform: translateY(0.4375rem) rotate(45deg);
	}

	[data-mltk-menu-enhanced="true"][data-mltk-menu-state="open"]
		.mltk-menu-toggle__line {
		opacity: 0;
	}

	[data-mltk-menu-enhanced="true"][data-mltk-menu-state="open"]
		.mltk-menu-toggle__icon::after {
		transform: translateY(-0.4375rem) rotate(-45deg);
	}

	.mltk-primary-nav {
		display: block;
		min-inline-size: 0;
	}

	.mltk-primary-nav :where(ul, .elementor-nav-menu) {
		display: flex;
		flex-wrap: wrap;
		gap: 0.25rem;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.mltk-primary-nav a {
		align-items: center;
		display: inline-flex;
		font-size: var(--mltk-text-sm);
		font-weight: 650;
		min-block-size: 3rem;
		padding: 0.625rem 0.75rem;
		text-decoration: none;
	}

	.mltk-primary-nav a:hover,
	.mltk-primary-nav [aria-current="page"] {
		background: rgb(255 255 255 / 14%);
		border-radius: var(--mltk-radius-sm);
	}

	.mltk-nav__cta {
		margin-inline-start: 0.5rem;
	}

	.mltk-button,
	body.mltk-site .elementor-button {
		align-items: center;
		background: var(--mltk-color-primary);
		border: 0.125rem solid var(--mltk-color-primary);
		border-radius: 999px;
		color: #ffffff;
		cursor: pointer;
		display: inline-flex;
		font-weight: 700;
		gap: 0.625rem;
		justify-content: center;
		line-height: 1.2;
		min-block-size: 3rem;
		min-inline-size: 3rem;
		padding: 0.75rem 1.25rem;
		text-align: center;
		text-decoration: none;
		transition:
			background-color var(--mltk-motion-fast) ease,
			border-color var(--mltk-motion-fast) ease,
			color var(--mltk-motion-fast) ease,
			transform var(--mltk-motion-fast) ease;
	}

	.mltk-button:hover,
	body.mltk-site .elementor-button:hover {
		background: var(--mltk-color-primary-hover);
		border-color: var(--mltk-color-primary-hover);
		color: #ffffff;
		text-decoration: none;
	}

	.mltk-button:active,
	body.mltk-site .elementor-button:active {
		transform: translateY(0.0625rem);
	}

	.mltk-button--accent {
		background: var(--mltk-color-accent);
		border-color: var(--mltk-color-accent);
		color: var(--mltk-color-accent-ink);
	}

	.mltk-button--accent:hover {
		background: var(--mltk-color-accent-hover);
		border-color: var(--mltk-color-accent-hover);
		color: var(--mltk-color-accent-ink);
	}

	.mltk-button--secondary {
		background: rgb(255 255 255 / 10%);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border-color: var(--mltk-color-primary);
		color: var(--mltk-color-primary);
	}

	.mltk-button--secondary:hover {
		background: var(--mltk-color-primary);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		color: #ffffff;
	}

	@media (forced-colors: active) {
		.mltk-button--secondary {
			backdrop-filter: none;
		}
	}

	/*
	 * Reserved for the single primary call to action inside `.mltk-hero`.
	 * Editors apply this class to exactly one button per hero, the same way
	 * `mltk-nav__cta` marks exactly one menu item; it is not a general
	 * replacement for `mltk-button--accent` elsewhere.
	 */
	.mltk-button--foil {
		background: var(--mltk-gradient-foil);
		background-size: 220% 100%;
		border-color: transparent;
		box-shadow: 0 0.625rem 1.5rem -0.375rem rgb(0 0 0 / 45%);
		color: var(--mltk-color-accent-ink);
	}

	.mltk-button--foil:hover {
		background-position: 100% 0;
		border-color: transparent;
		color: var(--mltk-color-accent-ink);
	}

	@media (forced-colors: active) {
		.mltk-button--foil {
			background: ButtonFace;
			box-shadow: none;
			color: ButtonText;
		}
	}

	.mltk-button[aria-disabled="true"],
	.mltk-button:disabled,
	body.mltk-site .elementor-button:disabled {
		cursor: not-allowed;
		opacity: 0.58;
	}

	/*
	 * Signature: a full-bleed photograph behind the hero, darkened toward the
	 * brand green with a scrim, plus a shimmering gold-foil badge and CTA.
	 * This is the one bold, photographic moment on every page; body sections
	 * stay on the quiet cream surface with no scrim, foil, or animation.
	 * Editors set the photo via the Elementor section's own background-image
	 * control (a decorative background, not a content `img`, so no alt text
	 * is owed here) — `.mltk-hero__bg` only carries the darkening scrim.
	 */
	.mltk-hero {
		align-items: center;
		background: var(--mltk-color-hero-surface);
		background-position: center;
		background-size: cover;
		color: var(--mltk-color-hero-ink);
		display: flex;
		isolation: isolate;
		min-block-size: clamp(26rem, 20rem + 14vw, 38rem);
		overflow: clip;
		padding-block: var(--mltk-space-6);
		position: relative;
	}

	.mltk-hero::before,
	.mltk-hero::after {
		content: "";
		pointer-events: none;
		position: absolute;
		z-index: 0;
	}

	.mltk-hero::before {
		background:
			radial-gradient(circle at center, rgb(243 212 119 / 22%), transparent 62%),
			radial-gradient(circle at center, rgb(247 244 232 / 12%), transparent 68%);
		block-size: clamp(16rem, 42vw, 38rem);
		border-radius: 999px;
		filter: blur(0.25rem);
		inline-size: clamp(16rem, 42vw, 38rem);
		inset-block-start: 12%;
		inset-inline-end: min(-8rem, -8vw);
		opacity: 0.78;
	}

	.mltk-hero::after {
		background:
			linear-gradient(90deg, rgb(247 244 232 / 0.06) 1px, transparent 1px),
			linear-gradient(0deg, rgb(247 244 232 / 0.045) 1px, transparent 1px);
		background-size: 3.25rem 3.25rem;
		inset: 0;
		mask-image: linear-gradient(90deg, transparent 0%, #000 18%, transparent 88%);
		opacity: 0.5;
	}

	.mltk-hero__bg {
		inset: 0;
		position: absolute;
	}

	.mltk-hero__bg img {
		block-size: 100%;
		display: block;
		inline-size: 100%;
		object-fit: cover;
	}

	.mltk-hero__bg::after {
		background: linear-gradient(
				100deg,
				var(--mltk-color-hero-surface) 8%,
				rgb(18 48 16 / 80%) 42%,
				rgb(18 48 16 / 35%) 75%
			),
			linear-gradient(
				0deg,
				var(--mltk-color-hero-surface) 0%,
				rgb(18 48 16 / 0%) 55%
			);
		content: "";
		inset: 0;
		position: absolute;
	}

	.mltk-hero :where(h1, h2, h3, h4) {
		color: var(--mltk-color-hero-ink);
	}

	/*
	 * The green-on-transparent secondary button reads as invisible against
	 * the hero's own green surface, so it is reversed to cream here only.
	 */
	.mltk-hero .mltk-button--secondary {
		border-color: var(--mltk-color-hero-ink);
		color: var(--mltk-color-hero-ink);
	}

	.mltk-hero .mltk-button--secondary:hover {
		background: var(--mltk-color-hero-ink);
		color: var(--mltk-color-hero-surface);
	}

	.mltk-hero__content {
		background:
			linear-gradient(145deg, rgb(15 40 13 / 72%), rgb(15 40 13 / 34%)),
			radial-gradient(circle at 0% 0%, rgb(243 212 119 / 18%), transparent 44%);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		border: 0.0625rem solid rgb(255 255 255 / 16%);
		border-radius: var(--mltk-radius-lg);
		box-shadow:
			inset 0 0.0625rem 0 rgb(255 255 255 / 18%),
			0 2rem 4.5rem rgb(0 0 0 / 34%);
		max-inline-size: 40rem;
		padding: var(--mltk-space-5);
		position: relative;
		z-index: 1;
	}

	.mltk-hero__content::after {
		background: var(--mltk-gradient-foil);
		block-size: 0.1875rem;
		border-radius: 999px;
		content: "";
		inline-size: min(12rem, 45%);
		inset-block-start: 0;
		inset-inline-start: var(--mltk-space-5);
		position: absolute;
	}

	@media (forced-colors: active) {
		.mltk-hero__content {
			backdrop-filter: none;
			background: Canvas;
			border-color: CanvasText;
		}
	}

	.mltk-hero__eyebrow,
	.mltk-eyebrow {
		align-items: center;
		color: var(--mltk-color-primary);
		display: inline-flex;
		font-size: var(--mltk-text-xs);
		font-weight: 800;
		gap: 0.625rem;
		letter-spacing: 0.1em;
		line-height: 1.4;
		margin-block-end: var(--mltk-space-2);
		text-transform: uppercase;
	}

	/*
	 * The hero eyebrow becomes a glass badge (matching the pill shown above
	 * the live headline) rather than plain uppercase text.
	 */
	.mltk-hero__eyebrow {
		background: rgb(255 255 255 / 10%);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		border: 0.0625rem solid rgb(255 255 255 / 22%);
		border-radius: 999px;
		color: var(--mltk-color-accent);
		padding: 0.4rem 1rem 0.4rem 0.75rem;
	}

	/*
	 * Body-copy eyebrow mark: a quiet, static two-tone brush pass. No
	 * animation here — the shimmering foil version below is reserved for
	 * the hero so the motion stays a single, deliberate moment.
	 */
	.mltk-eyebrow::before {
		background: linear-gradient(
			100deg,
			var(--mltk-color-primary) 0%,
			var(--mltk-color-primary) 45%,
			var(--mltk-color-accent) 100%
		);
		block-size: 0.5rem;
		clip-path: polygon(
			4% 30%,
			78% 0%,
			100% 45%,
			88% 100%,
			12% 85%,
			0% 55%
		);
		content: "";
		flex: 0 0 auto;
		inline-size: 2.25rem;
	}

	.mltk-hero__eyebrow::before {
		background: var(--mltk-gradient-foil);
		background-size: 220% 100%;
		animation: mltk-foil-shift 6s ease-in-out infinite;
		block-size: 0.5rem;
		box-shadow: 0 0 0.625rem rgb(243 212 119 / 45%);
		clip-path: polygon(
			3% 25%,
			80% 0%,
			100% 40%,
			90% 100%,
			10% 88%,
			0% 60%
		);
		content: "";
		flex: 0 0 auto;
		inline-size: 2.5rem;
	}

	@keyframes mltk-foil-shift {
		0%,
		100% {
			background-position: 0% 0;
		}
		50% {
			background-position: 100% 0;
		}
	}

	@media (forced-colors: active) {
		.mltk-eyebrow::before,
		.mltk-hero__eyebrow::before {
			background: CanvasText;
			animation: none;
			box-shadow: none;
			clip-path: none;
			forced-color-adjust: none;
		}
	}

	.mltk-lead {
		color: var(--mltk-color-ink-muted);
		font-size: var(--mltk-text-lead);
		max-inline-size: 58ch;
	}

	.mltk-hero__lead {
		color: var(--mltk-color-hero-sub);
		font-size: var(--mltk-text-lead);
		max-inline-size: 58ch;
	}

	@media (forced-colors: active) {
		.mltk-hero {
			background-image: none !important;
		}

		.mltk-hero__bg {
			display: none;
		}

		.mltk-hero::before,
		.mltk-hero::after,
		.mltk-hero__content::after {
			display: none;
		}

		.mltk-hero__eyebrow {
			backdrop-filter: none;
			background: Canvas;
			border-color: CanvasText;
			color: CanvasText;
		}
	}

	/*
	 * Trust bar: a dark green band directly under the hero, three verified
	 * facts only (no "28+"/guarantee-style claims — see BL-001/BL-002 in
	 * content/CLAIMS-REGISTER.md for why those are blocked and what replaces
	 * them). Reuses the hero's ink/sub colors so it reads as one continuous
	 * dark moment with the hero above it.
	 */
	.mltk-trust-bar {
		background-image:
			linear-gradient(120deg, rgb(9 26 8 / 82%), rgb(9 26 8 / 70%)),
			url("https://mltk.fi/wp-content/uploads/2026/05/talo3-Large.jpeg");
		background-position: center;
		background-size: cover;
		color: var(--mltk-color-hero-ink);
	}

	.mltk-trust-bar__grid {
		display: grid;
		gap: var(--mltk-space-4);
		grid-template-columns: repeat(
			auto-fit,
			minmax(min(100%, 14rem), 1fr)
		);
		padding-block: var(--mltk-space-4);
	}

	.mltk-trust-bar__item {
		align-items: baseline;
		background: rgb(255 255 255 / 8%);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		border: 0.0625rem solid rgb(255 255 255 / 16%);
		border-radius: var(--mltk-radius-md);
		box-shadow: var(--mltk-shadow-sm);
		display: flex;
		gap: var(--mltk-space-2);
		padding: var(--mltk-space-3) var(--mltk-space-4);
	}

	@media (forced-colors: active) {
		.mltk-trust-bar {
			background-image: none !important;
		}

		.mltk-trust-bar__item {
			backdrop-filter: none;
			background: Canvas;
			border-color: CanvasText;
		}
	}

	.mltk-trust-bar__value {
		color: var(--mltk-color-accent);
		font-family: var(--mltk-font-display);
		font-size: var(--mltk-text-h3);
		font-variant-numeric: oldstyle-nums proportional-nums;
		font-weight: 600;
		line-height: 1;
	}

	.mltk-trust-bar__label {
		color: var(--mltk-color-hero-sub);
		font-size: var(--mltk-text-sm);
		font-weight: 700;
	}

	.mltk-card {
		background:
			linear-gradient(150deg, rgb(255 255 255 / 46%), rgb(255 255 255 / 18%)),
			radial-gradient(circle at 10% 10%, rgb(21 66 18 / 38%), transparent 62%),
			radial-gradient(circle at 92% 94%, rgb(255 199 58 / 42%), transparent 62%);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		border: 0.0625rem solid rgb(21 66 18 / 24%);
		border-radius: var(--mltk-radius-md);
		box-shadow: inset 0 0.0625rem 0 rgb(255 255 255 / 65%), var(--mltk-shadow-sm);
		display: flex;
		flex-direction: column;
		min-inline-size: 0;
		padding: var(--mltk-space-4);
		transition:
			border-color var(--mltk-motion-base) ease,
			box-shadow var(--mltk-motion-base) ease,
			transform var(--mltk-motion-base) ease;
	}

	@media (forced-colors: active) {
		.mltk-card {
			backdrop-filter: none;
			background: Canvas;
			border-color: CanvasText;
		}
	}

	.mltk-card:has(a:hover),
	.mltk-card:has(a:focus-visible) {
		border-color: var(--mltk-color-primary);
		box-shadow: var(--mltk-shadow-lg);
		transform: translateY(-0.1875rem);
	}

	/*
	 * Reusable glass wrapper for a standalone block of section content (a
	 * teaser, a short statement) that would otherwise sit directly on the
	 * page background with no panel at all — same recipe as .mltk-card so
	 * plain text blocks read as part of the same glass family. Every plain
	 * content section (.mltk-section > .mltk-container.mltk-flow) gets this
	 * automatically so no page can ship a flat, unstyled text block; hero,
	 * trust-bar and the CTA band keep their own distinct treatment because
	 * their containers don't carry the .mltk-flow class.
	 */
	.mltk-glass-panel,
	.mltk-section > .mltk-container.mltk-flow {
		background:
			linear-gradient(150deg, rgb(255 255 255 / 46%), rgb(255 255 255 / 18%)),
			radial-gradient(circle at 10% 10%, rgb(21 66 18 / 38%), transparent 62%),
			radial-gradient(circle at 92% 94%, rgb(255 199 58 / 42%), transparent 62%);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		border: 0.0625rem solid rgb(21 66 18 / 24%);
		border-radius: var(--mltk-radius-lg);
		box-shadow: inset 0 0.0625rem 0 rgb(255 255 255 / 65%), var(--mltk-shadow-lg);
		padding: var(--mltk-space-5) var(--mltk-space-4);
	}

	@media (forced-colors: active) {
		.mltk-glass-panel,
		.mltk-section > .mltk-container.mltk-flow {
			backdrop-filter: none;
			background: Canvas;
			border-color: CanvasText;
		}
	}

	.mltk-card > :last-child {
		margin-block-end: 0;
	}

	.mltk-card__action {
		margin-block-start: auto;
		padding-block-start: var(--mltk-space-3);
	}

	.mltk-card__media {
		border-radius: var(--mltk-radius-md) var(--mltk-radius-md) 0 0;
		margin: calc(var(--mltk-space-4) * -1) calc(var(--mltk-space-4) * -1) var(--mltk-space-4);
		overflow: clip;
	}

	.mltk-card__media img {
		block-size: 12rem;
		display: block;
		inline-size: 100%;
		object-fit: cover;
	}

	.mltk-cta-band {
		background-image:
			linear-gradient(120deg, rgb(15 40 13 / 88%), rgb(15 40 13 / 74%)),
			url("https://mltk.fi/wp-content/uploads/2026/05/talo-Large.jpeg");
		background-position: center;
		background-size: cover;
		border: 0.0625rem solid rgb(255 255 255 / 14%);
		border-radius: var(--mltk-radius-lg);
		box-shadow: var(--mltk-shadow-lg);
		color: #ffffff;
		display: grid;
		gap: var(--mltk-space-4);
		padding: var(--mltk-space-5);
	}

	.mltk-cta-band :where(h2, h3, p, a:not(.mltk-button)) {
		color: inherit;
	}

	@media (forced-colors: active) {
		.mltk-cta-band {
			background-image: none !important;
			border-color: CanvasText;
		}
	}

	.mltk-contact-actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--mltk-space-2);
	}

	.mltk-contact-actions > * {
		flex: 1 1 14rem;
	}

	/*
	 * Header contact link: a small glass pill (matches the nav/footer glass
	 * language) holding the WhatsApp icon and number, next to the logo/nav
	 * slot in the Elementor header container.
	 */
	.mltk-header-phone {
		align-items: center;
		background: rgb(255 255 255 / 10%);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		border: 0.0625rem solid rgb(255 255 255 / 20%);
		border-radius: 999px;
		color: var(--mltk-color-ink-muted);
		display: inline-flex;
		flex: 0 0 auto;
		font-size: var(--mltk-text-sm);
		font-weight: 700;
		gap: 0.5rem;
		min-block-size: 2.75rem;
		padding: 0.5rem 1rem 0.5rem 0.75rem;
		text-decoration: none;
	}

	.mltk-header-phone svg {
		block-size: 1.1rem;
		flex: 0 0 auto;
		inline-size: 1.1rem;
	}

	.mltk-header-whatsapp svg {
		fill: #25d366;
	}

	.mltk-header-phone:hover {
		background: rgb(255 255 255 / 18%);
		color: var(--mltk-color-primary);
	}

	@media (forced-colors: active) {
		.mltk-header-phone {
			backdrop-filter: none;
			background: Canvas;
			border-color: CanvasText;
		}
	}

	.mltk-facts {
		display: grid;
		gap: var(--mltk-space-2);
		grid-template-columns: repeat(
			auto-fit,
			minmax(min(100%, 13rem), 1fr)
		);
		margin: 0;
	}

	.mltk-facts > div {
		background:
			linear-gradient(150deg, rgb(255 255 255 / 46%), rgb(255 255 255 / 18%)),
			radial-gradient(circle at 10% 10%, rgb(21 66 18 / 38%), transparent 62%),
			radial-gradient(circle at 92% 94%, rgb(255 199 58 / 42%), transparent 62%);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		border-inline-start: 0.25rem solid var(--mltk-color-primary);
		border-block: 0.0625rem solid rgb(21 66 18 / 24%);
		border-inline-end: 0.0625rem solid rgb(21 66 18 / 24%);
		box-shadow: inset 0 0.0625rem 0 rgb(255 255 255 / 65%), var(--mltk-shadow-sm);
		padding: var(--mltk-space-3);
	}

	@media (forced-colors: active) {
		.mltk-facts > div {
			backdrop-filter: none;
			background: Canvas;
			border-color: CanvasText;
		}
	}

	.mltk-facts :where(dt, dd) {
		margin: 0;
	}

	.mltk-facts dt {
		color: var(--mltk-color-ink-muted);
		font-size: var(--mltk-text-sm);
		font-weight: 700;
	}

	.mltk-facts dd {
		font-family: var(--mltk-font-display);
		font-size: var(--mltk-text-h3);
		font-variant-numeric: oldstyle-nums proportional-nums;
		font-weight: 600;
		line-height: 1.15;
	}

	.mltk-breadcrumbs {
		font-size: var(--mltk-text-sm);
	}

	.mltk-breadcrumbs ol {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.mltk-breadcrumbs li + li::before {
		color: var(--mltk-color-border);
		content: "/";
		margin-inline-end: 0.5rem;
	}

	.mltk-faq {
		display: grid;
		gap: var(--mltk-space-3);
	}

	.mltk-faq details {
		background:
			linear-gradient(150deg, rgb(255 255 255 / 46%), rgb(255 255 255 / 18%)),
			radial-gradient(circle at 10% 10%, rgb(21 66 18 / 38%), transparent 62%),
			radial-gradient(circle at 92% 94%, rgb(255 199 58 / 42%), transparent 62%);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		border: 0.0625rem solid rgb(21 66 18 / 24%);
		border-radius: var(--mltk-radius-md);
		box-shadow: inset 0 0.0625rem 0 rgb(255 255 255 / 65%), var(--mltk-shadow-sm);
		padding-inline: var(--mltk-space-4);
	}

	.mltk-faq summary {
		color: var(--mltk-color-primary);
		cursor: pointer;
		font-weight: 750;
		list-style-position: outside;
		min-block-size: 3rem;
		padding: 1rem 0;
	}

	.mltk-faq details > :not(summary) {
		max-inline-size: var(--mltk-measure);
		padding-block-end: var(--mltk-space-4);
		padding-inline-end: var(--mltk-space-4);
	}

	@media (forced-colors: active) {
		.mltk-faq details {
			backdrop-filter: none;
			background: Canvas;
			border-color: CanvasText;
		}
	}

	.mltk-notice {
		background:
			linear-gradient(150deg, rgb(255 255 255 / 46%), rgb(255 255 255 / 18%)),
			radial-gradient(circle at 10% 10%, rgb(21 66 18 / 38%), transparent 62%),
			radial-gradient(circle at 92% 94%, rgb(255 199 58 / 42%), transparent 62%);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		border-inline-start: 0.25rem solid var(--mltk-color-primary);
		border-block: 0.0625rem solid rgb(21 66 18 / 24%);
		border-inline-end: 0.0625rem solid rgb(21 66 18 / 24%);
		box-shadow: inset 0 0.0625rem 0 rgb(255 255 255 / 65%), var(--mltk-shadow-sm);
		padding: var(--mltk-space-3);
	}

	@media (forced-colors: active) {
		.mltk-notice {
			backdrop-filter: none;
			background: Canvas;
			border-color: CanvasText;
		}
	}

	/*
	 * Non-binding price estimator (see CLAIMS-REGISTER.md BL-008). A two-tone
	 * glass card: a light control panel (select/slider/number) paired with a
	 * dark glass "readout" panel for the live euro figure, echoing the
	 * hero/footer dark-glass family so the number reads as the hero moment.
	 */
	.mltk-estimator {
		background:
			linear-gradient(150deg, rgb(255 255 255 / 46%), rgb(255 255 255 / 18%)),
			radial-gradient(circle at 10% 10%, rgb(21 66 18 / 38%), transparent 62%),
			radial-gradient(circle at 92% 94%, rgb(255 199 58 / 42%), transparent 62%);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		border: 0.0625rem solid rgb(21 66 18 / 24%);
		border-radius: var(--mltk-radius-lg);
		box-shadow: inset 0 0.0625rem 0 rgb(255 255 255 / 65%), var(--mltk-shadow-lg);
		padding: var(--mltk-space-5);
	}

	.mltk-estimator__grid {
		align-items: stretch;
		display: grid;
		gap: var(--mltk-space-4);
		grid-template-columns: minmax(0, 1.1fr) minmax(min(100%, 16rem), 1fr);
	}

	.mltk-estimator__controls {
		display: grid;
		gap: var(--mltk-space-4);
	}

	.mltk-estimator__field {
		display: grid;
		gap: 0.5rem;
	}

	.mltk-estimator__field > label {
		font-size: var(--mltk-text-sm);
		font-weight: 700;
	}

	.mltk-estimator__field select {
		background: rgb(255 255 255 / 55%);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border: 0.0625rem solid rgb(21 66 18 / 30%);
		border-radius: var(--mltk-radius-sm);
		color: var(--mltk-color-ink);
		font-family: inherit;
		font-size: var(--mltk-text-base);
		inline-size: 100%;
		min-block-size: 3rem;
		padding: 0.625rem 0.875rem;
	}

	@media (forced-colors: active) {
		.mltk-estimator__field select,
		.mltk-estimator__number {
			backdrop-filter: none;
			background: Canvas;
			border-color: CanvasText;
		}
	}

	.mltk-estimator__quantity-label {
		align-items: baseline;
		display: flex;
		justify-content: space-between;
	}

	.mltk-estimator__quantity-readout {
		color: var(--mltk-color-primary);
		font-family: var(--mltk-font-display);
		font-size: var(--mltk-text-h3);
		font-weight: 600;
		line-height: 1;
	}

	/*
	 * Custom range slider. Sizing/positioning is standardized across engines;
	 * the thumb/track cosmetics must be repeated per vendor prefix since
	 * browsers ignore an entire rule if any selector in it is unsupported.
	 */
	.mltk-estimator__slider {
		appearance: none;
		background: transparent;
		block-size: 2.5rem;
		cursor: pointer;
		inline-size: 100%;
		margin: 0;
	}

	.mltk-estimator__slider::-webkit-slider-runnable-track {
		background: linear-gradient(
			90deg,
			var(--mltk-color-primary),
			var(--mltk-color-accent)
		);
		block-size: 0.5rem;
		border-radius: 999px;
	}

	.mltk-estimator__slider::-moz-range-track {
		background: linear-gradient(
			90deg,
			var(--mltk-color-primary),
			var(--mltk-color-accent)
		);
		block-size: 0.5rem;
		border-radius: 999px;
	}

	.mltk-estimator__slider::-webkit-slider-thumb {
		appearance: none;
		background: var(--mltk-color-accent);
		block-size: 1.75rem;
		border: 0.1875rem solid var(--mltk-color-surface-raised);
		border-radius: 999px;
		box-shadow: var(--mltk-shadow-sm);
		inline-size: 1.75rem;
		margin-block-start: -0.625rem;
	}

	.mltk-estimator__slider::-moz-range-thumb {
		background: var(--mltk-color-accent);
		block-size: 1.75rem;
		border: 0.1875rem solid var(--mltk-color-surface-raised);
		border-radius: 999px;
		box-shadow: var(--mltk-shadow-sm);
		inline-size: 1.75rem;
	}

	.mltk-estimator__slider:focus-visible {
		outline: var(--mltk-focus-ring);
		outline-offset: 0.25rem;
	}

	input[type="number"].mltk-estimator__number {
		background: rgb(255 255 255 / 55%);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border: 0.0625rem solid rgb(21 66 18 / 30%);
		border-radius: var(--mltk-radius-sm);
		color: var(--mltk-color-ink);
		font-family: inherit;
		font-size: var(--mltk-text-base);
		inline-size: 100%;
		margin-block-start: 0.5rem;
		min-block-size: 3rem;
		padding: 0.625rem 0.875rem;
	}

	.mltk-estimator__display {
		align-content: center;
		background: rgb(15 40 13 / 90%);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		border: 0.0625rem solid rgb(255 255 255 / 16%);
		border-radius: var(--mltk-radius-md);
		box-shadow: inset 0 0 0 0.0625rem rgb(255 255 255 / 6%), var(--mltk-shadow-lg);
		display: grid;
		justify-items: center;
		padding: var(--mltk-space-4);
		text-align: center;
	}

	.mltk-estimator__display-label {
		color: var(--mltk-color-hero-sub);
		font-size: var(--mltk-text-xs);
		font-weight: 800;
		letter-spacing: 0.1em;
		margin: 0;
		text-transform: uppercase;
	}

	.mltk-estimator__range {
		align-items: baseline;
		color: var(--mltk-color-accent);
		display: flex;
		flex-wrap: wrap;
		font-family: var(--mltk-font-display);
		font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
		font-weight: 600;
		gap: 0.2em;
		justify-content: center;
		margin: 0.375rem 0 0;
		text-shadow: 0 0 1.25rem rgb(255 199 58 / 45%);
	}

	.mltk-estimator__range-sep {
		color: var(--mltk-color-hero-sub);
		font-size: 0.7em;
	}

	.mltk-estimator__currency {
		color: var(--mltk-color-hero-sub);
		font-size: 0.55em;
		text-shadow: none;
	}

	.mltk-estimator__meta {
		color: var(--mltk-color-hero-sub);
		font-size: var(--mltk-text-sm);
		margin-block-start: var(--mltk-space-2);
	}

	.mltk-estimator__disclaimer {
		color: var(--mltk-color-ink-muted);
		font-size: var(--mltk-text-xs);
		margin-block-start: var(--mltk-space-4);
		max-inline-size: var(--mltk-measure);
	}

	@media (max-width: 40rem) {
		.mltk-estimator__grid {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	@media (forced-colors: active) {
		.mltk-estimator,
		.mltk-estimator__display {
			backdrop-filter: none;
			background: Canvas;
			border-color: CanvasText;
		}

		.mltk-estimator__range {
			color: CanvasText;
			text-shadow: none;
		}

		.mltk-estimator__slider::-webkit-slider-runnable-track {
			background: CanvasText;
		}

		.mltk-estimator__slider::-moz-range-track {
			background: CanvasText;
		}
	}

	.mltk-notice--error {
		background: var(--mltk-color-error-soft);
		border-inline-start-color: var(--mltk-color-error);
	}

	.mltk-media-frame {
		background: var(--mltk-color-surface-soft);
		border-radius: var(--mltk-radius-md);
		overflow: clip;
	}

	.mltk-media-frame img {
		inline-size: 100%;
	}

	.mltk-media-frame--landscape img {
		aspect-ratio: 16 / 10;
		object-fit: cover;
	}

	.mltk-media-frame--case-study img {
		aspect-ratio: 4 / 3;
		object-fit: cover;
	}

	@media (max-width: 63.999rem) {
		.mltk-navigation-slot:has(
				[data-mltk-menu]:not([data-mltk-menu-enhanced="true"])
			) {
			flex-basis: 100%;
			inline-size: 100%;
			margin-inline-start: 0;
		}

		[data-mltk-menu]:not([data-mltk-menu-enhanced="true"]),
		[data-mltk-menu]:not([data-mltk-menu-enhanced="true"])
			[data-mltk-menu-panel] {
			flex-basis: 100%;
			inline-size: 100%;
		}

		[data-mltk-menu]:not([data-mltk-menu-enhanced="true"])
			.mltk-primary-nav
			:where(ul, .elementor-nav-menu) {
			align-items: stretch;
			flex-direction: column;
		}

		[data-mltk-menu]:not([data-mltk-menu-enhanced="true"])
			.mltk-primary-nav
			a {
			inline-size: 100%;
		}

		[data-mltk-menu-enhanced="true"] .mltk-menu-toggle {
			display: inline-flex !important;
		}

		[data-mltk-menu-enhanced="true"] {
			position: static;
		}

		[data-mltk-menu-enhanced="true"] [data-mltk-menu-panel] {
			background: rgb(15 40 13 / 96%);
			backdrop-filter: blur(12px);
			-webkit-backdrop-filter: blur(12px);
			border-block-end: 0.0625rem solid rgb(255 255 255 / 16%);
			box-shadow: var(--mltk-shadow-lg);
			inset-inline: 0;
			max-block-size: calc(
				100vh - var(--mltk-header-height) -
			var(--mltk-admin-bar-height) -
			env(safe-area-inset-bottom, 0px)
			);
			max-block-size: calc(
				100dvh - var(--mltk-header-height) -
			var(--mltk-admin-bar-height) -
			env(safe-area-inset-bottom, 0px)
			);
			overflow-y: auto;
			overscroll-behavior: contain;
			padding:
				var(--mltk-space-2)
				max(var(--mltk-gutter), env(safe-area-inset-right, 0px))
				max(var(--mltk-space-3), env(safe-area-inset-bottom, 0px))
				max(var(--mltk-gutter), env(safe-area-inset-left, 0px));
			position: absolute;
			top: 100%;
		}

		@media (forced-colors: active) {
			[data-mltk-menu-enhanced="true"] [data-mltk-menu-panel] {
				backdrop-filter: none;
				background: Canvas;
				border-color: CanvasText;
			}
		}

		[data-mltk-menu-enhanced="true"][data-mltk-menu-state="closed"]
			[data-mltk-menu-panel] {
			display: none;
		}

		[data-mltk-menu-enhanced="true"][data-mltk-menu-state="open"]
			[data-mltk-menu-panel] {
			display: block;
		}

		.mltk-primary-nav :where(ul, .elementor-nav-menu) {
			align-items: stretch;
			flex-direction: column;
			gap: 0;
		}

		.mltk-primary-nav a {
			inline-size: 100%;
			min-block-size: 3rem;
			padding-block: 0.75rem;
		}

		.mltk-nav__cta {
			inline-size: 100%;
			margin-block-start: var(--mltk-space-2);
			margin-inline-start: 0;
		}

		.mltk-nav__cta .mltk-button,
		.mltk-nav__cta.elementor-widget-button .elementor-button {
			inline-size: 100%;
		}
	}

	@media (min-width: 64rem) {
		[data-mltk-menu] {
			align-items: center;
			display: flex;
			gap: var(--mltk-space-2);
		}

		[data-mltk-menu-panel] {
			align-items: center;
			display: flex !important;
		}
	}

	@media (max-width: 22.5rem) {
		.mltk-menu-toggle__label {
			clip: rect(0 0 0 0);
			clip-path: inset(50%);
			block-size: 0.0625rem;
			inline-size: 0.0625rem;
			overflow: hidden;
			position: absolute;
			white-space: nowrap;
		}

		.mltk-site-brand {
			max-inline-size: calc(100vw - 6rem);
		}
	}
}

@layer elementor {
	body.mltk-site :where(.e-con, .elementor-section, .elementor-container) {
		min-inline-size: 0;
	}

	body.mltk-site .elementor-widget-image img {
		block-size: auto;
		max-inline-size: 100%;
	}

	body.mltk-site
		.elementor-widget-text-editor
		> .elementor-widget-container
		> :last-child {
		margin-block-end: 0;
	}

	body.mltk-site
		.elementor-widget-form
		.elementor-field-group
		> :where(label, .elementor-field-label) {
		color: var(--mltk-color-ink);
		font-size: var(--mltk-text-sm);
		font-weight: 700;
		margin-block-end: 0.375rem;
	}

	body.mltk-site .elementor-field-textual,
	body.mltk-site .elementor-field-group select,
	body.mltk-site .elementor-field-group textarea {
		background: var(--mltk-color-surface-raised);
		border: 0.125rem solid var(--mltk-color-border);
		border-radius: var(--mltk-radius-sm);
		color: var(--mltk-color-ink);
		min-block-size: 3rem;
		padding: 0.625rem 0.75rem;
	}

	body.mltk-site .elementor-field-group textarea {
		min-block-size: 8rem;
		resize: vertical;
	}

	body.mltk-site .elementor-field-textual:hover,
	body.mltk-site .elementor-field-group select:hover,
	body.mltk-site .elementor-field-group textarea:hover {
		border-color: var(--mltk-color-primary);
	}

	body.mltk-site .elementor-field-textual:focus,
	body.mltk-site .elementor-field-group select:focus,
	body.mltk-site .elementor-field-group textarea:focus {
		border-color: var(--mltk-color-primary);
		box-shadow: var(--mltk-focus-ring);
		outline: 0.125rem solid transparent;
	}

	body.mltk-site .elementor-field-group .elementor-mark-required .elementor-screen-only {
		clip: auto;
		clip-path: none;
		block-size: auto;
		inline-size: auto;
		margin-inline-start: 0.25rem;
		overflow: visible;
		position: static;
		white-space: normal;
	}

	body.mltk-site .elementor-message {
		border-inline-start: 0.25rem solid currentColor;
		margin-block-start: var(--mltk-space-3);
		padding: var(--mltk-space-2);
	}

	body.mltk-site .elementor-message-success {
		background: var(--mltk-color-success-soft);
		color: var(--mltk-color-success);
	}

	body.mltk-site .elementor-message-danger,
	body.mltk-site .elementor-error {
		background: var(--mltk-color-error-soft);
		color: var(--mltk-color-error);
	}
}

@layer utilities {
	.mltk-visually-hidden {
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		block-size: 0.0625rem;
		inline-size: 0.0625rem;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
	}

	.mltk-text-center {
		text-align: center;
	}

	.mltk-measure {
		max-inline-size: var(--mltk-measure);
	}

	/*
	 * Translucent, not solid: this utility bands alternating sections across
	 * many pages (hinta-arvio, yhteystiedot, palvelut, ...). A solid fill
	 * blocks the page-wide glass blobs (see body.mltk-site) from ever
	 * reaching the glass cards inside it, so those cards blur nothing and
	 * read as flat. Translucency lets the blobs — and the glass — through.
	 */
	.mltk-surface-soft {
		background: rgb(237 239 231 / 55%);
	}
}

@layer overrides {
	/*
	 * Accessibility hardening: Elementor's global link/button skin can load
	 * after the child theme and reintroduce low-contrast magenta links and
	 * light-green buttons. These rules deliberately pin the public MLTK
	 * components back to the verified design tokens.
	 */
	body.mltk-site a:not(.mltk-button):not(.elementor-button) {
		color: var(--mltk-color-primary) !important;
	}

	body.mltk-site a:not(.mltk-button):not(.elementor-button):not(.mltk-primary-nav *) {
		text-decoration: underline !important;
	}

	body.mltk-site .mltk-hero a:not(.mltk-button):not(.elementor-button) {
		color: var(--mltk-color-hero-ink) !important;
		text-decoration: underline !important;
	}

	body.mltk-site .mltk-cta-band a:not(.mltk-button):not(.elementor-button) {
		color: #ffffff !important;
		text-decoration: underline !important;
	}

	body.mltk-site .mltk-site-footer--dark a:not(.mltk-button):not(.elementor-button) {
		color: var(--mltk-color-hero-ink) !important;
	}

	body.mltk-site .mltk-site-footer--dark a:hover:not(.mltk-button):not(.elementor-button) {
		color: var(--mltk-color-accent) !important;
	}

	body.mltk-site .mltk-site-header a:not(.mltk-button):not(.elementor-button) {
		color: var(--mltk-color-hero-ink) !important;
	}

	body.mltk-site .mltk-site-header a:hover:not(.mltk-button):not(.elementor-button) {
		color: var(--mltk-color-accent) !important;
	}

	body.mltk-site .mltk-nav__cta .mltk-button {
		background: rgb(255 199 58 / 18%) !important;
		backdrop-filter: blur(12px) !important;
		-webkit-backdrop-filter: blur(12px) !important;
		border-color: rgb(255 199 58 / 45%) !important;
		border-radius: 999px !important;
		color: var(--mltk-color-accent) !important;
	}

	body.mltk-site .mltk-nav__cta .mltk-button:hover {
		background: rgb(255 199 58 / 32%) !important;
		border-color: rgb(255 199 58 / 65%) !important;
		color: var(--mltk-color-accent) !important;
	}

	@media (forced-colors: active) {
		body.mltk-site .mltk-nav__cta .mltk-button {
			backdrop-filter: none !important;
			background: ButtonFace !important;
			color: ButtonText !important;
		}
	}

	body.mltk-site .mltk-button,
	body.mltk-site .elementor-button {
		background: var(--mltk-color-primary) !important;
		border-color: var(--mltk-color-primary) !important;
		color: #ffffff !important;
		text-decoration-line: none !important;
	}

	body.mltk-site .mltk-button:hover,
	body.mltk-site .elementor-button:hover {
		background: var(--mltk-color-primary-hover) !important;
		border-color: var(--mltk-color-primary-hover) !important;
		color: #ffffff !important;
	}

	body.mltk-site .mltk-button--accent {
		background: var(--mltk-color-accent) !important;
		border-color: var(--mltk-color-accent) !important;
		color: var(--mltk-color-accent-ink) !important;
	}

	body.mltk-site .mltk-button--accent:hover {
		background: var(--mltk-color-accent-hover) !important;
		border-color: var(--mltk-color-accent-hover) !important;
		color: var(--mltk-color-accent-ink) !important;
	}

	body.mltk-site .mltk-button--secondary {
		background: rgb(255 255 255 / 10%) !important;
		backdrop-filter: blur(10px) !important;
		-webkit-backdrop-filter: blur(10px) !important;
		border-color: var(--mltk-color-primary) !important;
		color: var(--mltk-color-primary) !important;
	}

	body.mltk-site .mltk-button--secondary:hover {
		background: var(--mltk-color-primary) !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		color: #ffffff !important;
	}

	body.mltk-site .mltk-hero .mltk-button--secondary {
		background: rgb(255 255 255 / 10%) !important;
		backdrop-filter: blur(10px) !important;
		-webkit-backdrop-filter: blur(10px) !important;
		border-color: var(--mltk-color-hero-ink) !important;
		color: var(--mltk-color-hero-ink) !important;
	}

	body.mltk-site .mltk-hero .mltk-button--secondary:hover {
		background: var(--mltk-color-hero-ink) !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		color: var(--mltk-color-hero-surface) !important;
	}

	/*
	 * Same fix as the hero: the green-on-transparent secondary button is
	 * invisible against the CTA band's own dark-green photo backdrop.
	 */
	body.mltk-site .mltk-cta-band .mltk-button--secondary {
		background: rgb(255 255 255 / 10%) !important;
		backdrop-filter: blur(10px) !important;
		-webkit-backdrop-filter: blur(10px) !important;
		border-color: var(--mltk-color-hero-ink) !important;
		color: var(--mltk-color-hero-ink) !important;
	}

	body.mltk-site .mltk-cta-band .mltk-button--secondary:hover {
		background: var(--mltk-color-hero-ink) !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		color: var(--mltk-color-hero-surface) !important;
	}

	@media (forced-colors: active) {
		body.mltk-site .mltk-button--secondary,
		body.mltk-site .mltk-hero .mltk-button--secondary,
		body.mltk-site .mltk-cta-band .mltk-button--secondary {
			backdrop-filter: none !important;
		}
	}

	body.mltk-site .mltk-menu-toggle {
		background: transparent !important;
		border-color: var(--mltk-color-hero-ink) !important;
		color: var(--mltk-color-hero-ink) !important;
	}

	body.mltk-site :where(main, footer, .mltk-surface-soft) li > a {
		align-items: center;
		display: inline-flex;
		min-block-size: 1.75rem;
	}

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

		body.mltk-site *,
		body.mltk-site *::before,
		body.mltk-site *::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			scroll-behavior: auto !important;
			transition-duration: 0.01ms !important;
		}
	}

	@media (prefers-contrast: more) {
		:root {
			--mltk-color-border: #30352d;
			--mltk-color-border-soft: #555d51;
		}

		.mltk-card,
		.mltk-site-header {
			border-width: 0.125rem;
		}
	}

	@media (forced-colors: active) {
		body.mltk-site :where(a, button, input, select, textarea, summary):focus-visible {
			outline: 0.1875rem solid Highlight;
		}

		.mltk-button,
		body.mltk-site .elementor-button,
		.mltk-menu-toggle {
			border: 0.125rem solid ButtonText;
			forced-color-adjust: auto;
		}
	}
}

/*
 * Unlayered cascade shield.
 *
 * Per the CSS Cascade Layers spec, unlayered styles always win over layered
 * styles regardless of specificity or source order. Elementor injects its own
 * unlayered per-kit CSS (e.g. ".elementor-kit-11 a") on every page, which was
 * silently overriding the layered ".mltk-primary-nav a" rules above. These
 * unlayered restatements (same tokens/values as the layered originals) win
 * back the elements this theme owns: the primary navigation.
 */
.mltk-primary-nav a {
	align-items: center;
	display: inline-flex;
	font-size: var(--mltk-text-sm);
	font-weight: 650;
	min-block-size: 3rem;
	padding: 0.625rem 0.75rem;
	text-decoration: none;
}

.mltk-primary-nav a:hover,
.mltk-primary-nav [aria-current="page"] {
	background: rgb(255 255 255 / 14%);
	border-radius: var(--mltk-radius-sm);
}

/*
 * Same problem, different rule: Hello Elementor's own unlayered reset.css
 * ships a plain `a { background-color: transparent; }`, which silently wins
 * over the layered `.mltk-header-phone` glass pill background.
 */
.mltk-header-phone {
	background: rgb(255 255 255 / 10%);
}

.mltk-header-phone:hover {
	background: rgb(255 255 255 / 18%);
}

@media (forced-colors: active) {
	.mltk-header-phone {
		background: Canvas;
	}
}

/*
 * Same problem again: Hello Elementor's reset.css also restates
 * `input[type=number], select { border, border-radius, padding }` unlayered,
 * winning over the layered `.mltk-estimator__field` control styling.
 */
.mltk-estimator__field select,
input[type="number"].mltk-estimator__number {
	border: 0.0625rem solid rgb(21 66 18 / 30%);
	border-radius: var(--mltk-radius-sm);
	padding: 0.625rem 0.875rem;
}

/*
 * The slider is caught by Hello Elementor's same `input[type=...]` reset
 * (it sets width:100% too, which is fine, but also border/padding/radius,
 * which would draw a box around the custom thumb/track). Win those back to
 * nothing so only .mltk-estimator__slider's own cosmetics show.
 */
.mltk-estimator__slider {
	border: 0;
	border-radius: 0;
	padding: 0;
}

/*
 * Service dropdown ("Palvelut"). WordPress's default menu walker nests a
 * `.sub-menu` list inside `.menu-item-has-children` when depth allows it.
 * On mobile the whole nav is already an expandable panel, so the sub-menu
 * simply stays in normal flow (indented). At desktop width it becomes a
 * hover/focus dropdown.
 */
.mltk-primary-nav .sub-menu {
	display: flex;
	flex-direction: column;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mltk-primary-nav .sub-menu a {
	font-size: var(--mltk-text-xs);
	padding-inline-start: var(--mltk-space-5);
}

@media (min-width: 64rem) {
	.mltk-primary-nav .menu-item-has-children {
		position: relative;
	}

	.mltk-primary-nav .menu-item-has-children > .sub-menu {
		background: rgb(15 40 13 / 92%);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		border: 0.0625rem solid rgb(255 255 255 / 16%);
		border-radius: var(--mltk-radius-sm);
		box-shadow: var(--mltk-shadow-lg);
		display: none;
		inset-inline-start: 0;
		min-inline-size: 13rem;
		padding: var(--mltk-space-2);
		position: absolute;
		top: 100%;
		z-index: 20;
	}

	@media (forced-colors: active) {
		.mltk-primary-nav .menu-item-has-children > .sub-menu {
			backdrop-filter: none;
			background: Canvas;
			border-color: CanvasText;
		}
	}

	.mltk-primary-nav .menu-item-has-children:hover > .sub-menu,
	.mltk-primary-nav .menu-item-has-children:focus-within > .sub-menu {
		display: flex;
	}

	.mltk-primary-nav .menu-item-has-children > a::after {
		content: "\25BE";
		display: inline-block;
		font-size: 0.6875rem;
		margin-inline-start: 0.375rem;
	}

	.mltk-primary-nav .sub-menu a {
		font-size: var(--mltk-text-sm);
		padding-inline-start: var(--mltk-space-3);
	}
}

/*
 * Media-split section: a photo alongside benefit copy, with an optional
 * overlaid stat badge (e.g. "30 vuotta kokemusta"). Reuses the existing
 * `.mltk-split` two-column grid as its layout base.
 */
@layer components {
	.mltk-split__media {
		border-radius: var(--mltk-radius-md);
		overflow: clip;
		position: relative;
	}

	.mltk-split__media img {
		block-size: 100%;
		display: block;
		inline-size: 100%;
		object-fit: cover;
	}

	.mltk-stat-badge {
		background: rgb(15 40 13 / 55%);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		border: 0.0625rem solid rgb(255 255 255 / 18%);
		border-radius: var(--mltk-radius-sm);
		bottom: var(--mltk-space-4);
		box-shadow: var(--mltk-shadow-lg);
		color: var(--mltk-color-hero-ink);
		inset-inline-end: var(--mltk-space-4);
		max-inline-size: 11rem;
		padding: var(--mltk-space-4);
		position: absolute;
	}

	@media (forced-colors: active) {
		.mltk-stat-badge {
			backdrop-filter: none;
			background: Canvas;
			border-color: CanvasText;
		}
	}

	.mltk-stat-badge__value {
		color: var(--mltk-color-accent);
		display: block;
		font-family: var(--mltk-font-display);
		font-size: var(--mltk-text-h3);
		font-weight: 600;
		line-height: 1;
	}

	.mltk-stat-badge__label {
		color: var(--mltk-color-hero-sub);
		display: block;
		font-size: var(--mltk-text-xs);
		font-weight: 700;
		letter-spacing: 0.06em;
		margin-block-start: var(--mltk-space-1);
		text-transform: uppercase;
	}

	.mltk-checklist {
		display: grid;
		gap: var(--mltk-space-3);
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.mltk-checklist li {
		align-items: start;
		background: rgb(255 255 255 / 46%);
		border: 0.0625rem solid rgb(21 66 18 / 12%);
		border-radius: var(--mltk-radius-sm);
		box-shadow: inset 0 0.0625rem 0 rgb(255 255 255 / 64%);
		display: flex;
		font-weight: 650;
		gap: var(--mltk-space-3);
		padding: var(--mltk-space-3);
		transition:
			background-color var(--mltk-motion-base) ease,
			border-color var(--mltk-motion-base) ease,
			box-shadow var(--mltk-motion-base) ease,
			transform var(--mltk-motion-base) ease;
	}

	.mltk-checklist li:has(a:hover),
	.mltk-checklist li:has(a:focus-visible) {
		background: rgb(255 255 255 / 70%);
		border-color: rgb(21 66 18 / 32%);
		box-shadow: var(--mltk-shadow-sm);
		transform: translateY(-0.125rem);
	}

	.mltk-checklist li::before {
		background: var(--mltk-color-primary);
		block-size: 1.5rem;
		border-radius: 999px;
		color: #ffffff;
		content: "\2713";
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		font-size: 0.8125rem;
		inline-size: 1.5rem;
	}

	@media (forced-colors: active) {
		.mltk-checklist li {
			background: Canvas;
			border-color: CanvasText;
			box-shadow: none;
		}
	}

	@media (max-width: 47.9375rem) {
		.mltk-hero {
			min-block-size: auto;
		}

		.mltk-hero::before {
			block-size: 18rem;
			inline-size: 18rem;
			inset-block-start: -3rem;
			inset-inline-end: -8rem;
		}

		.mltk-hero::after {
			opacity: 0.24;
		}

		.mltk-hero__content {
			padding: var(--mltk-space-4);
		}

		.mltk-hero__content::after {
			inset-inline-start: var(--mltk-space-4);
		}

		.mltk-stat-badge {
			max-inline-size: none;
			position: static;
			margin-block-start: var(--mltk-space-3);
		}
	}
}

/*
 * Dark footer: matches the hero/trust-bar "premium dark" surface instead of
 * the plain light background, so the page reads as one consistent design
 * from hero to footer.
 */
.mltk-site-footer--dark {
	background: var(--mltk-color-hero-surface);
	color: var(--mltk-color-hero-sub);
}

/*
 * Glassmorphism variant: rounded frosted-glass panels floating over a
 * dimmed background photo (blur only reads as "glass" with real texture
 * behind it). Each panel's title sits in its own smaller glass pill,
 * separate from the content panel below it.
 */
.mltk-site-footer--glass {
	background-image:
		linear-gradient(180deg, rgb(9 26 8 / 42%), rgb(9 26 8 / 55%)),
		var(--mltk-footer-bg-image);
	background-position: center;
	background-size: cover;
	padding-block: var(--mltk-space-4);
}

.mltk-footer-houses {
	align-items: start;
	display: grid;
	gap: var(--mltk-space-4) var(--mltk-space-5);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	padding-block: var(--mltk-space-3);
}

.mltk-footer-house {
	background: rgb(9 26 8 / 30%);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 0.0625rem solid rgb(255 255 255 / 14%);
	border-radius: var(--mltk-radius-lg);
	box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 28%);
	display: flex;
	flex-direction: column;
	gap: var(--mltk-space-3);
	padding: var(--mltk-space-4) var(--mltk-space-3);
}

.mltk-footer-house__title {
	align-self: center;
	background: rgb(255 199 58 / 16%);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 0.0625rem solid rgb(255 199 58 / 32%);
	border-radius: 999px;
	max-inline-size: 100%;
	overflow: hidden;
	padding: var(--mltk-space-1) var(--mltk-space-4);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mltk-footer-house__title p {
	font-size: var(--mltk-text-xs);
	margin: 0;
}

.mltk-footer-house__body {
	background: rgb(255 255 255 / 14%);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 0.0625rem solid rgb(255 255 255 / 26%);
	border-radius: var(--mltk-radius-md);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 6%), 0 0.75rem 2rem rgb(0 0 0 / 22%);
	flex: 1;
	padding: var(--mltk-space-4) var(--mltk-space-3);
	text-align: center;
	text-shadow: 0 0.0625rem 0.125rem rgb(0 0 0 / 45%);
}

.mltk-footer-house__body ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mltk-footer-house__body li + li {
	margin-block-start: var(--mltk-space-2);
}

.mltk-footer-house__body .mltk-footer-logo {
	margin-inline: auto;
}

@media (forced-colors: active) {
	.mltk-footer-house,
	.mltk-footer-house__title,
	.mltk-footer-house__body {
		backdrop-filter: none;
		background: Canvas;
		border-color: CanvasText;
	}
}

.mltk-site-footer--dark :where(h2, h3, .mltk-footer-house__title p) {
	color: var(--mltk-color-accent);
	font-size: var(--mltk-text-sm);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.mltk-site-footer--dark a {
	color: var(--mltk-color-hero-ink);
}

.mltk-site-footer--dark a:hover {
	color: var(--mltk-color-accent);
}

.mltk-footer-logo {
	block-size: auto;
	display: block;
	inline-size: 100%;
	max-inline-size: 11.5rem;
}

.mltk-footer-trust {
	display: flex;
	justify-content: center;
	padding-block-end: var(--mltk-space-3);
}

.mltk-footer-badge {
	align-items: center;
	background: rgb(255 255 255 / 8%);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 0.0625rem solid rgb(255 255 255 / 18%);
	border-radius: var(--mltk-radius-md);
	box-shadow: var(--mltk-shadow-sm);
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: var(--mltk-space-2) var(--mltk-space-4);
	text-align: center;
}

@media (forced-colors: active) {
	.mltk-footer-badge {
		backdrop-filter: none;
		background: Canvas;
		border-color: CanvasText;
	}
}

.mltk-footer-badge__icon {
	color: var(--mltk-color-accent);
	font-size: 1.5rem;
	line-height: 1;
}

.mltk-footer-badge__value {
	color: var(--mltk-color-accent);
	display: block;
	font-family: var(--mltk-font-display);
	font-size: var(--mltk-text-h4, 1.25rem);
	font-weight: 600;
	line-height: 1.1;
}

.mltk-footer-badge__label {
	color: var(--mltk-color-hero-sub);
	display: block;
	font-size: var(--mltk-text-xs);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}