/*
 * Betomik — projektin tyylit. Pääteema lataa tämän pääbundlen jälkeen.
 *
 * Figma: WEBLAYOUT_Betomik → Desktop → WEBLAYOUT_Etusivu (1920px, sisältö 1300px).
 * Värit ovat Figman tyylien nimillä (Brand/Punainen, Tausta/Musta …).
 */

/* ==========================================================================
   Tokenit
   ========================================================================== */

:root {
	/* Figma-tyylit */
	--bm-red: #ed1c24;          /* Brand/Punainen */
	--bm-red-dark: #b5151b;     /* Brand/Punainen tumma */
	--bm-black: #0f0f0f;        /* Tausta/Musta */
	--bm-dark: #141414;         /* Tausta/Tumma */
	--bm-surface: #1e1e1e;      /* Tausta/Pinta */
	--bm-line: #333;            /* Viiva/Harmaa */
	--bm-text: #b8b4ad;         /* Teksti/Harmaa */
	--bm-text-dim: #7c7873;     /* Teksti/Himmennetty */
	--bm-white: #fff;           /* Teksti/Valkoinen */
	--bm-coal: #1f1f1f;         /* Tausta/Hiili */
	--bm-coal-dark: #171717;    /* Tausta/Hiili tumma */
	--bm-steel: #2c2c2c;        /* Tausta/Teräs */
	--bm-line-steel: #3d3d3d;   /* Viiva/Teräs */
	--bm-text-steel: #8a8a8a;   /* Teksti/Teräs */
	--bm-outline: #5a5a5a;      /* prosessinumeroiden ääriviiva */

	/* Figma: Tekstuuri / Rakeisuus — pikselikohina, jakauma mitattu Figman viennistä */
	--bm-noise: url("../img/noise.png");

	--bm-font-display: "League Gothic", "Oswald", "Arial Narrow", sans-serif;
	--bm-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	/* Sisältöalue 1300px (1920 − 2 × 310), header/hero 1480px (1920 − 2 × 220). */
	--bm-gutter: clamp(1rem, 4vw, 2rem);
	--bm-content: 1300px;
	--bm-wide: 1480px;
	--bm-section-y: clamp(4rem, 8vw, 7.5rem);
	--bm-chamfer: 12px;

	/* Pääteeman tokenit Betomikin väreihin */
	--louhos-primary: var(--bm-red);
	--louhos-primary-rgb: 237, 28, 36;
	--louhos-primary-dark: var(--bm-red-dark);
	--louhos-accent: var(--bm-red);
	--louhos-link-color: var(--bm-red);
	--louhos-headings: var(--bm-white);
	--louhos-body-color: var(--bm-text);
	--louhos-grey: var(--bm-surface);
	--louhos-border: var(--bm-line);
	--louhos-border-rgb: 51, 51, 51;
	--louhos-dark-1: var(--bm-dark);
	--louhos-dark-1-rgb: 20, 20, 20;
	--louhos-dark-2: var(--bm-black);
	--louhos-dark-2-rgb: 15, 15, 15;
	--louhos-header-height: 95px;
	--louhos-radius: 0;
	--louhos-radius-lg: 0;
	--louhos-font-family: var(--bm-font-body);

	--bs-body-bg: var(--bm-dark);
}

/* ==========================================================================
   Perusta
   ========================================================================== */

body {
	background: var(--bm-dark);
	color: var(--bm-text);
	font-family: var(--bm-font-body);
	font-size: 1rem;
	-webkit-font-smoothing: antialiased;
}

:focus-visible {
	outline-color: var(--bm-white);
}

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

.bm-section {
	padding-block: var(--bm-section-y);
}

.bm-eyebrow {
	margin: 0;
	color: var(--bm-red);
	font-family: var(--bm-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: normal;
	text-transform: uppercase;
}

.bm-eyebrow--dark {
	color: var(--bm-black);
}

/* Yläotsikko punaisella viivalla (Figma V2: Eyebrow) */
.bm-eyebrow--line {
	display: inline-flex;
	align-items: center;
	gap: 0.875rem;
}

.bm-eyebrow--line::before {
	content: "";
	width: 40px;
	height: 3px;
	background: var(--bm-red);
}

.bm-title {
	margin: 0;
	color: var(--bm-white);
	font-family: var(--bm-font-display);
	font-weight: 400;
	line-height: 1.02;
	text-transform: uppercase;
}

.bm-title--xl { font-size: clamp(3rem, 4.6vw + 0.5rem, 5.5rem); }  /* 88px */
.bm-title--lg { font-size: clamp(2.75rem, 3.6vw + 0.5rem, 4.5rem); } /* 72px */

.bm-lead {
	margin: 0;
	color: var(--bm-text);
	font-size: 1rem;
	line-height: 1.6;
}

/* Osion otsikkorivi: vasemmalla otsikko, oikealla ingressi tai painike */
.bm-head {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.bm-head__main {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.bm-head__aside {
	margin: 0;
	color: var(--bm-text);
	font-size: 1rem;
	line-height: 1.6;
}

@media (min-width: 992px) {
	.bm-head--split {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 3rem;
	}

	/* Figma: ingressi täyttää otsikon oikealle jäävän tilan */
	p.bm-head__aside {
		flex: 1 1 0;
		min-width: 18rem;
	}
}

/* Sähköpostilinkki kirjekuori-ikonilla */
.bm-mail {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--bm-text);
	font-size: 0.875rem;
	text-decoration: none;
}

.bm-mail .bm-icon { color: var(--bm-red); }
.bm-mail--light { color: var(--bm-white); font-size: 0.9375rem; }
.bm-mail:hover, .bm-mail:focus-visible { color: var(--bm-white); text-decoration: underline; }

/* Ikonit */
.bm-icon {
	display: inline-flex;
	flex-shrink: 0;
	line-height: 0;
}

.bm-icon svg {
	display: block;
	overflow: visible;
}

/* ==========================================================================
   Painikkeet — kulmaviiste oikeassa yläkulmassa (Figma: Chamfer 12px)
   ========================================================================== */

.bm-btn {
	--bm-btn-bg: var(--bm-red);
	--bm-btn-color: var(--bm-black);
	--bm-btn-border: transparent;
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1.25rem 2rem;
	border: 2px solid var(--bm-btn-border);
	border-radius: 0;
	background: var(--bm-btn-bg);
	color: var(--bm-btn-color);
	font-family: var(--bm-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: normal;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Täytetyillä painikkeilla kulma leikataan pois; reunaviivallisissa ei viistettä (Figma). */
.bm-btn--red,
.bm-btn--dark {
	border: 0;
	padding: calc(1.25rem + 2px) calc(2rem + 2px);
	clip-path: polygon(0 0, calc(100% - var(--bm-chamfer)) 0, 100% var(--bm-chamfer), 100% 100%, 0 100%);
}

.bm-btn .bm-icon { transition: transform 0.2s ease; }
.bm-btn:hover .bm-icon, .bm-btn:focus-visible .bm-icon { transform: translateX(3px); }

.bm-btn--red:hover, .bm-btn--red:focus-visible { --bm-btn-bg: var(--bm-white); --bm-btn-color: var(--bm-black); }

.bm-btn--dark { --bm-btn-bg: var(--bm-black); --bm-btn-color: var(--bm-white); }
.bm-btn--dark:hover, .bm-btn--dark:focus-visible { --bm-btn-bg: var(--bm-white); --bm-btn-color: var(--bm-black); }

.bm-btn--outline-dark { --bm-btn-bg: transparent; --bm-btn-color: var(--bm-black); --bm-btn-border: var(--bm-black); }
.bm-btn--outline-dark:hover, .bm-btn--outline-dark:focus-visible { --bm-btn-bg: var(--bm-black); --bm-btn-color: var(--bm-white); }

.bm-btn--outline-light { --bm-btn-bg: transparent; --bm-btn-color: var(--bm-white); --bm-btn-border: var(--bm-white); }
.bm-btn--outline-light:hover, .bm-btn--outline-light:focus-visible { --bm-btn-bg: var(--bm-white); --bm-btn-color: var(--bm-black); }

.bm-btn--sm {
	padding: 1rem 1.75rem;
	font-size: 0.75rem;
}

.bm-btn:focus-visible {
	outline: 3px solid var(--bm-white);
	outline-offset: 3px;
}

/* clip-path leikkaisi fokusrenkaan — näytetään se sisäpuolella */
.bm-btn--red:focus-visible,
.bm-btn--dark:focus-visible {
	outline: 0;
	box-shadow: inset 0 0 0 3px var(--bm-red), inset 0 0 0 5px var(--bm-black);
}

.bm-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* "LUE LISÄÄ →" */
.bm-more {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5rem;
	color: var(--bm-red);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.bm-more__arrow {
	font-size: 0.8125rem;
	transition: transform 0.2s ease;
}

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

.bm-header {
	position: sticky;
	top: 0;
	z-index: 1030;
	background: var(--bm-black);
	border-bottom: 1px solid var(--bm-line);
}

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

@media (max-width: 782px) {
	.admin-bar .bm-header { top: 0; position: relative; }
}

.bm-nav {
	padding: 0;
	background: none;
}

.bm-nav__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	width: min(var(--bm-wide), 100% - 2 * var(--bm-gutter));
	min-height: var(--louhos-header-height);
	margin-inline: auto;
	padding-block: 1.5rem;
	transition: padding 0.25s ease, min-height 0.25s ease;
}

.bm-brand {
	margin: 0;
	padding: 0;
}

.bm-brand__img {
	display: block;
	width: auto;
	height: 47px;
	transition: height 0.25s ease;
}

.bm-nav__toggler {
	padding: 0.5rem;
	border: 0;
	color: var(--bm-white);
	font-size: 1.5rem;
}

.bm-menu {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bm-menu__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.bm-menu__link {
	position: relative;
	color: var(--bm-white);
	font-family: var(--bm-font-display);
	font-size: 1.1875rem;
	letter-spacing: 0.08em;
	line-height: normal;
	text-decoration: none;
	text-transform: uppercase;
}

.bm-menu__link:hover,
.bm-menu__link:focus-visible,
.bm-menu__item.is-active > .bm-menu__link {
	color: var(--bm-red);
}

.bm-menu__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.25rem;
	border: 0;
	background: none;
	color: var(--bm-red);
}

.bm-menu__toggle .bm-icon { transition: transform 0.2s ease; }
.bm-menu__toggle[aria-expanded="true"] .bm-icon { transform: rotate(180deg); }

.bm-submenu {
	margin: 0;
	padding: 0.5rem;
	list-style: none;
	background: var(--bm-noise), var(--bm-coal-dark);
	border: 1px solid var(--bm-line-steel);
	border-top: 3px solid var(--bm-red);
}

/* Alavalikon kohta: kuvake/nuoli, teksti ja hoverissa liukuva nuoli */
.bm-submenu__link {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 0.75rem;
	color: var(--bm-white);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.bm-submenu__icon {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	opacity: 0.85;
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.bm-submenu__bullet {
	display: inline-flex;
	flex: 0 0 32px;
	justify-content: center;
	color: var(--bm-red);
}

.bm-submenu__label { flex: 1 1 auto; }

.bm-submenu__go {
	display: inline-flex;
	color: var(--bm-red);
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.bm-submenu__link:hover,
.bm-submenu__link:focus-visible,
.bm-submenu__link[aria-current="page"] {
	background: rgba(var(--louhos-primary-rgb), 0.1);
	box-shadow: inset 3px 0 0 var(--bm-red);
	color: var(--bm-white);
}

.bm-submenu__link:hover .bm-submenu__icon,
.bm-submenu__link:focus-visible .bm-submenu__icon,
.bm-submenu__link[aria-current="page"] .bm-submenu__icon { opacity: 1; transform: scale(1.06); }

.bm-submenu__link:hover .bm-submenu__go,
.bm-submenu__link:focus-visible .bm-submenu__go,
.bm-submenu__link[aria-current="page"] .bm-submenu__go { opacity: 1; transform: none; }

.bm-submenu__link:focus-visible { outline: 2px solid var(--bm-white); outline-offset: -2px; }

@media (min-width: 1200px) {
	.bm-nav__collapse {
		display: flex;
		flex: 1 1 auto;
		align-items: center;
		justify-content: space-between;
	}

	.bm-panel__head,
	.bm-panel__contact { display: none; }

	.bm-menu {
		flex: 1 1 auto;
		justify-content: center;
		gap: 2rem;
	}

	.bm-menu__toggle { padding: 0.25rem 0; }

	.bm-submenu {
		position: absolute;
		top: 100%;
		left: -1.25rem;
		z-index: 10;
		min-width: 17.5rem;
		margin-top: 1.25rem;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
		/* Viistetty kulma kuten painikkeissa */
		clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
		box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
	}

	.bm-submenu__link { white-space: nowrap; }

	/* Päävalikon hover: punainen viiva kasvaa tekstin alle vasemmalta */
	.bm-menu__link::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: -8px;
		left: 0;
		height: 2px;
		background: var(--bm-red);
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 0.22s ease;
	}

	.bm-menu__link:hover::after,
	.bm-menu__link:focus-visible::after,
	.bm-menu__item.is-active > .bm-menu__link::after,
	.bm-menu__item.has-children:hover > .bm-menu__link::after,
	.bm-menu__item.is-open > .bm-menu__link::after { transform: scaleX(1); }

	.bm-menu__item.has-children:hover > .bm-menu__link { color: var(--bm-red); }
	.bm-menu__item.has-children:hover > .bm-menu__toggle .bm-icon { transform: rotate(180deg); }

	/* Silta kursorille linkin ja pudotusvalikon väliin */
	.bm-submenu::before {
		content: "";
		position: absolute;
		inset: -1.5rem 0 100%;
	}

	.bm-menu__item.has-children:hover > .bm-submenu,
	.bm-menu__item.is-open > .bm-submenu {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
}

/* --- Sivupaneeli alle 1200px (Bootstrap offcanvas-xl) -------------------- */
@media (max-width: 1199.98px) {
	.bm-nav__collapse.offcanvas-xl {
		/* Ei koko ruudun levyinen: sivua jää näkyviin, napautus sulkee paneelin */
		--bs-offcanvas-width: min(400px, calc(100vw - 56px));
		--bs-offcanvas-bg: var(--bm-black);
		--bs-offcanvas-color: var(--bm-white);
		--bs-offcanvas-border-width: 0;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		background: var(--bm-noise), var(--bm-black);
		border-left: 4px solid var(--bm-red);
	}

	/* Header on sticky (oma pinoamiskonteksti), joten paneeli nostetaan
	   headerin mukana Bootstrapin taustaverhon yli ja himmennys piirretään
	   paneelin varjolla — se peittää myös headerin. */
	.bm-header:has(.offcanvas-xl.show, .offcanvas-xl.showing, .offcanvas-xl.hiding) { z-index: 1050; }
	.bm-nav__collapse.show,
	.bm-nav__collapse.showing { box-shadow: 0 0 0 100vmax rgba(10, 10, 10, 0.7); }
	.offcanvas-backdrop.show { opacity: 0; }

	.bm-panel__head {
		display: flex;
		flex-shrink: 0;
		align-items: center;
		justify-content: space-between;
		min-height: var(--louhos-header-height);
		padding: 14px var(--bm-gutter);
		border-bottom: 1px solid var(--bm-line);
	}

	.bm-panel__close {
		position: relative;
		width: 40px;
		height: 40px;
		margin-right: -8px;
		padding: 0;
		border: 0;
		background: none;
	}

	.bm-panel__close::before,
	.bm-panel__close::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 8px;
		width: 24px;
		height: 3px;
		background: var(--bm-white);
		transform: rotate(45deg);
	}

	.bm-panel__close::after {
		background: var(--bm-red);
		transform: rotate(-45deg);
	}

	.bm-panel__close:focus-visible { outline: 2px solid var(--bm-white); outline-offset: 2px; }

	.bm-menu {
		flex-direction: column;
		padding: 0.5rem var(--bm-gutter) 1.5rem;
	}

	.bm-menu__item {
		flex-wrap: wrap;
		justify-content: space-between;
		border-bottom: 1px solid var(--bm-line);
	}

	.bm-menu__link {
		padding-block: 1rem;
		font-size: 1.75rem; /* 28px — sama kuin Figman listaotsikot */
		letter-spacing: 0.04em;
	}

	.bm-menu__item.is-active > .bm-menu__link {
		padding-left: 0.875rem;
		box-shadow: inset 3px 0 0 var(--bm-red);
	}

	.bm-menu__toggle {
		width: 44px;
		height: 44px;
		margin-right: -12px;
	}

	.bm-menu__toggle .bm-icon svg {
		width: 13px;
		height: auto;
	}

	.bm-submenu {
		display: none;
		flex-basis: 100%;
		margin: 0 0 1rem;
		padding: 0.375rem;
		border: 1px solid var(--bm-line-steel);
		border-top: 2px solid var(--bm-red);
	}

	.bm-submenu__link {
		padding: 0.5rem 0.625rem;
		font-size: 0.9375rem;
	}

	/* Kosketusnäytöillä nuoli näkyy aina (ei hoveria) */
	.bm-submenu__go { opacity: 0.8; transform: none; }

	.bm-menu__item.is-open > .bm-submenu { display: block; }

	.bm-nav__collapse .bm-nav__cta {
		align-self: stretch;
		justify-content: center;
		width: auto;
		margin: 0 var(--bm-gutter);
	}

	.bm-panel__contact {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
		margin-top: auto;
		padding: 2rem var(--bm-gutter) 1.75rem;
	}

	.bm-panel__phone {
		color: var(--bm-white);
		font-family: var(--bm-font-display);
		font-size: 2.25rem;
		line-height: 1.02;
		text-decoration: none;
	}

	.bm-panel__phone:hover,
	.bm-panel__phone:focus-visible { color: var(--bm-red); }
}

/* ==========================================================================
   Hero (betomik/image-hero) — V2: täysleveä kuva, häivytys, rae, varoitusraita
   ========================================================================== */

.bm-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	overflow: hidden;
	background: var(--bm-coal-dark);
	color: var(--bm-text);
}

.bm-hero__media {
	position: absolute;
	inset: 0;
	z-index: -3;
}

.bm-hero__img,
.bm-hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bm-hero__video { position: absolute; inset: 0; }
.bm-hero__video + .bm-hero__img { display: none; }

@media (prefers-reduced-motion: reduce) {
	.bm-hero__video { display: none; }
	.bm-hero__video + .bm-hero__img { display: block; }
}

@media (min-width: 992px) {
	.bm-hero { min-height: min(900px, calc(100svh - var(--louhos-header-height))); }
}

/* Figma: Overlay (vasemmalta oikealle) + Rakeisuus */
.bm-hero__shade {
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		var(--bm-noise),
		linear-gradient(to right, rgba(18, 18, 18, 0.97) 0%, rgba(18, 18, 18, 0.85) 50%, rgba(18, 18, 18, 0.5) 100%);
}

.bm-hero__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 3rem;
	width: min(var(--bm-wide), 100% - 2 * var(--bm-gutter));
	margin-inline: auto;
	padding-block: clamp(3.5rem, 7vw, 6.875rem) calc(clamp(3rem, 6vw, 6rem) + 14px);
}

/* Katkoviivaruudukko (Figma: Grid line ×4, valkoinen 12 %) */
.bm-hero__grid {
	position: absolute;
	inset: 0 auto 14px calc(-1 * (100vw - 100%) / 2);
	width: min(960px, 100vw);
	z-index: -1;
	pointer-events: none;
	--bm-grid-line: rgba(255, 255, 255, 0.12);
	background:
		linear-gradient(to bottom, var(--bm-grid-line) 50%, transparent 50%) 310px 0 / 1px 8px repeat-y,
		linear-gradient(to bottom, var(--bm-grid-line) 50%, transparent 50%) 620px 0 / 1px 8px repeat-y,
		linear-gradient(to right, var(--bm-grid-line) 50%, transparent 50%) 0 200px / 8px 1px repeat-x,
		linear-gradient(to right, var(--bm-grid-line) 50%, transparent 50%) 0 580px / 8px 1px repeat-x;
}

.bm-hero__top,
.bm-hero__bottom {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.bm-hero__top { gap: 1.25rem; }
.bm-hero__bottom { gap: 1.75rem; }

.bm-hero__title {
	max-width: 900px;
	margin: 0;
	color: var(--bm-white);
	font-family: var(--bm-font-display);
	font-size: clamp(3.75rem, 7.9vw, 9.5rem); /* 152px */
	font-weight: 400;
	line-height: 1.02;
	text-transform: uppercase;
}

.bm-hero__text {
	max-width: 30rem;
	margin: 0;
	color: var(--bm-text);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.5;
}

/* Varoitusraita (Figma: 30° kallistetut #2c2c2c-palkit 40px välein) */
.bm-hazard {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 14px;
	background: repeating-linear-gradient(-60deg, var(--bm-steel) 0 20px, var(--bm-black) 20px 40px);
}

/* ==========================================================================
   Tunnusluvut (betomik/stats)
   ========================================================================== */

.bm-stats {
	background: var(--bm-noise), var(--bm-coal);
	border-bottom: 1px solid var(--bm-line);
}

.bm-stats__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-block: 0;
}

.bm-stats__item {
	position: relative;
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: 0.375rem;
	padding: 2.25rem 1rem 2.25rem 1.5rem;
}

/* Punainen pystypalkki luvun vieressä */
.bm-stats__item::before {
	content: "";
	position: absolute;
	top: 40px;
	left: 0;
	width: 3px;
	height: 48px;
	background: var(--bm-red);
}

.bm-stats__value {
	margin: 0;
	color: var(--bm-white);
	font-family: var(--bm-font-display);
	font-size: clamp(2.75rem, 3vw, 3.5rem); /* 56px */
	line-height: 1.02;
	text-transform: uppercase;
}

.bm-stats__label {
	color: var(--bm-text);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

@media (min-width: 992px) {
	.bm-stats__list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
	.bm-stats__item { padding-right: 2.5rem; }
}

@media (min-width: 1400px) {
	.bm-stats__label { white-space: nowrap; }
}

/* ==========================================================================
   Korttiruudukko (betomik/card-grid)
   ========================================================================== */

.bm-cards { background: var(--bm-noise), var(--bm-coal-dark); }
.bm-cards--4 { background: var(--bm-noise), var(--bm-coal); }

.bm-cards .bm-head { margin-bottom: 3.5rem; }

.bm-cards__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.bm-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
	/* 3 saraketta 6-osaisella ruudukolla: vajaa viimeinen rivi (2 korttia)
	   levenee koko leveydelle kuten Figman V2:ssa. */
	.bm-cards--3 .bm-cards__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.bm-cards--3 .bm-card { grid-column: span 2; }
	.bm-cards--3 .bm-card:nth-child(3n + 1):nth-last-child(2),
	.bm-cards--3 .bm-card:nth-child(3n + 2):last-child { grid-column: span 3; }
	.bm-cards--3 .bm-card:nth-child(3n + 1):last-child { grid-column: span 6; }

	.bm-cards--4 .bm-cards__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.bm-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--bm-line-steel);
	background: var(--bm-coal);
	transition: border-color 0.2s ease;
}

.bm-cards--4 .bm-card { background: var(--bm-coal-dark); }

.bm-card__img {
	display: block;
	width: 100%;
	height: 260px;
	object-fit: cover;
}

.bm-cards--4 .bm-card__img { height: 220px; }

/* Figma: Kuvan varjostus */
.bm-card__shade {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 260px;
	background: linear-gradient(to bottom, rgba(18, 18, 18, 0) 0%, rgba(18, 18, 18, 0.75) 100%);
	pointer-events: none;
}

.bm-cards--4 .bm-card__shade { display: none; }

.bm-card__icon {
	position: absolute;
	top: 19px;
	left: 19px;
	z-index: 1;
}

.bm-card__badge {
	position: absolute;
	top: 15px;
	left: 15px;
	z-index: 1;
	padding: 0.5rem 0.75rem;
	background: var(--bm-red);
	color: var(--bm-black);
	font-family: var(--bm-font-display);
	font-size: 1.375rem;
	line-height: 1.02;
}

.bm-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.625rem;
	/* Figma: Aksentti — 4px punainen reunus tekstiosan vasemmalla. Reunuksena
	   eikä absoluuttisena palkkina, jotta tekstiosa ei ole position-konteksti:
	   otsikon stretched-link peittää silloin koko kortin kuvineen. */
	padding: 1.5rem 1.75rem 1.75rem calc(1.75rem - 4px);
	border-left: 4px solid var(--bm-red);
}

.bm-cards--4 .bm-card__body { padding: 1.5rem 1.5rem 1.5rem calc(1.5rem - 4px); }


.bm-card__title {
	margin: 0;
	color: var(--bm-white);
	font-family: var(--bm-font-display);
	font-size: 2.125rem; /* 34px */
	font-weight: 400;
	line-height: 1.02;
	text-transform: uppercase;
}

.bm-cards--4 .bm-card__title { font-size: 2rem; } /* 32px */

.bm-card__title a {
	color: inherit;
	text-decoration: none;
}

.bm-card__text {
	max-width: 300px;
	margin: 0;
	color: var(--bm-text);
	font-size: 0.875rem;
	line-height: 1.6;
}

.bm-cards--3 .bm-card:nth-child(1) .bm-card__text { max-width: none; }
.bm-cards--4 .bm-card__text { max-width: none; }

.bm-card .bm-more { margin-top: auto; padding-top: 0.375rem; }

.bm-card:hover,
.bm-card:focus-within { border-color: var(--bm-red); }
.bm-card:hover .bm-more__arrow,
.bm-card:focus-within .bm-more__arrow { transform: translateX(3px); }

.bm-card:focus-within { outline: 2px solid var(--bm-white); outline-offset: 2px; }
.bm-card .stretched-link:focus-visible { outline: 0; }

/* ==========================================================================
   Prosessi (betomik/process)
   ========================================================================== */

.bm-process { background: var(--bm-noise), var(--bm-coal); }

.bm-process .bm-head { margin-bottom: 4rem; }

.bm-process__steps {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bm-process__step {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	padding-top: 1.25rem;
}

.bm-process__bar {
	width: 40px;
	height: 3px;
	background: var(--bm-line-steel);
}

.bm-process__step:first-child .bm-process__bar {
	width: 80px;
	background: var(--bm-red);
}

/* Ensimmäinen numero täytetty, muut ääriviivoina (Figma V2) */
.bm-process__num {
	color: transparent;
	font-family: var(--bm-font-display);
	font-size: clamp(5rem, 6.25vw, 7.5rem); /* 120px */
	line-height: 1.02;
	-webkit-text-stroke: 1px var(--bm-outline);
	transition: color 0.2s ease, -webkit-text-stroke-color 0.2s ease;
}

.bm-process__step:first-child .bm-process__num {
	color: var(--bm-red);
	-webkit-text-stroke: 0;
}

/* Hover: ääriviivanumero täyttyy punaiseksi (vain hiirellä, ei kosketusnäytöillä) */
@media (hover: hover) {
	.bm-process__step:hover .bm-process__num {
		color: var(--bm-red);
		-webkit-text-stroke-color: var(--bm-red);
	}
}

.bm-process__title {
	margin: 0;
	color: var(--bm-white);
	font-family: var(--bm-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.bm-process__text {
	margin: 0;
	color: var(--bm-text);
	font-size: 0.875rem;
	line-height: 1.6;
}

@media (min-width: 992px) {
	.bm-process__steps {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		gap: 0;
	}

	.bm-process__step { padding-inline: 1.5rem; }
	.bm-process__step:first-child { padding-left: 0; }
}

/* Alle 992px viisi vaihetta ei mahdu riviin: pystylista, numero vasemmalla
   (Figma: Mobiili V2 → Prosessi). Mobiilin koot tarkennetaan alempana. */
@media (max-width: 991.98px) {
	.bm-process__steps { gap: 0; }

	.bm-process__step {
		display: grid;
		grid-template-columns: 4.5rem minmax(0, 1fr);
		grid-template-areas: "num title" "num text";
		column-gap: 18px;
		row-gap: 4px;
		align-content: start;
		padding: 20px 0;
		border-top: 1px solid var(--bm-line);
	}

	.bm-process__step:first-child { border-top: 2px solid var(--bm-red); }
	.bm-process__bar { display: none; }
	.bm-process__num { grid-area: num; font-size: 4rem; }
	.bm-process__title { grid-area: title; align-self: end; padding-top: 6px; }
	.bm-process__text { grid-area: text; }
}

/* ==========================================================================
   Kohderyhmät (betomik/audiences)
   ========================================================================== */

.bm-audiences {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	background: var(--bm-noise), var(--bm-coal-dark);
}

.bm-audiences__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.bm-audiences__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 0 35%;
}

.bm-audiences__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2.5rem;
	padding: var(--bm-section-y) var(--bm-gutter);
}

.bm-audiences__content .bm-head + .bm-lead {
	margin-top: -1.5rem; /* Figma: ingressi 16px otsikon alla, osiot 40px */
}

.bm-audiences__list {
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--bm-line);
}

.bm-audiences__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding-block: 1.25rem;
	border-bottom: 1px solid var(--bm-line);
}

.bm-audiences__num {
	color: var(--bm-text-steel);
	font-family: var(--bm-font-display);
	font-size: 2rem;
	line-height: 1.02;
}

.bm-audiences__text {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 0.25rem;
}

.bm-audiences__title {
	margin: 0;
	color: var(--bm-white);
	font-family: var(--bm-font-display);
	font-size: 1.75rem;
	font-weight: 400;
	line-height: 1.02;
	text-transform: uppercase;
}

.bm-audiences__title a {
	color: inherit;
	text-decoration: none;
}

.bm-audiences__text p {
	margin: 0;
	color: var(--bm-text);
	font-size: 0.875rem;
}

.bm-audiences__arrow {
	color: var(--bm-red);
	font-size: 1.25rem;
	font-weight: 600;
	transition: transform 0.2s ease;
}

.bm-audiences__item:hover .bm-audiences__title,
.bm-audiences__item:focus-within .bm-audiences__title { color: var(--bm-red); }
.bm-audiences__item:hover .bm-audiences__num { color: var(--bm-red); }
.bm-audiences__item:hover .bm-audiences__arrow,
.bm-audiences__item:focus-within .bm-audiences__arrow { transform: translateX(4px); }

@media (min-width: 992px) {
	.bm-audiences {
		grid-template-columns: 41.04% minmax(0, 1fr); /* 788 / 1920 */
	}

	.bm-audiences__media { aspect-ratio: auto; }

	.bm-audiences__content {
		padding-left: clamp(2.5rem, 4.2vw, 5rem);
		padding-right: max(var(--bm-gutter), (100vw - var(--bm-content)) / 2);
	}
}

/* ==========================================================================
   CTA-nauha (betomik/cta-band) — V2: tumma, taustakuva, punainen yläreuna
   ========================================================================== */

.bm-cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(3rem, 5vw, 4.5rem);
	background: var(--bm-coal-dark);
	border-top: 6px solid var(--bm-red);
}

.bm-cta__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bm-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(23, 23, 23, 0.92);
}

.bm-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2rem;
}

.bm-cta__text {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.bm-cta__title {
	margin: 0;
	color: var(--bm-white);
	font-family: var(--bm-font-display);
	font-size: clamp(2.75rem, 3.4vw, 4rem); /* 64px */
	font-weight: 400;
	line-height: 1.02;
	text-transform: uppercase;
}

.bm-cta__lead {
	margin: 0;
	color: var(--bm-text);
	font-size: 0.9375rem;
}

@media (min-width: 992px) {
	.bm-cta__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* ==========================================================================
   Yhteydenotto (betomik/contact-form)
   ========================================================================== */

.bm-contact { background: var(--bm-noise), var(--bm-coal-dark); }

.bm-contact__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 3rem;
}

.bm-contact__info {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

.bm-contact__info .bm-head + .bm-lead { margin-top: -1.5rem; }

.bm-order {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 1.75rem;
	background: var(--bm-black);
	border: 1px solid var(--bm-line);
}

.bm-order::after {
	content: "";
	position: absolute;
	top: -1px;
	right: -1px;
	width: 14px;
	height: 14px;
	background: var(--bm-red);
	clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.bm-order__label {
	margin: 0;
	color: var(--bm-text);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.bm-order__phone {
	color: var(--bm-red);
	font-family: var(--bm-font-display);
	font-size: 3rem;
	line-height: 1.02;
	text-decoration: none;
}

.bm-order__phone:hover, .bm-order__phone:focus-visible { color: var(--bm-white); }

.bm-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background: var(--bm-coal);
	border: 1px solid var(--bm-line-steel);
}

.bm-form__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
}

.bm-field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.bm-field label {
	color: var(--bm-text);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.bm-field__req { color: var(--bm-red); }

.bm-field input,
.bm-field select,
.bm-field textarea {
	width: 100%;
	padding: 1rem;
	border: 1px solid var(--bm-line);
	border-radius: 0;
	background: var(--bm-black);
	color: var(--bm-white);
	font-family: var(--bm-font-body);
	font-size: 0.875rem;
	line-height: normal;
	appearance: none;
}

.bm-field textarea {
	min-height: 140px;
	resize: vertical;
}

.bm-field select {
	padding-right: 2.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 9.25 5.75' fill='none'%3E%3Cpath d='M1.125 1.125L4.625 4.625L8.125 1.125' stroke='%237c7873' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	color: var(--bm-white);
}

.bm-field select:invalid,
.bm-field select:has(option[value=""]:checked) { color: var(--bm-text-dim); }

.bm-field ::placeholder {
	color: var(--bm-text-dim);
	opacity: 1;
}

.bm-field input:focus,
.bm-field select:focus,
.bm-field textarea:focus {
	border-color: var(--bm-red);
	outline: 2px solid var(--bm-red);
	outline-offset: -2px;
}

.bm-field__control { position: relative; }

.bm-field__control .bm-icon {
	position: absolute;
	top: 50%;
	left: 1rem;
	color: var(--bm-text-dim);
	transform: translateY(-50%);
}

.bm-field__control input { padding-left: 2.25rem; }

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

.bm-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
}

.bm-form__consent {
	margin: 0;
	color: var(--bm-text-dim);
	font-size: 0.75rem;
}

.bm-form__consent a { color: inherit; text-decoration: none; }
.bm-form__consent a:hover { color: var(--bm-white); }

.bm-form__notice {
	margin: 0;
	padding: 1rem 1.25rem;
	border-left: 3px solid;
	background: var(--bm-black);
	color: var(--bm-white);
	font-size: 0.9375rem;
}

.bm-form__notice--ok { border-color: #3fb950; }
.bm-form__notice--error { border-color: var(--bm-red); }

@media (min-width: 640px) {
	.bm-form__row { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1200px) {
	.bm-contact__inner {
		grid-template-columns: 460px 1fr;
		gap: 5rem;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */

.bm-footer {
	padding: 5rem 0 2rem;
	background: var(--bm-black);
	border-top: 1px solid var(--bm-line);
	color: var(--bm-text);
	font-size: 0.875rem;
}

.bm-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 3rem 4rem;
	margin-bottom: clamp(4rem, 8vw, 8.75rem);
}

.bm-footer__company {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.bm-footer__logo img {
	display: block;
	width: 220px;
	height: auto;
}

.bm-footer__company p {
	margin: 0;
	line-height: 1.7;
}

.bm-footer__col,
.bm-footer__order {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
}

.bm-footer__col ul {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bm-footer__col a {
	color: var(--bm-white);
	text-decoration: none;
}

@media (min-width: 1200px) {
	.bm-footer__col a { white-space: nowrap; }
}

.bm-footer__col a:hover,
.bm-footer__col a:focus-visible,
.bm-footer__col a[aria-current="page"] { color: var(--bm-red); }

.bm-footer__phone {
	color: var(--bm-white);
	font-family: var(--bm-font-display);
	font-size: 2.25rem;
	line-height: 1.02;
	text-decoration: none;
}

.bm-footer__phone:hover, .bm-footer__phone:focus-visible { color: var(--bm-red); }

.bm-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 35px;
	height: 35px;
	border: 0.8px solid var(--bm-red-dark);
	border-radius: 3.6px;
	color: var(--bm-text);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.bm-social:hover, .bm-social:focus-visible { background: var(--bm-red); color: var(--bm-black); }

.bm-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--bm-line);
	color: var(--bm-text-dim);
}

.bm-footer__bottom p { margin: 0; }

.bm-footer__bottom a {
	color: var(--bm-red);
	font-weight: 600;
	text-decoration: none;
}

.bm-footer__bottom a:hover, .bm-footer__bottom a:focus-visible { text-decoration: underline; }

@media (min-width: 640px) {
	.bm-footer__top { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
	.bm-footer__top { grid-template-columns: minmax(0, 360px) repeat(3, auto) auto; justify-content: space-between; }
}

/* ==========================================================================
   Hampurilaisvalikko, mobiilin nuolet ja siirretty painike (perustilat)
   ========================================================================== */

/* Figma: Header – mobile → Menu (valkoinen / punainen lyhyt / valkoinen) */
.bm-burger {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 5px;
	padding-block: 4px;
}

.bm-burger span {
	display: block;
	width: 24px;
	height: 3px;
	background: var(--bm-white);
	transition: transform 0.2s ease, opacity 0.2s ease, width 0.2s ease;
}

.bm-burger span:nth-child(2) {
	width: 16px;
	background: var(--bm-red);
}


.bm-nav__toggler:focus { box-shadow: none; }
.bm-nav__toggler:focus-visible { outline: 2px solid var(--bm-white); outline-offset: 2px; }

.bm-more .bm-icon,
.bm-card__arrow,
.bm-cards__foot { display: none; }

.bm-audiences__arrow .bm-icon { display: block; }

/* ==========================================================================
   Mobiili (Figma: Mobiili V2 → MOBILE_Etusivu v2, 390px)
   ========================================================================== */

@media (max-width: 767.98px) {
	:root {
		--bm-gutter: 20px;
		--bm-section-y: 64px;
		--bm-chamfer: 10px;
		--louhos-header-height: 64px;
	}

	/* --- Yhteiset ------------------------------------------------------ */
	.bm-eyebrow { font-size: 0.6875rem; letter-spacing: 0.12em; } /* 11px */
	.bm-head { gap: 0.75rem; }
	.bm-head__main { gap: 0.75rem; }
	.bm-title--xl,
	.bm-title--lg { font-size: 3rem; } /* 48px */
	.bm-lead,
	.bm-head__aside { font-size: 0.9375rem; } /* 15px */

	.bm-btn {
		justify-content: center;
		width: 100%;
		padding: 1rem 1.5rem;
		font-size: 0.75rem;
		letter-spacing: 0.08em;
	}

	.bm-btn--red,
	.bm-btn--dark { padding: calc(1rem + 2px) calc(1.5rem + 2px); }

	.bm-buttons { flex-direction: column; gap: 0.625rem; width: 100%; }

	/* --- Header -------------------------------------------------------- */
	.bm-nav__inner { padding-block: 14px; min-height: 64px; }
	.bm-brand__img { height: 31px; }
	.bm-nav__toggler { padding: 0.5rem 0 0.5rem 0.5rem; }

	/* --- Hero ---------------------------------------------------------- */
	.bm-hero { min-height: 640px; }

	.bm-hero__shade {
		background:
			var(--bm-noise),
			linear-gradient(to bottom, rgba(18, 18, 18, 0.55) 0%, rgba(18, 18, 18, 0.9) 45%, rgba(18, 18, 18, 0.97) 100%);
	}

	.bm-hero__inner {
		justify-content: flex-end;
		gap: 1.25rem;
		padding-block: 140px calc(40px + 10px);
	}

	.bm-hero__top,
	.bm-hero__bottom { gap: 1.25rem; }

	/* Yksi pystysuora katkoviiva tekstin vasemmassa reunassa */
	.bm-hero__grid {
		inset: 0 auto 76px 0;
		width: 1px;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0.12) 50%, transparent 50%) 0 0 / 1px 8px repeat-y;
	}

	.bm-eyebrow--line { font-size: 0.625rem; }  /* 10px */
	.bm-eyebrow--line::before { display: none; }

	.bm-hero__title { font-size: 4.25rem; } /* 68px */
	.bm-hero__text { line-height: 1.55; }

	.bm-hazard {
		height: 10px;
		background: repeating-linear-gradient(-60deg, var(--bm-steel) 0 14px, var(--bm-black) 14px 28px);
	}

	/* --- Tunnusluvut --------------------------------------------------- */
	.bm-stats { padding-block: 8px; }
	.bm-stats__item { gap: 0.25rem; padding: 20px 12px 20px 14px; }
	.bm-stats__item::before { top: 22px; height: 36px; }
	.bm-stats__value { font-size: 2.5rem; } /* 40px */
	.bm-stats__label { font-size: 0.625rem; letter-spacing: 0.08em; }

	/* --- Palvelut: vaakakortit ---------------------------------------- */
	.bm-cards .bm-head { margin-bottom: 1.75rem; }

	.bm-cards--3 .bm-cards__grid { grid-template-columns: minmax(0, 1fr); gap: 7px; }

	.bm-cards--3 .bm-card {
		flex-direction: row;
		align-items: center;
		padding-right: 16px;
		background: var(--bm-coal-dark);
	}

	.bm-cards--3 .bm-card__img {
		flex: 0 0 110px;
		align-self: stretch;
		width: 110px;
		height: auto;
		min-height: 72px;
	}

	.bm-cards--3 .bm-card__shade { display: none; }

	.bm-cards--3 .bm-card__icon {
		top: 7px;
		left: 7px;
		width: 32px;
		height: 32px;
	}

	.bm-cards--3 .bm-card__body {
		flex: 1 1 auto;
		gap: 2px;
		padding: 14px 12px 14px 14px;
	}


	.bm-cards--3 .bm-card__title { font-size: 1.5rem; } /* 24px */
	.bm-cards--3 .bm-card__text { max-width: none; font-size: 0.8125rem; line-height: 1.5; }
	.bm-cards--3 .bm-more { display: none; }

	.bm-card__arrow {
		display: block;
		flex-shrink: 0;
		color: var(--bm-red);
	}

	/* --- Kalusto: 2 × 2 ------------------------------------------------ */
	.bm-cards--4 .bm-head { margin-bottom: 1.5rem; }
	.bm-cards--4 .bm-head__aside { display: none; }
	.bm-cards--4 .bm-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.bm-cards--4 .bm-card__img { height: 120px; }
	.bm-cards--4 .bm-card__body { gap: 6px; padding: 12px 14px 14px 10px; }
	.bm-cards--4 .bm-card__title { font-size: 1.375rem; } /* 22px */
	.bm-cards--4 .bm-card__text { display: none; }
	.bm-cards--4 .bm-card__badge { top: 9px; left: 9px; padding: 4px 8px; font-size: 1.125rem; }

	.bm-cards--4 .bm-more { gap: 6px; padding-top: 0; font-size: 0.625rem; }
	.bm-cards--4 .bm-more__arrow { display: none; }
	.bm-cards--4 .bm-more .bm-icon { display: block; }

	.bm-cards__foot { display: block; margin-top: 1.5rem; }
	.bm-cards--4 .bm-card__arrow { display: none; }

	/* --- Prosessi: pystylista ------------------------------------------ */
	.bm-process .bm-head { margin-bottom: 1.75rem; }
	.bm-process .bm-title { font-size: 2.75rem; } /* 44px */
	.bm-process .bm-title br { display: none; } /* Figma-mobiilissa otsikko rivittyy vapaasti */

	.bm-process__step { grid-template-columns: auto minmax(0, 1fr); padding: 18px 0; }
	.bm-process__num { font-size: 2.75rem; } /* 44px */
	.bm-process__title { font-size: 0.6875rem; }
	.bm-process__text { grid-area: text; font-size: 0.8125rem; line-height: 1.5; }

	/* --- Kohderyhmät --------------------------------------------------- */
	.bm-audiences__media { aspect-ratio: auto; height: 260px; }
	.bm-audiences__content { gap: 1.5rem; padding: 48px var(--bm-gutter) 64px; }
	.bm-audiences__content .bm-head + .bm-lead { margin-top: -0.75rem; }
	.bm-audiences__item { gap: 1rem; padding-block: 1rem; }
	.bm-audiences__num { color: var(--bm-red); font-size: 1.75rem; }
	.bm-audiences__title { font-size: 1.5rem; }
	.bm-audiences__text { gap: 2px; }
	.bm-audiences__text p { font-size: 0.8125rem; }

	/* --- CTA ----------------------------------------------------------- */
	.bm-cta { padding-block: 48px; border-top-width: 5px; }
	.bm-cta__inner { gap: 1.25rem; }
	.bm-cta__text { gap: 1.25rem; }
	.bm-cta__title { font-size: 2.75rem; } /* 44px */
	.bm-cta__lead { font-size: 0.875rem; line-height: 1.55; }

	/* --- Yhteydenotto -------------------------------------------------- */
	.bm-contact__inner { gap: 1.5rem; }
	.bm-contact__info { gap: 1.5rem; }
	.bm-contact__info .bm-head + .bm-lead { margin-top: -0.75rem; }
	.bm-order { gap: 6px; padding: 20px; border-color: var(--bm-line-steel); }
	.bm-order::after { display: none; }
	.bm-order__label { font-size: 0.625rem; }
	.bm-order__phone { font-size: 2.5rem; }
	.bm-mail--light { font-size: 0.875rem; }

	.bm-form { gap: 14px; padding: 24px 20px; }
	.bm-form__row { gap: 14px; }
	.bm-field { gap: 6px; }
	.bm-field label { font-size: 0.625rem; }
	.bm-field input,
	.bm-field select,
	.bm-field textarea { padding: 14px; }
	.bm-field__control input { padding-left: 2.25rem; }
	.bm-field textarea { min-height: 110px; }
	.bm-form__actions { flex-direction: column; align-items: stretch; gap: 14px; }
	.bm-form__consent { font-size: 0.6875rem; }

	/* --- Footer -------------------------------------------------------- */
	.bm-footer { padding: 48px 0 24px; font-size: 0.8125rem; }

	.bm-footer__top {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 24px;
		margin-bottom: 32px;
	}

	.bm-footer__company,
	.bm-footer__order { grid-column: 1 / -1; }
	.bm-footer__company { gap: 32px; }
	.bm-footer__logo img { width: 160px; }

	/* Figma-mobiilissa vain Palvelut- ja Yritys-sarakkeet (Kohderyhmät piiloon) */
	.bm-footer__col:nth-of-type(2) { display: none; }

	.bm-footer__col,
	.bm-footer__col ul { gap: 10px; }
	.bm-footer .bm-eyebrow { font-size: 0.625rem; }
	.bm-footer__phone { font-size: 2rem; }
	.bm-footer__order { gap: 8px; }
	.bm-social { width: 36px; height: 36px; margin-top: 24px; }

	.bm-footer__bottom {
		flex-direction: column;
		gap: 6px;
		padding-top: 16px;
		font-size: 0.6875rem;
	}

	.bm-footer__bottom a { color: inherit; font-weight: 400; }
}

/* ==========================================================================
   ALASIVUT (Figma: Desktop V2 → Palvelu – Betonipumppaus v2, Kalusto v2)
   ========================================================================== */

/* --- Alasivun hero (betomik/page-hero) ----------------------------------- */

.bm-phero {
	position: relative;
	isolation: isolate;
	display: flex;
	min-height: 585px; /* Figma 680 − header 95 */
	overflow: hidden;
	background: var(--bm-coal-dark);
}

.bm-phero__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bm-phero__shade {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		var(--bm-noise),
		linear-gradient(to right, rgba(18, 18, 18, 0.97) 0%, rgba(18, 18, 18, 0.85) 55%, rgba(18, 18, 18, 0.55) 100%);
}

.bm-phero__inner {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 3rem;
	padding-block: 75px calc(80px + 14px);
}

.bm-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bm-crumbs ol::before {
	content: "";
	width: 40px;
	height: 3px;
	background: var(--bm-red);
}

.bm-crumbs li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--bm-text);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.bm-crumbs li + li::before {
	content: "/";
	color: var(--bm-red);
	letter-spacing: 0;
}

.bm-crumbs a { color: inherit; text-decoration: none; }
.bm-crumbs a:hover, .bm-crumbs a:focus-visible { color: var(--bm-white); }
.bm-crumbs [aria-current] { color: var(--bm-white); }

.bm-phero__text {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.bm-phero__title {
	margin: 0;
	color: var(--bm-white);
	font-family: var(--bm-font-display);
	font-size: clamp(4rem, 7.5vw, 9rem); /* 144px */
	font-weight: 400;
	line-height: 1.02;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.bm-phero__lead {
	max-width: 600px;
	margin: 0;
	color: var(--bm-text);
	font-size: 1.125rem;
	line-height: 1.55;
}

/* --- Teksti + kuva (betomik/media-text) ---------------------------------- */

.bm-mt { background: var(--bm-noise), var(--bm-coal-dark); }

.bm-mt__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 3rem;
	align-items: center;
}

.bm-mt__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.75rem;
}

.bm-mt__title { font-size: clamp(2.75rem, 3.2vw + 0.5rem, 4rem); } /* 64px */

.bm-mt__body {
	color: var(--bm-text);
	font-size: 1rem;
	line-height: 1.65;
}

.bm-mt__body p { margin: 0 0 1.65em; }
.bm-mt__body p:last-child { margin-bottom: 0; }
.bm-mt__body a { color: var(--bm-white); }

.bm-mt__stats {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	width: 100%;
	margin: 0;
	border-block: 1px solid var(--bm-line);
}

.bm-mt__stat {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: 4px;
	padding: 20px 32px;
	border-left: 1px solid var(--bm-line);
}

.bm-mt__stat:first-child { padding-left: 0; border-left: 0; }

.bm-mt__stat dd {
	margin: 0;
	color: var(--bm-red);
	font-family: var(--bm-font-display);
	font-size: 2.75rem; /* 44px */
	line-height: 1.02;
	text-transform: uppercase;
	white-space: nowrap;
}

.bm-mt__stat dt {
	color: var(--bm-text);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.bm-mt__media {
	position: relative;
	overflow: hidden;
}

.bm-mt__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bm-mt__media--inline { display: none; }

/* Figma: 6px punainen palkki kuvan vasemmassa reunassa */
.bm-mt__media--side { aspect-ratio: 560 / 640; }
.bm-mt__media--side::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	width: 6px;
	background: var(--bm-red);
}

@media (min-width: 992px) {
	.bm-mt__inner { grid-template-columns: minmax(0, 1fr) minmax(0, min(560px, 42%)); gap: clamp(3rem, 5vw, 5rem); }
	.bm-mt--left .bm-mt__media--side { order: -1; }
}

@media (max-width: 991.98px) {
	.bm-mt__media--side { display: none; }
	.bm-mt__media--inline { display: block; width: 100%; aspect-ratio: 350 / 240; }
}

/* --- USP-lista (betomik/usp-list) ---------------------------------------- */

.bm-usp { background: var(--bm-noise), var(--bm-coal); }

.bm-usp .bm-head { margin-bottom: 3.5rem; }

@media (min-width: 992px) {
	.bm-usp p.bm-head__aside { flex: 0 1 420px; }
}

.bm-usp__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bm-usp__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	padding-top: 28px;
}

.bm-usp__item::before {
	content: "";
	width: 40px;
	height: 3px;
	background: var(--bm-red);
}

.bm-usp__num {
	color: transparent;
	font-family: var(--bm-font-display);
	font-size: clamp(4rem, 5vw, 6rem); /* 96px */
	line-height: 1.02;
	-webkit-text-stroke: 1px var(--bm-outline);
	transition: color 0.2s ease, -webkit-text-stroke-color 0.2s ease;
}

@media (hover: hover) {
	.bm-usp__item:hover .bm-usp__num { color: var(--bm-red); -webkit-text-stroke-color: var(--bm-red); }
}

.bm-usp__text {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.bm-usp__title {
	margin: 0;
	color: var(--bm-white);
	font-family: var(--bm-font-display);
	font-size: 1.875rem; /* 30px */
	font-weight: 400;
	line-height: 1.02;
	text-transform: uppercase;
}

.bm-usp__text p {
	margin: 0;
	color: var(--bm-text);
	font-size: 0.875rem;
	line-height: 1.6;
}

@media (min-width: 640px) {
	.bm-usp__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
}

@media (min-width: 1200px) {
	.bm-usp__list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1rem; }
}

/* --- Korttiruudukko: Nosto-tyyli (Katso myös) ---------------------------- */

.bm-cards--feature { background: var(--bm-noise), var(--bm-coal-dark); }
.bm-cards--feature .bm-head { margin-bottom: 3rem; }

@media (min-width: 992px) {
	.bm-cards--feature .bm-cards__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.bm-cards--feature .bm-card { background: var(--bm-coal-dark); }
.bm-cards--feature .bm-card__img { height: 240px; }
.bm-cards--feature .bm-card__shade,
.bm-cards--feature .bm-card__icon { display: none; }

.bm-cards--feature .bm-card__body {
	gap: 12px;
	padding: 28px 28px 28px 24px;
}

.bm-cards--feature .bm-card__text { max-width: none; }
/* Linkki kortin alareunaan: rivin kortit ovat yhtä korkeita (ruudukko venyttää). */
.bm-cards--feature .bm-more { margin-top: auto; padding-top: 8px; }
.bm-cards--feature .bm-more__arrow { display: none; }
.bm-cards--feature .bm-more .bm-icon { display: block; }

.bm-card__tag {
	padding: 6px 10px;
	background: var(--bm-red);
	color: var(--bm-black);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* --- UKK (betomik/faq) --------------------------------------------------- */

.bm-faq { background: var(--bm-noise), var(--bm-coal); }

.bm-faq__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2.5rem;
}

.bm-faq__head {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.bm-faq__lead {
	margin: 0;
	color: var(--bm-text);
	font-size: 0.9375rem;
	line-height: 1.6;
}

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

.bm-faq__q { margin: 0; }

.bm-faq__toggle {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	width: 100%;
	padding: 22px 0;
	border: 0;
	background: none;
	color: var(--bm-white);
	font-family: var(--bm-font-body);
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.35;
	text-align: left;
}

.bm-faq__toggle.collapsed { color: var(--bm-text); }
.bm-faq__toggle:hover,
.bm-faq__toggle:focus-visible { color: var(--bm-white); }
.bm-faq__toggle > span:first-child { flex: 1 1 auto; }

/* Figma: + harmaassa laatikossa / − punaisessa palkissa */
.bm-faq__icon {
	position: relative;
	flex: 0 0 27px;
	height: 16px;
	background: var(--bm-red);
	transition: background-color 0.2s ease;
}

.bm-faq__icon::before,
.bm-faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 11px;
	height: 1.8px;
	margin: -0.9px 0 0 -5.5px;
	border-radius: 1px;
	background: var(--bm-black);
}

.bm-faq__icon::after { transform: rotate(90deg) scaleX(0); transition: transform 0.2s ease; }

.bm-faq__toggle.collapsed .bm-faq__icon {
	height: 27px;
	background: var(--bm-black);
	box-shadow: inset 0 0 0 1px var(--bm-line);
}

.bm-faq__toggle.collapsed .bm-faq__icon::before,
.bm-faq__toggle.collapsed .bm-faq__icon::after { background: var(--bm-white); }
.bm-faq__toggle.collapsed .bm-faq__icon::after { transform: rotate(90deg); }

.bm-faq__a {
	padding: 0 80px 28px 0;
	color: var(--bm-text);
	font-size: 0.9375rem;
	line-height: 1.65;
}

.bm-faq__a p { margin: 0 0 1em; }
.bm-faq__a p:last-child { margin-bottom: 0; }
.bm-faq__a a { color: var(--bm-white); }

@media (min-width: 992px) {
	.bm-faq__inner { grid-template-columns: 420px minmax(0, 1fr); gap: 5rem; }
}

/* --- Sitaatti (betomik/quote) -------------------------------------------- */

.bm-quote {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(4.5rem, 8vw, 8.75rem);
	background: var(--bm-black);
}

.bm-quote__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bm-quote::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to right, rgba(15, 15, 15, 0.97) 0%, rgba(15, 15, 15, 0.85) 55%, rgba(15, 15, 15, 0.6) 100%);
}

.bm-quote__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2rem;
	margin-block: 0;
}

.bm-quote__mark {
	color: var(--bm-red);
	font-family: var(--bm-font-display);
	font-size: 10rem; /* 160px */
	line-height: 0.6;
	height: 0.45em;
}

.bm-quote__text { margin: 0; }

.bm-quote__text p {
	max-width: 1000px;
	margin: 0;
	color: var(--bm-white);
	font-family: var(--bm-font-display);
	font-size: clamp(2.5rem, 3.2vw, 3.75rem); /* 60px */
	line-height: 1.02;
	text-transform: uppercase;
}

.bm-quote__cite {
	display: flex;
	align-items: center;
	gap: 1rem;
	color: var(--bm-text);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.bm-quote__cite::before {
	content: "";
	flex: 0 0 40px;
	height: 2px;
	background: var(--bm-red);
}

/* --- Konelistaus (betomik/machine-list) ---------------------------------- */

.bm-machines {
	padding-block: 96px var(--bm-section-y);
	background: var(--bm-noise), var(--bm-coal-dark);
}

.bm-machines__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem 3rem;
	margin-bottom: 2.5rem;
}

.bm-machines__head .bm-head__main { gap: 0.75rem; }
.bm-machines__title { font-size: 4rem; } /* 64px */
.bm-machines__title-mob { display: none; }

.bm-machines__count {
	margin: 0;
	color: var(--bm-text);
	font-size: 0.875rem;
}

.bm-machines__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin-bottom: 2.5rem;
	padding-block: 24px;
	border-block: 1px solid var(--bm-line);
}

.bm-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bm-chip {
	padding: 10px 16px;
	border: 1px solid var(--bm-line-steel);
	background: none;
	color: var(--bm-white);
	font-family: var(--bm-font-body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: normal;
	text-transform: uppercase;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.bm-chip:hover { border-color: var(--bm-red); }
.bm-chip.is-active { border-color: var(--bm-red); background: var(--bm-red); color: var(--bm-black); }
.bm-chip:focus-visible { outline: 2px solid var(--bm-white); outline-offset: 2px; }

.bm-reach {
	display: flex;
	align-items: center;
	gap: 12px;
}

.bm-reach__label {
	color: var(--bm-text);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.bm-reach__colon { display: none; }

.bm-reach select {
	padding: 10px 36px 10px 16px;
	border: 1px solid var(--bm-line);
	border-radius: 0;
	background: var(--bm-black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 9.25 5.75' fill='none'%3E%3Cpath d='M1.125 1.125L4.625 4.625L8.125 1.125' stroke='%23ed1c24' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
	color: var(--bm-white);
	font-family: var(--bm-font-body);
	font-size: 0.8125rem;
	appearance: none;
}

.bm-reach select:focus { border-color: var(--bm-red); outline: 2px solid var(--bm-red); outline-offset: -2px; }

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

@media (min-width: 768px) { .bm-machines__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1200px) { .bm-machines__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.bm-mcard {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--bm-line-steel);
	background: var(--bm-coal-dark);
	transition: border-color 0.2s ease;
}

.bm-mcard[hidden] { display: none; }

.bm-mcard:hover,
.bm-mcard:focus-within { border-color: var(--bm-red); }
.bm-mcard:focus-within { outline: 2px solid var(--bm-white); outline-offset: 2px; }
.bm-mcard .stretched-link:focus-visible { outline: 0; }

.bm-mcard__img {
	display: block;
	width: 100%;
	height: 200px;
	object-fit: cover;
}

.bm-mcard__img--empty { background: var(--bm-steel); }

.bm-mcard__badge {
	position: absolute;
	top: 13px;
	left: 13px;
	z-index: 1;
	padding: 6px 10px;
	background: var(--bm-red);
	color: var(--bm-black);
	font-family: var(--bm-font-display);
	font-size: 1.375rem;
	line-height: 1.02;
	text-transform: uppercase;
}

.bm-mcard__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 22px 24px 24px 20px;
	border-left: 4px solid var(--bm-red);
}

.bm-mcard__type {
	margin: 0;
	color: var(--bm-text);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.bm-mcard__title {
	margin: 0;
	color: var(--bm-white);
	font-family: var(--bm-font-display);
	font-size: 1.875rem; /* 30px */
	font-weight: 400;
	line-height: 1.02;
	text-transform: uppercase;
}

.bm-mcard__title a { color: inherit; text-decoration: none; }

.bm-mcard__sub {
	margin: 0;
	color: var(--bm-text);
	font-size: 0.8125rem;
}

.bm-mcard__more {
	align-items: center;
	margin-top: auto;
	padding-top: 12px;
}

.bm-mcard__more .bm-icon { display: block; transition: transform 0.2s ease; }
.bm-mcard:hover .bm-mcard__more .bm-icon { transform: translateX(3px); }

.bm-machines__empty {
	margin: 2rem 0 0;
	color: var(--bm-text);
}

/* ==========================================================================
   ALASIVUT — mobiili (Figma: Mobiili V2 → MOBILE_Palvelu, MOBILE_Kalusto)
   ========================================================================== */

@media (max-width: 767.98px) {
	/* Alasivun hero */
	.bm-phero { min-height: 370px; }
	.bm-phero__inner { justify-content: flex-end; gap: 1rem; padding-block: 36px calc(40px + 10px); }
	.bm-crumbs ol, .bm-crumbs li { gap: 10px; }
	.bm-crumbs ol::before { width: 28px; }
	.bm-crumbs li { font-size: 0.625rem; }
	.bm-phero__text { gap: 1rem; }
	.bm-phero__title { font-size: 3.75rem; } /* 60px */
	.bm-phero__lead { font-size: 0.9375rem; }

	/* Teksti + kuva */
	.bm-mt { padding-block: 56px; }
	.bm-mt__text { gap: 1.5rem; }
	.bm-mt__title { font-size: 2.75rem; } /* 44px */
	.bm-mt__body { font-size: 0.9375rem; }
	.bm-mt__stat { padding: 14px 0 14px 12px; }
	.bm-mt__stat dd { font-size: 1.875rem; } /* 30px */
	.bm-mt__stat dt { font-size: 0.5625rem; } /* 9px */

	/* USP-lista: vaakarivit, numero vasemmalla */
	.bm-usp { padding-block: 56px; }
	.bm-usp .bm-head { margin-bottom: 1.5rem; }
	.bm-usp .bm-head__aside { display: none; }
	.bm-usp__list { gap: 0; }
	.bm-usp__item {
		flex-direction: row;
		gap: 1rem;
		padding: 18px 0 0;
		border-top: 1px solid var(--bm-line);
	}
	.bm-usp__item + .bm-usp__item { margin-top: 18px; }
	.bm-usp__item::before { display: none; }
	.bm-usp__num { font-size: 3.5rem; } /* 56px */
	.bm-usp__text { gap: 6px; padding-top: 4px; }
	.bm-usp__title { font-size: 1.5rem; }
	.bm-usp__text p { font-size: 0.8125rem; }

	/* Katso myös: kuva vasemmalla */
	.bm-cards--feature { padding-block: 56px; }
	.bm-cards--feature .bm-head { margin-bottom: 1.25rem; }
	.bm-cards--feature .bm-cards__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.bm-cards--feature .bm-card { flex-direction: row; align-items: stretch; }
	.bm-cards--feature .bm-card__img { flex: 0 0 120px; width: 120px; height: auto; min-height: 100px; }
	.bm-cards--feature .bm-card__body { flex: 1 1 auto; gap: 6px; padding: 16px 16px 16px 12px; }
	.bm-cards--feature .bm-card__title { font-size: 1.5rem; }
	.bm-cards--feature .bm-card__text { font-size: 0.75rem; line-height: 1.5; }
	.bm-cards--feature .bm-card__arrow { display: none; }
	.bm-cards--feature .bm-more { display: inline-flex; gap: 6px; padding-top: 4px; font-size: 0.625rem; }
	.bm-card__tag { padding: 4px 8px; font-size: 0.5625rem; }

	/* UKK */
	.bm-faq { padding-block: 56px; }
	.bm-faq__inner { gap: 1.25rem; }
	.bm-faq__head { gap: 0.75rem; }
	.bm-faq__lead { display: none; }
	.bm-faq__toggle { gap: 1rem; padding: 16px 0; font-size: 0.9375rem; }
	.bm-faq__icon { flex-basis: 23px; height: 12px; }
	.bm-faq__toggle.collapsed .bm-faq__icon { height: 23px; }
	.bm-faq__a { padding: 0 0 20px; font-size: 0.875rem; }

	/* Sitaatti */
	.bm-quote { padding-block: 72px; }
	.bm-quote__inner { gap: 1.25rem; }
	.bm-quote__mark { font-size: 6.875rem; } /* 110px */
	.bm-quote__text p { font-size: 2.5rem; } /* 40px */
	.bm-quote__text br { display: none; } /* Figma-mobiilissa rivit katkeavat vapaasti */
	.bm-quote__cite { font-size: 0.625rem; }
	.bm-quote__cite::before { display: none; }

	/* Konelistaus */
	.bm-machines { padding-block: 48px 64px; }
	.bm-machines__head { gap: 10px; margin-bottom: 1.25rem; }
	.bm-machines__title { font-size: 3rem; }
	.bm-machines__title-desk,
	.bm-machines__sort { display: none; }
	.bm-machines__title-mob { display: inline; }
	.bm-machines__count { font-size: 0.75rem; }

	.bm-machines__filters {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		margin: 0 calc(-1 * var(--bm-gutter)) 1.25rem;
		padding: 16px var(--bm-gutter);
	}

	.bm-chip { padding: 9px 14px; font-size: 0.625rem; }

	.bm-reach { position: relative; }
	.bm-reach__label {
		position: absolute;
		top: 50%;
		left: 14px;
		transform: translateY(-50%);
		color: var(--bm-white);
		font-size: 0.8125rem;
		font-weight: 400;
		letter-spacing: 0;
		text-transform: none;
		pointer-events: none;
	}
	.bm-reach__colon { display: inline; }
	.bm-reach select { width: 100%; padding-left: calc(14px + 5.9em); }

	.bm-mcard__img { height: 110px; }
	.bm-mcard__badge { top: 10px; left: 10px; padding: 4px 8px; font-size: 1rem; }
	.bm-mcard__body { gap: 4px; padding: 12px 12px 14px 8px; }
	.bm-mcard__type { font-size: 0.5rem; letter-spacing: 0.08em; }
	.bm-mcard__title { font-size: 1.25rem; }
	.bm-mcard__sub { display: none; }
	.bm-mcard__more { padding-top: 6px; font-size: 0.625rem; }
}

/* --- Koneen tiedot -ikkuna (Konelistaus → Tutustu) ------------------------ */

.bm-mcard__open {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-align: left;
	text-transform: inherit;
}

.bm-mcard__open:focus-visible { outline: 0; }

.bm-mdialog .modal-content {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--bm-line-steel);
	border-radius: 0;
	background: var(--bm-noise), var(--bm-coal-dark);
	color: var(--bm-text);
}

.bm-mdialog__slot { overflow-y: auto; }

.bm-mdialog__img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 50vh;
	object-fit: cover;
}

.bm-mdialog__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
	padding: 2rem 2.5rem 2.5rem 2.25rem;
	border-left: 4px solid var(--bm-red);
}

.bm-mdialog__title {
	margin: 0;
	color: var(--bm-white);
	font-family: var(--bm-font-display);
	font-size: clamp(2.25rem, 4vw, 3rem);
	font-weight: 400;
	line-height: 1.02;
	text-transform: uppercase;
}

.bm-mdialog__facts dd { text-transform: uppercase; }
.bm-mdialog__facts .bm-mdialog__fact-text {
	color: var(--bm-white);
	font-family: var(--bm-font-body);
	font-size: 1rem;
	line-height: 1.4;
	text-transform: none;
	white-space: normal;
}

.bm-mdialog__content { font-size: 0.9375rem; line-height: 1.65; }
.bm-mdialog__content p { margin: 0 0 1em; }
.bm-mdialog__content p:last-child { margin-bottom: 0; }
.bm-mdialog__content a { color: var(--bm-white); }

.bm-mdialog__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: rgba(15, 15, 15, 0.85);
}

.bm-mdialog__close::before,
.bm-mdialog__close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 8px;
	width: 24px;
	height: 3px;
	background: var(--bm-white);
	transform: rotate(45deg);
}

.bm-mdialog__close::after { background: var(--bm-red); transform: rotate(-45deg); }
.bm-mdialog__close:focus-visible { outline: 2px solid var(--bm-white); outline-offset: 2px; }

.modal-backdrop.show { opacity: 0.75; }

@media (max-width: 767.98px) {
	.bm-mdialog .modal-dialog { margin: 0.75rem; }
	.bm-mdialog__body { padding: 1.5rem 1.25rem 1.75rem 1rem; }
}

/* --- reCAPTCHA (lomakkeessa näkyvä valintaruutu) -------------------------- */

.bm-captcha { min-height: 78px; }

/* Googlen widget on kiinteästi 304px leveä: skaalataan kapeimmille näytöille */
@media (max-width: 359.98px) {
	.bm-captcha .g-recaptcha { transform: scale(0.9); transform-origin: 0 0; }
}

/* --- Kahden sarakkeen ruudukot tableteilla (640–991px) -------------------
   Pariton viimeinen kortti venytetään koko leveydelle, ettei yksi kortti jää
   puolikkaaksi rivin alkuun (palvelut 5 → 2+2+1, Katso myös 3 → 2+1). */
@media (min-width: 640px) and (max-width: 991.98px) {
	.bm-cards__grid > .bm-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.bm-cards__grid > .bm-card:last-child:nth-child(odd) .bm-card__text { max-width: 36rem; }
}

/* --- Footerin linkkilistat: pieni punainen nuoli alasivujen edessä -------- */

.bm-footer__col a {
	display: inline-flex;
	align-items: flex-start;
	gap: 0.5rem;
}

/* Nuoli ensimmäisen rivin korkeudelle, jos linkki rivittyy kahdelle riville */
.bm-footer__col a .bm-icon {
	height: 1.5em;
	align-items: center;
	color: var(--bm-red);
	transition: transform 0.2s ease;
}

.bm-footer__col a span { line-height: 1.5; }

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

/* ==========================================================================
   Referenssit (ei Figmassa: Katso myös -korttityyli + alasivun osat)
   ========================================================================== */

.bm-refs__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin: -1rem 0 2.5rem;
	padding-block: 24px;
	border-block: 1px solid var(--bm-line);
}

.bm-card[hidden] { display: none; }

.bm-ref__img--empty { display: block; height: 240px; background: var(--bm-steel); }

/* Toistomerkki kohteille, joilla on video */
.bm-ref__video {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	background: var(--bm-red);
	color: var(--bm-black);
	clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

.bm-ref__meta {
	margin: 0;
	color: var(--bm-text);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.bm-refs__empty {
	margin: 0;
	padding: 2.5rem;
	border: 1px dashed var(--bm-line-steel);
	color: var(--bm-text);
	text-align: center;
}

/* Kohteen sivu */
.bm-refpage { background: var(--bm-noise), var(--bm-coal-dark); }

.bm-refpage__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 3rem;
	align-items: start;
}

.bm-refpage__main {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.bm-refpage__video iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
}

.bm-refpage__img {
	display: block;
	width: 100%;
	height: auto;
	border-left: 6px solid var(--bm-red);
}

.bm-refpage__content {
	max-width: 48rem;
	color: var(--bm-text);
	font-size: 1rem;
	line-height: 1.65;
}

.bm-refpage__content p { margin: 0 0 1.25em; }
.bm-refpage__content :is(h2, h3) {
	margin: 1.5em 0 0.5em;
	color: var(--bm-white);
	font-family: var(--bm-font-display);
	font-weight: 400;
	line-height: 1.02;
	text-transform: uppercase;
}
.bm-refpage__content h2 { font-size: 2.5rem; }
.bm-refpage__content h3 { font-size: 1.75rem; }
.bm-refpage__content a { color: var(--bm-white); }

.bm-refpage__facts {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: 1.75rem;
	border: 1px solid var(--bm-line-steel);
	border-left: 4px solid var(--bm-red);
	background: var(--bm-coal);
}

.bm-refpage__facts dl { margin: 0; }

.bm-refpage__facts dl > div {
	padding-block: 14px;
	border-top: 1px solid var(--bm-line);
}

.bm-refpage__facts dl > div:first-child { padding-top: 0; border-top: 0; }

.bm-refpage__facts dt {
	margin-bottom: 4px;
	color: var(--bm-text);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.bm-refpage__facts dd {
	margin: 0;
	color: var(--bm-white);
	font-size: 1rem;
}

.bm-refpage__facts ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.bm-refpage__facts ul a { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--bm-white); text-decoration: none; }
.bm-refpage__facts ul a .bm-icon { color: var(--bm-red); }
.bm-refpage__facts ul a:hover { color: var(--bm-red); }

@media (min-width: 992px) {
	.bm-refpage__inner { grid-template-columns: minmax(0, 1fr) 340px; gap: 4rem; }
	.bm-refpage__facts { position: sticky; top: calc(var(--louhos-header-height) + 24px); }
}

@media (max-width: 767.98px) {
	.bm-refs__filters { flex-direction: column; align-items: stretch; margin-top: 0; }
	.bm-ref__img--empty { width: 120px; height: auto; min-height: 100px; }
	.bm-ref__video { top: 8px; left: 8px; width: 32px; height: 32px; }
	.bm-refpage__facts { padding: 1.25rem; }
}

.bm-refpage__content blockquote {
	margin: 0 0 1.5em;
	padding: 0 0 0 1.5rem;
	border-left: 4px solid var(--bm-red);
}

.bm-refpage__content blockquote p {
	margin: 0 0 0.75rem;
	color: var(--bm-white);
	font-family: var(--bm-font-display);
	font-size: clamp(1.75rem, 2.4vw, 2.5rem);
	font-style: normal;
	line-height: 1.05;
	text-transform: uppercase;
}

.bm-refpage__content blockquote cite {
	color: var(--bm-text);
	font-size: 0.75rem;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ==========================================================================
   Yhteystiedot: tietolaatikot ja henkilöstö (ei Figmassa, sivuston osista)
   ========================================================================== */

.bm-info { background: var(--bm-noise), var(--bm-coal-dark); }
.bm-info .bm-head { margin-bottom: 2.5rem; }

.bm-info__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) { .bm-info__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .bm-info__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.bm-info__box {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.75rem;
	border: 1px solid var(--bm-line-steel);
	border-left: 4px solid var(--bm-red);
	background: var(--bm-coal);
	color: var(--bm-text);
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* Korostettu laatikko: tilauskeskuksen tyyli (musta, viistetty kulma) */
.bm-info__box--hl { background: var(--bm-black); }
.bm-info__box--hl::after {
	content: "";
	position: absolute;
	top: -1px;
	right: -1px;
	width: 14px;
	height: 14px;
	background: var(--bm-red);
	clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.bm-info__title {
	margin: 0;
	color: var(--bm-red);
	font-family: var(--bm-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.bm-info__big {
	margin: 0;
	color: var(--bm-white);
	font-family: var(--bm-font-display);
	font-size: 2.5rem;
	line-height: 1.02;
	text-decoration: none;
}

.bm-info__box--hl .bm-info__big { color: var(--bm-red); }
a.bm-info__big:hover, a.bm-info__big:focus-visible { color: var(--bm-white); }

.bm-info__text p { margin: 0 0 0.75em; }
.bm-info__text p:last-child { margin-bottom: 0; }
.bm-info__text strong { color: var(--bm-white); font-weight: 600; }
.bm-info__text a { color: var(--bm-white); }
.bm-info__text a:hover { color: var(--bm-red); }

/* Henkilöstö */
.bm-people { background: var(--bm-noise), var(--bm-coal); }
.bm-people .bm-head { margin-bottom: 3rem; }

.bm-people__group + .bm-people__group { margin-top: 3.5rem; }

.bm-people__group-title {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0 0 1.5rem;
	color: var(--bm-white);
	font-family: var(--bm-font-display);
	font-size: 2.25rem;
	font-weight: 400;
	line-height: 1.02;
	text-transform: uppercase;
}

.bm-people__group-title::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--bm-line);
}

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

@media (min-width: 768px) { .bm-people__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1200px) { .bm-people__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.bm-person {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--bm-line-steel);
	background: var(--bm-coal-dark);
}

.bm-person__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 20%;
}

/* Ei kuvaa: nimikirjaimet ääriviivoina (kuten prosessin numerot) */
.bm-person__img--empty {
	display: grid;
	place-items: center;
	background: var(--bm-noise), var(--bm-steel);
	color: transparent;
	font-family: var(--bm-font-display);
	font-size: clamp(3.5rem, 7vw, 5.5rem);
	line-height: 1;
	text-transform: uppercase;
	-webkit-text-stroke: 1px var(--bm-outline);
}

.bm-person__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: 18px 20px 20px 16px;
	border-left: 4px solid var(--bm-red);
}

.bm-person__role {
	margin: 0;
	color: var(--bm-text);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.bm-person__name {
	margin: 0;
	color: var(--bm-white);
	font-family: var(--bm-font-display);
	font-size: 1.75rem;
	font-weight: 400;
	line-height: 1.02;
	text-transform: uppercase;
}

.bm-person__area {
	margin: 0;
	color: var(--bm-text);
	font-size: 0.8125rem;
}

.bm-person__contact {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	margin: auto 0 0;
	padding: 12px 0 0;
	list-style: none;
}

.bm-person__contact a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	max-width: 100%;
	color: var(--bm-white);
	font-size: 0.875rem;
	text-decoration: none;
}

.bm-person__contact a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-person__contact .bm-icon { color: var(--bm-red); }
.bm-person__contact a:hover, .bm-person__contact a:focus-visible { color: var(--bm-red); }

.bm-people__note {
	margin: 2.5rem 0 0;
	color: var(--bm-text);
	font-size: 0.875rem;
}

@media (max-width: 767.98px) {
	.bm-info__box { padding: 1.25rem; }
	.bm-info__big { font-size: 2rem; }
	.bm-people__group + .bm-people__group { margin-top: 2.5rem; }
	.bm-people__group-title { font-size: 1.75rem; margin-bottom: 1rem; }
	.bm-person__body { padding: 12px 12px 14px 10px; }
	.bm-person__name { font-size: 1.375rem; }
	.bm-person__contact a { font-size: 0.75rem; }
}

/* --- Header kutistuu vieritettäessä (assets/js/child.js: .is-scrolled) ----- */

.bm-header { transition: background-color 0.25s ease, box-shadow 0.25s ease; }

.bm-header.is-scrolled {
	background: rgba(15, 15, 15, 0.96);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

@media (min-width: 768px) {
	.bm-header.is-scrolled .bm-nav__inner { min-height: 72px; padding-block: 0.875rem; }
	.bm-header.is-scrolled .bm-brand__img { height: 38px; }
	/* Alavalikko pysyy linjassa matalamman headerin alareunaan */
	.bm-header.is-scrolled .bm-submenu { margin-top: 1rem; }
}

@media (max-width: 767.98px) {
	.bm-header.is-scrolled .bm-nav__inner { min-height: 56px; padding-block: 10px; }
	.bm-header.is-scrolled .bm-brand__img { height: 27px; }
}

@media (prefers-reduced-motion: reduce) {
	.bm-header, .bm-nav__inner, .bm-brand__img { transition: none; }
}

.bm-person[hidden] { display: none; }

/* --- Tietolaatikot: ikonit osoitteiden ja sähköpostien eteen --------------
   Samat viivaikonit kuin muualla (kirjekuori, sijainti), punaisina. Sähköposti-
   linkit saavat ikonin automaattisesti; osoitekappale luokalla bm-addr. */
.bm-info__text a[href^="mailto:"],
.bm-info__text .bm-addr {
	position: relative;
	display: inline-block;
	padding-left: 1.5rem;
}

.bm-info__text a[href^="mailto:"]::before,
.bm-info__text .bm-addr::before {
	content: "";
	position: absolute;
	left: 0;
	width: 14px;
	height: 14px;
	background: var(--bm-red);
	-webkit-mask: var(--bm-ico) no-repeat center / contain;
	mask: var(--bm-ico) no-repeat center / contain;
}

.bm-info__text a[href^="mailto:"] {
	--bm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13.6 10.1'%3E%3Cpath d='M0.8 1.3L6.8 5.8L12.8 1.3M0.8 0.8H12.8V9.3H0.8V0.8Z' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
	word-break: break-all;
}

.bm-info__text a[href^="mailto:"]::before { top: 0.3em; }

.bm-info__text .bm-addr {
	--bm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 0 1 16 0Z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='10' r='3' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
	display: block;
}

.bm-info__text .bm-addr::before { top: 0.25em; }

/* --- Puhelinnumerot leipätekstissä: ikoni eteen (inc/hooks/phone-links.php) --- */
a.bm-tel,
.bm-info__text a[href^="tel:"] {
	position: relative;
	display: inline-block;
	padding-left: 1.3rem;
	color: var(--bm-white);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	--bm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
}

a.bm-tel::before,
.bm-info__text a[href^="tel:"]::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 0.85em;
	height: 0.85em;
	background: var(--bm-red);
	transform: translateY(-50%);
	-webkit-mask: var(--bm-ico) no-repeat center / contain;
	mask: var(--bm-ico) no-repeat center / contain;
}

a.bm-tel:hover,
a.bm-tel:focus-visible { color: var(--bm-red); }


/* Otsikkokappale + osoite (esim. Postitse) ilman ylimääräistä väliä */
.bm-info__text p:has(+ .bm-addr) { margin-bottom: 0.25em; }

/* --- Tavallinen editorisisältö lohkojen välissä (esim. "Sisältö tulossa.") -- */
.entry-content > :is(p, h2, h3, h4, ul, ol, blockquote) { color: var(--bm-text); line-height: 1.65; }
.entry-content > :is(section, .bm-phero) + :is(p, h2, h3, h4, ul, ol, blockquote) { margin-top: var(--bm-section-y); }
.entry-content > :is(p, h2, h3, h4, ul, ol, blockquote):last-child { margin-bottom: var(--bm-section-y); }
.entry-content > :is(h2, h3, h4) { color: var(--bm-white); font-family: var(--bm-font-display); font-weight: 400; line-height: 1.02; text-transform: uppercase; }

/* ==========================================================================
   Complianz-selosteet (Tietosuojaseloste, Evästekäytäntö)
   Complianzin oma dokumentti-CSS on käytössä: ohitetaan #cmplz-document-
   tason valitsimilla, jotta teksti noudattaa sivuston typografiaa.
   ========================================================================== */

.entry-content > #cmplz-document {
	width: min(56rem, 100% - 2 * var(--bm-gutter));
	max-width: none;
	margin: var(--bm-section-y) auto;
	padding: 0;
	color: var(--bm-text);
	font-family: var(--bm-font-body);
	font-size: 1rem;
	line-height: 1.7;
}

#cmplz-document p,
#cmplz-document li,
#cmplz-document span {
	color: var(--bm-text);
	font-size: 1rem;
	line-height: 1.7;
}

#cmplz-document > p:first-child i {
	display: block;
	padding: 1rem 1.25rem;
	border-left: 4px solid var(--bm-red);
	background: var(--bm-coal);
	color: var(--bm-text);
	font-size: 0.875rem;
	font-style: normal;
}

#cmplz-document h2 {
	margin: 2.75rem 0 1rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--bm-line);
	color: var(--bm-white);
	font-family: var(--bm-font-display);
	font-size: clamp(1.75rem, 2.4vw, 2.25rem);
	font-weight: 400;
	line-height: 1.05;
	text-transform: uppercase;
}

#cmplz-document h3 {
	margin: 1.75rem 0 0.5rem;
	color: var(--bm-white);
	font-family: var(--bm-font-display);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.05;
	text-transform: uppercase;
}

#cmplz-document h4 {
	margin: 1rem 0 0.25rem;
	color: var(--bm-red);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

#cmplz-document ul { margin: 0 0 1.25rem; padding-left: 0; list-style: none; }
#cmplz-document ul li { position: relative; margin-bottom: 0.4rem; padding-left: 1.25rem; }
#cmplz-document ul li::before {
	content: "";
	position: absolute;
	top: 0.75em;
	left: 0;
	width: 8px;
	height: 2px;
	background: var(--bm-red);
}

#cmplz-document a { color: var(--bm-white); text-decoration: underline; text-decoration-color: var(--bm-red); text-underline-offset: 3px; overflow-wrap: anywhere; }
#cmplz-document a:hover, #cmplz-document a:focus-visible { color: var(--bm-red); }

/* Evästeluettelon haitari tummaksi */
#cmplz-document #cmplz-cookies-overview .cmplz-dropdown,
#cmplz-document .cmplz-dropdown {
	margin: 0 0 8px;
	border: 1px solid var(--bm-line-steel);
	border-left: 4px solid var(--bm-red);
	border-radius: 0;
	background: var(--bm-coal);
}

#cmplz-document .cmplz-dropdown summary.cmplz-service-header,
#cmplz-document #cmplz-cookies-overview .cmplz-service-header {
	padding: 14px 18px;
	border-radius: 0;
	background: var(--bm-coal);
	color: var(--bm-white);
	cursor: pointer;
}

#cmplz-document .cmplz-dropdown summary.cmplz-service-header::after { filter: invert(1) brightness(1.5); }
#cmplz-document .cmplz-dropdown[open] summary.cmplz-service-header { border-bottom: 1px solid var(--bm-line); }
#cmplz-document .cmplz-service-header > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; }

#cmplz-document .cmplz-service-header h3 {
	margin: 0;
	font-size: 1.375rem;
}

#cmplz-document .cmplz-service-header p {
	margin: 0;
	color: var(--bm-text);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

#cmplz-document .cmplz-service-description,
#cmplz-document .cmplz-sharing-data,
#cmplz-document .cookies-per-purpose {
	padding: 0 18px 12px;
	background: transparent;
}

#cmplz-document .cookies-per-purpose {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px 16px;
	margin: 0 18px 16px;
	padding: 12px 0 0;
	border: 0;
	border-top: 1px solid var(--bm-line);
}

#cmplz-document .cookies-per-purpose > div { padding: 0; border: 0; background: none; color: var(--bm-text); font-size: 0.875rem; }
#cmplz-document .cookies-per-purpose .purpose { grid-column: 1 / -1; }
#cmplz-document .cookies-per-purpose strong { color: var(--bm-white); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

@media (max-width: 767.98px) {
	#cmplz-document h2 { margin-top: 2rem; }
	#cmplz-document .cookies-per-purpose { grid-template-columns: minmax(0, 1fr); }
}

#cmplz-document #cmplz-cookies-overview .cmplz-dropdown .cmplz-service-header h3 {
	margin: 0;
	color: var(--bm-white);
	font-family: var(--bm-font-display);
	font-size: 1.375rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* Evästetaulukko (Complianz: valkoinen ruudukko) tummaksi */
#cmplz-document #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose,
#cmplz-document #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose > div {
	border-color: var(--bm-line) !important;
	background: transparent !important;
	color: var(--bm-text);
}

#cmplz-document #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose > div {
	padding: 10px 12px;
	border-bottom: 1px solid var(--bm-line);
}

#cmplz-document #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose .purpose h4 { margin: 0; }
#cmplz-document #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose strong { color: var(--bm-white); }
#cmplz-document #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose a { color: var(--bm-white); }

/* ==========================================================================
   Responsiivisuuskorjaukset (koko sivuston tarkistus 320–1920 px)
   ========================================================================== */

/* Evästetaulukko: Complianzin sarakeleveydet pois kapeilla näytöillä */
#cmplz-document #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose > div { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
#cmplz-document #cmplz-cookies-overview .cmplz-dropdown { max-width: 100%; }
@media (max-width: 767.98px) {
	#cmplz-document #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		width: auto !important;
		margin: 0 12px 12px !important;
	}
	#cmplz-document #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose > div { width: auto !important; grid-column: auto !important; }
	#cmplz-document .cmplz-service-description,
	#cmplz-document .cmplz-sharing-data { padding-inline: 12px; }
}

/* Etusivun hero pienillä puhelimilla: pisin sana (RAKENTAMISESSA) mahtuu */
@media (max-width: 767.98px) {
	.bm-hero__title { font-size: min(4.25rem, 17vw); }
	.bm-phero__title { font-size: min(3.75rem, 16vw); }
}

/* Kosketusalueet mobiilissa: vähintään ~32 px korkeat linkit */
@media (max-width: 767.98px) {
	.bm-footer__col ul { gap: 2px; }
	.bm-footer__col a { padding-block: 6px; }
	.bm-footer__order .bm-mail { padding-block: 6px; }
	.bm-footer__bottom a { display: inline-block; padding-block: 8px; }
	.bm-person__contact { gap: 0; }
	.bm-person__contact a { padding-block: 6px; }
	.bm-form__consent a { display: inline-block; padding-block: 6px; }
}

/* Complianzin piilotetut suostumusvalinnat eivät saa viedä tilaa asettelusta */
#cmplz-document .cmplz-accept-service.cmplz-hidden,
#cmplz-document .cmplz_consent_per_service_label {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	top: 0 !important;
	left: 0 !important;
}
#cmplz-document .cmplz-service-header { position: relative; overflow: hidden; }

@media (max-width: 767.98px) {
	.bm-order .bm-mail { padding-block: 6px; }
}

/* Henkilökortit pienillä puhelimilla: vaakakortti (kuva vasemmalla), jotta
   nimet ja sähköpostit mahtuvat kokonaan. */
@media (max-width: 479.98px) {
	.bm-people__grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.bm-person { flex-direction: row; }
	.bm-person__img { flex: 0 0 104px; width: 104px; height: auto; min-height: 130px; aspect-ratio: auto; }
	.bm-person__img--empty { font-size: 2.75rem; }
	.bm-person__body { padding: 12px 12px 12px 12px; }
	.bm-person__contact { padding-top: 6px; }
	.bm-person__contact a { font-size: 0.8125rem; }
}

/* ==========================================================================
   Sivupaneelin alavalikot vaakasuunnassa (drill-down, alle 1200px)
   Alavalikko on paneelin kokoinen kerros, joka liukuu oikealta päävalikon
   päälle. Kiinni ollessaan se on visibility: hidden (ei fokusoitavissa).
   ========================================================================== */

.bm-submenu__head { display: none; }

@media (max-width: 1199.98px) {
	.bm-nav__collapse.offcanvas-xl { overflow-x: hidden; }
	.bm-nav__collapse.offcanvas-xl:has(.bm-menu__item.is-open) { overflow-y: hidden; }

	.bm-menu__item { position: static; }

	.bm-menu__item > .bm-submenu,
	.bm-menu__item.is-open > .bm-submenu {
		position: absolute;
		inset: 0;
		z-index: 5;
		display: flex;
		flex-direction: column;
		gap: 0;
		margin: 0;
		padding: 0 var(--bm-gutter) 1.5rem;
		overflow-y: auto;
		border: 0;
		border-left: 4px solid var(--bm-red);
		background: var(--bm-noise), var(--bm-black);
		visibility: hidden;
		transform: translateX(100%);
		transition: transform 0.26s ease, visibility 0s linear 0.26s;
	}

	.bm-menu__item.is-open > .bm-submenu {
		visibility: visible;
		transform: none;
		transition: transform 0.26s ease, visibility 0s;
	}

	/* Päävalikko väistää hieman vasemmalle (syvyysvaikutelma) */
	.bm-menu,
	.bm-nav__cta,
	.bm-panel__contact { transition: transform 0.26s ease, opacity 0.26s ease; }
	.bm-nav__collapse:has(.bm-menu__item.is-open) :is(.bm-menu > .bm-menu__item > .bm-menu__link, .bm-menu > .bm-menu__item > .bm-menu__toggle, .bm-nav__cta, .bm-panel__contact) {
		opacity: 0;
		transform: translateX(-24px);
	}

	.bm-submenu__head {
		position: sticky;
		top: 0;
		z-index: 1;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
		margin: 0 calc(-1 * var(--bm-gutter)) 0.75rem;
		padding: 0 var(--bm-gutter) 1rem;
		border-bottom: 1px solid var(--bm-line);
		background: var(--bm-black);
	}

	.bm-submenu__back {
		display: inline-flex;
		align-items: center;
		gap: 0.625rem;
		min-height: var(--louhos-header-height);
		margin-bottom: 0.25rem;
		padding: 0;
		border: 0;
		background: none;
		color: var(--bm-text);
		font-family: var(--bm-font-body);
		font-size: 0.75rem;
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}

	.bm-submenu__back .bm-icon { color: var(--bm-red); transform: rotate(180deg); }
	.bm-submenu__back:hover,
	.bm-submenu__back:focus-visible { color: var(--bm-white); }
	.bm-submenu__back:focus-visible { outline: 2px solid var(--bm-white); outline-offset: 4px; }

	.bm-submenu__parent {
		display: inline-flex;
		align-items: center;
		gap: 0.75rem;
		color: var(--bm-white);
		font-family: var(--bm-font-display);
		font-size: 2.25rem;
		letter-spacing: 0.02em;
		line-height: 1.02;
		text-decoration: none;
		text-transform: uppercase;
	}

	.bm-submenu__parent .bm-icon { color: var(--bm-red); transition: transform 0.2s ease; }
	.bm-submenu__parent:hover,
	.bm-submenu__parent:focus-visible { color: var(--bm-red); }
	.bm-submenu__parent:hover .bm-icon { transform: translateX(4px); }

	.bm-submenu > li:not(.bm-submenu__head) { border-bottom: 1px solid var(--bm-line); }
	.bm-submenu .bm-submenu__link { padding: 0.875rem 0.25rem; font-size: 1rem; }

	/* Päävalikon nuoli osoittaa sivulle, koska alavalikko avautuu sivusuunnassa */
	.bm-menu__toggle .bm-icon,
	.bm-menu__toggle[aria-expanded="true"] .bm-icon { transform: rotate(-90deg); }
}

@media (max-width: 1199.98px) and (prefers-reduced-motion: reduce) {
	.bm-menu__item > .bm-submenu,
	.bm-menu__item.is-open > .bm-submenu { transition: none; }
}

/* Drill-down: paneelin yläreuna (logo + sulje) pysyy näkyvissä alavalikossa,
   ja alavalikolla ei ole omaa reunaviivaa (paneelilla on jo). */
@media (max-width: 1199.98px) {
	.bm-panel__head { height: var(--louhos-header-height); min-height: 0; }

	.bm-menu__item > .bm-submenu,
	.bm-menu__item.is-open > .bm-submenu {
		inset: var(--louhos-header-height) 0 0 0;
		border-left: 0;
	}

	.bm-submenu__back { min-height: 3.25rem; margin-bottom: 0; }
}

/* --- Footerin somekuvakkeet (Sivuston asetukset → Somekanavat) ------------- */
.bm-socials {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}

.bm-socials .bm-social { font-size: 1rem; text-decoration: none; }
.bm-socials .bm-social:focus-visible { outline: 2px solid var(--bm-white); outline-offset: 2px; }

@media (max-width: 767.98px) {
	.bm-socials { margin-top: 1rem; }
	.bm-socials .bm-social { width: 40px; height: 40px; margin-top: 0; }
}

/* ==========================================================================
   Hampurilainen → risti, kun sivupaneeli aukeaa (alle 1200px)
   Painike nostetaan paneelin päälle; paneelin oma sulkemispainike jää
   näkymättömäksi (fokuksen lukitus pitää sen näppäimistön ulottuvilla) ja
   tulee näkyviin samaan kohtaan vain näppäimistöfokuksella.
   ========================================================================== */

@media (max-width: 1199.98px) {
	.bm-nav__toggler {
		position: relative;
		z-index: 1060;
	}

	.bm-burger span {
		transform-origin: center;
		transition: transform 0.28s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.2s ease, width 0.28s ease, background-color 0.28s ease;
	}

	.bm-header.is-menu-open .bm-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
	.bm-header.is-menu-open .bm-burger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
	.bm-header.is-menu-open .bm-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); background: var(--bm-red); }

	/* Paneeli auki: header täyteen korkeuteen, jotta ikoni osuu paneelin yläriville */
	.bm-header.is-menu-open .bm-nav__inner { min-height: var(--louhos-header-height); }

	.bm-panel__close {
		position: absolute;
		top: 0;
		right: var(--bm-gutter);
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.bm-panel__close:focus-visible {
		top: calc((var(--louhos-header-height) - 40px) / 2);
		right: calc(var(--bm-gutter) - 8px);
		z-index: 1070;
		width: 40px;
		height: 40px;
		overflow: visible;
		clip: auto;
		background: var(--bm-black);
	}
}

@media (max-width: 1199.98px) and (prefers-reduced-motion: reduce) {
	.bm-burger span { transition: none; }
}

/* Näppäimistöfokus paneelin sulkemispainikkeessa: vain yksi risti näkyvissä */
@media (max-width: 1199.98px) {
	.bm-header:has(.bm-panel__close:focus-visible) .bm-burger { opacity: 0; }
}

/* Paneelin logo ei kutistu headerin mukana (sama koko joka kohdassa sivua) */
.bm-header.is-scrolled .bm-panel__head .bm-brand__img { height: 47px; }
@media (max-width: 767.98px) {
	.bm-header.is-scrolled .bm-panel__head .bm-brand__img { height: 31px; }
}